/* EOS Estudio de Pilates — web pública. Solo modo claro. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/montserrat-latin-wght-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --beige-claro: #ece6e0;
  --blanco-calido: #f7f4f0;
  --beige-arena: #d8cec3;
  --topo: #b9aa9a;
  --tinta: #37332f;
  --tinta-suave: #5c5550;
  --arena: #bfa691;
  --bronce: #8a653f;
  --bronce-hondo: #6f5032;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho: 72rem;
  --ancho-texto: 40rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --espacio-seccion: clamp(4rem, 9vw, 7.5rem);
  --radio: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--beige-claro);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bronce-hondo); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--bronce); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--arena); color: var(--tinta); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 1rem; letter-spacing: -0.005em; color: var(--tinta); }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 300; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 300; }
h3 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 400; }
p { margin: 0 0 1.1rem; }
em, .cursiva { font-family: var(--serif); font-style: italic; font-weight: 400; }
ul { padding: 0; margin: 0; list-style: none; }

.saltar { position: absolute; left: 1rem; top: -4rem; background: var(--tinta); color: var(--blanco-calido); padding: 0.7rem 1.1rem; border-radius: 0.5rem; z-index: 100; transition: top 0.15s; }
.saltar:focus { top: 1rem; color: var(--blanco-calido); }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.texto { max-width: var(--ancho-texto); }
.centrado { text-align: center; margin-inline: auto; }
.etiqueta { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 1.1rem; }
.bajada { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--tinta-suave); line-height: 1.75; }
.hilo { display: block; width: 1px; height: 3.5rem; background: var(--tinta); opacity: 0.55; margin: 0 auto 1.6rem; }
.hilo--izq { margin-left: 0; }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.8rem 1.7rem; border-radius: 999px; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; border: 1px solid var(--bronce); background: var(--bronce); color: var(--blanco-calido); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.boton:hover { background: var(--bronce-hondo); border-color: var(--bronce-hondo); color: var(--blanco-calido); }
.boton--lineal { background: transparent; color: var(--bronce-hondo); }
.boton--lineal:hover { background: var(--bronce); color: var(--blanco-calido); }
.boton--inactivo { background: transparent; color: var(--tinta-suave); border-color: var(--topo); cursor: default; }
.boton--inactivo:hover { background: transparent; color: var(--tinta-suave); border-color: var(--topo); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* Encabezado */
.encabezado { position: sticky; top: 0; z-index: 50; background: rgba(247, 244, 240, 0.94); border-bottom: 1px solid var(--beige-arena); }
@supports (backdrop-filter: blur(8px)) { .encabezado { background: rgba(247, 244, 240, 0.82); backdrop-filter: blur(12px); } }
.encabezado__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.25rem; }
.marca { display: inline-flex; align-items: center; line-height: 0; }
.marca img { height: 4rem; width: auto; }
.nav__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 2rem; }
.nav__lista a { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid transparent; }
.nav__lista a:hover, .nav__lista a[aria-current="page"] { color: var(--bronce-hondo); border-bottom-color: var(--bronce); }
.nav__boton { display: none; }

