/* Tipos de madera */

/* Sin el resaltado que pone el celular al tocar: crecería junto con la tarjeta */
.tarjeta-madera,
.ficha__cerrar,
.catalogo__mas,
.preservadores__abrir,
.preservadores__cerrar {
  -webkit-tap-highlight-color: transparent;
}

/* Celular. AJUSTAR: oscuridad de la foto del hero (0.65 abajo, 0.40 arriba; más alto = más oscuro) */
.hero--fuerte::after {
  background: linear-gradient(0deg, rgba(var(--oscuro-foto), 0.65) 0.64%, rgba(var(--oscuro-foto), 0.40) 70.76%);
}

@media (min-width: 768px) {
  .hero--fuerte::after {
    background: linear-gradient(90deg, rgba(var(--oscuro-foto), 0.75) 37.6%, rgba(var(--oscuro-foto), 0.2) 61.5%);
  }
}

/* Cabecera de bloque (base.css): en esta página lleva aire arriba y abajo */
.bloque-cabecera {
  padding-block: 20px;
}

/* Catálogo */
.catalogo {
  padding: 40px 0;
}

@media (min-width: 1024px) {
  .catalogo {
    padding: 80px 0;
  }
}

/* Filtros: en celular y tablet, desplegable (la caja gris va solo abierto); en compu, fila de botones */
.filtros {
  padding: 20px;
  border-radius: 20px;
}

.filtros.esta-abierto {
  background: var(--gris-claro);
}

.filtros__toggle,
.filtro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 11px 24px;
  border: 1px solid var(--olive);
  border-radius: 999px;
  background: transparent;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  color: var(--olive);
}

/* Texto e ícono centrados con 80 px entre los dos; con un filtro de nombre largo, ese espacio se achica */
.filtros__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 80px) 40px minmax(0, 1fr);
  min-height: 64px;
  background: var(--olive);
  color: var(--blanco);
}

.filtros__toggle > span:first-child {
  grid-column: 2;
}

.filtros__icono {
  grid-column: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.filtros__icono svg {
  width: 24px;
  height: 24px;
}

.filtro[aria-pressed="true"] {
  background: var(--olive);
  color: var(--blanco);
}

.filtros__lista {
  display: none;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.filtros.esta-abierto .filtros__lista {
  display: flex;
}

@media (max-width: 1023px) {
  .filtros__lista .esta-activo {
    display: none;
  }

  .filtros.esta-abierto {
    margin-bottom: 20px;
  }
}

/* Sin JS: los filtros no hacen nada, se ocultan y se ve todo el catálogo */
html:not(.js) .filtros {
  display: none;
}

@media (hover: hover) {
  .filtro:hover {
    background: var(--blanco-calido);
  }

  .filtro[aria-pressed="true"]:hover {
    background: var(--olive);
  }
}

@media (min-width: 1024px) {
  .filtros {
    margin-top: 50px;
    padding: 0;
    border-radius: 0;
  }

  .filtros.esta-abierto {
    background: none;
  }

  .filtros__toggle {
    display: none;
  }

  .filtros__lista,
  .filtros.esta-abierto .filtros__lista {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 0;
  }

  .filtros__lista li {
    flex: 1 1 0;
  }

  .filtros__lista li:nth-child(7) {
    flex: 0 0 180px;
  }
}

/* Pantallas angostas de compu: los 8 botones entran en una fila */
@media (min-width: 1024px) and (max-width: 1239px) {
  .filtro {
    padding-inline: 8px;
  }

  .filtros__lista li:nth-child(7) {
    flex: 0 0 150px;
  }
}

/* Grilla. align-content: al animar el alto, las filas no se estiran */
.catalogo__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-content: start;
}

@media (max-width: 767px) {
  .js .catalogo__grilla > .fuera-de-limite {
    display: none;
  }
}

@media (min-width: 768px) {
  .catalogo__grilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .catalogo__grilla {
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 16px;
    margin-top: 50px;
  }
}

/* Sin JS: todas las maderas abiertas, una debajo de la otra */
html:not(.js) .catalogo__grilla {
  grid-template-columns: 1fr;
}

html:not(.js) .tarjeta-madera__mas {
  display: none;
}

/* Flecha que muestra el resto (celular). 44 px para tocarla; se ve como en el diseño, 16 px debajo de las tarjetas */
.catalogo__mas {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 6px 0 -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--naranja);
}

@media (max-width: 767px) {
  .js .catalogo__mas {
    display: flex;
  }
}

.catalogo__mas[hidden],
.js .catalogo__mas[hidden] {
  display: none;
}

/* Tarjeta */
.tarjeta-madera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  height: 200px;
  padding: 40px;
  overflow: hidden;
  border: 0;
  background: var(--gris-claro);
  color: var(--blanco-calido);
  text-align: left;
}

.tarjeta-madera__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--zoom-foto);
}

/* Compu: al pasar el mouse o llegar con el teclado, la foto se agranda como en las tarjetas de la Home */
@media (min-width: 1024px) {
  .tarjeta-madera:focus-visible .tarjeta-madera__img {
    transform: scale(1.05);
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .tarjeta-madera:hover .tarjeta-madera__img {
    transform: scale(1.05);
  }
}

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

  .tarjeta-madera:hover .tarjeta-madera__img,
  .tarjeta-madera:focus-visible .tarjeta-madera__img {
    transform: none;
  }
}

.tarjeta-madera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.15);
}

.tarjeta-madera__nombre,
.tarjeta-madera__mas {
  position: relative;
  z-index: 2;
}

