/** Shopify CDN: Minification failed

Line 1817:0 Unexpected "<"
Line 1887:0 Unexpected "<"
Line 2380:0 Expected "}" to go with "{"

**/
/* =========================================================
   POTENCIA SALVAJE – VISUAL UPGRADE (NO FLAT)
   Paleta: Ingles con Inteligencia
========================================================= */

:root{
  /* Paleta principal */
  --usa-bg:#0f172a;
  --usa-panel:#111827;
  --usa-text:#e5e7eb;
  --usa-muted:#94a3b8;

  --usa-blue:#1d4ed8;
  --usa-red:#dc2626;
  --usa-green:#10b981;

  --usa-border:rgba(148,163,184,.16);
  --usa-shadow:0 20px 45px rgba(0,0,0,.35);
}

/* Fondo general (saca lo plano) */
body{
  background:linear-gradient(
    180deg,
    #0b1220 0%,
    #0f172a 100%
  );
  color:var(--usa-text);
}

/* Secciones: separación visual */
.section,
.shopify-section{
  position:relative;
}

/* Cards / bloques */
.card,
.product-card,
.collection-card,
.box,
.panel{
  background:var(--usa-panel);
  border:1px solid var(--usa-border);
  box-shadow:var(--usa-shadow);
  border-radius:16px;
}

/* Headings */
h1,h2,h3{
  color:var(--usa-text);
}

/* Texto secundario */
p,
.subtitle,
.small-text{
  color:var(--usa-muted);
}

/* Botón principal */
.button,
.btn,
.btn-primary{
  background:linear-gradient(
    90deg,
    var(--usa-blue),
    var(--usa-red)
  );
  color:#fff;
  border:none;
  box-shadow:0 15px 35px rgba(29,78,216,.35);
}

.button:hover,
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 45px rgba(220,38,38,.4);
}

/* Botón secundario */
.btn-secondary,
.btn-outline{
  background:transparent;
  border:1px solid var(--usa-border);
  color:var(--usa-text);
}

/* HERO – quitar look lavado */
#hero,
.hero{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(29,78,216,.25), transparent 60%),
    radial-gradient(800px 480px at 85% 25%, rgba(220,38,38,.22), transparent 55%),
    linear-gradient(180deg, #0b1220, #0f172a);
}

/* Asegurar contraste del texto */
#hero *,
.hero *{
  color:var(--usa-text);
  opacity:1;
}

/* Acentos */
.accent,
.highlight{
  color:var(--usa-blue);
}
/* ================================
   FIX: HERO “LAVADO / GRIS FANTASMA”
   (anula opacity/filter/blend del theme)
================================ */

/* 1) Asegurar que el HERO no herede “lavado” */
#hero, #hero *{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 2) Forzar colores de texto reales en el HERO */
#hero{
  color:#0b1220 !important; /* base oscuro si tu hero es claro */
}

/* Si tu hero es oscuro, usa esto en vez del de arriba:
#hero{ color:#e5e7eb !important; }
*/

#hero .hero__title,
#hero .hero__title *{
  color:#0b1220 !important;
  -webkit-text-fill-color:#0b1220 !important;
}

/* Subtítulo y microcopy */
#hero .hero__subtitle,
#hero .hero__micro{
  color:rgba(11,18,32,.78) !important;
  -webkit-text-fill-color:rgba(11,18,32,.78) !important;
}

/* Bullets */
#hero .hero__bullets,
#hero .hero__bullets li{
  color:rgba(11,18,32,.90) !important;
  -webkit-text-fill-color:rgba(11,18,32,.90) !important;
}

/* Card derecha */
#hero .hero__cardTitle,
#hero .stat__k,
#hero .hero__note{
  color:#0b1220 !important;
  -webkit-text-fill-color:#0b1220 !important;
}
#hero .stat__t{
  color:rgba(11,18,32,.70) !important;
  -webkit-text-fill-color:rgba(11,18,32,.70) !important;
}

/* 3) Acento en gradiente (azul/rojo) */
#hero .hero__accent{
  background:linear-gradient(90deg,#1d4ed8,#dc2626) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
/* =========================================
   HERO PREMIUM – USA OSCURA (solo #hero)
   Paleta: #0f172a #111827 #e5e7eb #94a3b8
           #1d4ed8 #dc2626 #10b981
========================================= */

#hero{
  position:relative;
  overflow:hidden;
  background:#0f172a !important;
  color:#e5e7eb !important;
}

/* Fondo con vida */
#hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1100px 560px at 18% 15%, rgba(29,78,216,.26), transparent 62%),
    radial-gradient(900px 520px at 86% 18%, rgba(220,38,38,.22), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg, #0b1220, #0f172a);
  z-index:0;
}

/* Asegurar que el contenido quede arriba */
#hero > *{ position:relative; z-index:1; }

/* Si tu hero usa .hero__overlay / .hero__bg, anulamos lavado */
#hero .hero__bg, #hero .hero__overlay{
  background:transparent !important;
}

/* Texto */
#hero .hero__title{ color:#e5e7eb !important; text-shadow:0 14px 36px rgba(0,0,0,.45); }
#hero .hero__subtitle{ color:#94a3b8 !important; }
#hero .hero__micro{ color:rgba(148,163,184,.85) !important; }

/* Badge */
#hero .hero__badge{
  background:rgba(17,24,39,.68) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  color:#e5e7eb !important;
  box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(10px);
}

/* Acento “sin vergüenza” */
#hero .hero__accent{
  background:linear-gradient(90deg,#1d4ed8,#dc2626) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* Bullets: dejan de ser “inputs” */
#hero .hero__bullets li{
  background:rgba(17,24,39,.66) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  color:#e5e7eb !important;
  box-shadow:0 12px 28px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(10px);
}

/* Botones */
#hero .btn--primary{
  background:linear-gradient(90deg,#1d4ed8,#dc2626) !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(29,78,216,.18), 0 18px 40px rgba(220,38,38,.14) !important;
}
#hero .btn--ghost{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(229,231,235,.22) !important;
  color:#e5e7eb !important;
}

/* Card derecha (panel oscuro pro) */
#hero .hero__card{
  background:rgba(17,24,39,.92) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(12px);
}
#hero .hero__cardTop{
  background:linear-gradient(90deg, rgba(29,78,216,.18), rgba(220,38,38,.14)) !important;
  border-bottom:1px solid rgba(148,163,184,.16) !important;
}
#hero .hero__cardTitle{ color:#e5e7eb !important; }
#hero .stat{
  background:rgba(15,23,42,.55) !important;
  border:1px solid rgba(148,163,184,.14) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.22) !important;
}
#hero .stat__k{ color:#e5e7eb !important; }
#hero .stat__t{ color:#94a3b8 !important; }
#hero .hero__note{
  background:linear-gradient(180deg, rgba(16,185,129,.10), rgba(15,23,42,.40)) !important;
  border:1px solid rgba(16,185,129,.22) !important;
  color:#e5e7eb !important;
}
/* ===== HERO: FIX FINAL (texto claro sobre fondo oscuro) ===== */
#hero{ color:#e5e7eb !important; }

