/* =========================================================
   YANI MERINO - ESTILOS GENERALES
   Archivo principal de diseño.
   Acá se modifican colores, tipografías, espaciados,
   botones, secciones, imágenes y versión mobile.
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES DE MARCA
   Cambiá estos valores para ajustar la identidad visual.
   --------------------------------------------------------- */
:root {
  --verde: #6e6b41;                 /* Color principal de marca */
  --verde-oscuro: #4f4d2f;          /* Verde más oscuro para textos fuertes */
  --beige: #efe9d7;                 /* Fondo principal */
  --terracota: #9c5d3c;             /* Botones y detalles destacados */
  --durazno: #f4b16b;               /* Acentos cálidos */
  --blanco: #fffaf4;                /* Tarjetas y fondos claros */
  --texto: #211b19;                 /* Texto principal */
  --muted: #6f625b;                 /* Texto secundario */
  --linea: rgba(110, 107, 65, .18); /* Bordes suaves */
  --shadow: 0 24px 70px rgba(60, 40, 25, .14); /* Sombra premium */
}

/* ---------------------------------------------------------
   2. RESET BÁSICO
   Normaliza el comportamiento de todos los navegadores.
   --------------------------------------------------------- */
* {
  box-sizing: border-box; /* Hace que padding y border no agranden el ancho final */
}

html {
  scroll-behavior: smooth; /* Suaviza el scroll cuando se hace clic en links internos */
}

body {
  margin: 0; /* Elimina margen por defecto del navegador */
  font-family: Inter, system-ui, sans-serif; /* Fuente principal */
  background: var(--beige); /* Fondo general del sitio */
  color: var(--texto); /* Color general de texto */
  overflow-x: hidden; /* Evita que algo se salga horizontalmente en mobile */
}

img {
  max-width: 100%; /* Evita que las imágenes rompan el ancho del contenedor */
  display: block; /* Quita espacios raros debajo de imágenes */
}

a {
  color: inherit; /* Los links heredan el color del contenedor */
  text-decoration: none; /* Saca el subrayado por defecto */
}

/* ---------------------------------------------------------
   3. CONTENEDOR GENERAL
   Define el ancho máximo de las secciones.
   --------------------------------------------------------- */
.container {
  width: min(1160px, calc(100% - 40px)); /* Máximo 1160px, con margen lateral en pantallas chicas */
  margin: auto; /* Centra el contenido */
}

/* ---------------------------------------------------------
   4. HEADER / NAVEGACIÓN
   Menú superior fijo.
   --------------------------------------------------------- */
