/* ═══════════════════════════════════════════════════════════════════════
   NotarIA — componentes propios de la portada.
   Se carga después de notaria.css y solo en index.html, para que las
   páginas interiores no descarguen estilos que no usan.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Distintivo del hero ═══════════════════════════════════════════
   Dos zonas separadas por un filete, no una píldora con un punto de
   color: se lee como un sello de certificación. El borde es un
   degradado, así que necesita máscara. */
.pill{position:relative;display:inline-flex;align-items:stretch;border-radius:var(--r-4);
  overflow:hidden;font-size:var(--t-1);line-height:1.45;letter-spacing:.012em;color:#CFE3E8;
  background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.016));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 26px -20px rgba(0,0,0,.9)}
.pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(0,175,186,.62),rgba(255,255,255,.14) 46%,rgba(0,175,186,.46));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.pill-c{display:flex;align-items:center;padding:6px 12px 6px 16px}
/* `min-width:0` global permitía que este trozo se encogiera por debajo
   de su contenido y `overflow:hidden` recortaba «#1 en el mundo».
   `flex:none` lo protege; el que cede es el texto de la izquierda. */
.pill-d{flex:none;position:relative;display:flex;align-items:center;padding:6px 16px 6px 13px;
  font-weight:500;color:#fff;background:rgba(0,175,186,.16);white-space:nowrap}
.pill-d::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;
  background:rgba(0,175,186,.45)}

.cta-2{display:inline-flex;align-items:center;gap:10px;color:var(--tx-2);font-size:var(--t-3);
  min-height:44px;transition:color var(--v-1)}
.cta-2 span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--linea-f);color:var(--tea-cl);flex:none;
  transition:border-color var(--v-1),background var(--v-1)}
.cta-2:hover{color:#fff}
.cta-2:hover span{border-color:var(--tea);background:rgba(0,175,186,.12)}

/* ═══ Composición del hero ══════════════════════════════════════════
   Sobre la malla común: 5 columnas para el texto y 7 para el video.
   Antes el video tenía 5 de 12 y medía 480 px, por eso se percibía
   pequeño. El aire vertical vive en el contenedor, no en la rejilla,
   para que la franja de cifras quede dentro del mismo colchón. */
.hero-w{padding-block:clamp(34px,3.8vw,56px) clamp(40px,4.6vw,66px)}
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--medianil);align-items:center}
.hero-t{grid-column:span 5}
.hero-v{grid-column:span 7}
.hero .h-1{margin-top:var(--e5);max-width:13ch}
.hero-e{margin-top:var(--e5);max-width:44ch}
.hero-a{margin-top:clamp(26px,2.6vw,36px)}
.hero-m{margin-top:var(--e4)}
.acciones{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap}

/* ═══ Marco de video ════════════════════════════════════════════════ */
.vbox{position:relative;border-radius:var(--r-3);overflow:hidden;background:#08131f;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 44px 100px -48px #000,0 0 0 1px rgba(255,255,255,.05)}
/* `aspect-ratio` reserva el espacio y `contain` evita que un archivo con
   otra proporción salga recortado o estirado. */
.vbox video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;background:#000}
/* Estado de fallo: se retira el marco de reproductor y queda un aviso. */
.vbox.falla .chrome,.vbox.falla .play,.vbox.falla video{display:none}
.vbox.falla{aspect-ratio:16/9;display:grid;place-items:center;padding:var(--e6);
  background:linear-gradient(160deg,rgba(0,175,186,.10),rgba(255,255,255,.02))}
.vfalla{font-size:var(--t-3);color:var(--tx-2);text-align:center;max-width:34ch;line-height:1.6}
.vfalla[hidden]{display:none}
.chrome{position:absolute;inset:0 0 auto 0;height:32px;display:flex;align-items:center;
  gap:6px;padding:0 13px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,17,31,.75),transparent)}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.26)}
