/* ==========================================================================
   K-LLEJERO — sistema base del sitio
   Colores corporativos tomados del catálogo impreso.
   ========================================================================== */

:root{
  --turquesa:#1AABA5;
  --turquesa-fuerte:#0E5B58;
  --turquesa-medio:#14807C;
  --turquesa-suave:#DCF0EE;
  --fucsia:#C2258C;
  --rosa:#F55C98;
  --frambuesa:#D3325C;

  --tinta:#16201F;
  --tenue:#5D7A78;
  --papel:#F2F7F6;
  --superficie:#FFFFFF;
  --superficie-2:#E9F3F2;
  --borde:#D5E5E3;
  --plato:#F4F9F8;
  --plato-blob:#D9EFEC;
  --sombra:0 1px 2px rgba(14,91,88,.07), 0 10px 26px -16px rgba(14,91,88,.35);
  --sombra-alta:0 2px 4px rgba(14,91,88,.06), 0 24px 48px -28px rgba(14,91,88,.5);

  --display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --texto:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'Montserrat','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --turquesa:#2FC7C0;
    --turquesa-fuerte:#9FE4E0;
    --turquesa-medio:#1D9C97;
    --turquesa-suave:#15302E;
    --fucsia:#EE5CB4;
    --rosa:#FF86BC;
    --frambuesa:#F16A8C;
    --tinta:#E8F2F1;
    --tenue:#96B4B1;
    --papel:#0B1413;
    --superficie:#12201F;
    --superficie-2:#182A28;
    --borde:#26403D;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
    --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 28px 60px -30px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --turquesa:#2FC7C0;
  --turquesa-fuerte:#9FE4E0;
  --turquesa-medio:#1D9C97;
  --turquesa-suave:#15302E;
  --fucsia:#EE5CB4;
  --rosa:#FF86BC;
  --frambuesa:#F16A8C;
  --tinta:#E8F2F1;
  --tenue:#96B4B1;
  --papel:#0B1413;
  --superficie:#12201F;
  --superficie-2:#182A28;
  --borde:#26403D;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.8);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 28px 60px -30px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{color-scheme:light dark; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-.012em}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--turquesa); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto}}

.envoltura{max-width:1220px; margin-inline:auto; padding-inline:20px}
@media (max-width:520px){.envoltura{padding-inline:16px}}

.epigrafe{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fucsia);
}
.epigrafe::before{content:""; width:22px; height:3px; border-radius:2px; background:currentColor; flex:0 0 auto}
.salto-contenido{
  position:absolute; left:-9999px; top:0;
  background:var(--fucsia); color:#fff; padding:10px 18px; border-radius:0 0 10px 0; z-index:99;
}
.salto-contenido:focus{left:0}

/* ── Cabecera ────────────────────────────────────────────────────────── */
.sitio-cab{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--superficie) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
}
.cab-in{display:flex; align-items:center; gap:18px; padding-block:12px}
.marca{display:flex; align-items:center; flex:0 0 auto; text-decoration:none}
.marca img{height:28px; width:auto}
.marca .logo-claro{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca .logo-claro{display:block}
  :root:not([data-theme="light"]) .marca .logo-oscuro{display:none}
}
:root[data-theme="dark"] .marca .logo-claro{display:block}
:root[data-theme="dark"] .marca .logo-oscuro{display:none}

.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{
  text-decoration:none; font-size:14.5px; font-weight:500;
  padding:8px 13px; border-radius:999px; white-space:nowrap;
  transition:background .14s, color .14s;
}
.nav a:hover{background:var(--superficie-2)}
.nav a[aria-current="page"]{color:var(--turquesa-medio); font-weight:600}
.nav .nav-cta{
  background:var(--fucsia); color:#fff; font-weight:600; margin-left:6px;
}
.nav .nav-cta:hover{background:var(--frambuesa)}

