/* ==========================================================================
   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) */
  /* Respaldo, por si la portada se pinta sin los ajustes del panel. El valor
     bueno se define abajo, en .hero: las variables que pone hero.php viven en
     esa sección, y leerlas desde :root era leer una variable que ahí no existe
     —el alto se quedaba siempre en el de respaldo. */
  --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);

  /* El alto que eligió el panel, con el de siempre como respaldo. */
  --alto-hero: var(--alto-hero-escritorio, max(440px, calc(100svh - var(--alto-cabecera))));
}
.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);

  /* contain y no cover: con cover, en cuanto la pantalla es más ancha que 16:9
     —un portátil cualquiera— el recorte se recortaba por arriba y por abajo y
     al producto le cortaba los pies. Con contain se ve entero siempre, y lo
     que sobra a los lados no molesta porque el PNG es transparente.

     La posición viene del panel y se usa dos veces: para colocar el recorte y
     como origen del encogido, para que al reducirlo siga apoyado en el mismo
     sitio en vez de escaparse hacia el centro. */
  object-fit: contain;
  object-position: var(--pos, right bottom);

  /* Primero correr y luego encoger, en ese orden: así el «correr» se mide
     siempre sobre el hero y no sobre el recorte ya reducido. Si fuera al revés,
     el mismo 10% movería mucho con el producto grande y casi nada con el
     producto pequeño, y ajustarlo sería adivinar. */
  transform: translate(var(--mx, 0), var(--my, 0)) scale(var(--escala, 1));
  transform-origin: var(--pos, 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.) */
/* En el móvil el hero tiene su propio alto y el recorte su propio tamaño y
   posición: la pantalla es estrecha y muy vertical, y lo que en un monitor
   queda apoyado en una esquina, aquí se planta encima del titular.

   Antes el recorte simplemente no salía en el móvil. Salía más barato que
   pelearse con el encaje, pero dejaba la portada del celular —que es por donde
   entra la mayoría— con la mitad del diseño. */
@media (max-width: 1000px), (max-aspect-ratio: 4/3) {
  .hero { --alto-hero: var(--alto-hero-movil, max(360px, calc(60svh - var(--alto-cabecera)))); }

  .hero__producto {
    object-position: var(--pos-movil, var(--pos, right bottom));
    transform: translate(var(--mx-movil, 0), var(--my-movil, 0)) scale(var(--escala-movil, .7));
    transform-origin: var(--pos-movil, var(--pos, right bottom));
  }

  .hero__capa--sin-movil { 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);
}

/* Las columnas no son cuatro fijas: son las que haya.

   Estaban clavadas a repeat(4, …) y al añadir una quinta desde el panel se
   caía a una segunda fila, debajo de la columna más alta, dejando un hueco
   enorme en medio del desplegable. Con auto-fit caben todas las que entren de
   ancho —seis entran de sobra— y si algún día hubiera muchas más, se apilan
   ordenadas en vez de aterrizar en cualquier sitio. */
.mega__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 215px));
  justify-content: start;
  /* La separación se encoge en pantallas menos anchas: con 46 px fijos, la
     quinta columna no entraba por 146 px en un portátil de 1280 y se caía a la
     fila de abajo. Los números salen de medir, no de tantear: dentro del menú
     hay 1213 px a 1280, y cinco columnas de 215 con 28 de hueco piden 1188. */
  gap: 5px clamp(22px, 2.2vw, 40px);
  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; }
}

/* ===========================================================================
   LIBRO DE RECLAMACIONES
   ---------------------------------------------------------------------------
   La hoja (.hoja) es un documento, no una sección de la web: se lee, se guarda
   y se imprime. Por eso va en blanco, con tipografía sobria y sin adornos —y
   por eso tiene reglas de impresión propias, que es como acaba la mitad de las
   veces: en papel, dentro de una carpeta.

   El bloque .hoja está repetido en panel/assets/panel.css porque la misma hoja
   se enseña en el panel, que no carga esta hoja de estilos. Si se toca uno, hay
   que tocar el otro.
   =========================================================================== */
