/* =============================================================================
   ETÉREA pilates — Sistema visual del sitio
   Web CLARA. El estudio es oscuro; el sitio no. Lo oscuro son las fotos.
   Referencias: New York Pilates (blanco + un tono profundo + serif grande)
                Living Barre & Yoga (crema cálido + movimiento sutil + táctil)
   ========================================================================== */

:root{
  /* Neutros cálidos: un gris frío se lee barato, uno cálido se lee caro. */
  /* Fondos que SE NOTAN al pasar de uno a otro. Matices invisibles no dan ritmo:
     el salto de blanco a rosa a ciruela es lo que hace que la página respire. */
  --papel:#FFFFFF;          /* blanco puro: la base */
  --crema:#FCF4F2;          /* rosa pastel */
  --crema-2:#F5F3FA;        /* lavanda pastel */
  --arena:#FAF6F1;          /* arena muy tenue */
  --hondo:#4A3B56;          /* ciruela suave: corta el ritmo sin pesar */
  --nieve:#FFFFFF;
  --tinta:#33253A;          /* ciruela profundo: el color de la marca */
  --tinta-2:#6B5C72;
  --tinta-3:#9A8FA0;
  --linea:#E6DFE6;
  --linea-suave:#F0EAF0;
  --blanco:#FFFFFF;
  --plata:#B9B2BC;
  --acento:#8E4B6B;         /* rosa profundo, para detalles y estados */

  --si:#2F6B4F;   --si-suave:#E8F1EB;
  --ojo:#8A6320;  --ojo-suave:#FBF1E0;
  --no:#9B3B34;   --no-suave:#FAEAE8;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Karla",-apple-system,"Helvetica Neue",Arial,sans-serif;

  --medida:62ch;
  --ancho:80rem;
  --r:1.25rem;
  --curva:cubic-bezier(.22,.61,.36,1);
  --rapido:.28s; --medio:.4s;

  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2.5rem; --e5:4rem; --e6:6.5rem; --e7:9rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 1.5rem}
.medida{max-width:var(--medida)}

/* ---------------------------------------------------------------- tipografía */
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
.display{
  font-family:var(--display);font-optical-sizing:auto;
  font-weight:200;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(3rem,8.5vw,6.5rem);line-height:.98;letter-spacing:-.025em;
}
.titulo{
  font-family:var(--display);font-weight:200;font-variation-settings:"SOFT" 0,"WONK" 0;
  font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.04;letter-spacing:-.02em;
}
.subtitulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:-.01em;
}
.etiqueta{
  font-family:var(--texto);font-weight:700;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);
}
.entrada{font-size:1.15rem;line-height:1.6;color:var(--tinta-2);max-width:var(--medida)}
p{max-width:var(--medida);color:var(--tinta-2)}
.grande{font-size:1.35rem;line-height:1.5;color:var(--tinta)}

/* ---------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--texto);font-weight:500;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:1.05rem 2.2rem;border-radius:999px;border:1px solid var(--tinta-3);min-height:48px;
  transition:background var(--rapido) ease,color var(--rapido) ease,
             border-color var(--rapido) ease,transform var(--rapido) var(--curva);
}
/* Ninguna de las dos referencias usa botones sólidos oscuros. */
.btn-solido{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-solido:hover{background:var(--tinta);color:var(--papel)}
.btn-linea{background:transparent;color:var(--tinta-2);border-color:var(--linea)}
.btn-linea:hover{border-color:var(--tinta);color:var(--tinta)}
.btn-claro{background:var(--nieve);color:var(--tinta);border-color:transparent}
.btn-claro:hover{background:#fff}
.btn-chico{padding:.65rem 1.25rem;font-size:.7rem;min-height:40px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------------------------------------------------------------- banda */
.banda{background:#4A3B35;color:#FAF2F0;overflow:hidden;padding:.75rem 0}
.banda .pista{display:flex;gap:3.5rem;white-space:nowrap;animation:corre 38s linear infinite;width:max-content}
.banda span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.banda a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- navegación */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(251,250,248,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color var(--rapido) ease,box-shadow var(--rapido) ease;
}
.nav.bajando{border-color:var(--linea);box-shadow:0 6px 24px rgba(27,25,23,.045)}
.nav .fila{display:flex;align-items:center;gap:1.5rem;padding:1rem 1.5rem;max-width:var(--ancho);margin:0 auto}
.marca{
  font-family:var(--texto);font-weight:400;font-size:1rem;
  text-decoration:none;display:inline-flex;align-items:baseline;gap:.45em;color:var(--tinta);white-space:nowrap;
}
.marca .caps{letter-spacing:.2em;display:inline-flex;align-items:baseline}
.marca .lam{height:.58em;width:.58em;aspect-ratio:1;margin:0 .05em 0 .03em;
  fill:none;stroke:currentColor;stroke-width:9;stroke-linejoin:miter}
.marca .bajo{font-size:.76rem;letter-spacing:.02em;color:var(--tinta-3);text-transform:lowercase}
.logo-img{height:1.7rem;width:auto;display:block}
.nav .marca{font-size:1.4rem}
.nav .marca .bajo{font-size:.76em}
.nav .logo-img{height:2.38rem}
.nav .crece{flex:1}
.nav .enlaces{display:flex;gap:1.6rem}
.nav .enlaces a{
  text-decoration:none;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-2);padding:.3rem 0;border-bottom:1px solid transparent;
  transition:color var(--rapido) ease,border-color var(--rapido) ease;
}
.nav .enlaces a:hover,.nav .enlaces a[aria-current="page"]{color:var(--tinta);border-color:var(--tinta)}
.nav .acciones{display:flex;gap:.6rem;align-items:center}
.menu-btn{display:none;background:none;border:0;padding:.6rem;cursor:pointer;min-height:44px}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--tinta);margin:5px 0;
  transition:transform var(--rapido) var(--curva),opacity var(--rapido) ease}

@media (max-width:960px){
  .nav .enlaces{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--papel);border-bottom:1px solid var(--linea);
    padding:0 1.5rem;gap:0;overflow:hidden;max-height:0;opacity:0;
    transition:max-height var(--medio) var(--curva),opacity var(--rapido) ease,padding var(--medio) var(--curva);
  }
  .nav .enlaces.abierto{max-height:24rem;opacity:1;padding:1rem 1.5rem 1.5rem;gap:.2rem}
  .nav .enlaces a{padding:.75rem 0;font-size:.82rem}
  .menu-btn{display:block}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
@media (max-width:520px){
  .nav .fila{gap:.75rem;padding-left:1rem;padding-right:1rem}
}

/* ---------------------------------------------------------------- portada */
.portada{padding:var(--e5) 0 var(--e6);background:var(--papel)}
.portada .rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e5);align-items:center}
.portada .display{color:var(--tinta)}
.portada .entrada{margin-top:1.5rem}
.portada .botones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--e4)}
.portada .foto{position:relative;border-radius:var(--r);overflow:hidden;background:var(--crema)}
.portada .foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portada .sello{
  position:absolute;left:1.25rem;bottom:1.25rem;background:var(--papel);color:var(--tinta);
  padding:.7rem 1.1rem;border-radius:999px;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 20px rgba(27,25,23,.12);
}
@media (max-width:900px){
  .portada{padding:var(--e4) 0 var(--e5)}
  .portada .rejilla{grid-template-columns:1fr;gap:var(--e4)}
  .portada .foto img{aspect-ratio:4/3}
}

