/* ==========================================================================
   BLIXTOR · css/p/google-ads.css  (solo /google-ads · "La búsqueda que ya
   existe", 7 oct 2026)
   --------------------------------------------------------------------------
   Hilo: una búsqueda real se escribe, se lee y se captura. El grafismo es la
   notación de Google Ads: corchetes (coincidencia), signo menos (palabra
   negativa) y el cursor de texto (la consulta). Una familia por sección:
   1 héroe: el H1 a escala de cartel y la consulta de ejemplo que se escribe,
   se lee por partes y queda entre corchetes · 2 para quién: la tesis y dos
   listas con + y − · 3 qué incluye: tres frentes como filas de un sistema
   (el ejemplo de palabras clave fijo junto al primero; el sitio web en una
   banda de rubor) · 4 campañas: Búsqueda como base con el esquema del
   anuncio y lo demás al margen · 5 cómo trabajamos: una recta que termina en
   el bucle de cada semana · 6 de la métrica a la decisión: escalera de
   preguntas en el capítulo noche · 7 cómo se cobra: una bifurcación
   tranquila · 8 Google o Meta: un eje con un puente · 9 preguntas con + y −
   · 10 cierre: la pregunta del visitante con su cursor y el rayo entre
   corchetes.
   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. La escritura del héroe es solo CSS (empieza
   en el primer pintado, no espera a GSAP) y vive bajo
   prefers-reduced-motion: no-preference. Ver DESIGN.md, "Google Ads".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
  /* Del borde del contenido al de la ventana (bandas a sangre) */
  --edge:max(var(--gutter),(100vw - var(--wrap)) / 2);
}
.gh__grid,.gi__front,.gt__grid,.gv__board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}

/* Piezas que la portada y /meta-ads ya resolvieron y aquí se repiten
   acotadas a esta página (candidatas a site.css en la revisión global):
   - botón de WhatsApp como icono en la cabecera móvil;
   - CTA compacto por debajo de 380 px (nunca se parte);
   - la barra de las migas pegada a "Google Ads" (site.css le quita el gap). */
@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: con scroll-behavior:smooth, WebKit
   vuelve arriba en cada ScrollTrigger.refresh() con el foco dentro de la
   página. Los saltos a anclas los suaviza js/p/google-ads.js. */
html{scroll-behavior:auto}
.gh .link,.gv__more .link{display:inline-flex;align-items:center;min-height:44px}
/* El salto "Ver qué incluye" enfoca la sección destino; sin contorno */
main section[tabindex="-1"]:focus{outline:none}

/* El signo + (y −) de la página: trazos de 2 px que se dibujan con --a/--b */
.mk{position:relative;display:inline-block;flex:none;width:.62em;height:.62em}
.mk i{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:var(--accent);transform:scaleX(var(--a,1))}
.mk i + i{transform:rotate(90deg) scaleX(var(--b,1))}

/* ==========================================================================
   1. HÉROE · el H1 es la misma frase de siempre: la parte SEO arriba en 400
   y el remate "aparece cuando ya te están buscando" a escala de cartel, en
   dos renglones. Justo debajo, como parte del titular, la consulta de
   ejemplo: se escribe letra por letra, cada parte se subraya con su rótulo
   (qué busca, para quién, dónde) y al final queda entre corchetes, como una
   palabra clave de coincidencia exacta. Después, la entradilla y el CTA.
   Una sola columna de lectura (nada de texto a un lado y objeto al otro).
   --big sale del ancho y del alto de la ventana: el CTA entra en la primera
   pantalla. En el teléfono la entradilla y el CTA van antes de la consulta,
   que se apila por partes.
   ========================================================================== */
.gh{position:relative;overflow-x:clip;padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.gh .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.75rem)}
.gh__grid{
  /* Alto total del héroe ≈ 3.25 × --big (remate, parte SEO y consulta)
     + 28.5rem medidos (cabecera, migas, entradilla y CTA) y un margen */
  --big:clamp(2.75rem,min(8.2vw,calc((100svh - 30rem) / 3.25)),7.5rem);
  row-gap:clamp(1.5rem,1rem + 1.6vw,2.5rem);align-items:start;
}
.gh__title{
  grid-column:1 / -1;container-type:inline-size;max-width:none;
  font-size:var(--big);line-height:.92;letter-spacing:-.052em;text-wrap:wrap;
}
.gh__deck{display:block;margin-bottom:.34em;font-size:max(1.125rem,calc(var(--big) * .25));line-height:1.2;letter-spacing:-.02em}
.gh__line{display:block;max-width:10.6em;text-wrap:balance}
.gh__copy{grid-column:1 / span 6;position:relative;z-index:1}
.gh__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:40ch}
.gh__actions{margin-top:clamp(1.25rem,1rem + 1vw,2rem)}
/* El botón nunca se encoge (con overflow:hidden se recortaría) */
.gh__actions .btn{flex-shrink:0}
.gh__fig{grid-column:1 / -1;justify-self:start;margin:0}
.gh__cap{margin-top:.75rem;font-size:var(--fs-label);color:var(--c-muted)}
/* Orden de lectura en pantallas con alto: H1, consulta, entradilla y CTA */
@media(min-width:600px) and (min-height:520px){
  .gh__title{grid-row:1}
  .gh__fig{grid-row:2}
  .gh__copy{grid-row:3}
}

