/* =====================================================================
   XITBOL — Xtreme IT Bolivia
   Hoja de estilos principal
   ---------------------------------------------------------------------
   PALETA DE MARCA: extraída directamente del logotipo oficial.
   Para cambiar la identidad visual del sitio completo solo se editan
   las variables del bloque "MARCA" que está a continuación.
   ===================================================================== */

:root {
  /* ---------- MARCA (editable) ----------
     El azul y el turquesa van en su versión aclarada. La paleta oficial de
     la marca es #2563EB y #00B4B0 —así están en el logotipo y en los
     materiales impresos—, pero sobre el fondo azul noche del sitio dan
     3,3:1 y 3,9:1, por debajo del mínimo legible. En pantalla se usan
     estas dos; en papel, las oficiales. */
  --marca-navy:      #0A2540;   /* azul profundo institucional */
  --marca-azul:      #5B8DF6;   /* oficial #2563EB, aclarado para pantalla */
  --marca-teal:      #19CFC9;   /* oficial #00B4B0, aclarado para pantalla */
  --marca-gris:      #6B7280;   /* gris de apoyo */
  --marca-degradado: linear-gradient(135deg, var(--marca-azul) 0%, var(--marca-teal) 100%);

  /* ---------- Tipografía (editable) ---------- */
  --fuente-titulo: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:  "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-datos:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---------- Superficies ---------- */
  --fondo:        #061423;
  --fondo-alt:    #091B2D;
  --superficie:   #0C2136;
  --superficie-2: #102A42;
  --linea:        #1C3A57;
  --linea-fuerte: #2A5074;

  --texto:    #E8F0F8;
  --texto-2:  #9DB2C8;
  --texto-3:  #7C93AC;
  --sobre-marca: #FFFFFF;
  /* El teal de marca para texto. Sobre fondo oscuro el brillante cumple;
     el token se conserva porque separa el teal de los textos del teal de
     los iconos y los bordes, y eso vale aunque hoy coincidan. */
  --teal-tinta: #19CFC9;

  /* ---------- Color semántico ---------- */
  --ok:     #4FD3A0;  --ok-bg:   #0C3328;
  --aviso:  #F0C075;  --aviso-bg:#3A2C10;
  --alerta: #FF9C8F;  --alerta-bg:#3C1815;
  --info-bg:#122A4C;

  /* ---------- Medidas ---------- */
  --ancho: 1180px;
  --gutter: 20px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sombra-2: 0 6px 18px rgba(0, 0, 0, .45);
  --sombra-3: 0 18px 44px rgba(0, 0, 0, .55);
  --header-h: 86px;
  /* El sitio es oscuro y punto: así el navegador pinta de oscuro también
     los controles de formulario y las barras de scroll. */
  color-scheme: dark;
}

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip;
  /* El encabezado queda fijo arriba: los enlaces internos dejan ese espacio
     libre para que el título al que saltan no quede tapado por la barra. */
  scroll-padding-top: calc(var(--alto-fijo, var(--header-h)) + 14px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--marca-azul); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marca-teal); }
h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulo);
  color: var(--texto);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 4.9vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1.03rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .35rem; }
small { font-size: .85rem; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--marca-teal); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--marca-teal); color: #fff; }

.saltar-a-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marca-navy); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0;
}
.saltar-a-contenido:focus { left: 0; }

/* =====================================================================
   ESTRUCTURA
   ===================================================================== */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--superficie { background: var(--superficie); }
