/* ==========================================================================
   BLIXTOR · css/p/seo.css  (solo /seo · "Encontrable", 16 oct 2026)
   --------------------------------------------------------------------------
   Hilo: una búsqueda encuentra la página que mejor la responde, y esa página
   tiene que llevar a un contacto. El grafismo es la ruta de un resultado
   orgánico ("tu sitio › servicios › ortodoncia") con su signo ›, y el
   resultado mismo (sitio, título, descripción). Una familia por sección:
   1 héroe: H1 a escala de cartel, entradilla y CTA en 1-5 y la página de
   resultados esquemática en 7-12, con el control que cambia la búsqueda ·
   2 qué puede hacer el SEO: las tres búsquedas como citas tipográficas en
   tres columnas con filete · 3 cómo trabajamos: las cuatro preguntas de
   Google en pestañas verticales (1-4) y la lámina de cada frente (6-12) ·
   4 SEO o Google Ads: la página de resultados con sus dos zonas (1-6) y el
   control "SEO / Google Ads / Las dos" con su ficha (8-12) · 5 enfoque,
   capítulo noche: "Búsqueda › Página › Experiencia › Contacto" con el
   riel que recorre la › · 6 preguntas con el título fijo · 7 cierre con el
   formulario.
   Retícula de 12 columnas; cortes: >=1200 · 961-1199 · 600-960 · <600.
   Nada se oculta aquí a la espera de JS: sin JS los frentes y la
   comparación se leen completos, uno debajo de otro, y las maquetas se ven
   en su estado final. Las pestañas y el control segmentado solo existen
   cuando js/seo.js los arma (.is-tabs, .is-seg, .is-live). El control del
   héroe cuelga de html.js desde el primer pintado (sin salto de diseño).
   Los patrones de pestañas verticales, control segmentado y conector que
   se vuelve a medir se adaptaron de 21st.dev (Feature Tab Switcher,
   Segmented Control y Klyv Animated Beam). Ver DESIGN.md, "SEO".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
  --so-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --so-tint:#FDF2F5;   /* rubor muy claro: lo elegido, lo que es tuyo */
  --so-line:rgba(36,16,22,.22);
}

/* Sin scroll suave en el documento (WebKit vuelve arriba en cada refresh de
   ScrollTrigger con el foco dentro); los saltos al formulario los suaviza
   js/seo.js. */
html{scroll-behavior:auto}
main section[tabindex="-1"]:focus{outline:none}
.breadcrumbs li[aria-current="page"]{display:inline-flex}
.seo-hero .link,.seo-vs__more .link{display:inline-flex;align-items:center;min-height:44px}
.seo-pil__cta .link{line-height:1.6}

/* La cabecera de esta página lleva al formulario, no a WhatsApp. En el
   teléfono el botón se queda con su versión corta; el lector de pantalla
   oye siempre la larga. Por debajo de 350 px no cabe junto al menú y se
   retira (el héroe trae el mismo CTA a la vista). */
.site-header__short{display:none}
@media(max-width:560px){
  .site-header .site-header__cta{display:inline-flex!important;padding-inline:.85rem;gap:0}
  .site-header .site-header__cta .icon{display:none}
  .site-header__long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header__short{display:inline}
}
@media(max-width:400px){.site-header__in{gap:.75rem}}
@media(max-width:349.98px){.site-header .site-header__cta{display:none!important}}
@media(max-width:379.98px){
  main .btn--lg{font-size:.875rem;padding-inline:.75rem;gap:.4rem}
}

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

/* El signo de la ruta */
.seo-chev{display:inline-block;font-style:normal;font-weight:600;color:var(--accent);margin-inline:.38em}

/* ==========================================================================
   1. HÉROE · el H1 es una sola frase: la frase SEO en 400 y el remate a
   escala de cartel, con "encuentren" como palabra clave. --so-big sale del
   ancho y del alto de la ventana: el CTA entra en la primera pantalla de
   360x640 a 1920x1080. Debajo, la entradilla y el CTA (1-5) y la página de
   resultados (7-12). El remate sube unos píxeles al cargar sin pasar por
   oculto; la maqueta sube y sus resultados entran en cascada (solo CSS).
   ========================================================================== */
.seo-hero{position:relative;overflow-x:clip;padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) clamp(1rem,.5rem + 2vw,2.5rem)}
.seo-hero .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.5rem)}
.seo-hero__grid{
  --so-big:clamp(2.25rem,min(7.2vw,(100svh - 25rem) / 2.15),6rem);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);
  row-gap:clamp(1.75rem,1.2rem + 2vw,3rem);align-items:start;
}
.seo-hero__title{grid-column:1 / -1;max-width:none;font-size:var(--so-big);line-height:.95;letter-spacing:-.048em}
.seo-hero__deck{margin-bottom:.42em;font-size:max(1.125rem,calc(var(--so-big) * .3));line-height:1.2;letter-spacing:-.02em}
.seo-hero__line{display:block;text-wrap:balance}
.seo-hero__k{color:var(--accent)}
.seo-hero__copy{grid-column:1 / span 5}
.seo-hero__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:38ch}
.seo-hero__actions{margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}
.seo-hero__actions .btn{flex-shrink:0}
.seo-hero__serp{grid-column:7 / -1}

