/* =====================================================================
   IN STAGE — base.css
   Design system compartido: tokens, reset, tipografía, componentes,
   header/footer, animaciones. Mobile-first. (Ver DESIGN_SPEC)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) TOKENS
--------------------------------------------------------------------- */
:root{
  /* — Protagonistas — */
  --blanco:        #FFFFFF;
  --negro:         #000000;
  --tinta:         #1A1A1A;   /* cuerpo de texto sobre claro */
  --texto-suave:   #55505E;   /* texto secundario, captions */
  --morado:        #423359;   /* el "oscuro" de la web */
  --morado-hover:  #34284A;
  --morado-800:    #2E2440;   /* franja legal del footer */
  --morado-arco:   #4E3D6A;   /* arco de fondo sobre morado */

  /* — Neutros de familia — */
  --gris-fondo:    #F7F6F9;
  --linea:         #E7E3EE;   /* hairlines y bordes */
  --lavanda-texto: #D9D3E3;   /* texto secundario sobre morado */

  /* — Detalle puntual (nunca protagonistas) — */
  --rosa:          #E8A1A7;   /* decorativo; texto solo sobre morado */
  --rosa-tinta:    #A9505A;   /* eyebrows/labels pequeños sobre claro (AA: 5,3:1 blanco / 4,9:1 gris) */
  --rosa-palo:     #FDF2F4;   /* fondo de chips */
  --melocoton:     #FED2C3;   /* chip destacado ocasional */

  /* — Tipografía — */
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;
  --fs-h1:       clamp(2.75rem, 7.5vw, 6rem);
  /* El minimo baja de 2rem a 1.75rem: a 32 px, en la columna de un movil,
     entraban dos palabras por linea y los titulares salian a tiras. */
  --fs-h2:       clamp(1.75rem, 4.5vw, 3.5rem);
  --fs-h3:       clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.9375rem;
  --fs-eyebrow:  0.8125rem;
  --fs-precio:   clamp(2rem, 3.5vw, 2.75rem);
  --fs-contador: clamp(2.25rem, 4vw, 3.25rem);

  /* — Layout — */
  --container: 1200px;
  --pad-lateral: 24px;
  --seccion-y: clamp(4.5rem, 10vw, 7.5rem);
  --gap-grid:  clamp(1.25rem, 2.5vw, 2rem);
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px;
  --header-h: 78px;
  --header-h-compacto: 62px;

  /* — Radios — */
  --radio-s: 12px;
  --radio-m: 20px;
  --radio-arco: 999px 999px 24px 24px;
  --radio-pill: 999px;

  /* — Sombras (siempre tintadas de morado) — */
  --sombra: 0 10px 30px rgba(66,51,89,.08);
  --sombra-hover: 0 20px 40px rgba(66,51,89,.10);
  --sombra-caption: 0 12px 32px rgba(66,51,89,.12);

  /* — Movimiento — */
  /* Curvas: entradas con ease-out natural; interacciones con una curva más ágil */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);        /* (existente) entradas / reveals */
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1); /* alias semántico de la de entrada */
  --ease-suave: cubic-bezier(0.33, 0, 0.2, 1);  /* hover / micro-interacciones ágiles */
  --ease-press: cubic-bezier(0.34, 0, 0.6, 1);  /* feedback de pulsado, muy directo */
  /* Duraciones micro (140–240ms) */
  --dur-rapida: 150ms;  /* press / feedback táctil */
  --dur-media: 220ms;   /* hover de botones, tarjetas, iconos */
  --t-micro: 220ms;     /* (existente) equivalente a --dur-media */
  --t-reveal: 600ms;
  --t-titular: 700ms;
  --t-hero: 900ms;
}
@media (min-width: 768px){ :root{ --pad-lateral: 40px; } }
@media (min-width: 1200px){ :root{ --pad-lateral: 48px; } }

/* ---------------------------------------------------------------------
   2) RESET LIGERO + BASE
--------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin: 0; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: hidden;
  animation: paginaFade 300ms var(--ease) both; /* fade-in al cargar */
}
@keyframes paginaFade{ from{ opacity: 0; } to{ opacity: 1; } }

img, svg, video{ display: block; max-width: 100%; }
img{ height: auto; }
ul[class], ol[class]{ list-style: none; padding: 0; }
a{ color: inherit; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; }
::selection{ background: var(--morado); color: var(--blanco); }

:focus-visible{ outline: 2px solid var(--morado); outline-offset: 2px; }
.seccion--morada :focus-visible,
.footer :focus-visible,
.menu-movil :focus-visible{ outline-color: rgba(232,161,167,.7); }

/* Enlace "Saltar al contenido": oculto fuera de pantalla hasta recibir foco.
   El !important en left es necesario para vencer al estilo inline de los HTML
   (position:absolute;left:-9999px); puede retirarse cuando se limpien. */
.salto-contenido{
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 200;
  background: var(--morado);
  color: var(--blanco);
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-hover);
}
.salto-contenido:focus{
  left: 16px !important;
  outline-offset: 2px;
}

/* Anclas: que no queden bajo el header fijo */
[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------------------------------------------------------------------
   3) TIPOGRAFÍA
--------------------------------------------------------------------- */
h1, h2, h3{ font-family: var(--font-display); color: var(--negro); }
h1{ font-size: var(--fs-h1); font-weight: 350; line-height: 1.02; letter-spacing: -0.02em; }
h2{ font-size: var(--fs-h2); font-weight: 350; line-height: 1.08; letter-spacing: -0.01em; }
h3{ font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
p{ max-width: 60ch; }
.texto-suave{ color: var(--texto-suave); }
.texto-centrado{ text-align: center; }
.texto-centrado p{ margin-inline: auto; }
em, .italica{ font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Eyebrow: mayúsculas + letter-spacing, rosa-tinta sobre claro */
.eyebrow{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rosa-tinta);
  margin-bottom: var(--sp-2);
}
.seccion--morada .eyebrow{ color: var(--rosa); }

/* Numeral editorial de sección: "01" con trazo */
.numeral{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--morado);
  user-select: none;
}
.seccion--morada .numeral{ -webkit-text-stroke-color: rgba(255,255,255,.5); }

