/* =========================================================
   MITSEIN — style.css · versión completa y vigente
   Generado: 12-oct-2026 (v6: ajuste del logotipo del hero de inicio, sobre la v5)
   Es el ÚNICO style.css vigente: reemplaza a cualquier otro.
   Nuevo en v6 (12-oct-2026, sólo hero de inicio): .hero-marca ya no se corre
   -38px a la izquierda (eso cortaba el logotipo en móvil). Ahora se compensa el
   margen transparente del PNG (~2.5 % del ancho) para que la "M" arranque a la
   altura de la primera letra de la frase ancla: -27px en escritorio, -13px en
   ≤900px y -12px en ≤560px. Ningún otro bloque se tocó.
   Bloques verificados presentes: hero-inicio, Ubicaciones, ficha-precio, agenda
   standalone, form-reporte-404, --ancho-lectura-amplio, footer-legal (v4), .sc-,
   .ch- y .ad-.
   ---------------------------------------------------------
   Versión anterior — v5:
   Generado: 06-oct-2026 (v5: + AdoleSiendo rediseñada, sobre la v4)
   Es el ÚNICO style.css vigente: reemplaza a cualquier otro.
   Nuevo en v5 (06-oct-2026): bloque .ad- al final del archivo (hero compacto,
   caja de landing con botón, tarjetas de pilar con foto, franja de Código abierto,
   tarjetas de servicio con "Leer más", banda de la Tríada fenomenológica,
   Atención psicológica y formulario con la plantilla franja gris). Todo lo anterior
   (.sc-, .ch-, hero-inicio, Ubicaciones, ficha-precio, agenda standalone,
   form-reporte-404, --ancho-lectura-amplio, footer-legal de la v4 y las clases
   anteriores de AdoleSiendo) permanece sin cambios.
   ---------------------------------------------------------
   Versión anterior — v4:
   Generado: 06-oct-2026 (v4: + nota de imágenes con IA en el footer, sobre la v3 de Capital humano)
   Es el ÚNICO style.css vigente: reemplaza a cualquier otro.
   Nuevo en v4 (06-oct-2026, sólo bloque FOOTER): .footer-legal pasó de flex a grid de
   3 columnas (1fr, centro de hasta 640px, 1fr) para centrar la nueva .footer-nota-ia
   (nota de imágenes generadas con IA) entre el © y el Aviso de privacidad, con la
   misma tipografía, tamaño y color; por debajo de 1200px se apila y se centra.
   Ningún otro bloque se tocó (siguen intactos .sc-, .ch-, hero-inicio, Ubicaciones,
   ficha-precio, agenda standalone, form-reporte-404 y --ancho-lectura-amplio).
   ---------------------------------------------------------
   Versión anterior — v3 (05-oct-2026, + Capital humano rediseñada):
   Nuevo en v3 (05-oct-2026): bloque .ch- al final del archivo (hero compacto,
   caja de landing, tarjetas de pilar con foto, tarjetas de categoría con
   "Leer más", formulario de Capital humano). Cambios v3c: íconos de las nueve categorías reemplazados (línea fina, estilo Ser contigo). Cambios v3b: tarjetas de pilar con foto, cabeceras de pilar al ancho de las tarjetas, sin leyenda en el hero. Todo lo anterior (v2, incluidos
   hero-inicio, Ubicaciones, ficha-precio, agenda standalone, form-reporte-404,
   --ancho-lectura-amplio y los bloques .sc-) permanece sin cambios.
   ---------------------------------------------------------
   Generado: 05-oct-2026 (v2: correcciones sutiles de Ser contigo)
   Es el ÚNICO style.css vigente: reemplaza a cualquier otro.
   Correcciones v2 (05-oct-2026, sólo bloques .sc-): curva del hero ahora rodea
   logotipo + frase ancla (sc-hero-curva dentro de sc-hero-texto); Modelo
   Mitsein con texto cerrado y "Leer más" (sc-modelo-texto, expandida);
   párrafo de landing en caja gris con letras blancas (sc-landing-caja).
   Nuevo en esta entrega (05-oct-2026):
   - Ser contigo rediseñada (pacientes.php): hero compacto morado, párrafo de
     landing, dos tarjetas grandes con foto, banda de Modelo Mitsein, tarjetas
     de servicio con "Leer más". Todo con prefijo .sc- al final del archivo
     (bloques sc-hero, sc-landing, sc-pilares, sc-modelo, sc-servicios,
     sc-tarjeta). NINGUNA regla global ni clase de otras ramas se tocó.
   Entrega anterior (01-oct-2026):
   - Nuevo index (home): hero con logotipo + frase ancla + foto (hero-inicio,
     hero-grid, hero-copy, hero-marca, hero-lema, hero-visual, hero-foto)
   - Tarjetas de rama rediseñadas (ramas, ramas-grid, rama, rama-contenido,
     rama-top, rama-isotipo, rama-leyenda, rama-imagen)
   - Manifiesto de cierre (manifiesto)
   - Paleta: + --lavanda, --lavanda-suave, --lavanda-clara
   - SE ELIMINÓ POR COMPLETO el hero de inicio animado anterior
     (.hero-inicio-cuerpo, .hero-inicio-intro, sprite SVG, estados
     --pre/--animando/--aterrizado/--final, todo su JS asociado queda huérfano
     y puede limpiarse de header.php cuando se quiera — no se toca aquí)
   Incluye, en este orden:
   - Estilos globales, header/navegación, botones, fichas, footer
   - Aviso de Privacidad, responsive de navegación
   - Hero de rama, resumen de pilares, agrupación por formato (AdoleSiendo)
   - Pacientes / Ser contigo: 2 columnas, ficha-insignia (Modelo Mitsein)
   - Iconos de fichas (ficha-titulo-linea), Contacto, Biblioteca (libros)
   - Calendario de eventos, página 404 (form-reporte-404)
   - Ser contigo: Ubicaciones, precio de ficha (ficha-precio), agenda standalone
   - --ancho-lectura-amplio (850px)
   - Hero de rama: texto ~9 % más ancho + text-wrap balance/pretty (21-sep-2026)
   - AdoleSiendo: resumen-pilares-4 (4 columnas, incluye Código abierto) y
     tamaño del logotipo de esa tarjeta (21-sep-2026)
   - NUEVO 01-oct-2026: index (hero-inicio nuevo, ramas, manifiesto)
   ========================================================= */

/* =========================================================
   MITSEIN — Estilos globales
   Tokens de marca: morado dominante, gris secundario,
   Expletus Sans (encabezados/logo/CTA) + Kedebideri (cuerpo)
   ========================================================= */

:root {
  /* Color */
  --morado: #3d0e45;
  --morado-suave: #5a2166;
  --morado-tenue: #f4eef6;
  --lavanda: #b57edc;
  --lavanda-suave: #dbb6ee;
  --lavanda-clara: #ebdcec;
  --gris: #b3b3b3;
  --gris-claro: #e9e9e9;
  --gris-oscuro: #6b6b6b;
  --texto: #2a1730;
  --blanco: #ffffff;

  /* Tipografía */
  --fuente-titulos: "Expletus Sans", sans-serif;
  --fuente-cuerpo: "Kedebideri", sans-serif;

  /* Layout */
  --ancho-maximo: 1240px;
  --ancho-lectura: 680px;
  --ancho-lectura-amplio: 850px; /* 680px + 25% — párrafo de bienvenida de cada rama, Aviso de Privacidad, encabezados de pilar (.titulo-seccion) y .grupo-fichas */
  --margen-header: 48px;
  --radio-suave: 16px;
  --radio-pill: 999px;

  /* Sombra */
  --sombra-tarjeta: 0 8px 30px rgba(61, 14, 69, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--morado);
  text-decoration: none;
}

a:hover {
  color: var(--morado-suave);
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, .fuente-titulos {
  font-family: var(--fuente-titulos);
  color: var(--morado);
  line-height: 1.2;
  margin: 0;
}

h1 { font-size: 2.6rem; font-weight: 600; }
h2 { font-size: 1.9rem; font-weight: 600; }
h3 { font-size: 1.3rem; font-weight: 500; }

p {
  margin: 0 0 16px;
}

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
}

.ancho-lectura {
  max-width: var(--ancho-lectura);
}

/* =========================================================
   HEADER / NAVEGACIÓN
   ========================================================= */

.site-header {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-principal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* Ancho completo, sin límite máximo — solo un margen lateral fijo,
     a diferencia de .contenedor que sí limita el ancho de lectura. */
  padding: 14px var(--margen-header);
  gap: 24px;
}

.nav-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.nav-isotipo {
  height: 50px;
  width: auto;
  object-fit: contain;
  justify-self: end;
}

.nav-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