@media(max-width:960.98px){
  .seo-hero__grid{--so-big:clamp(2.25rem,1.2rem + 4.8vw,4.25rem)}
  .seo-hero__copy,.seo-hero__serp{grid-column:1 / -1}
  .seo-hero__lead{max-width:44ch}
  .seo-hero__serp{max-width:38rem}
}
/* Celular horizontal: todo más bajo y el CTA en la primera pantalla */
@media(orientation:landscape) and (max-height:500px){
  .seo-hero{padding-top:.25rem}
  .seo-hero .breadcrumbs{margin-bottom:.6rem}
  .seo-hero__grid{--so-big:2.25rem;row-gap:1rem}
}

/* ==========================================================================
   LA PÁGINA DE RESULTADOS · maqueta esquemática y rotulada: la barra con la
   búsqueda, resultados de otros (solo barras, no son nadie) y el resultado
   orgánico del negocio de ejemplo sobre rubor, con el filete de señal. Sin
   logo ni colores de Google. Medidas en em desde --p.
   ========================================================================== */
.seo-serp{margin:0;position:relative;min-width:0}
.seo-plate{
  --p:clamp(.875rem,.8rem + .3vw,1rem);
  position:relative;container-type:inline-size;font-size:var(--p);
  padding:1.1em 1.25em 1.3em;background:var(--surface);color:var(--ink);
  border-radius:var(--r-media);box-shadow:0 0 0 1px var(--rule-soft),var(--shadow-media);
}
.seo-bar{
  display:flex;align-items:center;gap:.65em;min-height:2.85em;padding:.5em 1em;
  border:1px solid var(--rule);border-radius:var(--r-media);background:var(--bg);
  font-size:1em;line-height:1.3;color:var(--ink);
}
.seo-bar .icon{width:1.1em;height:1.1em;color:var(--ink-2)}
.seo-bar__qs{display:grid;flex:1;min-width:0}
.seo-bar__q{grid-area:1 / 1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;visibility:hidden}
.seo-bar__q.is-on{opacity:1;visibility:visible}

.seo-list{list-style:none;display:grid;gap:1.2em;margin-top:1.15em}
.seo-row{position:relative}
.seo-row--ghost{display:grid;gap:.5em;padding-inline:1em}
.seo-g{display:block;height:.55em;border-radius:99px;background:rgba(36,16,22,.085)}
.seo-g--site{width:36%;height:.5em}
.seo-g--title{width:70%;height:.8em;background:rgba(122,34,71,.15)}
.seo-g--line{width:94%}
.seo-g--short{width:58%}

.seo-row--you{padding:.95em 1em 1.05em 1.15em;border-radius:6px;background:var(--so-tint)}
.seo-row__mark{position:absolute;left:0;top:.65em;bottom:.65em;width:2px;background:var(--accent);transform-origin:50% 0}
.seo-row__tag{position:absolute;right:1em;top:1em;font-size:.72em;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--accent-deep)}
.seo-res__stack{display:grid}
.seo-res__stack > .seo-res{grid-area:1 / 1;opacity:0;visibility:hidden}
.seo-res__stack > .seo-res.is-on{opacity:1;visibility:visible}
.seo-res__site{display:flex;align-items:center;gap:.6em;margin-bottom:.5em;padding-right:9em;min-width:0}
.seo-fav{
  display:grid;place-items:center;flex:none;width:1.8em;height:1.8em;border-radius:50%;
  background:var(--surface-2);color:var(--accent-deep);
  font-family:var(--font-display);font-size:.8em;font-weight:600;line-height:1;
}
.seo-res__who{display:grid;min-width:0;line-height:1.3}
.seo-res__name{font-size:.86em;font-weight:500;color:var(--ink)}
.seo-res__path{font-size:.78em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-res__path .seo-chev{margin-inline:.3em}
.seo-res__title{font-family:var(--font-display);font-size:1.2em;font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--accent-deep);text-wrap:balance}
.seo-res__desc{margin-top:.35em;font-size:.9em;line-height:1.5;color:var(--ink-body)}
.seo-cap{margin-top:.9rem;font-size:var(--fs-label);line-height:1.45;color:var(--c-muted);max-width:56ch}
@container (max-width:27rem){
  .seo-row__tag{position:static;display:block;margin-bottom:.55em}
  .seo-res__site{padding-right:0}
}

/* ==========================================================================
   CONTROL SEGMENTADO · radios nativos (flechas, Tab y lector de pantalla
   funcionan solos) vestidos de píldora; la marca de tinta se desliza a la
   opción elegida (--i, lo pone js/seo.js). Todas las opciones miden lo
   mismo: la marca solo se traslada. Adaptado del "Segmented Control" de
   21st.dev.
   ========================================================================== */
