/* =============================================================
   Galipán APP — Landing
   Tokens de marca tomados de la app Flutter (lib/app/core/theme/color.dart)
   ============================================================= */

/* Tipografía Inter (auto-alojada, misma que la app) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Inter-Bold.ttf") format("truetype"); }

:root {
  /* Marca / identidad */
  --brand:        #30B3EE; /* azul de marca (icono/splash) */
  --brand-dark:   #1E8FC4;
  --primary:      #2F80ED; /* azul primario */
  --secondary:    #DE667B; /* rosa */
  --accent:       #1F9F33; /* verde */

  /* Neutros (tema claro) */
  --bg:           #F9FAFB;
  --surface:      #FFFFFF;
  --surface-2:    #F3F4F6;
  --text:         #1F2937;
  --text-2:       #4B5563;
  --text-3:       #5F6773; /* 5,7:1 en blanco y 5,1:1 sobre la banda */
  --border:       #E5E7EB;
  --band:         #EFF3F8; /* fondo de las secciones alternas */
  --azul-texto:   #1F66C9; /* azul legible como texto pequeño: 5:1 sobre la banda */
  --cta-a:        #1E5FBE; /* degradado de la llamada final: sostiene texto */
  --cta-b:        #1B7FA8; /* blanco con 4,5:1 en ambos extremos */

  /* Escala tipográfica de seis pasos (razón ~1.25). Antes convivían
     trece tamaños y un encabezado de tarjeta medía lo mismo que un
     párrafo de sección. */
  --t-xs: .8rem;    /* metadatos: chips, pies de foto, notas */
  --t-sm: .9rem;    /* apoyo: etiquetas de dato */
  --t-md: 1rem;     /* cuerpo */
  --t-lg: 1.125rem; /* entradilla y subtítulo de sección */
  --t-xl: 1.25rem;  /* todos los encabezados de tarjeta */

  /* Tema oscuro (footer / secciones) */
  --ink:          #0B1220;
  --ink-2:        #111827;
  --ink-3:        #1B2638;

  /* Sistema */
  --radius:       16px;
  --radius-sm:    12px;
  --radius-lg:    28px;
  --shadow-sm:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow:       0 8px 24px rgba(16,24,40,.10);
  --shadow-lg:    0 24px 60px rgba(16,24,40,.18);
  --maxw:         1120px;
  --gutter:       clamp(20px, 5vw, 48px);
  --font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Profundidad en capas: una sombra corta que asienta y otra larga y
     difusa que separa del fondo. Es lo que da sensación de altura. */
  --shadow-xl:    0 2px 6px rgba(16,24,40,.06), 0 30px 70px -20px rgba(16,24,40,.35);
  --shadow-marco: 0 4px 10px rgba(16,24,40,.10), 0 40px 80px -24px rgba(16,24,40,.45);

  /* Curvas: una suave para lo cotidiano y una con rebote leve para lo
     que debe sentirse vivo al aparecer. */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

