/* Rediseño · 01 portada: metal líquido en lugar de la red de puntos y tarjetas de cristal (prompts/01-portada.md) */
/* El metal es una capa fija detrás de toda la web (sustituye a su red de puntos #bgnet) y se mueve siempre.
   100lvh: la barra de direcciones del móvil no la redimensiona al aparecer y desaparecer */
.metal{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;overflow:hidden;background:#060908}
.metal img,.metal canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.metal canvas{opacity:0;transition:opacity 1.2s ease}
.metal.fondo-on canvas{opacity:1}
/* Velo del metal según la sección en el centro de la pantalla: entero en la portada y en las secciones ya rediseñadas
   (ponen su tono encima); atenuado en el resto, para que sus textos se lean. Lo cambia un IntersectionObserver */
.metal::after{content:"";position:absolute;inset:0;background:#060908;opacity:.8;transition:opacity .9s ease}
.metal[data-velo="0"]::after{opacity:0}
.hero{isolation:isolate}
/* Sin franja negra al final de la portada (salvo con Servicios en «Original», cuya sección clara la espera) */
html:not([data-svc-bg="original"]) .hero::after{display:none}
/* Velo a la izquierda: el titular y el texto se leen siempre; a la derecha el metal se ve entero. Se desvanece abajo */
.h-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,9,8,.88) 0%,rgba(6,9,8,.66) 36%,rgba(6,9,8,.2) 68%,rgba(6,9,8,.3) 100%);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 180px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 180px),transparent)}
/* Tarjetas flotantes: cristal sobre el metal */
.hero .fl{background:rgba(9,13,11,.5);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(238,243,239,.14);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)}
/* Letra de los titulares (para comparar). «Actual» deja la del sistema, como estaba */
html[data-font="unbounded"]{--disp:'Unbounded','Arial Black',system-ui,sans-serif}
html[data-font="sora"]{--disp:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif}
html[data-font="unbounded"] .display{font-size:clamp(30px,4.9vw,70px);line-height:1.06;letter-spacing:-.025em}
html[data-font="unbounded"] .h1{font-size:clamp(28px,4.4vw,60px);letter-spacing:-.025em}
html[data-font="unbounded"] .h2{font-size:clamp(23px,3vw,40px);letter-spacing:-.02em}
html[data-font="sora"] .display,html[data-font="sora"] .h1{font-weight:600;letter-spacing:-.045em}
html[data-font="sora"] .h2{font-weight:600;letter-spacing:-.04em}
/* Encaje (prompts/03): la portada ocupa justo una pantalla, menú incluido, y su contenido se ajusta al alto
   (Jorge la ve a unos 1536×650). Las tarjetas flotantes se reducen con zoom, que encoge también su hueco */
@media (min-width:721px){
  .hero{box-sizing:border-box;min-height:100vh;min-height:100svh}
  .hero-in{padding-block:clamp(16px,5vh,56px) clamp(28px,8vh,96px)}
  .hx{gap:clamp(16px,3.4vh,28px)}
  html[data-font="unbounded"] .hero .display{font-size:clamp(30px,min(4.9vw,10vh),70px)}
  html:not([data-font="unbounded"]) .hero .display{font-size:clamp(34px,min(6vw,11.5vh),84px)}
}
@media (min-width:721px) and (max-height:860px){.floats{zoom:.9}}
@media (min-width:721px) and (max-height:780px){.floats{zoom:.82}}
@media (min-width:721px) and (max-height:700px){.floats{zoom:.74}.hero .lead{font-size:16.5px}}
@media (min-width:721px) and (max-height:620px){.floats{zoom:.66}}
@media (min-width:721px) and (max-height:560px){.floats{zoom:.58}}
@media (max-width:720px){
  .h-scrim{background:linear-gradient(180deg,rgba(6,9,8,.82) 0%,rgba(6,9,8,.68) 55%,rgba(6,9,8,.45) 100%)}
}
@media (prefers-reduced-motion:reduce){.metal canvas,.metal::after{transition:none}}

/* Rediseño · 02 servicios: tono sobre el metal vivo (5 opciones), 3 estilos de icono y 3 entradas nuevas
   (prompts/02-servicios.md y 02b-fondo-vivo-y-entrada.md) */
