/* hexagonal.css — estilo «hexagonal»: la web aprobada (index.html de la raíz de
   okcomputer-web, generada por build.py, sept. 2026) llevada al motor. Página
   blanca, tipografía Arial a peso medio con interletrado apretado, el verde de
   marca (#01bf61, de la imagen de hexágonos) como color de acción, el mismo verde oscurecido (#007a3f) para enlaces
   e iconos, y el HEXÁGONO como único motivo geométrico: viñetas, nodos,
   números de proceso, iconos del menú, y la escena del hero (un producto en el
   centro y cuatro nodos alrededor). Colores en tokens.css (--hx-*). */
/* Lato alojada en el propio sitio (sin peticiones a Google → sin aviso de cookies por fuentes) */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lato-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lato-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/lato-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lato-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* tokens.css — la identidad de ESTE sitio. Es lo único de CSS que cambia
   entre un cliente y otro. */
:root{
  --green:#01bf61;        /* acento principal (botones, chips, iconos) */
  --green-deep:#007a3f;   /* acento sobre fondo claro (enlaces) */
  --green-tint:#d4f4e2;   /* fondo suave del acento (columna "nosotros") */
  --black:#000000;        /* círculos, bloque destacado, footer */
  --ink:#1b1f1d;          /* texto */
  --ink-2:#5c625f;        /* texto secundario */
  --band:#f3f5f4;         /* franjas alternas */
  --line:#e2e6e4;         /* bordes */
  --white:#ffffff;
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-pill:999px;
  --max:1240px;
  --gutter:clamp(16px,4vw,48px);
  --font:'Lato',sans-serif;
}

/* Solo los usa el estilo «editorial» */
:root{
  --bosque:#0f2e22;       /* verde bosque: botones, CTA final, pie, titulares */
  --acento:#008f4a;       /* verde calmado: antetítulos, enlaces, subrayados (el #2ecc71 queda para logo y círculos) */
  --menta:#d4f4e2;        /* tinte: iconos del menú, fondos de captura, subrayado del hero */
  --menta-2:#e4f6ec;      /* tinte más claro: columna "nosotros" */
  --crema:#f6f3ec;        /* fondo cálido del hero y franjas */
  --crema-2:#ece7dc;
}

/* Solo los usa el estilo «hexagonal» (la web aprobada: index.html de la raíz, sept. 2026).
   Verdes muestreados de la imagen de marca de los hexágonos (assets/real/fondo-hexagonos.webp):
   verde #01BF61 y lima #7DD956 son los píxeles más frecuentes; #007A3F es el mismo verde
   oscurecido hasta 5,4:1 sobre blanco para enlaces e iconos (el verde puro no llega a 4,5:1). */
:root{
  --hx-tinta:#172c22;     /* texto, bloque final, nodos */
  --hx-verde:#01bf61;     /* verde de marca (de la imagen): botón principal, hexágonos */
  --hx-lima:#7dd956;      /* lima (de la imagen): subrayados, hexágono grande del hero */
  --hx-hondo:#007a3f;     /* verde de marca oscurecido: enlaces, iconos, pestaña activa (contraste) */
  --hx-palido:#edf9f2;    /* fondo pálido de paneles */
  --hx-palido-2:#e4f6ec;  /* franjas alternas */
  --hx-menta:#d4f4e2;     /* relleno de los hexágonos pequeños */
  --hx-linea:#d3e6da;     /* reglas y bordes */
  --hx-gris:#526257;      /* texto secundario */
  --hx-font:Arial,Helvetica,sans-serif;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --hex-h:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);

  /* Tokens sacados de los estilos el 2026-09-27 (antes eran colores escritos a mano en hexagonal/propuesta-b/
     propuesta-e). Un sitio con otra paleta (tpv en rojo, ajax en negro) redefine TODOS los --hx-*; los valores de
     aquí son exactamente los que tenía la web verde, así no cambia ni un píxel. */
  --hx-fondo:#fff;              /* fondo de página, hero, pie e interior de nodos/círculos */
  --hx-superficie:#fff;         /* tarjetas, pastillas, fichas, desplegable, campos, botón fantasma */
  --hx-sobre-tinta:#fff;        /* texto sobre --hx-tinta (barra, botón negro, chips marcados, bloque final) */
  --hx-sobre-acento:#102516;    /* texto sobre --hx-verde (botón principal, hexágonos, insignias del proceso) */
  --hx-sobre-acento-2:#0b2416;  /* párrafo del bloque de presupuesto (fondo verde) */
  --hx-sobre-acento-3:#1d3a27;  /* micro del bloque de presupuesto */
  --hx-sobre-lima:#102516;      /* texto sobre --hx-lima (hover del botón, badge, enlaces abiertos) */
  --hx-foco:#007a3f;            /* anillo de foco de teclado */
  --hx-texto-hero:#43554b;      /* párrafo del hero (estilo hexagonal claro) */
  --hx-tinta-2:#28432f;         /* hover del botón negro */
  --hx-tinta-3:#2f5237;         /* contorno del hexágono grande */
  --hx-palido-3:#eff3f0;        /* tercera tarjeta */
  --hx-menta-2:#c3f0d6; --hx-menta-3:#9fe6bd;   /* degradado del hueco «pendiente» */
  --hx-linea-2:#a9dcc0;         /* borde de la ficha de producto y de la ventana de pantalla */
  --hx-linea-3:#dceee4;         /* separadores finos dentro de fichas */
  --hx-linea-escena:rgba(24,59,36,.18);          /* líneas de la escena del hero */
  --hx-campo-borde:#b3c2b5; --hx-chip-borde:#ceddc8; --hx-punto:#cfdcc9;
  --hx-scroll:#afc7a4 #f1f6ee;  /* scrollbar-color del carrusel */
  --hx-sombra-ficha:0 12px 25px rgba(30,65,20,.08);
  --hx-sombra-ficha-2:0 18px 34px rgba(30,65,20,.16);
  --hx-borde-fantasma:#7e957e;  /* botón fantasma sobre tinta (estilo hexagonal) */
  --hx-noche:#0b1f14;           /* secciones oscuras: hero, casos, proceso, FAQ */
  --hx-noche-2:#10291b; --hx-noche-3:#163a27; --hx-noche-nodo:#12301f;
  --hx-noche-linea:rgba(255,255,255,.12);
  --hx-noche-gris:#9fb8a5; --hx-noche-gris-2:#8a938e;
  --hx-noche-texto:#dfe8e2; --hx-noche-texto-2:#c9d1cc; --hx-noche-texto-3:#b9cfc3;
  --hx-negro:#0a0a0a; --hx-negro-2:#222;      /* bloque partido y pie de propuesta-b */
  /* Patrón de hexágonos del hero (trazo blanco, se ve al 6-10 %). `none` para quitarlo. */
  --hx-patron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z M28 49 54 64v32L28 111 2 96V64z' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--hx-font);color:var(--hx-tinta);background:var(--hx-fondo);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2{font-weight:500;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
h1{font-size:clamp(43px,4.6vw,67px);line-height:1.035;letter-spacing:-.055em}
h1.largo{font-size:clamp(36px,4vw,56px)}
h2{font-size:clamp(32px,3.4vw,49px)}
h3{font-size:23px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
p{max-width:62ch}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px}
section[id]{scroll-margin-top:110px}
.eyebrow,.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--hx-tinta)}
.eyebrow::before,.kicker::before{content:"";width:11px;height:13px;background:var(--hx-verde);clip-path:var(--hex);flex:none}
.placeholder{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 10%,var(--hx-menta) 0%,var(--hx-menta-2) 45%,var(--hx-menta-3) 100%)}
.placeholder::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-size:12px;font-weight:700;color:var(--hx-hondo);background:rgba(255,255,255,.8);padding:6px 10px;border-radius:6px;border:1px dashed var(--hx-hondo)}
.hexbg{position:absolute;inset:0;opacity:.10;pointer-events:none;background-image:var(--hx-patron);background-size:56px 97px}
.media img,.media video{width:100%;height:100%;object-fit:cover}

/* ---------- Botones (rectos, radio 9, cuerpo 50) ---------- */
.btn{display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;gap:14px;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;min-height:50px;padding:12px 24px;border:1px solid var(--hx-tinta);border-radius:9px;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-3px)}
.btn:focus-visible,:focus-visible{outline:3px solid var(--hx-foco);outline-offset:5px}
.btn-green{background:var(--hx-verde);border-color:var(--hx-verde);color:var(--hx-sobre-acento)}
.btn-green:hover{background:var(--hx-lima);border-color:var(--hx-lima);color:var(--hx-sobre-lima)}
.btn-black{background:var(--hx-tinta);border-color:var(--hx-tinta);color:var(--hx-sobre-tinta)}
.btn-black:hover{background:var(--hx-tinta-2)}
.btn-ghost{background:var(--hx-superficie);color:var(--hx-tinta)}
.btn-ghost:hover{border-color:var(--hx-hondo);background:var(--hx-palido)}
.btn-ghost.on-dark{background:var(--hx-superficie);color:var(--hx-tinta);border-color:var(--hx-tinta)} /* el hero de este estilo es blanco: el «on-dark» del motor no aplica */
.btn-ghost.on-dark:hover{border-color:var(--hx-hondo);background:var(--hx-palido)}
.link{font-weight:700;color:var(--hx-hondo);text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-size:15px}
.link::after{content:"↗";display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--hx-tinta);color:var(--hx-tinta);border-radius:50%;flex:none;transition:background .2s}
.link:hover::after{background:var(--hx-lima)}
.skip{position:absolute;top:-80px;left:8px;z-index:100;background:var(--hx-superficie);padding:16px;border:1px solid var(--hx-linea)}
.skip:focus{top:10px}
.arriba{position:fixed;right:18px;bottom:18px;z-index:40;width:44px;height:44px;border-radius:50%;background:var(--hx-tinta);color:var(--hx-sobre-tinta);display:grid;place-items:center;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .25s}
.arriba.on{opacity:1;pointer-events:auto}

/* ---------- Barra ---------- */
/* Barra oscura (verde tinta, logo en blanco) con el desplegable a lo ancho de
   la web. Elegida el 2026-09-13 entre cinco propuestas: «barra oscura» + «panel a lo ancho». */
