/* ============================================================
   MenteSana: hoja de estilos
   Paleta: azules calmados + acento ámbar (solo CTAs)
   ============================================================ */

:root {
  /* Paleta tomada del logo: ámbar dorado, azul claro y azul marino */
  --bg: #F5F8FB;
  --surface: #FFFFFF;
  --surface-2: #EAF1F7;
  --ink: #24384C;
  --muted: #546B82;
  --line: #D8E2EC;
  --primary: #3D5A80;
  --primary-deep: #2B4160;
  --primary-light: #7FA8CC;
  --primary-soft: #DEEAF4;
  --accent: #FEB529;
  --accent-hover: #EDA412;
  --on-image: #F5F9FC;
  --overlay: 36, 56, 76;          /* rgb de --ink para overlays */
  --shadow: 0 10px 30px rgba(36, 56, 76, 0.10);
  --radius: 18px;
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-deep); }
img { max-width: 100%; display: block; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.eyebrow.light { color: #A9C9E6; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.btn-lg { padding: 15px 28px; font-size: 16px; }
/* Texto blanco por decisión de diseño. Sobre este ámbar da 1.77:1, por debajo
   del 4.5:1 que pide WCAG AA para texto normal: el blanco solo pasaría llevando
   el fondo a un marrón dorado, que no es el color de marca. Si algún día hay que
   cumplir AA, la vía es color: var(--ink), que da 6.79:1 sin tocar el fondo. */
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(36, 56, 76, 0.15); }
.btn-accent:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 4px 12px rgba(36, 56, 76, 0.20); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); color: #fff; }
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--on-image);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.18); color: var(--on-image); }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.header .nav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}
/* ---------- Marcas ----------
   Cada logo viene en dos versiones que solo cambian de color: una para fondo
   oscuro y otra para fondo claro. La cabecera es transparente sobre la imagen y
   se vuelve blanca al hacer scroll, así que lleva las dos y enseña la que toca.
   Somnia va junto a Mente Sana, separada por un filete: es parte del sitio pero
   con identidad propia, y su logo lleva directo a su página. */
.brands {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: auto;
}
.brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
.brand-img {
  display: block;
  height: 42px;
  width: auto;
  flex-shrink: 0;
}
/* A 42 px la palabra SOMNIA se queda en 9 px: a 48 ya se lee */
.brand-somnia {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.brand-somnia .brand-img { height: 48px; }
.header .brand-on-light { display: none; }
.header.scrolled .brand-on-dark,
.header.menu-open .brand-on-dark { display: none; }
.header.scrolled .brand-on-light,
.header.menu-open .brand-on-light { display: block; }
.header.scrolled .brand-somnia,
.header.menu-open .brand-somnia { border-left-color: var(--line); }

/* En escritorio el logo ya es el enlace a Somnia; el texto queda para el menú móvil */
.nav-menu .nav-somnia { display: none; }

.footer .brand { margin-bottom: 16px; }
.footer .brand-img { height: 47px; }

@media (max-width: 520px) {
  .brand-img { height: 34px; }
  .brand-somnia .brand-img { height: 38px; }
  .brands { gap: 12px; }
  .brand-somnia { padding-left: 12px; }
  .footer .brand-img { height: 42px; }
}
@media (max-width: 380px) {
  .header .nav { gap: 14px; }
  .brand-img { height: 30px; }
  .brand-somnia .brand-img { height: 33px; }
  .brands { gap: 10px; }
  .brand-somnia { padding-left: 10px; }
}
@media (max-width: 340px) {
  .header .nav { gap: 10px; }
  .brand-img { height: 27px; }
  .brand-somnia .brand-img { height: 30px; }
  .brands { gap: 8px; }
  .brand-somnia { padding-left: 8px; }
}
.nav-menu { display: flex; align-items: center; gap: 24px; }
.nav-menu a:not(.nav-cta) {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s ease;
}
.nav-menu a:not(.nav-cta):hover { color: #fff; }
.nav-cta { padding: 10px 20px; }

/* Header con fondo sólido al hacer scroll */
.header.scrolled {
  background: var(--surface);
  box-shadow: 0 2px 18px rgba(36, 56, 76, 0.10);
}
.header.scrolled .nav-menu a:not(.nav-cta) { color: var(--muted); }
.header.scrolled .nav-menu a:not(.nav-cta):hover { color: var(--ink); }

/* Hamburguesa */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--on-image);
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}
.header.scrolled .nav-toggle span, .header.menu-open .nav-toggle span { background: var(--ink); }
.header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Entre 1001 y 1120 px el menú completo solo entra apretando los espacios */
@media (max-width: 1120px) {
  .header .nav { gap: 20px; }
  .nav-menu { gap: 18px; }
  .brands { gap: 14px; }
  .brand-somnia { padding-left: 14px; }
}

