/* ==========================================================================
   JAVISAC — Hoja de estilos
   Réplica en PHP/CSS de javisac.com.pe
   1. Variables y reset
   2. Utilidades
   3. Botones
   4. Cabecera
   5. Hero
   6. Nosotros
   7. Destacados
   8. Banner
   9. Catálogo (tabs + productos)
  10. Noticias
  11. TikTok
  12. Misión / Visión
  13. Claim
  14. Sedes
  15. Contacto
  16. Pie y flotantes
  17. Responsive
   ========================================================================== */

/* 1. Variables y reset ---------------------------------------------------- */
:root {
  --azul:        #004AA8;
  --azul-osc:    #003A83;
  --azul-link:   #006EDF;
  --azul-vivo:   #0138D6;
  --amarillo:    #FFD200;
  --negro:       #262626;
  --gris:        #626262;
  --gris-menu:   #7A7A7A;   /* color de los enlaces del menu */
  --gris-claro:  #F3F3F3;
  --gris-2:      #E4E4E4;
  --gris-3:      #DADADA;
  --gris-top:    #F4F4F4;
  --blanco:      #FFFFFF;

  --fuente-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-ui:     'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio:     15px;
  --radio-sm:  8px;
  --sombra:    -4px 4px 10px rgba(78, 78, 78, .25);
  --sombra-sm: 0 2px 8px rgba(0, 0, 0, .10);

  --ancho: 1200px;
  --alto-cabecera: 128px;
  /* Lo que realmente queda pegado arriba al hacer scroll. En escritorio es solo
     la barra del menú; en móvil, la cabecera entera. Lo mide el JS. */
  --alto-pegado: 128px;
  --alto-top: 82px;
  /* El hero ocupa exactamente la ventana menos la cabecera.
     El JS mide la cabecera real y actualiza --alto-cabecera, asi que calza al pixel.
     Sin tope maximo: siempre llega justo al borde inferior de la ventana.
     Para dejar aire abajo, resta pixeles aqui: calc(100svh - var(--alto-cabecera) - 20px) */
  --alto-hero: max(440px, calc(100vh  - var(--alto-cabecera)));
  --alto-hero: max(440px, calc(100svh - var(--alto-cabecera)));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-pegado) + 14px); }

body {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--azul-link); text-decoration: none; }
a:hover { color: var(--azul); }

h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulo); margin: 0 0 .5em; line-height: 1.2; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
[hidden] { display: none !important; }
svg    { width: 1em; height: 1em; fill: currentColor; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* 2. Utilidades ----------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Variante a todo el ancho de la pantalla (cabecera, franjas de borde a borde) */
.contenedor--full {
  max-width: none;
  padding-inline: clamp(16px, 2.6vw, 45px);
}

/* Variante mas ancha que el contenedor normal (1200px -> 1512px) */
.contenedor--ancho { max-width: calc(var(--ancho) * 1.26); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--azul); color: #fff; padding: 10px 18px;
}
.salto-contenido:focus { left: 10px; top: 10px; color: #fff; }

.seccion__cabecera { text-align: center; margin-bottom: 34px; }
.seccion__antetitulo {
  font-family: var(--fuente-ui);
  font-size: 14px; font-weight: 500; color: var(--gris);
  margin: 0 0 4px;
}
.seccion__titulo {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800; color: var(--azul); margin: 0;
}

.aviso {
  border-radius: var(--radio-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}
.aviso--ok    { background: #e7f6ec; color: #16663a; border: 1px solid #b7e2c6; }
.aviso--error { background: #fdecec; color: #932020; border: 1px solid #f3bcbc; }

/* 3. Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fuente-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 10px;
  background: var(--azul);
  color: #fff;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--azul-osc); color: #fff; transform: translateY(-1px); }

/* El de Catálogo no se levanta como los demás: se encoge al pasar el mouse.
   Pisa el translateY de .btn:hover (misma especificidad, va después). */
.btn--catalogo { min-width: 170px; }
.btn--catalogo:hover  { transform: scale(.95); box-shadow: 0 4px 12px rgba(0, 74, 168, .28); }
.btn--catalogo:active { transform: scale(.92); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn--catalogo:hover, .btn--catalogo:active { transform: none; }
}
.btn--pill     { border-radius: 999px; padding: 13px 34px; font-size: 16px; font-weight: 600; }
.btn--oscuro   { background: var(--negro); }
.btn--oscuro:hover { background: #000; }

.btn--cotizar {
  width: 100%;
  border-radius: var(--radio-sm);
  padding: 11px 16px;
  font-size: 14px;
}

.btn--linea {
  background: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
  padding: 12px 30px;
}
.btn--linea:hover { background: var(--azul); color: #fff; }

.btn--form { width: 100%; border-radius: var(--radio-sm); padding: 13px 20px; }

/* 4. Cabecera ------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* En escritorio la cabecera se queda pegada, pero corrida hacia arriba justo lo
   que mide la fila del logo: esa fila sale de pantalla y queda solo la barra
   del menú. Así el menú acompaña todo el scroll sin comerse 133px de alto. */
@media (min-width: 901px) {
  .cabecera { top: calc(-1 * var(--alto-top)); }
  /* Al despegarse del inicio, la barra del menú se marca con una sombra. */
  .cabecera.is-compacta .cabecera__nav {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }
  .cabecera__nav { transition: box-shadow .25s ease; }
}

.cabecera__top-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 82px;
  padding-block: 12px;
}

.logo img { width: 170px; height: auto; }

.buscador {
  flex: 1 1 auto;
  position: relative;
}
.buscador input {
  width: 100%;
  height: 46px;
  padding: 0 52px 0 20px;
  font-family: var(--fuente-ui);
  font-size: 15px;
  color: var(--negro);
  background: var(--blanco);
  border: 1px solid #cfe0f7;
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.buscador input::placeholder { color: #9aa4b2; }
.buscador input:focus {
  outline: none;
  border-color: var(--azul-link);
  box-shadow: 0 0 0 3px rgba(0, 110, 223, .12);
}
.buscador button {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--azul-link);
}
.buscador button svg { width: 20px; height: 20px; }
.buscador button:hover { background: #eef5ff; }

/* Sugerencias del buscador ------------------------------------------------
   Cuelgan de .buscador, que ya es position:relative. Se pintan con JS al
   teclear: foto, nombre (con la parte coincidente resaltada) y categoría. */
.sugerencias {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 240;
  max-height: min(62vh, 420px);
  overflow-y: auto;
  padding: 6px;
  background: var(--blanco);
  border: 1px solid #e2ebf8;
  border-radius: var(--radio-sm);
  box-shadow: 0 18px 40px rgba(0, 40, 90, .16);
  overscroll-behavior: contain;
  animation: sugerencias-entra .16s ease;
}
@keyframes sugerencias-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sugerencias { animation: none; }
}

.sugerencia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--negro);
  text-decoration: none;
}
.sugerencia:hover,
.sugerencia.is-activa { background: #f1f7ff; }

.sugerencia__foto {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--gris-claro);
  border-radius: 8px;
}
.sugerencia__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.sugerencia__texto {
  min-width: 0;           /* deja que el nombre se recorte en vez de desbordar */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sugerencia__nombre {
  font-family: var(--fuente-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sugerencia__nombre mark {
  background: none;
  color: var(--azul-link);
  font-weight: 700;
}
.sugerencia__categoria {
  font-family: var(--fuente-ui);
  font-size: 12px;
  color: var(--gris-menu);
}

.sugerencia--todos {
  justify-content: center;
  margin-top: 4px;
  padding-block: 11px;
  border-top: 1px solid var(--gris-2);
  border-radius: 0 0 8px 8px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-link);
}

.sugerencias__vacio {
  margin: 0;
  padding: 16px 12px;
  font-family: var(--fuente-ui);
  font-size: 14px;
  color: var(--gris);
  text-align: center;
}

.hamburguesa {
  display: none;
  width: 42px; height: 42px;
  padding: 9px;
  border-radius: var(--radio-sm);
}
.hamburguesa span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--negro);
  transition: transform .25s ease, opacity .2s ease;
}
.hamburguesa span + span { margin-top: 5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cabecera__nav { background: var(--gris-top); }
.cabecera__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
}

.menu { display: flex; align-items: center; gap: 6px; }
.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-menu);
  padding: 12px 14px;
  border-radius: var(--radio-sm);
  transition: color .2s ease;
}
/* Al pasar el mouse solo cambia el color del texto: sin fondo detrás. */
.menu__link:hover,
.menu__item:hover > .menu__link { color: var(--azul-link); }

.menu__flecha {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .2s ease;
}
.menu__item--dropdown:hover .menu__flecha { transform: rotate(180deg); }

.submenu {
  position: absolute;
  min-width: 230px;
  background: var(--blanco);
  border-radius: var(--radio-sm);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 30;
}
.menu__item { position: relative; }
.menu__item--dropdown:hover .submenu,
.menu__item--dropdown:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  font-family: var(--fuente-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--negro);
}
.submenu a:hover { background: var(--gris-top); color: var(--azul); }

/* Correo + puerta de acceso al panel, al extremo derecho de la barra gris. */
.cabecera__extra {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cabecera__mail {
  font-family: var(--fuente-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--gris);
}
.cabecera__mail:hover { color: var(--azul); }

.cabecera__acceso {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--gris-menu);
  transition: color .2s ease;
}
.cabecera__acceso svg { width: 19px; height: 19px; }
/* Mismo hover que los enlaces del menú: solo cambia el color, sin fondo. */
.cabecera__acceso:hover { color: var(--azul-link); }

/* Entrada de la cabecera --------------------------------------------------
   Un barrido de arriba hacia abajo al cargar: primero el logo, luego el
   buscador, el botón de catálogo, la barra gris, los enlaces del menú y por
   último el correo. Cada pieza entra desde el lado al que "pertenece" y todas
   son animaciones CSS puras (no dependen de JS: si el CSS carga, terminan sí
   o sí, y nada se queda invisible).

   El relleno es `backwards` y no `both`: `both` deja fijado el valor final de la
   animación, que gana al resto de la cascada, y con eso el `transform` del `:hover`
   del botón de Catálogo no llegaba a aplicarse nunca. Con `backwards` la pieza se
   mantiene oculta durante su retardo y suelta el control al terminar.

   La fila blanca va por encima de la barra gris para que ésta parezca salir
   de detrás del buscador. */
.cabecera__top {
  position: relative;
  z-index: 2;
  background: var(--blanco);
}

@keyframes cab-izquierda {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cab-derecha {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cab-arriba {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cab-encoge {
  from { opacity: 0; transform: scale(1.14); }
  to   { opacity: 1; transform: none; }
}
@keyframes cab-baja {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}

.logo {
  animation: cab-izquierda .5s cubic-bezier(.22, .61, .36, 1) .05s backwards;
}
.buscador {
  animation: cab-arriba .5s cubic-bezier(.22, .61, .36, 1) .16s backwards;
}
.btn--catalogo,
.hamburguesa {
  animation: cab-encoge .45s cubic-bezier(.22, .61, .36, 1) .28s backwards;
}

@media (min-width: 901px) {
  /* La barra gris se descubre desde detrás de la fila del buscador. */
  .cabecera__nav {
    animation: cab-baja .5s cubic-bezier(.22, .61, .36, 1) .38s backwards;
  }
  /* Se anima el enlace y no el <li>: una transform en el ítem lo convertiría
     en el bloque contenedor del mega menú, que va anclado a la barra entera. */
  .menu__link {
    animation: cab-izquierda .42s cubic-bezier(.22, .61, .36, 1) backwards;
  }
  /* El escalonado de los enlaces continúa el barrido hacia la derecha. */
  .menu__item:nth-child(1) > .menu__link { animation-delay: .50s; }
  .menu__item:nth-child(2) > .menu__link { animation-delay: .54s; }
  .menu__item:nth-child(3) > .menu__link { animation-delay: .58s; }
  .menu__item:nth-child(4) > .menu__link { animation-delay: .62s; }
  .menu__item:nth-child(5) > .menu__link { animation-delay: .66s; }
  .menu__item:nth-child(6) > .menu__link { animation-delay: .70s; }
  .menu__item:nth-child(7) > .menu__link { animation-delay: .74s; }
  .menu__item:nth-child(n+8) > .menu__link { animation-delay: .78s; }

  .cabecera__mail {
    display: inline-block;
    animation: cab-derecha .45s cubic-bezier(.22, .61, .36, 1) .80s backwards;
  }
  /* Cierra el barrido: entra justo detrás del correo. */
  .cabecera__acceso {
    animation: cab-derecha .45s cubic-bezier(.22, .61, .36, 1) .86s backwards;
  }
}

/* Quien pide menos movimiento ve la cabecera ya montada. */
@media (prefers-reduced-motion: reduce) {
  .logo, .buscador, .btn--catalogo, .hamburguesa,
  .cabecera__nav, .menu__link, .cabecera__mail, .cabecera__acceso { animation: none; }
}

.overlay-menu {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 190;
}

/* 5. Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--negro);
}
.hero__pista { position: relative; }

/* Cruce limpio: la imagen saliente se queda opaca DEBAJO mientras la nueva
   aparece encima, y recien despues corta. Asi no se ve el fondo negro. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0s linear .9s;   /* al salir: aguanta y corta */
}
.hero__slide:first-child { position: relative; }
.hero__slide.is-activo {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  transition: opacity .9s ease;        /* al entrar: aparece suave encima */
}

.hero__img {
  width: 100%;
  height: var(--alto-hero);
  object-fit: cover;
  object-position: center;
}

.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, 0) 75%);
}