#hero .hero__title,
#hero .hero__title *{
  color:#e5e7eb !important;
  -webkit-text-fill-color:#e5e7eb !important;
}

#hero .hero__subtitle,
#hero .hero__micro{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}

#hero .hero__bullets,
#hero .hero__bullets li,
#hero .hero__bullets li *{
  color:#e5e7eb !important;
  -webkit-text-fill-color:#e5e7eb !important;
  opacity:1 !important;
}

#hero .hero__cardTitle,
#hero .stat__k,
#hero .hero__note,
#hero .hero__note *{
  color:#e5e7eb !important;
  -webkit-text-fill-color:#e5e7eb !important;
}

#hero .stat__t{
  color:#94a3b8 !important;
  -webkit-text-fill-color:#94a3b8 !important;
}
/* =================================================
   HERO – PREMIUM LIMPIO (NO PEDORRO)
   Inspirado en inglesconinteligencia.com
================================================= */

#hero{
  position:relative;
  background:#0f172a !important;
  color:#e5e7eb !important;
}

/* Fondo oscuro simple, sin empaste */
#hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 420px at 20% 15%, rgba(29,78,216,.18), transparent 60%),
    linear-gradient(180deg, #0b1220, #0f172a);
  z-index:0;
}

#hero > *{
  position:relative;
  z-index:1;
}

/* Título */
#hero .hero__title{
  color:#e5e7eb !important;
  text-shadow:none;
}

/* Acento SOLO en la palabra clave */
#hero .hero__accent{
  background:linear-gradient(90deg,#1d4ed8,#dc2626) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* Subtítulo */
#hero .hero__subtitle{
  color:#94a3b8 !important;
}

/* Badge */
#hero .hero__badge{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  color:#e5e7eb !important;
}

/* ===== BULLETS → BENEFICIOS (no inputs) ===== */
#hero .hero__bullets{
  gap:8px;
}
#hero .hero__bullets li{
  background:transparent !important;
  border:none !important;
  padding:6px 0;
  box-shadow:none !important;
  color:#e5e7eb !important;
  font-weight:500;
}
#hero .hero__bullets li::before{
  content:"✔";
  color:#10b981;
  margin-right:8px;
}

/* ===== BOTONES ===== */
#hero .btn--primary{
  background:linear-gradient(90deg,#1d4ed8,#dc2626) !important;
  box-shadow:0 12px 30px rgba(29,78,216,.25);
}
#hero .btn--ghost{
  background:transparent !important;
  border:1px solid rgba(148,163,184,.28) !important;
  color:#e5e7eb !important;
}

/* ===== CARD DERECHA (acompaña, no compite) ===== */
#hero .hero__card{
  background:#111827 !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
#hero .hero__cardTop{
  background:#111827 !important;
}
#hero .hero__cardTitle{
  color:#e5e7eb !important;
}
#hero .stat{
  background:#0f172a !important;
  border:1px solid rgba(148,163,184,.14) !important;
}
#hero .stat__k{ color:#e5e7eb !important; }
#hero .stat__t{ color:#94a3b8 !important; }

#hero .hero__note{
  background:#0f172a !important;
  border:1px solid rgba(16,185,129,.25) !important;
  color:#e5e7eb !important;
}
/* ===== HERO: tipografía moderna (solo hero) ===== */
#hero{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#hero .hero__title{
  font-family: Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#hero .hero__subtitle{
  font-weight: 500;
}

#hero .hero__bullets li{
  font-weight: 600;
}

/* Botones un poco más “premium” */
#hero .btn{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
}
/* 10% más pro: aire + legibilidad */
#hero .hero__title{ max-width: 18ch; }
#hero .hero__subtitle{ max-width: 62ch; }
/* ===== HERO – PULIDO FINAL (aire + jerarquía + premium) ===== */

/* 1) Título: un toque menos “mazacote” + mejor lectura */
#hero .hero__title{
  max-width: 20ch;
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 850;
}
@media (min-width: 1024px){
  #hero .hero__title{ font-size: clamp(44px, 4.1vw, 58px); }
}

/* 2) Subtítulo: más legible y con mejor presencia */
#hero .hero__subtitle{
  max-width: 64ch;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(148,163,184,.92) !important;
}

/* 3) Bullets: más “premium list” (menos pesado) */
#hero .hero__bullets{ margin-top: 16px; }
#hero .hero__bullets li{
  font-weight: 600;
  color: rgba(229,231,235,.95) !important;
}
#hero .hero__bullets li::before{
  margin-right: 10px;
  opacity: .9;
}

/* 4) Badge: menos borde, más glass */
#hero .hero__badge{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
}

/* 5) CTA: más “botón premium” (hover real) */
#hero .btn{
  border-radius: 16px;
  padding: 14px 18px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#hero .btn--primary{
  box-shadow: 0 16px 36px rgba(29,78,216,.22), 0 16px 36px rgba(220,38,38,.16) !important;
}
#hero .btn--primary:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 22px 52px rgba(29,78,216,.28), 0 22px 52px rgba(220,38,38,.22) !important;
}
#hero .btn--ghost{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(148,163,184,.22) !important;
}
#hero .btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

/* 6) Card derecha: un poquito más “glass” + separación */
#hero .hero__card{
  background: rgba(17,24,39,.90) !important;
  border-color: rgba(148,163,184,.20) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.42) !important;
}
#hero .stat{
  background: rgba(15,23,42,.60) !important;
  border-color: rgba(148,163,184,.16) !important;
}
#hero .hero__note{
  background: rgba(15,23,42,.60) !important;
  border-color: rgba(16,185,129,.22) !important;
}

/* 7) Microcopy: un toque más claro */
#hero .hero__micro{
  color: rgba(148,163,184,.92) !important;
}
/* ===== HERO · PULIDO FINAL DEFINITIVO ===== */

/* 1) Fondo: menos protagonista, más elegante */
#hero .hero__bg{
  opacity: .85;
}
#hero{
  background: radial-gradient(
    1200px 600px at 15% 20%,
    rgba(10,49,97,.18),
    transparent 55%
  );
}

/* 2) Detalle de marca bajo el título */
#hero .hero__title{
  position: relative;
}
#hero .hero__title::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:16px;
  border-radius:999px;
  background: linear-gradient(90deg,#1d4ed8,#dc2626);
  opacity:.9;
}

