/* ==========================================================================
   BLIXTOR · css/p/paginas-web.css  (solo /paginas-web · "Hecha a la medida",
   7 oct 2026)
   --------------------------------------------------------------------------
   Hilo: una página hecha a la medida se mide antes de construirse y se
   entrega como una prueba lista para publicar. El grafismo son las marcas de
   plano: esquinas de recorte alrededor de las capturas reales (la prueba) y
   cotas que miden el tiempo (el plazo del H1, el riel del proceso, los años
   de renovación). Una familia por sección:
   1 héroe: el H1 a 12 columnas con el plazo acotado y, debajo, la entradilla
   con el CTA a la izquierda y la prueba del Dr. López a la derecha · 2
   portafolio: el titular fijo en 1-4 y seis pruebas en 5-12 con ritmo
   1 + 2 + 1 + 2 · 3 qué incluye: lo que entra en el encuadre y lo que va
   aparte · 4 cómo trabajamos: cuatro pasos sobre una cota con el plazo medido
   en Diseño · 5 capítulo vino: cómo se cotiza (lo que mide el costo) y las
   renovaciones (la cota de los años, abierta) · 6 velocidad y SEO: ficha
   técnica · 7 tres caminos con anchos distintos · 8 preguntas con el título
   fijo · 9 cierre con el titular encuadrado.
   Retícula de 12 columnas; cortes: >=1200 · 961-1199 · 600-960 · <600.
   Nada se oculta aquí a la espera de JS: sin JS o con movimiento reducido
   todo se ve en su estado final. Las marcas y la cota del héroe se trazan
   solo con CSS desde el primer pintado. Ver DESIGN.md, "Páginas web".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
  --edge:max(var(--gutter),(100vw - var(--wrap)) / 2);
  /* Marcas de recorte: tamaño de la L y distancia a la esquina del objeto */
  --mk:14px;
  --mk-off:10px;
}
.pw-hero__grid,.pw-port__grid,.pw-inc__grid,.pw-money__grid,.pw-faq__grid,.pw-spec__row{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); el salto a #portafolio lo suaviza el JS */
html{scroll-behavior:auto}
main section[tabindex="-1"]:focus{outline:none}

/* Encabezados de sección: titular y entradilla */
.pw-head{max-width:46rem;margin-bottom:clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.pw-intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:44ch;color:var(--c-body)}

/* ==========================================================================
   MARCAS DE RECORTE · cuatro L fuera de las esquinas del objeto (la
   captura, el bloque de lo incluido, el titular del cierre). Cada brazo se
   traza con --mx / --my; sin JS se ven puestas. El color es el de la tinta
   del capítulo y sube a señal al pasar el puntero por el trabajo.
   ========================================================================== */
.pw-marks{
  position:absolute;inset:calc((var(--mk) + var(--mk-off)) * -1);pointer-events:none;color:var(--c-ink);
  transition:inset .5s var(--ease-out),color .35s var(--ease-out);
}
.pw-marks i{position:absolute;display:block;width:var(--mk);height:var(--mk)}
.pw-marks i::before,.pw-marks i::after{content:"";position:absolute;right:0;bottom:0;background:currentColor}
.pw-marks i::before{width:100%;height:1.5px;transform-origin:100% 50%;transform:scaleX(var(--mx,1))}
.pw-marks i::after{width:1.5px;height:100%;transform-origin:50% 100%;transform:scaleY(var(--my,1))}
.pw-marks i:nth-child(1){left:0;top:0}
.pw-marks i:nth-child(2){right:0;top:0;transform:scaleX(-1)}
.pw-marks i:nth-child(3){right:0;bottom:0;transform:scale(-1)}
.pw-marks i:nth-child(4){left:0;bottom:0;transform:scaleY(-1)}

/* ==========================================================================
   LA PRUEBA · la captura real del sitio publicado (site.css .shot) entre
   marcas de recorte. En el héroe lleva además la versión de celular en su
   marco, colgando del borde inferior derecho, y el dominio en el pie.
   ========================================================================== */
