/*
 * inicio.css
 * Composición de la página de inicio: hero con corte diagonal, clases
 * de hoy, servicios, testimonios y cierre hacia contacto.
 */

/* Hero: fondo negro con corte diagonal inferior (motivo de la marca) */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--espacio-4) 0 var(--espacio-6);
  background: var(--negro);
  color: var(--blanco);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%);
}

.hero-interior {
  position: relative;
  display: grid;
  gap: var(--espacio-4);
}

/* Palabra gigante de fondo: decorativa, oculta a lectores de pantalla */
.hero-marca {
  position: absolute;
  top: -0.15em;
  left: -0.05em;
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(7rem, 30vw, 22rem);
  font-weight: 700;
  line-height: 1;
  color: var(--negro-suave);
}

.hero-texto {
  position: relative;
}

/* El texto real se pinta por encima de la palabra de fondo */
.hero-texto > :not(.hero-marca) {
  position: relative;
}

.hero-titulo {
  max-width: 14ch;
  margin-top: var(--espacio-4);
}

.hero-bajada {
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--gris-claro);
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}

/* Clases de hoy dentro del hero */
.hoy {
  position: relative;
  align-self: end;
  padding: var(--espacio-3);
  border-top: 6px solid var(--naranja);
  background: var(--negro-suave);
}

.hoy-titulo {
  font-size: 1.5rem;
}

.hoy-lista {
  margin: 0 0 var(--espacio-2);
  padding: 0;
  list-style: none;
}

.hoy-clase {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--espacio-2);
  padding: var(--espacio-1) 0;
  border-bottom: 1px solid var(--negro);
}

.hoy-hora {
  grid-row: span 2;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
}

.hoy-nombre {
  font-weight: 700;
}

.hoy-instructor,
.hoy-vacio {
  color: var(--gris-claro);
}

.hoy-enlace {
  color: var(--blanco);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .hero {
    padding: var(--espacio-5) 0 var(--espacio-6);
  }

  .hero-interior {
    grid-template-columns: 1.6fr 1fr;
    align-items: end;
  }
}

/* Servicios: la sala ocupa más espacio porque es lo que todos usan */
.servicios {
  display: grid;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}

.servicio {
  padding: var(--espacio-3);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radio-m);
}

.servicio-icono {
  margin-bottom: var(--espacio-2);
}

.servicio-dato {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 600;
}

.servicio-destacado {
  border: 0;
  background: var(--gris);
}

.servicio-destacado h3 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.servicio-enlace {
  font-weight: 700;
}

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

  .servicio-destacado {
    grid-column: 1 / -1;
  }
}

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

  /* Ocupa 2 x 2: ícono grande arriba y el texto asentado abajo */
  .servicio-destacado {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    padding: var(--espacio-4);
  }

  .servicio-destacado .servicio-icono {
    width: 120px;
    margin-bottom: auto;
  }
}

/* Testimonios: el primero se lee como cita grande */
.testimonios {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3);
}

.testimonio {
  margin: 0;
}

.testimonio-texto {
  margin: 0 0 var(--espacio-1);
  font-size: 1.05rem;
}

.testimonio-texto p::before {
  content: "\201C";
  color: var(--naranja);
  font-family: var(--fuente-titulos);
  font-weight: 700;
}

.testimonio-autor {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--fuente-titulos);
  font-weight: 600;
}

.testimonio:first-child .testimonio-texto {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.25;
}

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

  .testimonio:first-child {
    grid-column: 1 / -1;
    max-width: 30ch;
  }
}

/* Cierre hacia contacto */
.cierre {
  padding: var(--espacio-5) 0;
}

.cierre-interior {
  display: grid;
  justify-items: start;
  gap: var(--espacio-1);
}

.cierre-titulo {
  max-width: 18ch;
}