.seccion--navy { background: var(--marca-navy); color: #E8F0F8; }
.seccion--navy h2, .seccion--navy h3 { color: #fff; }
.seccion--navy p { color: #B9CBDD; }

.cabecera-seccion { max-width: 62ch; margin-bottom: 2.5rem; }
.cabecera-seccion.centrada { margin-inline: auto; text-align: center; }
.cabecera-seccion p { color: var(--texto-2); font-size: 1.06rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fuente-datos); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal-tinta);
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: ""; width: 14px; height: 16px; background: var(--marca-degradado);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* En las bandas siempre oscuras —portadas y franjas navy— el teal apagado
   se hundiría: ahí va el brillante de la marca. */
.seccion--navy .eyebrow,
.hero .eyebrow:not(.eyebrow--verde) { color: #7FE3E6; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.dos-columnas { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--fuente-titulo); font-weight: 600; font-size: .97rem;
  padding: .78rem 1.45rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  line-height: 1.2; text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primario { background: var(--marca-degradado); color: #fff; box-shadow: var(--sombra-2); }
.btn--primario:hover { color: #fff; box-shadow: var(--sombra-3); }
.btn--navy { background: var(--marca-navy); color: #fff; }
.btn--navy:hover { color: #fff; background: #123354; }
.btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--linea-fuerte); }
.btn--secundario:hover { color: var(--texto); border-color: var(--marca-teal); }
.btn--fantasma { background: transparent; color: var(--texto); border-color: currentColor; }
.btn--claro { background: #fff; color: var(--marca-navy); }
.btn--claro:hover { color: var(--marca-navy); }
.btn--wa { background: #25D366; color: #08321A; }
.btn--wa:hover { color: #08321A; background: #1EBE5B; }
.btn--sm { padding: .5rem 1rem; font-size: .87rem; }
.btn--bloque { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.acciones--centro { justify-content: center; }

/* =====================================================================
   ENCABEZADO / NAVEGACIÓN
   ===================================================================== */
/* El menú principal es SIEMPRE claro, también con el sitio en tema oscuro:
   funciona como una banda de marca fija arriba. Se logra redefiniendo acá
   las variables de superficie y texto, así todo lo que vive adentro del
   encabezado —enlaces, botones, panel lateral del celular— las hereda sin
   necesidad de reglas una por una. El botón de tema sigue funcionando y
   cambia el resto del sitio. */
/* La franja de contacto y el menú se pegan arriba como un solo bloque.
   Van envueltos juntos —en vez de dar a cada uno su propio `top`— porque la
   franja cambia de alto cuando su texto se parte en dos líneas, y un
   desplazamiento fijo dejaría un hueco o una superposición. */
.barra-fija { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; }

.encabezado {
  /* También el azul y el turquesa: el tema oscuro los aclara para que se
     lean sobre fondo negro, y aclarados sobre blanco pierden contraste
     (3,2:1 contra los 5,2:1 del azul de marca). */
  --marca-azul:   #2563EB;
  --marca-teal:   #00897F;
  --superficie:   #FFFFFF;
  --superficie-2: #F1F5F9;
  --linea:        #DCE4EC;
  --linea-fuerte: #C3D0DE;
  --texto:        #0A2540;
  --texto-2:      #51637A;
  --texto-3:      #7E8EA1;

  position: relative; z-index: 1;
  border-bottom: 1px solid #DCE4EC;
}
/* El desenfoque va en una capa aparte, no en el <header>.
   Motivo: backdrop-filter convierte al elemento en bloque contenedor de sus
   descendientes `position: fixed`, y eso dejaba el panel del menú de celular
   encerrado dentro del alto de la barra, mostrando solo el primer enlace. */
.encabezado::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, #FFFFFF 94%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
}
.encabezado__barra { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 58px; width: auto; display: block; }
/* El pie usa el mismo logotipo del menú —el de fondo claro, a todo color—
   sobre una placa blanca, porque el fondo del pie es azul profundo. */
.logo--pie {
  display: inline-flex; background: #fff; border-radius: 14px;
  padding: .7rem 1rem; margin-bottom: 1rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.logo--pie img { height: 54px; width: auto; display: block; }
/* Con un solo tema cada logotipo tiene una sola versión y va directo en el
   HTML: antes se cargaban las dos y se tapaba una con CSS, que descarga
   igual la imagen oculta. */

/* Sello de distribuidor autorizado */
.sello {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
  background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: 1.3rem 1.5rem; margin-bottom: 1.6rem;
}
/* El sello va sin fondo, apoyado en la tarjeta. Se le da algo más de ancho
   que antes porque el logotipo nuevo es más apaisado y su bajada pequeña
   necesita tamaño para leerse. */
.sello .imagen-marca img { width: 280px; max-width: 52vw; height: auto; }
@media (max-width: 620px) { .sello .imagen-marca img { width: 250px; max-width: 72vw; } }
.sello p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.sello h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
@media (max-width: 620px) { .sello { grid-template-columns: 1fr; gap: 1rem; text-align: left; } }

.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav__lista a {
  display: block; padding: .55rem .78rem; border-radius: var(--r-sm);
  color: var(--texto); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav__lista a:hover { background: var(--superficie-2); color: var(--marca-azul); }
.nav__lista a[aria-current="page"] { color: var(--marca-azul); font-weight: 700; }

/* Trashcan XL se distingue con un punto verde, no con el texto en verde:
   en este menú el color ya significa «estás acá» y pintar un ítem entero
   competiría con esa señal. El acento verde aparece solo al pasar el mouse
   y cuando la campaña es la página actual. */
.nav__lista a.nav__campana { display: inline-flex; align-items: center; gap: .42rem; }
.nav__lista a.nav__campana::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #15754F; flex-shrink: 0;
}
.nav__lista a.nav__campana:hover { color: #15754F; background: #EAF5EF; }
.nav__lista a.nav__campana[aria-current="page"] { color: #15754F; }
.encabezado__acciones { display: flex; align-items: center; gap: .5rem; }

/* ---- Encabezado en tablet y celular ----
   Va despues de las reglas base a proposito: si se escribe antes, la cascada
   lo anula y el logo se queda grande, pegado a los botones. */
@media (max-width: 880px) {
  :root { --header-h: 78px; }
  .encabezado__barra { gap: .75rem; }
  .logo img { height: 50px; }
}
@media (max-width: 620px) {
  :root { --header-h: 70px; }
  .encabezado__barra { gap: .6rem; }
  .logo img { height: 44px; }
  .encabezado__acciones { gap: .35rem; margin-left: auto; }
  .icono-btn { width: 38px; height: 38px; }
}
@media (max-width: 400px) {
  :root { --header-h: 64px; }
  .logo img { height: 38px; }
  .encabezado__acciones { gap: .25rem; }
  .icono-btn { width: 36px; height: 36px; }
}
.icono-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); cursor: pointer; position: relative;
}
.icono-btn:hover { border-color: var(--marca-teal); color: var(--marca-teal); }
.icono-btn svg { width: 20px; height: 20px; }
.contador-carrito {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--marca-teal); color: #04252B;
  font-family: var(--fuente-datos); font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.contador-carrito[data-vacio="si"] { display: none; }
.menu-btn { display: none; }

/* Franja intermedia: portátiles y tablets en horizontal.
   Antes de esconder los enlaces tras la hamburguesa se los aprieta un poco,
   porque en Windows con escalado al 125 % o 150 % un monitor de 1366 px se
   comporta como uno de 1092 o 910 px de ancho y el menú se replegaba en una
   PC de escritorio. Con esto los accesos siguen a la vista hasta 881 px. */
@media (max-width: 1140px) and (min-width: 881px) {
  .encabezado__barra { gap: .55rem; }
  .logo img { height: 48px; }
  :root { --header-h: 76px; }
  .nav__lista { gap: 0; }
  .nav__lista a { padding: .5rem .42rem; font-size: .86rem; }
  .encabezado__acciones { gap: .3rem; }
  .icono-btn { width: 38px; height: 38px; }
}

@media (max-width: 880px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    background: var(--superficie); border-left: 1px solid var(--linea);
    padding: calc(var(--alto-fijo, var(--header-h)) + 1.4rem) 1.3rem 2rem;
    transform: translateX(102%); transition: transform .28s ease; box-shadow: var(--sombra-3);
    overflow-y: auto;
  }
  .nav[data-abierto="si"] { transform: translateX(0); }
  .nav__lista { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__lista a { padding: .85rem .7rem; font-size: 1.05rem; border-bottom: 1px solid var(--linea); border-radius: 0; }
  /* flex, no inline-flex: en el panel el enlace debe seguir ocupando la fila entera */
  .nav__lista a.nav__campana { display: flex; }
  .velo {
    position: fixed; inset: 0; background: rgba(4, 16, 28, .5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90;
  }
  .velo[data-visible="si"] { opacity: 1; pointer-events: auto; }
}

/* =====================================================================
   BANDA SUPERIOR
   ===================================================================== */
.banda-superior {
  background: var(--marca-navy); color: #C6D6E6; font-size: .85rem;
  padding-block: .45rem;
}
.banda-superior__fila { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; justify-content: space-between; }
.banda-superior a { color: #C6D6E6; text-decoration: none; }
.banda-superior a:hover { color: var(--marca-teal); }
.banda-superior__contacto { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.banda-superior__item { display: inline-flex; align-items: center; gap: .4rem; }
.banda-superior svg { width: 15px; height: 15px; flex-shrink: 0; }
/* En celular la franja no desaparece: se reduce a una sola línea con el
   número de ventas, centrada y tocable. Es el único teléfono a la vista
   en las páginas que no son la portada, así que vale los 30 px que ocupa
   en la barra fija. El lema, el soporte y el correo quedan afuera: el
   soporte está en Contacto y el correo en el pie. */
@media (max-width: 720px) {
  .banda-superior { padding-block: .3rem; font-size: .82rem; }
  .banda-superior__fila { justify-content: center; }
  .banda-superior__lema,
  .banda-superior__item--secundario { display: none; }
  .banda-superior__item--ventas {
    min-height: 30px; padding-inline: .6rem; font-weight: 600; color: #DCE9F5;
  }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; overflow: hidden; background: var(--marca-navy); color: #E8F0F8; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 70% 60% at 78% 18%, rgba(2, 169, 173, .30), transparent 62%),
    radial-gradient(ellipse 60% 55% at 18% 88%, rgba(37, 98, 233, .30), transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
}
.hero > * { position: relative; z-index: 1; }
/* En PC el video acompaña al texto desde arriba, no centrado: así queda
   a la misma altura que el título y no obliga a bajar la vista. */
.hero__interior { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; padding-block: clamp(3rem, 8vw, 5.5rem); }
@media (max-width: 900px) { .hero__interior { grid-template-columns: 1fr; gap: 1.8rem; padding-block: clamp(2.2rem, 6vw, 3.4rem); } }
.hero h1 { color: #fff; }
.hero h1 .destaque { background: linear-gradient(120deg, #7FE3E6, #7FA8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__bajada { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #BDD0E2; max-width: 56ch; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: rgba(255, 255, 255, .1); color: #DCE9F5; border: 1px solid rgba(255, 255, 255, .18);
}
.hero__nota { margin-top: 1.4rem; font-size: .88rem; color: #93AFC8; }

.hero--compacto .hero__interior { grid-template-columns: 1fr; padding-block: clamp(2.4rem, 5vw, 3.6rem); max-width: 760px; }
.hero--compacto h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }

/* ---------- Botón de música ---------- */
/* ---------- Botón de música, dentro del menú ----------
   Es un icono-btn más, al lado del botón de tema. Las cuatro barritas hacen
   de indicador: quietas cuando está en silencio, animadas mientras suena.  */
/* Botón de música, dentro del menú, al lado del cambio de tema.
   En silencio las barras quedan quietas pero con alturas distintas, para
   que se lea como un ecualizador y no como tres puntos suspensivos. */
.audio-btn { position: relative; }
.audio-btn__barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; }
.audio-btn__barras i {
  width: 3px; border-radius: 1px; display: block;
  background: currentColor; opacity: .6; transition: opacity .2s ease;
}
.audio-btn__barras i:nth-child(1) { height: 7px; }
.audio-btn__barras i:nth-child(2) { height: 13px; }
.audio-btn__barras i:nth-child(3) { height: 5px; }
.audio-btn__barras i:nth-child(4) { height: 10px; }
.audio-btn[data-sonando="si"] { color: var(--marca-teal); border-color: var(--marca-teal); }
.audio-btn[data-sonando="si"] .audio-btn__barras i { opacity: 1; animation: vu .9s ease-in-out infinite; }
.audio-btn[data-sonando="si"] .audio-btn__barras i:nth-child(2) { animation-delay: .15s; }
.audio-btn[data-sonando="si"] .audio-btn__barras i:nth-child(3) { animation-delay: .3s; }
.audio-btn[data-sonando="si"] .audio-btn__barras i:nth-child(4) { animation-delay: .45s; }
@keyframes vu { 0%, 100% { height: 4px; } 50% { height: 15px; } }
@media (prefers-reduced-motion: reduce) { .audio-btn__barras i { animation: none !important; } }

/* Figura hexagonal del hero */
.hex-figura { position: relative; display: grid; place-items: center; min-height: 320px; }
.hex-figura svg { width: 100%; max-width: 460px; height: auto; }

/* =====================================================================
   TARJETAS
   ===================================================================== */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: 1.6rem; display: flex; flex-direction: column; gap: .55rem;
}
.tarjeta--elevada { box-shadow: var(--sombra-1); }
.tarjeta--enlace { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; text-decoration: none; color: inherit; }
.tarjeta--enlace:hover { border-color: var(--marca-teal); box-shadow: var(--sombra-2); transform: translateY(-3px); color: inherit; }
.tarjeta p { color: var(--texto-2); margin-bottom: 0; font-size: .96rem; }
.tarjeta h3 { margin-bottom: .1rem; }

.icono-hex {
  width: 52px; height: 58px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--marca-degradado);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: .7rem;
}
.icono-hex svg { width: 25px; height: 25px; color: #fff; stroke: #fff; }

/* ---- Tarjeta con foto ----
   La foto ocupa el ancho completo arriba, sangrando el padding de la
   tarjeta, y el hexágono del icono se apoya sobre su borde inferior: así
   la foto no es un adorno suelto, queda cosida al resto.
   Lleva un velo abajo porque las fotos de banco vienen con zonas claras
   impredecibles y el hexágono tiene que apoyarse siempre sobre algo
   oscuro. */
.tarjeta--con-foto { padding-top: 0; overflow: hidden; }
.tarjeta__foto {
  position: relative; margin: 0 -1.6rem .9rem; aspect-ratio: 3 / 2;
  background: var(--marca-navy); overflow: hidden;
}
.tarjeta__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tarjeta__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,20,35,0) 45%, rgba(6,20,35,.78) 100%);
}
/* El hexágono se monta sobre el borde de la foto */
.tarjeta--con-foto .icono-hex { margin-top: -2.2rem; position: relative; z-index: 1; }
@media (max-width: 620px) {
  .tarjeta__foto { margin-inline: -1.6rem; }
}
.icono-hex--claro { background: rgba(255,255,255,.14); }

.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; color: var(--texto-2); font-size: .96rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 11px; height: 12px;
  background: var(--marca-teal); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* =====================================================================
   CIFRAS / TRANSPARENCIA
   ===================================================================== */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }
.cifra { background: var(--superficie); padding: 1.5rem 1.3rem; }
.cifra__valor { font-family: var(--fuente-titulo); font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 700; color: var(--marca-azul); font-variant-numeric: tabular-nums; line-height: 1; }
.cifra__etiqueta { font-size: .88rem; color: var(--texto-2); margin-top: .45rem; }

/* =====================================================================
   LÍNEA DE TIEMPO (historia)
   ===================================================================== */
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--marca-azul), var(--marca-teal)); }
.hito { position: relative; padding: 0 0 2rem 3.1rem; }
.hito::before {
  content: ""; position: absolute; left: 4px; top: .32rem; width: 20px; height: 22px;
  background: var(--marca-degradado); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 0; box-shadow: 0 0 0 5px var(--fondo);
}
.hito__anio { font-family: var(--fuente-datos); font-size: .82rem; font-weight: 600; color: var(--teal-tinta); letter-spacing: .08em; }

/* El hito de 2026 es una meta, no un logro: se distingue del resto */
.hito--meta .hito__anio { color: var(--texto-2); }
.hito--meta h3 { color: var(--texto-2); }
.hito--meta::before { opacity: .45; }

.hito h3 { margin: .15rem 0 .35rem; font-size: 1.12rem; }
.hito p { color: var(--texto-2); margin-bottom: 0; font-size: .96rem; }
.seccion--alt .hito::before { box-shadow: 0 0 0 5px var(--fondo-alt); }

/* =====================================================================
   PROYECTOS
   ===================================================================== */
.proyecto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.proyecto + .proyecto { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--linea); }
.proyecto--invertido .proyecto__visual { order: -1; }
@media (max-width: 860px) { .proyecto { grid-template-columns: 1fr; } .proyecto--invertido .proyecto__visual { order: 0; } }
.proyecto__visual { background: var(--marca-navy); border-radius: var(--r-lg); padding: 1.3rem; overflow: hidden; }
.proyecto__visual svg { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.estado {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700;
  padding: .28rem .7rem; border-radius: 999px; letter-spacing: .03em;
}
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado--activo { background: var(--ok-bg); color: var(--ok); }
.estado--piloto { background: var(--info-bg); color: var(--marca-azul); }
.estado--desarrollo { background: var(--aviso-bg); color: var(--aviso); }
/* La etapa más temprana: todavía no hay nada que probar, solo diseño o un
   prototipo. Va en gris, sin color de estado, justamente para que no se
   lea como algo más avanzado de lo que es. */
.estado--inicial { background: var(--superficie-2); color: var(--texto-2); }

/* Tarjetas de la franja de proyectos: van sobre fondo navy, así que su
   superficie es un velo claro en vez del color de tarjeta normal.
   Son seis, así que la rejilla se fija en tres columnas: con auto-fit
   entraban cuatro y la segunda fila quedaba coja. */
@media (min-width: 1000px) {
  .tarjetas-proyecto { grid-template-columns: repeat(3, 1fr); }
}
.seccion--navy .tarjetas-proyecto .tarjeta {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  display: flex; flex-direction: column; gap: .7rem;
}
.seccion--navy .tarjetas-proyecto .tarjeta h3 { margin: 0; font-size: 1.08rem; }
.seccion--navy .tarjetas-proyecto .tarjeta p { margin: 0; color: #B9CBDD; font-size: .95rem; }
/* El estado se alinea abajo: así queda a la misma altura en toda la fila
   aunque los textos tengan largos distintos. */
.seccion--navy .tarjetas-proyecto .estado { margin-top: auto; align-self: flex-start; }
.seccion--navy .tarjetas-proyecto .estado--inicial {
  background: rgba(255, 255, 255, .12); color: #CBD9E8;
}
.nota-proyectos {
  margin: 1.8rem 0 0; max-width: 72ch; color: #B9CBDD; font-size: .98rem;
}
.nota-proyectos strong { color: #fff; }

/* =====================================================================
   TIENDA — filtros, catálogo, producto
   ===================================================================== */
.tienda { display: grid; grid-template-columns: 268px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .tienda { grid-template-columns: 1fr; } }
.filtros {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md);
  padding: 1.25rem; position: sticky; top: calc(var(--header-h) + 16px);
}
@media (max-width: 900px) { .filtros { position: static; } }
.filtros h3 { font-size: .95rem; margin-bottom: .8rem; }
.filtros__grupo { padding-block: .9rem; border-top: 1px solid var(--linea); }
.filtros__grupo:first-of-type { border-top: 0; padding-top: 0; }
.filtros__titulo { font-family: var(--fuente-datos); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-3); margin-bottom: .6rem; }
.opcion { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .93rem; cursor: pointer; color: var(--texto-2); }
.opcion input { accent-color: var(--marca-azul); width: 17px; height: 17px; }
.opcion:hover { color: var(--texto); }
.opcion__conteo { margin-left: auto; font-family: var(--fuente-datos); font-size: .78rem; color: var(--texto-3); }
.filtros__lista { max-height: 260px; overflow-y: auto; padding-right: .3rem; }
.filtros__lista::-webkit-scrollbar { width: 6px; }
.filtros__lista::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 3px; }
#cargar-mas { display: flex; justify-content: center; margin-top: 2rem; }
#cargar-mas[hidden] { display: none; }
.sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.sede { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 1.5rem; }
.sede h3 { margin-bottom: .2rem; }
.sede__ciudad { font-family: var(--fuente-datos); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-tinta); margin-bottom: .6rem; }

/* Etiqueta «Desde 2012 / 2024» junto al nombre de cada sede */
.sede__marca {
  display: inline-block; margin-left: .5rem; vertical-align: 2px;
  padding: .12rem .55rem; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--linea);
  font-family: var(--fuente-texto); font-size: .72rem; font-weight: 600;
  color: var(--texto-2); letter-spacing: .02em;
}


.barra-catalogo { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.buscador { position: relative; flex: 1 1 240px; }
.buscador svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); }
.buscador input[type="search"] { padding-left: 2.6rem; }
.resultado-conteo { font-size: .9rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }

.rejilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.3rem; }
.producto {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md);
  display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.producto:hover { box-shadow: var(--sombra-2); border-color: var(--linea-fuerte); transform: translateY(-2px); }
/* La ficha ya no lleva vista previa: las ilustraciones eran genéricas por
   categoría, no fotos del producto. La etiqueta de oferta, que vivía sobre
   esa imagen, ahora acompaña a la marca. */
.producto__etiqueta {
  /* Hereda la línea de marca, que va en la tipografía de datos; esa familia
     no tiene 700, así que se declara la de títulos. */
  display: inline-block; margin-left: .5rem; font-family: var(--fuente-titulo);
  font-size: .68rem; font-weight: 700;
  padding: .1rem .5rem; border-radius: 999px; background: var(--marca-navy); color: #fff;
  letter-spacing: .02em; text-transform: none; vertical-align: 1px;
}
.producto__etiqueta--oferta { background: var(--marca-teal); color: #04252B; }
.producto__cuerpo { padding: 1.05rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.producto__marca { font-family: var(--fuente-datos); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
/* El monto de una línea sin precio publicado */
.a-cotizar { font-size: .86rem; font-weight: 600; color: var(--teal-tinta); white-space: nowrap; }
.producto__nombre { font-family: var(--fuente-titulo); font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 0; }
.producto__nombre {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.producto__detalle {
  font-size: .86rem; color: var(--texto-2); margin: 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.producto__meta { font-family: var(--fuente-datos); font-size: .74rem; color: var(--texto-3); line-height: 1.5; }
.precio--consultar { font-size: 1.05rem; color: var(--marca-azul); }
.producto__pie { margin-top: auto; padding-top: .7rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
/* Aviso de los dos caminos, arriba del catálogo */
.dos-caminos {
  background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--marca-teal);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; font-size: .93rem; line-height: 1.6;
}
.dos-caminos p { margin: 0 0 .6rem; }
.dos-caminos ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .6rem; }
.dos-caminos li { padding-left: 0; }
.dos-caminos__marca {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px; color: #fff;
  font-size: .8rem; font-weight: 600; margin-right: .25rem; vertical-align: 1px;
}
.dos-caminos__marca--pago { background: var(--marca-azul); }
.dos-caminos__marca--wa { background: #17703b; }

/* Los dos caminos de compra: pagar en línea o cotizar por WhatsApp */
.producto__acciones { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.btn--wa { background: #17703b; color: #fff; display: inline-flex; align-items: center; gap: .35rem; }
.btn--wa:hover { background: #115a2f; color: #fff; }
.btn--wa svg { width: 1em; height: 1em; flex: none; }
@media (max-width: 400px) { .producto__acciones { width: 100%; } .producto__acciones .btn { flex: 1; justify-content: center; } }
.precio { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.24rem; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.1; }
/* .68rem daba 10,9px: demasiado chico para leer en un celular */
.precio small { font-size: .78rem; font-weight: 600; color: var(--texto-3); display: block; letter-spacing: .03em; }
.precio--antes { font-size: .85rem; font-weight: 500; color: var(--texto-3); text-decoration: line-through; }
.stock { font-size: .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock--disponible { color: var(--ok); }
.stock--bajo { color: var(--aviso); }
.stock--pedido { color: var(--texto-3); }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--texto-2); border: 1px dashed var(--linea-fuerte); border-radius: var(--r-md); }

/* Tabla de precios */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--superficie); }
table.precios { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
table.precios th, table.precios td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--linea); }
table.precios th { background: var(--superficie-2); font-family: var(--fuente-titulo); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); position: sticky; top: 0; }
table.precios td.num { text-align: right; font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
table.precios tbody tr:hover { background: var(--superficie-2); }
table.precios tr:last-child td { border-bottom: 0; }

/* Planes de software */
.plan { position: relative; }
.plan--destacado { border-color: var(--marca-teal); box-shadow: var(--sombra-2); }
.plan--destacado::after {
  content: "Más contratado"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--marca-teal); color: #04252B; font-size: .72rem; font-weight: 700;
  padding: .22rem .75rem; border-radius: 999px; white-space: nowrap;
}
.plan__precio { font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 700; line-height: 1; margin: .3rem 0 .1rem; font-variant-numeric: tabular-nums; }
.plan__periodo { font-size: .85rem; color: var(--texto-3); }

/* =====================================================================
   CARRITO (panel lateral)
   ===================================================================== */
.panel-carrito {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); z-index: 120;
  background: var(--superficie); border-left: 1px solid var(--linea); box-shadow: var(--sombra-3);
  display: flex; flex-direction: column; transform: translateX(102%); transition: transform .3s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.panel-carrito[data-abierto="si"] { transform: translateX(0); }
.panel-carrito__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--linea); }
.panel-carrito__cabecera h2 { margin: 0; font-size: 1.15rem; }
.panel-carrito__items { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; }
.panel-carrito__pie { border-top: 1px solid var(--linea); padding: 1.1rem 1.2rem; background: var(--superficie-2); }
.item-carrito { display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--linea); align-items: start; }
.item-carrito__miniatura { width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--superficie-2); border: 1px solid var(--linea); display: grid; place-items: center; }
.item-carrito__miniatura svg { width: 60%; height: auto; }
.item-carrito__nombre { font-weight: 600; font-size: .92rem; line-height: 1.35; }
.item-carrito__sku { font-family: var(--fuente-datos); font-size: .74rem; color: var(--texto-3); }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; margin-top: .4rem; }
.cantidad button { width: 28px; height: 28px; border: 0; background: var(--superficie-2); color: var(--texto); cursor: pointer; font-size: 1rem; line-height: 1; }
.cantidad button:hover { background: var(--marca-azul); color: #fff; }
.cantidad span { min-width: 32px; text-align: center; font-family: var(--fuente-datos); font-size: .88rem; }
.item-carrito__precio { font-family: var(--fuente-datos); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.quitar { background: none; border: 0; color: var(--texto-3); cursor: pointer; font-size: .78rem; padding: .2rem 0; text-decoration: underline; }
.quitar:hover { color: var(--alerta); }
.resumen-fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; padding: .28rem 0; color: var(--texto-2); }
.resumen-fila--total { font-family: var(--fuente-titulo); font-size: 1.22rem; font-weight: 700; color: var(--texto); border-top: 1px solid var(--linea); margin-top: .5rem; padding-top: .7rem; }
.resumen-fila--total small { font-size: .74rem; font-weight: 500; color: var(--texto-2); }
.nota-precios { margin: .9rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--texto-2); border-top: 1px dashed var(--linea); padding-top: .7rem; }
.resumen-fila span:last-child { font-variant-numeric: tabular-nums; }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.campo { margin-bottom: 1.05rem; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; color: var(--texto); }
.campo .ayuda { font-size: .81rem; color: var(--texto-3); margin-top: .3rem; }
.requerido { color: var(--alerta); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; padding: .72rem .9rem; font-family: inherit; font-size: .97rem;
  color: var(--texto); background: var(--superficie); border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca-azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-azul) 20%, transparent); }
