@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../../fuentes/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../../fuentes/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../../fuentes/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600 800; font-stretch: 75% 100%; font-display: swap; src: url("../../fuentes/bricolage-grotesque-latin.woff2") format("woff2"); }
/* Estudio Nerea: índigo profundo, menta y lavanda. Ordenado como una agenda. */
:root {
  --fondo: #f4f3f9; --superficie: #ffffff; --tinta: #1d1a2e; --suave: #57526e; --linea: #dcd9ea;
  --marca: #3a3480; --marca-tinta: #ffffff; --menta: #c9f0e3; --menta-tinta: #0f2a22; --ocupado: #8e8aa3;
  --titulos: "Bricolage Grotesque", Georgia, serif; --texto: "Barlow", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fondo: #13111f; --superficie: #1c192c; --tinta: #eeecf8; --suave: #b3aecb; --linea: #2f2b45;
  --marca: #a9a3f2; --marca-tinta: #13111f; --menta: #1f4a3d; --menta-tinta: #d6f7ec; --ocupado: #7c7893; color-scheme: dark; } }
:root[data-theme="dark"] { --fondo: #13111f; --superficie: #1c192c; --tinta: #eeecf8; --suave: #b3aecb; --linea: #2f2b45; --marca: #a9a3f2; --marca-tinta: #13111f; --menta: #1f4a3d; --menta-tinta: #d6f7ec; --ocupado: #7c7893; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1.05rem/1.5 var(--texto); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
.aviso { background: var(--tinta); color: var(--fondo); text-align: center; font-size: 0.9rem; padding: 9px 16px; }
.aviso a { color: inherit; font-weight: 700; }
.envoltura { max-width: 1040px; margin: 0 auto; padding-inline: 20px; }
header.estudio { padding-block: 40px 28px; display: grid; gap: 8px; }
.estudio h1 { margin: 0; font: 700 clamp(2.8rem, 10vw, 5rem)/0.9 var(--titulos); letter-spacing: -0.03em; font-stretch: 90%; }
.estudio p { margin: 0; color: var(--suave); }
.promo { margin-top: 12px; justify-self: start; background: var(--menta); color: var(--menta-tinta); border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .columnas { grid-template-columns: minmax(0, 1fr); } }
h2 { margin: 0 0 14px; font: 700 1.6rem/1.1 var(--titulos); }
.servicios { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.servicios h3 { margin: 18px 0 4px; font-size: 0.95rem; font-weight: 700; color: var(--suave); }
.servicio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.servicio strong { font-weight: 700; }
.servicio .precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.servicio small { color: var(--suave); grid-column: 1; }
.agenda { background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 22px; position: sticky; top: 16px; display: grid; gap: 18px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
legend { padding: 0; font-weight: 700; margin-bottom: 8px; }
.elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.elegir button { min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1.5px solid var(--linea); background: transparent; cursor: pointer; font-weight: 600; display: grid; justify-items: start; line-height: 1.15; }
.elegir button small { font-weight: 400; color: var(--suave); font-size: 0.8rem; }
.elegir button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }
.elegir button[aria-pressed="true"] small { color: inherit; opacity: .85; }
.elegir button:disabled { color: var(--ocupado); text-decoration: line-through; cursor: not-allowed; }
.horarios button { min-width: 72px; justify-items: center; font-variant-numeric: tabular-nums; }
label.nombre { display: grid; gap: 6px; font-weight: 700; }
label.nombre input { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--fondo); padding: 0 14px; font-size: 16px; }
.resumen { background: var(--fondo); border-radius: 12px; padding: 12px 14px; color: var(--suave); }
.resumen strong { color: var(--tinta); }
.pedir { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font-weight: 700; text-decoration: none; }
.pedir[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.nota { font-size: 0.88rem; color: var(--suave); margin: 0; }
.info { margin-block: 48px 40px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--tinta); padding-top: 24px; }
.info h3 { margin: 0 0 6px; font: 700 1.1rem/1.2 var(--titulos); }
.info p { margin: 0; color: var(--suave); }
.pie { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--suave); font-size: 0.9rem; }