/* Cabecera de sección: numeral + eyebrow + titular */
.seccion__cabecera{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.seccion__cabecera .numeral{ margin-top: .3em; }
/* En movil el numero al lado dejaba el titular en 246 px de los 327 que hay,
   y con la letra grande salia una palabra por linea. Se sube encima. */
@media (max-width: 719px){
  .seccion__cabecera{
    display: block;
  }
  .seccion__cabecera .numeral{
    display: block;
    margin: 0 0 4px;
    font-size: 2.25rem;
    line-height: 1;
  }
  .seccion__cabecera--centrada .numeral{ margin-inline: auto; }
}
.seccion__cabecera--centrada{ flex-direction: column; align-items: center; text-align: center; }

/* Subrayado gestual "trazo de bailarina" (SVG con <use>, se dibuja al entrar) */
.palabra-trazo{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  /* Sin esto, el articulo de delante ('El', 'la'...) se quedaba solo al final
     de la linea anterior, porque la palabra subrayada no cabe y salta entera. */
  margin-left: 0;
}
/* La palabra subrayada y el signo que la sigue viajan juntos: si no, al
   partir la linea el punto se queda solo abajo. */
.sin-partir{ white-space: nowrap; }
.palabra-trazo .trazo{
  position: absolute;
  left: -2%; bottom: -0.22em;
  width: 104%; height: 0.28em;
}
.trazo{
  fill: none;
  stroke: var(--rosa);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  overflow: visible;
}
.trazo.is-visible{
  transition: stroke-dashoffset var(--t-reveal) var(--ease) 150ms;
  stroke-dashoffset: 0;
}

/* Titulares oscuros en secciones moradas */
.seccion--morada h2, .seccion--morada h3{ color: var(--blanco); }
.seccion--morada p{ color: var(--lavanda-texto); }

/* Lista con puntitos rosa */
/* Rejilla de dos columnas con bloques de texto (título + párrafo).
   La usan horarios.html ("Qué trabajamos en cada clase") y
   ballet-adultos.html ("Niveles y horarios"). */
.clases-detalle{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 760px){ .clases-detalle{ grid-template-columns: 1fr 1fr; } }
.clases-detalle h3{ margin-bottom: 6px; }
.clases-detalle p{ color: var(--texto-suave); max-width: 60ch; }

/* ---------------------------------------------------------------------
   VÍDEO DE YOUTUBE (portada + play; el iframe lo mete main.js al pulsar)
--------------------------------------------------------------------- */
.video-marco{
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-m);
  overflow: hidden;
  background: var(--morado);
  box-shadow: var(--sombra);
}
.video-marco iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* Variante VERTICAL (vídeos grabados con el móvil, formato reel 9:16).
   Metido en un marco 16:9 saldría con dos franjas negras enormes a los lados,
   así que se le da su propia proporción y se limita el ancho: en un portátil
   un vídeo vertical a pantalla completa sería absurdo de alto. */
.video-marco--vertical{
  aspect-ratio: 9 / 16;
  max-width: 380px;
  margin-inline: auto;
}
/* Cuando va al lado de un texto (rejilla de dos columnas) no se centra:
   se queda pegado a su columna. */
.split .video-marco--vertical{ margin-inline: 0; }
.video-marco__lanzar{
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-marco__lanzar img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease), filter 400ms ease;
}
.video-marco__lanzar:hover img{ transform: scale(1.03); filter: brightness(.9); }
/* Botón de play: círculo blanco con un triángulo morado */
.video-marco__play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 9vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
  transition: transform var(--dur-media, .22s) var(--ease-suave, ease);
}
.video-marco__play::after{
  content: "";
  position: absolute;
  left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--morado);
}
.video-marco__lanzar:hover .video-marco__play{ transform: translate(-50%, -50%) scale(1.08); }
.video-marco__lanzar:focus-visible{ outline: 3px solid var(--rosa); outline-offset: 3px; }

/* Vídeo vertical suelto dentro de una sección, con su pie de foto */
.video-suelto{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 300px;
}
.video-suelto .video-marco{ margin-top: 0; }
.video-suelto__pie{
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

/* Variante con el arco de la marca (bloque "La escuela" del inicio) */
.video-marco--arco{ border-radius: var(--radio-arco); }
/* La figura del inicio es un flex: sin ancho explicito, un elemento que solo
   tiene aspect-ratio se queda en 0px. Por eso se le da ancho y flex: none. */
.escuela__figura .video-marco{
  position: relative;
  z-index: 1;
  flex: none;
  width: min(100%, 300px);
  max-width: 300px;
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   Acordeón de clases: lista plegable con miniatura + foto grande al abrir.
   Se usa en horarios.html ("Qué trabajamos en cada clase") y sirve para
   cualquier listado largo que no queremos soltar de golpe.
--------------------------------------------------------------------- */
.acordeon-clases{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 880px;
  border-top: 1px solid var(--linea);
}
.clase-item{ border-bottom: 1px solid var(--linea); }
.clase-item summary{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.clase-item summary::-webkit-details-marker{ display: none; }
.clase-item summary:focus-visible{ outline: 2px solid var(--morado); outline-offset: 4px; border-radius: 6px; }

/* Miniatura de la izquierda (decorativa: el alt real va en la foto grande) */
.clase-item__mini{
  flex: none;
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rosa-palo);
}
.clase-item__mini img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}
.clase-item summary:hover .clase-item__mini img{ transform: scale(1.08); }

.clase-item__titulo{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}
.clase-item__nombre{
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  color: var(--tinta);
  transition: color var(--dur-media, .22s) var(--ease-suave, ease);
}
.clase-item summary:hover .clase-item__nombre{ color: var(--morado); }
.clase-item__edad{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rosa-tinta);
}

/* Chevron que gira al abrir */
.clase-item summary::after{
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-right: 2px solid var(--morado);
  border-bottom: 2px solid var(--morado);
  transform: rotate(45deg);
  transition: transform var(--dur-media, .22s) var(--ease-suave, ease);
}
.clase-item[open] summary::after{ transform: rotate(-135deg); }

.clase-item__cuerpo{
  display: grid;
  gap: var(--sp-3);
  padding: 0 0 var(--sp-3) calc(52px + var(--sp-2));
}
@media (min-width: 720px){
  .clase-item__cuerpo{ grid-template-columns: 260px 1fr; align-items: start; }
}
.clase-item__foto{
  border-radius: var(--radio-m);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rosa-palo);
}
.clase-item__foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.clase-item__cuerpo p{ color: var(--texto-suave); max-width: 60ch; }

/* Cuando la clase tiene vídeo, ocupa el sitio de la foto. Al ser vertical se
   le da una columna más estrecha: con los 260px de la foto se iría a 460px de
   alto y el acordeón dejaría de parecer un acordeón. */
.clase-item__cuerpo--video{ gap: var(--sp-3); }
@media (min-width: 720px){
  .clase-item__cuerpo--video{ grid-template-columns: 200px 1fr; }
}
.clase-item__video .video-marco{ margin-top: 0; }
@media (max-width: 719px){
  /* En móvil se apila: el vídeo a tamaño cómodo, sin comerse la pantalla */
  .clase-item__video .video-marco{ max-width: 240px; }
}

/* ---- El acordeón en móvil ----
   En pantalla estrecha el nombre y la edad NO caben en la misma línea, y como
   .clase-item__titulo es flex con wrap, unas filas quedaban en una línea (80px)
   y otras en tres (110px): la lista se veía irregular. En móvil se apilan
   siempre —nombre arriba, edad debajo— para que todas las filas midan igual. */