/* ---------------------------------------------------------------- secciones */
.seccion{padding:var(--e6) 0}
/* El ritmo lo dan los fondos alternados, no solo el espacio. */
.seccion.crema{background:var(--crema)}
.seccion.lavanda{background:var(--crema-2)}
.seccion.arena{background:var(--arena)}

/* Una sola sección honda en toda la página: corta el ritmo y hace que lo que
   viene después se sienta más luminoso. Si hubiera dos, dejaría de funcionar. */
.seccion.honda{background:var(--hondo);color:#F7F4F9}
.seccion.honda .titulo,.seccion.honda .display,.seccion.honda .subtitulo{color:#FFF}
.seccion.honda p,.seccion.honda .entrada,.seccion.honda .grande{color:rgba(246,242,247,.82)}
.seccion.honda .etiqueta{color:rgba(246,242,247,.55)}
.seccion.honda .seccion-num{border-color:rgba(246,242,247,.35)}
.seccion.honda .seccion-num .cifra,.seccion.honda .seccion-num .nombre{color:rgba(246,242,247,.75)}
.seccion.honda .seccion-num .linea{background:rgba(246,242,247,.25)}
.seccion.honda .btn-linea{color:#FFF;border-color:rgba(255,255,255,.5)}
.seccion.honda .btn-linea:hover{background:#FFF;color:var(--hondo)}
.seccion.honda .btn-solido{color:#FFF;border-color:#FFF}
.seccion.honda .btn-solido:hover{background:#FFF;color:var(--hondo)}
.seccion.honda .numero .cifra{color:#FFF}
.seccion.honda .numero .que{color:rgba(246,242,247,.7)}
.seccion.honda .divisor-lam::before,.seccion.honda .divisor-lam::after{background:rgba(246,242,247,.22)}
.seccion.honda .divisor-lam svg{stroke:rgba(246,242,247,.6)}
.seccion.honda .figura,.seccion.honda .mosaico .figura{background:rgba(255,255,255,.06)}
.seccion.ceñida{padding:var(--e4) 0}
.encabezado{margin-bottom:var(--e4);max-width:var(--medida)}
.encabezado .etiqueta{display:block;margin-bottom:.85rem}
.encabezado .titulo + .entrada{margin-top:1.15rem}
.centrado{text-align:center;margin-left:auto;margin-right:auto}
.centrado .entrada,.centrado p{margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- rejillas */
.rejilla{display:grid;gap:1.25rem}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);align-items:center}
.par.invertido > :first-child{order:2}
@media (max-width:860px){
  .par{grid-template-columns:1fr;gap:var(--e4)}
  .par.invertido > :first-child{order:0}
}

.tarjeta{background:var(--nieve);border:1px solid var(--linea);padding:var(--e3);border-radius:var(--r);
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) ease,border-color var(--rapido) ease}
.tarjeta h3{font-family:var(--display);font-weight:400;font-size:1.3rem;margin-bottom:.5rem;letter-spacing:-.01em}
.tarjeta p{font-size:.96rem;margin:0}
@media (hover:hover){ .tarjeta:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(27,25,23,.06)} }

.figura{position:relative;overflow:hidden;border-radius:var(--r);background:var(--crema)}
.figura img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .8s var(--curva)}
.figura.ancha img{aspect-ratio:16/10}
.figura.alta img{aspect-ratio:3/4}
@media (hover:hover){ .figura:hover img{transform:scale(1.035)} }
.figura .pie-foto{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.25rem 1rem;color:#fff;
  background:linear-gradient(transparent,rgba(20,18,16,.72));font-size:.88rem;
}

/* ---------------------------------------------------------------- mosaico */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.mosaico .figura:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaico .figura:nth-child(1) img{aspect-ratio:1}
.mosaico .figura img{aspect-ratio:1}
@media (max-width:760px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .mosaico .figura:nth-child(1){grid-column:span 2;grid-row:auto}
}

/* ---------------------------------------------------------------- números */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--e3);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:var(--e4) 0}
.numero .cifra{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1;letter-spacing:-.03em}
.numero .que{font-size:.9rem;color:var(--tinta-2);margin-top:.5rem;max-width:22ch}

/* ---------------------------------------------------------------- testimonios */
.testimonio{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:var(--e3)}
.testimonio blockquote{margin:0;font-family:var(--display);font-weight:400;font-size:1.2rem;
  line-height:1.4;letter-spacing:-.01em;color:var(--tinta)}
.testimonio .quien{margin-top:1.1rem;font-size:.84rem;color:var(--tinta-3);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.estrellas{color:var(--tinta);letter-spacing:.1em;font-size:.85rem;margin-bottom:.85rem}

/* ---------------------------------------------------------------- precios */
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.precio{background:var(--nieve);padding:var(--e3);display:flex;flex-direction:column;gap:.35rem;
  transition:background var(--rapido) ease}
.precio.destacado{background:var(--nieve);border:1px solid var(--tinta) !important;position:relative}
.precio.destacado h3,.precio.destacado .cifra{color:var(--tinta)}
.precio .gancho{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--acento);background:#FBEEF3;padding:.25rem .6rem;border-radius:999px;align-self:flex-start;margin-bottom:.5rem}
.precio h3{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:-.01em}
.precio .cifra{font-family:var(--display);font-weight:300;font-size:2.6rem;line-height:1;margin:.5rem 0;letter-spacing:-.03em}
.precio .nota{font-size:.82rem;color:var(--tinta-3)}
.precio p{font-size:.92rem;margin:.5rem 0 0;flex:1}
.precio .btn{margin-top:var(--e2);width:100%}

/* ---------------------------------------------------------------- horarios */
.dia{border-bottom:1px solid var(--linea);padding:var(--e3) 0}
.dia:last-child{border-bottom:0}
.dia .cabeza{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.dia .cabeza h3{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.01em}
.dia .cabeza .cuenta{font-size:.78rem;color:var(--tinta-3)}
.clases{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem}
.clase{background:var(--nieve);border:1px solid var(--linea);border-radius:var(--r);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.25rem;
  transition:transform var(--medio) var(--curva),box-shadow var(--medio) ease,border-color var(--rapido) ease}
@media (hover:hover){ .clase:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,25,23,.06);border-color:var(--tinta-3)} }
.clase .hora{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1;letter-spacing:-.02em}
.clase .nombre{font-size:.9rem;color:var(--tinta-2)}
.clase .pie{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem}
.clase .lugares{font-size:.74rem;font-weight:700;letter-spacing:.04em}
.clase .lugares.bien{color:var(--si)} .clase .lugares.pocos{color:var(--ojo)} .clase .lugares.nada{color:var(--no)}
.clase.llena{background:var(--crema);opacity:.9}

/* ---------------------------------------------------------------- carrusel */
.carrusel{
  display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:.9rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-left:1.5rem;padding:.25rem 1.5rem 1.25rem;margin:0 -1.5rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel > *{scroll-snap-align:start}
@media (min-width:760px){
  .carrusel{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
    overflow:visible;padding:0;margin:0;scroll-snap-type:none;gap:1.25rem}
}
.puntos{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem}
.puntos i{width:.4rem;height:.4rem;border-radius:50%;background:var(--linea);
  transition:background var(--rapido) ease,transform var(--rapido) ease}
.puntos i.activo{background:var(--tinta);transform:scale(1.4)}
@media (min-width:760px){ .puntos{display:none} }
@media (max-width:759px){
  .precios{grid-auto-flow:column;grid-auto-columns:80%;display:grid;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1.5rem;
    padding:0 1.5rem 1rem;margin:0 -1.5rem;background:transparent;border:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .precios::-webkit-scrollbar{display:none}
  .precio{scroll-snap-align:start;border:1px solid var(--linea);border-radius:var(--r)}
}

/* ---------------------------------------------------------------- pie */
.pie-sitio{background:var(--papel);color:var(--tinta-2);padding:var(--e6) 0 var(--e4);border-top:1px solid var(--linea)}
.pie-sitio a{color:var(--tinta-2);text-decoration:none;transition:color var(--rapido) ease}
.pie-sitio a:hover{color:var(--tinta)}
.pie-sitio .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--e4)}
.pie-sitio h4{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:1rem;font-weight:700}
.pie-sitio ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem;font-size:.94rem}
.pie-sitio p{color:var(--tinta-2)}
.pie-sitio .legal{border-top:1px solid var(--linea);margin-top:var(--e4);padding-top:1.5rem;
  font-size:.78rem;color:var(--tinta-3);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (max-width:860px){ .pie-sitio .cols{grid-template-columns:1fr 1fr;gap:var(--e3)} }
@media (max-width:560px){ .pie-sitio .cols{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- formularios */
.hoja{max-width:27rem;margin:0 auto}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--tinta-2);margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{
  width:100%;border:1px solid var(--linea);border-radius:.75rem;padding:.85rem 1rem;
  font:inherit;font-size:1rem;background:var(--nieve);color:var(--tinta);min-height:46px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--tinta);outline-offset:1px}
.campo .pista{font-size:.78rem;color:var(--tinta-3);margin-top:.3rem}
.campo .malo{font-size:.82rem;color:var(--no);margin-top:.35rem;display:none}
.campo.error input,.campo.error select,.campo.error textarea{border-color:var(--no);background:var(--no-suave)}
.campo.error .malo{display:block}
.separador{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--tinta-3);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}
.social{display:flex;flex-direction:column;gap:.6rem}
.social .btn{width:100%;text-transform:none;letter-spacing:.01em;font-size:.92rem;font-weight:400}
.social .btn[aria-disabled="true"]{opacity:.45}
.pestanas{display:flex;gap:.5rem;margin-bottom:1.5rem}
.pestanas a{flex:1;text-align:center;padding:.7rem;text-decoration:none;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--linea);color:var(--tinta-3)}
.pestanas a[aria-current="page"]{color:var(--tinta);border-color:var(--tinta)}