/* Recorte del producto, encima del fondo y del velo.
   Mismo tamaño (1920x1080) y mismo recorte que .hero__img: al estar las dos
   capas calculadas igual, el producto cae exactamente donde el diseñador lo
   dejó en el PNG, sin tener que posicionarlo por CSS ni retocarlo por
   breakpoint. Va sobre el velo porque el velo oscurece la foto para que se lea
   el texto, y el producto tiene que quedar a plena luz. */
.hero__capa {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;   /* no debe estorbar al arrastre del carrusel */
}

.hero__producto {
  width: 100%;
  height: var(--alto-hero);
  object-fit: cover;
  object-position: center;

  /* Tamaño del recorte, desde el panel. Se encoge hacia la esquina inferior
     derecha: el producto vive en esa zona del lienzo, así que al reducirlo
     sigue apoyado donde el diseñador lo puso en vez de irse hacia el centro
     y meterse debajo del titular. */
  transform: scale(var(--escala, 1));
  transform-origin: right bottom;
}

/* --- Efectos de entrada del recorte ---------------------------------------
   Se disparan al entrar el slide, porque la clase .is-activo aparece en ese
   momento y con ella la animación. Al volver a un slide se repiten solos.
   `backwards` y no `both`: reteniendo el último fotograma, el valor final
   ganaría al resto de la cascada y ya nada podría mover el producto después.  */
@keyframes hero-aparece      { from { opacity: 0; } }
@keyframes hero-desde-dcha   { from { opacity: 0; transform: translateX(7%); } }
@keyframes hero-desde-izda   { from { opacity: 0; transform: translateX(-7%); } }
@keyframes hero-desde-abajo  { from { opacity: 0; transform: translateY(8%); } }
@keyframes hero-desde-arriba { from { opacity: 0; transform: translateY(-8%); } }
@keyframes hero-acerca       { from { opacity: 0; transform: scale(1.08); } }

.hero__slide.is-activo .hero__capa--fade      { animation: hero-aparece      .7s ease-out .25s backwards; }
.hero__slide.is-activo .hero__capa--derecha   { animation: hero-desde-dcha   .8s cubic-bezier(.22,.61,.36,1) .2s backwards; }
.hero__slide.is-activo .hero__capa--izquierda { animation: hero-desde-izda   .8s cubic-bezier(.22,.61,.36,1) .2s backwards; }
.hero__slide.is-activo .hero__capa--abajo     { animation: hero-desde-abajo  .8s cubic-bezier(.22,.61,.36,1) .2s backwards; }
.hero__slide.is-activo .hero__capa--arriba    { animation: hero-desde-arriba .8s cubic-bezier(.22,.61,.36,1) .2s backwards; }
.hero__slide.is-activo .hero__capa--zoom      { animation: hero-acerca       .9s cubic-bezier(.22,.61,.36,1) .2s backwards; }

/* Quien pide menos movimiento en su sistema no debería ver nada deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-activo [class*="hero__capa--"] { animation: hero-aparece .4s ease-out backwards; }
}

/* El recorte solo se enseña donde CABE ENTERO.
   El producto llega hasta el borde derecho del lienzo, así que solo se ve
   completo cuando la caja del hero es al menos tan ancha como 16:9. Por debajo
   de eso, `cover` lo agranda para cubrir el alto y pasa una de dos: o se corta
   a una tira pegada al borde, o crece tanto que se come la pantalla y el
   titular queda ilegible encima. Las dos cosas parecen un error, así que en
   pantalla estrecha o muy vertical se esconde y manda la foto de fondo, que ahí
   es lo que se lee bien.

   (Si algún día se quiere el producto también en el móvil, hace falta otra
   versión del PNG recortada al producto, no el lienzo entero de 1920x1080.) */
@media (max-width: 1000px), (max-aspect-ratio: 4/3) {
  .hero__capa { display: none; }
}

.hero__contenido {
  position: absolute;
  left: 50%; bottom: clamp(85px, 7.4vw, 140px);
  transform: translateX(-50%);
  width: 100%;
}

.hero__titulo { margin: 22px 0 0; }
.hero__linea1,
.hero__linea2 {
  display: block;
  font-size: clamp(34px, 5.2vw, 76px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.5px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.hero__linea1 { color: #fff; }
.hero__linea2 { color: var(--amarillo); }

.hero__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
}
.hero:hover .hero__nav { opacity: 1; }
.hero__nav:hover { background: var(--azul); }
.hero__nav svg { width: 24px; height: 24px; }
.hero__nav--prev { left: 18px; }
.hero__nav--next { right: 18px; }

.hero__puntos {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 18px;
  z-index: 5;
  display: flex; gap: 8px;
}
.hero__punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transition: background .2s ease, width .2s ease;
}
.hero__punto.is-activo { background: var(--amarillo); width: 26px; border-radius: 999px; }

.hero__progreso {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: rgba(255, 255, 255, .22);
  z-index: 6;
}
.hero__barra {
  display: block;
  height: 100%;
  width: 0;
  background: var(--azul-link);
}

/* Fondo compartido: nosotros + destacados + promos + fichas.
   La foto queda fija detras y un velo blanco la atenua de arriba a abajo. */
.bloque-fondo {
  position: relative;
  isolation: isolate;
}
.bloque-fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    /* Velo blanco al 75% = la textura se ve al 25%.
       Para subir o bajar la textura, cambia solo los dos .75 de aqui. */
    linear-gradient(rgba(255, 255, 255, .75) 0%,
                    rgba(255, 255, 255, .75) 88%,
                    #fff 100%),
    url('../img/fondo-nave.jpg');
  background-position: center top, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}
/* En movil el fondo fijo cuesta caro y salta: se ancla normal */
@media (max-width: 900px) {
  .bloque-fondo::before { background-attachment: scroll, scroll; }
}

/* 6. Nosotros ------------------------------------------------------------- */
.nosotros {
  padding: clamp(40px, 5vw, 66px) 0 clamp(20px, 3vw, 34px);
  text-align: center;
}
/* Caja blanca sobre la textura: el texto se lee limpio y el fondo se
   sigue insinuando por detras.
   El marco lo forman dos escuadras azules en la esquina superior izquierda
   y la inferior derecha; esas dos esquinas van en punta y las otras dos
   redondeadas, para que no quede un rectangulo plano. */
.nosotros__caja {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 0 var(--radio) 0 var(--radio);
  padding: clamp(26px, 3.2vw, 46px) clamp(22px, 3vw, 54px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .09);
}

.nosotros__caja::before,
.nosotros__caja::after {
  content: '';
  position: absolute;
  width: clamp(44px, 6vw, 86px);
  height: clamp(44px, 6vw, 86px);
  border: 4px solid var(--azul);
  pointer-events: none;
  transition: width .35s ease, height .35s ease;
}
.nosotros__caja::before {
  top: -13px; left: -13px;
  border-right: 0;
  border-bottom: 0;
}
.nosotros__caja::after {
  bottom: -13px; right: -13px;
  border-left: 0;
  border-top: 0;
}
/* Las escuadras se estiran al pasar por la seccion */
.nosotros:hover .nosotros__caja::before,
.nosotros:hover .nosotros__caja::after {
  width: clamp(60px, 8.5vw, 130px);
  height: clamp(60px, 8.5vw, 130px);
}

.nosotros__titulo {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--azul-vivo);
  margin-bottom: 20px;
}
.nosotros__texto {
  color: var(--negro);
  font-size: 15px;
  line-height: 1.75;
}
.nosotros__texto p:last-child { margin-bottom: 0; }
.nosotros__texto strong { font-weight: 700; font-style: italic; }