@media (max-width: 54rem) {
  .js .nav__boton { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: transparent; border: 1px solid var(--beige-arena); border-radius: 999px; color: var(--tinta); cursor: pointer; }
  .nav__boton span, .nav__boton span::before, .nav__boton span::after { display: block; width: 1.15rem; height: 1px; background: currentColor; position: relative; transition: transform 0.2s, top 0.2s; }
  .nav__boton span::before, .nav__boton span::after { content: ""; position: absolute; left: 0; }
  .nav__boton span::before { top: -0.36rem; }
  .nav__boton span::after { top: 0.36rem; }
  .nav__boton[aria-expanded="true"] span { background: transparent; }
  .nav__boton[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav__boton[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  .js .nav__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco-calido); border-bottom: 1px solid var(--beige-arena); padding: 1.2rem var(--gutter) 1.8rem; }
  .js .nav__panel.abierto { display: block; }
  .nav__lista { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .nav__lista a { font-size: 0.95rem; padding: 0.7rem 0; }
  .encabezado__fila { position: relative; }
  .encabezado .contenedor { position: static; }
  .encabezado { position: sticky; }
}

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--espacio-seccion); overflow: hidden; }
.hero__grilla { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (min-width: 54rem) { .hero__grilla { grid-template-columns: 1.1fr 0.9fr; } }
.hero h1 { margin-bottom: 1.6rem; }
.hero__lugar { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 2.2rem; margin-bottom: 0; }
.arco { margin: 0; border-radius: 999px 999px var(--radio) var(--radio); overflow: hidden; background: var(--beige-arena); }
.arco img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.hero .arco { max-width: 26rem; margin-inline: auto; }
@media (min-width: 54rem) { .hero .arco { margin-inline: 0 0; justify-self: end; width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * { animation: aparece 0.9s ease both; }
  .hero__texto > *:nth-child(2) { animation-delay: 0.08s; }
  .hero__texto > *:nth-child(3) { animation-delay: 0.16s; }
  .hero__texto > *:nth-child(4) { animation-delay: 0.24s; }
  .hero .arco { animation: aparece 1.1s 0.1s ease both; }
  @keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Secciones */
.seccion { padding-block: var(--espacio-seccion); }
.seccion--calida { background: var(--blanco-calido); border-block: 1px solid var(--beige-arena); }
.seccion__cabecera { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.dos-columnas { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (min-width: 54rem) { .dos-columnas { grid-template-columns: 1fr 1fr; } .dos-columnas--invertida > :first-child { order: 2; } }

.valores { display: grid; gap: 1.6rem 2.5rem; margin-top: 2rem; }
@media (min-width: 40rem) { .valores { grid-template-columns: 1fr 1fr; } }
.valores li { border-top: 1px solid var(--beige-arena); padding-top: 1rem; }
.valores strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; margin-bottom: 0.3rem; }
.valores span { color: var(--tinta-suave); font-size: 0.95rem; }

/* Galería */
.galeria { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
.galeria figure { margin: 0; overflow: hidden; border-radius: var(--radio); background: var(--beige-arena); aspect-ratio: 4 / 3; }
.galeria img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.galeria .g-ancha { grid-column: span 2; }
@media (min-width: 54rem) {
  .galeria { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; gap: 1.1rem; }
  .galeria figure { aspect-ratio: auto; }
  .galeria .g-alta { grid-row: span 2; }
}

/* Clases */
.clases { display: grid; gap: 1.5rem; }
@media (min-width: 54rem) { .clases { grid-template-columns: 1.25fr 1fr; } }
.tarjeta { background: var(--blanco-calido); border: 1px solid var(--beige-arena); border-radius: var(--radio); padding: clamp(1.6rem, 4vw, 2.6rem); }
.seccion--calida .tarjeta { background: var(--beige-claro); }
.tarjeta h3 { margin-bottom: 0.7rem; }
.tarjeta__tag { display: inline-block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronce-hondo); border: 1px solid var(--arena); border-radius: 999px; padding: 0.25rem 0.8rem; margin-bottom: 1.1rem; }
.lista-linea li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-bottom: 1px solid var(--beige-arena); }
.lista-linea li:last-child { border-bottom: 0; }
.lista-linea li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 0.7rem; height: 1px; background: var(--bronce); }

.preguntas { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 54rem) { .preguntas { grid-template-columns: repeat(3, 1fr); } }
.pregunta { border-top: 1px solid var(--tinta); padding-top: 1.2rem; }
.pregunta h3 { font-size: 1.6rem; }
.pregunta p { color: var(--tinta-suave); margin: 0; }

.banda { position: relative; padding-block: clamp(4.5rem, 12vw, 9rem); text-align: center; background: var(--beige-arena) url("/img/luz-hojas-940.webp") center / cover no-repeat; }
.banda p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.2; max-width: 22ch; margin: 0 auto; }
.banda .hilo { margin-bottom: 1.6rem; }
.banda .hilo--abajo { margin: 1.6rem auto 0; }

/* Horarios y contacto */
.horarios { width: 100%; border-collapse: collapse; }
.horarios th, .horarios td { text-align: left; padding: 1rem 0; border-bottom: 1px solid var(--beige-arena); vertical-align: top; font-weight: 400; }
.horarios th { font-family: var(--serif); font-size: 1.35rem; padding-right: 1.5rem; white-space: nowrap; }
.horarios td { color: var(--tinta-suave); }
.horarios td .tramo { display: block; }
.contacto-lista { display: grid; gap: 1.6rem; }
.contacto-lista dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.3rem; }
.contacto-lista dd { margin: 0; font-size: 1.1rem; }
.contacto-lista a { font-weight: 500; }

/* Portal */
.portal { text-align: center; }
.portal .texto { margin-inline: auto; }
.portal .acciones { justify-content: center; }

/* Páginas de texto (legales y respaldos) */
.pagina { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--espacio-seccion); }
.pagina h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.pagina h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--beige-arena); }
.pagina h3 { font-size: 1.35rem; margin-top: 1.8rem; }
.pagina ul.puntos { list-style: none; margin: 0 0 1.2rem; }
.pagina ul.puntos li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.pagina ul.puntos li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.7rem; height: 1px; background: var(--bronce); }
.migas { font-size: 0.82rem; color: var(--tinta-suave); margin-bottom: 2rem; }
.migas a { color: var(--tinta-suave); }
.aviso { border: 1px solid var(--arena); background: var(--blanco-calido); border-radius: var(--radio); padding: 1.1rem 1.4rem; margin: 0 0 2.2rem; font-size: 0.95rem; }
.aviso strong { font-weight: 600; }
.pendiente { background: rgba(191, 166, 145, 0.28); border-radius: 0.3rem; padding: 0.05rem 0.4rem; font-weight: 500; color: var(--bronce-hondo); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1rem 0 1.6rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--beige-arena); }
.tabla th { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.tabla-envoltura { overflow-x: auto; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.86em; background: var(--blanco-calido); border: 1px solid var(--beige-arena); border-radius: 0.3rem; padding: 0.1rem 0.4rem; word-break: break-all; }
.indice { background: var(--blanco-calido); border: 1px solid var(--beige-arena); border-radius: var(--radio); padding: 1.3rem 1.6rem; margin-bottom: 2rem; }
.indice strong { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.6rem; }
.indice ol { margin: 0; padding-left: 1.2rem; }
.indice li { margin-bottom: 0.2rem; }

/* Pie */
.pie { background: var(--blanco-calido); border-top: 1px solid var(--beige-arena); padding-block: 3.5rem 2.5rem; font-size: 0.92rem; }
.pie__grilla { display: grid; gap: 2.2rem; }
@media (min-width: 48rem) { .pie__grilla { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 0.9rem; border: 0; padding: 0; margin-top: 0; }
.pie li { margin-bottom: 0.4rem; }
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--bronce-hondo); text-decoration: underline; }
.pie__marca { max-width: 22rem; color: var(--tinta-suave); }
.pie__marca img { height: 4.2rem; width: auto; margin-bottom: 1rem; }
.pie__base { border-top: 1px solid var(--beige-arena); margin-top: 2.5rem; padding-top: 1.4rem; color: var(--tinta-suave); font-size: 0.82rem; }

@media print {
  .encabezado, .pie, .saltar, .acciones { display: none; }
  body { background: #fff; }
}

.sr-fuera { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }