/* =========================================================
   TEOCALLI — CENTRO DE YOGA
   HOJA DE ESTILOS PRINCIPAL

   ORDEN:
   1. Reset y variables
   2. Elementos generales
   3. Navegación
   4. Hero
   5. Botones generales
   6. Métodos de práctica
   7. Objetivos
   8. ¿Quiénes somos?
   9. Lo que hacemos
   10. Horarios y precios
   11. Extras y talleres
   12. Contacto
   13. Animaciones
========================================================= */


/* =========================================================
   1. RESET Y VARIABLES GLOBALES
========================================================= */

/*
   Elimina los márgenes y rellenos predeterminados.
   border-box evita que el padding aumente el ancho
   real de los elementos.
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
   Desplazamiento suave al utilizar los enlaces internos
   del menú de navegación.
*/
html {
  scroll-behavior: smooth;
}

/*
   Variables generales de colores y tipografías.
*/
:root {
  --color-negro: #1a1a1a;
  --color-blanco: #ffffff;
  --color-gris-claro: #f2f2f2;
  --color-gris-texto: #cccccc;
  --color-gris-oscuro: #555555;

  --fuente-titulo: "Cormorant Garamond", serif;
  --fuente-texto: "Poppins", sans-serif;
}


/* =========================================================
   2. ELEMENTOS GENERALES
========================================================= */

body {
  width: 100%;
  overflow-x: hidden;
  background-color: var(--color-blanco);
  color: var(--color-negro);
  font-family: var(--fuente-texto);
  line-height: 1.6;
}

/*
   Tipografía general para todos los títulos.
*/
h1,
h2,
h3 {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 2px;
}

h2 {
  font-size: 32px;
}

/*
   Estilo general de enlaces.
*/
a {
  color: inherit;
  text-decoration: none;
}

/*
   Elimina los puntos predeterminados de las listas.
*/
ul {
  list-style: none;
}

/*
   Evita que cualquier imagen sea más ancha que
   el contenedor en el que se encuentra.
*/
img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   3. NAVEGACIÓN
========================================================= */

/*
   Barra superior con el nombre a la izquierda
   y las opciones a la derecha.
*/
.navbar {
  position: relative;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 18px 40px;

  background-color: var(--color-negro);
  color: var(--color-blanco);
}

/*
   Nombre de Teocalli en la navegación.
*/
.nav-logo {
  flex-shrink: 0;
  font-family: var(--fuente-titulo);
  font-size: 22px;
  letter-spacing: 2px;
  white-space: nowrap;
}

/*
   Enlaces en fila para computadora.
*/
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;

  font-size: 13px;
  letter-spacing: 1px;
}

.nav-links a {
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--color-gris-texto);
}

/*
   Botón hamburguesa.
   Permanece oculto en computadora.
*/
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;

  padding: 5px;

  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--color-blanco);
}

/*
   NAVEGACIÓN EN TABLETA Y CELULAR
*/
@media (max-width: 768px) {
  .navbar {
    padding: 16px 20px;
  }

  /*
     Menú desplegable que aparece debajo de la barra.
  */
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;

    display: none;
    flex-direction: column;
    gap: 16px;

    width: 100%;
    padding: 24px 20px;

    background-color: var(--color-negro);
    text-align: center;
  }

  /*
     Esta clase la agrega JavaScript al presionar
     el botón hamburguesa.
  */
  .nav-links.activo {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  /*
     Decoración para las opciones del menú móvil.
  */
  .nav-links a::before {
    content: "~ ";
  }

  .nav-links a::after {
    content: " ~";
  }
}


/* =========================================================
   4. HERO — PORTADA
========================================================= */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 500px;
  padding: 80px 20px;

  background-color: var(--color-negro);
  color: var(--color-blanco);
  text-align: center;
}

/*
   Logo principal.

   Se utiliza el mismo ancho en computadora y celular.
   max-width protege el logo en pantallas extremadamente
   pequeñas para que nunca se salga del dispositivo.
*/
.hero-logo {
  display: block;
  width: 350px;
  max-width: calc(100vw - 32px);
  height: auto;
  margin: 0 auto 30px;
  flex-shrink: 0;
}

