/* ==========================================================================
   BLIXTOR · css/p/contacto.css  (solo /contacto · "Veinte minutos, un
   formulario", 16 oct 2026; antes "Veinte minutos", 7 oct)
   --------------------------------------------------------------------------
   La página es un formulario de captación con lo justo alrededor:
   1 héroe: el H1 con el beneficio, la entradilla (qué pasa al enviar) y
   tres garantías reales; la tarjeta del formulario a la derecha (debajo en
   el teléfono), el único objeto de la página · 2 qué pasa después: cuatro
   pasos sobre un riel que se llena con la lectura, con el dial en
   "Diagnóstico" · 3 ¿prefieres escribirnos directo?: WhatsApp y correo como
   ficha editorial.
   Forma (DESIGN.md): la tarjeta, los campos y las opciones llevan el radio
   de medios (10 px); el botón, píldora. Los filetes de los campos tienen
   3:1 sobre blanco (WCAG 1.4.11) y el rojo de error 7:1; el error nunca va
   solo con color (icono y texto). Campos de 17 px: iOS no hace zoom.
   Cortes: >=961 dos columnas · <961 una columna (intro, formulario,
   garantías). Sin JS el formulario se ve entero y el <noscript> manda a
   WhatsApp. Ver DESIGN.md, "Contacto".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
}
/* El formulario y su acuse viven en css/p/formulario.css desde el 16 oct
   2026 (los comparte la landing /lp/paginas-web); esta hoja se carga
   después de esa. */
.cs__grid,.ce__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}

/* Piezas que la portada y las otras interiores ya resolvieron, acotadas a
   esta página (candidatas a site.css en la revisión global): WhatsApp como
   icono en la cabecera móvil, CTA compacto por debajo de 380 px y la barra
   de las migas pegada a la página actual. */
@media(max-width:560px){
  .site-header .site-header__cta{display:inline-flex!important;width:44px;min-height:44px;padding:0;gap:0}
  .site-header .site-header__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header .site-header__cta .icon{width:22px;height:22px}
}
@media(max-width:379.98px){
  main .btn--lg{font-size:.875rem;padding-inline:.75rem;gap:.4rem}
}
@media(max-width:339.98px){
  main .btn--lg{font-size:.8125rem;padding-inline:.6rem}
}
.breadcrumbs li[aria-current="page"]{display:inline-flex}
/* Sin scroll suave en el documento (WebKit vuelve arriba en cada refresh de
   ScrollTrigger con el foco dentro) */
html{scroll-behavior:auto}

/* Encabezados de sección */
.c-intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:40ch;color:var(--c-body)}

/* ==========================================================================
   1. HÉROE · el H1 ("Contacto:" en 400 y el remate en 600, con "más
   clientes" en el color de señal), la entradilla y, debajo, las garantías.
   La tarjeta del formulario ocupa la columna derecha desde 961 px; por
   debajo va entre la entradilla y las garantías, para que el primer campo
   asome en la primera pantalla del teléfono.
   ========================================================================== */
.cx{padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) var(--space-block)}
.cx .breadcrumbs{margin-bottom:clamp(1rem,.5rem + 2vw,2.75rem)}
.cx__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(1.5rem,1.1rem + 1.6vw,2.5rem)}
.cx__title{font-size:clamp(2.125rem,1.35rem + 2.6vw,3.625rem);line-height:1;letter-spacing:-.042em;max-width:17ch}
.cx__title .deck{margin-bottom:.4em;font-size:clamp(1.125rem,.95rem + .7vw,1.5rem);line-height:1.2;letter-spacing:-.02em}
.cx__line{display:block}
.cx__k{white-space:nowrap;color:var(--accent)}
.cx__lead{margin-top:clamp(1rem,.8rem + .8vw,1.5rem);font-size:var(--fs-lead);line-height:1.5;max-width:40ch;color:var(--c-body)}
@media(prefers-reduced-motion:no-preference){
  .cx__line{animation:cx-up .9s var(--ease-out) backwards}
}
@keyframes cx-up{from{transform:translateY(.25em)}}

.cx__ticks{display:grid;gap:.75rem;max-width:46ch}
.cx__ticks li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.75rem;align-items:start;font-size:1rem;line-height:1.5;color:var(--c-body)}
.cx__ticks .icon{width:1.25rem;height:1.25rem;margin-top:.12rem;color:var(--accent)}
.cx__proof{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);max-width:50ch;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}

.cx__card{
  position:relative;min-width:0;
  padding:clamp(1.25rem,.85rem + 1.7vw,2.25rem);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-media);box-shadow:var(--shadow-media);
  scroll-margin-top:calc(var(--header-h) + 1rem);
}
@media(min-width:961px){
  /* La tarjeta abarca las dos filas; con la segunda en 1fr, la altura que
     le sobra a la tarjeta cae debajo de las garantías y no entre la
     entradilla y ellas. */
  .cx__grid{grid-template-columns:minmax(0,1fr) minmax(24rem,33rem);grid-template-rows:auto 1fr;column-gap:clamp(2.5rem,-1rem + 5.5vw,6.5rem);row-gap:2.25rem;align-items:start}
  .cx__intro{grid-column:1;grid-row:1;padding-top:clamp(.25rem,-1rem + 2vw,1.75rem)}
  .cx__card{grid-column:2;grid-row:1 / span 2}
  .cx__trust{grid-column:1;grid-row:2}
}
@media(max-width:960.98px){
  .cx__card,.cx__trust{max-width:40rem}
}
@media(max-width:599.98px){
  .cx__title{max-width:none}
  .cx__card{padding:1.25rem 1.1rem 1.4rem}
}
@media(orientation:landscape) and (max-height:500px){
  .cx{padding-top:.25rem}
  .cx .breadcrumbs{margin-bottom:.6rem}
}