.cab-tema{
  background:none; border:1px solid var(--borde); border-radius:999px;
  width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; color:var(--tenue);
}
.cab-menu{
  display:none; background:none; border:1px solid var(--borde); border-radius:10px;
  width:40px; height:40px; place-items:center; color:var(--tinta); flex:0 0 auto;
}
@media (max-width:1080px){
  .cab-menu{display:grid}
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px; margin:0;
    background:var(--superficie); border-bottom:1px solid var(--borde);
    padding:10px 20px 18px; box-shadow:var(--sombra);
  }
  .nav a{padding:11px 14px; border-radius:10px; font-size:16px}
  .nav .nav-cta{margin:6px 0 0; text-align:center}
}

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; font-family:var(--texto); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  transition:background .15s, border-color .15s, transform .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-solido{background:var(--fucsia); color:#fff}
.btn-solido:hover{background:var(--frambuesa)}
.btn-turquesa{background:var(--turquesa-medio); color:#fff}
.btn-turquesa:hover{background:var(--turquesa-fuerte)}
.btn-linea{border-color:var(--borde); background:var(--superficie); color:var(--tinta)}
.btn-linea:hover{border-color:var(--turquesa)}
.btn-blanco{background:#fff; color:#0E5B58}
.btn-blanco:hover{background:#DCF0EE}
.btn-fantasma{border-color:rgba(255,255,255,.5); color:#fff}
.btn-fantasma:hover{background:rgba(255,255,255,.14)}
.botonera{display:flex; flex-wrap:wrap; gap:12px}

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion{padding-block:64px}
.seccion.ajustada{padding-block:46px}
@media (max-width:640px){.seccion{padding-block:48px}}
.seccion-cab{display:grid; gap:12px; max-width:62ch; margin-bottom:34px}
.seccion-cab h2{font-size:clamp(27px,3.8vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.02em}
.seccion-cab p{color:var(--tenue); font-size:17px}
.seccion-clara{background:var(--superficie)}
.linea-sup{border-top:1px solid var(--borde)}

/* ── Portada ─────────────────────────────────────────────────────────── */
.heroe{position:relative; overflow:hidden; background:var(--turquesa-fuerte); color:#fff}
.heroe-foto{position:absolute; inset:0}
.heroe-foto img{width:100%; height:100%; object-fit:cover}
.heroe-velo{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(10,58,56,.95) 0%, rgba(14,91,88,.88) 42%, rgba(20,128,124,.55) 100%);
}
.heroe-in{position:relative; z-index:2; padding-block:82px 74px; display:grid; gap:24px; max-width:46rem}
@media (max-width:640px){.heroe-in{padding-block:54px 50px}}
.heroe .epigrafe{color:#9FE4E0}
.heroe h1{font-size:clamp(31px,5.6vw,54px); font-weight:800; line-height:1.03; max-width:18ch}
.heroe h1 em{font-style:normal; color:var(--rosa)}
.heroe p.bajada{font-size:clamp(16px,1.9vw,19px); color:rgba(255,255,255,.9); max-width:54ch}

.sellos-heroe{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.sello-heroe{
  font-family:var(--texto); font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  padding:6px 12px; border-radius:999px;
}

/* ── Franja de cifras ────────────────────────────────────────────────── */
.franja{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:1px; background:var(--borde); border-block:1px solid var(--borde);
}
.franja > div{background:var(--superficie); padding:26px 22px}
.franja b{
  display:block; font-family:var(--display); font-size:31px; font-weight:800;
  line-height:1.05; color:var(--turquesa-medio); font-variant-numeric:tabular-nums;
}
.franja span{display:block; margin-top:5px; font-size:14px; color:var(--tenue)}

/* ── Rejilla de líneas de producto ───────────────────────────────────── */
.lineas{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px}
.linea{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--superficie); border:1px solid var(--borde); border-radius:16px;
  overflow:hidden; transition:transform .16s, box-shadow .16s, border-color .16s;
}
.linea:hover{transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--turquesa)}
.linea-img{position:relative; height:172px; background:var(--plato); display:grid; place-items:center; padding:16px}
.linea-img::before{
  content:""; position:absolute; inset:16px 26px; background:var(--plato-blob);
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}
.linea-img img{position:relative; max-height:142px; width:auto; object-fit:contain}
.linea-txt{padding:16px 18px 20px; display:flex; flex-direction:column; gap:7px; flex:1}
.linea-txt h3{font-size:17.5px; font-weight:700}
.linea-txt p{font-size:14px; color:var(--tenue); line-height:1.5}
.linea-pie{
  margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:7px;
  font-family:var(--display); font-size:13px; letter-spacing:.02em;
  color:var(--fucsia); font-weight:700;
}

/* ── Espacios ────────────────────────────────────────────────────────── */
.espacios{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.espacio{
  display:flex; align-items:flex-start; gap:13px; text-decoration:none;
  background:var(--superficie); border:1px solid var(--borde); border-radius:13px;
  padding:17px 18px; transition:border-color .15s, background .15s;
}
.espacio:hover{border-color:var(--turquesa); background:var(--superficie-2)}
.espacio svg{flex:0 0 auto; color:var(--turquesa-medio); margin-top:2px}
.espacio b{display:block; font-family:var(--display); font-size:15px; font-weight:700; line-height:1.3}
.espacio span{display:block; font-size:13px; color:var(--tenue); margin-top:3px; line-height:1.45}

/* ── Bloque a dos columnas ───────────────────────────────────────────── */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:46px; align-items:center}
@media (max-width:820px){.duo{grid-template-columns:1fr; gap:30px}}
.duo-txt{display:grid; gap:16px; max-width:56ch}
.duo-txt h2{font-size:clamp(26px,3.6vw,37px); font-weight:800; line-height:1.1; letter-spacing:-.02em}
.duo-txt p{color:var(--tenue); font-size:16.5px}
.duo-foto{border-radius:16px; overflow:hidden; box-shadow:var(--sombra)}
.duo-foto img{width:100%; height:100%; object-fit:cover}

/* ── Lista de fichas técnicas / datos ────────────────────────────────── */
.datos{display:grid; gap:0; border:1px solid var(--borde); border-radius:14px; overflow:hidden}
.datos > div{display:grid; grid-template-columns:160px 1fr; gap:18px; padding:15px 18px; background:var(--superficie)}
.datos > div + div{border-top:1px solid var(--borde)}
.datos dt, .datos b{
  font-family:var(--display); font-size:14px; letter-spacing:0;
  color:var(--turquesa-medio); font-weight:700; padding-top:1px; line-height:1.35;
}
.datos dd, .datos p{margin:0; font-size:15px}
@media (max-width:560px){.datos > div{grid-template-columns:1fr; gap:4px}}

/* ── Cinta de llamada a la acción ────────────────────────────────────── */
.cinta{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg, #0E5B58 0%, #14807C 55%, #1AABA5 100%); /* fijo: lleva texto blanco en ambos temas */
}
.cinta::after{
  content:""; position:absolute; right:-120px; top:-110px; width:420px; height:420px;
  background:radial-gradient(circle at 34% 34%, rgba(194,37,140,.6), rgba(194,37,140,0) 64%);
}
.cinta-in{position:relative; z-index:2; padding-block:52px; display:grid; gap:20px; justify-items:start}
.cinta h2{font-size:clamp(24px,3.5vw,35px); font-weight:800; line-height:1.12; max-width:20ch}
.cinta p{color:rgba(255,255,255,.9); max-width:52ch; font-size:16.5px}

/* ── Aviso / nota editorial ──────────────────────────────────────────── */
.aviso-edicion{
  border:1px dashed var(--fucsia); border-radius:14px; padding:20px 22px;
  background:color-mix(in srgb, var(--fucsia) 6%, transparent); display:grid; gap:9px;
}
.aviso-edicion b{font-family:var(--display); font-size:15.5px; color:var(--fucsia)}
.aviso-edicion p{font-size:14.5px; color:var(--tenue)}

/* ── Formulario ──────────────────────────────────────────────────────── */
.formulario{display:grid; gap:16px; max-width:38rem}
.campo{display:grid; gap:6px}
.campo label{font-size:13.5px; font-weight:600}
.campo input, .campo select, .campo textarea{
  font:inherit; font-size:15px; color:inherit; width:100%;
  padding:11px 14px; border-radius:11px;
  border:1px solid var(--borde); background:var(--superficie);
}
.campo textarea{min-height:120px; resize:vertical}
.campo input::placeholder, .campo textarea::placeholder{color:var(--tenue)}
.pareja{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.pareja{grid-template-columns:1fr}}
.nota-form{font-size:13px; color:var(--tenue)}

/* ── Contacto directo ────────────────────────────────────────────────── */
.vias{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px}
.via{
  display:flex; gap:13px; align-items:flex-start; text-decoration:none;
  background:var(--superficie); border:1px solid var(--borde); border-radius:13px; padding:18px;
  transition:border-color .15s;
}
.via:hover{border-color:var(--turquesa)}
.via svg{flex:0 0 auto; color:var(--turquesa-medio); margin-top:2px}
.via b{display:block; font-family:var(--display); font-size:14px; font-weight:700}
.via span{display:block; font-size:14px; color:var(--tenue); margin-top:2px; word-break:break-word}

/* ── Pie ─────────────────────────────────────────────────────────────── */
.sitio-pie{background:#0E5B58; color:#fff; margin-top:0}
:root[data-theme="dark"] .sitio-pie{background:#071C1B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sitio-pie{background:#071C1B}}
.pie-in{padding-block:44px 22px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
@media (max-width:760px){.pie-in{grid-template-columns:1fr 1fr; gap:26px}}
@media (max-width:460px){.pie-in{grid-template-columns:1fr}}
.pie-in h4{
  font-family:var(--display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:#9FE4E0; font-weight:700; margin-bottom:12px;
}
.pie-in img.logo-pie{height:30px; width:auto; margin-bottom:14px}
.pie-in p{font-size:14px; color:rgba(255,255,255,.82); max-width:34ch}
.pie-lista{display:grid; gap:8px; font-size:14.5px}
.pie-lista a{text-decoration:none; color:rgba(255,255,255,.9)}
.pie-lista a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.pie-legal{
  border-top:1px solid rgba(255,255,255,.16); padding-block:16px 26px;
  font-size:12px; color:rgba(255,255,255,.58); display:flex; flex-wrap:wrap; gap:8px 22px;
}

/* ── WhatsApp flotante ───────────────────────────────────────────────── */
.flotantes{position:fixed; right:18px; bottom:18px; z-index:50; display:grid; gap:12px; justify-items:center}
.flot-ig{
  width:48px; height:48px; border-radius:50%; color:#fff; display:grid; place-items:center; text-decoration:none;
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.45); transition:transform .16s;
}
.flot-ig:hover{transform:scale(1.07)}
.wasap{
  width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.45);
  text-decoration:none; transition:transform .16s;
}
.wasap:hover{transform:scale(1.07)}
@media (max-width:520px){.flotantes{right:14px; bottom:14px; gap:10px}.wasap{width:48px; height:48px}.flot-ig{width:42px; height:42px}}

/* ── Aviso emergente ─────────────────────────────────────────────────── */
.aviso{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:var(--tinta); color:var(--papel); padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:500; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:60; max-width:calc(100vw - 32px); text-align:center;
}
.aviso.ver{opacity:1; transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════════════════════════════════════
   Garantía y sello de fábrica
   ══════════════════════════════════════════════════════════════════════ */
.sello-caja{display:flex; flex-wrap:wrap; align-items:center; gap:26px}
.sello-garantia{width:158px; height:158px; flex:0 0 auto}
.sello-garantia .anillo{fill:none; stroke:var(--fucsia); stroke-width:2}
.sello-garantia .disco{fill:var(--superficie)}
.sello-garantia .curva{fill:var(--fucsia); font-family:var(--display); font-size:8.4px; letter-spacing:.26em; font-weight:600}
.sello-garantia .cifra{fill:var(--turquesa-medio); font-family:var(--display); font-size:38px; font-weight:800; text-anchor:middle}
.sello-garantia .pie1{fill:var(--tinta); font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.1em; text-anchor:middle}
.sello-garantia .pie2{fill:var(--tenue); font-family:var(--display); font-size:6.6px; letter-spacing:.17em; text-anchor:middle}
.sello-garantia .raya{stroke:var(--turquesa); stroke-width:1.4; stroke-linecap:round}

.garantia-tabla{width:100%; border-collapse:collapse; font-size:14.5px}
.garantia-tabla caption{text-align:left; color:var(--tenue); font-size:13px; padding-bottom:10px}
.garantia-tabla th, .garantia-tabla td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--borde); vertical-align:top}
.garantia-tabla thead th{
  font-family:var(--display); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--turquesa-medio); font-weight:700; border-bottom:1px solid var(--borde);
}
.garantia-tabla tbody th{font-family:var(--texto); font-weight:600; font-size:14.5px}
.garantia-tabla td.plazo{
  font-family:var(--display); font-weight:800; color:var(--turquesa-medio);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tabla-scroll{overflow-x:auto; border:1px solid var(--borde); border-radius:14px; background:var(--superficie)}
.tabla-scroll .garantia-tabla tr:last-child th,
.tabla-scroll .garantia-tabla tr:last-child td{border-bottom:none}

.dos-listas{display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media (max-width:760px){.dos-listas{grid-template-columns:1fr; gap:20px}}
.lista-marcada{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.lista-marcada li{display:grid; grid-template-columns:20px 1fr; gap:11px; font-size:14.5px; line-height:1.5}
.lista-marcada li::before{
  content:""; width:18px; height:18px; border-radius:50%; margin-top:3px;
  background:var(--turquesa-suave);
  box-shadow:inset 0 0 0 1.5px var(--turquesa);
}
.lista-marcada.no li::before{background:color-mix(in srgb, var(--frambuesa) 12%, transparent); box-shadow:inset 0 0 0 1.5px var(--frambuesa)}
.lista-marcada h3{font-size:16.5px; font-weight:700; margin-bottom:2px}

.legal-nota{
  border-left:3px solid var(--turquesa); padding:6px 0 6px 16px;
  font-size:13.5px; color:var(--tenue); max-width:62ch;
}

/* ══════════════════════════════════════════════════════════════════════
   Obras
   ══════════════════════════════════════════════════════════════════════ */
.rejilla-obras{display:grid; gap:22px}
.obra{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0;
  background:var(--superficie); border:1px solid var(--borde); border-radius:16px; overflow:hidden;
}
@media (max-width:760px){.obra{grid-template-columns:1fr}}
.obra-foto{background:var(--superficie-2); min-height:230px}
.obra-foto img{width:100%; height:100%; object-fit:cover; min-height:230px}
.obra-txt{padding:22px 24px; display:grid; gap:13px; align-content:start}
.obra-txt h3{font-size:19px; font-weight:700; line-height:1.2}
.obra-desc{color:var(--tenue); font-size:14.5px}
.obra-datos{border:none; border-radius:0}
.obra-datos > div{padding:8px 0; background:transparent; grid-template-columns:minmax(104px,auto) 1fr; gap:14px}
.obra-datos > div + div{border-top:1px solid var(--borde)}
.obra-equipos{display:flex; flex-wrap:wrap; gap:6px}
.obra-equipos a{
  font-family:var(--display); font-size:12px; font-weight:700; text-decoration:none;
  color:var(--turquesa-medio); border:1px solid var(--borde); border-radius:6px; padding:3px 8px;
}
.obra-equipos a:hover{border-color:var(--turquesa); background:var(--turquesa-suave)}
.vacio-obras{
  border:1px dashed var(--borde); border-radius:14px; padding:46px 24px;
  text-align:center; color:var(--tenue); font-size:15px;
}

/* ══════════════════════════════════════════════════════════════════════
   Impresión — para generar el PDF de la garantía desde el navegador
   ══════════════════════════════════════════════════════════════════════ */
@media print{
  :root{
    --papel:#fff; --superficie:#fff; --superficie-2:#fff; --tinta:#111;
    --tenue:#555; --borde:#bbb; --turquesa-medio:#0E5B58; --turquesa-suave:#fff;
  }
  .sitio-cab, .sitio-pie, .flotantes, .cinta .botonera, .no-imprimir, .aviso-edicion{display:none!important}
  .seccion{padding-block:16px; break-inside:avoid}
  .cinta{background:none!important; color:#111!important; border-bottom:2px solid #0E5B58}
  .cinta::after{display:none}
  .cinta h2, .cinta p, .cinta .epigrafe{color:#111!important}
  .tabla-scroll{border:1px solid #bbb; break-inside:avoid}
  .obra, .datos > div{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:10px; color:#666}
  body{font-size:11.5pt}
}

/* ══════════════════════════════════════════════════════════════════════
   Pisos de seguridad — carta de colores y galería
   ══════════════════════════════════════════════════════════════════════ */
.linea-img img.foto{border-radius:10px; max-height:138px}
.carta{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px}
.muestra{border:1px solid var(--borde); border-radius:12px; overflow:hidden; background:var(--superficie)}
.muestra i{
  display:block; height:62px;
  background-image:repeating-linear-gradient(100deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px),
                   repeating-linear-gradient(80deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
}
.muestra span{display:block; padding:8px 11px; font-size:13px; font-weight:500}
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.galeria figure{margin:0; background:var(--superficie); border:1px solid var(--borde); border-radius:14px; overflow:hidden}
.galeria img{width:100%; aspect-ratio:4/3; object-fit:cover}
.galeria figcaption{padding:11px 14px 13px; font-size:13.5px; color:var(--tenue)}

/* ══════════════════════════════════════════════════════════════════════
   Registro para descargas
   ══════════════════════════════════════════════════════════════════════ */
.dlg-registro{border:none; padding:0; background:transparent; max-width:100%; max-height:100%; color:var(--tinta)}
.dlg-registro::backdrop{background:rgba(9,32,31,.66); backdrop-filter:blur(3px)}
.panel-registro{
  background:var(--superficie); border-radius:16px; width:min(640px, calc(100vw - 24px));
  max-height:calc(100vh - 32px); overflow:auto; box-shadow:var(--sombra-alta);
}
.registro-cab{display:flex; gap:12px; align-items:flex-start; padding:22px 22px 6px}
.registro-cab h2{font-size:clamp(20px,3vw,25px); font-weight:800; line-height:1.15; margin-top:4px}
.cerrar-reg{
  margin-left:auto; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--borde); background:var(--superficie); color:var(--tenue);
  display:grid; place-items:center; font-size:19px; line-height:1; padding:0 0 2px;
}
.registro-cuerpo{padding:12px 22px 24px}
.registro-cuerpo .formulario, .registro-pagina .formulario{max-width:none; gap:14px}
.casilla{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; font-size:14px; line-height:1.45; color:var(--tenue)}
.casilla input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--fucsia)}
.casilla a{color:var(--turquesa-medio)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-error{
  background:color-mix(in srgb, var(--frambuesa) 10%, transparent); color:var(--frambuesa);
  border:1px solid color-mix(in srgb, var(--frambuesa) 35%, transparent);
  border-radius:10px; padding:10px 14px; font-size:14px;
}
.registro-listo{display:grid; gap:12px; padding:8px 0}
.registro-listo h2{font-size:22px; font-weight:800}
.registro-listo p{color:var(--tenue)}
.registro-pagina{background:var(--superficie); border:1px solid var(--borde); border-radius:16px; padding:24px; max-width:44rem}

/* ── Textured Braille System ─────────────────────────────────────────── */
.tbs-sello{flex:0 0 auto; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.28))}
.tbs-sello .tbs-curva{font-family:var(--display); font-size:10.4px; font-weight:800; letter-spacing:.14em}
.tbs-sello .tbs-curva2{font-family:var(--display); font-size:8.4px; font-weight:600; letter-spacing:.2em}
.tbs-sello .tbs-kll{font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:.12em; text-anchor:middle}
.tbs-sello .hueco{fill:#C9D7D5}
.tbs-banda{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(125deg, #0B3F3D 0%, #0E5B58 48%, #5B2A6E 100%); /* fijo: texto blanco en ambos temas */
}
.tbs-banda::before{ /* trama de puntos braille de fondo */
  content:""; position:absolute; inset:0; opacity:.13;
  background-image:radial-gradient(circle, #fff 1.6px, transparent 2px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 100%); mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
}
.tbs-banda-in{position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr); gap:44px; align-items:center; padding-block:58px}
@media (max-width:760px){.tbs-banda-in{grid-template-columns:1fr; gap:26px; padding-block:46px}}
.tbs-banda-txt{display:grid; gap:16px; max-width:60ch}
.tbs-banda .epigrafe{color:#9FE4E0}
.tbs-banda h2{font-size:clamp(25px,3.6vw,37px); font-weight:800; line-height:1.1}
.tbs-banda h1{font-size:clamp(32px,5.6vw,56px); font-weight:800; line-height:1.02}
.tbs-banda p{color:rgba(255,255,255,.9); font-size:16.5px}
.tbs-banda p.bajada{font-size:clamp(16px,1.9vw,19px)}
.tbs-banda b{color:#fff}
.tbs-puntos{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14.5px; font-weight:500}
.tbs-puntos li{display:flex; align-items:center; gap:8px}
.tbs-puntos li::before{content:""; width:9px; height:9px; border-radius:50%; background:#F55C98; box-shadow:0 0 0 3px rgba(245,92,152,.25)}
a.sello-heroe{text-decoration:none; color:#fff}
.sello-heroe.sello-tbs{background:linear-gradient(90deg, rgba(26,171,165,.55), rgba(194,37,140,.55)); border-color:rgba(255,255,255,.45); font-weight:600}
.sello-heroe.sello-tbs:hover{border-color:#fff}
.tbs-placa-caja{display:grid; gap:10px}
.tbs-placa{width:100%; height:auto; filter:drop-shadow(0 14px 22px rgba(14,91,88,.28))}
.tbs-probador{display:grid; gap:16px; max-width:60rem}
.tbs-ejemplos{display:flex; flex-wrap:wrap; gap:8px}
.btn-ejemplo{border:1px solid var(--borde); background:var(--superficie); border-radius:999px; padding:7px 14px; font-size:13.5px}
.btn-ejemplo:hover{border-color:var(--turquesa); background:var(--superficie-2)}
.tbs-salida{
  display:flex; flex-wrap:wrap; gap:14px 6px; min-height:108px; padding:22px;
  border-radius:16px; border:1px solid #9AA8A7;
  background:linear-gradient(135deg, #E6ECEB, #C3CDCC 45%, #EEF3F2 70%, #AEB9B8); /* acero: fijo en ambos temas */
}
.tbs-salida .celda{display:grid; justify-items:center; gap:6px; width:40px}
.tbs-salida .celda.espacio{width:22px}
.tbs-salida svg{width:36px; height:52px; overflow:visible}
.tbs-salida .pr{fill:#EEF3F2; stroke:#6F7D7C; stroke-width:.8; filter:drop-shadow(1px 1.4px 1px rgba(30,40,39,.55))}
.tbs-salida .hueco{fill:#8E9B9A; opacity:.45}
.tbs-salida small{font-family:var(--display); font-size:13px; font-weight:600; color:#33403F; min-height:1em}
.tbs-unicode{font-size:26px; letter-spacing:.08em; color:var(--turquesa-medio); word-break:break-all; line-height:1.3}
.tbs-espec{
  margin:0; padding:18px 20px; border-left:4px solid var(--fucsia); border-radius:0 12px 12px 0;
  background:var(--superficie); font-size:15px; line-height:1.6; color:var(--tinta)
}
.sello.tbs{text-decoration:none; color:#fff; border-color:transparent; background:linear-gradient(90deg,#14807C,#C2258C)}
.tbs-foto{margin:0; display:grid; gap:10px}
.tbs-foto img{width:100%; height:auto; border-radius:16px; box-shadow:var(--sombra)}
.tbs-foto figcaption{font-size:13.5px; color:var(--tenue)}
.tbs-galeria img{aspect-ratio:3/4}
.tbs-qr{display:grid; place-items:center}
.tbs-qr svg{width:min(240px,70%); height:auto; border-radius:18px; box-shadow:var(--sombra-alta); border:1px solid var(--borde)}

/* título de sección destacado: remate de color bajo el h2 */
.seccion-cab h2::after{content:""; display:block; width:56px; height:4px; border-radius:3px; margin-top:14px;
  background:linear-gradient(90deg, var(--turquesa), var(--fucsia))}
.tbs-banda .epigrafe, .heroe .epigrafe, .cinta .epigrafe{color:#9FE4E0}
.duo-txt p.epigrafe, .seccion-cab p.epigrafe{color:var(--fucsia)}
.tbs-banda p.epigrafe, .heroe p.epigrafe, .cinta p.epigrafe{color:#9FE4E0}
@media (min-width:1081px) and (max-width:1260px){.nav a{padding:8px 9px; font-size:14px}.nav{gap:2px}}
.doc-solicitado{display:inline-block; margin-top:8px; font-family:var(--display); font-weight:700; font-size:14.5px;
  color:var(--turquesa-medio); background:var(--turquesa-suave); padding:6px 12px; border-radius:10px}
.registro-listo{display:grid; gap:12px}
.registro-listo p{color:var(--tenue); font-size:15.5px}
.registro-listo p a{color:var(--turquesa-medio)}
.registro-listo p.epigrafe{color:var(--fucsia)}