/* ============================================================
   PÁGINA DE INDUSTRIA
   Template reutilizable para las 6 páginas de industrias.
   Layout: 2 columnas (info + aside sticky con estudios).
   ============================================================ */


/* ============================================================
   LAYOUT BASE
   ============================================================ */

.pagina-industria {
  position: relative;
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
}

.pagina-industria__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* Cada row es 10vh mínimo, puede crecer si su contenido lo requiere */
  grid-template-rows: repeat(10, minmax(10vh, max-content));
  gap: var(--grid-gap);
  padding-inline: var(--grid-gap);
  min-height: 100vh;
}


/* ============================================================
   COLUMNA IZQUIERDA — elementos directos del grid
   ============================================================ */

/* Breadcrumb — cols 2-5, row 3, alineado al top
   Usa el mismo estilo que .section-title del Home */
.pagina-industria__breadcrumb {
  grid-column: 2 / span 4;
  grid-row: 3;
  align-self: start;
}

.pagina-industria__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  /* Separación horizontal entre items y vertical entre líneas cuando wrappea
     (los nombres de servicios son largos: "Análisis metalográfico microscópico" etc) */
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem);
  row-gap: clamp(0.5rem, 1vw, 0.75rem);
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.4;
}

.pagina-industria__breadcrumb li {
  font-family: var(--font-family);
  font-size: var(--font-section-title, clamp(0.875rem, 1vw, 1rem));
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Prefix "— " en cada item (el primero ya lo tiene del estilo section-title) */
.pagina-industria__breadcrumb li:not(:first-child)::before {
  content: "— ";
  margin-right: clamp(0.25rem, 0.4vw, 0.4rem);
}

.pagina-industria__breadcrumb li:first-child::before {
  content: "— ";
  margin-right: clamp(0.25rem, 0.4vw, 0.4rem);
}

.pagina-industria__breadcrumb a {
  color: var(--color-ink);
  transition: color var(--transition-base);
}

.pagina-industria__breadcrumb a:hover,
.pagina-industria__breadcrumb a:focus-visible {
  color: var(--color-rust);
}

.pagina-industria__breadcrumb [aria-current="page"] {
  /* La página actual no es link, mantiene el color pero sin hover */
  color: var(--color-ink);
}


/* Intro = título + párrafo unidos como un bloque
   cols 2-5, arranca en row 4, puede expandirse hasta row 5/6 */
.pagina-industria__intro {
  grid-column: 2 / span 4;
  grid-row: 4 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pagina-industria__title {
  font-family: var(--font-family);
  /* Mismo estilo que .industry-card__title del Home */
  font-size: clamp(1.75rem, 2.5vw, 3rem);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.pagina-industria__lead {
  font-family: var(--font-family);
  font-size: clamp(1rem, 1.2vw, 2rem);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  line-height: 1.4;
  max-width: 60ch;
}


/* Subtítulo "Problemas frecuentes en el sector"
   cols 2-5, row 6, alineado al bottom */
.pagina-industria__subtitle {
  grid-column: 2 / span 4;
  grid-row-start: 6;
  align-self: end;
  font-family: var(--font-family);
  font-size: clamp(1rem, 1.2vw, 2rem);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}


/* Lista de modos de falla con guión "—" como marcador
   cols 2-5, rows 7-10 (arranca un row antes que el subtítulo bottom) */
.pagina-industria__list {
  grid-column: 2 / span 4;
  grid-row-start: 7;
  grid-row-end: 11;
  align-self: start;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.3vw, 0.8rem);
}

.pagina-industria__list li {
  font-family: var(--font-family);
  /* Estilo similar a .sobre-nosotros__body */
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  line-height: 1.3;
  padding-left: 2rem;
  position: relative;
}

.pagina-industria__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-ink);
}


/* ============================================================
   COLUMNA DERECHA — ASIDE STICKY
   ============================================================ */

.pagina-industria__aside {
  /* Posición en el grid principal: cols 7-10, rows 1-10 */
  grid-column: 7 / span 4;
  grid-row: 1 / span 10;

  /* Sticky: se mantiene visible mientras la página scrollea */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;

  /* NO ponemos overflow:hidden ni background aquí — los maneja el ::before */

  /* Sub-grid interno: 4 cols × 10 rows alineadas con el grid principal */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: var(--grid-gap);
}

/* Pseudo-elemento que contiene la imagen de fondo y se extiende
   más allá del aside hasta el borde derecho del viewport.
   Tres ajustes acumulados al "right":
     1) -grid-gap → compensa el padding-inline del grid principal (15px)
     2) -(100vw - max-width)/2 si el viewport excede el max-width → llega al borde
   El "left: 0" mantiene el lado izquierdo en su posición original. */
.pagina-industria__aside::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(
    (-1 * var(--grid-gap))
    - max(0px, (100vw - var(--grid-max-width, 1920px)) / 2)
  );
  background-image: var(--aside-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}