.nav {
  position: fixed; /* Deja el header pegado arriba */
  inset: 0 0 auto 0; /* Lo ubica arriba, de lado a lado */
  z-index: 20; /* Lo deja por encima del contenido */
  background: rgba(239, 233, 215, .92); /* Fondo beige con transparencia */
  backdrop-filter: blur(16px); /* Efecto vidrio */
  border-bottom: 1px solid var(--linea); /* Línea inferior sutil */
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: #6f6a42;
    margin: 6px auto;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .nav-inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .brand span {
        display: block;
        font-size: 26px;
        line-height: 1.05;
    }

    .logo {
        width: 74px;
        height: auto;
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 88px;
        left: 0;
        right: 0;
        background: #f6f1e7;
        border: 1px solid rgba(111, 106, 66, 0.18);
        border-radius: 24px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: 0.25s ease;
        z-index: 1000;
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.nav-inner {
  min-height: 74px; /* Alto mínimo del header */
  display: flex; /* Acomoda marca y menú en fila */
  align-items: center; /* Centra verticalmente */
  justify-content: space-between; /* Marca izquierda, menú derecha */
  gap: 20px; /* Separación entre elementos */
}

.brand {
  display: flex; /* Acomoda logo Y + texto */
  align-items: center; /* Centra logo y texto */
  gap: 12px; /* Espacio entre logo y nombre */
  font-family: 'Cormorant Garamond', serif; /* Fuente elegante del nombre */
  font-size: clamp(16px, 3vw, 28px); /* Tamaño responsive */
  line-height: 1; /* Evita que el texto tenga alto excesivo */
  color: var(--verde); /* Color del nombre */
  white-space: nowrap; /* Evita salto de línea en desktop */
}

.brand-mark {
  width: 38px; /* Ancho del círculo */
  height: 38px; /* Alto del círculo */
  border-radius: 50%; /* Círculo perfecto */
  background: var(--verde); /* Fondo del círculo */
  color: var(--beige); /* Color de la letra */
  display: grid; /* Permite centrar la Y */
  place-items: center; /* Centra la Y vertical y horizontalmente */
  font-family: 'Oooh Baby', cursive; /* Fuente manuscrita */
  font-size: 30px; /* Tamaño de la Y */
}

.nav-links {
  display: flex; /* Links en fila */
  align-items: center; /* Centra los links */
  gap: 22px; /* Separación entre links */
  font-size: 14px; /* Tamaño de menú */
  font-weight: 800; /* Peso del texto */
  color: #3f3d2a; /* Color del menú */
}

/* ---------------------------------------------------------
   5. BOTONES
   Estilos reutilizables para todos los botones.
   --------------------------------------------------------- */
.btn {
  display: inline-flex; /* Permite centrar texto dentro del botón */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  min-height: 50px; /* Alto cómodo para clic */
  padding: 14px 24px; /* Espacio interno */
  border-radius: 999px; /* Botón tipo píldora */
  border: 1px solid transparent; /* Borde base */
  font-weight: 850; /* Texto fuerte */
  transition: .2s; /* Animación suave */
}

.btn:hover {
  transform: translateY(-2px); /* Pequeño movimiento al pasar el mouse */
  box-shadow: 0 18px 45px rgba(79, 77, 47, .18); /* Sombra al hover */
}

.btn-primary {
  background: var(--terracota); /* Fondo terracota */
  color: #fff; /* Texto blanco */
}

.btn-secondary {
  background: transparent; /* Fondo transparente */
  color: var(--verde); /* Texto verde */
  border-color: rgba(110, 107, 65, .34); /* Borde verde suave */
}

.btn-light {
  background: var(--beige); /* Botón claro para fondos oscuros */
  color: var(--verde); /* Texto verde */
}

/* ---------------------------------------------------------
   6. TIPOGRAFÍAS Y SECCIONES BASE
   Títulos, párrafos y espaciados generales.
   --------------------------------------------------------- */
.section {
  padding: 105px 0; /* Espaciado vertical de secciones */
}
.sectionaboutme {
  padding: 20px 0; /* Espaciado vertical de secciones */
  padding-bottom: 40px;
}
.sectionexperience {
  padding: 15px 0; /* Espaciado vertical de secciones */
  padding-bottom: 40px;
}
.logo-instagram{
  width: 30px;
  height: 30px;
  display: inline-flex;
  margin-right: 10px;
}

.eyebrow {
  color: var(--terracota); /* Color del texto pequeño superior */
  font-size: 13px; /* Tamaño del texto */
  font-weight: 900; /* Texto fuerte */
  letter-spacing: .15em; /* Letras separadas */
  text-transform: uppercase; /* Todo en mayúsculas */
  margin-bottom: 16px; /* Separación con el título */
}

h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', serif; /* Fuente de títulos */
  color: var(--verde); /* Color de títulos */
  margin: 0; /* Elimina margen por defecto */
  line-height: .98; /* Título compacto */
  letter-spacing: -.03em; /* Ajuste fino de letras */
}

h1 {
  font-size: clamp(42px, 6vw, 80px); /* Tamaño del título principal */
}

h2 {
  font-size: clamp(42px, 6vw, 74px); /* Tamaño de títulos de sección */
}

h3 {
  font-size: clamp(28px, 3vw, 38px); /* Tamaño de subtítulos */
}

p {
  margin: 0; /* Sin margen por defecto */
  line-height: 1.75; /* Interlineado cómodo */
  color: var(--muted); /* Color secundario */
  font-size: 17px; /* Tamaño de párrafo */
}

.script {
  font-family: 'Oooh Baby', cursive; /* Fuente manuscrita */
  font-size: clamp(38px, 6vw, 72px); /* Tamaño responsive */
  color: var(--terracota); /* Color destacado */
  line-height: .9; /* Compacto */
}

.center {
  text-align: center; /* Centra texto */
  max-width: 850px; /* Evita textos muy largos */
  margin: 0 auto 52px; /* Centra y separa del contenido siguiente */
}

.center p {
  margin-top: 22px; /* Separación entre título y párrafo */
}

/* ---------------------------------------------------------
   7. HERO PRINCIPAL
   Primera pantalla de index.html.
   --------------------------------------------------------- */
.hero {
  min-height: 100vh; /* Ocupa al menos la altura de la pantalla */
  display: grid; /* Permite centrar verticalmente */
  align-items: center; /* Centra el contenido */
  padding: 80px 0 70px; /* Compensa el header fijo */
  position: relative; /* Necesario para decoración de fondo */
}

.hero::before {
  content: ""; /* Elemento decorativo */
  position: absolute; /* Se posiciona dentro del hero */
  inset: -20% -10% auto auto; /* Lo manda arriba a la derecha */
  width: 520px; /* Tamaño del brillo */
  height: 520px; /* Tamaño del brillo */
  background: radial-gradient(circle, rgba(244, 177, 107, .42), transparent 65%); /* Brillo suave */
}

.hero-grid {
  display: grid; /* Dos columnas: texto + foto */
  grid-template-columns: 1.05fr .95fr; /* Texto un poco más ancho */
  align-items: center; /* Centra verticalmente */
  gap: 64px; /* Separación entre columnas */
}

.hero-copy {
  position: relative; /* Queda por encima del brillo */
  z-index: 2; /* Prioridad visual */
  margin-top: 0px;
}

@media (max-width: 768px) {
    .hero-copy {
        margin-top: -10px;
    }
}

.hero-copy p {
  max-width: 640px; /* Limita ancho del párrafo */
  margin-top: 26px; /* Separación con el título */
  font-size: 18px; /* Párrafo principal más grande */
  color: #554840; /* Color del texto hero */
}

.hero-actions {
  display: flex; /* Botones en fila */
  gap: 14px; /* Separación entre botones */
  flex-wrap: wrap; /* Permite bajar de línea si no entran */
  margin-top: 34px; /* Separación con texto */
}

.hero-card {
  position: relative; /* Necesario para nota flotante */
  border-radius: 42px; /* Bordes redondeados */
  padding: 18px; /* Marco interno */
  background: rgba(255, 250, 244, .56); /* Fondo translúcido */
  box-shadow: var(--shadow); /* Sombra */
  border: 1px solid rgba(110, 107, 65, .12); /* Borde suave */
}

.hero-photo {
  aspect-ratio: 4 / 5; /* Proporción editorial de la foto */
  border-radius: 32px; /* Bordes internos */
  overflow: hidden; /* Recorta la foto dentro del marco */
  background: var(--blanco); /* Fondo si la imagen tarda */
}

.hero-photo img {
  width: 100%; /* Ocupa todo el ancho */
  height: 100%; /* Ocupa todo el alto del contenedor */
  object-fit: cover; /* Cubre el contenedor sin deformarse */
  object-position: center top; /* Prioriza cabeza/cara arriba */
}

.floating-note {
  position: absolute; /* Nota encima de la foto */
  left: -28px; /* Sale un poco hacia la izquierda */
  bottom: 42px; /* Distancia desde abajo */
  background: rgba(247, 243, 238, 0.85); /* Fondo claro */
  border-radius: 24px; /* Bordes redondeados */
  padding: 18px 22px; /* Espacio interno */
  box-shadow: 0 18px 55px rgba(60, 40, 25, .16); /* Sombra */
  max-width: 245px; /* Ancho máximo */
  border: 1px solid rgba(110, 107, 65, .14); /* Borde suave */
}

.icon {
    width: 20px;
    height: 20px;
    display: block;
}

.floating-note strong {
  color: var(--verde); /* Título de la nota */
  display: block; /* Ocupa línea completa */
  margin-bottom: 4px; /* Separación */
}

.floating-note span {
  color: var(--muted); /* Texto secundario */
  font-size: 12px; /* Tamaño menor */
  line-height: 1.5; /* Interlineado */
}

/* ---------------------------------------------------------
   8. SECCIÓN DOLOR / PROCESO
   Cards con problemas frecuentes.
   --------------------------------------------------------- */
.pain {
  background: var(--blanco); /* Fondo claro para diferenciar */
}

.pain-grid {
  display: grid; /* Grilla de tarjetas */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas en desktop */
  gap: 16px; /* Separación entre tarjetas */
}

.pain-item,
.card,
.testimonial {
  background: rgba(239, 233, 215, .64); /* Fondo de tarjeta */
  border: 1px solid var(--linea); /* Borde suave */
  border-radius: 26px; /* Redondeo */
  padding: 24px; /* Espacio interno */
  display: flex;
  flex-direction: column;
  height: 100%;

}
.testimonial-content {
    flex: 1;
}

.pain-item {
    font-weight: 400;
    color: #3d3b29;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    height: auto;
}

.pain-item span {
  color: inherit; /* Color del check */
  margin-right: 0px; /* Separación con texto */
}

.pain-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.quote-block {
  margin: 52px auto 0; /* Separación superior y centrado */
  max-width: 880px; /* Ancho máximo */
  text-align: center; /* Texto centrado */
  padding: 38px; /* Espacio interno */
  border-radius: 34px; /* Redondeo */
  background: var(--verde); /* Fondo verde */
  color: var(--beige); /* Texto beige */
}

.quote-block p {
  color: var(--beige); /* Texto claro */
  font-size: 30px; /* Texto destacado */
  font-family: 'Cormorant Garamond', serif; /* Fuente elegante */
  line-height: 1.25; /* Interlineado compacto */
}

/* ---------------------------------------------------------
   9. ANTES / DESPUÉS
   Comparación de estado actual vs. estado deseado.
   --------------------------------------------------------- */
.split {
  display: grid; /* Dos columnas */
  grid-template-columns: 1fr 1fr; /* Mitad y mitad */
  gap: 24px; /* Separación */
  margin-top: 46px; /* Espacio superior */
}

.before,
.after {
  padding: 34px; /* Espacio interno */
  border-radius: 34px; /* Bordes */
  border: 1px solid var(--linea); /* Borde suave */
}

.before {
  background: rgba(255, 250, 244, .65); /* Fondo claro */
}

.after {
  background: rgba(110, 107, 65, .13); /* Fondo verde muy suave */
}

.list {
  list-style: none; /* Saca viñetas */
  padding: 0; /* Saca padding */
  margin: 22px 0 0; /* Separación con título */
  display: grid; /* Lista vertical */
  gap: 14px; /* Separación entre filas */
}

.list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #473d38;
}