.chrome-t{margin-left:9px;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.05em}
/* El control vive en una barra inferior: nunca tapa el rostro del video. */
.play{position:absolute;inset:0;display:flex;align-items:flex-end;border:0;padding:0;
  cursor:pointer;z-index:3;transition:background var(--v-2);
  background:linear-gradient(to top,rgba(6,17,31,.72) 0%,rgba(6,17,31,.12) 34%,transparent 62%)}
.play:hover{background:linear-gradient(to top,rgba(6,17,31,.8) 0%,rgba(6,17,31,.16) 34%,transparent 62%)}
.pbar{display:flex;align-items:center;gap:12px;padding:clamp(13px,1.4vw,18px);width:100%;text-align:left}
.pico{flex:none;width:clamp(34px,3vw,40px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform var(--v-2) var(--curva),background var(--v-2)}
.pico::after{content:"";width:0;height:0;margin-left:3px;border-left:11px solid var(--tinta);
  border-top:7px solid transparent;border-bottom:7px solid transparent}
/* Con el video ya corriendo en silencio, el botón invita a activar el audio. */
.pico.son{background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.pico.son::after{content:"";margin:0;width:15px;height:15px;border:0;background:#fff;
  -webkit-mask:var(--ic-son) center/contain no-repeat;mask:var(--ic-son) center/contain no-repeat}
:root{--ic-son:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M17.5 8.5a5 5 0 0 1 0 7M20.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E")}
.play:hover .pico{transform:scale(1.06);background:#fff}
.ptxt{font-size:clamp(12px,1vw,13.5px);color:#fff;line-height:1.35;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.ptxt b{font-weight:400;color:rgba(255,255,255,.66);margin-left:6px}

/* ═══ Recorrido de una consulta ═════════════════════════════════════ */
.flujo{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e2);
  margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--linea)}
.flujo li{position:relative;padding-top:var(--e4);font-size:var(--t-1);color:var(--tx-3);
  line-height:1.3;transition:color var(--v-3) var(--curva)}
.flujo li::before{content:"";position:absolute;left:0;right:-8px;top:5px;height:1px;background:var(--linea)}
.flujo li:last-child::before{right:0}
.pt2{position:absolute;left:0;top:1px;width:9px;height:9px;border-radius:50%;
  background:var(--tinta);border:1px solid var(--linea-f);
  transition:background var(--v-3) var(--curva),border-color var(--v-3),box-shadow var(--v-3)}
.flujo li.on{color:var(--tx)}
.flujo li.on .pt2{background:var(--tea);border-color:var(--tea);box-shadow:0 0 0 4px rgba(0,175,186,.16)}
@media (prefers-reduced-motion:reduce){
  /* Sin animación se muestran las cuatro etapas ya encendidas. */
  .flujo li{color:var(--tx)}
  .flujo li .pt2{background:var(--tea);border-color:var(--tea)}
}

/* ═══ Franja de autoridad ═══════════════════════════════════════════ */
.franja{border-top:1px solid var(--linea);padding-top:var(--e6);margin-top:var(--e6)}
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil);
  padding-block:var(--e5) var(--e5)}
.cifras>div{position:relative;padding-left:clamp(16px,1.8vw,24px)}
.cifras>div:first-child{padding-left:0}
/* Separadores finos en vez de tarjetas: la cifra es la protagonista. */
.cifras>div:not(:first-child)::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
  width:1px;background:var(--linea)}