/* 3) Bullets: más “producto”, menos lista */
#hero .hero__bullets li{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(148,163,184,.14) !important;
  padding:12px 14px;
}
#hero .hero__bullets li:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.22);
}

/* 4) CTA secundario más discreto */
#hero .btn--ghost{
  color: rgba(229,231,235,.85) !important;
}
#hero .hero__title{
  font-weight: 700; /* antes 800 */
  letter-spacing: -0.015em;
}
#hero .hero__subtitle{
  line-height: 1.7;
  opacity: .9;
}
#hero .hero__bullets li{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#hero .btn--primary{
  box-shadow:
    0 12px 30px rgba(29,78,216,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}
#hero .hero__title{
  font-weight: 700;   /* si está en 800, bajarlo */
  letter-spacing: -0.015em;
}
#hero .hero__subtitle{
  line-height: 1.7;
  opacity: .9;
}
#hero .hero__bullets li{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#hero .hero__title{
  font-weight: 700;
  letter-spacing: -0.02em;
}
#hero .hero__subtitle{
  line-height: 1.7;
  opacity: 0.9;
}
#hero .hero__bullets li{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#hero .btn--primary{
  box-shadow:
    0 14px 32px rgba(37,99,235,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}
/* ===============================
   SECCIÓN MÉTODO – ESTILO PREMIUM
   =============================== */

.metodo-section{
  background:#0f172a;
  padding:80px 0;
}

.metodo-title{
  color:#e5e7eb;
  font-weight:800;
  letter-spacing:-0.02em;
}

.metodo-subtitle{
  color:#94a3b8;
  max-width:640px;
}

.metodo-card{
  background:rgba(17,24,39,.7);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.metodo-card-icon{
  font-size:32px;
  margin-bottom:12px;
}
/* =========================================================
   MÉTODO – USA OSCURA (FIX CONTRASTE + LOOK PREMIUM)
   Pegarlo al FINAL de assets/stylesheet.css
   ========================================================= */

.metodo{
  background: radial-gradient(900px 520px at 18% 0%, rgba(29,78,216,.22), transparent 55%),
              radial-gradient(900px 520px at 92% 22%, rgba(220,38,38,.18), transparent 55%),
              linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
  color: #e5e7eb !important;
  padding: 84px 0 !important;
}

.metodo h2, .metodo .title, .metodo .heading, .metodo__title{
  color:#e5e7eb !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
}

.metodo p, .metodo .subtitle, .metodo__subtitle{
  color:#94a3b8 !important;
}

.metodo .card, .metodo .box, .metodo .feature, .metodo .metodo-card{
  background: rgba(17,24,39,.72) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
}

.metodo .card h3, .metodo .box h3, .metodo .feature h3{
  color:#e5e7eb !important;
  font-weight:800 !important;
}

.metodo .card p, .metodo .box p, .metodo .feature p{
  color:#94a3b8 !important;
}

.metodo .card:hover, .metodo .box:hover, .metodo .feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0,0,0,.42) !important;
  border-color: rgba(255,255,255,.16) !important;
}
/* =========================================================
   METHOD SECTION — USA OSCURA (premium)
   Pegar al FINAL de assets/stylesheet.css
   ========================================================= */

.method-section{
  /* fondo premium como el HERO */
  background:
    radial-gradient(900px 520px at 16% 0%, rgba(29,78,216,.22), transparent 55%),
    radial-gradient(900px 520px at 92% 22%, rgba(220,38,38,.18), transparent 55%),
    linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
  padding: 84px 20px !important;
  color: #e5e7eb !important;
  position: relative;
  overflow: hidden;
}

/* leve “bloom” para que no se vea plano */
.method-section::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 260px at 35% 30%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 300px at 70% 70%, rgba(255,255,255,.04), transparent 65%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.7;
}

.method-container{
  max-width: 980px !important;
  position: relative;
  z-index: 1;
  text-align: center;
}

.method-container h2{
  color:#e5e7eb !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing:-0.02em !important;
  margin-bottom: 12px !important;
}

.method-intro{
  color:#94a3b8 !important;
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  max-width: 66ch;
  margin: 0 auto 40px !important;
}

/* grid más “aireado” */
.method-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px !important;
}

@media (min-width: 768px){
  .method-cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px !important;
  }
}

/* cards pro: glass + borde suave + hover */
.method-card{
  background: rgba(17,24,39,.72) !important;     /* #111827 */
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.35) !important;
  text-align: left !important;
  backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.method-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* icon con “badge” */
.method-card .icon{
  font-size: 22px !important;
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 12px !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}

/* títulos y texto */
.method-card h3{
  color:#e5e7eb !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  margin: 0 0 8px !important;
}

.method-card p{
  color:#94a3b8 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* ===== METHOD: polish pro (más contraste + tipografía + acento) ===== */

.method-section{
  padding: 92px 20px !important;
}

/* Tipografía consistente con hero (sin serif) */
.method-container, 
.method-container *{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

.method-container h2{
  font-size: 40px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  margin-bottom: 14px !important;
  color: #e5e7eb !important;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
  position: relative;
}

/* subrayado “marca” (USA) */
.method-container h2::after{
  content:"";
  display:block;
  width: 92px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #dc2626);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  opacity: .95;
}

.method-intro{
  color:#a7b2c4 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 70ch;
  margin-bottom: 44px !important;
}

/* Cards: más contraste y look premium */
.method-card{
  background: rgba(17,24,39,.86) !important; /* + opacidad */
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 20px !important;
  padding: 26px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45) !important;
  position: relative;
  overflow: hidden;
}

/* brillo suave arriba (da “vida”) */
.method-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(29,78,216,.14), transparent 60%),
    radial-gradient(420px 160px at 80% 0%, rgba(220,38,38,.10), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

/* Hover más fino */
.method-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55) !important;
}

/* Icon badge mejor */
.method-card .icon{
  width: 48px; height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  display: inline-flex !important;
  align-items: center; justify-content: center;
  margin-bottom: 14px !important;
  position: relative;
  z-index: 1;
}

.method-card h3{
  color:#e5e7eb !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
  position: relative;
  z-index: 1;
}

.method-card p{
  color:#9aa6bb !important; /* más legible que el gris apagado */
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  position: relative;
  z-index: 1;
}

@media (max-width: 520px){
  .method-container h2{ font-size: 32px !important; }
  .method-section{ padding: 72px 16px !important; }
}
/* ==============================
   UNIFICAR TIPOGRAFÍA (HERO + MÉTODO)
   ============================== */