.pw-proof{position:relative;margin:0}
.pw-proof__frame{position:relative}
.pw-proof__shot{position:relative}
.pw-proof__shot img{display:block;width:100%;height:auto}
.pw-proof--hero{--pw-phone:clamp(96px,11vw,176px);--pw-drop:clamp(1.75rem,4vw,3.25rem)}
.pw-proof__phone{position:absolute;right:calc(var(--mk-off) * -1 - .35rem);bottom:calc(var(--pw-drop) * -1);width:var(--pw-phone);z-index:2}
.pw-proof__phone .device{padding:calc(var(--pw-phone) * .04);border-radius:calc(var(--pw-phone) * .19)}
.pw-proof__phone .device__screen{border-radius:calc(var(--pw-phone) * .15)}
.pw-proof__cap{
  display:grid;gap:.2rem;margin-top:1rem;padding-right:calc(var(--pw-phone) + 1.5rem);
  font-size:var(--fs-small);line-height:1.5;color:var(--c-muted);
}
.pw-proof__cap a{color:var(--c-link);font-weight:550}
.pw-proof__domain{font-size:var(--fs-label);font-weight:500;letter-spacing:.01em}

/* ==========================================================================
   1. HÉROE · el H1 de siempre a 12 columnas: la frase SEO en 400 y el
   remate "listas para vender en 5 a 7 días hábiles" en 600 a escala de
   cartel, con el plazo acotado (la primera medida de la página). Debajo,
   en dos columnas: entradilla y CTA (1-5), la prueba (6-12). La cota y las
   marcas se trazan solo con CSS desde el primer pintado; el teléfono sube.
   ========================================================================== */
.pw-hero{position:relative;overflow-x:clip;padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.pw-hero .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.5rem)}
.pw-hero__grid{--pw-big:clamp(2.5rem,min(1.1rem + 4.6vw,(100svh - 26rem) / 3.1),5.5rem);row-gap:clamp(1.75rem,1.25rem + 2vw,3rem);align-items:start}
.pw-hero__title{grid-column:1 / -1;container-type:inline-size;max-width:none;font-size:var(--pw-big);line-height:.94;letter-spacing:-.048em;text-wrap:balance}
.pw-hero__title .deck{margin-bottom:.32em;font-size:max(1.125rem,calc(var(--pw-big) * .3));line-height:1.2;letter-spacing:-.02em}
.pw-hero__line{display:block;text-wrap:balance}
.pw-hero__copy{grid-column:1 / span 5;align-self:center;padding-bottom:var(--pw-drop,2rem)}
.pw-hero__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:36ch}
.pw-hero__actions{margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}
.pw-hero__actions .btn{flex-shrink:0}
.pw-hero__actions .link{display:inline-flex;align-items:center;min-height:44px}
.pw-proof--hero{grid-column:6 / -1;margin-top:.5rem}

/* La cota del plazo: línea bajo "5 a 7 días hábiles" con sus dos topes */
.pw-cota{position:relative;display:inline-block;white-space:nowrap}
.pw-cota__l{position:absolute;left:.02em;right:.02em;bottom:-.1em;height:max(2px,.045em);background:var(--accent);transform-origin:0 50%}
.pw-cota::before,.pw-cota::after{content:"";position:absolute;bottom:-.2em;width:max(2px,.03em);height:.26em;background:var(--accent)}
.pw-cota::before{left:.02em}
.pw-cota::after{right:.02em}

@media(prefers-reduced-motion:no-preference){
  .pw-cota__l{animation:pw-cota .7s .45s var(--ease-out) backwards}
  .pw-cota::before{animation:pw-fade .3s .45s backwards}
  .pw-cota::after{animation:pw-fade .3s 1.1s backwards}
  .pw-marks--hero i::before{animation:pw-mx .55s var(--ease-out) backwards}
  .pw-marks--hero i::after{animation:pw-my .55s var(--ease-out) backwards}
  .pw-marks--hero i:nth-child(1)::before,.pw-marks--hero i:nth-child(1)::after{animation-delay:.2s}
  .pw-marks--hero i:nth-child(2)::before,.pw-marks--hero i:nth-child(2)::after{animation-delay:.3s}
  .pw-marks--hero i:nth-child(3)::before,.pw-marks--hero i:nth-child(3)::after{animation-delay:.4s}
  .pw-marks--hero i:nth-child(4)::before,.pw-marks--hero i:nth-child(4)::after{animation-delay:.5s}
  .pw-proof--hero .device{animation:pw-rise .9s .35s var(--ease-out) backwards}
}
@keyframes pw-cota{from{transform:scaleX(0)}}
@keyframes pw-fade{from{opacity:0}}
@keyframes pw-mx{from{transform:scaleX(0)}}
@keyframes pw-my{from{transform:scaleY(0)}}
@keyframes pw-rise{from{opacity:0;transform:translateY(28px)}}

