/* =====================================================================
   IN STAGE — index.css (estilos propios del HOME)
   Requiere base.css. Mobile-first.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO editorial (composición 7/5, arco de proscenio, bailarina real)
--------------------------------------------------------------------- */
.hero{
  position: relative;
  background: var(--blanco);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem));
  overflow: hidden;
}
.hero__grid{
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: end;
}
@media (min-width: 900px){
  .hero__grid{
    grid-template-columns: 7fr 5fr;
    min-height: calc(92vh - var(--header-h));
  }
}

.hero__texto{ align-self: center; padding-bottom: clamp(1rem, 4vh, 3rem); }
.hero__parrafo{
  margin-top: var(--sp-3);
  color: var(--texto-suave);
  max-width: 46ch;
}
.hero__botones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero__scroll{
  margin-top: clamp(2rem, 5vh, 3.5rem);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* — Redes sociales accesibles desde el hero — */
.hero__redes{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-4);
}
.hero__redes-txt{
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-right: 4px;
}
.hero__redes a{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gris-fondo);
  color: var(--morado);
  transition: transform var(--dur-media, .22s) var(--ease-suave, ease),
              background var(--dur-media, .22s) var(--ease-suave, ease),
              color var(--dur-media, .22s) var(--ease-suave, ease);
}
.hero__redes a svg{ width: 18px; height: 18px; fill: currentColor; }
.hero__redes a:hover{ background: var(--morado); color: #fff; transform: translateY(-2px); }
.hero__redes a:active{ transform: translateY(-1px) scale(.95); }
/* Palabra en cursiva del H1: rosa tinta para pasar AA sobre blanco
   (el trazo decorativo bajo la palabra sigue en --rosa) */
.hero__italica{ color: var(--rosa-tinta); font-weight: 400; }
/* El trazo se dibuja cuando el H1 ya ha entrado */
.hero .trazo.is-visible{ transition-delay: 800ms; }

/* — Figura derecha: bailarina PNG + arco de proscenio + caption — */
.hero__figura{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 380px;
}
@media (min-width: 900px){ .hero__figura{ min-height: 0; height: 100%; } }

/* Fondo suave y difuminado detrás de la bailarina (sustituye al arco de proscenio) */
.hero__figura::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(96%, 480px);
  height: 82%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 68%, var(--gris-fondo) 0%, rgba(0,0,0,0) 72%);
  z-index: 0;
  pointer-events: none;
}

