/* ==========================================================================
   Consejo Mexicano de Defensa Médica
   Sistema de diseño: adaptación institucional de "Steep" (serif editorial)
   ========================================================================== */

:root{
  /* Marca */
  --teal:#256F73;        /* Teal institucional del escudo */
  --navy:#032E5B;        /* Navy institucional del escudo */
  --navy-hover:#0a4079;
  --teal-hover:#1b5457;

  /* Acento (superficie + tinta) — derivado del teal de marca */
  --sage:#e3eceb;
  --sage-ink:#1b5457;

  /* Neutrales */
  --ink:#17191c;
  --slate:#5e636e;
  --ash:#979799;
  --smoke:#a3a6af;
  --mist:#f2f2f3;
  --fog:#fafafb;
  --paper:#ffffff;

  --hairline:rgba(23,25,28,.10);
  --hairline-strong:rgba(23,25,28,.18);

  /* Tipografía */
  --serif:"Source Serif 4",'GT Sectra','Tiempos Headline',ui-serif,Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Forma */
  --r-img:12px;
  --r-input:16px;
  --r-sm:16px;
  --r-elev:20px;
  --r-card:24px;
  --r-pill:9999px;

  /* Espaciado */
  --maxw:1200px;
  --section:80px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

section[id],div[id]{scroll-margin-top:88px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:450;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;border-radius:var(--r-img)}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;      /* La serif nunca sube de 400. Es la firma del sistema. */
  margin:0;
  line-height:1.3;
  color:var(--ink);
}

h1{font-size:clamp(44px,6.4vw,90px);letter-spacing:-.025em;line-height:1.06}
h2{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.015em;line-height:1.1}
h3{font-size:clamp(24px,2.4vw,26px);letter-spacing:-.009em;line-height:1.18;font-weight:400}

.h-sm{
  font-family:var(--sans);
  font-size:22px;
  font-weight:450;
  letter-spacing:-.009em;
  line-height:1.3;
  margin:0;
}

p{margin:0}

.lede{
  font-size:clamp(19px,1.7vw,22px);
  line-height:1.5;
  color:var(--slate);
  font-weight:450;
}

.body-lg{font-size:20px;font-weight:500;line-height:1.35}

.muted{color:var(--slate)}
.tertiary{color:var(--ash)}

.eyebrow{
  font-size:12px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ash);
  margin:0;
}

.serif-em{font-style:italic}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

section{padding-block:var(--section)}
.band-fog{background:var(--fog)}
.rule{height:1px;background:var(--hairline);border:0;margin:0}

.stack-8 >*+*{margin-top:8px}
.stack-12>*+*{margin-top:12px}
.stack-16>*+*{margin-top:16px}
.stack-24>*+*{margin-top:24px}
.stack-32>*+*{margin-top:32px}

.section-head{max-width:760px;margin-bottom:48px}
.section-head .eyebrow{margin-bottom:16px}
.section-head .lede{margin-top:20px}

/* --------------------------------------------------------------------------
   Botones y enlaces
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--r-pill);
  padding:14px 26px;
  font-family:var(--sans);
  font-size:16px;
  font-weight:480;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}

.btn-solid{background:var(--navy);color:var(--paper)}
.btn-solid:hover{background:var(--navy-hover)}

.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--paper)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link{
  color:var(--teal);
  text-decoration:none;
  font-weight:450;
  transition:color .18s ease;
}
.link:hover{color:var(--teal-hover);text-decoration:underline;text-underline-offset:4px}

/* Se conserva la clase por compatibilidad; hoy comparte el tono de marca. */
.link-ink{color:var(--teal)}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
}

/* Barra superior con teléfono siempre visible */
.topbar{background:var(--navy);color:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px}
.topbar-note{font-size:13px;color:rgba(255,255,255,.7)}
.topbar-links{display:flex;align-items:center;gap:22px}
.topbar-links a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;color:#fff;text-decoration:none;
  transition:color .18s ease;
}
.topbar-links a:hover{color:rgba(255,255,255,.72)}
.topbar-links svg{width:15px;height:15px;flex:none;opacity:.85}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:72px;
}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}

/* Escudo recortado del logotipo original (assets/logo-original.jpeg).
   Los factores salen de la caja del escudo dentro de la imagen de 1179x1165:
   x 275..860, y 135..715  ->  585 x 580 px. */
