/* ============================================================
   aguaComplet v3 — paleta azul cristalina (agua limpia, natural)
   Misma estructura y tipografía que v2, sistema de color nuevo
   ============================================================ */

:root {
  --ink: #0b3a5c;
  --ink-soft: #1c5a84;
  --paper: #eef6fb;
  --paper-raised: #ffffff;
  --paper-dim: #dcedf7;
  --line: #c3ddef;
  --line-strong: #93c3e2;
  --muted: #4f7896;
  --muted-on-dark: #b9dcf0;

  --accent: #0284c7;
  --accent-deep: #075985;
  --accent-bright: #38bdf8;
  --accent-wash: #e0f2fe;

  --cta: #0ea5e9;
  --cta-bright: #38bdf8;
  --cta-wash: #e0f2fe;

  --risk: #b3402f;
  --risk-wash: #f6e4e0;

  --shadow-soft: 0 1px 2px rgba(11,58,92,.07), 0 12px 32px rgba(11,58,92,.08);
  --shadow-dark: 0 20px 60px rgba(7,89,133,.35);

  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  color: inherit;
}

.mono, .price, .code, .num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent-deep); }
img { max-width: 100%; display: block; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* ---------- Utility ---------- */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); display: inline-block; }
.eyebrow.on-dark { color: var(--accent-bright); }
.eyebrow.on-dark::before { background: var(--accent-bright); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 30px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-cta { background: var(--cta-bright); color: var(--ink); box-shadow: 0 8px 24px rgba(56,189,248,.35); }
.btn-cta:hover { background: #7dd3fc; box-shadow: 0 12px 30px rgba(56,189,248,.45); }
.btn-ghost-dark { background: transparent; color: var(--paper); border-color: rgba(238,246,251,.35); }
.btn-ghost-dark:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-accent { background: var(--accent-deep); color: var(--paper); }
.btn-accent:hover { background: var(--accent); }
.btn-full { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* ---------- Icons (SVG line set, trazo 1.6, sin emoji) ---------- */
.icn { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icn-lg { width: 40px; height: 40px; }

/* ---------- Header ---------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(238,246,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; max-width: 1180px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.brand .icn { color: var(--accent); }
nav.primary { display: none; align-items: center; gap: 30px; }
nav.primary a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: .96rem; font-weight: 500; position: relative; }
nav.primary a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px; background: var(--accent); transition: right .2s ease; }
nav.primary a:not(.btn):hover::after { right: 0; }
nav.primary a.btn { text-decoration: none; font-size: .92rem; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.wa-pill { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-deep); color: var(--paper); }
.wa-pill:hover { background: var(--accent); }
#mobile-menu-button { background: none; border: none; cursor: pointer; color: var(--ink); padding: 6px; }
#mobile-menu { display: none; position: fixed; inset: 0; top: 68px; background: var(--paper); z-index: 90; padding: 28px; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; }
#mobile-menu.active { display: block; transform: translateX(0); }
#mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
#mobile-menu nav a { padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 1.1rem; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; }
@media (min-width: 1040px) {
  nav.primary { display: flex; }
  #mobile-menu-button, #mobile-menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 168px 0 96px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('../images/globus.webp');
  background-size: cover; background-position: center;
  opacity: .34;
  mix-blend-mode: luminosity;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,58,92,.55) 0%, rgba(11,58,92,.88) 62%, var(--ink) 100%);
}
.hero .inner { position: relative; z-index: 2; max-width: 880px; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.03; margin: 20px 0 24px; }
.hero h1 .accent-line { color: var(--cta-bright); display: block; }
.hero p.lede { font-family: 'Newsreader', serif; font-size: 1.25rem; font-weight: 300; color: var(--muted-on-dark); max-width: 640px; margin: 0 0 40px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.hero .fine-print { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted-on-dark); display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hero .disclaimer { font-size: 13px; color: rgba(185,220,240,.65); margin-top: 22px; max-width: 640px; }

/* Entrada escalonada del hero — un solo momento orquestado, no microinteracciones sueltas */
.hero .eyebrow, .hero h1, .hero p.lede, .hero .cta-row, .hero .fine-print, .hero .disclaimer, .hero .trust-strip {
  opacity: 0; animation: hero-rise .7s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .15s; }
.hero p.lede { animation-delay: .3s; }
.hero .cta-row { animation-delay: .42s; }
.hero .fine-print { animation-delay: .52s; }
.hero .disclaimer { animation-delay: .6s; }
.hero .trust-strip { animation-delay: .7s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero p.lede, .hero .cta-row, .hero .fine-print, .hero .disclaimer, .hero .trust-strip { animation: none; opacity: 1; }
}

.trust-strip { position: relative; z-index: 2; border-top: 1px solid rgba(238,246,251,.14); margin-top: 64px; padding-top: 32px; }
.trust-strip .row { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px 28px; }
@media (min-width: 780px) { .trust-strip .row { grid-template-columns: repeat(4,1fr); } }
.trust-item { display: flex; align-items: center; gap: 12px; color: var(--paper); }
.trust-item .icn { color: var(--accent-bright); }
.trust-item span { font-size: .92rem; font-weight: 500; }

/* ---------- Section scaffolding ---------- */
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head.center { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }
h2.section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
.section-sub { font-family: 'Newsreader', serif; color: var(--muted); font-size: 1.08rem; margin-top: 14px; }
/* Paneles contenidos, no bandas a sangre completa.
   Las secciones de color ocupaban todo el ancho de la página y en móvil se
   convertían en losas macizas de casi 1500px de alto (azul seguido de rojo),
   que rompían el ritmo visual. Ahora el color vive en un panel con margen
   lateral y esquinas redondeadas, y respira dentro de la página. */
section.on-dark { background: transparent; padding: 34px 0; }
section.on-dark > .container {
  background: var(--ink);
  border-radius: 16px;
  padding-top: 62px;
  padding-bottom: 62px;
}
@media (max-width: 900px) {
  /* Padding lateral en la sección: sin él el panel llega a los bordes de la
     pantalla y deja de leerse como panel. */
  section.on-dark { padding: 22px 18px; }
  section.on-dark > .container { padding-top: 42px; padding-bottom: 42px; border-radius: 12px; }
}
.on-dark { color: var(--paper); }
.on-dark .section-sub { color: var(--muted-on-dark); }
.on-dark h2.section-title { color: var(--paper); }
.bg-raised { background: var(--paper-raised); }
.bg-dim { background: var(--paper-dim); }
.small-print { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }

/* ---------- Metrics ribbon ---------- */
.metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
@media (min-width: 780px) { .metrics { grid-template-columns: repeat(4,1fr); } }
.metric .num { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.6rem; color: var(--accent-deep); line-height: 1; }
.metric .label { display: block; margin-top: 8px; font-weight: 500; }
.metric .ctx { display: block; margin-top: 3px; color: var(--muted); font-size: .85rem; }

/* ---------- Problem / Solution — split editorial, no card grid ---------- */
.split-risk { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .split-risk { grid-template-columns: 1fr 1fr; gap: 64px; } }
.risk-col h3 { font-size: 1.4rem; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.risk-col .icn { color: var(--risk); }
.risk-col p { color: var(--muted); }
.risk-divider { display: none; }
@media (min-width: 900px) {
  .split-risk { position: relative; }
  .risk-divider { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
}
.solution-col { background: var(--accent-deep); color: var(--paper); padding: 36px; border-radius: var(--radius); }
.solution-col h3 { color: var(--cta-bright); }
.solution-col .icn { color: var(--cta-bright); }
.solution-col p { color: var(--muted-on-dark); }

/* ---------- Benefits: two-column dossier list ---------- */
.benefits-list { display: grid; grid-template-columns: 1fr; gap: 36px; max-width: 920px; }
@media (min-width: 780px) { .benefits-list { grid-template-columns: 1fr 1fr; gap: 40px 56px; } }
.benefit { display: flex; gap: 18px; }
.benefit .icn { color: var(--accent); margin-top: 3px; }
.benefit h3 { font-size: 1.1rem; margin-bottom: 6px; }
.benefit p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Timeline: una sola línea real, sin cajas repetidas ---------- */
.timeline { position: relative; max-width: 980px; }
.timeline .track { position: relative; padding-left: 32px; border-left: 2px solid var(--line-strong); }
.tl-step { position: relative; padding-bottom: 44px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before { content: ""; position: absolute; left: -38px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper); }
.tl-step .tl-week { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .06em; color: var(--accent-deep); text-transform: uppercase; }
.tl-step h4 { font-size: 1.15rem; margin: 4px 0 6px; }
.tl-step p { color: var(--muted); margin: 0; max-width: 620px; }

/* ---------- Calculadora banner ---------- */
.calc-banner { border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; background: var(--paper-raised); }
.calc-banner .left { display: flex; align-items: center; gap: 18px; }
.calc-banner .icn { color: var(--accent); }
.calc-banner h3 { font-size: 1.2rem; margin-bottom: 4px; }
.calc-banner p { color: var(--muted); font-size: .92rem; margin: 0; max-width: 46ch; }

/* ---------- Case studies: editorial pull-list ---------- */
.cases { display: flex; flex-direction: column; }
.case { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 40px 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .case { grid-template-columns: 200px 1fr 260px; gap: 40px; align-items: start; } }
.case .tag { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.case .headline-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--accent-deep); }
.case h3 { font-size: 1.25rem; margin: 8px 0 10px; }
.case p.body-text { color: var(--muted); margin: 0; }
.case .result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.case .result-list li { display: flex; gap: 8px; font-size: .9rem; color: var(--ink-soft); }
.case .result-list .icn { width: 16px; height: 16px; color: var(--accent); margin-top: 3px; }

/* ---------- Testimonials: tratamiento discreto (pendiente confirmar autenticidad) ---------- */
.testi-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0; }
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 860px) { .testi-grid { grid-template-columns: repeat(3,1fr); } }
.testi { font-size: .93rem; }
.testi p { color: var(--ink-soft); font-style: italic; margin: 0 0 12px; }
.testi .who { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Pricing: tabla comparativa real ---------- */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.price-table thead th { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.05rem; border-bottom: 2px solid var(--line-strong); }
.price-table thead th.plan-pop { color: var(--accent-deep); }
.price-table .plan-price { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1.3rem; white-space: nowrap; }
.price-table .plan-unit { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); display: block; }
.price-table td.center, .price-table th.center { text-align: center; }
.price-table .yes { color: var(--accent-deep); }
.price-table .no { color: var(--line-strong); }
.price-table tbody tr:hover { background: var(--paper-raised); }

/* ---------- Tarjetas de plan (móvil) ----------
   Apilar la tabla de precios por filas generaba 44 bloques sueltos de visos y
   era imposible saber qué incluía cada plan. Por debajo de 780px la tabla se
   sustituye por una tarjeta por plan, generada desde la propia tabla por
   assets/js/plan-cards.js — sin contenido duplicado en el HTML. */
.plan-cards { display: none; }

@media (max-width: 780px) {
  .has-plan-cards #pricing-section .table-scroll { display: none; }
  .has-plan-cards #pricing-section .price-foot--desktop { display: none; }
  .plan-cards { display: grid; gap: 18px; }

  .plan-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 22px;
    box-shadow: var(--shadow-soft);
  }
  .plan-card.is-featured { border: 2px solid var(--accent); }

  .plan-card__name {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent-deep);
    margin-bottom: 10px;
  }
  /* El importe llega como nodo de texto suelto dentro del td, por eso el
     tamaño grande se aplica al contenedor y no a una clase interna. */
  .plan-card__price {
    margin-bottom: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }
  .plan-card__price .plan-unit { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }

  .plan-card__details { margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .plan-card__details dt {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
  }
  .plan-card__details dd { margin: 3px 0 12px; font-size: .93rem; color: var(--ink); line-height: 1.45; }
  .plan-card__details dd:last-child { margin-bottom: 0; }

  .plan-card__features { list-style: none; margin: 0 0 20px; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
  .plan-card__features li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
  .plan-card__features li.yes { color: var(--ink); }
  .plan-card__features li.yes span:first-child { color: var(--accent-deep); font-weight: 700; }
  .plan-card__features li.no { color: var(--muted); }
  .plan-card__features li.no span:first-child { color: var(--line-strong); }

  .plan-card__cta { width: 100%; justify-content: center; }
  .plan-cards__note { margin-top: 6px; }
}

/* ---------- Tablas en móvil (resto del sitio) ----------
   Las tablas que no son la de precios se apilan por filas con su rótulo:
   ahí sí funciona, porque no son comparativas de producto. */
@media (max-width: 780px) {
  .table-scroll { overflow-x: visible; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .price-table tbody tr {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 16px;
    padding: 4px 0;
    overflow: hidden;
  }
  .price-table tbody tr:hover { background: var(--paper-raised); }

  /* Primera celda de cada fila: actúa de rótulo del bloque */
  .price-table tbody td:first-child {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: .98rem;
    color: var(--ink);
    background: var(--accent-wash);
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
  }

  /* Etiqueta encima y valor debajo: en columna no hay forma de que un precio
     largo o un nombre de tramo se corten por la derecha, que es lo que pasaba
     con la disposición en dos columnas. */
  .price-table tbody td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left !important;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
  }
  .price-table tbody td:last-child { border-bottom: 0; }

  .price-table tbody td[data-label]::before {
    content: attr(data-label);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    line-height: 1.3;
  }
  .price-table .plan-price { font-size: 1.15rem; white-space: normal; }
  .price-table .plan-unit { display: block; margin-left: 0; }
  .price-table td[colspan] { align-items: center; text-align: center !important; }
}
.price-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
@media (min-width: 700px) { .price-foot { flex-direction: row; } }
.price-foot .btn { flex: 1; }
.price-notice { border: 1px solid var(--line-strong); background: var(--paper-raised); border-radius: var(--radius); padding: 18px 22px; display: flex; gap: 14px; margin-bottom: 32px; }
.price-notice .icn { color: var(--accent); margin-top: 2px; }
.price-notice p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

/* ---------- Guarantees: certificado / sello ---------- */
.seals { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 860px) { .seals { grid-template-columns: repeat(3,1fr); } }
.seal { border: 1px solid rgba(238,246,251,.18); border-radius: var(--radius); padding: 32px; position: relative; }
.seal .seal-mark { width: 52px; height: 52px; border: 1.5px solid var(--cta-bright); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.seal .seal-mark .icn { color: var(--cta-bright); width: 24px; height: 24px; }
.seal h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--paper); }
.seal p { color: var(--muted-on-dark); font-size: .92rem; margin: 0; }

/* ---------- Urgency slim bar ---------- */
/* Franja compacta, no sección completa: sin este padding reducido heredaba los
   88px de `section` y ocupaba casi 400px de alto. El mensaje lleva ancho máximo
   para no estirarse a todo el viewport (ilegible) ni empujar el botón a otra
   línea, que era lo que ocurría con textos largos. */
/* Mismo criterio que .on-dark: panel contenido en lugar de banda roja a
   sangre completa, que junto al panel azul anterior rompía el ritmo visual. */
.urgency { background: transparent; color: #fbe9e5; padding: 18px 0 34px; }
.urgency .row { background: var(--risk); border-radius: 16px; }
@media (max-width: 900px) {
  .urgency { padding: 12px 18px 22px; }
  .urgency .row { border-radius: 12px; }
}
/* Solo padding vertical: este elemento es también .container, y usar el
   atajo `padding` anulaba su margen lateral, dejando el texto y el botón
   pegados a los bordes de la pantalla. */
.urgency .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 30px; padding-bottom: 30px; }
.urgency .msg { display: flex; gap: 14px; align-items: flex-start; max-width: 74ch; flex: 1 1 460px; }
.urgency .btn { flex-shrink: 0; }
@media (max-width: 720px) {
  .urgency .row { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 26px; padding-bottom: 26px; }
  /* En columna, flex-basis pasa a gobernar la ALTURA: sin este reset el
     mensaje reservaba 460px de alto y dejaba un hueco enorme antes del botón. */
  .urgency .msg { flex: 0 1 auto; max-width: none; }
  .urgency .btn { width: 100%; justify-content: center; }
}
.urgency .icn { color: #fbe9e5; margin-top: 2px; }
.urgency h3 { font-size: 1.05rem; color: #fff; }
.urgency p { margin: 4px 0 0; font-size: .88rem; color: #fbe9e5; opacity: .92; }
.urgency .small-print { color: #fbe9e5; opacity: .75; }

/* ---------- Contact form ---------- */
.form-panel { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 44px; box-shadow: var(--shadow-soft); max-width: 620px; margin: 0 auto; }
.form-panel h3 { font-size: 1.5rem; margin-bottom: 8px; }
.form-panel .lede-form { color: var(--muted); font-size: .95rem; margin-bottom: 30px; }
.field { margin-bottom: 20px; text-align: left; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; color: var(--ink-soft); }
/* Incluye tel y select: al añadir el teléfono y el campo de cualificación del
   perfilado progresivo se quedaron fuera de esta regla y el navegador los
   pintaba con su ancho por defecto, muy estrechos frente al resto. */
.field input[type="text"], .field input[type="email"], .field input[type="number"],
.field input[type="tel"], .field select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: 'Newsreader', serif; font-size: 1rem; background: var(--paper); color: var(--ink);
}
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7896' stroke-width='1.8' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.field label .small-print { font-weight: 400; }
.captcha-box { background: var(--cta-wash); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.captcha-box #captcha-question { font-family: 'IBM Plex Mono', monospace; font-weight: 700; background: var(--paper-raised); padding: 3px 9px; border-radius: 3px; }
#captcha-feedback { color: var(--risk); font-size: .85rem; margin-top: 8px; }
.checks { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; font-size: .87rem; color: var(--ink-soft); }
.checks a { color: var(--accent-deep); }
.checks input { margin-top: 3px; }
.contact-modal-feedback { color: var(--risk); font-size: .85rem; margin-top: 8px; }

/* ---------- Modal de contacto compartido (páginas de clúster) ---------- */
.contact-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(11,58,92,.72); z-index: 998; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.contact-modal-overlay.open { display: flex; }
.contact-modal-overlay .form-panel { position: relative; max-height: 90vh; overflow-y: auto; }
.contact-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: var(--muted); padding: 6px; line-height: 0; }
.contact-modal-close:hover { color: var(--accent-deep); }

/* ---------- FAQ: dos columnas, acordeón discreto ---------- */
.faq-grid { columns: 1; column-gap: 40px; }
@media (min-width: 900px) { .faq-grid { columns: 2; } }
.faq-item { break-inside: avoid; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 2px; cursor: pointer; font-weight: 600; font-family: 'Bricolage Grotesque', sans-serif; font-size: .98rem; }
.faq-question .arrow { color: var(--accent); transition: transform .25s ease; flex-shrink: 0; width: 16px; height: 16px; display: inline-block; }
.faq-question.active .arrow { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease-out, padding .4s ease-out; }
.faq-answer.open { max-height: 260px; padding-bottom: 18px; }
.faq-answer p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- Footer ---------- */
footer.site { background: var(--ink); color: var(--muted-on-dark); padding: 54px 0 34px; font-size: .88rem; }
footer.site .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(238,246,251,.12); }
footer.site .brand { color: var(--paper); }
footer.site a { color: var(--muted-on-dark); text-decoration: none; }
footer.site a:hover { color: var(--accent-bright); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer.site .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer.site .social { display: flex; gap: 14px; }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed; bottom: 26px; left: 26px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent-deep); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(7,89,133,.4);
  animation: pulse-wa 2.6s infinite;
}
.whatsapp-float:hover { background: var(--accent); }
@keyframes pulse-wa { 0%,100% { box-shadow: 0 0 0 0 rgba(2,132,199,.45), 0 10px 30px rgba(7,89,133,.4); } 50% { box-shadow: 0 0 0 14px rgba(2,132,199,0), 0 10px 30px rgba(7,89,133,.4); } }

/* ---------- Página PPCL — showcase de módulos con captura real ---------- */
figure.evidence {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--paper-raised);
}
figure.evidence img { display: block; width: 100%; height: auto; }

.module-row {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.module-row .module-figure { width: 100%; }
.module-row .module-text { max-width: 720px; }
.module-text p { color: var(--muted); margin: 14px 0 22px; }
.module-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.module-benefits li { font-size: .95rem; color: var(--ink-soft); padding-left: 22px; position: relative; }
.module-benefits li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.module-benefits strong { color: var(--ink); }

/* ---------- Lightbox: ampliar capturas de la app a pantalla completa ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(11,58,92,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: zoom-out;
  animation: lightbox-in .18s ease;
}
.lightbox-overlay img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox-overlay { animation: none; } }

/* ---------- Explorador de Suites (página pilar) ---------- */
.suite-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) { .suite-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .suite-grid { grid-template-columns: 1fr 1fr 1fr; } }

.suite-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper-raised);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.suite-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--accent);
}
.suite-card .suite-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-wash);
  display: flex; align-items: center; justify-content: center;
}
.suite-card .suite-icon .icn { color: var(--accent-deep); width: 22px; height: 22px; }
.suite-card h3 { font-size: 1.1rem; margin: 0; }
.suite-card p { color: var(--muted); font-size: .92rem; margin: 0; flex-grow: 1; }
.suite-card .suite-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-deep);
  display: flex; align-items: center; gap: 6px;
}
.suite-card.pending {
  opacity: .55;
  cursor: default;
  border-style: dashed;
}
.suite-card.pending .suite-icon { background: var(--paper-dim); }
.suite-card.pending .suite-icon .icn { color: var(--muted); }
.suite-card.pending .suite-meta { color: var(--muted); }