.hero__bailarina-wrap{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero__bailarina{
  height: clamp(340px, 55vh, 620px);
  width: auto;
  object-fit: contain;
  /* Se funde con el blanco por la base, sin borde duro */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  animation: heroBailarina var(--t-hero) var(--ease) 200ms both;
}
@keyframes heroBailarina{
  from{ opacity: 0; transform: translateY(20px) scale(1.05); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.hero__figura .caption-flotante{ left: 0; bottom: 16%; }
@media (min-width: 1200px){ .hero__figura .caption-flotante{ left: -24px; } }

/* ---------------------------------------------------------------------
   HERO · CARRUSEL DE PORTADA (3 diapositivas a pantalla completa)
   Cada slide: capa morada + foto (assets/img/portada-N.jpg). Si la foto
   falta, se ve solo el degradado morado (queda bien igualmente).
--------------------------------------------------------------------- */
/* En el inicio, cabecera blanca sólida para que la nav se lea sobre el
   carrusel oscuro (en el resto de páginas sigue siendo transparente arriba). */
.pagina-inicio .header{
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.hero-carrusel{
  position: relative;
  min-height: min(90vh, 760px);
  overflow: hidden;
  background: var(--morado);
  isolation: isolate;
}
.hero-carrusel__pista{ position: absolute; inset: 0; }
.hero-slide{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms var(--ease-suave, ease), visibility 800ms;
  background-image:
    linear-gradient(100deg, rgba(24,18,34,.92) 0%, rgba(46,36,64,.62) 52%, rgba(66,51,89,.4) 100%),
    var(--foto, none);
  background-size: cover;
  background-position: center;
}
.hero-slide.is-activa{ opacity: 1; visibility: visible; }

/* En pantallas anchas el hero es mucho mas apaisado que la foto (2,5 frente a
   1,78), asi que el navegador recorta arriba y abajo. Cuando lo que importa
   esta en la parte alta de la foto (una mano levantada, por ejemplo), esta
   clase ancla la imagen arriba y el recorte se lo lleva todo del suelo. */
.hero-slide--arriba{ background-position: center top; }
.hero-slide__contenido{
  padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 2.5rem));
  padding-bottom: clamp(3.5rem, 9vh, 5.5rem);
  color: #fff;
  max-width: 44rem;
}
.eyebrow--claro{ color: var(--rosa); }
.hero-slide h1,
.hero-slide__titular{
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.2vw, 4.3rem);
  line-height: 1.05;
  font-weight: 350;
  letter-spacing: -0.015em;
  margin-top: var(--sp-2);
  color: #fff;
}
.hero-slide h1 em,
.hero-slide__titular em{ color: var(--rosa); font-style: italic; }
.hero-slide__texto{
  margin-top: var(--sp-3);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,.85);
  max-width: 36ch;
}
/* Frase corta extra (info + SEO), más discreta */
.hero-slide__info{
  margin-top: var(--sp-2);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,.68);
  max-width: 44ch;
}
.hero-slide__botones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
/* Entrada suave del contenido de la diapositiva activa */
.hero-slide.is-activa .hero-slide__contenido > *{
  animation: heroSlideIn 700ms var(--ease-salida, ease) both;
}
.hero-slide.is-activa .hero-slide__contenido > *:nth-child(2){ animation-delay: 90ms; }
.hero-slide.is-activa .hero-slide__contenido > *:nth-child(3){ animation-delay: 170ms; }
.hero-slide.is-activa .hero-slide__contenido > *:nth-child(4){ animation-delay: 250ms; }
.hero-slide.is-activa .hero-slide__contenido > *:nth-child(5){ animation-delay: 330ms; }
@keyframes heroSlideIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } }

/* Flechas anterior / siguiente */
.hero-carrusel__flecha{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-media, .22s) var(--ease-suave, ease),
              transform var(--dur-media, .22s) var(--ease-suave, ease);
}
.hero-carrusel__flecha svg{ width: 22px; height: 22px; }
.hero-carrusel__flecha:hover{ background: rgba(255,255,255,.22); }
.hero-carrusel__flecha:active{ transform: translateY(-50%) scale(.94); }
.hero-carrusel__flecha--ant{ left: clamp(10px, 2vw, 28px); }
.hero-carrusel__flecha--sig{ right: clamp(10px, 2vw, 28px); }

