/* Página de inicio */

/* Valores propios de esta página */
:root {
  --alto-hero: 100vh;
  --alto-hero-movil: 80vh;
  --espacio-hero-movil: 20%;              /* relleno inferior del hero en móvil */
  --opacidad-velo-hero: 0.6;
  --capa-contenido: 1;
  --separacion-logos-banda: 50px;
  --alto-logo-banda: 60px;
  --alto-logo-gendra: 24px;                /* sin aire alrededor: alto óptico de los demás logos, que sí lo traen */
  --ancho-banda: 80%;                      /* escritorio y tablet; la única tarjeta más estrecha que las demás */
  --alto-banda: calc(var(--texto-sm) * var(--interlineado-base) + var(--espacio-sm) + var(--alto-logo-banda) + 2 * (var(--relleno-tarjeta) + var(--grosor-fino)));  /* texto, separación, logos, relleno y borde */
  --alto-nosotros: 70vh;                  /* alto mínimo en escritorio */
  --alto-imagen-nosotros-apilada: 40vh;   /* tablet y móvil */
  --alto-minimo-cta: 60vh;
  --ancho-contenido-cta: 600px;
  --color-velo-cta: color-mix(in srgb, var(--color-primario) 85%, transparent);

  /* Principios, Nosotros, Equipo y Servicios */
  --ancho-foto-equipo: 264px;
  --ancho-texto-parrafo: 65ch;
  --ancho-servicios: 1140px;               /* más estrecha que las tarjetas, nunca a ancho completo */

  /* Confirmación del formulario de contacto */
  --tamano-icono-confirmacion: 64px;
}

/* Carrusel */
.carrusel {
  overflow: hidden;
  touch-action: pan-y;
}

.carrusel__pista {
  display: flex;
  gap: var(--carrusel-separacion);
  transition: transform var(--duracion-lenta) ease;
}

.carrusel__diapositiva {
  flex: 0 0 calc((100% - (var(--carrusel-por-vista) - 1) * var(--carrusel-separacion)) / var(--carrusel-por-vista));
  min-width: 0;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--espacio-md);
  min-height: var(--alto-hero);
  padding: var(--espacio-p6) calc(var(--margen-pagina) + var(--relleno-lateral-tarjeta));
  /* El lema queda siempre por encima de la parte de la banda que monta sobre el hero */
  padding-block-end: max(var(--espacio-p6), calc(var(--alto-banda) / 2 + var(--espacio-lg)));
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primario);
  opacity: var(--opacidad-velo-hero);
}

.hero__antetitulo,
.hero__lema {
  position: relative;
  z-index: var(--capa-contenido);
}

.hero__lema {
  color: var(--color-blanco);
  font-size: var(--texto-display);
}

/* Banda de logos: tarjeta centrada y más estrecha que las demás, con el texto encima
   de los logos, que monta sobre el hero la mitad de su alto. Es la única
   superposición del diseño. Sigue en el flujo, así que la sección siguiente empieza
   justo debajo de la parte que sobresale. */
.banda {
  position: relative;
  z-index: var(--capa-contenido);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  width: var(--ancho-banda);
  min-height: var(--alto-banda);
  margin-inline: auto;
  margin-block-start: calc(-0.5 * var(--alto-banda));
  /* Mismo tope de contenido que el resto de tarjetas, pero repartido a ambos lados
     para que siga centrado. Los % se resuelven contra el ancho de la página. */
  padding-inline: max(var(--relleno-tarjeta), (var(--ancho-banda) - var(--ancho-maximo-contenido)) / 2);
  border: var(--grosor-fino) solid var(--color-gris-claro);
  background-color: var(--color-blanco);
}

.banda__texto {
  margin: 0;
  color: var(--color-gris-medio);
  font-size: var(--texto-sm);
  text-align: center;
}

.banda__carrusel {
  --carrusel-por-vista: 5;
  --carrusel-separacion: var(--separacion-logos-banda);
}

.banda__carrusel .carrusel__diapositiva {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--alto-logo-banda);
}

.banda__carrusel img {
  width: auto;
  max-height: 100%;
}

.banda__carrusel .banda__logo-gendra {
  height: var(--alto-logo-gendra);
  object-fit: contain;
}

/* Nosotros: tarjeta a dos columnas; la foto llega al borde y el relleno va en el texto */
.nosotros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: var(--alto-nosotros);
  padding: 0;
  border: var(--grosor-fino) solid var(--color-gris-claro);
  overflow: hidden;
}

.nosotros__imagen {
  position: relative;
}

.nosotros__imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nosotros__contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-md);
  padding: var(--relleno-tarjeta);
  background-color: var(--color-blanco);
}

.nosotros__texto {
  max-width: var(--ancho-texto-parrafo);
  margin: 0;
  color: var(--color-texto);
  font-size: var(--texto-md);
  line-height: var(--interlineado-base);
}