/* ------------------------- Tema oscuro ------------------------------
   Se redefinen solo los tokens; todos los componentes ya se pintan a
   través de ellos. Tres estados: preferencia del sistema y las dos
   elecciones explícitas, que mandan sobre él. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A111C; --surface: #121B29; --surface-2: #1A2536;
    --text: #EAEEF5; --text-2: #AEBACC; --text-3: #7B8AA1;
    --border: #24314A; --primary: #5B9BF3; --brand: #45BEF2;
    --band: #0F1826;
    --azul-texto: #7FB4F7; --cta-a: #1E5FBE; --cta-b: #1B7FA8;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow:    0 8px 24px rgba(0,0,0,.42);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
    --shadow-xl: 0 2px 6px rgba(0,0,0,.4), 0 30px 70px -20px rgba(0,0,0,.7);
    --shadow-marco: 0 4px 10px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --bg: #0A111C; --surface: #121B29; --surface-2: #1A2536;
  --text: #EAEEF5; --text-2: #AEBACC; --text-3: #7B8AA1;
  --border: #24314A; --primary: #5B9BF3; --brand: #45BEF2;
  --band: #0F1826;
  --azul-texto: #7FB4F7; --cta-a: #1E5FBE; --cta-b: #1B7FA8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 8px 24px rgba(0,0,0,.42);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --shadow-xl: 0 2px 6px rgba(0,0,0,.4), 0 30px 70px -20px rgba(0,0,0,.7);
  --shadow-marco: 0 4px 10px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.8);
}

/* ------------------------------- Reset ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ------------------------------ Layout ------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 110px); }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 14px;
}
.section-head { max-width: 680px; margin-bottom: clamp(36px, 6vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; }
.section-sub { margin-top: 16px; color: var(--text-2); font-size: var(--t-lg); line-height: 1.6; }

/* ------------------------------ Botones ------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: .98rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: #2570d6; }

/* ----------------------- Badges tiendas (SVG) ------------------------ */
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; }
.store-badge { display: inline-flex; justify-content: center; min-width: 182px; transition: transform .15s ease, opacity .15s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img, .store-badge svg { height: 54px; width: auto; }
.store-badge[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* ------------------------------ Header ------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; height: 68px;
  /* Separación mínima garantizada: en alemán y ruso la marca llegaba a
     tocar el primer enlace. */
  gap: clamp(16px, 2.5vw, 40px);
}
.brand { flex: none; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.12rem; }
.brand .mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--brand); box-shadow: var(--shadow-sm);
}
.brand .mark img { width: 26px; height: 26px; }
.brand b { color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--text-2); font-weight: 500; font-size: .96rem; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ------------------------------- Hero -------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 560px at 78% -12%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
    radial-gradient(700px 420px at 8% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 11%, var(--bg)) 0%, var(--bg) 62%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px);
  align-items: center; padding-block: clamp(48px, 8vw, 96px);
}
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; }
.hero h1 .hl { color: var(--primary); }
.hero-lead { margin-top: 20px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-2); max-width: 32ch; }
.hero-actions { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.hero-note { font-size: var(--t-xs); color: var(--text-3); }

/* width:max-content hace que los porcentajes de los distintivos se
   calculen sobre el teléfono y no sobre la columna: antes se despegaban
   en chino, árabe e italiano según lo largo que fuera el texto. */
.phone-wrap { position: relative; display: grid; place-items: center; width: max-content; margin-inline: auto; }

/* Los distintivos van DETRÁS del teléfono y asoman por los lados: antes
   se pintaban encima (vienen después en el orden del documento) y
   tapaban la pantalla de la app, que es justo lo que hay que enseñar.
   El desplazamiento es un porcentaje DE SÍ MISMOS, así que asoman lo
   mismo en los diez idiomas por largo que sea el texto. */

.phone-wrap .marco { position: relative; z-index: 2; }


/* --------------------------- Tira de stats --------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 16px; box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--primary); }
.stat span { color: var(--text-2); font-size: var(--t-sm); }

/* ---------------------------- Features ------------------------------- */
.features-grid {
  display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 600px)  { .features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1090px) { .features-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; } }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-img { aspect-ratio: 16 / 11; overflow: hidden; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feature:hover .feature-img img { transform: scale(1.05); }
.feature-body { padding: 20px 20px 24px; }
@media (min-width: 1090px) { .feature-body { padding: 18px 18px 22px; } }
.feature-body h3 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.feature-body p { margin-top: 8px; color: var(--text-2); font-size: var(--t-md); line-height: 1.55; }

/* ------------------------- Bloque "cómo" ----------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
/* Alternancia real izquierda/derecha. Solo cuando hay dos columnas: al
   apilar, el texto debe ir siempre primero. */
@media (min-width: 901px) {
  .split.reverse > *:first-child { order: 2; }
  .split.reverse > *:last-child  { order: 1; }
}
.steps { display: grid; gap: 22px; margin-top: 8px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step .num {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: var(--primary);
}
.step:nth-child(2) .num { background: var(--secondary); }
.step:nth-child(3) .num { background: var(--accent); }
.step h3 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.step p { color: var(--text-2); margin-top: 5px; font-size: var(--t-md); line-height: 1.55; }

/* ------------------------------- CTA --------------------------------- */
.cta {
  background: linear-gradient(135deg, var(--cta-a), var(--cta-b));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 7vw, 72px) var(--gutter);
  text-align: center; box-shadow: var(--shadow-lg);
}
.cta h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; }
.cta p { margin-top: 14px; opacity: 1; color: rgba(255,255,255,.94); font-size: var(--t-lg); }
.cta .store-badges { justify-content: center; margin-top: 30px; }