.nav{position:sticky;top:0;z-index:50;background:var(--hx-tinta);border-bottom:0}
.nav .wrap{position:relative;display:flex;align-items:center;gap:27px;height:87px;transition:height .25s}
.nav.compacta .wrap{height:70px}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand .logo{height:46px;width:auto;transition:height .25s} .nav.compacta .brand .logo{height:38px} footer .brand .logo{height:44px}
.nav .brand .logo{filter:brightness(0) invert(1)}
.nav .brand{color:var(--hx-sobre-tinta)}
.brand .hex{width:36px;height:40px;background:var(--hx-verde);clip-path:var(--hex);display:grid;place-items:center;color:var(--hx-sobre-acento);font-size:15px;font-weight:700}
.nav ul{display:flex;align-items:center;gap:27px;list-style:none;font-size:15px;white-space:nowrap}
.nav ul a{text-decoration:none;position:relative}
.nav .menu > li > a,.has-menu > button,.nav .tel{color:var(--hx-sobre-tinta);transition:color .15s}
.nav .menu > li > a::before,.has-menu > button::before{content:"";position:absolute;left:-14px;top:calc(50% - 4px);width:7px;height:8px;background:var(--hx-lima);clip-path:var(--hex);opacity:0;transition:opacity .2s}
.nav .spacer{flex:1}
.nav .tel{font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none}
.nav .btn{min-height:44px;padding:9px 18px;font-size:14px}
.idiomas{display:flex;gap:2px;font-size:13px;font-weight:700}
.idiomas a,.idiomas span{padding:6px 8px;border-radius:6px;text-decoration:none;color:rgba(255,255,255,.6)}
.idiomas a:hover{color:#fff}
.idiomas span{background:rgba(255,255,255,.14);color:#fff}
.burger{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;width:48px;height:48px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:6px auto;width:20px;border-radius:2px}
.nav.open ul{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:74px;background:var(--hx-tinta);padding:24px;gap:4px;align-items:stretch}
.nav.open ul a{padding:10px}
/* Desplegable: panel blanco a lo ancho de la web, con filo lima arriba y la
   página de debajo algo oscurecida; soluciones en tres columnas y productos al lado */
.nav .menu > li{position:static}
.has-menu > button{position:relative;font-family:inherit;font-size:15px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:12px 0;min-height:44px}
.has-menu > button::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:3px;border-radius:3px;background:var(--hx-lima);transform:scaleX(0);transition:transform .2s}
.nav.compacta .has-menu > button::after{bottom:-13px}
.has-menu.abierto > button::after{transform:scaleX(1)}
.chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.has-menu.abierto .chev{transform:rotate(225deg) translateY(-2px)}
.dropdown{display:none;position:absolute;left:0;right:0;top:100%;padding:30px 32px 24px;background:var(--hx-superficie);border-top:3px solid var(--hx-lima);border-radius:0 0 22px 22px;
  box-shadow:0 30px 60px color-mix(in srgb,var(--hx-tinta) 14%,transparent),0 0 0 100vmax color-mix(in srgb,var(--hx-tinta) 18%,transparent);clip-path:inset(0 -100vmax -100vmax -100vmax);z-index:60}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.has-menu.abierto .dropdown{display:block}
.dd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dd-grid.una{grid-template-columns:1fr 1fr;gap:2px}
.dropdown.con-grupos{display:none;grid-template-columns:2.2fr 1fr;gap:24px;align-items:start}
.dropdown.con-grupos .dd-grupo:first-child .dd-grid{grid-template-columns:repeat(3,1fr)}
.has-menu.abierto .dropdown.con-grupos{display:grid}
.dropdown.con-grupos .dd-foot{grid-column:1/-1}
.dropdown.un-grupo{grid-template-columns:1fr}
.dropdown.un-grupo .dd-grupo:first-child{background:none;padding:0}
.dropdown.con-grupos .dd-grupo:last-child{background:var(--hx-palido);border-radius:12px;padding:4px 8px 10px}
.dd-grupo h6{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hx-gris);padding:8px 12px 6px}
@media (min-width:821px){
  .nav .menu > li > a:hover,.has-menu > button:hover,.has-menu.abierto > button,.nav .tel:hover{color:var(--hx-lima)}
  .nav .menu > li > a:hover::before,.has-menu > button:hover::before,.has-menu.abierto > button::before{opacity:1}
  .has-menu:hover > button::after{transform:scaleX(1)}
  .has-menu:hover .dropdown{display:block}
  .has-menu:hover .dropdown.con-grupos{display:grid}
}
.dd-grid.una .dd-item{padding:8px 10px}
.dd-grid.una .dd-ico{width:34px;height:37px}
.dd-grid.una .dd-ico svg{width:20px;height:20px}
.dd-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;text-decoration:none;transition:background .15s}
.dd-item:hover{background:var(--hx-palido-2)}
.dd-ico{flex:none;width:45px;height:49px;display:grid;place-items:center;background:var(--hx-menta);color:var(--hx-hondo);clip-path:var(--hex)}
.dd-ico svg{width:26px;height:26px}
svg .d{fill:currentColor;opacity:.14;stroke:none}
.dd-t{display:flex;flex-direction:column;gap:3px;white-space:normal}
.dd-t b{font-size:14px}
.dd-t span{font-size:12px;color:var(--hx-gris);line-height:1.4}
.dd-foot{display:flex;justify-content:space-between;margin-top:6px;padding:15px 0 0;border-top:1px solid var(--hx-linea);font-size:13px;font-weight:600;color:var(--hx-tinta);text-decoration:none}

/* ---------- Animaciones ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.6,.3,1),transform .6s cubic-bezier(.2,.6,.3,1);transition-delay:calc(var(--i,0) * 80ms)}
[data-reveal].in{opacity:1;transform:none}
section[data-reveal]{transform:none;transition-delay:0s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ---------- Hero: texto + escena de hexágonos ---------- */
.hero{background:var(--hx-fondo);padding:65px 32px 48px}
.hero-card{max-width:1156px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:38px;position:relative}
.hero-shade,.hero-card > .hexbg{display:none}
.hero-card:has(.escena) .hero-media{display:none}
.hero-copy{position:relative;z-index:2}
.hero-copy .kicker{margin-bottom:22px}
.hero-copy .rota{display:inline-block;position:relative;color:var(--hx-hondo);white-space:nowrap}
.hero-copy .rota::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:5px;background:var(--hx-lima);clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.hero-copy .rota span{display:none}
.hero-copy .rota span.on{display:inline;animation:sube .5s ease}
@keyframes sube{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}
.hero-copy p{max-width:500px;font-size:19px;color:var(--hx-texto-hero);margin:28px 0 0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;grid-column:1}
.chip{font-size:13px;color:var(--hx-gris);display:inline-flex;align-items:center;gap:8px}
.chip::before{content:"";width:9px;height:11px;background:var(--hx-verde);clip-path:var(--hex);flex:none}
.chip b{color:var(--hx-tinta);font-weight:600}
.rating{display:inline-flex;align-items:center;gap:8px;margin-top:19px;text-decoration:none;font-size:13px;color:var(--hx-gris);grid-column:1}
.rating .stars{color:var(--hx-hondo);letter-spacing:1px}
.rating b{color:var(--hx-tinta);font-size:15px}
/* La escena: el selector ES la composición */
.escena{position:relative;display:block;isolation:isolate;aspect-ratio:560/520;width:100%;grid-column:2;grid-row:1/4}
.escena-indice{position:absolute;top:0;left:22px;font-size:10px;letter-spacing:.16em;color:var(--hx-gris)}
.hex-solid{position:absolute;left:20%;top:15%;width:65%;height:67%;background:var(--hx-lima);clip-path:var(--hex);z-index:-1}
.hex-outline{position:absolute;left:12%;top:8%;width:65%;height:67%;z-index:-1;clip-path:var(--hex);background:var(--hx-tinta-3)}
.hex-outline::after{content:"";position:absolute;inset:1px;clip-path:inherit;background:var(--hx-fondo)}
.escena-lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.escena-lineas path{fill:none;stroke:var(--hx-linea-escena);stroke-width:1.4}
.escena-lineas path.activa{stroke:var(--hx-hondo);stroke-width:2;stroke-dasharray:6 5}
@media (prefers-reduced-motion:no-preference){.escena-lineas path.activa{animation:flujo 3.5s linear infinite}}
@keyframes flujo{to{stroke-dashoffset:-44}}
.escena-producto{position:absolute;left:24%;top:32%;width:55%;height:34%;background:var(--hx-superficie);border-radius:13px;display:flex;flex-direction:column;padding:17px 18px 12px;box-shadow:var(--hx-sombra-ficha);border:1px solid var(--hx-linea-2)}
.escena-cat{font-size:10px;letter-spacing:.1em;color:var(--hx-gris);font-weight:600;border-bottom:1px solid var(--hx-linea-3);padding-bottom:9px;margin-bottom:4px}
a.escena-producto{color:inherit;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
a.escena-producto:hover,a.escena-producto:focus-visible{transform:translateY(-3px);box-shadow:var(--hx-sombra-ficha-2)}
.escena-producto img{flex:1;min-height:0;width:100%;object-fit:contain;background:#fff}
.escena-producto .placeholder{flex:1;min-height:0}
.escena-firma{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.09em;color:var(--hx-gris);margin-top:6px}
.escena-firma i{width:9px;height:11px;clip-path:var(--hex);background:var(--hx-verde)}
.escena-nodo{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;background:none;border:0;padding:0;cursor:pointer;color:var(--hx-tinta)}
.escena-nodo:nth-of-type(1){left:8%;top:12%} .escena-nodo:nth-of-type(2){right:6%;top:12%}
.escena-nodo:nth-of-type(3){left:8%;bottom:17%} .escena-nodo:nth-of-type(4){right:6%;bottom:17%}
.nodo-hex{position:relative;width:68px;height:77px;display:grid;place-items:center;background:var(--hx-tinta);clip-path:var(--hex);isolation:isolate;transition:transform .25s}
.nodo-hex::before{content:"";position:absolute;inset:1px;background:var(--hx-fondo);clip-path:inherit;z-index:-1;transition:background .25s}
.nodo-hex svg{width:34px;height:34px;color:var(--hx-hondo)}
.escena-nodo:hover .nodo-hex{transform:translateY(-3px)}
.escena-nodo[aria-pressed=true] .nodo-hex::before{background:var(--hx-verde)}
.escena-nodo[aria-pressed=true] .nodo-hex svg{color:var(--hx-sobre-acento)}
.nodo-rotulo{background:var(--hx-superficie);border-radius:3px;padding:2px 5px;font-size:12px;font-weight:500}
.escena-nodo:focus-visible{outline-offset:4px;border-radius:8px}
.escena-pie{position:absolute;bottom:0;left:22px;right:0;padding:14px 0 0;border-top:1px solid var(--hx-linea);line-height:1.6;text-align:left}
.escena-pie strong{display:block;font-size:12px;font-weight:600}
.escena-pie span{display:block;font-size:11px;color:var(--hx-gris)}
/* Sin escena, el medio normal */
.hero-card:not(:has(.escena)) .hero-media{grid-column:2;grid-row:1/4;border-radius:16px;overflow:hidden;aspect-ratio:5/4}
.hero-card:not(:has(.escena)) .hero-media.contener{background:var(--hx-palido);display:grid;place-items:center;padding:32px}
.hero-card:not(:has(.escena)) .hero-media.contener img{object-fit:contain}

/* ---------- Cifras y marcas ---------- */
.proof{padding:25px 0 42px;text-align:center;border-bottom:1px solid var(--hx-linea)}
.proof .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.proof h2{font-size:13px;font-weight:400;letter-spacing:0;color:var(--hx-gris)}
.proof .stats{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;justify-content:center}
.proof .stat{display:flex;align-items:baseline;gap:8px}
.proof .stat strong{font-weight:500;font-size:34px;letter-spacing:-.04em;line-height:1}
.proof .stat span{font-size:14px;color:var(--hx-gris)}
.proof .stat em{font-style:normal;font-size:12px}
.brands{width:100%;overflow:hidden}
.brands .pista{display:flex;justify-content:center;align-items:center;gap:54px;flex-wrap:wrap;font-size:24px;font-weight:700;letter-spacing:.03em}
.brands.marquesina .pista{flex-wrap:nowrap;width:max-content;justify-content:flex-start;animation:marquesina var(--marquesina-dur,32s) linear infinite;margin:0 auto}
.brands.marquesina{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.brands .pista:hover{animation-play-state:paused}
.brands .b{color:var(--hx-tinta);opacity:.85;white-space:nowrap}
.brands img{height:33px;width:auto;max-width:145px;object-fit:contain}
@keyframes marquesina{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
section{padding:96px 0}
.band{background:var(--hx-palido-2)}
.sec-head{max-width:680px;margin:0 auto clamp(28px,4vw,40px);text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head p{color:var(--hx-gris);margin:14px auto 0}
.sec-head.centrada{text-align:center}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hx-sobre-lima);background:var(--hx-lima);padding:5px 10px;border-radius:4px;margin-bottom:10px}

/* Tarjetas de producto (la galería) */
.trio{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:24px}
.fcard{border:1px solid var(--hx-linea);border-radius:16px;overflow:hidden;background:var(--hx-superficie);display:flex;flex-direction:column}
.fcard .media{height:245px;aspect-ratio:auto;display:grid;place-items:center;padding:22px;background:var(--hx-palido)}
.fcard .media{grid-template:minmax(0,1fr)/minmax(0,1fr);overflow:hidden}
.fcard .media img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.fcard:hover .media img{transform:scale(1.06)}
.fcard:nth-child(2) .media{background:var(--hx-palido-2)} .fcard:nth-child(3) .media{background:var(--hx-palido-3)}
.fcard .body{padding:27px;display:flex;flex-direction:column;gap:12px;flex:1}
.fcard .body h3{font-size:22px}
.fcard .body p{color:var(--hx-gris);font-size:15px}
.fcard .body .link{margin-top:auto;justify-content:space-between;width:100%}
.media.contener{background:var(--hx-palido);display:grid;place-items:center;padding:24px}
.media.contener img{object-fit:contain}
/* Toda caja de producto/ilustración: la imagen se ajusta a la caja (nunca más grande que ella) */
.media.contener{grid-template:minmax(0,1fr)/minmax(0,1fr);overflow:hidden}
.media.contener img{width:100%;height:100%;min-height:0}
.media.pantalla{background:var(--hx-palido);border-radius:16px;padding:24px 24px 0;display:flex;align-items:flex-end;overflow:hidden;aspect-ratio:5/4}
.media.pantalla .ventana{width:100%;height:100%;background:var(--hx-superficie);border-radius:12px 12px 0 0;border:1px solid var(--hx-linea-2);border-bottom:0;overflow:hidden;display:flex;flex-direction:column}
.media.pantalla .barra{height:28px;flex:none;background:var(--hx-palido);border-bottom:1px solid var(--hx-linea-3);display:flex;align-items:center;gap:6px;padding:0 12px}
.media.pantalla .barra i{width:8px;height:8px;border-radius:50%;background:var(--hx-punto)}
.media.pantalla img,.media.pantalla video,.media.pantalla .placeholder{flex:1;min-height:0;width:100%;object-fit:cover;object-position:left top}

/* Bloque apilado */
.stack{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.stack-item{padding:44px 0;border-top:1px solid var(--hx-linea)} .stack-item:first-child{border-top:0;padding-top:8px}
.stack-item h3{font-size:30px;font-weight:500;letter-spacing:-.035em;margin-bottom:10px} .stack-item p{color:var(--hx-gris);margin-bottom:16px}
.stack-text:has(.on) .stack-item:not(.on){opacity:.4} .stack-item{transition:opacity .3s}
.stack-text .media.stack-mobile{display:none}
.stack-media{position:sticky;top:110px;aspect-ratio:5/4;border-radius:16px;overflow:hidden;background:var(--hx-palido)}
.stack-frame{position:absolute;inset:0;opacity:0;transition:opacity .4s} .stack-frame.on{opacity:1} .stack-frame .media{height:100%;aspect-ratio:auto}

/* Soluciones: fichas con regla superior y nodo hexagonal */
.sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sol{position:relative;border-top:1px solid var(--hx-tinta);padding:25px 0 0;text-decoration:none;display:flex;flex-direction:column;gap:12px}
.sol:focus-visible{outline:3px solid var(--hx-foco);outline-offset:5px}
.circle{width:68px;height:77px;background:var(--hx-tinta);clip-path:var(--hex);display:grid;place-items:center;color:var(--hx-hondo);position:relative;isolation:isolate;margin-bottom:8px}
.circle::before{content:"";position:absolute;inset:1px;background:var(--hx-fondo);clip-path:inherit;z-index:-1}
.circle svg{width:34px;height:34px}
.circle.img::before{background:#000}
.circle.img img{width:100%;height:100%;object-fit:cover}
.sol h3{font-size:21px}
.sol p{color:var(--hx-gris);font-size:15px}
.sol .tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--hx-hondo);font-weight:700}
.sol .arrow{position:absolute;top:26px;right:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--hx-tinta);display:grid;place-items:center;font-size:15px;transition:background .2s}
.sol:hover .arrow{background:var(--hx-lima)}

/* Destacado y pestañas: texto + panel pálido */
.split,.panel.on{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split .copy h2{margin-bottom:0}
.split .copy p,.panel .copy p{color:var(--hx-gris);margin:18px 0 0}
.split .copy ul,.panel .copy ul{list-style:none;margin:23px 0 30px}
.split .copy li,.panel .copy li{border-bottom:1px solid var(--hx-linea);padding:12px 0;font-size:15px}
.split .copy li::before,.panel .copy li::before{content:"✓";color:var(--hx-hondo);margin-right:12px;font-weight:700}
.split .media,.panel .media{background:var(--hx-palido);border-radius:16px;overflow:hidden;padding:32px;aspect-ratio:5/4;display:grid;place-items:center}
.split .media img,.panel .media img{object-fit:contain;background:#fff;border-radius:12px}
/* Pestañas: la caja es cuadrada para las ilustraciones de 800×800 y la imagen se ajusta dentro; con 5/4 fijo se cortaba */
.panel .media.contener{aspect-ratio:1/1;grid-template:minmax(0,1fr)/minmax(0,1fr)}
.panel .media.contener img{width:100%;height:100%}
.split .media.pantalla,.panel .media.pantalla{display:flex;padding-bottom:0}
.split .media.pantalla img{background:none;border-radius:0}
.split.invertido .copy{order:2}
.panel .copy h3{font-size:34px;font-weight:500;letter-spacing:-.035em}
.tabs{display:flex;border-bottom:1px solid var(--hx-linea);gap:10px;margin-bottom:38px}
.tabs button{flex:1;font-family:inherit;background:none;border:0;border-bottom:2px solid transparent;padding:18px 10px;cursor:pointer;color:var(--hx-gris);min-height:52px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:-1px}
.tabs button::before{content:"";width:12px;height:14px;background:var(--hx-menta);clip-path:var(--hex);flex:none;transition:background .2s}
.tabs button[aria-selected=true]{border-bottom-color:var(--hx-hondo);color:var(--hx-hondo);font-weight:700}
.tabs button[aria-selected=true]::before{background:var(--hx-verde)}
.panel{display:none}
.panel.on{animation:sube .35s ease}

/* Carrusel de pastillas */
.carousel{position:relative}
.carousel .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--hx-scroll);cursor:grab}
.carousel .track.drag{cursor:grabbing;scroll-snap-type:none}
.pill{flex:none;width:236px;scroll-snap-align:start;display:flex;gap:14px;align-items:center;padding:14px;border-radius:10px;background:var(--hx-superficie);border:1px solid var(--hx-linea);text-decoration:none;transition:background .15s}
.pill:hover{background:var(--hx-palido-2)}
.pill .ico{flex:none;width:45px;height:49px;clip-path:var(--hex);background:var(--hx-menta);color:var(--hx-hondo);display:grid;place-items:center}
.pill .ico svg{width:26px;height:26px}
.pill .ico.img{background:var(--hx-superficie);clip-path:none;border:1px solid var(--hx-linea);border-radius:8px;overflow:hidden}
.pill .ico.img img{width:100%;height:100%;object-fit:contain;padding:4px}
.pill .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pill .t b{font-size:14px}
.pill .t span{font-size:12px;color:var(--hx-gris);line-height:1.4}
.carousel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.dots{display:flex;gap:6px} .dots i{width:8px;height:8px;border-radius:999px;background:var(--hx-linea);transition:width .25s,background .25s} .dots i.on{width:22px;background:var(--hx-tinta)}
.carousel .arrows{display:flex;gap:10px}
.carousel .arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--hx-tinta);background:var(--hx-superficie);color:var(--hx-tinta);font-size:22px;cursor:pointer}
.carousel .arrows button:hover{background:var(--hx-tinta);color:var(--hx-sobre-tinta)}