/* ---------------------------------------------------------------- cuenta */
.cuenta-cabeza{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:var(--e4)}
.saldo{background:var(--nieve);border:1px solid var(--linea);color:var(--tinta);padding:var(--e3);border-radius:var(--r);
  display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;justify-content:space-between}
.saldo .cifra{font-family:var(--display);font-weight:300;font-size:2.8rem;line-height:1;letter-spacing:-.03em}
.saldo .detalle{font-size:.88rem;color:var(--tinta-3)}
.reserva{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:1.1rem 1.3rem;margin-bottom:.6rem}
.reserva .cuando{font-family:var(--display);font-weight:400;font-size:1.2rem;letter-spacing:-.01em}
.reserva .que{font-size:.9rem;color:var(--tinta-2)}

/* ---------------------------------------------------------------- avisos */
.aviso{padding:.9rem 1.15rem;border-radius:var(--r);font-size:.94rem;margin-bottom:1rem;font-weight:500}
.aviso.bien{background:var(--si-suave);color:var(--si)}
.aviso.ojo{background:var(--ojo-suave);color:var(--ojo)}
.aviso.mal{background:var(--no-suave);color:var(--no)}
.vacio{padding:var(--e4);text-align:center;color:var(--tinta-3);background:var(--crema);border-radius:var(--r)}

/* ---------------------------------------------------------------- movimiento */
.sube{opacity:0;transform:translateY(16px)}
.sube.visible{opacity:1;transform:none;
  transition:opacity .7s ease var(--retraso,0s),transform .7s var(--curva) var(--retraso,0s)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .sube{opacity:1;transform:none}
  .banda .pista{animation:none;justify-content:center}
}

/* ---------------------------------------------------------------- video */
.video-bloque{position:relative;border-radius:var(--r);overflow:hidden;background:var(--tinta)}
.video-bloque video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.video-bloque .encima{
  position:absolute;inset:auto 0 0 0;padding:var(--e4) var(--e3) var(--e3);
  background:linear-gradient(transparent,rgba(18,16,15,.78));color:#fff;
}
.video-bloque .encima .titulo{color:#fff}
.video-bloque .encima p{color:rgba(255,255,255,.82);max-width:46ch}
.marca-repuesto{
  position:absolute;top:.75rem;right:.75rem;z-index:3;
  background:rgba(253,250,249,.92);color:var(--tinta-2);border:1px solid var(--linea);font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;
  pointer-events:none;
}
body.sin-marcas .marca-repuesto{display:none}

/* ---------------------------------------------------------------- galería */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .6s var(--curva)}
.galeria a{display:block;overflow:hidden;border-radius:var(--r);background:var(--crema)}
@media (hover:hover){ .galeria a:hover img{transform:scale(1.06)} }
@media (max-width:760px){ .galeria{grid-template-columns:repeat(2,1fr)} }

/* ---------------------------------------------------------------- cinta */
/* --- Barra de datos bajo el hero ---
   No es una marquesina detenida: es un bloque con estructura. Cuatro datos con
   su cifra y su explicación, separados por líneas. Lo primero que se ve después
   del video, y responde "¿qué es esto?" sin que nadie tenga que bajar. */
.barra-datos{background:var(--crema);padding:var(--e3) 0}
.barra-datos .fila{
  max-width:var(--ancho);margin:0 auto;padding:0 1.5rem;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.barra-datos .dato{
  padding:.2rem 1.25rem;border-left:1px solid rgba(74,59,86,.14);
  display:flex;flex-direction:column;gap:.35rem;
}
.barra-datos .dato:first-child{border-left:0;padding-left:0}
.barra-datos .cifra{
  font-family:var(--display);font-weight:200;font-size:clamp(1.5rem,2.3vw,2rem);
  line-height:1;letter-spacing:-.03em;color:var(--tinta);
}
.barra-datos .cifra small{font-size:.45em;letter-spacing:0;margin-left:.15em;color:var(--tinta-2)}
.barra-datos .que{font-size:.84rem;line-height:1.4;color:var(--tinta-2);max-width:22ch}
@media (max-width:860px){
  .barra-datos .fila{grid-template-columns:repeat(2,1fr);gap:1.75rem 0}
  .barra-datos .dato:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:460px){
  .barra-datos{padding:var(--e3) 0}
  .barra-datos .dato{padding:.25rem .9rem}
  .barra-datos .que{font-size:.84rem}
}

/* --- Portada con video a pantalla completa (New York Pilates) --- */
.portada-video{
  position:relative;min-height:min(92vh,44rem);max-height:52rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;isolation:isolate;
}
.portada-video video,.portada-video > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
/* El tratamiento de la portada.
   Con video de banco de imágenes convenía lavarlo casi por completo: no había
   nada que enseñar. Con la foto del estudio real es al revés — el lugar es el
   argumento. Se baja el velo lo suficiente para que se vea, y se concentra
   arriba y abajo, que es donde vive el texto. En medio la foto queda limpia. */
.portada-video video,.portada-video > img{filter:brightness(1.04)}
.portada-video::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(253,251,250,.92) 0%,
      rgba(253,251,250,.70) 22%,
      rgba(253,251,250,.42) 50%,
      rgba(253,251,250,.72) 78%,
      rgba(253,251,250,.94) 100%);
}
/* Y una sombra suave detrás del texto, para que no dependa solo del velo:
   así se lee igual si mañana cambian la foto por una más oscura. */