/* Tono: capa translúcida sobre el metal fijo, que se sigue moviendo debajo. Bordes difuminados: sin franjas */
#home-servicios .s-tono{position:absolute;inset:0;z-index:0;pointer-events:none;display:none;background:rgba(var(--s-tono));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--s-borde),#000 calc(100% - var(--s-borde)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--s-borde),#000 calc(100% - var(--s-borde)),transparent 100%)}
#home-servicios{--s-borde:150px}
@media (max-width:720px){#home-servicios{--s-borde:70px}}
/* Velo detrás del titular, en el color de cada tono */
#home-servicios .s-velo{position:absolute;inset:0;z-index:0;pointer-events:none;display:none;background:linear-gradient(180deg,rgba(var(--s-base),0) 0,rgba(var(--s-base),.8) 120px,rgba(var(--s-base),.72) 290px,rgba(var(--s-base),0) 430px)}
html:not([data-svc-bg="original"]) #home-servicios :is(.s-tono,.s-velo){display:block}
/* Sus puntitos y sus fundidos a negro de los bordes, solo en «Original» */
html:not([data-svc-bg="original"]) #home-servicios::before,html:not([data-svc-bg="original"]) #home-servicios::after{display:none}
html:not([data-svc-bg="original"]) #home-servicios{background:transparent}
html[data-svc-bg="grafito"] #home-servicios{--s-tono:20,25,23,.6;--s-base:16,20,18}
html[data-svc-bg="titanio"] #home-servicios{--s-tono:80,87,83,.55;--s-base:40,45,43}
html[data-svc-bg="verde"] #home-servicios{--s-tono:12,46,30,.64;--s-base:9,30,19}
/* Plata: satén claro; el metal se intuye debajo como ondas suaves */
html[data-svc-bg="plata"] #home-servicios{--s-tono:222,227,224,.86;--s-base:224,229,226}

/* Tonos oscuros: sus colores de modo oscuro dentro de la sección (la sección conserva la clase light) */
html:is([data-svc-bg="grafito"],[data-svc-bg="titanio"],[data-svc-bg="verde"]) #home-servicios{--bg:#060908;--card:#0E1412;--card2:#141C19;--line:#1D2824;--line2:#26332E;--line4:#3A4A43;--fg:#EEF3EF;--muted:#A3AFA8;--dim:#AEB9B3;--acc:#5EE0A0;--accbg:#10261C;--on-acc:#06100B;--acc-glow:rgba(94,224,160,.38);--spot:rgba(94,224,160,.10);--grad:linear-gradient(115deg,#5EE0A0 0%,#C4F26A 100%);color-scheme:dark;color:var(--fg)}
html[data-svc-bg="plata"] #home-servicios{--dim:#333D38;--muted:#34403A;--grad:linear-gradient(115deg,#08613A 0%,#2E5C07 100%)}

/* Tarjetas de cristal (sin desenfoque de fondo: con el metal vivo detrás habría que repintarlo en cada imagen) */
html:is([data-svc-bg="grafito"],[data-svc-bg="titanio"],[data-svc-bg="verde"]) #home-servicios .scard:not(.pack){background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(10,14,12,.5);border-color:rgba(238,243,239,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -40px rgba(0,0,0,.85)}
html[data-svc-bg="plata"] #home-servicios .scard:not(.pack){background:rgba(255,255,255,.62);border-color:rgba(10,15,12,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 24px 50px -36px rgba(10,20,15,.35)}
html:not([data-svc-bg="original"]) #home-servicios .scard:not(.pack):hover{border-color:var(--acc);box-shadow:0 30px 60px -36px var(--acc-glow)}

/* Iconos: el suyo (.ic-orig) o uno de los tres nuevos */
#home-servicios .sc-tile .ic{display:none;width:26px;height:26px}
@media (min-width:1081px){#home-servicios .sc-tile .ic{width:34px;height:34px}}
html:not([data-svc-ic="original"]) #home-servicios .sc-tile .ic-orig{display:none}
html[data-svc-ic="linea"] #home-servicios .ic-linea,html[data-svc-ic="cromo"] #home-servicios .ic-cromo,html[data-svc-ic="duo"] #home-servicios .ic-duo{display:block}
html:not([data-svc-ic="original"]) #home-servicios .sc-tile{transition:color .3s,border-color .3s}
html[data-svc-ic="linea"] #home-servicios .sc-tile{background:rgba(255,255,255,.05);border:1px solid rgba(238,243,239,.16);color:#EEF3EF}
html[data-svc-ic="linea"] #home-servicios .scard:hover .sc-tile{color:#5EE0A0;border-color:rgba(94,224,160,.45)}
html[data-svc-ic="cromo"] #home-servicios .sc-tile{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 60%),#0B100E;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -16px rgba(0,0,0,.8)}
html[data-svc-ic="duo"] #home-servicios .sc-tile{background:rgba(94,224,160,.08);border:1px solid rgba(94,224,160,.3);color:#5EE0A0}
/* En Plata, iconos oscuros (la tarjeta del sistema completo sigue oscura y conserva los claros) */
html[data-svc-bg="plata"][data-svc-ic="linea"] #home-servicios .scard:not(.pack) .sc-tile{background:rgba(255,255,255,.55);border-color:rgba(10,15,12,.14);color:#16201B}
html[data-svc-bg="plata"][data-svc-ic="linea"] #home-servicios .scard:not(.pack):hover .sc-tile{color:#0B8550;border-color:rgba(11,133,80,.45)}
html[data-svc-bg="plata"][data-svc-ic="cromo"] #home-servicios .scard:not(.pack) .sc-tile{background:linear-gradient(180deg,#FFFFFF,#E2E7E4);border-color:rgba(10,15,12,.12);box-shadow:inset 0 1px 0 #fff,0 14px 30px -18px rgba(10,20,15,.45)}
html[data-svc-bg="plata"] #home-servicios .scard:not(.pack) .ic-cromo{stroke:url(#s-cromo-osc)}
html[data-svc-bg="plata"][data-svc-ic="duo"] #home-servicios .scard:not(.pack) .sc-tile{background:rgba(11,133,80,.08);border-color:rgba(11,133,80,.3);color:#0B8550}

/* Entrada de las tarjetas (prompts/03): cada una hace su animación completa, por tiempo, al aparecer en pantalla
   (IntersectionObserver añade .dentro); ligada al scroll terminaba antes de que la sección llegara arriba y no se veía.
   Se repite al volver a entrar desde abajo. Solo transform y opacidad. Estado oculto solo con html.anim (hay JS y no se
   pide reducir movimiento); «Original» queda con su .rv */
html:not([data-svc-in="original"]) #home-servicios{overflow:clip}
/* Cada tarjeta va dentro de una caja quieta (.s-celda, la pone el script): el observador mira la caja, porque la
   tarjeta desplazada (en 3D, inclinada y 220 px más abajo) nunca contaría como «en pantalla» */
#home-servicios .s-celda{display:flex;flex-direction:column;min-width:0}
#home-servicios .s-celda>.scard{flex:1 1 auto}
html.anim:not([data-svc-in="original"]) #home-servicios .scard{animation:none;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease,border-color .25s,box-shadow .25s;transition-delay:var(--d,0ms),var(--d,0ms),0ms,0ms}
html.anim[data-svc-in="cascada"] #home-servicios .s-celda:not(.dentro) .scard{opacity:0;transform:translateY(120px) scale(.86)}
html.anim[data-svc-in="juntan"] #home-servicios .s-celda:nth-child(3n+1):not(.dentro) .scard{opacity:0;transform:translateX(-260px) rotate(-6deg)}
html.anim[data-svc-in="juntan"] #home-servicios .s-celda:nth-child(3n+2):not(.dentro) .scard{opacity:0;transform:translateY(180px)}
html.anim[data-svc-in="juntan"] #home-servicios .s-celda:nth-child(3n):not(.dentro) .scard{opacity:0;transform:translateX(260px) rotate(6deg)}
html.anim[data-svc-in="prof"] #home-servicios .s-celda{perspective:1100px}
html.anim[data-svc-in="prof"] #home-servicios .scard{transform-origin:50% 100%;transition-duration:1.1s,.8s,.25s,.25s}
html.anim[data-svc-in="prof"] #home-servicios .s-celda:not(.dentro) .scard{opacity:0;transform:translateY(220px) rotateX(60deg) scale(.75)}
/* Al aterrizar, un brillo diagonal recorre la tarjeta (a juego con el metal) */
#home-servicios .s-brillo{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}
#home-servicios .s-brillo::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-55%;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 45%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.16) 55%,transparent);transform:skewX(-14deg);opacity:0}
html.anim:not([data-svc-in="original"]) #home-servicios .s-celda.dentro .s-brillo::before{animation:s-brillo 1.1s cubic-bezier(.4,0,.2,1) calc(var(--d,0ms) + 520ms) both}
@keyframes s-brillo{0%{opacity:0;transform:translateX(0) skewX(-14deg)}15%{opacity:1}100%{opacity:0;transform:translateX(420%) skewX(-14deg)}}

/* Móvil: hacia abajo en vez de carrusel («Lista» o «Tarjetas»; «Carrusel» es el suyo) */
@media (max-width:720px){
  html:not([data-svc-mov="carrusel"]) #home-servicios .swipe-h{display:none}
  html:not([data-svc-mov="carrusel"]) #home-servicios #home-svc{display:flex!important;flex-direction:column;gap:10px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  html:not([data-svc-mov="carrusel"]) #home-servicios #home-svc>*{flex:none;width:auto}
  html[data-svc-mov="lista"] #home-servicios .scard{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"ic t" "ic go";align-items:center;column-gap:14px;row-gap:3px;text-align:left;min-height:0;padding:14px 16px;border-radius:18px}
  html[data-svc-mov="lista"] #home-servicios .sc-tile{grid-area:ic;width:52px;height:52px;border-radius:15px;margin:0}
  html[data-svc-mov="lista"] #home-servicios .scard b{grid-area:t;align-self:end;font-size:16.5px;margin:0;line-height:1.2}
  html[data-svc-mov="lista"] #home-servicios .sc-line{display:none}
  html[data-svc-mov="lista"] #home-servicios .sc-go{grid-area:go;align-self:start;margin:0;padding:0;font-size:13.5px}
  html[data-svc-mov="lista"] #home-servicios .sc-badge{left:auto;right:14px;transform:none}
  html[data-svc-mov="lista"] #home-servicios .scard.pack{margin-top:8px}
  html[data-svc-mov="tarjetas"] #home-servicios .scard{min-height:0;padding:24px 18px 20px}
  /* Entradas en móvil: cada fila o tarjeta al llegar a la pantalla (en el carrusel, al deslizarla) */
  html.anim[data-svc-in="cascada"] #home-servicios .s-celda:not(.dentro) .scard{transform:translateY(70px) scale(.92)}
  html.anim[data-svc-in="juntan"] #home-servicios .s-celda:nth-child(odd):not(.dentro) .scard{transform:translateX(-120px) rotate(-4deg)}
  html.anim[data-svc-in="juntan"] #home-servicios .s-celda:nth-child(even):not(.dentro) .scard{transform:translateX(120px) rotate(4deg)}
  html.anim[data-svc-in="prof"] #home-servicios .s-celda:not(.dentro) .scard{transform:translateY(120px) rotateX(50deg) scale(.85)}
}

/* Rediseño · 03 «¿Qué negocio tienes?» (prompts/03): la sección cabe en una pantalla, iconos de negocio nuevos y un
   destello en la pregunta del móvil al llegar */
/* Encaje: en ordenador, una «slide» de una pantalla con el móvil entero. Su regla para pantallas bajas no funcionaba:
   la anula su .nt-phone{height:700px}, que va después; aquí gana por ser más específica */
@media (min-width:721px){
  #home-sectores{--np-pad:clamp(14px,3.5vh,56px);box-sizing:border-box;min-height:100vh;min-height:100svh;padding-block:calc(72px + var(--np-pad)) var(--np-pad);display:flex;align-items:center}
  #home-sectores > .wrap{width:100%}
  #home-sectores .nt-phone{height:min(700px,calc(100svh - 72px - 2 * var(--np-pad)));min-height:0}
}
/* En el móvil real, el mismo tope (su versión móvil pone min-height:640px, que lo impedía) */
@media (max-width:720px){#home-sectores .nt-phone{height:min(700px,calc(100svh - 96px));min-height:0}}
/* Dentro del móvil, todo se ajusta al alto para que no se corte nada */
#home-sectores .np-time{margin-top:clamp(8px,3vh,26px);font-size:clamp(42px,8.6vh,68px)}
#home-sectores .np-body{margin-top:clamp(10px,2.4vh,20px)}
@media (max-height:760px){
  #home-sectores .nt-phone{padding-top:16px;padding-bottom:12px}
  #home-sectores .np-time{margin-top:clamp(6px,2vh,26px);font-size:clamp(36px,7vh,68px)}
  #home-sectores .np-date{margin-top:2px}
  #home-sectores .np-ask{padding:14px}
  #home-sectores .np-ask .np-t>b{font-size:20px}
  #home-sectores .np-ask .np-ch{gap:6px;margin-top:4px}
  #home-sectores .np-ask .np-ch button,#home-sectores .np-ask .np-ch a{padding:9px 10px;font-size:13.5px}
  #home-sectores .np-list{gap:6px}
  #home-sectores .np-n{padding:9px 11px}
}
@media (max-height:620px){
  #home-sectores .np-date{display:none}
  #home-sectores .np-ask .np-t>span:not(.np-h):not(.np-ch){display:none}
}
@media (max-height:600px){#home-sectores .np-hint{display:none}#home-sectores .np-list .np-n:nth-child(3){display:none}}
/* Negocio elegido en pantallas bajas: tres avisos en vez de cuatro, para que el enlace del plan se vea */
@media (max-height:720px){#home-sectores .np-list .np-n:nth-child(4){display:none}#home-sectores .np-sel{margin-bottom:6px}}

/* En el móvil, su barra fija «Pedir demo gratis» tapaba el teléfono: se aparta mientras se ve esta sección, que ya
   tiene su propio botón debajo (la barra de prototipo baja a su sitio) */
@media (max-width:720px){html.en-negocio .mcta.show{transform:translateY(160%)}}

/* Iconos de negocio: los nuevos (.bz-n) o los suyos (.bz-o) */
html[data-biz-ic="nuevos"] #home-sectores .bz-o,html:not([data-biz-ic="nuevos"]) #home-sectores .bz-n{display:none}
#home-sectores .np-ask .np-t>b{line-height:1.2}
#home-sectores .bz-n{flex:none;color:var(--np-ic,#5EE0A0)}
#home-sectores .np-ch button:hover .bz-n{color:inherit}
#home-sectores .np-sel .bz-n{width:15px;height:15px}
html[data-biz-ic="nuevos"] #home-sectores .np-ask .np-ch button{background:rgba(238,243,239,.08);border-color:rgba(238,243,239,.13)}
html[data-biz-ic="nuevos"] #home-sectores .np-ask .np-ch button:hover{background:var(--np-hl,#5EE0A0);border-color:var(--np-hl,#5EE0A0)}

/* Destello: un reflejo de luz recorre «¿Qué negocio tienes?» y después los botones se iluminan uno a uno.
   Se repite cada vez que la sección entra desde abajo; nada con «reducir movimiento» (sin html.anim) */
html.anim #home-sectores .nt-phone.brilla .np-ask .np-t>b{display:inline-block;padding-bottom:.16em;margin-bottom:-.16em;background:linear-gradient(100deg,#EEF3EF 0%,#EEF3EF 38%,#FFFFFF 44%,#C4F26A 48%,#FFFFFF 52%,rgba(238,243,239,.26) 60%,rgba(238,243,239,.26) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;transform-origin:0 60%;animation:np-brillo 1.5s cubic-bezier(.45,0,.2,1) .3s both,np-halo 1.5s ease .3s both,np-latido .9s cubic-bezier(.3,1.4,.5,1) .55s both}
@keyframes np-brillo{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes np-latido{0%,100%{transform:none}45%{transform:scale(1.07)}}
@keyframes np-halo{0%,100%{filter:none}35%,60%{filter:drop-shadow(0 0 16px rgba(196,242,106,.85))}}
html.anim #home-sectores .nt-phone.brilla .np-ask .np-ch>*{animation:np-chip .9s ease both;animation-delay:calc(1.35s + var(--k,0) * 90ms)}
@keyframes np-chip{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 1px #5EE0A0,0 0 22px rgba(94,224,160,.55);background-color:rgba(94,224,160,.22)}}
#home-sectores .np-ch>:nth-child(1){--k:0}
#home-sectores .np-ch>:nth-child(2){--k:1}
#home-sectores .np-ch>:nth-child(3){--k:2}
#home-sectores .np-ch>:nth-child(4){--k:3}
#home-sectores .np-ch>:nth-child(5){--k:4}
#home-sectores .np-ch>:nth-child(6){--k:5}
#home-sectores .np-ch>:nth-child(7){--k:6}
#home-sectores .np-ch>:nth-child(8){--k:7}
#home-sectores .np-ch>:nth-child(9){--k:8}
#home-sectores .np-ch>:nth-child(10){--k:9}

/* Rediseño · fuera los restos de negro y lima (generado por 07_tonos.py) */
@keyframes npGlow-osc{0%,100%{box-shadow:0 0 0 4px rgba(201,210,224,.12),0 24px 60px -20px rgba(201,210,224,.45)}50%{box-shadow:0 0 0 8px rgba(201,210,224,.05),0 24px 60px -20px rgba(201,210,224,.6)}}
html[data-paleta="marino"] .fl{background:rgba(18,32,63,.82)}
html[data-paleta="perla"] .fl{background:rgba(255,255,255,.82)}
html[data-paleta="marino"] .scard.pack{background:radial-gradient(420px 260px at 50% 0%,rgba(201,210,224,.24),transparent 70%),linear-gradient(170deg,#1A2A4D,#0E1A33 75%);border-color:rgba(201,210,224,.55)}
html[data-paleta="perla"] .scard.pack{background:radial-gradient(420px 260px at 50% 0%,rgba(201,210,224,.24),transparent 70%),linear-gradient(170deg,#1A2A4D,#0E1A33 75%);border-color:rgba(201,210,224,.55)}
html[data-paleta="marino"] .scard.pack .sc-tile{background:#F4F6FA;color:#0E1A33}
html[data-paleta="perla"] .scard.pack .sc-tile{background:#F4F6FA;color:#0E1A33}
html[data-paleta="marino"] .scard.pack{--fg:#F4F6FA;--muted:#B9C3D2;--acc:#C9D2E0}
html[data-paleta="perla"] .scard.pack{--fg:#F4F6FA;--muted:#B9C3D2;--acc:#C9D2E0}
html[data-paleta="marino"] .sct:hover .sct-ic{background:rgba(14,26,51,.14)}
html[data-paleta="perla"] .sct:hover .sct-ic{background:rgba(255,255,255,.14)}
html[data-paleta="marino"] .sct:hover small{color:rgba(14,26,51,.75)}
html[data-paleta="perla"] .sct:hover small{color:rgba(255,255,255,.75)}
html[data-paleta="marino"] .step.on .step-v{border-color:rgba(201,210,224,.45);background:linear-gradient(160deg,rgba(201,210,224,.14),var(--card2) 70%)}
html[data-paleta="perla"] .step.on .step-v{border-color:rgba(20,33,61,.45);background:linear-gradient(160deg,rgba(20,33,61,.14),var(--card2) 70%)}
html[data-paleta="marino"] .sv-dot{box-shadow:0 0 0 5px rgba(201,210,224,.18)}
html[data-paleta="perla"] .sv-dot{box-shadow:0 0 0 5px rgba(20,33,61,.18)}
html[data-paleta="marino"] .nt-phone{border:10px solid #1C2B4B;box-shadow:0 0 0 1px #33456B,0 60px 120px -40px rgba(0,0,0,.9),0 0 90px -30px var(--acc-glow);background:radial-gradient(120% 70% at 20% 0%,rgba(201,210,224,.35),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(169,194,238,.22),transparent 60%),linear-gradient(170deg,#1A2A4D,#050A19 70%);color:#F4F6FA}
html[data-paleta="perla"] .nt-phone{border:10px solid #1C2B4B;box-shadow:0 0 0 1px #33456B,0 60px 120px -40px rgba(0,0,0,.9),0 0 90px -30px var(--acc-glow);background:radial-gradient(120% 70% at 20% 0%,rgba(201,210,224,.35),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(169,194,238,.22),transparent 60%),linear-gradient(170deg,#1A2A4D,#050A19 70%);color:#F4F6FA}
html[data-paleta="marino"] .np-top{color:rgba(244,246,250,.8)}
html[data-paleta="perla"] .np-top{color:rgba(244,246,250,.8)}
html[data-paleta="marino"] .np-date{color:rgba(244,246,250,.75)}
html[data-paleta="perla"] .np-date{color:rgba(244,246,250,.75)}
html[data-paleta="marino"] .np-n{background:rgba(244,246,250,.11);border:1px solid rgba(244,246,250,.08)}
html[data-paleta="perla"] .np-n{background:rgba(244,246,250,.11);border:1px solid rgba(244,246,250,.08)}
html[data-paleta="marino"] .np-ic{color:#0E1A33}
html[data-paleta="perla"] .np-ic{color:#0E1A33}
html[data-paleta="marino"] .np-logo{background:#0B1630;color:#F4F6FA;border:1px solid rgba(244,246,250,.16)}
html[data-paleta="perla"] .np-logo{background:#0B1630;color:#F4F6FA;border:1px solid rgba(244,246,250,.16)}
html[data-paleta="marino"] .np-wm{color:#F4F6FA}
html[data-paleta="perla"] .np-wm{color:#F4F6FA}
html[data-paleta="marino"] .np-wm .lg-4{color:#C9D2E0}
html[data-paleta="perla"] .np-wm .lg-4{color:#C9D2E0}
html[data-paleta="marino"] .np-h{color:rgba(244,246,250,.65)}
html[data-paleta="perla"] .np-h{color:rgba(244,246,250,.65)}
html[data-paleta="marino"] .np-t>span:not(.np-h):not(.np-ch){color:rgba(244,246,250,.75)}
html[data-paleta="perla"] .np-t>span:not(.np-h):not(.np-ch){color:rgba(244,246,250,.75)}
html[data-paleta="marino"] .np-ask{background:rgba(244,246,250,.13);border:1px solid rgba(201,210,224,.55);box-shadow:0 0 0 4px rgba(201,210,224,.12),0 24px 60px -20px rgba(201,210,224,.45);animation:npIn .55s cubic-bezier(.2,.8,.2,1) both,npGlow-osc 2.6s 1s ease-in-out infinite}
html[data-paleta="perla"] .np-ask{background:rgba(244,246,250,.13);border:1px solid rgba(201,210,224,.55);box-shadow:0 0 0 4px rgba(201,210,224,.12),0 24px 60px -20px rgba(201,210,224,.45);animation:npIn .55s cubic-bezier(.2,.8,.2,1) both,npGlow-osc 2.6s 1s ease-in-out infinite}
html[data-paleta="marino"] .np-ch button,html[data-paleta="marino"] .np-ch a{background:rgba(244,246,250,.12);border:1px solid rgba(244,246,250,.14);color:#F4F6FA}
html[data-paleta="perla"] .np-ch button,html[data-paleta="perla"] .np-ch a{background:rgba(244,246,250,.12);border:1px solid rgba(244,246,250,.14);color:#F4F6FA}
html[data-paleta="marino"] .np-ch button:hover,html[data-paleta="marino"] .np-ch a:hover{background:#C9D2E0;border-color:#C9D2E0;color:#0E1A33}
html[data-paleta="perla"] .np-ch button:hover,html[data-paleta="perla"] .np-ch a:hover{background:#C9D2E0;border-color:#C9D2E0;color:#0E1A33}
html[data-paleta="marino"] .np-ch a{color:rgba(244,246,250,.75)}
html[data-paleta="perla"] .np-ch a{color:rgba(244,246,250,.75)}
html[data-paleta="marino"] .np-ch button:focus-visible,html[data-paleta="marino"] .np-ch a:focus-visible,html[data-paleta="marino"] .np-sel button:focus-visible,html[data-paleta="marino"] .np-plan:focus-visible{outline:2px solid #C9D2E0}
html[data-paleta="perla"] .np-ch button:focus-visible,html[data-paleta="perla"] .np-ch a:focus-visible,html[data-paleta="perla"] .np-sel button:focus-visible,html[data-paleta="perla"] .np-plan:focus-visible{outline:2px solid #C9D2E0}
html[data-paleta="marino"] .np-sel{color:#C9D2E0}
html[data-paleta="perla"] .np-sel{color:#C9D2E0}
html[data-paleta="marino"] .np-sel button{color:rgba(244,246,250,.7)}
html[data-paleta="perla"] .np-sel button{color:rgba(244,246,250,.7)}
html[data-paleta="marino"] .np-sel button:hover{color:#F4F6FA}
html[data-paleta="perla"] .np-sel button:hover{color:#F4F6FA}
html[data-paleta="marino"] .np-plan{background:rgba(244,246,250,.14);border:1px solid rgba(244,246,250,.16);color:#F4F6FA}
html[data-paleta="perla"] .np-plan{background:rgba(244,246,250,.14);border:1px solid rgba(244,246,250,.16);color:#F4F6FA}
html[data-paleta="marino"] .np-plan:hover{background:#C9D2E0;color:#0E1A33}
html[data-paleta="perla"] .np-plan:hover{background:#C9D2E0;color:#0E1A33}
html[data-paleta="marino"] .np-hint{color:rgba(244,246,250,.55)}
html[data-paleta="perla"] .np-hint{color:rgba(244,246,250,.55)}
html[data-paleta="marino"] .np-ex{color:rgba(244,246,250,.45)}
html[data-paleta="perla"] .np-ex{color:rgba(244,246,250,.45)}
html[data-paleta="marino"] .band::before{background:radial-gradient(circle,rgba(201,210,224,.35),transparent 60%)}
html[data-paleta="perla"] .band::before{background:radial-gradient(circle,rgba(20,33,61,.35),transparent 60%)}
html[data-paleta="marino"] .band::after{background:radial-gradient(circle,rgba(169,194,238,.22),transparent 60%)}
html[data-paleta="perla"] .band::after{background:radial-gradient(circle,rgba(58,82,131,.22),transparent 60%)}
html[data-paleta="marino"] .ft.wide{background:radial-gradient(600px 200px at 0% 50%,rgba(201,210,224,.10),transparent 70%),var(--card)}
html[data-paleta="perla"] .ft.wide{background:radial-gradient(600px 200px at 0% 50%,rgba(20,33,61,.10),transparent 70%),var(--card)}
html[data-paleta="marino"] .ba-knob{color:#0B1630}
html[data-paleta="perla"] .ba-knob{color:#0B1630}
html[data-paleta="marino"] .ba-l{background:rgba(9,16,36,.75)}
html[data-paleta="perla"] .ba-l{background:rgba(9,16,36,.75)}
html[data-paleta="marino"] .cnav{background:rgba(18,32,63,.92)}
html[data-paleta="perla"] .cnav{background:rgba(255,255,255,.92)}
html[data-paleta="marino"] input.rng::-webkit-slider-runnable-track{background:linear-gradient(90deg,#C9D2E0 0,#A9C2EE var(--p),var(--line2) var(--p) 100%)}
html[data-paleta="perla"] input.rng::-webkit-slider-runnable-track{background:linear-gradient(90deg,#14213D 0,#3A5283 var(--p),var(--line2) var(--p) 100%)}
html[data-paleta="marino"] input.rng::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(201,210,224,.15)}
html[data-paleta="perla"] input.rng::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(20,33,61,.15)}
html[data-paleta="marino"] input.rng:hover::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(201,210,224,.18)}
html[data-paleta="perla"] input.rng:hover::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(20,33,61,.18)}
html[data-paleta="marino"] .res{background:radial-gradient(520px 260px at 100% 0%,rgba(201,210,224,.16),transparent 70%),var(--card)}
html[data-paleta="perla"] .res{background:radial-gradient(520px 260px at 100% 0%,rgba(20,33,61,.16),transparent 70%),var(--card)}
html[data-paleta="marino"] .rbox.rec{background:rgba(201,210,224,.08);border-color:rgba(201,210,224,.38)}
html[data-paleta="perla"] .rbox.rec{background:rgba(20,33,61,.08);border-color:rgba(20,33,61,.38)}
html[data-paleta="marino"] .rbox.hrs{background:rgba(169,194,238,.07);border-color:rgba(169,194,238,.34)}
html[data-paleta="perla"] .rbox.hrs{background:rgba(58,82,131,.07);border-color:rgba(58,82,131,.34)}
html[data-paleta="marino"] .rec .rb-ic{background:rgba(201,210,224,.16);color:#C9D2E0}
html[data-paleta="perla"] .rec .rb-ic{background:rgba(20,33,61,.16);color:#14213D}
html[data-paleta="marino"] .hrs .rb-ic{background:rgba(169,194,238,.16);color:#A9C2EE}
html[data-paleta="perla"] .hrs .rb-ic{background:rgba(58,82,131,.16);color:#3A5283}
html[data-paleta="marino"] .r-big.h{background:linear-gradient(115deg,#A9C2EE,#E4ECFA);-webkit-background-clip:text;background-clip:text}
html[data-paleta="perla"] .r-big.h{background:linear-gradient(115deg,#3A5283,#5B77B0);-webkit-background-clip:text;background-clip:text}
html[data-paleta="marino"] .cto.wa .cto-ic{background:rgba(14,26,51,.14)}
html[data-paleta="perla"] .cto.wa .cto-ic{background:rgba(255,255,255,.14)}
html[data-paleta="marino"] .fm-back{background:rgba(3,6,15,.7)}
html[data-paleta="perla"] .fm-back{background:rgba(3,6,15,.7)}
html[data-paleta="marino"] .ok input{accent-color:#C9D2E0}
html[data-paleta="perla"] .ok input{accent-color:#14213D}
@media (max-width: 720px){html[data-paleta="marino"] .mini .h{color:#A9C2EE}html[data-paleta="perla"] .mini .h{color:#3A5283}}
html[data-paleta="marino"] .metal{background:#050A19}
html[data-paleta="perla"] .metal{background:#050A19}
html[data-paleta="marino"] .metal::after{background:#050A19}
html[data-paleta="perla"] .metal::after{background:#050A19}
html[data-paleta="marino"] .h-scrim{background:linear-gradient(90deg,rgba(5,10,25,.88) 0%,rgba(5,10,25,.66) 36%,rgba(5,10,25,.2) 68%,rgba(5,10,25,.3) 100%)}
html[data-paleta="perla"] .h-scrim{background:linear-gradient(90deg,rgba(5,10,25,.88) 0%,rgba(5,10,25,.66) 36%,rgba(5,10,25,.2) 68%,rgba(5,10,25,.3) 100%)}
html[data-paleta="marino"] .hero .fl{border:1px solid rgba(244,246,250,.14)}
html[data-paleta="perla"] .hero .fl{border:1px solid rgba(244,246,250,.14)}
@media (max-width:720px){html[data-paleta="marino"] .h-scrim{background:linear-gradient(180deg,rgba(5,10,25,.82) 0%,rgba(5,10,25,.68) 55%,rgba(5,10,25,.45) 100%)}html[data-paleta="perla"] .h-scrim{background:linear-gradient(180deg,rgba(5,10,25,.82) 0%,rgba(5,10,25,.68) 55%,rgba(5,10,25,.45) 100%)}}
html[data-paleta="marino"]{--mk-hero:linear-gradient(135deg,rgba(201,210,224,.35),rgba(169,194,238,.12))}
html[data-paleta="perla"]{--mk-hero:linear-gradient(135deg,rgba(20,33,61,.2),rgba(58,82,131,.08))}

/* Rediseño · paleta (prompts/06-paleta.md): marino y plata, marino y perla, perla. «Negro y lima» = sin cambios */
html[data-paleta="marino"]{--bg:#0B1630;--card:#12203F;--card2:#17284B;--line:#22335A;--line2:#2C3F68;--line4:#4A5A78;--fg:#F4F6FA;--muted:#B9C3D2;--dim:#A3AEBF;--acc:#C9D2E0;--acc2:#F6F7F9;--accbg:#1A2A4D;--on-acc:#0E1A33;--acc-glow:rgba(201,210,224,.28);--spot:rgba(201,210,224,.08);--hdr:rgba(11,22,48,.8);--grad:linear-gradient(115deg,#FFFFFF 0%,#C9D2E0 100%);color-scheme:dark}
html[data-paleta="perla"]{--bg:#F6F7F9;--card:#FFFFFF;--card2:#ECEFF3;--line:#D9DFE7;--line2:#C9D2E0;--line4:#7D8896;--fg:#14213D;--muted:#4A5466;--dim:#4D5869;--acc:#14213D;--acc2:#33476E;--accbg:#E4E9F1;--on-acc:#FFFFFF;--acc-glow:rgba(20,33,61,.25);--spot:rgba(20,33,61,.06);--hdr:rgba(246,247,249,.88);--grad:linear-gradient(115deg,#14213D 0%,#3A5283 100%);color-scheme:light}
html[data-paleta] body{background:var(--bg);color:var(--fg)}

/* El metal, en toda la web: velo de su color (más suave que el negro: el metal se ve en todas las secciones) */
html[data-paleta="marino"] .metal{background:#0B1630}
html[data-paleta="marino"] .metal::after{background:#0B1630;opacity:.62}
html[data-paleta="perla"] .metal{background:#F6F7F9}
html[data-paleta="perla"] .metal::after{background:#F6F7F9;opacity:.64}
html[data-paleta] .metal[data-velo="0"]::after{opacity:0}

/* Secciones: todas sobre el metal, sin sus puntitos ni franjas negras; las claras con un velo propio para el ritmo */
html[data-paleta] #main section.light{background:transparent}
/* Sus secciones claras fijan sus propios colores (.light): se les da la paleta también a ellas */
html[data-paleta="marino"] #main section.light{--bg:#0B1630;--card:#12203F;--card2:#17284B;--line:#22335A;--line2:#2C3F68;--line4:#4A5A78;--fg:#F4F6FA;--muted:#B9C3D2;--dim:#A3AEBF;--acc:#C9D2E0;--acc2:#F6F7F9;--accbg:#1A2A4D;--on-acc:#0E1A33;--acc-glow:rgba(201,210,224,.28);--spot:rgba(201,210,224,.08);--hdr:rgba(11,22,48,.8);--grad:linear-gradient(115deg,#FFFFFF 0%,#C9D2E0 100%);color-scheme:dark;color:var(--fg)}
html[data-paleta="perla"] #main section.light{--bg:#F6F7F9;--card:#FFFFFF;--card2:#ECEFF3;--line:#D9DFE7;--line2:#C9D2E0;--line4:#7D8896;--fg:#14213D;--muted:#4A5466;--dim:#4D5869;--acc:#14213D;--acc2:#33476E;--accbg:#E4E9F1;--on-acc:#FFFFFF;--acc-glow:rgba(20,33,61,.25);--spot:rgba(20,33,61,.06);--hdr:rgba(246,247,249,.88);--grad:linear-gradient(115deg,#14213D 0%,#3A5283 100%);color-scheme:light;color:var(--fg)}
html[data-paleta] #main section.light::before,html[data-paleta] #main section.light::after{display:none}
html[data-paleta] #main section.light:not(#home-servicios){isolation:isolate}
html[data-paleta] #main section.light:not(#home-servicios) > .velo-p{display:block}
.velo-p{display:none;position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(180deg,transparent,#000 120px,#000 calc(100% - 120px),transparent)}
html[data-paleta="marino"] #main section.light > .velo-p{background:rgba(30,48,86,.5)}
html[data-paleta="perla"] #main section.light > .velo-p{background:rgba(255,255,255,.5)}

/* Portada */
html[data-paleta="marino"] .h-scrim{background:linear-gradient(90deg,rgba(11,22,48,.86) 0%,rgba(11,22,48,.62) 36%,rgba(11,22,48,.18) 68%,rgba(11,22,48,.28) 100%)}
html[data-paleta="perla"] .h-scrim{background:linear-gradient(90deg,rgba(246,247,249,.9) 0%,rgba(246,247,249,.7) 36%,rgba(246,247,249,.22) 68%,rgba(246,247,249,.3) 100%)}
@media (max-width:720px){
  html[data-paleta="marino"] .h-scrim{background:linear-gradient(180deg,rgba(11,22,48,.8),rgba(11,22,48,.64) 55%,rgba(11,22,48,.42))}
  html[data-paleta="perla"] .h-scrim{background:linear-gradient(180deg,rgba(246,247,249,.88),rgba(246,247,249,.7) 55%,rgba(246,247,249,.45))}
}
html[data-paleta="marino"] .hero .fl{background:rgba(14,26,51,.55);border-color:rgba(201,210,224,.16)}
html[data-paleta="perla"] .hero .fl{background:rgba(255,255,255,.66);border-color:rgba(20,33,61,.1);box-shadow:0 24px 50px -30px rgba(20,33,61,.3),inset 0 1px 0 #fff}
html[data-paleta] .hero::after{display:none}
/* El logo: sus vértices lima pasan a plata (marino) o a marino (perla) */
html[data-paleta="marino"] .lg-mk [fill="#5EE0A0"],html[data-paleta="marino"] .np-mk [fill="#5EE0A0"]{fill:#C9D2E0}
html[data-paleta="perla"] .lg-mk [fill="#5EE0A0"]{fill:#14213D}

/* Servicios: su velo con la paleta (el «Fondo» de Servicios solo cuenta en negro y lima) */
html[data-paleta="marino"] #home-servicios{--bg:#0B1630;--card:#12203F;--card2:#17284B;--line:#22335A;--line2:#2C3F68;--line4:#4A5A78;--fg:#F4F6FA;--muted:#B9C3D2;--dim:#A3AEBF;--acc:#C9D2E0;--acc2:#F6F7F9;--accbg:#1A2A4D;--on-acc:#0E1A33;--acc-glow:rgba(201,210,224,.28);--spot:rgba(201,210,224,.08);--hdr:rgba(11,22,48,.8);--grad:linear-gradient(115deg,#FFFFFF 0%,#C9D2E0 100%);color-scheme:dark;--s-tono:30,48,86,.58;--s-base:14,26,51}
html[data-paleta="perla"] #home-servicios{--bg:#F6F7F9;--card:#FFFFFF;--card2:#ECEFF3;--line:#D9DFE7;--line2:#C9D2E0;--line4:#7D8896;--fg:#14213D;--muted:#4A5466;--dim:#4D5869;--acc:#14213D;--acc2:#33476E;--accbg:#E4E9F1;--on-acc:#FFFFFF;--acc-glow:rgba(20,33,61,.25);--spot:rgba(20,33,61,.06);--hdr:rgba(246,247,249,.88);--grad:linear-gradient(115deg,#14213D 0%,#3A5283 100%);color-scheme:light;--s-tono:255,255,255,.6;--s-base:246,247,249}
html[data-paleta] #home-servicios{background:transparent}
html[data-paleta] #home-servicios :is(.s-tono,.s-velo){display:block}
html[data-paleta="marino"] #home-servicios .scard:not(.pack){background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(14,26,51,.62);border-color:rgba(201,210,224,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -40px rgba(0,0,0,.7)}
html[data-paleta="perla"] #home-servicios .scard:not(.pack){background:rgba(255,255,255,.82);border-color:rgba(20,33,61,.08);box-shadow:inset 0 1px 0 #fff,0 24px 50px -36px rgba(20,33,61,.3)}
html[data-paleta] #home-servicios .scard:not(.pack):hover{border-color:var(--acc);box-shadow:0 30px 60px -36px var(--acc-glow)}
html[data-paleta="perla"][data-svc-ic="linea"] #home-servicios .scard:not(.pack) .sc-tile{background:#F6F7F9;border-color:rgba(20,33,61,.14);color:#14213D}
html[data-paleta="perla"][data-svc-ic="cromo"] #home-servicios .scard:not(.pack) .sc-tile{background:linear-gradient(180deg,#FFFFFF,#E4E9F0);border-color:rgba(20,33,61,.12);box-shadow:inset 0 1px 0 #fff,0 14px 30px -18px rgba(20,33,61,.4)}
html[data-paleta="perla"] #home-servicios .scard:not(.pack) .ic-cromo{stroke:url(#s-cromo-osc)}
html[data-paleta][data-svc-ic="duo"] #home-servicios .sc-tile{background:rgba(201,210,224,.1);border-color:rgba(201,210,224,.35);color:#C9D2E0}
html[data-paleta="perla"][data-svc-ic="duo"] #home-servicios .scard:not(.pack) .sc-tile{background:rgba(20,33,61,.06);border-color:rgba(20,33,61,.25);color:#14213D}
/* «Sistema completo»: marino con borde plata */
html[data-paleta] #home-servicios .scard.pack{background:radial-gradient(420px 260px at 50% 0%,rgba(201,210,224,.2),transparent 70%),linear-gradient(170deg,#1E3160,#0E1A33 75%);border-color:rgba(201,210,224,.5);--acc:#C9D2E0;--grad:linear-gradient(115deg,#FFFFFF 0%,#C9D2E0 100%);--on-acc:#0E1A33}

/* El móvil de «¿Qué negocio tienes?»: carcasa marino y acentos plata */
html[data-paleta] #home-sectores .nt-phone{border-color:#1A2747;box-shadow:0 0 0 1px #2C3F68,0 60px 120px -40px rgba(5,10,25,.8),0 0 90px -30px rgba(201,210,224,.35);background:radial-gradient(120% 70% at 20% 0%,rgba(201,210,224,.28),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(122,146,196,.22),transparent 60%),linear-gradient(170deg,#1B2C52,#0B1630 70%)}
html[data-paleta] #home-sectores .np-ask{border-color:rgba(201,210,224,.5);box-shadow:0 0 0 4px rgba(201,210,224,.1),0 24px 60px -20px rgba(201,210,224,.35)}
html[data-paleta] #home-sectores{--np-hl:#F4F6FA;--np-ic:#C9D2E0}  /* el botón señalado y los iconos del móvil (03_negocio.py) */
html[data-paleta] #home-sectores .bz-n{color:#C9D2E0}
html[data-paleta] #home-sectores .np-ch button:hover .bz-n{color:inherit}
html[data-paleta] #home-sectores .np-ch button:hover,html[data-paleta] #home-sectores .np-ch a:hover{background:#F4F6FA;border-color:#F4F6FA;color:#0E1A33}
html[data-paleta] #home-sectores .np-ic{background:linear-gradient(115deg,#FFFFFF,#C9D2E0);color:#0E1A33}
html[data-paleta] #home-sectores .np-sel{color:#C9D2E0}
html[data-paleta] #home-sectores .nt-phone [fill="#5EE0A0"]{fill:#C9D2E0}
html[data-paleta] #home-sectores .np-brand,html[data-paleta] #home-sectores .np-brand *{color:#EEF3EF}
html[data-paleta] #home-sectores .np-logo{background:#0E1A33;border-color:rgba(201,210,224,.22);color:#EEF3EF}
/* Iconos cromo sobre marino: pastilla marino, no negra (también en la tarjeta del sistema completo) */
html[data-paleta="marino"][data-svc-ic="cromo"] #home-servicios .sc-tile,html[data-paleta][data-svc-ic="cromo"] #home-servicios .scard.pack .sc-tile{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 60%),#0E1A33}
@keyframes np-chip-p{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 1px #C9D2E0,0 0 22px rgba(201,210,224,.5);background-color:rgba(201,210,224,.2)}}
html.anim[data-paleta] #home-sectores .nt-phone.brilla .np-ask .np-ch>*{animation-name:np-chip-p}
@keyframes np-halo-p{0%,100%{filter:none}35%,60%{filter:drop-shadow(0 0 16px rgba(255,255,255,.75))}}
html.anim[data-paleta] #home-sectores .nt-phone.brilla .np-ask .np-t>b{background-image:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 38%,#FFFFFF 44%,#BFD4FF 48%,#FFFFFF 52%,rgba(238,243,239,.26) 60%,rgba(238,243,239,.26) 100%);animation-name:np-brillo,np-halo-p,np-latido}

/* Rediseño · ronda de Jorge (prompts/07-ronda-jorge.md) */
/* Titular a dos tonos: «Tú cierras.» apagado (una luz que se apaga) y «abierto» con el acento */
.hero .h-cierra{color:#7E8B84}
html[data-paleta="perla"] .hero .h-cierra{color:#6F7B8C}
html[data-paleta="marino"] .hero .h-cierra{color:#8796B0}
html[data-paleta="marino"] .hero .h-abierto{background:linear-gradient(115deg,#FFFFFF 0%,#A9C2EE 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .h-abierto{font-style:normal}

/* Datos: la fuente sale de la cara de la caja y va dentro, al pulsar «+» (y en la línea de fuentes de abajo) */
.fact-s > span:first-child{display:none}
.fact-s{justify-content:flex-end}
.fact .f-src{display:block;margin-top:8px;font-size:12.5px;color:var(--dim)}

/* Banda final, en una sola columna centrada: «Sin riesgo» → «¿Hablamos?» → el botón grande justo debajo. El ojo baja en
   línea recta de la pregunta a la respuesta y el aire alrededor deja el botón como lo que más pesa. Sin frase en el
   ordenador; en el móvil, una frase corta (opciones de «Cierre» en la barra). Brillo cada pocos segundos */
.band::before,.band::after{display:none}
.band{align-items:center;text-align:center}
.band > *{align-self:center}
.band-r{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.band-r > p{display:none;max-width:30ch;margin:0 0 22px;font-size:18px;line-height:1.45;color:var(--fg)}
.band-r > p .ci{display:none}
html:not([data-cierre]) .band-r > p .ci-a,html[data-cierre="a"] .band-r > p .ci-a,html[data-cierre="b"] .band-r > p .ci-b,html[data-cierre="c"] .band-r > p .ci-c,html[data-cierre="d"] .band-r > p .ci-d{display:inline}
.band .hero-b{flex-direction:column;align-items:center;gap:8px}
.band .hero-b .btn-p{min-height:84px;padding:0 56px;font-size:22px;gap:12px}
.band .hero-b .btn-p svg{width:26px;height:26px;flex:none}
.band .hero-b .js-mail{background:none!important;box-shadow:none!important;min-height:0;padding:8px 4px;font-weight:600;font-size:15.5px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.band .hero-b .js-mail svg{display:none}
@media (max-width:720px){
  .band{gap:20px}
  .band-r > p{display:block}
  .band .hero-b{align-items:stretch;width:100%}
  .band .hero-b .btn-p{min-height:72px;padding:12px 18px;font-size:19px;white-space:normal;line-height:1.2}
}
@media (max-width:480px){
  .band{padding:36px 22px}
  .band .big{font-size:clamp(34px,11.5vw,52px);white-space:nowrap}
  /* En una línea: sin el icono (el texto ya dice WhatsApp) y la letra según el ancho */
  .band .hero-b .btn-p{font-size:clamp(15px,4.4vw,17px);padding:12px 10px}
  .band .hero-b .btn-p svg{display:none}
}
html.anim .band .btn-p::after{animation:b-brillo 4s ease-in-out 1.2s infinite}
@keyframes b-brillo{0%{left:-60%}28%,100%{left:130%}}
html[data-paleta="perla"] .band{background:rgba(255,255,255,.74);border-color:rgba(20,33,61,.1);box-shadow:0 40px 90px -50px rgba(20,33,61,.4)}
html[data-paleta="marino"] .band{background:rgba(14,26,51,.62);border-color:rgba(201,210,224,.22);box-shadow:0 40px 90px -50px rgba(0,0,0,.6)}

/* Sectores: su fila de sectores; «Todos» pasa al final, a la derecha, como enlace discreto «Ver todos»;
   y una caja para quien no encuentre su negocio */
#sx-f button[data-cat="all"]{order:99;margin-left:auto;background:none!important;border-color:transparent!important;box-shadow:none!important;color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:4px}
#sx-f button[data-cat="all"] b{display:none}
#sx-f button[data-cat="all"][aria-pressed="true"]{color:var(--fg)}
.sx-otro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:20px;padding:24px 26px;border:1.5px dashed var(--line4);background:var(--card)}
.sx-otro b{display:block;font-family:var(--disp);font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin-bottom:4px}
.sx-otro span{color:var(--muted);font-size:15.5px}
.sx-otro > div{min-width:0;flex:1 1 320px}

/* «Cómo trabajamos»: quieto. Su código cambia de paso solo cada 4,5 s (.on) y anima los dibujos: todo se iguala */
section[data-proto-sec="pasos"] *{animation:none!important}
section[data-proto-sec="pasos"] .sbar{display:none}
section[data-proto-sec="pasos"] .step.on{border-color:var(--line);box-shadow:none}
/* Números con el borde en el acento (plata en oscuro, marino en claro): con su gris apenas se veían en oscuro */
section[data-proto-sec="pasos"] .step-n,section[data-proto-sec="pasos"] .step.on .step-n{color:transparent;-webkit-text-stroke:1.6px var(--acc)}
/* Sin los dibujos de abajo: la caja se queda en número, título y texto, con el mismo aire arriba que abajo */
section[data-proto-sec="pasos"] .step-v{display:none}
section[data-proto-sec="pasos"] .step-x{padding:26px 18px 28px;gap:14px}
section[data-proto-sec="pasos"] .step-x p{margin-bottom:0}
/* Móvil: hacia abajo, sin carrusel; la línea de la izquierda avanza y cada paso se enciende al llegar */
@media (max-width:720px){
  section[data-proto-sec="pasos"] .swipe-h{display:none}
  section[data-proto-sec="pasos"] #home-steps.steps.swipe{display:grid!important;grid-template-columns:1fr;gap:16px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0 0 0 30px;position:relative}
  section[data-proto-sec="pasos"] #home-steps.steps.swipe > *{flex:none;min-width:0}
  section[data-proto-sec="pasos"] #home-steps::before,section[data-proto-sec="pasos"] #home-steps::after{content:"";position:absolute;left:9px;top:8px;width:2px;border-radius:2px}
  section[data-proto-sec="pasos"] #home-steps::before{bottom:8px;background:var(--line2)}
  section[data-proto-sec="pasos"] #home-steps::after{height:calc(var(--p,0) * (100% - 16px));background:var(--grad);transition:height .5s ease}
  section[data-proto-sec="pasos"] .step{transition:opacity .35s,border-color .35s,box-shadow .35s!important}
  html.anim section[data-proto-sec="pasos"] .step:not(.paso-on){opacity:.42}
  section[data-proto-sec="pasos"] .step.paso-on{border-color:var(--acc)!important;box-shadow:0 24px 50px -34px var(--acc-glow)!important}
  section[data-proto-sec="pasos"] .step.paso-on .step-n{color:var(--acc)!important;-webkit-text-stroke-color:var(--acc)!important}
}

/* Equipo en organigrama: el logo arriba, los cuatro socios al mismo nivel y una línea de cada vértice a cada socio */
.organi{--org-c1:#FFFFFF;--org-c2:#A9C2EE;--org-glow:rgba(169,194,238,.55);--org-base:.5;position:relative;display:flex;flex-direction:column;align-items:center}
html[data-paleta="perla"] .organi{--org-c1:#14213D;--org-c2:#4467AE;--org-glow:rgba(68,103,174,.4);--org-base:.42}
.org-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:0}
/* El nombre de la marca va encima del símbolo: así ninguna línea cruza texto. Halo detrás del símbolo */
.org-nodo{position:relative;display:block}
.org-nodo::before{content:"";position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:radial-gradient(circle,var(--org-glow),transparent 66%);opacity:.5;z-index:-1;pointer-events:none}
.org-mk{width:104px;height:104px;color:var(--fg);overflow:visible}
.org-mk .org-v{fill:var(--org-c2)}
.org-top .lg-w{font-size:22px}
.org-lema{margin:22px 0 0;font-size:15px;color:var(--muted);text-align:center}
.org-socios{list-style:none;margin:118px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;z-index:0}
.org-s{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 18px 26px}
.org-foto{--org-a:0deg;display:block;padding:3px;border-radius:50%;background:conic-gradient(from var(--org-a),var(--org-c1),var(--org-c2),var(--org-c1));margin-bottom:10px}
.org-foto img{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 20%;border:3px solid var(--card);background:var(--card2)}
.org-s b{font-size:17.5px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.org-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.org-rol{font-size:15px;font-weight:600;color:var(--muted);line-height:1.35}
/* Las líneas: base en degradado del logo al socio; encima, el pulso que baja y vuelve */
.org-lineas{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.org-base{fill:none;stroke-width:2;stroke-linecap:round;opacity:var(--org-base)}
.org-p1,.org-p2{fill:none;stroke-linecap:round;stroke-dasharray:14 300;stroke-dashoffset:16;opacity:0}
.org-p1{stroke:var(--org-c2);stroke-width:8;stroke-opacity:.45;filter:blur(3px)}
.org-p2{stroke:var(--org-c1);stroke-width:2.6}
.org-dot{fill:var(--org-c2)}
.org-g1{stop-color:var(--org-c1)}
.org-g2{stop-color:var(--org-c2)}
/* Movimiento: el pulso baja (0–45 %) y sube (50–95 %); al llegar brilla el socio y, al volver, el logo */
@property --org-a{syntax:"<angle>";inherits:false;initial-value:0deg}
html.anim .organi.org-on .org-p1,html.anim .organi.org-on .org-p2{opacity:1;animation:org-pulso 6s cubic-bezier(.45,0,.55,1) infinite}
html.anim .organi.org-on .org-foto{animation:org-gira 12s linear infinite,org-llega 6s ease-in-out infinite}
html.anim .organi.org-on .org-mk{animation:org-vuelve 6s ease-in-out infinite}
@keyframes org-pulso{0%{stroke-dashoffset:16}45%,50%{stroke-dashoffset:-100}95%,100%{stroke-dashoffset:16}}
@keyframes org-gira{to{--org-a:360deg}}
@keyframes org-llega{0%,34%,64%,100%{box-shadow:0 0 0 0 transparent}45%,52%{box-shadow:0 0 0 7px var(--org-glow)}}
@keyframes org-vuelve{0%,6%,96%,100%{filter:drop-shadow(0 0 14px var(--org-glow))}16%,86%{filter:none}}
/* Móvil: árbol. El logo arriba a la izquierda y los socios en filas, con las líneas bajando por la izquierda */
@media (max-width:720px){
  .organi{align-items:stretch}
  .org-top{flex-direction:row;align-items:center;gap:14px}
  .org-nodo{order:-1}
  .org-mk{width:60px;height:60px;flex:none}
  .org-top .lg-w{font-size:20px}
  .org-lema{margin-top:16px;padding-left:78px;text-align:left;font-size:14px}
  .org-socios{margin:26px 0 0;padding-left:78px;grid-template-columns:1fr;gap:12px}
  .org-s{flex-direction:row;text-align:left;gap:14px;padding:14px 16px}
  .org-foto{margin:0;flex:none}
  .org-foto img{width:64px;height:64px}
  .org-s b{font-size:16.5px}
  .org-rol{font-size:14.5px}
}
@media (max-width:380px){.org-socios,.org-lema{padding-left:64px}}

/* Botón sol/luna del menú (es de la web, no del prototipo: se ve también con ?demo) */
.tema{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--fg);border:1px solid var(--line2);flex:none;transition:background-color .2s,border-color .2s}
.tema:hover{border-color:var(--acc)}
.tema:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tema .t-sol,html[data-paleta="marino"] .tema .t-luna{display:none}
html[data-paleta="marino"] .tema .t-sol{display:block}
/* En el móvil no cabe en el menú: el cambio de modo va dentro del menú desplegable */
.tema-m{display:none}
@media (max-width:720px){.nav .tema:not(.tema-m){display:none}.tema-m{display:inline-flex;width:auto;height:auto;padding:12px 16px;border-radius:14px;gap:10px;font-weight:700;margin-bottom:10px}.tema-m::after{content:"Modo oscuro"}html:is([data-paleta="alterna"],[data-paleta="marino"],[data-paleta="negro"]) .tema-m::after{content:"Modo claro"}}