/* Pilates Mood — la página pública del club (etapa 1, 7-nov-2026).
   El diseño de miraloquehago (Microtiendas/sitio/comun.css): Nunito, blanco, un solo color, poco texto, botones anchos
   con texto. Para el teléfono (375 px); en la computadora, la misma columna en el centro.
   ⛔ Base 17 px, nada por debajo de 14 px. ⚠️ El @media va al final. */
:root{
  --fuerte:#152A43; --banda:#E6ECF2; --linea:#E4E8ED; --suave:#F5F7F9;
  --texto:#0F1721; --texto-2:#6B7684;
  --ff:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --t-chico:15px; --t-base:17px; --t-grande:20px; --t-titulo:27px; --t-numero:37px;
  --alto-boton:52px; --r:8px;
  --sombra:0 0 0 1px var(--linea), 0 1px 3px rgba(15,23,33,.08);
  --columna:600px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--suave); color:var(--texto); font-family:var(--ff); font-size:var(--t-base); line-height:1.5}
.telefono{max-width:var(--columna); min-height:100vh; margin:0 auto; background:#fff; box-shadow:0 0 0 1px var(--linea); overflow-x:clip}
h1,h2{margin:0; font-weight:800; line-height:1.2; color:var(--fuerte)}
h1{font-size:var(--t-numero)}
h2{font-size:var(--t-titulo); margin-bottom:12px}
p{margin:0 0 12px}
a{color:var(--fuerte)}
:focus-visible{outline:2px solid var(--fuerte); outline-offset:2px}

.encabezado{display:flex; align-items:center; gap:10px; min-height:64px; padding:10px 16px; border-bottom:1px solid var(--linea)}
.marca{font-size:var(--t-grande); font-weight:800; color:var(--fuerte); letter-spacing:-.2px}
.logo{display:block; width:auto; max-width:220px; height:auto; max-height:56px; object-fit:contain}

.portada{display:block; background:var(--suave)}
.portada img{display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover}

.bloque{padding:28px 16px; border-bottom:1px solid var(--linea)}
.bloque:last-of-type{border-bottom:0}
.bajada{margin:6px 0 0; color:var(--texto-2); font-size:var(--t-grande)}
/* Sin fotos: una franja con el nombre, para que la página no arranque vacía. Nada inventado. */
.presentacion.sin-fotos{padding:44px 16px 40px; background:var(--banda)}

.galeria{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.galeria a{display:block; border-radius:var(--r); overflow:hidden; background:var(--suave)}
.galeria img{display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover}

/* El horario de la semana (pregunta 26): un renglón por día, las horas en pastillas que bajan de renglón si no entran. */
.demo-nota{margin:-4px 0 8px; color:var(--texto-2); font-size:var(--t-chico)}
.horario{margin:0; padding:0; list-style:none}
.horario li{display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px 12px; align-items:start; padding:10px 0; border-bottom:1px solid var(--linea)}
.horario li:last-child{border-bottom:0}
.horario b{padding-top:5px}
.horario li > span{display:flex; flex-wrap:wrap; gap:6px}
.hora{padding:4px 10px; border-radius:999px; background:var(--banda); color:var(--fuerte); font-weight:800; font-variant-numeric:tabular-nums}

.direccion{font-size:var(--t-grande); font-weight:700}
.mapa{margin:0 0 12px; border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); background:var(--suave)}
.mapa iframe{display:block; width:100%; height:auto; aspect-ratio:4 / 3; border:0}

.boton{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:var(--alto-boton); padding:0 16px; margin:0 0 10px;
  background:#fff; color:var(--texto); border:0; border-radius:var(--r); box-shadow:var(--sombra);
  font:inherit; font-weight:800; text-decoration:none; text-align:center; cursor:pointer; overflow-wrap:anywhere}
.boton svg{flex:none; color:var(--fuerte)}
.boton:hover{box-shadow:0 0 0 1px var(--fuerte), 0 1px 3px rgba(15,23,33,.08)}

.pie{padding:20px 16px 28px; background:var(--suave); color:var(--texto-2); font-size:var(--t-chico); text-align:center}
.pie p{margin:0 0 6px}
.pie a{display:inline-block; padding:11px 0; color:var(--texto-2)}   /* ⚠️ inline-flex se come el espacio de «Creado por VIBE» */
.pie b{color:var(--texto)}
.pie .acceder{text-decoration:none; margin:4px 0 6px; padding:12px 24px; border-radius:var(--r); background:var(--texto); color:#fff; font-weight:700}

/* El visor de fotos */
.visor{width:100%; max-width:100%; height:100%; max-height:100%; margin:0; padding:0; border:0; background:rgba(15,23,33,.94)}
.visor[open]{display:flex; align-items:center; justify-content:center}
.visor::backdrop{background:rgba(15,23,33,.6)}
.visor img{max-width:100%; max-height:100%; object-fit:contain}
.visor button{position:absolute; display:grid; place-items:center; width:52px; height:52px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--texto); font:inherit; font-size:28px; font-weight:800; cursor:pointer}
.visor-cerrar{top:12px; right:12px; font-size:22px !important}
.visor-ant{left:10px; top:calc(50% - 26px)}
.visor-sig{right:10px; top:calc(50% - 26px)}
.visor.una .visor-ant, .visor.una .visor-sig{display:none}

@media (min-width:601px){
  body{padding:24px 0}
  .telefono{min-height:auto; border-radius:var(--r); overflow:hidden}
  .galeria{grid-template-columns:repeat(3, minmax(0,1fr))}
}

/* Los planes con su precio (etapa E, 11-nov-2026): nombre y detalle a la izquierda, el precio a la derecha. */
.planes-pub{margin:0; padding:0; list-style:none}
.planes-pub li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea)}
.planes-pub li:last-child{border-bottom:0}
.planes-pub li > span:first-child{display:flex; flex-direction:column; min-width:0}
.planes-pub small{color:var(--texto-2); font-size:var(--t-chico)}
.planes-pub .precio{font-weight:700; white-space:nowrap}