/* ------------------------------ Footer ------------------------------- */
.site-footer { background: var(--ink); color: #cbd5e1; padding-block: 56px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer .brand b, .site-footer .brand { color: #fff; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; font-weight: 700; }
.site-footer a, .site-footer li { color: #94a3b8; font-size: .92rem; line-height: 2; }
.site-footer a:hover { color: #fff; }
.footer-desc { margin-top: 14px; max-width: 30ch; font-size: .92rem; color: #94a3b8; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10); margin-top: 40px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: var(--t-xs); color: #94A3B8;
}
.footer-bottom a { color: #94a3b8; }

/* ----------------------- Páginas legales/soporte --------------------- */
.page-hero { background: linear-gradient(180deg, #eaf6fd, var(--bg)); padding-block: clamp(48px, 7vw, 84px) clamp(24px,4vw,40px); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; }
.page-hero p { margin-top: 12px; color: var(--text-2); }
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: 1.4rem; font-weight: 700; margin-top: 40px; }
.prose h3 { font-size: 1.1rem; font-weight: 700; margin-top: 26px; }
.prose p, .prose li { color: var(--text-2); margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ul li { margin-top: 6px; }
.prose a { color: var(--primary); text-decoration: underline; }
.note {
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-top: 20px; font-size: .92rem; color: var(--text-2);
}

/* FAQ */
.faq { max-width: 760px; margin-inline: auto; display: grid; gap: 14px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 20px;
}
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--primary); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); padding-bottom: 18px; }

.contact-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; }
.contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; text-align: center; box-shadow: var(--shadow-sm); }
.contact-card .ic { width: 46px; height: 46px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 12px; background: #eaf6fd; color: var(--primary); }
.contact-card .ic svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: var(--t-xl); font-weight: 700; }
.contact-card p { margin-top: 6px; color: var(--text-2); font-size: .92rem; }
.contact-card a { color: var(--primary); font-weight: 600; }

/* =============================================================
   MARCOS DE DISPOSITIVO
   Teléfono y tablet con el mismo lenguaje —cuerpo oscuro, bisel,
   brillo de cristal y sombra profunda— pero con la personalidad de
   cada uno. La captura nunca se recorta: el marco toma su proporción.
   ============================================================= */
.marco {
  position: relative; margin-inline: auto;
  background: linear-gradient(160deg, #232C3B 0%, #0C121C 46%, #161E2B 100%);
  box-shadow: var(--shadow-marco);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.marco::before { /* brillo diagonal del cristal */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%, transparent 46%);
}
.marco img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }

/* --- Teléfono --- */
.marco-movil { width: 100%; max-width: 250px; padding: 9px; border-radius: 34px; }
.marco-movil::before { border-radius: 34px; }
.marco-movil img { border-radius: 26px; }
.marco-movil::after { /* isla dinámica */
  content: ""; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 15px; border-radius: 12px; background: #05080E; z-index: 4;
}

/* --- Tablet --- */
.marco-tablet { width: 100%; max-width: 430px; padding: 14px; border-radius: 22px; }
.marco-tablet::before { border-radius: 22px; }
.marco-tablet img { border-radius: 10px; }
.marco-tablet::after { /* cámara frontal */
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #05080E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); z-index: 4;
}

/* Al pasar el ratón, el dispositivo se levanta un poco */
@media (hover: hover) {
  .marco:hover { transform: translateY(-6px); }
}

/* Pareja de capturas: apiladas en móvil, en fila cuando hay sitio.
   La segunda va ligeramente descolgada para dar profundidad. */
.duo {
  display: grid; gap: 22px; justify-items: center; grid-template-columns: 1fr;
  /* Sin esto, el figure sin desfase se estira hasta la altura del
     desplazado y su marco crece con él: parecían dos dispositivos
     distintos, uno con un mentón negro de 46px. */
  align-items: start;
}
.duo figure { margin: 0; width: 100%; display: grid; align-content: start; justify-items: center; gap: 14px; }
.duo figcaption {
  color: var(--text-2); font-size: var(--t-xs); font-weight: 600; text-align: center;
  letter-spacing: .01em;
}
@media (min-width: 560px) {
  .duo.duo-movil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); }
}
@media (min-width: 680px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
  .duo.escalonado figure:last-child { margin-top: clamp(22px, 4vw, 46px); }
}