:root{
  --font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Forzamos TODA la sección método */
.method-section,
.method-section *{
  font-family: var(--font-main) !important;
}

/* Ajustes finos para que matchee con el hero */
.method-container h2{
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

.method-card h3{
  font-weight: 800 !important;
}

.method-card p,
.method-intro{
  font-weight: 400 !important;
}
.method-card.featured{
  border: 1px solid rgba(59,130,246,.35);
  box-shadow: 0 20px 60px rgba(59,130,246,.15);
  transform: translateY(-4px);
}
.method-card.featured {
  border: 1px solid rgba(99,102,241,.45);
  box-shadow: 0 30px 80px rgba(99,102,241,.25);
  transform: translateY(-6px);
}
.method-note{
  margin-top:40px;
  color:#cbd5e1;
  font-size:15px;
  text-align:center;
}
/* ===============================
   DESIGN SYSTEM – INGLES CON INTELIGENCIA
   =============================== */

:root {
  --bg-dark: #0f172a;
  --card-dark: #111827;
  --text-main: #e5e7eb;
  --text-soft: #94a3b8;

  --usa-blue: #1d4ed8;
  --usa-red: #dc2626;

  --radius-lg: 22px;
  --radius-md: 16px;
}
h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 21px;
  font-weight: 600;
}

p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-soft);
}
/* ===== Typography System (Poppins headings + Inter body) ===== */
:root{
  --font-head: Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body{
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,.hero__title,.method-container h2,.method-card h3{
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}

/* Jerarquía (se siente más pro) */
.hero__title{ font-weight: 800; }
.hero__subtitle, .method-intro{ font-weight: 500; opacity:.92; }
.method-card p{ font-weight: 500; opacity:.9; line-height:1.6; }
.method-container h2{
  font-weight: 800;
  letter-spacing: -0.03em;
}
.method-intro{
  opacity: .95;
  max-width: 720px;
  margin-inline: auto;
}
.method-card{
  backdrop-filter: blur(6px);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.01)
  );
}
.method-intro {
  font-size: 17px;
  opacity: 0.95;
}
.method-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.benefits-section {
  background: linear-gradient(
    180deg,
    #0f172a,
    #111827
  );
}
.benefits-section {
  background: #0b1325;
}
.benefit-card {
  background: rgba(255,255,255,.06);
}
.benefits-cta {
  background: linear-gradient(90deg, #2563eb, #dc2626);
  color: #fff;
  font-weight: 700;
  border-radius: 14px;
  padding: 16px 28px;
  box-shadow: 0 20px 40px rgba(37,99,235,.35);
}
/* ===== SECCIÓN BENEFICIOS – FONDO DIFERENTE ===== */
.shopify-section:has(h2:contains("Beneficios")),
.shopify-section:has(h2:contains("Beneficios reales")) {
  background: linear-gradient(
    135deg,
    #0a3161 0%,
    #0b1325 55%,
    #111827 100%
  ) !important;
  padding-top: 80px;
  padding-bottom: 80px;
}
/* ===== SECCIÓN BENEFICIOS ===== */
.benefits-section {
  background: linear-gradient(
    135deg,
    #0a3161 0%,
    #0b1325 55%,
    #111827 100%
  );
  padding: 80px 0;
}
/* ===============================
   SECCIÓN BENEFICIOS – CAMBIO DE FONDO
   =============================== */

.shopify-section:has(h2:contains("Beneficios reales")) {
  background: linear-gradient(
    135deg,
    #0a3161 0%,
    #0b1325 55%,
    #111827 100%
  ) !important;

  padding-top: 90px !important;
  padding-bottom: 90px !important;
}
.shopify-section:has(h2:contains("Beneficios reales")) {
  background: red !important;
}
/* TEST: si esto no cambia, NO estás en la sección beneficios */
#beneficios{
  background: #0f172a !important;
  color:#e5e7eb !important;
  outline: 4px solid #ff0033 !important; /* solo para test */
}
/* ===== BENEFICIOS (Custom Liquid) ===== */
#shopify-section-template--21186201223388__custom_liquid_77ArHq{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(10,49,97,.55), transparent 55%),
              radial-gradient(1000px 520px at 80% 0%, rgba(179,25,66,.35), transparent 60%),
              linear-gradient(180deg, #0b1223 0%, #0f172a 100%) !important;
  padding: 72px 0 !important;
}

#shopify-section-template--21186201223388__custom_liquid_77ArHq .global__section{
  color:#e5e7eb !important;
}

/* Títulos / textos dentro de la sección */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h1,
#shopify-section-template--21186201223388__custom_liquid_77ArHq h2,
#shopify-section-template--21186201223388__custom_liquid_77ArHq h3{
  color:#e5e7eb !important;
}

#shopify-section-template--21186201223388__custom_liquid_77ArHq p{
  color:#94a3b8 !important;
}

/* Cards (agarra la mayoría de layouts típicos) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .card,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .benefit,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .benefit-card,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"]{
  background: rgba(17,24,39,.72) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Texto dentro de cards */
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"] h3,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"] h4{
  color:#e5e7eb !important;
}
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"] p{
  color:#94a3b8 !important;
}

/* Botón (si es <a> o <button>) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq a.button,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .button,
#shopify-section-template--21186201223388__custom_liquid_77ArHq button{
  background: linear-gradient(90deg,#0A3161,#B31942) !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}
#shopify-section-template--21186201223388__custom_liquid_77ArHq a.button:hover,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .button:hover,
#shopify-section-template--21186201223388__custom_liquid_77ArHq button:hover{
  filter: brightness(1.06);
}
.ps-beneficios__title{
  font-size: clamp(30px, 3.6vw, 40px);
  letter-spacing: -0.015em;
}
.ps-beneficios__sub{
  max-width: 680px;
  color: #a3b1c6;
}
.ps-beneficio{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ps-beneficio:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.22);
}
.ps-beneficios::before{
  content:"";
  display:block;
  width:120px;
  height:4px;
  margin:0 auto 26px;
  border-radius:4px;
  background:linear-gradient(90deg,#0A3161,#B31942);
  opacity:.9;
}
.ps-beneficios{
  background: radial-gradient(900px 500px at 15% 15%, rgba(10,49,97,.55), rgba(10,49,97,0) 55%),
              radial-gradient(900px 500px at 85% 20%, rgba(179,25,66,.45), rgba(179,25,66,0) 60%),
              #0b1220;
  padding: 90px 0;
}
.ps-beneficios h2, .ps-beneficios h3 { color:#e5e7eb; }
.ps-beneficios p { color:#a3b1c6; }
.ps-beneficios .card, .ps-beneficios .benefit-card{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
/* =========================
   VIDEO EXPLICATIVO (CC)
   Ajusta contraste + look premium
   ========================= */

/* 1) Contenedor de la sección (cambia el ID si te aparece otro) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq{
  background:#f6f8fb !important;
  padding:56px 0 !important;
}

/* 2) TITULO Y SUBTITULO (lo que hoy se ve "lavado") */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h2,
#shopify-section-template--21186201223388__custom_liquid_77ArHq h1,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .h2,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .h1{
  color:#0f172a !important;          /* oscuro, se lee perfecto */
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