.seo-seg{
  --n:3;position:relative;isolation:isolate;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  padding:4px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);
}
.seo-seg__opt{position:relative;z-index:1;display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.seo-seg__in{position:absolute;top:50%;left:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.seo-seg__t{
  display:flex;align-items:center;justify-content:center;min-height:40px;padding:.4rem 1.05rem;border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:600;line-height:1.2;color:var(--ink-2);white-space:nowrap;text-align:center;
  transition:color .3s var(--ease-out),background-color .3s var(--ease-out);
}
.seo-seg__opt:hover .seo-seg__t{color:var(--ink)}
.seo-seg__in:checked + .seo-seg__t{color:#FFF;background:var(--ink)}
.seo-seg__in:focus-visible + .seo-seg__t{outline:2px solid var(--accent);outline-offset:3px}
.seo-seg__thumb{
  position:absolute;z-index:0;left:4px;top:4px;bottom:4px;width:calc((100% - 8px) / var(--n));
  border-radius:var(--r-pill);background:var(--ink);opacity:0;
  transform:translateX(calc(100% * var(--i,0)));transition:transform .45s var(--ease-out);
}
.seo-seg.is-live .seo-seg__thumb{opacity:1}
.seo-seg.is-live .seo-seg__in:checked + .seo-seg__t{background:transparent}

/* El control del héroe: existe solo con JS (html.js, desde el primer
   pintado, para que no mueva nada al armarse) */
.seo-try{display:none;margin:1.15rem 0 0;padding:0;border:0;min-width:0}
.js .seo-try{display:block}
.seo-try__lab{float:left;width:100%;margin-bottom:.55rem;padding:0;font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted)}
.seo-try .seo-seg{clear:both}
@media(max-width:420px){
  .seo-try .seo-seg{display:grid;width:100%}
  .seo-try .seo-seg__t{padding-inline:.5rem;font-size:.875rem}
}

/* ==========================================================================
   2. QUÉ PUEDE HACER EL SEO · las tres búsquedas del héroe como citas
   tipográficas, cada una con su razón. Tres columnas con filete vertical
   (subgrid: la cita, el filete y el titular quedan a la misma altura); en
   el teléfono, una debajo de otra. Con movimiento, los filetes se trazan.
   ========================================================================== */
.seo-why__title{max-width:16ch}
.seo-why__list{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(4,auto);column-gap:0;
}
.seo-why__item{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;padding-inline:clamp(1.25rem,2.5vw,2.5rem)}
.seo-why__item:first-child{padding-left:0}
.seo-why__item:last-child{padding-right:0}
.seo-why__item + .seo-why__item{border-left:1px solid var(--c-rule)}
.seo-why__who{font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted)}
.seo-why__q{
  margin-top:.5rem;font-family:var(--font-display);font-size:clamp(1.5rem,1.05rem + 1.45vw,2.375rem);font-weight:400;
  line-height:1.1;letter-spacing:-.035em;color:var(--c-ink);text-wrap:balance;
}
.seo-why__qm{color:var(--accent)}
.seo-why__rule{display:block;align-self:end;height:1px;margin:1.5rem 0 1.25rem;background:var(--c-ink);transform-origin:0 50%}
.seo-why__h{font-size:var(--fs-h3)}
.seo-why__p{margin-top:.6rem;max-width:36ch;color:var(--c-body)}
@media(max-width:960.98px){
  .seo-why__list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:2.75rem}
  .seo-why__item{grid-row:auto;grid-template-rows:none;padding-inline:0}
  .seo-why__item + .seo-why__item{border-left:0}
  .seo-why__rule{margin:1.1rem 0 1rem}
}

/* ==========================================================================
   3. CÓMO TRABAJAMOS · las cuatro preguntas que Google se hace sobre un
   sitio. Sin JS: cada frente es un bloque con filete (titular, entradilla y
   lista en 1-5; su lámina en 7-12). Con JS (.is-tabs): pestañas verticales
   en 1-4, con el filete de señal en la elegida, y un solo frente a la vez
   en 6-12; los paneles comparten celda, así el bloque no cambia de alto
   al cambiar de pestaña. En el teléfono las pestañas son cuatro píldoras.
   Adaptado del "Feature Tab Switcher" de 21st.dev.
   ========================================================================== */
.seo-pil__panels{display:grid}
.seo-pil__panel{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:1rem;align-items:start;
  padding-block:clamp(2rem,1.5rem + 2vw,3rem);border-top:1px solid var(--c-rule);
}
.seo-pil__panel > *{grid-column:1 / span 5}
.seo-pil__panel > .seo-pil__fig{grid-column:7 / -1;grid-row:1 / span 3}
.seo-pil__h{display:grid;gap:.4rem;font-size:var(--fs-h3)}
.seo-pil__h-ask{font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;line-height:1.3;color:var(--c-muted)}
.seo-pil__h-name{font-size:clamp(1.75rem,1.25rem + 1.6vw,2.75rem);font-weight:600;line-height:1;letter-spacing:-.04em}
.seo-pil__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:40ch}
.seo-pil__list{list-style:none;display:grid;gap:.7rem;margin-top:.5rem}
.seo-pil__list li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.65rem;align-items:start;font-size:var(--fs-small);line-height:1.5;color:var(--c-ink)}
.seo-pil__list .icon{width:1.1rem;height:1.1rem;margin-top:.17rem;color:var(--accent)}
.seo-pil__fig{
  margin:0;padding:clamp(1.1rem,.8rem + 1vw,1.6rem);background:var(--surface);
  border-radius:var(--r-media);box-shadow:0 0 0 1px var(--rule-soft),var(--shadow-media);
}
.seo-pil__cta{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}