/* ---------------------------------------------------------
   10. SECCIÓN AUTORIDAD / EXPERIENCIA
   Bloque verde con foto y trayectoria.
   --------------------------------------------------------- */
.authority {
  background: var(--verde); /* Fondo principal verde */
  color: var(--beige); /* Texto claro */
}

.authority h2,
.authority h3 {
  color: var(--beige); /* Títulos claros */
}

.authority p {
  color: rgba(239, 233, 215, .86); /* Párrafos claros */
}

.authority-grid {
  display: grid; /* Dos columnas */
  grid-template-columns: .9fr 1.1fr; /* Foto + texto */
  gap: 58px; /* Separación */
  align-items: center; /* Centrado vertical */
}

.authority-photo {
  height: 560px; /* Alto de foto desktop */
  border-radius: 40px; /* Bordes */
  overflow: hidden; /* Recorta dentro del marco */
  border: 1px solid rgba(239, 233, 215, .16); /* Borde claro */
  background: #fff; /* Fondo si no carga imagen */
}

.authority-photo img,
.community-photo img {
  width: 100%; /* Ocupa todo el ancho */
  height: 100%; /* Ocupa todo el alto */
  object-fit: cover; /* Cubre sin deformar */
  object-position: center top; /* Prioriza rostro */
}