.brand-mark{
  --escudo:42px;
  width:var(--escudo);
  height:var(--escudo);
  flex:none;
  display:block;
  background-image:url("assets/logo-original.jpeg");
  background-repeat:no-repeat;
  background-size:calc(var(--escudo) * 2.0154) calc(var(--escudo) * 1.9915);
  background-position:calc(var(--escudo) * -0.4701) calc(var(--escudo) * -0.2308);
}

.brand-name{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.brand-sub{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-transform:none}

.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;font-weight:450;color:var(--slate);text-decoration:none;transition:color .18s ease}
.nav-links a:hover{color:var(--teal)}

.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:11px 20px;font-size:15px}

/* --------------------------------------------------------------------------
   Hero con imagen de fondo
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(520px,80vh,780px);
  padding-block:72px;
  overflow:hidden;
  background:var(--ink);   /* color de respaldo mientras carga la imagen */
  isolation:isolate;
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
  border-radius:0;
  filter:saturate(.92) contrast(1.02);
  z-index:-2;
  opacity:0;
  animation:heroPase 21s infinite;
}
.hero-bg:nth-of-type(1){animation-delay:0s}
.hero-bg:nth-of-type(2){animation-delay:7s}
.hero-bg:nth-of-type(3){animation-delay:14s}

/* Cada imagen permanece unos siete segundos y cruza con la siguiente. */
@keyframes heroPase{
  0%{opacity:0}
  3%{opacity:1}
  30%{opacity:1}
  33%{opacity:0}
  100%{opacity:0}
}

/* Sin movimiento: se queda fija la primera. */
@media (prefers-reduced-motion:reduce){
  .hero-bg{animation:none;opacity:0}
  .hero-bg:nth-of-type(1){opacity:1}
}

/* Velo degradado: oscuro del lado del texto, transparente hacia la derecha,
   para que la arquitectura de la foto siga siendo visible. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(14,16,18,.90) 0%, rgba(14,16,18,.74) 42%, rgba(14,16,18,.30) 78%, rgba(14,16,18,.18) 100%);
}

.hero .wrap{position:relative}
.hero-inner{max-width:820px}

.hero h1{color:var(--paper);margin-bottom:28px}
.hero .lede{color:rgba(255,255,255,.80);max-width:620px}
.hero .btn-row{margin-top:40px}

.hero .btn-solid{background:var(--paper);color:var(--ink)}
.hero .btn-solid:hover{background:rgba(255,255,255,.88)}
.hero .btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:var(--paper);color:var(--ink)}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--mist);
  border-radius:var(--r-card);
  padding:32px;
  display:flex;
  flex-direction:column;
}
.card-paper{background:var(--paper);border:1px solid var(--hairline)}
.card h3{margin-bottom:14px}
.card p{color:var(--slate);line-height:1.5;font-weight:450}

.card-num{
  font-family:var(--serif);
  font-size:15px;
  color:var(--ash);
  margin-bottom:24px;
  letter-spacing:.02em;
}

.card-list{list-style:none;margin:20px 0 0;padding:0}
.card-list li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  color:var(--slate);
  line-height:1.45;
  font-weight:450;
}
.card-list li+li{margin-top:10px}
.card-list li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--smoke);
}

.card-foot{margin-top:auto;padding-top:28px}

/* Tarjeta de acento salvia — UNA sola vez por página */
.card-accent{
  background:var(--sage);
  color:var(--sage-ink);
  border-radius:var(--r-card);
  padding:56px;
}
.card-accent h2,.card-accent h3{color:var(--sage-ink)}
.card-accent p{color:rgba(43,59,45,.78)}
.card-accent .eyebrow{color:rgba(43,59,45,.55)}
.card-accent .btn-ghost{color:var(--sage-ink);border-color:var(--sage-ink)}
.card-accent .btn-ghost:hover{background:var(--sage-ink);color:var(--sage)}

/* --------------------------------------------------------------------------
   Los tres riesgos
   -------------------------------------------------------------------------- */

.risk{
  border-top:1px solid var(--ink);
  padding-top:24px;
  display:flex;
  flex-direction:column;
}
.risk-img{
  width:100%;height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--r-sm);
  display:block;
  margin-bottom:28px;
  filter:saturate(.9) contrast(1.02);
}
.risk h3{font-size:26px;line-height:1.22;letter-spacing:-.009em;margin-bottom:14px}
.risk p{color:var(--slate);font-size:16px;line-height:1.5;margin-bottom:28px}