.portada-video .centro{
  text-shadow:0 1px 2px rgba(253,251,250,.9), 0 0 22px rgba(253,251,250,.65);
}
.portada-video .centro{position:relative;z-index:2;padding:var(--e5) 1.5rem;max-width:46rem;color:var(--tinta)}
.portada-video .prueba{justify-content:center;color:var(--tinta-2);margin-bottom:1.25rem}
.portada-video .display{color:var(--tinta);font-size:clamp(2.8rem,9vw,6rem);line-height:.98}
.portada-video .lema{
  font-size:clamp(1.05rem,2.4vw,1.45rem);color:var(--tinta-2);
  margin:1.35rem auto 0;max-width:28ch;line-height:1.4;
}
.portada-video .botones{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.portada-video .btn-claro{background:rgba(253,250,249,.92);color:var(--tinta);border-color:transparent}
.portada-video .btn-claro:hover{background:#fff}
.portada-video .abajo-nota{margin-top:1.6rem;font-size:.88rem;color:var(--tinta-2)}
.portada-video .abajo-nota strong{color:var(--tinta)}

/* --- Clase destacada con video (el patrón de "Abs Arms Ass") --- */
.clase-destacada{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--e5);align-items:center}
@media (max-width:900px){ .clase-destacada{grid-template-columns:1fr;gap:var(--e4)} }
.clase-destacada .marco-video{border-radius:1.5rem;overflow:hidden;background:var(--crema);position:relative}
.clase-destacada .marco-video video,
.clase-destacada .marco-video img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.clase-destacada .datos{
  font-size:.98rem;font-weight:700;color:var(--tinta);margin-bottom:1rem;letter-spacing:.01em;
}
.clase-destacada .titulo{margin-bottom:1.25rem}
.tarjeta-clase video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:brightness(1.03)}

/* =============================================================================
   HORARIO EMBEBIDO
   La mejor idea de Living Barre: se reserva sin salir del inicio.
   Pestañas, semana navegable, filtros y lista de clases en el mismo bloque.
   ========================================================================== */
.agenda{
  background:var(--nieve);border:1px solid var(--linea);border-radius:1.5rem;
  padding:1.5rem;
}
.agenda .pestanas-agenda{display:flex;gap:1.75rem;margin-bottom:1.25rem}
.agenda .pestanas-agenda button{
  background:none;border:0;padding:.35rem 0 .5rem;font:inherit;font-size:1.05rem;
  color:var(--tinta-3);cursor:pointer;border-bottom:2px solid transparent;
  transition:color var(--rapido) ease,border-color var(--rapido) ease;
}
.agenda .pestanas-agenda button[aria-selected="true"]{color:var(--tinta);border-color:var(--tinta)}
@media (max-width:600px){
  .agenda .pestanas-agenda{gap:.6rem;justify-content:space-between}
  .agenda .pestanas-agenda button{font-size:.76rem;white-space:nowrap}
}

.semana{display:flex;align-items:center;gap:.35rem;margin-bottom:1.25rem}
.semana .flecha{
  flex:0 0 2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--linea);
  background:var(--papel);cursor:pointer;display:grid;place-items:center;
  font-size:1rem;color:var(--tinta-2);transition:border-color var(--rapido) ease;
}
.semana .flecha:hover:not(:disabled){border-color:var(--tinta)}
.semana .flecha:disabled{opacity:.35;cursor:not-allowed}
.semana .dias{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem}
.semana .dia-btn{
  background:none;border:0;padding:.5rem .1rem;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;border-radius:.6rem;
  transition:background var(--rapido) ease;
}
.semana .dia-btn:hover{background:var(--papel)}
.semana .dia-btn .abrev{font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3)}
.semana .dia-btn .num{font-size:1.15rem;color:var(--tinta-2);line-height:1.1}
.semana .dia-btn .marca{width:.28rem;height:.28rem;border-radius:50%;background:var(--tinta-3);opacity:.5}
.semana .dia-btn[aria-pressed="true"] .abrev{color:var(--acento)}
.semana .dia-btn[aria-pressed="true"] .num{color:var(--tinta);font-weight:500;
  border-bottom:2px solid var(--tinta);padding-bottom:.1rem}
.semana .dia-btn.vacio .num{opacity:.35}
.semana .dia-btn.vacio .marca{opacity:0}