.badges {
  display: flex; /* Badges en fila */
  flex-wrap: wrap; /* Permite varias líneas */
  gap: 10px; /* Separación */
  margin-top: 28px; /* Espacio superior */
}

.badge {
  border: 1px solid #efe9d7; /* Borde claro */
  border-radius: 999px; /* Píldora */
  padding: 10px 14px; /* Espacio interno */
  color: var(--beige); /* Texto claro */
  font-weight: 600; /* Texto fuerte */
  font-size: 14px; /* Tamaño */
}

/* ---------------------------------------------------------
   11. CARDS DE EXPERIENCIAS
   Tarjetas de servicios/procesos.
   --------------------------------------------------------- */
.cards-grid {
  display: grid; /* Grilla */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
  gap: 18px; /* Separación */
  margin-top: 46px; /* Espacio superior */
}

.card {
  min-height: 230px; /* Alto mínimo */
  background: rgba(255, 250, 244, .64); /* Fondo claro */
  transition: .2s; /* Animación hover */
}

.card:hover {
  transform: translateY(-6px); /* Sube al hover */
  box-shadow: var(--shadow); /* Sombra al hover */
}

.card-number {
  color: var(--terracota); /* Número destacado */
  font-weight: 900; /* Peso fuerte */
  margin-bottom: 26px; /* Separación con título */
}