.nav-enlaces {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-enlaces > li {
  position: relative;
}

.nav-enlaces > li > a,
.nav-enlaces > li > button.nav-rama {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radio-pill);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--texto);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav-enlaces > li > a:hover,
.nav-enlaces > li > button.nav-rama:hover,
.nav-enlaces > li.abierto > button.nav-rama {
  background: var(--morado-tenue);
  color: var(--morado);
}

.nav-rama .flecha {
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}

.nav-enlaces > li.abierto .flecha {
  transform: rotate(180deg);
}

.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--blanco);
  border-radius: var(--radio-suave);
  box-shadow: var(--sombra-tarjeta);
  border: 1px solid var(--gris-claro);
  padding: 8px;
  min-width: 260px;
  list-style: none;
  margin: 0;
}

.nav-enlaces > li.abierto .submenu {
  display: block;
}

.submenu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--texto);
}

.submenu li a:hover {
  background: var(--morado-tenue);
  color: var(--morado);
}

.nav-utilidades {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toggle-idioma {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--gris-claro);
  border-radius: var(--radio-pill);
  padding: 3px;
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
}

.toggle-idioma a {
  padding: 5px 12px;
  border-radius: var(--radio-pill);
  color: var(--gris-oscuro);
  font-weight: 500;
}

.toggle-idioma a.activo {
  background: var(--morado);
  color: var(--blanco);
}

.nav-aviso {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gris-oscuro);
  white-space: nowrap;
}

/* Botón hamburguesa (móvil) */
.nav-hamburguesa {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-hamburguesa span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--morado);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* =========================================================
   BOTONES / CTA
   ========================================================= */

.btn {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--radio-pill);
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primario {
  background: var(--morado);
  color: var(--blanco);
}

.btn-primario:hover {
  background: var(--morado-suave);
  color: var(--blanco);
}

.btn-secundario {
  background: transparent;
  color: var(--morado);
  border-color: var(--morado);
}

.btn-secundario:hover {
  background: var(--morado);
  color: var(--blanco);
}

/* =========================================================
   FICHAS DE SERVICIO (acordeón) — patrón reutilizable
   ========================================================= */

.ficha {
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-suave);
  margin-bottom: 12px;
  overflow: hidden;
}

.ficha-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--blanco);
  border: none;
  padding: 20px 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--morado);
}

.ficha-cabecera .flecha {
  transition: transform 0.15s ease;
  color: var(--gris-oscuro);
}

.ficha.abierta .ficha-cabecera .flecha {
  transform: rotate(180deg);
}

.ficha-contenido {
  display: none;
  padding: 0 24px 24px;
}

.ficha.abierta .ficha-contenido {
  display: block;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: var(--morado);
  color: var(--gris-claro);
  padding: 48px 24px 32px;
}

.footer-grid {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}

.footer-grid h4 {
  font-family: var(--fuente-titulos);
  color: var(--blanco);
  font-size: 1.425rem;
  font-weight: 500;
  margin: 0 0 14px;
}

.footer-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 16px;
}

.footer-social a {
  display: flex;
  color: var(--gris-claro);
}

.footer-social a:hover {
  color: var(--blanco);
}

.footer-grid p, .footer-grid a {
  color: var(--gris-claro);
  font-size: 0.9rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 8px;
}

.footer-grid a:hover {
  color: var(--blanco);
}

/* Franja legal — 06-oct-2026: grid de 3 columnas.
   Izquierda: © año · Ciudad de México. Centro: nota de imágenes
   generadas con IA (hereda tipografía, tamaño y color de la franja;
   hasta 640px de ancho y se parte en renglones). Derecha: Aviso de
   privacidad. Las dos columnas laterales miden lo mismo (1fr), así la
   nota queda centrada respecto al ancho del footer. */
.footer-legal {
  max-width: var(--ancho-maximo);
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: grid;
  grid-template-columns: 1fr minmax(0, 640px) 1fr;
  align-items: center;
  gap: 12px 24px;
  font-size: 0.82rem;
  color: var(--gris);
}

.footer-legal > :first-child {
  justify-self: start;
}

.footer-legal > :last-child {
  justify-self: end;
}

.footer-nota-ia {
  justify-self: center;
  text-align: center;
  line-height: 1.55;
  text-wrap: balance;
}

.footer-legal a {
  color: var(--gris);
}

.footer-legal a:hover {
  color: var(--blanco);
}

@media (max-width: 1200px) {
  .footer-legal {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-legal > :first-child,
  .footer-legal > :last-child {
    justify-self: center;
  }

  .footer-nota-ia {
    max-width: 640px;
  }
}

/* =========================================================
   AVISO DE PRIVACIDAD
   Tratamiento tipográfico deliberadamente distinto al resto
   del sitio: encabezados en Kedebideri (no Expletus Sans),
   por el carácter sobrio de un documento legal.
   NO es plantilla visual para el resto del sitio.
   ========================================================= */

.aviso-pagina {
  padding: 56px 24px 80px;
}

.aviso-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}

.aviso-sidebar {
  position: sticky;
  top: 96px;
}

.aviso-sidebar-titulo {
  display: block;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-oscuro);
  margin-bottom: 12px;
}

.aviso-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--gris-claro);
}

.aviso-sidebar li a {
  display: block;
  padding: 7px 0 7px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.86rem;
  color: var(--gris-oscuro);
  line-height: 1.4;
}

.aviso-sidebar li a:hover {
  color: var(--morado);
  border-left-color: var(--morado);
}

.aviso-contenido {
  max-width: var(--ancho-lectura-amplio);
}

.aviso-contenido h1 {
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  color: var(--morado);
  font-size: 2.1rem;
}

.aviso-marca {
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  color: var(--texto);
  font-size: 1.05rem;
  margin: 4px 0 0;
}

.aviso-fundamento {
  color: var(--gris-oscuro);
  font-size: 0.92rem;
  margin-bottom: 40px;
}

.aviso-contenido section {
  margin-bottom: 36px;
  padding-top: 12px;
}

.aviso-contenido h2 {
  font-family: var(--fuente-cuerpo);
  font-weight: 800;
  color: var(--morado);
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: 14px;
}

.aviso-contenido p,
.aviso-contenido li {
  font-size: 0.96rem;
  color: var(--texto);
}

.aviso-contenido ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.aviso-contenido li {
  margin-bottom: 8px;
}

.aviso-contenido li:last-child {
  margin-bottom: 0;
}

.aviso-fecha {
  margin-top: 24px;
  color: var(--gris-oscuro);
}

@media (max-width: 900px) {
  .aviso-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .aviso-sidebar {
    position: static;
    border-bottom: 1px solid var(--gris-claro);
    padding-bottom: 24px;
  }
}

/* =========================================================
   RESPONSIVE — NAV
   ========================================================= */

@media (max-width: 900px) {
  .nav-panel {
    display: none;
  }

  .nav-isotipo {
    display: none;
  }

  .nav-hamburguesa {
    display: block;
  }

  .nav-principal {
    grid-template-columns: auto 1fr auto;
    padding: 14px 24px;
  }

  .nav-logo img {
    height: 40px;
  }

  .nav-principal.menu-abierto .nav-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-claro);
    padding: 12px;
    gap: 4px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  .nav-principal.menu-abierto .nav-enlaces {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-principal.menu-abierto .nav-enlaces > li > a,
  .nav-principal.menu-abierto .nav-enlaces > li > button.nav-rama {
    width: 100%;
    justify-content: space-between;
  }

  .nav-principal.menu-abierto .submenu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    margin-top: 4px;
    width: 100%;
  }

  .nav-principal.menu-abierto .nav-utilidades {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 8px;
    border-top: 1px solid var(--gris-claro);
    margin-top: 8px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}

/* =========================================================
   PÁGINA DE MUESTRA — RAMA (hero + fichas)
   Nuevo, propuesto para revisión de dirección visual.
   Pensado para reutilizarse igual en AdoleSiendo y
   Capital Humano (mismo patrón, distinto color de acento
   si se decide diferenciar ramas — pendiente de aprobar).
   ========================================================= */

.hero-rama {
  background: var(--gris-claro);
  padding: 72px 24px 64px;
  text-align: center;
}

.hero-rama .eyebrow {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--morado-suave);
  background: var(--blanco);
  padding: 6px 16px;
  border-radius: var(--radio-pill);
  margin-bottom: 20px;
}

.hero-rama h1 {
  max-width: 858px; /* 780px + 10 % (21-sep-2026): evita que la frase ancla deje una palabra sola */
  margin: 0 auto;
  text-wrap: balance;
}

.hero-rama .hero-parrafo {
  max-width: 925px; /* 850px (--ancho-lectura-amplio) + 8.8 % (21-sep-2026) */
  margin: 28px auto 0;
  color: var(--texto);
  font-size: 1.05rem;
}

.hero-rama .hero-parrafo p {
  text-wrap: pretty; /* evita palabras sueltas al final del párrafo */
}

.hero-rama .hero-parrafo p:last-child {
  margin-bottom: 0;
}

.seccion-servicios {
  padding: 64px 24px;
}

.seccion-servicios .titulo-seccion {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto 32px;
  text-align: center;
}

.seccion-servicios .titulo-seccion p {
  color: var(--gris-oscuro);
  margin-top: 8px;
  margin-bottom: 0;
}

.grupo-fichas {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto;
}

/* =========================================================
   RESUMEN DE PILARES — franja de vista rápida entre el hero
   y las descripciones, para no depender del scroll para ver
   los pilares (patrón transversal, 11-sep-2026)
   ========================================================= */

.resumen-pilares {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  padding: 40px 24px;
}

.resumen-pilares .contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.resumen-pilar {
  display: block;
  text-align: center;
  color: var(--texto);
  padding: 0 16px;
  border-left: 1px solid var(--gris-claro);
}

.resumen-pilar:first-child {
  border-left: none;
}

.resumen-pilar h3 {
  color: var(--morado);
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.resumen-pilar p {
  color: var(--gris-oscuro);
  font-size: 0.92rem;
  margin: 0;
}

.resumen-pilar:hover h3 {
  color: var(--morado-suave);
}

/* =========================================================
   AGRUPACIÓN POR FORMATO (AdoleSiendo: Talleres/Conferencias/
   Atención psicológica dentro de un pilar) y metadato de ficha
   ========================================================= */

.subtitulo-grupo {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto 16px;
  font-size: 1.1rem;
  text-align: center;
}

.grupo-fichas + .subtitulo-grupo {
  margin-top: 40px;
}

.parrafo-intro-grupo {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto 20px;
  text-align: center;
  color: var(--gris-oscuro);
  font-size: 0.95rem;
}

.ficha-meta {
  font-size: 0.82rem;
  color: var(--gris-oscuro);
  font-weight: 600;
  margin-bottom: 10px;
}

/* =========================================================
   PACIENTES — variante de 2 columnas para el resumen de
   pilares, precio+CTA por ficha, y ficha con mayor presencia
   visual (Modelo Mitsein, programa insignia)
   ========================================================= */

.resumen-pilares-2 .contenedor {
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--ancho-lectura-amplio);
}

/* =========================================================
   ADOLESIENDO — variante de 4 columnas para el resumen de
   pilares (Para adolescentes / Para padres / Para docentes /
   Código abierto). NUEVO 21-sep-2026.
   ========================================================= */

.resumen-pilares-4 .contenedor {
  grid-template-columns: repeat(4, 1fr);
}

.resumen-pilar-codigo-abierto img {
  max-height: 48px;
  width: auto;
  margin: 0 auto 8px;
  display: block;
}

.ficha-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.ficha-subtitulo {
  color: var(--morado);
  font-size: 1.05rem;
}

.ficha-insignia {
  background: var(--morado-tenue);
  border-color: var(--morado-suave);
}