/* Las pestañas (solo con JS) */
.seo-pil__tabs{display:grid;align-content:start;border-top:1px solid var(--c-rule)}
.seo-pil__tab{
  position:relative;display:grid;gap:.3rem;width:100%;padding:1.15rem .5rem 1.25rem 1.35rem;
  text-align:left;border-bottom:1px solid var(--c-rule);color:var(--c-muted);
  -webkit-tap-highlight-color:transparent;
}
.seo-pil__tab::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-out);
}
.seo-pil__tab[aria-selected="true"]::before{transform:none}
.seo-pil__ask{font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;line-height:1.3;color:var(--c-muted)}
.seo-pil__name{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--c-muted);transition:color .3s var(--ease-out),transform .45s var(--ease-out)}
.seo-pil__short{display:none}
.seo-pil__tab[aria-selected="true"] .seo-pil__name{color:var(--c-ink)}
.seo-pil__tab:focus-visible{outline-offset:-2px;border-radius:0}
@media(hover:hover) and (pointer:fine){
  .seo-pil__tab:hover .seo-pil__name{color:var(--c-ink);transform:translateX(5px)}
}

@media(min-width:961px){
  .seo-pil__box.is-tabs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .is-tabs .seo-pil__tabs{grid-column:1 / span 4;position:sticky;top:calc(var(--header-h) + 2rem)}
  .is-tabs .seo-pil__panels{grid-column:6 / -1}
  .is-tabs .seo-pil__panel{grid-template-columns:minmax(0,1fr);padding-block:0;border-top:0}
  .is-tabs .seo-pil__panel > *,.is-tabs .seo-pil__panel > .seo-pil__fig{grid-column:1 / -1;grid-row:auto}
  .is-tabs .seo-pil__h-ask{display:none}
  .is-tabs .seo-pil__fig{margin-block:.75rem .5rem}
  .is-tabs .seo-pil__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.75rem}
}
.is-tabs .seo-pil__panel{grid-area:1 / 1;transition:opacity .35s var(--ease-out),visibility .35s}
.is-tabs .seo-pil__panel:not(.is-on){visibility:hidden;opacity:0}