/* Menú desplegable. Con los dos logos en la cabecera, el menú completo necesita
   unos 1005 px —en equipo.html, con «Equipo profesional» en negrita—; por debajo,
   los enlaces se parten en dos líneas. El corte va en 1060 para dejar margen si
   no carga Google Fonts y entra la fuente del sistema, que es más ancha. */
@media (max-width: 1060px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    box-shadow: 0 14px 24px rgba(36, 56, 76, 0.14);
    padding: 8px 24px 20px;
    display: none;
  }
  .header.menu-open { background: var(--surface); }
  .header.menu-open .nav-menu { display: flex; }
  .nav-menu a:not(.nav-cta) {
    color: var(--ink) !important;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
  }
  .nav-menu .nav-somnia { display: block; }
  .nav-cta { margin-top: 14px; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  animation: hero-zoom 20s ease-in-out infinite alternate;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.active { opacity: 1; }
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(var(--overlay), 0.82) 0%, rgba(var(--overlay), 0.55) 45%, rgba(var(--overlay), 0.25) 100%),
    linear-gradient(to top, rgba(var(--overlay), 0.55), transparent 40%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 110px;
  padding-bottom: 80px;
  color: var(--on-image);
  max-width: 1120px;
  width: 100%;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 15em;
  margin: 0 0 22px;
  color: #fff;
}
.hero h1 em { font-style: italic; color: #A9C9E6; }
.hero .lede {
  font-size: 1.15rem;
  max-width: 34em;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, 0.88);
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Indicador de diapositivas del hero ----------
   Barras que se llenan durante los 6 s del intervalo, para que se vea
   que hay más imágenes y cuánto falta para el cambio. */
.hero-dots {
  display: flex;
  gap: 10px;
  margin-top: 44px;
}
.hero-dot {
  position: relative;
  width: 52px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-dot::after {           /* área táctil de 44 px sin agrandar la barra */
  content: "";
  position: absolute;
  inset: -20px -4px;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.45); }
.hero-dot span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-dot[aria-current="true"] span {
  animation: hero-fill 6s linear forwards;
}
.hero.is-paused .hero-dot[aria-current="true"] span { animation-play-state: paused; }
@keyframes hero-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-scroll {
  position: absolute;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  z-index: 1;
}
.hero-scroll span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Franja de confianza (tarjeta flotante sobre el hero) ---------- */
.trust {
  position: relative;
  z-index: 5;
  margin-top: -64px;
}
.trust-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px rgba(36, 56, 76, 0.18);
  overflow: hidden;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 30px;
  position: relative;
  transition: background 0.2s ease;
}
.trust-item:hover { background: var(--surface-2); }
.trust-item + .trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--line);
}
.trust-icon {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
}
.trust-item strong { display: block; font-size: 15.5px; line-height: 1.35; margin-bottom: 3px; }
.trust-item > div > span { font-size: 14px; color: var(--muted); line-height: 1.5; display: block; }

@media (max-width: 880px) {
  .trust { margin-top: -48px; }
  .trust-card { grid-template-columns: 1fr; }
  .trust-item { padding: 20px 24px; }
  .trust-item + .trust-item::before {
    top: 0;
    left: 24px;
    right: 24px;
    width: auto;
    height: 1px;
  }
}