/* =============================================================
   BOTONES DE ICONO — idioma y tema
   ============================================================= */
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 12px;
  font: 700 .8rem/1 var(--font); letter-spacing: .02em; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn svg { flex: none; }  /* nunca encoger los iconos: en headers
  apretados (menús largos) flexbox los comprimía hasta un punto */
.icon-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-1px); }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ico-luna { display: none; }
:root[data-theme="dark"] .ico-sol { display: none; }
:root[data-theme="dark"] .ico-luna { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sol { display: none; }
  :root:not([data-theme="light"]) .ico-luna { display: inline; }
}

.lang-picker { position: relative; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
  min-width: 176px; padding: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  max-height: 62vh; overflow-y: auto;
  animation: menuEntra .18s var(--ease-out);
}
@keyframes menuEntra { from { opacity: 0; transform: translateY(-6px); } }
.lang-menu[hidden] { display: none; }
.lang-menu button {
  display: block; width: 100%; text-align: start;
  padding: 10px 13px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text);
  font: 500 .92rem/1.2 var(--font); cursor: pointer;
  transition: background .15s var(--ease);
}
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button[aria-selected="true"] { color: var(--primary); font-weight: 700; }

/* =============================================================
   TARJETAS DE CATEGORÍA — el bloque principal de la página
   ============================================================= */
.feature { position: relative; }
.feature::after { /* filo de color que aparece al pasar por encima */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--brand), var(--primary));
  opacity: 0; transition: opacity .25s var(--ease);
}
.feature:hover::after { opacity: 1; }
.feature-body { display: flex; flex-direction: column; }
/* Selector con la misma fuerza que .feature-body p, que antes lo
   anulaba: los chips salían del mismo tamaño y color que la descripción
   y no se pegaban al pie de la tarjeta. */
.feature-body p.chips {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--border);
  color: var(--text-3); font-size: var(--t-xs); line-height: 1.55; letter-spacing: .01em;
}
.nota-extra {
  margin-top: clamp(28px, 4vw, 40px); text-align: center;
  color: var(--text-2); font-size: var(--t-md); max-width: 62ch; margin-inline: auto;
}
.nota-extra b { color: var(--text); font-weight: 700; }

/* =============================================================
   LISTA DE COMPROBACIÓN
   ============================================================= */