/* ==========================================================================
   FO QUÉ PASA DESPUÉS · el titular fijo en 1-4; los pasos en 6-12 sobre un
   riel vertical que se llena con la lectura (scrub, sin pin). Cada paso
   lleva su marca: un anillo que se enciende al llegar; "Diagnóstico" lleva
   el dial, cuyo arco se traza cuando el riel lo alcanza; "Propuesta, cuando
   corresponde" lleva un anillo en trazo discontinuo, que nunca se llena.
   ========================================================================== */
.cs__grid{row-gap:2rem;align-items:start}
.cs__head{grid-column:1 / span 4}
.cs__steps{grid-column:6 / -1;list-style:none;position:relative;display:grid;gap:clamp(2.25rem,1.75rem + 2vw,3.5rem);padding-left:3.25rem}
.cs__steps::before,.cs__steps::after{content:"";position:absolute;left:13.5px;top:1rem;bottom:1rem;width:1px;background:var(--c-rule)}
.cs__steps::after{left:13px;width:2px;background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--p,1))}
.cs__step{position:relative}
.cs__mark{position:absolute;left:-3.25rem;top:.1em;width:28px;height:28px;display:grid;place-items:center;background:var(--bg)}
.cs__ring{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--accent);background:var(--accent);transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out)}
.cs__steps.is-live .cs__step:not(.is-on) .cs__ring{background:var(--bg);border-color:var(--c-muted)}
.cs__ring--open,.cs__steps.is-live .cs__step.is-on .cs__ring--open{border-style:dashed;background:transparent}
.cs__dial-svg{display:block;width:28px;height:28px;overflow:visible}
.cs__dial-track{fill:var(--bg);stroke:var(--accent);stroke-width:1.5;transition:stroke .35s var(--ease-out)}
.cs__dial-tick{display:none}
.cs__dial-arc{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a,1))}
.cs__dial-end{display:none}
.cs__steps.is-live .cs__step:not(.is-on) .cs__dial-track{stroke:var(--c-muted)}
.cs__step h3{font-size:var(--fs-h3)}
.cs__step p{margin-top:.5rem;max-width:46ch;color:var(--c-body)}
@media(min-width:961px){
  .cs__head{position:sticky;top:calc(var(--header-h) + 2rem)}
}
@media(max-width:960.98px){
  .cs__head,.cs__steps{grid-column:1 / -1}
}

/* ==========================================================================
   3. ¿PREFIERES ESCRIBIRNOS DIRECTO? · ficha editorial para quien no quiere
   formularios: el H2 y una frase en 1-5; en 7-12 el WhatsApp y el correo a
   escala de H3 grande, la ciudad y el alcance. Subrayados que crecen al
   señalar.
   ========================================================================== */
.ce{padding-block:clamp(3rem,2.25rem + 3vw,5.5rem) clamp(3.5rem,2.5rem + 3.5vw,6rem)}
.ce__grid{row-gap:1.5rem;align-items:start}
.ce__head{grid-column:1 / span 5}
.ce__h{font-size:var(--fs-h3);font-weight:500}
.ce__p{margin-top:.75rem;max-width:38ch;font-size:var(--fs-small);line-height:1.55;color:var(--c-body)}
.ce__body{grid-column:7 / -1}
.ce__list{list-style:none;display:grid;gap:.15rem}
.ce__mail{
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;max-width:100%;
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.375rem,1.1rem + 1.2vw,2.25rem);line-height:1.1;letter-spacing:-.035em;
  color:var(--c-ink);text-decoration:none;
}
.ce__mail .icon{width:.85em;height:.85em;color:var(--accent)}
.ce__mail span:not(.sr-only){display:inline;padding-bottom:.05em;background:linear-gradient(currentColor,currentColor) 0 100% / 0% 2px no-repeat;transition:background-size .45s var(--ease-out);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ce__mail:hover span:not(.sr-only),.ce__mail:focus-visible span:not(.sr-only){background-size:100% 2px}
.ce__fact{display:inline-flex;align-items:center;gap:.6rem;min-height:40px;color:var(--c-body)}
.ce__fact .icon{width:1.15rem;height:1.15rem;color:var(--accent)}
@media(max-width:960.98px){
  .ce__head,.ce__body{grid-column:1 / -1}
}

/* ==========================================================================
   IMPRESIÓN · todo en su estado final aunque GSAP haya dejado estilos
   ========================================================================== */
@media print{
  .cx__line,.cs__steps::after,.cs__dial-arc{animation:none!important;transform:none!important;opacity:1!important}
  .cx__card{box-shadow:none}
  .cs__head{position:static!important}
}