/* ---------- Secciones ---------- */
.section { padding: 84px 0; }
.section.tinted { background: var(--surface-2); }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: 14px; }
.section-head p { color: var(--muted); }

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Tarjetas con foto (especialidades) */
.photo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(36, 56, 76, 0.16);
}
.photo-card-img { height: 210px; overflow: hidden; }
.photo-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.photo-card:hover .photo-card-img img { transform: scale(1.06); }
.photo-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.photo-card-body h3 { font-size: 1.35rem; }
.photo-card-body p { color: var(--muted); font-size: 15.5px; }
.chips {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* ---------- Split nosotros ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split-img { position: relative; }
.split-img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split-img-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: var(--surface);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 10px 26px rgba(36, 56, 76, 0.20);
}
.split-img-badge strong {
  display: block;
  font-family: var(--font-display);
  color: var(--primary-deep);
  font-size: 16px;
}
.split-img-badge span { font-size: 13.5px; color: var(--muted); }
.split-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.3rem); margin-bottom: 18px; }
.split-text p { color: var(--muted); margin-bottom: 16px; }
.checklist {
  list-style: none;
  padding: 0;
  margin: 6px 0 26px;
  display: grid;
  gap: 10px;
}
.checklist li {
  padding-left: 30px;
  position: relative;
  font-size: 15.5px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4160' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Pasos ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: paso;
}
.step {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
/* Icono XL que asoma por la esquina y se recorta con la card */
.step-icon {
  position: absolute;
  top: -42px;
  right: -42px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.3s ease;
}
.step-icon svg { transform: translate(-14px, 14px); }
.step:hover .step-icon { transform: scale(1.08); }

.step:nth-child(1) .step-icon { background: var(--accent); }
.step:nth-child(2) .step-icon { background: var(--primary-light); }
.step:nth-child(3) .step-icon { background: #6FB3A0; }
.step::before {
  counter-increment: paso;
  content: counter(paso);
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.15rem; margin-bottom: 8px; padding-right: 56px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* Cierre de "Cómo funciona": el llamado a agendar, centrado bajo los tres pasos */
.steps-cta { margin-top: 44px; text-align: center; }

/* ---------- Banner CTA con imagen ---------- */
.banner {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
}
.banner-bg {
  position: absolute;
  inset: 0;
  background: url("../assets/img/clinica-equipo.jpg") center center / cover no-repeat;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(var(--overlay), 0.70), rgba(var(--overlay), 0.70));
}
.banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--on-image);
}
.banner-content h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  color: #fff;
  margin-bottom: 14px;
}
.banner-content p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
  font-size: 1.08rem;
}

/* ---------- Equipo ---------- */
.person-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.person-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(36, 56, 76, 0.16);
}
.person-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.5s ease;
}
.person-card:hover .person-photo img { transform: scale(1.05); }
.person-info { padding: 24px 26px 28px; }
.person-info .role {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 6px;
}
.person-info h3 { font-size: 1.16rem; margin-bottom: 4px; line-height: 1.3; }
.person-info p:not(.role) { color: var(--muted); font-size: 14.5px; }
.note { font-size: 13.5px; color: var(--muted); margin-top: 22px; }

/* Ficha ampliada de profesional */
.person-card { display: flex; flex-direction: column; }
.person-info { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.person-title { font-size: 14px; font-weight: 600; color: var(--ink) !important; }

/* Años de experiencia: insignia sobre la esquina inferior derecha del retrato */
.person-photo { position: relative; }
.person-exp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  box-shadow: 0 2px 10px rgba(36, 56, 76, 0.18);
  white-space: nowrap;
}
.person-exp svg { color: var(--primary); }

.person-info .chips { margin: 0; }
.person-info .chips li { font-size: 12.5px; }

/* Servicios y formación en un solo desplegable: las cards
   arrancan todas a la misma altura y crecen solo si se abren. */
.person-more-body { padding-top: 14px; }
.person-more-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 18px 0 0;
}
.person-hours {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.person-hours svg { flex: none; margin-top: 3px; color: var(--primary); }
.person-more { font-size: 13.5px; margin-top: 4px; }
.person-more summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.person-more summary::-webkit-details-marker { display: none; }
.person-more summary::after {
  content: "";
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D5A80' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.person-more[open] summary::after { transform: rotate(180deg); }
.person-more ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.person-more li { margin-bottom: 5px; }

/* Sin fotografía: iniciales sobre el azul de marca */
.person-initials {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Rejilla del equipo: 3 columnas amplias */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* Encabezado de cada área: el nombre manda, el conteo lo acompaña
   como dato y la descripción baja a su propia línea. */
.team-head {
  margin: 68px 0 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.team-head:first-of-type { margin-top: 0; }
.team-head-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.team-head h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
}
.team-count {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.team-head p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 12px;
  text-wrap: pretty;   /* evita que la última línea quede con una sola palabra */
}

/* ---------- Misión y visión ----------
   Tratamiento clásico: los dos títulos con su nombre, dentro de un solo panel
   partido por una línea. Un panel y no dos tarjetas sueltas para que se lean
   como una misma declaración institucional. El filete ámbar subraya el título,
   que es un recurso tipográfico de toda la vida, no un filo decorativo. */
.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 72px;
}
.mv-item { padding: 48px 52px; }
.mv-item + .mv-item { border-left: 1px solid var(--line); }
.mv-item h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.mv-item h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin: 16px 0 22px;
}
.mv-item p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .mv { grid-template-columns: 1fr; margin-top: 48px; }
  .mv-item { padding: 36px 30px; }
  .mv-item + .mv-item { border-left: none; border-top: 1px solid var(--line); }
  .purpose-model { margin-top: 40px; padding-top: 36px; }
}
@media (max-width: 460px) {
  .mv-item { padding: 30px 22px; }
}