@media (max-width: 640px) {
  .resumen-pilares-2 .contenedor {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .resumen-pilares .contenedor {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .resumen-pilar {
    border-left: none;
    border-top: 1px solid var(--gris-claro);
    padding: 20px 0 0;
  }

  .resumen-pilar:first-child {
    border-top: none;
    padding-top: 0;
  }
}

.ficha-contenido p:last-of-type {
  margin-bottom: 20px;
}

.ficha-cabecera .flecha {
  flex-shrink: 0;
  margin-left: 16px;
}

.ficha-icono {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: 10px;
}

/* =========================================================
   ¿QUIÉNES SOMOS? — identidad institucional y equipo
   ========================================================= */

.identidad-institucional {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.identidad-bloque h2 {
  margin-bottom: 12px;
}

.lista-valores {
  margin: 0;
  padding-left: 22px;
}

.lista-valores li {
  margin-bottom: 12px;
}

.lista-valores li:last-child {
  margin-bottom: 0;
}

.equipo-lista {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.equipo-tarjeta {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gris-claro);
}

.equipo-lista .equipo-tarjeta:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.equipo-foto {
  width: 140px;
  height: 140px;
  border-radius: var(--radio-suave);
  object-fit: cover;
  flex-shrink: 0;
}

.equipo-nombre {
  margin-bottom: 2px;
}

.equipo-puesto {
  color: var(--morado-suave);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .equipo-tarjeta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .equipo-foto {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================
   CONTACTO — 4 enlaces directos, sin formulario
   ========================================================= */

.contacto-enlaces {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contacto-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-suave);
  color: var(--texto);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.contacto-item:hover {
  background: var(--morado-tenue);
  border-color: var(--morado-suave);
  color: var(--texto);
}

.contacto-icono {
  display: flex;
  color: var(--morado);
  flex-shrink: 0;
}

.contacto-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contacto-etiqueta {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  color: var(--morado);
  font-size: 0.95rem;
}

.contacto-valor {
  color: var(--gris-oscuro);
  font-size: 0.92rem;
}

/* =========================================================
   RECURSOS — libros (Ediciones Mitsein + Bibliografía),
   placeholders de subsección y aviso legal fijo
   ========================================================= */

.libros-lista {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.libro-tarjeta {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gris-claro);
}

.libros-lista .libro-tarjeta:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.libro-portada {
  width: 130px;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--sombra-tarjeta);
  flex-shrink: 0;
}

.libro-titulo {
  margin-bottom: 2px;
}

.libro-autor {
  color: var(--morado-suave);
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.libro-placeholder-linea {
  font-style: italic;
  color: var(--gris-oscuro);
}

.libro-disponible {
  color: var(--gris-oscuro);
  font-size: 0.88rem;
  margin-bottom: 0;
}

.libro-ficha-tecnica {
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.88rem;
}

.libro-ficha-tecnica th {
  text-align: left;
  color: var(--gris-oscuro);
  font-weight: 500;
  padding: 4px 20px 4px 0;
  vertical-align: top;
  white-space: nowrap;
}

.libro-ficha-tecnica td {
  padding: 4px 0;
  color: var(--texto);
}

.subsecciones-placeholder {
  max-width: var(--ancho-lectura-amplio);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.subseccion-placeholder {
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-suave);
  padding: 24px;
  text-align: center;
}

.subseccion-placeholder h3 {
  margin-bottom: 8px;
}

.subseccion-placeholder p {
  color: var(--gris-oscuro);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.subseccion-placeholder-ancha {
  grid-column: 1 / -1;
}

.recursos-aviso-legal {
  max-width: var(--ancho-lectura-amplio);
  margin: 24px auto 56px;
  padding-top: 24px;
  border-top: 1px solid var(--gris-claro);
  font-size: 0.8rem;
  color: var(--gris-oscuro);
  text-align: center;
}

@media (max-width: 640px) {
  .libro-tarjeta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .libro-ficha-tecnica {
    margin-left: auto;
    margin-right: auto;
  }

  .subsecciones-placeholder {
    grid-template-columns: 1fr;
  }
}

.ficha-nota {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--gris-oscuro);
  background: var(--gris-claro);
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  margin-left: 10px;
  vertical-align: middle;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  text-transform: none;
}

.ficha-titulo-linea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

/* =========================================================
   CALENDARIO DE EVENTOS — vista mes completa + panel lateral + modal
   ========================================================= */

.eventos-hero {
  background: var(--morado-tenue);
  padding: 56px 24px 40px;
  text-align: center;
}

.eventos-hero .eyebrow {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--morado-suave);
  background: var(--blanco);
  padding: 6px 16px;
  border-radius: var(--radio-pill);
  margin-bottom: 20px;
}

.eventos-hero .hero-parrafo {
  max-width: 780px;
  margin: 20px auto 0;
  color: var(--texto);
}

.eventos-seccion {
  padding: 40px 24px 72px;
}

.cal-layout {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.cal-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-suave);
  box-shadow: var(--sombra-tarjeta);
  padding: 20px;
}

.cal-columna-lateral {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cal-nav-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-nav-centro {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cal-nav-centro h3 {
  text-transform: capitalize;
  min-width: 170px;
  text-align: center;
}

.cal-boton-hoy {
  font-family: var(--fuente-titulos);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--morado);
  background: var(--morado-tenue);
  border: none;
  border-radius: var(--radio-pill);
  padding: 6px 14px;
  cursor: pointer;
}

.cal-boton-hoy:hover {
  background: var(--morado);
  color: var(--blanco);
}

.cal-nav-boton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gris-claro);
  background: var(--blanco);
  color: var(--morado);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cal-nav-boton:hover {
  background: var(--morado-tenue);
}

.cal-dias-semana,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dias-semana {
  background: var(--morado);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.cal-dias-semana span {
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 0.78rem;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 4px;
}

.cal-grid {
  border: 1px solid var(--gris-claro);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.cal-celda {
  min-height: 118px;
  background: var(--blanco);
  border-right: 1px solid var(--gris-claro);
  border-bottom: 1px solid var(--gris-claro);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-celda.otro-mes {
  background: #fafafa;
}

.cal-celda.otro-mes .cal-numero {
  color: var(--gris);
}

.cal-celda.hoy {
  background: var(--morado-tenue);
}

.cal-numero {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--texto);
  padding: 2px 4px;
}

.cal-chip {
  display: block;
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-mas-boton {
  border: none;
  background: none;
  color: var(--morado);
  font-family: var(--fuente-titulos);
  font-size: 0.74rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  padding: 2px 7px;
}

.cal-mas-boton:hover {
  text-decoration: underline;
}

/* Leyenda de categorías */

.leyenda-categorias h3 {
  margin-bottom: 14px;
}

.leyenda-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-claro);
}

.leyenda-item:last-child {
  border-bottom: none;
}

.leyenda-punto {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.leyenda-nombre {
  font-family: var(--fuente-titulos);
  color: var(--morado);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.leyenda-descripcion {
  font-size: 0.82rem;
  color: var(--gris-oscuro);
  margin: 0;
  line-height: 1.5;
}

/* Lista de eventos del mes */

#lista-eventos-mes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lista-evento-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 9px 4px;
  text-align: left;
  font-family: var(--fuente-cuerpo);
  font-size: 0.88rem;
  color: var(--texto);
  cursor: pointer;
  border-radius: 8px;
}

.lista-evento-item:hover {
  background: var(--morado-tenue);
}

.lista-evento-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.panel-eventos-vacio {
  color: var(--gris-oscuro);
  font-size: 0.9rem;
}

/* Modal de detalle de evento */

.modal-evento-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 23, 48, 0.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-evento-fondo.visible {
  display: flex;
}

.modal-evento {
  background: var(--blanco);
  border-radius: var(--radio-suave);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}

.modal-cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--gris-claro);
  color: var(--texto);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.modal-cerrar:hover {
  background: var(--morado-tenue);
  color: var(--morado);
}

.modal-fecha {
  text-transform: capitalize;
  margin-bottom: 16px;
}

.modal-evento-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--gris-claro);
}

.modal-evento-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.modal-evento-color {
  width: 5px;
  border-radius: var(--radio-pill);
  flex-shrink: 0;
}

.modal-evento-categoria {
  display: inline-block;
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  margin-bottom: 8px;
}

.modal-evento-titulo {
  font-family: var(--fuente-titulos);
  color: var(--morado);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.modal-evento-detalle {
  font-size: 0.88rem;
  color: var(--gris-oscuro);
  margin-bottom: 2px;
}

.modal-evento-cartel {
  width: 100%;
  border-radius: 12px;
  margin: 12px 0;
}

.modal-evento-descripcion {
  font-size: 0.92rem;
  margin-top: 10px;
  color: var(--texto);
}

@media (max-width: 900px) {
  .cal-layout {
    grid-template-columns: 1fr;
  }

  .cal-nav-centro h3 {
    min-width: 0;
  }

  .cal-dias-semana span {
    font-size: 0.62rem;
    padding: 8px 2px;
  }
}

/* Formulario de interés en eventos */

.formulario-interes-seccion {
  padding-top: 0;
}

.formulario-interes-tarjeta {
  max-width: 720px;
  margin: 0 auto;
}

.formulario-aviso {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.formulario-aviso-exito {
  background: #eaf6ec;
  color: #1f6b30;
}

.formulario-aviso-error {
  background: #fdeceb;
  color: #a3281c;
}

.formulario-interes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.formulario-interes label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--fuente-titulos);
  font-size: 0.88rem;
  color: var(--morado);
  font-weight: 500;
}

.campo-opcional {
  color: var(--gris-oscuro);
  font-weight: 400;
}

.formulario-interes input[type="text"],
.formulario-interes input[type="email"],
.formulario-interes input[type="tel"],
.formulario-interes select,
.formulario-interes textarea {
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  color: var(--texto);
  border: 1px solid var(--gris-claro);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 400;
}

.formulario-interes textarea {
  resize: vertical;
}

.formulario-checkbox {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  color: var(--texto);
  font-size: 0.88rem;
}

.formulario-checkbox input {
  margin-top: 3px;
}

.formulario-interes button[type="submit"] {
  align-self: flex-start;
}

.campo-oculto-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .formulario-fila {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PÁGINA 404 (standalone, sin nav — mismo criterio que
   agenda-proxima-sesion.php: header blanco con logo,
   fondo gris claro)
   ========================================================= */

.pagina-standalone-404 {
  background-color: var(--gris-claro);
  min-height: 100vh;
}

.header-standalone {
  background: var(--blanco);
  padding: 16px var(--margen-header);
  display: flex;
  justify-content: center;
}

.header-standalone .logo-standalone {
  height: 72px;
  width: auto;
  object-fit: contain;
}

.contenido-404 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 24px;
}

.tarjeta-404 {
  background: var(--blanco);
  border-radius: var(--radio-suave);
  box-shadow: var(--sombra-tarjeta);
  padding: 48px 40px;
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.mensaje-404 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--morado);
  margin: 0 0 16px;
}

.mensaje-404-secundario {
  color: var(--gris-oscuro);
  margin: 0 0 32px;
}

.botones-404 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.form-reporte-404 {
  text-align: left;
  border-top: 1px solid var(--gris-claro);
  padding-top: 24px;
}

/* =========================================================
   SER CONTIGO — sección "Ubicaciones" (Condesa/Escandón)
   ========================================================= */

.ubicaciones-seccion {
  background: var(--gris-claro);
}

.ubicaciones-grid {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .ubicaciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ubicacion-tarjeta {
  background: var(--blanco);
  border-radius: var(--radio-suave);
  box-shadow: var(--sombra-tarjeta);
  padding: 28px;
}

.ubicacion-tarjeta h3 {
  margin-bottom: 10px;
}

.ubicacion-tarjeta p {
  color: var(--gris-oscuro);
  font-size: 0.92rem;
}

.ubicacion-tarjeta p:last-child {
  margin-bottom: 0;
}

.ubicacion-nota {
  font-size: 0.85rem;
  font-style: italic;
}

.ubicacion-mapa {
  width: 100%;
  height: 220px;
  border: none;
  border-radius: 10px;
  margin-top: 14px;
  display: block;
}

@media (max-width: 640px) {
  .ubicaciones-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SER CONTIGO — badge de precio junto al botón de cada ficha
   ========================================================= */

.ficha-precio {
  display: block;
  font-size: 0.82rem;
  color: var(--gris-oscuro);
  font-weight: 600;
}

/* =========================================================
   SER CONTIGO — /pacientes/agenda (standalone, sin nav,
   mismo criterio visual que agenda-proxima-sesion.php)
   ========================================================= */

.pagina-standalone-agenda {
  background-color: var(--gris-claro);
  min-height: 100vh;
}

.contenido-agenda {
  display: flex;
  justify-content: center;
  padding: 40px 24px;
}

.tarjeta-agenda {
  background: var(--blanco);
  border-radius: var(--radio-suave);
  box-shadow: var(--sombra-tarjeta);
  padding: 32px;
  max-width: 1240px;
  width: 100%;
}

.agenda-titulo {
  text-align: center;
  margin-bottom: 8px;
}

.agenda-subtitulo {
  text-align: center;
  color: var(--gris-oscuro);
  margin-bottom: 28px;
}

.agenda-iframe {
  width: 100%;
  height: 800px;
  border: none;
  border-radius: 10px;
  display: block;
}

.agenda-pendiente {
  text-align: center;
  color: var(--gris-oscuro);
  padding: 60px 24px;
  border: 1px dashed var(--gris);
  border-radius: var(--radio-suave);
}

.agenda-continuar {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gris-claro);
  text-align: center;
}

.agenda-continuar p {
  color: var(--gris-oscuro);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

/* =========================================================
   SER CONTIGO — franja de agradecimiento tras volver de la
   agenda (pacientes.php?agendado=1)
   ========================================================= */

.franja-agradecimiento {
  background: #eaf6ec;
  color: #1f6b30;
  text-align: center;
  padding: 16px 24px;
  font-family: var(--fuente-titulos);
  font-weight: 500;
}

/* ============================================================
   INDEX — HERO DE INICIO (NUEVO, 01-oct-2026)
   Reemplaza por completo al hero de inicio animado anterior.
   Logotipo + frase ancla a la izquierda, foto a la derecha con
   recorte orgánico; fondo lavanda claro con textura de ruido
   muy sutil (sólo sobre el color sólido, nunca sobre la foto).
   ============================================================ */

.hero-inicio {
  position: relative;
  overflow: hidden;
  min-height: 530px;
  background: var(--lavanda-clara);
}
.hero-inicio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-inicio::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  left: -235px;
  bottom: -185px;
  border: 2px solid var(--morado-suave);
  border-radius: 47% 53% 64% 36% / 44% 38% 62% 56%;
  transform: rotate(16deg);
  opacity: .3;
}
.hero-grid {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  min-height: 530px;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: stretch;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 68px 5vw 58px max(5vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-marca {
  width: 936px;
  max-width: 116%;
  height: auto;
  margin-bottom: 26px;
  /* 12-oct-2026: compensa el margen transparente del PNG (~2.5 % del ancho = ~23px a 936px)
     para que la "M" arranque a la altura de la primera letra de .hero-lema (que va en -6px).
     Antes era -38px y la "M" quedaba ~10px a la izquierda de la frase (y cortada en móvil). */
  margin-left: -27px;
  transform-origin: left center;
}
.hero-lema {
  max-width: 650px;
  margin: 0 0 0 -6px; /* casa con el arranque del logotipo — ajustar a ojo si no cuadra exacto */
  font-family: var(--fuente-titulos);
  font-size: clamp(1.35rem, 2vw, 2.15rem);
  line-height: 1.28;
  font-weight: 500;
  color: var(--gris-oscuro);
}
.hero-visual {
  position: relative;
  min-height: 530px;
  overflow: hidden;
}
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  clip-path: ellipse(92% 105% at 100% 50%);
}

/* ============================================================
   INDEX — TARJETAS DE RAMA (NUEVO, 01-oct-2026)
   Fondo morado, isotipo blanco arriba-izquierda, nombre de rama
   debajo (Expletus Sans), leyenda abajo-derecha cerca de la foto.
   ============================================================ */

.ramas { padding: 28px 3.5vw 48px; background: var(--blanco); }
.ramas-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.rama {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 52%) 48%;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(42,23,48,.25);
  transition: transform .22s ease, box-shadow .22s ease;
}
.rama:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(42,23,48,.32); }
.rama:nth-child(1),
.rama:nth-child(2),
.rama:nth-child(3) { background: var(--morado); }
/* Capital humano: ventana de foto reducida ~19% en total (dos ajustes
   sucesivos de 10% relativo) para que "Capital humano" quepa en un renglón */
.ramas-grid .rama:nth-of-type(3) { grid-template-columns: minmax(0, 61%) 39%; }
.rama-contenido {
  position: relative;
  z-index: 2;
  padding: 28px 18px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rama-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.rama-isotipo {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.rama h2 {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--blanco);
  margin: 0;
}
.rama-leyenda {
  align-self: flex-end;
  text-align: right;
  max-width: 78%;
  margin: 0;
  font-family: var(--fuente-titulos);
  color: var(--lavanda-suave);
  font-size: .94rem;
}
.rama-imagen { position: relative; overflow: hidden; }
.rama-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.rama-imagen::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -18%;
  bottom: -18%;
  left: -78%;
  width: 70%;
  background: var(--gris-claro);
  border-radius: 48%;
  box-shadow: 0 0 0 54px rgba(233,233,233,.10);
}

/* ============================================================
   INDEX — MANIFIESTO DE CIERRE (NUEVO, 01-oct-2026)
   ============================================================ */

.manifiesto {
  position: relative;
  overflow: hidden;
  padding: 74px 24px 80px;
  text-align: center;
  background: var(--gris);
}
.manifiesto::before,
.manifiesto::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--lavanda-suave);
  opacity: .28;
}
.manifiesto::before { width: 360px; height: 360px; left: -190px; bottom: -220px; }
.manifiesto::after { width: 430px; height: 430px; right: -260px; top: -300px; }
.manifiesto-contenido { position: relative; z-index: 1; max-width: 930px; margin: 0 auto; }
.manifiesto p {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.08rem, 1.65vw, 1.34rem);
  line-height: 1.72;
  color: var(--blanco);
}

