/* =====================================================================
   IN STAGE — servicios.css (estilos propios de servicios.html)
   Requiere base.css. Mobile-first.
   Bloques: cabecera de página + subnav pegajoso, 01 campamento,
   02 bodas (packs, proceso, FAQ), 03 alquiler de salas (morado).
   ===================================================================== */

/* ---------------------------------------------------------------------
   CABECERA DE PÁGINA
--------------------------------------------------------------------- */
.hero-servicios{
  background: var(--blanco);
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.hero-servicios h1{
  font-size: clamp(2.4rem, 5.5vw, 4.25rem); /* algo menor que el H1 del home */
  max-width: 20ch;
}
/* Palabra en cursiva del titular en --rosa-tinta para pasar contraste AA sobre blanco */
.hero-servicios h1 em{ color: var(--rosa-tinta); }
.hero-servicios__intro{
  margin-top: var(--sp-3);
  color: var(--texto-suave);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------
   SUBNAV PEGAJOSO (anclas #campamento · #bodas · #alquiler)
--------------------------------------------------------------------- */
.subnav{
  position: sticky;
  top: calc(var(--header-h-compacto) - 1px); /* queda justo bajo el header compacto */
  z-index: 80;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.subnav__inner{ overflow-x: auto; }
.subnav__lista{
  display: flex;
  gap: var(--sp-1);
  padding-block: 10px;
  white-space: nowrap;
}
.subnav__enlace{
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--radio-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--t-micro) ease-out, color var(--t-micro) ease-out;
}
.subnav__enlace:hover{ background: var(--gris-fondo); color: var(--morado); }
.subnav__enlace.activo{ background: var(--morado); color: var(--blanco); }

/* Las anclas deben librar header fijo + subnav pegajoso */
#campamento, #bodas, #alquiler{
  scroll-margin-top: calc(var(--header-h-compacto) + 72px);
}

/* ---------------------------------------------------------------------
   PIEZAS COMPARTIDAS DE LA PÁGINA
--------------------------------------------------------------------- */
/* Foto con arco + caption flotante (campamento y bodas) */
.figura-servicio{ position: relative; }
.figura-servicio .marco-arco img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.figura-servicio .caption-flotante{ left: -12px; bottom: 24px; }
@media (max-width: 640px){ .figura-servicio .caption-flotante{ left: 8px; bottom: 12px; } }

/* Subtítulos internos de bloque (Fraunces, con aire por encima) */
.subtitulo-bloque{
  margin-top: clamp(3rem, 7vw, 4.5rem);
  margin-bottom: var(--sp-4);
}

/* Botonera de cierre de cada bloque */
.cta-servicio{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.cta-servicio--centrado{ justify-content: center; }

/* Los h4 de tarjetas y pasos heredan la voz display de la marca */
.tarjeta-pack h4, .paso h4{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--negro);
}

/* ---------------------------------------------------------------------
   01 · CAMPAMENTO
--------------------------------------------------------------------- */
/* Datos clave (fechas, horario, edades…) en rejilla 2×2 */
.datos-clave{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}
@media (min-width: 560px){ .datos-clave{ grid-template-columns: repeat(2, 1fr); } }
.dato-clave{
  border-left: 3px solid var(--rosa);
  padding-left: var(--sp-2);
}
.dato-clave dt{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
  margin-bottom: 4px;
}
.dato-clave dd{
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--tinta);
  line-height: 1.5;
}

/* Precios por semanas */
.campamento-precios{ margin-top: clamp(3rem, 7vw, 4.5rem); }
.campamento-precios__cabecera{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.tarjetas-semanas{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}
@media (min-width: 900px){ .tarjetas-semanas{ grid-template-columns: repeat(4, 1fr); } }
.tarjeta-precio__titulo{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rosa-tinta);
}
.tarjeta-precio__nota{ font-size: var(--fs-small); color: var(--texto-suave); }
.nota-descuentos{
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

/* Qué traer: chips en fila */
.que-traer{ margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.chips-traer{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-2);
}

/* ---------------------------------------------------------------------
   02 · BODAS
--------------------------------------------------------------------- */
.bodas-intro .lista-puntitos{ margin-top: var(--sp-3); }

/* Packs comparativos: 4 tarjetas con precio destacado */
.grid-packs{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}
@media (min-width: 640px){ .grid-packs{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .grid-packs{ grid-template-columns: repeat(4, 1fr); } }
.tarjeta-pack{ gap: var(--sp-2); }
.tarjeta-pack .chip{ align-self: flex-start; }
.tarjeta-pack .lista-puntitos li{
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
.tarjeta-pack .btn{ width: 100%; }
/* El pack grande lleva un realce sutil de marca */
.tarjeta-pack--amplio{ border: 1.5px solid var(--morado); }
.nota-extras{
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

/* Proceso en 6 pasos numerados (entra con stagger) */
.proceso{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--gap-grid);
  counter-reset: paso;
}
@media (min-width: 640px){ .proceso{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .proceso{ grid-template-columns: repeat(3, 1fr); } }
.paso{ display: flex; gap: var(--sp-2); align-items: flex-start; }
.paso__num{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 2.4rem;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px var(--morado);
  flex: none;
  min-width: 56px;
  user-select: none;
}
.paso h4{ margin-bottom: 4px; }
.paso p{ font-size: var(--fs-small); color: var(--texto-suave); }

/* Aviso de las 6–8 semanas */
.callout-semanas{
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  background: var(--blanco);
  border-left: 3px solid var(--rosa);
  border-radius: var(--radio-s);
  box-shadow: var(--sombra);
  padding: var(--sp-3) var(--sp-4);
  max-width: 70ch;
}

/* Mini-FAQ (details/summary) */
.faq{ display: grid; gap: var(--sp-2); max-width: 820px; }
.faq__item{
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: var(--sp-2) var(--sp-3);
}
.faq__item summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 350;
  color: var(--rosa-tinta);
  transition: transform var(--t-micro) ease-out;
}
.faq__item[open] summary::after{ transform: translateY(-50%) rotate(45deg); }

/* En móvil la pregunta corta se queda en 29px de alto y cuesta acertar con el
   dedo: se le da altura mínima de 44px sin tocar el diseño de escritorio. */
@media (max-width: 719px){
  .faq__item summary{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
.faq__item p{
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   03 · ALQUILER DE SALAS (sobre sección morada)
--------------------------------------------------------------------- */
.alquiler-intro{
  max-width: 68ch;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

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

/* Tarjeta de sala: foto panorámica + cuerpo (tarjeta blanca sobre morado) */
.tarjeta-sala{ overflow: hidden; display: flex; flex-direction: column; }
.tarjeta-sala__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.tarjeta-sala__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.tarjeta-sala:hover .tarjeta-sala__media img{ transform: scale(1.05); }
.tarjeta-sala__media .chip{ position: absolute; left: 14px; top: 14px; z-index: 1; }
.tarjeta-sala__cuerpo{
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.tarjeta-sala__cuerpo h3{ color: var(--negro); } /* tarjeta blanca dentro de sección morada */
.tarjeta-sala__cuerpo .lista-puntitos li{
  color: var(--texto-suave);
  font-size: var(--fs-small);
}
.tarjeta-sala__precio{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-precio);
  color: var(--morado);
  line-height: 1;
}
.tarjeta-sala__precio small{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--texto-suave);
}

/* Usos / disponibilidad / cómo reservar */
.alquiler-info{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--gap-grid);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 768px){ .alquiler-info{ grid-template-columns: repeat(3, 1fr); } }
.alquiler-info__item{
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: var(--sp-2);
}
.alquiler-info__item h3{ font-size: 1.15rem; margin-bottom: 6px; }
.alquiler-info__item p{ font-size: var(--fs-small); }

/* Condiciones de contratacion (descuentos, larga duracion, fin de semana).
   Van sobre la seccion morada, asi que las tarjetas son un velo blanco muy
   suave en lugar de una caja blanca: se leen sin robarle peso a las salas. */
.condiciones-alquiler{ margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.condiciones-alquiler h3{ font-size: 1.15rem; margin-bottom: var(--sp-2); }
.condiciones-alquiler__lista{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--gap-grid);
  margin: 0;
}
@media (min-width: 768px){
  .condiciones-alquiler__lista{ grid-template-columns: repeat(3, 1fr); }
}
.condicion{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radio-s);
  padding: var(--sp-3);
}
.condicion dt{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.condicion dd{ margin: 0; font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   FORMACIÓN DE BALLET (programa avanzado)
   El precio del pack, destacado: texto a la izquierda y la cifra + los
   botones a la derecha, sobre fondo rosa palo. En móvil se apila.
--------------------------------------------------------------------- */
.pack-destacado{
  margin-top: var(--gap-grid, 1.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--rosa);
  border-radius: var(--radio-m);
  background: var(--rosa-palo);
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 860px){
  .pack-destacado{ grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-5); }
}
.pack-destacado__texto h3{
  margin-top: var(--sp-2);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 350;
}
.pack-destacado__texto p{ margin-top: var(--sp-2); }
.pack-destacado__pie{
  font-size: var(--fs-small);
  color: var(--texto-suave);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(169, 80, 90, .2);
}
.pack-destacado__precio{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
@media (min-width: 860px){
  .pack-destacado__precio{ align-items: center; text-align: center; min-width: 230px; }
}
.pack-destacado__cifra{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--morado);
}
.pack-destacado__cifra small{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .28em;
  color: var(--texto-suave);
}
.pack-destacado__enlace{ font-size: var(--fs-small); }

/* Galería de bodas: mismo mosaico 4:3 que la de concursos */
.galeria-bodas{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, 1.5vw, 1rem);
}
@media (min-width: 760px){ .galeria-bodas{ grid-template-columns: repeat(3, 1fr); } }
.galeria-bodas figure{
  margin: 0;
  border-radius: var(--radio-s);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rosa-palo);
}
.galeria-bodas img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease);
}
.galeria-bodas figure:hover img{ transform: scale(1.05); }

/* Reseña de una pareja real, debajo de "dónde ensayáis" */
.testimonio-boda{
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--rosa);
  background: var(--blanco);
  border-radius: 0 var(--radio-m) var(--radio-m) 0;
  max-width: 60ch;
}
.testimonio-boda blockquote{
  margin: var(--sp-2) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.4;
  color: var(--tinta);
}
.testimonio-boda footer{ font-size: var(--fs-small); color: var(--texto-suave); }

/* Etiqueta pequeña que encabeza una lista ("Lo que se lleva de un concurso") */
.formacion__label{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
  padding-bottom: 8px;
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--linea);
}