/* La consulta. Cada parte es una columna: la palabra con su subrayado y,
   debajo, el rótulo. Los corchetes abrazan la lectura completa. */
.q{
  position:relative;display:inline-flex;align-items:flex-start;column-gap:.36em;
  padding:.3em .62em .34em;
  font-family:var(--font-display);font-size:clamp(1.5rem,3.6vw,2.25rem);font-weight:400;
  line-height:1.1;letter-spacing:-.025em;color:var(--ink);
}
.q__seg{display:inline-flex;flex-direction:column;gap:.6rem}
.q__w{position:relative;white-space:nowrap;padding-bottom:.16em}
.q__w::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:0 50%}
.q__c{position:relative;font-style:normal}
.q__tag{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;line-height:1.3;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap}
.q__br{position:absolute;top:0;bottom:0;width:.32em;border:2px solid var(--accent);pointer-events:none}
.q__br--l{left:0;border-right:0}
.q__br--r{right:0;border-left:0}
@media(min-width:961px){
  .q{font-size:calc(var(--big) * .34)}
}
/* Teléfono: la consulta se apila por partes, cada palabra con su rótulo al
   lado, entre un solo par de corchetes altos */
@media(max-width:599.98px){
  .q{display:inline-grid;grid-template-columns:auto auto;column-gap:1.1rem;row-gap:.45em;align-items:baseline;padding:.4em .75em .45em;font-size:clamp(1.5rem,7.4vw,1.875rem)}
  .q__seg{display:contents}
}

/* Escritura: solo CSS y una vez. Cada letra aparece en su --d; el cursor
   (el ::after de la letra) vive hasta que aparece la siguiente (--n). La
   última parpadea y se apaga cuando cierran los corchetes (--b). El
   subrayado de cada parte es un trazo con scaleX. */
@media(prefers-reduced-motion:no-preference){
  .q__c{animation:q-type 0s var(--d) backwards}
  .q__c::after{
    content:"";position:absolute;left:100%;top:.04em;bottom:.02em;width:2px;margin-left:.03em;background:var(--accent);
    opacity:0;animation:q-on 0s var(--d) forwards,q-off 0s var(--n) forwards;
  }
  .q__c--last::after{animation:q-on 0s var(--d) forwards,q-blink .5s var(--d) 2,q-off 0s var(--n) forwards}
  .q__w::after{animation:q-under .5s var(--u) var(--ease-out) backwards}
  .q__tag{animation:q-tag .45s calc(var(--u) + 80ms) var(--ease-out) backwards}
  .q__br--l{animation:q-br-l .55s var(--b) var(--ease-out) backwards}
  .q__br--r{animation:q-br-r .55s var(--b) var(--ease-out) backwards}
}
@keyframes q-type{from{opacity:0}}
@keyframes q-on{to{opacity:1}}
@keyframes q-off{to{opacity:0}}
@keyframes q-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes q-under{from{transform:scaleX(0)}}
@keyframes q-tag{from{opacity:0;transform:translateY(-4px)}}
@keyframes q-br-l{from{opacity:0;transform:translateX(-.45em)}}
@keyframes q-br-r{from{opacity:0;transform:translateX(.45em)}}

/* Portátiles con poco alto: migas más juntas y más reserva */
@media(min-width:961px) and (max-height:780px){
  .gh{padding-top:.5rem}
  .gh .breadcrumbs{margin-bottom:.9rem}
  .gh__grid{row-gap:1.25rem;--big:clamp(2.75rem,min(7.2vw,calc((100svh - 28rem) / 3.25)),7.5rem)}
}
/* <961: el remate llena el ancho del H1 (cqi) */
@media(max-width:960.98px){
  .gh__title{font-size:clamp(1.125rem,.95rem + .9vw,1.5rem);line-height:1.2;letter-spacing:-.02em}
  .gh__deck{font-size:1em;margin-bottom:.45em}
  .gh__line{max-width:none;font-size:min(calc(100cqi / 7.4),6.25rem);line-height:.94;letter-spacing:-.05em}
  .gh__copy{grid-column:1 / -1}
}
@media(min-width:600px) and (max-width:960.98px){
  .gh__copy{grid-column:1 / span 9}
}
/* Celular horizontal: el CTA en la primera pantalla (la entradilla a lo
   ancho en dos renglones y el remate más bajo) */