textarea { min-height: 130px; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--alerta); }
.error-campo { color: var(--alerta); font-size: .82rem; margin-top: .3rem; display: none; }
.error-campo[data-visible="si"] { display: block; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .fila-campos { grid-template-columns: 1fr; } }
.consentimiento { display: flex; gap: .7rem; align-items: flex-start; font-size: .89rem; color: var(--texto-2); margin-bottom: 1.1rem; }
.consentimiento input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--marca-azul); flex-shrink: 0; }
.aviso { padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .92rem; border: 1px solid transparent; }
.aviso--ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.aviso--info { background: var(--info-bg); color: var(--texto); border-color: color-mix(in srgb, var(--marca-azul) 30%, transparent); }
.aviso--atencion { background: var(--aviso-bg); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 35%, transparent); }
.aviso[hidden] { display: none !important; }

/* Pasos del checkout */
.pasos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.paso { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--texto-3); }
.paso__num {
  width: 28px; height: 30px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--linea); color: var(--texto-2); font-family: var(--fuente-datos); font-size: .8rem; font-weight: 700;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.paso[aria-current="step"] { color: var(--texto); font-weight: 600; }
.paso[aria-current="step"] .paso__num { background: var(--marca-degradado); color: #fff; }

.metodo-pago { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border: 1.5px solid var(--linea); border-radius: var(--r-sm); cursor: pointer; margin-bottom: .7rem; background: var(--superficie); }
.metodo-pago:hover { border-color: var(--linea-fuerte); }
.metodo-pago input { margin-top: .2rem; accent-color: var(--marca-azul); width: 18px; height: 18px; flex-shrink: 0; }
.metodo-pago:has(input:checked) { border-color: var(--marca-azul); background: var(--info-bg); }
.metodo-pago strong { display: block; font-size: .96rem; }
.metodo-pago span { font-size: .85rem; color: var(--texto-2); }

/* =====================================================================
   ACORDEÓN
   ===================================================================== */
.acordeon { border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--superficie); overflow: hidden; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon details:last-child { border-bottom: 0; }
.acordeon summary {
  cursor: pointer; padding: 1.05rem 1.2rem; font-family: var(--fuente-titulo); font-weight: 600;
  font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font-size: 1.4rem; color: var(--marca-teal); font-weight: 400; line-height: 1; }
.acordeon details[open] summary::after { content: "−"; }
.acordeon summary:hover { background: var(--superficie-2); }
.acordeon__cuerpo { padding: 0 1.2rem 1.2rem; color: var(--texto-2); font-size: .96rem; }
.acordeon__cuerpo > :last-child { margin-bottom: 0; }

/* =====================================================================
   DOCUMENTO LEGAL
   ===================================================================== */
.legal { display: grid; grid-template-columns: 250px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 1.5rem; } }
.indice { position: sticky; top: calc(var(--header-h) + 16px); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 1.1rem; font-size: .91rem; }
@media (max-width: 900px) { .indice { position: static; } }
.indice ol { list-style: none; counter-reset: i; padding: 0; margin: 0; }
.indice li { counter-increment: i; margin-bottom: .35rem; }
.indice a { text-decoration: none; color: var(--texto-2); display: flex; gap: .5rem; }
.indice a::before { content: counter(i) "."; font-family: var(--fuente-datos); color: var(--teal-tinta); font-size: .82rem; }
.indice a:hover { color: var(--marca-azul); }
/* Los documentos legales se leen de corrido: su superficie va limpia, sin
   la trama hexagonal detrás del texto. Del mismo color del fondo, así no
   parece una tarjeta: simplemente tapa la textura donde estorba. */