/* Título del aside: cols 8-9 del grid principal = cols 2-3 del sub-grid */
.pagina-industria__aside-title {
  grid-column: 2 / span 2;
  grid-row: 3;
  align-self: start;
  position: relative;
  z-index: 1;
  font-family: var(--font-family);
  /* Mismo estilo que .section-title pero en claro */
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: var(--weight-semibold);
  color: var(--color-bone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}


/* Contenedor de las tarjetas: cols 2-3 del sub-grid, rows según cantidad */
.pagina-industria__cards {
  grid-column: 2 / span 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}


/* Variantes según cantidad de tarjetas
   --4: rows 5-8, --5: rows 5-9, --6: rows 4-9, --7: rows 3-9, --8: rows 3-10 */
/* Variantes según cantidad de tarjetas
   --2: rows 6-7  (2 tarjetas, centradas en medio)
   --4: rows 5-8
   --5: rows 5-9
   --6: rows 4-9
   --7: rows 3-9, título a row 2
   --8: rows 3-10, título a row 2 */
.pagina-industria__aside--2 .pagina-industria__cards {
  grid-row: 6 / span 2;
}

.pagina-industria__aside--4 .pagina-industria__cards {
  grid-row: 5 / span 4;
}

.pagina-industria__aside--5 .pagina-industria__cards {
  grid-row: 5 / span 5;
}

.pagina-industria__aside--6 .pagina-industria__cards {
  grid-row: 4 / span 6;
}

/* Con 7+ tarjetas, el título se mueve a row 2 alineado al BOTTOM
   para que respire respecto al header de navegación arriba */
.pagina-industria__aside--7 .pagina-industria__aside-title,
.pagina-industria__aside--8 .pagina-industria__aside-title {
  grid-row: 2;
  align-self: end;
}

.pagina-industria__aside--7 .pagina-industria__cards {
  grid-row: 3 / span 7;
}

.pagina-industria__aside--8 .pagina-industria__cards {
  grid-row: 3 / span 8;
}


/* ============================================================
   TARJETAS DE ESTUDIO (dentro del aside)
   ============================================================ */

.estudio-card {
  /* Altura FIJA: todas las cards tienen el mismo alto, sin importar
     si el texto es de 1, 2 o 3 líneas. Texto centrado vertical adentro. */
  height: clamp(72px, 8vh, 96px);

  /* Flex para centrado vertical del contenido (texto + círculo) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1vw, 1.25rem);
  padding-inline: clamp(1.125rem, 1.75vw, 1.75rem);
  /* Sin padding-block: el contenido se centra solo por height + align-items */

  background: var(--color-bone);
  border: 1.5px solid var(--color-bone);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;

  /* will-change + GPU compositing para que las transiciones de hover
     se rendericen en GPU y se sientan instantáneas */
  will-change: background-color, color;
}

.estudio-card__title {
  font-family: var(--font-family);
  font-size: clamp(0.875rem, 1vw, 1.125rem);
  font-weight: var(--weight-medium);
  color: currentColor;
  line-height: 1.25;
  margin: 0;
  flex: 1;
  /* Limitar a 3 líneas con elipsis si excede (failsafe, no debería pasar) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.estudio-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2vw, 42px);
  height: clamp(32px, 2vw, 42px);
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}

.estudio-card__btn svg {
  width: 50%;
  height: 50%;
  display: block;
  color: currentColor;
}


/* HOVER — instantáneo (sin transición)
   Sin timing no hay forma de que padre e hijo se vean desfasados.
   El cambio es inmediato, snap puro. */
.estudio-card,
.estudio-card__btn {
  transition: none;
}

/* Reposo: bg bone, border bone, texto ink, círculo ink
   Hover:  bg transparente, border bone, texto bone, círculo bg-bone con flecha ink */
.estudio-card:hover,
.estudio-card:focus-visible {
  background-color: transparent;
  border-color: var(--color-bone);
  color: var(--color-bone);
}

.estudio-card:hover .estudio-card__btn,
.estudio-card:focus-visible .estudio-card__btn {
  background-color: var(--color-bone);
  border-color: var(--color-bone);
  color: var(--color-ink);
}


/* ============================================================
   VARIANTE --dark — aside con título y tarjetas oscuras
   Se usa cuando la imagen de fondo del aside es CLARA, lo que
   exige invertir los colores del contenido para mantener contraste.
   Aplica a los servicios: Ensayos físicos y Soldadura por arco eléctrico.
   ============================================================ */

/* Título oscuro sobre fondo claro */
.pagina-industria__aside--dark .pagina-industria__aside-title {
  color: var(--color-ink);
}

/* Tarjetas en estado normal: bg oscuro, texto claro */
.pagina-industria__aside--dark .estudio-card {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bone);
}

/* HOVER: bg transparente (deja ver la imagen), texto oscuro, borde oscuro */
.pagina-industria__aside--dark .estudio-card:hover,
.pagina-industria__aside--dark .estudio-card:focus-visible {
  background-color: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Botón en hover: invertido (bg oscuro, flecha clara) */
.pagina-industria__aside--dark .estudio-card:hover .estudio-card__btn,
.pagina-industria__aside--dark .estudio-card:focus-visible .estudio-card__btn {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bone);
}


/* ============================================================
   ANIMACIÓN DE ENTRADA
   ============================================================ */

.pagina-industria__breadcrumb,
.pagina-industria__intro,
.pagina-industria__subtitle,
.pagina-industria__list li {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.is-ready .pagina-industria__breadcrumb { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.is-ready .pagina-industria__intro     { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.is-ready .pagina-industria__subtitle  { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

.is-ready .pagina-industria__list li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.is-ready .pagina-industria__list li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.is-ready .pagina-industria__list li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.is-ready .pagina-industria__list li:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.is-ready .pagina-industria__list li:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.is-ready .pagina-industria__list li:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.is-ready .pagina-industria__list li:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.is-ready .pagina-industria__list li:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }


/* Tarjetas de estudio con cascada de entrada.
   IMPORTANTE: la transición SOLO afecta opacity y transform de la
   animación de entrada. NO incluye background-color/border-color/color
   para que el hover quede instantáneo (sin transición). */
.estudio-card {
  opacity: 0;
  transform: translateX(20px);

  transition:
    opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.is-ready .estudio-card:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.5s; }
.is-ready .estudio-card:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }
.is-ready .estudio-card:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.7s; }
.is-ready .estudio-card:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.8s; }
.is-ready .estudio-card:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.9s; }
.is-ready .estudio-card:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 1.0s; }
.is-ready .estudio-card:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: 1.1s; }
.is-ready .estudio-card:nth-child(8) { opacity: 1; transform: translateX(0); transition-delay: 1.2s; }