.cifras b{display:block;font-family:var(--serif);font-size:clamp(30px,3.6vw,50px);font-weight:400;
  letter-spacing:-.02em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cifras span{display:block;font-size:var(--t-2);color:var(--tx-2);margin-top:10px;max-width:22ch}
.alcance{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  flex-wrap:wrap;font-size:var(--t-2);color:var(--tx-2);
  border-top:1px solid var(--linea);padding-top:var(--e4);padding-bottom:var(--e2)}
.alcance p{display:flex;align-items:center;gap:10px}
.alcance b{color:#fff;font-weight:500}
.globo{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(0,175,186,.3);background:rgba(0,175,186,.08);color:var(--tea-cl)}

/* ═══ El problema — composición editorial ═══════════════════════════
   Cabecera y cuerpo comparten reparto y medianil: la entradilla de
   arriba arranca en la misma línea vertical que la lista de abajo.
   Era el defecto más visible de la página. */
.prob-cab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--medianil);align-items:end}
/* La sección medía unos 900 px de alto con la mitad en aire muerto.
   Se recorta el colchón entre cabecera y cuerpo, la cita baja de 38 a
   31 px y los renglones de la lista se aprietan: unos 180 px menos sin
   quitar una sola palabra. */
.prob-cuerpo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--medianil);margin-top:clamp(26px,2.8vw,40px);align-items:start}
/* El filete turquesa arranca en la misma línea que el titular de la
   cabecera; la sangría del texto es el recurso de cita, deliberado. */
.prob-uno{position:relative;padding-left:clamp(20px,2.4vw,32px);
  border-left:2px solid var(--tea)}
.prob-num{font-size:var(--t-1);letter-spacing:.2em;color:var(--tea-cl)}
.prob-cita{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.2vw,31px);line-height:1.18;letter-spacing:-.016em;color:#fff;
  margin-top:var(--e3);text-wrap:balance}
.prob-uno figcaption{margin-top:var(--e4);font-size:var(--t-3);line-height:1.62;
  color:var(--tx-2);max-width:46ch}

/* ── La lista se enfoca sola ──────────────────────────────────────────
   Cada renglón se enciende cuando es el que está a la altura de lectura,
   y con el ratón encima. La versión por scroll es la que importa: en el
   teléfono no hay hover, y es justo donde la lista es más larga.
   Sin JavaScript los cuatro se ven encendidos: nunca se esconde nada. */
.prob-lista{list-style:none;display:flex;flex-direction:column}
.prob-lista li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--e4);padding-block:clamp(13px,1.4vw,18px);border-top:1px solid var(--linea);
  padding-left:14px;margin-left:-14px}
.prob-lista li:first-child{border-top:0;padding-top:0}
.prob-lista li:last-child{padding-bottom:0}
/* El filete de foco crece desde el centro, no aparece de golpe. */
.prob-lista li::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--tea);border-radius:2px;transform:scaleY(0);opacity:0;
  transition:transform var(--v-3) var(--curva),opacity var(--v-2)}
.js .prob-lista li.act::before{transform:scaleY(1);opacity:1}
.prob-n{font-size:var(--t-1);letter-spacing:.2em;color:var(--tx-3);padding-top:4px;
  transition:color var(--v-2)}
.js .prob-lista li.act .prob-n{color:var(--tea-cl)}
.prob-lista b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-6);
  line-height:1.22;letter-spacing:-.012em;color:#fff}
.prob-lista b + span{display:block;margin-top:6px;font-size:var(--t-3);
  line-height:1.58;color:var(--tx-3);max-width:48ch;transition:color var(--v-2)}
.js .prob-lista li.act b + span{color:var(--tx-2)}
@media (hover:hover) and (pointer:fine){
  .prob-lista li:hover::before{transform:scaleY(1);opacity:1}
  .prob-lista li:hover .prob-n{color:var(--tea-cl)}
  .prob-lista li:hover b + span{color:var(--tx-2)}
}
@media (prefers-reduced-motion:reduce){
  .prob-lista li::before{transform:scaleY(1);opacity:.4;transition:none}
}

/* ═══ Lo que cambia ═════════════════════════════════════════════════ */
.benef{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--medianil);margin-top:clamp(28px,3.2vw,40px)}
.ben-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e4)}
.med{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:rgba(6,114,122,.07);border:1px solid rgba(6,114,122,.16);
  transition:background var(--v-2) var(--curva),border-color var(--v-2)}
