/* ========== DESHABILITAR DARK MODE ========== */
:root {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

html {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

body {
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}

/* ---------- VARIABLES ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color-scheme: light only !important;
  -webkit-color-scheme: light only !important;
}
@font-face {
  font-family: "Aeonik Trial";
  src: url("./assets/fonts/AeonikTRIAL-Regular.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: url("./assets/fonts/Lato/Lato-Regular.ttf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
:root {
  --color-fondo: #fcfaf5;
  --color-texto: #949494;
  --color-texto-activo: #374151;
  --color-rosa: #f79db9;
  --color-card-fondo: #caacee;
}

/* ---------- BASE ---------- */
body {
  margin: 0;
  padding-top: 112px; /* Altura del navbar + espacio */
  background: var(--color-fondo);
  font-family: "Lato", sans-serif;
  overflow-x: hidden; /* Evita scroll horizontal */
}

/* ---------- NAVBAR ---------- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-fondo);
  padding: 1.5rem 4rem;
  position: fixed; /* Fija el navbar arriba */
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 105px;
  z-index: 1000;
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

/* Navbar translúcido al hacer scroll */
.navbar.scrolled {
  background: rgba(252, 250, 245, 1); /* var(--color-fondo) con 85% opacidad */
  backdrop-filter: blur(5px); /* Efecto blur */
  -webkit-backdrop-filter: blur(30px); /* Safari */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.logo img {
  width: 100.1px;
  height: 100.1px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}

/* Ocultar indicador de sección en desktop */
.section-indicator {
  display: none;
}

/* Smooth scroll para todo el documento */
html {
  scroll-behavior: smooth;
}

/* Estilo para link activo en navbar */
.link.active {
  color: var(--color-texto-activo);
}

/* Offset para que las secciones no queden pegadas al navbar */
section[id] {
  scroll-margin-top: 100px; /* Ajusta este valor según necesites */
}

/* O específicamente para servicios */
#servicios {
  scroll-margin-top: 60px;
}

#equipo {
  scroll-margin-top: 50px;
}
#formaciones {
  scroll-margin-top: 105px;
}
#como-trabaja {
  scroll-margin-top: 100px;
}
#contacto {
  scroll-margin-top: 100px;
}
/* --- Menú --- */
.menu {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  font-size: 20px;
  color: #949494;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: "Lato", sans-serif;
}

/* --- Enlaces --- */
.link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: color 0.25s ease;
  line-height: 1.4;
  padding-bottom: 8px;
}

.link:hover,
.link.active {
  color: var(--color-texto-activo);
}

/* --- Animación pincelada --- */
/* --- Subrayado: una sola capa --- */
.underline {
  position: absolute;
  left: -6px; /* corrimiento que estabas usando */
  bottom: -3px;
  width: calc(100% + 12px);
  bottom: -0.2em;
  height: 0.5em;
  background: url("./assets/picenladanueva.png") no-repeat left bottom / 100%
    100%;
  pointer-events: none;

  /* Estado base: OCULTA y SIN transición de transform
     (así, al salir, no "se encoge", solo se desvanece) */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.55s ease; /* solo opacidad en reposo */
}

/* Hover/Activo: se DIBUJA y aparece */
.link:hover .underline,
.link.active .underline {
  opacity: 1;
  transform: scaleX(1);

  /* En hover sí activamos la transición de "dibujo" */
  transition:
    opacity 0.35s ease,
    transform 0.45s ease-out;
}
/* ---------- HERO SECTION (REFACTORIZADO) ---------- */

/* 1. El contenedor principal de la sección */
.hero {
  /* Usamos Flexbox para centrar todo el contenido en la pantalla */
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */

  /* Altura mínima y fondo (tus estilos originales) */
  min-height: 90vh; /* Usamos min-height por si el contenido es muy alto en móviles */
  background: var(--color-fondo);
  /* MARGEN EXTERNO REGULABLE: Controla el espacio alrededor de todo el contenido */
  padding: 2rem; /* Ajusta este valor si quieres más o menos aire en los bordes */
  box-sizing: border-box; /* Importante para que el padding no sume al ancho total */
}

/* 2. El envoltorio que contiene imagen y textos */
.hero-content-wrapper {
  display: flex;
  flex-wrap: wrap; /* CLAVE: Permite que los elementos bajen si no hay espacio (responsive) */
  justify-content: center; /* Centra los elementos si sobran márgenes */
  align-items: center; /* Alinea verticalmente imagen y texto */

  gap: 3rem; /* Espacio limpio entre la imagen y el bloque de texto */

  /* Límites para que no se desparrame en pantallas gigantes */
  max-width: 1200px;
  width: 100%;
  position: relative; /* Necesario para tus elementos decorativos si los vuelves a agregar */
}

/* --- BLOQUE DE IMAGEN --- */
.hero-image-block {
  /* Flexibilidad: base de 400px, puede crecer y encogerse */
  flex: 1 1 400px;
  display: flex;
  justify-content: center; /* Centra la imagen en su propio bloque */
  max-width: 600px; /* Límite máximo para la imagen */
}

.hero-image {
  width: 100%; /* Responsive: se adapta al ancho de su bloque */
  height: auto; /* Mantiene proporciones */
  display: block;
  /* Tu animación original */
  animation: fade-in 1s ease-in-out forwards;
}

/* --- BLOQUE DE TEXTOS SUPERPUESTOS (La parte difícil) --- */

/* Este es el "escenario" donde se superponen los textos */
.hero-text-area {
  /* Flexibilidad: base de 400px, compite en espacio con la imagen */
  flex: 1 1 400px;

  /* CLAVE: position relative para que los hijos absolute se ubiquen respecto a ESTA caja */
  position: relative;

  /* IMPORTANTE: Necesitamos darle una altura mínima a este contenedor.
     Como los hijos son absolutos, no ocupan espacio "real". Si no ponemos esto,
     la caja medirá 0px de alto y el layout se puede romper.
     Calcula una altura suficiente para el texto más grande (hero-text2). */
  min-height: 200px;

  /* Centrado del contenido dentro del área */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Centra el texto en sí mismo */
}

/* Estilos comunes para AMBOS textos que se superponen */
.hero-text1,
.hero-text2 {
  /* CLAVE DE SUPERPOSICIÓN: */
  position: absolute; /* Se salen del flujo normal */
  top: 50%; /* Se ubican en la mitad vertical de .hero-text-area */
  left: 0; /* Pegados a la izquierda */
  width: 100%; /* Ocupan todo el ancho de .hero-text-area */
  transform: translateY(
    -50%
  ); /* Corrigen su posición para estar perfectamente centrados verticalmente */

  /* Estado inicial invisible */
  opacity: 0;
  margin: 0; /* Reseteo de márgenes */

  /* Tus estilos de fuente originales */
  font-family: "Literata", serif;
  font-size: 50px;
  font-weight: 500;
  color: #f79db9;
}