/* ============================================================
   INDEX — responsive (hero, tarjetas de rama, manifiesto)
   ============================================================ */

@media (max-width: 900px) {
  .hero-grid { min-height: 0; display: flex; flex-direction: column; }
  .hero-visual {
    order: 1;
    position: relative;
    z-index: 1;
    min-height: 255px;
    margin: 18px 24px 0;
    border-radius: 26px;
    overflow: hidden;
  }
  .hero-foto { clip-path: none; border-radius: 26px; object-position: center 44%; }
  .hero-copy { order: 2; position: relative; z-index: 2; padding: 34px 24px 42px; text-align: left; }
  /* 12-oct-2026: en móvil el logotipo mide ≤390px (margen transparente ≤~10px);
     -13px lo alinea con la frase ancla sin cortarlo (antes heredaba -38px). */
  .hero-marca { width: min(390px, 84%); margin-bottom: 18px; margin-left: -13px; }
  .hero-lema { max-width: 650px; font-size: clamp(1.4rem, 5.8vw, 2.1rem); }

  .ramas { padding: 8px 20px 38px; }
  .ramas-grid { grid-template-columns: 1fr; gap: 16px; }
  .rama { min-height: 220px; }
}

@media (max-width: 560px) {
  .hero-visual { min-height: 220px; margin: 16px 18px 0; border-radius: 22px; }
  .hero-copy { padding: 28px 21px 36px; }
  /* 12-oct-2026: logotipo ≤340px (margen transparente ~8px) → -12px. */
  .hero-marca { width: 88%; max-width: 340px; margin-left: -12px; }
  .hero-lema { font-size: 1.48rem; line-height: 1.32; }
  .ramas { padding-inline: 14px; }
  .rama { grid-template-columns: 54% 46%; min-height: 235px; border-radius: 20px; }
  .rama-contenido { padding: 22px 12px 22px 20px; }
  .rama-isotipo { width: 48px; height: 48px; }
  .rama h2 { font-size: 1.48rem; }
  .manifiesto { padding: 56px 22px 60px; }
}


/* ============================================================
   SER CONTIGO REDISEÑADA (NUEVO, 05-oct-2026) — prefijo .sc-
   Todo lo de este bloque cuelga de clases .sc-*: no afecta a
   AdoleSiendo, Capital humano ni a ninguna otra página.
   Reutiliza clases existentes: .contenedor, .btn, .btn-primario,
   .ficha-precio, .franja-agradecimiento y el bloque Consultorios
   (.seccion-servicios, .ubicaciones-*).
   ============================================================ */

.sc-pagina [id] { scroll-margin-top: 100px; }

/* ---------- Hero compacto (morado principal) ---------- */
.sc-hero { background: var(--morado); overflow: hidden; }
.sc-hero-interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 25px;
  min-height: 345px; /* 460px − 25 % */
  padding-left: max(24px, calc((100vw - 1240px) / 2 + 24px));
}
.sc-hero-texto { position: relative; padding-block: 40px; }
.sc-hero-texto > :not(.sc-hero-curva) { position: relative; z-index: 1; }
.sc-hero-logo {
  width: 421px; /* palabra +15 % respecto a la versión anterior */
  max-width: 100%;
  height: auto;
  margin-bottom: 22px;
}
.sc-hero h1 {
  max-width: 600px;
  margin: 0;
  color: var(--blanco);
  font-weight: 500;
  font-size: clamp(2rem, 3.1vw, 2.9rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.sc-hero-imagen { position: relative; height: 345px; }
.sc-hero-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* conserva las dos cabezas en la franja baja */
  border-radius: 40% 0 0 20% / 35% 0 0 28%;
}
.sc-hero-curva {
  position: absolute;
  left: -17%;
  top: 0;
  width: 128%;
  height: 100%;
  color: var(--gris-claro);
  opacity: .8;
  pointer-events: none;
}

/* ---------- Párrafo de landing ---------- */
.sc-landing { padding-block: 52px 46px; }
.sc-landing-caja {
  position: relative;
  overflow: hidden;
  padding: 58px 70px 62px;
  border-radius: 9px;
  text-align: center;
  background: var(--gris);
}
.sc-landing-caja::before,
.sc-landing-caja::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--lavanda-suave);
  opacity: .28;
}
.sc-landing-caja::before { width: 300px; height: 300px; left: -170px; bottom: -190px; }
.sc-landing-caja::after { width: 360px; height: 360px; right: -210px; top: -250px; }
.sc-landing p {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.72;
  color: var(--blanco);
  text-wrap: pretty;
}