.card p {
  margin-top: 14px; /* Separación con título */
}

/* ---------------------------------------------------------
   12. TESTIMONIOS
   Opiniones y resultados.
   --------------------------------------------------------- */
.testimonials {
  background: rgba(110, 107, 65, .18); /* Fondo verde suave */
}

.testimonial-grid {
  display: grid; /* Grilla */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
  gap: 18px; /* Separación */
  margin-top: 46px; /* Espacio superior */
}

.testimonial {
  background: rgba(255, 250, 244, .74); /* Fondo de tarjeta */
}

.person {
  display: flex; /* Avatar + datos en fila */
  align-items: center; /* Centra verticalmente */
  gap: 12px; /* Separación */
  margin-top: 24px; /* Separación con testimonio */
}

.avatar {
  width: 40px; /* Ancho del avatar */
  height: 40px; /* Alto del avatar */
  
}

.person strong {
  color: var(--verde); /* Nombre o rol */
  display: block; /* Línea propia */
}

.person span {
  color: var(--muted); /* Descripción */
  font-size: 13px; /* Tamaño chico */
}

/* ---------------------------------------------------------
   13. COMUNIDAD
   Bloque de comunidad con imagen.
   --------------------------------------------------------- */
.community-grid {
  display: grid; /* Dos columnas */
  grid-template-columns: 1fr 1fr; /* Mitad y mitad */
  gap: 36px; /* Separación */
  align-items: center; /* Centrado vertical */
}

.community-photo {
  height: 480px; /* Alto de imagen */
  border-radius: 38px; /* Bordes */
  overflow: hidden; /* Recorte */
  background: #fff; /* Fondo si no carga */
}

/* ---------------------------------------------------------
   14. FORMULARIO DE WHATSAPP
   Sección donde la persona deja datos y abre WhatsApp.
   --------------------------------------------------------- */
.lead-form-section {
  padding: 30px 20px; /* Espaciado vertical */
  background: #efe9d7; /* Fondo beige */
}

.lead-form-wrap {
  width: min(1120px, 100%); /* Ancho máximo */
  margin: auto; /* Centrado */
  display: grid; /* Dos columnas */
  grid-template-columns: .9fr 1.1fr; /* Texto + formulario */
  gap: 36px; /* Separación */
  align-items: start; /* Alinea arriba */
  background: rgba(255, 250, 244, .72); /* Fondo tarjeta */
  border: 1px solid rgba(110, 107, 65, .18); /* Borde */
  border-radius: 34px; /* Bordes */
  padding: 34px; /* Espacio interno */
  box-shadow: 0 22px 60px rgba(60, 40, 25, .10); /* Sombra */
}

.lead-form-kicker {
  color: #9c5d3c; /* Color superior */
  text-transform: uppercase; /* Mayúsculas */
  letter-spacing: .14em; /* Letras separadas */
  font-size: 13px; /* Tamaño */
  font-weight: 800; /* Peso */
  margin: 0 0 14px; /* Separación */
}

.lead-form-copy h2 {
  margin: 0 0 18px; /* Separación */
  color: #6e6b41; /* Color título */
  font-family: 'Cormorant Garamond', Georgia, serif; /* Fuente */
  font-size: clamp(36px, 5vw, 64px); /* Tamaño del texto del formulario */
  line-height: .98; /* Compacto */
}

.lead-form-copy p {
  color: #5f574e; /* Color párrafo */
  font-size: 18px; /* Tamaño */
  line-height: 1.6; /* Interlineado */
}

.logo {
    width: clamp(50px, 5vw, 10px);
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 26px; /* Menos redondeo */
}

.lead-form {
  display: grid; /* Campos en columna */
  gap: 16px; /* Separación entre campos */
}

