/* ==========================================================================
   Componentes reutilizables
   Todo lo que aparece en más de una pantalla vive aquí.
   ========================================================================== */

/* --- Botones -------------------------------------------------------------
   El diseño usa dos radios distintos: 30 px en los botones de tarjeta y del
   hero, 51 px en los de sección (que al medir 52 de alto quedan cápsula
   completa). Se conservan ambos porque la diferencia sí se ve. */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  line-height: var(--lh-texto);
  border-radius: var(--radio-boton);
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion);
}

/* Blanco sobre foto: el de las tarjetas y el principal del hero. */
.boton--claro {
  min-width: 180px;
  min-height: 48px;
  background: var(--blanco);
  color: var(--verde-oscuro);
}

.boton--claro:hover {
  background: var(--verde-lima);
}

/* Contorno lima sobre foto: el secundario del hero. */
.boton--fantasma {
  min-width: 223px;
  min-height: 48px;
  background: var(--lima-tenue);
  color: var(--blanco);
  border: 1px solid var(--verde-lima);
}

.boton--fantasma:hover {
  background: var(--verde-lima);
  color: var(--verde-oscuro);
}

/* Cápsula oliva: el de cierre de sección. */
.boton--oliva {
  min-width: 364px;
  max-width: 100%;
  min-height: 52px;
  background: var(--verde-oliva);
  color: var(--blanco);
  border-radius: var(--radio-pildora);
  font-weight: var(--peso-normal);
}

.boton--oliva:hover {
  background: var(--verde-oscuro);
}

.boton--estrecho {
  min-width: 260px;
}

@media (max-width: 480px) {
  .boton--oliva,
  .boton--fantasma,
  .boton--claro {
    min-width: 0;
    width: 100%;
  }
}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--verde-barra);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--alto-cabecera);
  /* Sangría extra: en Figma el logo arranca en 136, no en el borde de la
     rejilla. Ver --margen-interior en tokens.css.
     Va con calc porque este elemento ES el .contenedor: un padding-inline
     suelto sustituiría al suyo en lugar de sumarse. */
  padding-inline: calc(var(--margen) + var(--margen-interior));
}

.cabecera__logo img {
  width: 111px;
  height: auto;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
}

.nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0;
  font-size: var(--t-base);
  color: var(--blanco);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicion);
}

/* `page` marca la página exacta; `true` marca la sección a la que pertenece
   la página actual, que es el caso de la ficha de producto dentro de
   Productos. Las dos se subrayan igual. */
.nav__enlace:hover,
.nav__enlace[aria-current] {
  border-bottom-color: var(--verde-lima);
}

/* El triángulo de los desplegables. En Figma es un polígono gris #D9D9D9. */
.nav__flecha {
  width: 0;
  height: 0;
  border-inline: 6px solid transparent;
  border-top: 7px solid var(--gris-linea);
  transition: rotate var(--transicion), border-top-color var(--transicion);
}

/* --- Submenús -------------------------------------------------------------
   El diseño dibuja la flecha pero no el desplegable, así que su contenido y
   su comportamiento son criterio propio. Ver DECISIONES.md.

   El elemento de nivel superior sigue siendo un enlace a su página, y la
   flecha es un botón aparte que abre el submenú. Así el destino y el
   desplegable son dos controles distintos: con ratón se abre al pasar por
   encima, con teclado se llega a los dos por separado, y en táctil se puede
   entrar a la sección o desplegarla sin que una cosa impida la otra. */

.nav__item {
  position: relative;
}

.nav__grupo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nav__desplegar {
  display: grid;
  place-items: center;
  padding: 0.5rem 0.25rem;
  border-bottom: 2px solid transparent;
}

.nav__desplegar[aria-expanded='true'] .nav__flecha {
  rotate: 180deg;
  border-top-color: var(--verde-lima);
}