@media(orientation:landscape) and (max-height:500px){
  .gh{padding-top:.25rem}
  .gh .breadcrumbs{margin-bottom:.6rem}
  .gh__grid{row-gap:1rem}
  .gh__title{font-size:1rem}
  .gh__line{font-size:min(calc(100cqi / 9.5),12svh)}
  .gh__copy{grid-column:1 / -1}
  .gh__lead{max-width:none;font-size:1.0625rem}
  .gh__actions{margin-top:.75rem}
}

/* ==========================================================================
   2. PARA QUIÉN · la tesis de la página ("no crea demanda: la atiende") y
   dos listas como una lista de palabras clave: lo que suma (+) y lo que se
   excluye (−). Sin JS los signos se ven puestos; con movimiento se trazan
   una vez, el + en dos tiempos.
   ========================================================================== */
.gf{padding-top:clamp(3.5rem,2.5rem + 4vw,7rem);padding-bottom:clamp(4rem,3rem + 4vw,7rem)}
.gf__head{max-width:58rem;margin-bottom:clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.gf__title{font-size:var(--fs-h2);max-width:16ch}
.gf__thesis{
  margin-top:clamp(1rem,.75rem + 1vw,1.6rem);max-width:30ch;
  font-family:var(--font-display);font-size:clamp(1.375rem,1.05rem + 1.3vw,2.25rem);font-weight:400;line-height:1.22;letter-spacing:-.022em;color:var(--c-body);
}
.gf__key{color:var(--accent);font-weight:500;white-space:nowrap}
.gf__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,1rem + 4vw,6rem);row-gap:3rem}
.gf__h{padding-top:1rem;border-top:2px solid var(--c-ink);font-size:var(--fs-h3);font-weight:500;letter-spacing:-.02em}
.gf__list{list-style:none;margin-top:clamp(.75rem,.5rem + .8vw,1.25rem)}
.gf__item{display:grid;grid-template-columns:2.5rem minmax(0,1fr);align-items:start;padding-block:1.05rem 1.2rem;border-top:1px solid var(--c-rule)}
.gf__item:first-child{border-top:0}
.gf__item p{
  font-family:var(--font-display);font-size:clamp(1.0625rem,.98rem + .4vw,1.3125rem);font-weight:400;line-height:1.38;letter-spacing:-.012em;color:var(--c-ink);
  max-width:34ch;
}
.gf__col--no .gf__item p{color:var(--ink-body)}
/* El signo: dos trazos (+) o uno (−), centrados en el primer renglón */
.gf__mk{position:relative;display:block;width:1.25rem;height:calc(1em * 1.38);font-size:clamp(1.0625rem,.98rem + .4vw,1.3125rem)}
.gf__mk i{position:absolute;left:0;top:50%;width:1.25rem;height:2px;margin-top:-1px;background:var(--accent);transform:scaleX(var(--a,1));transform-origin:50% 50%}
.gf__mk i + i{transform:rotate(90deg) scaleX(var(--b,1))}
@media(max-width:760px){
  .gf__cols{grid-template-columns:minmax(0,1fr)}
  .gf__item{grid-template-columns:2.1rem minmax(0,1fr)}
}

/* ==========================================================================
   3. QUÉ INCLUYE · tres frentes como filas de un sistema: a la izquierda
   (1-5) dónde pasa el trabajo; a la derecha (7-12) qué se hace. El primero
   lleva como imagen el ejemplo de palabras clave del despacho contable
   ("contador para empresas" entre corchetes, "empleo de contador" con el
   signo menos), fijo mientras se leen los entregables en escritorio. El
   sitio web, que va aparte de las campañas, en una banda de rubor a sangre.
   ========================================================================== */