.hero h1 {
  margin-bottom: 20px;
  font-size: 48px;
  letter-spacing: 6px;
}

.hero-texto {
  width: 100%;
  max-width: 550px;
  margin: 0 auto 30px;

  color: var(--color-gris-texto);
  font-size: 15px;
  line-height: 1.8;
}

/*
   HERO EN CELULAR

   El logo conserva los mismos 350px.
   Solamente el texto adapta su tamaño.
*/
@media (max-width: 600px) {
  .hero {
    min-height: 420px;
    padding: 60px 16px;
  }

  .hero-logo {
    width: 350px;
    max-width: calc(100vw - 32px);
    margin-bottom: 30px;
  }

  .hero h1 {
    font-size: 34px;
    letter-spacing: 4px;
  }

  .hero-texto {
    max-width: 520px;
    margin-bottom: 0;
    font-size: 15px;
  }
}


/* =========================================================
   5. BOTONES GENERALES
========================================================= */

.btn {
  display: inline-block;
  padding: 12px 30px;

  border-radius: 2px;

  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/*
   Botón para secciones oscuras.
*/
.btn-outline {
  border: 1px solid var(--color-blanco);
  color: var(--color-blanco);
}

.btn-outline:hover {
  background-color: var(--color-blanco);
  color: var(--color-negro);
}

/*
   Botón para secciones claras.
*/
.btn-oscuro {
  border: 1px solid var(--color-negro);
  color: var(--color-negro);
}

.btn-oscuro:hover {
  background-color: var(--color-negro);
  color: var(--color-blanco);
}


/* =========================================================
   6. MÉTODOS DE PRÁCTICA
========================================================= */

.metodos {
  padding: 60px 20px;
  text-align: center;
}

/*
   Grid de las cuatro sesiones.
   En computadora aparecen dos por fila.
*/
.sesiones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  max-width: 900px;
  margin: 50px auto;
  text-align: left;
}

.sesion-card {
  min-width: 0;
  padding: 20px;
  background-color: var(--color-gris-claro);
}

.sesion-card h3 {
  margin-bottom: 8px;
  font-size: 16px;
  letter-spacing: 1px;
}

.sesion-card p {
  color: var(--color-gris-oscuro);
  font-size: 13px;
}

/*
   MÉTODOS EN CELULAR
*/
@media (max-width: 600px) {
  .metodos {
    padding: 55px 16px;
  }

  .sesiones-grid {
    grid-template-columns: 1fr;
    margin: 40px auto;
  }
}


/* =========================================================
   7. SESIONES Y OBJETIVOS
========================================================= */

.que-hacemos {
  padding: 70px 20px;
  background-color: var(--color-gris-claro);
  text-align: center;
}

/*
   Subtítulos decorativos de las diferentes secciones.
*/
.seccion-subtitulo {
  margin-top: 30px;
  margin-bottom: 30px;

  font-size: 30px;
  font-style: italic;
  line-height: 1.5;
}

/*
   Fotografías principales de cada sección.

   width: 100% permite que se adapten.
   max-width limita su tamaño en computadora.
   height: auto conserva sus proporciones.
*/
.seccion-imagen {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
}

/*
   Contenedor completo de objetivos.
*/
.objetivos {
  margin-bottom: 40px;
}

/*
   Solo selecciona el título directo de objetivos.
   Esto evita modificar los h3 que están dentro
   de las tarjetas CUERPO, MENTE y ESPÍRITU.
*/
.objetivos > h3 {
  margin-top: 60px;
  margin-bottom: 50px;
  font-size: 20px;
}

/*
   Fila de CUERPO, MENTE y ESPÍRITU.
*/
.valores-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;

  width: 100%;
  margin-bottom: 50px;
}

.valor-card {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 250px;
  height: 80px;
  padding: 10px;

  background-color: var(--color-negro);
}

.valor-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 6px;
  color: var(--color-blanco);
}