.tarj:hover .med{background:rgba(6,114,122,.12);border-color:rgba(6,114,122,.34)}
.tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tea-os);
  background:rgba(6,114,122,.07);border:1px solid rgba(6,114,122,.16);border-radius:var(--r-4);
  padding:5px 11px;white-space:nowrap}
.benef .tit{margin-top:var(--e4)}
.benef p{margin-top:var(--e2);max-width:46ch}

/* ═══ Línea de tiempo de la puesta en marcha ════════════════════════ */
.ruta{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--medianil);margin-top:clamp(36px,4vw,56px);position:relative}
.ruta li{position:relative;padding-top:var(--e6)}
/* El riel corre por detrás de todas las etapas y se desvanece al final. */
.ruta li .ruta-m{position:absolute;left:0;right:calc(var(--medianil) * -1);top:6px;height:1px;
  background:rgba(6,114,122,.28)}
.ruta li:last-child .ruta-m{right:0;
  background:linear-gradient(90deg,rgba(6,114,122,.28),transparent)}
/* El riel se dibuja a medida que cada etapa entra en pantalla, en vez de
   estar ya trazado. Es el único motion graphic literal de la página: no
   decora, cuenta que el proceso avanza. Los cuatro tramos entran
   escalonados por los retardos que ya llevan las etapas. */
.js .ruta li .ruta-m::after{content:"";position:absolute;inset:0;
  background:var(--tea-os);transform:scaleX(0);transform-origin:left;
  transition:transform 640ms var(--curva)}
.js .ruta li.in .ruta-m::after{transform:scaleX(1)}
.ruta li::before{content:"";position:absolute;left:0;top:2px;width:9px;height:9px;
  border-radius:50%;background:var(--blanco);border:1.5px solid var(--tea-os);z-index:1;
  transition:background var(--v-3) var(--curva),box-shadow var(--v-3) var(--curva)}
.js .ruta li.in::before{background:var(--tea-os);box-shadow:0 0 0 4px rgba(6,114,122,.13)}
@media (prefers-reduced-motion:reduce){
  .js .ruta li .ruta-m::after{transform:scaleX(1);transition:none}
  .ruta li::before{transition:none}
}
.ruta-p{display:block;font-size:var(--t-1);letter-spacing:.2em;color:var(--tea-os);
  margin-bottom:var(--e3)}
.ruta b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-6);
  line-height:1.22;letter-spacing:-.012em;color:var(--marino)}
.ruta b + span{display:block;margin-top:10px;font-size:var(--t-3);line-height:1.6;
  color:var(--gris);max-width:34ch}

/* ═══ Puertas a las páginas de profundización ═══════════════════════
   Enlaces editoriales con filete, sin tarjeta. */
.profs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil)}
.prof{display:flex;flex-direction:column;border-top:1px solid var(--linea);
  padding-top:var(--e5);transition:border-color var(--v-2) var(--curva)}
.prof .tit{display:block;margin-top:var(--e3);font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,1.5vw,23px);line-height:1.2;letter-spacing:-.014em;color:#fff;max-width:22ch;
  transition:color var(--v-2)}
.prof p{margin-top:var(--e3);font-size:var(--t-3);line-height:1.6;color:var(--tx-2)}
.prof .mas{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:var(--e5);
  font-size:var(--t-3);font-weight:500;color:var(--tea-cl)}
.prof .mas span{transition:transform var(--v-2) var(--curva)}
@media (hover:hover){
  .prof:hover{border-top-color:var(--tea)}
  .prof:hover .tit{color:var(--tea-cl)}
  .prof:hover .mas span{transform:translateX(4px)}
}

/* ═══ Panel de temporada ════════════════════════════════════════════
   Composición centrada: cualquier variante a dos columnas dejaba aire
   muerto a la derecha, porque el botón es mucho más corto que el texto. */
.temp{position:relative;overflow:hidden;border:1px solid var(--linea);border-radius:var(--r-3);
  max-width:720px;margin-inline:auto;text-align:center;
  padding:clamp(26px,2.7vw,34px) clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;align-items:center;
  background:
    radial-gradient(560px 220px at 50% -45%,rgba(0,175,186,.15),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.010))}