.prosa {
  max-width: 72ch; position: relative;
  background: var(--fondo); border-radius: 12px;
  padding: 1.4rem 1.6rem; margin: -1.4rem -1.6rem;
}
@media (max-width: 620px) { .prosa { padding: 1rem; margin: -1rem; } }
.prosa h2 { font-size: 1.32rem; margin-top: 2.4rem; scroll-margin-top: calc(var(--alto-fijo, var(--header-h)) + 20px); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: 1.06rem; margin-top: 1.6rem; }
.prosa p, .prosa li { color: var(--texto-2); }
.prosa strong { color: var(--texto); }
.caja-dato { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--marca-teal); border-radius: var(--r-sm); padding: 1rem 1.2rem; margin: 1.3rem 0; font-size: .93rem; }
.caja-dato p:last-child { margin-bottom: 0; }

/* =====================================================================
   WHATSAPP: botón flotante + chatbot
   ===================================================================== */
.wa-lanzador {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 130;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: #25D366; color: #06331A; display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(9, 87, 44, .4);
}
.wa-lanzador svg { width: 31px; height: 31px; }
/* El halo crece con transform y se apaga con opacity, no con box-shadow:
   la sombra obliga al navegador a repintar en cada cuadro y este botón
   late sin parar en todas las páginas. */