.risk-help{
  margin-top:auto;
  padding:20px;
  background:var(--mist);
  border-radius:var(--r-sm);
  font-size:15px;
  line-height:1.5;
  color:var(--slate);
}
.risk-help strong{
  display:block;
  color:var(--ash);
  font-weight:500;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:10px;
}

/* --------------------------------------------------------------------------
   Gráfica: aumento de la litigiosidad
   -------------------------------------------------------------------------- */

/* Encabezado a dos columnas: titular a la izquierda, imagen a la derecha. */
.head-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  margin-bottom:64px;
}
.head-media .section-head{margin-bottom:0;max-width:none}
.figure-head img{aspect-ratio:3/2;object-fit:cover}

.chart-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:start}

.chart-figure{font-size:clamp(56px,7vw,90px);font-family:var(--serif);line-height:1;letter-spacing:-.025em}
.chart-figure-label{font-size:16px;color:var(--slate);margin-top:14px;max-width:360px;line-height:1.45}

.chart{margin-top:44px;display:flex;flex-direction:column;gap:26px}
.chart-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;
}
.chart-period{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.chart-value{font-family:var(--serif);font-size:26px;letter-spacing:-.009em}
.chart-value span{font-family:var(--sans);font-size:14px;font-weight:450;color:var(--slate);letter-spacing:0}
.chart-track{height:12px;background:var(--mist);border-radius:var(--r-pill);overflow:hidden}
.chart-fill{height:100%;background:var(--ink);border-radius:var(--r-pill)}
.chart-fill-past{background:var(--smoke)}

.chart-reasons{border-top:1px solid var(--ink);padding-top:24px}
.chart-reasons h3{font-size:22px;font-family:var(--sans);font-weight:450;letter-spacing:-.009em;margin-bottom:24px}
.chart-reasons ol{list-style:none;margin:0;padding:0;counter-reset:motivo}
.chart-reasons li{
  counter-increment:motivo;
  position:relative;
  padding-left:34px;
  font-size:16px;
  line-height:1.45;
  color:var(--slate);
  font-weight:450;
}
.chart-reasons li+li{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline)}
.chart-reasons li::before{
  content:counter(motivo);
  position:absolute;left:0;top:0;
  font-family:var(--serif);
  font-size:16px;
  color:var(--ash);
}
.chart-reasons li+li::before{top:18px}

.source{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--hairline);
  font-size:13px;color:var(--ash);line-height:1.6;max-width:780px;
}

/* Las tres tarjetas comparten filas: icono, titular, texto y recuadro quedan
   alineados entre columnas aunque el contenido mida distinto. */
@supports (grid-template-rows: subgrid){
  @media (min-width:641px){
    .riesgos > .risk{
      display:grid;
      grid-template-rows:subgrid;
      grid-row:span 4;
    }
    .riesgos > .risk p{margin-bottom:0}
    .riesgos > .risk .risk-help{margin-top:0;align-self:stretch}
  }
}

/* --------------------------------------------------------------------------
   Figura (fotografía editorial)
   -------------------------------------------------------------------------- */

.figure{margin:0}
.figure img,.figure .ph{
  width:100%;
  /* height:auto es necesario para que el aspect-ratio gane sobre el
     atributo height del HTML (que sirve para reservar espacio al cargar). */
  height:auto;
  border-radius:var(--r-img);
  display:block;
  /* Color contenido: se baja un punto la saturación para que la fotografía
     conviva con el sistema sin apagarse. */
  filter:saturate(.92) contrast(1.02);
}
.figure figcaption{
  margin-top:14px;
  font-size:14px;
  color:var(--ash);
  line-height:1.5;
  max-width:520px;
}
.figure-wide img,.figure-wide .ph{aspect-ratio:21/9;object-fit:cover}
.figure-tall img,.figure-tall .ph{aspect-ratio:4/5;object-fit:cover}

/* Marcador visible mientras no hay fotografía real */
.ph{
  background:var(--mist);
  border:1px dashed var(--hairline-strong);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px;
  color:var(--smoke);
  font-size:14px;
  line-height:1.5;
  filter:none !important;
}

/* --------------------------------------------------------------------------
   Páginas internas
   -------------------------------------------------------------------------- */