@media(min-width:961px) and (max-width:1199.98px){
  .pw-hero__copy{grid-column:1 / span 5}
  .pw-proof--hero{grid-column:6 / -1}
}
@media(max-width:960.98px){
  .pw-hero__grid{--pw-big:clamp(2.5rem,1.2rem + 4.4vw,4.5rem)}
  .pw-hero__copy{grid-column:1 / -1;padding-bottom:0}
  .pw-hero__lead{max-width:44ch}
  .pw-proof--hero{grid-column:1 / -1;margin-top:clamp(.5rem,2vw,1.5rem)}
}
@media(max-width:599.98px){
  /* Marcas más cortas: caben en el margen de 20 px del teléfono */
  :root{--mk:12px;--mk-off:6px}
  /* El remate llena el ancho del H1 (cqi); el plazo se subraya sin cota
     porque el renglón se parte */
  .pw-hero__title{font-size:1.125rem;line-height:1.2;letter-spacing:-.02em}
  .pw-hero__title .deck{font-size:1em;margin-bottom:.45em}
  .pw-hero__line{font-size:min(calc(100cqi / 9.1),3.25rem);line-height:.96;letter-spacing:-.045em}
  .pw-cota{display:inline;white-space:normal;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.07em;text-underline-offset:.1em}
  .pw-cota__l,.pw-cota::before,.pw-cota::after{display:none}
  .pw-proof--hero{--pw-drop:2.25rem}
  .pw-proof__phone{right:-.25rem}
}
/* Celular horizontal: todo más bajo y el CTA en la primera pantalla */
@media(orientation:landscape) and (max-height:500px){
  .pw-hero{padding-top:.25rem}
  .pw-hero .breadcrumbs{margin-bottom:.6rem}
  .pw-hero__grid{--pw-big:2.25rem;row-gap:1rem}
}

/* ==========================================================================
   2. PORTAFOLIO · el titular y su frase fijos en las columnas 1-4 mientras
   pasan las pruebas en 5-12: una a lo ancho, dos a media columna, una a lo
   ancho, dos a media columna. Debajo de cada prueba, el dominio, el nombre
   (enlace al caso), giro y ciudad, qué se construyó y los enlaces. Con
   movimiento, las marcas se trazan y la captura se imprime de arriba abajo.
   ========================================================================== */
