/* =========================================================
   BLISS HOMES — Capa UX compartida
   Añadido 25-ago-2026. Se carga en todas las páginas.
   Contiene: microinteracciones al pulsar (:active), foco de
   teclado coherente y botón "volver arriba".
   Colores tomados de las vars de cada tema (site oscuro /
   blog claro) con fallback propio.
   ========================================================= */

/* ---------- 1. Microinteracciones: feedback al pulsar ----------
   El sitio ya tenía :hover, pero en móvil no existe hover: sin
   :active el usuario no recibe confirmación de que ha pulsado. */
.btn, .btn-primary, .btn-ghost, .btn-green, .btn-outline, .btn-next, .btn-back,
.cta-inline, .cta-study, .cta-band-btn, .cta-call, .cta-external, .cta-primary,
.cta-ghost, .cta-pill, .nav-cta, .tdh-btn-primary, .td-btn-primary,
.option-btn, .lib-filter, .calc-model-btn, .nav-burger, .nav-dd-btn, .lt-card {
  -webkit-tap-highlight-color: transparent;
}

.btn:active, .btn-primary:active, .btn-ghost:active, .btn-green:active,
.btn-outline:active, .btn-next:active, .btn-back:active,
.cta-inline:active, .cta-study:active, .cta-band-btn:active, .cta-call:active,
.cta-external:active, .cta-primary:active, .cta-ghost:active, .cta-pill:active,
.nav-cta:active, .tdh-btn-primary:active, .td-btn-primary:active,
.option-btn:active, .lib-filter:active, .calc-model-btn:active {
  transform: translateY(1px) scale(.985);
  transition-duration: .07s;
  filter: brightness(.94);
}

.nav-burger:active, .nav-dd-btn:active { transform: scale(.92); transition-duration: .07s; }
.lt-card:active { transform: scale(1.015) translateY(-2px); transition-duration: .07s; }

/* ---------- 2. Foco de teclado coherente (a11y) ---------- */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue, #40A9FF);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. Botón volver arriba ----------
   Lo inyecta assets/ux.js. Oculto hasta pasar el umbral. */
#bh-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: #1A2E52;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#bh-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#bh-top:hover { background: #24406F; transform: translateY(-2px); }
#bh-top:active { transform: translateY(1px) scale(.94); transition-duration: .07s; }
#bh-top svg { width: 19px; height: 19px; display: block; }

/* Si la página lleva la burbuja de WhatsApp (.wa-float: 60x60 en 18/22,
   54x54 en 14/82 en móvil), el botón se apila justo encima. */
.bh-has-wa #bh-top { right: 25px; bottom: 96px; }

@media (max-width: 720px) {
  #bh-top { width: 42px; height: 42px; bottom: max(20px, env(safe-area-inset-bottom)); }
  .bh-has-wa #bh-top { right: 20px; bottom: calc(148px + env(safe-area-inset-bottom)); }
}