.form-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.lead-form label {
  display: grid; /* Texto + input en columna */
  gap: 8px; /* Separación */
  color: #6e6b41; /* Color etiqueta */
  font-weight: 400; /* Texto fuerte */
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%; /* Ocupan todo el ancho */
  border: 1px solid rgba(110, 107, 65, .28); /* Borde */
  background: #fffaf4; /* Fondo input */
  border-radius: 18px; /* Bordes */
  padding: 15px 16px; /* Espacio interno */
  font: inherit; /* Hereda fuente */
  color: #211b19; /* Color texto */
  outline: none; /* Quita borde azul por defecto */
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: #9c5d3c; /* Borde activo */
  box-shadow: 0 0 0 4px rgba(156, 93, 60, .12); /* Resalte suave */
}

.lead-form-note {
  margin: 0; /* Sin margen */
  color: #6f625b; /* Texto secundario */
  font-size: 13px; /* Tamaño chico */
  line-height: 1.45; /* Interlineado */
}

/* ---------------------------------------------------------
   15. CTA FINAL Y FOOTER
   Cierre de página y pie.
   --------------------------------------------------------- */
.final-cta {
  background: var(--terracota); /* Fondo terracota */
  color: #fff; /* Texto blanco */
  text-align: center; /* Centrado */
  padding: 110px 0; /* Espacio vertical */
}

.final-cta h2 {
  color: #fff; /* Título blanco */
}

.final-cta p {
  color: rgba(255, 255, 255, .84); /* Párrafo blanco suave */
  max-width: 760px; /* Ancho máximo */
  margin: 24px auto 34px; /* Centrado y separaciones */
  font-size: 20px; /* Tamaño */
}

.urgency {
  display: flex; /* Etiquetas en fila */
  justify-content: center; /* Centra */
  gap: 12px; /* Separación */
  flex-wrap: wrap; /* Permite varias líneas */
  margin: 30px 0; /* Separación */
}

.urgency span {
  border: 1px solid rgba(255, 255, 255, .32); /* Borde claro */
  border-radius: 999px; /* Píldora */
  padding: 10px 14px; /* Espacio interno */
  font-weight: 850; /* Texto fuerte */
}

footer {
  background: #34321f; /* Fondo oscuro */
  color: var(--beige); /* Texto beige */
  padding: 34px 0; /* Espacio vertical */
}

.footer-inner {
  display: flex; /* Elementos en fila */
  justify-content: space-between; /* Distribuye extremos */
  gap: 20px; /* Separación */
  align-items: center; /* Centra verticalmente */
  flex-wrap: wrap; /* Baja en mobile */
}

.footer-inner span {
  color: rgba(239, 233, 215, .7); /* Texto secundario */
}

/* ---------------------------------------------------------
   16. PÁGINAS INTERNAS
   Experiencias, gracias y sobre mí.
   --------------------------------------------------------- */
.page-hero {
  padding: 140px 0 70px; /* Espacio superior para header fijo */
  background: var(--beige); /* Fondo */
}

.program-detail {
  display: grid; /* Grilla de experiencias */
  grid-template-columns: 1fr 1fr; /* Dos columnas */
  gap: 24px; /* Separación */
}

.detail-box {
  background: var(--blanco); /* Fondo de caja */
  border: 1px solid var(--linea); /* Borde */
  border-radius: 30px; /* Bordes */
  padding: 32px; /* Espacio interno */
}

.thanks {
  min-height: 100vh; /* Ocupa toda la pantalla */
  display: grid; /* Centrado */
  place-items: center; /* Centra horizontal y vertical */
  text-align: center; /* Texto centrado */
  padding: 80px 20px; /* Espacio */
}

.thanks-card {
  max-width: 780px; /* Ancho máximo */
  background: var(--blanco); /* Fondo tarjeta */
  border: 1px solid var(--linea); /* Borde */
  border-radius: 40px; /* Bordes */
  padding: 55px; /* Espacio interno */
  box-shadow: var(--shadow); /* Sombra */
}

.about-grid {
  display: grid; /* Dos columnas */
  grid-template-columns: 1fr 1fr; /* Texto + foto */
  gap: 60px; /* Separación */
  align-items: center; /* Centra vertical */
}