.submenu {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 10;
  min-width: 260px;
  padding: 0.5rem 0;
  background: var(--verde-barra);
  border-top: 2px solid var(--verde-lima);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.28);

  /* `visibility` y no `display`: además de poder animarse, saca los enlaces
     del orden de tabulación mientras está cerrado. */
  visibility: hidden;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity var(--transicion), translate var(--transicion),
    visibility var(--transicion);
}

.submenu a {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: var(--t-sm);
  color: var(--gris-linea);
  border-left: 3px solid transparent;
  transition: background-color var(--transicion), border-color var(--transicion),
    color var(--transicion);
}

.submenu a:hover,
.submenu a:focus-visible {
  background: rgb(255 255 255 / 0.07);
  border-left-color: var(--verde-lima);
  color: var(--blanco);
}

/* El primer elemento lleva a la sección completa: se separa del resto. */
.submenu__todos {
  font-weight: var(--peso-fuerte);
  color: var(--blanco) !important;
}

.submenu__separador {
  height: 1px;
  margin: 0.375rem 1.25rem;
  background: rgb(255 255 255 / 0.14);
}

/* Abierto por el botón (teclado y táctil). */
.nav__item[data-abierto='true'] > .submenu {
  visibility: visible;
  opacity: 1;
  translate: 0;
}

/* Abierto al pasar el ratón. Sólo donde hay puntero de verdad: en táctil
   `:hover` se queda pegado tras el toque y el menú no se cerraría. */
@media (hover: hover) and (min-width: 1001px) {
  .nav__item:hover > .submenu {
    visibility: visible;
    opacity: 1;
    translate: 0;
  }

  .nav__item:hover .nav__flecha {
    rotate: 180deg;
    border-top-color: var(--verde-lima);
  }
}

.nav__boton {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}

.nav__boton span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--blanco);
  transition: translate var(--transicion), rotate var(--transicion),
    opacity var(--transicion);
}

/* --- Tarjeta sobre fotografía --------------------------------------------
   El patrón que más se repite: foto de fondo, velo, título y botón abajo.
   Sirve para industrias, productos y artículos cambiando sólo la altura. */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--alto-tarjeta, 313px);
  padding: 1.5rem;
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--gris-borde);
  color: var(--blanco);
}

.tarjeta > img,
.tarjeta > picture > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 400ms ease;
}

.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--velo-medio);
}

.tarjeta:hover > img,
.tarjeta:hover > picture > img {
  scale: 1.04;
}

.tarjeta__titulo {
  font-size: var(--t-tarjeta);
  font-weight: var(--peso-fuerte);
  line-height: var(--lh-titulo);
}

.tarjeta__texto {
  font-size: var(--t-sm);
  line-height: var(--lh-texto);
}

.tarjeta__enlace {
  align-self: flex-start;
}

/* El enlace cubre toda la tarjeta: se puede pulsar en cualquier punto,
   pero el nombre accesible sigue siendo el del propio enlace. */
.tarjeta__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Variante alta con texto descriptivo (artículos del blog). */
.tarjeta--articulo {
  --alto-tarjeta: 439px;
  justify-content: flex-end;
}

/* Variante de producto. */
.tarjeta--producto {
  --alto-tarjeta: 331px;
}

/* Enlace circular con flecha, el de "Leer más". */
.tarjeta__circulo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
}

.tarjeta__circulo i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--blanco);
  border-radius: 50%;
  flex-shrink: 0;
}

.tarjeta__circulo i::before {
  content: '';
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid var(--verde-lima);
  margin-left: 2px;
}

/* --- Título de sección --------------------------------------------------- */

.titulo-seccion {
  font-size: var(--t-h3);
  font-weight: var(--peso-fuerte);
  color: var(--gris-texto);
  text-align: center;
  margin-bottom: var(--gap-titulo);
}

.titulo-seccion--pequeno {
  font-size: var(--t-h4);
}

.cierre-seccion {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-titulo);
}

/* --- Pie ----------------------------------------------------------------- */