/* Frase que resume la filosofía de los concursos */
.formacion-cita{
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--rosa);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--morado);
}

/* Palmarés: los premios, sin hacer de ello una medalla enorme */
.palmares{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rosa);
  border-radius: var(--radio-m);
  background: var(--rosa-palo);
  max-width: 74ch;
}
.palmares p{ margin-top: var(--sp-2); color: var(--texto-suave); }
.palmares strong{ color: var(--tinta); }

/* Galería de concursos: mosaico por columnas.
   Se usan columnas CSS (no rejilla) a propósito: las fotos de concurso llegan
   del móvil unas en vertical y otras en horizontal, y así cada una conserva su
   forma en vez de quedar recortada a la fuerza. */
.galeria-concursos{
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  columns: 2;
  column-gap: clamp(.6rem, 1.5vw, 1rem);
}
@media (min-width: 900px){ .galeria-concursos{ columns: 3; } }
.galeria-concursos figure{
  margin: 0 0 clamp(.6rem, 1.5vw, 1rem);
  break-inside: avoid;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: var(--rosa-palo);
}
.galeria-concursos img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms var(--ease);
}
.galeria-concursos figure:hover img{ transform: scale(1.05); }

/* ---------------------------------------------------------------------
   NIVELES DE UNA CLASE (con su edad y su horario)
   Lo primero que pregunta cualquiera es 'que grupo le toca y a que hora'.
   Por eso va antes que el precio y con la hora en negrita.
--------------------------------------------------------------------- */
.niveles-clase{
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid;
  gap: var(--sp-3);
}
.nivel-clase{
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--gris-linea, rgba(66,51,89,.12));
  display: grid;
  gap: 6px;
  max-width: 72ch;
}
.nivel-clase__cabecera{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
}
.nivel-clase h3{ font-size: 1.2rem; margin: 0; }
.nivel-clase__edad{
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rosa-tinta);
}
.nivel-clase__horario{
  font-size: var(--fs-small);
  color: var(--morado);
  font-variant-numeric: tabular-nums;
}
.nivel-clase > p:last-child{ color: var(--texto-suave); }