.page-head{padding-block:80px 56px;max-width:880px}
.page-head h1{font-size:clamp(40px,5.2vw,68px);letter-spacing:-.02em;line-height:1.08;margin-bottom:28px}
.page-head .lede{max-width:680px}
.page-head .eyebrow{margin-bottom:20px}

.crumb{font-size:14px;color:var(--ash);margin-bottom:28px}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.profile-why{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--hairline-strong);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  font-weight:450;
}
.note{
  margin-top:40px;
  font-size:15px;
  line-height:1.55;
  color:var(--ash);
  max-width:720px;
}

/* --------------------------------------------------------------------------
   Aparición al hacer scroll
   -------------------------------------------------------------------------- */

/* La clase .reveal la agrega el script; sin JavaScript todo se ve normal. */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),
               transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.a-la-vista{opacity:1;transform:none}

  /* Escalonado entre columnas de una misma fila */
  .grid > .reveal:nth-child(2),
  .steps > .reveal:nth-child(2),
  .creds > .reveal:nth-child(2){transition-delay:.09s}
  .grid > .reveal:nth-child(3),
  .steps > .reveal:nth-child(3),
  .creds > .reveal:nth-child(3){transition-delay:.18s}
  .steps > .reveal:nth-child(4){transition-delay:.27s}
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.wa{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  color:var(--paper);
  border-radius:var(--r-pill);
  padding:14px 22px 14px 18px;
  font-size:15px;
  font-weight:480;
  line-height:1;
  text-decoration:none;
  box-shadow:0 8px 28px rgba(23,25,28,.20);
  transition:background-color .18s ease,transform .18s ease;
}
.wa:hover{background:var(--navy-hover);transform:translateY(-1px)}
.wa svg{width:20px;height:20px;flex:none}

@media (max-width:640px){
  .wa{right:16px;bottom:16px;padding:14px;gap:0}
  .wa span{display:none}
}

/* Nota de transparencia bajo los planes */
.transparencia{
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--ink);
  max-width:760px;
}
.transparencia h3{font-size:26px;line-height:1.2;letter-spacing:-.009em;margin-bottom:12px}
.transparencia p{font-size:16px;line-height:1.5;color:var(--slate);font-weight:450}


/* --------------------------------------------------------------------------
   Páginas legales y de confirmación
   -------------------------------------------------------------------------- */

.legal{max-width:740px;padding-block:64px 96px}
.legal h2{
  font-size:26px;
  letter-spacing:-.009em;
  margin:56px 0 18px;
}
.legal h2:first-of-type{margin-top:40px}
.legal p,.legal li{
  font-size:17px;
  line-height:1.6;
  color:var(--slate);
  font-weight:450;
}
.legal p+p{margin-top:16px}
.legal ul,.legal ol{margin:16px 0 0;padding-left:22px}
.legal li+li{margin-top:10px}
.legal .updated{font-size:14px;color:var(--ash);margin-top:8px}

.legal-warn{
  margin-top:40px;
  border:1px dashed var(--hairline-strong);
  border-radius:var(--r-sm);
  padding:20px 24px;
  font-size:15px;
  line-height:1.55;
  color:var(--ash);
}

/* Confirmación de envío */
.thanks{
  min-height:calc(100vh - 72px);
  display:flex;
  align-items:center;
  padding-block:80px;
}
.thanks-inner{max-width:680px}
.thanks h1{font-size:clamp(40px,5.4vw,68px);letter-spacing:-.02em;line-height:1.08;margin-bottom:24px}
.thanks-next{
  margin-top:48px;
  border-top:1px solid var(--ink);
  padding-top:28px;
}
.thanks-next h2{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:24px}
.thanks-next ol{list-style:none;margin:0;padding:0;counter-reset:paso}
.thanks-next li{
  counter-increment:paso;
  position:relative;
  padding-left:34px;
  font-size:17px;
  line-height:1.5;
  color:var(--slate);
  font-weight:450;
}
.thanks-next li+li{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline)}
.thanks-next li::before{
  content:counter(paso);
  position:absolute;left:0;top:0;
  font-family:var(--serif);
  font-size:17px;
  color:var(--ash);
}
.thanks-next li+li::before{top:18px}

/* --------------------------------------------------------------------------
   Trayectoria del equipo
   -------------------------------------------------------------------------- */