.gi{padding-bottom:0}
.gi__head{max-width:46rem;margin-bottom:clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.gi__title{font-size:var(--fs-h2)}
.gi__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.gi__front{row-gap:1.75rem;align-items:start;padding-block:clamp(1.5rem,1.1rem + 1.2vw,2.25rem) clamp(2.75rem,2rem + 2.5vw,4.25rem);border-top:2px solid var(--c-ink)}
.gi__side{grid-column:1 / span 5}
.gi__fname{font-size:clamp(1.625rem,1.15rem + 1.75vw,2.625rem);font-weight:600;line-height:1.02;letter-spacing:-.042em;max-width:13ch}
.gi__items{grid-column:7 / -1;list-style:none}
.gi__item{padding-block:1.05rem 1.3rem;border-top:1px solid var(--c-rule)}
.gi__item:first-child{border-top:0;padding-top:.3rem}
.gi__name{font-size:var(--fs-h3)}
.gi__item p{margin-top:.4rem;max-width:48ch}
.gi__front--rep .gi__fname{grid-column:1 / span 5}
.gi__statement{
  grid-column:7 / -1;max-width:30ch;
  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(min-width:961px){
  .gi__front--ads .gi__side{position:sticky;top:calc(var(--header-h) + 2rem)}
}

/* El ejemplo de palabras clave: la frase de siempre, compuesta en tres
   renglones. Las comillas se cambian por la notación (corchetes / menos). */
.gi__kw{margin-top:clamp(1.75rem,1.25rem + 1.5vw,2.75rem)}
.kw{font-size:var(--fs-small);line-height:1.5;color:var(--c-muted)}
.kw__lead{display:block;max-width:32ch;margin-bottom:1rem}
.kw__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .8rem}
.kw__row + .kw__row{margin-top:.75rem}
.kw__t{
  position:relative;display:inline-block;padding:.14em .44em .16em;
  font-family:var(--font-display);font-size:clamp(1.25rem,1rem + .95vw,1.875rem);font-weight:400;line-height:1.2;letter-spacing:-.022em;color:var(--c-ink);
}
.kw__qm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kw__b{position:absolute;top:0;bottom:0;width:.3em;border:2px solid var(--accent)}
.kw__b--l{left:0;border-right:0}
.kw__b--r{right:0;border-left:0}
.kw__row--no .kw__t{padding-left:1.1em;color:var(--ink-2)}
.kw__minus{position:absolute;left:.12em;top:55%;width:.62em;height:2px;margin-top:-1px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--m,1))}
.kw__v{font-family:var(--font-display);font-size:clamp(1rem,.92rem + .35vw,1.1875rem);font-weight:500;letter-spacing:-.01em}
.kw__row--yes .kw__v{color:var(--accent-deep)}
.kw__row--no .kw__v{color:var(--ink-2)}

/* El sitio web: banda de rubor a sangre */
.gi__site{background:var(--surface-2)}
.gi__front--site{border-top:0;padding-block:clamp(3rem,2.25rem + 3vw,5.25rem)}
.gi__where{margin-bottom:.7rem;font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--accent-deep)}
.gi__site-main{grid-column:7 / -1}
.gi__ticks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem var(--col-gap)}
.gi__ticks li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.35rem;align-items:start;line-height:1.5;color:var(--c-ink)}
.gi__ticks .mk{width:.75rem;height:.75rem;margin-top:calc((1.5em - .75rem) / 2)}
.gi__note{margin-top:clamp(1.75rem,1.25rem + 1.5vw,2.5rem)}
.gi__note p{font-size:var(--fs-small)}
@media(min-width:961px) and (max-width:1199.98px){
  .gi__side,.gi__front--rep .gi__fname{grid-column:1 / span 5}
  .gi__items,.gi__statement,.gi__site-main{grid-column:6 / -1}
}
@media(max-width:960.98px){
  .gi__front{grid-template-columns:minmax(0,1fr)}
  .gi__side,.gi__items,.gi__front--rep .gi__fname,.gi__statement,.gi__site-main{grid-column:1}
  .gi__fname{max-width:none}
  .gi__kw{margin-bottom:.5rem}
}
@media(max-width:600px){
  .gi__ticks{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   4. CAMPAÑAS · Búsqueda es la base y se lleva el espacio (1-7): su nombre
   a escala de cartel y, debajo, el esquema del anuncio de ejemplo (lo que
   ve la persona en la caja punteada; lo que se mide, debajo). Lo demás "se
   suma" al margen (9-12): tres notas con un filete que se traza al entrar.
   ========================================================================== */
.gt__grid{row-gap:clamp(2rem,1.5rem + 2vw,3.5rem);align-items:start}
.gt__head{grid-column:1 / span 7}
.gt__title{font-size:var(--fs-h2);max-width:15ch}
.gt__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5}
.gt__main{grid-column:1 / span 7;grid-row:2}
.gt__base{font-size:clamp(3.25rem,1.5rem + 6vw,7.25rem);font-weight:600;line-height:.88;letter-spacing:-.058em}
.gt__main-text{max-width:42rem}
.gt__main-text > p{margin-top:1.1rem;max-width:46ch}
.gt__when{font-size:var(--fs-small);line-height:1.55}
.gt__when .label{display:block;margin-bottom:.1rem;font-weight:600;color:var(--accent-deep)}
.gt__more{grid-column:9 / -1;grid-row:2;padding-top:clamp(.25rem,1vw,1rem)}
.gt__more-intro{
  padding-bottom:1.5rem;max-width:22ch;
  font-family:var(--font-display);font-size:clamp(1.125rem,1rem + .5vw,1.4375rem);font-weight:400;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink);
}
.gt__add{padding-block:1.2rem 1.45rem;border-top:1px solid var(--c-rule)}
.gt__name{font-size:var(--fs-h3)}
.gt__mk{width:.6em;height:.6em;margin-right:.45em;vertical-align:.04em}
.gt__add > p{margin-top:.5rem;font-size:var(--fs-small);line-height:1.6}
.gt__add > .gt__when{margin-top:.85rem}