@media(max-width:960.98px){
  .seo-pil__panel > *,.seo-pil__panel > .seo-pil__fig{grid-column:1 / -1;grid-row:auto}
  .seo-pil__fig{margin-block:.5rem}
  .is-tabs .seo-pil__tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1.5rem;border-top:0;
  }
  .is-tabs .seo-pil__tab{
    display:flex;align-items:center;justify-content:center;min-height:48px;padding:.45rem .9rem;
    border:0;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--rule);text-align:center;
    transition:background-color .3s var(--ease-out),box-shadow .3s;
  }
  .is-tabs .seo-pil__tab::before,.is-tabs .seo-pil__ask{display:none}
  /* El nombre completo sigue siendo el nombre de la pestaña para el lector
     de pantalla; a la vista queda la versión corta (aria-hidden) */
  .is-tabs .seo-pil__name{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .is-tabs .seo-pil__short{display:block;font-size:.9375rem;font-weight:600;line-height:1.2;color:var(--ink-2)}
  .is-tabs .seo-pil__tab[aria-selected="true"]{background:var(--ink);box-shadow:none}
  .is-tabs .seo-pil__tab[aria-selected="true"] .seo-pil__short{color:#FFF}
  .is-tabs .seo-pil__tab:focus-visible{outline-offset:3px;border-radius:var(--r-pill)}
  .is-tabs .seo-pil__panel{padding-block:0;border-top:0}
}

/* ==========================================================================
   LAS LÁMINAS DE LOS FRENTES · esquemáticas, decorativas y descritas para
   lector de pantalla. Su estado final es el de reposo (sin JS, impresión,
   movimiento reducido); js/p/seo.js las dibuja al activarse cada frente.
   ========================================================================== */
.seo-v{font-size:clamp(.8125rem,.76rem + .22vw,.9375rem);color:var(--ink)}
.seo-v__head{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:1em}
.seo-v__lab{font-size:.8em;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.seo-v__key{display:inline-flex;align-items:center;gap:.45em;font-size:.8em;color:var(--ink-2)}
.seo-ok{display:inline-grid;place-items:center;flex:none;width:1.2em;height:1.2em;border-radius:50%;background:var(--accent);color:#FFF}
.seo-ok .icon{width:.78em;height:.78em}

/* Técnico: el árbol del sitio que Google recorre */
.seo-tree,.seo-tree ul{list-style:none}
.seo-tree ul{position:relative;margin-left:.9em;padding-left:1.35em}
.seo-tree li{position:relative;padding-top:.5em}
.seo-tree ul > li::before{content:"";position:absolute;left:-1.35em;top:1.42em;width:1.05em;border-top:1.5px solid var(--so-line)}
.seo-tree ul > li::after{content:"";position:absolute;left:-1.35em;top:0;bottom:0;border-left:1.5px solid var(--so-line)}
.seo-tree ul > li:last-child::after{bottom:auto;height:1.42em}
.seo-tree__t{
  display:inline-flex;align-items:center;gap:.65em;padding:.32em .45em .32em .75em;
  border:1px solid var(--rule);border-radius:6px;background:var(--bg);
  font-family:var(--so-mono);font-size:.84em;line-height:1.35;color:var(--ink);
}
.seo-tree > li > .seo-tree__t{font-weight:600}
.seo-v__foot{display:flex;flex-wrap:wrap;gap:.4em .5em;margin-top:1.2em;padding-top:.9em;border-top:1px dashed var(--rule)}
.seo-v__foot span{padding:.2em .6em;border-radius:99px;background:var(--surface-3);font-size:.75em;font-weight:600;color:var(--ink-2)}

/* On-Page: las etiquetas que Google lee y el resultado que salen de ellas.
   --hl (0 a 1) enciende cada pareja; en reposo, encendidas. */
.seo-code{
  display:grid;gap:.15em;padding:.85em .95em;border-radius:6px;background:var(--night-2);
  font-size:.8em;line-height:1.5;color:var(--cream);
}
.seo-code__l{--hl:1;position:relative;display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:.8em;align-items:baseline;padding:.4em .5em;border-radius:4px}
.seo-code__l::before{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(216,156,156,.14);opacity:var(--hl)}
.seo-code__l[data-pair="h"]{--hl:0}
.seo-code__lab{position:relative;font-family:var(--font-body);font-size:.85em;font-weight:600;color:var(--rose)}
.seo-code code{position:relative;font-family:var(--so-mono);font-size:1em;word-break:break-word;color:var(--cream)}
.seo-code b{font-weight:400;color:var(--malva)}
.seo-v__turn{display:flex;align-items:center;gap:.6em;margin:1em 0 .8em;font-size:.78em;font-weight:600;color:var(--ink-2)}
.seo-v__arrow{position:relative;display:block;width:1px;height:1.6em;background:var(--so-line)}
.seo-v__arrow::after{content:"";position:absolute;left:-3.5px;bottom:-1px;width:8px;height:8px;border-right:1.5px solid var(--so-line);border-bottom:1.5px solid var(--so-line);transform:rotate(45deg)}
.seo-snip{padding:.85em 1em .95em;border-radius:6px;border:1px solid var(--rule-soft)}
.seo-snip .seo-res__site{padding-right:0}
.seo-snip [data-pair]{--hl:1;background:linear-gradient(rgba(176,48,96,.12),rgba(176,48,96,.12)) 0 0 / calc(var(--hl) * 100%) 100% no-repeat;border-radius:2px}

/* Contenido: las búsquedas y las páginas que las responden. Los
   conectores los dibuja js/seo.js (patrón "Klyv Animated Beam" de 21st.dev:
   se vuelven a medir con cada cambio de tamaño). */
.seo-map{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4.25rem);align-items:center}
.seo-map__col{position:relative;z-index:1;list-style:none;display:grid;gap:.65em}
.seo-map__q{padding:.5em .75em;border:1px solid var(--rule);border-radius:6px;background:var(--bg);font-size:.86em;line-height:1.35;color:var(--ink)}
.seo-map__q--gap{border-style:dashed;border-color:var(--accent)}
.seo-map__col--p{gap:1.1em}
.seo-map__p{padding:.55em .7em;border:1px solid var(--rule);border-radius:6px;background:var(--surface);font-family:var(--so-mono);font-size:.78em;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.seo-map__p .seo-chev{margin-inline:.2em;font-family:var(--font-body)}
.seo-map__p--new{border:1.5px dashed var(--accent);background:var(--so-tint);color:var(--accent-deep)}
.seo-map__new{display:block;margin-top:.3em;font-family:var(--font-body);font-size:.95em;font-weight:600;color:var(--accent)}
.seo-map__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.seo-map__lines path{fill:none;stroke:var(--so-line);stroke-width:1.5}
.seo-map__lines path.is-gap{stroke:var(--accent);stroke-dasharray:4 4}

/* Local: la zona de servicio, el pin y los mismos datos en todas partes */
.seo-local{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:1.4em;align-items:center}
.seo-local__map{
  position:relative;aspect-ratio:1 / 1;overflow:hidden;border-radius:8px;background-color:#F6EDE8;
  background-image:linear-gradient(rgba(36,16,22,.07) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(36,16,22,.07) 1.5px,transparent 1.5px);
  background-size:2.15em 2.15em;background-position:-1px -1px;
}
.seo-local__ave{position:absolute;left:-25%;right:-25%;top:61%;height:.95em;background:var(--surface);box-shadow:0 0 0 1px rgba(36,16,22,.07);transform:rotate(-24deg)}
/* La zona y el pin se centran con márgenes, no con transform: js/p/seo.js
   los escala y los deja caer sin pelear con un transform del CSS. Los
   márgenes en % se miden sobre el ancho del mapa, así que -35% es media
   zona en los dos ejes. */
.seo-local__zone{position:absolute;left:50%;top:48%;width:70%;aspect-ratio:1 / 1;margin:-35% 0 0 -35%;border:1.5px dashed var(--accent);border-radius:50%;background:rgba(176,48,96,.07)}
.seo-local__pin{position:absolute;left:50%;top:48%;width:2em;margin:-2.5em 0 0 -1em}
.seo-pin{display:block;width:100%;height:auto;overflow:visible}
.seo-pin path{fill:var(--accent)}
.seo-pin circle{fill:var(--surface)}
.seo-local__chip{position:absolute;left:50%;top:calc(48% + .5em);transform:translateX(-50%);white-space:nowrap;padding:.28em .6em;border-radius:5px;background:var(--ink);font-size:.74em;font-weight:600;line-height:1.3;color:#FFF}
.seo-local__lab{position:absolute;left:.75em;bottom:.65em;font-size:.72em;font-weight:600;color:var(--accent-deep)}
.seo-nap{font-size:.8em}
.seo-nap__row{display:grid;grid-template-columns:minmax(4.8em,1.1fr) repeat(3,minmax(0,1fr));gap:.4em;align-items:center;padding:.6em 0;border-bottom:1px solid var(--rule-soft)}
.seo-nap__row > span:first-child{font-weight:600;color:var(--ink)}
.seo-nap__row .seo-ok{justify-self:center}
.seo-nap__row--h{padding-top:0}
.seo-nap__row--h span{font-size:.86em;font-weight:500;line-height:1.2;color:var(--ink-2);text-align:center}
.seo-nap__sum{margin-top:.8em;font-weight:600;color:var(--accent-deep)}
@container (max-width:30rem){
  .seo-local{grid-template-columns:minmax(0,1fr)}
  .seo-local__map{aspect-ratio:16 / 9}
  .seo-local__zone{width:46%;margin:-23% 0 0 -23%}
}
.seo-pil__fig{container-type:inline-size}
@container (max-width:24rem){
  .seo-map{column-gap:1.5rem}
  .seo-code__l{grid-template-columns:minmax(0,1fr);gap:.15em}
}

/* ==========================================================================
   4. SEO O GOOGLE ADS · la misma página de resultados con sus dos zonas
   (anuncios arriba, orgánicos debajo). El control segmentado enciende la
   zona elegida (rubor y filete de señal) y apaga la otra; con "Las dos" el
   negocio aparece en ambas. Sin JS, la maqueta muestra las dos zonas y la
   ficha de cada opción va una debajo de otra.
   ========================================================================== */
.seo-vs__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2.25rem;align-items:start}
.seo-vs__fig{grid-column:1 / span 6}
.seo-vs__side{grid-column:8 / -1}
.seo-plate--vs .seo-list{gap:.95em;margin-top:0}
.seo-zone{position:relative;margin-top:1em;padding:.8em 1em .95em 1.15em;border-radius:6px;transition:background-color .4s var(--ease-out),opacity .4s var(--ease-out)}
.seo-zone::before{content:"";position:absolute;left:0;top:.6em;bottom:.6em;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease-out)}
.seo-zone__lab{display:flex;justify-content:space-between;gap:1em;margin-bottom:.75em;font-size:.74em;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--ink-2)}
.seo-zone__who{color:var(--accent-deep);opacity:0;transition:opacity .3s var(--ease-out)}
.seo-row--ad.seo-row--ghost,.seo-zone--org .seo-row--ghost{padding-inline:0}
.seo-row--slot{display:grid}
.seo-row--slot > .seo-slot,.seo-row--slot > .seo-res{grid-area:1 / 1;transition:opacity .35s var(--ease-out),visibility .35s}
.seo-slot{display:grid;gap:.5em;align-content:start}
.seo-row--slot > .seo-res{opacity:0;visibility:hidden}
.seo-res__ad{flex:none;padding:.15em .45em;border-radius:4px;background:var(--ink);font-size:.7em;font-weight:600;line-height:1.3;color:#FFF}
.seo-plate--vs .seo-res__site{padding-right:0;margin-bottom:.35em}
.seo-plate--vs .seo-res__title{font-size:1.08em}
/* Estados: data-show="seo|ads|ambas" (js/seo.js; sin JS, "ambas") */
[data-show="seo"] .seo-zone--org,[data-show="ads"] .seo-zone--ads,[data-show="ambas"] .seo-zone{background:var(--so-tint)}
[data-show="seo"] .seo-zone--org::before,[data-show="ads"] .seo-zone--ads::before,[data-show="ambas"] .seo-zone::before{transform:none}
[data-show="seo"] .seo-zone--org .seo-zone__who,[data-show="ads"] .seo-zone--ads .seo-zone__who,[data-show="ambas"] .seo-zone__who{opacity:1}
[data-show="seo"] .seo-zone--ads,[data-show="ads"] .seo-zone--org{opacity:.45}
[data-show="seo"] .seo-zone--org .seo-row--slot > .seo-res,[data-show="ads"] .seo-zone--ads .seo-row--slot > .seo-res,[data-show="ambas"] .seo-row--slot > .seo-res{opacity:1;visibility:visible}
[data-show="seo"] .seo-zone--org .seo-slot,[data-show="ads"] .seo-zone--ads .seo-slot,[data-show="ambas"] .seo-slot{opacity:0;visibility:hidden}

.seo-vs__pick{margin:0 0 1.75rem;padding:0;border:0;min-width:0}
.seo-vs__pick .seo-seg{width:100%}
.seo-vs__panels{display:grid}
.seo-vs__panel + .seo-vs__panel{margin-top:2.25rem;padding-top:2.25rem;border-top:1px solid var(--c-rule)}
.is-seg .seo-vs__panel{grid-area:1 / 1;margin:0;padding:0;border:0;transition:opacity .35s var(--ease-out),visibility .35s}
.is-seg .seo-vs__panel:not(.is-on){visibility:hidden;opacity:0}
.seo-vs__h{font-size:clamp(2rem,1.45rem + 1.9vw,3.25rem);font-weight:600;line-height:1;letter-spacing:-.045em}
.seo-vs__dl{margin-top:1.4rem;border-top:1px solid var(--c-rule)}
.seo-vs__dl > div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.35rem 1.5rem;padding:1rem 0 1.05rem;border-bottom:1px solid var(--c-rule)}
.seo-vs__dl dt{padding-top:.2rem;font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--c-muted)}
.seo-vs__dl dd{line-height:1.5;color:var(--c-ink)}
.seo-vs__p{margin-top:1.25rem;font-size:var(--fs-lead);line-height:1.5;color:var(--c-ink);max-width:40ch}
.seo-vs__p + .seo-vs__p{font-size:var(--fs-body);color:var(--c-body)}
.seo-vs__more{margin-top:1.25rem}
@media(max-width:960.98px){
  .seo-vs__grid{grid-template-columns:minmax(0,1fr);row-gap:1.5rem}
  .seo-vs__side{display:contents}
  .seo-vs__pick{grid-row:1;margin:0}
  .seo-vs__fig{grid-column:1;grid-row:2;max-width:38rem}
  .seo-vs__panels{grid-row:3;margin-top:1rem}
}
@media(max-width:480px){
  .seo-vs__dl > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .seo-vs__pick .seo-seg__t{padding-inline:.5rem;font-size:.875rem}
}