/* También animar el título del aside */
.pagina-industria__aside-title {
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}

.is-ready .pagina-industria__aside-title {
  opacity: 1;
}


@media (prefers-reduced-motion: reduce) {
  .pagina-industria__breadcrumb,
  .pagina-industria__intro,
  .pagina-industria__subtitle,
  .pagina-industria__list li,
  .estudio-card,
  .pagina-industria__aside-title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ===== TABLET ============================================ */
@media (max-width: 1024px) {

  /* Grid principal: pasa a flow vertical, sin grid de 10 cols */
  .pagina-industria__grid {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-inline: 0;
    gap: 0;
  }

  /* Los elementos directos del grid pierden su grid-column/grid-row,
     se apilan en orden DOM: breadcrumb, intro, subtítulo, lista, aside */

  .pagina-industria__breadcrumb,
  .pagina-industria__intro,
  .pagina-industria__subtitle,
  .pagina-industria__list {
    grid-column: unset;
    grid-row: unset;
    align-self: unset;
    padding-inline: clamp(20px, 3vw, 40px);
  }

  .pagina-industria__breadcrumb {
    /* Padding-top generoso para separar del header.
       clamp(4rem, 10vw, 6rem) ≈ 64-96px según viewport.
       TODO opcional: agregar --space-3xl al tokens.css y usarlo aquí */
    padding-top: clamp(4rem, 10vw, 6rem);
  }

  .pagina-industria__intro {
    padding-top: var(--space-lg);
  }

  .pagina-industria__subtitle {
    padding-top: var(--space-2xl);
  }

  .pagina-industria__list {
    padding-top: var(--space-md);
    padding-bottom: var(--space-2xl);
  }

  /* ASIDE: pierde sticky, altura 100vh y full-bleed.
     Pasa a ser un bloque normal apilado debajo de la info.
     IMPORTANTE: position:relative para que el ::before se ancle al aside
     y no al body (que es lo que pasaba cuando lo dejábamos en static). */
  .pagina-industria__aside {
    position: relative;
    grid-column: unset;
    grid-row: unset;
    height: auto;
    min-height: 80vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto;
    gap: var(--grid-gap);
    padding: var(--space-2xl) clamp(20px, 3vw, 40px);
    align-self: stretch;
  }

  /* El pseudo-elemento se reduce a cubrir solo el aside,
     sin extensiones hacia los lados */
  .pagina-industria__aside::before {
    right: 0;
  }

  /* Título del aside: ocupa toda la fila */
  .pagina-industria__aside-title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Tarjetas: 2 columnas en tablet para que se vean bien sin scroll */
  .pagina-industria__cards {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }

  /* Las cards mantienen el alto fijo pero ahora pueden ser un poco más altas */
  .estudio-card {
    height: auto;
    min-height: clamp(80px, 12vw, 110px);
  }
}


/* ===== MOBILE ============================================ */
@media (max-width: 640px) {

  /* Mobile: aún más compacto, una sola columna de tarjetas */
  .pagina-industria__aside {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--space-md);
    min-height: auto;
  }

  .pagina-industria__cards {
    grid-template-columns: 1fr;
  }

  /* Tipografía y espaciados un poco más ajustados */
  .pagina-industria__breadcrumb,
  .pagina-industria__intro,
  .pagina-industria__subtitle,
  .pagina-industria__list {
    padding-inline: var(--space-md);
  }

  .pagina-industria__intro {
    gap: 1.25rem;
  }

  .pagina-industria__list li {
    padding-left: 1.5rem;
  }

  .estudio-card {
    padding-inline: 1rem;
    min-height: 72px;
  }
}