#shopify-section-template--21186201223388__custom_liquid_77ArHq p{
  color:#475569 !important;          /* subtítulo con contraste */
  font-size:18px !important;
  line-height:1.6 !important;
}

/* 3) Layout (video izq + cards der) — sin romper mobile */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .page-width,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .container,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .section{
  max-width:1180px !important;
}

/* 4) Tarjetas (las 3 de la derecha) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .card,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq .rich-text__blocks > div,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid__item .content-container{
  background:#ffffff !important;
  border:1px solid #dbe3ee !important;
  border-radius:18px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

/* 5) Video (iframe) con borde + sombra premium */
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe{
  border-radius:22px !important;
  box-shadow:0 16px 40px rgba(15,23,42,.12) !important;
  overflow:hidden !important;
}

/* 6) Iconos con gradiente USA (si son spans/divs) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .icon,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="icon"]{
  background:linear-gradient(135deg,#0A3161,#123b7a 55%,#B31942) !important;
  border-radius:14px !important;
  color:#fff !important;
}

/* 7) Mobile: stack correcto */
@media (max-width: 980px){
  #shopify-section-template--21186201223388__custom_liquid_77ArHq{
    padding:44px 0 !important;
  }
  #shopify-section-template--21186201223388__custom_liquid_77ArHq p{
    font-size:16px !important;
  }
}
/* =========================
   FIX TEXTO GRIS (NO SE VE)
   Video explicativo
   ========================= */

/* Cards de la derecha: títulos */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h3,
#shopify-section-template--21186201223388__custom_liquid_77ArHq strong{
  color:#0f172a !important;   /* negro real */
  opacity:1 !important;
}

/* Texto descriptivo dentro de las cards */
#shopify-section-template--21186201223388__custom_liquid_77ArHq p,
#shopify-section-template--21186201223388__custom_liquid_77ArHq span,
#shopify-section-template--21186201223388__custom_liquid_77ArHq li{
  color:#1f2937 !important;   /* gris oscuro, legible */
  opacity:1 !important;
}

/* Shopify a veces mete esto */
#shopify-section-template--21186201223388__custom_liquid_77ArHq *{
  --tw-text-opacity:1 !important;
}

/* Iconos (check, auricular, robot) para que no queden lavados */
#shopify-section-template--21186201223388__custom_liquid_77ArHq svg,
#shopify-section-template--21186201223388__custom_liquid_77ArHq i{
  opacity:1 !important;
  color:#0A3161 !important;
}
/* =========================
   PULIDO PREMIUM (Video + Cards)
   ========================= */

/* Fondo y aire */
#shopify-section-template--21186201223388__custom_liquid_77ArHq{
  background:#f6f8fb !important;
  padding:60px 0 !important;
}

/* Título y subtítulo centrados y con presencia */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h2,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .h2{
  color:#0f172a !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  line-height:1.05 !important;
}
#shopify-section-template--21186201223388__custom_liquid_77ArHq p{
  color:#334155 !important;
}

/* Cards: más premium (borde suave + sombra pro + hover) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .card,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid__item .content-container,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .rich-text__blocks > div{
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:18px !important;
  box-shadow:0 14px 34px rgba(15,23,42,.10) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#shopify-section-template--21186201223388__custom_liquid_77ArHq .card:hover,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="card"]:hover,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid__item .content-container:hover,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .rich-text__blocks > div:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 18px 46px rgba(15,23,42,.14) !important;
}

/* Titulitos de cards un toque más fuertes */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h3{
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}

/* Video: mismo look premium */
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe{
  border-radius:22px !important;
  box-shadow:0 18px 46px rgba(15,23,42,.14) !important;
}

/* Mobile: un poco menos padding */
@media (max-width: 980px){
  #shopify-section-template--21186201223388__custom_liquid_77ArHq{padding:44px 0 !important;}
}
/* ======================================
   VIDEO + 3 CARDS + CTA (arreglo del vacío)
   ====================================== */

#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid{
  display:grid !important;
  grid-template-columns: 1.2fr .8fr !important;
  gap:18px !important;
  align-items:start !important;
}

/* 1) Video (item 1) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid > .grid__item:nth-child(1){
  grid-column:1 !important;
}

/* 2) Columna derecha (cards) (item 2) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid > .grid__item:nth-child(2){
  grid-column:2 !important;
}

/* 3) CTA (item 3 o 4, según tu layout): lo mandamos abajo y centrado */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid > .grid__item:nth-child(3),
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid > .grid__item:nth-child(4){
  grid-column:1 / -1 !important;
  max-width:560px !important;
  margin:14px auto 0 !important;
}

/* Quita aire extra abajo */
#shopify-section-template--21186201223388__custom_liquid_77ArHq{
  padding-bottom:40px !important;
}

/* Mobile: todo a una columna */
@media (max-width: 980px){
  #shopify-section-template--21186201223388__custom_liquid_77ArHq .grid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================
   FIX VACÍO: hacer que el video acompañe altura
   (sin tocar HTML)
   ========================================= */

/* 1) El layout: estirar items */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .grid,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="grid"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="columns"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="layout"]{
  align-items: stretch !important;
}

/* 2) Contenedor del iframe: que pueda ocupar 100% de alto */
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtu.be"]{
  width:100% !important;
  height:100% !important;
  min-height:520px !important;       /* subilo/bajalo si querés */
  border-radius:22px !important;
  box-shadow:0 18px 46px rgba(15,23,42,.14) !important;
}

/* 3) El padre directo del iframe (muy importante) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"]{
  display:block !important;
}
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"]{
  max-height:none !important;
}
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"]{
  aspect-ratio:auto !important;
}

/* 4) Mobile: vuelve a 16:9 aprox para que no quede gigante */
@media (max-width: 980px){
  #shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"],
  #shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtu.be"]{
    min-height:260px !important;
    height:auto !important;
  }
}
/* =========================================
   VIDEO PRO: alto premium SIN deformar
   ========================================= */

#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtu.be"]{
  width:100% !important;
  aspect-ratio:16 / 9 !important;   /* mantiene proporción */
  height:auto !important;
  min-height:480px !important;       /* alto premium */
  max-height:620px !important;       /* evita que quede gigante */
  border-radius:22px !important;
  box-shadow:0 18px 46px rgba(15,23,42,.14) !important;
}

/* Si el theme mete un wrapper con altura fija, lo neutralizamos */
#shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"]{
  max-width:100% !important;
}