.wa-lanzador::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(37, 211, 102, .55); z-index: -1;
  animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-lanzador::after { animation: none; opacity: 0; } }
.wa-lanzador__punto { position: absolute; top: 0; right: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--alerta); border: 2px solid var(--fondo); }

.chat {
  position: fixed; right: 18px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); z-index: 130;
  width: min(370px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 140px));
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--sombra-3); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.chat[data-abierto="si"] { opacity: 1; transform: none; pointer-events: auto; }
.chat__cabecera { background: var(--marca-navy); color: #fff; padding: .95rem 1rem; display: flex; align-items: center; gap: .7rem; }
.chat__avatar { width: 38px; height: 42px; display: grid; place-items: center; background: var(--marca-degradado); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); flex-shrink: 0; font-family: var(--fuente-titulo); font-weight: 700; font-size: .84rem; }
.chat__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: .97rem; line-height: 1.2; }
.chat__estado { font-size: .78rem; color: #9FE8B8; display: flex; align-items: center; gap: .35rem; }
.chat__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #25D366; }
.chat__cerrar { margin-left: auto; background: none; border: 0; color: #B9CBDD; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0 .2rem; }
.chat__cerrar:hover { color: #fff; }
.chat__cuerpo { flex: 1; overflow-y: auto; padding: 1rem; background: var(--superficie-2); display: flex; flex-direction: column; gap: .7rem; }
.burbuja { max-width: 86%; padding: .62rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.burbuja--bot { background: var(--superficie); border: 1px solid var(--linea); border-bottom-left-radius: 4px; align-self: flex-start; }
.burbuja--yo { background: var(--marca-azul); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat__opciones { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem 1rem; border-top: 1px solid var(--linea); background: var(--superficie); }
.chat__opcion {
  background: var(--superficie); border: 1.5px solid var(--linea-fuerte); color: var(--texto);
  padding: .42rem .8rem; border-radius: 999px; font-size: .85rem; font-family: inherit; cursor: pointer;
}
.chat__opcion:hover { border-color: var(--marca-teal); color: var(--marca-teal); }
.chat__pie { padding: .7rem 1rem 1rem; background: var(--superficie); border-top: 1px solid var(--linea); }
.chat__nota { font-size: .76rem; color: var(--texto-3); text-align: center; margin-top: .5rem; }

/* =====================================================================
   PIE DE PÁGINA
   ===================================================================== */
.pie { background: var(--marca-navy); color: #B9CBDD; padding-block: 3.2rem 1.5rem; margin-top: auto; }
.pie a { color: #B9CBDD; text-decoration: none; }
.pie a:hover { color: var(--marca-teal); }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 2rem; }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie h4 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--fuente-datos); font-weight: 600; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .5rem; font-size: .93rem; }
.pie__descripcion { font-size: .93rem; max-width: 34ch; }
.redes { display: flex; gap: .55rem; margin-top: 1.1rem; flex-wrap: wrap; }
.red {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #DCE9F5;
}
.red:hover { background: var(--marca-teal); color: #04252B; border-color: transparent; }
.red svg { width: 19px; height: 19px; }
/* El padding inferior deja libre la esquina donde flotan el botón de
   música y el de WhatsApp, para que no tapen el texto legal. */
.pie__legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-top: 1.3rem; padding-bottom: 3.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .85rem; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.contacto-linea { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; font-size: .93rem; }
.contacto-linea svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .25rem; color: var(--marca-teal); }

/* Enlace «Cómo llegar» bajo cada dirección. Va después de .contacto-linea
   a propósito: comparte especificidad con su regla de iconos y necesita
   ganar por orden para que la flecha no herede el tamaño del pin. */
.enlace-mapa {
  /* El turquesa de marca sobre blanco da 2,57:1 y no alcanza para texto;
     en tema claro se usa una versión más oscura (5,36:1) y en oscuro vuelve
     el turquesa, que ahí sí contrasta. */
  --mapa-tinta: var(--marca-teal);
  /* flex (no inline-flex) para que arranque en su propia línea debajo de la
     dirección en lugar de quedar pegado a la última palabra */
  display: flex; width: fit-content; align-items: center; gap: .35rem;
  margin-top: .4rem; padding: .34rem .8rem .34rem .65rem; min-height: 36px;
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  background: var(--superficie); color: var(--mapa-tinta);
  font-family: var(--fuente-titulo); font-size: .82rem; font-weight: 600;
  line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.enlace-mapa svg { width: 14px; height: 14px; margin-top: 0; flex-shrink: 0; }
.enlace-mapa:hover, .enlace-mapa:focus-visible {
  border-color: var(--mapa-tinta); background: var(--superficie-2); color: var(--mapa-tinta);
}
@media (max-width: 620px) {
  .enlace-mapa { min-height: 42px; padding: .5rem 1rem .5rem .85rem; font-size: .86rem; }
  .enlace-mapa svg { width: 15px; height: 15px; }
}

/* =====================================================================
   MODO BORRADOR — resalta el contenido de ejemplo que falta reemplazar.
   Se desactiva quitando data-modo="borrador" de la etiqueta <html>.
   ===================================================================== */
[data-modo="borrador"] .ej {
  background: color-mix(in srgb, var(--marca-teal) 16%, transparent);
  box-shadow: inset 0 -2px 0 var(--marca-teal);
  border-radius: 2px;
}
.banner-borrador {
  background: repeating-linear-gradient(45deg, #0A2540, #0A2540 12px, #123354 12px, #123354 24px);
  color: #fff; font-size: .85rem; padding: .6rem 0;
}
.banner-borrador__fila { display: flex; gap: 1rem; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; }
.banner-borrador button { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; cursor: pointer; font-family: inherit; }
html:not([data-modo="borrador"]) .banner-borrador { display: none; }

/* ---------- Cita del director ---------- */
.cita {
  margin: 0; max-width: 78ch; padding: 2rem 2.2rem;
  background: var(--superficie-2); border: 1px solid var(--linea);
  border-left: 4px solid var(--marca-teal); border-radius: var(--r-md);
}
.cita p { color: var(--texto-2); font-size: 1.02rem; }
.cita p:first-child { font-size: 1.12rem; color: var(--texto); }
.cita footer { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .94rem; }
.cita footer strong { display: block; color: var(--texto); }
.cita footer span { color: var(--texto-3); }

/* =====================================================================
   MARCAS, CLIENTES Y CANALES
   ===================================================================== */
.marcas { display: flex; flex-wrap: wrap; gap: .55rem; }
/* Dentro de la tienda, las marcas separan el sello de los destacados */
.marcas--tienda { margin-bottom: 2.2rem; }
.chip-marca {
  font-family: var(--fuente-titulo); font-weight: 600; font-size: .92rem;
  padding: .42rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--linea); background: var(--superficie-2); color: var(--texto-2);
  letter-spacing: .01em;
}
.chip-marca:hover { border-color: var(--marca-teal); color: var(--texto); }

/* =====================================================================
   CARRUSEL DE CLIENTES
   ---------------------------------------------------------------------
   Una sola tira que se desplaza sin fin, en lugar de una rejilla de cinco
   filas. El ancho de una copia y la duración los calcula app.js desde el
   contenido, para que la velocidad sea igual en cualquier pantalla.

   Los bordes se desvanecen con una máscara: sin eso los nombres aparecen
   y desaparecen de golpe contra el borde de la sección.
   ===================================================================== */
.carrusel-clientes {
  position: relative; overflow: hidden;
  /* Hasta que app.js arma la tira no se muestra nada a medio camino. */
  min-height: 3.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.carrusel-clientes__pista {
  display: flex; width: max-content; will-change: transform;
  animation: xb-clientes var(--duracion, 40s) linear infinite;
}
.carrusel-clientes__grupo {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: .7rem; padding-right: .7rem;
}
.carrusel-clientes__grupo .cliente { flex: 0 0 auto; white-space: nowrap; }
@keyframes xb-clientes {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--avance, 0px) * -1), 0, 0); }
}
/* El desplazamiento ya no depende del puntero. Antes se frenaba con el mouse
   encima, así que cualquier clic lo dejaba congelado hasta sacar el puntero de
   la tira; y en pantalla táctil el :hover queda pegado después de un toque, de
   modo que no se soltaba nunca. Ahora el clic es el control: uno pausa, el
   siguiente reanuda. La pausa la pide el visitante, no se la impone el mouse. */
.carrusel-clientes[data-pausa="si"] .carrusel-clientes__pista { animation-play-state: paused; }
.carrusel-clientes[data-listo="si"] { cursor: pointer; }

/* Con movimiento reducido no se desplaza: queda una tira que el visitante
   arrastra con el dedo o la rueda. */
@media (prefers-reduced-motion: reduce) {
  .carrusel-clientes { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .carrusel-clientes[data-listo="si"] { cursor: auto; }
  .carrusel-clientes__pista { animation: none; }
  .carrusel-clientes__grupo[aria-hidden="true"] { display: none; }
}
@media print {
  .carrusel-clientes { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .carrusel-clientes__pista { animation: none; flex-wrap: wrap; width: auto; }
  .carrusel-clientes__grupo[aria-hidden="true"] { display: none; }
  .carrusel-clientes__grupo { flex-wrap: wrap; }
}

.lista-clientes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .7rem; }
.cliente {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: .85rem 1rem .85rem 2.4rem; position: relative; font-size: .94rem; margin: 0; color: var(--texto-2);
}
.cliente::before {
  content: ""; position: absolute; left: .95rem; top: 1.15rem; width: 11px; height: 12px;
  background: var(--marca-degradado); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---- Canales directos con botón de WhatsApp ---- */
.canales-wa { list-style: none; margin: .9rem 0 1rem; padding: 0; display: grid; gap: .2rem; }
.canal-wa {
  display: flex; align-items: center; justify-content: space-between; gap: .9rem;
  padding: .75rem 0; border-bottom: 1px solid var(--linea);
}
.canal-wa:last-child { border-bottom: 0; }
.canal-wa__datos { display: grid; gap: .1rem; min-width: 0; }
.canal-wa__datos strong { font-size: .95rem; color: var(--texto); line-height: 1.3; }
.canal-wa__detalle { font-size: .8rem; color: var(--texto-2); line-height: 1.35; }
.canal-wa__numero {
  font-family: var(--fuente-datos); font-size: .86rem; color: var(--texto-2);
  text-decoration: none; width: max-content;
}
.canal-wa__numero:hover { color: var(--marca-azul); text-decoration: underline; }
.canal-wa__correo {
  font-size: .86rem; color: var(--texto-2); text-decoration: none;
  overflow-wrap: anywhere;
}
.canal-wa__correo:hover { color: var(--marca-teal); text-decoration: underline; }

/* Los tres correos, uno por canal. El canal va arriba y chico: lo que se
   copia es la dirección, así que esa es la que lleva el peso. */
.correos { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.correos li { display: grid; gap: .05rem; }
.correo__canal {
  font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-3);
}
.correos a { font-size: .92rem; text-decoration: none; overflow-wrap: anywhere; }
.correos a:hover { text-decoration: underline; }

/* El correo del canal, debajo de su número: en la página de contacto
   cada tarjeta ofrece las dos vías, no solo WhatsApp. */
.canal-correo { margin: .15rem 0 1rem; font-size: .92rem; overflow-wrap: anywhere; }
.canal-correo a { color: var(--texto-2); text-decoration: none; }
.canal-correo a:hover { color: var(--marca-teal); text-decoration: underline; }
.canal-wa__btn { flex: none; }
@media (max-width: 420px) {
  .canal-wa { flex-direction: column; align-items: stretch; gap: .55rem; }
  .canal-wa__btn { justify-content: center; }
}

.lista-canales li { border-bottom: 1px solid var(--linea); padding-bottom: .6rem; }
.lista-canales a { color: var(--texto); }
.lista-canales a:hover { color: var(--marca-azul); }
.lista-canales strong { color: var(--texto); }

/* =====================================================================
   UTILIDADES
   ===================================================================== */
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.txt-centro { text-align: center; }
.txt-mono { font-family: var(--fuente-datos); }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.color-2 { color: var(--texto-2); }
.nowrap { white-space: nowrap; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

@media print {
  .encabezado, .pie, .chat, .wa-lanzador, .banda-superior, .banner-borrador, .panel-carrito, .filtros { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   TRAMA HEXAGONAL DE FONDO
   ---------------------------------------------------------------------
   La misma retícula del encabezado, llevada al resto del sitio como
   textura de fondo. Va sobre el fondo de la página y sobre las bandas
   alternas; las superficies blancas (tarjetas, tablas, formularios y las
   secciones --superficie) quedan limpias a propósito, porque ahí es donde
   se lee y donde la trama restaría legibilidad.

   Para apagarla: poner --trama-opacidad en 0.
   Para subirla o bajarla: mover ese mismo valor.
   ===================================================================== */
:root {
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  --trama-opacidad: .05;
}

/* La retícula ya no está quieta: deriva en diagonal una celda completa
   —56 × 64 px, el tamaño del mosaico— y vuelve a empezar, así el salto del
   final del ciclo es invisible. 34 s por celda son menos de 2 px por
   segundo: se percibe si uno mira, no distrae mientras lee. */
@keyframes xb-deriva {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-56px, -64px, 0); }
}
@keyframes xb-deriva-mosaico {
  from { background-position: 0 0; }
  to   { background-position: -56px -64px; }
}
body::before {
  content: ""; position: fixed; inset: -64px -56px; z-index: -1; pointer-events: none;
  background-image: var(--trama);
  opacity: var(--trama-opacidad);
  will-change: transform;
  animation: xb-deriva 34s linear infinite;
}
/* Las bandas alternas llevan la trama encima de su propio color, con la
   misma deriva para que no se note el corte entre una banda y el fondo.
   Acá el mosaico se corre con background-position en vez de transform: así
   la capa no necesita sobresalir del bloque y la banda no tiene que
   recortar nada, que es lo que rompería cualquier elemento pegajoso o
   cualquier contenido que asome del borde. */
.seccion--alt { position: relative; }
.seccion--alt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--trama);
  opacity: var(--trama-opacidad);
  animation: xb-deriva-mosaico 34s linear infinite;
}
.seccion--alt > * { position: relative; z-index: 1; }

/* =====================================================================
   FIGURAS DE FONDO
   ---------------------------------------------------------------------
   Hexágonos, un anillo y un triángulo, todos con el mismo trazo de la
   retícula y a una opacidad en la que se intuyen más de lo que se ven.
   Se mueven con `transform` y nada más, que es lo único que el navegador
   puede animar sin volver a pintar la página; por eso no cuestan batería
   aunque estén siempre en marcha.

   No llevan rayos: una prueba con el video de presentación de fondo
   mostró que los trazos radiales detrás del texto lo vuelven ilegible.
   La sensación de luz la dan dos halos difusos, que no tienen dirección
   y no compiten con la lectura.

   Para apagarlas: --figuras-opacidad en 0.
   ===================================================================== */
:root {
  --figuras-opacidad: .085;
  --fig-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpath d='M50 2 96 29v54L50 110 4 83V29z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  --fig-anillo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='47'/%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='50' r='19'/%3E%3C/g%3E%3C/svg%3E");
  --fig-triangulo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cpath d='M50 3 97 85H3z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  --halo-a: rgba(25, 207, 201, .13);
  --halo-b: rgba(91, 141, 246, .12);
}

.trama-viva {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.trama-viva__figura,
.trama-viva__halo { position: absolute; display: block; will-change: transform; }

.trama-viva__figura {
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: var(--figuras-opacidad);
}
.trama-viva__halo { border-radius: 50%; }

.trama-viva__figura--hex-a {
  width: 300px; height: 336px; top: 12%; left: -70px;
  background-image: var(--fig-hex);
  animation: xb-flota-a 46s ease-in-out infinite;
}
.trama-viva__figura--hex-b {
  width: 420px; height: 470px; top: 58%; right: -110px;
  background-image: var(--fig-hex);
  animation: xb-flota-b 62s ease-in-out infinite;
}
.trama-viva__figura--anillo {
  width: 260px; height: 260px; top: 4%; right: 8%;
  background-image: var(--fig-anillo);
  animation: xb-gira 90s linear infinite;
}
.trama-viva__figura--triangulo {
  width: 190px; height: 167px; bottom: 6%; left: 14%;
  background-image: var(--fig-triangulo);
  animation: xb-flota-c 54s ease-in-out infinite;
}
.trama-viva__halo--a {
  width: 60vmax; height: 60vmax; top: -18vmax; left: -14vmax;
  background: radial-gradient(circle, var(--halo-a) 0%, transparent 68%);
  animation: xb-respira-a 58s ease-in-out infinite;
}
.trama-viva__halo--b {
  width: 54vmax; height: 54vmax; bottom: -20vmax; right: -16vmax;
  background: radial-gradient(circle, var(--halo-b) 0%, transparent 68%);
  animation: xb-respira-b 72s ease-in-out infinite;
}

@keyframes xb-flota-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(40px, -56px, 0) rotate(8deg); }
}
@keyframes xb-flota-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-54px, 44px, 0) rotate(-10deg); }
}
@keyframes xb-flota-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(34px, -38px, 0) rotate(14deg); }
}
@keyframes xb-gira {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes xb-respira-a {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .75; }
  50%      { transform: translate3d(7vmax, 5vmax, 0); opacity: 1; }
}
@keyframes xb-respira-b {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
  50%      { transform: translate3d(-6vmax, -6vmax, 0); opacity: .72; }
}

