/* =====================================================================
   Marva Psicología · Páginas de especialidades
   Se carga DESPUÉS de main.css, paginas.css y menu-servicios.css.
   No modifica esos archivos: todo lo nuevo está aquí.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) CABECERA (la zona de arriba de cada página)
   Foto propia en cada especialidad, mismo formato y mismo alto en todas.
   Escritorio: texto a la izquierda y foto a la derecha, que se funde con el fondo.
   Móvil y tablet: el texto arriba y la foto completa debajo.
   --------------------------------------------------------------------- */
.hero.hero-sub {
  --hero-h: clamp(630px, 47vw, 690px);   /* mismo alto en las 10 páginas: cabe la más larga */
  --hx: 70%;                       /* punto de enfoque horizontal de la foto (se ajusta por página) */
  --hero-strip: clamp(200px, 50vw, 330px);
  background-image: none !important;      /* quita la foto antigua (su ruta estaba rota) y el velo */
  background-color: #ecf5f3 !important;
  min-height: var(--hero-h) !important;
}
/* Menú de arriba: siempre con fondo claro (igual que cuando se baja la página),
   para que se lea también sobre las fotos oscuras */
nav {
  background: rgba(210, 237, 230, .95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(86, 167, 164, .25);
  padding: 1rem 3rem;
}
nav .nav-links a, nav .nav-logo span { color: #2d3436; }
nav .nav-links a:hover { color: #56a7a4; }
@media (max-width: 768px) { nav { padding: 1rem 1.5rem; } }

.hero.hero-sub .hero-canvas { display: none; }   /* sin manchas de color encima de la foto */
.hero.hero-sub .hero-content.hero-v2 { position: relative; z-index: 2; }

.hero.hero-sub::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hx) 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%);
  pointer-events: none;
}

@media (max-width: 1099px) {
  .hero.hero-sub { min-height: 0 !important; padding-bottom: var(--hero-strip) !important; }
  .hero.hero-sub .hero-content.hero-v2 { padding-bottom: 1.5rem !important; }
  .hero.hero-sub::after {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: var(--hero-strip);
    background-position: var(--hx) 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 55%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 55%);
  }
}

/* Foto de cada cabecera (todas del mismo tamaño: 1800 × 792 px) */
.hero--duelo-animal::after               { background-image: url("../assets/duelo-animal-cabecera.jpg"); }
.hero--crisis-vitales-transiciones::after{ background-image: url("../assets/crisis-vitales-cabecera.jpg"); }
.hero--depresion::after                  { background-image: url("../assets/depresion-cabecera.jpg"); }
.hero--sobrepensamiento::after           { background-image: url("../assets/sobrepensamiento-cabecera.jpg"); }
.hero--ansiedad::after                   { background-image: url("../assets/ansiedad-cabecera.jpg"); }
.hero--fobias::after                     { background-image: url("../assets/fobias-cabecera-2.jpg"); }
.hero--gestion-emocional::after          { background-image: url("../assets/gestion-emocional-cabecera.jpg"); }
.hero--imagen-corporal::after            { background-image: url("../assets/imagen-corporal-cabecera.jpg"); }
.hero--conflictos-sociales::after        { background-image: url("../assets/conflictos-sociales-cabecera.jpg"); }
.hero--terapia-asistida-animales::after  { background-image: url("../assets/terapia-asistida-animales-cabecera.jpg"); }

/* ---------------------------------------------------------------------
   2) BANNERS DE FOTO (la banda con la frase grande)
   Todos miden exactamente lo mismo (los define .sp-band-dog en paginas.css:
   alto mínimo y texto sobre degradado). Aquí solo se pone la foto de cada
   página y hacia qué lado va el texto.
   --------------------------------------------------------------------- */