/* 7. Destacados ----------------------------------------------------------- */
.destacados { padding: clamp(20px, 3vw, 36px) 0; }
.destacados__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* La tarjeta es solo el arte: el titulo y las medidas ya vienen impresos
   en la imagen, por eso no se superpone texto al pasar el mouse. */
.tarjeta-dest {
  display: block;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--gris-claro);
  box-shadow: var(--sombra);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tarjeta-dest:hover,
.tarjeta-dest:focus-visible {
  transform: translateY(-3px);
  box-shadow: -5px 7px 18px rgba(78, 78, 78, .28);
}

.tarjeta-dest__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .45s ease;
}
.tarjeta-dest:hover .tarjeta-dest__img,
.tarjeta-dest:focus-visible .tarjeta-dest__img { transform: scale(1.02); }

/* 8. Banners promocionales ------------------------------------------------ */
/* Animacion: la pista se desliza en horizontal. Distinta del fundido del
   hero y del deslizamiento vertical de las fichas. */
.promo { padding: clamp(16px, 2.4vw, 30px) 0; }

.promo__carrusel {
  position: relative;
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  background: var(--gris-claro);
}

.promo__ventana {
  overflow: hidden;
  border-radius: var(--radio);
  cursor: grab;
}
.promo__carrusel.arrastrando .promo__ventana { cursor: grabbing; }
.promo__carrusel.arrastrando .promo__slide { pointer-events: none; }
.promo__slide img { user-select: none; -webkit-user-drag: none; }
.promo__pista {
  display: flex;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

.promo__slide {
  flex: 0 0 100%;
  display: block;
  min-width: 0;
}
.promo__slide img {
  width: 100%;
  aspect-ratio: 1140 / 260;
  object-fit: cover;
}

.promo__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--negro);
  opacity: 0;
  transition: opacity .25s ease, background .2s ease, color .2s ease;
}
.promo__carrusel:hover .promo__nav,
.promo__nav:focus-visible { opacity: 1; }
.promo__nav:hover { background: var(--azul); color: #fff; }
.promo__nav svg { width: 22px; height: 22px; }
.promo__nav--prev { left: 14px; }
.promo__nav--next { right: 14px; }

.promo__puntos {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 12px;
  z-index: 5;
  display: flex; gap: 7px;
}
.promo__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: background .2s ease, width .2s ease;
}
.promo__punto.is-activo { background: var(--amarillo); width: 22px; border-radius: 999px; }

@media (max-width: 620px) {
  .promo__nav { display: none; }
  .promo__puntos { bottom: 8px; }
}

/* 9. Catálogo ------------------------------------------------------------- */
.catalogo { padding: clamp(24px, 3.5vw, 44px) 0 clamp(34px, 4vw, 56px); }

/* Bloques con el icono grande arriba y el nombre debajo */
.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--gris-2);
}
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-height: 150px;
  padding: 26px 12px 22px;
  font-family: var(--fuente-titulo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--negro);
  background: transparent;
  transition: color .2s ease, background .2s ease;
}
/* Franja alterna, como en el sitio actual */
.tab:nth-child(odd) { background: var(--gris-claro); }

.tab__icono {
  width: 58px; height: 58px;
  object-fit: contain;
  transition: transform .25s ease, opacity .2s ease;
  opacity: .85;
}
.tab:hover .tab__icono,
.tab:focus-visible .tab__icono { transform: translateY(-2px); opacity: 1; }
.tab:hover,
.tab:focus-visible { color: var(--azul); }

/* Barra azul inferior al pasar el mouse */
.tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--azul);
  transform: scaleX(0);
  transition: transform .22s ease;
}
.tab:hover::after,
.tab:focus-visible::after { transform: scaleX(1); }

.panel { padding-top: 30px; }
.panel[hidden] { display: none; }

.productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.producto {
  display: flex;
  flex-direction: column;
  background: var(--gris-claro);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px 12px 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.producto:hover { transform: translateY(-4px); box-shadow: -6px 8px 18px rgba(78, 78, 78, .3); }

.producto__figura {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.producto__figura img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform .45s ease;
}
.producto:hover .producto__figura img { transform: scale(1.05); }

.producto__etiqueta {
  position: absolute;
  left: 10px; top: 10px;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--fuente-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
}

.producto__nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--azul);
  line-height: 1.35;
  margin: 14px 0 14px;
  flex: 1 1 auto;
}

/* La foto y el nombre son un solo enlace a la ficha del producto; los botones
   quedan fuera para que "Cotizar" siga yendo a WhatsApp. */
.producto__enlace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
}
.producto__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.producto__acciones .btn { width: 100%; }
.producto__ficha {
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-link);
}
.producto__ficha:hover { text-decoration: underline; }

/* "Ver más" usa el mismo botón que "Catálogo" de la cabecera (.btn--catalogo),
   pero ocupando el ancho de la rejilla de productos, que es su hermana dentro
   del contenedor. */
.catalogo__mas { margin-top: 34px; }
.catalogo__mas .btn {
  display: flex;
  width: 100%;
  justify-content: center;
}
/* El encogido del hover se mide en porcentaje: en un botón de 1400 px, el .95
   de la cabecera daría un salto de 70 px. Aquí se ajusta para que el gesto se
   sienta igual, no para que el número sea el mismo. */
.catalogo__mas .btn--catalogo:hover  { transform: scale(.993); }
.catalogo__mas .btn--catalogo:active { transform: scale(.988); }

/* 10. Noticias ------------------------------------------------------------ */
.noticias {
  position: relative;
  isolation: isolate;
  padding: clamp(34px, 4.5vw, 60px) 0;
  background: var(--gris-top);
  /* Columnas visibles del carrusel. El JS lee esta variable. */
  --noticias-visibles: 3;
  --noticias-gap: 24px;
}

/* Textura de la nave, con un velo claro encima para que no compita con las
   tarjetas. Mismo criterio que .bloque-fondo. */
.noticias::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(244, 244, 244, .86), rgba(244, 244, 244, .86)),
    url('../img/fondo-nave.jpg');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
  /* La textura queda casi en gris para que no compita con las tarjetas. */
  filter: grayscale(.55);
}

/* -- Carrusel ------------------------------------------------------------- */
.noticias__carrusel { position: relative; }

.noticias__ventana {
  overflow: hidden;
  /* Deja aire para la sombra de las tarjetas al levantarse en hover. */
  margin: -10px;
  padding: 10px;
}

.noticias__pista {
  display: flex;
  gap: var(--noticias-gap);
  will-change: transform;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.noticias__pista.sin-animacion { transition: none; }

.noticias__pista > .noticia {
  flex: 0 0 calc(
    (100% - (var(--noticias-visibles) - 1) * var(--noticias-gap))
    / var(--noticias-visibles)
  );
}

/* El cursor avisa que se puede arrastrar. */
.noticias__carrusel.es-arrastrable .noticias__ventana { cursor: grab; }
.noticias__carrusel.es-arrastrable .noticias__ventana:active,
.noticias__carrusel.arrastrando  .noticias__ventana { cursor: grabbing; }
.noticias__carrusel.arrastrando .noticia { transform: none; }
.noticias__carrusel.arrastrando .noticia__enlace { pointer-events: none; }

.noticias__nav {
  position: absolute;
  /* Centradas sobre la imagen de la tarjeta (el JS mide su alto real), asi no
     chocan nunca con el recuadro de la fecha. */
  top: calc(var(--noticias-alto-img, 190px) / 2);
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-content: center;
  background: var(--blanco);
  color: var(--azul);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: background .2s ease, color .2s ease, transform .2s ease;
  z-index: 3;
}
.noticias__nav svg { width: 22px; height: 22px; fill: currentColor; }
.noticias__nav:hover { background: var(--azul); color: #fff; transform: translateY(-50%) scale(1.06); }
/* Por defecto van dentro de la ventana; solo salen fuera cuando el contenedor
   tiene margen de sobra. */
.noticias__nav--prev { left: 8px; }
.noticias__nav--next { right: 8px; }
.noticias__nav[hidden] { display: none; }

@media (min-width: 1320px) {
  .noticias__nav--prev { left: -26px; }
  .noticias__nav--next { right: -26px; }
}

/* Cuando hay menos tarjetas que columnas no hace falta carrusel: se ocultan
   los clones y las reales se centran. */
.noticias__carrusel.sin-carrusel .noticia--clon { display: none; }
.noticias__carrusel.sin-carrusel .noticias__pista {
  transform: none !important;
  justify-content: center;
}

.noticias__puntos {
  display: flex; justify-content: center; gap: 9px;
  margin-top: 26px;
}
.noticias__punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .22);
  transition: background .2s ease, width .2s ease;
}
.noticias__punto:hover { background: rgba(0, 0, 0, .40); }
.noticias__punto.is-activo { width: 26px; border-radius: 5px; background: var(--azul); }
.noticias__puntos[hidden] { display: none; }

.noticia {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.noticia:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }

.noticia__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.noticia__figura { position: relative; }
/* 1200 x 630: la medida real de las piezas de Javisac, sin recorte. */
.noticia__figura img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.noticia__fecha {
  position: absolute;
  left: 14px; bottom: -20px;
  width: 56px; height: 56px;
  display: grid; place-content: center; text-align: center;
  background: var(--azul);
  color: #fff;
  border-radius: 10px;
  box-shadow: var(--sombra-sm);
  line-height: 1;
}
.noticia__fecha strong { font-size: 19px; font-weight: 800; display: block; }
.noticia__fecha span   { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

.noticia__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 32px 18px 20px;
}
.noticia__categoria {
  font-family: var(--fuente-ui);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--azul-link);
  margin-bottom: 7px;
}
.noticia__titulo {
  font-size: 16px; font-weight: 700; line-height: 1.35;
  color: var(--negro);
  margin-bottom: 8px;
  /* Los titulares reales son largos: se recortan a 3 lineas. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia__resumen {
  font-size: 13.5px; color: var(--gris); line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noticia__mas {
  margin-top: auto;
  font-family: var(--fuente-ui);
  font-size: 13px; font-weight: 700; color: var(--azul-link);
}
.noticia__mas::after { content: ' →'; }

/* Rejilla sin carrusel: listado de noticias y bloque "Más noticias". */
.noticias__grid-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.noticias__grid-simple .noticia { height: 100%; }
.noticias__pie-enlace { text-align: center; margin-top: 34px; }

/* 10b. Nota individual (single post) -------------------------------------- */
.miga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--fuente-ui);
  font-size: 13px; color: var(--gris);
  margin-bottom: 22px;
}
.miga a { color: var(--gris); }
.miga a:hover { color: var(--azul-link); text-decoration: underline; }
.miga span[aria-hidden] { color: var(--gris-3); }
.miga__actual { color: var(--negro); font-weight: 600; }

.nota { padding: clamp(24px, 3.4vw, 44px) 0 clamp(30px, 4vw, 56px); }

.nota__portada {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.nota__portada img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* Columna de lectura: ancho cómodo, centrada. */
.nota__cuerpo { max-width: 840px; margin-inline: auto; }

.nota__categoria {
  font-family: var(--fuente-ui);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--azul-link);
  margin-bottom: 10px;
}
.nota__titulo {
  font-size: clamp(25px, 3.4vw, 40px);
  font-weight: 800; line-height: 1.22;
  color: var(--negro);
  margin-bottom: 14px;
}
.nota__meta {
  font-family: var(--fuente-ui);
  font-size: 15px; font-weight: 600; color: var(--gris);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--gris-2);
  margin-bottom: 26px;
}
.nota__meta span { color: var(--gris-3); margin-inline: 4px; }

.nota__texto p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--gris);
  margin-bottom: 20px;
}
.nota__texto p:last-child { margin-bottom: 0; }

/* -- Compartir ------------------------------------------------------------ */
.nota__compartir {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(28px, 3.4vw, 42px);
  padding-top: 22px;
  border-top: 1px solid var(--gris-2);
}
.nota__compartir-rotulo {
  font-family: var(--fuente-ui);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--gris);
  margin-right: 4px;
}
.nota__red {
  width: 38px; height: 38px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--gris-claro);
  color: var(--gris);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nota__red svg { width: 20px; height: 20px; fill: currentColor; }
.nota__red:hover { transform: translateY(-2px); color: #fff; }
.nota__red--wa:hover   { background: #25D366; }
.nota__red--fb:hover   { background: #1877F2; }
.nota__red--in:hover   { background: #0A66C2; }
.nota__red--link:hover { background: var(--azul); }
.nota__red.is-copiado  { background: var(--azul); color: #fff; }

/* -- Nota anterior / siguiente -------------------------------------------- */
.nota__saltos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(26px, 3vw, 38px);
}
.nota__salto {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: var(--gris-claro);
  border-radius: var(--radio-sm);
  color: inherit;
  transition: background .2s ease, transform .2s ease;
}
.nota__salto:hover { background: var(--gris-2); transform: translateY(-2px); }
.nota__salto--next { text-align: right; }
.nota__salto-rotulo {
  font-family: var(--fuente-ui);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--azul-link);
}
.nota__salto-titulo {
  font-size: 14.5px; font-weight: 700; line-height: 1.4;
  color: var(--negro);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Listado de noticias --------------------------------------------------- */
.listado { padding: clamp(24px, 3.4vw, 44px) 0 clamp(36px, 4.5vw, 64px); }
.listado__cabecera { text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.listado__vacio { text-align: center; color: var(--gris); padding: 40px 0; }

/* -- 404 de nota ----------------------------------------------------------- */
.nota-vacia { text-align: center; padding: clamp(50px, 8vw, 110px) 0; }
.nota-vacia__codigo {
  font-size: clamp(58px, 9vw, 104px); font-weight: 800; line-height: 1;
  color: var(--gris-2);
}
.nota-vacia__titulo { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 10px 0 8px; }
.nota-vacia__texto  { color: var(--gris); margin-bottom: 26px; }

/* 11. TikTok -------------------------------------------------------------- */
.tiktok {
  padding: clamp(34px, 4.5vw, 60px) 0;
  background: var(--blanco);
  --tk-vis: var(--tk-esc, 3);
  --tk-gap: 22px;
}

/* -- Cabecera ------------------------------------------------------------- */
.tiktok__cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.tiktok__cabecera .seccion__antetitulo,
.tiktok__cabecera .seccion__titulo { text-align: left; }
.tiktok__cabecera .seccion__titulo { margin-bottom: 0; }

.tiktok__perfil {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--negro);
  color: #fff;
  font-family: var(--fuente-ui);
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .2s ease, transform .2s ease;
}
.tiktok__perfil:hover { background: var(--azul); color: #fff; transform: translateY(-2px); }
.tiktok__perfil svg { width: 20px; height: 20px; fill: currentColor; }
.tiktok__usuario { font-style: normal; opacity: .6; font-weight: 400; }

/* -- Carrusel ------------------------------------------------------------- */
.tiktok__carrusel { position: relative; }

.tiktok__ventana {
  overflow: hidden;
  margin: -10px;
  padding: 10px;
  cursor: grab;
}
.tiktok__carrusel.arrastrando .tiktok__ventana { cursor: grabbing; }

.tiktok__pista {
  display: flex;
  gap: var(--tk-gap);
  list-style: none;
  will-change: transform;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.tiktok__pista.sin-animacion { transition: none; }

.tiktok__slide {
  flex: 0 0 calc((100% - (var(--tk-vis) - 1) * var(--tk-gap)) / var(--tk-vis));
  min-width: 0;
}

/* Tarjeta 9:16, la proporción nativa de TikTok. */
.tiktok__card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #0e1116;
  box-shadow: 0 10px 30px rgba(20, 25, 34, .14);
}
.tiktok__card iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  /* Hasta que el visitante le da a reproducir, el iframe no recibe el puntero:
     si lo recibiera, se comeria el gesto y no se podria arrastrar el carrusel. */
  pointer-events: none;
}
.tiktok__card.is-abierto iframe { pointer-events: auto; }

/* Tapa: ocupa toda la tarjeta, dispara la reproducción y deja arrastrar. */
.tiktok__tapa {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  width: 100%;
  background: linear-gradient(rgba(14, 17, 22, .10), rgba(14, 17, 22, .45));
  cursor: pointer;
  transition: opacity .2s ease;
  z-index: 2;
}
.tiktok__card.is-abierto .tiktok__tapa { display: none; }

.tiktok__play {
  width: 62px; height: 62px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--negro);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.tiktok__play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.tiktok__tapa:hover .tiktok__play { transform: scale(1.08); background: var(--azul); color: #fff; }
.tiktok__carrusel.arrastrando .tiktok__play { transform: none; }

/* Marcador mientras el reproductor todavía no se ha pedido. */
.tiktok__espera {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  color: rgba(255, 255, 255, .22);
}
.tiktok__espera svg { width: 46px; height: 46px; fill: currentColor; }
.tiktok__card.is-cargado .tiktok__espera { display: none; }

.tiktok__nojs {
  position: absolute; inset: auto 0 0 0;
  padding: 14px;
  text-align: center;
  color: #fff; font-size: 13px; font-weight: 600;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}

/* -- Controles ------------------------------------------------------------ */
.tiktok__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-content: center;
  background: var(--blanco);
  color: var(--negro);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(20, 25, 34, .20);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
  z-index: 3;
}
.tiktok__nav svg { width: 24px; height: 24px; fill: currentColor; }
.tiktok__nav:hover { background: var(--azul); color: #fff; }
.tiktok__nav[disabled] { opacity: .3; cursor: default; }
.tiktok__nav[disabled]:hover { background: var(--blanco); color: var(--negro); }
.tiktok__nav--prev { left: 8px; }
.tiktok__nav--next { right: 8px; }
.tiktok__nav[hidden] { display: none; }

@media (min-width: 1320px) {
  .tiktok__nav--prev { left: -26px; }
  .tiktok__nav--next { right: -26px; }
}

.tiktok__puntos {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 9px;
  margin-top: 28px;
}
.tiktok__punto {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .20);
  transition: background .2s ease, width .2s ease;
}
.tiktok__punto:hover { background: rgba(0, 0, 0, .38); }
.tiktok__punto.is-activo { width: 26px; background: var(--azul); }
.tiktok__puntos[hidden] { display: none; }

/* 12. Misión / Visión ----------------------------------------------------- */
.mision {
  position: relative;
  isolation: isolate;
  background: var(--azul);
  padding: clamp(40px, 5vw, 70px) 0;
  overflow: hidden;
}

/* Fondo sin imagen: luz, sombra y un grano fino. Cubre cualquier pantalla,
   no se pixela por grande que sea el monitor y pesa 0 KB.
   Capa 1: luz arriba a la izquierda.
   Capa 2: sombra abajo a la derecha, da volumen.
   Capa 3: un azul más profundo al centro, para que el bloque no quede plano. */
.mision::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(125% 100% at 6% -20%,   rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%),
    radial-gradient(105% 100% at 106% 118%, rgba(0, 0, 0, .40),       rgba(0, 0, 0, 0)       64%),
    radial-gradient(80% 130% at 58% 45%,    rgba(0, 38, 96, .44),     rgba(0, 38, 96, 0)     72%);
}

/* Grano tipo acero cepillado, generado con ruido SVG: es una textura de verdad,
   sin bordes ni patrón reconocible, y al ser ruido el mosaico no se nota. */
.mision::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .7;
  /* soft-light mantiene el azul; con 'normal' el grano lo lavaría. */
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* Si el navegador no soporta mix-blend-mode, el grano se atenúa para que no
   quede un velo gris sobre el azul. */
@supports not (mix-blend-mode: soft-light) {
  .mision::after { opacity: .09; }
}

.mision__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 38px;
  align-items: center;
}

/* -- Video: portada local, el iframe llega solo al pulsar play ------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.video__portada {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, filter .3s ease;
}
.video__boton {
  position: absolute; inset: 0;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .48));
  cursor: pointer;
  color: #fff;
}
.video:hover .video__portada { transform: scale(1.04); }

.video__play {
  width: 76px; height: 76px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--azul);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.video__play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.video__boton:hover .video__play { transform: scale(1.09); background: var(--amarillo); color: var(--negro); }

.video__rotulo {
  font-family: var(--fuente-titulo);
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video.is-abierto .video__portada,
.video.is-abierto .video__boton { display: none; }

/* -- Acordeón -------------------------------------------------------------- */
.acordeon { display: grid; gap: 14px; }

.acordeon__item {
  position: relative;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio-sm);
  overflow: hidden;
  backdrop-filter: blur(3px);
  transition: background .25s ease, border-color .25s ease;
}
.acordeon__item:hover { background: rgba(255, 255, 255, .14); }
.acordeon__item.is-abierto {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .3);
}
/* Barra amarilla que crece al abrir. */
.acordeon__item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--amarillo);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.acordeon__item.is-abierto::before { transform: scaleY(1); }