/* ---------- Dos tarjetas grandes con foto ---------- */
.sc-pilares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-bottom: 58px;
}
.sc-pilar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gris-claro);
  border-radius: 9px;
  overflow: hidden;
  color: var(--texto);
  text-decoration: none;
  transition: box-shadow .2s;
}
.sc-pilar:hover { box-shadow: var(--sombra-tarjeta); color: var(--texto); }
.sc-pilar-foto {
  width: 100%;
  height: 270px;
  object-fit: cover;
  object-position: center 14%; /* la ilustración tiene las cabezas arriba; la foto de adultos se ve bien igual */
  flex: none;
}
.sc-pilar-texto { position: relative; padding: 26px 30px 30px; }
.sc-etiqueta {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .035em;
  margin-bottom: 12px;
}
.sc-pilar-texto h2 { font-size: 2rem; max-width: 75%; margin-bottom: 14px; }
.sc-pilar-texto p { max-width: 85%; margin: 0; line-height: 1.55; }
.sc-indicador {
  position: absolute;
  top: 30px;
  right: 28px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--morado);
  border-radius: 50%;
  color: var(--morado);
  font-size: 1.35rem;
}

/* ---------- Banda de Modelo Mitsein (programa insignia) ---------- */
.sc-modelo { background: var(--morado); color: var(--blanco); padding-block: 64px; }
.sc-modelo-interior {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
  gap: 46px;
  align-items: start;
}
.sc-modelo-cabecera { display: flex; gap: 24px; align-items: center; }
.sc-modelo-isotipo { width: 105px; height: 160px; object-fit: contain; flex-shrink: 0; }
.sc-modelo .sc-etiqueta { color: var(--lavanda-clara); }
.sc-modelo h2 {
  color: var(--blanco);
  font-size: clamp(2rem, 3vw, 3.1rem);
  margin: 0;
}
.sc-modelo-contenido { padding-left: 40px; border-left: 1px solid var(--lavanda-clara); }
.sc-modelo-lema { font-size: 1.35rem; margin-bottom: 22px; }
.sc-modelo-texto {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 900px;
  line-height: 1.75;
  margin-bottom: 10px;
}
.sc-modelo-contenido.expandida .sc-modelo-texto { display: block; overflow: visible; }
.sc-modelo .sc-leer-mas { display: block; color: var(--blanco); margin-bottom: 24px; }
.sc-modelo .btn {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}
.sc-modelo .btn:hover { background: var(--morado-suave); color: var(--blanco); }
.sc-modelo-precio { color: var(--lavanda-clara); font-size: .9rem; margin: 18px 0 0; }

/* ---------- Servicios (encabezados y tarjetas) ---------- */
.sc-servicios { padding-block: 76px 20px; }
.sc-servicios-adultos { padding-bottom: 80px; }
.sc-encabezado { text-align: center; max-width: 930px; margin: 0 auto 36px; }
.sc-encabezado h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.65rem);
  margin-bottom: 18px;
}
.sc-encabezado p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.sc-rejilla { display: grid; gap: 22px; align-items: start; }
.sc-rejilla-padres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-rejilla-adultos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-tarjeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 25px 26px;
  background: var(--morado-tenue);
  border: 1px solid var(--lavanda-clara);
  border-radius: 18px;
}
.sc-icono { width: 46px; height: 46px; color: var(--morado); margin-bottom: 24px; }
.sc-tarjeta h3 {
  font-size: 1.4rem;
  font-weight: 600;
  min-height: 3.4em;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.sc-texto {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.65;
  margin-bottom: 10px;
}
.sc-tarjeta.expandida .sc-texto { display: block; overflow: visible; }
.sc-leer-mas {
  align-self: start;
  border: none;
  padding: 3px 0;
  background: none;
  color: var(--morado);
  font-family: var(--fuente-titulos);
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 26px;
  cursor: pointer;
}
.sc-pie { margin-top: auto; }
.sc-pie .btn { display: block; width: 100%; padding: 12px; font-size: .94rem; line-height: 1.4; }
.sc-pie .ficha-precio { margin: 16px 0 0; line-height: 1.55; }

/* ---------- Responsive de Ser contigo ---------- */
@media (max-width: 1100px) {
  .sc-rejilla-adultos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-modelo-interior { gap: 35px; }
  .sc-modelo-isotipo { width: 80px; height: 120px; }
}

@media (max-width: 900px) {
  .sc-hero-interior {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    padding: 36px 24px;
  }
  .sc-hero-texto { padding-block: 0; }
  .sc-hero-logo { width: min(390px, 88%); margin-bottom: 18px; }
  .sc-hero h1 { max-width: 650px; font-size: clamp(1.9rem, 6.4vw, 2.7rem); }
  .sc-hero-imagen { height: 260px; max-width: 600px; }
  .sc-hero-foto { border-radius: 40% 15% 10% 25% / 35% 20% 12% 25%; }
  .sc-hero-curva { left: -5%; width: 110%; }

  .sc-landing { padding-block: 36px 34px; }
  .sc-landing-caja { padding: 40px 28px 44px; text-align: left; }

  .sc-pilares { grid-template-columns: 1fr; padding-bottom: 40px; }
  .sc-pilar-foto { height: 220px; }
  .sc-pilar-texto h2 { font-size: 1.85rem; }
  .sc-pilar-texto p { max-width: 100%; }

  .sc-modelo { padding-block: 45px; }
  .sc-modelo-interior { grid-template-columns: 1fr; gap: 25px; }
  .sc-modelo-isotipo { width: 75px; height: 100px; }
  .sc-modelo h2 { font-size: 2rem; }
  .sc-modelo-contenido { padding-left: 0; border-left: none; }

  .sc-servicios { padding-top: 50px; }
  .sc-servicios-adultos { padding-bottom: 50px; }
  .sc-encabezado { text-align: left; }
  .sc-rejilla-padres,
  .sc-rejilla-adultos { grid-template-columns: 1fr; }
  .sc-tarjeta h3 { min-height: 0; }
}

@media (max-width: 420px) {
  .sc-hero-imagen { height: 220px; }
  .sc-pilar-foto { height: 190px; }
  .sc-pilar-texto { padding: 25px; }
  .sc-tarjeta { padding: 26px 23px; }
  .sc-modelo-cabecera { gap: 16px; }
  .sc-modelo-isotipo { width: 55px; }
  .sc-modelo h2 { font-size: 1.8rem; }
}


/* ============================================================
   CAPITAL HUMANO REDISEÑADA (NUEVO, 05-oct-2026) — prefijo .ch-
   Todo lo de este bloque cuelga de clases .ch-*: no afecta a Ser contigo,
   AdoleSiendo ni a ninguna otra página. Reutiliza .contenedor, .btn y
   .btn-primario. Reemplaza al acordeón .ficha / .resumen-pilares sólo en
   capital-humano.php (esas clases siguen vigentes para AdoleSiendo).
   ============================================================ */
.ch-pagina [id]{scroll-margin-top:100px}

/* Hero compacto */
.ch-hero{background:var(--morado);overflow:hidden}
.ch-hero-interior{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:25px;min-height:345px;padding-left:max(24px,calc((100vw - 1240px)/2 + 24px))}
.ch-hero-texto{position:relative;padding-block:40px}
.ch-hero-texto>:not(.ch-hero-curva){position:relative;z-index:1}
.ch-hero-logo{width:421px;max-width:100%;height:auto;margin-bottom:22px}
.ch-hero h1{max-width:600px;margin:0;color:var(--blanco);font-weight:500;font-size:clamp(2rem,3.1vw,2.9rem);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.ch-hero-imagen{position:relative;height:345px}
.ch-hero-foto{width:100%;height:100%;object-fit:cover;object-position:center 27%;border-radius:40% 0 0 20%/35% 0 0 28%}
.ch-hero-curva{position:absolute;left:-17%;top:0;width:128%;height:100%;color:var(--gris-claro);opacity:.8;pointer-events:none}

/* Landing */
.ch-landing{padding-block:52px 46px}
.ch-landing-caja{position:relative;overflow:hidden;padding:58px 70px 62px;border-radius:9px;text-align:center;background:var(--gris)}
.ch-landing-caja::before,.ch-landing-caja::after{content:"";position:absolute;border-radius:50%;background:var(--lavanda-suave);opacity:.28}
.ch-landing-caja::before{width:300px;height:300px;left:-170px;bottom:-190px}
.ch-landing-caja::after{width:360px;height:360px;right:-210px;top:-250px}
.ch-landing p{position:relative;z-index:1;max-width:1040px;margin:0 auto 18px;font-family:var(--fuente-titulos);font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.72;color:var(--blanco);text-wrap:pretty}
.ch-landing p:last-child{margin-bottom:0}

/* Tarjetas de pilar */
.ch-pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:58px}
.ch-pilar{--ch-panel-fondo:var(--morado);position:relative;display:flex;flex-direction:column;background:var(--gris-claro);border-radius:9px;overflow:hidden;color:var(--texto);transition:box-shadow .2s}
.ch-pilar:hover{box-shadow:var(--sombra-tarjeta);color:var(--texto)}
.ch-pilar-panel{height:230px;background:var(--ch-panel-fondo);flex:none;overflow:hidden}
.ch-pilar-panel img{width:100%;height:100%;object-fit:cover}
.ch-pilar-texto{position:relative;flex:1;padding:22px 24px 28px}
.ch-pilar-texto h2{font-size:clamp(1.4rem,1.9vw,1.75rem);padding-right:56px;margin:0 0 12px}
.ch-pilar-texto p{margin:0;line-height:1.55}
.ch-indicador{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--morado);border-radius:50%;color:var(--morado);font-size:1.25rem}

