/* Estilos de las páginas nuevas. Complementa style.css */
.crumbs{padding:22px 0 0;font-size:13px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.crumbs .container{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:#64748b;text-decoration:none}
.crumbs a:hover{color:#ff0033}
.crumbs span{color:#c3ccd8}
.crumbs em{color:#003466;font-style:normal;font-weight:700}
.nav-links a.is-active{color:#ff0033}
.page-hero{padding:52px 0 60px;background:#fff}
.page-hero .eyebrow{display:block;margin-bottom:16px}
.page-hero h1{font-size:clamp(38px,6vw,68px);font-weight:800;letter-spacing:-.045em;line-height:1.03;color:#003466;margin-bottom:22px;max-width:16em}
.page-hero h1 .accent{color:#ff0033}
.page-hero .lead{font-size:clamp(17px,2vw,21px);line-height:1.65;color:#5b6878;max-width:34em}
.page-hero--navy{background:#003466}
.page-hero--navy h1{color:#fff}
.page-hero--navy .lead{color:rgba(255,255,255,.66)}
.page-hero--navy .eyebrow{color:rgba(255,255,255,.45)}
.prose{max-width:38em;font-size:17px;line-height:1.78;color:#4a5666}
.prose h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.035em;color:#003466;margin:52px 0 18px;line-height:1.15}
.prose h3{font-size:21px;font-weight:800;color:#003466;margin:36px 0 12px;letter-spacing:-.02em}
.prose p{margin-bottom:18px}
.prose ul{margin:0 0 22px 22px}
.prose li{margin-bottom:10px}
.prose strong{color:#003466}
.prose a{color:#003466;font-weight:600}
.prose a:hover{color:#ff0033}
.ficha{border:1px solid #e4e9f0;border-radius:16px;overflow:hidden;margin:32px 0}
.ficha-row{display:grid;grid-template-columns:minmax(120px,34%) 1fr;border-bottom:1px solid #eef2f7}
.ficha-row:last-child{border-bottom:none}
.ficha-row dt{padding:16px 22px;background:#f7f9fc;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748b;font-family:'JetBrains Mono',monospace}
.ficha-row dd{padding:16px 22px;font-size:16px;color:#2b3948;font-weight:500}
.todo{background:#fffbe9;border:1px dashed #e8c84a;border-radius:12px;padding:14px 18px;margin:18px 0;font-size:14px;line-height:1.6;color:#7a6412}
.todo strong{color:#5e4c06;font-weight:800}
.zona-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.zona-hero-meta span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border-radius:100px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}.ficha-row{grid-template-columns:1fr}.ficha-row dt{padding-bottom:4px}.ficha-row dd{padding-top:4px}}
.mini-cta{background:#f7f9fc;border:1px solid #e4e9f0;border-radius:18px;padding:32px 34px;margin:44px 0}
.mini-cta h3{font-size:23px;font-weight:800;color:#003466;letter-spacing:-.025em;margin-bottom:10px}
.mini-cta p{font-size:16px;color:#5b6878;line-height:1.6;margin-bottom:20px}
.next-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:16px}
.next-links a{display:block;padding:20px 22px;border:1px solid #e4e9f0;border-radius:14px;text-decoration:none;transition:.18s}
.next-links a:hover{border-color:#003466;transform:translateY(-2px)}
.next-links strong{display:block;font-size:16px;color:#003466;font-weight:800;margin-bottom:4px}
.next-links span{font-size:14px;color:#64748b}

/* ============================================================
   Refinos v6: tipografía, ritmo, recomposición y movimiento.
   Solo tocan forma; los colores de marca no cambian.
============================================================ */
h1, h2, h3 { text-wrap: balance; }
.section-head p, .lead, .prose p { text-wrap: pretty; }
.section-head h2 { line-height: 1.08; }
.section-head { margin-bottom: 56px; }
.section-head h2:first-child { margin-top: 0; }
.stat-num, .float-card .nums { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }

/* "El caos actual": una idea principal + dos apoyos, en lugar de tres tarjetas iguales */
@media (min-width: 981px) {
  .prob-grid { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }
  .prob-grid .prob-card:first-child { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 44px; }
  .prob-grid .prob-card:first-child h3 { font-size: clamp(28px, 3vw, 36px); line-height: 1.08; }
  .prob-grid .prob-card:first-child p { font-size: 17px; max-width: 30em; }
}

/* Comparativa: fila de Weklos legible y filas con respiración */
.compare-row .feat { font-weight: 600; }

/* Movimiento: solo lo que comunica algo. Curvas y duraciones compartidas. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

/* 1. Feedback al pulsar: el botón responde al dedo (160 ms) */
.btn, .btn--nav, .btn--nav-ghost, .gp-red-btn, .cta-form button, .modal-form button { transition: transform 160ms var(--ease-out), box-shadow .2s, background .2s, border-color .2s; }
.btn:active, .btn--nav:active, .btn--nav-ghost:active, .gp-red-btn:active, .cta-form button:active, .modal-form button:active { transform: scale(.97); }

/* 2. Los elevados por hover solo se activan con puntero real (en táctil se quedaban "pegados") */
@media (hover: none) {
  .btn--primary:hover, .btn--nav:hover, .btn--outline:hover, .gp-red-btn:hover, .cta-form button:hover, .modal-form button:hover, .zona-card:hover, .next-links a:hover { transform: none; }
}

/* 3. Estados que aparecían de golpe: acordeón de FAQ y menú móvil.
      Entrada con @starting-style (sin JS); la salida es instantánea a propósito. */
.faq-a, .nav-links.is-open { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style {
  .faq-item.is-open .faq-a { opacity: 0; transform: translateY(-6px); }
  .nav-links.is-open { opacity: 0; transform: translateY(-8px); }
}
.faq-q .plus { transition: background-color .2s; }

/* 4. Único momento de "primera impresión": el texto del hero de la portada */
/* Solo desplazamiento, sin opacidad: el titular del hero es el LCP y un fundido desde 0 lo retrasaba ~1,8 s */
@keyframes wk-rise { from { transform: translateY(14px); } to { transform: none; } }
.hero-grid > div:first-child { animation: wk-rise 500ms var(--ease-out) backwards; }

/* Reduce motion: se quita el desplazamiento y el pulso, se conservan los fundidos suaves */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-badge .dot, .hero-social .hero-pulse { animation: none; }
  .hero-grid > div:first-child { animation: none; }
  @keyframes wk-fade { from { opacity: 0; } to { opacity: 1; } }
  .btn:active, .btn--nav:active, .btn--nav-ghost:active, .gp-red-btn:active, .cta-form button:active, .modal-form button:active { transform: none; }
  .btn--primary:hover, .btn--nav:hover, .btn--outline:hover, .gp-red-btn:hover, .cta-form button:hover, .modal-form button:hover, .zona-card:hover, .next-links a:hover { transform: none; }
  @starting-style {
    .faq-item.is-open .faq-a, .nav-links.is-open { transform: none; }
  }
  .modal-content { animation-name: wk-fade; }
}

/* Navegación en una sola línea en escritorio */
.nav-links a { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1180px) {
  .nav-links { gap: 16px; }
  .nav-cta .btn--nav-ghost { display: none; }
}
@media (min-width: 981px) { .prob-grid .prob-card:first-child { justify-content: space-between; } }

/* ============================================================
   Accesibilidad v6: contraste y zonas táctiles.
   El rojo de marca no cambia; se usa su variante --red-dk (ya en la paleta)
   donde el texto es pequeño, y un tinte claro del mismo rojo sobre azul marino.
============================================================ */
:root { --red-on-navy: #ff8fa6; --green-text: #047857; }
img { height: auto; }
.btn--primary, .btn--nav, .gp-red-btn { background: var(--red-dk); }
.eyebrow, .crumbs a:hover { color: var(--red-dk); }
.section--navy .eyebrow, .page-hero--navy .eyebrow, .site-header .logo-text .motto, .site-footer .eyebrow { color: var(--red-on-navy); }
.page-hero--navy .eyebrow { color: rgba(255,255,255,.78); }
.logo-text .motto { font-size: 11px; }
.hero-badge { color: var(--green-text); }
.ficha-row dt, .crumbs a { color: var(--muted); }
.btn--nav, .btn--primary { font-size: 16px; }
.btn { font-size: 17px; }

/* Objetivos táctiles de 44 px como mínimo */
.menu-toggle { min-width: 44px; min-height: 44px; }
.logo-block { min-height: 44px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col a, .footer-bottom-links a, .crumbs a, .next-links a, .faq-q { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col li { margin: 0; }
.cta-form input[type="email"], .cta-form button { min-height: 48px; }

/* Encabezados: los pasos usan h2 (antes saltaban de h1 a h3) con el mismo aspecto */
.step-card h2 { font-size: 19px; color: var(--navy); margin: 8px 0; letter-spacing: -.02em; line-height: 1.15; }
.step-card.is-featured h2 { color: #fff; }

/* Pulido v6.1: respiro en bloques apretados y enlace de novedades del hero */
.semilla-stats { gap: 36px; }
.semilla-stats div { padding: 4px 0; }
.ficha-row dt, .ficha-row dd { padding-top: 18px; padding-bottom: 18px; }
.hero-social a { display: inline-block; padding: 8px 0; }

/* Fila de 5 pantallas (descargar): ancho proporcional hasta 200px; en movil solo caben dos */
.appshow-phones--3 .phone{width:calc((100% - 64px) / 5);max-width:200px}
.appshow-phones--3 .phone.phone--w240:first-child{margin-top:0}
@media(max-width:600px){.appshow-phones--3 .phone{width:150px}.appshow-phones--3 .phone:nth-child(n+3){display:none}}

/* Pantallas de la app: el marco se adapta a la proporcion real de cada captura en vez de
   recortarla con object-fit:cover (las alturas fijas de style.css cortaban los laterales,
   hasta un 12 % en movil). Radio algo menor para no comerse las esquinas del contenido. */
.phone .phone__screen{height:auto!important;border-radius:24px}
.phone .phone__screen img{height:auto!important;object-fit:contain}

/* Contraste AA: antetitulos rojos sobre azul y etiqueta del boton de Google Play */
#problema.section--navy .eyebrow, .ftr-section.section--navy .eyebrow, .appshow.section--navy .eyebrow, .sobre--dark .eyebrow { color: var(--red-on-navy) !important; }
.appshow:not(.section--navy) .eyebrow { color: #e60032 !important; }
.site-footer .logo-text .motto { color: var(--red-on-navy); }
.cta-card__tag--green { color: var(--green-text); }
.gp-red-btn__pre { color: #fff; }

/* Instagram en el pie */
.footer-ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 44px; color: inherit; font-weight: 600; font-size: 14px; text-decoration: none; }
.footer-ig svg { flex-shrink: 0; }
.footer-ig:hover span { text-decoration: underline; }
.footer-brand > .footer-ig { display: flex; width: fit-content; }