.tempx{min-width:0;display:flex;flex-direction:column;align-items:center}
.tempe{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tea-cl)}
.tempi{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--r-1);
  background:rgba(0,175,186,.12);border:1px solid rgba(0,175,186,.3)}
.tempt{margin-top:var(--e3);font-family:var(--serif);font-size:clamp(20px,1.8vw,25px);
  font-weight:400;letter-spacing:-.014em;line-height:1.2;color:#fff;max-width:27ch;text-wrap:balance}
.tempd{margin-top:10px;font-size:var(--t-3);color:var(--tx-2);line-height:1.55;max-width:48ch}
.tempb{margin-top:var(--e5)}

/* ═══ Precios ═══════════════════════════════════════════════════════ */
.precab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.toggle{display:flex;gap:4px;border:1px solid var(--linea-c);border-radius:var(--r-2);
  padding:4px;background:#fff;flex:none}
.per{border:0;border-radius:9px;background:transparent;color:var(--gris);font:inherit;
  font-size:var(--t-2);font-weight:500;padding:11px 18px;cursor:pointer;white-space:nowrap;
  transition:background var(--v-2) var(--curva),color var(--v-1)}
.per span{font-weight:400;color:var(--tea-os)}
.per[aria-pressed="true"]{background:var(--marino);color:#fff}
.per[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil);
  align-items:stretch;margin-top:clamp(28px,3vw,44px)}
.plan{display:flex;flex-direction:column}
.plan.dest{border-color:rgba(6,114,122,.5);
  background:linear-gradient(180deg,rgba(6,114,122,.05),#fff 42%)}
.cabP{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:30px}
.plan h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.6vw,24px);
  color:var(--marino);letter-spacing:-.014em}
.badge{border:1px solid rgba(6,114,122,.35);background:rgba(6,114,122,.08);color:var(--tea-os);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;
  border-radius:var(--r-4);white-space:nowrap}
/* Reserva de tres renglones. Era de dos, y la descripción del Plan
   Personalizado necesita tres: sin subirla, su precio arrancaba 22 px
   más abajo que el de los otros dos y la fila quedaba descuadrada.
   Es lo único que cambia en las otras dos tarjetas, y solo para que
   las tres sigan alineadas. */
.para{color:var(--gris);font-size:var(--t-2);margin-top:8px;min-height:64px}
.precio{display:flex;align-items:baseline;gap:7px;margin-top:var(--e5)}
.precio b{font-family:var(--serif);font-size:clamp(34px,3vw,44px);font-weight:400;
  letter-spacing:-.02em;color:var(--marino);line-height:1}
.precio span{font-size:12.5px;color:var(--gris)}
.fact{font-size:12px;color:var(--gris);margin-top:6px;min-height:18px}
/* Plan sin precio. El titular de cotización ocupa el mismo renglón que
   la cifra de los otros dos planes, pero en su tamaño de titular menor:
   escribir «Cotización personalizada» a 44 px lo dejaría en tres
   renglones y descuadraría la fila. La nota de abajo hereda el peso
   visual que allí tiene «Facturación mensual».
   `min-height` mantiene el bloque a la misma altura que el precio de
   las otras dos tarjetas, para que la línea de la lista arranque a la
   misma altura en las tres. */
.precio-coti{align-items:flex-end;min-height:44px}
.precio-coti b{font-family:var(--serif);font-size:clamp(21px,1.7vw,26px);font-weight:400;
  letter-spacing:-.014em;color:var(--marino);line-height:1.15}
.coti-n{font-size:12px;color:var(--gris);margin-top:8px;line-height:1.5}
/* Lista sin iconos: quince palomitas idénticas no aportan nada. */
.incluye{list-style:none;border-top:1px solid var(--linea-c);margin-top:var(--e5);
  padding-top:var(--e5);display:flex;flex-direction:column;gap:12px;flex:1}
.incluye li{position:relative;padding-left:var(--e4);font-size:var(--t-3);line-height:1.45;
  color:var(--marino)}
.incluye li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--tea-os)}
/* «Ver cómo funcionaría en mi notaría» pedía 315 px en una tarjeta de
   302: entre 431 y 446 px se montaba sobre la tarjeta vecina. Estos dos
   botones no viven en `.acciones` ni `.cierre`, así que conservaban
   `nowrap`. Ahora envuelven como el resto. */