/* Puntos */
.hero-carrusel__puntos{
  position: absolute;
  left: 50%; bottom: clamp(16px, 3vh, 28px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-carrusel__puntos button{
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background var(--dur-media, .22s) var(--ease-suave, ease),
              width var(--dur-media, .22s) var(--ease-suave, ease);
}
.hero-carrusel__puntos button.is-activo{ background: #fff; width: 26px; border-radius: 6px; }
/* El punto se ve de 10px, pero la zona que responde al dedo es de 40px:
   con 10x10 es casi imposible acertar en un móvil. */
.hero-carrusel__puntos button::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
}
.hero-carrusel__puntos button{ position: relative; }

/* Redes sociales sobre la portada */
.hero-carrusel__redes{
  position: absolute;
  left: clamp(1rem, 4vw, 3rem); bottom: clamp(16px, 3vh, 28px);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-carrusel__redes a{
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: background var(--dur-media, .22s) var(--ease-suave, ease),
              transform var(--dur-media, .22s) var(--ease-suave, ease);
}
.hero-carrusel__redes a svg{ width: 17px; height: 17px; fill: currentColor; }
.hero-carrusel__redes a:hover{ background: var(--rosa); transform: translateY(-2px); }

.franja-contadores{ background: var(--blanco); padding-block: clamp(2.75rem, 6vw, 4.5rem); }

/* Las redes se quitan del carrusel siempre que las flechas están abajo:
   la flecha izquierda cae justo encima de los iconos. No se pierde nada,
   porque las redes están también en el pie de todas las páginas. */
@media (max-width: 1399px){
  .hero-carrusel__redes{ display: none; }
}

/* FLECHAS ABAJO, flanqueando los puntos como una barra de control.
   Hasta 1400 px el texto del slide empieza donde acaba el margen del
   contenedor, y ese margen es más estrecho que la flecha: a los lados se
   comían el principio de cada línea. Solo vuelven a los lados en pantallas
   grandes, donde sí queda hueco entre el borde y el texto. */
@media (max-width: 1399px){
  .hero-carrusel__flecha{
    width: 42px; height: 42px;
    top: auto;
    bottom: clamp(14px, 3.5vh, 22px);
    transform: none;
  }
  .hero-carrusel__flecha:active{ transform: scale(.94); }
  .hero-carrusel__flecha--ant{ left: clamp(12px, 4vw, 20px); }
  .hero-carrusel__flecha--sig{ right: clamp(12px, 4vw, 20px); }
  /* Puntos centrados entre las dos flechas, a su misma altura */
  .hero-carrusel__puntos{ bottom: clamp(24px, 4vh, 32px); }
  /* Aire abajo en el contenido para que los botones no se acerquen a la
     barra de flechas y puntos. */
  .hero-slide__contenido{ padding-bottom: clamp(5rem, 13vh, 7rem); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition: opacity 1ms linear; }
  .hero-slide.is-activa .hero-slide__contenido > *{ animation: none; }
}

/* — Franja de contadores bajo el hero — */
.hero__contadores{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 900px){ .hero__contadores{ grid-template-columns: repeat(4, 1fr); } }
.hero__contadores li{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__contadores li span:last-child{
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   01 — DISCIPLINAS (grid asimétrico: la primera tarjeta es doble)
--------------------------------------------------------------------- */
.grid-disciplinas{ display: grid; gap: var(--gap-grid); }
@media (min-width: 640px){ .grid-disciplinas{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){
  .grid-disciplinas{ grid-template-columns: repeat(3, 1fr); }
  .grid-disciplinas .tarjeta--doble{ grid-column: span 2; }
  /* La tarjeta destacada de ballet, menos apaisada: con 8/3 solo se veia la
     mitad de la foto y la niña del centro salia cortada. Con 16/9 cabe entera. */
  .grid-disciplinas .tarjeta--doble .tarjeta-disciplina__media{ aspect-ratio: 3 / 2;   /* casi toda la foto: la niña entra entera */ }
}

/* ---------------------------------------------------------------------
   CLASES EN MOVIL: CASILLAS QUE SE ABREN
   Eran 9 fichas enteras, una debajo de otra (7 pantallas). En movil son
   casillas de dos en dos: foto, nombre, edad y precio. Al tocar, main.js
   abre la ficha a pantalla completa (.clase-panel) con todo el texto.
   Todo va con html.js: sin JavaScript se ven las fichas enteras.
--------------------------------------------------------------------- */
.tarjeta-disciplina__abrir{ display: none; }
@media (max-width: 719px){
  html.js .grid-disciplinas{
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.7rem, 2.5vw, var(--gap-grid));
  }
  html.js .grid-disciplinas > .tarjeta--doble,
  html.js .grid-disciplinas > .tarjeta-cta{ grid-column: span 2; }
  html.js .grid-disciplinas .tarjeta--doble .tarjeta-disciplina__media{ aspect-ratio: 3 / 2;   /* casi toda la foto: la niña entra entera */ }
  html.js .grid-disciplinas .tarjeta-disciplina{ position: relative; }
  html.js .grid-disciplinas .tarjeta-disciplina__media .chip{
    left: 8px;
    top: 8px;
    font-size: .62rem;
    padding: 3px 8px;
  }
  html.js .grid-disciplinas .tarjeta-disciplina__cuerpo{ padding: 11px 14px 14px; gap: 3px; }
  html.js .grid-disciplinas .tarjeta-disciplina h3{ font-size: 1.02rem; line-height: 1.2; }
  html.js .grid-disciplinas .tarjeta-disciplina__edad{ display: block; margin: 3px 0 0; }
  html.js .grid-disciplinas .tarjeta-disciplina__precio{ font-size: .98rem; margin-top: auto; }
  /* en la casilla solo lo justo; el resto sale al abrirla */
  html.js .grid-disciplinas .tarjeta-disciplina__cuerpo > p:not(.tarjeta-disciplina__precio),
  html.js .grid-disciplinas .tarjeta-disciplina__cuerpo > ul,
  html.js .grid-disciplinas .tarjeta-disciplina__cuerpo > .enlace-flecha{ display: none; }

  /* toda la casilla es el boton; el '+' de la foto avisa de que se abre */
  html.js .tarjeta-disciplina__abrir{
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.js .tarjeta-disciplina__abrir::after{
    content: "+";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blanco);
    box-shadow: 0 2px 8px rgba(26, 20, 36, .18);
    color: var(--morado);
    font: 600 1.15rem/1 var(--font-sans);
  }
  html.js .tarjeta-disciplina__abrir:focus-visible{ outline: 3px solid var(--rosa); outline-offset: 3px; }
}

/* La ficha abierta, a pantalla completa (la crea main.js en el <body>) */
.clase-panel{
  position: fixed;
  inset: 0;
  z-index: 140;
  background: var(--blanco);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: clasePanel 220ms var(--ease);
}
.clase-panel[hidden]{ display: none; }
@keyframes clasePanel{ from{ opacity: 0; } }
.clase-panel__cerrar{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 141;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(66, 51, 89, .14);
  border-radius: 50%;
  background: var(--blanco);
  cursor: pointer;
}
.clase-panel__cerrar svg{ width: 20px; height: 20px; fill: none; stroke: var(--morado); stroke-width: 2; }
.clase-panel__media{
  position: relative;
  height: clamp(210px, 38vh, 320px);
  overflow: hidden;
  background: var(--rosa-palo);
}
.clase-panel__media img{ width: 100%; height: 100%; object-fit: cover; }
.clase-panel__media .chip{ position: absolute; left: var(--pad-lateral); bottom: 12px; z-index: 1; }
.clase-panel__cuerpo{
  padding: var(--sp-3) var(--pad-lateral) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.clase-panel__cuerpo h3{ font-size: 1.7rem; line-height: 1.15; }
.clase-panel__cuerpo h3 .tarjeta-disciplina__edad{ display: block; margin: 6px 0 0; }
.clase-panel__cuerpo p{ font-size: 1rem; line-height: 1.65; color: var(--texto-suave); }
.clase-panel__cuerpo p.tarjeta-disciplina__precio{ font-size: 1.5rem; line-height: 1.2; color: var(--morado); }
.clase-panel__ir{ align-self: flex-start; margin-top: 6px; }

/* La foto crece desde la casilla hasta la banda del panel (es la misma
   foto: main.js les pone el mismo nombre de transicion al vuelo). */
::view-transition-group(clase-foto){ animation-duration: 380ms; }
::view-transition-old(clase-foto),
::view-transition-new(clase-foto){
  animation-duration: 380ms;
  height: 100%;
  object-fit: cover;
}

/* Tarjeta-CTA que cierra el grid ("¿No sabes cuál elegir?") */
.tarjeta-cta{
  background: var(--morado);
  border-radius: var(--radio-m);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-2);
  box-shadow: var(--sombra);
  transition: transform var(--t-micro) ease-out, box-shadow var(--t-micro) ease-out;
}
.tarjeta-cta:hover{ transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.tarjeta-cta h3{ color: var(--blanco); }
.tarjeta-cta p{ color: var(--lavanda-texto); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   02 — LA ESCUELA (split: pilares + bailarina contemporánea en arco)
--------------------------------------------------------------------- */
.pilares{
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.pilar{ display: flex; gap: var(--sp-2); align-items: flex-start; }
.pilar__num{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--rosa-tinta);
  flex: none;
  min-width: 40px;
}
.pilar h3{ font-size: 1.2rem; margin-bottom: 4px; }
.pilar p{ color: var(--texto-suave); font-size: var(--fs-small); }
.escuela__boton{ margin-top: var(--sp-4); }

.escuela__figura{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 380px;
}
.escuela__arco{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(88%, 400px);
  height: 84%;
  border-radius: 999px 999px 0 0;
  background: var(--gris-fondo);
}
.escuela__foto{
  position: relative;
  z-index: 1;
  height: clamp(340px, 42vw, 540px);
  width: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.escuela__figura .caption-flotante{ right: 0; bottom: 10%; }

/* ---------------------------------------------------------------------
   03 — HORARIOS (sección morada con mini-vista semanal)
--------------------------------------------------------------------- */
.horario-mini{
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px){ .horario-mini{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px){ .horario-mini{ grid-template-columns: repeat(6, 1fr); } }

.horario-dia{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio-s);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.horario-dia__nombre{
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: 2px;
}
/* Bloques más compactos que en horarios.html */
.horario-mini .bloque-clase{ font-size: 0.78rem; padding: 8px 10px 8px 13px; line-height: 1.4; }
.horario-mini .bloque-clase strong{ font-size: 0.8rem; }

.horario-leyenda{ margin-top: var(--sp-4); justify-content: center; }
.horario-pie{
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.horario-pie__nota{ font-size: var(--fs-small); max-width: 52ch; }
.horario-pie__botones{ display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* ---------------------------------------------------------------------
   04 — SERVICIOS
   Cinco tarjetas: bodas va en doble (2+1 arriba, 1+1+1 abajo).
   En movil son casillas de dos en dos, como las fichas de los profes:
   foto, nombre y precio; toda la casilla lleva a su pagina, que es donde
   esta el detalle. Antes eran seis fichas enteras, una debajo de otra.
--------------------------------------------------------------------- */
.grid-servicios{ display: grid; gap: var(--gap-grid); grid-template-columns: repeat(2, 1fr); }
.grid-servicios .tarjeta--doble{ grid-column: span 2; }
@media (min-width: 900px){
  .grid-servicios{ grid-template-columns: repeat(3, 1fr); }
  .grid-servicios .tarjeta--doble .tarjeta-disciplina__media{ aspect-ratio: 8 / 3; }
}
@media (min-width: 720px) and (max-width: 899px){
  .grid-servicios .tarjeta--doble .tarjeta-disciplina__media{ aspect-ratio: 16 / 7; }
}

@media (max-width: 719px){
  .grid-servicios{ gap: clamp(.7rem, 2.5vw, var(--gap-grid)); }
  .grid-servicios .tarjeta-disciplina{ position: relative; }
  /* fuera la etiqueta de la foto y la descripcion: en una casilla no caben,
     y estan completas en la pagina de cada servicio (y siguen en el HTML) */
  .grid-servicios .tarjeta-disciplina__media .chip,
  .grid-servicios .tarjeta-disciplina__cuerpo > p:not(.tarjeta-disciplina__precio){ display: none; }
  .grid-servicios .tarjeta--doble .tarjeta-disciplina__media{ aspect-ratio: 16 / 9; }
  .grid-servicios .tarjeta-disciplina__cuerpo{ padding: 12px 14px 14px; gap: 4px; }
  .grid-servicios .tarjeta-disciplina h3{ font-size: 1.02rem; line-height: 1.2; }
  .grid-servicios .tarjeta-disciplina__precio{ font-size: 1rem; line-height: 1.25; }

  /* Toda la casilla es el enlace. Del enlace solo se ve la flecha, en un
     circulo abajo a la derecha; su texto sigue ahi para los lectores. */
  .grid-servicios .enlace-flecha{
    position: static;
    align-self: flex-end;
    margin-top: auto;
    padding: 0;
    font-size: 0;
  }
  .grid-servicios .enlace-flecha::after{
    inset: 0;
    width: auto;
    height: auto;
    bottom: 0;
    background: none;
    transform: none;
    border-radius: inherit;
    z-index: 2;
  }
  .grid-servicios .enlace-flecha .flecha{
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rosa-palo);
    font-size: .95rem;
    line-height: 1;
  }
  .grid-servicios .tarjeta-disciplina:has(.enlace-flecha:focus-visible){ outline: 3px solid var(--rosa); outline-offset: 3px; }
}

/* ---------------------------------------------------------------------
   05 — OPINIONES (tarjetas de testimonio)
--------------------------------------------------------------------- */
.tarjeta-testimonio{
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tarjeta-testimonio blockquote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--negro);
}
.tarjeta-testimonio footer{
  margin-top: auto;
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
.opiniones__nota{
  text-align: center;
  margin-top: var(--sp-4);
  color: var(--texto-suave);
  font-size: var(--fs-small);
  margin-inline: auto;
}

/* ---------------------------------------------------------------------
   EQUIPO (teaser: foto de grupo + lista de profes)
--------------------------------------------------------------------- */
.equipo__figura{ position: relative; }
.equipo__figura img{ width: 100%; height: auto; object-fit: cover; }
.equipo__figura .caption-flotante{ left: -12px; bottom: -18px; }
@media (max-width: 640px){ .equipo__figura .caption-flotante{ left: 8px; bottom: -14px; } }

.equipo-lista{ display: flex; flex-direction: column; gap: var(--sp-3); }
.equipo-item{ display: flex; gap: var(--sp-2); align-items: center; }
.equipo-item .avatar{ width: 56px; height: 56px; }
.equipo-item__nombre{ font-weight: 700; display: block; line-height: 1.3; }
.equipo-item__rol{ font-size: var(--fs-small); color: var(--texto-suave); }
.equipo__boton{ margin-top: var(--sp-4); }

/* ---------------------------------------------------------------------
   CTA FINAL (foto real full-width + overlay morado)
--------------------------------------------------------------------- */
.cta-final{
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 14vw, 10rem);
  text-align: center;
}
.cta-final__fondo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Si la foto falla, el placeholder ocupa el mismo sitio */
.cta-final .img-pendiente.cta-final__fondo{ position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.cta-final::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(66, 51, 89, .82);
}
.cta-final__inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.cta-final h2{ color: var(--blanco); }
.cta-final p{ color: var(--lavanda-texto); margin-inline: auto; }
.cta-final__botones{ display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* ---------- Horario del home como imagen (sección morada) ---------- */
.home-horario{ margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.home-horario a{
  display: block;
  border-radius: var(--radio-m);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transition: transform var(--dur-media, .22s) var(--ease-suave, ease);
}
.home-horario a:hover{ transform: translateY(-3px); }
.home-horario img{ width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------
   ENCUADRE DE LA FOTO DESTACADA DE BALLET
   La niña del centro esta ligeramente por debajo de la mitad de la foto:
   se baja el encuadre para que entre completa, de la cabeza a los pies.
--------------------------------------------------------------------- */
.grid-disciplinas .tarjeta--doble .tarjeta-disciplina__media img{ object-position: 50% 60%; }