.reclamo { padding: 40px 0 64px; background: var(--gris-claro); }
.reclamo__caja {
  max-width: 780px; margin: 0 auto; background: #fff;
  border-radius: var(--radio); padding: 30px clamp(18px, 4vw, 38px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}
.reclamo__cabecera { text-align: center; margin-bottom: 18px; }
.reclamo__titulo { font-size: clamp(22px, 3.4vw, 30px); color: var(--azul); margin: 0 0 6px; }
.reclamo__sub { color: var(--gris); margin: 0; font-size: 14px; }
.reclamo__proveedor {
  background: var(--gris-claro); border-radius: var(--radio-sm);
  padding: 12px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 22px;
}
.reclamo__bloque {
  font-size: 15px; color: var(--azul); margin: 26px 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--gris-2);
}
.reclamo__tipos { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.reclamo__tipo {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 2px solid var(--gris-2); border-radius: var(--radio-sm); padding: 12px 14px;
}
.reclamo__tipo:has(input:checked) { border-color: var(--azul); background: #F5F9FF; }
.reclamo__tipo strong { display: block; font-size: 14px; }
.reclamo__tipo small { display: block; color: var(--gris); font-size: 12.5px; line-height: 1.4; }
.reclamo__legal {
  background: #FFFDF3; border: 1px solid var(--amarillo); border-radius: var(--radio-sm);
  padding: 14px 16px; font-size: 13px; line-height: 1.55; margin: 20px 0;
}
.reclamo__legal p { margin: 0 0 8px; }
.reclamo__legal p:last-child { margin-bottom: 0; }
.reclamo__ok {
  background: #E8F6EE; border-left: 4px solid #1E8449; border-radius: var(--radio-sm);
  padding: 14px 16px; margin: 0 0 22px; font-size: 14px;
}
.reclamo__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.campo__ayuda { display: block; margin-top: 5px; font-size: 12.5px; color: var(--gris); }

@media (max-width: 600px) {
  .reclamo__tipos { grid-template-columns: 1fr; }
}

/* --- La hoja registrada (compartida con el panel) ------------------------- */
.hoja { border: 1px solid var(--gris-2); border-radius: var(--radio-sm); padding: 22px; }
.hoja__cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; border-bottom: 2px solid var(--azul); padding-bottom: 12px; margin-bottom: 16px;
}
.hoja__titulo { margin: 0; font-size: 19px; color: var(--azul); }
.hoja__norma { margin: 2px 0 0; font-size: 12.5px; color: var(--gris); }
.hoja__numero { text-align: right; line-height: 1.3; }
.hoja__numero span { font-size: 11px; color: var(--gris); display: block; }
.hoja__numero strong { font-size: 16px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.hoja__numero small { display: block; font-size: 11.5px; color: var(--gris); }
.hoja__sello {
  display: inline-block; margin: 0 0 18px; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: var(--azul); color: #fff;
}
.hoja__sello--queja { background: var(--amarillo); color: var(--negro); }
.hoja__bloque { margin-bottom: 18px; }
.hoja__bloque h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gris); margin: 0 0 8px;
}
.hoja__datos { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.hoja__datos dt { color: var(--gris); }
.hoja__datos dd { margin: 0; }
.hoja__texto { margin: 0 0 14px; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.hoja__pendiente {
  margin: 0; font-size: 13.5px; color: var(--gris);
  background: var(--gris-claro); border-radius: var(--radio-sm); padding: 10px 12px;
}
.hoja__pie { margin: 6px 0 0; font-size: 12.5px; color: var(--gris); }
.hoja__legal {
  border-top: 1px solid var(--gris-2); margin-top: 18px; padding-top: 12px;
  font-size: 12px; line-height: 1.5; color: var(--gris);
}
.hoja__legal p { margin: 0 0 6px; }

@media (max-width: 560px) {
  .hoja__datos { grid-template-columns: 1fr; gap: 0 0; }
  .hoja__datos dt { margin-top: 8px; font-size: 12px; }
  .hoja__cabecera { flex-direction: column; }
  .hoja__numero { text-align: left; }
}

/* --- Impresión: sale la hoja y nada más ----------------------------------- */
@media print {
  .cabecera, .pie, .flotantes, .no-imprimir, .whatsapp-flotante { display: none !important; }
  .reclamo { background: #fff; padding: 0; }
  .reclamo__caja { box-shadow: none; padding: 0; max-width: none; }
  .hoja { border: 0; padding: 0; }
  .hoja__sello { border: 1px solid #000; background: #fff !important; color: #000 !important; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   MEDIDAS DISPONIBLES
   La tabla que cruza medida × espesor. Va a lo ancho, entre la ficha y las
   ventajas, porque en los tubos son más de veinte filas y en media columna
   no se lee.
   ========================================================================== */
.medidas__grid {
  /* Columnas de texto, no rejilla. Con rejilla, las tres formas se alinean por
     filas y la más corta —redondos, tres medidas— deja debajo un hueco del
     alto de la más larga. En columnas, cada bloque empieza donde acabó el
     anterior. El ancho manda sobre el número: el navegador pone dos columnas
     en un escritorio y una en el móvil sin un solo breakpoint escrito a mano. */
  column-width: 460px;
  column-gap: 26px;
  margin-top: 18px;
}
.medidas__bloque {
  /* Una tabla partida entre dos columnas es ilegible: la cabecera se queda
     arriba y las filas siguen al otro lado. */
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 26px;
}
.medidas__forma {
  margin: 0 0 10px;
  font-family: var(--fuente-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}
.tabla-medidas {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fuente-ui);
  font-size: 14px;
}
.tabla-medidas thead th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFF;
  background: var(--azul);
  white-space: nowrap;
}
.tabla-medidas thead th span { font-weight: 500; opacity: .8; }
.tabla-medidas tbody tr + tr { border-top: 1px solid var(--gris-2); }
.tabla-medidas tbody tr:nth-child(odd) { background: #F8FAFD; }
.tabla-medidas th,
.tabla-medidas td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.5;
}
.tabla-medidas tbody th {
  font-weight: 700;
  color: var(--negro);
  white-space: nowrap;
}
.tabla-medidas td { color: var(--gris); white-space: nowrap; }

/* Las dos primeras columnas se encogen a lo que ocupa su texto para que la de
   espesores se quede con todo lo demás: con el reparto por defecto, siete
   pastillas caían en tres renglones y la fila crecía al triple de alto. */
.tabla-medidas tbody th,
.tabla-medidas td:nth-child(2) { width: 1px; }

/* Los espesores de cada fila: las mismas pastillas que la lista general, un
   punto más pequeñas porque aquí van siete en un renglón. */
.medidas__espesores {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.medidas__espesores li {
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--azul-osc);
  background: #EAF2FD;
  border: 1px solid #D3E4FA;
  border-radius: 999px;
}
.medidas__vacio { color: var(--gris); }
.medidas__aviso {
  margin: 22px 0 0;
  font-family: var(--fuente-ui);
  font-size: 13px;
  color: var(--gris);
}

@media (max-width: 560px) {
  /* En un móvil estrecho la columna de espesores manda: las otras dos se
     aprietan a lo que ocupa su texto. */
  .tabla-medidas th,
  .tabla-medidas td { padding: 9px 10px; }
  .tabla-medidas { font-size: 13px; }
}

/* ==========================================================================
   DESPLEGABLES DE LA FICHA
   Medidas, ventajas, aplicaciones y material, cada uno en su <details>.
   Cerrados, la parte de abajo de la ficha son cuatro barras; abiertos, lo
   mismo de antes. Sin JavaScript de por medio.
   ========================================================================== */
/* Ahora viven dentro de la columna de datos de la ficha, no en una sección
   aparte a pantalla completa. */
.ficha-bloques { margin: 6px 0 22px; }

.facc {
  border: 1px solid var(--gris-2);
  border-radius: var(--radio-sm);
  background: #FFF;
  margin-bottom: 12px;
  overflow: hidden;          /* que el fondo del summary no se salga del radio */
}
.facc:last-of-type { margin-bottom: 0; }
.facc[open] { border-color: #CFE0F6; }

.facc__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;          /* fuera el triangulito del navegador */
  user-select: none;
  background: var(--gris-claro);
  transition: background .18s ease, color .18s ease;
}
/* Safari pinta el marcador por su cuenta. */
.facc__cabecera::-webkit-details-marker { display: none; }
.facc__cabecera:hover { background: #EAF2FD; }
.facc[open] > .facc__cabecera { background: #EAF2FD; }

/* El foco del teclado tiene que verse: es la única pista de dónde estás al
   tabular, y estos son los controles que abren todo el contenido. */
.facc__cabecera:focus-visible {
  outline: 3px solid var(--azul-link);
  outline-offset: -3px;
}

.facc__titulo {
  flex: 1 1 auto;
  font-family: var(--fuente-titulo);
  font-size: 17px;
  font-weight: 700;
  color: var(--azul);
}
.facc__pista {
  flex: 0 0 auto;
  font-family: var(--fuente-ui);
  font-size: 13px;
  color: var(--gris);
}
.facc__flecha {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--gris-2);
  transition: transform .2s ease;
}
.facc__flecha svg { width: 16px; height: 16px; fill: var(--azul); }
.facc[open] > .facc__cabecera .facc__flecha { transform: rotate(180deg); }

.facc__cuerpo {
  padding: 18px 16px 20px;
  /* Un fundido corto al abrir. No se puede animar la altura de un <details>
     sin JavaScript —el navegador enseña el contenido de golpe— pero esto
     quita el salto seco sin depender de nada. */
  animation: facc-abre .22s ease both;
}
@keyframes facc-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .facc__cuerpo { animation: none; }
  .facc__flecha { transition: none; }
}

.facc__sub {
  margin: 22px 0 12px;
  font-family: var(--fuente-titulo);
  font-size: 16px;
  font-weight: 700;
  color: var(--azul);
}

/* Dentro del desplegable, la rejilla de medidas ya no necesita su margen
   superior ni el título de sección: los pone el propio desplegable. */
.facc__cuerpo .medidas__grid { margin-top: 0; }

/* Un borde dentro de otro borde a 16 px de distancia se lee como un fallo de
   maquetación, así que la tabla suelta el suyo y se queda con las filas. */
.facc__cuerpo > .tabla-envoltorio { border: 0; border-radius: 0; }
.facc__cuerpo .tabla-specs tr:first-child { border-top: 0; }

/* La nota importante va fuera de los desplegables, siempre a la vista. */
.ficha-extra__nota--suelta { margin-top: 20px; }

@media (max-width: 560px) {
  .facc__cabecera { padding: 14px; gap: 10px; }
  .facc__titulo { font-size: 16px; }
  /* En un móvil, el título y la pista no caben en el mismo renglón. */
  .facc__pista { flex-basis: 100%; order: 3; margin-top: -4px; }
  .facc__cabecera { flex-wrap: wrap; }
  .facc__cuerpo { padding: 18px 14px 20px; }
}

/* La foto se queda pegada mientras se leen los datos. Ahora que todos los
   desplegables viven en la columna de al lado, esa columna puede medir tres
   pantallas con las medidas abiertas, y sin esto el producto desaparece de la
   vista justo cuando se está decidiendo comprarlo.
   Solo en escritorio: en el móvil las dos columnas son una sola y pegar la foto
   se comería media pantalla. */
@media (min-width: 901px) {
  .ficha__media {
    position: sticky;
    top: calc(var(--alto-pegado, 51px) + 18px);
    align-self: start;
  }
}

/* ============================================================================
   40. COLORES: tira en la tarjeta del catálogo + selector en la ficha
   ==========================================================================*/

/* --- La tira de la tarjeta -------------------------------------------------
   La tarjeta agrupada tiene que decir, sin abrirla, que detrás hay nueve
   colores. Los puntos solos no bastan: el número va escrito al lado, porque
   contar nueve círculos de 13px de un vistazo no lo hace nadie, y porque quien
   no distingue bien los tonos tiene que enterarse igual. */
.producto__colores {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 12px;
  font-family: var(--fuente-ui);
  font-size: 11.5px;
  color: var(--gris);
}
.producto__tonos {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}
/* Se solapan: nueve puntos separados no caben en una tarjeta de 220px. */
.producto__tono {
  width: 14px; height: 14px;
  margin-right: -4px;
  background: var(--tono);
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}
.producto__cuantos { flex: 0 0 auto; white-space: nowrap; }

/* --- El selector de la ficha --------------------------------------------- */
.ficha__color-actual {
  color: var(--negro);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.ficha__color-ral {
  margin-left: 6px;
  font-weight: 400;
  color: var(--gris);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.ficha__color-ral:empty { display: none; }

.colores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.color {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--gris-2);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fuente-ui);
  font-size: 12.5px;
  color: var(--gris);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.color:hover { border-color: var(--azul-link); color: var(--negro); }
/* El color elegido no se marca solo con el borde azul: lleva también el punto
   con anillo y el nombre en negrita. Un estado que solo se cifra en color es
   el que no se ve con el sol de frente ni con daltonismo. */
.color.is-actual {
  border-color: var(--azul-link);
  background: #EAF2FD;
  color: var(--negro);
  font-weight: 600;
}
.color__tono {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  background: var(--tono);
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 50%;
}
.color.is-actual .color__tono {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--azul-link);
}
.color__nombre { min-width: 0; }
.color:focus-visible {
  outline: 2px solid var(--azul-link);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .colores { grid-template-columns: 1fr 1fr; }
}

/* --- Colores que la ficha nombra y no son producto ----------------------- */
.ficha__mas-colores { margin-top: 22px; }
.muestras--sueltas { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.ficha__mas-colores__nota {
  margin: 10px 0 0;
  font-family: var(--fuente-ui);
  font-size: 12px;
  color: var(--gris);
}