.sp-band.sp-band-dog {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sp-band--duelo-animal               { background-image: url("../assets/duelo-animal-banner.jpg"); }
.sp-band--crisis-vitales-transiciones{ background-image: url("../assets/crisis-vitales-banner.jpg"); }
.sp-band--depresion                  { background-image: url("../assets/depresion-banner.jpg"); }
.sp-band--sobrepensamiento           { background-image: url("../assets/sobrepensamiento-banner.jpg"); }
.sp-band--ansiedad                   { background-image: url("../assets/ansiedad-banner.jpg"); }
.sp-band--fobias                     { background-image: url("../assets/fobias-banner-2.jpg"); }
.sp-band--gestion-emocional          { background-image: url("../assets/gestion-emocional-banner.jpg"); }
.sp-band--imagen-corporal            { background-image: url("../assets/imagen-corporal-banner-2.jpg"); }
.sp-band--conflictos-sociales        { background-image: url("../assets/conflictos-sociales-banner-2.jpg"); }
.sp-band--terapia-asistida-animales  { background-image: url("../assets/terapia-asistida-animales-banner.jpg"); }

/* La frase grande: sus saltos de línea los marca el texto, no el ancho */
.sp-band .sp-band-quote { max-width: 21em; }
.sp-band .sp-band-sub { max-width: 30em; }

/* Texto a la derecha cuando lo importante de la foto queda a la izquierda */
.sp-band.sp-band-dog.sp-band--right::before {
  background: linear-gradient(270deg, rgba(110, 76, 108, .92) 0%, rgba(110, 80, 115, .78) 26%, rgba(70, 80, 105, .42) 40%, rgba(26, 74, 72, 0) 58%);
}
.sp-band--right .sp-band-quote,
.sp-band--right .sp-band-sub { margin-left: auto; text-align: right !important; }

/* Encuadre en móvil: qué parte de la foto se ve (lo importante, bien centrado) */
.sp-band--fobias   { --bpm: 30%; }
.sp-band--ansiedad { --bpm: 66%; }
.sp-band--conflictos-sociales { --bpm: 12%; }
.sp-band--imagen-corporal { --bpm: 50%; }

@media (max-width: 760px) {
  .sp-band .sp-band-quote br { display: none; }   /* en pantalla estrecha la frase fluye sola */
  .sp-band.sp-band-dog { background-position: var(--bpm, 60%) 30%; }
  .sp-band.sp-band-dog.sp-band--right::before {
    background: linear-gradient(180deg, rgba(26, 74, 72, 0) 38%, rgba(70, 55, 85, .88) 100%);
  }
  .sp-band--right .sp-band-quote,
  .sp-band--right .sp-band-sub { margin-left: 0; text-align: left !important; }
}

/* ---------------------------------------------------------------------
   3) COLOCACIÓN DEL TEXTO
   Antes los párrafos quedaban pegados a la izquierda con medio ancho vacío.
   Ahora cada bloque va en dos columnas: título a la izquierda, texto a la
   derecha; las tarjetas, frases de cierre y avisos ocupan todo el ancho.
   --------------------------------------------------------------------- */
@media (min-width: 981px) {
  .sp-sec .sp-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .sp-sec .sp-split > * { grid-column: 1 / -1; }
  .sp-sec .sp-split > .sp-head { grid-column: 1; grid-row: 1; }
  .sp-sec .sp-split > .sp-body { grid-column: 2; grid-row: 1; padding-top: 2.4rem; }

  .sp-split .sp-head .section-title {
    white-space: normal;
    font-size: clamp(2rem, 3.1vw, 2.8rem);
    line-height: 1.12;
  }
  .sp-split .sp-head .section-subtitle { max-width: 34ch; }
  .sp-split .sp-body .sp-text { max-width: none; }
  .sp-split .sp-body .sp-text:last-child { margin-bottom: 0; }

  /* rejillas dentro de la columna derecha */
  .sp-split .sp-body .sp-voices { margin: 0 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .sp-split .sp-body .sp-facts  { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-split .sp-body .sp-cta-row { margin-top: 0; }
}

@media (max-width: 980px) {
  .sp-sec .sp-split > .sp-body { padding-top: .4rem; }
  .sp-split .sp-body .sp-text { max-width: none; }
}

/* Frases y avisos que van debajo de las tarjetas: centrados, a lo ancho */
.sp-sec .sp-cards + .sp-text {
  max-width: 78ch;
  margin: 1.4rem auto 0;
  text-align: center;
}
/* El aviso del 024 / 112: banner pequeño a lo ancho */
.sp-sec .sp-note {
  max-width: none;
  margin: 1.4rem 0 0;
  padding: .85rem 1.2rem;
  text-align: center;
  line-height: 1.6;
  color: #5c3a5a;
  background: rgba(174, 141, 191, .14);
  border: 1px dashed rgba(125, 90, 122, .45);
}

/* Las tarjetas se reparten por igual y ocupan siempre todo el ancho */
.sp-sec .sp-cards { gap: 1.1rem; }
.sp-sec .sp-card { height: 100%; }

/* «Otras situaciones…» y etiquetas */
.sp-sec .sp-chips { margin-top: 1rem; }

/* «Te entiendo» y «Lo práctico»: título arriba y las cuatro tarjetas en una sola línea */
@media (min-width: 981px) {
  .sp-sec .sp-voices, .sp-sec .sp-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 1.1rem;
  }
}