.nosotros__boton {
  align-self: flex-start;
  margin-block-start: var(--espacio-sm); /* sumado al hueco de --espacio-md: --espacio-lg */
}

/* Principios */
/* Principios: encabezado centrado sobre el blanco y, debajo, la tarjeta con los principios */
.principios {
  margin-block-start: calc(2 * var(--espacio-xl));
}

.principios__encabezado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-md);
  padding-inline: calc(var(--margen-pagina) + var(--relleno-lateral-tarjeta));
  text-align: center;
}

.principios__texto {
  max-width: var(--ancho-texto-parrafo);
  margin: 0;
}

/* Un principio por columna: 4 en escritorio, 2 en tablet y 1 en móvil */
.principios__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-xl);
  margin-block-start: var(--espacio-xl);
  padding: calc(2 * var(--espacio-xl));
  /* Centrada bajo el encabezado: el sobrante del tope de contenido se reparte a
     ambos lados. Los % se resuelven contra el ancho de la página. */
  padding-inline: max(calc(2 * var(--espacio-xl)), (100% - 2 * var(--margen-pagina) - var(--ancho-maximo-contenido)) / 2);
  background-color: var(--color-fondo-suave);
}

.principio {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}

/* Íconos de trazo fino: el grosor no escala con el tamaño del ícono */
.principio__icono {
  width: var(--texto-3xl);
  height: var(--texto-3xl);
  fill: none;
  stroke: var(--color-acento);
  stroke-width: var(--grosor-grueso);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principio__icono * {
  vector-effect: non-scaling-stroke;
}

.principio__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-bold);
}

.principio__texto {
  margin: 0;
  font-size: var(--texto-base);
}

/* Equipo: sin fondo; su contenido se alinea al borde interior de las tarjetas */
.equipo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-lg);
  margin-block-start: var(--espacio-xl);
  padding-inline: calc(var(--margen-pagina) + var(--relleno-lateral-tarjeta));
}

.equipo__miembros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-lg);
}

.miembro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

.miembro__foto {
  width: 100%;
  max-width: var(--ancho-foto-equipo);
  aspect-ratio: 1;
  margin-block-end: var(--espacio-sm);
  object-fit: cover;
  background-color: var(--color-fondo-suave);
}

.miembro__nombre {
  color: var(--color-primario);
  font-size: var(--texto-lg);
  font-weight: var(--peso-medium);
  line-height: var(--interlineado-compacto);
}

.miembro__cargo {
  margin: 0;
  color: var(--color-gris-medio);
}

/* Llamada final: tarjeta con la foto del hero bajo un velo azul y el contenido a
   la izquierda */
/* Tras Servicios, que no tiene fondo: --espacio-xl en lugar del margen de página */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--alto-minimo-cta);
  margin-block-start: var(--espacio-xl);
  overflow: hidden;
}

.cta__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-velo-cta);
}

.cta__contenido {
  position: relative;
  z-index: var(--capa-contenido);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-md);
  width: 100%;
  max-width: var(--ancho-contenido-cta);
  margin-inline: auto;
  text-align: center;
}

.cta__texto {
  margin: 0;
  color: var(--color-texto-claro);
  font-size: var(--texto-md);
  line-height: var(--interlineado-texto);
}

.cta__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-md) var(--espacio-lg);
  margin-block-start: var(--espacio-sm);
}

/* Botón de la página: principal (azul, cierre de Servicios) y claro (blanco, CTA) */
.boton-principal,
.boton-claro {
  min-height: var(--alto-minimo-toque);
  padding: 0 var(--espacio-lg);
  border: 0;
  border-radius: var(--radio-sm);
  font-weight: var(--peso-medium);
  transition: background-color var(--duracion-base), color var(--duracion-base);
}

.boton-principal {
  background-color: var(--color-primario);
  color: var(--color-blanco);
}

.boton-claro {
  background-color: var(--color-blanco);
  color: var(--color-primario);
}

.boton-principal:hover,
.boton-claro:hover {
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

.cta__enlace {
  color: var(--color-blanco);
  text-decoration: underline;
  text-underline-offset: var(--espacio-xs);
  transition: color var(--duracion-base);
}

.cta__enlace:hover {
  color: var(--color-acento);
}

/* Servicios: sobre el blanco de la página, más estrecha que las tarjetas.
   Encabezado en una columna y rejilla de áreas separadas por líneas. */
.servicios {
  width: min(var(--ancho-servicios), 100% - 2 * (var(--margen-pagina) + var(--relleno-lateral-tarjeta)));
  margin: calc(2 * var(--espacio-xl)) auto 0; /* tras Equipo, también sin fondo */
}

.servicios__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
}