.plan .b{margin-top:var(--e5);width:100%;white-space:normal;line-height:1.35;text-wrap:balance}
.garantias{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--medianil);border-top:1px solid var(--linea-c);
  margin-top:clamp(28px,3vw,42px);padding-top:clamp(22px,2.4vw,30px)}
.garantias b{display:block;font-size:var(--t-2);font-weight:500;color:var(--marino)}
.garantias span{display:block;font-size:12.5px;color:var(--gris);margin-top:4px}

/* ═══ Contacto ══════════════════════════════════════════════════════ */
.promesas{list-style:none;margin-top:var(--e5);display:flex;flex-direction:column;gap:var(--e4)}
.promesas li{display:flex;gap:13px;align-items:flex-start}
.promesas svg{margin-top:2px}
.promesas b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tea-os);font-weight:500;margin-bottom:4px}
.promesas span{font-size:var(--t-3);color:var(--gris);line-height:1.55;max-width:62ch}
.directo{border-top:1px solid var(--linea-c);margin-top:var(--e6);padding-top:var(--e5)}
.correo{display:inline-flex;align-items:center;gap:11px;font-size:clamp(15px,1.3vw,19px);
  font-weight:500;color:var(--marino);border-bottom:1px solid rgba(6,114,122,.35);
  padding-bottom:4px;max-width:100%;transition:border-color var(--v-1),color var(--v-1)}
.correo span{overflow-wrap:anywhere}
.correo:hover{color:var(--tea-os);border-color:var(--tea-os)}
/* Los dos canales directos se apilan; `.correo` es inline-flex y sin esto
   quedarían pegados en la misma línea. Mismo componente, mismos estados. */
.directo .correo{display:flex;width:fit-content}
.directo .wa{margin-top:var(--e4)}

/* ═══ Puntos de corte ═══════════════════════════════════════════════
   Cada tamaño tiene su propia composición del hero. No es la de
   escritorio encogida: cambian el orden, la proporción y el aire. */

/* El hero mantiene 5/7 en todo el escritorio: con la malla de doce
   columnas el reparto ya es proporcional y no necesita retoques por
   tramos. Dos reglas menos que mantener. */

/* — Tableta y móvil: una sola columna. El titular sigue siendo lo
     primero que se lee; el video, ya a todo el ancho, gana el tamaño
     que perdía al comprimirse en una columna estrecha. El contenido
     se limita a 880 px para que en tableta no quede un titular de
     una sola línea larguísima. */
@media (max-width:1180px){
  .hero-w{padding-block:clamp(26px,3.6vw,40px) clamp(32px,4.2vw,48px)}
  /* 840 y no 880: al cruzar a dos columnas el video pasa a 630 px, y
   desde 880 el salto era del 28 % al AGRANDAR la ventana. */
  .hero-w>.hero,.hero-w>.franja{max-width:840px;margin-inline:auto}
  .hero{grid-template-columns:1fr;row-gap:clamp(30px,4.6vw,44px)}
  .hero-t,.hero-v{grid-column:auto}
  .hero-t{max-width:none}
  .hero .h-1{max-width:20ch}
  .hero-e{max-width:58ch}
  .flujo{margin-top:var(--e5)}
}