@media (max-width: 719px){
  .clase-item summary{ gap: 14px; padding: 12px 0; }
  .clase-item__titulo{
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .clase-item__nombre{ font-size: 1.02rem; line-height: 1.25; }
  .clase-item__edad{
    font-size: .75rem;   /* 12px: por debajo cuesta leerlo en el móvil */
    letter-spacing: .03em;
    color: var(--texto-suave);
  }
  .clase-item__mini{ width: 48px; height: 48px; border-radius: 10px; }
  .clase-item summary::after{ margin-right: 2px; }
}

@media (max-width: 560px){
  .clase-item__cuerpo{ padding-left: 0; }
}

.lista-puntitos li{
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--sp-1);
}
.lista-puntitos li::before{
  content: "";
  position: absolute;
  left: 4px; top: 0.62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rosa);
}

/* Estrellas de reseña */
.estrellas{ display: inline-flex; gap: 3px; color: var(--rosa); }
.estrellas svg{ width: 17px; height: 17px; fill: currentColor; }

/* ---------------------------------------------------------------------
   4) LAYOUT: contenedor, secciones, grids
--------------------------------------------------------------------- */
.contenedor{
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad-lateral));
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}
.seccion{ padding-block: var(--seccion-y); position: relative; }
.seccion--gris{ background: var(--gris-fondo); }
.seccion--morada{ background: var(--morado); color: var(--lavanda-texto); }
.seccion--hairlines{ border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

.grid{ display: grid; gap: var(--gap-grid); }
@media (min-width: 640px){
  .grid--2{ grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
  .grid--4{ grid-template-columns: repeat(4, 1fr); }
}

/* Split partido (texto + foto) */
.split{ display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Los hijos de una rejilla se ensanchan hasta caber su contenido salvo que
   se les diga lo contrario. Sin esto, un carrusel dentro de un .split se
   sale de la pantalla en vez de deslizarse. */
.split > *{ min-width: 0; }
@media (min-width: 900px){
  .split{ grid-template-columns: 1fr 1fr; }
  .split--53{ grid-template-columns: 5fr 4fr; }
}

/* Arco de proscenio como forma de fondo decorativa */
.arco-fondo{
  position: absolute;
  border-radius: 999px 999px 0 0;
  background: var(--gris-fondo);
  z-index: 0;
  pointer-events: none;
}
.seccion--morada .arco-fondo{ background: var(--morado-arco); }

/* Marcos de foto */
.marco-arco{ border-radius: var(--radio-arco); overflow: hidden; }
.marco-circulo{ border-radius: 50%; overflow: hidden; aspect-ratio: 1; }

/* ---------------------------------------------------------------------
   5) BOTONES
--------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radio-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--dur-media) var(--ease-suave),
              color var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              outline-offset var(--dur-rapida) var(--ease-suave);
}
.btn .flecha{ transition: transform var(--dur-media) var(--ease-suave); }
.btn:hover .flecha{ transform: translateX(3px); }
/* Anillo de foco por teclado con leve separación animada */
.btn:focus-visible{ outline: 2px solid var(--morado); outline-offset: 3px; }
.btn--invertido:focus-visible, .btn--outline-claro:focus-visible{ outline-color: var(--rosa); }

/* Primario: morado sólido */
.btn--primario{ background: var(--morado); color: var(--blanco); }
.btn--primario:hover{ background: var(--morado-hover); transform: translateY(-2px); box-shadow: var(--sombra); }

/* Secundario: outline negro */
.btn--secundario{ border: 1.5px solid var(--negro); color: var(--negro); }
.btn--secundario:hover{ background: var(--morado); border-color: var(--morado); color: var(--blanco); transform: translateY(-2px); }

/* Sobre fondo morado: primario invertido (blanco) y outline claro */
.btn--invertido{ background: var(--blanco); color: var(--morado); }
.btn--invertido:hover{ background: var(--rosa-palo); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.btn--outline-claro{ border: 1.5px solid var(--blanco); color: var(--blanco); }
.btn--outline-claro:hover{ background: var(--blanco); color: var(--morado); transform: translateY(-2px); }

/* Estado pulsado (después de las variantes para ganar al translateY del hover):
   se hunde con scale y feedback muy rápido */
.btn:active{ transform: translateY(0) scale(.97); transition-duration: var(--dur-rapida); }
.btn:active .flecha{ transform: translateX(1px); }

/* Terciario: enlace con flecha y subrayado animado */
.enlace-flecha{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  color: var(--morado);
  position: relative;
}
.enlace-flecha::after{
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: var(--morado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease);
}
.enlace-flecha:hover::after{ transform: scaleX(1); }
/* En móvil el enlace mide 26px de alto y es el que lleva a cada disciplina:
   se le da altura de dedo (44px) sin mover el subrayado de su sitio. */
@media (max-width: 719px){
  .enlace-flecha{ padding-block: 9px; }
  .enlace-flecha::after{ bottom: 6px; }
}
.enlace-flecha .flecha{ transition: transform var(--dur-media) var(--ease-suave); }
.enlace-flecha:hover .flecha{ transform: translateX(3px); }
.enlace-flecha:active .flecha{ transform: translateX(1px); transition-duration: var(--dur-rapida); }
.seccion--morada .enlace-flecha{ color: var(--blanco); }
.seccion--morada .enlace-flecha::after{ background: var(--rosa); }

/* Subrayado animado genérico para enlaces de texto */
.enlace-anim{ text-decoration: none; position: relative; }
.enlace-anim::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease);
}
.enlace-anim:hover::after, .enlace-anim.activo::after{ transform: scaleX(1); }

/* ---------------------------------------------------------------------
   6) CHIPS / BADGES
--------------------------------------------------------------------- */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radio-pill);
  background: var(--rosa-palo);
  color: var(--morado);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.chip--destacado{ background: var(--melocoton); } /* máx. 1–2 usos por web */
.chip--fuerte{ background: var(--morado); color: var(--blanco); } /* el día clave */

/* ---------------------------------------------------------------------
   7) TARJETAS
--------------------------------------------------------------------- */
.tarjeta{
  background: var(--blanco);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra);
  transition: transform var(--dur-media) var(--ease-suave), box-shadow var(--dur-media) var(--ease-suave);
}
.tarjeta:hover{ transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.tarjeta:active{ transform: translateY(-3px) scale(.995); transition-duration: var(--dur-rapida); }
.tarjeta--quieta:active{ transform: none; }
.tarjeta--borde{ box-shadow: none; border: 1px solid var(--linea); }
.tarjeta--gris{ background: var(--gris-fondo); box-shadow: none; }
.tarjeta--quieta:hover{ transform: none; box-shadow: var(--sombra); }
.tarjeta--quieta.tarjeta--borde:hover{ box-shadow: none; }

/* Tarjeta de disciplina: foto 4:3 + chip flotante + cuerpo */
.tarjeta-disciplina{ display: flex; flex-direction: column; overflow: hidden; }
.tarjeta-disciplina__media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.tarjeta-disciplina__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.tarjeta-disciplina:hover .tarjeta-disciplina__media img{ transform: scale(1.04); }
.tarjeta-disciplina__media .chip{ position: absolute; left: 14px; top: 14px; z-index: 1; }
.tarjeta-disciplina__cuerpo{
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tarjeta-disciplina__cuerpo p{ color: var(--texto-suave); font-size: var(--fs-small); }
.tarjeta-disciplina__precio{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--morado);
}
.tarjeta-disciplina__precio small{ font-family: var(--font-sans); font-weight: 500; font-size: .8em; color: var(--texto-suave); }
.tarjeta-disciplina .enlace-flecha{ margin-top: auto; font-size: var(--fs-small); }

/* Franja de edad junto al título de la tarjeta (ej. «Ballet · 5 a 16 años») */
.tarjeta-disciplina__edad{
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rosa-tinta);
  vertical-align: middle;
}
/* Lista de niveles dentro de una tarjeta de disciplina */
ul.tarjeta-disciplina__niveles{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
ul.tarjeta-disciplina__niveles li{
  position: relative;
  padding-left: 16px;
}
ul.tarjeta-disciplina__niveles li::before{
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rosa);
}
ul.tarjeta-disciplina__niveles strong{ color: var(--tinta); font-weight: 600; }

