/* =========================================================
   CARDS DESPLEGABLES (componente reutilizable)
   LedLab — landing.
   ---------------------------------------------------------
   Card con degradado rosa -> naranja, foto recortada que sangra por
   arriba, título, y un botón cuadrado + / − que despliega el detalle.
   Se usa en "Nosotros" y queda disponible para las secciones que vengan.

   ESCALA INTERNA ATADA AL ALTO DE PANTALLA
   La card tiene su propio font-size en vh (acotado con clamp), y el
   título y el texto del panel se miden en em respecto de él. Así, al
   desplegarse, la card entra en la pantalla también en notebooks bajas:
   si la ventana es más baja, toda la tipografía de la card baja junta.
   Un solo valor controla la escala.

   Las fotos son PNG de 400x400 con el sujeto centrado y ocupan el 100%
   del ancho de la card. El área NO es cuadrada sino 4:3: los PNG traen
   bastante transparente arriba y abajo del sujeto (la nube arranca al 24%
   del alto y termina al 86%), y con el área cuadrada ese vacío quedaba
   como un hueco entre la foto y el texto, alargando la card. Recortando
   12,5% arriba y abajo se va el vacío y no se toca el sujeto en ninguna
   de las dos fotos. Perilla por card, si alguna necesita otra proporción:
       --card-media-ratio  proporción del área de la foto
   ========================================================= */
.card {
  --card-media-ratio: 4 / 3;

  font-size: clamp(0.9rem, 1.6vh, 1.15rem);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* la foto sangra y se recorta acá */
  background: linear-gradient(180deg, var(--color-5) 0%, var(--color-2) 100%);
  color: var(--color-text-light);
  border-radius: 0;
}

/* --- Foto --- */
/* La foto ocupa TODO el ancho de la card (sin padding, a sangre). Como
   los PNG son cuadrados, el área también es cuadrada y la imagen la
   llena exacta. El padding es cosa del cuerpo, no de la foto. */
.card__media {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  flex: 0 0 auto;
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover (no contain) para que llene el ancho completo; el sobrante de
     alto se recorta por igual arriba y abajo, que es donde los PNG tienen
     el transparente. */
  object-fit: cover;
  object-position: center;
}

/* --- Cuerpo --- */
.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Padding parejo en los cuatro lados.
     Sin "gap": el gap del flex también se cuenta ENTRE el botón y el
     panel cerrado, así que la distancia del botón al borde de abajo
     quedaba gap + padding, distinta a la del borde izquierdo (solo
     padding). Con márgenes explícitos, el botón cerrado queda a 1.7em
     tanto de la izquierda como de abajo. */
  padding: 1.7em;
}

.card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 1.5vw, 1.75rem);
  line-height: 1.2;
  color: var(--color-text-light);
  /* Reserva 3 líneas. Es lo que hace que las cards de una fila midan lo
     mismo con el desplegable CERRADO, sin necesidad de estirarlas: así
     cada card crece solo cuando se abre la suya. */
  min-height: 3.6em;
}

/* --- Botón + / − --- */
.card__toggle {
  margin-top: 1.35em; /* aire contra el título (antes lo daba el gap) */
  position: relative;
  width: 2.9em;
  height: 2.9em;
  flex: 0 0 auto;
  background: transparent;
  border: var(--border-width) solid var(--color-text-dark);
  border-radius: 0; /* cuadrado, como el resto del sitio */
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.card__toggle:hover,
.card__toggle:focus-visible {
  transform: scale(0.94); /* mismo gesto que los .btn */
}
/* Las dos barras del signo. La vertical se colapsa al abrir, así el +
   se convierte en − con una transición y sin cambiar el HTML. */
.card__toggle::before,
.card__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-text-dark);
  transition: transform var(--transition-base);
}
.card__toggle::before {
  width: 1.05em;
  height: 2px;
  transform: translate(-50%, -50%);
}
.card__toggle::after {
  width: 2px;
  height: 1.05em;
  transform: translate(-50%, -50%);
}
.card.is-open .card__toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* --- Panel desplegable ---
   El alto se anima con grid-template-rows de 0fr a 1fr: es la forma de
   animar "hasta el alto del contenido" sin inventar un max-height fijo.
   Si el navegador no lo soporta, el panel simplemente aparece sin
   transición (el contenido igual queda oculto o visible como debe). */
.card__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
  width: 100%;
}
.card.is-open .card__panel {
  grid-template-rows: 1fr;
}
.card__panel > div {
  overflow: hidden;
}
.card__panel p {
  font-size: 1em; /* relativo a la escala interna de la card */
  line-height: 1.45;
  color: var(--color-text-light);
}
/* Aire entre el botón y el texto que aparece, solo cuando está abierta. */
.card.is-open .card__panel p {
  padding-top: 1.1em;
}