/* Secciones de pilar */
.ch-servicios{padding-block:70px 20px}
.ch-encabezado{text-align:center;margin:0 0 36px}
.ch-encabezado h2{font-size:clamp(1.9rem,3.1vw,2.65rem);margin-bottom:14px;text-wrap:balance}
.ch-encabezado p{margin:0 0 14px;font-size:1.05rem;line-height:1.65;text-wrap:pretty}
.ch-encabezado .ch-frase{margin-bottom:18px;color:var(--morado);font-size:1.15rem}
.ch-encabezado p:last-child{margin-bottom:0}
.ch-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.ch-tarjeta{display:flex;flex-direction:column;min-width:0;padding:30px 25px 26px;background:var(--morado-tenue);border:1px solid var(--lavanda-clara);border-radius:18px}
.ch-icono{width:46px;height:46px;color:var(--morado);margin-bottom:24px}
.ch-tarjeta h3{font-size:1.4rem;font-weight:600;margin-bottom:16px;overflow-wrap:anywhere}
.ch-texto{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;line-height:1.65;margin-bottom:10px}
.ch-tarjeta.expandida .ch-texto{display:block;overflow:visible}
.ch-leer-mas{align-self:start;border:none;padding:3px 0;background:none;color:var(--morado);font-family:var(--fuente-titulos);font-size:.9rem;text-decoration:underline;text-underline-offset:4px;margin-bottom:26px;cursor:pointer}
.ch-pie{margin-top:auto}
.ch-pie .btn{display:block;width:100%;padding:12px;font-size:.94rem;line-height:1.4}

/* Formulario — franja gris claro a todo el ancho, texto a la izquierda y tarjeta blanca a la derecha */
.ch-formulario{padding-block:64px 70px;background:var(--gris-claro)}
.ch-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
.ch-form-intro h2{font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:18px;text-wrap:balance}
.ch-form-intro p{margin:0;color:var(--gris-oscuro);line-height:1.65;text-wrap:pretty}
.ch-form-tarjeta{padding:28px 30px;background:var(--blanco);border-radius:var(--radio-suave);box-shadow:var(--sombra-tarjeta)}
.ch-aviso{padding:12px 16px;border-radius:10px;font-size:.92rem;margin-bottom:20px}
.ch-aviso-exito{background:#eaf6ec;color:#1f6b30}
.ch-aviso-error{background:#fdeceb;color:#a3281c}
.ch-form{display:flex;flex-direction:column;gap:16px}
.ch-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ch-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--fuente-titulos);font-size:.85rem;color:var(--texto);font-weight:500}
.ch-opcional{color:var(--gris-oscuro);font-weight:400}
.ch-form input[type=text],.ch-form input[type=email],.ch-form input[type=tel],.ch-form input[type=number],.ch-form select,.ch-form textarea{width:100%;font-family:var(--fuente-cuerpo);font-size:.95rem;color:var(--texto);background:var(--blanco);border:1px solid var(--gris);border-radius:6px;padding:10px 12px;font-weight:400}
.ch-form textarea{resize:vertical}
.ch-form input:focus,.ch-form select:focus,.ch-form textarea:focus{outline:2px solid var(--lavanda);outline-offset:1px}
.ch-form-pie{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ch-form .ch-checkbox{flex:1;flex-direction:row;align-items:flex-start;gap:10px;font-family:var(--fuente-cuerpo);font-weight:400;color:var(--texto);font-size:.85rem;line-height:1.5}
.ch-form .ch-checkbox input{margin-top:3px;flex:none}
.ch-checkbox a{text-decoration:underline;text-underline-offset:3px}
.ch-form-pie .btn{flex:none}
.ch-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Responsive */
@media (max-width:1100px){
  .ch-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ch-hero-interior{grid-template-columns:1fr;gap:22px;min-height:0;padding:36px 24px}
  .ch-hero-texto{padding-block:16px}
  .ch-hero-logo{width:min(390px,88%);margin-bottom:18px}
  .ch-hero h1{max-width:650px;font-size:clamp(1.9rem,6.4vw,2.7rem)}
  .ch-hero-imagen{height:260px;max-width:600px}
  .ch-hero-foto{border-radius:40% 15% 10% 25%/35% 20% 12% 25%}
  .ch-hero-curva{left:-5%;width:110%}
  .ch-landing{padding-block:36px 34px}
  .ch-landing-caja{padding:40px 28px 44px;text-align:left}
  .ch-pilares{grid-template-columns:1fr;padding-bottom:40px}
  .ch-pilar-panel{height:220px}
  .ch-pilar-texto h2{font-size:1.6rem}
  .ch-servicios{padding-top:50px}
  .ch-encabezado{text-align:left}
  .ch-rejilla{grid-template-columns:1fr}
  .ch-formulario{padding-block:50px 56px}
  .ch-form-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .ch-fila{grid-template-columns:1fr}
  .ch-form-tarjeta{padding:24px 20px}
  .ch-form-pie{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .ch-hero-imagen{height:220px}
  .ch-pilar-panel{height:190px}
  .ch-pilar-texto{padding:22px}
  .ch-tarjeta{padding:26px 23px}
}

/* ============================================================
   ADOLESIENDO REDISEÑADA (NUEVO, 06-oct-2026) — prefijo .ad-
   Todo lo de este bloque cuelga de clases .ad-*: no afecta a Ser contigo,
   Capital humano ni a ninguna otra página. Reutiliza .contenedor, .btn,
   .btn-primario y .btn-secundario. Las clases anteriores de AdoleSiendo
   (.hero-rama, .resumen-pilares*, .ficha*, .seccion-servicios,
   .formulario-interes*) se conservan en este archivo, aunque adolesiendo.php
   ya no las usa.
   ============================================================ */
.ad-pagina [id]{scroll-margin-top:100px}

/* Hero compacto (igual que .ch-hero) */
.ad-hero{background:var(--morado);overflow:hidden}
.ad-hero-interior{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:25px;min-height:345px;padding-left:max(24px,calc((100vw - 1240px)/2 + 24px))}
.ad-hero-texto{position:relative;padding-block:40px}
.ad-hero-texto>:not(.ad-hero-curva){position:relative;z-index:1}
.ad-hero-logo{width:435px;max-width:100%;height:auto;margin-bottom:22px}
.ad-hero h1{max-width:600px;margin:0;color:var(--blanco);font-weight:500;font-size:clamp(2rem,3.1vw,2.9rem);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.ad-hero-imagen{position:relative;height:345px}
.ad-hero-foto{width:100%;height:100%;object-fit:cover;object-position:center 27%;border-radius:40% 0 0 20%/35% 0 0 28%}
.ad-hero-curva{position:absolute;left:-17%;top:0;width:128%;height:100%;color:var(--gris-claro);opacity:.8;pointer-events:none}

/* Landing: caja gris con letras blancas y único CTA */
.ad-landing{padding-block:52px 46px}
.ad-landing-caja{position:relative;overflow:hidden;padding:58px 70px 62px;border-radius:9px;text-align:center;background:var(--gris)}
.ad-landing-caja::before,.ad-landing-caja::after{content:"";position:absolute;border-radius:50%;background:var(--lavanda-suave);opacity:.28}
.ad-landing-caja::before{width:300px;height:300px;left:-170px;bottom:-190px}
.ad-landing-caja::after{width:360px;height:360px;right:-210px;top:-250px}
.ad-landing p{position:relative;z-index:1;max-width:1040px;margin:0 auto 28px;font-family:var(--fuente-titulos);font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.72;color:var(--blanco);text-wrap:pretty}
.ad-landing .ad-btn-claro{position:relative;z-index:1}
.ad-btn-claro{background:var(--blanco);color:var(--morado);border-color:var(--blanco)}
.ad-btn-claro:hover{background:var(--morado);color:var(--blanco);border-color:var(--blanco)}

/* Tarjetas de pilar con foto */
.ad-pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:58px}
.ad-pilar{position:relative;display:flex;flex-direction:column;background:var(--gris-claro);border-radius:9px;overflow:hidden;color:var(--texto);transition:box-shadow .2s}
.ad-pilar:hover{box-shadow:var(--sombra-tarjeta);color:var(--texto)}
.ad-pilar-panel{height:230px;background:var(--morado);flex:none;overflow:hidden}
.ad-pilar-panel img{width:100%;height:100%;object-fit:cover}
.ad-pilar-texto{position:relative;flex:1;padding:22px 24px 28px}
.ad-pilar-texto h2{font-size:clamp(1.4rem,1.9vw,1.75rem);padding-right:56px;margin:0 0 12px}
.ad-pilar-texto p{margin:0;line-height:1.55}
.ad-indicador{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--morado);border-radius:50%;color:var(--morado);font-size:1.25rem}

/* Franja de Código abierto */
.ad-abierto{background:var(--morado);color:var(--blanco);padding-block:56px}
.ad-abierto-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.ad-abierto-logo{display:block;padding:14px;background:var(--blanco);border-radius:18px}
.ad-abierto-logo img{display:block;width:100%;height:auto;border-radius:10px}
.ad-etiqueta{display:block;margin-bottom:14px;font-family:var(--fuente-titulos);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lavanda-clara)}
.ad-abierto h2{margin:0 0 28px;color:var(--blanco);font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.25;text-wrap:balance}