/* ==========================================================================
   5. ENFOQUE (capítulo noche) · la ruta de la búsqueda al contacto a escala
   de cartel, con la › entre estaciones. Debajo de las palabras corre el
   riel: con movimiento se llena con la lectura (--p) y su punta, otra ›,
   lo recorre; cada estación se enciende cuando la punta llega a ella. Sin
   JS el riel está lleno y todas encendidas. En el teléfono, columna con el
   riel a la izquierda.
   ========================================================================== */
.seo-path__head{max-width:54rem;margin-bottom:clamp(3rem,2rem + 4vw,5.5rem)}
.seo-path__title{font-size:var(--fs-display);line-height:.96;letter-spacing:-.045em;max-width:14ch}
.seo-path__lead{margin-top:1.4rem;font-size:var(--fs-lead);line-height:1.5;max-width:48ch;color:var(--c-body)}
.seo-path__route{--p:1;--rl:0px;--w:clamp(1.85rem,.55rem + 3.15vw,4rem);position:relative}
.seo-path__list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap)}
.seo-path__top{display:flex;align-items:baseline;justify-content:space-between;gap:.2em;font-size:var(--w);line-height:1}
.seo-path__w{font-size:1em;font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--c-ink);transition:color .5s var(--ease-out)}
.seo-path__chev{font-family:var(--font-display);font-weight:400;letter-spacing:0;color:var(--c-signal);transform:translateX(calc(var(--col-gap) * .5));transition:color .5s var(--ease-out)}
.seo-path__tag{margin-top:calc(1.6rem + 2px + 1.4rem);font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--c-signal);transition:color .5s var(--ease-out)}
.seo-path__note{margin-top:.5rem;max-width:26ch;color:var(--c-body)}
.seo-path__rail{position:absolute;left:0;right:0;top:calc(var(--w) + 1.6rem);height:2px;background:var(--c-rule)}
.seo-path__fill{position:absolute;inset:0;background:var(--rose);transform-origin:0 50%;transform:scaleX(var(--p))}
.seo-path__tip{
  position:absolute;left:0;top:50%;font-family:var(--font-display);font-style:normal;font-size:1.75rem;font-weight:500;line-height:1;color:var(--rose);
  transform:translate(calc(var(--p) * var(--rl) - 50%),-56%);
}
/* Con movimiento (js/p/seo.js): lo que la punta no ha alcanzado espera en tono bajo */
/* Las palabras (texto grande, 3.6:1 en reposo) esperan en tono bajo; el
   rótulo pequeño pasa de malva a rosa, nunca por debajo de 4.5:1 */