.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.cred{border-top:1px solid var(--ink);padding-top:24px}
.cred h3{font-size:26px;line-height:1.2;letter-spacing:-.009em;margin-bottom:14px}
.cred p{font-size:16px;line-height:1.5;color:var(--slate);font-weight:450}

/* --------------------------------------------------------------------------
   Proceso
   -------------------------------------------------------------------------- */

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:1px solid var(--ink);padding-top:20px}
.step-num{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:16px}
.step h3{font-size:22px;margin-bottom:10px}
.step p{font-size:15px;color:var(--slate);line-height:1.5;font-weight:450}

/* --------------------------------------------------------------------------
   Planes
   -------------------------------------------------------------------------- */

.plan{
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  padding:32px;
  display:flex;
  flex-direction:column;
}
.plan-featured{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.plan-featured h3,.plan-featured .plan-price{color:var(--paper)}
.plan-featured p,.plan-featured .card-list li{color:rgba(255,255,255,.72)}
.plan-featured .card-list li::before{background:rgba(255,255,255,.45)}
.plan-featured .btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.45)}
.plan-featured .btn-ghost:hover{background:var(--paper);color:var(--navy)}
.plan-featured .plan-badge{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}

.plan-badge{
  align-self:flex-start;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-pill);
  padding:5px 12px;
  font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ash);
  margin-bottom:24px;
}
.plan-price{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.015em;margin:20px 0 6px}
.plan-price small{font-family:var(--sans);font-size:14px;font-weight:450;color:var(--slate);letter-spacing:0}
.plan-featured .plan-price small{color:rgba(255,255,255,.6)}

.placeholder-note{
  margin-top:28px;
  border:1px dashed var(--hairline-strong);
  border-radius:var(--r-sm);
  padding:16px 20px;
  font-size:14px;
  color:var(--ash);
  line-height:1.5;
}

/* --------------------------------------------------------------------------
   Comparativa de planes
   -------------------------------------------------------------------------- */

/* Tabla completa: solo en pantallas donde cabe sin scroll lateral. */
.matrix-wrap{display:block}
.matrix{width:100%;border-collapse:collapse;text-align:left}
.matrix th,.matrix td{padding:16px 20px;vertical-align:top}
.matrix thead th{
  position:sticky;top:72px;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  font-family:var(--sans);
  font-weight:450;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ash);
}
.matrix thead th.plan-col{
  text-align:center;width:150px;
  font-family:var(--serif);font-size:22px;font-weight:400;
  letter-spacing:-.009em;text-transform:none;color:var(--ink);
}
.matrix thead th.plan-col small{
  display:block;font-family:var(--sans);font-size:13px;font-weight:450;
  letter-spacing:0;color:var(--slate);margin-top:4px;
}
.matrix tbody td{border-bottom:1px solid var(--hairline);font-size:16px;line-height:1.45;font-weight:450}
.matrix tbody td.feature{color:var(--ink);max-width:460px}
.matrix tbody td.val{text-align:center;color:var(--slate);font-size:15px;width:150px}
.matrix tr.group td{
  border-bottom:1px solid var(--hairline);
  padding-top:40px;
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.tick{color:var(--teal);font-size:17px;line-height:1}
.dash{color:var(--smoke)}

/* Comparador de dos planes: sustituye a la tabla en pantallas angostas. */
.comparador{display:none}

.cmp-selects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.cmp-selects label{
  display:block;font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ash);margin-bottom:8px;
}
.cmp-selects select{
  font-family:var(--sans);font-size:15px;font-weight:450;color:var(--ink);
  background:var(--mist);border:1px solid transparent;border-radius:var(--r-input);
  padding:12px 14px;width:100%;
}
.cmp-selects select:focus{outline:none;background:var(--paper);border-color:var(--navy)}

.cmp-encabezado{
  position:sticky;top:72px;z-index:5;
  background:var(--paper);
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:14px 0 12px;
  border-bottom:1px solid var(--ink);
}
.cmp-encabezado div{text-align:center}
.cmp-nombre{font-family:var(--serif);font-size:20px;line-height:1.15;letter-spacing:-.009em}
.cmp-precio{font-size:12px;color:var(--slate);margin-top:2px}