.purpose-tag {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

/* El modelo de atención cierra el bloque institucional. Va a la medida de la
   columna de la misión, no a todo el ancho, para que no compita con ella. */
.purpose-model {
  max-width: 1000px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.purpose-model > p:not(.purpose-tag) {
  max-width: 620px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}
.purpose-model > p:not(.purpose-tag) + p { margin-top: 14px; }
.purpose-model .purpose-tag { margin-bottom: 14px; }
.purpose-model strong { color: var(--ink); font-weight: 700; }

@media (max-width: 980px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.faq-intro {
  position: sticky;
  top: 100px;
}
.faq-intro h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  margin-bottom: 14px;
}
.faq-intro-text { color: var(--muted); margin-bottom: 28px; }
.faq-cta {
  background: var(--primary-deep);
  color: #EAF2F9;
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--shadow);
}
.faq-cta svg { color: var(--accent); }
.faq-cta strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
}
.faq-cta span { font-size: 14.5px; opacity: 0.85; line-height: 1.55; }
.faq-cta .btn { margin-top: 10px; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq details[open] {
  border-color: var(--primary-light);
  box-shadow: var(--shadow);
}
.faq summary {
  cursor: pointer;
  padding: 19px 22px;
  font-weight: 700;
  font-size: 16.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--primary-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4160' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.faq summary:hover::after { background-color: #CFE1F0; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] summary { color: var(--primary-deep); }
.faq details p {
  color: var(--muted);
  padding: 0 22px 22px;
  max-width: 62ch;
  animation: faq-open 0.3s ease;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 980px) {
  .faq-layout { grid-template-columns: 1fr; gap: 36px; }
  .faq-intro { position: static; }
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.contact-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-card .contact-row:first-child { padding-top: 0; }
.contact-row:last-of-type { border-bottom: none; }
.contact-row svg {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.contact-row strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.contact-row span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  /* correos y direcciones largas no deben estirar la tarjeta */
  overflow-wrap: anywhere;
}
.contact-row > div { min-width: 0; }
.contact-grid > * { min-width: 0; }
.contact-row a { font-weight: 600; }
.socials { display: flex; gap: 12px; margin-top: 20px; }
.socials a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--surface-2);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.socials a:hover { transform: translateY(-2px); background: var(--primary); color: #fff; }
.contact-card > .btn { margin-top: 24px; align-self: flex-start; }
.contact-card h2 { margin-bottom: 20px; }
.contact-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mapa ---------- */
.map-embed {
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--primary-deep);
  color: #B9CCDD;
  padding: 64px 0 28px;
  font-size: 14.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 44px;
  margin-bottom: 48px;
}
.footer .brand { color: #fff; margin-right: 0; }
.footer-brand p {
  margin: 16px 0 20px;
  line-height: 1.65;
  max-width: 30em;
}
.footer .socials a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.footer .socials a:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
.footer-col strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: #fff;
  margin-bottom: 16px;
}
.footer-col a,
.footer-col span {
  display: block;
  color: #B9CCDD;
  text-decoration: none;
  margin-bottom: 11px;
  line-height: 1.5;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  opacity: 0.85;
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Animaciones de aparición ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg { animation: none; transform: none; }
  .hero-scroll span { animation: none; }
  .hero-dot[aria-current="true"] span { animation: none; transform: scaleX(1); }
  .faq details p { animation: none; }
  .hero-slide { transition: none; }
  .btn, .photo-card, .person-card, .photo-card-img img, .person-photo img, .faq summary::after { transition: none; }
}

/* ---------- Hero de páginas interiores ---------- */
.page-hero {
  position: relative;
  padding: 210px 0 120px;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Las imágenes ya vienen recortadas a la proporción de la banda: no recortar más */
  /* anclado a la izquierda: en pantallas anchas el recorte se come el lado derecho,
     no el izquierdo, y el titular nunca cae sobre una cara */
  background-position: left center;
  background-repeat: no-repeat;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(var(--overlay), 0.84) 0%, rgba(var(--overlay), 0.55) 55%, rgba(var(--overlay), 0.30) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 1;
  color: var(--on-image);
}
.page-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 12px 0 18px;
}
.page-hero .lede {
  color: rgba(255, 255, 255, 0.88);
  max-width: 38em;
  font-size: 1.15rem;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.9); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span::before { content: "/"; margin-right: 8px; opacity: 0.6; }

/* Enlace activo del menú */
.nav-menu a.active:not(.nav-cta) { color: #fff; font-weight: 700; }
.header.scrolled .nav-menu a.active:not(.nav-cta),
.header.menu-open .nav-menu a.active:not(.nav-cta) { color: var(--primary); }

/* ---------- Especialidades (página interior, bloques alternados) ---------- */
.spec-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.spec-block:last-of-type { border-bottom: none; }
.spec-block.reverse .spec-img { order: 2; }
.spec-img img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.spec-text h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; }
.spec-text p { color: var(--muted); margin-bottom: 16px; }
/* Línea directa dentro de un bloque de especialidad */
.spec-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  font-size: 15px;
}
.spec-phone svg { color: var(--primary); flex: none; }
.spec-phone a { font-weight: 700; }

