/* 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%);
}

*{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:#fff;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%,#c3f0d6 45%,#9fe6bd 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: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");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 #007a3f;outline-offset:5px}
.btn-green{background:var(--hx-verde);border-color:var(--hx-verde);color:#102516}
.btn-green:hover{background:var(--hx-lima);border-color:var(--hx-lima)}
.btn-black{background:var(--hx-tinta);border-color:var(--hx-tinta);color:#fff}
.btn-black:hover{background:#28432f}
.btn-ghost{background:#fff;color:var(--hx-tinta)}
.btn-ghost:hover{border-color:var(--hx-hondo);background:var(--hx-palido)}
.btn-ghost.on-dark{background:#fff;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:#fff;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:#fff;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:#fff}
.brand .hex{width:36px;height:40px;background:var(--hx-verde);clip-path:var(--hex);display:grid;place-items:center;color:#102516;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:#fff;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:#fff;border-top:3px solid var(--hx-lima);border-radius:0 0 22px 22px;
  box-shadow:0 30px 60px rgba(23,44,34,.14),0 0 0 100vmax rgba(23,44,34,.18);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:#e4f6ec}
.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:#fff;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:#43554b;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:#2f5237}
.hex-outline::after{content:"";position:absolute;inset:1px;clip-path:inherit;background:#fff}
.escena-lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.escena-lineas path{fill:none;stroke:rgba(24,59,36,.18);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:#fff;border-radius:13px;display:flex;flex-direction:column;padding:17px 18px 12px;box-shadow:0 12px 25px rgba(30,65,20,.08);border:1px solid #a9dcc0}
.escena-cat{font-size:10px;letter-spacing:.1em;color:var(--hx-gris);font-weight:600;border-bottom:1px solid #dceee4;padding-bottom:9px;margin-bottom:4px}
.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:#fff;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:#102516}
.nodo-rotulo{background:#fff;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:#102516;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:#fff;display:flex;flex-direction:column}
.fcard .media{height:245px;aspect-ratio:auto;display:grid;place-items:center;padding:22px;background:#edf9f2}
.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:#e4f6ec} .fcard:nth-child(3) .media{background:#eff3f0}
.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:#fff;border-radius:12px 12px 0 0;border:1px solid #a9dcc0;border-bottom:0;overflow:hidden;display:flex;flex-direction:column}
.media.pantalla .barra{height:28px;flex:none;background:#edf9f2;border-bottom:1px solid #dceee4;display:flex;align-items:center;gap:6px;padding:0 12px}
.media.pantalla .barra i{width:8px;height:8px;border-radius:50%;background:#cfdcc9}
.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 #007a3f;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:#fff;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:#edf9f2;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:#afc7a4 #f1f6ee;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:#fff;border:1px solid var(--hx-linea);text-decoration:none;transition:background .15s}
.pill:hover{background:#e4f6ec}
.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:#fff;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:#fff;color:var(--hx-tinta);font-size:22px;cursor:pointer}
.carousel .arrows button:hover{background:var(--hx-tinta);color:#fff}

/* Casos */
.cases{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:24px}
.case{display:flex;flex-direction:column;background:#fff;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:#fff;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:#102516;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:#fff;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:#fff;max-width:620px}
.quote-cta .lead p{font-size:18px;margin:18px 0 28px;color:#dce9dc}
.quote-cta .lead .eyebrow{color:var(--hx-lima)}
.quote-cta .lead .btn-ghost{background:transparent;color:#fff;border-color:#7e957e}
.quote-cta .lead .btn-ghost:hover{background:#28432f}
.quote-cta .micro{font-size:13px;color:#9fb8a5;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 #b3c2b5;border-radius:8px;background:#fff;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 rgba(1,191,97,.25)}
.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 #ceddc8;background:#fff;font-size:13px;color:var(--hx-tinta);transition:all .15s}
.chips input:checked + span{background:var(--hx-tinta);color:#fff;border-color:var(--hx-tinta)}
.chips input:focus-visible + span{outline:3px solid #007a3f;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 #007a3f;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:#fff;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:#e4f6ec}
.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:#fff;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:#102516}
.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:#0b1f14;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:#dfe8e2}
.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:#b9cfc3} .rating b{color:#fff} .rating .stars{color:var(--hx-lima)}
/* La escena sobre oscuro */
.escena-indice,.escena-pie span{color:#9fb8a5}
.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:#0b1f14}
.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:#12301f} .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:#102516}
.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:#0a0a0a;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:#c9d1cc}
.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:#0b1f14;padding:40px}
.split .media img{border-radius:12px}

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

/* Pie negro */
footer{background:#0a0a0a;color:#c9d1cc;border-top:0}
footer a,footer p{color:#c9d1cc} footer a:hover{color:var(--hx-lima)}
footer h4{color:#fff}
footer .legal{border-top-color:#222;color:#8a938e}
.social a{background:#222;color:#fff;clip-path:none;border-radius:50%;height:38px} .social a:hover{background:var(--hx-verde);color:#102516}
.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:#0b1f14;--noche-2:#10291b;--noche-linea:rgba(255,255,255,.12);--noche-gris:#9fb8a5;--noche-texto:#dfe8e2}

/* 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,rgba(125,217,86,.28),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)}

/* 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:#fff;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 rgba(125,217,86,.18)}
/* Guías */
.art-card{background:var(--noche-2);border:1px solid var(--noche-linea)}
.art-card:hover{background:#163a27} .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:#102516}
.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 rgba(11,31,20,.18)}

@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:#102516;border-radius:14px;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
  .nav .tel::before{content:"Llamar · "}
  .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:#0b1f14}
.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 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:#102516}
@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:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  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}


/* _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:#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:#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:#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:#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}}

/* 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}