.acordeon__cabecera {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 18px 17px 22px;
  background: none;
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: 17px; font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.acordeon__icono {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(255, 210, 0, .16);
  color: var(--amarillo);
  transition: background .25s ease, color .25s ease;
}
.acordeon__icono svg { width: 22px; height: 22px; fill: currentColor; }
.acordeon__item.is-abierto .acordeon__icono { background: var(--amarillo); color: var(--azul); }

.acordeon__titulo { flex: 1 1 auto; }

.acordeon__flecha {
  flex: 0 0 auto;
  display: grid; place-content: center;
  width: 26px; height: 26px;
  color: rgba(255, 255, 255, .7);
  transition: transform .3s ease, color .25s ease;
}
.acordeon__flecha svg { width: 22px; height: 22px; fill: currentColor; }
.acordeon__item.is-abierto .acordeon__flecha { transform: rotate(180deg); color: #fff; }

/* Apertura suave sin medir alturas: la fila pasa de 0fr a 1fr. */
.acordeon__envoltorio {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1);
}
.acordeon__item.is-abierto .acordeon__envoltorio { grid-template-rows: 1fr; }
.acordeon__panel { overflow: hidden; }
.acordeon__panel p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 14.5px; line-height: 1.8;
  color: rgba(255, 255, 255, .94);
}

@media (prefers-reduced-motion: reduce) {
  .acordeon__envoltorio { transition: none; }
}

/* 13. Claim --------------------------------------------------------------- */
.claim {
  background: var(--gris-2);
  padding: clamp(34px, 4vw, 56px) 0;
  text-align: center;
}
.claim__titulo {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  color: var(--azul-link);
  margin: 0;
}
.claim__sub {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--negro);
  margin: 4px 0 0;
}

/* 14. Sedes --------------------------------------------------------------- */
.sedes {
  position: relative;
  isolation: isolate;
  padding: clamp(34px, 4.5vw, 58px) 0;
  background: #E6E9EE;
}

/* Fondo tipo plano técnico, todo en CSS: una retícula fina con líneas maestras
   cada 240px, luz al centro y un grano muy leve. Las líneas van en los ejes
   (no en diagonal) para que queden nítidas y no vibren. */
.sedes::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    /* Solo las líneas maestras, muy tenues: hacen de plano de fondo sin
       competir con la red de nodos, que es la que tiene que verse. */
    repeating-linear-gradient(to right,  rgba(0, 74, 168, .055) 0 1px, transparent 1px 240px),
    repeating-linear-gradient(to bottom, rgba(0, 74, 168, .055) 0 1px, transparent 1px 240px),
    /* Luz al centro y sombra en los bordes, para que no quede plano */
    radial-gradient(120% 90% at 50% 0%,   rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 66%),
    radial-gradient(110% 100% at 50% 115%, rgba(0, 30, 74, .17),    rgba(0, 30, 74, 0)     66%);
}

/* Red de nodos que reacciona al mouse.
   Es un <canvas> que crea el JS y se dibuja detrás del contenido. Los nodos
   van a la deriva, se unen con líneas cuando están cerca y se acercan al
   cursor. No se crea si el visitante pidió menos animación, y el bucle se
   detiene cuando la sección no está en pantalla o la pestaña está en segundo
   plano, así no gasta batería de fondo. */
.fondo-vivo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.fondo-vivo.is-listo { opacity: 1; }

/* Mismo grano que el bloque azul, aquí apenas perceptible. */
.sedes::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
@supports not (mix-blend-mode: soft-light) {
  .sedes::after { opacity: .05; }
}

.sedes__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  align-items: start;
}

/* -- Lista de la izquierda ------------------------------------------------- */
.sedes__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 14px;
  box-shadow: var(--sombra-sm);
}

.sedes__ciudad {
  font-family: var(--fuente-ui);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris-menu);
  padding: 12px 10px 6px;
}
.sedes__ciudad:first-child { padding-top: 4px; }

.sedes__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radio-sm);
  text-align: left;
  color: var(--negro);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.sedes__item:hover { background: var(--gris-claro); }
.sedes__item.is-activo { background: var(--azul); color: #fff; }

.sedes__pin {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--gris-claro);
  color: var(--azul);
  transition: background .2s ease, color .2s ease;
}
.sedes__pin svg { width: 17px; height: 17px; fill: currentColor; }
.sedes__item.is-activo .sedes__pin { background: var(--amarillo); color: var(--azul); }

.sedes__etiqueta { display: grid; gap: 2px; min-width: 0; }
.sedes__etiqueta strong {
  font-family: var(--fuente-titulo);
  font-size: 15px; font-weight: 700; line-height: 1.2;
}
.sedes__etiqueta small {
  font-family: var(--fuente-ui);
  font-size: 12px; line-height: 1.3;
  color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sedes__item.is-activo .sedes__etiqueta small { color: rgba(255, 255, 255, .82); }

/* -- Panel de la derecha --------------------------------------------------- */
.sedes__panel {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.sedes__visor {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--gris-2);
  overflow: hidden;
}
.sedes__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .3s ease;
}
.sedes__foto.is-cambiando { opacity: 0; }

.sedes__mapa { position: absolute; inset: 0; background: var(--gris-2); }
.sedes__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.sedes__mapa[hidden] { display: none; }

/* Conmutador Foto / Mapa */
.sedes__vistas {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  z-index: 2;
}
.sedes__vista {
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--fuente-ui);
  font-size: 13px; font-weight: 700;
  color: var(--gris);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.sedes__vista:hover { color: var(--negro); }
.sedes__vista.is-activo { background: var(--azul); color: #fff; }

.sedes__datos { padding: clamp(18px, 2.4vw, 28px); }
.sedes__nombre {
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 800;
  color: var(--azul);
  margin-bottom: 14px;
}

.sedes__dato {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--gris);
  margin-bottom: 10px;
}
.sedes__ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--gris-claro);
  color: var(--azul);
  margin-top: 1px;
}
.sedes__ico svg { width: 15px; height: 15px; fill: currentColor; }

.sedes__telefonos a { color: var(--negro); font-weight: 600; }
.sedes__telefonos a:hover { color: var(--azul-link); text-decoration: underline; }
.sedes__telefonos span { color: rgba(0, 0, 0, .28); margin: 0 6px; }