.filtros-agenda{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.filtros-agenda select,.filtros-agenda .pastilla{
  border:1px solid var(--linea);border-radius:999px;padding:.55rem 1.1rem;
  font:inherit;font-size:.85rem;background:var(--papel);color:var(--tinta-2);
  cursor:pointer;min-height:40px;appearance:none;
}
.filtros-agenda .pastilla[aria-pressed="true"]{border-color:var(--tinta);color:var(--tinta)}
.filtros-agenda select{padding-right:2.2rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C857C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:.7rem}

.agenda .listado{border-top:1px solid var(--linea)}
.agenda .renglon{
  display:grid;grid-template-columns:5.5rem 1fr auto;gap:1rem;align-items:center;
  padding:1.05rem .25rem;border-bottom:1px solid var(--linea-suave);
  transition:background var(--rapido) ease;
}
.agenda .renglon:hover{background:var(--papel)}
.agenda .renglon .hora{font-family:var(--display);font-weight:300;font-size:1.35rem;letter-spacing:-.02em}
.agenda .renglon .hora small{display:block;font-family:var(--texto);font-size:.7rem;
  color:var(--tinta-3);letter-spacing:.06em;font-weight:700}
.agenda .renglon .info .nombre{font-size:.98rem;color:var(--tinta)}
.agenda .renglon .info .quien{font-size:.82rem;color:var(--tinta-3);margin-top:.1rem}
.agenda .renglon .cupo{font-size:.74rem;font-weight:700;white-space:nowrap;margin-right:.5rem}
.agenda .renglon .cupo.bien{color:var(--si)} .agenda .renglon .cupo.pocos{color:var(--ojo)}
.agenda .renglon .cupo.nada{color:var(--tinta-3)}
.agenda .sin-clases{padding:2.5rem 1rem;text-align:center;color:var(--tinta-3)}
.agenda .sin-clases strong{display:block;color:var(--tinta-2);margin-bottom:.35rem}
@media (max-width:640px){
  .agenda{padding:1.15rem}
  .agenda .renglon{grid-template-columns:4.5rem 1fr;gap:.5rem .85rem}
  .agenda .renglon .cupo{grid-column:2}
  .agenda .renglon .btn{grid-column:2;justify-self:start;margin-top:.35rem}
  .semana .dias{gap:0}
}

/* =============================================================================
   EL BOTÓN QUE COMPRA
   Es el ÚNICO sólido de todo el sitio. Va en el color de la marca, no en negro,
   y se reserva para el momento de pagar. Al ser el único con ese peso, se lleva
   la mirada sin necesidad de gritar. Si se usa en dos lugares, deja de funcionar.
   ========================================================================== */
.btn-comprar{
  background:var(--tinta);color:var(--papel);border-color:var(--tinta);
  font-size:1rem;font-weight:500;letter-spacing:.06em;text-transform:none;
  padding:1.15rem 2.4rem;width:100%;
}
.btn-comprar:hover{background:#241929;border-color:#241929}

/* --- Selector de oferta: filas que se eligen, un solo botón abajo --- */
.oferta{background:var(--nieve);border:1px solid var(--linea);border-radius:1.5rem;padding:1.5rem}
.oferta .opcion{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  border:1px solid var(--linea);border-radius:1rem;padding:1.1rem 1.25rem;
  margin-bottom:.7rem;cursor:pointer;background:var(--papel);
  transition:border-color var(--rapido) ease,background var(--rapido) ease;
}
.oferta .opcion:hover{border-color:var(--tinta-3)}
.oferta .opcion input{position:absolute;opacity:0;pointer-events:none}
.oferta .opcion:has(input:checked){border-color:var(--acento);background:var(--nieve);box-shadow:0 0 0 1px var(--acento)}
.oferta .opcion .nombre-op{font-size:1.02rem;font-weight:500;color:var(--tinta)}
.oferta .opcion .detalle-op{font-size:.8rem;color:var(--tinta-3);display:block;margin-top:.1rem}
.oferta .opcion .relleno{flex:1}
.oferta .opcion .antes-op{text-decoration:line-through;color:var(--tinta-3);font-size:.95rem}
.oferta .opcion .ahora-op{font-size:1.25rem;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.oferta .nuevo{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acento);border:1px solid var(--acento);border-radius:999px;padding:.15rem .5rem}
.oferta .pie-oferta{font-size:.82rem;color:var(--tinta-3);text-align:center;margin-top:.9rem}
@media (max-width:560px){
  .oferta{padding:1.15rem}
  .oferta .opcion{gap:.5rem}
  .oferta .opcion .relleno{flex-basis:100%;height:0}
}

/* Credenciales: responden la objeción de "¿quién me va a dar clase?"
   antes de que la persona la formule. Van pegadas al titular, no sueltas. */
.credenciales{
  margin-top:.9rem;font-size:.92rem;font-weight:700;color:var(--tinta);
  letter-spacing:.01em;max-width:44ch;
}

/* El recorte sobre fondo hondo: el sujeto necesita un respaldo claro detrás,
   porque la mezcla multiplicada solo funciona contra un fondo claro. */
.seccion.honda .recorte .fondo.claro{background:#F0E4E2}
.seccion.honda .recorte .sujeto{mix-blend-mode:multiply}
.seccion.honda .recorte{background:#F0E4E2;border-radius:1.5rem;overflow:hidden;padding-top:2rem}
.seccion.honda .recorte .fondo{top:0;border-radius:1.5rem}
.seccion.honda .recorte .rotulo{background:#fff;color:var(--tinta);border-color:transparent}
.seccion.honda .evento{border-color:rgba(246,242,247,.18)}
.seccion.honda .evento .cuando{background:rgba(255,255,255,.08);border-color:rgba(246,242,247,.2)}
.seccion.honda .evento .cuando .dia{color:#FFF}
.seccion.honda .evento .cuando .mes{color:rgba(246,242,247,.6)}
.seccion.honda .evento .que h4{color:#FFF}
.seccion.honda .solo-miembros{background:#FFF;color:var(--hondo)}
.seccion.honda .marca-repuesto{background:rgba(255,255,255,.9);color:var(--hondo);border-color:transparent}

/* =============================================================================
   COMPOSICIÓN — bloques que se habían perdido al reescribir la hoja
   ========================================================================== */

/* --- Sangrado: la imagen sale del contenedor y toca el borde --- */
.sangra-der{margin-right:calc(50% - 50vw)}
.sangra-izq{margin-left:calc(50% - 50vw)}
.sangra-total{width:100vw;margin-left:calc(50% - 50vw)}
@media (max-width:900px){ .sangra-der,.sangra-izq{margin-right:-1.5rem;margin-left:-1.5rem} }

/* --- Escena: foto a sangre con el texto encima --- */
.escena{
  position:relative;min-height:min(70vh,34rem);max-height:44rem;
  display:flex;align-items:flex-end;overflow:hidden;
}
.escena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.08)}
.escena::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 38%,
    rgba(255,255,255,.5) 68%,rgba(255,255,255,.25) 100%)}
.escena .dentro{position:relative;z-index:2;padding:var(--e4) 0;color:var(--tinta);
  max-width:var(--ancho);margin:0 auto;width:100%;padding-left:1.5rem;padding-right:1.5rem}
.escena .titulo{color:var(--tinta);max-width:14ch}
.escena p{color:var(--tinta-2);margin-top:1.25rem;max-width:34ch}

/* --- Collage: fotos de distintos tamaños, no una cuadrícula --- */
.collage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:start}
.collage .f1{grid-column:1 / span 6}
.collage .f1 img{aspect-ratio:4/5}
.collage .f2{grid-column:8 / span 5;margin-top:5rem}
.collage .f2 img{aspect-ratio:1}
.collage .f3{grid-column:2 / span 4;margin-top:-2rem}
.collage .f3 img{aspect-ratio:3/4}
.collage .f4{grid-column:7 / span 6;margin-top:-8rem}
.collage .f4 img{aspect-ratio:16/11}
.collage-indicador{display:none}
@media (max-width:860px){
  .collage{
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:min(86vw,22rem);gap:1rem;align-items:stretch;
    overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:1.5rem;padding:0 1.5rem 1rem;margin-left:-1.5rem;margin-right:-1.5rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .collage::-webkit-scrollbar{display:none}
  .collage .figura{
    grid-column:auto;margin-top:0;scroll-snap-align:start;scroll-snap-stop:always;
    min-width:0;aspect-ratio:4/5;border-radius:var(--r);background:var(--papel)
  }
  .collage .figura img,
  .collage .f1 img,.collage .f2 img,.collage .f3 img,.collage .f4 img{
    width:100%;height:100%;aspect-ratio:4/5;object-fit:cover
  }
  .collage-indicador{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin-top:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--tinta-3)
  }
  .collage-indicador strong{color:var(--tinta);font-size:.9rem;font-weight:500}
  .collage-desliza{display:inline-flex;align-items:center;gap:.5rem}
  .collage-desliza span{font-size:1rem;line-height:1;color:var(--tinta)}
}

/* --- Citas grandes, escalonadas y sin caja --- */
.cita-grande{max-width:34rem}
.cita-grande blockquote{margin:0;font-family:var(--display);font-weight:200;
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.18;letter-spacing:-.02em;color:var(--tinta)}
.cita-grande .quien{margin-top:1.5rem;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3)}
.citas{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:var(--e5) var(--e4);padding-top:var(--e3)}
.citas > *:nth-child(2){margin-top:var(--e4)}
.citas > *:nth-child(3){margin-top:calc(var(--e4) * 2)}
@media (max-width:860px){ .citas > *{margin-top:0 !important} .citas{gap:var(--e4)} }

/* --- Cartelera de horarios --- */
.cartelera{border-top:1px solid var(--tinta)}
.cartelera .fila-clase{
  display:grid;grid-template-columns:6rem 1fr auto auto;gap:1.25rem;align-items:center;
  padding:1.1rem 0;border-bottom:1px solid var(--linea);
  transition:background var(--rapido) ease,padding-left var(--rapido) var(--curva);
}
@media (hover:hover){ .cartelera .fila-clase:hover{background:var(--crema);padding-left:.75rem} }
.cartelera .hora{font-family:var(--display);font-weight:200;font-size:1.5rem;letter-spacing:-.02em}
.cartelera .que{font-size:.95rem}
.cartelera .que small{display:block;color:var(--tinta-3);font-size:.8rem}
.cartelera .cupo{font-size:.76rem;font-weight:700;white-space:nowrap}
@media (max-width:700px){
  .cartelera .fila-clase{grid-template-columns:4.5rem 1fr;gap:.5rem 1rem}
  .cartelera .cupo{grid-column:2}
  .cartelera .fila-clase .btn{grid-column:2;justify-self:start;margin-top:.4rem}
}

/* --- Prueba social --- */
.prueba{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.88rem;color:var(--tinta-2)}
.prueba .estrellitas{color:#C9922B;letter-spacing:.06em;font-size:.95rem}
.prueba strong{color:var(--tinta);font-weight:700}

/* --- Beneficios en pastillas con ícono --- */
.beneficios{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.beneficio{
  border:1px solid var(--linea);border-radius:999px;padding:.7rem 1.35rem;
  display:inline-flex;flex-direction:row;align-items:center;gap:.55rem;
  transition:background var(--rapido) ease,color var(--rapido) ease,transform var(--rapido) var(--curva);
}
.beneficio svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.5;flex:0 0 auto}
.beneficio span{font-size:.88rem;font-weight:500;white-space:nowrap}
@media (hover:hover){ .beneficio:hover{border-color:var(--tinta);transform:translateY(-1px)} }

/* --- Escaparate: las clases con su foto o su video --- */
.escaparate{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,26rem);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1.5rem;
  padding:.25rem 1.5rem 1.25rem;margin:0 -1.5rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.escaparate::-webkit-scrollbar{display:none}
.tarjeta-clase{
  scroll-snap-align:start;position:relative;border-radius:1.5rem;overflow:hidden;
  min-height:27rem;display:flex;flex-direction:column;justify-content:flex-start;
  padding:1.85rem;text-decoration:none;color:var(--tinta);isolation:isolate;
}
.tarjeta-clase img,.tarjeta-clase video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:brightness(1.03);transition:transform .9s var(--curva);
}
.tarjeta-clase::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.18) 32%,
    rgba(255,255,255,.06) 62%,rgba(255,255,255,.76) 100%)}