/* En pantallas chicas quedan las dos figuras grandes y los halos: menos
   capas que componer en equipos con menos músculo, misma sensación. */
@media (max-width: 720px) {
  .trama-viva__figura--anillo,
  .trama-viva__figura--triangulo { display: none; }
  .trama-viva__figura--hex-a { width: 200px; height: 224px; }
  .trama-viva__figura--hex-b { width: 260px; height: 291px; }
}

/* Quien pide menos movimiento recibe exactamente el fondo de antes:
   la trama quieta y ninguna figura. */
@media (prefers-reduced-motion: reduce) {
  body::before { position: absolute; animation: none; }
  .seccion--alt::before { animation: none; background-position: 0 0; }
  .trama-viva { display: none; }
}
@media print { .trama-viva { display: none; } }

/* =====================================================================
   AIRE VERTICAL EN ESCRITORIO
   ---------------------------------------------------------------------
   En celular las medidas de arriba ya funcionan, así que el recorte vive
   dentro de un min-width y no toca nada por debajo de 901 px. Ahí el
   clamp original entregaba casi lo mismo que estos valores fijos, de modo
   que el cambio de una vista a otra no da un salto.
   Un solo lugar que tocar si más adelante se quiere más o menos aire.
   ===================================================================== */
@media (min-width: 901px) {
  .seccion { padding-block: 4rem; }
  .cabecera-seccion { margin-bottom: 1.9rem; }
  .hero__interior { padding-block: 4.2rem; }
  .hero--compacto .hero__interior { padding-block: 3rem; }
  .proyecto + .proyecto { margin-top: 3.2rem; padding-top: 3.2rem; }
  .pie { padding-block: 2.6rem 1.4rem; }
}