/* Encabezados de pilar */
.ad-servicios{padding-block:70px 20px}
.ad-servicios-continuacion{padding-top:10px}
.ad-servicios-docentes{padding-bottom:0}
.ad-encabezado{max-width:var(--ancho-lectura-amplio);margin:0 auto 36px;text-align:center}
.ad-encabezado h2{font-size:clamp(1.9rem,3.1vw,2.65rem);margin-bottom:14px;text-wrap:balance}
.ad-encabezado h3{font-weight:600;font-size:clamp(1.7rem,2.6vw,2.2rem);margin-bottom:14px;text-wrap:balance}
.ad-encabezado p{margin:0;font-size:1.05rem;line-height:1.65;text-wrap:pretty}
.ad-subtitulo{display:flex;align-items:center;gap:18px;margin:44px 0 22px;font-size:1.45rem;font-weight:600}
.ad-subtitulo::after{content:"";flex:1;height:1px;background:var(--lavanda-suave)}

/* Tarjetas de servicio */
.ad-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.ad-tarjeta{display:flex;flex-direction:column;min-width:0;padding:30px 25px 26px;background:var(--morado-tenue);border:1px solid var(--lavanda-clara);border-radius:18px}
.ad-icono{width:46px;height:46px;color:var(--morado);margin-bottom:20px;flex:none}
.ad-meta{margin:0 0 10px;font-family:var(--fuente-titulos);font-size:.8rem;letter-spacing:.02em;color:var(--morado-suave)}
.ad-tarjeta h3{font-size:1.35rem;font-weight:600;margin-bottom:16px;overflow-wrap:anywhere}
.ad-texto{max-height:8.4em;overflow:hidden;line-height:1.65;margin-bottom:10px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.ad-texto p{margin:0 0 12px}
.ad-texto p:last-child{margin-bottom:0}
.ad-tarjeta.expandida .ad-texto,.ad-texto-abierto{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
.ad-leer-mas{align-self:start;border:none;padding:3px 0;background:none;color:var(--morado);font-family:var(--fuente-titulos);font-size:.9rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ad-leer-mas[hidden]{display:none}

/* Tríada fenomenológica */
.ad-triada{margin-top:56px;padding-block:60px 64px;background:var(--morado-tenue);border-block:1px solid var(--lavanda-clara)}
.ad-triada .ad-rejilla{align-items:stretch}
.ad-tarjeta-triada{background:var(--blanco)}
.ad-paso{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-family:var(--fuente-titulos);font-size:.85rem;color:var(--morado)}
.ad-paso-n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--morado);color:var(--blanco);font-size:.9rem}

/* Atención psicológica */
.ad-atencion{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:30px 34px;background:var(--morado-tenue);border:1px solid var(--lavanda-clara);border-radius:18px}
.ad-atencion .ad-icono{margin:0;width:56px;height:56px}
.ad-atencion h4{margin:0 0 8px;font-size:1.25rem}
.ad-atencion p{margin:0;line-height:1.65}

/* Formulario: PLANTILLA FORMULARIO FRANJA GRIS (prefijo ad) */
.ad-formulario{margin-top:70px;padding-block:64px 70px;background:var(--gris-claro)}
.ad-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
.ad-form-intro h2{font-size:clamp(1.9rem,3vw,2.5rem);margin-bottom:18px;text-wrap:balance}
.ad-form-intro p{margin:0;color:var(--gris-oscuro);line-height:1.65;text-wrap:pretty}
.ad-form-tarjeta{padding:28px 30px;background:var(--blanco);border-radius:var(--radio-suave);box-shadow:var(--sombra-tarjeta)}
.ad-aviso{padding:12px 16px;border-radius:10px;font-size:.92rem;margin-bottom:20px}
.ad-aviso-exito{background:#eaf6ec;color:#1f6b30}
.ad-aviso-error{background:#fdeceb;color:#a3281c}
.ad-form{display:flex;flex-direction:column;gap:16px}
.ad-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ad-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--fuente-titulos);font-size:.85rem;color:var(--texto);font-weight:500}
.ad-opcional{color:var(--gris-oscuro);font-weight:400}
.ad-form input[type=text],.ad-form input[type=email],.ad-form input[type=tel],.ad-form input[type=number],.ad-form select,.ad-form textarea{width:100%;font-family:var(--fuente-cuerpo);font-size:.95rem;color:var(--texto);background:var(--blanco);border:1px solid var(--gris);border-radius:6px;padding:10px 12px;font-weight:400}
.ad-form textarea{resize:vertical}
.ad-form input:focus,.ad-form select:focus,.ad-form textarea:focus{outline:2px solid var(--lavanda);outline-offset:1px}
.ad-form-pie{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ad-form .ad-checkbox{flex:1;flex-direction:row;align-items:flex-start;gap:10px;font-family:var(--fuente-cuerpo);font-weight:400;color:var(--texto);font-size:.85rem;line-height:1.5}
.ad-form .ad-checkbox input{margin-top:3px;flex:none}
.ad-checkbox a{text-decoration:underline;text-underline-offset:3px}
.ad-form-pie .btn{flex:none}
.ad-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Responsive .ad- */
@media (max-width:1100px){
  .ad-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad-atencion{grid-template-columns:auto minmax(0,1fr)}
  .ad-atencion .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:900px){
  .ad-hero-interior{grid-template-columns:1fr;gap:22px;min-height:0;padding:36px 24px}
  .ad-hero-texto{padding-block:16px}
  .ad-hero-logo{width:min(390px,88%);margin-bottom:18px}
  .ad-hero h1{max-width:650px;font-size:clamp(1.9rem,6.4vw,2.7rem)}
  .ad-hero-imagen{height:260px;max-width:600px}
  .ad-hero-foto{border-radius:40% 15% 10% 25%/35% 20% 12% 25%}
  .ad-hero-curva{left:-5%;width:110%}
  .ad-landing{padding-block:36px 34px}
  .ad-landing-caja{padding:40px 28px 44px;text-align:left}
  .ad-pilares{grid-template-columns:1fr;padding-bottom:40px}
  .ad-pilar-panel{height:220px}
  .ad-pilar-texto h2{font-size:1.6rem}
  .ad-abierto{padding-block:44px}
  .ad-abierto-grid{grid-template-columns:1fr;gap:30px}
  .ad-abierto-logo{max-width:520px}
  .ad-servicios{padding-top:50px}
  .ad-encabezado{text-align:left}
  .ad-triada{margin-top:40px;padding-block:44px 48px}
  .ad-rejilla{grid-template-columns:1fr}
  .ad-formulario{margin-top:50px;padding-block:50px 56px}
  .ad-form-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .ad-fila{grid-template-columns:1fr}
  .ad-form-tarjeta{padding:24px 20px}
  .ad-form-pie{flex-direction:column;align-items:flex-start}
  .ad-atencion{grid-template-columns:1fr;padding:26px 22px}
}
@media (max-width:420px){
  .ad-hero-imagen{height:220px}
  .ad-pilar-panel{height:190px}
  .ad-pilar-texto{padding:22px}
  .ad-tarjeta{padding:26px 23px}
}