.tarjeta-clase .intensidad{font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-2)}
.tarjeta-clase .nombre-clase{font-family:var(--display);font-weight:200;font-size:2rem;
  letter-spacing:-.02em;margin-top:.35rem;line-height:1.05}
.tarjeta-clase .abajo{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tarjeta-clase .duracion{font-size:.78rem;font-weight:700;color:var(--tinta);
  background:rgba(255,255,255,.9);padding:.35rem .8rem;border-radius:999px;border:1px solid var(--linea)}
.tarjeta-clase .ir{background:var(--tinta);color:#fff;padding:.55rem 1.1rem;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
@media (hover:hover){ .tarjeta-clase:hover img,.tarjeta-clase:hover video{transform:scale(1.05)} }
@media (min-width:900px){
  .escaparate{grid-auto-columns:1fr;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
    overflow:visible;padding:0;margin:0;scroll-snap-type:none}
}

/* --- Clase destacada con video --- */
.clase-destacada{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--e5);align-items:center}
@media (max-width:900px){ .clase-destacada{grid-template-columns:1fr;gap:var(--e4)} }
.clase-destacada .marco-video{position:relative;border-radius:1.5rem;overflow:hidden;background:var(--crema)}
.clase-destacada .marco-video video,
.clase-destacada .marco-video img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.clase-destacada .datos{font-size:.98rem;font-weight:700;color:var(--tinta);margin-bottom:1rem}

/* --- Comunidad --- */
.comunidad{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e5);align-items:center}
@media (max-width:860px){ .comunidad{grid-template-columns:1fr;gap:var(--e4)} }

/* --- El sujeto que sale del marco --- */
.recorte{position:relative;isolation:isolate}
.recorte .fondo{position:absolute;left:0;right:0;bottom:0;top:12%;background:#F3E7E4;border-radius:1.5rem;z-index:1}
.recorte .sujeto{position:relative;z-index:2;display:block;width:100%;
  mix-blend-mode:multiply}
.recorte .rotulo{position:absolute;z-index:3;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:#fff;border:1px solid var(--linea);padding:.55rem 1.1rem;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* --- Vitrina de productos con foto de fondo --- */
.vitrina{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.vitrina a{position:relative;display:flex;align-items:flex-end;justify-content:center;
  min-height:20rem;border-radius:1.5rem;overflow:hidden;text-decoration:none;
  padding:1.75rem 1.25rem;isolation:isolate}
.vitrina a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:brightness(1.03);transition:transform .8s var(--curva)}
.vitrina a::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.94) 100%)}
.vitrina a .nombre{position:absolute;left:0;right:0;bottom:5.5rem;text-align:center;color:var(--tinta);
  font-family:var(--display);font-weight:200;font-size:1.9rem;letter-spacing:-.02em}
.vitrina a .accion{background:var(--tinta);color:#fff;padding:.75rem 1.6rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:transform var(--rapido) var(--curva)}
@media (hover:hover){ .vitrina a:hover img{transform:scale(1.06)} .vitrina a:hover .accion{transform:translateY(-2px)} }

/* --- Testimonio con retrato --- */
.testi{background:#fff;border:1px solid var(--linea);border-radius:1.25rem;
  padding:2.75rem 1.5rem 1.5rem;text-align:center;position:relative;margin-top:2.25rem}
.testi .retrato{position:absolute;top:-2.25rem;left:50%;transform:translateX(-50%);
  width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;border:3px solid var(--papel);
  box-shadow:0 4px 16px rgba(51,37,58,.12);background:var(--crema)}
.testi .retrato img{width:100%;height:100%;object-fit:cover}
.testi .estrellitas{color:#C9922B;font-size:1rem;letter-spacing:.1em;margin-bottom:.75rem}
.testi blockquote{margin:0;font-size:1.02rem;line-height:1.5;color:var(--tinta)}
.testi .quien{margin-top:1rem;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3)}

/* --- Barra fija de reserva en celular --- */
.barra-flotante{display:none}
@media (max-width:760px){
  .barra-flotante{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:.5rem;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--linea);
  }
  .barra-flotante .btn{flex:1;padding:.85rem 1rem;font-size:.72rem}
  body{padding-bottom:4.5rem}
}