/* ---------- Proyección social ---------- */
.outreach {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: start;
  max-width: 860px;
}
.outreach-icon {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.outreach h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 14px; }
.outreach p { color: var(--muted); margin-bottom: 24px; }
@media (max-width: 720px) {
  .outreach { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Menú de tratamientos (tarjetas con precio) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Un color por especialidad; la card entera va tintada */
.service-card[data-cat="psiquiatria"] { --cat: #35527A; --cat-soft: #E4EEF9; }
.service-card[data-cat="psicologia"]  { --cat: #23685A; --cat-soft: #DFF1EA; }
.service-card[data-cat="neurologia"]  { --cat: #524796; --cat-soft: #EBE7FA; } /* servicio no habilitado; se conserva para reactivarlo */
.service-card[data-cat="sueno"]       { --cat: #1C5F6B; --cat-soft: #DCEFF2; }
.service-card[data-cat="nutricion"]    { --cat: #7A5B1B; --cat-soft: #F5EBD8; }

.service-card {
  background: var(--cat-soft);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform 0.25s ease;
}
.service-card:hover { transform: translateY(-4px); }
.service-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--cat);
  color: #fff;
  margin-bottom: 5px;
}
.service-card h3 { font-size: 1.12rem; }
.service-desc {
  color: var(--muted);
  font-size: 14.5px;
  flex: 1;
}
.service-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cat);
}
.service-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.service-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--cat);
}
.service-price small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
  margin-left: 6px;
}
/* Servicios que el cliente todavía no ha tarifado: se cotizan al escribir, así que
   no se inventa una cifra. Va algo menor que un precio para que no compita con los
   que sí lo tienen. */
.service-price.is-consultar,
.somnia-price.is-consultar {
  font-size: 1.12rem;
  letter-spacing: -0.005em;
}
.service-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cat);
}
.service-cta svg { transition: transform 0.2s ease; }
.service-cta:hover { color: var(--cat); }
.service-cta:hover svg { transform: translateX(3px); }