.sedes__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sedes__acciones .btn { font-size: 14px; padding: 12px 24px; }
.btn--wa { background: #25D366; display: inline-flex; align-items: center; gap: 8px; }
.btn--wa:hover { background: #1eb85a; }
.btn--wa svg { width: 18px; height: 18px; fill: currentColor; }

/* -- Respaldo sin JS ------------------------------------------------------- */
/* Mientras el JS no arranca se ve esta lista y no el panel; al arrancar se
   invierte. Asi la seccion sirve igual con el JS desactivado. */
.sedes--sin-js .sedes__layout { display: none; }
.sedes__respaldo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sedes--con-js .sedes__respaldo { display: none; }
.sedes__ficha {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 18px 20px;
  box-shadow: var(--sombra-sm);
}
.sedes__ficha h3 { font-size: 17px; color: var(--azul); margin-bottom: 8px; }
.sedes__ficha p { font-size: 14px; color: var(--gris); line-height: 1.6; margin-bottom: 6px; }

/* 15. Contacto ------------------------------------------------------------ */
.contacto {
  position: relative;
  isolation: isolate;
  background: var(--azul);
  padding: clamp(44px, 6vw, 90px) 0;
  overflow: hidden;
}

/* Profundidad detrás de la estructura, para que el azul no quede plano. */
.contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(110% 80% at 50% 0%,    rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 100% at 50% 120%, rgba(0, 26, 66, .45),     rgba(0, 26, 66, 0)     65%);
}

/* La estructura de la nave: la dibuja el JS en un <canvas>. */
.fondo-obra {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
.fondo-obra.is-listo { opacity: 1; }

.contacto__caja {
  max-width: 560px;
  margin-inline: auto;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.contacto__cabecera { text-align: center; margin-bottom: 22px; }
.contacto__titulo {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 6px;
}
.contacto__sub { font-size: 15px; font-weight: 500; color: var(--negro); margin: 0; }

.form__intro { font-size: 15px; font-weight: 600; color: var(--negro); margin-bottom: 18px; }
.form__paso[hidden] { display: none; }

.campo { margin-bottom: 16px; border: 0; padding: 0; }
.campo--doble  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo--triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Un selector bloqueado se ve apagado: deja claro que primero toca el de arriba. */
.campo__input:disabled { background: var(--gris-claro); color: var(--gris); cursor: not-allowed; }

.campo__label {
  display: block;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
  margin-bottom: 6px;
  padding: 0;
}

.campo__input {
  width: 100%;
  font-family: var(--fuente-ui);
  font-size: 14px;
  color: var(--negro);
  background: var(--blanco);
  border: 1px solid #d5d8dd;
  border-radius: var(--radio-sm);
  padding: 11px 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea.campo__input { resize: vertical; min-height: 96px; }
.campo__input:focus {
  outline: none;
  border-color: var(--azul-link);
  box-shadow: 0 0 0 3px rgba(0, 110, 223, .12);
}
.campo__input.is-error { border-color: #d64545; }

/* Tipo de cliente: dos tarjetas en vez de dos radios sueltos. El control nativo
   se oculta pero sigue ahí, así que el teclado y los lectores de pantalla
   funcionan igual; lo que se ve es la tarjeta. */
.opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--blanco);
  border: 2px solid var(--gris-2);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.opcion:hover {
  border-color: var(--gris-3);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .07);
}

/* El radio nativo se queda, invisible pero operable. */
.opcion input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

.opcion__icono {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--gris-claro);
  color: var(--gris-menu);
  transition: background .2s ease, color .2s ease;
}
.opcion__icono svg { width: 21px; height: 21px; fill: currentColor; }

.opcion__texto { display: grid; gap: 2px; min-width: 0; }
.opcion__texto strong {
  font-family: var(--fuente-titulo);
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  color: var(--negro);
}
.opcion__texto small {
  font-family: var(--fuente-ui);
  font-size: 12px; line-height: 1.3;
  color: var(--gris);
}

/* Palomita de la esquina: solo aparece en la elegida. */
.opcion__check {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.opcion__check svg { width: 13px; height: 13px; fill: currentColor; }

/* -- Elegida --------------------------------------------------------------- */
.opcion:has(input:checked) {
  border-color: var(--azul);
  background: #F2F7FF;
}
.opcion:has(input:checked) .opcion__icono { background: var(--azul); color: #fff; }
.opcion:has(input:checked) .opcion__texto strong { color: var(--azul); }
.opcion:has(input:checked) .opcion__check { opacity: 1; transform: scale(1); }

/* Foco de teclado: el anillo va en la tarjeta, no en el radio escondido. */
.opcion:has(input:focus-visible) {
  outline: 3px solid rgba(0, 74, 168, .35);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .opcion, .opcion__check { transition: none; }
  .opcion:hover { transform: none; }
}

.check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--gris);
  margin-bottom: 18px;
}
.check input { margin-top: 3px; accent-color: var(--azul); }

.form__botones { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.form__botones .btn--linea { padding: 13px 24px; border-radius: var(--radio-sm); }

/* 16. Pie y flotantes ----------------------------------------------------- */
/* Franja azul a todo el ancho, pegada encima del copyright. El enlace es la
   barra completa: así el área para hacer clic es toda la franja. */
.reclamos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--azul);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  transition: background .2s ease;
}
.reclamos:hover { background: var(--azul-osc); color: #fff; }
.reclamos__icono { display: grid; place-content: center; }
.reclamos__icono svg { width: 26px; height: 26px; fill: currentColor; }
.reclamos__texto { line-height: 1.2; }

@media (max-width: 620px) {
  .reclamos { gap: 10px; padding: 14px 16px; letter-spacing: .02em; }
  .reclamos__icono svg { width: 21px; height: 21px; }
}

.pie__legal { background: var(--negro); color: rgba(255, 255, 255, .82); }
.pie__legal p { margin: 0; padding: 13px 0; font-size: 13px; text-align: center; }
.pie__legal a { color: #fff; }
.pie__legal a:hover { text-decoration: underline; }

.flotante {
  position: fixed;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

/* WhatsApp: solo el circulo; el globo aparece al pasar el mouse */
.wa {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--negro);
}
.wa:hover { color: var(--negro); }

.wa__icono {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s ease;
}
.wa__icono svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.wa:hover .wa__icono { transform: scale(1.06); background: #1FBE5B; }

/* Anillo que late para llamar la atencion */
.wa__icono::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: wa-pulso 2.6s ease-out infinite;
}
@keyframes wa-pulso {
  0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0); }
}

.wa__globo {
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 15px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .25s ease, transform .25s ease;
}
.wa:hover .wa__globo,
.wa:focus-visible .wa__globo { opacity: 1; transform: translateX(0); }

.flotante--carrito {
  right: 18px; bottom: 18px;
  width: 52px; height: 52px;
  justify-content: center;
  border-radius: 12px;
  background: var(--azul);
  color: #fff;
}
.flotante--carrito svg { width: 24px; height: 24px; }
.flotante__contador {
  position: absolute;
  top: -8px; right: -8px;
  min-width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--fuente-ui);
  font-size: 12px;
  font-weight: 700;
}

.ir-arriba {
  position: fixed;
  right: 18px; bottom: 82px;
  z-index: 150;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--negro);
  color: #fff;
  opacity: .85;
}
.ir-arriba:hover { opacity: 1; background: var(--azul); }
.ir-arriba svg { width: 22px; height: 22px; }

/* 17. Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .productos       { grid-template-columns: repeat(3, 1fr); }
  .tiktok         { --tk-vis: var(--tk-tab, 2); }
  .noticias        { --noticias-visibles: 2; }
  .noticias__grid-simple { grid-template-columns: repeat(2, 1fr); }
  .sedes__layout   { grid-template-columns: 1fr; }
  /* La lista pasa a ser una fila de fichas deslizables sobre el panel. */
  .sedes__lista {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .sedes__ciudad { display: none; }
  .sedes__item   { flex: 0 0 auto; scroll-snap-align: start; }
  .sedes__etiqueta small { max-width: 150px; }
  .mision__inner   { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* En movil la cabecera crece: logo + buscador en dos filas */
  :root { --alto-cabecera: 130px; }

  .hamburguesa { display: block; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .cabecera__top-inner { flex-wrap: wrap; gap: 14px; }
  /* El margen automático empuja a la derecha todo lo que viene después, así
     que Catálogo y la hamburguesa quedan juntos en el extremo y el hueco
     sobrante se va entre el logo y ellos. */
  .btn--catalogo { min-width: 0; padding: 12px 18px; margin-left: auto; }

  /* El logo se encoge con la pantalla en vez de empujar al botón del menú a
     una segunda fila. Con los 170px fijos, por debajo de 376px no cabían
     logo + Catálogo + hamburguesa y la cabecera crecía 54px de golpe, con la
     hamburguesa sola en una fila y un hueco al lado. Se nota sobre todo en los
     móviles de 360-375px, que son la mayoría. */
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo img { width: clamp(120px, 38vw, 170px); }

  /* La hamburguesa cierra la fila, a plomo con el extremo del buscador de
     abajo, y pegada al botón de Catálogo. */
  .hamburguesa { margin-left: 0; }

  .cabecera__nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    background: var(--blanco);
    box-shadow: -8px 0 26px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    z-index: 195;
  }
  .cabecera__nav.is-abierto { transform: translateX(0); }
  .cabecera__nav-inner { flex-direction: column; align-items: stretch; padding-top: 72px; }

  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__item { border-bottom: 1px solid var(--gris-top); }
  .menu__link { padding: 14px 6px; border-radius: 0; justify-content: space-between; }

  .submenu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    padding: 0 0 8px 12px;
    display: none;
  }
  .menu__item--dropdown.is-abierto .submenu { display: block; }

  /* En el cajón móvil el correo y el acceso van uno debajo del otro. */
  .cabecera__extra { flex-direction: column; align-items: flex-start; gap: 0; }
  .cabecera__mail  { padding: 16px 6px; }
  .cabecera__acceso {
    width: auto; height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 6px;
    grid-auto-flow: column;
    font-family: var(--fuente-ui);
    font-size: 15px;
    font-weight: 500;
  }
  /* En móvil el icono solo no se entiende: se acompaña con el texto. */
  .cabecera__acceso::after { content: 'Acceder al panel'; }

  .destacados__grid { grid-template-columns: 1fr; }
  .productos        { grid-template-columns: repeat(2, 1fr); }
  .tabs { grid-template-columns: repeat(3, 1fr); }
  .tab { min-height: 122px; font-size: 13.5px; gap: 11px; padding: 18px 8px 16px; }
  .tab__icono { width: 44px; height: 44px; }
}

@media (max-width: 400px) {
  /* Lo justo para que logo, Catálogo y hamburguesa quepan en una fila hasta
     los 320px, que es lo más estrecho que se ve hoy. */
  .cabecera__top-inner { gap: 10px; }
  .btn--catalogo { padding: 11px 14px; font-size: 14px; }
}

/* La barra gris entre el menú de escritorio y el móvil ---------------------
   Justo por encima de 900px aparece el menú completo, y con los siete enlaces
   más el correo largo no cabía: la página se iba de lado hasta los ~1100px.
   Es el rango de las tablets apaisadas y los portátiles pequeños. Se aprieta
   el menú y, cuando aun así no entra, se esconde el texto del correo: la
   puertita de acceso al panel se queda, y el correo sigue en el pie. */
@media (min-width: 901px) and (max-width: 1140px) {
  .menu { gap: 0; }
  .menu__link { font-size: 15px; padding: 12px 9px; }
  .cabecera__nav-inner { gap: 12px; }
  .cabecera__mail { font-size: 14px; }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .cabecera__mail { display: none; }
}