/* --- Marca de material provisional --- */
.marca-repuesto{
  position:absolute;top:.75rem;right:.75rem;z-index:5;
  background:rgba(255,255,255,.94);color:var(--tinta-2);border:1px solid var(--linea);
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;pointer-events:none;
}
body.sin-marcas .marca-repuesto{display:none}

/* =============================================================================
   PIEZAS QUE FALTABAN — vistas en las páginas completas
   ========================================================================== */

/* --- Preguntas en acordeón (New York Pilates) --- */
.acordeon{border-top:1px solid var(--tinta)}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-size:1.05rem;color:var(--tinta);font-weight:500;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:.7rem;height:.7rem;
  border-right:1.5px solid var(--tinta-2);border-bottom:1.5px solid var(--tinta-2);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--rapido) var(--curva);
}
.acordeon details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acordeon summary:hover{color:var(--tinta)}
.acordeon .respuesta{padding:0 2.5rem 1.5rem 0;color:var(--tinta-2);max-width:60ch}

/* --- Cita gigante: una pausa visual entre secciones --- */
.cita-pausa{text-align:center;max-width:44rem;margin:0 auto}
.cita-pausa blockquote{
  margin:0;font-family:var(--display);font-weight:200;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.12;letter-spacing:-.025em;color:var(--tinta);
}
.cita-pausa .quien{margin-top:1.75rem;font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-3)}

/* --- Texto largo a dos columnas, para las páginas de contenido --- */
.dos-columnas{columns:2;column-gap:var(--e5);max-width:none}
.dos-columnas p{max-width:none;break-inside:avoid}
@media (max-width:820px){ .dos-columnas{columns:1} }

/* --- Mapa y datos de la sede (Lady Life Pilates) --- */
.ubicacion{display:grid;grid-template-columns:1.15fr .85fr;min-height:26rem}
.ubicacion .mapa{position:relative;background:var(--crema)}
.ubicacion .mapa iframe{width:100%;height:100%;border:0;display:block;min-height:26rem}
.ubicacion .mapa .sin-mapa{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;color:var(--tinta-3);
}
.ubicacion .datos{background:var(--hondo);color:#F6F2F7;padding:var(--e5) var(--e4);
  display:flex;flex-direction:column;justify-content:center}
.ubicacion .datos .titulo{color:#fff}
.ubicacion .datos p{color:rgba(246,242,247,.8)}
.ubicacion .datos .linea-dato{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.1rem;font-size:.96rem}
.ubicacion .datos .linea-dato .etiqueta-dato{
  flex:0 0 5.5rem;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,242,247,.5);padding-top:.2rem;
}
.ubicacion .datos a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.ubicacion .datos a:hover{border-color:#fff}
@media (max-width:900px){
  .ubicacion{grid-template-columns:1fr}
  .ubicacion .mapa iframe,.ubicacion .mapa{min-height:18rem}
  .ubicacion .datos{padding:var(--e4) 1.5rem}
}

/* --- Pie con los datos completos --- */
.pie-sitio .contacto-pie{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.pie-sitio .contacto-pie .dato-pie{display:flex;gap:.6rem;align-items:flex-start}
.pie-sitio .contacto-pie .dato-pie span:first-child{color:var(--tinta-3);flex:0 0 auto}

/* --- La Λ del logo como divisor entre bloques ---
   Sin tamaño explícito el SVG se expande a su tamaño por defecto y se ve como
   un triángulo enorme. Va acotado y con relleno vacío. */
.divisor-lam{display:flex;align-items:center;gap:1.25rem;padding:var(--e4) 0}
.divisor-lam::before,.divisor-lam::after{content:"";flex:1;height:1px;background:var(--linea)}
.divisor-lam svg{
  height:.9rem;width:.9rem;flex:0 0 auto;
  fill:none;stroke:var(--tinta-3);stroke-width:9;stroke-linejoin:miter;
}

/* --- Etiqueta de ahorro en los precios --- */
.ahorro{
  display:inline-flex;align-items:center;gap:.4rem;background:#FBEEF3;color:var(--acento);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;padding:.25rem .6rem;border-radius:999px;
  white-space:nowrap;
}

/* --- El arroba de Instagram sobre el título de la galería --- */
.arroba{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:.6rem;
}

/* --- Fila alterna en tablas de contenido --- */
.alterna:nth-child(even){background:var(--crema)}

/* =============================================================================
   COMUNIDAD — rediseñada con estructura propia
   Los eventos en tarjetas legibles y la foto con marco, en vez de texto suelto
   flotando sobre el fondo.
   ========================================================================== */
.agenda-eventos{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--e5);align-items:start}
@media (max-width:900px){ .agenda-eventos{grid-template-columns:1fr;gap:var(--e4)} }

.lado-eventos .evento{
  display:grid;grid-template-columns:4.2rem 1fr;gap:1.25rem;align-items:start;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:1rem;padding:1.15rem 1.35rem;margin-bottom:.75rem;
  transition:background var(--rapido) ease,border-color var(--rapido) ease;
}
.lado-eventos .evento:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
.lado-eventos .evento .cuando{
  background:#fff;border-radius:.7rem;padding:.55rem .3rem;text-align:center;
}
.lado-eventos .evento .cuando .dia{
  font-family:var(--display);font-weight:300;font-size:1.65rem;line-height:1;color:var(--hondo);
}
.lado-eventos .evento .cuando .mes{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);margin-top:.15rem;
}
.lado-eventos .evento .que h4{
  font-size:1.02rem;font-weight:500;color:#fff;margin:0 0 .3rem;line-height:1.3;
}
.lado-eventos .evento .que p{
  margin:0;font-size:.9rem;line-height:1.45;color:rgba(247,244,249,.72);max-width:44ch;
}
.lado-eventos .evento .detalle-evento{
  margin-top:.5rem !important;font-size:.78rem;color:rgba(247,244,249,.5);
  letter-spacing:.04em;
}
.solo-miembros{
  display:inline-block;background:#fff;color:var(--hondo);
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:999px;margin-left:.5rem;vertical-align:middle;
}

.lado-foto{position:relative;border-radius:1.5rem;overflow:hidden;background:#F0E6EC}
.lado-foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
}
.lado-foto .sello-foto{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:#fff;color:var(--hondo);padding:.6rem 1.25rem;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.seccion.honda .lado-foto .marca-repuesto{background:rgba(255,255,255,.92);color:var(--hondo);border-color:transparent}

/* --- Numeración de sección, marca de revista ---
   Sin esta regla el número queda pegado al nombre: "06La comunidad". */
.seccion-num{
  display:flex;align-items:baseline;gap:1rem;margin-bottom:var(--e3);
  border-top:1px solid var(--tinta);padding-top:.85rem;
}
.seccion-num .cifra{
  font-family:var(--display);font-weight:300;font-size:.95rem;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;flex:0 0 auto;color:var(--tinta-2);
}
.seccion-num .nombre{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-2);flex:0 0 auto;
}
.seccion-num .linea{flex:1;height:1px;background:var(--linea);align-self:center}