/* Nota de descuentos bajo la rejilla de precios */
.price-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  max-width: 720px;
  font-size: 14.5px;
  color: var(--muted);
}
.price-note svg { color: var(--primary); flex: none; margin-top: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 980px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Blog ---------- */
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.post-meta .tag {
  background: var(--primary-soft);
  color: var(--primary-deep);
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-card h3 a {
  color: var(--ink);
  text-decoration: none;
}
.post-card h3 a:hover { color: var(--primary); }
.read-more {
  margin-top: auto;
  font-weight: 700;
  font-size: 14.5px;
}

/* ---------- Autoría de los artículos ---------- */
.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.post-author + .read-more { margin-top: 14px; }
.author-face {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
}
.author-face.is-initials {
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.post-author div { min-width: 0; }
.post-author strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.post-author span {
  font-size: 12.5px;
  color: var(--muted);
}

/* Firma bajo el titular del artículo */
.article-byline {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
}
.article-byline .author-face { width: 46px; height: 46px; font-size: 15px; }
.article-byline strong { display: block; font-size: 15.5px; color: #fff; font-weight: 700; }
.article-byline span { font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }

/* Ficha del autor al final del artículo */
.author-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.author-box .author-face { width: 68px; height: 68px; font-size: 22px; }
.author-box .role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.author-box h2 { font-size: 1.15rem; margin-bottom: 8px; }
.author-box p { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }
.author-box a { font-weight: 700; font-size: 14.5px; }
@media (max-width: 560px) {
  .author-box { grid-template-columns: 1fr; gap: 14px; }
}

.featured-post {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 56px;
}
.featured-post-img { min-height: 340px; }
.featured-post-img img { width: 100%; height: 100%; object-fit: cover; }
.featured-post-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.featured-post-body h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.featured-post-body h2 a { color: var(--ink); text-decoration: none; }
.featured-post-body h2 a:hover { color: var(--primary); }
.featured-post-body p { color: var(--muted); }

/* ---------- Artículo ---------- */
.article {
  max-width: 780px;
}
.article-hero-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 36px;
}
.article-hero-img img { width: 100%; height: 420px; object-fit: cover; }
.article-prose h2 {
  font-size: 1.5rem;
  margin: 36px 0 14px;
}
.article-prose p {
  color: var(--muted);
  margin-bottom: 18px;
  font-size: 17px;
}
.article-prose ul { color: var(--muted); padding-left: 22px; margin: 0 0 18px; }
.article-prose ul li { margin-bottom: 8px; }
.article-callout {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 28px 0;
  color: var(--primary-deep);
  font-weight: 600;
}
/* Avisos y referencias con los que el autor cierra el texto: letra menor y
   separados por una línea, para que no se lean como parte del argumento */
.article-notes {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.article-prose .article-notes p,
.article-prose .article-notes li { font-size: 14px; line-height: 1.6; }
.article-prose .article-notes p { margin-bottom: 12px; }
.article-notes-title {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px !important;
}
.article-prose .article-notes ul { margin-bottom: 14px; }
/* Salto al artículo anterior y al siguiente, al pie de cada entrada */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}
.article-nav a {
  display: block;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.article-nav a:hover { border-color: var(--primary-light); transform: translateY(-2px); }
.article-nav a span {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
/* Cuando solo hay uno de los dos, se queda en su lado */
.article-nav-next:only-child { grid-column: 2; text-align: right; }
.article-nav-next { text-align: right; }

@media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-next, .article-nav-next:only-child { grid-column: auto; text-align: left; }
}

.article-footer {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Formulario de contacto ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 700; }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.16);
}
.form-note { font-size: 13px; color: var(--muted); }
.form-success {
  display: none;
  background: #E5F3E8;
  border: 1px solid #B9DCC2;
  color: #1E5A2E;
  border-radius: 12px;
  padding: 16px 20px;
  font-weight: 600;
}
.form-success.visible { display: block; }
.form-error {
  display: none;
  background: #FBE9E7;
  border: 1px solid #E8BDB6;
  color: #8A2A18;
  border-radius: 12px;
  padding: 16px 20px;
  font-weight: 600;
}
.form-error.visible { display: block; }
.form-error a { color: #8A2A18; text-decoration: underline; }
.field-opt { font-weight: 400; color: var(--muted); }
/* Campo trampa: fuera de la vista sin usar display:none, que algunos bots detectan */
.field-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Mientras se envía, el botón se apaga y avisa */
#formSubmit[disabled] { opacity: 0.6; pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .split, .spec-block { grid-template-columns: 1fr; gap: 36px; }
  .split-img img { height: 340px; }
  .spec-block.reverse .spec-img { order: 0; }
  .spec-img img { height: 300px; }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post-img { min-height: 240px; }
  .featured-post-body { padding: 30px; }
}
@media (max-width: 460px) {
  .contact-card { padding: 26px 22px; }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .cards-3, .steps, .trust-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { min-height: 88vh; }
  .hero-scroll { display: none; }
  .hero-dots { margin-top: 34px; }
  .hero-content { padding-top: 130px; }
  .contact-photo img { height: 280px; }
  .banner { padding: 80px 0; }
  .page-hero { padding: 160px 0 80px; }
  .form-row { grid-template-columns: 1fr; }
  .article-hero-img img { height: 260px; }
}

/* ============================================================
   SOMNIA — Centro de Medicina del Sueño
   Es parte del sitio pero tiene identidad propia: su página va en modo oscuro,
   con la paleta del logo — azul noche, celeste y dorado.

   En lugar de repintar componente a componente, dentro de .somnia-page se
   redefinen los tokens del sitio, y la cabecera, el menú móvil, las etiquetas,
   las filas de contacto y los enlaces se adaptan solos. Lo propio de Somnia
   usa las variables --s-*.
   ============================================================ */
.somnia-page {
  --bg: #0E1328;
  --surface: #172042;
  --surface-2: #121A38;
  --ink: #EEF1F8;
  --muted: #AAB6D2;            /* 9:1 sobre el fondo */
  --line: rgba(157, 178, 209, 0.18);
  --primary: #9DB2D1;
  --primary-deep: #FFFFFF;     /* en esta página solo lo usan el hover de enlaces y los iconos de contacto */
  --primary-soft: rgba(157, 178, 209, 0.12);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.35);

  --s-blue: #9DB2D1;
  --s-gold: #D8B86B;
  --s-cta: #5E6ECC;            /* índigo del logo; con texto blanco da 4.6:1 */
  --s-cta-hover: #5263C2;
  color-scheme: dark;
}

/* ---------- Cabecera ----------
   Sobre el cielo del hero es transparente, como en el resto del sitio, pero al
   hacer scroll se vuelve azul noche en lugar de blanca, y los logos se quedan
   siempre en su versión clara. */
.somnia-page .header.scrolled,
.somnia-page .header.menu-open {
  background: rgba(14, 19, 40, 0.94);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Con el menú móvil abierto, barra y desplegable del mismo azul: si no, se nota el corte */
.somnia-page .header.menu-open { background: var(--bg); }
@media (max-width: 1060px) {
  .somnia-page .nav-menu {
    background: var(--bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.4);
  }
}
.somnia-page .header.scrolled .brand-on-light,
.somnia-page .header.menu-open .brand-on-light { display: none; }
.somnia-page .header.scrolled .brand-on-dark,
.somnia-page .header.menu-open .brand-on-dark { display: block; }
.somnia-page .header.scrolled .brand-somnia,
.somnia-page .header.menu-open .brand-somnia { border-left-color: rgba(255, 255, 255, 0.22); }

/* ---------- Botón de agendar ----------
   El de esta página es propio: índigo del logo en lugar del ámbar de Mente Sana.
   Es el mismo número de WhatsApp; el mensaje que abre ya dice que es para Somnia. */
.btn-somnia {
  background: var(--s-cta);
  color: #fff;
  box-shadow: 0 6px 20px rgba(94, 110, 204, 0.32);
}
.btn-somnia:hover {
  background: var(--s-cta-hover);
  color: #fff;
  box-shadow: 0 8px 24px rgba(94, 110, 204, 0.42);
}
.btn-somnia-ghost {
  border-color: rgba(157, 178, 209, 0.5);
  color: var(--s-blue);
  background: rgba(157, 178, 209, 0.06);
}
.btn-somnia-ghost:hover { background: rgba(157, 178, 209, 0.16); color: #fff; }

/* ---------- Hero ---------- */
.somnia-hero {
  position: relative;
  overflow: hidden;
  padding: 180px 0 120px;
  text-align: center;
  background: var(--bg) url("../assets/img/somnia/cielo-escritorio.jpg") center / cover no-repeat;
}
/* En el móvil el hero es más alto que ancho: un corte vertical de la misma foto,
   porque estirar el apaisado hasta esa altura ampliaría las estrellas hasta
   emborronarlas */
@media (max-width: 720px) {
  .somnia-hero { background-image: url("../assets/img/somnia/cielo-movil.jpg"); }
}
/* La foto ya es casi negra: la capa solo la tiñe de azul noche y funde el borde
   de abajo con el fondo de la página */
.somnia-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 32, 66, 0.3) 0%, rgba(14, 19, 40, 0.5) 60%, var(--bg) 100%);
}
.somnia-hero-inner { position: relative; z-index: 1; }
.somnia-logo {
  width: min(340px, 76vw);
  height: auto;
  margin: 0 auto 34px;
}
.somnia-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  color: #fff;
  max-width: 15em;
  margin: 0 auto 20px;
}
.somnia-hero .lede {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 40em;
  margin: 0 auto 36px;
}
.somnia-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Con el prefijo de página para ganarle a .section-head p, que las dejaba en gris */
.somnia-page .somnia-eyebrow { color: var(--s-gold); }
.somnia-tinted { background: var(--surface-2); }