.cmp-grupo{
  padding-top:30px;padding-bottom:10px;
  font-size:12px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ash);
}
.cmp-fila{padding:14px 0;border-bottom:1px solid var(--hairline)}
.cmp-feature{font-size:15px;line-height:1.4;color:var(--ink);font-weight:450;margin-bottom:10px}
.cmp-valores{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.cmp-valor{font-size:14px;color:var(--slate)}

@media (max-width:900px){
  .matrix-wrap{display:none}
  .comparador{display:block}
}

/* Acordeón por plan (móvil y lectura a fondo) */
.plan-detail{border-bottom:1px solid var(--hairline)}
.plan-detail:first-of-type{border-top:1px solid var(--hairline)}
.plan-detail summary{
  list-style:none;cursor:pointer;
  padding:26px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
}
.plan-detail summary::-webkit-details-marker{display:none}
.plan-detail summary::after{content:"+";font-size:22px;color:var(--smoke);line-height:1}
.plan-detail[open] summary::after{content:"–"}
.plan-detail-name{font-family:var(--serif);font-size:26px;letter-spacing:-.009em;line-height:1.2}
.plan-detail-price{font-size:15px;color:var(--slate);margin-left:auto;margin-right:8px}
.plan-detail-body{padding-bottom:32px}
.plan-detail-body h4{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ash);margin:24px 0 12px;
}
.plan-detail-body h4:first-child{margin-top:0}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:26px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  font-family:var(--serif);
  font-size:22px;
  line-height:1.3;
  letter-spacing:-.009em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  font-family:var(--sans);
  font-size:22px;
  color:var(--smoke);
  flex:none;
  line-height:1.3;
  transition:transform .2s ease;
}
.faq details[open] summary::after{content:"–"}
.faq-body{padding:0 0 26px;max-width:760px;color:var(--slate);line-height:1.55;font-size:16px;font-weight:450}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:450;color:var(--slate)}
.field input,.field select,.field textarea{
  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:var(--mist);
  border:1px solid transparent;
  border-radius:var(--r-input);
  padding:14px 16px;
  width:100%;
  transition:border-color .18s ease,background-color .18s ease;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:var(--smoke)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--paper);border-color:var(--ink);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--ash);line-height:1.5}
.consent input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--ink)}

.contact-aside dt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.contact-aside dd{margin:0 0 24px;font-size:17px;color:var(--ink)}
.contact-aside dd a{color:var(--teal);text-decoration:none}
.contact-aside dd a:hover{text-decoration:underline;text-underline-offset:4px}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.footer{border-top:1px solid var(--hairline);padding-block:64px 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer h4{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li+li{margin-top:10px}
.footer a{font-size:15px;color:var(--slate);text-decoration:none}
.footer a:hover{color:var(--teal)}
.footer-legal{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--ash);line-height:1.5;
}
.footer-disclaimer{max-width:620px}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width:980px){
  :root{--section:64px}
  .chart-grid{grid-template-columns:1fr;gap:48px}
  .creds{grid-template-columns:1fr 1fr;gap:40px}
  .head-media{grid-template-columns:1fr;gap:36px;margin-bottom:48px}
  .risk-img{margin-bottom:22px}
  .grid-3,.grid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .brand{gap:10px}
  .brand-mark{--escudo:34px}
  .brand-name,.brand-sub{font-size:15.5px;white-space:nowrap}
  .page-head{padding-block:24px 36px}
  .topbar-note{display:none}
  .topbar-inner{justify-content:center;height:36px}
  .topbar-links{gap:0;width:100%;justify-content:space-around}
  .nav-links{display:none}
  .card-accent{padding:40px}
}

/* Fragmentos que solo aparecen en pantallas anchas */
@media (max-width:640px){.solo-escritorio{display:none}}