.servicios__texto {
  max-width: var(--ancho-texto-parrafo);
  margin: 0;
  color: var(--color-texto);
  font-size: var(--texto-md);
  line-height: var(--interlineado-base);
}

/* Las líneas son el fondo de la rejilla asomando por un hueco de --grosor-fino
   entre celdas blancas: quedan siempre alineadas. El borde superior abre la rejilla. */
.servicios__areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grosor-fino);
  margin-block-start: var(--espacio-xl);
  border-block-start: var(--grosor-fino) solid var(--color-gris-claro);
  background-color: var(--color-gris-claro);
}

.area {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  padding: var(--espacio-lg);
  background-color: var(--color-blanco);
}

/* El número en su propia línea, encima del título */
.area__cabecera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-xs);
}

.area__numero {
  color: var(--color-gris-medio);
  font-family: var(--fuente-titulos);
  font-stretch: var(--ancho-fuente-titulos);
  font-size: var(--texto-sm);
}

.area__titulo {
  color: var(--color-primario);
  font-size: var(--texto-xl);
  font-weight: var(--peso-medium);
}

.area__enfoque {
  margin: 0;
  color: var(--color-gris-medio);
}

.area__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
}

/* Viñeta circular centrada en la primera línea del servicio */
.area__lista li {
  position: relative;
  padding-inline-start: var(--espacio-md);
}

.area__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((1lh - var(--espacio-xs)) / 2);
  width: var(--espacio-xs);
  height: var(--espacio-xs);
  border-radius: var(--radio-circulo);
  background-color: var(--color-acento);
}

/* Celda de cierre: dos columnas en escritorio, con fondo suave para distinguirla */
.area--cierre {
  grid-column: span 2;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-fondo-suave);
}

/* Tablet */
/* Confirmación del formulario de contacto: sustituye a la columna del formulario
   tras un envío correcto. Entra con un leve desvanecido y desplazamiento hacia
   arriba; con "reducir movimiento" la regla global de base.css lo deja instantáneo. */
.confirmacion {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-md);
  text-align: center;
  animation: entrada-confirmacion var(--duracion-base) ease-out;
}

@keyframes entrada-confirmacion {
  from {
    opacity: 0;
    transform: translateY(var(--espacio-xs));
  }
}

.confirmacion__icono {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--tamano-icono-confirmacion);
  height: var(--tamano-icono-confirmacion);
  border-radius: var(--radio-circulo);
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

.confirmacion__icono svg {
  width: calc(var(--tamano-icono-confirmacion) / 2);
  height: calc(var(--tamano-icono-confirmacion) / 2);
}

.confirmacion__titulo {
  margin: 0;
  color: var(--color-primario);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-medium);
}

.confirmacion__texto {
  margin: 0;
  color: var(--color-texto);
  font-size: var(--texto-md);
  line-height: var(--interlineado-texto);
}

.confirmacion__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-md) var(--espacio-lg);
  margin-block-start: var(--espacio-sm);
}

.confirmacion__enlace {
  color: var(--color-primario);
  text-decoration: underline;
  text-underline-offset: var(--espacio-xs);
  transition: color var(--duracion-base);
}

.confirmacion__enlace:hover {
  color: var(--color-acento);
}

@media (max-width: 1024px) {
  .banda__carrusel {
    --carrusel-por-vista: 3;
  }

  /* La foto arriba y el texto debajo, sin alto mínimo */
  .nosotros {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .nosotros__imagen {
    height: var(--alto-imagen-nosotros-apilada);
  }

  .principios__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El mínimo de 60vh es solo de escritorio */
  .cta {
    min-height: 0;
  }

  .servicios__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .area--cierre {
    grid-column: auto;
  }
}

/* Móvil */
@media (max-width: 767px) {
  .hero {
    min-height: var(--alto-hero-movil);
    padding: 0 calc(var(--margen-pagina) + var(--relleno-lateral-tarjeta)) max(var(--espacio-hero-movil), calc(var(--alto-banda) / 2 + var(--espacio-lg)));
  }

  /* Al 80 % los logos quedarían diminutos: vuelve al ancho común */
  .banda {
    width: auto;
    margin-inline: var(--margen-pagina);
  }

  .banda__carrusel {
    --carrusel-separacion: var(--espacio-lg);
  }

  .principios__lista,
  .equipo__miembros {
    grid-template-columns: minmax(0, 1fr);
  }

  .principios__lista {
    padding: var(--relleno-tarjeta);
  }

  /* El botón a todo el ancho y el enlace de WhatsApp debajo, centrado */
  .cta__acciones,
  .confirmacion__acciones {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }

  .principios,
  .servicios {
    margin-block-start: var(--espacio-xl);
  }

  .servicios__areas {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Alineadas al borde del encabezado; la de cierre conserva el relleno por su fondo */
  .area:not(.area--cierre) {
    padding-inline: 0;
  }
}