/*
   Tarjetas con la explicación de cada objetivo.
   En computadora aparecen tres en una sola fila.
*/
.objetivos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.objetivo-card {
  min-width: 0;
  padding: 20px;

  background-color: var(--color-blanco);
  font-size: 14px;
  text-align: left;
}

/*
   SESIONES Y OBJETIVOS EN CELULAR
*/
@media (max-width: 600px) {
  .que-hacemos {
    padding: 55px 16px;
  }

  .seccion-subtitulo {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 21px;
  }

  /*
     Las tres tarjetas permanecen en una sola fila.
  */
  .valores-grid {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .valor-card {
    flex: 1 1 0;
    width: calc((100% - 16px) / 3);
    min-width: 0;
    height: 70px;
    padding: 8px 3px;
  }

  .valor-card h3 {
    font-size: 10px;
    letter-spacing: 1px;
  }

  /*
     Las tarjetas con las explicaciones sí aparecen
     una debajo de otra en celular.
  */
  .objetivos-grid {
    grid-template-columns: 1fr;
  }

  .objetivos > h3 {
    margin-top: 45px;
    margin-bottom: 35px;
  }

  /*
     Protección específica para que ninguna fotografía
     se salga del ancho disponible.
  */
  .seccion-imagen {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}


/* =========================================================
   8. ¿QUIÉNES SOMOS?
========================================================= */

.como-lo-hacemos {
  padding: 70px 20px;
  background-color: var(--color-blanco);
  text-align: center;
}

/*
   Contenedor de todo el texto.
*/
.concepto-texto {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 40px;

  color: #444444;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.concepto-texto p {
  margin-bottom: 20px;
}

/*
   Parte que comienza oculta.
*/
.concepto-extra {
  display: none;
}

/*
   Esta clase la agrega JavaScript al presionar
   el botón Leer más.
*/
.concepto-extra.visible {
  display: block;
}

/*
   Botón Leer más / Leer menos.
*/
.btn-leer-mas {
  display: block;
  margin: 10px auto 0;
  padding: 10px 22px;

  border: 1px solid var(--color-negro);
  background-color: transparent;
  color: var(--color-negro);

  font-family: var(--fuente-texto);
  font-size: 14px;

  cursor: pointer;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.btn-leer-mas:hover {
  background-color: var(--color-negro);
  color: var(--color-blanco);
}

/*
   Estilos conservados para Luz y Oscuridad,
   por si posteriormente se reactiva ese bloque.
*/
.dualidad {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 40px;
}

.dualidad-item {
  width: 150px;
  padding: 20px 0;

  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.dualidad-luz {
  border: 1px solid var(--color-negro);
  background-color: var(--color-blanco);
  color: var(--color-negro);
}

.dualidad-oscuridad {
  background-color: var(--color-negro);
  color: var(--color-blanco);
}

/*
   ¿QUIÉNES SOMOS? EN CELULAR
*/
@media (max-width: 600px) {
  .como-lo-hacemos {
    padding: 55px 16px;
  }

  .concepto-texto {
    max-width: 100%;
    font-size: 14px;
  }

  .dualidad {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .dualidad-item {
    width: 100%;
    max-width: 250px;
  }
}


/* =========================================================
   9. LO QUE HACEMOS
========================================================= */

.cuando-lo-hacemos {
  padding: 70px 20px;
  background-color: var(--color-gris-claro);
  text-align: center;
}

/*
   Las cuatro modalidades aparecen en dos columnas
   en computadora.
*/
.horarios-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  max-width: 700px;
  margin: 50px auto;
}

.horario-card {
  min-width: 0;
  padding: 20px;

  background-color: var(--color-blanco);
  font-size: 14px;
  letter-spacing: 1px;
}

/*
   LO QUE HACEMOS EN CELULAR
*/
@media (max-width: 600px) {
  .cuando-lo-hacemos {
    padding: 55px 16px;
  }

  .horarios-grid {
    grid-template-columns: 1fr;
    margin: 40px auto;
  }
}


/* =========================================================
   10. HORARIOS Y PRECIOS
========================================================= */

.cuanto-cuesta {
  padding: 70px 20px;
  background-color: var(--color-negro);
  color: var(--color-blanco);
  text-align: center;
}

/*
   Los tres paquetes aparecen en una sola fila
   en computadora.
*/
.precios-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;

  width: 100%;
  max-width: 1100px;
  margin: 50px auto 0;
}

/*
   Tarjeta completa de cada paquete.
*/
.precio-card {
  position: relative;

  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 35px 25px;

  border: 1px solid #444444;
  text-align: left;
}

/*
   Tarjeta de mensualidad destacada.
*/
.precio-destacado {
  border: 2px solid var(--color-blanco);
}

/*
   Nombre del nivel: Básico, Intermedio o Completo.
*/
.precio-nivel {
  margin-bottom: 12px;

  color: var(--color-gris-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
}

.precio-card h3 {
  margin-bottom: 20px;
  font-size: 22px;
}

/*
   Cantidad principal del paquete.
*/
.precio-monto {
  margin: 0;

  font-family: var(--fuente-titulo);
  font-size: 42px;
  line-height: 1;
}

.precio-periodo {
  margin: 8px 0 25px;

  color: var(--color-gris-texto);
  font-size: 13px;
}

/*
   Explicación breve del paquete.
*/
.precio-descripcion {
  min-height: 75px;
  margin-bottom: 25px;

  color: var(--color-gris-texto);
  font-size: 13px;
  line-height: 1.7;
}

/*
   Lista vertical de beneficios.
*/
.precio-beneficios {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.precio-beneficios li {
  padding: 10px 0;

  border-bottom: 1px solid #333333;
  color: var(--color-gris-texto);

  font-size: 13px;
  line-height: 1.5;
}

/*
   Botón colocado al final de cada tarjeta.
   margin-top: auto mantiene alineados los botones.
*/
.btn-paquete {
  display: block;
  margin-top: auto;
  padding: 13px 15px;

  border: 1px solid var(--color-blanco);
  color: var(--color-blanco);

  text-align: center;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.btn-paquete:hover {
  background-color: var(--color-blanco);
  color: var(--color-negro);
}

/*
   Etiqueta RECOMENDADO.
*/
.precio-recomendado {
  position: absolute;
  top: 0;
  right: 0;

  margin: 0;
  padding: 7px 12px;

  background-color: var(--color-blanco);
  color: var(--color-negro);

  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
}

/*
   Botón del paquete destacado.
*/
.btn-paquete-destacado {
  background-color: var(--color-blanco);
  color: var(--color-negro);
}

.btn-paquete-destacado:hover {
  background-color: transparent;
  color: var(--color-blanco);
}

/*
   Aviso de privacidad debajo de los paquetes.
*/
.paquetes-privacidad {
  grid-column: 1 / -1;

  width: 100%;
  max-width: none;
  margin: 28px auto 0;

  color: var(--color-gris-texto);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
}

.paquetes-privacidad a {
  color: var(--color-blanco);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;

  transition: opacity 0.3s ease;
}

.paquetes-privacidad a:hover {
  opacity: 0.65;
}

/*
   Fotografía de Horarios y Precios.
   Aplica tanto en computadora como en celular.
*/
.cuanto-cuesta .seccion-imagen {
  margin-top: 50px;
  margin-bottom: 70px;
}


/*
   PRECIOS EN CELULAR
*/
@media (max-width: 700px) {

  .cuanto-cuesta {
    padding: 55px 16px;
  }

  .precios-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-top: 40px;
  }

  .precio-card {
    padding: 35px 22px 25px;
  }

  .precio-descripcion {
    min-height: auto;
  }

  /*
     En celular permitimos que el aviso ocupe
     más de una línea para evitar desbordamientos.
  */
  .paquetes-privacidad {
    white-space: normal;
  }

}



/* =========================================================
   TALLERES Y CLASES ESPECIALES

   Estas tarjetas reutilizan:
   .precios-grid
   .precio-card
   .precio-nivel
   .precio-monto
   .precio-periodo
   .precio-descripcion
   .precio-beneficios
   .btn-paquete

   Aquí solamente se agregan los ajustes particulares
   del contenido de los talleres.
========================================================= */

/*
   Contenedor completo de talleres.

   scroll-margin-top deja un pequeño espacio superior
   al llegar desde el enlace #talleres del menú.
*/
.talleres-bloque {
  width: 100%;
  max-width: 1100px;
  margin: 100px auto 0;
  padding-top: 70px;
  border-top: 1px solid #444444;
  scroll-margin-top: 30px;
}

/*
   Explicación debajo del título principal.
*/
.talleres-subtitulo {
  width: 100%;
  max-width: 700px;
  margin: 20px auto 0;

  color: var(--color-gris-texto);
  font-size: 14px;
  line-height: 1.8;
}

/*
   Grid específico de talleres.

   Conserva las tres tarjetas en una fila
   en pantalla de computadora.
*/
.talleres-precios-grid {
  margin-top: 50px;
}

/*
   Contenedor de cada precio del taller Respira.
*/
.taller-precio-opcion {
  margin-bottom: 22px;
}

/*
   Evita demasiado espacio entre el precio
   y la cantidad de personas.
*/
.taller-precio-opcion .precio-periodo {
  margin-bottom: 0;
}

/*
   Texto utilizado cuando el taller todavía
   no tiene un precio publicado.
*/
.taller-consultar-precio {
  margin-bottom: 8px;

  font-family: var(--fuente-titulo);
  font-size: 27px;
  line-height: 1.2;
  text-transform: uppercase;
}

/*
   Frase secundaria de la Master Class Alineación.
*/
.taller-frase {
  min-height: 45px;
  margin-top: -10px;
  margin-bottom: 22px;

  color: var(--color-gris-texto);
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
}

/*
   Texto complementario de cada taller.
*/
.taller-texto {
  margin-bottom: 25px;

  color: var(--color-gris-texto);
  font-size: 13px;
  line-height: 1.7;
}

/*
   Descripción del tipo de persona para quien
   está recomendado el taller.
*/
.taller-ideal {
  margin-bottom: 30px;

  color: var(--color-gris-texto);
  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   TALLERES EN CELULAR
========================================================= */

@media (max-width: 700px) {
  .talleres-bloque {
    margin-top: 70px;
    padding-top: 55px;
  }

  /*
     Las tres tarjetas quedan una debajo de otra.
  */
  .talleres-precios-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-top: 40px;
  }

  .taller-frase {
    min-height: auto;
  }
}

/* =========================================================
   11. EXTRAS — INTEGRACIÓN DE ELEMENTALES
========================================================= */

.extras {
  padding: 70px 20px;
  background-color: var(--color-blanco);
  text-align: center;
}

/*
   Los cuatro elementos aparecen en una cuadrícula
   de dos columnas en computadora.
*/
.elementales-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  max-width: 500px;
  margin: 30px auto 40px;
}

/*
   Tarjeta individual de cada elemento.
*/
.elemento-card {
  min-width: 0;
  padding: 20px;
  background-color: var(--color-gris-claro);
}

.elemento-card h3 {
  margin-bottom: 6px;
  font-size: 15px;
}

.elemento-card p {
  color: var(--color-gris-oscuro);
  font-size: 12px;
}

/*
   EXTRAS EN CELULAR
*/
@media (max-width: 600px) {

  .extras {
    padding: 55px 16px;
  }

  .elementales-grid {
    grid-template-columns: 1fr;
  }

  .extras .seccion-imagen {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

}

/* =========================================================
   12. CONTACTO, REDES SOCIALES Y UBICACIÓN
========================================================= */

.contacto {
  padding: 70px 20px 30px;
  background-color: var(--color-negro);
  color: var(--color-blanco);
}

/*
   Divide el footer en dos columnas:
   información y mapa.
*/
.contacto-contenido {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 50px;

  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.contacto-info {
  text-align: left;
}

.contacto-logo {
  margin-bottom: 10px;

  font-family: var(--fuente-titulo);
  font-size: 30px;
  letter-spacing: 4px;
}

.contacto-instructor {
  margin-bottom: 25px;

  color: var(--color-gris-texto);
  font-size: 13px;
}

/* Redes sociales */
.redes-sociales {
  display: flex;
  gap: 12px;
  margin-bottom: 35px;
}

.red-social {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border: 1px solid var(--color-blanco);
  border-radius: 50%;

  color: var(--color-blanco);

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.red-social svg {
  width: 20px;
  height: 20px;

  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
}

/*
   Facebook utiliza relleno.
   Instagram conserva únicamente sus líneas.
*/
.red-social:last-child svg {
  fill: none;
}

.red-social:hover {
  background-color: var(--color-blanco);
  color: var(--color-negro);
  transform: translateY(-3px);
}

/* Dirección */
.contacto-direccion {
  margin-bottom: 30px;
}

.contacto-direccion h3 {
  margin-bottom: 10px;
  font-size: 18px;
  letter-spacing: 2px;
}

.contacto-direccion p {
  margin-bottom: 20px;

  color: var(--color-gris-texto);
  font-size: 13px;
  line-height: 1.8;
}

/* Separación del botón de WhatsApp */
.contacto-whatsapp {
  margin-top: 5px;
}

/* Leyenda debajo del botón de WhatsApp */
.contacto-leyenda {
  max-width: 320px;
  margin-top: 14px;

  color: #888888;
  font-size: 11px;
  line-height: 1.6;
}

.contacto-leyenda a {
  color: #bdbdbd;
  text-decoration: underline;
  text-underline-offset: 3px;

  transition: color 0.3s ease;
}

.contacto-leyenda a:hover {
  color: var(--color-blanco);
}

/* Mapa de Google */
.contacto-mapa {
  width: 100%;
  height: 390px;

  border: 1px solid #444444;
  overflow: hidden;
}

.contacto-mapa iframe {
  display: block;
  width: 100%;
  height: 100%;

  border: 0;

  /*
     Convierte el mapa a blanco y negro para conservar
     la identidad visual de la página.
  */
  filter: grayscale(100%) contrast(95%);
}

.contacto-copy {
  margin-top: 50px;

  color: #777777;
  font-size: 11px;
  text-align: center;
}


/* =========================================================
   CONTACTO EN TABLETA Y CELULAR
========================================================= */

@media (max-width: 768px) {

  .contacto {
    padding: 55px 16px 30px;
  }

  /*
     En celular la información aparece primero
     y el mapa queda debajo.
  */
  .contacto-contenido {
    grid-template-columns: 1fr;
    gap: 40px;

    max-width: 520px;
  }

  .contacto-info {
    text-align: center;
  }

  .redes-sociales {
    justify-content: center;
  }

  .contacto-mapa {
    height: 320px;
  }

  .contacto-copy {
    margin-top: 40px;
  }

    .contacto-leyenda {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 400px) {

  .contacto-mapa {
    height: 280px;
  }

}

.contacto-privacidad {
  margin-top: 15px;
  text-align: center;
}

.contacto-privacidad a {
  color: #9b9b9b;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contacto-privacidad a:hover {
  color: var(--color-blanco);
  text-decoration: underline;
}


/* =========================================================
   13. ANIMACIÓN AL HACER SCROLL
========================================================= */

/*
   Las secciones comienzan transparentes y desplazadas.
   JavaScript agrega la clase .visible cuando entran
   en el área visible de la pantalla.
*/
section,
footer {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

section.visible,
footer.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   AJUSTES GENERALES PARA CELULAR
========================================================= */

@media (max-width: 600px) {
  h2 {
    font-size: 24px;
  }

  /*
     Impide que palabras largas, enlaces o textos
     provoquen desplazamiento horizontal.
  */
  p,
  li,
  a,
  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
  }
}


/* =========================================================
   ACCESIBILIDAD: REDUCIR ANIMACIONES
========================================================= */

/*
   Si el usuario tiene activada la opción de reducir
   movimiento en su dispositivo, se eliminan las
   animaciones y el desplazamiento suave.
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  section,
  footer {
    opacity: 1;
    transform: none;
  }
}