/* Mobile */
@media (max-width: 980px){
  #shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtube"],
  #shopify-section-template--21186201223388__custom_liquid_77ArHq iframe[src*="youtu.be"]{
    min-height:240px !important;
    max-height:360px !important;
  }
}
/* Ajuste premium: un poquito menos alto el CTA para que balancee */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .button,
#shopify-section-template--21186201223388__custom_liquid_77ArHq a.button,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .btn{
  padding:14px 20px !important;
  border-radius:16px !important;
  font-weight:800 !important;
}
/* Comparación: más contraste visual */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .comparison-left{
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
}

#shopify-section-template--21186201223388__custom_liquid_77ArHq .comparison-right{
  background:#ffffff !important;
  border:2px solid #0A3161 !important;
}
/* =========================
   SECCIÓN BONOS – FIX PREMIUM
   ========================= */

/* 1) TÍTULO Y SUBTÍTULO */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h2{
  color:#0f172a !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

#shopify-section-template--21186201223388__custom_liquid_77ArHq h2 + p{
  color:#334155 !important;
  font-size:18px !important;
  margin-top:6px !important;
}

/* 2) CARDS DE BONOS */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .bonus,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="bonus"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq .card{
  background:#ffffff !important;
  border:2px solid #e2e8f0 !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.08) !important;
  padding:20px 22px !important;
  margin-bottom:16px !important;
}

/* 3) BADGE GRATIS (que se note) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .gratis,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="gratis"]{
  background:#16a34a !important;
  color:#ffffff !important;
  font-weight:800 !important;
  font-size:12px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  letter-spacing:.04em !important;
}

/* 4) TITULO DEL BONO */
#shopify-section-template--21186201223388__custom_liquid_77ArHq h3{
  color:#0f172a !important;
  font-weight:850 !important;
  margin:6px 0 4px !important;
}

/* 5) TEXTO DEL BONO */
#shopify-section-template--21186201223388__custom_liquid_77ArHq p{
  color:#475569 !important;
  line-height:1.5 !important;
}

/* 6) ÍCONOS MÁS GRANDES */
#shopify-section-template--21186201223388__custom_liquid_77ArHq img,
#shopify-section-template--21186201223388__custom_liquid_77ArHq svg{
  width:42px !important;
  height:42px !important;
}

/* 7) HOVER SUTIL (premium) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}
/* === PATCH PREMIUM BONOS (compacto + más pro) === */

/* Cards un toque más compactas */
.ici-bonuses .card{
  padding:16px 18px !important;
  min-height:132px !important;
}

/* Título y descripción: mejor ritmo */
.ici-bonuses .title{ font-size:17px !important; }
.ici-bonuses .desc{ font-size:14.5px !important; margin-top:6px !important; }

/* Badge más “premium” */
.ici-bonuses .badge{
  background:rgba(22,163,74,.10) !important;
  border:1px solid rgba(22,163,74,.30) !important;
  box-shadow:0 10px 18px rgba(22,163,74,.10) !important;
}

/* Mini highlight inferior (sensación de “regalo”) */
.ici-bonuses .card:after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:12px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(10,49,97,.22), rgba(179,25,66,.18), rgba(22,163,74,.18));
  opacity:.9;
  pointer-events:none;
}

/* Hover más fino */
.ici-bonuses .card:hover{
  transform:translateY(-3px) !important;
}

/* Mobile: alinear mejor icon + badge */
@media (max-width: 900px){
  .ici-bonuses .icon{ width:44px !important; height:44px !important; }
  .ici-bonuses .badge{ margin-bottom:8px !important; }
}
/* =========================
   FIX BOTONES PLANES
   ========================= */

/* Cards: más aire abajo */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .pricing-card,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="plan"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="price"]{
  padding-bottom:28px !important;
  overflow:hidden !important;
}

/* Botones: centrados y contenidos */
#shopify-section-template--21186201223388__custom_liquid_77ArHq a.button,
#shopify-section-template--21186201223388__custom_liquid_77ArHq .btn,
#shopify-section-template--21186201223388__custom_liquid_77ArHq button{
  display:block !important;
  width:100% !important;
  margin-top:18px !important;
  border-radius:16px !important;
  padding:14px 18px !important;
  font-weight:800 !important;
}

/* Card destacada (Más elegido) */
#shopify-section-template--21186201223388__custom_liquid_77ArHq .featured,
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="featured"],
#shopify-section-template--21186201223388__custom_liquid_77ArHq [class*="highlight"]{
  transform:translateY(-4px);
}
/* ================================
   FIX DEFINITIVO – SECCIÓN ELIGE TU PLAN
   ================================ */

/* 1) Cards de planes */
section:has(h2:contains("Elige tu plan")),
section:has(h1:contains("Elige tu plan")){
  padding-bottom:80px !important;
}

/* Cards internas */
section:has(h2:contains("Elige tu plan")) .card,
section:has(h2:contains("Elige tu plan")) [class*="plan"],
section:has(h2:contains("Elige tu plan")) [class*="pricing"]{
  padding-bottom:32px !important;
  overflow:hidden !important;
  position:relative !important;
}

/* 2) Botones dentro de planes */
section:has(h2:contains("Elige tu plan")) a,
section:has(h2:contains("Elige tu plan")) button{
  display:block !important;
  width:100% !important;
  margin-top:22px !important;
  position:relative !important;
  bottom:auto !important;
}

/* 3) Eliminar empujes raros del theme */
section:has(h2:contains("Elige tu plan")) *{
  transform:none !important;
}

/* 4) Mobile: más aire todavía */
@media (max-width: 768px){
  section:has(h2:contains("Elige tu plan")) .card,
  section:has(h2:contains("Elige tu plan")) [class*="plan"]{
    padding-bottom:36px !important;
  }
}
/* =========================
   HEADER BLANCO – FIX TOTAL
   ========================= */