/* Casos */
.cases{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:24px}
.case{display:flex;flex-direction:column;background:var(--hx-superficie);border-radius:16px;overflow:hidden;border:1px solid var(--hx-linea)}
.case .media{aspect-ratio:4/3}
.case .body{padding:24px 27px 27px;display:flex;flex-direction:column;gap:8px}
.case .eyebrow{margin-bottom:4px;font-size:11px}
.case h3{font-size:21px} .case h3 a{text-decoration:none} .case h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.case p{color:var(--hx-gris);font-size:15px}

/* Comparativa */
.compare{border-radius:7px;overflow:hidden;background:var(--hx-superficie);border:1px solid var(--hx-linea)}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:20px 24px;text-align:left;border-top:1px solid var(--hx-linea);font-size:16px;vertical-align:top}
.compare thead th{border-top:0;font-weight:600;font-size:18px}
.compare thead th:nth-child(2){background:var(--hx-palido);color:var(--hx-hondo)}
.compare tbody th{font-weight:600;width:22%;color:var(--hx-gris)}
.compare td:nth-child(2){background:var(--hx-palido);font-weight:600}
.compare td:nth-child(3){color:var(--hx-gris)}
.ok::before{content:"";display:inline-block;width:9px;height:11px;clip-path:var(--hex);background:var(--hx-verde);margin-right:10px;vertical-align:middle}

/* Testimonios */
.testi{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:stretch}
.testi .big{border-radius:16px;min-height:440px;overflow:hidden}
.testi .quotes{display:grid;gap:16px;align-content:start}
.quote{border-radius:16px;background:var(--hx-palido);padding:26px;display:flex;flex-direction:column;gap:14px}
.quote blockquote{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.01em}
.quote .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--hx-gris)}
.quote .who .av{width:40px;height:40px;border-radius:50%;background:var(--hx-tinta);flex:none;object-fit:cover}
.stars{color:var(--hx-hondo);letter-spacing:2px;font-size:14px}

/* Proceso: tres pasos con número en hexágono */
.process{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.process-copy p{color:var(--hx-gris);margin:18px 0 26px}
.process-list article{display:grid;grid-template-columns:40px 1fr;gap:20px;border-bottom:1px solid var(--hx-linea);padding:23px 0}
.process-list article > span{display:grid;place-items:center;width:38px;height:38px;background:var(--hx-verde);color:var(--hx-sobre-acento);font-size:12px;font-weight:700;clip-path:var(--hex-h)}
.process-list h3{font-size:21px;margin-bottom:8px}
.process-list p{font-size:16px;color:var(--hx-gris)}

/* Presupuesto: bloque final oscuro con una esquina cortada */
.quote-cta{background:var(--hx-tinta);color:var(--hx-sobre-tinta);position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:28px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 48px) 0,100% 48px,100% 100%,0 100%)}
.quote-cta .hexbg{display:none}
.quote-cta .lead{position:relative;padding:65px 40px 65px 70px}
.quote-cta .lead h2{color:var(--hx-sobre-tinta);max-width:620px}
.quote-cta .lead p{font-size:18px;margin:18px 0 28px;color:var(--hx-noche-texto)}
.quote-cta .lead .eyebrow{color:var(--hx-lima)}
.quote-cta .lead .btn-ghost{background:transparent;color:var(--hx-sobre-tinta);border-color:var(--hx-borde-fantasma)}
.quote-cta .lead .btn-ghost:hover{background:var(--hx-tinta-2)}
.quote-cta .micro{font-size:13px;color:var(--hx-noche-gris);margin:0 0 26px}
.quote-cta .contact{display:grid;gap:10px;font-weight:600;font-size:16px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.quote-cta .contact a{text-decoration:none;color:var(--hx-lima)}
.form{position:relative;background:var(--hx-palido);color:var(--hx-tinta);margin:24px 24px 24px 0;border-radius:16px;padding:35px;display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field label,.field .label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;min-height:49px;padding:12px;border:1px solid var(--hx-campo-borde);border-radius:8px;background:var(--hx-superficie);color:var(--hx-tinta);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--hx-hondo);box-shadow:0 0 0 3px color-mix(in srgb,var(--hx-verde) 25%,transparent)}
.field textarea{min-height:96px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:8px 12px;border-radius:6px;border:1px solid var(--hx-chip-borde);background:var(--hx-superficie);font-size:13px;color:var(--hx-tinta);transition:all .15s}
.chips input:checked + span{background:var(--hx-tinta);color:var(--hx-sobre-tinta);border-color:var(--hx-tinta)}
.chips input:focus-visible + span{outline:3px solid var(--hx-foco);outline-offset:2px}
.form .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.form .foot small{font-size:12px;color:var(--hx-gris);max-width:32ch}
/* Consentimiento e información básica de protección de datos (LOPDGDD art. 11) */
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;margin-top:4px;cursor:pointer}
.form .consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--hx-verde)}
.form .consent a,.form .info-basica a{color:var(--hx-hondo);text-decoration:underline}
.form .info-basica{font-size:12px;line-height:1.5;color:var(--hx-gris);border:1px solid var(--hx-linea);border-radius:10px;padding:10px 14px;margin-top:6px}
.form .info-basica b{display:block;color:var(--hx-tinta);font-size:12px;margin-bottom:4px}
.form .info-basica dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0}
.form .info-basica dt{font-weight:700;color:var(--hx-tinta)} .form .info-basica dd{margin:0}
@media(max-width:600px){.form .info-basica dl{grid-template-columns:1fr} .form .info-basica dd{margin-bottom:4px}}
.form .done{display:none;text-align:center;padding:40px 10px}
.form .done p{margin:10px auto 0;color:var(--hx-gris)}
.form.sent > :not(.done){display:none}
.form.sent .done{display:block}