.about-photo {
  border-radius: 34px; /* Bordes */
  overflow: hidden; /* Recorte */
  box-shadow: var(--shadow); /* Sombra */
  background: var(--blanco); /* Fondo */
}

.about-copy {
    margin-top: -160px;
}

@media (max-width: 768px) {

    .about-copy {
        margin-top: 0;
    }

}
.about-photo img {
  width: 100%; /* Ocupa ancho */
  height: auto; /* Mantiene proporción completa */
  object-fit: contain; /* No corta cabeza ni pies */
}

.about-quote {
  background: rgba(255, 250, 244, .68); /* Fondo de cita */
  border: 1px solid var(--linea); /* Borde */
  padding: 42px; /* Espacio interno */
  border-radius: 32px; /* Bordes */
  font-family: 'Cormorant Garamond', serif; /* Fuente elegante */
  font-size: clamp(20px, 3vw, 36px); /* Tamaño responsive */
  line-height: 1.15; /* Interlineado */
  color: var(--verde); /* Color */
}

/* ---------------------------------------------------------
   17. RESPONSIVE TABLET
   Cambios para pantallas medianas.
   --------------------------------------------------------- */
@media (max-width: 920px) {
  .nav-links {
    display: none; /* Oculta menú para que no se rompa en mobile */
  }

  .hero-grid,
  .authority-grid,
  .community-grid,
  .split,
  .program-detail,
  .about-grid {
    grid-template-columns: 1fr; /* Una columna */
  }

  .floating-note {
    position: static; /* Deja de flotar para no tapar la foto */
    margin: 16px 0 0; /* Separación superior */
    max-width: none; /* Ocupa ancho disponible */
  }

  .pain-grid,
  .cards-grid,
  .testimonial-grid {
    grid-template-columns: 1fr 1fr; /* Dos columnas */
  }

  .authority-photo,
  .community-photo {
    height: 430px; /* Baja el alto de imágenes */
  }
}

/* ---------------------------------------------------------
   18. RESPONSIVE MOBILE
   Cambios para celulares.
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .container {
    width: min(100% - 28px, 1160px); /* Más margen en celular */
  }

  .nav-inner {
    min-height: 66px; /* Header más bajo */
  }

  .brand {
    font-size: 25px; /* Achica marca */
    max-width: calc(100vw - 110px); /* Evita que se salga */
    white-space: normal; /* Permite salto si hace falta */
    line-height: .92; /* Compacta el nombre */
  }

  .brand-mark {
    width: 34px; /* Achica círculo */
    height: 34px; /* Achica círculo */
  }

  .section {
    padding: 76px 0; /* Menos espacio vertical */
  }

  .hero {
    padding-top: 112px; /* Compensa header fijo */
  }

  .hero-actions {
    flex-direction: column; /* Botones uno debajo del otro */
  }

  .btn {
    width: 100%; /* Botones ancho completo */
  }

  .pain-grid,
  .cards-grid,
  .testimonial-grid {
    grid-template-columns: 1fr; /* Una columna */
  }

  .quote-block {
    padding: 28px; /* Menos padding */
  }

  .quote-block p {
    font-size: 22px; /* Achica cita */
  }

  .before,
  .after {
    padding: 26px; /* Menos padding */
  }

  .lead-form-wrap {
    grid-template-columns: 1fr; /* Formulario en una columna */
    padding: 24px; /* Menos padding */
    border-radius: 26px; /* Menos redondeo */
  }

  .thanks-card {
    padding: 34px 24px; /* Tarjeta gracias más compacta */
  }
}
/* =========================================
   FIX FINAL MENU MOBILE
========================================= */

@media (max-width: 768px) {

    .menu-toggle {
        display: block !important;
    }

    .nav-links {

        display: none !important;

        position: absolute;
        top: 88px;
        left: 16px;
        right: 16px;

        background: #f6f1e7;

        border-radius: 24px;

        padding: 24px;

        flex-direction: column;
        gap: 18px;

        z-index: 99999;

        box-shadow:
            0 20px 60px rgba(0,0,0,0.15);
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links a {
        display: block;
        font-size: 18px;
        font-weight: 600;
    }
    .nav-links .btn-primary {
    text-align: center;
    justify-content: center;
    width: 100%;
}
}
.nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {

    .logo {
        width: 58px;
        height: auto;
    }

}