/* SEVIRUM: pantallas completas con el 3D por delante del fondo, como las plantillas de referencia.
   Colores del logo: azul #3F6FE3, carbón #0B0E14, cian #5FE3E0. Los fondos los mezcla scroll.js al bajar. */
:root {
  color-scheme: dark;
  --carbon: #0b0e14; --azul: #3f6fe3; --cian: #5fe3e0; --claro: #f4f5f7; --marino: #12204a;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen: clamp(20px, 6vw, 96px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--carbon); color: #e9ebef; font: 400 18px/1.55 var(--font-body); overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* el 3D va por delante del fondo y de las letras gigantes; el texto pequeño y los botones, por delante del 3D */
#fondo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 30; pointer-events: none; }
.respaldo { display: none; position: fixed; right: 4vw; top: 50%; transform: translateY(-50%); width: min(46vw, 560px); opacity: .6; z-index: 30; pointer-events: none; }
body.sin-3d #fondo { display: none; }
body.sin-3d .respaldo { display: block; }
.texto, .caja, .acciones, .base { position: relative; z-index: 80; }

/* barra */
.barra { position: fixed; z-index: 90; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px 8px 16px; border-radius: 999px;
  background: rgba(11, 14, 20, .72); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); }
.marca-mini { display: block; width: 44px; line-height: 0; }
.marca-mini svg { width: 100%; height: auto; display: block; }
.barra nav { display: flex; gap: clamp(14px, 3vw, 36px); }
.barra nav a { color: #e9ebef; text-decoration: none; font-size: 15px; font-weight: 500; }
.barra nav a:hover { color: var(--cian); }
.control { font: 500 13px var(--font-body); color: #e9ebef; background: transparent; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.control:hover { border-color: var(--cian); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; }
.aviso-3d { position: fixed; z-index: 95; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  margin: 0 auto; max-width: 560px; padding: 12px 16px; font-size: 14px; background: rgba(11, 14, 20, .88); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; }

/* temas por pantalla (si no corre el guion, cada pantalla lleva su color) */
.tema-oscuro { color: #e9ebef; --bt: #3f6fe3; --bt-fg: #fff; }
.tema-azul { color: #fff; --bt: #0b0e14; --bt-fg: #fff; }
.tema-cian { color: #0b0e14; --bt: #0b0e14; --bt-fg: #fff; }
.tema-claro { color: #0b0e14; --bt: #3f6fe3; --bt-fg: #fff; }
.tema-marino { color: #fff; --bt: #5fe3e0; --bt-fg: #0b0e14; }
html:not(.con-guion) .tema-azul { background: var(--azul); }
html:not(.con-guion) .tema-cian { background: var(--cian); }
html:not(.con-guion) .tema-claro { background: var(--claro); }
html:not(.con-guion) .tema-marino { background: var(--marino); }

.pantalla { position: relative; min-height: 100vh; min-height: 100svh; padding-inline: var(--margen); }
h2, .gigante, h1 { font-family: var(--font-serif); font-weight: 900; text-transform: uppercase; text-wrap: balance; }

/* héroe: palabras gigantes escalonadas, el 3D por delante */
.portada { display: grid; grid-template-rows: auto 1fr auto; padding-block: 92px 36px; overflow: hidden; }
#hero { width: min(210px, 40vw); position: relative; z-index: 80; }
#hero svg { width: 100%; height: auto; display: block; }
h1 { display: grid; align-content: center; gap: 0; color: var(--azul); }
.palabra { display: block; font-size: clamp(50px, min(9.6vw, 16vh), 180px); letter-spacing: -.02em; line-height: .88; }
.p1, .p3 { justify-self: start; } .p2 { justify-self: start; margin-left: 7vw; }
.base { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.base > p { color: #c9ced8; font-size: clamp(18px, 1.6vw, 24px); }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@keyframes entra { from { opacity: 0; transform: scale(2.6); } }
.portada .palabra { animation: entra .9s cubic-bezier(.7, 0, .84, 0) backwards; }
.portada .p1 { animation-delay: .3s; } .portada .p2 { animation-delay: .8s; } .portada .p3 { animation-delay: 1.3s; }
body.anim-off .portada .palabra { animation: none; }

/* pantallas de texto junto al modelo, alternando de lado */
.beat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.beat .texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html:not(.con-guion) .beat .texto, .beat.visto .texto, body.anim-off .beat .texto { opacity: 1; transform: none; }
.texto-izq .texto { grid-column: 1; } .texto-der .texto { grid-column: 2; }
@media (min-width: 761px) { .texto-der .texto { padding-left: 2vw; } }
h2 { font-size: clamp(38px, min(6.1vw, 12.5vh), 104px); line-height: .92; overflow-wrap: break-word; }
.beat > * { min-width: 0; }
.beat p { font-size: clamp(19px, 1.8vw, 29px); max-width: 22em; }

.boton { display: inline-block; padding: 14px 24px; border-radius: 10px; background: var(--bt, var(--azul)); color: var(--bt-fg, #fff); border: 2px solid var(--bt, var(--azul)); text-decoration: none; font-weight: 600; font-size: 17px; }
.boton:hover { filter: brightness(1.12); }
.boton.secundario { background: transparent; color: inherit; border-color: currentColor; }
.portada .boton { --bt: #3f6fe3; --bt-fg: #fff; }

/* escena de armado: las letras gigantes quedan detrás del modelo, que se arma con el scroll */
.armado { height: 300vh; }
.armado .fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.gigante { font-size: clamp(54px, 13vw, 230px); line-height: .82; text-align: center; letter-spacing: -.02em; }
.armado .gigante { color: rgba(95, 227, 224, .16); }

/* productos */
.lista { display: grid; align-items: center; padding-block: 14vh; }
.caja { max-width: 1200px; margin-inline: auto; width: 100%; }
.intro { margin: 16px 0 36px; font-size: clamp(18px, 1.6vw, 24px); max-width: 30em; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tarjeta { background: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; color: #0b0e14; border: 2px solid #0b0e14; }
.tarjeta h3 { font: 800 22px/1.2 var(--font-serif); }
.tarjeta p { color: #4a5160; }
.tarjeta .precio { color: #0b0e14; font-weight: 700; }
.tarjeta .cat { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.tarjeta .boton { margin-top: auto; align-self: flex-start; }
.etiqueta { align-self: flex-start; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: #dfe7ff; color: #1f3f9a; font-weight: 600; }
.vacio { padding: 40px 0; }

/* cierre: letras enormes y los datos de contacto */
.cierre { display: grid; grid-template-rows: 1fr auto; padding-block: 12vh 8vh; overflow: hidden; }
.cierre .gigante { font-size: clamp(54px, 12.2vw, 230px); align-self: center; color: #0b0e14; }
.cierre .base > p { color: inherit; }
.contacto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
.contacto span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-right: 8px; }
.pie { padding: 36px var(--margen) 48px; text-align: center; font-size: 15px; color: #98a0ae; }

@media (max-width: 760px) {
  .barra nav { display: none; }
  .beat { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 14vh; }
  .texto-izq .texto, .texto-der .texto { grid-column: 1; }
  .beat p { font-size: 19px; }
  h2 { font-size: 8.6vw; }
  .cierre .gigante { font-size: 13vw; }
  #hero { width: min(170px, 44vw); }
  .portada { padding-top: 84px; }
  h1 { align-content: start; padding-top: 3vh; }
  .palabra { font-size: 17.5vw; }
  .p2 { margin-left: 5vw; }
  .base > p { display: none; }
}
@media (min-width: 761px) and (max-height: 560px) {
  #hero { display: none; }
  .palabra { font-size: 15vh; }
  .base > p { display: none; }
}

/* logo: el modo claro usa los colores base; el oscuro aclara el carbón y el azul */
.logo { --ink: #F1F2F5; --sub: #A8AEBB; --ring: #7EA3FF; --ring2: #9DBAFF; --ring3: #BFE6FF; --energy: #D6E4FF; overflow: visible; cursor: pointer; }
.logo .arc.c-ring { fill: var(--ring); }
.logo .arc.c-ring2 { fill: var(--ring2); }
.logo .arc.c-ring3 { fill: var(--ring3); }
.logo .br, .logo .nd { fill: var(--ink); }
.logo .spark { fill: var(--energy); opacity: 0; }
.logo .wm { fill: var(--ink); font: 400 138px var(--font-serif); }
.logo .sub { fill: var(--sub); font: 400 58px "Playfair Display SC", var(--font-serif); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(7px); } }
.logo.boot .wm { animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.15s backwards; }
.logo.boot .sub { animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.4s backwards; }
@media (prefers-reduced-motion: reduce) { .logo .wm, .logo .sub { animation: none !important; } }
.portada .logo { --ink: #F1F2F5; --sub: #A8AEBB; --ring: #7EA3FF; --ring2: #9DBAFF; --ring3: #BFE6FF; --energy: #D6E4FF; }


/* Sevi, la mascota: esquina inferior derecha, por encima del 3D y por debajo de la barra */
.sevi { position: fixed; z-index: 85; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: 128px; display: block; text-decoration: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition: transform .25s; }
.sevi:hover, .sevi:focus-visible { transform: translateY(-4px) scale(1.06); }
.sevi svg { display: block; width: 100%; height: auto; overflow: visible; }
.sevi-dicho { position: absolute; right: 70%; bottom: 78%; width: max-content; max-width: 190px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: #10202f; font: 600 13px/1.3 "Noto Sans", system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.sevi-dicho.visible { opacity: 1; transform: none; }
.sevi-cabeza { transform-box: fill-box; transform-origin: 50% 90%; animation: sevi-cabeceo 4s ease-in-out infinite; }
.sevi-ojos { transform-box: fill-box; transform-origin: 50% 50%; animation: sevi-parpadeo 5s infinite; }
.sevi-brazo { transform-box: view-box; transform-origin: 144px 142px; animation: sevi-saludo 3.2s ease-in-out infinite; }
@keyframes sevi-cabeceo { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes sevi-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes sevi-saludo { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-38deg); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(-38deg); } }
.anim-off .sevi-cabeza, .anim-off .sevi-ojos, .anim-off .sevi-brazo { animation: none; }
@media (max-width: 760px) { .sevi { width: 84px; } .sevi-dicho { max-width: 150px; font-size: 12px; } }

/* ===== catálogo (2026-10-25) ===== */
.pagina-catalogo .cab { min-height: 74vh; min-height: 74svh; display: grid; align-items: end; padding-block: 110px 40px; }
.pagina-catalogo .cab-texto { display: grid; gap: 14px; max-width: min(1100px, 100%); }
.pagina-catalogo .cab-texto > p { max-width: 40em; }
.pagina-catalogo h1 { font-size: clamp(28px, 6.2vw, 92px); line-height: .9; display: block; color: var(--azul); overflow-wrap: break-word; }
.pagina-catalogo .cab > * { min-width: 0; }
.pagina-catalogo .cab-texto > p { color: #c9ced8; font-size: clamp(17px, 1.5vw, 22px); }
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: #98a0ae; }
.migas a { color: var(--cian); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.buscador { display: flex; gap: 8px; flex-wrap: wrap; }
.buscador input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 17px; padding: 13px 16px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(11, 14, 20, .6); color: #fff; }
.buscador input::placeholder { color: #98a0ae; }
.buscador input:focus { border-color: var(--cian); outline: none; }
.atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.atajos a, .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 500 14px var(--font-body); text-decoration: none; cursor: pointer; }
.atajos a { color: #e9ebef; } .atajos a:hover, .chip:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

.pagina-catalogo .lista { display: block; padding-block: 56px 14vh; padding-inline: var(--margen); }
.pagina-catalogo .lista .caja { max-width: 1280px; }
h2.sub { font-size: clamp(26px, 3.6vw, 44px); margin: 28px 0 16px; }
.grupo-cats:first-child h2.sub { margin-top: 0; }
.cat-tarjeta { text-decoration: none; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.cat-tarjeta:hover, .cat-tarjeta:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 0 var(--azul); }
.cat-tarjeta h3 { font-size: 20px; }

.vista-catalogo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.panel-filtros { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; background: #fff; border: 2px solid #0b0e14; border-radius: 16px; padding: 14px 16px; }
.panel-filtros summary { font: 800 18px var(--font-serif); cursor: pointer; list-style: none; padding-bottom: 6px; }
.filtros { display: grid; gap: 14px; }
.grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.grupo legend { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #4a5160; padding: 0 0 4px; }
.opcion { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; overflow-wrap: break-word; }
.opcion small { color: #6b7385; margin-left: auto; }
.opcion input { accent-color: var(--azul); width: 17px; height: 17px; flex: none; }
.grupo details summary { cursor: pointer; font-size: 14px; color: var(--azul); padding-top: 4px; }
.rango { display: flex; align-items: center; gap: 8px; }
.rango input { width: 100%; min-width: 0; font: inherit; padding: 8px 10px; border: 1.5px solid #0b0e14; border-radius: 8px; background: #fff; }
.barra-res { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.conteo { font-weight: 700; }
.orden { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.orden select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1.5px solid #0b0e14; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chips .chip { background: #dfe7ff; border-color: #dfe7ff; color: #1f3f9a; }
.chips .chip:hover { background: var(--azul); color: #fff; }

.rejilla-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tarjeta.producto { padding: 0; overflow: hidden; gap: 6px; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.tarjeta.producto:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--azul); }
.tarjeta.producto > :not(.foto) { padding-inline: 16px; }
.tarjeta.producto h3 { font-size: 17px; line-height: 1.25; font-family: var(--font-body); font-weight: 700; }
.tarjeta.producto h3 a { color: inherit; text-decoration: none; }
.tarjeta.producto h3 a:hover { text-decoration: underline; }
.tarjeta.producto .precio { font-size: 20px; }
.tarjeta.producto .disp { margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.disp-en_stock { color: #11704a; } .disp-ultimas { color: #9a5b00; } .disp-bajo_pedido { color: #4a5160; }
.foto { display: block; aspect-ratio: 4 / 3; background: #eef0f4; line-height: 0; }
.foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.foto.sin-foto { display: grid; place-items: center; line-height: 1.2; color: #6b7385; font-size: 14px; }
.tarjeta.servicio { gap: 10px; }
.modalidad { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.modalidad li { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: #dfe7ff; color: #1f3f9a; font-weight: 600; }
.acciones-tarjeta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tarjeta .boton.secundario { color: #0b0e14; }
.paginas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.paginas button { font: 600 15px var(--font-body); min-width: 40px; padding: 8px 12px; border-radius: 8px; border: 1.5px solid #0b0e14; background: #fff; color: #0b0e14; cursor: pointer; }
.paginas button:hover { background: #dfe7ff; }
.paginas button[aria-current="page"] { background: #0b0e14; color: #fff; }
.puntos { padding: 0 4px; }



@media (max-width: 760px) {
  .vista-catalogo { grid-template-columns: minmax(0, 1fr); }
  .panel-filtros { position: static; max-height: none; }
  .pagina-catalogo .cab { padding-top: 96px; min-height: 64svh; }
  .rejilla-catalogo { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .tarjeta.producto > :not(.foto) { padding-inline: 12px; }
}

/* ficha de producto */
.pagina-producto h1 { font: 800 clamp(22px, 3vw, 40px)/1.15 var(--font-body); text-transform: none; text-wrap: balance; overflow-wrap: break-word; }
.ficha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.galeria { display: grid; gap: 12px; position: sticky; top: 84px; }
.galeria > img, .galeria > .foto { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 2px solid #0b0e14; border-radius: 16px; }
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.miniatura { padding: 0; width: 72px; height: 54px; border: 2px solid #0b0e14; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; }
.miniatura:hover, .miniatura:focus-visible { border-color: var(--azul); }
.miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.datos { display: grid; gap: 12px; }
.precio.grande { font: 900 clamp(34px, 4vw, 52px)/1 var(--font-serif); }
.codigo { font-size: 15px; color: #4a5160; }
.specs { border-collapse: collapse; width: 100%; background: #fff; border: 2px solid #0b0e14; border-radius: 12px; overflow: hidden; }
.specs th, .specs td { text-align: left; padding: 9px 14px; border-bottom: 1px solid #dfe3ea; font-size: 15px; }
.specs th { width: 42%; color: #4a5160; font-weight: 600; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.nota { font-size: 14px; color: #4a5160; }
.descripcion p { max-width: 46em; white-space: pre-line; overflow-wrap: break-word; }
.sugerencias { margin-top: 12px; }
@media (max-width: 760px) { .ficha { grid-template-columns: minmax(0, 1fr); } .galeria { position: static; } }



/* palabras largas nunca desbordan una tarjeta */
.tarjeta { min-width: 0; }
.tarjeta h3, .tarjeta p { overflow-wrap: break-word; }
@media (max-width: 760px) { .tarjeta.servicio { padding: 16px; } .tarjeta.servicio h3 { font-size: 19px; } .acciones-tarjeta .boton { padding: 10px 14px; font-size: 15px; } }

/* títulos largos de distribuidor: máximo 3 líneas en las tarjetas (la ficha muestra el nombre completo) */
.tarjeta.producto h3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ===== estilo vidrio (2026-10-25) =====
   Tarjetas translúcidas sobre fondos de color con manchas suaves, como la barra superior. El precio va SIEMPRE debajo de la foto.
   Movimiento (criterio Emil Kowalski): entrada escalonada solo en la primera carga, cambio de 120 ms al filtrar, hover/pulsación solo con
   transform y sombra, y todo se apaga con «Animación» pausada. */
:root { --v-borde: rgba(255, 255, 255, .2); --v-fondo: rgba(255, 255, 255, .07); }
.franja { --num: "Manrope", var(--font-body); --num-peso: 800; }
.pagina-catalogo { --num: "Manrope", var(--font-body); --num-peso: 800; }
.franja, .pagina-catalogo .lista { position: relative; isolation: isolate; overflow-x: clip; color: #fff; }
.pagina-catalogo .lista { background-image: radial-gradient(540px 440px at 8% 340px, rgba(63, 111, 227, .5), transparent 70%), radial-gradient(500px 420px at 94% 760px, rgba(95, 227, 224, .24), transparent 70%); background-size: 100% 1500px; background-repeat: repeat-y; }
.franja.tema-azul { background-image: radial-gradient(520px 420px at 6% 340px, rgba(95, 227, 224, .42), transparent 70%), radial-gradient(560px 460px at 96% calc(100% - 340px), rgba(18, 32, 74, .75), transparent 70%); }
.franja.tema-marino { background-image: radial-gradient(540px 440px at 94% 340px, rgba(63, 111, 227, .6), transparent 70%), radial-gradient(500px 420px at 4% calc(100% - 340px), rgba(95, 227, 224, .28), transparent 70%); }
.franja.tema-oscuro { background-image: radial-gradient(520px 420px at 10% calc(100% - 340px), rgba(63, 111, 227, .45), transparent 70%), radial-gradient(480px 400px at 92% 340px, rgba(95, 227, 224, .22), transparent 70%); }
.franja h2, .franja .intro, .pagina-catalogo .lista h2 { color: #fff; }
.franja .intro { opacity: .9; }

/* tarjetas de producto, servicio y categoría */
.franja .tarjeta, .pagina-catalogo .lista .tarjeta { position: relative; color: #fff; background: var(--v-fondo); border: 1px solid var(--v-borde); border-radius: 18px;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .16s cubic-bezier(.2, .7, .2, 1), background-color .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out; }
.franja .tarjeta p, .pagina-catalogo .lista .tarjeta p { color: inherit; }
.franja .tarjeta:hover, .pagina-catalogo .lista .tarjeta:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 30px rgba(7, 12, 40, .3); }
.franja .tarjeta:active, .pagina-catalogo .lista .tarjeta:active { transform: scale(.98); transition-duration: .08s; }
.franja .tarjeta:has(:focus-visible), .pagina-catalogo .lista .tarjeta:has(:focus-visible) { outline: 3px solid var(--cian); outline-offset: 3px; }
.enlace-tarjeta { color: inherit; text-decoration: none; }
.enlace-tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.enlace-tarjeta:focus-visible { outline: none; }

.franja .tarjeta.producto, .pagina-catalogo .lista .tarjeta.producto { padding: 12px; gap: 7px; overflow: hidden; }
.tarjeta.producto .foto, .pagina-catalogo .lista .galeria > .foto { border-radius: 12px; background: rgba(255, 255, 255, .9); overflow: hidden; margin: 0; }
.tarjeta.producto .foto img { width: 80%; height: 80%; margin: 10%; mix-blend-mode: multiply; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.tarjeta.producto:hover .foto img { transform: scale(1.05); }
.tarjeta.producto .foto.sin-foto { color: #4a5160; }
.tarjeta.producto > :not(.foto) { padding-inline: 0; }
.tarjeta.producto .cod { margin: 4px 0 0; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.tarjeta.producto .cat { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.tarjeta.producto h3 { font: 600 12.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .03em; min-height: 2.8em; -webkit-line-clamp: 2; line-clamp: 2; }
.pie-tarjeta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .16); }
.tarjeta.producto .precio { margin: 0; font: var(--num-peso) 22px/1 var(--num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: #fff; }
.tarjeta.producto .disp { margin: 0; font-size: 11px; font-weight: 600; text-align: right; }
.disp-en_stock { color: #8ff0c4; } .disp-ultimas { color: #ffd58a; } .disp-bajo_pedido { color: rgba(255, 255, 255, .72); }

/* portada: la tarjeta es más grande y editorial (variante C) */
.franja .tarjeta.producto { border-radius: 22px; padding: 10px 10px 14px; gap: 8px; background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07)); border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 14px 34px rgba(7, 12, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .45); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.franja .tarjeta.producto:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(7, 12, 40, .4), 0 0 0 1px rgba(95, 227, 224, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.franja .tarjeta.producto .cod { display: none; }
.franja .tarjeta.producto > :not(.foto) { padding-inline: 6px; }
.franja .tarjeta.producto h3 { font: 900 15px/1.25 var(--font-serif); letter-spacing: 0; min-height: 2.5em; }
.franja .tarjeta.producto .precio { font-size: 26px; }
.franja .tarjeta.producto .pie-tarjeta { background: rgba(11, 14, 20, .34); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 9px 12px; align-items: center; }

/* catálogo general: tarjeta densa (variante B); la marca ya está en el nombre */
.pagina-catalogo .lista .tarjeta.producto .cat { display: none; }

/* categorías, servicios y resto del catálogo en vidrio */
.pagina-catalogo .lista .cat-tarjeta h3, .pagina-catalogo .lista .tarjeta.servicio h3, .franja .tarjeta.servicio h3 { color: #fff; font-family: var(--font-serif); }
.pagina-catalogo .lista .tarjeta.servicio .cat, .franja .tarjeta.servicio .cat { opacity: .8; }
.franja .tarjeta.servicio .precio, .pagina-catalogo .lista .tarjeta.servicio .precio { color: #fff; font: var(--num-peso) 17px var(--num); }
.modalidad li { background: rgba(255, 255, 255, .14); color: #fff; }
.pagina-catalogo .lista .tarjeta .boton.secundario, .franja .tarjeta .boton.secundario { color: #fff; border-color: rgba(255, 255, 255, .5); }
.pagina-catalogo .panel-filtros { background: var(--v-fondo); border: 1px solid var(--v-borde); color: #fff; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.pagina-catalogo .grupo legend, .pagina-catalogo .opcion small { color: rgba(255, 255, 255, .7); }
.pagina-catalogo .grupo details summary { color: var(--cian); }
.pagina-catalogo .rango input, .pagina-catalogo .orden select { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.pagina-catalogo .orden select option { color: #0b0e14; }
.pagina-catalogo .chips .chip { background: rgba(95, 227, 224, .2); border-color: rgba(95, 227, 224, .6); color: #fff; }
.pagina-catalogo .chips .chip:hover { background: var(--azul); border-color: var(--azul); }
.pagina-catalogo .paginas button { background: var(--v-fondo); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.pagina-catalogo .paginas button:hover { background: rgba(255, 255, 255, .16); }
.pagina-catalogo .paginas button[aria-current="page"] { background: #fff; color: #0b0e14; }
.pagina-catalogo .lista .conteo, .pagina-catalogo .lista .vacio, .pagina-catalogo .lista .descripcion p, .pagina-catalogo .lista .intro { color: #fff; }
.pagina-catalogo .lista .vacio a { color: var(--cian); }
.pagina-catalogo .lista .codigo, .pagina-catalogo .lista .nota { color: rgba(255, 255, 255, .72); }
.pagina-catalogo .lista .precio.grande { font: var(--num-peso) clamp(34px, 4vw, 52px)/1 var(--num); font-variant-numeric: tabular-nums lining-nums; color: #fff; }
.pagina-catalogo .lista .galeria > img { background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .5); mix-blend-mode: normal; }
.pagina-catalogo .lista .miniatura { background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .5); }
.pagina-catalogo .lista .miniatura:hover, .pagina-catalogo .lista .miniatura:focus-visible { border-color: var(--cian); }
.pagina-catalogo .lista .specs { background: var(--v-fondo); border: 1px solid var(--v-borde); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pagina-catalogo .lista .specs th { color: rgba(255, 255, 255, .72); }
.pagina-catalogo .lista .specs td { color: #fff; }
.pagina-catalogo .lista .specs th, .pagina-catalogo .lista .specs td { border-bottom-color: rgba(255, 255, 255, .14); }

/* movimiento: primera carga escalonada (máx. 8), cambios de filtro casi instantáneos */
@keyframes sube { from { opacity: 0; transform: translateY(8px); } }
@keyframes aparece { from { opacity: .35; } }
.rejilla-catalogo.entra .tarjeta, .rejilla .cat-tarjeta { animation: sube .22s ease-out backwards; }
.rejilla-catalogo.entra .tarjeta:nth-child(2), .rejilla .cat-tarjeta:nth-child(2) { animation-delay: .04s; }
.rejilla-catalogo.entra .tarjeta:nth-child(3), .rejilla .cat-tarjeta:nth-child(3) { animation-delay: .08s; }
.rejilla-catalogo.entra .tarjeta:nth-child(4), .rejilla .cat-tarjeta:nth-child(4) { animation-delay: .12s; }
.rejilla-catalogo.entra .tarjeta:nth-child(5), .rejilla .cat-tarjeta:nth-child(5) { animation-delay: .16s; }
.rejilla-catalogo.entra .tarjeta:nth-child(6), .rejilla .cat-tarjeta:nth-child(6) { animation-delay: .2s; }
.rejilla-catalogo.entra .tarjeta:nth-child(7), .rejilla .cat-tarjeta:nth-child(7) { animation-delay: .24s; }
.rejilla-catalogo.entra .tarjeta:nth-child(n+8), .rejilla .cat-tarjeta:nth-child(n+8) { animation-delay: .28s; }
.rejilla-catalogo.cambia .tarjeta { animation: aparece .12s ease-out; }
html.con-guion .franja:not(.visto) .tarjeta { opacity: 0; }
html.con-guion .franja.visto .tarjeta { animation: sube .22s ease-out backwards; }
html.con-guion .franja.visto .tarjeta:nth-child(2) { animation-delay: .04s; }
html.con-guion .franja.visto .tarjeta:nth-child(3) { animation-delay: .08s; }
html.con-guion .franja.visto .tarjeta:nth-child(4) { animation-delay: .12s; }
body.anim-off .franja .tarjeta, body.anim-off .rejilla-catalogo .tarjeta, body.anim-off .rejilla .cat-tarjeta { animation: none !important; opacity: 1 !important; }
body.anim-off .franja .tarjeta, body.anim-off .pagina-catalogo .lista .tarjeta, body.anim-off .tarjeta.producto .foto img { transition: none; }
@media (prefers-reduced-motion: reduce) { .franja .tarjeta, .pagina-catalogo .lista .tarjeta, .tarjeta.producto .foto img { transition-duration: .01s; } }
@media (max-width: 760px), (pointer: coarse) { .franja .tarjeta, .pagina-catalogo .lista .tarjeta, .pagina-catalogo .panel-filtros { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }

/* portada: espacio de las franjas y botones de «ver todo» */
.franja { padding-block: 12vh; }
.franja .rejilla-catalogo { margin-top: 8px; }
.franja-acciones { justify-content: flex-start; margin-top: 32px; }
.franja .tarjeta.producto h3, .pagina-catalogo .lista .cat-tarjeta h3, .pagina-catalogo .lista .tarjeta.servicio h3, .franja .tarjeta.servicio h3 { font-variant-numeric: lining-nums; }

/* catálogo: una sola letra de interfaz (Manrope) en filtros, barra de herramientas y tarjetas; el serif queda para los títulos grandes */
.pagina-catalogo .lista { --ui: "Manrope", system-ui, sans-serif; font-family: var(--ui); }
.pagina-catalogo .panel-filtros summary { font: 800 17px/1.2 var(--ui); letter-spacing: .01em; }
.pagina-catalogo .grupo legend { font: 800 11.5px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; }
.pagina-catalogo .opcion { font: 600 14px/1.3 var(--ui); }
.pagina-catalogo .opcion small { font: 700 11.5px var(--ui); font-variant-numeric: tabular-nums; }
.pagina-catalogo .grupo details summary { font: 700 13px var(--ui); }
.pagina-catalogo .rango input, .pagina-catalogo .orden, .pagina-catalogo .orden select, .pagina-catalogo .chips .chip, .pagina-catalogo .paginas button { font-family: var(--ui); }
.pagina-catalogo .rango input { font-weight: 600; font-variant-numeric: tabular-nums; }
.pagina-catalogo .conteo { font: 800 15px var(--ui); font-variant-numeric: tabular-nums; }
.pagina-catalogo .lista .tarjeta.producto h3 { font-family: var(--ui); font-weight: 700; }
.pagina-catalogo .lista .tarjeta.producto .cod, .pagina-catalogo .lista .tarjeta.producto .disp, .pagina-catalogo .lista .cat-tarjeta p { font-family: var(--ui); }
.pagina-catalogo .lista .specs, .pagina-catalogo .lista .codigo, .pagina-catalogo .lista .nota { font-family: var(--ui); }

/* ===== fotos recortadas, tarjetas de categoría y efecto holográfico (2026-10-26) ===== */
.tarjeta .foto, .cat-tarjeta .foto { position: relative; overflow: hidden; display: block; aspect-ratio: 4 / 3; line-height: 0; border-radius: 12px; }
.tarjeta.producto .foto img, .cat-tarjeta .foto img { position: absolute; inset: 7%; width: 86%; height: 86%; margin: 0; object-fit: contain; }
.cat-tarjeta .foto:not(.recorte) { background: rgba(255, 255, 255, .9); }
.cat-tarjeta .foto:not(.recorte) img { mix-blend-mode: multiply; }
/* sin fondo ni sombra: la foto descansa sobre el vidrio con un halo de luz suave (no es sombra) para que lo oscuro no se pierda */
.tarjeta .foto.recorte, .tarjeta.producto .foto.recorte { background: radial-gradient(60% 55% at 50% 52%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%); }
.tarjeta .foto.recorte img { mix-blend-mode: normal; }
.tarjeta .foto.sin-foto, .cat-tarjeta .foto.sin-foto { display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); font-size: 14px; letter-spacing: .12em; }
.pagina-catalogo .lista .galeria > img.recorte { background: radial-gradient(60% 55% at 50% 52%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 72%); border: 1px solid rgba(255, 255, 255, .22); mix-blend-mode: normal; }
.pagina-catalogo .lista .miniatura.recorte { background: rgba(255, 255, 255, .1); }
.tarjeta.producto .disp { max-width: 55%; line-height: 1.15; }

/* página «Catálogo»: una tarjeta por categoría, con la foto referencial */
.cat-tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 12px; text-decoration: none; }
.pagina-catalogo .lista .cat-tarjeta h3 { margin: 6px 6px 0; font: 900 18px/1.2 var(--font-serif); text-transform: uppercase; }
.pagina-catalogo .lista .cat-tarjeta p { margin: 0 6px 4px; font: 700 13px var(--ui); opacity: .8; }
.rejilla:has(.cat-tarjeta) { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* mod holográfico: solo con mouse, solo en la portada y en las categorías, y apagado con «Animación» pausada */
html.con-holo body:not(.anim-off) .franja .tarjeta, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --o: 0; --px: 0; --py: 0;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), background-color .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out; }
html.con-holo body:not(.anim-off) .franja .tarjeta.mueve, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta.mueve {
  transition: transform .06s linear, background-color .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out; }
html.con-holo body:not(.anim-off) .franja .tarjeta:hover, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta:hover {
  transform: perspective(900px) translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry)); border-color: rgba(255, 255, 255, .65);
  box-shadow: 0 22px 44px rgba(7, 12, 40, .4), 0 0 0 1px rgba(95, 227, 224, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
html.con-holo body:not(.anim-off) .franja .tarjeta:active, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta:active { transform: perspective(900px) scale(.98); transition-duration: .08s; }
html.con-holo body:not(.anim-off) .franja .tarjeta::before, html.con-holo body:not(.anim-off) .franja .tarjeta::after,
html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta::before, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease-out; }
html.con-holo body:not(.anim-off) .franja .tarjeta::before, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta::before {
  z-index: 2; mix-blend-mode: color-dodge; filter: saturate(1.3) brightness(.55); background-size: 260% 260%; background-position: var(--mx) var(--my);
  background-image: repeating-linear-gradient(115deg, #ff4fa3 0%, #ffd45c 12%, #46f0c0 24%, #4fa8ff 36%, #a96bff 48%, #ff4fa3 60%); }
html.con-holo body:not(.anim-off) .franja .tarjeta::after, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta::after {
  z-index: 3; mix-blend-mode: soft-light; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 28%, rgba(255, 255, 255, 0) 60%); }
html.con-holo body:not(.anim-off) .franja .tarjeta:hover::before, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta:hover::before { opacity: .55; }
html.con-holo body:not(.anim-off) .franja .tarjeta:hover::after, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta:hover::after { opacity: .9; }
html.con-holo body:not(.anim-off) .franja .tarjeta .foto img, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta .foto img {
  transform: translate(calc(var(--px) * -7px), calc(var(--py) * -7px)) scale(calc(1 + var(--o) * .04)); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
html.con-holo body:not(.anim-off) .franja .tarjeta.mueve .foto img, html.con-holo body.pagina-catalogo:not(.anim-off) .lista .cat-tarjeta.mueve .foto img { transition: transform .06s linear; }

/* las pantallas con tarjetas de vidrio van POR ENCIMA del 3D fijo (z 30): el modelo se ve detrás del vidrio, nunca encima */
.franja, .pagina-catalogo .lista { z-index: 80; }
.tarjeta.producto h3 a.enlace-tarjeta:hover, .enlace-tarjeta:hover { text-decoration: none; }

/* iconos animados de los servicios (2026-10-29): un motivo por servicio (js/iconos-servicio.js); se mueven solo con «Animación» activa */
.ico-servicio { align-self: center; margin-inline: auto; --tinta: #fff; --acento: var(--cian); display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; color: var(--tinta);
  background: radial-gradient(circle at 30% 20%, rgba(95, 227, 224, .28), rgba(95, 227, 224, .06) 70%); border: 1px solid rgba(95, 227, 224, .42); box-shadow: 0 0 22px rgba(95, 227, 224, .16); }
.ico-servicio svg { width: 44px; height: 44px; overflow: visible; }
.ico-servicio .ac { stroke: var(--acento); }
.ico-servicio :is(.i-carga, .i-b1, .i-b2, .i-b3, .i-brilla, .i-rec, .i-led1, .i-led2, .i-led3, .i-late, .i-ojo)[fill] { fill: var(--acento); }
.ico-servicio .i-brilla { opacity: .35; }
.ico-servicio .i-pines { stroke: var(--acento); }
.ico-servicio :is(.i-gira, .i-sube, .i-rebota, .i-barre, .i-carga, .i-b1, .i-b2, .i-b3, .i-late, .i-ojo, .i-cursor) { transform-box: fill-box; transform-origin: center; }
.ico-servicio :is(.i-carga, .i-b1, .i-b2, .i-b3) { transform-origin: bottom; }
.ico-servicio .i-carga { transform-origin: left; }
.ico-servicio .i-traza, .ico-servicio .i-check { stroke-dasharray: 60; stroke-dashoffset: 0; }
body:not(.anim-off) .tarjeta.servicio .i-gira { animation: i-gira 9s linear infinite; }
body:not(.anim-off) .tarjeta.servicio .i-late { animation: i-late 2.2s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-traza { animation: i-traza 2.6s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-barre { animation: i-barre 2.8s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-carga { animation: i-carga 3s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-sube { animation: i-sube 2.2s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-check { animation: i-traza 3.2s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-cursor { animation: i-parpadeo 1.1s steps(2, jump-none) infinite; }
body:not(.anim-off) .tarjeta.servicio .i-rebota { animation: i-rebota 2s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio :is(.i-b1, .i-b2, .i-b3) { animation: i-barras 2.6s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-b2 { animation-delay: .25s; }
body:not(.anim-off) .tarjeta.servicio .i-b3 { animation-delay: .5s; }
body:not(.anim-off) .tarjeta.servicio :is(.i-led1, .i-led2, .i-led3, .i-rec, .i-onda) { animation: i-parpadeo 1.6s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-led2 { animation-delay: .35s; }
body:not(.anim-off) .tarjeta.servicio .i-led3 { animation-delay: .7s; }
body:not(.anim-off) .tarjeta.servicio :is(.i-w1, .i-w2, .i-w3) { animation: i-onda 2s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-w2 { animation-delay: .25s; }
body:not(.anim-off) .tarjeta.servicio .i-w3 { animation-delay: .5s; }
body:not(.anim-off) .tarjeta.servicio .i-ojo { animation: i-ojo 4s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio :is(.i-t1, .i-t2, .i-t3, .i-t4, .i-l1, .i-l2, .i-l3) { animation: i-parpadeo 2.4s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio :is(.i-t2, .i-l2) { animation-delay: .3s; }
body:not(.anim-off) .tarjeta.servicio :is(.i-t3, .i-l3) { animation-delay: .6s; }
body:not(.anim-off) .tarjeta.servicio .i-t4 { animation-delay: .9s; }
body:not(.anim-off) .tarjeta.servicio .i-brilla { animation: i-brilla 3s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio .i-pines { animation: i-parpadeo 2s ease-in-out infinite; }
body:not(.anim-off) .tarjeta.servicio:hover .ico-servicio svg { animation: i-salta .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes i-gira { to { transform: rotate(360deg); } }
@keyframes i-late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } }
@keyframes i-traza { 0% { stroke-dashoffset: 60; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
@keyframes i-barre { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(14px); opacity: 1; } }
@keyframes i-carga { 0% { transform: scaleX(.15); } 70%, 100% { transform: scaleX(1); } }
@keyframes i-sube { 0%, 100% { transform: translateY(3px); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes i-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes i-rebota { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(3px); } }
@keyframes i-barras { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes i-onda { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes i-ojo { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes i-brilla { 0%, 100% { opacity: .2; } 50% { opacity: .6; } }
@keyframes i-salta { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1); } }
@media (max-width: 760px) { .ico-servicio { width: 58px; height: 58px; border-radius: 17px; } .ico-servicio svg { width: 38px; height: 38px; } }

/* esqueleto de maquetación (2026-10-29): la columna vertebral de Bootstrap, escrita a mano y sin dependencias.
   Puntos de corte: sm 576, md 768, lg 992, xl 1200, xxl 1400. Rejilla de 12 columnas (.fila + .col-N / .col-md-N / .col-lg-N),
   contenedor con ancho máximo por punto de corte, escala de espacios en múltiplos de .25rem y utilidades básicas.
   Las páginas actuales no se reescribieron: se usa en lo que se cree de aquí en adelante. */
:root { --esp-1: .25rem; --esp-2: .5rem; --esp-3: 1rem; --esp-4: 1.5rem; --esp-5: 3rem; --canal: var(--esp-4); }
.contenedor { width: 100%; margin-inline: auto; padding-inline: max(16px, var(--esp-3)); }
@media (min-width: 576px) { .contenedor { max-width: 540px; } }
@media (min-width: 768px) { .contenedor { max-width: 720px; } }
@media (min-width: 992px) { .contenedor { max-width: 960px; } }
@media (min-width: 1200px) { .contenedor { max-width: 1140px; } }
@media (min-width: 1400px) { .contenedor { max-width: 1320px; } }
.contenedor-fluido { width: 100%; padding-inline: max(16px, var(--esp-3)); }
.fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--canal); }
.fila > * { grid-column: span 12; min-width: 0; }
.fila.sin-canal { gap: 0; }
.fila.canal-chico { --canal: var(--esp-2); }
.fila.canal-grande { --canal: var(--esp-5); }
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
@media (min-width: 576px) {
.col-sm-1 { grid-column: span 1; }
.col-sm-2 { grid-column: span 2; }
.col-sm-3 { grid-column: span 3; }
.col-sm-4 { grid-column: span 4; }
.col-sm-5 { grid-column: span 5; }
.col-sm-6 { grid-column: span 6; }
.col-sm-7 { grid-column: span 7; }
.col-sm-8 { grid-column: span 8; }
.col-sm-9 { grid-column: span 9; }
.col-sm-10 { grid-column: span 10; }
.col-sm-11 { grid-column: span 11; }
.col-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
.col-md-1 { grid-column: span 1; }
.col-md-2 { grid-column: span 2; }
.col-md-3 { grid-column: span 3; }
.col-md-4 { grid-column: span 4; }
.col-md-5 { grid-column: span 5; }
.col-md-6 { grid-column: span 6; }
.col-md-7 { grid-column: span 7; }
.col-md-8 { grid-column: span 8; }
.col-md-9 { grid-column: span 9; }
.col-md-10 { grid-column: span 10; }
.col-md-11 { grid-column: span 11; }
.col-md-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
.col-lg-1 { grid-column: span 1; }
.col-lg-2 { grid-column: span 2; }
.col-lg-3 { grid-column: span 3; }
.col-lg-4 { grid-column: span 4; }
.col-lg-5 { grid-column: span 5; }
.col-lg-6 { grid-column: span 6; }
.col-lg-7 { grid-column: span 7; }
.col-lg-8 { grid-column: span 8; }
.col-lg-9 { grid-column: span 9; }
.col-lg-10 { grid-column: span 10; }
.col-lg-11 { grid-column: span 11; }
.col-lg-12 { grid-column: span 12; }
}
@media (min-width: 1200px) {
.col-xl-1 { grid-column: span 1; }
.col-xl-2 { grid-column: span 2; }
.col-xl-3 { grid-column: span 3; }
.col-xl-4 { grid-column: span 4; }
.col-xl-5 { grid-column: span 5; }
.col-xl-6 { grid-column: span 6; }
.col-xl-7 { grid-column: span 7; }
.col-xl-8 { grid-column: span 8; }
.col-xl-9 { grid-column: span 9; }
.col-xl-10 { grid-column: span 10; }
.col-xl-11 { grid-column: span 11; }
.col-xl-12 { grid-column: span 12; }
}
/* utilidades */
.d-flex { display: flex; } .d-grid { display: grid; } .d-none { display: none; }
.flex-wrap { flex-wrap: wrap; } .flex-columna { flex-direction: column; }
.justo-centro { justify-content: center; } .justo-entre { justify-content: space-between; }
.alinea-centro { align-items: center; } .alinea-fin { align-items: flex-end; }
.texto-centro { text-align: center; } .texto-fin { text-align: right; }
.gap-1 { gap: var(--esp-1); } .gap-2 { gap: var(--esp-2); } .gap-3 { gap: var(--esp-3); } .gap-4 { gap: var(--esp-4); } .gap-5 { gap: var(--esp-5); }
.mt-1 { margin-top: var(--esp-1); } .mt-2 { margin-top: var(--esp-2); } .mt-3 { margin-top: var(--esp-3); } .mt-4 { margin-top: var(--esp-4); } .mt-5 { margin-top: var(--esp-5); }
.mb-1 { margin-bottom: var(--esp-1); } .mb-2 { margin-bottom: var(--esp-2); } .mb-3 { margin-bottom: var(--esp-3); } .mb-4 { margin-bottom: var(--esp-4); } .mb-5 { margin-bottom: var(--esp-5); }
.p-1 { padding: var(--esp-1); } .p-2 { padding: var(--esp-2); } .p-3 { padding: var(--esp-3); } .p-4 { padding: var(--esp-4); } .p-5 { padding: var(--esp-5); }
.mx-auto { margin-inline: auto; } .w-100 { width: 100%; }
@media (min-width: 768px) { .d-md-none { display: none; } .d-md-flex { display: flex; } .d-md-block { display: block; } }
@media (max-width: 767.98px) { .d-sm-none { display: none; } }

/* ampliación posible del equipo (RAM y disco), solo cuando una fuente oficial lo confirma (2026-10-30) */
.ampliacion { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.4; background: rgba(95, 227, 224, .12); border: 1px solid rgba(95, 227, 224, .4); color: #fff; }
.ampliacion strong { color: var(--cian); }

/* ficha técnica de equipos y características (2026-10-30) */
.specs.tecnica th { white-space: nowrap; padding-right: 14px; vertical-align: top; }
.specs.tecnica td { overflow-wrap: break-word; }
.rasgos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rasgos li { font-size: 13px; line-height: 1.3; padding: 5px 10px; border-radius: 999px; background: rgba(95, 227, 224, .12); border: 1px solid rgba(95, 227, 224, .38); color: #fff; }

/* repuestos: modelos compatibles (2026-10-30) */
.compatibles { margin-top: 28px; }
.compatibles .nota { margin-top: 10px; }