/* Tarjeta de precio */
.tarjeta-precio{ padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.tarjeta-precio__cifra{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-precio);
  color: var(--negro);
  line-height: 1;
}
.tarjeta-precio__cifra small{ font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--texto-suave); }
.tarjeta-precio .btn{ margin-top: auto; align-self: flex-start; }

/* Tarjeta-caption flotante (sobre esquina de foto) */
.caption-flotante{
  position: absolute;
  background: var(--blanco);
  border-radius: var(--radio-s);
  box-shadow: var(--sombra-caption);
  padding: 16px 20px;
  max-width: 260px;
  z-index: 2;
}
.caption-flotante .eyebrow{ margin-bottom: 4px; font-size: 0.75rem; } /* 12px: menos no se lee en el móvil */
.caption-flotante p{ font-size: var(--fs-small); font-weight: 600; color: var(--tinta); line-height: 1.4; }

/* Avatar circular */
.avatar{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--rosa-palo);
  color: var(--morado);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  flex: none;
  overflow: hidden;
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   8) BLOQUES DE HORARIO + LEYENDA (colores por disciplina)
   Fórmula: fondo pastel + barra izquierda 3px + texto tinta morada
--------------------------------------------------------------------- */
.bloque-clase{
  --disc-fondo: var(--rosa-palo);
  --disc-tono: var(--rosa);
  position: relative;
  background: var(--disc-fondo);
  border-radius: 10px;
  padding: 10px 12px 10px 16px;
  color: var(--morado);
  font-size: 0.875rem;
  line-height: 1.45;
  transition: transform var(--t-micro) ease-out;
}
.bloque-clase::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
  background: var(--disc-tono);
  transition: width var(--t-micro) ease-out;
}
.bloque-clase:hover{ transform: translateY(-2px); }
.bloque-clase:hover::before{ width: 5px; }
.bloque-clase strong{ display: block; font-weight: 700; }
.bloque-clase .hora{ color: #5A4A73; font-weight: 500; }

/* Tonos por disciplina (aplicar junto a .bloque-clase o .leyenda__item) */
.disc-ballet{        --disc-fondo: #FDF2F4; --disc-tono: #E8A1A7; }
.disc-predanza{      --disc-fondo: #FFE9E0; --disc-tono: #FED2C3; }
.disc-urbano{        --disc-fondo: #E9E4F4; --disc-tono: #8C7BB0; }
.disc-contemporaneo{ --disc-fondo: #F2E6F0; --disc-tono: #B08CA8; }
.disc-jazz{          --disc-fondo: #F6E7EE; --disc-tono: #C98BA4; }
.disc-fitness{       --disc-fondo: #ECEAF2; --disc-tono: #6F6390; }

/* Leyenda de disciplinas */
.leyenda{ display: flex; flex-wrap: wrap; gap: 10px 22px; }
.leyenda__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--tinta);
}
.seccion--morada .leyenda__item{ color: var(--blanco); }
.leyenda__item::before{
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--disc-tono, var(--rosa));
  flex: none;
}

/* ---------------------------------------------------------------------
   9) TABLAS (precios, etc.)
--------------------------------------------------------------------- */
.tabla-envoltura{ overflow-x: auto; }
.tabla{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.tabla th, .tabla td{
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--linea);
}
.tabla th{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
}
.tabla tbody tr:nth-child(even){ background: var(--gris-fondo); }
.tabla td strong, .tabla .cifra{ font-weight: 700; }

/* ---------------------------------------------------------------------
   10) FORMULARIOS (contacto)
--------------------------------------------------------------------- */
.campo{ display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-3); }
.campo label{
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
}
.campo input, .campo textarea, .campo select{
  background: var(--gris-fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: 14px 16px;
  color: var(--tinta);
  transition: border-color var(--t-micro) ease-out, box-shadow var(--t-micro) ease-out;
}
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline: none;
  border-color: var(--morado);
  box-shadow: 0 0 0 2px rgba(66,51,89,.15);
}
.campo textarea{ min-height: 140px; resize: vertical; }

/* Item de contacto con icono circular */
.item-contacto{ display: flex; gap: var(--sp-2); align-items: flex-start; }
.item-contacto__icono{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gris-fondo);
  color: var(--morado);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.item-contacto__icono svg{ width: 22px; height: 22px; }
.item-contacto a{ color: var(--morado); }

/* ---------------------------------------------------------------------
   11) HEADER FIJO + MENÚ MÓVIL
--------------------------------------------------------------------- */
.header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background 300ms ease-out, box-shadow 300ms ease-out,
              backdrop-filter 300ms ease-out, border-color 300ms ease-out;
  border-bottom: 1px solid transparent;
}
.header__inner{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--header-h);
  transition: height 300ms ease-out;
}
.header--scrolled{
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--linea);
}
.header--scrolled .header__inner{ height: var(--header-h-compacto); }
/* En móvil el header es estrecho y el texto le pasa justo por debajo: se sube
   la opacidad para que nunca se transparente sobre el contenido. */
@media (max-width: 719px){
  .header--scrolled{ background: rgba(255,255,255,.97); }
}
/* Si el navegador no sabe desenfocar el fondo (bastantes Android antiguos),
   el velo se queda en fondo sólido en lugar de dejar ver el texto de debajo. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .header--scrolled{ background: var(--blanco); }
}

.header__logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.header__logo img{ width: 44px; height: auto; }
.header__marca{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--negro);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav{ display: none; }
.nav__lista{ display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.nav__enlace{
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--tinta);
  transition: color var(--t-micro) ease-out;
}
.nav__enlace:hover, .nav__enlace.activo{ color: var(--morado); }
.header__cta{ display: none; padding: 11px 22px; }

@media (min-width: 1024px){
  .nav{ display: block; }
  .header__cta{ display: inline-flex; }
}

/* Acceso directo a WhatsApp en la cabecera (número 679 794 436).
   Estilo discreto para que no compita con el botón de clase de prueba. */