/* =====================================================================
   TRASHCAN XL — campaña de residuos electrónicos
   ---------------------------------------------------------------------
   Es la única parte del sitio con paleta verde. En vez de pintar cada
   elemento se redefinen los tokens dentro de las secciones verdes, así
   las piezas que ya existen —tarjetas, cifras, listas, botones— se
   adaptan solas y siguen teniendo el mismo comportamiento.
   Los verdes están elegidos para pasar 4,5:1 con su texto en los dos
   temas; el oscuro no se aclara con el tema claro porque la sección
   manda sobre el tema, igual que el encabezado.
   ===================================================================== */
.hero--verde,
.seccion--verde {
  --verde-fondo: #0E4A37;
  --verde-tinta: #E6F4EC;
  --verde-tinta-2: #B6D8C7;
  --verde-acento: #7FE3C0;
  background: var(--verde-fondo);
  color: var(--verde-tinta);
  --superficie: #16573F;
  --superficie-2: #1C6449;
  --linea: #2C7558;
  --texto: var(--verde-tinta);
  --texto-2: var(--verde-tinta-2);
}
.hero--verde h1,
.seccion--verde h2, .seccion--verde h3, .seccion--verde h4 { color: #FFFFFF; }
.seccion--verde p, .hero--verde p { color: var(--verde-tinta-2); }
.seccion--verde .cabecera-seccion p { color: var(--verde-tinta-2); }
.seccion--verde strong { color: #FFFFFF; }
.seccion--verde a:not(.btn) { color: var(--verde-acento); }
.seccion--verde a:not(.btn):hover { color: #FFFFFF; }

/* El hero de la campaña no lleva el video de fondo ni los degradados azules
   del hero normal; la textura hexagonal se la sigue dando .hero::after. */
.hero--verde { position: relative; overflow: hidden; }
.hero--verde::before { background-image: none; }
.hero--verde .hero__bajada { color: var(--verde-tinta-2); }

.eyebrow--verde { color: var(--verde-acento); }
.eyebrow--verde::before { background: var(--verde-acento); }

/* Franja clara: fondo verde pálido con el texto normal del tema */
.seccion--verde-claro { background: #0D2A21; }

/* Botón fantasma sobre fondo verde oscuro */
.btn--sobre-verde { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.btn--sobre-verde:hover { color: #0E4A37; background: #FFFFFF; border-color: #FFFFFF; }

.aviso--sobre-verde {
  background: rgba(255, 255, 255, .08); color: var(--verde-tinta);
  border-color: rgba(127, 227, 192, .45); line-height: 1.65;
}
.aviso--sobre-verde strong { color: #FFFFFF; }

/* Ilustración de la chatarra: ocupa el ancho completo, sin recortes */
/* Cifras sobre verde: el valor necesita su propio tono, el azul de marca
   no contrasta lo suficiente contra la superficie verde. */
.cifras--verde { background: var(--linea); border-color: var(--linea); }
.cifras--verde .cifra__valor { color: var(--verde-acento); }

/* Las dos caras del mismo aparato, y qué hace XITBOL y qué no */
.par-raee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.camino {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 1.4rem 1.5rem;
}
.camino h3 { margin-top: 0; }
.camino--riesgo { border-top: 4px solid #E2A33C; }
.camino--valor { border-top: 4px solid var(--verde-acento); }
.camino__nota { font-size: .9rem; margin-bottom: 0; }
.lista-simple { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.lista-simple li { padding-left: 1.1rem; position: relative; font-size: .95rem; line-height: 1.6; }
.lista-simple li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--verde-acento);
}
.camino--riesgo .lista-simple li::before { background: #E2A33C; }

/* Los cuatro pasos */
.pasos-raee { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: paso; }
.pasos-raee li {
  position: relative; padding: 1.3rem 1.5rem 1.3rem 4.4rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md);
}
.pasos-raee h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.pasos-raee p { margin: 0; }
.pasos-raee__n {
  position: absolute; left: 1.4rem; top: 1.25rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde-acento); color: #06372A;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.05rem;
}

.nota-fuente { font-size: .85rem; margin-top: 1.4rem; margin-bottom: 0; }
.seccion--verde .nota-fuente { color: var(--verde-tinta-2); }
.redes--centro { justify-content: center; }

@media (max-width: 900px) {
  .par-raee { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 620px) {
  .pasos-raee li { padding: 3.4rem 1.2rem 1.2rem; }
  .pasos-raee__n { left: 1.2rem; top: 1.1rem; }
}

/* =====================================================================
   PESO DE LA TIPOGRAFÍA DE DATOS
   ---------------------------------------------------------------------
   IBM Plex Mono se descarga solo en 400 y 600. Estos elementos no
   declaraban peso, así que heredaban el 500 del cuerpo y el navegador
   fabricaba ese corte engrosando el 400 a mano: el trazo quedaba sucio y
   el ancho, levemente distinto en cada equipo. Con 400 explícito usan la
   letra real.
   ===================================================================== */
.filtros__titulo,
.opcion__conteo,
.sede__ciudad,
.producto__marca,
.producto__meta,
table.precios td.num,
.item-carrito__sku,
.cantidad span,
.indice a::before,
.txt-mono,
.canal-wa__numero,
.mapa-red text { font-weight: 400; }

/* El 700 tampoco existe en esta familia: estos dos usan el 600, que sí. */
.contador-carrito,
.paso__num { font-weight: 600; }

/* Las etiquetas del mapa de la red llevan la familia puesta en el propio
   SVG, así que heredaban el 500 del cuerpo igual que el resto. */
svg text { font-weight: 400; }

/* Los controles del chat no heredaban la tipografía del sitio: el botón de
   cerrar salía en la letra por defecto del navegador. */
.chat__cerrar { font-family: inherit; }

/* El texto alternativo que el navegador muestra si no puede reproducir un
   video tampoco hereda, y aparecía con serifas. */
video, video * { font-family: inherit; }

/* =====================================================================
   FONDO DE VIDEO DEL SITIO
   ---------------------------------------------------------------------
   Un pasillo de centro de datos corriendo detrás de todas las páginas, en
   lugar de la trama hexagonal. Va en una capa fija a z-index -1: el fondo
   del <body> se pinta en el lienzo, por debajo, así que basta con que las
   secciones no traigan color propio para que el video se vea.

   El material tiene el centro muy claro, así que lleva velo: sin él, el
   texto de las secciones no se sostiene contra los fotogramas abiertos
   del pasillo. Las portadas ponen además el suyo propio.
   ===================================================================== */
.fondo-video {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--marca-navy);
  opacity: 1; transition: opacity .45s ease;
}
.fondo-video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .58; filter: saturate(112%);
}
.fondo-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 35, .90) 0%, rgba(6, 20, 35, .74) 50%, rgba(6, 20, 35, .60) 100%),
    linear-gradient(180deg, rgba(6, 20, 35, .30) 0%, rgba(6, 20, 35, 0) 32%, rgba(6, 20, 35, .48) 100%);
}
.fondo-video[data-oculto="si"] { opacity: 0; }

/* En pantallas angostas solo se ve la franja izquierda del velo, que es la
   más cerrada: ahí el video quedaba casi apagado. En celular el velo se
   reparte parejo de arriba abajo en vez de izquierda a derecha. */
@media (max-width: 760px) {
  .fondo-video::after {
    background:
      linear-gradient(180deg, rgba(6, 20, 35, .86) 0%, rgba(6, 20, 35, .72) 38%, rgba(6, 20, 35, .82) 100%);
  }
}

/* ---- Las portadas dejan pasar el fondo ----
   Antes cada hero traía su propio video adentro: dos videos decodificando
   a la vez, y el de arriba tapando al de atrás. Ahora el hero se vuelve
   transparente y pone sobre el fondo su propio velo oscuro, que es lo que
   sostiene el texto blanco del título. */
.hero--sobre-fondo { background: transparent; }
.hero--sobre-fondo::before {
  background-image:
    linear-gradient(100deg, rgba(4, 16, 29, .34) 0%, rgba(4, 16, 29, .20) 52%, rgba(4, 16, 29, .10) 100%),
    radial-gradient(ellipse 70% 60% at 78% 18%, rgba(2, 169, 173, .22), transparent 62%),
    radial-gradient(ellipse 60% 55% at 18% 88%, rgba(37, 98, 233, .22), transparent 60%);
}
/* La retícula del hero sobra: el video ya aporta textura */
.hero--sobre-fondo::after { display: none; }

/* ---- Mientras el video manda ---- */
/* Los hexágonos se apagan: dos texturas superpuestas y no se lee ninguna. */
:root[data-fondo="video"] body::before,
:root[data-fondo="video"] .trama-viva,
:root[data-fondo="video"] .seccion--alt::before { opacity: 0; }
body::before, .trama-viva { transition: opacity .45s ease; }

/* Las bandas de color se vuelven translúcidas: si quedaran opacas el fondo
   aparecería a parches, una franja sí y otra no. Siguen leyéndose como
   bandas —de eso se trata la alternancia— pero ahora el video las cruza. */
:root[data-fondo="video"] .seccion--alt {
  background: color-mix(in srgb, var(--fondo-alt) 78%, transparent);
}
:root[data-fondo="video"] .seccion--superficie {
  background: color-mix(in srgb, var(--superficie) 80%, transparent);
}
:root[data-fondo="video"] .seccion--navy {
  background: color-mix(in srgb, var(--marca-navy) 76%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  /* Queda el fotograma fijo: imagen, no movimiento. */
  .fondo-video video { display: none; }
  .fondo-video { background: var(--marca-navy) url("../video/fondo-datacenter.jpg") center / cover no-repeat; }
}
/* Con ahorro de datos activo no se descarga el video: queda el poster. */
@media (prefers-reduced-data: reduce) {
  .fondo-video video { display: none; }
  .fondo-video { background: var(--marca-navy) url("../video/fondo-datacenter.jpg") center / cover no-repeat; }
}
@media print { .fondo-video { display: none; } }

/* =====================================================================
   TRASHCAN XL: EL MISMO FONDO, EN VERDE
   ---------------------------------------------------------------------
   La campaña usaba la trama hexagonal porque sus bandas eran verde opaco y
   el video, que va en z-index -1, no se habría visto nunca detrás de ellas.
   Ahora la página usa el mismo material que el resto del sitio, girado al
   verde, y sus bandas se vuelven translúcidas como las demás.

   El hue-rotate no es un capricho: sin él el azul del pasillo pelea con el
   velo verde y queda un teal sucio que no es ni el navy del sitio ni el
   verde de la campaña. Girado, la toma lee verde y las luces de los racks
   quedan ámbar, que es lo único cálido de la página.

   Las tres clases verdes existen solo en trashcan.html, así que nada de
   esto alcanza al resto del sitio.
   ===================================================================== */
.fondo-video[data-tono="verde"] { background: #0E4A37; }
.fondo-video[data-tono="verde"] video { filter: hue-rotate(-55deg) saturate(112%); }
.fondo-video[data-tono="verde"]::after {
  background:
    linear-gradient(90deg, rgba(5, 30, 22, .92) 0%, rgba(5, 30, 22, .80) 50%, rgba(5, 30, 22, .70) 100%),
    linear-gradient(180deg, rgba(5, 30, 22, .30) 0%, rgba(5, 30, 22, 0) 32%, rgba(5, 30, 22, .48) 100%);
}
@media (max-width: 760px) {
  .fondo-video[data-tono="verde"]::after {
    background:
      linear-gradient(180deg, rgba(5, 30, 22, .88) 0%, rgba(5, 30, 22, .78) 38%, rgba(5, 30, 22, .86) 100%);
  }
}

/* Las bandas verdes, translúcidas: mismo criterio que las navy del resto
   del sitio. Siguen leéndose como bandas —la alternancia es lo que da el
   ritmo— pero ahora el video las cruza. Las tarjetas de adentro conservan
   su --superficie opaca, así que el dato no compite con el fondo. */
:root[data-fondo="video"] .seccion--verde {
  background: color-mix(in srgb, #0E4A37 76%, transparent);
}
:root[data-fondo="video"] .seccion--verde-claro {
  background: color-mix(in srgb, #0D2A21 80%, transparent);
}

/* La portada lleva su propia foto —placas de celulares desarmadas, que es
   justo de lo que habla la campaña— en vez del fondo de video. El resto de
   la página sí conserva el video verde, que sigue corriendo detrás.

   El duotono verde viene horneado en el archivo y no aplicado por CSS: el
   velo va en esta misma capa, así que un filter lo teñiría también. De
   paso, el navegador no tiene que filtrar la imagen en cada pintado.

   El velo es bastante más cerrado que el de las demás portadas, y no es por
   gusto: la foto original es cian brillante y, medida, dejaba al texto
   blanco en 1,20:1 contra su zona más clara. */
:root[data-fondo="video"] .hero--verde { background: transparent; }
:root[data-fondo="video"] .hero--verde::before {
  /* La primera declaración es la red de seguridad: un navegador que no
     entienda image-set() se queda con el JPG y descarta la segunda. */
  background-image:
    linear-gradient(100deg, rgba(4, 26, 19, .88) 0%, rgba(4, 26, 19, .74) 45%, rgba(4, 26, 19, .54) 100%),
    url("../img/trashcan-portada.jpg");
  background-image:
    linear-gradient(100deg, rgba(4, 26, 19, .88) 0%, rgba(4, 26, 19, .74) 45%, rgba(4, 26, 19, .54) 100%),
    image-set(url("../img/trashcan-portada.webp") type("image/webp"),
              url("../img/trashcan-portada.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* En pantalla angosta el texto ocupa todo el ancho, así que el velo tiene
   que cerrar parejo en vez de abrirse hacia la derecha. */
@media (max-width: 760px) {
  :root[data-fondo="video"] .hero--verde::before {
    background-image:
      linear-gradient(180deg, rgba(4, 26, 19, .84) 0%, rgba(4, 26, 19, .90) 100%),
      url("../img/trashcan-portada.jpg");
    background-image:
      linear-gradient(180deg, rgba(4, 26, 19, .84) 0%, rgba(4, 26, 19, .90) 100%),
      image-set(url("../img/trashcan-portada.webp") type("image/webp"),
                url("../img/trashcan-portada.jpg") type("image/jpeg"));
  }
}
/* Con ahorro de datos no se descarga la foto: queda el verde plano. */
@media (prefers-reduced-data: reduce) {
  :root[data-fondo="video"] .hero--verde { background: #0E4A37; }
  :root[data-fondo="video"] .hero--verde::before { background-image: none; }
}
/* La retícula del hero sobra cuando hay video: dos texturas encimadas y no
   se lee ninguna. Es la misma decisión que en las demás portadas. */
:root[data-fondo="video"] .hero--verde::after { display: none; }

/* Sin movimiento o con ahorro de datos queda el fotograma fijo. La regla
   general lo pone como background-image en navy, que acá no sirve: el verde
   necesita su propia capa para poder girarle el tono igual que al video. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .fondo-video[data-tono="verde"] { background: #0E4A37; }
  .fondo-video[data-tono="verde"]::before {
    content: ""; position: absolute; inset: 0;
    background: url("../video/fondo-datacenter.jpg") center / cover no-repeat;
    opacity: .58; filter: hue-rotate(-55deg) saturate(112%);
  }
}


/* =====================================================================
   EL AIRE ENTRE LA PORTADA Y LO QUE SIGUE
   ---------------------------------------------------------------------
   La portada perdió su columna derecha cuando el video de presentación se
   mudó al cierre de «Qué hacemos», y el aire de abajo quedó sobrando: eran
   dos respiros seguidos, el del hero y el de la sección. Se recortan los
   dos, nada más entre esos dos bloques; el resto del ritmo no se toca.
   ===================================================================== */
.hero__interior--solo { padding-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.hero + .seccion { padding-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 901px) {
  .hero__interior--solo { padding-bottom: 2.6rem; }
  .hero + .seccion { padding-top: 2.6rem; }
}