@media (max-width:640px){
  :root{--section:40px}

  /* Los titulares de sección van centrados en vertical. */
  .section-head{margin-bottom:32px;text-align:center}
  .section-head .lede{margin-inline:auto}
  .page-head{text-align:left}

  /* Huecos que se duplicaban al encadenar secciones */
  .source{margin-top:32px;padding-top:18px}
  .figure figcaption{margin-top:12px}
  .transparencia{margin-top:32px;padding-top:22px}
  .hero-figure{margin-top:32px}

  /* Los iconos abrían demasiado hueco vertical en vertical. */
  .risk-img{aspect-ratio:16/9;margin-bottom:20px}
  .risk{border-top-width:1px;padding-top:20px}
  .risk h3{font-size:22px;line-height:1.25}
  .risk p{font-size:16px;margin-bottom:20px}
  .risk-help{padding:18px}

  /* Titulares de sección: un punto menos para que no coman cuatro renglones. */
  h2{font-size:30px;line-height:1.14}

  .figure-wide img,.figure-wide .ph{aspect-ratio:16/9}

  /* Hero más compacto: menos alto, titular más contenido, botones a todo lo ancho. */
  .hero{padding-block:56px 52px}
  .hero h1{font-size:clamp(34px,9.2vw,42px);line-height:1.1;margin-bottom:20px}
  .hero .lede{font-size:17px;line-height:1.45}
  .hero .btn-row{margin-top:28px;gap:10px}
  .hero .btn{width:100%}
  /* En vertical el degradado va de arriba a abajo, no de izquierda a derecha. */
  .hero{min-height:auto;padding-block:72px 64px}
  .hero::after{background:linear-gradient(180deg,rgba(14,16,18,.72) 0%,rgba(14,16,18,.52) 46%,rgba(14,16,18,.80) 100%)}
  .hero-bg{object-position:center 55%}
  /* Los saltos de línea están compuestos para desktop; en móvil estorban. */
  h1 br,h2 br{display:none}
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .grid-2,.grid-3,.grid-4,.steps,.creds{grid-template-columns:1fr}
  .card{padding:26px}
  .card-accent{padding:28px}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
  .faq summary{font-size:19px;gap:20px}
  /* El resumen del plan se apila para que el precio no comprima el nombre. */
  .plan-detail summary{flex-wrap:wrap;gap:2px 12px;padding:22px 0}
  .plan-detail-name{font-size:22px;flex:1 1 auto;order:0}
  .plan-detail summary::after{order:1;margin-left:auto}
  .plan-detail-price{order:2;flex:1 1 100%;margin-left:0;margin-right:0}
}

/* --------------------------------------------------------------------------
   Diagnóstico de exposición
   -------------------------------------------------------------------------- */

.dx{max-width:720px}

.dx-progress{margin-bottom:44px}
.dx-progress-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.dx-track{height:4px;background:var(--mist);border-radius:var(--r-pill);overflow:hidden}
.dx-fill{height:100%;width:0;background:var(--navy);border-radius:var(--r-pill);transition:width .35s ease}

.dx-bloque{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.dx-pregunta{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,38px);line-height:1.18;letter-spacing:-.015em;margin:0 0 32px}

.dx-opciones{display:flex;flex-direction:column;gap:10px}
.dx-opt{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;
  border:1px solid var(--hairline);
  border-radius:16px;
  cursor:pointer;
  background:var(--paper);
  transition:border-color .16s ease,background-color .16s ease;
}
.dx-opt:hover{border-color:var(--slate)}
.dx-opt input{position:absolute;opacity:0;width:0;height:0}
.dx-dot{
  width:20px;height:20px;flex:none;margin-top:1px;
  border:1.5px solid var(--smoke);border-radius:50%;
  display:grid;place-items:center;
  transition:border-color .16s ease;
}
.dx-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .16s ease}
.dx-opt input:checked ~ .dx-dot{border-color:var(--navy)}
.dx-opt input:checked ~ .dx-dot::after{transform:scale(1)}
.dx-opt:has(input:checked){border-color:var(--navy);background:#f4f7fb}
.dx-opt input:focus-visible ~ .dx-dot{outline:2px solid var(--navy);outline-offset:3px}
.dx-opt-t{font-size:16.5px;line-height:1.45;font-weight:450;color:var(--ink)}

.dx-nav{display:flex;align-items:center;gap:16px;margin-top:36px}
.dx-atras{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:15px;color:var(--slate);
}
.dx-atras:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.dx-aviso{font-size:14px;color:var(--ash);margin-top:20px}

/* Captura de datos */
.dx-check{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--slate)}
.dx-check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--navy)}
.dx-check a{color:var(--teal)}

