/* Cards de Aplicaciones + Tecnología — Siderum */

:root {
  /* Altura de Card que se superpone al Hero: aproximadamente la mitad de
     una Card (su altura varía entre ~430px y ~520px en todo el rango). */
  --hero-cards-overlap: 13.5rem;
}

#aplicaciones {
  position: relative;
  /* flow-root: evita que el margin-top negativo de .cards colapse con el de
     la sección (sin padding superior) y desplace toda la sección. */
  display: flow-root;
  padding-block: 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* Línea turquesa que une visualmente el Hero con las Cards, por detrás de
   estas (las Cards, más adelante en el orden de pintado, quedan encima). */
#aplicaciones::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-turquoise);
}

/* Cards + Tecnología + separador Aplicaciones + Aguas, Desinfección y
   Minería comparten un único degradado aplicado al contenedor común: las
   secciones internas no tienen fondo de color propio, por lo que el
   degradado no se reinicia entre ellas. */
.tech-apps-surface {
  background: linear-gradient(to bottom right, var(--color-gray-card), var(--color-gray-dark));
}

#tecnologia {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Cards */

.cards {
  position: relative;
  z-index: 1;
  max-width: min(992px, 100% - 3rem);
  margin-inline: auto;
  /* Desplaza las Cards hacia arriba para que crucen el límite
     Hero/Aplicaciones: la mitad superior queda sobre el fondo del Hero y la
     inferior sobre el fondo de esta sección. El Hero reserva esta misma
     altura bajo su CTA (hero.css), por lo que no se solapa su contenido. En
     una columna (Mobile) solo cruza la primera Card. */
  margin-top: calc(-1 * var(--hero-cards-overlap));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-turquoise);
  border-radius: 20px;
  background-color: var(--color-gray-card);
  padding: 1.5rem;
}

.card-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.card-title::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background-color: var(--color-white);
}

.card-text {
  flex-grow: 1;
  margin: 0 0 1.5rem;
  color: var(--color-white);
}

.card-cta {
  display: block;
  width: 100%;
  text-align: center;
}

.card-cta:hover,
.card-cta:focus-visible {
  background-color: var(--color-white);
  color: var(--color-turquoise);
}

/* Tecnología */

.tech-grid {
  display: grid;
  grid-template-areas: "heading" "graph" "copy";
  grid-template-columns: 1fr;
  row-gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
}

.tech-heading {
  grid-area: heading;
  margin: 0;
  color: var(--color-white);
  font-weight: var(--fw-regular);
  font-size: 2.5rem;
}

.tech-line {
  display: block;
}

.tech-highlight {
  color: var(--color-turquoise);
}

.tech-graph {
  grid-area: graph;
  width: 100%;
  height: auto;
  justify-self: start;
}

.tech-copy {
  grid-area: copy;
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

.tech-copy p {
  color: var(--color-white);
  text-align: justify;
}

.tech-copy p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .tech-grid {
    grid-template-areas:
      "heading graph"
      "copy graph";
    grid-template-columns: minmax(0, 1fr) minmax(320px, 620px);
    column-gap: clamp(2rem, 5vw, 4rem);
  }

  .tech-heading {
    font-size: 2.9rem;
    line-height: 1;
  }

  /* El gráfico no aporta altura a las filas (height: 0): estas quedan
     definidas por título + texto, y el gráfico ocupa exactamente esa altura
     (min-height: 100%) para equilibrar ambas columnas. object-fit conserva
     la proporción del SVG sin deformarlo, alineado a la derecha. */
  .tech-graph {
    justify-self: end;
    height: 0;
    min-height: 100%;
    object-fit: contain;
    object-position: right center;
  }
}