/* ---------- Presentación ---------- */
.somnia-intro {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px 64px;
  align-items: start;
}
.somnia-intro-lead h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); }
.somnia-intro-text p { color: var(--muted); }
.somnia-intro-text p + p { margin-top: 16px; }
.somnia-intro-text a { color: var(--s-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Iconos y tarjetas ---------- */
.somnia-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(216, 184, 107, 0.1);
  border: 1px solid rgba(216, 184, 107, 0.28);
  color: var(--s-gold);
}
.somnia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.somnia-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.somnia-card h3 { font-size: 1.12rem; }
.somnia-card p { color: var(--muted); font-size: 15px; }

/* ---------- Qué atendemos: la luna ----------
   luna.jpg es solo la luz de la luna sobre negro, con el cielo de la foto
   restado. En modo "screen" el negro desaparece y la luna se posa sobre el azul
   de la sección, sin recuadro, al tamaño y en el sitio que convenga. Va a la
   derecha del título, en el hueco que deja .section-head (máx. 640 px), y por
   encima de las tarjetas. El resplandor de abajo recuerda el horizonte de la foto. */
.somnia-luna {
  background:
    radial-gradient(ellipse 70% 65% at 90% 100%, rgba(111, 104, 170, 0.3), transparent 70%),
    var(--surface-2);
}
.somnia-luna > .container { position: relative; }
.somnia-luna > .container::before {
  content: "";
  position: absolute;
  top: -70px;
  right: 24px;
  width: 230px;
  aspect-ratio: 1;
  background:
    url("../assets/img/somnia/luna.jpg") center / contain no-repeat,
    radial-gradient(closest-side, rgba(157, 178, 209, 0.08), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ---------- Lista de servicios ---------- */
.somnia-list { display: grid; gap: 2px; }
.somnia-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.somnia-row:first-child { border-top: 1px solid var(--line); }
.somnia-row h3 { font-size: 1.12rem; margin-bottom: 6px; }
.somnia-row p { color: var(--muted); font-size: 15.5px; }
.somnia-price {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--s-gold) !important;
}
.somnia-price small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
  margin-left: 5px;
}

/* ---------- Cómo es un estudio ----------
   De fondo, una persona dormida pasada a azul noche: la luz que entra por la
   persiana hace de luz de luna. El velo es más denso a la izquierda, donde va el
   título, y deja ver algo más de la foto a la derecha. En el móvil, con los pasos
   apilados, la sección es alta y estrecha y lleva un corte vertical de la foto. */
.somnia-night {
  padding: 96px 0;
  background:
    linear-gradient(90deg, rgba(14, 19, 40, 0.8) 0%, rgba(14, 19, 40, 0.55) 55%, rgba(14, 19, 40, 0.4) 100%),
    url("../assets/img/somnia/estudio-noche.jpg") center 55% / cover no-repeat,
    #131B3A;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .somnia-night {
    background:
      linear-gradient(180deg, rgba(14, 19, 40, 0.82) 0%, rgba(14, 19, 40, 0.66) 100%),
      url("../assets/img/somnia/estudio-noche-movil.jpg") center / cover no-repeat,
      #131B3A;
  }
}
.somnia-night .eyebrow { color: var(--s-gold); }
/* Sobre la foto el gris azulado se queda corto: texto más claro y un halo oscuro
   difuso que lo separa de las franjas de luz sin verse como sombra */