/* Comparativa de los seis servicios */
.tabla-servicios{ min-width: 640px; }
.tabla-servicios caption{
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--texto-suave);
}
.tabla-servicios th[scope="row"]{ text-align: left; white-space: nowrap; }
.tabla-servicios th[scope="row"] a{ color: var(--tinta); text-decoration: none; font-weight: 700; }
.tabla-servicios th[scope="row"] a:hover{ color: var(--morado); }
.tabla-servicios td:last-child{ white-space: nowrap; font-weight: 600; color: var(--morado); }
.servicio-dato{
  font-size: var(--fs-small);
  color: var(--morado);
}

/* Video dentro de un nivel: hay que darle ancho. El marco solo lleva
   proporcion, y sin ancho se queda en 0 px y no se ve nada. */
.nivel-clase__video{ width: min(100%, 300px); margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------
   LA COMPARATIVA EN MOVIL
   Cuatro columnas no caben en un movil: arrastrar a lo ancho para leer una
   tabla es incomodo y feo. Por debajo de 720 px la tabla se apila y cada
   servicio pasa a ser una ficha con sus tres datos etiquetados.
   Por dentro sigue siendo una tabla: no cambia nada para Google ni para un
   lector de pantalla.
--------------------------------------------------------------------- */
@media (max-width: 719px){
  .tabla-envoltura:has(.tabla-servicios){ border: 0; overflow: visible; }
  .tabla-servicios{ min-width: 0; display: block; }
  .tabla-servicios thead{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabla-servicios tbody{ display: grid; gap: var(--sp-3); }
  .tabla-servicios tbody tr{
    display: block;
    background: var(--blanco);
    border: 1px solid var(--gris-linea, rgba(66,51,89,.12));
    border-radius: var(--radio-s);
    padding: var(--sp-3);
  }
  .tabla-servicios tbody th[scope="row"]{
    display: block;
    position: static;
    padding: 0 0 10px;
    border: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    /* sin las mayusculas ni el espaciado que hereda de .tabla th: aqui es
       un titulo de ficha, no una cabecera de columna */
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
  }
  .tabla-servicios tbody td{
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .35rem .75rem;
    padding: 7px 0 0;
    border: 0;
    white-space: normal;
    background: none;
  }
  .tabla-servicios tbody td::before{
    content: attr(data-etiqueta);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rosa-tinta);
    padding-top: 3px;
  }
  .tabla-servicios tbody td:last-child{ color: var(--morado); font-weight: 700; }
  /* Con la tabla en display:block el caption se estrangula y sale una
     palabra por linea. Hay que devolverle el ancho. */
  .tabla-servicios caption{
    display: block;
    width: 100%;
    padding-bottom: var(--sp-2);
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
   MAS FOTOS DE LAS SALAS (alquiler)
   Debajo de las dos tarjetas: las tomas que no salen en ellas. Dos por
   fila en movil, para no alargar la pagina; cuatro en pantalla ancha.
   Al tocar una se abre en grande con el visor de la web (data-lightbox).
--------------------------------------------------------------------- */
.galeria-salas__titulo{
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rosa-tinta);
}
.galeria-salas{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, 1.5vw, 1rem);
}
@media (min-width: 900px){ .galeria-salas{ grid-template-columns: repeat(4, 1fr); } }
.galeria-salas__foto{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio-s);
  background: var(--rosa-palo);
}
.galeria-salas__foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.galeria-salas__foto:hover img{ transform: scale(1.05); }
.galeria-salas__foto:focus-visible{ outline: 3px solid var(--rosa); outline-offset: 3px; }
.galeria-salas__foto .chip{
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  font-size: .68rem;
  padding: 4px 9px;
}