/* 1. TEXTO PRINCIPAL (Hacerlo gigante) */
.hero-text1 {
  /* ANTES: clamp(24px, 3vw, 32px);  <-- Esto era muy chico */

  /* AHORA: Un rango mucho más grande y llamativo */
  font-size: clamp(45px, 8vw, 85px);

  /* Ajustes para que se vea bien en tamaño grande */
  line-height: 1.1; /* Interlineado más apretado para títulos grandes */
  font-weight: 500; /* Más negrita para destacar */

  /* Tu animación (se mantiene igual) */
  animation: fade-in-out 3s ease-in-out forwards;
}

/* 2. TEXTO SECUNDARIO (Hacerlo mediano) */
/* NOTA: En tu HTML actual, el texto está suelto dentro del div, 
   ya no dentro de <h2> o <h3>, así que aplicamos el estilo directo a la clase. */

.hero-text2 {
  /* Tamaño de subtítulo legible pero menor al título */
  font-size: clamp(22px, 4vw, 50px);

  line-height: 60px; /* Interlineado normal para lectura */
  font-weight: 500; /* Letra normal */

  /* Tu animación (se mantiene igual) */
  animation: fade-in 1s ease-in-out 3s forwards;
}

/* --- TUS KEYFRAMES ORIGINALES (No necesitan cambios) --- */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* --- RESPONSIVE AUTOMÁTICO --- */
/* Gracias a flex-wrap, casi no necesitas media queries. 
   Solo un pequeño ajuste si quieres que el orden cambie en móviles */
@media (max-width: 768px) {
  .hero-content-wrapper {
    gap: 2rem; /* Menos espacio en móviles */
  }
  /* Si quisieras que el texto aparezca ARRIBA de la imagen en móviles: */
  /* .hero-content-wrapper { flex-direction: column-reverse; } */
}

/* ---------- SERVICIOS (Limpio y Responsive) ---------- */

.servicios {
  /* Configuración del contenedor principal */
  width: 100%;
  /* Quitamos altura fija. Dejamos que crezca según el contenido */
  height: auto;
  min-height: 600px;

  /* Color y espaciado interno */
  background-color: #d3ede1;
  padding: 6rem 2rem; /* Aire arriba/abajo y a los costados */

  /* Flexbox para centrar el contenido general de la sección */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Para asegurarnos que no se rompa con el navbar */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* El texto introductorio */
.servicios-text {
  /* Quitamos width/height fijos */
  max-width: 800px; /* Ancho máximo de lectura cómodo */
  width: 100%;

  text-align: center;
  color: #575757;
  font-family: "Lato", sans-serif;
  font-size: 20px; /* Tamaño base legible */
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 1px;

  margin-bottom: 4rem; /* Separación con las pills */
}

/* El Contenedor de la Grilla (Pills) */
.pill-container {
  display: grid;
  /* Define 3 columnas iguales por defecto */
  grid-template-columns: repeat(3, 1fr);

  /* Espacio entre pills */
  gap: 2rem;

  /* Restricciones de ancho */
  max-width: 1200px;
  width: 100%;
}

/* La "Pill" individual */
.pill-item {
  position: relative; /* Para poder posicionar la imagen de fondo */
  width: 100%;

  /* Truco para mantener la proporción de la imagen PNG.
     Ajusta este ratio según tus imágenes (parecen ser 2.5 veces más anchas que altas) */
  aspect-ratio: 2.5 / 1;

  /* Flexbox para centrar el texto PERFECTAMENTE sobre la imagen */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Animación (mantenemos tu efecto) */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
/* Estado visible cuando el JS agrega la clase .animate */
.pill-item.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Opcional: Si quieres que aparezcan en escalerita (uno por uno) */
.pill-item:nth-child(1) {
  transition-delay: 0.1s;
}
.pill-item:nth-child(2) {
  transition-delay: 0.2s;
}
.pill-item:nth-child(3) {
  transition-delay: 0.3s;
}
.pill-item:nth-child(4) {
  transition-delay: 0.1s;
}
.pill-item:nth-child(5) {
  transition-delay: 0.2s;
}
.pill-item:nth-child(6) {
  transition-delay: 0.3s;
}
.pill-item:nth-child(7) {
  transition-delay: 0.1s;
}
.pill-item:nth-child(8) {
  transition-delay: 0.2s;
}
.pill-item:nth-child(9) {
  transition-delay: 0.3s;
}
/* Imagen de fondo de la pill */
.pill-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Asegura que la imagen se vea entera sin estirarse feo */
  z-index: 1; /* Atrás del texto */
}

/* Texto de la pill */
.pill-text {
  position: relative;
  z-index: 2; /* Delante de la imagen */

  color: #638c6b;
  font-family: "Aeonik Trial", sans-serif; /* Tu fuente custom */
  font-size: clamp(
    16px,
    2vw,
    22px
  ); /* Texto fluido: se achica en móvil, se agranda en PC */
  font-weight: 400;
  text-align: center;
  line-height: 1.2;

  /* Padding lateral para que el texto no toque los bordes curvos de la imagen */
  padding: 0 15%;
}

/* --- RESPONSIVE DESIGN (Media Queries Limpias) --- */

/* Tablets (menos de 1024px) -> Pasamos a 2 columnas */
@media (max-width: 1024px) {
  .pill-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px; /* Limitamos ancho para que no se estiren demasiado */
  }

  /* Truco visual: Como son 9 items (impar), en 2 columnas queda uno solo al final.
     Esto hace que el último ocupe todo el ancho o se centre */
  .pill-item:last-child {
    /* grid-column: span 2;  <-- Descomenta si quieres que el último sea ancho */
    /* O si quieres centrarlo dejándolo del mismo tamaño: */
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }
}

/* ----------- EQUIPO (Refactorizado) ----------- */