/* La anatomía del anuncio de ejemplo: un riel une la búsqueda (la palabra
   clave entre corchetes), el anuncio, la acción que se toca (entre
   corchetes) y lo que se mide. Sin barra de búsqueda, sin página de
   resultados, sin marca ni colores de Google. */
.ad{margin:clamp(2rem,1.5rem + 2vw,3rem) 0 0;max-width:36rem}
.ad__stage{position:relative;padding-left:2.25rem}
.ad__rail{position:absolute;left:.5rem;top:.95rem;bottom:1.45rem;width:1px;background:var(--c-rule)}
.ad__fill{position:absolute;left:-.5px;top:0;bottom:0;width:2px;background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--f,1))}
.ad__node{position:relative}
.ad__node + .ad__node{margin-top:1.6rem}
.ad__q::before,.ad__res::before{content:"";position:absolute;left:-2.15rem;top:.95rem;width:.85rem;height:2px;margin-top:-1px;background:var(--accent)}
.ad__res::before{top:.8rem}
/* Corchetes como signos dentro del renglón: si la búsqueda se parte en dos
   renglones, abren al principio del primero y cierran al final del último */
.ad__kw{font-family:var(--font-display);font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.ad__b{display:inline-block;width:.26em;height:1.02em;vertical-align:-.2em;border:2px solid var(--accent);font-style:normal}
.ad__b--l{margin-right:.22em;border-right:0}
.ad__b--r{margin-left:.2em;border-left:0}
.ad__title{font-family:var(--font-display);font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:600;line-height:1.22;letter-spacing:-.015em;color:var(--accent-deep)}
.ad__desc{margin-top:.35rem;max-width:44ch;font-size:.9375rem;line-height:1.5;color:var(--ink-body)}
.ad__acts{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.1rem;margin-top:.8rem;font-family:var(--font-display);font-size:1rem;font-weight:500;letter-spacing:-.01em;color:var(--ink-2)}
.ad__tap{color:var(--ink)}
.ad__conv{display:flex;align-items:center;gap:.75rem;margin-left:calc(-2.25rem + .5rem - .875rem);font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.ad__conv strong{display:block;font-size:.9375rem;font-weight:600;color:var(--ink)}
.ad__ok{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);color:#FFF}
.ad__ok .icon{width:.95rem;height:.95rem}
.ad__cap{margin-top:1.1rem;font-size:var(--fs-label);line-height:1.5;color:var(--c-muted)}
@media(min-width:961px) and (max-width:1199.98px){
  .gt__head,.gt__main{grid-column:1 / span 7}
  .gt__more{grid-column:8 / -1;padding-left:clamp(.5rem,1vw,1rem)}
}
@media(max-width:960.98px){
  .gt__grid{grid-template-columns:minmax(0,1fr)}
  .gt__head,.gt__main,.gt__more{grid-column:1;grid-row:auto}
  .gt__more{padding-top:clamp(1rem,.5rem + 2vw,2rem)}
  .gt__more-intro{max-width:30ch}
}
@media(min-width:760px) and (max-width:960.98px){
  /* Tableta: las tres notas en tres columnas bajo una sola frase */
  .gt__more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}
  .gt__more-intro{grid-column:1 / -1}
}

/* ==========================================================================
   5. CÓMO TRABAJAMOS · una recta que pasa por los tres primeros pasos y
   termina en un bucle: lanzar y medir no es un paso que se cierra, se
   repite cada semana. En escritorio la recta es horizontal; por debajo de
   961, vertical a la izquierda. Con movimiento se dibuja con la lectura
   (scrub, sin fijar la sección); sin JS se ve completa.
   ========================================================================== */
.gp__head{max-width:46rem;margin-bottom:clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.gp__title{font-size:var(--fs-h2)}
.gp__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:42ch}
.gp__steps{--r:2rem;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap)}
.gp__step{position:relative;padding-top:calc(var(--r) * 2 + 1.5rem)}
.gp__mark{position:absolute;left:0;top:0;width:100%;height:calc(var(--r) * 2);pointer-events:none}
.gp__mark i{display:block;font-style:normal}
.gp__tick{position:absolute;left:0;top:calc(var(--r) - .6rem);width:2px;height:1.2rem;background:var(--accent);transition:background-color .35s var(--ease-out)}
.gp__seg{position:absolute;left:0;top:calc(var(--r) - .5px);width:calc(100% + var(--col-gap));height:1px;background:var(--c-rule)}
.gp__fill{position:absolute;left:0;right:0;top:-.5px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.gp__loop{position:absolute;left:0;top:0;width:calc(var(--r) * 2);height:calc(var(--r) * 2);overflow:visible;transform:rotate(180deg)}
.gp__loop-bg{fill:none;stroke:var(--c-rule);stroke-width:1}
.gp__loop-fg{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:var(--c,0)}
.gp__steps.is-live .gp__step:not(.is-on) .gp__tick{background:var(--ink-2)}
.gp__name{font-size:var(--fs-h3);max-width:14ch}
.gp__step > p{margin-top:.6rem;max-width:34ch}
.gp__step > .gp__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)}
.gp__gets .label{display:block;margin-bottom:.15rem;font-weight:600;color:var(--accent-deep)}
@media(max-width:960.98px){
  .gp__steps{--r:1rem;grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
  .gp__step{padding-top:0;padding-left:calc(var(--r) * 2 + 1.1rem)}
  .gp__mark{width:calc(var(--r) * 2);height:100%}
  .gp__tick{left:calc(var(--r) - .55rem);top:.85rem;width:1.1rem;height:2px}
  .gp__seg{left:calc(var(--r) - .5px);top:.85rem;width:1px;height:calc(100% + 2.5rem)}
  .gp__fill{left:-.5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .gp__loop{top:.85rem;transform:rotate(-90deg)}
  .gp__step--loop{padding-top:.15rem}
  .gp__name{max-width:none}
}

/* ==========================================================================
   6. DE LA MÉTRICA A LA DECISIÓN · capítulo noche (el único a mitad de
   página). Cinco preguntas en escalera: cada una baja una columna, de la
   métrica (arriba a la izquierda) a la decisión (abajo a la derecha). La
   pregunta es lo grande; la flecha lleva a lo que se decide con ella.
   ========================================================================== */
.gm__head{max-width:56rem;margin-bottom:clamp(3rem,2rem + 4vw,6rem)}
.gm__title{font-size:var(--fs-display);line-height:.96;letter-spacing:-.045em;max-width:12ch}
.gm__intro{margin-top:1.25rem;font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.gm__list{list-style:none;display:grid;row-gap:clamp(2.75rem,2rem + 3vw,4.75rem)}
.gm__row{
  width:calc((100% * 8 - var(--col-gap) * 4) / 12);
  margin-left:calc((100% + var(--col-gap)) * var(--k) / 12);
}
.gm__name{font-family:var(--font-body);font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--rose)}
.gm__q{
  margin-top:.65rem;max-width:25ch;
  font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);font-weight:400;line-height:1.14;letter-spacing:-.025em;color:var(--c-ink);
}
.gm__d{display:flex;align-items:baseline;gap:1rem;margin-top:1.15rem;max-width:54ch}
.gm__arrow{position:relative;flex:none;top:-.32em;width:2.5rem;height:1px;background:var(--rose)}
.gm__arrow::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid var(--rose);border-right:1px solid var(--rose);transform:rotate(45deg)}
.gm__dt{color:var(--c-body)}
@media(min-width:600px) and (max-width:960.98px){
  .gm__row{width:84%;margin-left:calc(var(--k) * 4%)}
}
@media(max-width:599.98px){
  /* En el teléfono la escalera queda insinuada: medio paso por pregunta */
  .gm__row{width:auto;margin-left:calc(var(--k) * .6rem)}
  .gm__d{gap:.75rem}
  .gm__arrow{width:1.5rem}
}