@media (max-width:1180px){
  .prob-cab,.prob-cuerpo{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .prob-cuerpo{row-gap:clamp(28px,4vw,44px)}
  .ruta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e6)}
  .ruta li:nth-child(2) .ruta-m{right:0;background:linear-gradient(90deg,rgba(6,114,122,.28),transparent)}
  .profs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prof:last-child{grid-column:1 / -1}
  .garantias{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .flujo{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .flujo li:nth-child(even)::before{right:0}
  .cifras{gap:clamp(14px,2.4vw,22px)}
  .prob-cita{font-size:clamp(22px,5.6vw,28px)}
  /* Los tres carriles pasan a una tarjeta por vista con controles. */
  .benef,.planes,.profs{display:flex;gap:var(--e3);overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-block:2px 6px;scrollbar-width:none}
  .benef::-webkit-scrollbar,.planes::-webkit-scrollbar,.profs::-webkit-scrollbar{display:none}
  .benef>li,.planes>.plan,.profs>.prof{flex:0 0 88%;scroll-snap-align:start}
  .ruta{display:flex;gap:var(--e3);overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-block:2px 6px;scrollbar-width:none}
  .ruta::-webkit-scrollbar{display:none}
  .ruta li{flex:0 0 88%;scroll-snap-align:start;padding:var(--e5) 0}
  .ruta li .ruta-m{display:none}
  .ruta b + span{max-width:none}
  /* Las cuatro garantías se retiran del teléfono. Apiladas en una
     columna eran cuatro parejas de titular y descripción justo antes
     del CTA: unos 300 px que empujaban el botón fuera de la pantalla.
     Siguen visibles en tableta y escritorio, donde caben en dos o
     cuatro columnas sin alargar nada.
     Aviso: «contratación mes a mes» y «bitácora exportable» no se
     dicen en ninguna otra parte de la portada. */
  .garantias{display:none}
  .precab{flex-direction:column;align-items:stretch;gap:var(--e5)}
  .toggle{width:100%}
  .per{flex:1;padding:12px 10px;font-size:12.5px}
  .per span{display:block;font-size:11px}
  .temp{padding:clamp(24px,4.6vw,30px) clamp(20px,4.4vw,26px)}
  .tempt{font-size:clamp(19px,4.8vw,21px);max-width:20ch}
  .tempb{width:100%;white-space:normal;line-height:1.35;text-wrap:balance;padding-block:11px}
  /* Contacto: la columna izquierda se reduce a su encabezado. Las tres
     promesas alargaban la sección con casi 600 px antes del formulario. */
  #contacto .dupla{display:flex;flex-direction:column;gap:var(--e5)}
  #contacto .promesas{display:none}
  #contacto .h-2{max-width:none}
  #contacto .directo{border-top:0;margin-top:var(--e4);padding-top:0}
  #contacto .directo .et,#contacto .directo .micro{display:none}
  .correo{font-size:15px;min-height:44px}
  #enviar{white-space:normal;line-height:1.3;padding-block:12px;min-height:54px;text-wrap:balance}
  /* `header .in .b-sm{display:none}` vive ahora en notaria.css: el
     encabezado es el mismo en las cinco páginas y su punto de corte también. */
}
@media (max-width:560px){
  .cifras{grid-template-columns:1fr;gap:0}
  .cifras>div{padding:var(--e4) 0 0}
  .cifras>div:first-child{padding-top:0}
  .cifras>div:not(:first-child){border-top:1px solid var(--linea)}
  .cifras>div:not(:first-child)::before{display:none}
  .cifras span{margin-top:4px;max-width:none}
}
@media (max-width:430px){
  /* Móvil: el marco del reproductor se simplifica. La barra de puntos
     ocupaba 34 px de alto para decorar, y aquí ese espacio es del video. */
  .hero .h-1{max-width:15ch}
  .chrome{padding:7px 12px}
  .chrome-t{display:none}
  .vbox{border-radius:var(--r-2)}
  .ptxt .dt{display:none}
  .flujo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benef>li,.planes>.plan,.profs>.prof,.ruta li{flex:0 0 90%}
  .tempb{padding-inline:12px}
}