.equipo {
  /* Flexbox para centrar todo verticalmente */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* ESPACIADO ROBUSTO:
     En lugar de margin-top, usamos padding vertical generoso.
     Esto asegura que el color de fondo (si tuviera) cubra todo el área
     y que los anclajes (#) del menú caigan en el lugar correcto. */
  padding: 6rem 2rem;

  background: var(--color-fondo);
  gap: 4rem; /* Espacio entre título, texto y las cards */

  /* Asegura que no se desborde */
  width: 100%;
  box-sizing: border-box;
}

/* TÍTULO: Sin tamaños fijos */
.equipo-title {
  /* Quitamos width/height fijos */
  width: 100%;
  max-width: 800px;

  text-align: center;
  color: var(--color-rosa); /* Usando tu variable */
  font-family: "Literata", serif;
  font-size: clamp(36px, 5vw, 55px); /* Fuente fluida */
  font-weight: 500;
  line-height: 1.2;
  margin: 0; /* El gap del padre maneja el espacio */
}

/* TEXTO INTRODUCTORIO: Fluido y legible */
.equipo-text {
  /* Ancho de lectura cómodo (aprox 70-80 caracteres) */
  max-width: 800px;
  width: 100%;

  text-align: center;
  color: #575757;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* CONTENEDOR PRINCIPAL DE PERFILES */
.psico-container {
  display: flex;
  flex-direction: column;
  gap: 4rem; /* Espacio grande entre cada profesional (Sol y Flor) */
  width: 100%;
  max-width: 1200px; /* Alineado con el resto de la web */
}

/* TARJETA DE RESUMEN (Foto + Nombre) */
.psico-card {
  display: flex;
  flex-direction: row; /* Lado a lado en escritorio */
  justify-content: center;
  align-items: center; /* Centrado vertical */
  gap: 4rem; /* Espacio entre foto y nombre */
  width: 100%;
}

.psico-img-clickable {
  /* 1. Quitamos el aspect-ratio: 1/1 para que no fuerce un cuadrado perfecto */
  width: 350px; /* Tamaño base */
  height: auto; /* Deja que la altura se ajuste a la imagen (o pon un height fijo si prefieres) */

  /* 2. Mantenemos el cover para que la foto no se estire feo */
  object-fit: cover;

  /* 3. ¡AQUÍ ESTÁ LA CLAVE! Volvemos a tu radio original */
  /* Antes (mi código): border-radius: 50%; */
  border-radius: 38% / 60%; /* TU CÓDIGO ORIGINAL (Forma ovalada orgánica) */

  /* Interacción */
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.psico-img-clickable:hover {
  transform: scale(1.05);
}

/* INFO (Nombre y Título) */

/* style.css - Versión Desktop */
.psico-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* ESCRITORIO: Alineamos todo a la IZQUIERDA */
  text-align: left;
  align-items: flex-start;

  /* --- EL CAMBIO MÁGICO --- */
  /* Definimos un ancho fijo. 350px es suficiente para "Lic. Florencia Zara..." */
  width: 350px;
  /* Esto hace que la caja de texto de Sol ocupe lo mismo que la de Flor,
     aunque su nombre sea más corto. */
}
/* style.css - Versión Mobile (Dentro de @media max-width: 900px) */
@media (max-width: 900px) {
  .psico-info {
    /* MÓVIL: Alineamos todo al CENTRO */
    align-items: center; /* CLAVE: Esto alinea el trazo al centro */
    text-align: center;
    /* --- RESTABLECER ANCHO --- */
    width: 100%; /* O 'auto', para que en el celular ocupe lo que deba ocupar */
  }
}

/* Ajuste opcional para el trazo en móvil si es necesario */
/* .trazo-formacion { */
/* En flex 'align-items: center' ya lo centra, 
        pero si quieres asegurar, puedes poner margin auto aquí */
/* margin: 5px auto 0; */
/* } */

.psico-title {
  font-family: "Literata", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: #575757;
  font-weight: 500;
  line-height: 1.2;
}

/* Estilos para el click/flecha */
.psico-title-clickable {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.arrow-icon {
  display: block; /* Antes inline-block */
  width: 25px; /* Un poquito más grande para que sea fácil de clickear */
  height: 25px;

  /* Dibujo de la flecha */
  border-right: 5px solid var(--color-rosa);
  border-bottom: 5px solid var(--color-rosa);

  /* Rotación inicial (apuntando abajo) */
  transform: rotate(45deg);
  transition:
    transform 0.3s ease,
    margin-top 0.3s ease;

  cursor: pointer;
}

/* Estado rotado (apuntando arriba) */
.arrow-icon.rotated {
  transform: rotate(-135deg);
  /* Ajuste fino visual para que no parezca que sube al rotar */
  margin-top: 5px;
}
/* NUEVA CLASE PARA UBICACIÓN Y CENTRADO */
.psico-arrow-centered {
  /* Separación del subtítulo */
  margin-top: 0.5rem;

  /* MAGIA FLEXBOX: */
  /* Como el padre (.psico-info) es una columna flex, esto centra al hijo horizontalmente */
  align-self: flex-start;
}

.psico-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  color: #949494;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* Estado Base (Invisible y contraído) */
.nombre-trazo-wrapper {
  display: flex;
  flex-direction: column;

  /* LA MAGIA: El ancho del div será igual al ancho del texto (el elemento más ancho adentro) */
  width: fit-content;

  /* Asegura que en móvil se centre si el padre lo pide */
  margin: 0 auto 0 0; /* Por defecto alineado a la izquierda */
}

/* 2. Actualizamos el trazo para que obedezca al wrapper */
.trazo-formacion {
  display: block;

  /* CAMBIO CLAVE: 100% del wrapper (que mide lo mismo que el texto) */
  width: 90%;

  /* Quitamos límites fijos para que se pueda estirar si el nombre es largo */
  max-width: none;

  height: 14px;

  /* Ajusta este margen negativo para acercarlo/alejarlo del texto */
  margin-top: -5px;
  margin-bottom: -16px;

  /* Mantenemos tus animaciones originales */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

/* Estado Activo (Visible y expandido) */
.trazo-formacion.visible {
  opacity: 1;
  transform: scaleX(1);

  /* Transición para cuando APARECE (se abre) */
  /* El cubic-bezier le da un efecto de "pincelada" más natural */
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease-in;
}
/* --- RESPONSIVE (Mobile First Mentalidad) --- */

@media (max-width: 900px) {
  .equipo {
    padding: 4rem 1.5rem; /* Menos padding lateral en tablet/móvil */
    gap: 3rem;
  }

  .psico-card {
    flex-direction: column; /* Foto arriba, nombre abajo */
    text-align: center;
    gap: 2rem;
  }

  .psico-info {
    align-items: center; /* Centrar textos */
    text-align: center;
  }

  .psico-img-clickable {
    width: 220px; /* Foto un poco más chica */
  }

  /* El trazo decorativo debajo del nombre se centra */
  .nombre-trazo-wrapper {
    /* En móvil queremos que se centre */
    margin: 0 auto;
    align-items: center; /* Asegura alineación interna */
  }

  .trazo-formacion {
    transform-origin: center center; /* En móvil queda mejor que crezca desde el centro */
  }
}
/* ---------- FORMACION DESPLEGABLE (Ajuste de velocidad) ---------- */

.psico-formacion-component {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  /* Estado CERRADO */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;

  /* Estilo interno */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* === VELOCIDAD DE CIERRE (Rápida) === */
  /* Se aplica cuando quitamos la clase .expanded */
  /* max-height: 0.3s es rápido para que no tarde en desaparecer */
  transition:
    max-height 0.3s cubic-bezier(0, 1, 0, 1),
    /* Truco: curva rápida para evitar lag */ opacity 0.2s ease-out,
    margin-top 0.3s ease;
}

.psico-formacion-component.expanded {
  /* Estado ABIERTO */
  /* Usamos 2000px o lo suficiente para cubrir tu contenido */
  max-height: 2000px;
  opacity: 1;
  margin-top: 2rem;

  /* === VELOCIDAD DE APERTURA (Lenta/Suave) === */
  /* Se aplica cuando agregamos la clase .expanded */
  transition:
    max-height 1s ease-in-out,
    /* Tiempo suficiente para leer el movimiento */ opacity 0.5s ease-in,
    margin-top 0.5s ease;
}

/* Contenedor de las dos columnas de texto */
.psico-text-conteiner {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  gap: 4rem; /* Espacio generoso en el medio */
  width: 100%;
  margin-bottom: 2rem;
}

/* Columnas individuales */
.psico-formacion-text-izquierda,
.psico-formacion-text-derecha {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #575757;
  font-weight: 300;

  /* Flex para manejar los items y los trazos */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Alineación específica para diseño de "espejo" (opcional) */
/* Si quieres que la izquierda se alinee a la derecha (pegado al centro) */
.psico-formacion-text-izquierda {
  text-align: left;
  align-items: flex-start;
}
/* Y la derecha a la izquierda (pegado al centro) */
.psico-formacion-text-derecha {
  text-align: left;
  align-items: flex-start;
}

/* Imágenes decorativas entre textos */
.trazo-inline {
  display: block;
  width: 100px; /* Tamaño controlado */
  height: 5px;
  opacity: 0.6;
}

/* Botón CV */
.cv-button {
  width: 200px;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-top: 2rem;
}

.cv-button:hover {
  transform: scale(1.05);
}

/* --- RESPONSIVE FORMACIÓN --- */
@media (max-width: 768px) {
  .psico-text-conteiner {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 2rem;
    text-align: center;
  }

  /* En móvil, centramos todo */
  .psico-formacion-text-izquierda,
  .psico-formacion-text-derecha {
    text-align: left;
    align-items: left;
  }

  /* Quitamos el margen top extra en móvil para que se sienta más compacto */
  .psico-formacion-component.expanded {
    margin-top: 1rem;
  }
}

/* --- FORMACIONES A PROFESIONALES --- */
.formaciones-text-image-conteiner {
  display: flex;
  flex-wrap: wrap; /* CLAVE: Permite que la imagen baje si no hay espacio */
  justify-content: center; /* Centra horizontalmente todo el bloque */
  align-items: center; /* Centra verticalmente texto e imagen */
  gap: 1rem; /* Espacio limpio entre texto e imagen (sin márgenes raros) */

  max-width: 1400px; /* Ancho máximo para que no se desparrame en pantallas gigantes */
  width: 95%; /* Margen de seguridad lateral en móviles */
  margin: 0 auto; /* Centrado del bloque en la página */
  padding: 2rem 0; /* Aire arriba y abajo */

  /* Tu animación de entrada (mantenida) */
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* Estado activo de la animación */
.formaciones-text-image-conteiner.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Contenedor del Texto */
.formaciones-text-conteiner {
  flex: 1 1 350px; /* MAGIA: Crece, se encoge, pero intenta medir 500px de base */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Espacio entre título y párrafo */
  text-align: left; /* Alineación por defecto */
}

.formaciones-title {
  font-family: "Literata", serif;
  font-size: clamp(32px, 5vw, 55px); /* Fuente responsive fluida */
  line-height: 1.2;
  color: white;
  margin: 0;
}

.formaciones-email {
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* La Imagen */
.formaciones-image {
  flex: 1 1 400px; /* Intenta medir 400px, si no cabe, se ajusta */
  max-width: 717px; /* Límite máximo real de la imagen */
  width: 100%; /* Para que no desborde en móvil */
  height: auto; /* Mantiene proporción */
  object-fit: contain;
}
.formaciones-a-profesionales {
  /* 1. ANCHO: Usamos 100% para evitar scroll horizontal raro */
  width: 100%;

  /* 2. ALTURA: Automática. Si agregas 100 tarjetas, el fondo crecerá solo. */
  height: auto;

  /* 3. COLOR: Tu violeta original */
  background: #caacee;

  /* 4. ESPACIADO: Le damos aire arriba y abajo para que no se pegue al borde */
  padding: 3rem 0;

  /* 5. LAYOUT: Aseguramos que el contenido interno se centre */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem; /* Espacio entre la intro (texto/imagen) y las tarjetas */

  /* Para que el padding no sume al ancho total */
  box-sizing: border-box;
}
/* CORRECCIONES EN TÍTULOS Y TEXTOS DE FORMACIONES */

.formaciones-title {
  /* BORRAR: width: 535.88px; height: 166px; */
  width: 100%;
  max-width: 800px; /* Límite de lectura */
  height: auto; /* Deja que el texto decida la altura */

  /* Tus estilos de fuente se mantienen */
  color: white;
  font-family: Literata;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 55px); /* Responsive */
  line-height: 1.2;
  text-align: left; /* O center, según prefieras */
  margin-bottom: 1rem;
}

.formaciones-text {
  /* BORRAR: width: 509.03px; height: 286.59px; */
  width: 121%;
  max-width: 600px;
  height: auto;

  /* Tus estilos */
  color: white;
  font-family: "Lato", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

/* Ajuste para móvil en el padding */
@media (max-width: 768px) {
  .formaciones-a-profesionales {
    padding: 4rem 1.5rem; /* Menos padding lateral en móvil */
  }

  .formaciones-title,
  .formaciones-text {
    text-align: center; /* En móvil queda mejor centrado */
  }
}
.formaciones-email {
  color: white;
  font-size: 20px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  text-decoration: underline;
  line-height: 30px;
  letter-spacing: 1px;
  word-wrap: break-word;
}

.formaciones-cards-conteiner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8rem; /* Espacio horizontal entre columnas */
  row-gap: 2rem; /* Espacio vertical entre filas */
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  justify-content: center;
  align-items: center;
}
/* Alinear la 5ta tarjeta al centro en Desktop */
.formaciones-cards-conteiner .formacion-card:nth-child(5) {
  grid-column: 1 / -1; /* Le dice: "Empieza en la columna 1 y termina en la última" */
  justify-self: center; /* La centra horizontalmente en ese espacio nuevo */
  width: 100%;
  max-width: 600px; /* Opcional: Limita el ancho para que no se vea gigante */
}
.formacion-card {
  /* Quitamos posición relativa y overflow:hidden si no se usan */
  background: var(--color-card-fondo); /* Aplica el color de fondo púrpura */
  color: white; /* Color de texto base */
  border-radius: 160px; /* CLAVE: Para la forma ovalada */
  border: 4px solid white;
  padding: 3rem 4rem; /* CLAVE: Controla la altura y el ancho interno */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  /* Ajuste Flexbox para mejor control del contenido */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem; /* Espacio entre título y cuerpo de texto */
  box-sizing: border-box; /* Asegura que padding no aumente el tamaño total */
  width: 100%;
  height: auto; /* La altura se ajusta al contenido. */
  min-height: 480px; /* Mantenemos una altura mínima del diseño original */
}

/* ✅ Quinta card centrada (ocupa 2 columnas) */
.formacion-card:hover {
  transform: translateY(-5px);
}

/* Overlay con gradiente para legibilidad */

/* Título de la card */
.card-title {
  color: white;
  font-size: 32px;
  font-family: Literata;
  font-weight: 600;
  line-height: 35px;
  word-wrap: break-word;
  margin: 0;
  text-align: left;
}

/* Cuerpo de texto */
.card-body {
  color: white;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 21px;
  word-wrap: break-word;
  margin: 0;
  max-width: 100%;
  text-align: left;
}

/* Hover effect */
.formacion-card:hover {
  transform: translateY(-5px);
}

/* Responsive */
@media (max-width: 767px) {
  .card-overlay {
    padding: 1.5rem;
    gap: 0.8rem;
  }

  .card-title {
    font-size: 28px;
    line-height: 32px;
  }

  .card-body {
    font-size: 15px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .card-overlay {
    padding: 1.5rem;
    gap: 0.8rem;
  }

  .card-title {
    font-size: 24px;
    line-height: 28px;
  }

  .card-body {
    font-size: 14px;
    line-height: 19px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .card-overlay {
    padding: 1rem;
    gap: 0.6rem;
  }

  .card-title {
    font-size: 20px;
    line-height: 24px;
  }
}
/* ---------- CÓMO TRABAJA (Refactorizado) ---------- */

.como-trabaja {
  width: 100%;
  padding: 6rem 2rem;
  background: var(--color-fondo);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem; /* Espacio vertical general entre bloques */
  box-sizing: border-box;
}

/* 1. INTRODUCCIÓN */
.como-trabaja-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
  width: 100%;
}

.como-trabaja-title {
  font-family: "Literata", serif;
  font-size: clamp(36px, 5vw, 55px);
  color: #638c6b;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  max-width: 800px; /* Límite de ancho para que no se estire demasiado */
}

.como-trabaja-text {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  color: #575757;
  line-height: 1.6;
  max-width: 900px; /* Texto contenido para lectura cómoda */
  margin: 0;
}

/* 2. CARDS DE PASOS (Grid System) */
.como-trabaja-cards-container {
  display: grid;
  /* 3 columnas iguales en escritorio */
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;

  width: 90%;
  max-width: 1400px; /* Ancho máximo de la grilla */
  margin: 0 auto;

  /* Alineamos al inicio para que el margin-top funcione */
  align-items: start;
}
/* --- EFECTO ESCALONADO (Staircase) --- */
/* Lo aplicamos desde 900px en adelante para que se vea en notebooks y tablets landscape */
@media (min-width: 900px) {
  .step-1 {
    margin-top: 0; /* La más alta */
  }

  .step-2 {
    margin-top: 80px; /* Baja un escalón */
  }

  .step-3 {
    margin-top: 160px; /* Baja dos escalones */
  }
}

/* Wrapper de cada tarjeta */
.step-card-wrapper {
  width: 100%;
  position: relative;
  /* Animación de entrada */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* EFECTO ESCALONADO (Solo Desktop) */
@media (min-width: 1024px) {
  .step-1 {
    margin-top: 0;
  }
  .step-2 {
    margin-top: 80px;
  }
  .step-3 {
    margin-top: 160px;
  }
}

/* Tipografía dentro de las cards */
.step-title {
  font-family: "Literata", serif;
  font-size: clamp(28px, 3vw, 45px);
  color: #638c6b;
  margin: 0 0 0.5rem 0;
}

.step-subtitle {
  font-family: "Literata", serif;
  font-size: clamp(18px, 1.5vw, 21px);
  color: #638c6b;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.step-body {
  font-family: "Lato", sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  color: #575757;
  line-height: 1.5;
  margin: 0;
}

.text-highlight {
  font-family: "Aeonik Trial", sans-serif;
  font-weight: 700;
  color: #575757;
}

/* Clase para activar animación (JS) */
.step-card-wrapper.animate {
  opacity: 1;
  transform: translateY(0);
}
/* Retrasos para efecto de "escalerita" */
.step-1.animate {
  transition-delay: 0s;
}

.step-2.animate {
  transition-delay: 0.3s; /* Espera 0.3s después del primero */
}

.step-3.animate {
  transition-delay: 0.6s; /* Espera 0.6s después del primero */
}

/* En móvil, quitamos el delay para que no se sienta lento al scrollear */
@media (max-width: 768px) {
  .step-1.animate,
  .step-2.animate,
  .step-3.animate {
    transition-delay: 0s;
  }
}
/* =========================================
   TARJETA PURO CSS (Reemplazo de imágenes) 
   ========================================= */

.step-card-pure {
  /* 1. El Color de fondo (Verde Menta de tu diseño) */
  background-color: #d4eee2;

  /* 2. La forma (Bordes redondeados grandes para que parezca la imagen original) */
  border-radius: 95px;

  /* 3. Espaciado interno (Padding) */
  /* Arriba/Abajo: 3rem | Izquierda/Derecha: 2.5rem */
  padding: 3rem 2.5rem;

  /* 4. Comportamiento y Tamaño */
  width: 100%;
  height: 100%; /* Para que en la grilla todas midan lo mismo de alto */
  box-sizing: border-box; /* Clave para que el padding no agrande la tarjeta */

  /* Alineación del contenido */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido verticalmente */
  text-align: left; /* Alineación del texto a la izquierda */

  /* Sombra suave opcional (le da profundidad como la imagen PNG) */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

  /* Transición suave al pasar el mouse */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Efecto Hover */
.step-card-pure:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Ajuste de tipografía interna para asegurar márgenes */
.step-card-pure .step-title {
  margin-top: 0;
}

/* --- AJUSTE RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
  .step-card-pure {
    /* En móvil reducimos un poco el radio y el relleno */
    border-radius: 80px;
    padding: 3.5rem 2.5rem;
    height: auto; /* En móvil dejamos que la altura sea libre */
  }
}
/* 3. FOOTER DEL EQUIPO */
.como-trabaja-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: 100%;
  max-width: 1200px;
  margin: 4rem auto 0 auto;
}

.como-trabaja-bottom-text {
  font-family: "Literata", serif;
  font-size: clamp(20px, 3vw, 32px);
  color: #575757;
  text-align: center;
  max-width: 900px; /* Le damos aire para que se expanda en Desktop */
  width: 90%; /* En móviles usará el 90% de la pantalla */
  margin: 0 auto; /* Asegura que siempre esté centrado */
  line-height: 1.4;
}

/* GRID DE EQUIPO (4 Columnas) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas por defecto */
  gap: 2rem;
  width: 100%;
  align-items: start;
}

/* style.css - Modificación en TEAM COLUMN */

.team-column {
  display: flex;
  flex-direction: column; /* O row, según tu diseño original. Si es lado a lado usa 'row' */
  /* Si antes era 'row', mantén 'row' y usa position relative */
  /* Viendo tu HTML, parece que están lado a lado (imagen + texto) */
  flex-direction: row;

  /* CLAVE 1: Contexto de posicionamiento */
  position: relative;

  /* CLAVE 2: Creamos el espacio a la izquierda con padding en lugar de gap */
  /* 4px de la línea + espacio extra (ej. 1rem) = aprox 1.5rem total */
  padding-left: 1.5rem;

  /* gap: 1rem; <-- Ya no lo necesitamos para la línea porque será absoluta */
}

/* style.css - Modificación en TEAM LINE */

.team-line {
  /* CLAVE 3: La sacamos del flujo para que NO empuje la altura */
  position: absolute;
  left: 0;
  top: 0;

  /* CLAVE 4: Le decimos "Mide exactamente lo que mida tu padre" */
  height: 100%;
  width: 4px; /* Tu ancho fijo */

  /* CLAVE 5: Decidir cómo se adapta el dibujo */
  /* 'cover': Recorta si sobra (mantiene proporción) */
  /* 'fill': Se estira/aplasta para encajar perfecto (mejor para trazos simples) */
  object-fit: fill;
}

.team-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.team-role-title {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #caacee; /* Color traído de tu inline style */
  letter-spacing: 1px;
}

.team-info p {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: #575757;
  line-height: 1.6;
  margin: 0;
}

/* --- RESPONSIVE DESIGN (Media Queries Simplificadas) --- */

/* Tablet (hasta 1024px) */
@media (max-width: 1024px) {
  .como-trabaja-cards-container {
    /* Mantenemos 3 columnas o bajamos a 1 según prefieras. 
       A veces en tablet vertical 3 columnas queda muy apretado. */
    grid-template-columns: 1fr;
    max-width: 600px; /* Centralizamos en una columna */
  }

  /* Quitamos el escalonado en tablet/móvil */
  .step-1,
  .step-2,
  .step-3 {
    margin-top: 0;
  }

  /* Equipo a 2 columnas */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

/* Móvil (hasta 600px) */
@media (max-width: 600px) {
  .como-trabaja {
    padding: 4rem 1.5rem;
  }

  .team-grid {
    grid-template-columns: 1fr; /* 1 columna en móvil */
  }
}

/* ---------- FOOTER / CONTACTO (Refactorizado) ---------- */

.footer-page {
  width: 100%; /* Ocupa el ancho disponible sin desbordar */
  height: auto; /* Crece con el contenido */
  background: #caacee;

  /* Espaciado interno generoso */
  padding: 4rem 2rem 6rem 2rem;

  /* Flexbox para centrar todo */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Margin top normal, sin exagerar */
  margin-top: 5rem;

  box-sizing: border-box;
  overflow: visible; /* Permitir que la imagen sobresalga si usamos margen negativo */
}

/* Contenedor que limita el ancho del contenido */
.footer-content {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem; /* Espacio entre el bloque principal y las redes sociales */
  position: relative;
}

/* Bloque: Imagen + Botón */
.footer-main-block {
  display: flex;
  flex-direction: row; /* Lado a lado */
  align-items: center;
  width: 100%;

  /* --- LA SOLUCIÓN --- */

  /* 1. Permite que bajen si no entran */
  flex-wrap: wrap;

  /* 2. Centra los elementos si bajan o si sobran márgenes */
  justify-content: center;

  /* 3. Espacio de seguridad (para que no se peguen si bajan) */
  gap: 2rem;
}

/* IMAGEN PRINCIPAL */
.footer-image {
  /* ANTES: flex: 1 1 auto;  <-- Esto causaba el error */

  /* AHORA: El '0' fuerza a ignorar el tamaño original para el cálculo de espacio */
  flex: 1 1 0;

  /* Agregamos esto para asegurar que la imagen se comporte bien */
  width: 100%;
  min-width: 300px; /* Mantenemos tu seguridad para que no desaparezca */

  max-width: 1200px;
  height: auto;
  margin-top: -185px;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s ease-out,
    transform 1s ease-out;
  object-fit: contain; /* Asegura que la imagen no se deforme */

  z-index: 1;
}

/* BOTÓN (El enlace contenedor) */
.footer-cta-link {
  display: block;

  /* ANTES: width: 100%; */

  /* AHORA: */
  width: auto; /* Solo lo que mide la imagen del botón */
  flex: 0 0 auto; /* No crezcas, no te encojas */

  max-width: 350px;
  min-width: 250px; /* Un poco más chico el mínimo para que aguante más tiempo al lado */

  margin-top: -20px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2; /* Por encima de la imagen grande */
}

.footer-cta-link:hover {
  transform: scale(1.05);
}

/* LA IMAGEN (Relleno) */
.footer-button-img {
  width: 75%; /* Llena el 100% del contenedor padre (el enlace) */
  height: auto;
  display: block; /* Elimina espacio fantasma debajo de imágenes */

  /* Quitamos el max-width de aquí, porque ya lo controla el padre */
}

/* REDES SOCIALES */
.footer-social-block {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Quitamos el gap de aquí porque ahora lo manejará el enlace interno */
  gap: 0;
}

/* Nueva clase para el enlace */
.social-link {
  display: flex;
  align-items: center;
  gap: 1rem; /* El espacio entre el ícono y el texto ahora va aquí */
  text-decoration: none; /* Quita el subrayado azul típico de los links */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  cursor: pointer;
}

/* Efecto Hover (opcional pero recomendado) */
.social-link:hover {
  transform: scale(1.05); /* Crece un poquito */
  opacity: 0.9;
}

/* Aseguramos que las imágenes y textos mantengan sus estilos dentro del link */
.rrss-image {
  width: 100%;
  max-width: 45px;
  height: auto;
  /* cursor: pointer; <-- Ya no es necesario aquí, lo tiene el padre .social-link */
}

.rrss-text {
  font-family: "Lato", sans-serif;
  font-size: 35px;
  color: white; /* Asegura que el texto siga blanco */
}

/* --- ESTADO ANIMADO (JS) --- */
/* Cuando el JS agrega la clase .animate-in al footer */
.footer-page.animate-in .footer-image {
  opacity: 1;
  transform: translateY(0);
}
/* ========================================
     ESTILOS MENÚ HAMBURGUESA (Necesarios)
     ======================================== */
.hamburger {
  display: none; /* Oculto en PC */
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #f79db9; /* Tu color rosa */
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animación X */
.hamburger.active span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}

/* Bloquear scroll cuando menú abierto */
body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   MASTER RESPONSIVE - CÓDIGO FINAL
   Pegar esto al final de style.css (después de borrar las media queries viejas)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLET Y LAPTOPS PEQUEÑAS (De 769px a 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1727px) {
  .footer-main-block {
    width: 82%;
  }
}
@media (max-width: 1024px) {
  /* HERO: Ajustes para pantallas medianas */
  .hero {
    min-height: 700px;
    padding: 2rem;
  }
  .hero-image-block {
    max-width: 450px; /* Imagen controlada */
  }

  /* SERVICIOS: 2 Columnas */
  .pill-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    margin: 0 auto;
  }
  .pill-item:last-child {
    grid-column: 1 / -1; /* Centrar el impar */
    width: 60%;
    margin: 0 auto;
  }

  /* EQUIPO */
  .psico-card {
    gap: 2rem;
  }
  .psico-img-clickable {
    width: 280px;
  }

  /* CÓMO TRABAJA */
  .step-1,
  .step-2,
  .step-3 {
    margin-top: 0;
  } /* Sin escalón */

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  /* FOOTER */
  .footer-main-block {
    flex-direction: column; /* ¡CLAVE! Los apila verticalmente */
    gap: 2rem; /* Espacio entre imagen y botón */
  }

  .footer-cta-link {
    margin-top: 0; /* Reseteamos márgenes negativos */
    max-width: 300px; /* Tamaño ideal */
    width: 100%;
  }

  .footer-image {
    max-width: 100%; /* Que ocupe lo que pueda */
    margin-top: -50px; /* Un overlap suave si quieres */
  }
  /* ===== NAVBAR & MENÚ HAMBURGUESA (Movido aquí para Tablets) ===== */
  .navbar {
    padding: 1rem 1.5rem;
    height: 80px;
  }

  .logo img {
    width: 70px; /* Ajuste intermedio */
    height: 70px;
  }

  /* Mostrar botón hamburguesa */
  .hamburger {
    display: flex;
  }

  /* Ocultar indicador de sección desktop */
  /* INDICADOR DE SECCIÓN (Visible en Tablet y Móvil) */
  .section-indicator {
    /* 1. Lo hacemos visible */
    display: block;

    /* 2. Lo centramos absolutamente en el navbar */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    /* 3. Estilos de tipografía */
    font-family: "Lato", sans-serif;
    font-size: 16px; /* Tamaño discreto */
    font-weight: 700;
    color: #949494; /* Color gris de tu menú */
    text-transform: uppercase;
    letter-spacing: 2px;

    /* 4. Evitamos que moleste a los clicks */
    pointer-events: none;

    /* 5. Transición suave para cuando cambia el texto (JS) */
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  /* Estado cuando cambia el texto (Animación JS) */
  .section-indicator.changing {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }

  /* Transformar menú horizontal a Panel Lateral */
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 75%; /* Ancho del menú lateral */
    max-width: 300px;
    background: #fcfaf5;

    flex-direction: column; /* Apilar links */
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

    padding: 140px 2rem 2rem 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

    /* Animación de entrada */
    transform: translateX(100%); /* Escondido */
    transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
    z-index: 999;
  }

  /* Estado Activo */
  .menu.active {
    transform: translateX(0);
  }

  /* Resetear estilos de links para el menú móvil */
  .menu .link {
    font-size: 18px;
    width: 100%;
    text-align: center;
  }
  .formaciones-text-conteiner {
    text-align: center; /* Centra el contenedor padre */
    align-items: center; /* Asegura que los items flex se centren */
  }
  /* Sobrescribimos el 'left' del escritorio forzando el centro en los hijos */
  .formaciones-title,
  .formaciones-text {
    text-align: center;
    width: 100%; /* Aseguramos que ocupen todo el ancho para poder centrarse */
  }
  #formaciones {
    scroll-margin-top: 70px;
  }
  #como-trabaja {
    scroll-margin-top: 70px;
  }
}

/* --------------------------------------------------------------------------
     2. MÓVILES Y TABLETS VERTICALES (Menos de 900px)
     Aquí ocurre la magia del "Stacking" (todo a 1 columna)
     -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* ===== HERO (Pila vertical) ===== */
  .hero {
    /* Usamos tu variable JS calculada en lugar de vh puro para evitar el bug de iOS */
    min-height: calc(var(--vh, 1vh) * 90);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Layout vertical: imagen arriba, texto debajo */
  .hero-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
  }

  /* Imagen responsive y centrada */
  .hero-image-block {
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: center;
  }

  .hero-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    animation: fade-in 1s ease-in-out forwards;
    opacity: 1; /* Asegura buena legibilidad del texto */
  }

  /* Texto debajo de la imagen (sin superposición) */
  .hero-text-area {
    position: relative;
    z-index: 2;
    margin-top: -115px;
    width: 100%;

    /* ¡LA MAGIA!: Cambiamos Flexbox por Grid para superponer textos */
    display: grid;
    place-items: center;
  }

  /* Fuerza que los textos no sean absolute y no se superpongan */
  .hero-text1,
  .hero-text2 {
    /* Hacemos que AMBOS ocupen exactamente la misma "celda" invisible */
    grid-area: 1 / 1;

    position: relative;
    transform: none;
    top: auto;
    left: auto;
    width: 100%;
    text-align: center;
    margin: 0;
    line-height: 1.2;
  }

  /* (Tus tamaños de fuente se mantienen igual) */
  .hero-text1 {
    font-size: clamp(36px, 10vw, 45px);
  }
  .hero-text2 {
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.4;
  }

  /* ===== GENERAL ===== */
  .equipo-title,
  .como-trabaja-title,
  .formaciones-title {
    font-size: 32px;
  }
  .equipo-text,
  .servicios-text,
  .formaciones-text,
  .como-trabaja-text {
    font-size: 16px;
    padding: 0 1rem;
  }
  .formaciones-text {
    width: 122%;
  }
  /* ===== SERVICIOS (Ajuste a 2 columnas centrado) ===== */
  .servicios {
    padding: 4rem 1rem;
  }

  .pill-container {
    /* 1. Cambiamos de 1fr a 2 columnas */
    grid-template-columns: repeat(2, 1fr);

    /* 2. Damos más ancho máximo para que quepan cómodas las dos columnas */
    /* Antes era 350px, ahora necesitamos más espacio */
    max-width: 600px;

    /* Ajuste de gap para que no se peguen */
    gap: 1rem;
    margin: 0 auto;
  }

  /* 3. TRUCO DE CENTRADO PARA LA ÚLTIMA PILL (La número 9) */
  .pill-item:last-child {
    /* Le decimos que ocupe todo el ancho de la fila (las 2 columnas) */
    grid-column: 1 / -1;

    /* Pero le restringimos el ancho real para que no se vea como una "salchicha" gigante */
    width: 50%; /* Ocupa la mitad del espacio disponible (aprox el tamaño de una pill normal) */

    /* La centramos horizontalmente */
    justify-self: center;
    margin: 0 auto;
  }
  /* ===== EQUIPO ===== */
  .equipo {
    padding: 4rem 1rem;
  }
  .psico-card {
    flex-direction: column;
    gap: 2rem;
  }
  .psico-info {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .nombre-trazo-wrapper {
    margin: 0 auto;
    align-items: center;
  }
  .psico-arrow-centered {
    align-self: center;
  }

  /* Acordeón */
  .psico-text-conteiner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .psico-formacion-text-izquierda,
  .psico-formacion-text-derecha {
    text-align: left;
    align-items: left;
  }

  /* ===== FORMACIONES ===== */
  .formaciones-text-image-conteiner {
    flex-direction: column;
    text-align: center;

    /* 1. Aseguramos que el contenedor no se salga */
    width: 100%;
    padding: 2rem -0.5rem; /* Usamos padding interno en lugar de margin auto con width 95% */
    box-sizing: border-box; /* Clave para que el padding no sume ancho */
    align-items: center;
  }

  /* 1. Aseguramos que el contenedor de texto NO se desborde */
  .formaciones-text-conteiner {
    flex: 1 1 auto;
    width: 100% !important; /* Volvemos al 100% para que no se salga de la pantalla */
    max-width: 100% !important;
    text-align: center;
    align-items: center;
    margin: 0;
  }
  /* 2. Ajustamos la imagen por separado si quieres que se vea más grande */
  .formaciones-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 1.5rem auto 0 auto !important; /* Centrado absoluto */
    object-fit: contain;
    flex: none; /* Evitamos que flexbox intente calcular tamaños raros */
  }

  /* 3. Corregimos el párrafo de texto que también tiene 122% */
  .formaciones-text {
    width: 100% !important; /* Estaba en 122%, cámbialo a 100% */
    max-width: 100%;
    font-size: 16px;
    padding: 0;
    text-align: center;
  }
  .formaciones-cards-conteiner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0;
  }
  .formacion-card {
    border-radius: 80px;
    padding: 2rem;
    min-height: 370px;
  }

  /* Arreglar la 5ta card */
  .formaciones-cards-conteiner .formacion-card:nth-child(5) {
    grid-column: auto;
    max-width: 100%;
  }

  /* ===== CÓMO TRABAJA ===== */
  .como-trabaja {
    padding: 4rem 1rem;
  }
  .como-trabaja-cards-container {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .team-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .team-column {
    padding-left: 1rem;
  }

  /* ===== FOOTER ===== */
  .footer-page {
    /* 1. Reducimos el padding lateral al mínimo (0.5rem) 
       para que la imagen tenga más espacio real para crecer */
    padding: 4rem 0.5rem !important;
    width: 100% !important;
    overflow: hidden; /* Evita que cualquier resto de imagen cree scroll lateral */
  }
  .footer-content {
    width: 100% !important;
    align-items: center !important;
  }
  .footer-main-block {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 1.5rem !important;
  }

  .footer-image {
    margin-top: 0; /* Sin overlap en móvil para no tapar nada */
    max-width: 100%;
    width: 100%;
  }
  .footer-social-block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: 0.8rem; /* Un poco más junto en móvil */
  }
  .footer-cta-link {
    /* Le damos un tamaño sólido para que NO desaparezca */
    display: block;
    width: 100%;
    max-width: 280px; /* Tamaño botón móvil */
    margin-top: 0; /* Limpio */
    position: relative; /* Seguridad */
  }

  .footer-button-img {
    width: 75%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .rrss-image {
    display: block;
    margin: 0; /* Quitamos el auto margin porque ahora usa flex/gap */

    /* CORRECCIÓN IMPORTANTE: */
    /* Antes tenías 250px aquí, que es gigante. Lo bajamos a tamaño ícono */
    width: 30px;
    max-width: 30px;
    height: auto;
  }
  .rrss-text {
    /* Ajustamos el tamaño del texto para móvil */
    font-size: 18px;
    color: white;
  }
  #formaciones {
    scroll-margin-top: 80px;
  }
  #como-trabaja {
    scroll-margin-top: 80px;
  }
  .hero-image {
    width: 105%;
    height: 78%;
    margin-top: 50px;
  }
  /* 1. Ocultamos la línea (el trazo) */
  .team-line {
    display: none;
  }

  /* 2. Centramos el contenedor de la grilla */
  .team-grid {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los bloques verticalmente */
    gap: 3rem;
    width: 100%;
  }

  /* 3. Ajustamos la columna para que el texto se centre perfecto */
  .team-column {
    /* Quitamos el padding izquierdo que dejaba espacio para la línea */
    padding-left: 0;

    /* Centramos el texto interno */
    text-align: center;

    /* Centramos los elementos flex internos (por si acaso) */
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 300px;
  }

  /* Aseguramos que la info interna también se centre */
  .team-info {
    align-items: center;
  }
}
@media (max-width: 581px) {
  .formacion-card {
    min-height: 390px;
  }
}
@media (max-width: 491px) {
  .pill-text {
    font-size: 13px;
  }
  .formacion-card {
    min-height: 415px;
  }
}
@media (max-width: 478px) {
  .formacion-card {
    min-height: 430px;
  }
  .formaciones-cards-conteiner .formacion-card:nth-child(3) {
    /* La altura general es min-height: 480px. 
       Aquí le ponemos más para que destaque. */
    min-height: 500px;

    /* Opcional: Si quieres forzar una altura fija exacta */
    /* height: 600px; */
  }
}
@media (max-width: 404px) {
  .pill-text {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   4. AJUSTES FINOS SCROLL MARGIN (Móviles Pequeños)
   Pegar esto AL FINAL del archivo para sobrescribir reglas anteriores
   -------------------------------------------------------------------------- */

/* RANGO 1: Celulares hasta 384px (ej. Samsung S20/S21 normales, iPhone X/11 Pro) */
@media (max-width: 384px) {
  /* Ajustamos todos los IDs a la vez para asegurar que el navbar (80px) no tape nada */
  #servicios,
  #equipo,
  #formaciones,
  #como-trabaja,
  #contacto,
  section[id] {
    scroll-margin-top: 70px !important;
  }
  /* 1. Reducimos el padding del navbar para ganar espacio a los costados */
  .navbar {
    padding: 0.8rem 1rem;
  }

  /* 2. Ajustamos el Texto del Medio (Indicador) */
  .section-indicator {
    /* Hacemos la letra más chica */
    font-size: 13px !important;

    /* Juntamos más las letras (antes era 2px, esto ayuda mucho) */
    letter-spacing: 0.5px !important;

    /* EL SECRETO: Esto prohíbe terminantemente que el texto baje de línea */
    white-space: nowrap;

    /* Aseguramos que siga centrado */
    width: auto;
  }
  .hero-image {
    width: 105%;
    height: 72%;
    margin-top: 60px;
  }
}
@media (max-width: 380px) {
  .hero-text1 {
    font-size: 28px;
  }
  .navbar {
    padding: 1rem;
  }
  .pill-text {
    font-size: 11px;
  }
}

/* RANGO 2: Celulares Muy Chicos hasta 360px (ej. Galaxy Fold cerrado, iPhone SE, Moto G viejos) */
@media (max-width: 360px) {
  /* Aquí ajustamos un poco más fino si sientes que queda mucho aire */
  #servicios,
  #equipo,
  #formaciones,
  #como-trabaja,
  #contacto,
  section[id] {
    scroll-margin-top: 75px !important;
  }

  /* En pantallas muy pequeñas, mantenemos la imagen fluida y eliminamos hacks que superponen texto */
  .hero-image {
    width: 100%;
    height: auto;
    margin-top: 0;
    object-fit: contain;
  }

  .hero-text-area {
    margin-top: -150px !important;
    min-height: auto !important;
  }
}