.tarjeta-madera__nombre {
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
  text-shadow: var(--sombra-nombre-foto);
}

.tarjeta-madera__mas {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--blanco);
  text-shadow: var(--sombra-texto-foto);
}

/* Madera abierta: ocupa toda la fila. tipos-de-madera.js la pone al principio de esa fila.
   .en-morph: mientras la tarjeta se transforma en ficha (o al revés), las dos están una sobre la otra. */
.catalogo__grilla > .esta-abierta {
  grid-column: 1 / -1;
}

.js .esta-abierta .tarjeta-madera {
  display: none;
}

.js .ficha {
  display: none;
}

.js .esta-abierta .ficha {
  display: flex;
}

.ficha {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  outline: none;
}

.catalogo__grilla > .en-morph {
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.js .en-morph.esta-abierta .tarjeta-madera,
.js .en-morph .tarjeta-madera {
  position: absolute;
  top: 0;
  display: flex;
  box-sizing: border-box;
  background: none;
}

.js .en-morph .ficha {
  position: relative;
  z-index: 3;
  display: flex;
}

.js .en-morph--cierra .ficha {
  position: absolute;
  top: 0;
}

.en-morph .tarjeta-madera picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.en-morph .tarjeta-madera__img {
  right: auto;
  bottom: auto;
  transition: none;
}

.en-morph .tarjeta-madera::before {
  bottom: auto;
  height: var(--alto-banda);
}

.en-morph .ficha__img {
  background: none;
}

.ficha__img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--gris-claro);
}

/* Botón transparente encima de la foto: la cierra con el dedo, el mouse o el teclado. Margen negativo igual a su alto para no empujar la foto */
.ficha__foto-cerrar {
  position: relative;
  z-index: 1;
  flex: none;
  height: 100px;
  margin-bottom: -100px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ficha__foto-cerrar:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: -4px;
}

.ficha__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin-top: 30px;
}

.ficha__nombre {
  font-size: 52px;
  line-height: 58px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ficha__datos {
  display: grid;
  gap: 50px;
  margin-top: 50px;
}

.ficha__dato {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 450px;
}

.ficha .ficha__lista {
  padding-left: 27px;
  list-style: disc;
}

/* Íconos de los datos. Se mueven solo en compu, al pasar el mouse (tipos-de-madera.js pone la clase). */
.ficha__icono {
  overflow: visible;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ficha__dato.esta-animando .ficha__icono--tronco {
    animation: var(--giro-tronco);
  }

  .ficha__dato.esta-animando .ficha__gota {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: ficha-gota 1.3s ease-in;       /* AJUSTAR: velocidad de la gota */
  }
}

/* La gota cae y se desvanece; después nace otra, chiquita, debajo del balde */
@keyframes ficha-gota {
  0% { transform: none; opacity: 1; }
  45% { transform: translateY(11px); opacity: 0; }
  46% { transform: translateY(-3px) scale(0.2); opacity: 0; }
  60% { transform: translateY(-1px) scale(0.5); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.ficha__lista li + li {
  margin-top: 28px;
}

.ficha__cerrar {
  align-self: flex-start;
  margin-top: 40px;
}

.ficha__flecha {
  display: inline-block;
  transform: scaleX(-1);
}

@media (min-width: 768px) {
  .ficha__img {
    height: 200px;
  }

  .ficha__foto-cerrar {
    height: 200px;
    margin-bottom: -200px;
  }

  .ficha__intro {
    margin-top: 70px;
  }

  .ficha__datos {
    grid-template-columns: 1fr 1fr;
  }
}

/* Preservadores y "Así quedan" */
.preservadores__titulo {
  font-size: 36px;
}

.colocadas__titulo {
  font-size: 40px;
}

.split--marron .split__contenido {
  gap: 35px;
}

.split__media picture {
  height: 100%;
}

@media (max-width: 767px) {
  .split--marron .split__contenido {
    padding-block: 30px;
  }

  /* "Así quedan": en celular no va la foto (ver el <picture> del HTML: tampoco se descarga) */
  .split--oscuro .split__media {
    display: none;
  }

  .preservadores__subtitulo,
  .preservadores__extra {
    width: 100%;
  }

  .preservadores__abrir {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 6px 3px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
  }

  .preservadores__abrir svg {
    color: var(--naranja);
  }

  .preservadores__abrir[aria-expanded="true"] {
    align-items: flex-start;
    padding: 0;
    cursor: default;
  }

  .preservadores__abrir[aria-expanded="true"] svg {
    display: none;
  }

  /* Flecha hacia arriba: la misma, dada vuelta */
  .preservadores__cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--naranja);
  }

  .preservadores__cerrar svg {
    transform: rotate(180deg);
  }
}

.preservadores__extra[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .preservadores__titulo {
    font-size: 40px;
  }
}

/* Compu: alto de 600 px. La foto se recorta sola, no empuja el alto */
@media (min-width: 1024px) {
  .split--marron,
  .split--oscuro {
    min-height: 600px;
  }

  .split--marron .split__media,
  .split--oscuro .split__media {
    height: auto;
    min-height: 0;
  }

  .split--marron .split__media img,
  .split--oscuro .split__media img {
    position: absolute;
    inset: 0;
  }

  .split--marron .split__contenido,
  .split--oscuro .split__contenido {
    padding-block: 40px;
  }
}

/* "Así quedan" en compu: a 1440 px el texto empieza a 84 px y mide 600 */
@media (min-width: 1360px) {
  .split--oscuro .split__contenido {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .cierre__contenido {
    padding: 50px var(--margen-lateral);
  }
}