/* ---------------------------------------------------------------------
   BAILES DE BODA: VERSION COMPACTA EN MOVIL
--------------------------------------------------------------------- */
/* Titulo de las fotos, dentro de la seccion del video */
.bodas-fotos__titulo{ margin-top: clamp(2.5rem, 6vw, 3.5rem); margin-bottom: var(--sp-2); }

@media (max-width: 719px){
  /* Las fotos con arco, cuadradas en vez de 4:5 */
  .figura-servicio--baja .marco-arco{ aspect-ratio: 1 / 1; }
  .figura-servicio--baja .marco-arco img{ width: 100%; height: 100%; object-fit: cover; }
  /* La foto de la sala en 'Dónde ensayáis' no sale en movil: es la misma que
     en La escuela y el alquiler, y la seccion era la mas larga de la pagina.
     Como va con loading="lazy", en movil ni siquiera se descarga. */
  .figura-servicio--sin-movil{ display: none; }
}

/* Paso a paso de dos en dos: los pasos son cortos y caben de sobra */
@media (max-width: 639px){
  .proceso--compacto{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) clamp(.8rem, 3vw, 1.25rem); }
  .proceso--compacto .paso{ flex-direction: column; gap: 2px; }
  .proceso--compacto .paso__num{ font-size: 1.9rem; min-width: 0; }
  .proceso--compacto .paso h3{ font-size: 1.02rem; }
}

/* Boton de 'ver mas preguntas' */
.faq__mas{ margin-top: var(--sp-3); }