header,
.header,
.shopify-section-header {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* textos y links */
header a,
.header a,
.shopify-section-header a {
  color: #0f172a !important;
  text-decoration: none;
}

/* hover */
header a:hover {
  color: #0A3161 !important;
}

/* íconos (menu, search, cart, account) */
header svg,
.header svg {
  fill: #0f172a !important;
  color: #0f172a !important;
}

/* contador del carrito */
.cart-count,
.cart-count-bubble {
  background: #0A3161 !important;
  color: #ffffff !important;
}

/* botón menú hamburguesa */
header button,
.header button {
  color: #0f172a !important;
}

/* quitar sombras raras si las hay */
header {
  box-shadow: 0 6px 20px rgba(2,6,23,.08);
}
/* =========================
   HEADER: orden + tipografía
   ========================= */

/* 1) Tipografía premium SOLO para header (no toca todo el sitio) */
.shopify-section-header,
.shopify-section-header *{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Ocultar el “Skip to content” (en landing molesta visualmente)
      Si querés mantenerlo por accesibilidad, lo dejamos fuera de pantalla */
a[href="#MainContent"],
a.skip-to-content-link{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* 3) Quitar bullets/listas raras que aparecen en tu header */
.shopify-section-header ul,
.shopify-section-header ol{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* 4) Header blanco prolijo, con altura y alineación */
.shopify-section-header header,
.shopify-section-header .header{
  background:#fff !important;
  border-bottom:1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,.06) !important;
}

/* 5) Layout: logo a la izquierda, iconos a la derecha (funciona en Dawn/Sense y similares) */
.shopify-section-header .header__inline-menu,
.shopify-section-header .header__icons,
.shopify-section-header .header__icon,
.shopify-section-header .header__heading,
.shopify-section-header .header__heading-link{
  align-self:center !important;
}

.shopify-section-header .header__heading-link{
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color:#0f172a !important;
}

/* 6) Links e iconos: limpios */
.shopify-section-header a{
  color:#0f172a !important;
  text-decoration:none !important;
}
.shopify-section-header a:hover{color:#0A3161 !important}

.shopify-section-header svg,
.shopify-section-header .icon{
  color:#0f172a !important;
  fill:#0f172a !important;
}

/* 7) Botones “Cuenta / Carrito” que te están quedando cuadrados (parecen focus outlines)
      Suavizamos estilos sin romper accesibilidad */
.shopify-section-header a:focus,
.shopify-section-header button:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(10,49,97,.18) !important;
  border-radius: 12px !important;
}

/* 8) Espaciado general del header */
.shopify-section-header .header{
  padding-top:10px !important;
  padding-bottom:10px !important;
}
/* Extra: evitar que se muestre texto “Cuenta / Mi carrito” como lista */
.shopify-section-header nav *{
  list-style:none !important;
}
.shopify-section-header .list-menu,
.shopify-section-header .menu-drawer__menu,
.shopify-section-header .header__menu-item{
  list-style:none !important;
}
<style>
  .landingHeader{
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #ffffff;
    border-bottom: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 8px 24px rgba(2,6,23,.06);
  }

  .landingHeader__wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  /* IMAGEN TAL CUAL */
  .brandImage{
    width: min(520px, 92vw);  /* grande pero responsive */
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 22px rgba(2,6,23,.18));
  }

  .brandName{
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -.02em;
    color: #0f172a;
    margin-top: 2px;
  }

  .nav{
    display:flex;
    gap:10px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn{
    padding:10px 18px;
    border-radius:999px;
    font-weight:900;
    font-size:14px;
    text-decoration:none;
    background:#f1f5f9;
    color:#0f172a;
    border:1px solid rgba(15,23,42,.12);
    transition:transform .15s ease, filter .15s ease;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  }
  .btn:hover{transform:translateY(-1px);}

  .btn--primary{
    border:none;
    color:#fff;
    background:linear-gradient(90deg,#0A3161,#153d7a 55%,#B31942);
    box-shadow:0 12px 26px rgba(10,49,97,.25);
  }

  @media (max-width:640px){
    .brandName{font-size:20px;}
  }
</style>

<header class="landingHeader">
  <div class="landingHeader__wrap">

    <!-- IMPORTANTe: poné el nombre exacto del archivo en Assets -->
    <img
      class="brandImage"
      src="{{ 'El Texto Del Párrafo - 1.png' | asset_url }}"
      alt="Inglés con Inteligencia"
      loading="eager"
      onerror="this.style.display='none'; document.getElementById('imgFallback').style.display='block';"
    >

    <div id="imgFallback" style="display:none; font-weight:800; color:#0f172a;">
      ⚠️ No se encontró la imagen en Assets. Revisá el nombre del archivo.
    </div>

    <div class="brandName">Inglés con Inteligencia</div>

    <nav class="nav">
      <a href="#faq" class="btn">Preguntas</a>
      <a href="#planes" class="btn btn--primary">Elegir plan</a>
    </nav>

  </div>
</header>
/* ===== LANDING SPACING FIX ===== */

/* Secciones generales */
section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Custom liquid (muchas veces trae padding enorme) */
.shopify-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hero -> siguiente sección */
#hero + section,
#hero + .shopify-section {
  padding-top: 48px !important;
}

/* Mobile más compacto */
@media (max-width: 768px) {
  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
/* ===== AJUSTE ESPACIO HEADER → HERO ===== */

/* quita margen que Shopify mete arriba del hero */
#shopify-section-hero,
.shopify-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ajusta separación real entre header y hero */
#iciTopbar {
  margin-bottom: 0 !important;
}

/* si el hero tiene padding propio */
.hero,
.hero-section {
  padding-top: 32px !important; /* probá 24px si querés más pegado */
}
/* ============================= */
/* AJUSTE DE ESPACIADO LANDING   */
/* ============================= */

/* Reduce espacio header → hero */
.template-page header + section,
.template-page header + .shopify-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce espacio entre secciones */
.template-page .shopify-section {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

/* Hero más pegado */
.template-page .shopify-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ajuste fino para desktop */
@media (min-width: 768px) {
  .template-page .shopify-section {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
}
/* =========================
   FIX REAL MOBILE – PRICING CARDS
   ========================= */

.plan-card{
  position: relative;
  z-index: 1;
}

@media (max-width: 900px){
  .plan-card{
    min-height: auto !important;
    overflow: visible !important;
  }

  .plans-grid > .plan-card{
    margin-bottom: 24px;
  }

  .plans-grid > .plan-card:last-child{
    margin-bottom: 0;
  }
}
/* =========================
   FIX REAL MOBILE – PRICING CARDS
   ========================= */

.plan-card{
  position: relative;
  z-index: 1;
}

@media (max-width: 900px){
  .plan-card{
    min-height: auto !important;
    overflow: visible !important;
  }

  .plans-grid > .plan-card{
    margin-bottom: 24px;
  }

  .plans-grid > .plan-card:last-child{
    margin-bottom: 0;
  }
}
/* =========================
   GARANTÍA — FIX MOBILE (corte de CTA)
   ========================= */
#garantia{ overflow-x:hidden; }
#garantia *{ box-sizing:border-box; max-width:100%; }

@media (max-width: 900px){
  /* la card grande */
  #garantia .card,
  #garantia .guarantee-card,
  #garantia .box,
  #garantia .panel{
    overflow: visible !important;     /* ✅ evita que “corte” los botones */
  }

  /* más aire abajo para que el CTA respire */
  #garantia .card,
  #garantia .guarantee-card,
  #garantia .box,
  #garantia .panel{
    padding-bottom: 22px !important;
  }

  /* botones: que nunca empujen ancho y queden centrados */
  #garantia a,
  #garantia button{
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
/* =========================
   GARANTÍA — FIX MOBILE (corte de CTA)
   ========================= */
#garantia{ overflow-x:hidden; }
#garantia *{ box-sizing:border-box; max-width:100%; }

@media (max-width: 900px){
  /* la card grande */
  #garantia .card,
  #garantia .guarantee-card,
  #garantia .box,
  #garantia .panel{
    overflow: visible !important;     /* ✅ evita que “corte” los botones */
  }

  /* más aire abajo para que el CTA respire */
  #garantia .card,
  #garantia .guarantee-card,
  #garantia .box,
  #garantia .panel{
    padding-bottom: 22px !important;
  }

  /* botones: que nunca empujen ancho y queden centrados */
  #garantia a,
  #garantia button{
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
}
/* =========================
   PLANES — Mobile FIX BLINDADO
   (scoped al #planes)
   ========================= */