.pie {
  display: grid;
  align-items: center;
  min-height: 220px; /* alto exacto del pie en Figma */
  background: var(--verde-barra);
  color: var(--gris-linea);
  padding-block: 2.5rem;
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.pie__marca {
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  color: var(--blanco);
  margin-bottom: 0.75rem;
}

.pie__datos {
  display: grid;
  gap: 0.75rem;
  font-size: var(--t-xs);
}

.pie__datos a:hover {
  color: var(--verde-lima);
}

.pie__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--t-xs);
  align-content: start;
}

.pie__nav a:hover {
  color: var(--verde-lima);
}

/* --- Menú móvil ----------------------------------------------------------
   No hay diseño móvil en el archivo de Figma. Lo que sigue es criterio
   propio: por debajo de 1000 px la navegación pasa a panel desplegable.
   Está anotado en DECISIONES.md. */

@media (max-width: 1000px) {
  .nav__boton {
    display: flex;
  }

  .nav__lista {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--margen) 2rem;
    background: var(--verde-barra);
    border-top: 1px solid rgb(255 255 255 / 0.12);
    translate: 0 -110%;
    transition: translate 250ms ease;
    visibility: hidden;
  }

  .nav[data-abierto='true'] .nav__lista {
    translate: 0;
    visibility: visible;
  }

  .nav__enlace {
    /* Ocupa el ancho para que la línea separadora llegue de lado a lado, en
       lugar de acabar donde acabe el texto. */
    display: flex;
    width: 100%;
    padding: 0.875rem 0;
    font-size: var(--t-lg);
    border-bottom: 0;
  }

  /* La línea va en la fila completa: en los elementos simples es el propio
     enlace, y en los desplegables el grupo de enlace + flecha. Así todas las
     separaciones quedan a la misma altura y con el mismo ancho. */
  .nav__item > .nav__enlace,
  .nav__grupo {
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  .nav__enlace[aria-current] {
    box-shadow: inset 0 -2px 0 var(--verde-lima);
  }

  /* En móvil el submenú no puede flotar: pasa a acordeón dentro del panel.
     El enlace ocupa el ancho y la flecha queda a la derecha, de modo que se
     puede entrar a la sección o desplegarla sin ambigüedad. */
  .nav__grupo {
    justify-content: space-between;
  }

  .nav__grupo .nav__enlace {
    flex: 1;
  }

  /* Área de toque holgada para el dedo, sin ensanchar la fila. */
  .nav__desplegar {
    padding: 0.875rem 0.25rem 0.875rem 1rem;
    border-bottom: 0;
  }

  /* Aquí no se anima el alto: la lista tiene varios hijos y el truco de
     `grid-template-rows: 0fr` sólo funciona con un único envoltorio. Se
     muestra y se oculta sin más, que en un acordeón se lee igual de bien. */
  .submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0;
    background: rgb(0 0 0 / 0.18);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    translate: 0;
    visibility: visible;
    transition: none;
  }

  .nav__item[data-abierto='true'] > .submenu {
    display: block;
  }

  .submenu a {
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-size: var(--t-base);
  }

  .nav[data-abierto='true'] .nav__boton span:nth-child(1) {
    translate: 0 7px;
    rotate: 45deg;
  }

  .nav[data-abierto='true'] .nav__boton span:nth-child(2) {
    opacity: 0;
  }

  .nav[data-abierto='true'] .nav__boton span:nth-child(3) {
    translate: 0 -7px;
    rotate: -45deg;
  }
}