.pw-port{padding-top:clamp(3.5rem,2.5rem + 4vw,7rem)}
.pw-port__grid{row-gap:3rem;align-items:start}
.pw-port__aside{grid-column:1 / span 4}
.pw-port__head h2{font-size:clamp(2rem,1.3rem + 3vw,4rem)}
.pw-port__head p{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:26ch;color:var(--c-body)}
.pw-works{grid-column:5 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.pw-work{position:relative}
.pw-work--big{grid-column:1 / -1}
.pw-work__body{margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.5rem)}
.pw-work--big .pw-work__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);column-gap:var(--col-gap);align-items:start}
.pw-work--big .pw-work__domain{grid-column:1;grid-row:1}
.pw-work--big .pw-work__title{grid-column:1;grid-row:2}
.pw-work--big .pw-work__meta{grid-column:1;grid-row:3}
.pw-work--big .pw-work__text{grid-column:2;grid-row:1 / span 2;margin-top:0;padding-top:.2rem}
.pw-work--big .pw-work__links{grid-column:2;grid-row:3;margin-top:0}
.pw-work__domain{font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted);margin-bottom:.5rem}
.pw-work__title{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.5rem);font-weight:600;line-height:1.05;letter-spacing:-.035em}
.pw-work--half .pw-work__title{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.pw-work__title a{color:inherit;text-decoration:none}
.pw-work__title a::after{content:"";position:absolute;inset:0;z-index:1}
.pw-work__t{display:inline-block;transition:transform .45s var(--ease-out)}
.pw-work__meta{margin-top:.6rem;font-size:var(--fs-small);color:var(--c-muted);display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.pw-work__meta span{display:inline-flex;align-items:center;gap:.35rem}
.pw-work__meta .icon{width:15px;height:15px;color:var(--accent)}
.pw-work__text{margin-top:.9rem;max-width:44ch;color:var(--c-body)}
.pw-work__links{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-top:.75rem;font-size:var(--fs-small)}
.pw-work__links .link{display:inline-flex;align-items:center;min-height:40px}
.pw-work__site{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;color:var(--c-muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.22em;transition:color .25s}
.pw-work__site:hover{color:var(--c-ink);text-decoration-color:currentColor}
.pw-work__site .icon{width:15px;height:15px}
.pw-work:focus-within{outline:2px solid var(--c-signal);outline-offset:6px}
.pw-work :focus-visible{outline:none}
@media(hover:hover) and (pointer:fine){
  .pw-work:hover .pw-work__t{transform:translateX(6px)}
  .pw-work:hover .pw-marks{--mk-off:16px;color:var(--accent)}
}
@media(min-width:961px){
  .pw-port__aside{position:sticky;top:calc(var(--header-h) + 2rem)}
}
@media(max-width:960.98px){
  .pw-port__aside,.pw-works{grid-column:1 / -1}
  .pw-port__head p{max-width:44ch}
}
@media(max-width:599.98px){
  .pw-works{grid-template-columns:minmax(0,1fr);row-gap:3.5rem}
  .pw-work--half .pw-work__title{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.5rem)}
  .pw-work--big .pw-work__body{display:block}
  .pw-work--big .pw-work__text{padding-top:0;margin-top:.9rem}
  .pw-work--big .pw-work__links{margin-top:.75rem}
}

/* ==========================================================================
   3. QUÉ INCLUYE Y QUÉ NO · lo que entra en la cotización, encuadrado por
   las mismas marcas que la prueba (columnas 1-7, en dos columnas de
   palomitas); lo que va aparte, fuera del encuadre (9-12), con el signo
   menos y en tono bajo.
   ========================================================================== */
.pw-inc__grid{row-gap:clamp(2.5rem,2rem + 2vw,4rem);align-items:start}
.pw-inc__head{grid-column:1 / -1;max-width:46rem}
.pw-inc__yes{grid-column:1 / span 7;position:relative;padding:clamp(.5rem,.25rem + .5vw,.75rem) clamp(.75rem,.5rem + 1vw,1.5rem)}
.pw-marks--frame{--mk-off:8px}
.pw-inc__no{grid-column:9 / -1;padding-top:clamp(.5rem,.25rem + .5vw,.75rem)}
.pw-inc__h{font-size:var(--fs-h3);padding-bottom:.75rem;border-bottom:1px solid var(--c-ink)}
.pw-ticks{list-style:none}
.pw-ticks li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.5rem;align-items:start;padding-block:.8rem .85rem;border-top:1px solid var(--c-rule);line-height:1.5;color:var(--c-ink)}
.pw-ticks li:first-child{border-top:0}
.pw-ticks .icon{width:1.1rem;height:1.1rem;margin-top:.22rem;color:var(--accent)}
.pw-ticks--no li{color:var(--c-body)}
.pw-ticks--no .icon{color:var(--c-muted)}
.pw-inc__yes .pw-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
.pw-inc__yes .pw-ticks li:nth-child(-n+2){border-top:0}
@media(max-width:960.98px){
  .pw-inc__yes{grid-column:1 / -1}
  .pw-inc__no{grid-column:1 / -1}
}
@media(max-width:599.98px){
  .pw-inc__yes .pw-ticks{grid-template-columns:minmax(0,1fr)}
  .pw-inc__yes .pw-ticks li:nth-child(2){border-top:1px solid var(--c-rule)}
}

/* ==========================================================================
   4. CÓMO TRABAJAMOS · cuatro pasos sobre una cota: una línea con un tope
   en cada paso y los topes altos que miden Diseño, donde corren los 5 a 7
   días hábiles (rótulo decorativo sobre ese tramo). Con movimiento la
   línea se llena con la lectura, sin fijar la sección; sin JS se ve
   completa. Horizontal en escritorio; vertical por debajo de 961.
   ========================================================================== */
.pw-steps{--tick:14px;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2rem}
.pw-step{position:relative;padding-top:3.5rem}
.pw-step__mark{position:absolute;left:0;top:1.5rem;display:block;width:calc(100% + var(--col-gap));height:0}
.pw-step--last .pw-step__mark{width:100%}
.pw-step__mark i{display:block;font-style:normal}
.pw-step__seg{position:absolute;left:0;right:0;top:-.5px;height:1px;background:var(--c-rule)}
.pw-step--span .pw-step__seg{background:var(--c-ink)}
.pw-step__fill{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.pw-step__tick,.pw-step__end{position:absolute;top:calc(var(--tick) / -2);width:1.5px;height:var(--tick);background:var(--c-ink);transition:background-color .35s var(--ease-out)}
.pw-step__tick{left:0}
.pw-step__end{right:0}
.pw-step--span .pw-step__tick,.pw-step--span + .pw-step .pw-step__tick{height:calc(var(--tick) + 10px);top:calc((var(--tick) + 10px) / -2)}
.pw-steps.is-live .pw-step:not(.is-on) .pw-step__tick{background:var(--c-muted)}
.pw-step__cota{
  position:absolute;left:0;right:0;bottom:.7rem;text-align:center;
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--accent);white-space:nowrap;
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.pw-steps.is-live .pw-step:not(.is-on) .pw-step__cota{opacity:0;transform:translateY(4px)}
.pw-step h3{font-size:var(--fs-h3);max-width:14ch}
.pw-step > p{margin-top:.6rem;max-width:34ch;color:var(--c-body)}
.pw-step__gets{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--c-rule);font-size:var(--fs-small);line-height:1.55;color:var(--c-ink)}
.pw-step__gets strong{display:block;margin-bottom:.15rem;font-size:var(--fs-label);font-weight:600;color:var(--accent-deep)}
@media(max-width:960.98px){
  .pw-steps{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
  .pw-step{padding-top:0;padding-left:2.5rem}
  .pw-step__mark{left:.5rem;top:.75rem;width:0;height:calc(100% + 2.5rem)}
  .pw-step--last .pw-step__mark{height:calc(100% - .75rem)}
  .pw-step__seg{left:-.5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .pw-step__fill{left:-1px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .pw-step__tick,.pw-step__end{left:calc(var(--tick) / -2);top:0;width:var(--tick);height:1.5px}
  .pw-step__end{top:auto;bottom:0}
  .pw-step--span .pw-step__tick,.pw-step--span + .pw-step .pw-step__tick{width:calc(var(--tick) + 10px);left:calc((var(--tick) + 10px) / -2);height:1.5px;top:0}
  .pw-step__mark .pw-step__cota{display:none}
  .pw-step h3{max-width:none}
}

/* ==========================================================================
   5. CAPÍTULO VINO · cómo se cotiza y las renovaciones: lo que se paga, en
   un solo bloque a sangre. En "Cómo se cotiza" la tesis va a la izquierda
   (1-5) y los cuatro factores que miden el costo a la derecha (7-12), cada
   uno con su tope. En "Renovaciones" la cota de los años: el primero,
   incluido; desde el segundo, una línea con un tope por año que sigue
   abierta.
   ========================================================================== */
.pw-money{padding-bottom:clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.pw-money__grid{row-gap:3rem;align-items:start}
.pw-money__intro{grid-column:1 / span 5}
.pw-money__lead{
  margin-top:1.25rem;max-width:22ch;
  font-family:var(--font-display);font-size:clamp(1.3125rem,1.05rem + 1.05vw,2rem);font-weight:400;line-height:1.25;letter-spacing:-.02em;color:var(--c-ink);
}
.pw-money__more{margin-top:1.5rem;max-width:40ch;font-size:var(--fs-small);line-height:1.6;color:var(--c-body)}
.pw-factors{grid-column:7 / -1;list-style:none;padding-top:.25rem}
.pw-factor{display:grid;grid-template-columns:1.75rem minmax(0,1fr);align-items:start;padding-block:1.25rem 1.4rem;border-top:1px solid var(--c-rule)}
.pw-factor:last-child{border-bottom:1px solid var(--c-rule)}
.pw-factor__tick{display:block;width:2px;height:1.05em;margin-top:.1em;background:var(--c-signal);transform-origin:50% 0;transform:scaleY(var(--t,1));font-size:clamp(1.375rem,1.1rem + 1.1vw,2.125rem)}
.pw-factor > span{display:block;max-width:40ch;color:var(--c-body)}
.pw-factor strong{display:block;margin-bottom:.35rem;font-family:var(--font-display);font-size:clamp(1.375rem,1.1rem + 1.1vw,2.125rem);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--c-ink)}

.pw-renew{padding-top:clamp(2.5rem,2rem + 2vw,4rem);padding-bottom:clamp(5rem,3.5rem + 5vw,9rem);border-top:1px solid var(--c-rule)}
.pw-renew__head{margin-bottom:clamp(2.25rem,1.75rem + 2vw,3.5rem)}
.pw-years{list-style:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--col-gap)}
.pw-year{position:relative;padding-top:2.25rem}
.pw-year__line{position:absolute;left:0;top:.75rem;display:block;width:calc(100% + var(--col-gap));height:0}
.pw-year--open .pw-year__line{width:100%}
.pw-year__line i{display:block;font-style:normal}
.pw-year__line::before{content:"";position:absolute;left:0;right:0;top:-.5px;height:1px;background:var(--c-rule)}
.pw-year__fill{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--c-signal);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.pw-year__tick{position:absolute;left:0;top:-9px;width:1.5px;height:18px;background:var(--c-ink)}
.pw-year__years{
  position:absolute;left:0;right:1.5rem;top:-6px;height:12px;opacity:var(--y,1);
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1.5px),var(--c-ink) calc(20% - 1.5px) 20%);
}
.pw-year__arrow{position:absolute;right:0;top:-5px;width:9px;height:9px;border-top:1.5px solid var(--c-ink);border-right:1.5px solid var(--c-ink);transform:rotate(45deg);opacity:var(--a,1)}
.pw-year h3{font-size:var(--fs-h3)}
.pw-year p{margin-top:.5rem;max-width:40ch;color:var(--c-body)}
.pw-renew__own{
  margin-top:clamp(2.5rem,2rem + 2vw,4rem);max-width:26ch;
  font-family:var(--font-display);font-size:clamp(1.3125rem,1.05rem + 1.05vw,2rem);font-weight:400;line-height:1.25;letter-spacing:-.02em;color:var(--c-ink);
}
@media(max-width:960.98px){
  .pw-money__intro,.pw-factors{grid-column:1 / -1}
  .pw-money__lead{max-width:30ch}
}
@media(max-width:599.98px){
  .pw-years{grid-template-columns:minmax(0,1fr);row-gap:2.25rem}
  .pw-year__line{width:100%}
}

/* ==========================================================================
   6. VELOCIDAD Y SEO BÁSICO · la ficha técnica: cada base en una fila con
   el nombre en 1-4 y lo que significa en 5-11, filetes entre filas y un
   filete de tinta arriba.
   ========================================================================== */
.pw-spec__head{margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}
.pw-spec__list{border-bottom:1px solid var(--c-rule)}
.pw-spec__row{padding-block:clamp(1.25rem,1rem + 1vw,1.9rem);border-top:1px solid var(--c-rule);align-items:baseline}
.pw-spec__row:first-child{border-top:2px solid var(--c-ink)}
.pw-spec__row h3{grid-column:1 / span 4;font-size:var(--fs-h3)}
.pw-spec__row p{grid-column:5 / span 7;max-width:62ch;color:var(--c-body)}
@media(max-width:760px){
  .pw-spec__row{grid-template-columns:minmax(0,1fr);row-gap:.4rem}
  .pw-spec__row h3,.pw-spec__row p{grid-column:1}
}

/* ==========================================================================
   7. TRES CAMINOS · tres columnas de anchos distintos (5 · 4 · 3): la
   página completa, que es la de esta página, lleva el filete de señal; la
   landing, el filete de tinta; las redes solas, en tono bajo y con el signo
   menos. Con movimiento los tres filetes se trazan al llegar.
   ========================================================================== */
.pw-paths__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);column-gap:var(--col-gap)}
.pw-path{position:relative;display:flex;flex-direction:column;gap:.9rem;padding-top:1.5rem}
.pw-path + .pw-path::before{content:"";position:absolute;left:calc(var(--col-gap) / -2);top:1.5rem;bottom:0;width:1px;background:var(--c-rule)}
.pw-path__rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--c-ink);transform-origin:0 50%;transform:scaleX(var(--r,1))}
.pw-path--pick .pw-path__rule{height:2px;background:var(--accent)}
.pw-path h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.pw-path--pick h3{font-size:clamp(1.625rem,1.2rem + 1.6vw,2.5rem)}
.pw-path > p:not(.pw-path__foot){max-width:40ch;color:var(--c-body)}
.pw-path .pw-ticks li{padding-block:.55rem .6rem;font-size:var(--fs-small)}
.pw-path__foot{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--c-rule);font-size:var(--fs-small);color:var(--c-muted)}
.pw-path--pick .pw-path__foot{color:var(--accent-deep);font-weight:600}
.pw-path__foot .link{display:inline-flex;align-items:center;min-height:40px}
.pw-path--no h3{color:var(--c-body)}
@media(max-width:860px){
  .pw-paths__grid{grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
  .pw-path + .pw-path::before{display:none}
  .pw-path--pick h3{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.25rem)}
}