.check-list { margin-top: 28px; display: grid; gap: 14px; }
.check-list li {
  position: relative; padding-inline-start: 34px;
  color: var(--text-2); line-height: 1.6; font-size: var(--t-md);
}
.check-list li b { color: var(--text); font-weight: 700; }
.check-list li::before { /* disco con el visto dibujado dentro */
  content: ""; position: absolute; inset-inline-start: 0; top: .12em;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.check-list li::after {
  content: ""; position: absolute; inset-inline-start: 6.5px; top: .58em;
  width: 9px; height: 5px;
  border-inline-start: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
:root[dir="rtl"] .check-list li::after { transform: rotate(-45deg) scaleX(-1); inset-inline-start: 6px; }

/* =============================================================
   IDIOMAS
   ============================================================= */
.lang-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 580px; margin-inline: auto;
  margin-bottom: clamp(34px, 5vw, 54px);
}
.lang-grid li {
  padding: 9px 17px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: var(--shadow-sm); font-size: var(--t-sm); font-weight: 600; color: var(--text-2);
  transition: transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lang-grid li:hover {
  transform: translateY(-2px); color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

/* =============================================================
   PLANES
   ============================================================= */
.planes {
  display: grid; gap: 22px; grid-template-columns: 1fr;
  max-width: 840px; margin-inline: auto;
}
@media (min-width: 760px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan {
  position: relative; padding: clamp(26px, 4vw, 38px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plan.destacado {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}
.plan h3 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.01em; margin-bottom: 20px; }
.plan ul { display: grid; gap: 12px; }
.plan li {
  position: relative; padding-inline-start: 22px;
  color: var(--text-2); line-height: 1.55; font-size: var(--t-md);
}
.plan li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.plan-tag {
  position: absolute; top: 18px; inset-inline-end: 18px;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--brand)); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

/* =============================================================
   RITMO Y DETALLES DE SECCIÓN
   ============================================================= */
.section.alt { background: var(--band); }
.section-tight { padding-top: 0; }

/* Los distintivos de tienda son marcas: no se invierten en árabe */
.store-badge, .store-badge svg { direction: ltr; }

/* Nada puede provocar barra horizontal */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* =============================================================
   APARICIÓN AL DESPLAZAR — sutil, y desactivable
   ============================================================= */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.visible { opacity: 1; transform: none; transition: none; }
  .marco:hover { transform: none; }
}
/* ----------------------------- Responsive ---------------------------- */
@media (max-width: 1090px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { align-items: center; }
  .hero .store-badges { justify-content: center; }
  .phone-wrap { order: -1; margin-bottom: 8px; }
  .split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-cards { grid-template-columns: 1fr; }

  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .nav[data-open="true"] .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 18px var(--gutter); gap: 14px; text-align: left;
  }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============ Ajustes finos del responsive de los bloques nuevos ====== */
@media (max-width: 900px) {
  /* Con el hero apilado, los distintivos flotantes ya no tienen hueco */
}
@media (max-width: 460px) {
  .icon-btn { padding: 0 9px; height: 38px; }
  .nav { gap: 8px; }
  .brand span:last-child { font-size: .98rem; }
  .brand { gap: 8px; }
  .brand .mark { width: 33px; height: 33px; }
  .brand .mark img { width: 22px; height: 22px; }
}

/* =============================================================
   AFINADO DE COMPOSICIÓN
   ============================================================= */

/* El titular respira mejor con la línea algo más cerrada y sin
   partirse en sitios raros. */
.hero h1 { line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; }
.section-title { line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; }
.section-sub, .hero-lead { text-wrap: pretty; }

/* Las volanditas comparten un mismo tratamiento en toda la página */
.eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: var(--azul-texto);
  margin-bottom: 14px;
}

/* Los números de la tira de datos son el ancla visual: se les da peso
   y una línea de acento debajo que los agrupa. */
.stat { position: relative; overflow: hidden; }
.stat::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--primary));
  opacity: .75;
}
.stat b { letter-spacing: -.02em; }

/* Los pasos numerados: el número se convierte en un disco con relieve */
.step .num {
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent);
  font-size: 1.02rem;
}
.step:nth-child(2) .num { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--secondary) 70%, transparent); }
.step:nth-child(3) .num { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }

/* La llamada final se apoya en un halo de color en vez de flotar sola */
.cta { position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 260px at 18% 0%, rgba(255,255,255,.20), transparent 62%),
    radial-gradient(500px 240px at 88% 100%, rgba(255,255,255,.13), transparent 60%);
  pointer-events: none;
}
.cta h2, .cta p, .cta .store-badges { position: relative; }
.cta h2 { letter-spacing: -.02em; }