/* ── Carrusel de tarjetas ───────────────────────────────────────────
 *
 * El Figma nuevo pone en «Industrias que atendemos» y en «Best Sellers»
 * más tarjetas de las que caben en 1920: las de más quedan fuera del marco
 * y se pasan desplazando la fila.
 *
 * Se hace con desplazamiento nativo y `scroll-snap`, no con transformaciones
 * en JS. Tres motivos, por orden de peso:
 *
 *  1. SIN JS SIGUE FUNCIONANDO. El dedo en un móvil y el trackpad en un
 *     portátil ya arrastran la fila; las flechas son un añadido para el
 *     ratón. Un carrusel hecho a base de `translate` se queda quieto si el
 *     JS falla, y entonces las tarjetas de más no existen para nadie.
 *  2. El navegador ya sabe hacer inercia, rebote y snap mejor que nosotros.
 *  3. Con el teclado, el navegador desplaza el contenedor solo al tabular
 *     hacia una tarjeta que está fuera de vista.
 *
 * Las tarjetas conservan los 426 px del diseño, así que las cuatro
 * primeras se ven exactamente igual que antes de haber carrusel. */

.carrusel {
  position: relative;
}

.carrusel .carrusel__pista {
  display: grid;
  /* En columnas, no en rejilla que se reparte entre las que haya: así la
     fila se sale por la derecha, que es de lo que se trata.
     
     El ancho es el de CUATRO por fila, no los 426 px fijos del Figma. Con
     ancho fijo, en un portátil de 1440 sólo cabrían tres y las cuatro
     primeras dejarían de verse como hoy; así se ven exactamente igual que
     antes de haber carrusel, y lo que cambia es que a partir de la quinta
     hay que pasar.
     
     Y `minmax(0, …)` no vale: deja que la columna se encoja hasta caber, y
     entonces las seis entran en pantalla apretadas —medido: 196 px en vez
     de 426— y no queda nada que desplazar. */
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--gap-rejilla)) / 4);
  grid-template-columns: none;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Sitio para que el foco y la sombra de una tarjeta no se recorten
     contra el borde del contenedor. */
  padding-block: 4px;
  scroll-padding-inline: 0;

  /* La barra de desplazamiento, fuera: el carrusel ya se explica con las
     flechas y con las tarjetas cortadas al borde. */
  scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.carrusel__pista > * {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista {
    scroll-behavior: auto;
  }
}

/* Las flechas las pone el JS, así que su CSS sólo se aplica si existen. */
.carrusel__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  /* 44 px: por debajo de eso no se acierta con el dedo. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--verde-oscuro);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.22);
  /* La opacidad NO va en la transición.
   *
   * Apagar una flecha del extremo no es una animación bonita: es quitar de
   * en medio un control que ya no lleva a ninguna parte, y eso tiene que
   * pasar en el acto. Con la opacidad transicionada, la flecha se queda un
   * momento visible y pulsable a la vista aunque no haga nada —y en un
   * navegador que no esté pintando se queda así del todo, que es como se
   * descubrió: opacidad 1 con el botón ya deshabilitado. */
  transition: background var(--transicion), scale var(--transicion);
}

.carrusel__flecha:hover {
  background: var(--blanco);
  scale: 1.08;
}

/* Al llegar al extremo la flecha se apaga en vez de desaparecer: si se
   quitara, las de al lado saltarían de sitio a cada desplazamiento. */
.carrusel__flecha[disabled] {
  opacity: 0;
  pointer-events: none;
}

.carrusel__flecha--antes { left: -14px; }
.carrusel__flecha--despues { right: -14px; }

@media (max-width: 1100px) {
  .carrusel__flecha--antes { left: 6px; }
  .carrusel__flecha--despues { right: 6px; }
}

/* Cuántas caben, por tamaño de pantalla. Las mismas cifras que la rejilla
   de siempre, para que el carrusel no cambie la densidad conocida. En el
   móvil, 1,15 en vez de 1: el trocito de la siguiente es lo que le dice al
   dedo que hay más. */
@media (max-width: 1100px) {
  .carrusel .carrusel__pista {
    grid-auto-columns: calc((100% - var(--gap-rejilla)) / 2);
  }
}

@media (max-width: 640px) {
  .carrusel .carrusel__pista {
    grid-auto-columns: 82%;
  }
}