/* Resultado */
.dx-nivel{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.4vw,64px);line-height:1.05;letter-spacing:-.02em;
  margin:0 0 10px;
}
.dx-puntaje{font-size:16px;color:var(--slate);font-weight:450}
.dx-meter{height:8px;background:var(--mist);border-radius:var(--r-pill);overflow:hidden;margin:28px 0 36px}
.dx-meter i{display:block;height:100%;border-radius:var(--r-pill);width:0;transition:width .8s cubic-bezier(.22,.8,.3,1)}
.dx-n-baja  .dx-meter i{background:var(--teal)}
.dx-n-media .dx-meter i{background:#b8892f}
.dx-n-alta  .dx-meter i{background:#9b3a34}
.dx-n-baja  .dx-nivel{color:var(--teal)}
.dx-n-media .dx-nivel{color:#96701f}
.dx-n-alta  .dx-nivel{color:#8d332e}

.dx-entrada{font-size:19px;line-height:1.5;font-weight:450;color:var(--ink)}
.dx-entrada + .dx-entrada{margin-top:18px}

.dx-h4{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ash);margin:56px 0 0;padding-bottom:20px;border-bottom:1px solid var(--ink);
}
.dx-hallazgo{padding:26px 0;border-bottom:1px solid var(--hairline)}
.dx-hallazgo h3{font-size:21px;line-height:1.28;letter-spacing:-.009em;margin:0 0 10px;font-family:var(--serif);font-weight:400}
.dx-hallazgo p{font-size:16px;line-height:1.55;color:var(--slate);font-weight:450;margin:0}
.dx-hallazgo p+p{margin-top:12px}

.dx-cierre{
  margin-top:48px;padding:36px 40px;
  background:var(--sage);border-radius:var(--r-card);
}
.dx-cierre p{font-size:19px;line-height:1.5;color:var(--sage-ink);font-weight:450;margin:0}
.dx-cierre .btn-row{margin-top:28px}
.dx-cierre .btn-solid{background:var(--sage-ink);color:var(--sage)}
.dx-cierre .btn-solid:hover{background:var(--ink)}

@media (max-width:640px){
  .dx-opt{padding:16px 18px}
  .dx-opt-t{font-size:16px}
  .dx-nav .btn{flex:1}
  .dx-cierre{padding:28px 24px}
  .dx-entrada{font-size:17px}
}

/* Llamado al diagnóstico desde la portada */
.dx-cta{background:var(--navy);color:var(--paper)}
.dx-cta-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.dx-cta h2{color:var(--paper)}
.dx-cta .eyebrow{color:rgba(255,255,255,.55)}
.dx-cta p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.75);font-weight:450;margin:0}
.dx-cta .btn-solid{background:var(--paper);color:var(--navy)}
.dx-cta .btn-solid:hover{background:rgba(255,255,255,.88)}

@media (max-width:900px){
  .dx-cta-inner{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .dx-cta h2 br{display:none}
  .dx-cta .btn{width:100%}
}

/* Declaración de urgencia antes de Planes */
.urgencia{max-width:860px;border-top:1px solid var(--ink);padding-top:32px}
.urgencia p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.1vw,34px);line-height:1.24;letter-spacing:-.015em;
  color:var(--ink);margin:0;
}
.urgencia-sub{
  font-family:var(--sans)!important;font-weight:450!important;
  font-size:17px!important;line-height:1.55!important;letter-spacing:0!important;
  color:var(--slate)!important;margin-top:22px!important;max-width:620px;
}

/* Ancla de costo en el encabezado de Planes */
.ancla-costo{
  margin-top:24px;padding-top:24px;
  border-top:1px solid var(--hairline);
  max-width:620px;
  font-size:16px;line-height:1.55;font-weight:450;color:var(--slate);
}
@media (max-width:640px){
  .section-head .ancla-costo{text-align:left}
}

/* Nota bajo el precio mensual de cada plan */
.plan-nota{
  font-size:13px;
  line-height:1.4;
  color:var(--slate);
  margin:0 0 6px;
}
.plan-featured .plan-nota{color:rgba(255,255,255,.62)}

}

/* Precio alterno: una sola exhibición */
.plan-alterno{
  font-size:14px;
  line-height:1.45;
  color:var(--slate);
  margin:0 0 6px;
  padding-top:10px;
  border-top:1px solid var(--hairline);
}
.plan-alterno strong{font-weight:500;color:var(--ink)}
.plan-ahorro{color:var(--teal);white-space:nowrap}

.plan-featured .plan-alterno{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.22)}
.plan-featured .plan-alterno strong{color:var(--paper)}
.plan-featured .plan-ahorro{color:#9fd8c8}