.header__wa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  color: var(--morado);
  transition: background var(--dur-media) var(--ease-suave),
              color var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
}
.header__wa svg{ width: 20px; height: 20px; fill: currentColor; }
.header__wa:hover{ background: var(--morado); color: var(--blanco); transform: translateY(-2px); }
.header__wa:active{ transform: translateY(0) scale(.96); transition-duration: var(--dur-rapida); }

/* Botón hamburguesa */
.menu-btn{
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 130;
  position: relative;
}
.menu-btn span{
  width: 24px; height: 2px;
  background: var(--negro);
  border-radius: 2px;
  transition: transform 300ms var(--ease), opacity 200ms ease-out, background 200ms ease-out;
}
.menu-abierto .menu-btn span{ background: var(--blanco); }
.menu-abierto .menu-btn span:first-child{ transform: translateY(4px) rotate(45deg); }
.menu-abierto .menu-btn span:last-child{ transform: translateY(-4px) rotate(-45deg); }
/* En escritorio no hay hamburguesa: el menú va desplegado en la barra.
   OJO: esta regla tiene que ir DESPUÉS de .menu-btn{display:inline-flex},
   si no, la de arriba gana por orden de cascada y reaparece el icono. */
@media (min-width: 1024px){
  .menu-btn{ display: none; }
}

/* Overlay móvil pantalla completa */
.menu-movil{
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--morado); /* respaldo si el navegador no soporta el difuminado */
  display: flex;
  flex-direction: column;
  /* Centrado solo si cabe. Con el contenido alto se pegaba arriba y las
     primeras entradas se quedaban fuera de la pantalla. */
  justify-content: safe center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + var(--sp-3)) var(--pad-lateral) var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--ease), visibility 0s linear 350ms;
}
/* Cristal esmerilado: en vez de un morado plano, difumina la página que
   queda detrás del menú (velo morado tenue para que el texto se lea). */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .menu-movil{
    /* Velo morado bastante opaco: el efecto cristal se sigue viendo por el
       desenfoque, pero el texto blanco se lee SIEMPRE, tambien cuando detras
       hay una pagina de fondo claro. Antes estaba a .55 y no se distinguia. */
    background: rgba(38, 28, 52, 0.88);
    -webkit-backdrop-filter: blur(26px) saturate(1.1);
    backdrop-filter: blur(26px) saturate(1.1);
  }
}
.menu-movil.abierto{
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms var(--ease);
}
.menu-movil__lista{ display: flex; flex-direction: column; gap: clamp(10px, 2.5vh, 22px); }
.menu-movil__enlace{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.9rem, 7vh, 2.75rem);
  color: var(--blanco);
  text-decoration: none;
  line-height: 1.15;
  transition: color var(--t-micro) ease-out;
}
.menu-movil__enlace:hover, .menu-movil__enlace.activo{ color: var(--rosa); }
.menu-movil__cta{ margin-top: var(--sp-4); align-self: flex-start; }
/* Entrada escalonada de los enlaces */
.menu-movil__lista > li, .menu-movil__cta{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.menu-movil.abierto .menu-movil__lista > li, .menu-movil.abierto .menu-movil__cta{
  opacity: 1;
  transform: none;
  transition-delay: calc(120ms + var(--i, 0) * 60ms);
}
.menu-movil.abierto ~ * {} /* noop */
body.sin-scroll{ overflow: hidden; }

/* Compensación del header fijo: la primera sección de cada página */
main{ padding-top: var(--header-h); }
main.sin-padding-header{ padding-top: 0; } /* para heros que gestionan su propio espacio */

/* ---------------------------------------------------------------------
   12) FOOTER
--------------------------------------------------------------------- */
.footer{ background: var(--morado); color: rgba(255,255,255,.75); font-size: var(--fs-small); }
.footer a{ color: inherit; text-decoration: none; transition: color var(--t-micro) ease-out; }
.footer a:hover{ color: var(--blanco); }
.footer__grid{
  display: grid;
  gap: var(--sp-5);
  padding-block: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 640px){ .footer__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .footer__grid{ grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.footer__logo{ width: 88px; margin-bottom: var(--sp-2); }
.footer__claim{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--lavanda-texto);
  font-size: 1.05rem;
  margin-bottom: var(--sp-3);
}
.footer__titulo{
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rosa);
  margin-bottom: var(--sp-2);
}
.footer__lista li{ margin-bottom: 10px; }
.footer__lista address{ font-style: normal; }

.footer__sociales{ display: flex; gap: 12px; margin-top: var(--sp-2); }
.footer__sociales a{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave),
              color var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-suave);
}
.footer__sociales a:hover{ background: var(--blanco); border-color: var(--blanco); color: var(--morado); transform: translateY(-2px); }
.footer__sociales a:active{ transform: translateY(0) scale(.94); transition-duration: var(--dur-rapida); }
.footer__sociales svg{ width: 18px; height: 18px; fill: currentColor; }