@media (max-width: 620px) {
  .hero__nav { display: none; }
  .sede { grid-template-columns: 1fr; }
  .sedes__respaldo { grid-template-columns: 1fr; }
  .sedes__acciones .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .campo--doble,
  .campo--triple { grid-template-columns: 1fr; }
  .opciones { grid-template-columns: 1fr; }
  .form__botones { grid-template-columns: 1fr; }
  .tiktok { --tk-vis: var(--tk-mov, 1); --tk-gap: 16px; }
  .tiktok__cabecera { flex-direction: column; align-items: flex-start; }
  .noticias__grid-simple { grid-template-columns: 1fr; }
  .nota__saltos { grid-template-columns: 1fr; }
  .nota__salto--next { text-align: left; }
  .noticias { --noticias-visibles: 1; --noticias-gap: 16px; }
  /* La textura fija se vuelve pesada en movil: se ancla al scroll. */
  .noticias::before { background-attachment: scroll, scroll; }
  .wa__globo { display: none; }
  .wa__icono { width: 50px; height: 50px; }
  .wa__icono svg { width: 28px; height: 28px; }
  .productos { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .producto__nombre { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 18. Carrito / lista de pedido ------------------------------------------- */
.carrito__fondo {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.carrito__fondo.is-visible { opacity: 1; }

.carrito {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 300;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  box-shadow: -10px 0 34px rgba(0, 0, 0, .22);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
}
.carrito.is-abierto { transform: translateX(0); visibility: visible; }

/* Cabecera */
.carrito__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gris-2);
  flex: 0 0 auto;
}
.carrito__icono {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--negro);
  flex: 0 0 auto;
}
.carrito__icono svg { width: 24px; height: 24px; }
.carrito__badge {
  position: absolute;
  top: -7px; right: -9px;
  min-width: 19px; height: 19px;
  display: grid; place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--fuente-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.carrito__titulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--negro);
}
.carrito__cerrar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--gris);
  transition: background .2s ease, color .2s ease;
  flex: 0 0 auto;
}
.carrito__cerrar svg { width: 18px; height: 18px; }
.carrito__cerrar:hover { background: var(--gris-top); color: var(--negro); }

/* Cuerpo */
.carrito__cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 20px;
}

.carrito__vacio {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.carrito__vacio-icono {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gris-top);
  color: #b9c2cd;
  margin-bottom: 10px;
}
.carrito__vacio-icono svg { width: 40px; height: 40px; }
.carrito__vacio-texto {
  font-size: 15px;
  color: var(--gris);
  margin-bottom: 18px;
}

/* Items (listos para cuando se conecte la logica de pedido) */
.carrito__items { display: grid; gap: 14px; }
.carrito__item {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gris-top);
}
.carrito__item img { width: 66px; height: 52px; object-fit: cover; border-radius: 6px; }
.carrito__item-nombre { font-size: 13.5px; font-weight: 700; color: var(--azul); line-height: 1.35; }
.carrito__item-meta   { font-size: 12.5px; color: var(--gris); }
.carrito__item-quitar { color: var(--gris); width: 28px; height: 28px; border-radius: 50%; }
.carrito__item-quitar:hover { background: var(--gris-top); color: #c0392b; }

/* Pie */
.carrito__pie {
  flex: 0 0 auto;
  display: grid;
  /* Tres columnas para las ventajas; el bloque de acciones ocupa la fila entera. */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 14px;
  border-top: 1px solid var(--gris-2);
  background: var(--gris-top);
}
.carrito__acciones { grid-column: 1 / -1; }
.carrito__ventaja {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  font-family: var(--fuente-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gris);
  line-height: 1.25;
}
.carrito__ventaja svg { width: 22px; height: 22px; color: var(--azul); }

@media (max-width: 620px) {
  .carrito { width: 100vw; }
  .carrito__titulo { font-size: 17px; }
}

/* 19. Mega menú ------------------------------------------------------------ */
/* Interlineado de las filas a la mitad respecto de la primera versión:
   el relleno de cada fila y los huecos entre filas se redujeron a la mitad. */
/* El panel se ancla a la barra de navegacion, no al item, para ocupar
   todo el ancho: por eso el item pasa a position: static.
   Ojo: solo de 901px para arriba. En movil la barra es un cajon lateral con
   position: fixed y, si esta regla la pisaba, el cajon cerrado quedaba fuera
   del viewport pero sumando 320px de ancho: la pagina se podia desplazar en
   horizontal y asomaba el menu. */
@media (min-width: 901px) {
  .cabecera__nav { position: relative; }
}
.menu__item--mega { position: static; }

.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 40;
  background: var(--blanco);
  border-top: 1px solid var(--gris-2);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
  padding: 16px 0 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.menu__item--mega:hover .mega,
.menu__item--mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 235px));
  justify-content: start;
  gap: 5px 46px;
  align-items: start;
}

.mega__col { display: grid; gap: 1px; align-content: start; }

.mega__titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fuente-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--azul);
  padding: 3px 0;
  transition: color .2s ease;
}
.mega__titulo:hover { color: var(--azul-link); }
.mega__icono { display: grid; place-items: center; color: var(--azul-link); flex: 0 0 auto; }
.mega__icono svg { width: 17px; height: 17px; }

.mega__hijos {
  display: grid;
  gap: 0;
  padding: 1px 0 4px 26px;
}
.mega__hijos a {
  position: relative;
  display: block;
  font-family: var(--fuente-ui);
  font-size: 14px;
  font-weight: 400;
  color: #a2a9b3;
  padding: 1px 0 1px 14px;
  transition: color .2s ease;
}
.mega__hijos a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
}
.mega__hijos a:hover { color: var(--azul-link); }

/* En movil el mega se comporta como acordeon dentro del panel lateral */
@media (max-width: 900px) {
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: 0;
    padding: 0 0 10px 12px;
    display: none;
  }
  .menu__item--mega.is-abierto .mega { display: block; }
  .menu__item--mega:hover .mega { display: none; }
  .menu__item--mega.is-abierto:hover .mega { display: block; }

  .mega__inner { grid-template-columns: 1fr; gap: 0; padding-inline: 0; }
  .mega__titulo { font-size: 15px; padding: 9px 0; }
  .mega__hijos { padding-left: 26px; }
}

/* 20. Fichas de datos técnicos --------------------------------------------- */
/* Animacion: la pista se desliza en vertical, como pasar hojas de un
   catalogo tecnico. */
.fichas { padding: clamp(10px, 1.8vw, 22px) 0 clamp(20px, 3vw, 34px); }

.fichas__carrusel {
  position: relative;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
}

.fichas__ventana {
  overflow: hidden;
  aspect-ratio: 1920 / 494;
  border-radius: var(--radio) var(--radio) 0 0;
  cursor: grab;
}
.fichas__carrusel.arrastrando .fichas__ventana { cursor: grabbing; }
.fichas__slide img { user-select: none; -webkit-user-drag: none; }
.fichas__pista {
  height: 100%;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

.fichas__slide {
  height: 100%;
  margin: 0;
}
.fichas__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--blanco);
}

.fichas__nav {
  position: absolute;
  right: 14px;
  z-index: 5;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--azul);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: background .2s ease, color .2s ease;
}
.fichas__nav:hover { background: var(--azul); color: #fff; }
.fichas__nav svg { width: 23px; height: 23px; }
/* Al ser vertical, las flechas van apiladas a la derecha */
.fichas__nav--prev { top: calc(50% - 46px); }
.fichas__nav--next { top: calc(50% + 6px); }

.fichas__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px;
  border-top: 1px solid var(--gris-2);
  background: var(--gris-top);
  border-radius: 0 0 var(--radio) var(--radio);
}
.fichas__nombre {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--azul);
}
.fichas__contador {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .fichas__nav { width: 34px; height: 34px; right: 6px; }
  .fichas__nav--prev { top: calc(50% - 38px); }
  .fichas__nav--next { top: calc(50% + 4px); }
  .fichas__nombre { font-size: 13px; }
}

/* 21. Página de catálogo (filtros + paginación) ---------------------------- */
.catalogo-pag { padding: clamp(26px, 3.4vw, 44px) 0 clamp(34px, 4vw, 60px); }

.catalogo-pag__layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}

/* --- Barra lateral --- */
.filtros { position: sticky; top: calc(var(--alto-pegado) + 16px); }
.filtros__bloque + .filtros__bloque { margin-top: 30px; }

.filtros__titulo {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--azul-link);
  margin-bottom: 12px;
}

.filtros__buscar {
  width: 100%;
  font-family: var(--fuente-ui);
  font-size: 14px;
  color: var(--negro);
  background: var(--blanco);
  border: 1px solid #cfd6e0;
  border-radius: 6px;
  padding: 10px 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.filtros__buscar:focus {
  outline: none;
  border-color: var(--azul-link);
  box-shadow: 0 0 0 3px rgba(0, 110, 223, .12);
}

.filtros__lista { display: grid; gap: 2px; }

.filtros__opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}
.filtros__opcion:hover { background: var(--gris-top); }
.filtros__opcion input { position: absolute; opacity: 0; width: 0; height: 0; }

.filtros__marca {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border: 2px solid #b9c6d8;
  border-radius: 4px;
  background: var(--blanco);
  position: relative;
  transition: border-color .18s ease, background .18s ease;
}
.filtros__marca::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .18s ease;
}
.filtros__opcion input:checked ~ .filtros__marca {
  background: var(--azul);
  border-color: var(--azul);
}
.filtros__opcion input:checked ~ .filtros__marca::after { transform: rotate(45deg) scale(1); }
.filtros__opcion input:focus-visible ~ .filtros__marca {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

.filtros__texto {
  flex: 1 1 auto;
  font-family: var(--fuente-ui);
  font-size: 15px;
  color: var(--negro);
}
.filtros__cuenta {
  font-family: var(--fuente-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--gris);
  background: var(--gris-top);
  border-radius: 999px;
  padding: 2px 8px;
}

.filtros__limpiar {
  margin-top: 14px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-link);
  text-decoration: underline;
}
.filtros__limpiar:hover { color: var(--azul); }

/* --- Resultados --- */
.catalogo-pag__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.catalogo-pag__titulo {
  order: 2;
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  color: var(--azul-link);
}
.catalogo-pag__cuenta {
  order: 1;
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: 14px;
  color: var(--gris);
}

.productos--catalogo { grid-template-columns: repeat(3, 1fr); }
.producto[hidden] { display: none !important; }

.catalogo-pag__vacio {
  padding: 50px 0;
  text-align: center;
  font-size: 15px;
  color: var(--gris);
}

