/* =============================================================
   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; }
/* Fotos cuyo sujeto está pegado al borde superior (el búho de Fauna):
   el recorte del 16:11 se hace solo por abajo para no cortarle la cabeza. */
.feature-img img.img-arriba { object-position: top; }
.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; }
/* Los títulos del pie son h3 (orden de encabezados correcto para lectores de
   pantalla: h2 → h3). Antes eran h4; margen, interlineado e interletrado
   replican el h4 de entonces para que el render sea idéntico píxel a píxel. */
.site-footer h3 { color: #fff; font-size: .95rem; font-weight: 700; margin: 1.33em 0 14px; line-height: inherit; letter-spacing: normal; }
.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; }

/* Redes y contacto del pie (Instagram, Facebook, correo): botones iguales en
   la paleta del sitio, sin colores de marca. El pie es oscuro en ambos temas
   (--ink no cambia); el acento al pasar el ratón sigue a --primary, que sí
   cambia con el tema. Van con .site-footer delante para ganar a la regla
   «.site-footer a». La variante --mini es la de los pies de una fila. */
/* Centrada respecto al bloque de texto de la columna (mismo ancho máximo y
   tamaño de letra que .footer-desc), no respecto a la celda de la rejilla:
   en tablet la celda es más ancha que el texto y los botones quedarían
   descolgados a la derecha. */
.footer-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; max-width: 30ch; font-size: .92rem; }
.site-footer .footer-red {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: #cbd5e1; line-height: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.site-footer .footer-red:hover, .site-footer .footer-red:focus-visible {
  color: #fff; background: var(--primary); border-color: var(--primary); transform: translateY(-2px);
}
.site-footer .footer-red svg { display: block; }
.footer-redes--mini { display: inline-flex; flex-wrap: nowrap; gap: 8px; margin: 0 14px 0 0; vertical-align: middle; }
.site-footer .footer-redes--mini .footer-red { width: 32px; height: 32px; }

/* Enlace «saltar al contenido»: fuera de pantalla hasta recibir el foco por
   teclado; entonces aparece sobre la cabecera. <main tabindex="-1"> recibe el
   foco sin mostrar contorno. */
.salto {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  padding: 10px 18px; border-radius: 999px; background: var(--primary); color: #fff;
  font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: var(--shadow);
}
.salto:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }
.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; align-items: center; 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;
}