.footer__legal{ background: var(--morado-800); padding-block: var(--sp-3); font-size: 0.8125rem; }
.footer__legal-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}
.footer__legal ul{ display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; }
.footer__legal button{ text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.footer__legal button:hover{ color: var(--blanco); }


/* ---------------------------------------------------------------------
   14) MARQUEE INFINITO
--------------------------------------------------------------------- */
.marquee{
  overflow: hidden;
  white-space: nowrap;
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.marquee__pista{
  display: inline-flex;
  animation: marqueeLoop 32s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__pista{ animation-play-state: paused; }
.marquee__contenido{
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  flex: none;
}
.marquee__item{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  color: var(--negro);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.marquee__item--italica{ font-style: italic; color: var(--morado); text-transform: none; }
.marquee__sep{ width: clamp(20px, 3vw, 30px); height: auto; fill: var(--rosa); flex: none; }
@keyframes marqueeLoop{ to{ transform: translateX(-50%); } }
@media (max-width: 640px){ .marquee__pista{ animation-duration: 24s; } }

/* ---------------------------------------------------------------------
   15) SISTEMA DE ANIMACIONES (reveal on scroll)
   main.js añade .is-visible al entrar en viewport (una sola vez).
   Los estados ocultos solo aplican si hay JS (html.js) — sin JS todo se ve.
--------------------------------------------------------------------- */
html.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: var(--retardo, 0ms);
}
html.js .reveal--fade{ transform: none; }
html.js .reveal--izq{ transform: translateX(-32px); }
html.js .reveal--dcha{ transform: translateX(32px); }
html.js .reveal--escala{ transform: scale(.94); }
html.js .reveal.is-visible{ opacity: 1; transform: none; }

/* Stagger: main.js asigna --i a los hijos directos (máx. 5 escalones) */
html.js .reveal-stagger > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .reveal-stagger.is-visible > *{ opacity: 1; transform: none; }

/* Titulares por líneas: <span class="linea"><span>texto</span></span> */
/* El overflow:hidden es lo que hace que el texto "suba desde abajo", pero
   recortaba los rabitos de la y/p/g/j y el trazo rosa, porque el line-height
   de los titulares es muy justo (1.02). Ampliamos la caja visible hacia abajo
   y lo compensamos con margen negativo: se ve el rabito y el interlineado
   no cambia. El translateY sube a 140% para que el texto siga escondido. */
.reveal-lineas .linea{
  display: block;
  overflow: hidden;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}
html.js .reveal-lineas .linea > span{
  display: block;
  transform: translateY(140%);
  transition: transform var(--t-titular) var(--ease);
}
html.js .reveal-lineas.is-visible .linea > span{ transform: none; }
html.js .reveal-lineas .linea:nth-child(1) > span{ transition-delay: 100ms; }
html.js .reveal-lineas .linea:nth-child(2) > span{ transition-delay: 220ms; }
html.js .reveal-lineas .linea:nth-child(3) > span{ transition-delay: 340ms; }
html.js .reveal-lineas .linea:nth-child(4) > span{ transition-delay: 460ms; }

/* Flotación perpetua (solo bailarina del hero) */
.flota{ animation: flotar 6s ease-in-out infinite; }
@keyframes flotar{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* Contador: la cifra la anima main.js; aquí solo el estilo */
.contador{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-contador);
  color: var(--negro);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------
   16) PLACEHOLDER DE IMÁGENES PENDIENTES (.img-pendiente)
   main.js sustituye <img> rotas por este bloque con el nombre esperado.
--------------------------------------------------------------------- */
.img-pendiente{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--gris-fondo), var(--melocoton) 140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  border-radius: inherit;
  overflow: hidden;
}
.img-pendiente svg{ width: 42px; height: 42px; fill: none; stroke: var(--morado); stroke-width: 1.5; opacity: .7; }
.img-pendiente__nombre{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  word-break: break-all;
}

/* ---------------------------------------------------------------------
   17) LIGHTBOX (fotos y vídeos)
--------------------------------------------------------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 20, 36, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.lightbox.visible{ opacity: 1; }
.lightbox__contenido{
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  transform: scale(.96);
  transition: transform 250ms var(--ease);
}
.lightbox.visible .lightbox__contenido{ transform: scale(1); }
/* Con zoom desde la miniatura (main.js pone .lightbox--zoom): la foto no
   se funde, crece; lo que se funde es el fondo. Los botones y el pie
   aparecen un instante despues, cuando la foto ya casi ha llegado. */
.lightbox.lightbox--zoom{
  opacity: 1;
  background: rgba(26, 20, 36, 0);
  transition: background-color 380ms var(--ease);
}
.lightbox.lightbox--zoom.visible{ background: rgba(26, 20, 36, .92); }
.lightbox--zoom .lightbox__contenido{ transform: none; transition: none; }
.lightbox--zoom .lightbox__cerrar,
.lightbox--zoom .lightbox__ant,
.lightbox--zoom .lightbox__sig,
.lightbox--zoom .lightbox__pie{ opacity: 0; transition: opacity 220ms var(--ease); }
.lightbox--zoom.visible .lightbox__cerrar,
.lightbox--zoom.visible .lightbox__ant,
.lightbox--zoom.visible .lightbox__sig,
.lightbox--zoom.visible .lightbox__pie{ opacity: 1; transition-delay: 240ms; }
.lightbox__contenido img, .lightbox__contenido video{
  max-width: 100%;
  max-height: calc(100vh - 140px);
  border-radius: var(--radio-s);
  object-fit: contain;
}
.lightbox__contenido iframe{
  width: min(1000px, 90vw);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 140px);
  border: 0;
  border-radius: var(--radio-s);
}
/* Vídeo grabado con el móvil: marco alto, no ancho. Se limita por la altura
   de la pantalla para que quepa entero sin recortar ni dejar franjas. */
.lightbox__contenido--vertical iframe{
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(calc(100vh - 140px), calc(88vw * 16 / 9));
  max-width: 88vw;
}
.lightbox__pie{ color: var(--lavanda-texto); font-size: var(--fs-small); text-align: center; }
.lightbox__cerrar, .lightbox__ant, .lightbox__sig{
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: background var(--t-micro) ease-out;
}
.lightbox__cerrar:hover, .lightbox__ant:hover, .lightbox__sig:hover{ background: var(--morado); }
.lightbox__cerrar{ top: 18px; right: 18px; }
.lightbox__ant{ left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__sig{ right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------------
   18) BANNER DE COOKIES + EMBEDS CON CONSENTIMIENTO
--------------------------------------------------------------------- */
.banner-cookies{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 150;
  margin-inline: auto;
  max-width: 720px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-hover);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.banner-cookies.visible{ opacity: 1; transform: none; }
.banner-cookies p{ font-size: var(--fs-small); color: var(--texto-suave); max-width: none; }
.banner-cookies p a{ color: var(--morado); }
.banner-cookies__botones{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.banner-cookies__botones .btn{ padding: 10px 22px; font-size: 0.875rem; }

/* Contenedor de embed pendiente de consentimiento */
[data-embed-consent]{
  background: var(--gris-fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-embed-consent] iframe{
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}
.embed-consentimiento{
  text-align: center;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.embed-consentimiento p{ color: var(--texto-suave); font-size: var(--fs-small); }
.embed-consentimiento a{ color: var(--morado); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   19) ACCESIBILIDAD DE MOVIMIENTO
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__pista{ animation: none; }
  .flota{ animation: none; }
  .trazo{ stroke-dashoffset: 0; }
  html.js .reveal, html.js .reveal-stagger > *, html.js .reveal-lineas .linea > span{
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Submenú desplegable de "Servicios" (escritorio hover/focus, móvil sublista)
--------------------------------------------------------------------- */
.nav__servicios,
.nav__desplegable{ position: relative; }
.nav__caret{ font-size: 0.7em; opacity: .7; }
/* `ul.` a propósito: si no, el reset `ul[class]{padding:0}` deja el panel
   sin su relleno interior y los enlaces se pegan al borde. */
ul.nav__submenu{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  padding: 8px;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-media, .22s) var(--ease-suave, ease),
              transform var(--dur-media, .22s) var(--ease-suave, ease),
              visibility var(--dur-media, .22s);
  z-index: 200;
}
/* Puente transparente para que el hover no se corte al bajar al submenú */
.nav__submenu::before{ content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__servicios:hover .nav__submenu,
.nav__servicios:focus-within .nav__submenu,
.nav__desplegable:hover .nav__submenu,
.nav__desplegable:focus-within .nav__submenu{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__submenu a{
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--tinta);
  white-space: nowrap;
  transition: background var(--dur-rapida, .15s) ease, color var(--dur-rapida, .15s) ease;
}
.nav__submenu a:hover{ background: var(--gris-fondo); color: var(--morado); }
/* Rotulo dentro del desplegable: deja claro que lo de abajo son las clases
   y no mas paginas de horarios. */
.nav__submenu-grupo{
  padding: 8px 16px 4px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rosa-tinta);
}
.menu-movil__grupo{
  padding-top: 4px;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rosa); /* sobre morado oscuro; el rosa-tinta no se leia */
}

/* Sublista de Servicios en el menú móvil */
/* OJO: se usa el selector `ul.` a propósito. El reset `ul[class]{padding:0}`
   de más arriba tiene especificidad (0,1,1) y anularía un `.clase` a secas,
   dejando el texto pegado a la línea rosa. */
/* Plegada: la regla de arriba pone display:flex, y eso gana al [hidden] del
   navegador. Hay que decirlo a mano. */
ul.menu-movil__sublista[hidden]{ display: none; }

ul.menu-movil__sublista{
  list-style: none;
  margin: 10px 0 0;
  /* Separación holgada entre la línea rosa y el texto del submenú */
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 2px solid var(--rosa-palo);
}
/* El menu movil tiene fondo morado oscuro: aqui el gris de texto suave y el
   morado del hover eran ilegibles (contraste 1,6 a 1). Van en blanco tenue,
   y en rosa al tocarlos. */
.menu-movil__sublista a{
  color: rgba(255, 255, 255, .78);
  font-size: 1.15rem;
  transition: color var(--dur-rapida, .15s) ease;
}
.menu-movil__sublista a:hover,
.menu-movil__sublista a:focus-visible{ color: var(--rosa); }

/* Enlaces del submenú/sublista sin subrayado */
.nav__submenu a, .menu-movil__sublista a{ text-decoration: none; }

/* Galería de bodas: mosaico por columnas.
   Las fotos llegan de fotógrafos distintos, unas apaisadas y otras verticales.
   Con columnas cada una conserva su forma; con rejilla se recortaban caras. */
.galeria-bodas{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  columns: 2;
  column-gap: clamp(.6rem, 1.5vw, 1rem);
}
@media (min-width: 900px){ .galeria-bodas{ columns: 3; } }
.galeria-bodas figure{
  margin: 0 0 clamp(.6rem, 1.5vw, 1rem);
  break-inside: avoid;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: var(--rosa-palo);
}
.galeria-bodas img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms var(--ease);
}
.galeria-bodas figure:hover img{ transform: scale(1.05); }

/* ---------------------------------------------------------------------
   PESTANAS DE SECCION (La escuela / Galeria / El blog)
   Van dentro del menu bajo 'La escuela', asi que una vez dentro conviene
   poder saltar entre las tres sin volver a abrir el menu.
--------------------------------------------------------------------- */
.pestanas{
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
}
.pestanas__inner{
  display: flex;
  gap: clamp(1.1rem, 3vw, 2rem);
  align-items: center;
  overflow-x: auto;
  padding-block: 12px;
  scrollbar-width: none;
}
.pestanas__inner::-webkit-scrollbar{ display: none; }
/* Burbujas: se ve de un vistazo que son un submenu y no enlaces sueltos. */
.pestanas a,
.pestanas__actual{
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: var(--radio-pill, 999px);
  text-decoration: none;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.pestanas a{ color: var(--texto-suave); background: var(--gris-fondo); }
.pestanas a:hover{ color: var(--morado); background: var(--rosa-palo); }
.pestanas__actual{ color: var(--blanco); background: var(--morado); }

/* ---------------------------------------------------------------------
   MENU MOVIL PLEGABLE
   Los tres apartados con hijos empiezan cerrados. El nombre sigue siendo
   un enlace a su pagina; la flecha, un boton que abre la lista. Asi el
   menu son seis filas y cabe entero sin desplazarse.
--------------------------------------------------------------------- */
.menu-movil__fila{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.menu-movil__plegar{
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.menu-movil__plegar:hover{ background: rgba(255,255,255,.2); }
.menu-movil__caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blanco);
  border-bottom: 2px solid var(--blanco);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 250ms var(--ease);
}
.menu-movil__plegar[aria-expanded="true"] .menu-movil__caret{
  transform: rotate(-135deg) translate(-2px, -2px);
}
.menu-movil__plegar[aria-expanded="true"]{ background: rgba(255,255,255,.22); }

/* ---------------------------------------------------------------------
   TIRA DE FINANCIACION DEL PIE
   Los logos de Kit Consulting, la Union Europea y el Plan de Recuperacion.
   Van en su propia franja, separados del resto del pie, porque no son
   decoracion: son la acreditacion de la ayuda y tienen normas de uso.
   Se les deja aire, no se deforman y no bajan de 34 px de alto.
--------------------------------------------------------------------- */
.financiacion{
  /* Blanco a proposito: los tres logos llevan texto azul marino y gris, y el
     de la Union Europea trae su propio fondo blanco. Sobre el morado del pie
     no se leerian, y estos logos no se pueden alterar. */
  background: #fff;
  border-top: 1px solid var(--linea);
  padding-block: var(--sp-4);
}
.financiacion__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.financiacion__logo{
  height: clamp(30px, 5vw, 44px);
  width: auto;
  display: block;
}
/* El del Plan de Recuperacion es un logo apilado en dos lineas: a la misma
   altura que las tiras se veria diminuto, asi que va mas alto. */
.financiacion__apilado{ height: clamp(52px, 8.5vw, 76px); }
.financiacion__nota{
  margin-top: var(--sp-2);
  text-align: center;
  font-size: .78rem;
  color: var(--texto-suave);
  max-width: 70ch;
  margin-inline: auto;
}

/* Credito de Winp, que hizo la web anterior. Va en la misma linea del
   copyright, algo mas tenue: es un credito, no informacion legal. */
.footer__winp{ opacity: .7; white-space: nowrap; }

/* ---------------------------------------------------------------------
   CARRUSEL DE TARJETAS (opiniones, equipo)
   Se desliza a lo ancho en vez de apilarse a lo largo. El navegador hace
   el trabajo: scroll-snap para que las tarjetas encajen solas, y en movil
   la tira llega hasta los bordes de la pantalla para que se vea que hay
   mas cosas a la derecha.
--------------------------------------------------------------------- */
/* min-width:0 es imprescindible: dentro de una rejilla o un flex, un hijo
   crece hasta caber su contenido y el carrusel se saldria en vez de
   deslizarse. */
.carrusel{ position: relative; min-width: 0; }
.carrusel__cabecera{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: var(--sp-2);
}
.carrusel__flecha{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--blanco);
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), opacity 200ms;
}
.carrusel__flecha:hover{ background: var(--rosa-palo); border-color: var(--rosa); }
.carrusel__flecha:disabled{ opacity: .3; cursor: default; }
.carrusel__flecha svg{ width: 16px; height: 16px; fill: none; stroke: var(--morado); stroke-width: 2.2; }
/* Con el dedo no hacen falta: se desliza y ya */
@media (hover: none){ .carrusel__cabecera{ display: none; } }

.carrusel-tarjetas{
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 84%);
  gap: var(--gap-grid);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel-tarjetas::-webkit-scrollbar{ display: none; }
.carrusel-tarjetas > *{ scroll-snap-align: start; height: auto; }

/* En movil la tira sale hasta el borde: se ve media tarjeta asomando y se
   entiende sin instrucciones que hay mas. */
@media (max-width: 719px){
  .carrusel-tarjetas{
    margin-inline: calc(var(--pad-lateral) * -1);
    padding-inline: var(--pad-lateral);
    scroll-padding-inline: var(--pad-lateral);
  }
}
@media (min-width: 720px){ .carrusel-tarjetas{ grid-auto-columns: minmax(280px, 46%); } }
@media (min-width: 1024px){ .carrusel-tarjetas{ grid-auto-columns: minmax(300px, 32%); } }

/* El equipo son fichas pequenas: caben mas de golpe */
.carrusel-tarjetas--estrecho{ grid-auto-columns: minmax(190px, 58%); }
@media (min-width: 720px){ .carrusel-tarjetas--estrecho{ grid-auto-columns: minmax(200px, 30%); } }
@media (min-width: 1024px){ .carrusel-tarjetas--estrecho{ grid-auto-columns: minmax(210px, 24%); } }

@media (prefers-reduced-motion: reduce){
  .carrusel-tarjetas{ scroll-behavior: auto; }
}

/* En movimiento continuo (main.js pone .en-bucle): sin encaje, que peleaba
   con el avance, y fundido en los bordes para que las tarjetas entren y
   salgan suaves en vez de cortarse en seco. */
.carrusel-tarjetas.en-bucle{
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

/* =====================================================================
   CINTA CONTINUA  [data-cinta]
   Fila de tarjetas que pasa sola, despacio y sin parar. El movimiento lo
   hace main.js; aqui solo la forma. Sin JS se ve como rejilla normal.
   ===================================================================== */
.cinta{
  --cinta-ancho: clamp(240px, 70vw, 290px);
  /* de borde a borde de la pantalla en movil: la fila entra y sale por los lados */
  margin-inline: calc(var(--pad-lateral) * -1);
  padding: 6px var(--pad-lateral);
}
.cinta__pista{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cinta__tarjeta{
  flex: 0 0 var(--cinta-ancho);
  margin: 0;
  border-radius: var(--radio-m);
  padding: 20px 22px 22px;
}

/* Con JS: una sola fila que se desplaza. Se funde en los bordes para que
   las tarjetas aparezcan y desaparezcan en vez de cortarse en seco. */
html.js .cinta{
  overflow-x: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pad-lateral), #000 calc(100% - var(--pad-lateral)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--pad-lateral), #000 calc(100% - var(--pad-lateral)), transparent);
}
html.js .cinta::-webkit-scrollbar{ display: none; }
html.js .cinta__pista{ flex-wrap: nowrap; width: max-content; padding-inline: var(--pad-lateral); }
.cinta:focus-visible{ outline: 3px solid var(--rosa); outline-offset: 4px; }

/* 'Menos movimiento': no se mueve, se desliza con el dedo y encaja */
.cinta--quieta{ scroll-snap-type: x mandatory; }
.cinta--quieta .cinta__tarjeta{ scroll-snap-align: start; scroll-margin-inline: var(--pad-lateral); }

/* Clara (sobre gris): tarjeta blanca con la raya rosa de los datos */
.cinta--clara .cinta__tarjeta{
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--rosa);
}
/* Oscura (sobre morado): tarjeta translucida */
.cinta--oscura{ --cinta-ancho: clamp(250px, 74vw, 310px); }
.cinta--oscura .cinta__tarjeta{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}
.cinta--oscura .cinta__tarjeta h3{ font-size: 1.12rem; margin-bottom: 6px; }
.cinta--oscura .cinta__tarjeta p{ font-size: var(--fs-small); margin: 0; }
.cinta--oscura .cinta__tarjeta p.cinta__etiqueta{
  margin: 0 0 6px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rosa);
}

/* Cinta clara con tarjetas de texto (titulo + parrafo) */
.cinta--textos .cinta__tarjeta h3{ font-size: 1.1rem; margin-bottom: 6px; }
.cinta--textos .cinta__tarjeta p{ font-size: var(--fs-small); color: var(--texto-suave); margin: 0; }

/* Cinta de fotos: todas a la misma altura, cada una con su ancho natural
   (las verticales son estrechas y las horizontales anchas). Al tocar, el
   visor la abre con el zoom. */
.cinta--fotos{ --alto-foto: clamp(200px, 56vw, 300px); margin-top: var(--sp-3); }
.cinta--fotos .cinta__foto{
  flex: 0 0 auto;
  display: block;
  height: var(--alto-foto);
  padding: 0;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: var(--rosa-palo);
}
.cinta--fotos .cinta__foto img{
  display: block;
  height: 100%;
  width: auto;
  transition: transform 600ms var(--ease);
}
.cinta--fotos .cinta__foto:hover img{ transform: scale(1.04); }
.cinta--fotos .cinta__foto:focus-visible{ outline: 3px solid var(--rosa); outline-offset: -3px; }

/* =====================================================================
   TARJETAS PLEGABLES EN MOVIL  [data-plegable]
   En pantalla estrecha cada tarjeta ensena solo su cabecera (etiqueta,
   nombre y cifra) y se despliega al tocarla; main.js pone el boton. En
   pantalla ancha no cambia nada, y sin JS se ve todo.
   ===================================================================== */
.plegable__boton{ display: none; }
@media (max-width: 719px){
  [data-plegable] .tarjeta-pack{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 16px 48px 16px 18px;
    position: relative;
  }
  [data-plegable] .tarjeta-pack > .chip{ grid-column: 1; grid-row: 1; justify-self: start; }
  [data-plegable] .tarjeta-pack > h3{ grid-column: 1; grid-row: 2; font-size: 1.08rem; margin: 0; }
  [data-plegable] .tarjeta-pack > .tarjeta-precio__cifra{
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 1.45rem;
    text-align: right;
  }
  [data-plegable] .tarjeta-pack > .lista-puntitos,
  [data-plegable] .tarjeta-pack > .btn{ grid-column: 1 / -1; }
  [data-plegable] .tarjeta-pack > .lista-puntitos{ margin-top: 10px; }
  [data-plegable] .tarjeta-pack > .btn{ justify-self: start; margin-top: 4px; }
  [data-plegable] .tarjeta-pack:not(.abierta) > .lista-puntitos,
  [data-plegable] .tarjeta-pack:not(.abierta) > .btn{ display: none; }

  /* El boton cubre toda la cabecera, margenes incluidos: se toca donde sea */
  .plegable__boton{
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    align-self: stretch;
    margin: -16px -48px -6px -18px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    border-radius: var(--radio-m) var(--radio-m) 0 0;
    -webkit-tap-highlight-color: transparent;
  }
  .plegable__boton::after{
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--morado);
    border-bottom: 2px solid var(--morado);
    transform: rotate(45deg);
    transition: transform 250ms var(--ease);
  }
  .tarjeta-pack.abierta > .plegable__boton::after{ transform: rotate(-135deg); margin-top: -2px; }
  .plegable__boton:focus-visible{ outline: 3px solid var(--rosa); outline-offset: -3px; }
}