/* ==========================================================================
   8. PREGUNTAS · el acordeón del sistema con el título fijo en 1-4; la
   pregunta abierta toma el tono de enlace y su filete sube a señal.
   ========================================================================== */
.pw-faq__grid{align-items:start}
.pw-faq__side{grid-column:1 / span 4}
.pw-faq__list{grid-column:5 / -1}
.pw-faq .faq__item{position:relative}
.pw-faq .faq__item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--c-signal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.pw-faq .faq__item[open]::before{transform:scaleX(1)}
.pw-faq .faq__q{transition:color .3s var(--ease-out)}
.pw-faq .faq__item[open] > .faq__q{color:var(--accent-deep)}
@media(min-width:961px){
  .pw-faq__side{position:sticky;top:calc(var(--header-h) + 2rem)}
}
@media(max-width:960.98px){
  .pw-faq__side,.pw-faq__list{grid-column:1 / -1}
  .pw-faq__side{margin-bottom:1.5rem}
}

/* ==========================================================================
   9. CIERRE · el titular de siempre, encuadrado con las marcas de la
   prueba: la página termina como empezó, con algo listo para publicar.
   ========================================================================== */
.pw-sign{position:relative;display:inline-block;padding:.1em .12em .14em}
.pw-marks--sign{--mk:.4em;--mk-off:.04em;color:var(--c-signal)}

/* ==========================================================================
   IMPRESIÓN · todo en su estado final aunque GSAP haya dejado estilos
   ========================================================================== */
@media print{
  .pw-marks i::before,.pw-marks i::after,.pw-cota__l,.pw-step__fill,.pw-year__fill,.pw-factor__tick,.pw-path__rule{transform:none!important;animation:none!important}
  .pw-marks i::before,.pw-marks i::after,.pw-cota::before,.pw-cota::after,.pw-year__years,.pw-year__arrow,.pw-step__cota,.pw-work__body > *,.pw-proof__shot,.pw-proof--hero .device{opacity:1!important;clip-path:none!important;animation:none!important}
  .pw-port__aside,.pw-faq__side{position:static!important}
}