/* Las tarjetas igualan altura y los chips se asientan abajo */
.features-grid { align-items: stretch; }
.feature { display: flex; flex-direction: column; }
.feature-body { flex: 1; display: flex; flex-direction: column; }

/* Los separadores de las tarjetas a la MISMA altura en toda la fila.
   Cada tarjeta hereda las filas de la retícula (imagen · título ·
   descripción · subcategorías), así que todas comparten la altura de
   cada franja aunque sus textos ocupen distinto número de líneas: sin
   esto, el filete quedaba a una altura distinta en cada tarjeta. */
@supports (grid-template-rows: subgrid) {
  .features-grid { grid-auto-rows: auto; }
  .feature {
    display: grid; grid-row: span 4; grid-template-rows: subgrid;
  }
  .feature-body {
    display: grid; grid-row: span 3; grid-template-rows: subgrid;
    align-content: start;
  }
  /* Dentro de subgrid, cada elemento ocupa su propia franja */
  .feature-body h3 { align-self: start; }
  .feature-body p { align-self: start; margin-top: 8px; }
  .feature-body p.chips { align-self: end; margin-top: 0; }
}

/* Enlaces del menú con subrayado que crece desde el centro */
.nav-links a { position: relative; padding-block: 4px; }
.nav-links a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--primary); border-radius: 2px;
  transition: left .22s var(--ease), right .22s var(--ease);
}
.nav-links a:hover::after { left: 0; right: 0; }

/* Botón principal con brillo al pasar por encima */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--brand) 60%, var(--primary)));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--primary) 85%, transparent);
}
.btn-primary:hover { filter: brightness(1.06); }

/* Foco visible y coherente en todo lo que se puede enfocar */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px;
}

/* =============================================================
   CABECERA — la barra completa no cabe hasta ~1090px, y en alemán,
   ruso, francés y portugués tampoco a 1280. Los rótulos no se parten
   nunca y el menú compacto cubre toda la franja estrecha.
   ============================================================= */
.nav-links a, .nav-cta .btn, .brand span:last-child, .icon-btn { white-space: nowrap; }
.nav-links { gap: clamp(14px, 1.8vw, 28px); }
.nav-cta { gap: clamp(8px, 1vw, 14px); }

/* El llamado a la acción también en el menú compacto: antes desaparecía
   justo en los móviles, que es donde se instala la app. */
.nav-links .solo-menu { display: none; }
@media (max-width: 1090px) {
  .nav-links .solo-menu { display: block; }
  .nav-links .solo-menu a {
    display: inline-block; margin-top: 4px; padding: 11px 20px;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--brand) 60%, var(--primary)));
    color: #fff; border-radius: 999px; font-weight: 700;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--primary) 85%, transparent);
  }
  .nav-links .solo-menu a::after { content: none; }
}

/* ── Aviso "Próximamente" (modal de descarga) ─────────────────── */
.modal-fondo {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(3px);
  animation: modalFondoIn .18s ease;
}
.modal-fondo[hidden] { display: none; }
.modal {
  position: relative;
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 34px 28px 28px;
  text-align: center;
  animation: modalIn .22s cubic-bezier(.2,.7,.3,1);
}
.modal-emoji { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.modal-titulo { font-size: 22px; margin: 0 0 10px; color: var(--text); }
.modal-texto { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0 0 22px; }
.modal-ok { width: 100%; justify-content: center; }
.modal-cerrar {
  position: absolute; top: 10px; inset-inline-end: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.modal-cerrar:hover { background: var(--surface-2); color: var(--text); }
@keyframes modalFondoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal-fondo, .modal { animation: none; }
}


/* Aviso en legales traducidos: la versión en español prevalece */
.aviso-traduccion {
  margin-top: 10px; padding: 10px 14px;
  border-inline-start: 3px solid var(--primary);
  background: var(--surface-2); border-radius: 8px;
  color: var(--text-2); font-size: .88rem; font-style: italic;
}