/* --- Paginación --- */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
}
.paginacion:empty { display: none; }
.paginacion button {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--fuente-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--negro);
  transition: background .18s ease, color .18s ease;
}
.paginacion button:hover { background: var(--gris-top); color: var(--azul); }
.paginacion button.is-activo {
  background: var(--azul);
  color: #fff;
  font-weight: 700;
}
.paginacion button[disabled] { opacity: .4; cursor: default; }
.paginacion button[disabled]:hover { background: none; color: var(--negro); }

@media (max-width: 1000px) {
  .catalogo-pag__layout { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .filtros__lista { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .productos--catalogo { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* En móvil el buscador de la cabecera queda justo encima de este, y salen
     dos cajas que dicen «Buscar» a un dedo de distancia. Se esconde esta y
     manda la de arriba.

     El campo NO se quita del HTML: sigue leyéndose para que un enlace con ?q=
     llegue filtrado, y «Limpiar filtros» sigue saliendo para deshacerlo. */
  .filtros__bloque--buscador { display: none; }
}

@media (max-width: 760px) {
  .productos--catalogo { grid-template-columns: repeat(2, 1fr); }
  .catalogo-pag__cabecera { flex-direction: column; align-items: flex-start; gap: 4px; }
  .catalogo-pag__titulo { order: 1; }
  .catalogo-pag__cuenta { order: 2; }
}

/* 22. Ficha de producto (producto.php) ------------------------------------ */

/* Franja azul con el nombre, en la línea del resto del sitio. */
.ficha-cabecera {
  padding-block: 26px 30px;
  background: var(--azul);
  color: #fff;
  text-align: center;
}
.ficha-cabecera__titulo {
  margin: 10px 0 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
}
.ficha-cabecera__norma {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 7px 16px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  font-family: var(--fuente-ui);
  font-size: 14px;
}
.ficha-cabecera__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amarillo);
}

.miga {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}
.miga a { color: inherit; }
.miga a:hover { color: #fff; text-decoration: underline; }

.ficha { padding-block: 40px 46px; }
.ficha__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* --- Foto --- */
.ficha__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--gris-claro);
  border-radius: var(--radio);
}
.ficha__foto img {
  display: block;
  width: 100%; height: auto;
  /* Las piezas de producto son 700x476: con su propia proporción no se
     recorta el rótulo de la campaña, que es lo que identifica al producto. */
  aspect-ratio: 700 / 476;
  object-fit: cover;
}
.ficha__lupa {
  position: absolute;
  top: 14px; right: 14px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--azul);
  background: rgba(255, 255, 255, .94);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  transition: transform .2s ease, background .2s ease;
}
.ficha__lupa svg { width: 20px; height: 20px; fill: currentColor; }
.ficha__lupa:hover { transform: scale(1.08); background: #fff; }

/* --- Rótulos de sección dentro de la ficha --- */
.ficha__rotulo {
  margin: 26px 0 12px;
  font-family: var(--fuente-titulo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--azul);
}
.ficha__datos > .ficha__rotulo:first-child,
.ficha__media > * > .ficha__rotulo:first-child { margin-top: 0; }
.ficha__colores { margin-top: 24px; }

.ficha__intro {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gris);
}

/* --- La tabla de especificaciones: el dato principal de la página --- */
.tabla-envoltorio {
  overflow-x: auto;              /* en móvil la tabla puede desbordar sola */
  border: 1px solid var(--gris-2);
  border-radius: var(--radio-sm);
}
.tabla-specs {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fuente-ui);
  font-size: 14px;
}
.tabla-specs tr + tr { border-top: 1px solid var(--gris-2); }
.tabla-specs tr:nth-child(odd) { background: #F8FAFD; }
.tabla-specs th,
.tabla-specs td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.tabla-specs th {
  width: 38%;
  font-weight: 600;
  color: var(--negro);
  white-space: nowrap;
}
.tabla-specs td { color: var(--gris); }

/* --- Espesores: fichas sueltas en vez de un renglón corrido --- */
.espesores {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.espesores__item {
  padding: 6px 12px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--azul-osc);
  background: #EAF2FD;
  border: 1px solid #D3E4FA;
  border-radius: 999px;
}

/* --- Muestras de color --- */
.muestras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.muestra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--gris-2);
  border-radius: 999px;
  font-family: var(--fuente-ui);
  font-size: 12.5px;
  color: var(--gris);
}
/* El color del producto que se está viendo va marcado. */
.muestra.is-suyo {
  border-color: var(--azul-link);
  background: #EAF2FD;
  color: var(--negro);
  font-weight: 600;
}
.muestra__color {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  background: var(--tono);
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 50%;
}
.muestra__nombre { min-width: 0; }

/* --- Acciones --- */
.ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.ficha__acciones .btn { flex: 1 1 210px; justify-content: center; }
/* La ficha técnica va en su propia fila, debajo de las dos acciones de compra. */
.btn--ancho { flex-basis: 100% !important; }
.btn--ficha { gap: 8px; }
.btn--ficha svg { width: 18px; height: 18px; fill: currentColor; }

.ficha__aviso {
  margin: 14px 0 0;
  font-family: var(--fuente-ui);
  font-size: 12.5px;
  color: var(--gris-menu);
}

/* --- Ventajas y aplicaciones --- */
.ficha-extra {
  padding-block: 42px;
  background: var(--gris-claro);
}
.ficha-extra__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: start;
}
.ficha-extra__titulo {
  margin: 0 0 14px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 700;
  color: var(--azul);
}
.ficha-extra__bloque > .ficha-extra__titulo ~ .ficha-extra__titulo { margin-top: 26px; }
.ficha-extra__texto,
.ficha-extra__nota {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: 14px;
  line-height: 1.65;
  color: var(--gris);
}
.ficha-extra__nota {
  margin-top: 18px;
  padding: 13px 16px;
  background: #FFF8DC;
  border-left: 3px solid var(--amarillo);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  color: var(--negro);
}

.ventajas { margin: 0; padding: 0; list-style: none; }
.ventajas__item {
  display: flex;
  gap: 11px;
  padding: 9px 0;
  font-family: var(--fuente-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris);
}
.ventajas__item + .ventajas__item { border-top: 1px solid var(--gris-3); }
.ventajas__check {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin-top: 1px;
  display: grid; place-items: center;
  color: #fff;
  background: var(--azul);
  border-radius: 50%;
}
.ventajas__check svg { width: 13px; height: 13px; fill: currentColor; }

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0; padding: 0;
  list-style: none;
}
.etiquetas__item {
  padding: 6px 13px;
  background: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: 999px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  color: var(--gris);
}

/* --- Más de la categoría --- */
.ficha-mas { padding-block: 42px; text-align: center; }
.ficha-mas__titulo {
  margin: 0 0 22px;
  font-family: var(--fuente-titulo);
  font-size: 22px;
  font-weight: 700;
  color: var(--negro);
}
.ficha-mas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.tarjeta-prod {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 12px;
  background: var(--gris-claro);
  border-radius: var(--radio);
  color: var(--negro);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta-prod:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra, -4px 4px 10px rgba(78, 78, 78, .25));
}
.tarjeta-prod__foto {
  display: block;
  overflow: hidden;
  border-radius: var(--radio-sm);
}
.tarjeta-prod__foto img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 700 / 476;
  object-fit: cover;
}
.tarjeta-prod__nombre {
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.ficha-mas__todos {
  font-family: var(--fuente-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-link);
}
.ficha-mas__todos:hover { text-decoration: underline; }

/* --- Visor de imagen a pantalla completa --- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .86);
}
.visor img {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  border-radius: var(--radio-sm);
}
.visor__cerrar {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}
.visor__cerrar:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 900px) {
  .ficha__grid { grid-template-columns: 1fr; gap: 30px; }
  .ficha { padding-block: 26px 32px; }
  .tabla-specs th { width: 42%; white-space: normal; }
  .ficha__acciones .btn { flex: 1 1 100%; }
}

@media (max-width: 520px) {
  .tabla-specs { font-size: 13px; }
  .tabla-specs th,
  .tabla-specs td { padding: 9px 12px; }
  .muestras { grid-template-columns: 1fr 1fr; }
}

/* 23. Lista de pedido: items del cajón ------------------------------------ */

.carrito__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pedido {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.pedido + .pedido { border-top: 1px solid var(--gris-2); }

.pedido__foto {
  flex: 0 0 auto;
  width: 58px; height: 46px;
  overflow: hidden;
  background: var(--gris-claro);
  border-radius: var(--radio-sm);
}
.pedido__foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.pedido__cuerpo {
  flex: 1 1 auto;
  min-width: 0;                  /* el nombre se recorta en vez de desbordar */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pedido__nombre {
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--negro);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
a.pedido__nombre:hover { color: var(--azul-link); }

.pedido__control {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid var(--gris-3);
  border-radius: 999px;
  overflow: hidden;
}
.pedido__paso {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--fuente-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--azul);
  background: none;
}
.pedido__paso:hover { background: #EAF2FD; }
.pedido__cantidad {
  min-width: 30px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.pedido__quitar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--gris-menu);
  border-radius: 50%;
}
.pedido__quitar svg { width: 13px; height: 13px; fill: currentColor; }
.pedido__quitar:hover { background: var(--gris-2); color: var(--negro); }

/* Acciones del pie del cajón */
.carrito__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gris-3);
}
.carrito__acciones .btn { width: 100%; justify-content: center; }
.carrito__vaciar {
  font-family: var(--fuente-ui);
  font-size: 13px;
  color: var(--gris-menu);
  text-decoration: underline;
}
.carrito__vaciar:hover { color: var(--negro); }

/* Botón "Añadir al carrito" y su confirmación */
.btn--agregar { gap: 8px; }
.btn--agregar svg { width: 18px; height: 18px; fill: currentColor; }
.btn--agregar.is-agregado {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

/* El contador late al agregar: el botón flotante queda lejos del clic. */
.flotante--carrito.is-latiendo { animation: carrito-late .55s ease; }
@keyframes carrito-late {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.16); }
  60%      { transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .flotante--carrito.is-latiendo { animation: none; }
}