/* ==========================================================================
   7. CÓMO SE COBRA · un cambio de ritmo después de la noche: quieto y a la
   izquierda. "Tu negocio" arriba y una bifurcación: el tallo baja hasta el
   primer pago y una rama cruza hasta el segundo. Cada pago cuelga de su
   línea, en su columna, y nunca se mezclan. Solo se trazan las líneas, una
   vez.
   ========================================================================== */
.gc{--pays-gap:clamp(2rem,1rem + 4vw,6rem)}
.gc__head{max-width:46rem}
.gc__title{font-size:var(--fs-h2)}
.gc__lead{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:40ch}
.gc__fork{margin-top:clamp(2.5rem,2rem + 2vw,3.75rem)}
.gc__origin{font-size:var(--fs-small);font-weight:600;color:var(--c-ink)}
.gc__lines{position:relative;height:clamp(3rem,2.25rem + 2.5vw,4.5rem);margin-top:.6rem}
.gc__stem{position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--accent);transform-origin:50% 0}
.gc__bar{position:absolute;left:0;top:50%;bottom:0;width:calc(50% + var(--pays-gap) / 2);border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);border-radius:0 14px 0 0}
.gc__pays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--pays-gap)}
.gc__pay{padding:.35rem 0 .5rem 1.4rem;border-left:1px solid var(--c-rule)}
.gc__to{font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--accent-deep)}
.gc__what{margin-top:.5rem;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);font-weight:500;letter-spacing:-.03em}
.gc__pay > p:not(.gc__to):not(.gc__foot){margin-top:.85rem;max-width:44ch}
.gc__ticks{list-style:none;margin-top:1rem;max-width:44ch}
.gc__ticks li{padding-block:.55rem .6rem;border-top:1px solid var(--c-rule);font-size:var(--fs-small);line-height:1.5;color:var(--c-ink)}
.gc__foot{margin-top:1rem;font-size:var(--fs-small);color:var(--c-muted)}
.gc__note{margin-top:clamp(2.25rem,1.75rem + 2vw,3.5rem);max-width:62ch;font-size:var(--fs-small);line-height:1.6;color:var(--c-muted)}
@media(max-width:760px){
  .gc__lines{display:none}
  .gc__pays{grid-template-columns:minmax(0,1fr);row-gap:2.25rem;margin-top:1.1rem}
}