.somnia-night .section-head,
.somnia-steps { text-shadow: 0 0 16px rgba(10, 14, 32, 0.95), 0 0 4px rgba(10, 14, 32, 0.7); }
.somnia-night .somnia-steps p { color: #CDD5E6; }
.somnia-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.somnia-steps h3 { font-size: 1.1rem; margin: 14px 0 8px; }
.somnia-steps p { color: var(--muted); font-size: 15px; }
.somnia-step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--s-gold);
  color: var(--s-gold);
  font-family: var(--font-display);
  font-weight: 700;
}

/* ---------- Ficha del especialista ---------- */
.somnia-person {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  max-width: 880px;
}
/* height:auto es imprescindible: sin él manda el atributo height="1000" del
   HTML y aspect-ratio no llega a aplicarse */
.somnia-person img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
}
.somnia-person h3 { font-size: 1.3rem; margin: 4px 0 6px; }
.somnia-person-title { font-weight: 600; color: var(--s-blue); margin-bottom: 12px; }
.somnia-person p { color: var(--muted); font-size: 15.5px; }
.somnia-person .chips { margin-top: 14px; }
.somnia-person-more { margin-top: 16px; }
.somnia-person-more a { color: var(--s-blue); font-weight: 700; }

/* ---------- Contacto ---------- */
.somnia-contact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px 48px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 36px;
}
.somnia-contact-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; }
.somnia-contact .contact-row svg { color: var(--s-gold); background: rgba(216, 184, 107, 0.1); }

/* ---------- Pie ---------- */
.somnia-page .footer { background: #0A0E1F; border-top: 1px solid var(--line); }

@media (max-width: 940px) {
  .somnia-intro { grid-template-columns: 1fr; gap: 18px; }
  .somnia-person { grid-template-columns: 200px 1fr; gap: 26px; }
  .somnia-contact { grid-template-columns: 1fr; }
  .somnia-contact .btn { justify-self: start; }
  /* Sin sitio a la derecha del título: la luna sube a un hueco propio encima */
  .somnia-luna { padding-top: 112px; }
  .somnia-luna > .container::before { width: 104px; top: -96px; }
}
@media (max-width: 720px) {
  .somnia-hero { padding: 140px 0 80px; }
  .somnia-grid, .somnia-steps, .somnia-contact-rows { grid-template-columns: 1fr; }
  .somnia-night { padding: 64px 0; }
  .somnia-person { grid-template-columns: 1fr; }
  .somnia-person img { max-width: 220px; }
  .somnia-contact { padding: 28px 24px; }
  .somnia-row { grid-template-columns: 1fr; gap: 14px; }
}