/* FAQ */
.faq{max-width:850px;margin:0 auto}
.faq details{border-bottom:1px solid var(--hx-linea)}
.faq summary{list-style:none;cursor:pointer;padding:23px 35px 23px 0;min-height:60px;font-size:18px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--hx-tinta);display:grid;place-items:center;font-weight:400;transition:transform .2s,background .2s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--hx-lima);border-color:var(--hx-lima)}
.faq details p{padding:0 25px 20px 0;color:var(--hx-gris);font-size:16px;max-width:750px}
.faq summary:focus-visible{outline:3px solid var(--hx-foco);outline-offset:3px;border-radius:8px}

/* Texto y artículos */
.prosa,.articulo{max-width:72ch}
.prosa h2{margin-bottom:20px} .prosa p{margin-bottom:16px;color:var(--hx-gris)}
.articulo h2{font-size:clamp(24px,2.4vw,32px);margin:38px 0 14px}
.articulo h3{font-size:20px;margin:26px 0 10px}
.articulo p{color:var(--hx-gris);font-size:17px;margin-bottom:16px;max-width:none}
.articulo ul,.articulo ol{margin:0 0 18px 22px;color:var(--hx-gris);font-size:17px;display:grid;gap:6px}
.articulo blockquote{border-left:4px solid var(--hx-lima);padding:8px 18px;margin:18px 0;font-weight:500;font-size:18px}
.articulo .aviso{background:var(--hx-palido);border-radius:8px;padding:16px 18px;margin:18px 0;font-size:15px}
.articulo .meta{font-size:14px;color:var(--hx-gris);margin-bottom:24px}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.art-card{background:var(--hx-superficie);border:1px solid var(--hx-linea);border-radius:16px;padding:27px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:background .15s}
.art-card:hover{background:var(--hx-palido-2)}
.art-card h3{font-size:20px} .art-card p{color:var(--hx-gris);font-size:15px}
.art-card .link{margin-top:auto;padding-top:8px;justify-content:space-between;width:100%}

/* ---------- Pie ---------- */
footer{background:var(--hx-fondo);color:var(--hx-tinta);padding:65px 0 30px;border-top:1px solid var(--hx-linea);font-size:14px}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:65px;margin-bottom:40px}
footer h4{font-size:14px;font-weight:700;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{color:var(--hx-tinta);text-decoration:none} footer a:hover{text-decoration:underline;text-underline-offset:4px}
footer p{color:var(--hx-gris)}
footer .legal{border-top:1px solid var(--hx-linea);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--hx-gris)}
footer .brand{margin-bottom:20px}
.social{display:flex;gap:8px;margin-top:18px}
.social a{width:38px;height:42px;clip-path:var(--hex);background:var(--hx-menta);color:var(--hx-hondo);display:grid;place-items:center;transition:background .15s}
.social a:hover{background:var(--hx-verde);color:var(--hx-sobre-acento)}
.social svg{width:18px;height:18px}
.foot-brands{margin:8px 0 28px;overflow:hidden}
.foot-brands .pista{gap:40px;font-size:18px;opacity:.7}
.foot-brands img{height:30px}

/* ---------- Nota de desarrollo ---------- */
.note{position:fixed;right:80px;bottom:14px;z-index:60;background:#fff;border:1px dashed var(--hx-gris);border-radius:8px;padding:10px 14px;font-size:12px;font-weight:700;color:var(--hx-gris);box-shadow:0 8px 24px rgba(0,0,0,.12);max-width:280px}
.note b{color:var(--hx-hondo)}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .nav ul{gap:14px} .nav .wrap{gap:16px}
  .hero-card{gap:24px} .hero{padding-top:50px}
  .escena-nodo{width:80px} .nodo-hex{width:60px;height:68px} .escena-producto{padding:12px}
  .trio{grid-template-columns:1fr 1fr} .sol-grid{grid-template-columns:1fr 1fr}
  .split,.panel.on{gap:35px} .process{gap:40px}
  footer .grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:820px){
  .nav ul,.nav .tel,.nav .idiomas{display:none}
  .nav .wrap{height:74px;gap:10px} .nav .btn{padding:9px 14px;font-size:13px}
  .burger{display:block}
  .nav.open .menu > li{width:100%} .nav.open .has-menu > button{width:100%;justify-content:space-between}
  .dropdown,.dropdown.con-grupos{position:static;width:100%;box-shadow:none;clip-path:none;border-radius:9px;padding:10px;grid-template-columns:1fr;max-height:46vh;overflow:auto}
  .dd-grid,.dropdown.con-grupos .dd-grupo:first-child .dd-grid{grid-template-columns:1fr}
  .has-menu > button::after{display:none}
  .nav.open .menu > li > a{padding:12px 0}
  .hero{padding:37px 24px 42px} .hero-card{grid-template-columns:1fr;gap:32px}
  .hero-copy h1{font-size:clamp(40px,8.5vw,61px)}
  .escena{grid-column:1;grid-row:auto;order:10;max-width:530px;margin:0 auto;aspect-ratio:560/540}
  .hero-card{display:flex;flex-direction:column}
  .escena-indice,.escena-pie{left:0}
  .escena-nodo{width:75px} .nodo-hex{width:53px;height:60px} .nodo-hex svg{width:28px;height:28px}
  .escena-nodo:nth-of-type(1){left:4%;top:11%} .escena-nodo:nth-of-type(2){right:4%;top:11%} .escena-nodo:nth-of-type(3){left:4%;bottom:19%} .escena-nodo:nth-of-type(4){right:4%;bottom:19%}
  .escena-producto{left:25%;top:34%;height:29%;width:51%;padding:9px 10px;border-radius:8px}
  .escena-cat{font-size:8px;letter-spacing:.04em;padding-bottom:5px;margin-bottom:2px} .escena-firma{font-size:7px}
  .hex-solid{left:20%;top:16%;height:63%;width:65%} .hex-outline{left:13%;top:10%;height:63%;width:65%}
  .hero-card:not(:has(.escena)) .hero-media{grid-column:1;grid-row:1;aspect-ratio:16/10}
  .wrap{padding:0 24px} section{padding:65px 0}
  .trio,.sol-grid,.cases,.art-grid{grid-template-columns:1fr}
  .split,.panel.on,.testi,.quote-cta,.process,.stack{grid-template-columns:1fr}
  .split.invertido .copy{order:0}
  .tabs{overflow-x:auto;gap:0} .tabs button{flex:1 0 auto;font-size:13px;padding:12px 8px}
  .stack-media{display:none} .stack-text .media.stack-mobile{display:block;margin-top:16px;border-radius:12px;overflow:hidden}
  .stack-text:has(.on) .stack-item:not(.on){opacity:1}
  .brands .pista{gap:20px 32px;font-size:19px}
  .quote-cta{clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,0 100%)}
  .quote-cta .lead{padding:43px 27px 0} .form{margin:0 16px 16px} .form .row{grid-template-columns:1fr}
  .testi .big{min-height:280px}
  .compare thead th:first-child{display:none}
  .compare tbody th{width:auto;display:block;border-top:1px solid var(--hx-linea);padding-bottom:6px}
  .compare tbody td{display:block;border-top:0;padding-top:6px}
  .carousel-mobile{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:none;margin:0 -24px;padding-left:24px;padding-right:24px}
  .carousel-mobile::-webkit-scrollbar{display:none}
  .carousel-mobile > *{flex:none;width:82%;scroll-snap-align:start}
  footer .grid{grid-template-columns:1fr;gap:35px}
  .note{display:none}
}


/* ===== propuesta-b.css (encima de hexagonal) ===== */
/* @base: hexagonal */
/* propuesta-b.css — «Contraste». La web aprobada (hexagonal) con los golpes
   de contraste del estilo tarjeta (Microsoft): el hero dentro de una TARJETA
   OSCURA redondeada (la escena sigue, con los hexágonos en claro), chips de
   cristal, el destacado en bloque negro, el presupuesto en verde de marca con
   el patrón de hexágonos, y el pie negro. */