.seo-path__route.is-live .seo-path__st:not(.is-on) .seo-path__w,
.seo-path__route.is-live .seo-path__st:not(.is-on) .seo-path__chev{color:rgba(198,167,174,.6)}
.seo-path__route.is-live .seo-path__st:not(.is-on) .seo-path__tag{color:var(--c-muted)}
.seo-path__route.is-live .seo-path__tip{opacity:calc(var(--p) * 40)}
.seo-path__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;margin-top:clamp(3rem,2rem + 4vw,5rem);padding-top:1.75rem;border-top:1px solid var(--c-rule)}
.seo-path__more{max-width:56ch;font-size:var(--fs-small);line-height:1.6;color:var(--c-body)}
@media(max-width:960.98px){
  .seo-path__route{--w:clamp(2rem,1.2rem + 4vw,3rem);padding-left:2.25rem}
  .seo-path__list{grid-template-columns:minmax(0,1fr);row-gap:2.25rem}
  .seo-path__chev{display:none}
  .seo-path__tag{margin-top:.85rem}
  .seo-path__note{max-width:40ch}
  .seo-path__rail{left:.5rem;right:auto;top:.4rem;bottom:.4rem;width:2px;height:auto}
  .seo-path__fill{transform-origin:50% 0;transform:scaleY(var(--p))}
  .seo-path__tip{left:50%;top:0;font-size:1.5rem;transform:translate(-50%,calc(var(--p) * var(--rl) - 50%)) rotate(90deg)}
  .seo-path__foot{align-items:flex-start;flex-direction:column}
}