/* ---------- Bento grid del explorador (Fase Final, Paso 3, 2026-08-25) ---------- */
@media (min-width: 1080px) {
  .suite-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .suite-card.featured { grid-column: span 2; }
}
.suite-card.featured .suite-icon { width: 52px; height: 52px; }
.suite-card.featured .suite-icon .icn { width: 26px; height: 26px; }
.suite-card.featured h3 { font-size: 1.3rem; }

.suite-card .suite-reveal {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
a.suite-card:hover .suite-reveal,
a.suite-card:focus-visible .suite-reveal {
  max-height: 120px;
  opacity: 1;
  margin-top: 4px;
}
.suite-card .suite-reveal li {
  font-size: .82rem;
  color: var(--muted);
  padding: 3px 0 3px 16px;
  position: relative;
}
.suite-card .suite-reveal li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .suite-card .suite-reveal { transition: none; }
}

/* ---------- Servicios de la agencia ---------- */
.service-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px) { .service-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .service-grid { grid-template-columns: repeat(3,1fr); } }
.service-card { border: 1px solid var(--line); background: var(--paper-raised); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.service-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.service-card .svc-mark { width: 42px; height: 42px; border: 1.5px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.service-card .svc-mark .icn { color: var(--accent); width: 21px; height: 21px; }
.service-card h3 { font-size: 1.06rem; }
.service-card p { color: var(--muted); font-size: .91rem; margin: 0; }
.service-card .svc-norm { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-deep); background: var(--accent-wash); border-radius: 999px; padding: 4px 9px; align-self: flex-start; }
.service-card .svc-go { margin-top: auto; padding-top: 12px; font-size: .87rem; font-weight: 600; color: var(--accent-deep); }

/* ---------- Longitud de línea legible ----------
   A 1440px de ancho, un párrafo suelto dentro de .container ocupaba 1124px:
   unos 130 caracteres por línea, cuando el rango cómodo de lectura está entre
   60 y 80. Se acota el texto corrido; tablas, rejillas y tarjetas no se tocan
   porque su ancho lo determina su propio contenido. */
.container > p,
.container-narrow > p,
.price-notice p,
.synergy-box p,
.section-sub { max-width: 76ch; }
.container > p.small-print,
.price-foot ~ p.small-print { max-width: 96ch; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Migas de pan ----------
   La cabecera es position:fixed y mide unos 91px. Sin este desplazamiento las
   migas quedan ocultas detrás de ella — se detectó en QA visual y afectaba a
   las 22 páginas que las llevan. La sección siguiente aporta su propio
   padding, por eso solo se compensa por arriba. */
.breadcrumb { font-size: .84rem; color: var(--muted); padding: 108px 0 0; }
@media (max-width: 900px) { .breadcrumb { padding-top: 88px; } }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-deep); text-decoration: underline; }
.breadcrumb span { margin: 0 7px; opacity: .55; }