/* Hero: tarjeta oscura */
.hero{padding:12px 32px 0}
.hero-card{max-width:1400px;background:var(--hx-noche);color:#fff;border-radius:28px;padding:clamp(32px,5vw,64px) clamp(24px,5vw,64px);overflow:hidden}
.hero-copy .kicker{color:var(--hx-lima)}
.hero-copy h1{color:#fff}
.hero-copy .rota{color:var(--hx-lima)}
.hero-copy .rota::after{background:var(--hx-verde)}
.hero-copy p{color:var(--hx-noche-texto)}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn-ghost:hover{background:#fff;color:var(--hx-tinta)}
.hero-chips{gap:8px}
.chip{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.26);color:#fff;padding:9px 14px;border-radius:999px}
.chip::before{background:var(--hx-lima)}
.chip b{color:#fff}
.rating{color:var(--hx-noche-texto-3)} .rating b{color:#fff} .rating .stars{color:var(--hx-lima)}
/* La escena sobre oscuro */
.escena-indice,.escena-pie span{color:var(--hx-noche-gris)}
.escena-pie{border-top-color:rgba(255,255,255,.18)} .escena-pie strong{color:#fff}
.hex-outline{background:rgba(255,255,255,.45)} .hex-outline::after{background:var(--hx-noche)}
.hex-solid{background:var(--hx-verde);opacity:.9}
.escena-lineas path{stroke:rgba(255,255,255,.25)} .escena-lineas path.activa{stroke:var(--hx-lima)}
.nodo-hex{background:rgba(255,255,255,.5)} .nodo-hex::before{background:var(--hx-noche-nodo)} .nodo-hex svg{color:var(--hx-lima)}
.escena-nodo[aria-pressed=true] .nodo-hex::before{background:var(--hx-verde)} .escena-nodo[aria-pressed=true] .nodo-hex svg{color:var(--hx-sobre-acento)}
.nodo-rotulo{background:rgba(255,255,255,.1);color:#fff}
.escena-producto{border-color:transparent;box-shadow:0 20px 50px rgba(0,0,0,.35)}

/* Destacado: bloque negro partido */
.split{background:var(--hx-negro);color:#fff;border-radius:28px;overflow:hidden;gap:28px;align-items:stretch}
.split .copy{padding:clamp(36px,5vw,72px)}
.split .copy .eyebrow{color:var(--hx-lima)}
.split .copy p{color:var(--hx-noche-texto-2)}
.split .copy li{border-bottom-color:rgba(255,255,255,.12)} .split .copy li::before{color:var(--hx-lima)}
.split .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .split .btn-ghost:hover{background:#fff;color:var(--hx-tinta)}
.split .media{border-radius:0;aspect-ratio:auto;min-height:420px;background:var(--hx-noche);padding:40px}
.split .media img{border-radius:12px}

/* Presupuesto: verde de marca con hexágonos */
.quote-cta{background:var(--hx-verde);color:var(--hx-sobre-acento);clip-path:none;border-radius:28px}
.quote-cta .hexbg{display:block;opacity:.22}
.quote-cta .lead{position:relative}
.quote-cta .lead h2{color:var(--hx-sobre-acento)}
.quote-cta .lead p{color:var(--hx-sobre-acento-2)}
.quote-cta .lead .eyebrow{color:var(--hx-sobre-acento)}
.quote-cta .micro{color:var(--hx-sobre-acento-3)}
.quote-cta .contact{border-top-color:rgba(0,0,0,.14)} .quote-cta .contact a{color:var(--hx-sobre-acento)}
.quote-cta .lead .btn-green{background:var(--hx-tinta);border-color:var(--hx-tinta);color:var(--hx-sobre-tinta)}
.quote-cta .lead .btn-ghost{color:var(--hx-sobre-acento);border-color:var(--hx-sobre-acento)} .quote-cta .lead .btn-ghost:hover{background:var(--hx-tinta);color:var(--hx-sobre-tinta)}
.form{background:var(--hx-superficie);margin:24px}

/* Pie negro */
footer{background:var(--hx-negro);color:var(--hx-noche-texto-2);border-top:0}
footer a,footer p{color:var(--hx-noche-texto-2)} footer a:hover{color:var(--hx-lima)}
footer h4{color:#fff}
footer .legal{border-top-color:var(--hx-negro-2);color:var(--hx-noche-gris-2)}
.social a{background:var(--hx-negro-2);color:#fff;clip-path:none;border-radius:50%;height:38px} .social a:hover{background:var(--hx-verde);color:var(--hx-sobre-acento)}
.foot-brands img{background:#fff;border-radius:6px;padding:4px}

@media (max-width:820px){
  .hero-card{padding:20px 20px 28px;border-radius:20px}
  .split .media{min-height:260px;padding:24px}
}


/* ===== propuesta-e.css (encima de propuesta-b) ===== */
/* @base: propuesta-b */
/* propuesta-e.css — «Noche». Propuesta-b (Contraste) llevada al extremo: la
   página arranca clara y se va oscureciendo. Desde «casos» hasta el pie todo
   es verde tinta (casos, testimonios, proceso, presupuesto, guías, FAQ), y el
   presupuesto en verde de marca es el único golpe de color sobre lo oscuro.
   El hero pierde los bordes (tarjeta a sangre, esquinas solo abajo) y gana un
   resplandor lima detrás de la escena y el patrón de hexágonos muy tenue. */
:root{--noche:var(--hx-noche);--noche-2:var(--hx-noche-2);--noche-linea:var(--hx-noche-linea);--noche-gris:var(--hx-noche-gris);--noche-texto:var(--hx-noche-texto)} /* alias históricos: los valores viven en tokens.css */

/* Hero a sangre con resplandor */
.hero{padding:0}
.hero-card{max-width:none;border-radius:0 0 36px 36px;padding:clamp(48px,6vw,88px) clamp(24px,6vw,96px) clamp(40px,5vw,72px);position:relative}
.hero-card > .hexbg{display:block;opacity:.06;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.hero-card::before{content:"";position:absolute;right:-10%;top:-20%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hx-lima) 28%,transparent),transparent 70%);pointer-events:none}
.hero-copy,.escena,.hero-chips,.rating{position:relative;z-index:2}
.hero-copy h1{font-size:clamp(46px,5.2vw,78px)}
.hero-copy .rota::after{background:var(--hx-lima)}
.hex-solid{background:var(--hx-lima);opacity:.85}

/* Cifras: en claro, grandes, como transición */
.proof{border-bottom:0;padding:44px 0 36px}
.proof .stat strong{font-size:clamp(36px,4vw,56px)}
.proof .wrap{gap:clamp(44px,5vw,76px)}

/* Tarjetas: sin borde, fondo pálido */
.fcard,.case,.art-card,.pill{border:0;background:var(--hx-palido)}
.fcard .media,.fcard:nth-child(2) .media,.fcard:nth-child(3) .media{background:var(--hx-superficie);margin:14px 14px 0;border-radius:10px;height:230px}

/* ---- La noche: de «casos» al pie ---- */
section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq){background:var(--noche);color:#fff}
section:has(.cases){border-radius:36px 36px 0 0;margin-top:24px}
section.band:has(.cases),section.band:has(.faq),section.band:has(.testi){background:var(--noche)}
section:has(.testi),section:has(.process),section:has(.art-grid){background:var(--noche-2)}
section:has(.cases) + section,section:has(.testi) + section{padding-top:80px}
:is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq)) :is(.eyebrow,.kicker){color:var(--hx-lima)}
:is(section:has(.cases),section:has(.testi),section:has(.process),section:has(.art-grid),section:has(.faq)) .sec-head p{color:var(--noche-gris)}
:is(section:has(.cases),section:has(.testi),section:has(.process),section:has(.art-grid),section:has(.faq)) h2,
:is(section:has(.cases),section:has(.testi),section:has(.process),section:has(.art-grid),section:has(.faq)) h3{color:#fff}
/* Casos */
.case{background:var(--noche-2);border:1px solid var(--noche-linea)}
.case p{color:var(--noche-gris)} .case .eyebrow{color:var(--hx-lima)}
/* Testimonios */
.quote{background:rgba(255,255,255,.05);border:1px solid var(--noche-linea)}
.quote blockquote{color:#fff} .quote .who{color:var(--noche-gris)} .stars{color:var(--hx-lima)}
/* Proceso */
.process-copy p,.process-list p{color:var(--noche-gris)}
.process-list article{border-bottom-color:var(--noche-linea)}
.process-list article > span{background:var(--hx-lima)}
.process .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .process .btn-ghost:hover{background:#fff;color:var(--hx-tinta)}
.process .link{color:var(--hx-lima)} .process .link::after{border-color:rgba(255,255,255,.5);color:#fff}
/* Presupuesto: el golpe verde sobre la noche */
.quote-cta{box-shadow:0 40px 90px color-mix(in srgb,var(--hx-lima) 18%,transparent)}
/* Guías */
.art-card{background:var(--noche-2);border:1px solid var(--noche-linea)}
.art-card:hover{background:var(--hx-noche-3)} .art-card p{color:var(--noche-gris)}
.art-card .link{color:var(--hx-lima)} .art-card .link::after{border-color:rgba(255,255,255,.5);color:#fff}
/* FAQ */
.faq details{border-bottom-color:var(--noche-linea)}
.faq summary{color:#fff} .faq summary::after{border-color:rgba(255,255,255,.5);color:#fff}
.faq details[open] summary::after{color:var(--hx-sobre-lima)}
.faq details p{color:var(--noche-gris)}
/* Pie pegado a la noche, sin salto */
footer{background:var(--noche);border-top:1px solid var(--noche-linea)}
.split{box-shadow:0 30px 70px color-mix(in srgb,var(--hx-noche) 18%,transparent)}

@media (max-width:820px){
  .hero-card{border-radius:0 0 24px 24px;padding:36px 24px 40px}
  .hero-copy h1{font-size:clamp(40px,9vw,60px)}
  section:has(.cases){border-radius:24px 24px 0 0}
  /* Botón fijo abajo para llamar (el .tel de la barra), como en propuesta-d */
  .nav .tel{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:45;justify-content:center;align-items:center;min-height:54px;background:var(--hx-verde);color:var(--hx-sobre-acento);border-radius:14px;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
  .nav .tel::before{content:attr(data-llamar)} /* el texto viene del HTML (_comun.json → nav.llamar), por idioma */
  .arriba{bottom:84px}
  footer{padding-bottom:100px}
}

/* ---- Estándar de fotos (sitios/<sitio>/docs/FOTOS.md) ----
   PRODUCTO ("ajuste":"contener"): siempre sobre el panel pálido y fundido con él
   (multiply: el blanco del recorte desaparece y todas parecen del mismo estudio).
   Sobre un panel OSCURO (el destacado negro) no se puede fundir: va en ficha blanca.
   AMBIENTE: la misma corrección suave para que fotos de orígenes
   distintos (cliente, banco de imágenes, fabricante) no canten unas junto a otras. */
.media.contener{background:var(--hx-palido)}
.media.contener img{mix-blend-mode:multiply;background:none}
.split .media.contener{background:var(--hx-noche)}
.split .media.contener img{mix-blend-mode:normal;background:#fff;border-radius:12px;padding:18px}
.media:not(.contener):not(.pantalla) img,.case .media img,.testi .big img{filter:saturate(.9) contrast(1.04)}
/* En la escena del hero la caja es muy apaisada: el margen blanco que el estándar
   deja alrededor del producto (≥ 14 %) se aprovecha ampliando la foto sin salirse. */
.escena-producto{overflow:hidden}
.escena-producto img{transform:scale(1.22)}
.escena-cat,.escena-firma{position:relative;z-index:1}

/* Coherencia entre páginas: la «noche» empieza igual en todas (esquinas redondeadas en
   la PRIMERA sección oscura, sea casos, proceso o FAQ), y los enlaces sobre oscuro en lima. */
section:has(.cases){border-radius:0;margin-top:0}
main > :not(:is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq))) + :is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq)){border-radius:36px 36px 0 0;margin-top:24px}
:is(section:has(.cases),section:has(.testi),section:has(.process),section:has(.art-grid),section:has(.faq)) .link{color:var(--hx-lima)}
:is(section:has(.cases),section:has(.testi),section:has(.process),section:has(.art-grid),section:has(.faq)) .link::after{border-color:rgba(255,255,255,.5);color:#fff}
:is(section:has(.cases),section:has(.testi),section:has(.process),section:has(.art-grid),section:has(.faq)) .link:hover::after{color:var(--hx-sobre-lima)}
@media (max-width:820px){main > :not(:is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq))) + :is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq)){border-radius:24px 24px 0 0}}
/* Si la sección clara de antes es una franja (.band), las esquinas se pintan con su color
   (dos degradados radiales) en vez de recortarse, para que no asome el blanco del body. */
:is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq)){--fondo:var(--noche)}
:is(section:has(.testi),section:has(.process),section:has(.art-grid)){--fondo:var(--noche-2)}
.band + :is(section:has(.cases),section:has(.testi),section:has(.process),section#presupuesto,section:has(.art-grid),section:has(.faq)){margin-top:0!important;border-radius:0!important;background:
  radial-gradient(circle at 100% 100%,var(--fondo) 35.5px,var(--hx-palido-2) 36px) top left/36px 36px no-repeat,
  radial-gradient(circle at 0 100%,var(--fondo) 35.5px,var(--hx-palido-2) 36px) top right/36px 36px no-repeat,
  var(--fondo)}

/* ── Hexágonos verdes flotantes en el fondo ───────────────────────────────────────────────
   Capa fija detrás del contenido (z-index -1: por encima del fondo de la página, por debajo de todo):
   se ve donde la sección es transparente o semitransparente. Solo transform y opacity (sin repintar);
   sin movimiento si el visitante lo pide; en móvil, la mitad. */
body .hex-flota{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hex-flota i{position:absolute;left:var(--x);bottom:calc(var(--s) * -1.2);width:var(--s);height:calc(var(--s) * 1.1547);
  clip-path:var(--hex);
  background:linear-gradient(150deg,var(--hx-verde),var(--hx-lima));opacity:0;will-change:transform,opacity;
  animation:hex-sube var(--t) linear var(--d) infinite}
@keyframes hex-sube{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  12%{opacity:var(--o)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(var(--dx),calc(-100vh - 30vh),0) rotate(var(--r));opacity:0}}
/* las franjas claras dejan ver los hexágonos */
.band{background:color-mix(in srgb,var(--hx-palido-2) 55%,transparent)}
@media (max-width:760px){.hex-flota i:nth-child(even){display:none}}
@media (prefers-reduced-motion:reduce){.hex-flota i{animation:none;opacity:calc(var(--o) * .6);bottom:auto;top:calc(10% + var(--x))}}
/* en páginas de lectura (legales, guías) los hexágonos se atenúan para no competir con el texto */
body:has(.articulo) .hex-flota{opacity:.35}
/* sin endpoint del formulario el botón de enviar no existe: queda «Preparar en WhatsApp» (H1, 2026-09-24) */
.form .foot button.form-wa{display:inline-flex;align-items:center;gap:8px}

/* ── Menú: panel con lista + tarjeta de vista previa (elegida el 2026-09-25, «D» de menu-propuestas-2) ──
   Sin flechas (ni chevron ni «→»). Enlace activo = aro lima; el panel cae como cortina, los servicios
   suben escalonados (--i) y la tarjeta oscura de la derecha cambia con un fundido al señalar un servicio
   (app.js pone .act / .on). Solo en escritorio: en móvil el desplegable sigue siendo la lista de siempre. */
.chev{display:none}
@media (min-width:821px){
  .nav .has-menu > button::before{display:none}
  .nav .has-menu > button::after,.nav.compacta .has-menu > button::after{left:-12px;right:-12px;top:50%;bottom:auto;height:38px;margin-top:-19px;background:none;border:1.5px solid var(--hx-lima);border-radius:20px;transform:scale(.8);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
  .nav .has-menu.abierto > button::after,.nav .has-menu:hover > button::after{transform:none;opacity:1}
  /* Sin clip-path animado: el clip quita la zona «señalable» del panel mientras se abre y el ratón lo pierde
     (el panel se abría y cerraba en bucle). Se abre con opacidad + un pequeño descenso. */
  .nav .has-menu .dropdown,.nav .has-menu .dropdown.con-grupos{display:grid;grid-template-columns:1.55fr 1fr;gap:16px 28px;align-items:stretch;padding:26px 32px 22px;
    visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .nav .has-menu.abierto .dropdown,.nav .has-menu:hover .dropdown{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
  .nav .dropdown .dd-grupo:first-child{background:none;padding:0}
  .nav .dropdown .dd-grid,.nav .dropdown.con-grupos .dd-grupo:first-child .dd-grid{grid-template-columns:1fr 1fr;gap:4px;align-content:start}
  .nav .dropdown .dd-foot{grid-column:1/-1;margin-top:0}
  .nav .dd-item{opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s,background .15s}
  .nav .has-menu.abierto .dd-item,.nav .has-menu:hover .dd-item{opacity:1;transform:none;transition:opacity .35s calc(var(--i,0) * 35ms + 100ms),transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 35ms + 100ms),background .15s}
  .nav .dd-item.act{background:var(--hx-palido-2)}
  .nav .dd-item.act .dd-ico{background:var(--hx-verde);color:#fff}
  .nav .dd-ico{transition:background .25s,color .25s}
  .nav .dropdown .dd-prev{display:block;grid-column:2;grid-row:1;position:relative;overflow:hidden;min-height:250px;background:var(--hx-tinta);color:var(--hx-sobre-tinta);border-radius:16px}
  .dd-pv{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;opacity:0;transform:translateY(14px);pointer-events:none}
  .dd-pv.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
  .dd-pv b{font-size:22px;letter-spacing:-.02em;position:relative}
  .dd-pv > span:not(.dd-big){font-size:14px;line-height:1.45;color:rgba(255,255,255,.75);position:relative;max-width:32ch}
  .dd-pv a{position:relative;align-self:flex-start;margin-top:8px;background:var(--hx-lima);color:var(--hx-tinta);font-weight:700;font-size:14px;padding:9px 16px;border-radius:9px;text-decoration:none;transition:background .2s,transform .2s}
  .dd-pv a:hover{background:#fff;transform:translateY(-2px)}
  .dd-big{position:absolute;right:-30px;top:-20px;width:190px;height:210px;color:var(--hx-lima);opacity:.18}
  .dd-big svg{width:100%;height:100%;stroke-width:1}
  .dd-pv.on .dd-big{animation:dd-big .6s cubic-bezier(.2,.8,.2,1)}
  @keyframes dd-big{from{transform:translateY(18px) rotate(-8deg);opacity:0}}
  .nav .dropdown.con-grupos:not(.un-grupo) .dd-prev{display:none}
}
@media (prefers-reduced-motion:reduce){.nav .has-menu .dropdown{transition:none!important;transform:none!important}.nav .dd-item{transition:none!important;opacity:1;transform:none}}


/* _comun.css — CSS común a TODOS los estilos: el build lo añade al final del
   CSS de cualquier estilo (los ficheros que empiezan por «_» no son estilos).
   Aquí va lo que el editor (F9) puede poner en cualquier sección y no depende
   del estilo: animaciones de entrada, el bloque de código y las columnas libres. */

/* Animaciones de entrada ("animacion" en el JSON). Se apoyan en [data-reveal] +
   .in, que ya pone app.js al entrar en pantalla, y se apagan con reduced-motion. */
[data-anim]{transition-duration:.8s;transition-timing-function:cubic-bezier(.2,.7,.2,1);transition-delay:var(--retardo,0ms)!important}
[data-anim=aparecer]{transform:none}
[data-anim=subir]{transform:translateY(48px)}
[data-anim=zoom]{transform:scale(.92)}
[data-anim=izquierda]{transform:translateX(-48px)}
[data-anim=derecha]{transform:translateX(48px)}
[data-anim=rebote]{transform:translateY(48px);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
[data-anim].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none}}

/* Bloque de código del editor: se pinta tal cual; el CSS del bloque va dentro */
.bloque-html{position:relative}

/* Columnas libres (sección "columnas"): --cols lleva los anchos, p. ej. "2fr 1fr" */
.cols{display:grid;grid-template-columns:var(--cols,1fr 1fr);gap:clamp(20px,4vw,48px);align-items:start}
.cols.centrada{align-items:center}
.col{display:grid;gap:16px;min-width:0;align-content:start}
.col > h2,.col > h3,.col > p{margin:0}
.col > ul,.col > ol{margin:0 0 0 22px;display:grid;gap:6px}
.col .media{border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.col .media.contener{aspect-ratio:auto;min-height:200px}
.col .hero-actions{margin:0}
.col blockquote{border-left:4px solid currentColor;padding:8px 18px;font-weight:600;opacity:.9}
@media (max-width:820px){.cols{grid-template-columns:1fr}}

/* Imagen de cabecera dentro de un artículo (bloque {medio} en `articulo`): apaisada, no cuadrada. */
.articulo .media{aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:0 0 28px}
.articulo .media img{width:100%;height:100%;object-fit:cover}

/* Catálogo con filtros (sección "catalogo"). Va aquí para que la pinten todos los
   estilos igual; los colores salen de los tokens del estilo hexagonal con los
   genéricos de reserva, así que funciona con cualquier tokens.css. */
.catalogo{--c-linea:var(--hx-linea,var(--line,#e2e6e4));--c-tinta:var(--hx-tinta,var(--ink,#1b1f1d));--c-gris:var(--hx-gris,var(--ink-2,#5c625f));--c-hondo:var(--hx-hondo,var(--green-deep,#007a3f));--c-palido:var(--hx-palido,var(--band,#f3f5f4));--c-palido-2:var(--hx-palido-2,var(--green-tint,#e4f6ec));display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;text-align:left}
.cat-lado{position:sticky;top:100px;display:grid;gap:22px}
.cat-buscar{width:100%;font:inherit;font-size:15px;min-height:46px;padding:10px 14px;border:1px solid var(--c-linea);border-radius:9px;background:var(--hx-superficie,#fff);color:var(--c-tinta)}
.cat-grupo{border:0;margin:0;padding:0;min-width:0}
.cat-grupo legend{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;color:var(--c-tinta)}
.cat-opciones{display:flex;flex-wrap:wrap;gap:8px}
.cat-opciones label{position:relative;cursor:pointer}
.cat-opciones input{position:absolute;opacity:0;pointer-events:none}
.cat-opciones span{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:6px;border:1px solid var(--c-linea);background:var(--hx-superficie,#fff);font-size:14px;line-height:1.2;color:var(--c-tinta);transition:background .15s,color .15s,border-color .15s}
.cat-opciones span i{font-style:normal;font-size:12px;opacity:.6}
.cat-opciones label:hover span{border-color:var(--c-hondo)}
.cat-opciones input:checked + span{background:var(--c-tinta);border-color:var(--c-tinta);color:var(--hx-sobre-tinta,#fff)}
.cat-opciones input:focus-visible + span{outline:3px solid var(--c-hondo);outline-offset:2px}
.cat-limpiar{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--c-hondo);text-decoration:underline;cursor:pointer}
.cat-cuenta{font-size:14px;color:var(--c-gris);margin:0 0 14px}
.cat-cuenta b{color:var(--c-tinta)}
.cat-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cat-item{display:flex;flex-direction:column;border:1px solid var(--c-linea);border-radius:16px;overflow:hidden;background:var(--hx-superficie,#fff)}
.cat-item[hidden]{display:none}
.cat-foto{aspect-ratio:4/3;display:grid;place-items:center;padding:18px;background:var(--c-palido)}
.cat-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}
.cat-item:hover .cat-foto img{transform:scale(1.05)}
.cat-foto .placeholder{width:100%;height:100%;border-radius:10px}
.cat-cuerpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-tipo{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-hondo)}
.cat-cuerpo h3{font-size:21px;margin:0}
.cat-cuerpo p{font-size:14.5px;line-height:1.5;color:var(--c-gris);margin:0}
.cat-cuerpo p.cat-lema{color:var(--c-tinta);font-weight:600}
.cat-etiquetas{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0}
.cat-etiquetas li{font-size:12px;line-height:1.3;padding:4px 8px;border-radius:4px;background:var(--c-palido-2);color:var(--c-tinta)}
.cat-specs{border-top:1px solid var(--c-linea);margin-top:4px;font-size:14px}
.cat-specs summary{list-style:none;cursor:pointer;font-weight:700;padding:10px 0 2px;display:flex;justify-content:space-between;color:var(--c-tinta)}
.cat-specs summary::-webkit-details-marker{display:none}
.cat-specs summary::after{content:"+";font-weight:400}
.cat-specs[open] summary::after{content:"−"}
.cat-specs ul{margin:8px 0 2px 18px;padding:0;display:grid;gap:4px;color:var(--c-gris);line-height:1.4}
.cat-item .btn{margin-top:auto;width:100%;min-height:44px}
.cat-specs + .btn,.cat-etiquetas + .btn{margin-top:12px}
.cat-vacio{padding:40px 20px;text-align:center;border:1px dashed var(--c-linea);border-radius:16px;color:var(--c-gris);max-width:none}
@media (max-width:900px){
  .catalogo{grid-template-columns:1fr}
  .cat-lado{position:static}
}

/* Hero con varias fotos (hero → medios): fundido y puntos. :where deja que el estilo
   decida la posición del contenedor (tarjeta lo pone de fondo, absoluto). */
:where(.hero-slide){position:relative;width:100%}
.hero-slide{overflow:hidden}
.hero-slide > .slide{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto;opacity:0;transition:opacity .8s ease}
.hero-slide > .slide.on{opacity:1}
.slide-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:4}
.slide-dots button{width:10px;height:10px;padding:0;border:0;border-radius:5px;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(0,0,0,.18);cursor:pointer;transition:width .3s,background .3s}
.slide-dots button[aria-current=true]{width:26px;background:#fff}
@media (prefers-reduced-motion:reduce){.hero-slide > .slide{transition:none}}

/* Carrusel con `animado: true`: se desplaza solo en bucle, sin barra, flechas ni puntos.
   La pista lleva los ítems duplicados; el hueco entre pastillas es margen (no gap) para que
   la mitad de la pista mida justo lo que se recorre y el bucle no dé saltos. */
.carousel.animado{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.carousel.animado .track{width:max-content;gap:0;overflow:visible;scroll-snap-type:none;cursor:default;padding:6px 0;animation:carrusel-anim var(--carrusel-dur,60s) linear infinite}
.carousel.animado .pill{margin-right:16px}
.carousel.animado:hover .track{animation-play-state:paused}
@keyframes carrusel-anim{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .carousel.animado{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
  .carousel.animado .track{animation:none}
  .carousel.animado .pill[aria-hidden]{display:none}
}

/* Vídeo del hero que avanza con el scroll y botón «Preparar en WhatsApp» del
   formulario: los pinta el motor si el JSON los pide, pero solo los estilos que
   los enseñan (propuesta-g) los hacen visibles. _comun.css se carga después del
   estilo: el vídeo va con :where() (peso cero) y el botón con el peso justo para
   ganar a .btn; el estilo que los enseña usa un selector más fuerte. */
:where(.hero-scroll){display:none}
.form .foot .form-wa{display:none}

/* Hexágonos flotantes de fondo: el motor los pinta siempre; solo los estilos que los quieren (propuesta-e) los enseñan */
.hex-flota{display:none}

/* ── Iconos animados (2026-09-25, decisión de Fran): estáticos en reposo; el trazo se DIBUJA
   una vez al aparecer la sección (.in la pone app.js); al pasar el ratón cada icono hace su
   movimiento según su familia (data-anim, ver FAMILIAS en util.mjs). Solo transform/opacity/
   stroke-dashoffset; apagado con prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .in svg[data-anim] :is(path,circle,rect):not(.d):not([stroke-dasharray]):not([fill=currentColor]){stroke-dasharray:1;animation:ic-dib .9s ease-out both;animation-delay:calc(var(--i,0)*90ms + 120ms)}
  .in svg[data-anim] .d{animation:ic-dibd .9s ease-out both;animation-delay:calc(var(--i,0)*90ms + 120ms)}
  .in svg[data-anim] [fill=currentColor]:not(.d){animation:ic-dibp .9s ease-out both;animation-delay:calc(var(--i,0)*90ms + 120ms)}
  svg[data-anim]{transform-origin:50% 50%}
  :is(a,button,.circle,.ico,.nodo-hex,.dd-ico):hover svg[data-anim]{animation:var(--ic-a,ic-salto) 1.6s ease-in-out 1}
  svg[data-anim=giro]{--ic-a:ic-giro}svg[data-anim=pendulo]{--ic-a:ic-pendulo}svg[data-anim=latido]{--ic-a:ic-latido}svg[data-anim=parpadeo]{--ic-a:ic-parpadeo}svg[data-anim=vibrar]{--ic-a:ic-vibrar}svg[data-anim=chispa]{--ic-a:ic-chispa}svg[data-anim=salto]{--ic-a:ic-salto}svg[data-anim=deslizar]{--ic-a:ic-deslizar}svg[data-anim=crece]{--ic-a:ic-crece}svg[data-anim=ondas]{--ic-a:ic-ondas}
}
@keyframes ic-dib{0%{stroke-dashoffset:1;opacity:0}4%{opacity:1}100%{stroke-dashoffset:0}}
@keyframes ic-dibd{0%,35%{opacity:0}}
@keyframes ic-dibp{0%,50%{opacity:0}}
@keyframes ic-giro{0%{transform:rotate(0)}60%,100%{transform:rotate(360deg)}}
@keyframes ic-pendulo{0%,70%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}25%{transform:rotate(-13deg)}40%{transform:rotate(9deg)}55%{transform:rotate(-4deg)}}
@keyframes ic-latido{0%,70%,100%{transform:scale(1)}15%{transform:scale(1.24)}30%{transform:scale(1)}45%{transform:scale(1.16)}}
@keyframes ic-parpadeo{0%,20%,50%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}}
@keyframes ic-vibrar{0%,60%,100%{transform:translateX(0) rotate(0)}8%{transform:translateX(-2px) rotate(-8deg)}16%{transform:translateX(2px) rotate(8deg)}24%{transform:translateX(-2px) rotate(-8deg)}32%{transform:translateX(2px) rotate(8deg)}44%{transform:translateX(-1px) rotate(-4deg)}52%{transform:translateX(1px) rotate(3deg)}}
@keyframes ic-chispa{0%,70%,100%{opacity:1;transform:scale(1)}10%{opacity:.35}18%{opacity:1;transform:scale(1.14)}28%{opacity:.5}40%{opacity:1;transform:scale(1.1)}}
@keyframes ic-salto{0%,80%,100%{transform:translateY(0) scale(1,1)}12%{transform:scale(1.1,.86)}32%{transform:translateY(-6px) scale(.94,1.08)}55%{transform:translateY(0) scale(1.08,.9)}70%{transform:translateY(-2px) scale(1,1)}}
@keyframes ic-deslizar{0%,80%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}50%{transform:translateX(6px)}}
@keyframes ic-crece{0%{transform:scaleY(.25);transform-origin:50% 100%}40%{transform:scaleY(1.12);transform-origin:50% 100%}60%,100%{transform:scaleY(1);transform-origin:50% 100%}}
@keyframes ic-ondas{0%,80%,100%{transform:scale(1)}25%{transform:scale(1.14)}50%{transform:scale(1)}65%{transform:scale(1.08)}}

/* Tarjeta de vista previa del desplegable: solo la enseñan los estilos que la quieren (propuesta-e). */
.dd-prev{display:none}

/* ── Tienda (secciones tienda, producto, carrito, pedido + carrito-nav de la barra). Común a todos los
   estilos; solo tokens con alternativa, como .catalogo. tienda.js pinta el carrito y filtra la rejilla. ── */
.carrito-nav{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--hx-sobre-tinta,#fff);text-decoration:none;flex:none}
.carrito-nav svg{width:24px;height:24px}
.carrito-nav b{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--hx-verde,var(--green,#01bf61));color:var(--hx-sobre-acento,#102516);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.carrito-nav b[hidden]{display:none}
.carrito-nav b.salta{animation:carrito-salta .5s ease}
@keyframes carrito-salta{30%{transform:scale(1.35)}}
.tienda-aviso,.aviso{border:1px solid var(--hx-linea,var(--line,#e2e6e4));border-left:4px solid var(--hx-hondo,var(--green-deep,#007a3f));border-radius:10px;padding:12px 16px;font-size:15px;background:var(--hx-palido,var(--band,#f3f5f4));margin:0 0 24px}
.tienda-filtros{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px}
.tienda-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tienda-tabs button{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid var(--hx-linea,var(--line,#e2e6e4));background:var(--hx-superficie,#fff);color:var(--hx-tinta,var(--ink,#1b1f1d));cursor:pointer}
.tienda-tabs button.on{background:var(--hx-tinta,var(--ink,#1b1f1d));color:var(--hx-sobre-tinta,#fff);border-color:var(--hx-tinta,var(--ink,#1b1f1d))}
.tienda-buscar{font:inherit;font-size:15px;min-height:44px;padding:9px 14px;border:1px solid var(--hx-linea,var(--line,#e2e6e4));border-radius:999px;background:var(--hx-superficie,#fff);color:var(--hx-tinta,var(--ink,#1b1f1d));min-width:240px}
.tienda-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tienda-item{display:flex;flex-direction:column;border:1px solid var(--hx-linea,var(--line,#e2e6e4));border-radius:20px;overflow:hidden;background:var(--hx-superficie,#fff)}
.tienda-item[hidden]{display:none}
.tienda-item.agotado .tienda-foto img{opacity:.55}
.tienda-foto{display:grid;place-items:center;aspect-ratio:1;padding:22px;background:#fff}
.tienda-foto img{width:100%;height:100%;object-fit:contain;transition:transform .4s}
.tienda-item:hover .tienda-foto img{transform:scale(1.05)}
.tienda-cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tienda-fam{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hx-gris,var(--ink-2,#5c625f))}
.tienda-cuerpo h3{font-size:19px;margin:0} .tienda-cuerpo h3 a{color:inherit;text-decoration:none} .tienda-cuerpo h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.tienda-cuerpo p{font-size:14.5px;line-height:1.5;color:var(--hx-gris,var(--ink-2,#5c625f));margin:0}
.tienda-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.tienda-precio{font-size:22px;font-weight:700;letter-spacing:-.02em;display:flex;flex-direction:column;line-height:1.1}
.tienda-precio small{font-size:11px;font-weight:400;color:var(--hx-gris,var(--ink-2,#5c625f));letter-spacing:0}
.tienda-pie .btn{min-height:42px;padding:8px 16px;font-size:14px}
.tienda-agotado{font-size:12px;font-weight:700;color:var(--hx-gris,var(--ink-2,#5c625f));text-transform:uppercase;letter-spacing:.08em}
.tienda-vacio{color:var(--hx-gris,var(--ink-2,#5c625f));padding:24px 0}
.migas{font-size:14px;color:var(--hx-gris,var(--ink-2,#5c625f));margin-bottom:22px} .migas a{color:inherit}
.producto{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.producto-foto{display:grid;place-items:center;aspect-ratio:1;padding:32px;background:#fff;border-radius:24px;border:1px solid var(--hx-linea,var(--line,#e2e6e4));position:sticky;top:110px}
.producto-foto img{width:100%;height:100%;object-fit:contain}
.producto-datos{display:grid;gap:16px}
.producto-datos h1{font-size:clamp(30px,3.4vw,46px);margin:4px 0 0}
.producto-lema{font-size:19px;font-weight:600}
.producto-compra{display:grid;gap:14px;padding:22px;border-radius:20px;background:var(--hx-palido,var(--band,#f3f5f4));border:1px solid var(--hx-linea,var(--line,#e2e6e4))}
.producto-compra .tienda-precio{font-size:32px}
.producto-cant{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.producto-cant label{display:grid;gap:6px;font-size:13px;font-weight:600}
.producto-cant input,.carrito-tabla input{font:inherit;font-size:16px;width:76px;min-height:48px;padding:8px 10px;border:1px solid var(--hx-campo-borde,var(--line,#e2e6e4));border-radius:10px;background:var(--hx-superficie,#fff);color:var(--hx-tinta,var(--ink,#1b1f1d))}
.producto-nota{font-size:13.5px;color:var(--hx-gris,var(--ink-2,#5c625f));margin:0}
.producto-specs summary{cursor:pointer;font-weight:700;padding:8px 0}
.producto-specs ul{margin:6px 0 0 18px;display:grid;gap:6px;font-size:15px}
.producto-instalacion{font-size:15px}
.producto-rel-t{font-size:24px;margin:56px 0 18px}
.tienda-rel{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.carrito{max-width:920px;margin:0 auto}
.carrito-tabla{width:100%;border-collapse:collapse;margin-bottom:22px}
.carrito-tabla th,.carrito-tabla td{padding:14px 10px;border-bottom:1px solid var(--hx-linea,var(--line,#e2e6e4));text-align:left;vertical-align:middle;font-size:15px}
.carrito-tabla th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--hx-gris,var(--ink-2,#5c625f))}
.carrito-prod{display:flex;gap:14px;align-items:center}
.carrito-prod img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;padding:4px;flex:none}
.carrito-prod a{font-weight:600;color:inherit;text-decoration:none} .carrito-prod small{display:block;font-size:11px;color:var(--hx-gris,var(--ink-2,#5c625f))}
.carrito-imp{font-weight:700;white-space:nowrap}
.carrito-quitar{font:inherit;font-size:20px;line-height:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--hx-linea,var(--line,#e2e6e4));background:transparent;color:inherit;cursor:pointer}
.carrito-entrega{border:1px solid var(--hx-linea,var(--line,#e2e6e4));border-radius:16px;padding:16px 20px;display:grid;gap:10px;margin:0 0 18px}
.carrito-entrega legend{font-weight:700;padding:0 6px}
.carrito-entrega label{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.carrito-total{display:grid;grid-template-columns:1fr auto;gap:8px 24px;margin:0 0 18px;font-size:16px}
.carrito-total dd{margin:0;text-align:right;font-weight:600}
.carrito-total dt:last-of-type,.carrito-total dd:last-of-type{font-size:22px;font-weight:700;padding-top:8px;border-top:1px solid var(--hx-linea,var(--line,#e2e6e4))}
.carrito-legal{font-size:13px;color:var(--hx-gris,var(--ink-2,#5c625f))} .carrito-legal a{color:inherit}
.carrito-acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}
.carrito-error{color:#b00020;font-weight:600}
.pedido{max-width:720px;margin:0 auto;text-align:center}
.pedido .sec-head{margin-bottom:18px}
.pedido-resumen{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;text-align:left;margin:0 auto 22px;max-width:420px;padding:18px 22px;border-radius:16px;border:1px solid var(--hx-linea,var(--line,#e2e6e4))}
.pedido-resumen dt{color:var(--hx-gris,var(--ink-2,#5c625f))} .pedido-resumen dd{margin:0;font-weight:600}
.pedido .carrito-acciones{justify-content:center}
@media (max-width:820px){
  .producto{grid-template-columns:1fr} .producto-foto{position:static}
  .carrito-tabla th:first-child,.carrito-tabla td:first-child{width:50%}
  .tienda-buscar{min-width:0;width:100%}
}

/* ── Portada por «mundos» (secciones puertas, datos, dia, mitos, test; tenerifetpv.es, 2026-09-27). Común a todos
   los estilos, solo con tokens --hx-*. Dos tonos: .tono-verde (fondo verde, contenido blanco) y .tono-claro (fondo
   blanco, contenido verde). app.js pone html[data-mundo] y entonces solo se ve el `dia` de ese mundo. ── */
html[data-mundo] [data-mundo-de]{display:none}
html[data-mundo=hosteleria] [data-mundo-de=hosteleria],html[data-mundo=comercio] [data-mundo-de=comercio]{display:block}
.tono-verde{--m-fondo:var(--hx-hondo);--m-texto:var(--hx-sobre-tinta);--m-ante:var(--hx-lima);--m-carta:var(--hx-superficie);--m-carta-texto:var(--hx-tinta);--m-carta-ante:var(--hx-hondo);--m-punto:var(--hx-lima);--m-punto-texto:var(--hx-sobre-lima);--m-linea:var(--hx-noche-linea);--m-fig:var(--hx-superficie);--m-suave:var(--hx-noche-linea)}
.tono-claro{--m-fondo:var(--hx-fondo);--m-texto:var(--hx-tinta);--m-ante:var(--hx-hondo);--m-carta:var(--hx-verde);--m-carta-texto:var(--hx-sobre-acento);--m-carta-ante:var(--hx-sobre-acento);--m-punto:var(--hx-verde);--m-punto-texto:var(--hx-sobre-acento);--m-linea:var(--hx-menta);--m-fig:var(--hx-palido);--m-suave:var(--hx-palido)}

/* puertas */
.puertas{padding:0!important;background:var(--hx-palido)}
.puertas-cab{text-align:center;padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(22px,3vw,34px)}
.puertas-cab .eyebrow{justify-content:center;color:var(--hx-hondo)}
.puertas-cab h1{font-size:clamp(30px,3.6vw,50px);max-width:26ch;margin:8px auto 10px}
.puertas-cab p{max-width:62ch;margin:0 auto;color:var(--hx-gris)}
.puertas-par{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:min(calc(100vh - 80px),720px)}
.puerta{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(28px,5vw,68px);text-decoration:none;background:var(--m-fondo);color:var(--m-texto)}
.puerta .eyebrow{color:var(--m-ante)}
.puerta-texto{display:grid;gap:10px}
.puerta-t{font-size:clamp(40px,5.2vw,78px);line-height:.98;letter-spacing:-.05em;font-weight:700;max-width:10ch}
.puerta-p{font-size:18px;max-width:36ch;opacity:.92}
.puerta-fig.media{width:min(72%,380px);align-self:center;border-radius:24px;padding:10px;background:var(--m-fig);aspect-ratio:1;transition:transform .5s}
.puerta-fig img{width:100%;height:100%;object-fit:contain}
.puerta:hover .puerta-fig{transform:scale(1.04) rotate(-1.5deg)}
.puerta-ir{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-weight:700;padding:14px 22px;border-radius:999px;background:var(--m-carta);color:var(--m-carta-texto)}
.tono-verde .puerta-ir{background:var(--hx-superficie);color:var(--hx-hondo)}
.puerta-ir svg{width:20px;height:20px}
.puerta:focus-visible{outline:4px solid var(--hx-foco);outline-offset:-8px}
.puertas-sello{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:134px;display:grid;place-items:center;text-align:center;padding:0 14px;background:var(--hx-tinta);color:var(--hx-sobre-tinta);font-weight:700;font-size:14px;line-height:1.2;clip-path:var(--hex);pointer-events:none}

/* datos */
.datos{background:var(--hx-palido);padding:18px 0 26px}
.datos-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.dato{background:var(--hx-superficie);border:1px solid var(--hx-linea);border-radius:14px;padding:16px 18px;display:grid;gap:4px}
.dato strong{font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.04em;color:var(--hx-hondo);font-variant-numeric:tabular-nums}
.dato span{font-size:14px;color:var(--hx-gris);line-height:1.35}
.dato.cuenta{background:var(--hx-lima);border-color:var(--hx-lima)}
.dato.cuenta strong,.dato.cuenta span{color:var(--hx-sobre-lima)}

/* día */
.dia{position:relative;background:var(--m-fondo);color:var(--m-texto);padding:0 0 96px!important}
.dia .eyebrow{color:var(--m-ante)}
.dia-control{position:sticky;top:88px;z-index:30;display:flex;justify-content:center;align-items:center;gap:10px;padding:18px 0;pointer-events:none}
.dia-mundos{pointer-events:auto;display:flex;padding:5px;border-radius:999px;background:var(--hx-superficie);border:1px solid var(--hx-linea);box-shadow:var(--hx-sombra-ficha-2)}
.dia-mundos button{font:inherit;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:10px 18px;background:none;color:var(--hx-tinta);cursor:pointer;display:flex;gap:8px;align-items:center}
.dia-mundos button svg{width:20px;height:20px}
.dia-mundos button[aria-pressed=true]{background:var(--hx-hondo);color:var(--hx-sobre-tinta)}
.tono-claro .dia-mundos button[aria-pressed=true]{background:var(--hx-verde);color:var(--hx-sobre-acento)}
.dia-reloj{pointer-events:none;min-width:92px;height:52px;display:grid;place-items:center;padding:0 16px;border-radius:999px;background:var(--hx-tinta);color:var(--hx-sobre-tinta);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;box-shadow:var(--hx-sombra-ficha-2)}
.dia-cab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center;padding-top:24px;margin-bottom:56px}
.dia-cab h2{color:inherit;margin:8px 0 14px}
.dia-cab p{font-size:18px;opacity:.94}
.dia-cab .media{border-radius:24px;background:var(--m-fig);padding:10px;aspect-ratio:1/1;max-width:520px;justify-self:end;width:100%}
.dia-cab .media img{width:100%;height:100%;object-fit:contain}
.tono-verde .dia-cab .btn-green{background:var(--hx-superficie);border-color:var(--hx-superficie);color:var(--hx-hondo)}
.dia-eje{list-style:none;margin:0 auto;padding:0;position:relative;max-width:980px}
.dia-eje::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);border-radius:3px;background:var(--m-linea)}
.hito{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:76px;margin-bottom:30px}
.hito-punto{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:54px;height:60px;display:grid;place-items:center;clip-path:var(--hex);background:var(--m-punto);color:var(--m-punto-texto);z-index:1}
.hito-punto svg{width:26px;height:26px}
.hito-caja{border-radius:20px;padding:22px 24px;background:var(--m-carta);color:var(--m-carta-texto)}
.hito:nth-child(odd) .hito-caja{grid-column:1}.hito:nth-child(even) .hito-caja{grid-column:2}
.hito-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m-carta-ante)}
.hito-caja h3{font-size:22px;margin:6px 0 8px;color:inherit}
.hito-caja p{margin:0;font-size:16px;line-height:1.5}
.hito-caja .media{margin-top:14px;border-radius:12px;background:var(--hx-palido);height:190px}
.tono-claro .hito-caja .media{background:var(--hx-superficie)}
.hito-caja .media img{width:100%;height:100%;object-fit:contain}
.hito-lado{align-self:start;padding-top:16px;font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hito:nth-child(odd) .hito-lado{grid-column:2;grid-row:1}.hito:nth-child(even) .hito-lado{grid-column:1;grid-row:1;text-align:right}
.tono-claro .hito-lado{color:var(--hx-hondo)}
.dia-prog{margin-top:56px}
.dia-prog-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.dia-prog-fila div{border-radius:16px;padding:20px;background:var(--m-suave)}
.dia-prog-fila b{display:block;font-size:22px;margin-bottom:4px}
.dia-prog-fila p{margin:0;font-size:15px}

/* mitos */
.mitos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mito{perspective:900px;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.mito-giro{display:block;position:relative;min-height:230px;transition:transform .6s;transform-style:preserve-3d}
.mito[aria-pressed=true] .mito-giro{transform:rotateY(180deg)}
.mito-cara{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:var(--hx-superficie);border:1px solid var(--hx-linea);color:var(--hx-tinta)}
.mito-cara b{font-size:19px;line-height:1.3}
.mito-cara.atras{transform:rotateY(180deg);background:var(--hx-hondo);border-color:var(--hx-hondo);color:var(--hx-sobre-tinta);font-size:16px;line-height:1.45}
.mito-cara small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hx-hondo)}
.mito-cara.atras small{color:var(--hx-lima)}
.mito:focus-visible{outline:3px solid var(--hx-foco);outline-offset:4px;border-radius:20px}
@media (prefers-reduced-motion:reduce){.mito-giro{transition:none}}

/* test y asistente */
.test{background:var(--hx-noche);color:var(--hx-sobre-tinta)}
.test .eyebrow{color:var(--hx-lima)}
.test h2{color:inherit}
.test-par{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,56px);align-items:start}
.test-lista{margin-top:18px}
.test-lista label{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--hx-noche-linea);cursor:pointer;font-size:17px}
.test-lista input{appearance:none;flex:none;width:28px;height:28px;border-radius:8px;border:2px solid var(--hx-verde);margin:0;display:grid;place-items:center;cursor:pointer}
.test-lista input:checked{background:var(--hx-verde)}
.test-lista input:checked::after{content:"\2713";color:var(--hx-sobre-acento);font-weight:700}
.test-lista input:focus-visible{outline:3px solid var(--hx-lima);outline-offset:2px}
.test-lista small{display:block;color:var(--hx-noche-gris);font-size:14px;margin-top:3px}
.test-medidor{position:sticky;top:110px;background:var(--hx-superficie);color:var(--hx-tinta);border-radius:22px;padding:28px;text-align:center}
.test-nota{display:block;font-size:72px;line-height:1;letter-spacing:-.05em;color:var(--hx-hondo);font-variant-numeric:tabular-nums}
.test-barra{height:12px;border-radius:12px;background:var(--hx-menta);overflow:hidden;margin:16px 0}
.test-barra i{display:block;height:100%;width:0;background:var(--hx-verde);transition:width .4s}
.test-veredicto{min-height:3em}
.asistente{margin-top:36px;background:var(--hx-superficie);color:var(--hx-tinta);border-radius:22px;padding:26px}
.asistente h3{margin:0 0 6px;font-size:24px}
.asis-q{font-weight:700;margin:14px 0 8px}
.asis-opc{display:flex;flex-wrap:wrap;gap:8px}
.asis-opc button{font:inherit;font-size:15px;font-weight:600;border:2px solid var(--hx-linea);background:var(--hx-superficie);color:var(--hx-tinta);border-radius:999px;padding:9px 15px;cursor:pointer;display:flex;gap:8px;align-items:center}
.asis-opc button svg{width:18px;height:18px}
.asis-opc button[aria-pressed=true]{border-color:var(--hx-hondo);background:var(--hx-hondo);color:var(--hx-sobre-tinta)}
.asis-resp{margin-top:18px;border-radius:14px;padding:16px 18px;background:var(--hx-palido);border-left:6px solid var(--hx-verde)}
.asis-resp b{display:block;font-size:22px;color:var(--hx-hondo)}
.asis-resp b:empty{display:none}

@media (max-width:860px){
  .puertas-par{grid-template-columns:1fr;min-height:0}.puertas-sello{display:none}
  .puerta-fig.media{width:min(60%,260px)}
  .dia-cab,.test-par{grid-template-columns:1fr}
  .dia-cab .media{justify-self:center;max-width:380px}
  .dia-control{top:74px}.dia-mundos button{padding:9px 13px;font-size:14px}.dia-reloj{min-width:72px;height:46px;font-size:15px}
  .dia-eje::before{left:26px}
  .hito{grid-template-columns:1fr;padding-left:70px}.hito-punto{left:26px}
  .hito .hito-caja,.hito .hito-lado{grid-column:1!important;grid-row:auto!important;text-align:left!important}
  .hito-lado{display:none}
  .test-medidor{position:static}
}

/* Formulario sin destino (sitio.json → formulario.action vacío): no hay «Enviar», así que en TODOS los estilos se ve
   «Preparar en WhatsApp» (decisión de Fran, 2026-09-27: nada se pierde en silencio hasta que exista el de la app). */
.form[data-demo="1"] .foot .form-wa{display:inline-flex;align-items:center;gap:8px}

/* Formulario: trampa anti-spam (campo «web» que un humano no ve) y línea de estado/errores del envío. */
.form-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:10px 0 0;font-size:14px;min-height:1em}
.form-msg.err{color:var(--hx-error,#b00020);font-weight:600}
.form.sent .form-msg{display:none}