/* ==========================================================================
   6. PREGUNTAS · el título fijo en 1-4 y el acordeón del sistema en 5-12;
   la abierta lleva el filete de señal y su respuesta entra al abrir.
   ========================================================================== */
.seo-faq__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2rem;align-items:start}
.seo-faq__head{grid-column:1 / span 4;position:sticky;top:calc(var(--header-h) + 2rem)}
.seo-faq__title{max-width:12ch}
.seo-faq .faq{grid-column:5 / -1}
.seo-faq .faq__item{position:relative}
.seo-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)}
.seo-faq .faq__item[open]::before{transform:none}
@media(max-width:960.98px){
  .seo-faq__head{position:static;grid-column:1 / -1}
  .seo-faq .faq{grid-column:1 / -1}
}

/* ==========================================================================
   7. CIERRE CON EL FORMULARIO · el titular de la página, lo que pasa al
   enviar y tres garantías reales (1-5, fijo mientras se llena); la tarjeta
   del formulario en 7-12, con SEO ya elegido. Continúa en el pie.
   ========================================================================== */
/* .closing recorta con overflow:hidden y eso lo vuelve contenedor de
   scroll: el texto fijo se mediría contra él y bajaría su top. Aquí no hay
   nada que recortar. */
.seo-close{overflow:visible;padding-block:var(--space-chapter) clamp(4rem,3rem + 4vw,7rem)}
.seo-close__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2.5rem;align-items:start}
.seo-close__head{grid-column:1 / span 5;position:sticky;top:calc(var(--header-h) + 2.5rem)}
.seo-close__title{max-width:13ch;font-size:clamp(2.25rem,1.35rem + 3.1vw,4.25rem)}
.seo-close__ticks{list-style:none;display:grid;gap:.9rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--c-rule)}
.seo-close__ticks li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.7rem;align-items:start;font-size:var(--fs-small);line-height:1.5;color:var(--c-ink)}
.seo-close__ticks .icon{width:1.15rem;height:1.15rem;margin-top:.13rem;color:var(--rose)}
.seo-close__card{grid-column:7 / -1}
.seo-card[data-theme]{
  position:relative;padding:clamp(1.25rem,.85rem + 1.7vw,2.25rem);
  background:var(--surface);border-radius:var(--r-media);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.7);
  scroll-margin-top:calc(var(--header-h) + 1rem);
}
.seo-card:focus{outline:none}
.seo-card:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.seo-card .btn--primary::before{background:var(--accent-deep)}
@media(max-width:960.98px){
  .seo-close__head{position:static;grid-column:1 / -1}
  .seo-close__card{grid-column:1 / -1;max-width:40rem}
}
@media(max-width:480px){
  .seo-card[data-theme]{padding:1.25rem 1.1rem 1.4rem}
}

/* ==========================================================================
   MOVIMIENTO (solo CSS, bajo no-preference). El H1 nunca pasa por oculto:
   el remate sube unos píxeles. La maqueta del héroe sube, sus resultados
   entran en cascada y el filete de tu resultado se traza. Al cambiar de
   búsqueda sin GSAP, el resultado nuevo entra con .is-swap (js/seo.js).
   Lo demás lo mueve js/p/seo.js.
   ========================================================================== */
@media(prefers-reduced-motion:no-preference){
  .seo-hero__line{animation:seo-up .9s var(--ease-out) backwards}
  .seo-hero__serp .seo-plate{animation:seo-rise .9s .2s var(--ease-out) backwards}
  .seo-hero__serp .seo-row{animation:seo-in .55s var(--ease-out) backwards;animation-delay:calc(.55s + var(--k,0) * .12s)}
  .seo-hero__serp .seo-row__mark{animation:seo-draw .6s 1.05s var(--ease-out) backwards}
  .js .seo-try{animation:seo-in .5s 1.2s var(--ease-out) backwards}
  .seo-res.is-swap > *{animation:seo-in .45s var(--ease-out) backwards}
  .seo-res.is-swap > :nth-child(2){animation-delay:.06s}
  .seo-res.is-swap > :nth-child(3){animation-delay:.12s}
}
@keyframes seo-up{from{transform:translateY(.22em)}}
@keyframes seo-rise{from{opacity:0;transform:translateY(26px)}}
@keyframes seo-in{from{opacity:0;transform:translateY(8px)}}
@keyframes seo-draw{from{transform:scaleY(0)}}

@media print{
  .seo-try,.seo-vs__pick,.seo-pil__tabs{display:none!important}
  .is-tabs .seo-pil__panel,.is-seg .seo-vs__panel{visibility:visible!important;opacity:1!important;grid-area:auto!important}
}