/* ── Dónde estamos ───────────────────────────────────────────────────────────
   Dos columnas: el texto que convence y los tiempos que resuelven. Quien duda si
   le queda de camino mira los números antes que el párrafo. */
.donde{
  display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:start;
  max-width:62rem;margin:0 auto;
}
.donde-texto p{margin:0 0 1.1rem;line-height:1.7}
.donde-texto p:last-of-type{margin-bottom:1.5rem}
.donde .direccion-grande{
  font-family:"Fraunces",Georgia,serif;font-size:1.5rem;line-height:1.3;
  margin-bottom:.15rem;
}
.donde .suave{opacity:.65;font-size:.92rem}

.donde-tiempos{
  background:var(--crema);border-radius:14px;padding:1.6rem 1.5rem;
}
.donde-tiempos .rotulo-lista{
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  margin:0 0 1rem;opacity:.55;
}
.donde-tiempos dl{margin:0}
.donde-tiempos .tiempo{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.65rem 0;border-bottom:1px solid rgba(0,0,0,.07);
}
.donde-tiempos .tiempo:last-of-type{border-bottom:0}
.donde-tiempos dt{font-weight:600;font-size:.98rem}
.donde-tiempos dd{margin:0;font-size:.9rem;opacity:.7;text-align:right}
.donde-tiempos .suave{margin:1.1rem 0 0;font-size:.86rem;line-height:1.55;opacity:.6}

@media (max-width:56rem){
  .donde{grid-template-columns:1fr;gap:2rem}
}

/* ── Pilates en Pánuco ───────────────────────────────────────────────────────
   Texto que convence a la izquierda, datos que resuelven a la derecha. Quien
   está decidiendo lee el párrafo; quien ya casi decide busca las cifras. */
.local{
  display:grid;grid-template-columns:1.35fr 1fr;gap:3rem;align-items:start;
  max-width:64rem;margin:0 auto;
}
.local-texto p{margin:0 0 1.15rem;line-height:1.75;font-size:1.02rem}
.local-texto p:last-child{margin-bottom:0}

.local-datos{
  background:var(--crema-2);border-radius:14px;padding:1.7rem 1.6rem;
}
.local-datos .rotulo-lista{
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  margin:0 0 1.1rem;opacity:.55;
}
.local-datos dl{margin:0 0 1.4rem}
.local-datos .dato-corto{
  padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.07);
}
.local-datos .dato-corto:last-of-type{border-bottom:0}
.local-datos dt{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5;
  margin-bottom:.15rem;
}
.local-datos dd{margin:0;font-weight:600;font-size:.98rem;line-height:1.35}

@media (max-width:56rem){
  .local{grid-template-columns:1fr;gap:2rem}
}

/* Cuando todavía no hay foto de una instructora. Una inicial en el tono del
   estudio es más honesto que una cara de banco de imágenes que no es la suya. */
.sin-retrato{
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1A1A1A,#2E2A26);border-radius:inherit;
}
.sin-retrato .inicial{
  font-family:"Fraunces",Georgia,serif;font-size:4rem;font-weight:300;
  color:rgba(255,255,255,.55);letter-spacing:.02em;
}

/* ── Portada de campaña ──────────────────────────────────────────────────────
   La fotografía no acompaña al mensaje: es el escenario completo. La zona
   izquierda se reservó desde la toma para que el texto pueda vivir sobre ella
   sin tapar el gesto ni lavar toda la imagen. */
.portada-campana{
  position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(42rem,calc(100svh - 7rem),58rem);overflow:hidden;
  background:#171318;color:#fff;
}
.portada-media,.portada-media picture{
  position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-3;
}
.portada-media img,.portada-media video{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  animation:portada-encuadre 1.8s var(--curva) both;
}
.portada-campana::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,14,22,.82) 0%,rgba(24,17,26,.64) 34%,rgba(24,17,26,.14) 66%,rgba(15,12,17,.2) 100%),
    linear-gradient(0deg,rgba(14,10,16,.62) 0%,transparent 35%,rgba(14,10,16,.12) 100%);
}
.portada-dicho{
  width:min(100%,var(--ancho));margin:0 auto;padding:clamp(4rem,9vw,7.5rem) 1.5rem 6rem;
  text-align:left;color:#fff;position:relative;z-index:1;
  animation:portada-entrada 1s .18s var(--curva) both;
}
.portada-dicho .prueba{
  justify-content:flex-start;color:rgba(255,255,255,.78);margin-bottom:1.35rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.portada-dicho .display{
  color:#fff;font-size:clamp(4rem,8.5vw,7.7rem);line-height:.89;letter-spacing:-.045em;
  margin:0;max-width:7.2ch;text-wrap:balance;text-shadow:0 2px 32px rgba(0,0,0,.18);
}
.portada-dicho .lema{
  font-size:clamp(1rem,1.35vw,1.18rem);color:rgba(255,255,255,.8);
  margin:1.5rem 0 0;max-width:39ch;line-height:1.55;
}
.portada-dicho .botones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.2rem}
.portada-campana .btn-solido{background:#fff;color:var(--tinta);border-color:#fff}
.portada-campana .btn-solido:hover{background:var(--crema);border-color:var(--crema);color:var(--tinta)}
.portada-campana .btn-claro{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.62);backdrop-filter:blur(8px)}
.portada-campana .btn-claro:hover{background:rgba(255,255,255,.16)}
.portada-dicho .abajo-nota{margin-top:1.35rem;font-size:.82rem;color:rgba(255,255,255,.65)}
.portada-dicho .abajo-nota strong{color:#fff}
.portada-pie{
  position:absolute;z-index:2;left:1.5rem;right:1.5rem;bottom:1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.8rem;border-top:1px solid rgba(255,255,255,.38);
  color:rgba(255,255,255,.68);font-size:.64rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.portada-pie .firma{
  color:rgba(255,255,255,.9);font-family:var(--display);font-size:.95rem;
  font-style:italic;font-weight:300;letter-spacing:.01em;text-transform:none;
}
@keyframes portada-encuadre{from{transform:scale(1.045);filter:brightness(.78)}to{transform:scale(1);filter:brightness(1)}}
@keyframes portada-entrada{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:56rem){
  .portada-campana{min-height:clamp(43rem,82svh,50rem);align-items:flex-start}
  .portada-media img,.portada-media video{object-position:center center}
  .portada-campana::before{
    background:linear-gradient(180deg,rgba(17,12,18,.58) 0%,rgba(17,12,18,.2) 42%,rgba(17,12,18,.75) 100%);
  }
  .portada-dicho{padding:3.75rem 1.25rem 6.5rem}
  .portada-dicho .display{font-size:clamp(3.45rem,15vw,5.5rem);max-width:7ch}
  .portada-dicho .lema{font-size:.98rem;max-width:31ch}
  .portada-pie{left:1.25rem;right:1.25rem;font-size:.56rem;letter-spacing:.13em}
  .portada-pie .firma{font-size:.82rem;text-align:right}
}

@media (max-width:390px){
  .portada-dicho .display{font-size:3.35rem}
  .portada-pie .firma{display:none}
}

/* Inicial en lugar de retrato, mientras los testimonios sean de ejemplo. */
.testi .inicial-testi{
  display:flex;align-items:center;justify-content:center;
  background:var(--crema-2);color:var(--tinta-2);
  font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:400;
}