/* ==========================================================================
   8. GOOGLE O META · un eje con dos extremos: capturar la demanda que ya
   existe (Google) y crearla (Meta). Cada plataforma cuelga de su extremo y
   "Combina ambas" cuelga del centro, como un puente. Con puntero fino (o el
   foco) la mitad del eje del lado que lees se pone en frambuesa.
   ========================================================================== */
.gv__head{max-width:46rem;margin-bottom:clamp(2.25rem,1.75rem + 2vw,3.5rem)}
.gv__title{font-size:var(--fs-h2)}
.gv__intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5}
.gv__board{--gv-gap:clamp(2.25rem,1.75rem + 2vw,3.5rem);--gv-end:clamp(1.0625rem,.95rem + .55vw,1.4375rem);position:relative;row-gap:var(--gv-gap);align-items:start}
.gv__axis{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.5rem)}
/* Las dos etiquetas miden lo mismo: así el centro de la línea es el centro
   del tablero, de donde baja el puente */
.gv__end{flex:0 0 9em;font-family:var(--font-display);font-size:var(--gv-end);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--c-ink);transition:color .3s var(--ease-out)}
.gv__end--m{text-align:right}
.gv__line{position:relative;flex:1;height:1px;background:var(--c-rule)}
.gv__line::before,.gv__line::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-top:1.5px solid var(--c-ink);transform:rotate(-45deg)}
.gv__line::before{left:1px;border-left:1.5px solid var(--c-ink)}
.gv__line::after{right:1px;border-right:1.5px solid var(--c-ink);transform:rotate(45deg)}
.gv__half{position:absolute;top:-.5px;height:2px;width:50%;background:var(--c-ink);transform:scaleX(var(--h,1));transition:background-color .3s var(--ease-out)}
.gv__half--g{right:50%;transform-origin:100% 50%}
.gv__half--m{left:50%;transform-origin:0 50%}
.gv__mid{position:absolute;left:50%;top:-.55rem;width:1.5px;height:1.1rem;margin-left:-.75px;background:var(--c-ink)}
.gv__side--g{grid-column:1 / span 5;grid-row:2}
.gv__side--m{grid-column:8 / span 5;grid-row:2}
.gv__both{grid-column:4 / span 6;grid-row:3;padding-top:1.25rem;border-top:1px solid var(--c-ink)}
/* El puente: del centro del eje (mitad del renglón de las etiquetas) hasta
   el filete de "Combina ambas". Es un elemento de la retícula que ocupa los
   dos primeros renglones y cruza el hueco hasta el tercero: su alto lo da
   el contenido, sin medidas a mano. */
.gv__board::after{
  content:"";grid-column:1 / -1;grid-row:1 / 3;justify-self:center;align-self:stretch;
  width:1.5px;margin-top:calc(var(--gv-end) * .6);margin-bottom:calc(var(--gv-gap) * -1);
  background:var(--c-ink);transform-origin:50% 0;transform:scaleY(var(--s,1));pointer-events:none;
}
.gv__h{font-size:var(--fs-h3)}
.gv__list{list-style:none;margin-top:.9rem}
.gv__list li{padding-block:.7rem .75rem;border-top:1px solid var(--c-rule);line-height:1.5;color:var(--c-ink)}
.gv__more{margin-top:.75rem}
@media(hover:hover) and (pointer:fine){
  .gv__board:has(.gv__side--g:hover) .gv__half--g,
  .gv__board:has(.gv__side--m:hover) .gv__half--m{background:var(--accent)}
  .gv__board:has(.gv__side--g:hover) .gv__end--g,
  .gv__board:has(.gv__side--m:hover) .gv__end--m{color:var(--accent-deep)}
}
.gv__board:has(.gv__side--m:focus-within) .gv__half--m{background:var(--accent)}
.gv__board:has(.gv__side--m:focus-within) .gv__end--m{color:var(--accent-deep)}
@media(min-width:961px) and (max-width:1199.98px){
  .gv__side--g{grid-column:1 / span 6}
  .gv__side--m{grid-column:7 / span 6}
  .gv__both{grid-column:3 / span 8}
}
/* Pantallas angostas: el mismo tablero en dos columnas; el eje y el
   puente se quedan */