#planes{ overflow-x:hidden; }
#planes *{ box-sizing:border-box; max-width:100%; }

@media (max-width: 900px){

  /* 1) Separación real entre cards (premium) */
  #planes .plans-grid{
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;   /* más aire entre cards */
  }

  /* 2) Por si el theme mete transform/overflow raro */
  #planes .plan-card{
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;           /* mantiene borde/radius prolijo */
  }

  /* 3) Pills: nunca desbordan + quedan alineados */
  #planes .top{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #planes .pill{
    white-space: normal !important;
  }

  /* 4) CTA: evita que “empuje” ancho en algunos temas */
  #planes .cta{
    white-space: normal !important;
  }
}
/* =========================
   EMPIEZA HOY — FIX MOBILE
   ========================= */

@media (max-width: 900px){

  /* sección */
  .start-section,
  .cta-section{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* card principal */
  .start-section > div,
  .cta-section > div,
  .start-card,
  .cta-card{
    padding: 28px 18px 34px !important; /* 🔥 MÁS AIRE ABAJO */
    border-radius: 20px !important;
  }

  /* título */
  .start-section h2,
  .cta-section h2{
    margin-bottom: 12px !important;
    line-height: 1.15;
  }

  /* texto */
  .start-section p,
  .cta-section p{
    margin-bottom: 14px !important;
    line-height: 1.5;
  }

  /* BOTÓN PRINCIPAL */
  .start-section a,
  .cta-section a{
    display: block;
    width: 100%;
    margin-top: 22px !important;   /* 🔥 CLAVE */
    margin-bottom: 14px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
  }

  /* texto chico inferior */
  .start-section small,
  .start-section .micro,
  .cta-section small,
  .cta-section .micro{
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    display: block;
    text-align: center;
  }
}
/* =========================
   EMPIEZA HOY — Mobile FIX (card más ancha)
   ========================= */

#empieza-hoy{ overflow-x:hidden; }
#empieza-hoy *{ box-sizing:border-box; }

@media (max-width: 900px){

  /* La sección: menos aire y padding lateral consistente */
  #empieza-hoy{
    padding: 22px 14px !important;
    margin: 0 !important;
  }

  /* El contenedor interno (si existe) que te angosta la card */
  #empieza-hoy .container,
  #empieza-hoy .page-width,
  #empieza-hoy .wrap,
  #empieza-hoy .inner{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }

  /* La CARD grande (agarra el primer “bloque tarjeta” típico) */
  #empieza-hoy > *{
    max-width: 100%;
  }

  #empieza-hoy .card,
  #empieza-hoy .cta-card,
  #empieza-hoy .start-card,
  #empieza-hoy .box{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;              /* 🔥 elimina el margen que la angosta */
    border-radius: 18px !important;
    padding: 26px 18px 26px !important;
  }

  /* Botón: 100% y sin “encastre” raro */
  #empieza-hoy a,
  #empieza-hoy button{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin: 18px 0 14px !important;
    white-space: normal !important;
  }

  /* Microcopy inferior centrado */
  #empieza-hoy .micro,
  #empieza-hoy small,
  #empieza-hoy p:last-child{
    margin: 0 !important;
    text-align:center;
  }
}
/* =========================
   EMPIEZA HOY — Mobile FIX (card más ancha)
   ========================= */

#empieza-hoy{ overflow-x:hidden; }
#empieza-hoy *{ box-sizing:border-box; }

@media (max-width: 900px){

  /* La sección: menos aire y padding lateral consistente */
  #empieza-hoy{
    padding: 22px 14px !important;
    margin: 0 !important;
  }

  /* El contenedor interno (si existe) que te angosta la card */
  #empieza-hoy .container,
  #empieza-hoy .page-width,
  #empieza-hoy .wrap,
  #empieza-hoy .inner{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }

  /* La CARD grande (agarra el primer “bloque tarjeta” típico) */
  #empieza-hoy > *{
    max-width: 100%;
  }

  #empieza-hoy .card,
  #empieza-hoy .cta-card,
  #empieza-hoy .start-card,
  #empieza-hoy .box{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;              /* 🔥 elimina el margen que la angosta */
    border-radius: 18px !important;
    padding: 26px 18px 26px !important;
  }

  /* Botón: 100% y sin “encastre” raro */
  #empieza-hoy a,
  #empieza-hoy button{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin: 18px 0 14px !important;
    white-space: normal !important;
  }

  /* Microcopy inferior centrado */
  #empieza-hoy .micro,
  #empieza-hoy small,
  #empieza-hoy p:last-child{
    margin: 0 !important;
    text-align:center;
  }
}
/* =========================
   EMPIEZA HOY — Mobile FIX (card más ancha)
   ========================= */

#empieza-hoy{ overflow-x:hidden; }
#empieza-hoy *{ box-sizing:border-box; }

@media (max-width: 900px){

  /* La sección: menos aire y padding lateral consistente */
  #empieza-hoy{
    padding: 22px 14px !important;
    margin: 0 !important;
  }

  /* El contenedor interno (si existe) que te angosta la card */
  #empieza-hoy .container,
  #empieza-hoy .page-width,
  #empieza-hoy .wrap,
  #empieza-hoy .inner{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }

  /* La CARD grande (agarra el primer “bloque tarjeta” típico) */
  #empieza-hoy > *{
    max-width: 100%;
  }

  #empieza-hoy .card,
  #empieza-hoy .cta-card,
  #empieza-hoy .start-card,
  #empieza-hoy .box{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;              /* 🔥 elimina el margen que la angosta */
    border-radius: 18px !important;
    padding: 26px 18px 26px !important;
  }

  /* Botón: 100% y sin “encastre” raro */
  #empieza-hoy a,
  #empieza-hoy button{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin: 18px 0 14px !important;
    white-space: normal !important;
  }

  /* Microcopy inferior centrado */
  #empieza-hoy .micro,
  #empieza-hoy small,
  #empieza-hoy p:last-child{
    margin: 0 !important;
    text-align:center;
  }
}