/* SellerProject shared landing system — homepage-derived */
:root{
  --sp-bg:var(--bg,#f0efec);
  --sp-soft:var(--bg-soft,#f7f6f3);
  --sp-ink:var(--ink,#171716);
  --sp-muted:var(--muted,#6c6861);
  --sp-line:var(--line,rgba(23,23,22,.1));
  --sp-accent:var(--accent,#fa9a63);
  --sp-dark:var(--dark,#090909);
  --sp-cream:var(--cream,#f4efe6);
  --sp-radius:var(--r-lg,1.75rem);
  --sp-radius-md:var(--r-md,1.25rem);
  --sp-shadow:0 32px 90px rgba(20,18,16,.14);
  /* Caja del CTA de la cabecera. Era #fc0 —amarillo— y el cliente lo rechazó el
   * 27/08/2026: no encaja con su paleta. Pidieron probarlo en naranja o en verde oscuro.
   * Queda en el naranja de marca, que ya existe; el verde oscuro no está en la paleta y
   * habría que inventar el hex. Cambiar aquí, en un sitio, para probar el otro.
   * Ver `qa/muestra-cta.html` para verlos uno al lado del otro. */
  --sp-cta-box:var(--accent,#fa9a63);
  --sp-cta-dot:rgba(9,9,9,.28);
  --sp-cta-dot-on:#090909;
}

html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{background:
  radial-gradient(circle at 8% 8%,rgba(250,154,99,.055),transparent 26rem),
  var(--sp-bg)}
main{position:relative}
main::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(23,23,22,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,22,.025) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 86%,transparent)
}

/* Contenedor. 72rem dejaba el hero encajonado en pantallas grandes: a 1680px sobraban
   ~265px muertos a cada lado. Header, hero y secciones comparten el mismo tope para que
   logo, tarjeta del hero y contenido sigan alineados al mismo eje vertical. */
.wrap,.sp-extension{width:min(84rem,calc(100% - 2.5rem))}

/* Ritmo vertical. Las páginas traían clamp(...,9vw,8rem): el 9vw supera el tope en
   cualquier pantalla ancha, así que se aplicaba el máximo y entre dos secciones había
   128+128 = 256px, casi un cuarto de pantalla en vacío. Se unifica más ceñido. */
.sec{padding-block:clamp(3.25rem,6vw,5rem)}
.sp-extension{padding-block:clamp(3.5rem,6.5vw,5.5rem)}
.sp-extension + .sp-extension{padding-top:0}

/* El CTA final dejaba un vacío enorme antes del footer: 130px de padding de la sección
   + 96px de margen del propio footer. Se ciñen los dos. */
.bigfoot{margin-top:clamp(2rem,4vw,3rem)}
.sp-extension:last-child{padding-bottom:clamp(2.5rem,4vw,3.5rem)}

/* El logo del pie. build-landings sustituye el marcador .logo-ph--dark por un <img
   class="bf-logo"> de 1871x460, pero la regla que lo encogía solo existía en el <style>
   de una de las diez landings: en las otras nueve el pie salía con el logo a 665x460,
   cinco veces su tamaño. Va aquí, en la hoja compartida, que carga la última. */
.bigfoot .bf-logo{width:8.5rem;height:auto}

/* ── Header: el mismo que la home ──────────────────────────────────────────
   En la home los enlaces flotan sobre el hero oscuro, sin barra visible: fila de 4rem,
   enlaces text-sm en blanco al 80 % y CTA negro de borde claro. Aquí se reproduce esa
   misma composición sobre una banda oscura a sangre, que es lo que en la home aporta el
   propio hero. Sin píldora ni sombra: eso hacía que se leyera como otro componente. */
.nav{
  position:absolute;top:1rem;inset-inline:0;bottom:auto;z-index:50;
  width:100%;max-width:calc(100% - 4rem);margin-inline:auto;
  background:none;backdrop-filter:none;border-bottom:0;box-shadow:none
}
/* La de la home es `absolute`: se va con el scroll en vez de quedarse fija, así que el
   ocultado al bajar que traían las landings sobra. */
.nav.hide{transform:none}
.nav-in{
  width:min(84rem,100%);margin-inline:auto;
  min-height:4rem;padding-inline:1rem;padding-block:0;gap:1.5rem
}
/* Páginas sin hero oscuro detrás: la barra pone su propia superficie para que los
   enlaces blancos sigan siendo legibles. */
[data-sp-light-top] .nav-in{
  border-radius:1rem;background:#090909;padding-inline:1.25rem
}
/* Mismo tamaño que .sellerproject-wordmark en la home, y en blanco sobre la banda. */
.nav img{width:8.25rem;filter:brightness(0) invert(1)}
/* space-x-8 de la home: 2rem entre enlaces, con px-3 py-2 en cada uno. */
.nav-links{align-items:center;gap:2rem;font-size:.875rem;font-weight:500}
.nav-links>a,.nav-dropdown-trigger{
  padding:.5rem .75rem;border-radius:.55rem;opacity:1;color:rgba(255,255,255,.8)
}
.nav-links>a:hover,.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-expanded="true"],.nav-dropdown-trigger.is-active{color:#fff}
/* Selector de idioma. Sin estos estilos heredaba los de `.nav-links > a` y se leía como una
   sección más del menú —«Qui som · Contacte · ES»—, no como un cambio de idioma. Se separa con
   la tipografía mono del sistema y un borde, que es como el site marca los controles. */
.nav-links>a.nav-lang{
  margin-left:-1rem;padding:.34rem .6rem;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;color:rgba(255,255,255,.72);line-height:1.6
}
.nav-links>a.nav-lang:hover{color:var(--accent-ink,#13120f);background:var(--accent,#fa9a63);border-color:var(--accent,#fa9a63)}
.nav-lang-name{display:none}
/* En el menú móvil manda el nombre entero, y el pill se mantiene para que no se confunda con
   los enlaces de página, que ahí van a 35px. */
.mmenu a.nav-lang{
  display:inline-flex;align-items:center;padding:.3rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.9rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:.6rem
}
.mmenu a.nav-lang .nav-lang-code{display:none}
.mmenu a.nav-lang .nav-lang-name{display:inline}

/* Sin excepción para `data-sp-light-top`: en esas páginas la barra también es oscura y los
   enlaces hermanos siguen siendo blancos. Al añadir una, el selector salía negro sobre negro. */

/* Estado activo con fondo, no solo color: no depende de distinguir tonos. */
.nav-links>a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
/* CTA calcado del de la home: rounded-lg, fondo negro, borde blanco al 20 %, pl-11 pr-4
   py-2, y la caja ámbar de 2rem pegada al borde izquierdo. */
.nav .nav-cta{
  position:relative;display:inline-flex;align-items:center;overflow:hidden;
  min-height:2.75rem;padding:.5rem 1rem .5rem 2.75rem;
  border-radius:.5rem;background:#000;border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:.875rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap
}
.nav-cta-box{
  position:absolute;left:.25rem;top:0;bottom:0;margin-block:auto;
  display:grid;gap:1px;place-content:center;
  width:2rem;height:2rem;border-radius:5px;background:var(--sp-cta-box);
  transition:left .4s ease,transform .4s ease
}
.nav-cta-box i{display:flex;gap:1px}
.nav-cta-box span{width:3px;height:3px;border-radius:50%;background:var(--sp-cta-dot)}
.nav-cta-box span.on{background:var(--sp-cta-dot-on)}
.nav-cta-label{transition:transform .4s ease}
.nav-cta-label b{font-weight:inherit}
/* A 390px "Cuéntanos tu caso" no cabe en la barra junto al logo y el botón de menú: el
   overflow:hidden que necesita la animación lo dejaba en "Cuéntanos t". Bajo 768px se usa una
   etiqueta corta. Se alternan con display:none, así que solo una llega al lector de pantalla. */
.cta-corto{display:none}
/* La etiqueta corta llega hasta 1023px, no hasta 767: entre 768 y ~1000 la barra muestra ya
   todos los enlaces y "Cuéntanos tu caso" no cabe junto a ellos. Ahí se cortaba en cada página. */
/* Los enlaces del menú aparecían a 767px, pero entre los tres bloques suman 785px más huecos:
   la barra desbordaba la pantalla a 767 y 768. El corte pasa a 900, que es donde caben de
   verdad; por debajo manda el botón de menú, que ya existía. */
@media (max-width:899px){
  .nav-links{display:none}
  .nav .menu-btn{display:block}
}
@media (min-width:900px){
  .nav .menu-btn{display:none}
}

@media (max-width:1023px){
  .cta-largo{display:none}
  .cta-corto{display:inline}
  /* flex:none, o la fila lo comprime por debajo de su contenido y vuelve a salir "Contact".
     Lo que cede es el logo, que sí puede encoger. */
  .nav .nav-cta{padding-left:2.5rem;padding-right:.85rem;flex:none}
  .nav-in{gap:.75rem}
  .nav-in>a:first-child{flex:none}
}
@media (max-width:767px){
  .nav img{width:6.75rem}
}

/* Por debajo de 400px no caben las tres piezas: 108px de logo + 116 de botón + 44 de menú se
   pasan del ancho útil y el logo se quedaba en nada. El botón se queda en su caja ámbar, que
   ya mide 44x44. La etiqueta no se oculta con display:none sino fuera de pantalla, para que
   el enlace conserve su nombre accesible. */
@media (max-width:399px){
  .nav .nav-cta{padding:0;width:2.75rem;justify-content:center}
  .nav .nav-cta .nav-cta-box{position:static;margin:0}
  .nav-cta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.nav .nav-cta:hover .nav-cta-box{left:calc(100% - 2.3rem);transform:rotate(180deg)}
.nav .nav-cta:hover .nav-cta-label{transform:translateX(-2rem)}
@media (prefers-reduced-motion:reduce){
  .nav-cta-box,.nav-cta-label{transition:none}
  .nav .nav-cta:hover .nav-cta-box{left:.25rem;transform:none}
  .nav .nav-cta:hover .nav-cta-label{transform:none}
}
.menu-btn{border-color:rgba(255,255,255,.3)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{background:#fff}
/* Como en la home: el hero es una tarjeta negra casi a sangre (.5rem de margen) que
   arranca en el borde superior, y el header transparente flota encima. */
.hero-shell{width:calc(100% - 1rem);max-width:none;padding:.5rem}
.hero{border-radius:1.5rem}
/* El header ocupa hasta los 5rem (1rem de separación + 4rem de fila): el contenido del
   hero tiene que empezar por debajo también en pantallas estrechas. */
.hero .hero-grid{padding-top:clamp(2.5rem,4vw,3.5rem)}
/* Páginas sin hero: su primer bloque despeja la barra flotante. */
[data-sp-light-top] .ahero,[data-sp-light-top] .page{padding-top:7rem}
.cta,.sp-button{min-height:2.75rem}

.nav-dropdown{position:relative;display:flex;align-items:center}
/* Solo estructura: el color y el padding del trigger los fija el bloque del header,
   más arriba. Declararlos aquí los pisaría (misma especificidad, regla posterior) y
   dejaría el botón en gris oscuro sobre la barra oscura. */
.nav-dropdown-trigger{
  display:inline-flex;align-items:center;gap:.35rem;
  font:inherit;background:none;border:0;margin:0;cursor:pointer;
  transition:opacity .2s,color .2s
}
.nav-dropdown-trigger:focus-visible{outline:3px solid rgba(250,154,99,.5);outline-offset:6px;border-radius:.4rem}
.nav-caret{flex:none;transition:transform .2s ease}
.nav-dropdown-trigger[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);
  min-width:15rem;margin:0;padding:.4rem;list-style:none;z-index:80;
  background:#14130f;border:1px solid rgba(250,154,99,.22);border-radius:1rem;
  box-shadow:0 24px 60px rgba(9,9,9,.45)
}
.nav-dropdown-menu[hidden]{display:none}
.nav-dropdown-menu li{margin:0}
.nav-dropdown-menu a{
  display:block;padding:.65rem .8rem;border-radius:.65rem;
  font-size:.88rem;font-weight:500;color:#e7e3da;opacity:1;white-space:nowrap
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible,
.nav-dropdown-menu a[aria-current]{background:rgba(250,154,99,.16);color:var(--sp-accent);outline:0}

.hero{
  box-shadow:0 36px 100px rgba(9,9,9,.2);
  border:1px solid rgba(255,255,255,.075)
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -32% auto;width:28rem;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(250,154,99,.14);box-shadow:0 0 0 3rem rgba(250,154,99,.025),0 0 0 7rem rgba(250,154,99,.018);
  pointer-events:none
}
/* 16ch en Inter (ch del «0» = 0,6743em). En em y no en ch: el ch de la fuente de reserva es más estrecho y al llegar Inter el titular cambiaba de líneas (CLS 0,17). */.hero h1{max-width:10.79em}
.hero .lede{line-height:1.55}
.sp-hero-system{
  position:relative;isolation:isolate;aspect-ratio:4 / 3;min-width:0;padding:.72rem;
  overflow:hidden!important;background:#070706;border:1px solid rgba(250,154,99,.26)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.46),inset 0 0 0 1px rgba(255,255,255,.025)!important
}
.sp-hero-system::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(250,154,99,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.09) 1px,transparent 1px);
  background-size:30px 30px;mask-image:linear-gradient(145deg,#000,rgba(0,0,0,.25) 72%,transparent)
}
.sp-hero-system::after{
  content:"SYSTEM / LIVE";position:absolute;z-index:4;right:1rem;top:.9rem;pointer-events:none;
  padding:.38rem .55rem;border:1px solid rgba(250,154,99,.34);border-radius:999px;background:rgba(7,7,6,.72);
  color:var(--sp-accent);font:500 .53rem/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.15em
}
.sp-hero-system img{
  position:relative;z-index:1;display:block;width:100%!important;height:100%!important;padding:.18rem;
  aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;border-radius:calc(var(--sp-radius-md) - .4rem);
  background:#050505
}
.sp-hero-system .float-chip{z-index:3;max-width:calc(100% - 2rem)}
.sp-hero-system .float-chip.fa{left:1rem!important;top:auto!important;bottom:1rem!important}
.sp-hero-system .float-chip.fb{right:1rem!important;bottom:1rem!important}
.sec-head{position:relative}
.sec-head::before{
  content:"";width:2.2rem;height:2px;border-radius:2px;background:var(--sp-accent);position:absolute;left:0;top:-1.35rem
}
.h2{max-width:17ch}
.sub{font-size:1rem;line-height:1.65}

/* Cabeceras de sección a dos columnas. Con el h2 limitado a 17ch dentro de una rejilla del
   ancho completo, el titular ocupaba el 40% y la mitad derecha quedaba vacía: 26 secciones
   repartidas por cinco landings, que es lo que hace que el conjunto parezca sin terminar.
   La entradilla sube a la derecha del titular y el bloque se equilibra.
   Se excluyen las cabeceras centradas, que ya usan el vacío a propósito. */
@media (min-width:1024px){
  .sec-head:has(> .h2):has(> .sub):not([style*="center"]){
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:clamp(2rem,5vw,4.5rem);
    align-items:end;
  }
  .sec-head:has(> .h2):has(> .sub):not([style*="center"]) > .kicker{grid-column:1/-1;grid-row:1}
  .sec-head:has(> .h2):has(> .sub):not([style*="center"]) > .h2{grid-column:1;grid-row:2;max-width:22ch}
  .sec-head:has(> .h2):has(> .sub):not([style*="center"]) > .sub{
    grid-column:2;grid-row:2;max-width:34rem;padding-bottom:.45rem;margin:0
  }
}

/* Barras del panel del hero. Estaban duplicadas en el <style> de dos landings: la copia es lo
   que ya rompió el logo del pie, así que viven aquí, donde las ve todo el site. */
.localbars{display:grid;gap:.5rem;height:10.5rem;align-content:center}
.localbars i{position:relative;display:block;height:1.6rem;border-radius:.4rem;
  background:rgba(255,255,255,.06);overflow:hidden}
.localbars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:.4rem;
  background:rgba(255,255,255,.14);transform-origin:0 50%;
  animation:localbar 620ms var(--sp-motion-ease) both;animation-delay:calc(var(--i,0)*90ms + 240ms)}
.localbars i.hot::after{background:var(--accent);box-shadow:0 0 18px rgba(250,154,99,.35)}
.localbars b{position:absolute;left:.6rem;top:50%;translate:0 -50%;z-index:1;font-weight:400;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#cfc9bd}
.localbars i.hot b{color:var(--accent-ink)}
@keyframes localbar{from{transform:scaleX(0)}}

/* Las cabeceras de las extensiones son un sistema aparte del de las landings y se quedaron sin
   el reparto a dos columnas: con max-width 54rem, a 1440px dejaban 480px vacíos a la derecha.
   Son 11 secciones repartidas por el site. Mismo criterio que en .sec-head. */
@media (min-width:1024px){
  .sp-extension-head:has(> h2):has(> p){
    max-width:none;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:clamp(2rem,5vw,4.5rem);align-items:end
  }
  .sp-extension-head:has(> h2):has(> p) > .sp-eyebrow{grid-column:1/-1;grid-row:1}
  .sp-extension-head:has(> h2):has(> p) > h2{grid-column:1;grid-row:2;max-width:20ch}
  .sp-extension-head:has(> h2):has(> p) > p{grid-column:2;grid-row:2;max-width:34rem;padding-bottom:.4rem}
}

/* Preguntas frecuentes a dos columnas. El template trae un componente `.faq-grid` para esto
   —titular fijo a la izquierda, preguntas a la derecha— pero no lo usa ninguna página: los FAQ
   salían a ancho completo, con la respuesta en líneas de 1.330px y la pregunta a 1.300px de su
   marcador. Se aplica por :has() sobre el contenedor, sin tocar el marcado de cada página.
   El titular vuelve a apilarse: dentro de esta rejilla ya no le sobra sitio a la derecha. */
@media (min-width:1024px){
  .wrap:has(> .faq),.faq-grid{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start
  }
  .wrap:has(> .faq) > .sec-head,.faq-grid > .sec-head{
    display:block;position:sticky;top:6.5rem;margin-bottom:0
  }
  /* Plan 4 · bloque 0: la regla de dos columnas de .sec-head (más arriba) pesa más que este display:block
     y dejaba el H2 del FAQ en 253 px, partido en 3 a 6 líneas. Aquí la cabecera vuelve a una columna. */
  .wrap:has(> .faq) > .sec-head:has(> .h2):has(> .sub),.faq-grid > .sec-head:has(> .h2):has(> .sub){display:grid;grid-template-columns:minmax(0,1fr);row-gap:1.1rem}
  .wrap:has(> .faq) > .sec-head:has(> .h2):has(> .sub) > :is(.kicker,.h2,.sub),.faq-grid > .sec-head:has(> .h2):has(> .sub) > :is(.kicker,.h2,.sub){grid-column:1;grid-row:auto}
}

.cta,.sp-button{
  transform:translateZ(0);
  transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease
}
.cta:hover,.sp-button:hover{transform:translateY(-2px)}
.cta:active,.sp-button:active{transform:translateY(0) scale(.985)}
.cta:focus-visible,.sp-button:focus-visible,.sp-text-link:focus-visible,.sp-topic-grid a:focus-visible{
  outline:3px solid rgba(250,154,99,.52);outline-offset:4px
}

/* El ancho lo fija la regla de `.wrap,.sp-extension` de arriba (84rem). Antes había aquí
   un `width:min(72rem,…)` de cuando el contenedor era más estrecho: al ir después,
   ganaba, y dejaba este bloque 96 px por dentro del eje de las demás secciones. */
.sp-extension{
  margin-inline:auto;
  display:grid;
  gap:clamp(1.1rem,2.4vw,1.75rem)
}
.sp-extension + .sp-extension{padding-top:0}
.sp-extension-head{
  display:grid;gap:1rem;margin-bottom:clamp(1.25rem,3vw,2.2rem);max-width:54rem
}

/* ===== EL NARANJA, CUANDO ES TEXTO =====
 *
 * Medido en producción el 12/09/2026: #fa9a63 sobre el crema de la página da **1,97:1** en
 * los índices de las tarjetas, los estados de las filas y los enlaces dentro del texto, y
 * **2,13:1** sobre blanco. AA pide 4,5:1 para texto normal. Es el fallo de contraste más
 * repetido del sitio.
 *
 * No se puede oscurecer `--sp-accent` a secas: el mismo naranja se usa como FONDO de botones
 * y como borde, y ahí el tono claro es el correcto. Se separa el uso en un token propio.
 *
 * #b04a12 es casi el mismo tono (21°), bajado de luminosidad hasta cumplir en todos los fondos
 * claros del sitio: 4,76:1 sobre #f0efec, 4,52:1 sobre #ebe9e5 y 5,48:1 sobre blanco. El anterior,
 * #bd4e0f, se quedaba en 4,29:1 sobre #f0efec (plan 4, bloque 0, 15/09/2026).
 *
 * Sobre los bloques oscuros el problema se invierte —#b04a12 sobre casi negro no llega a 3:1—
 * así que ahí el token vuelve al naranja claro y lo heredan todos sus hijos.
 */
:root{--accent-texto:#b04a12}
.hero,.scard,.vs-col.sp,.method,.bigfoot,.mmenu,.cta,.sp-final-cta,.sp-hero-system,
.sp-flow,.sp-panel--dark,.sp-orbit,.sp-dashboard,.sp-conversion-stack,.sp-role-grid,.panel{--accent-texto:#fa9a63}
/* Plan 4 · B0: .sp-dashboard, .sp-conversion-stack, .sp-role-grid y .panel también son oscuros; sin esto sus etiquetas quedaban a 3,4-3,6:1. */
.sp-eyebrow,.sp-panel-index,.sp-card-label{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-texto)
}
.sp-extension-head h2,.sp-final-cta h2,.sp-system-copy h2{
  font-size:clamp(2.2rem,5vw,4.25rem);font-weight:700;letter-spacing:-.052em;line-height:.98;text-wrap:balance
}
.sp-extension-head p{
  max-width:42rem;color:var(--sp-muted);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.65;text-wrap:pretty
}

.sp-system-panel{
  --glow-x:78%;--glow-y:18%;
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center;
  min-height:28rem;padding:clamp(2rem,5vw,4rem);border-radius:var(--sp-radius);
  color:#fff;background:
    radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(250,154,99,.18),transparent 25rem),
    linear-gradient(145deg,#171714,#080808 68%);
  border:1px solid rgba(250,154,99,.25);box-shadow:0 36px 110px rgba(9,9,9,.24)
}
.sp-system-panel::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.48;
  background-image:linear-gradient(rgba(250,154,99,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.085) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(90% 100% at 70% 45%,#000,transparent)
}
.sp-system-copy{display:grid;gap:1rem;align-content:center;position:relative;z-index:2}
.sp-system-copy h2,.sp-system-copy h3{
  color:var(--sp-cream);font-size:clamp(1.8rem,4vw,3.35rem);font-weight:700;letter-spacing:-.045em;line-height:1;text-wrap:balance
}
.sp-system-copy p{max-width:34rem;color:#aaa59a;line-height:1.65}
.sp-text-link{display:inline-flex;align-items:center;gap:.55rem;width:fit-content;color:var(--accent-texto);font-weight:650;margin-top:.4rem}
.sp-text-link span{transition:transform .22s}
.sp-text-link:hover span{transform:translate(3px,-3px)}

/* Órbita de palancas. Las seis palancas giran sobre un anillo real y cada una mantiene
   su radio dibujado hasta el núcleo: la conexión con el margen se ve, no se supone.
   El chip contragira a la misma velocidad para leerse siempre en horizontal. */
.sp-orbit{
  /* Radio en cqw (no en %): un translateX porcentual se mide contra el propio nodo,
     no contra la órbita, y dejaría las palancas amontonadas en el centro. */
  --r:33cqw;
  container-type:inline-size;
  position:relative;width:min(100%,26rem);margin-inline:auto;aspect-ratio:1;
  display:grid;place-items:center
}
.sp-orbit-field{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(250,154,99,.11),transparent 54%)
}
.sp-orbit-field::before,.sp-orbit-field::after{
  content:"";position:absolute;border-radius:50%
}
.sp-orbit-field::before{inset:calc(50% - var(--r));border:1px solid rgba(250,154,99,.32)}
.sp-orbit-field::after{inset:calc(50% - var(--r) * .62);border:1px dashed rgba(255,255,255,.1)}
.sp-orbit-core{
  position:relative;z-index:1;display:grid;place-items:center;place-content:center;gap:.2rem;text-align:center;
  width:27%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#ffc79c,var(--sp-accent) 66%);
  color:#16130f;
  box-shadow:0 0 0 .75rem rgba(250,154,99,.09),0 0 0 .77rem rgba(250,154,99,.2),0 16px 40px rgba(0,0,0,.4);
  animation:sp-orbit-breathe 8s var(--sp-motion-soft,cubic-bezier(.37,0,.63,1)) infinite
}
.sp-orbit-core b{font-size:clamp(.82rem,3.9cqw,1.15rem);font-weight:750;letter-spacing:-.03em;line-height:1}
.sp-orbit-core span{
  font-family:var(--font-mono,monospace);font-size:clamp(.76rem,1.9cqw,.84rem);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(22,19,15,.58);line-height:1
}
.sp-orbit-arms{
  position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;
  animation:sp-orbit-drift 56s linear infinite
}
.sp-orbit-arm{position:absolute;inset:0;pointer-events:none}
/* Radio: arranca fuera del núcleo y gana intensidad hacia la palanca. */
.sp-orbit-arm::before{
  content:"";position:absolute;left:50%;top:50%;width:var(--r);height:1px;
  transform-origin:0 50%;transform:rotate(var(--a));
  background:linear-gradient(90deg,transparent 0 40%,rgba(250,154,99,.42) 62%,rgba(250,154,99,.85));
  transition:background .3s var(--sp-motion-ease,cubic-bezier(.22,1,.36,1))
}
/* La señal viaja de la palanca al margen: cada movimiento acaba leyéndose en el centro. */
.sp-orbit-arm::after{
  content:"";position:absolute;left:50%;top:50%;width:.3rem;aspect-ratio:1;border-radius:50%;
  background:#ffcba6;box-shadow:0 0 .5rem rgba(250,154,99,.9);opacity:0;
  transform:rotate(var(--a)) translateX(var(--r)) translate(-50%,-50%);
  animation:sp-orbit-signal 5.2s var(--sp-motion-soft,cubic-bezier(.37,0,.63,1)) infinite;
  animation-delay:calc(var(--i,0) * -.86s)
}
.sp-orbit-anchor{
  position:absolute;left:50%;top:50%;z-index:1;width:0;height:0;
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)))
}
/* El chip se centra con `translate`, no con `transform`: el contragiro ya ocupa
   `transform`, y centrar por grid en una caja de 0px acaba alineando al inicio. */
.sp-orbit-chip{
  position:absolute;left:0;top:0;translate:-50% -50%;
  pointer-events:auto;white-space:nowrap;padding:.52em 1em;border-radius:999px;
  border:1px solid rgba(250,154,99,.34);background:rgba(12,11,10,.92);backdrop-filter:blur(8px);
  color:#ece6da;font-family:var(--font-mono,monospace);font-size:clamp(.76rem,2.5cqw,.82rem);
  letter-spacing:.11em;text-transform:uppercase;box-shadow:0 10px 26px rgba(0,0,0,.45);
  animation:sp-orbit-drift 56s linear infinite reverse;
  transition:border-color .3s var(--sp-motion-ease,cubic-bezier(.22,1,.36,1)),color .3s var(--sp-motion-ease,cubic-bezier(.22,1,.36,1))
}
.sp-orbit-arm:has(.sp-orbit-chip:hover)::before{
  background:linear-gradient(90deg,transparent 0 36%,rgba(250,154,99,.7) 58%,var(--sp-accent))
}
.sp-orbit-chip:hover{border-color:var(--sp-accent);color:#fff}
@media (hover:hover){
  .sp-orbit:hover .sp-orbit-arms,.sp-orbit:hover .sp-orbit-chip,
  .sp-orbit:focus-within .sp-orbit-arms,.sp-orbit:focus-within .sp-orbit-chip{animation-play-state:paused}
}
@keyframes sp-orbit-drift{to{transform:rotate(360deg)}}
@keyframes sp-orbit-breathe{
  0%,100%{box-shadow:0 0 0 .75rem rgba(250,154,99,.09),0 0 0 .77rem rgba(250,154,99,.2),0 16px 40px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 0 1.35rem rgba(250,154,99,.05),0 0 0 1.37rem rgba(250,154,99,.12),0 16px 40px rgba(0,0,0,.4)}
}
@keyframes sp-orbit-signal{
  0%{transform:rotate(var(--a)) translateX(var(--r)) translate(-50%,-50%);opacity:0}
  18%{opacity:1}
  74%{opacity:1}
  100%{transform:rotate(var(--a)) translateX(calc(var(--r) * .42)) translate(-50%,-50%);opacity:0}
}

.sp-signal-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-md);overflow:hidden;background:var(--sp-line)
}
/* El contenido arranca ARRIBA, no abajo. Con `align-content:end` cada tarjeta empezaba a una
   altura distinta según lo largo que fuera su texto —medido: 32, 54 y 75px en la misma fila— y
   la rejilla se leía descuadrada. El `padding-top` deja libre el punto decorativo, que va
   clavado en 1.5rem. */
.sp-signal-grid article{
  position:relative;min-height:13.5rem;padding:clamp(1.4rem,2.5vw,2rem);padding-top:4rem;
  background:rgba(247,246,243,.94);
  display:grid;gap:.65rem;align-content:start;overflow:hidden
}
.sp-signal-grid article::before{
  content:"";position:absolute;left:1.5rem;top:1.5rem;width:.65rem;aspect-ratio:1;border-radius:50%;background:var(--sp-accent);
  box-shadow:0 0 0 .45rem rgba(250,154,99,.11)
}
.sp-signal-grid article::after{
  content:"";position:absolute;right:-2rem;top:-2rem;width:7rem;aspect-ratio:1;border:1px solid rgba(23,23,22,.08);border-radius:50%;
  transition:transform .4s ease
}
.sp-signal-grid article:hover::after{transform:scale(1.25)}
.sp-signal-grid span{
  font-family:var(--font-mono,monospace);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texto)
}
.sp-signal-grid h3{font-size:1.12rem;line-height:1.15;letter-spacing:-.025em}
.sp-signal-grid p{color:var(--sp-muted);font-size:.9rem;line-height:1.5}

.sp-process-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:process}
/* El padding-top es el suelo del contenido, no decoración. La línea y el punto de arriba son
   pseudoelementos absolutos clavados en 3rem y 2.68rem, y el contenido va alineado abajo: en
   cuanto una tarjeta trae texto largo, sube y el rótulo sale TACHADO por la línea, con el punto
   comiéndose la primera letra. Se midió a 43px del borde cuando lo despejado empieza en 60. */
.sp-process-rail article{
  position:relative;overflow:hidden;min-height:18rem;
  padding:clamp(1.6rem,3vw,2.2rem);padding-top:4.25rem;
  border-radius:var(--sp-radius-md);background:var(--sp-soft);border:1px solid var(--sp-line);
  display:grid;gap:.7rem;align-content:end;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease
}
.sp-process-rail article:hover{transform:translateY(-5px);border-color:rgba(250,154,99,.4);box-shadow:var(--sp-shadow)}
.sp-process-rail article::before{
  content:"";position:absolute;left:2rem;right:2rem;top:3rem;height:1px;background:linear-gradient(90deg,var(--sp-accent),rgba(23,23,22,.08))
}
.sp-process-rail article::after{
  content:"";position:absolute;left:2rem;top:2.68rem;width:.65rem;aspect-ratio:1;border-radius:50%;background:var(--sp-accent);
  box-shadow:0 0 0 .45rem rgba(250,154,99,.1)
}
.sp-process-rail span{font-family:var(--font-mono,monospace);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texto)}
.sp-process-rail h3{font-size:1.3rem;letter-spacing:-.03em;line-height:1.1}
.sp-process-rail p{color:var(--sp-muted);font-size:.93rem;line-height:1.55}

/* Rail de decisión en oscuro. Estaba acoplado a `[data-sp-extension="advisory"]`, así que solo
   existía en esa página. Se desacopla para poder cortar el crema en cualquier landing: la de
   Barcelona eran 6.400px del mismo fondo, ocho secciones seguidas sin un solo cambio de tono.
   A advisory no le cambia nada: misma regla, un ancestro menos. */
[data-motion-decision-rail]{
  position:relative;isolation:isolate;padding:clamp(.8rem,2vw,1.25rem);gap:.75rem;border-radius:var(--sp-radius);
  background:#090908;border:1px solid rgba(250,154,99,.22);box-shadow:0 34px 90px rgba(9,9,9,.2);overflow:hidden
}
[data-motion-decision-rail]::before{
  content:"";position:absolute;z-index:-1;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(250,154,99,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.08) 1px,transparent 1px);
  background-size:38px 38px
}
[data-motion-decision-rail] article{
  min-height:16rem;color:var(--sp-cream);background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11);box-shadow:none
}
[data-motion-decision-rail] article:hover{
  background:rgba(250,154,99,.08);border-color:rgba(250,154,99,.48);box-shadow:none
}
[data-motion-decision-rail] article::before{background:linear-gradient(90deg,var(--sp-accent),rgba(255,255,255,.12))}
[data-motion-decision-rail] p{color:#aaa59a}

.sp-check-list{list-style:none;display:grid;gap:.75rem;align-content:center;position:relative;z-index:2}
.sp-check-list li{
  display:grid;grid-template-columns:1rem 1fr;gap:.75rem;align-items:center;padding:1rem 1.1rem;
  border:1px solid rgba(255,255,255,.11);border-radius:.9rem;background:rgba(255,255,255,.045);color:#d9d4ca
}
.sp-check-list i{
  display:block;width:.72rem;aspect-ratio:1;border-radius:50%;background:var(--sp-accent);box-shadow:0 0 0 .3rem rgba(250,154,99,.12)
}

.sp-conversion-stack{display:grid;gap:.75rem}
.sp-conversion-stack article{
  display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:1.25rem;align-items:center;
  width:calc(100% - var(--offset)*2.2rem);margin-left:calc(var(--offset)*2.2rem);
  padding:1.2rem 1.35rem;border-radius:1rem;border:1px solid var(--sp-line);background:rgba(247,246,243,.93);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease
}
.sp-conversion-stack article:hover{transform:translateX(5px);border-color:rgba(250,154,99,.45);box-shadow:0 18px 50px rgba(20,18,16,.09)}
.sp-conversion-stack article>span{font-family:var(--font-mono,monospace);color:var(--accent-texto);font-size:.76rem;letter-spacing:.12em}
.sp-conversion-stack h3{font-size:1.05rem;letter-spacing:-.02em}
.sp-conversion-stack p{color:var(--sp-muted);font-size:.88rem}
.sp-conversion-stack b{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-muted);font-weight:500}

[data-sp-extension="listing"]{position:relative}
[data-sp-extension="listing"] [data-motion-listing-stack]{
  position:relative;isolation:isolate;padding:clamp(1rem,2.5vw,1.7rem);gap:.7rem;border-radius:var(--sp-radius);
  background:#090908;border:1px solid rgba(250,154,99,.22);box-shadow:0 34px 90px rgba(9,9,9,.2);overflow:hidden
}
[data-sp-extension="listing"] [data-motion-listing-stack]::before{
  content:"";position:absolute;z-index:-1;inset:0;opacity:.42;pointer-events:none;
  background-image:linear-gradient(rgba(250,154,99,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.08) 1px,transparent 1px);
  background-size:36px 36px
}
[data-sp-extension="listing"] [data-motion-listing-stack]::after{
  content:"";position:absolute;z-index:0;left:2.75rem;top:2.4rem;bottom:2.4rem;width:1px;
  background:linear-gradient(180deg,transparent,var(--sp-accent) 12%,var(--sp-accent) 88%,transparent);opacity:.5
}
[data-sp-extension="listing"] [data-motion-listing-stack] article{
  position:relative;z-index:1;width:calc(100% - var(--offset)*.7rem);margin-left:calc(var(--offset)*.7rem);
  padding:1.15rem 1.25rem 1.15rem 1.05rem;border-color:rgba(255,255,255,.11);background:rgba(20,20,18,.92);color:var(--sp-cream)
}
[data-sp-extension="listing"] [data-motion-listing-stack] article:hover{
  border-color:rgba(250,154,99,.5);background:#171613;box-shadow:0 16px 42px rgba(0,0,0,.28)
}
[data-sp-extension="listing"] [data-motion-listing-stack] article>span{
  position:relative;display:grid;place-items:center;width:2.05rem;aspect-ratio:1;border-radius:50%;background:#090908;border:1px solid rgba(250,154,99,.55)
}
[data-sp-extension="listing"] [data-motion-listing-stack] p,
[data-sp-extension="listing"] [data-motion-listing-stack] b{color:#9f9a90}
[data-sp-extension="listing"] .sp-signal-grid{border-color:rgba(23,23,22,.14);box-shadow:0 24px 70px rgba(20,18,16,.08)}
[data-sp-extension="listing"] .sp-signal-grid article{background:#f7f4ee}

.sp-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sp-role-grid article{
  position:relative;min-height:19rem;padding:2rem 1.7rem;border-radius:var(--sp-radius-md);color:#fff;
  background:linear-gradient(150deg,#171715,#090909);border:1px solid rgba(255,255,255,.08);
  display:grid;gap:.75rem;align-content:end;overflow:hidden
}
.sp-role-grid article::before{
  content:"";position:absolute;inset:0;opacity:.42;background-image:linear-gradient(rgba(250,154,99,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.08) 1px,transparent 1px);
  background-size:36px 36px;mask-image:linear-gradient(to top,#000,transparent 75%)
}
.sp-role-grid article::after{
  content:"";position:absolute;top:1.5rem;right:1.5rem;width:2.5rem;aspect-ratio:1;border:1px solid rgba(250,154,99,.38);border-radius:.75rem;transform:rotate(12deg)
}
.sp-role-grid article>*{position:relative;z-index:1}
.sp-role-grid span{font-family:var(--font-mono,monospace);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texto)}
.sp-role-grid h3{font-size:1.35rem;line-height:1.1;letter-spacing:-.03em;color:var(--sp-cream)}
.sp-role-grid p{color:#a9a499;font-size:.92rem;line-height:1.55}
.sp-manifesto{
  margin:0;padding:clamp(2rem,5vw,4rem);border-radius:var(--sp-radius);background:var(--sp-accent);color:#15120e;
  display:grid;gap:1rem
}
.sp-manifesto span{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.sp-manifesto p{font-size:clamp(1.7rem,4vw,3.35rem);line-height:1.05;letter-spacing:-.045em;font-weight:700;max-width:26ch}

[data-sp-extension="about"] [data-motion-team-map]{
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.8rem;
  padding:clamp(.8rem,2vw,1.25rem);border-radius:var(--sp-radius);background:#090908;border:1px solid rgba(250,154,99,.22);
  box-shadow:0 36px 100px rgba(9,9,9,.22);overflow:hidden
}
[data-sp-extension="about"] [data-motion-team-map]::before{
  content:"";position:absolute;z-index:-1;inset:0;opacity:.42;pointer-events:none;
  background-image:linear-gradient(rgba(250,154,99,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.075) 1px,transparent 1px);
  background-size:38px 38px
}
[data-sp-extension="about"] [data-motion-team-map] article{
  min-height:21rem;background:rgba(18,18,16,.92);border-color:rgba(255,255,255,.11)
}
[data-sp-extension="about"] [data-motion-team-map] article:nth-child(1){grid-column:span 5}
[data-sp-extension="about"] [data-motion-team-map] article:nth-child(2){grid-column:span 4}
[data-sp-extension="about"] [data-motion-team-map] article:nth-child(3){grid-column:span 3}
[data-sp-extension="about"] [data-motion-team-map] article::after{
  top:1.65rem;right:1.65rem;width:.72rem;border-radius:50%;background:var(--sp-accent);border:0;transform:none;
  box-shadow:0 0 0 .45rem rgba(250,154,99,.1)
}
[data-sp-extension="about"] [data-motion-team-map] article:nth-child(2)::after{opacity:.72}
[data-sp-extension="about"] [data-motion-team-map] article:nth-child(3)::after{opacity:.46}
[data-sp-extension="about"] .sp-manifesto{
  position:relative;overflow:hidden;grid-template-columns:minmax(8rem,.34fr) minmax(0,1fr);align-items:end;gap:clamp(1.5rem,4vw,4rem);
  background:var(--sp-cream);border:1px solid rgba(23,23,22,.12);box-shadow:0 24px 70px rgba(20,18,16,.09)
}
[data-sp-extension="about"] .sp-manifesto::before{
  content:"01";font:500 clamp(4rem,10vw,8rem)/.8 var(--font-mono,ui-monospace,monospace);color:var(--sp-accent);letter-spacing:-.08em
}
[data-sp-extension="about"] .sp-manifesto span{position:absolute;left:clamp(2rem,5vw,4rem);top:clamp(1.8rem,4vw,3rem)}
[data-sp-extension="about"] .sp-manifesto p{max-width:30ch}

.sp-topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.sp-topic-grid a{
  position:relative;min-height:15.5rem;padding:clamp(1.5rem,3vw,2.1rem);border-radius:var(--sp-radius-md);
  border:1px solid var(--sp-line);background:rgba(247,246,243,.94);display:grid;gap:.7rem;align-content:end;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease
}
.sp-topic-grid a:hover{transform:translateY(-4px);border-color:rgba(250,154,99,.45);box-shadow:var(--sp-shadow)}
.sp-topic-grid a>span:first-child{font-family:var(--font-mono,monospace);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texto)}
.sp-topic-grid h3{max-width:24rem;font-size:1.35rem;line-height:1.1;letter-spacing:-.03em}
.sp-topic-grid p{max-width:28rem;color:var(--sp-muted);font-size:.92rem}
.sp-topic-grid a>span:last-child{position:absolute;right:1.5rem;top:1.4rem;font-size:1.25rem;transition:transform .22s}
.sp-topic-grid a:hover>span:last-child{transform:translate(3px,-3px)}

.sp-dashboard{
  position:relative;overflow:hidden;border-radius:var(--sp-radius);padding:clamp(1.2rem,3vw,2rem);
  background:#0a0a09;color:#fff;border:1px solid rgba(250,154,99,.22);box-shadow:0 38px 110px rgba(9,9,9,.24)
}
.sp-dashboard::before{
  content:"";position:absolute;inset:0;opacity:.36;pointer-events:none;
  background-image:linear-gradient(rgba(250,154,99,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.075) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(80% 100% at 50% 40%,#000,transparent)
}
.sp-dashboard>*{position:relative;z-index:1}
.sp-dashboard-top{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.35rem .3rem 1.25rem}
.sp-dashboard-top div:first-child{display:grid;gap:.12rem}
.sp-dashboard-top span{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#847f75}
.sp-dashboard-top strong{font-size:1.08rem;color:var(--sp-cream)}
.sp-live{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#bdb7ab;display:flex;align-items:center;gap:.5rem}
.sp-live i{width:.55rem;aspect-ratio:1;border-radius:50%;background:var(--sp-accent);box-shadow:0 0 0 .3rem rgba(250,154,99,.13);animation:sp-pulse 2.6s ease infinite}
.sp-dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:.8rem}
.sp-dashboard-grid article{border:1px solid rgba(255,255,255,.09);border-radius:1rem;background:rgba(255,255,255,.045);padding:1.2rem}
/* Tarjeta alta del panel: ocupa las dos filas para que tres tarjetas no dejen un hueco
   abajo a la derecha. Mismo comportamiento que .sp-chart-card, sin su gráfico. */
.sp-card-alta{grid-row:span 2}
.sp-flow-card{align-content:start}
.sp-chart-card{grid-row:span 2;min-height:23rem;display:grid;align-content:space-between;gap:1rem}
.sp-bars{height:13rem;display:flex;align-items:end;gap:.7rem;padding-top:1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sp-bars i{flex:1;height:var(--h);border-radius:.45rem .45rem 0 0;background:linear-gradient(to top,rgba(255,255,255,.08),rgba(255,255,255,.18))}
.sp-bars i.hot{background:linear-gradient(to top,#d96f35,var(--sp-accent));box-shadow:0 0 22px rgba(250,154,99,.22)}
.sp-dashboard small{color:#8b867a;font-size:.78rem}
/* Enlaces dentro del panel oscuro. Sin esto heredan el gris del `small` y no se distinguen del
   texto: es el mismo fallo que ya apareció en .tbl, en .quick y en el rail. */
.sp-dashboard a{color:var(--sp-cream);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:rgba(250,154,99,.7);font-weight:600}
.sp-dashboard a:hover{color:var(--sp-accent);text-decoration-color:var(--sp-accent)}
.sp-query-card ol{list-style:none;display:grid;gap:.55rem;margin-top:1rem}
.sp-query-card li{display:grid;grid-template-columns:.65rem 1fr auto;gap:.65rem;align-items:center;padding:.7rem .75rem;border-radius:.75rem;background:rgba(255,255,255,.045);font-size:.8rem}
.sp-query-card li i{width:.5rem;aspect-ratio:1;border-radius:50%}
.sp-query-card .good{background:#92b887}.sp-query-card .watch{background:var(--sp-accent)}.sp-query-card .stop{background:#8b5b4c}
.sp-query-card b{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#989288}
.sp-flow-card{display:grid;gap:1rem}
.sp-flow-line{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sp-flow-line b{padding:.45rem .55rem;border-radius:.55rem;background:rgba(250,154,99,.1);color:var(--sp-accent);font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.sp-flow-line i{width:1rem;height:1px;background:rgba(255,255,255,.22)}

.sp-final-cta{
  --glow-x:78%;--glow-y:25%;
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;
  margin-top:clamp(1rem,3vw,2rem);padding:clamp(2rem,5vw,4rem);border-radius:var(--sp-radius);
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(250,154,99,.18),transparent 22rem),
    var(--sp-dark);color:#fff;border:1px solid rgba(250,154,99,.28);box-shadow:0 34px 100px rgba(9,9,9,.22)
}
.sp-final-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:linear-gradient(rgba(250,154,99,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(250,154,99,.08) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(110deg,#000,transparent 78%)
}
/* min-width:0 porque en una rejilla el valor por defecto es `auto`, y eso impide que el
   bloque encoja por debajo de su contenido. A 320px el kicker en mono con letter-spacing
   no cabía y el panel, que recorta, se comía la última letra: «EMPEZAR PEQUEÑ». */
.sp-final-copy{display:grid;gap:.9rem;max-width:48rem;min-width:0}
.sp-final-cta h2{color:var(--sp-cream);font-size:clamp(2rem,4.5vw,3.8rem)}
.sp-final-cta p{max-width:39rem;color:#aaa59a;line-height:1.6}
.sp-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;white-space:nowrap;width:fit-content;
  padding:.85rem 1.25rem;border-radius:999px;background:var(--sp-accent);color:#17130f;font-weight:700;
  box-shadow:0 12px 34px rgba(250,154,99,.22)
}
/* En pantallas muy estrechas el botón deja de ser intocable.
   Con `nowrap` su contenido mínimo era de 253px, y como comparte columna de rejilla con el
   texto, forzaba la columna entera por encima de la caja del panel: a 320px el panel recortaba
   la última letra del kicker —«EMPEZAR PEQUEÑ»— en las 35 páginas que llevan este cierre.
   El síntoma estaba en el kicker; la causa, aquí. */
@media (max-width:400px){
  .sp-button{white-space:normal;text-align:center;padding-inline:1rem;min-width:0}
}
.sp-button:hover{background:#ffb183;box-shadow:0 18px 40px rgba(250,154,99,.28)}
.sp-button span{font-size:1rem;transition:transform .22s}
.sp-button:hover span{transform:translate(3px,-3px)}

.sp-reveal{opacity:1;transform:none}
.sp-js .sp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.sp-js .sp-reveal.is-visible{opacity:1;transform:none}

@keyframes sp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sp-pulse{0%,100%{opacity:.45}50%{opacity:1}}

@media (max-width:980px){
  .sp-signal-grid{grid-template-columns:repeat(2,1fr)}
  .sp-role-grid{grid-template-columns:1fr 1fr}
  .sp-system-panel{grid-template-columns:1fr}
  .sp-orbit{width:min(100%,24rem)}
  [data-sp-extension="about"] [data-motion-team-map] article:nth-child(1),
  [data-sp-extension="about"] [data-motion-team-map] article:nth-child(2){grid-column:span 6}
  [data-sp-extension="about"] [data-motion-team-map] article:nth-child(3){grid-column:1/-1;min-height:15rem}
}
@media (max-width:820px){
  .sp-process-rail,.sp-role-grid{grid-template-columns:1fr}
  .sp-process-rail article,.sp-role-grid article{min-height:14rem}
  .sp-dashboard-grid{grid-template-columns:1fr}
  .sp-chart-card{grid-row:auto;min-height:20rem}
  .sp-final-cta{grid-template-columns:1fr;align-items:start}
  [data-sp-extension="about"] [data-motion-team-map]{grid-template-columns:1fr}
  [data-sp-extension="about"] [data-motion-team-map] article:nth-child(n){grid-column:1;min-height:14rem}
  [data-sp-extension="about"] .sp-manifesto{grid-template-columns:1fr;padding-top:5rem}
  [data-sp-extension="about"] .sp-manifesto::before{font-size:4.5rem}
}
@media (max-width:640px){
  .sp-extension{width:min(100% - 2.5rem,72rem)}
  .sp-extension-head h2{font-size:clamp(2rem,11vw,3.2rem)}
  .sp-signal-grid,.sp-topic-grid{grid-template-columns:1fr}
  .sp-signal-grid article{min-height:11rem}
  .sp-system-panel{padding:1.5rem;min-height:0}
  /* En móvil la órbita se abre y el núcleo encoge: si no, la palanca más ancha
     se monta encima del margen. */
  .sp-orbit{width:min(100%,20rem)}
  .sp-orbit-core{width:24%}
  .sp-orbit-chip{padding:.42em .7em;font-size:clamp(.76rem,2.4cqw,.82rem)}
  .sp-conversion-stack article{
    width:100%;margin-left:0;grid-template-columns:2rem 1fr;gap:.8rem
  }
  .sp-conversion-stack b{grid-column:2}
  .sp-dashboard{padding:.8rem}
  .sp-bars{height:10rem;gap:.35rem}
  .sp-final-cta{padding:1.5rem}
  .sp-button{width:100%}
  .sp-hero-system{aspect-ratio:4 / 3;padding:.45rem}
  .sp-hero-system::after{top:.65rem;right:.7rem}
  .sp-hero-system .float-chip{padding:.55rem .7rem}
  .sp-hero-system .float-chip.fa{left:.7rem!important;bottom:.7rem!important}
  .sp-hero-system .float-chip.fb{right:.7rem!important;bottom:.7rem!important}
  [data-sp-extension="listing"] [data-motion-listing-stack]{padding:.75rem}
  [data-sp-extension="listing"] [data-motion-listing-stack]::after{left:2.07rem}
  [data-sp-extension="listing"] [data-motion-listing-stack] article{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sp-js .sp-reveal{opacity:1;transform:none}
}

/* ── Consola del hero ─────────────────────────────────────────────────────────
   Vivía solo en el <style> de ppc-amazon.html. Se comparte para que asesorías y
   listings usen el mismo panel en vez de una foto de archivo, y para no mantener
   tres copias. Reglas copiadas literalmente de PPC: esta hoja carga la última,
   así que cualquier diferencia cambiaría el aspecto de esa página. */
.hero-console{position:relative;border:1px solid rgba(255,255,255,.11);border-radius:1.35rem;background:rgba(255,255,255,.045);box-shadow:0 38px 110px rgba(0,0,0,.42);padding:1.15rem;display:grid;gap:.8rem;align-content:start}
.console-top{display:flex;justify-content:space-between;align-items:center;color:#8b867a;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.console-top b{display:flex;align-items:center;gap:.4rem;color:#bbb5aa}.console-top b i{width:.45rem;aspect-ratio:1;border-radius:50%;background:var(--accent);animation:pulse 2.5s var(--sp-motion-soft,ease-in-out) infinite}
.console-main{display:grid;grid-template-columns:1fr .78fr;gap:.7rem}.console-card{border:1px solid rgba(255,255,255,.09);border-radius:.9rem;background:rgba(9,9,9,.55);padding:1rem;display:grid;gap:.7rem;align-content:start}
.console-card>span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:#8b867a}
.hero-chart{height:10.5rem;display:flex;align-items:end;gap:.4rem;border-bottom:1px solid rgba(255,255,255,.1)}
.hero-chart i{flex:1;height:var(--h);border-radius:.35rem .35rem 0 0;background:rgba(255,255,255,.11)}.hero-chart i.hot{background:var(--accent);box-shadow:0 0 18px rgba(250,154,99,.25)}
.chart-legend{display:flex;flex-wrap:wrap;gap:.2rem .85rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#8b867a}
.chart-legend span{display:inline-flex;align-items:center;gap:.35rem}
.chart-legend span::before{content:"";width:.45rem;height:.45rem;border-radius:.14rem;background:rgba(255,255,255,.18)}
.chart-legend .on::before{background:var(--accent)}
.console-metrics{display:grid;gap:.55rem;align-content:stretch}.console-metrics div{padding:.7rem .75rem;border-radius:.7rem;background:rgba(255,255,255,.04);display:grid;gap:.1rem;align-content:center}.console-metrics small{font-size:.75rem;color:#8b867a}.console-metrics strong{font-family:var(--font-mono);font-size:.8rem;color:#ddd8ce}
.console-flow{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.console-flow div{position:relative;padding:.7rem;border:1px solid rgba(250,154,99,.16);border-radius:.7rem;background:rgba(250,154,99,.055);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#c8c2b8;text-align:center}.console-flow div:not(:last-child)::after{content:"";position:absolute;right:-.55rem;top:50%;width:.55rem;height:1px;background:rgba(250,154,99,.35)}
.console-foot{display:grid;gap:.7rem;padding:.85rem .95rem;border:1px solid rgba(255,255,255,.09);border-radius:.9rem;background:rgba(9,9,9,.55)}
.console-foot span{display:block;margin-bottom:.3rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:#8b867a}
.console-foot p{font-size:.8rem;line-height:1.45;color:#c8c2b8}
.console-stat{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.08)}
.console-stat small{font-size:.75rem;line-height:1.35;color:#8b867a}
.console-stat strong{font-family:var(--font-mono);font-size:1.02rem;letter-spacing:-.01em;color:var(--accent);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .console-metrics div,.console-foot{animation:console-in 560ms var(--sp-motion-ease) both;animation-delay:calc(var(--i,0)*90ms + 220ms)}
}
@keyframes console-in{from{opacity:0;transform:translateY(.45rem)}}
@keyframes pulse{50%{opacity:.4}}

/* ── Consola del hero: jerarquía y profundidad ────────────────────────────────
   La primera versión dejaba panel, tarjetas y pie en el mismo gris plano: el
   gráfico pesaba lo mismo que el bloque de texto de abajo, las barras flotaban
   sin suelo, la fila de etapas no se leía como un flujo y la única cifra real
   quedaba al fondo en cuerpo pequeño. Se reordena la jerarquía sin tocar la
   paleta. Va después del bloque base, así que lo pisa por orden. */

/* Profundidad: el panel se oscurece y las tarjetas suben con un degradado y una
   línea de luz en el borde superior. */
.hero-console{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  padding:1.25rem
}
.console-card{
  position:relative;
  background:linear-gradient(180deg,rgba(28,26,24,.75),rgba(9,9,9,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}

/* El gráfico deja de ser "unas barras" y pasa a tener suelo y referencia. */
.hero-chart{
  position:relative;height:11.5rem;padding-top:.5rem;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:100% 33.33%;background-position:0 100%
}
.hero-chart i{position:relative;border-radius:.3rem .3rem 0 0}
.hero-chart i.hot{background:linear-gradient(180deg,var(--accent),rgba(250,154,99,.72))}
.chart-legend{padding-top:.55rem;border-top:1px solid rgba(255,255,255,.08)}

/* Las tres cajas de lectura parecían huecas: mucho aire y poca información. */
.console-metrics div{padding:.62rem .7rem}
.console-metrics small{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.console-metrics strong{font-size:.9rem}

/* La fila de etapas se lee como un recorrido: una línea continua por detrás y la
   etapa activa marcada, en vez de cuatro cajas sueltas con un guion entre ellas. */
.console-flow{position:relative;align-items:stretch}
.console-flow::before{
  content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(250,154,99,.28) 12%,rgba(250,154,99,.28) 88%,transparent)
}
.console-flow>div{position:relative;z-index:1}
.console-flow>div:not(:last-child)::after{display:none}

/* El pie deja de ser el bloque más grande y la cifra real gana presencia. */
.console-foot{padding:.9rem 1rem;gap:.55rem}
.console-foot p{font-size:.78rem;line-height:1.42}
.console-stat{align-items:center;padding-top:.6rem}
.console-stat strong{font-size:1.5rem;line-height:1;letter-spacing:-.02em}
.console-stat small{max-width:16rem}

/* ── Objetivos táctiles en móvil ──────────────────────────────────────────────
   WCAG 2.2 AA (2.5.8) pide 24x24 px como mínimo. En la auditoría a 320/375/414
   salían por debajo: el botón del menú a 17-20px de ancho, el enlace del logo a
   11px de alto, varios enlaces de pie y navegación a 17-18px, y la casilla de
   consentimiento a 17px. Se agranda el área de pulsación sin tocar el tamaño
   visible: el dibujo sigue igual, lo que crece es la zona que responde.
   Los enlaces dentro de un párrafo quedan fuera: la norma los exceptúa y
   engordarlos rompería el interlineado del texto. */
/* El mínimo de 24px es por puntero, no por tamaño de pantalla: con ratón también aplica.
   Fuera de la media query, o los enlaces del pie se quedan en 23px en escritorio. */
.nav-links>a,.nav-dropdown-trigger,.nav-dropdown-menu a,
.bf-col a,
.bf-bottom a,.crumbs a,.mm-mail,.vs-row a,.cmp-foot,a.go,
/* Firma del autor en la entrada: <div class="wtxt"><b><a>. No está dentro de un
   párrafo, así que no le vale la excepción de enlace en línea. Medía 18px. */
.wtxt b a{
  display:inline-flex;align-items:center;min-height:1.5rem
}
/* «Inicio» solo en el panel móvil. El panel es un clon de los enlaces de `.nav-links` colgado
   del <body>: al anclar la regla a `.nav-links`, el original se esconde y el clon no. */
.nav-links .solo-movil{display:none}
/* Variantes del panel del hero.
   ─────────────────────────────────
   Seis landings compartian el chasis EXACTO: cabecera, dos tarjetas en paralelo, cuatro chips
   y pie, con el mismo reparto 665/538 del hero. Cambiar solo la figura de la izquierda no
   bastaba: la silueta seguia siendo la misma en las seis. Estas variantes cambian la
   estructura, que es lo que se reconoce de un vistazo. */

/* Un solo cuerpo, a lo ancho del panel. */
.hero-console--unica .console-main{grid-template-columns:1fr}
/* Las dos tarjetas, una sobre otra: panel alto y estrecho. */
.hero-console--apilado .console-main{grid-template-columns:1fr}
.hero-console--apilado .console-flow{grid-template-columns:repeat(2,1fr)}
/* Sin la fila de chips. */
.hero-console--sin-flujo .console-flow{display:none}
/* Sin pie. */
.hero-console--sin-pie .console-foot{display:none}
/* Metricas en fila horizontal en vez de columna. */
.hero-console--metricas-fila .console-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
/* El rotulo es un hijo mas de la rejilla: sin esto se comia la primera celda y las tres
   metricas se descolocaban a la fila siguiente. */
.hero-console--metricas-fila .console-metrics > span{grid-column:1/-1}
.hero-console--metricas-fila .console-metrics div{text-align:center}

/* Hero de cifras: sin panel. Tres numeros reales, grandes, y su etiqueta. Es la silueta de la
   landing madre, la unica pagina que publica cifras de cuentas gestionadas. */
.hero-cifras{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
.hero-cifras article{position:relative;display:grid;gap:.3rem;padding:clamp(1.1rem,2.5vw,1.5rem) 0;
  border-top:1px solid rgba(255,255,255,.12);
  animation:hcifra 620ms var(--sp-motion-ease) both;animation-delay:calc(var(--i)*110ms + 260ms)}
.hero-cifras article:first-child{border-top:0;padding-top:0}
.hero-cifras strong{font-family:var(--font-mono);font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1;
  color:var(--accent);letter-spacing:-.03em}
.hero-cifras span{font-size:.9rem;color:#b9b4a9;max-width:30ch;text-wrap:pretty}
.hero-cifras em{font-style:normal;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8b867a}
@keyframes hcifra{from{opacity:0;transform:translateY(.7rem)}}

/* Hero documento: la tarjeta parece la portada de un informe. Para la pagina de auditoria. */
.hero-doc{position:relative;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);padding:clamp(1.3rem,3vw,2rem);display:grid;gap:1.1rem;
  box-shadow:0 38px 110px rgba(0,0,0,.42)}
.hero-doc::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.4;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:100% 2.1rem}
.hero-doc-top{position:relative;display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#8b867a}
.hero-doc ol{position:relative;list-style:none;display:grid;gap:.5rem;counter-reset:doc;margin:0;padding:0}
.hero-doc li{display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:baseline;
  font-size:.82rem;color:#d9d4ca;
  animation:hdoc 480ms var(--sp-motion-ease) both;animation-delay:calc(var(--i)*70ms + 220ms)}
.hero-doc li::before{counter-increment:doc;content:"0" counter(doc);
  font-family:var(--font-mono);font-size:.75rem;color:var(--accent)}
.hero-doc-pie{position:relative;display:flex;justify-content:space-between;align-items:center;
  padding-top:.9rem;border-top:1px solid rgba(255,255,255,.1)}
.hero-doc-pie small{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8b867a}
.hero-doc-pie strong{font-family:var(--font-mono);font-size:1.5rem;color:var(--accent)}
@keyframes hdoc{from{opacity:0;transform:translateX(-.5rem)}}

/* Notas de cierre a dos columnas. Una seccion que va «prosa → componente → prosa» se lee como
   una entrada de blog: la cabecera y el componente ocupan 1344px y los parrafos 704, asi que el
   ancho baila y queda medio ancho muerto a la derecha de cada bloque de texto. Estas notas
   ocupan el mismo ancho que el componente que las precede. */
/* Entradilla a ancho completo. La cabecera reparte h2 y `.sub` en dos columnas y clava AMBOS
   en la misma celda de la rejilla, asi que un segundo parrafo se superpone al primero —pasó, y
   se veia el texto encima del texto—. Lo que no cabe en el `.sub` va aqui: mismo ancho que el
   componente de debajo, medida legible. */
.entradilla{max-width:56rem;margin-bottom:clamp(1.6rem,3vw,2.4rem);color:var(--ink-2);
  font-size:1.02rem;line-height:1.7;text-wrap:pretty}
.entradilla strong{color:var(--ink);font-weight:650}

.notas{display:grid;gap:clamp(1.2rem,3vw,2.4rem);padding-top:1.6rem;margin-top:1.6rem;
  border-top:1px solid var(--line)}
.notas p{color:var(--ink-2);font-size:.97rem;line-height:1.66;text-wrap:pretty;margin:0}
.notas p strong{color:var(--ink);font-weight:650}
.notas a:not(.cta){color:var(--ink);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-color:rgba(250,154,99,.6);font-weight:600}
.notas a:not(.cta):hover{color:var(--accent);text-decoration-color:var(--accent)}
@media (min-width:1024px){
  .notas{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Con una sola nota, el filete cruza entero y el texto se queda en la primera columna:
     así se lee como una decisión y no como un párrafo que se quedó corto. */
  .notas:has(> p:only-child) > p{grid-column:1}
}

/* Hueco de imagen pendiente. 17 de las 23 landings no tienen ni una imagen propia y se leen
   como muros de texto. Esto reserva el sitio con una figura que se ve intencionada —no una caja
   gris rota— y que DICE lo que debe ir ahí, para que nadie la publique por descuido.
   Cuando llegue la foto se sustituye el bloque entero por un <figure> normal.

   El aviso «pendiente» no es decorativo: es la salvaguarda. Un test comprueba que no queda
   ninguno cuando se construye con SITE_PUBLICADO=1. */
.ph-fig{position:relative;display:grid;place-items:center;gap:.9rem;overflow:hidden;
  border-radius:var(--r-md);border:1px dashed rgba(23,23,22,.22);background:var(--bg-soft);
  aspect-ratio:16/7;padding:clamp(1.4rem,3vw,2.4rem);text-align:center}
.ph-fig::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(23,23,22,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,23,22,.045) 1px,transparent 1px);background-size:34px 34px;
  mask-image:radial-gradient(70% 90% at 50% 50%,#000,transparent)}
.ph-fig b{position:relative;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.5rem}
.ph-fig b::before{content:"";width:.45rem;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.ph-fig p{position:relative;max-width:34rem;color:var(--muted);font-size:.95rem;text-wrap:pretty}
.ph-fig span{position:relative;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:#767066}
/* Sobre fondo oscuro. */
.ph-fig.on-dark{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.03)}
.ph-fig.on-dark::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.ph-fig.on-dark p{color:#b9b4a9}
@media (max-width:640px){.ph-fig{aspect-ratio:4/3}}

/* Franja legal del pie. Los tres enlaces salían pegados —«Aviso legalPrivacidadCookies»— porque
   el <nav> no llevaba estilo: es marcado nuevo y la hoja no lo contemplaba. Va DESPUÉS de la
   regla de arriba, no dentro: metido en medio de su lista de selectores, el menú y los enlaces
   del pie perdían el mínimo de 24px sin que nada avisara. */
/* El mapa del sitio pasó de cuatro columnas a cinco. La rejilla de las páginas dice
   `repeat(3,auto)`, así que se partía en 3+2 y dejaba vacía media franja. Desde 1180px caben
   las cinco en una fila; la regla lleva `.bigfoot` delante para ganar al <style> de la página
   sin tener que tocar los 41 ficheros. */
@media (min-width:1180px){
  .bigfoot .bf-top{grid-template-columns:1fr 2.5fr}
  .bigfoot .bf-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem}
}
/* Entre 821 y 1179px las cinco no caben al lado de la marca: se estrechan tanto que casi cada
   enlace parte en dos líneas. La marca sube, y las columnas ocupan el ancho entero. */
@media (min-width:821px) and (max-width:1179px){
  .bigfoot .bf-top{grid-template-columns:1fr}
  .bigfoot .bf-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem}
}
.bf-legal{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.35rem}
.bf-legal a{position:relative}
.bf-legal a+a::before{content:"·";position:absolute;left:-.78rem;color:#8b867a}
/* Tabla de datos. Había dos componentes haciendo lo mismo —`.tbl` en las entradas y `.cmp` en
   la comparativa— y encima `.cmp` colisionaba con la tarjeta de precio de asesorías, que usa
   ese mismo nombre para otra cosa. Queda uno solo, aquí, y `.cmp` vuelve a significar tarjeta.
   Con scroll propio: una tabla de seis columnas no encoge, y sin esto se lleva la página
   entera hacia la derecha en móvil. */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);margin-block:1.2rem}
.tbl table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:34rem}
.tbl thead th{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;padding:.9rem 1rem;background:var(--dark);color:var(--cream);border-bottom:2px solid var(--accent)}
.tbl td{padding:.85rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.tbl td b{color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:var(--bg-soft)}
/* Fila destacada: la nuestra dentro de una comparativa. */
/* Reparto de las tablas de TRES columnas. Sin esto el navegador daba 178px a la primera —donde
   «Porcentaje sobre la inversión» partía en dos— y 854px a la última, con líneas de 60
   caracteres. La comparativa de seis columnas se queda como está: ahí sí hace falta el ancho.
   El `:has()` distingue una de otra sin tocar el marcado de ninguna página. */
@media (min-width:1024px){
  .tbl:has(thead th:nth-child(3):last-child) th:first-child,
  .tbl:has(thead th:nth-child(3):last-child) td:first-child{width:15rem}
  .tbl:has(thead th:nth-child(3):last-child) th:nth-child(2),
  .tbl:has(thead th:nth-child(3):last-child) td:nth-child(2){width:18rem}
}
.tbl .nos{background:rgba(250,154,99,.07)}
.tbl .nos td{color:var(--ink);font-weight:500}

/* Texto corrido. Las landings se construyeron enteras a base de tarjetas y no había estilo
   para prosa; cuando empezamos a escribir contenido largo, cuatro páginas se quedaron con el
   texto a ancho completo —1.340px de línea— porque la regla vivía solo en el <style> de ppc. */
/* Oculto a la vista, no al lector. Vivía solo en el <style> de landing-agencia-amazon-fba,
   así que cualquier otra página que lo usara —el <caption> de una tabla, el rótulo que el JS
   marca con .vh— lo enseñaba en pantalla. Aquí lo ve todo el site. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.prose{max-width:44rem;display:grid;gap:1.05rem}
.prose p{color:var(--ink-2);font-size:1.02rem;line-height:1.72;text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:650}
.prose h2,.prose h3{margin-top:1.1rem;font-size:1.35rem;letter-spacing:-.03em;line-height:1.15}
.prose ul,.prose ol{display:grid;gap:.6rem;padding-left:1.15rem;color:var(--ink-2);line-height:1.66}
.prose li strong{color:var(--ink)}
/* Enlaces de contenido, y no solo en prosa. Al pasar dos muros de texto a tabla y a rail, cuatro
   enlaces internos se quedaron sin subrayado ni color: se leían como texto corriente, y son
   enlaces a otras landings. Mismo tratamiento en los tres componentes; en el rail oscuro solo
   se invierte el color. */
/* `:not(.cta)` porque un botón dentro de un párrafo de prosa heredaba este color y este
   subrayado: el CTA del final de los hubs salía en tinta oscura sobre fondo oscuro, ilegible.
   La regla es para enlaces de texto, no para botones. */
.prose a:not(.cta),.tbl td a:not(.cta),.sp-signal-grid p a:not(.cta){color:var(--ink);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-color:rgba(250,154,99,.6);font-weight:600}
.prose a:not(.cta):hover,.tbl td a:not(.cta):hover,.sp-signal-grid p a:not(.cta):hover{color:var(--accent);text-decoration-color:var(--accent)}
[data-motion-decision-rail] p a{color:var(--sp-cream);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-color:rgba(250,154,99,.7);font-weight:600}
[data-motion-decision-rail] p a:hover{color:var(--sp-accent);text-decoration-color:var(--sp-accent)}

/* Las migas dentro del hero negro. El componente venía de las entradas de blog, que van
   sobre fondo claro: sobre el hero hacía falta invertir el color, nada más. */
.hero .crumbs{margin-bottom:.2rem;font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.hero .crumbs a{color:#b9b4a9}
.hero .crumbs a:hover{color:var(--accent)}
.hero .crumbs [aria-current]{color:#8b867a}
.hero .crumbs .sep{color:var(--accent)}

/* Los otros tres arquetipos: blog y descuentos abren sobre fondo claro, contacto sobre un
   panel oscuro. Mismo componente, el color lo decide el contexto. */
.bhero .crumbs,.page .crumbs{margin-bottom:.6rem;font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.bhero .crumbs a{color:var(--muted)}
.bhero .crumbs [aria-current]{color:var(--ink-2)}
.panel .crumbs a{color:#b9b4a9}
.panel .crumbs [aria-current]{color:#8b867a}
.bhero .crumbs .sep,.page .crumbs .sep{color:var(--accent-texto)}

/* Un migajón corto ("FBA") se queda en 23px de ancho: el mínimo es 24 en los dos ejes. */
.crumbs a{min-width:1.5rem;justify-content:center}

/* Las tablas anchas scrollean dentro de su caja en pantallas estrechas, pero nada lo indica:
   se ve media tabla y parece que falta contenido. El aviso solo aparece donde hay scroll. */
.cmp-hint,.tbl-hint{display:none;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:.5rem}
@media (max-width:900px){.cmp-hint,.tbl-hint{display:block}}
/* El ancla del logo se ajustaba a la altura de la imagen: 6px de alto en algunos anchos. */
.nav-in>a:first-child{display:inline-flex;align-items:center;min-height:2.75rem}
/* Casilla de consentimiento del formulario de contacto: medía 17px, también con ratón. */
input[type="checkbox"]{width:1.5rem;height:1.5rem}

@media (max-width:767px){
  .nav .menu-btn{min-width:2.75rem;min-height:2.75rem}

}

/* La consola del hero en móvil. A 390px el componente se rompía en las seis landings:
   - las dos tarjetas seguían una al lado de otra en 311px, así que todos los importes
     partían en dos líneas y el símbolo € caía solo;
   - la fila de flujo mantenía cuatro columnas y se cortaba por la derecha;
   - las etiquetas de las barras que no caben en una línea se salían de su píldora, porque
     la barra tiene alto fijo.
   Se apila, la fila de flujo pasa a dos filas de dos y las barras crecen con su contenido. */
@media (max-width:640px){
  .console-main{grid-template-columns:1fr}
  .console-metrics{grid-template-columns:repeat(2,1fr)}
  .console-metrics strong{white-space:nowrap}
  .console-flow{grid-template-columns:repeat(2,1fr)}
  .console-flow div:not(:last-child)::after{display:none}
  .localbars{height:auto;gap:.45rem}
  .localbars i{height:auto;min-height:1.6rem}
    /* relative + z-index, no static: el relleno de la barra es un ::after absoluto y, sin
     contexto de apilado propio, se pintaba encima de la etiqueta. La barra activa salía
     como un bloque naranja sin texto. */
  .localbars b{position:relative;z-index:1;left:auto;top:auto;translate:none;display:block;padding:.42rem .6rem}
}

/* El gris secundario cambia de sentido dentro del panel oscuro. El mismo #6c6861 que cumple
   sobre el fondo claro de la página (4.54:1) se queda en 3.81:1 sobre el negro del hero, que
   es donde van las migas de pan y los pies de las tarjetas. Aquí tiene que ACLARARSE, no
   oscurecerse: #8b867a da 5.49:1. Esta hoja se carga después del <style> de cada página, así
   que la variable local gana sin tener que tocar las 45. */
.hero,.cuenta.principal{--muted:#8b867a}

/* ===== PALABRAS DESTACADAS DE LOS TITULARES =====
 *
 * Llevaban un subrayado naranja trazado a mano, del feedback del 27/08/2026. Retirado el
 * 12/09/2026 a petición de Aitor: el trazo se quita de todo el site.
 *
 * La regla se queda, vacía de decoración a propósito. `landing-base.css` pinta `.h2 em` y
 * `.hero h1 em` en naranja; sin este `color:inherit` la palabra destacada no perdería el
 * subrayado, cambiaría de color, que no es lo que se ha pedido. Y `font-style:normal` evita
 * que el <em> del marcado salga en cursiva.
 */
.h2 em,.hero h1 em,.panel h1 em{font-style:normal;color:inherit}

/* Plan 4 · bloque 0 (15/09/2026): cuerpo de las tarjetas del sistema a 16 px en móvil; bajaban a 14-15 px. */
@media (max-width:600px){
  .sp-signal-grid p,.sp-process-rail p,.sp-conversion-stack p,.sp-role-grid p,.sp-topic-grid p,.console-foot p{font-size:1rem}
}

/* Plan 4 · bloque 0: la cabecera de la consola baja el estado a su propia línea en vez de partir las dos etiquetas. */
.console-top{flex-wrap:wrap;row-gap:.35rem}
.console-top > *{white-space:nowrap}

/* Plan 4 · bloque 0: el enlace del titular de las tarjetas del sistema medía 21 px de alto (servicios y recursos). */
.sp-signal-grid h3 a{display:inline-block;padding-block:.15rem}

/* Plan 4 · bloque 0: la cabecera del documento del hero baja la etiqueta corta a su línea en vez de partir las dos (medido a 390 px). */
.hero-doc-top{flex-wrap:wrap;row-gap:.35rem}
.hero-doc-top > :last-child{white-space:nowrap}

/* Plan 4 · bloque 0 · T3b (15/09/2026): cuerpo a 16 px en móvil en piezas que los clústeres copiaron del chasis de Barcelona
   (.fuentes, .nota-ads, .como-grid) y en dos clases de cada uno (plan 2: .v-foot y .v-chart-nota; plan 3: .sc-ratio-si y
   .sc-medidor-fin). «html body» y :is() le dan más peso que a la regla de cada página, vaya antes o después de esta hoja. */
@media (max-width:600px){
  html body :is(.fuentes p,.nota-ads,.como-grid p,.v-card .v-foot,.v-chart-nota,.sc-ratio-si,.sc-medidor-fin){font-size:1rem}
}

/* Plan 4 · bloque 0 · R1 (15/09/2026): en la calculadora del mes de las páginas de países, las dos barras comparten pista.
   Cada fila era su propia rejilla con la etiqueta en `auto`: una etiqueta larga («Stock en Alemania o Francia, con el
   Programa Paneuropeo») se comía la pista y la barra mayor salía más corta que la menor (0 px a 640 en Bélgica). Con
   subgrid las filas usan las columnas de .al-mes-filas; la etiqueta llega a 16rem como mucho y parte en dos líneas. */
@media (min-width:621px){
  html body main .al-mes-filas{grid-template-columns:minmax(9rem,max-content) minmax(0,1fr) minmax(7rem,max-content);column-gap:1rem}
  html body main .al-mes-fila{grid-column:1/-1;grid-template-columns:subgrid}
  html body main .al-mes-fila > span{max-width:16rem}
}

/* Plan 4 · bloque 0 · T14 (25/09/2026): una sola primera pantalla para todas las landings con hero oscuro, extendida desde el piloto
   de /agencia-amazon-fba/. «html body main» gana a las reglas de cada página, vaya antes o después de esta hoja. */
html body main .hero:has(> .hero-live)::before{content:none}
html body main .hero-live{-webkit-mask-image:none;mask-image:none}
html body main .hero-live > :not(.hero-luz):not(.hero-puntos):not(.hero-horizonte){display:none}
html body main .hero-live:not(:has(> .hero-luz))::before{content:"";position:absolute;right:-6%;top:50%;width:min(60rem,80%);aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(250,154,99,.2),rgba(250,154,99,.07) 45%,transparent 76%)}
html body main .hero-live:not(:has(> .hero-puntos))::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);
  background-size:24px 24px;-webkit-mask-image:radial-gradient(40% 56% at 80% 48%,#000,rgba(0,0,0,.4) 50%,transparent 78%);
  mask-image:radial-gradient(40% 56% at 80% 48%,#000,rgba(0,0,0,.4) 50%,transparent 78%)}
html body main .hero:has(> .hero-live):not(:has(.hero-horizonte))::after{content:"";position:absolute;z-index:1;inset:auto;left:50%;top:calc(100% - 6rem);
  width:max(140%,64rem);height:auto;aspect-ratio:1;transform:translateX(-50%);border:0;border-top:1px solid rgba(250,154,99,.5);border-radius:50%;
  background:none;box-shadow:inset 0 3rem 7rem -3.5rem rgba(250,154,99,.38),0 -2rem 8rem -3rem rgba(250,154,99,.42);opacity:1;pointer-events:none}
html body main .hero .badge b{background:var(--accent);color:#17130f}
html body main .hero .hero-tags span{display:inline-flex;align-items:center;padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);font:500 .75rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#b9b4a9}
html body main .hero #hero-h1 em{font-style:normal;color:inherit;background:linear-gradient(90deg,var(--accent),#ffc39e) no-repeat 0 92%/var(--subraya,100%) .09em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html body main .hero .hero-ctas .cta:not(.cta-sec):not(.ghost){background:var(--accent);color:#17130f;border-color:var(--accent);box-shadow:0 14px 34px -10px rgba(250,154,99,.55)}
html body main .hero .hero-ctas .cta:not(.cta-sec):not(.ghost):hover{background:#ffb183;border-color:#ffb183;color:#17130f}
html body main .hero .hero-ctas :is(.cta-sec,.ghost){min-height:2.75rem;padding:.78rem 1.5rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26);
  box-shadow:none;text-decoration:none}
html body main .hero .hero-ctas :is(.cta-sec,.ghost):hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
/* Categorías (plan 2): mismos botones con sus clases propias; el secundario ya no pasa a enlace subrayado en móvil. */
html body main .hero .v-acciones .v-cta--sec{display:inline-flex;align-items:center;min-height:2.75rem;padding:.78rem 1.5rem;border-radius:999px;font-weight:600;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26);box-shadow:none;text-decoration:none}
html body main .hero .v-acciones .v-cta--sec:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
@media (max-width:900px){
  html body main .hero-live:not(:has(> .hero-luz))::before{right:auto;left:50%;top:auto;bottom:-18rem;width:44rem;transform:translateX(-50%)}
  html body main .hero-live:not(:has(> .hero-puntos))::after{-webkit-mask-image:radial-gradient(80% 30% at 50% 88%,#000,transparent 80%);mask-image:radial-gradient(80% 30% at 50% 88%,#000,transparent 80%)}
  html body main .hero:has(> .hero-live):not(:has(.hero-horizonte))::after{top:calc(100% - 3.5rem)}
}
@media (max-width:400px){html body main .hero .hero-ctas .cta{padding-inline:1.15rem}}
@media (prefers-reduced-motion:no-preference){html body main .hero-live:not(:has(> .hero-luz))::before{animation:t14-respira 9s ease-in-out infinite}}
@keyframes t14-respira{50%{opacity:.7}}

/* Plan 4 · bloque 0 · T14b (25/09/2026): el mismo fondo en los heroes oscuros sin capa de efecto (asesorías, listing, Ads, calculadora, glosario y nosotros): luz cálida en el
   fondo de la tarjeta, sin la rejilla naranja (la trama de puntos se veía a través de las tarjetas) y el horizonte en lugar de los aros. El botón principal
   de la columna de texto, naranja también fuera de .hero-ctas. */
html body main section.hero:not(:has(> .hero-live)){background:radial-gradient(circle min(34rem,70vw) at 82% 50%,rgba(250,154,99,.2),rgba(250,154,99,.07) 45%,transparent 76%) no-repeat,var(--dark,#0b0b0a)}
html body main section.hero:not(:has(> .hero-live))::before{content:none}
html body main section.hero:not(:has(> .hero-live)):not(:has(.hero-horizonte))::after{content:"";position:absolute;z-index:1;inset:auto;left:50%;top:calc(100% - 6rem);
  width:max(140%,64rem);height:auto;aspect-ratio:1;transform:translateX(-50%);border:0;border-top:1px solid rgba(250,154,99,.5);border-radius:50%;
  background:none;box-shadow:inset 0 3rem 7rem -3.5rem rgba(250,154,99,.38),0 -2rem 8rem -3rem rgba(250,154,99,.42);opacity:1;filter:none;pointer-events:none}
html body main .hero .hero-in .cta:not(.cta-sec):not(.ghost){background:var(--accent);color:#17130f;border-color:var(--accent);box-shadow:0 14px 34px -10px rgba(250,154,99,.55)}
html body main .hero .hero-in .cta:not(.cta-sec):not(.ghost):hover{background:#ffb183;border-color:#ffb183;color:#17130f}
@media (max-width:900px){
  html body main section.hero:not(:has(> .hero-live)){background:radial-gradient(circle 26rem at 50% 100%,rgba(250,154,99,.2),rgba(250,154,99,.07) 45%,transparent 76%) no-repeat,var(--dark,#0b0b0a)}
  html body main section.hero:not(:has(> .hero-live)):not(:has(.hero-horizonte))::after{top:calc(100% - 3.5rem)}
}

/* Plan 4 · bloque 0 · T14c (25/09/2026): los heroes editoriales claros pasan a la tarjeta oscura (servicios, recursos, descuentos y blog, y sus gemelas en catalán). Eran la única
   primera pantalla distinta del sitio: fondo claro, cabecera clara y la palabra destacada en naranja. Ahora, la misma tarjeta
   oscura que el resto, con su luz y su horizonte, y la cabecera oscura (el HTML ya no lleva data-sp-light-top). */
html body main > section.bhero{position:relative;overflow:hidden;isolation:isolate;width:calc(100% - 2rem);max-width:none;margin:.5rem auto clamp(2.5rem,5vw,4.5rem);
  padding:clamp(7rem,9vw,8rem) clamp(1.4rem,5vw,5rem) clamp(2.8rem,4.5vw,4rem);border-radius:1.5rem;border:1px solid rgba(255,255,255,.075);
  box-shadow:0 36px 100px rgba(9,9,9,.2);color:#fff;
  background:radial-gradient(circle min(34rem,70vw) at 82% 45%,rgba(250,154,99,.2),rgba(250,154,99,.07) 45%,transparent 76%) no-repeat,#0b0b0a}
html body main > section.bhero > *{position:relative;z-index:2}
html body main > section.bhero::after{content:"";position:absolute;z-index:1;left:50%;top:calc(100% - 5rem);width:max(140%,64rem);aspect-ratio:1;transform:translateX(-50%);
  border-top:1px solid rgba(250,154,99,.5);border-radius:50%;box-shadow:inset 0 3rem 7rem -3.5rem rgba(250,154,99,.38),0 -2rem 8rem -3rem rgba(250,154,99,.42);pointer-events:none}
html body main > section.bhero h1{color:#fff}
html body main > section.bhero h1 + *{margin-top:1.4rem}
html body main > section.bhero .hidx{padding:1.1rem 1.25rem .5rem;border:1px solid rgba(255,255,255,.12);border-radius:1.1rem}
html body main > section.bhero h1 em{font-style:normal;color:inherit;background:linear-gradient(90deg,var(--accent),#ffc39e) no-repeat 0 92%/var(--subraya,100%) .09em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html body main > section.bhero :is(.kicker,.sub,.quick,p){color:#b9b4a9}
html body main > section.bhero .quick a,html body main > section.bhero .sub a{color:#fff;text-decoration-color:var(--accent)}
html body main > section.bhero .crumbs a{color:#b9b4a9}
html body main > section.bhero .crumbs [aria-current]{color:#8b867a}
html body main > section.bhero .crumbs .sep{color:var(--accent)}
html body main > section.bhero .bhero-tarifa{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.1)}
html body main > section.bhero .bhero-tarifa a{background:#141312}
html body main > section.bhero .bhero-tarifa a:is(:hover,:focus-visible){background:#1d1b19}
html body main > section.bhero .bhero-tarifa strong{color:#fff}
html body main > section.bhero .bhero-tarifa span{color:#b9b4a9}
html body main > section.bhero .bhero-tarifa em{color:var(--accent)}
html body main > section.bhero :is(.rc-libre,.hidx){background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#fff}
html body main > section.bhero :is(.rc-libre,.hidx) *{border-color:rgba(255,255,255,.1)}
html body main > section.bhero :is(.rc-libre,.hidx) :is(b,strong,a){color:#fff}
html body main > section.bhero :is(.rc-libre,.hidx) :is(i,span,.hidx-t){color:#b9b4a9}
@media (max-width:900px){html body main > section.bhero::after{top:calc(100% - 3rem)}}
@media (max-width:400px){html body main > section.bhero .rc-libre a{grid-template-columns:1.6rem 1fr;row-gap:.2rem} html body main > section.bhero .rc-libre a i{grid-column:2}}

/* Plan 4 · bloque 0 · T15 (26/09/2026): el panel de contacto, con la misma luz, el mismo horizonte y el mismo subrayado que la primera pantalla
   del resto del sitio (T14). Sin la rejilla naranja. */
html body main .duo > section.panel{background:radial-gradient(circle 30rem at 88% 12%,rgba(250,154,99,.2),rgba(250,154,99,.07) 45%,transparent 76%) no-repeat,var(--dark,#0b0b0a)}
html body main .duo > section.panel::before{content:none}
html body main .duo > section.panel > *{position:relative;z-index:1}
html body main .duo > section.panel::after{content:"";position:absolute;z-index:0;left:50%;top:calc(100% - 4rem);width:max(160%,50rem);aspect-ratio:1;transform:translateX(-50%);
  border-top:1px solid rgba(250,154,99,.5);border-radius:50%;box-shadow:inset 0 3rem 7rem -3.5rem rgba(250,154,99,.38),0 -2rem 8rem -3rem rgba(250,154,99,.42);pointer-events:none}
html body main .duo > section.panel h1 em{font-style:normal;color:inherit;background:linear-gradient(90deg,var(--accent),#ffc39e) no-repeat 0 92%/var(--subraya,100%) .09em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* El cierre de contacto va dentro de main.wrap y la hoja le volvía a dar el ancho de .wrap (R1 lo arregló solo en castellano). */
html body main.wrap > .sp-extension{width:auto}