/* ---------- Hero de las páginas de servicio y zona ----------
   Antes era una sola columna de 780px dentro de un contenedor de 1180px, lo
   que dejaba medio ancho vacío. Ahora el espacio libre lo ocupa una tarjeta
   con los datos que el visitante busca antes de leer nada más. */
.svc-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 980px) { .svc-hero { grid-template-columns: 1.35fr .8fr; gap: 56px; } }
.svc-hero h1 { line-height: 1.12; margin-bottom: 18px; }
.svc-hero .section-sub { margin-bottom: 22px; }

.svc-facts { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-soft); }
.svc-facts h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-weight: 600; margin-bottom: 18px; }
.svc-facts dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.svc-facts .fact { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.svc-facts .fact:last-of-type { border-bottom: 0; padding-bottom: 0; }
.svc-facts .fact .icn { color: var(--accent); width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; }
.svc-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
.svc-facts dd { margin: 2px 0 0; font-size: .95rem; color: var(--ink); font-weight: 600; }
.svc-facts .btn { width: 100%; justify-content: center; margin-top: 20px; }

/* ---------- Sello de actualización (señal de recencia para GEO) ---------- */
.freshness { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.freshness .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- Pie enriquecido ---------- */
.foot-nav { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 34px 0; border-bottom: 1px solid rgba(238,246,251,.12); }
@media (min-width: 760px) { .foot-nav { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px) { .foot-nav { grid-template-columns: repeat(4,1fr); } }
.foot-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--paper); margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.foot-col a { color: var(--muted-on-dark); text-decoration: none; font-size: .87rem; }
.foot-col a:hover { color: var(--accent-bright); }

/* ---------- Analítica de Laboratorio: tarjetas, chips, franja de riesgo ---------- */
.lab-cards { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
@media (min-width: 860px) { .lab-cards { grid-template-columns: repeat(3,1fr); } }
.lab-card { border: 1px solid var(--line); background: var(--paper-raised); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.lab-card .lab-mark { width: 44px; height: 44px; border: 1.5px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lab-card .lab-mark .icn { color: var(--accent); width: 22px; height: 22px; }
.lab-card h3 { font-size: 1.08rem; }
.lab-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); background: var(--accent-wash); border-radius: 999px; padding: 5px 10px; }
.lab-card .lab-note { font-size: .85rem; color: var(--muted); font-style: italic; margin: 0; }
.lab-card .lab-price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--accent-deep); font-weight: 600; }

.risk-strip { display: grid; grid-template-columns: 1fr; gap: 20px; background: var(--risk-wash); border-radius: var(--radius); padding: 28px; margin-bottom: 32px; }
@media (min-width: 780px) { .risk-strip { grid-template-columns: repeat(4,1fr); } }
.risk-strip-item { display: flex; gap: 12px; align-items: flex-start; }
.risk-strip-item .icn { color: var(--risk); width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.risk-strip-item p { margin: 0; font-size: .87rem; color: var(--ink); }
.risk-strip-item strong { color: var(--risk); }

.lab-detail-head { text-align: center; margin: 8px 0 18px; }
.lab-detail-head .eyebrow { display: inline-flex; }

.synergy-box { background: var(--accent-deep); color: var(--paper); border-radius: var(--radius); padding: 32px; margin-top: 36px; }
.synergy-box h3 { color: var(--cta-bright); font-size: 1.2rem; margin-bottom: 12px; }
.synergy-box p { color: var(--muted-on-dark); margin: 0; font-size: .95rem; }
.synergy-box strong { color: var(--paper); }

/* ---------- Footer ---------- */
footer.site { background: var(--ink); color: var(--muted-on-dark); padding: 54px 0 34px; font-size: .88rem; }
footer.site .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(238,246,251,.12); }
footer.site .brand { color: var(--paper); }
footer.site a { color: var(--muted-on-dark); text-decoration: none; }
footer.site a:hover { color: var(--accent-bright); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer.site .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer.site .social { display: flex; gap: 14px; }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed; bottom: 26px; left: 26px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent-deep); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(7,89,133,.4);
  animation: pulse-wa 2.6s infinite;
}
.whatsapp-float:hover { background: var(--accent); }
@keyframes pulse-wa { 0%,100% { box-shadow: 0 0 0 0 rgba(2,132,199,.45), 0 10px 30px rgba(7,89,133,.4); } 50% { box-shadow: 0 0 0 14px rgba(2,132,199,0), 0 10px 30px rgba(7,89,133,.4); } }