/* ---------- 4. Iconos sociales del footer ---------- */
.bh-social { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 0 0 28px; }
.bh-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule, rgba(255,255,255,.12));
  color: var(--ink-2, rgba(255,255,255,.72));
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.bh-social a:hover {
  color: var(--blue, #40A9FF);
  border-color: var(--blue, #40A9FF);
  transform: translateY(-2px);
}
.bh-social a:active { transform: translateY(1px) scale(.94); transition-duration: .07s; }
.bh-social svg { width: 18px; height: 18px; display: block; }

/* Cierre accesible dentro del panel móvil, que cubre el botón hamburguesa. */
.bh-mobile-nav-close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 18px;
  z-index: 10001;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(26,46,82,.2);
  border-radius: 50%;
  background: #fff;
  color: #1A2E52;
  font: 32px/1 system-ui, sans-serif;
  cursor: pointer;
}
.bh-mobile-nav-close:focus-visible { outline: 3px solid #247DA0; outline-offset: 3px; }

/* ---------- 5. Respetar preferencia de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #bh-top, .bh-social a { transition: opacity .01ms, visibility .01ms; }
  #bh-top.is-visible { transform: none; }
  #bh-top:hover, .bh-social a:hover { transform: none; }
}

/* ---------- 6. Barra CTA fija en pantallas bajas y anchas ----------
   La barra sticky (.mobile-cta-bar) y el hueco que deja para la burbuja
   de WhatsApp sólo se activaban por ANCHO (max-width:760px, definido en
   el <style> de cada página). Con poca altura pero ancho holgado — un
   plegable abierto en horizontal o un móvil normal en landscape — ese
   corte no salta aunque siga siendo un teléfono, y el CTA fijo
   desaparecía. Se reactiva por ALTO; ux.css se carga el último en el
   <head> de cada página, así que estas reglas ganan el empate de
   especificidad sobre el "display: none" por defecto. Solo táctil
   (hover:none, pointer:coarse): un portátil con ventana baja (p.ej.
   1366x768 con poco alto útil) tiene ratón, no debe ver la barra móvil. */
@media (max-height: 650px) and (min-width: 761px) and (hover: none) and (pointer: coarse) {
  .mobile-cta-bar { display: flex; }
  body:has(.mobile-cta-bar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(82px + env(safe-area-inset-bottom)); right: 14px; width: 54px; height: 54px; }
  .wa-float svg { width: 28px; height: 28px; }
  .wa-float-label { display: none; }
  /* El banner de cookies (bottom 8px) tapaba la barra recién activada. */
  body:has(.mobile-cta-bar) .bh-cc { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   BLISS HOMES — THEME MIXED (cream + dark interludes)
   Loaded after each page's inline <style> to win cascade.
   Drops in via: <link rel="stylesheet" href="/assets/theme-mixed.css">
   ============================================================ */

:root {
  --navy:      #F8F6F2;     /* page bg = cream */
  --navy-card: #EFEAE0;     /* sand cards */
  --navy-deep: #E4DFD6;
  --blue:      #1C6386;     /* darker blue for AA contrast on cream */
  --blue-soft: #247DA0;
  --ink:       #1A2E52;     /* primary text = navy */
  --ink-2:     rgba(26,46,82,0.78);
  --ink-3:     rgba(26,46,82,0.68);
  --ink-4:     rgba(26,46,82,0.22);
  --rule:      rgba(26,46,82,0.10);
}

html, body { background: #F8F6F2; color: #1A2E52; }

/* ---------- Comparison section · navy band ---------- */
.comparison-section {
  background: #1A2E52 !important;
  color: #FFFFFF !important;
  position: relative;
}
.comparison-section .section-head .over { color: rgba(255,255,255,0.6) !important; }
.comparison-section .section-head h2 { color: #FFFFFF !important; }
.comparison-section .section-head p { color: rgba(255,255,255,0.78) !important; }
.comparison-section .comparison-table thead th { color: rgba(255,255,255,0.6) !important; }
.comparison-section .comparison-table thead th.col-bliss {
  color: #74B2FF !important;
  background: rgba(116,178,255,0.12) !important;
  border-color: rgba(116,178,255,0.28) !important;
}
.comparison-section .comparison-table tbody td {
  color: rgba(255,255,255,0.78) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
.comparison-section .comparison-table tbody td:first-child {
  color: #FFFFFF !important;
}
.comparison-section .comparison-table tbody td.col-bliss {
  background: rgba(116,178,255,0.08) !important;
  color: #FFFFFF !important;
  border-left-color: rgba(116,178,255,0.22) !important;
  border-right-color: rgba(116,178,255,0.22) !important;
}
.comparison-section .comparison-table tfoot td.col-bliss {
  background: rgba(116,178,255,0.08) !important;
  border-color: rgba(116,178,255,0.28) !important;
}
.comparison-section .cmp-no { color: rgba(255,255,255,0.45) !important; }
.comparison-section .cmp-partial { color: #FFD479 !important; }
.comparison-section .cmp-yes { color: #5ECE7B !important; }
/* Highlight final fila +34% */
.comparison-section .comparison-table tbody tr:last-child td.col-bliss {
  color: #74B2FF !important;
  font-weight: 700 !important;
}

/* ---------- Lock horizontal scroll NUCLEAR (estilo Apple) ---------- */
html {
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100%;
  /* Solo permite pan vertical: ignora swipe horizontal a nivel touch */
  touch-action: pan-y;
}
body {
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  position: relative;
  touch-action: pan-y;
  /* respeta safe-area iOS */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Permitir pan-x SOLO en elementos que necesitan scroll horizontal interno */
.comparison-table,
.comparison-wrap,
.compare-band,
.compare-table,
.channels-bar-list,
.breadcrumbs,
[class*="-scroll-x"],
[class*="-carousel"] {
  touch-action: pan-x pan-y;
}

/* Hero animado y canvases decorativos: NO interceptan swipe horizontal */
.hero-viz,
.hero-viz canvas,
.iso-scene,
.iso-scene svg,
.orbit-platforms {
  touch-action: pan-y !important;
}

/* Cualquier elemento que NO sea position:fixed (nav) queda contenido al viewport */
body > *:not(.nav):not(.nav-mobile):not(.wa-float):not(.mobile-cta-bar) {
  max-width: 100%;
  overflow-x: clip;
}

/* Bloquea overflow en hijos comunes que suelen romper viewport en móvil */
img, video, canvas, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre, code, kbd {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Full-bleed sections sin causar scroll (compensa la barra) */
.full-bleed,
[class*="-full-bleed"] {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ============================================================
   MOBILE RIGOR v2 — basado en research Apple/Stripe/Airbnb 2026
   Tokens citables:
   - Apple type scale (Hero 56→40, Display 40, Lead 28, Body 17)
   - 8px spacing rhythm (4/8/12/16/24/32/48/64/80)
   - Tap target 44px Apple HIG
   - Border-radius 16-20px hospitality
   - Body 16px+ (anti-zoom iOS Safari)
   - Ease-out cubic-bezier(0.16, 1, 0.3, 1) — Apple-like spring
   - Standard transition 200ms
   - svh para viewport mobile (no 100vh roto en Safari)
   - Frosted nav: saturate(180%) blur(20px)
   ============================================================ */

/* ===== Motion tokens globales (con respect prefers-reduced-motion) ===== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 150ms;
  --d-base: 200ms;
  --d-slow: 300ms;
  --shadow-card-1: 0 1px 1px rgba(0,0,0,0.03), 0 3px 6px rgba(18,42,66,0.04);
  --shadow-card-2: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(18,42,66,0.08);
  --shadow-modal: 0 8px 16px rgba(0,0,0,0.06), 0 32px 80px rgba(0,0,0,0.18);
  --hairline: 1px solid rgba(26,46,82,0.08);
  --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   MOBILE — RIGOR · revisión exhaustiva en todas las páginas
   Aplica a tablet (≤1024px) y móvil (≤760px)
   ============================================================ */

/* ===== TABLET base (≤1024px) ===== */
@media (max-width: 1024px) {
  .container { padding-left: 24px !important; padding-right: 24px !important; }
  /* Evita columnas demasiado estrechas en tablet */
  .hero-grid,
  .benefits-grid,
  .blog-grid,
  .stat-grid,
  .case-stats,
  .comparison-table,
  .compare-grid,
  .channels-bar-list,
  [class*="-grid"] {
    gap: clamp(16px, 3vw, 32px) !important;
  }
}

/* ===== MOBILE (≤760px) — Apple type + 44px tap + 16px body ===== */
@media (max-width: 760px) {
  /* ---- Container · gutter Apple 20-24px ---- */
  .container {
    padding-left: clamp(20px, 5vw, 24px) !important;
    padding-right: clamp(20px, 5vw, 24px) !important;
    max-width: 100% !important;
  }

  /* ---- Typography · Apple scale (Hero→Display→Lead→Body→Caption) ---- */
  /* Hero/Display Large 40-48px en móvil, line-height 1.07 estilo Apple */
  h1 {
    font-size: clamp(32px, 8.4vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    font-weight: 600 !important;
    word-break: break-word;
    hyphens: none;
  }
  /* Display Medium */
  h2 {
    font-size: clamp(26px, 6.6vw, 34px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.018em !important;
    font-weight: 600 !important;
  }
  /* Tagline */
  h3 {
    font-size: clamp(20px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.012em !important;
    font-weight: 600 !important;
  }
  h4 {
    font-size: clamp(17px, 4.4vw, 19px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.008em !important;
  }
  /* Body 16px MIN (anti-zoom iOS) — Apple usa 17px */
  p, li {
    font-size: 16px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }
  /* Lead Apple style: 24-28px airy */
  .lead {
    font-size: clamp(18px, 4.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.005em !important;
    font-weight: 400 !important;
  }
  /* Over (kicker) Apple style: caption 14px */
  .over {
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  /* Hero h1: anular nowrap heredado y forzar fluid */
  .hero h1, .blog-hero h1, .article-hero h1 {
    white-space: normal !important;
    word-break: break-word;
  }
  /* Body min length legible */
  .container > p,
  article p,
  .lead {
    max-width: 65ch;
  }

  /* ---- Sections · 8px rhythm · 48-64px móvil ---- */
  section {
    padding: clamp(48px, 9vw, 64px) 0 !important;
  }
  .section-head { margin-bottom: clamp(24px, 5vw, 40px) !important; }
  .section-head h2 { margin-bottom: 12px !important; }
  .section-head .over { margin-bottom: 8px !important; }

  /* ---- Buttons · Apple 44-50px tap target · pill shape opcional ---- */
  .btn,
  .btn-primary,
  .btn-ghost,
  .nav-cta,
  button[class*="cta"],
  a[class*="cta"]:not(.cap-cta-text):not(.cap-cta-arrow):not(.blog-card-arrow) {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    letter-spacing: -0.005em !important;
    transition: transform var(--d-fast) var(--ease-out),
                background-color var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out) !important;
    white-space: normal !important;
  }
  /* Press feedback Apple-style */
  .btn:active,
  .btn-primary:active,
  .btn-ghost:active {
    transform: scale(0.97) !important;
  }
  /* CTAs en bloques principales: full-width */
  .hero-ctas, .cta-buttons, .cta-row, [class*="-ctas"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-ctas > .btn,
  .cta-buttons > .btn,
  [class*="-ctas"] > .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---- Grids generales → 1 columna ---- */
  .hero-grid,
  .benefits-grid,
  .blog-grid,
  .stat-grid,
  .case-stats,
  .compare-grid,
  .features-grid,
  .pricing-grid,
  .services-grid,
  .testimonials-grid,
  .team-grid,
  [class$="-grid"]:not(.foot-grid):not(.numbers-grid),
  [class*="grid-2"],
  [class*="grid-3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .numbers-grid, .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* ---- Stat cards / number cards ---- */
  .stat-card, .stat-value, .case-stat {
    text-align: left;
  }
  .stat-card { padding: 18px !important; }
  .stat-value, .case-stat-v {
    font-size: clamp(26px, 7vw, 36px) !important;
  }

  /* ---- Reviews section / score ---- */
  .reviews-header { gap: 12px !important; }
  .reviews-score-cta {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
  }

  /* ---- Comparison tables · scroll horizontal con snap + min-width reset ---- */
  .comparison-table,
  .comparison-wrap,
  .compare-band,
  .compare-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    min-width: auto !important;
    width: auto !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    /* Sombra borde derecho indicando que se puede scrollear */
    background: linear-gradient(90deg, transparent calc(100% - 20px), rgba(26,46,82,0.08));
  }
  .comparison-table::-webkit-scrollbar,
  .comparison-wrap::-webkit-scrollbar { height: 4px; }
  .cmp-card, .compare-col {
    min-width: 280px !important;
    scroll-snap-align: start;
  }

  /* ---- Channel bar (Airbnb/Booking/etc strip) ---- */
  .channels-bar { padding: 16px 0 !important; }
  .channels-bar-list {
    gap: 14px !important;
    flex-wrap: wrap !important;
    justify-content: center;
  }
  .channels-bar-item {
    flex: 0 0 auto;
  }

  /* ---- Forms ---- */
  form { width: 100% !important; }
  .form-field,
  .form-group {
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  .form-field input,
  .form-field select,
  .form-field textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important; /* evita zoom iOS */
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  form button[type="submit"],
  .form-submit {
    width: 100% !important;
    margin-top: 8px !important;
  }
  /* Login modal específico */
  .modal-card {
    width: calc(100vw - 32px) !important;
    max-width: 420px !important;
    padding: 28px 24px !important;
  }

  /* ---- Cards · Airbnb 20px radius / Apple 18px · Stripe shadow doble ---- */
  .blog-card,
  .case-study,
  .service-card,
  .feature-card,
  .benefit-card,
  .stat-card,
  .step,
  [class$="-card"]:not(.cmp-card):not(.modal-card) {
    padding: clamp(20px, 4.5vw, 24px) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-card-1) !important;
    border: var(--hairline) !important;
    transition: transform var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out) !important;
  }
  .blog-card:active,
  .case-study:active,
  .service-card:active {
    transform: scale(0.99) !important;
  }
  .blog-card-meta { font-size: 12px !important; }
  .case-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
  }
  .case-quote { font-size: 15.5px !important; line-height: 1.55 !important; }

  /* ---- Steps / "cómo funciona" ---- */
  .steps,
  .steps-grid,
  [class*="step-grid"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .step {
    padding: 18px !important;
  }

  /* ---- Quick answers (FAQs) ---- */
  .quick-answer {
    padding: 16px !important;
    font-size: 15px !important;
  }

  /* ---- Footer ---- */
  footer { padding: 40px 0 24px !important; }
  .foot-grid,
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .foot-links {
    flex-direction: column;
    gap: 4px;
  }
  .foot-links a {
    padding: 10px 0;
    border-bottom: 1px solid rgba(26, 46, 82, 0.06);
  }

  /* ---- Breadcrumbs ---- */
  .breadcrumbs {
    font-size: 12px !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ---- Article meta (blog) ---- */
  .article-meta-item {
    font-size: 12.5px !important;
  }

  /* ---- Hero meta (stats below hero) ---- */
  .hero-meta {
    gap: 16px !important;
    padding-top: 24px !important;
  }
  .hero-meta-item {
    flex: 1 1 calc(50% - 8px);
  }
  .hero-meta-item .n,
  .hero-meta-item strong {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  /* ---- Hero canvas (3D building viz) ---- */
  .hero-viz-wrap { margin-top: 28px !important; }

  /* ---- Tap targets globales ---- */
  a, button {
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(28, 99, 134, 0.12);
  }
  /* Pequeños links inline (footer, in-text) → no forzar 44px */
  p a, li a, .article-meta-item, .breadcrumbs a, footer .foot-mini a {
    min-height: auto;
  }

  /* ---- Reveal animations en móvil — más sutiles ---- */
  .reveal {
    transform: translateY(8px);
  }

  /* ---- Long URLs / emails wrap ---- */
  a {
    word-break: break-word;
  }

  /* ---- WhatsApp float pos ---- */
  .wa-float {
    bottom: calc(86px + env(safe-area-inset-bottom, 0)) !important;
    right: 14px !important;
    width: 54px !important;
    height: 54px !important;
  }

  /* ---- Blog-specific ---- */
  .blog-hero,
  .article-hero {
    padding-top: clamp(120px, 18vh, 152px) !important;
    padding-bottom: 32px !important;
  }
  article.post-content,
  .post-body {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  article.post-content img,
  .post-body img {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    border-radius: 0;
  }

  /* ---- 404 / cookies / legal pages ---- */
  .legal-content,
  .cookies-content,
  .error-content {
    padding: 100px 0 56px !important;
  }
}

/* ============================================================
   CRITICAL FIXES detectados en auditoría
   ============================================================ */
@media (max-width: 760px) {
  /* Fix 1: Dropdown nav absolute desborda en móvil → static */
  .nav-dd-panel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* Fix 2: Sticky elements rotos en móvil */
  .exp-left,
  [class*="-sticky"]:not(.nav):not(.mobile-cta-bar) {
    position: static !important;
    top: auto !important;
  }

  /* Fix 3: White-space nowrap en componentes que rompen */
  .nav-phone,
  .nav-login,
  .btn,
  .nav-cta,
  .cmp-cta,
  [class*="cta"] {
    white-space: normal !important;
  }

  /* Fix 4: min-width hardcoded en tablas */
  .comparison-table,
  .compare-table,
  table {
    min-width: 0 !important;
  }

  /* Fix 5: Hero usa svh (small viewport height) — anti-Safari bottom bar */
  .hero[class*="full"],
  .hero-full,
  .hero.fullscreen {
    min-height: 100vh !important;
    min-height: 100svh !important;
    max-height: 100vh;
    max-height: 100svh;
  }

  /* Fix 6: Frosted nav Apple-style universal */
  .nav {
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    background: rgba(248, 246, 242, 0.82) !important;
    border-bottom: var(--hairline) !important;
  }
  .nav.scrolled {
    background: rgba(248, 246, 242, 0.94) !important;
    box-shadow: 0 1px 0 rgba(26,46,82,0.06);
  }

  /* Fix 7: SVG / iconos flexibles */
  svg:not([width]):not([height]) {
    max-width: 100%;
    height: auto;
  }

  /* Fix 8: Letter-spacing positivo en captions/labels (Apple) */
  .caption,
  .label-small,
  small,
  figcaption {
    letter-spacing: 0.02em !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Fix 9: Focus visible accesible */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid #0071e3 !important;
    outline-offset: 2px !important;
    border-radius: 6px;
  }

  /* Fix 10: Selection color brand */
  ::selection {
    background: rgba(64, 169, 255, 0.32);
    color: #1A2E52;
  }
}

/* ===== EXTRA SMALL (≤380px — iPhone SE / pequeños) ===== */
@media (max-width: 380px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  p, li, .lead { font-size: 16px !important; }
  .btn, .btn-primary, .btn-ghost {
    font-size: 15px !important;
    padding: 12px 18px !important;
    min-height: 44px !important;
  }
  .numbers-grid, .stats-row { grid-template-columns: 1fr !important; }
  .hero-meta-item { flex: 1 1 100%; }
  /* Cards más compactas */
  .blog-card, .case-study, .service-card, .feature-card, .benefit-card {
    padding: 18px !important;
  }
  /* Container respeta safe area */
  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0)) !important;
  }
}

/* ===== TABLET portrait/landscape (761-1024) — 2 columnas estables ===== */
@media (min-width: 761px) and (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .benefits-grid,
  .features-grid,
  .blog-grid,
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-grid,
  .case-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .container { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ============================================================
   MOBILE — breathing space hero + menú estilo Apple
   ============================================================ */
@media (max-width: 760px) {
  /* Más espacio entre nav y primer texto */
  .hero {
    padding-top: clamp(132px, 19vh, 168px) !important;
  }
  main > section:first-of-type:not(.hero) {
    padding-top: clamp(120px, 18vh, 152px) !important;
  }

  /* ===== Mobile nav — redesign Apple-like ===== */
  .nav-mobile {
    /* Slide-in panel desde la derecha, no fullscreen */
    position: fixed !important;
    inset: 0 0 0 auto !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(248, 246, 242, 0.94) !important;
    backdrop-filter: saturate(160%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(28px) !important;
    border-left: 1px solid rgba(26, 46, 82, 0.08) !important;
    box-shadow: -22px 0 48px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden !important;
    pointer-events: none;
    padding: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 100 !important;
  }
  .nav-mobile.open {
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto;
  }
  /* Header dentro del panel (espacio para el botón cerrar) */
  .nav-mobile::before {
    content: "Menu";
    display: block;
    padding: max(54px, env(safe-area-inset-top, 0) + 28px) 24px 16px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(26, 46, 82, 0.45);
    border-bottom: 1px solid rgba(26, 46, 82, 0.08);
  }
  .nav-mobile a {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #1A2E52 !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(26, 46, 82, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    transition: background 0.18s ease;
    min-height: 56px !important;
    box-sizing: border-box !important;
  }
  .nav-mobile a::after {
    content: "›";
    color: rgba(26, 46, 82, 0.3);
    font-size: 22px;
    font-weight: 300;
    margin-left: 12px;
  }
  .nav-mobile a:hover,
  .nav-mobile a:active {
    background: rgba(26, 46, 82, 0.04) !important;
    color: #1C6386 !important;
  }
  .nav-mobile a:last-of-type:not(.nav-cta) {
    border-bottom: none !important;
  }
  /* CTA destacado: botón sólido sin chevron */
  .nav-mobile a.nav-cta {
    margin: 24px 24px max(28px, env(safe-area-inset-bottom, 0) + 24px) !important;
    padding: 16px 24px !important;
    background: #1C6386 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    justify-content: center !important;
    box-shadow: 0 6px 18px rgba(28, 99, 134, 0.28);
  }
  .nav-mobile a.nav-cta::after { content: none; }

  /* ===== Backdrop dim cuando el menú está abierto ===== */
  body:has(.nav-mobile.open)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 35, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 50;
    pointer-events: none;
    animation: bh-backdrop-fade 0.28s ease forwards;
  }
  @keyframes bh-backdrop-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Lock body scroll cuando menú abierto */
  body:has(.nav-mobile.open) {
    overflow: hidden !important;
  }

  /* Hamburguesa: encima del backdrop, color adaptado */
  .nav-burger {
    z-index: 101 !important;
    position: relative;
  }
  .nav-burger[aria-expanded="true"] span {
    background: #1A2E52 !important;
  }

  /* ===== Mobile nav · dropdowns Servicios/Inversión (m-dd) ===== */
  .nav-mobile .m-dd {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(26, 46, 82, 0.06) !important;
    background: transparent !important;
  }
  .nav-mobile .m-dd summary {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #1A2E52 !important;
    padding: 16px 24px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
    cursor: pointer;
    box-sizing: border-box !important;
    background: transparent !important;
    transition: background 0.18s ease;
  }
  .nav-mobile .m-dd summary:hover,
  .nav-mobile .m-dd summary:active,
  .nav-mobile .m-dd[open] summary {
    background: rgba(26, 46, 82, 0.04) !important;
  }
  .nav-mobile .m-dd summary::-webkit-details-marker { display: none !important; }
  .nav-mobile .m-dd summary::after {
    content: "+" !important;
    color: rgba(26, 46, 82, 0.5) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    margin-left: 12px !important;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .nav-mobile .m-dd[open] summary::after {
    content: "−" !important;
    color: #1C6386 !important;
  }
  /* Sub-links dentro del details */
  .nav-mobile .m-dd a {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(26, 46, 82, 0.72) !important;
    padding: 12px 24px 12px 40px !important;
    margin: 0 !important;
    min-height: 44px !important;
    border-bottom: none !important;
    background: rgba(26, 46, 82, 0.025) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .nav-mobile .m-dd a::after {
    content: "›" !important;
    color: rgba(26, 46, 82, 0.25) !important;
    font-size: 18px !important;
    margin-left: auto !important;
    padding-left: 12px !important;
  }
  .nav-mobile .m-dd a:hover,
  .nav-mobile .m-dd a:active {
    background: rgba(26, 46, 82, 0.06) !important;
    color: #1C6386 !important;
  }
  .nav-mobile .m-dd a:first-of-type { margin-top: 0 !important; }
  .nav-mobile .m-dd a:last-of-type {
    border-bottom: none !important;
    padding-bottom: 14px !important;
  }
}

/* ---------- Nav (translucent cream) ---------- */
.nav { background: rgba(248,246,242,0.78) !important; border-bottom: 1px solid rgba(26,46,82,0.10); }
.nav.scrolled { background: rgba(248,246,242,0.96) !important; box-shadow: 0 1px 0 rgba(26,46,82,0.06); }
/* Menú móvil a pantalla completa (761–820 px): que haga scroll al abrir los grupos */
.nav-mobile { overflow-y: auto; overscroll-behavior: contain; }
.nav-links a, .nav-dd-btn { color: #000000 !important; }
.nav-links a:hover, .nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"] { color: #1C6386 !important; }

/* Dropdown anti-flicker — retraso al cerrar, hover bridge ampliado */
.nav-dd-panel {
  transition: opacity .22s ease .12s, transform .22s ease .12s, visibility 0s .34s !important;
}
.nav-dd:hover > .nav-dd-panel,
.nav-dd:focus-within > .nav-dd-panel,
.nav-dd-btn[aria-expanded="true"] + .nav-dd-panel {
  transition: opacity .18s ease 0s, transform .18s ease 0s, visibility 0s 0s !important;
}
.nav-dd-panel::before {
  top: -24px !important; left: -8px !important; right: -8px !important; height: 24px !important;
}
.nav-links a.nav-cta,
a.nav-cta { background: #1A2E52; color: #FFFFFF !important; }
.nav-phone { color: #1A2E52 !important; border-color: rgba(26,46,82,0.18); }
.nav-phone:hover { background: rgba(28,99,134,0.06); border-color: #1C6386; }
.nav-phone svg { color: #1C6386; }
.nav-burger span { background: #1A2E52 !important; }
.nav-menu { background: rgba(255,255,255,0.97) !important; }

/* ---------- Buttons — modern minimal (Linear / Stripe / Vercel feel) ---------- */
.btn {
  position: relative;
  border-radius: 12px;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, border-color .2s;
}
.btn::after { content: none !important; display: none !important; }

/* Light context — primary: solid navy, refined */
.btn-primary {
  background: #1A2E52;
  color: #FFFFFF;
  border: 1px solid #1A2E52;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(26,46,82,0.16),
    0 4px 12px -4px rgba(26,46,82,0.20);
}
.btn-primary:hover {
  background: #243E70;
  border-color: #243E70;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 4px rgba(26,46,82,0.18),
    0 8px 20px -4px rgba(26,46,82,0.30);
}
.btn-primary:active {
  transform: translateY(0);
  background: #14254A;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.18),
    0 1px 2px rgba(26,46,82,0.14);
}
.btn-primary svg { color: #FFFFFF; opacity: 0.9; }

/* Light context — ghost: white card */
.btn-ghost {
  color: #1A2E52;
  background: #FFFFFF;
  border: 1px solid rgba(26,46,82,0.18);
  box-shadow:
    0 1px 2px rgba(26,46,82,0.04),
    0 2px 6px -2px rgba(26,46,82,0.06);
}
.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(26,46,82,0.32);
  color: #1A2E52;
  background: #FAFAF7;
  box-shadow:
    0 1px 2px rgba(26,46,82,0.05),
    0 6px 14px -4px rgba(26,46,82,0.12);
}
.btn-ghost:active {
  transform: translateY(0);
  background: #F3F1EC;
  box-shadow: inset 0 1px 2px rgba(26,46,82,0.08);
}
.btn-ghost svg { color: currentColor; opacity: 0.7; }

::selection { background: #247DA0; color: #FFFFFF; }

/* ---------- Generic editorial card swap ---------- */
.g-review { background: rgba(26,46,82,0.04); border: 1px solid rgba(26,46,82,0.08); }
.g-review:hover { background: rgba(26,46,82,0.06); }

/* FAQ section that uses inline rgba(255,255,255,0.04) bg */
section[aria-labelledby="faq-heading"] {
  background: rgba(26,46,82,0.03) !important;
  border-top: 1px solid rgba(26,46,82,0.10);
}

/* ---------- DARK BANDS — restore navy/black palette in scope ---------- */
.video-band,
.cta-band,
.case-study,
.compare-band,
.cta-strip,
.tier-band {
  --navy:      #1A2E52;
  --navy-card: #20344D;
  --navy-deep: #152644;
  --blue:      #40A9FF;
  --blue-soft: #74B2FF;
  --ink:       #FFFFFF;
  --ink-2:     rgba(255,255,255,0.72);
  --ink-3:     rgba(255,255,255,0.48);
  --ink-4:     rgba(255,255,255,0.22);
  --rule:      rgba(255,255,255,0.10);
  background: #1A2E52 !important;
  color: #FFFFFF !important;
}
.compare-band h1, .compare-band h2, .compare-band h3, .compare-band h4, .compare-band p,
.cta-strip h1, .cta-strip h2, .cta-strip h3, .cta-strip h4, .cta-strip p { color: #FFFFFF !important; }
.compare-band .lead, .cta-strip .lead { color: rgba(255,255,255,0.72) !important; }
.compare-band .over, .cta-strip .over { color: #74B2FF !important; }
/* Buttons inside compare/cta bands — clean white on dark */
.compare-band .cmp-cta-primary, .cta-strip .btn-primary {
  background: #FFFFFF !important;
  color: #1A2E52 !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 4px 14px -4px rgba(0,0,0,0.35) !important;
}
.compare-band .cmp-cta-primary:hover, .cta-strip .btn-primary:hover {
  background: #F8F6F2 !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.22),
    0 8px 22px -4px rgba(0,0,0,0.45) !important;
}
.compare-band .cmp-cta-ghost { color: #FFFFFF !important; border-color: rgba(255,255,255,0.30) !important; }
.compare-band .cmp-cta-ghost:hover { border-color: #40A9FF !important; color: #40A9FF !important; }

.case-study {
  --navy:      #0B0B0E;
  --navy-card: #16161B;
  --navy-deep: #050507;
  background: #0B0B0E;
}

.cta-band {
  --navy:      #000000;
  --navy-card: #0B0B0E;
  --navy-deep: #000000;
  background: #000000;
}

/* Re-assert text colors inside dark bands (cascade safety) */
.video-band, .video-band h1, .video-band h2, .video-band h3, .video-band h4, .video-band p,
.cta-band, .cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4, .cta-band p,
.case-study, .case-study h1, .case-study h2, .case-study h3, .case-study h4, .case-study p { color: #FFFFFF; }

.case-study .lead, .video-band .lead, .cta-band .lead { color: rgba(255,255,255,0.72); }

/* Buttons inside dark bands — clean white on navy/black */
.video-band .btn-primary,
.cta-band .btn-primary,
.case-study .btn-primary {
  background: #FFFFFF;
  color: #1A2E52;
  border: 1px solid #FFFFFF;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 4px 14px -4px rgba(0,0,0,0.40);
}
.video-band .btn-primary:hover,
.cta-band .btn-primary:hover,
.case-study .btn-primary:hover {
  background: #F8F6F2;
  border-color: #F8F6F2;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.24),
    0 8px 22px -4px rgba(0,0,0,0.5);
}
.video-band .btn-primary svg, .cta-band .btn-primary svg, .case-study .btn-primary svg { color: #1A2E52; opacity: 0.6; }

.video-band .btn-ghost,
.cta-band .btn-ghost,
.case-study .btn-ghost {
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  box-shadow: none;
}
.video-band .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.case-study .btn-ghost:hover {
  border-color: rgba(255,255,255,0.5);
  color: #FFFFFF;
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

/* CTA-band button on black — clean white */
.cta-band .cta-band-btn {
  background: #FFFFFF;
  color: #1A2E52;
  border: 1px solid #FFFFFF;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    0 6px 18px -4px rgba(0,0,0,0.5);
}
.cta-band .cta-band-btn:hover {
  background: #F8F6F2;
  border-color: #F8F6F2;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.28),
    0 10px 26px -4px rgba(0,0,0,0.6);
}
.cta-band .cta-band-btn svg { color: #1A2E52; opacity: 0.6; }

/* Doubt CTA phone button — solid navy, clean */
.doubt-phone-btn {
  background: #1A2E52 !important;
  color: #FFFFFF !important;
  border: 1px solid #1A2E52;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.18),
    0 6px 16px -4px rgba(26,46,82,0.28) !important;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s;
}
.doubt-phone-btn:hover {
  background: #243E70 !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 4px rgba(0,0,0,0.22),
    0 10px 22px -4px rgba(26,46,82,0.4) !important;
}
.doubt-phone-btn::after, .doubt-phone-btn::before { content: none !important; display: none !important; }
.doubt-phone-btn svg { color: #FFFFFF !important; opacity: 0.85; }
.doubt-phone-btn:hover {
  background: linear-gradient(180deg, #335485 0%, #20355b 55%, #122446 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 2px 6px rgba(0,0,0,0.2),
    0 20px 40px -8px rgba(26,46,82,0.6),
    0 36px 68px -14px rgba(64,169,255,0.48) !important;
}
.doubt-phone-btn svg { color: #40A9FF !important; position: relative; z-index: 2; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); }
.doubt-phone-btn > * { position: relative; z-index: 2; }

/* ---------- Brand logo swap ----------
   Original light isotype invisible on cream; force navy outline variant.
   Targets <img src="...logo-isotype-v2.png"> inside .brand. */
.brand img[src*="logo-isotype-v2"],
.brand img[src*="logo-isotype-white"] {
  content: url('/assets/logo-isotype-navy-outline.png');
}

/* ---------- Mobile: clip hero horizontal overflow + kill parallax jitter ---------- */
@media (max-width: 760px) {
  .hero,
  .hero-viz,
  .hero-viz-wrap {
    overflow-x: clip !important;
    max-width: 100% !important;
  }
  /* Cancela el transform 3D del parallax JS — fuente del temblor en móvil */
  .hero-viz {
    transform: none !important;
  }
  .iso-scene {
    inset: 0 !important;
  }
  .orbit-platforms {
    inset: 0 !important;
  }
}

/* ---------- Footer (cream context) ---------- */
footer {
  background: transparent;
  color: var(--ink-2);
  border-top: 1px solid rgba(26,46,82,0.10);
}
/* FAQ accordion */
.faq-section { padding: 72px 0; background: rgba(26,46,82,0.03); border-top: 1px solid rgba(26,46,82,0.10); }
.faq-section h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-bottom: 40px; text-align: center; color: #1A2E52; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-q { border-bottom: 1px solid rgba(26,46,82,0.10); }
.faq-q > summary {
  font-size: 17px; font-weight: 600; color: #1A2E52;
  padding: 22px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px;
  transition: color .2s;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::after {
  content: ""; flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(26,46,82,0.35);
  border-radius: 50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2E52' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/12px no-repeat;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s;
}
.faq-q[open] > summary::after { transform: rotate(180deg); border-color: #40A9FF; }
.faq-q[open] > summary { color: #1A2E52; }
.faq-q:hover > summary { color: #1C6386; }
.faq-q .faq-a {
  font-size: 15px; color: rgba(26,46,82,0.78); line-height: 1.6;
  padding: 0 0 22px;
  animation: faq-fade .25s ease-out;
}
@keyframes faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

footer a { color: var(--ink-2); display: inline-block; padding: 6px 0; min-height: 44px; line-height: 32px; }
footer a:hover { color: #1A2E52; }
@media (max-width: 720px) {
  footer a { padding: 8px 0; line-height: 28px; }
}

/* A11y fix (audit 2026-05-28): focus-visible global (el existente vivía dentro de @media max-width:760px) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1C6386 !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}