@media(max-width:760px){
  .gv__board{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;--gv-end:.875rem}
  .gv__side--g{grid-column:1}
  .gv__side--m{grid-column:2}
  .gv__both{grid-column:1 / -1}
  .gv__h{font-size:1.125rem}
  .gv__list li{font-size:.9375rem;line-height:1.45}
}
/* Teléfonos angostos: las etiquetas arriba y el eje entero debajo */
@media(max-width:419.98px){
  .gv__axis{flex-wrap:wrap;row-gap:.6rem;justify-content:space-between}
  .gv__end{flex:0 1 auto}
  .gv__line{order:3;flex:1 0 100%}
  .gv__board::after{margin-top:calc(var(--gv-end) * 1.2 + .6rem)}
}

/* ==========================================================================
   9. PREGUNTAS · el acordeón del sistema (<details name>) a todo el ancho,
   con la respuesta colgada a partir de la columna 5 en escritorio. El "+"
   se vuelve "−" al abrir (el mismo par de signos de "Para quién"), y la
   pregunta abierta toma el tono de enlace.
   ========================================================================== */
.gfaq__head{max-width:46rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3.25rem)}
.gfaq__title{font-size:var(--fs-h2)}
.gfaq__intro{margin-top:1rem;font-size:var(--fs-small);color:var(--c-muted)}
.gfaq .faq__q{transition:color .3s var(--ease-out)}
.gfaq .faq__q::after{background:linear-gradient(currentColor,currentColor) center / 18px 1.5px no-repeat;transition:none}
.gfaq .faq__q::before{content:"";position:absolute;right:8.25px;top:50%;width:1.5px;height:18px;margin-top:-9px;background:var(--c-signal);transition:transform .35s var(--ease-out)}
.gfaq .faq__item[open] > .faq__q{color:var(--accent-deep)}
.gfaq .faq__item[open] > .faq__q::after{transform:none}
.gfaq .faq__item[open] > .faq__q::before{transform:scaleY(0)}
@media(min-width:961px){
  .gfaq .faq__a{margin-left:calc((100% + var(--col-gap)) * 4 / 12);max-width:none;padding-right:calc((100% + var(--col-gap)) / 12)}
  .gfaq .faq__a > *{max-width:var(--measure)}
}

/* ==========================================================================
   10. CIERRE · la búsqueda ahora es la del visitante: su pregunta a escala
   de cartel entre corchetes (capturada) y el rayo de la marca como cursor
   al final. Debajo, el texto, el CTA y el correo, en la misma columna. Sin
   JS se ve completo; con movimiento los corchetes se cierran y el rayo
   parpadea tres veces.
   ========================================================================== */
.gz{isolation:isolate}
/* Los corchetes van dentro del titular, como signos de la notación: abren
   antes de la primera palabra y cierran después del rayo, y siguen el
   renglón (se ajustan al texto sin medir nada) */
.gz__title{font-size:clamp(2.5rem,1.2rem + 5.2vw,6rem);max-width:12ch;line-height:.98;letter-spacing:-.05em}
.gz__br{display:inline-block;width:.24em;height:.84em;vertical-align:-.1em;border:.055em solid var(--accent);pointer-events:none}
.gz__br--l{margin-right:.14em;border-right:0}
.gz__br--r{margin-left:.1em;border-left:0}
.gz__caret{display:inline-block;width:.36em;height:.66em;margin-left:.12em;vertical-align:-.02em;fill:var(--accent)}
.gz__copy{margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem)}
.gz .closing__text{max-width:40ch;margin-top:0}
@media(prefers-reduced-motion:no-preference){
  .gz.is-in .gz__caret{animation:gz-blink 1s steps(1) 3}
}
@keyframes gz-blink{50%{opacity:0}}

/* ==========================================================================
   IMPRESIÓN · todo en su estado final aunque GSAP haya dejado estilos
   ========================================================================== */
@media print{
  .q__c,.q__c::after,.q__w::after,.q__tag,.q__br{animation:none!important}
  .q__c,.q__tag,.q__br{opacity:1!important;transform:none!important}
  .q__c::after{opacity:0!important}
  .word-mask > span{transform:none!important}
  .gi__front--ads .gi__side{position:static!important}
  .gf__mk i,.mk i,.kw__minus,.gp__fill,.gv__half,.ad__fill{transform:none!important}
  .gf__mk i + i,.mk i + i{transform:rotate(90deg)!important}
  .kw__b,.ad__b,.ad__res,.ad__conv,.gz__br{opacity:1!important;transform:none!important}
  .gp__loop-fg{stroke-dashoffset:0!important}
  .gm__arrow{clip-path:none!important}
  .gm__name{color:#7A2247!important}
  .gc__stem,.gc__bar,.gv__board::after{transform:none!important;clip-path:none!important}
}