/* PerseFone360 — Peluquería: web pública del salón (reservar y gestionar la cita).
   ESTRUCTURA. Los colores y las fuentes llegan como variables desde el tema (src/Services/Salon/SalonTemas.php);
   la maquetación, la forma, la carta de servicios y el horario se eligen con los atributos data-* de <html>.
   Las decoraciones de cabecera viven en publico-temas.css. Móvil primero, sin frameworks. */

:root {
    /* Valores de reserva (tema «esencial»): la vista siempre vuelca los del tema elegido */
    --fondo: #f5f4f1; --tarjeta: #fff; --tarjeta2: #eeece7; --texto: #1c1f24; --suave: #555b65; --linea: #e3e1dc;
    --campo: #fff; --marca: #24324a; --marca-texto: #fff; --enlace: #24324a; --acento2: #24324a;
    --hero-fondo: #24324a; --hero-texto: #fff; --hero-btn: #fff; --hero-btn-texto: #24324a;
    --ok: #166534; --ok-fondo: #e6f4ea; --aviso: #8a3b00; --aviso-fondo: #fdf1df; --error: #b42318; --error-fondo: #fdecea;
    --sombra: 0 1px 2px rgba(20,20,20,.05), 0 8px 28px rgba(20,20,20,.07);
    --f-titulo: 'DM Serif Display', Georgia, serif; --f-texto: 'Inter', system-ui, sans-serif;
    --peso-titulo: 400; --tt-titulo: none; --ls-titulo: normal; --escala-h1: 1; --ornamento: none;
    /* Forma (la fija data-forma) */
    --radio: 18px; --radio-ctl: 12px; --borde: 0; --sombra-tarjeta: var(--sombra);
    --ancho: 760px;
    color-scheme: light;
}
[data-modo="oscuro"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
svg { flex: none; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.cab :focus-visible { outline-color: var(--hero-texto); }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tarjeta); padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra); }
.saltar:focus { top: 12px; }
.previa { background: #fde68a; color: #422006; text-align: center; padding: 10px 16px; font-size: .9rem; font-weight: 500; font-family: system-ui, sans-serif; }

h1, h2, h3, .titular { font-family: var(--f-titulo); font-weight: var(--peso-titulo); text-transform: var(--tt-titulo); letter-spacing: var(--ls-titulo); }

/* ── Cabecera ───────────────────────────────────────────────────── */
.cab { position: relative; background-color: var(--hero-fondo); color: var(--hero-texto); overflow: hidden; }
.cab-in { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; padding: 14px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cab-in:last-child { padding-bottom: 14px; }
.cab-marca { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.cab-marca span { font-weight: 600; font-size: .9rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.idiomas { display: flex; border: 1px solid color-mix(in srgb, var(--hero-texto) 45%, transparent); border-radius: 999px; overflow: hidden; flex: none; }
.idiomas a { padding: 5px 12px; font-size: .8rem; font-weight: 700; text-decoration: none; letter-spacing: .04em; font-family: system-ui, sans-serif; }
.idiomas a[aria-current="true"] { background: var(--hero-texto); color: var(--hero-fondo); }

.hero { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; padding: 26px 16px 32px; container-type: inline-size; }
/* El titular nunca parte una palabra: tope según la palabra más larga del nombre (--largo, lo pone la vista)
   y el ancho medio de la letra del tema (--ancho-letra). 100cqi = ancho de la cabecera. */
.hero h1 { --tope-h1: calc(100cqi / (var(--largo, 9) * var(--ancho-letra, .6))); }
.hero-logo { max-height: 76px; max-width: min(260px, 70%); width: auto; height: auto; object-fit: contain; margin-bottom: 18px; }
.hero h1 { font-size: min(calc(clamp(2.1rem, 8vw, 3.2rem) * var(--escala-h1)), var(--tope-h1)); line-height: 1.04; margin: 0 0 8px; overflow-wrap: anywhere; }
.hero.con-logo-nombre .hero-logo { max-height: 150px; max-width: min(340px, 86%); }
.hero-logo.placa { padding: 10px 16px; border-radius: min(var(--radio), 14px); box-sizing: content-box; }
.hero-logo.foto { border-radius: min(var(--radio), 12px); }
.hero .lugar { margin: 0 0 14px; opacity: .88; font-size: .98rem; }
.hero .desc { margin: 0 0 16px; opacity: .92; max-width: 60ch; }
.estado { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border-radius: 999px;
    background: color-mix(in srgb, var(--hero-texto) 13%, transparent); font-size: .9rem; font-weight: 500; margin: 0; }
.estado i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.3); }
.estado.abierto i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--radio-ctl);
    border: 1px solid transparent; font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; transition: transform .12s, filter .12s, background .12s; font-family: var(--f-texto); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 19px; height: 19px; }
.btn-marca { background: var(--marca); color: var(--marca-texto); }
.btn-marca:hover:not(:disabled) { filter: brightness(1.08); }
.cab .btn-marca { background: var(--hero-btn); color: var(--hero-btn-texto); }
.btn-borde { background: transparent; border-color: color-mix(in srgb, var(--texto) 25%, transparent); color: var(--texto); }
.btn-borde:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.cab .btn-borde { border-color: color-mix(in srgb, var(--hero-texto) 50%, transparent); color: var(--hero-texto); }
.cab .btn-borde:hover { background: color-mix(in srgb, var(--hero-texto) 12%, transparent); }
.btn-peligro { background: transparent; border-color: color-mix(in srgb, var(--error) 55%, transparent); color: var(--error); }
.btn-peligro.lleno { background: var(--error); border-color: var(--error); color: var(--tarjeta); }
.btn-ancho { width: 100%; }
.btn-enlace { background: none; border: 0; padding: 4px 2px; min-height: 0; color: var(--enlace); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[data-forma="duro"] .btn { border: 2px solid var(--texto); box-shadow: 3px 3px 0 var(--texto); }
[data-forma="duro"] .cab .btn { border-color: var(--hero-texto); box-shadow: 3px 3px 0 var(--hero-texto); }

/* ── Contenido ──────────────────────────────────────────────────── */
main { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 40px; }
.bloque { background: var(--tarjeta); border-radius: var(--radio); border: var(--borde); box-shadow: var(--sombra-tarjeta); padding: 20px 18px; margin-top: 16px; }
.bloque > h2 { font-size: 1.6rem; line-height: 1.15; margin: 0 0 14px; }
.bloque > h2::before { content: var(--ornamento); color: var(--marca); margin-right: .4em; font-size: .8em; vertical-align: .08em; }
[data-forma="plano"] .bloque { background: transparent; border-radius: 0; border-top: 1px solid var(--linea); padding: 26px 0 8px; margin-top: 10px; }
[data-forma="plano"] .reserva { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 6px; padding-bottom: 4px; }

.aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--aviso-fondo); color: var(--aviso); border-radius: min(var(--radio), 14px); padding: 12px 14px; margin-top: 16px; font-weight: 500; }
.aviso svg { width: 20px; height: 20px; margin-top: 2px; }
.mi-cita { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ok-fondo); color: var(--ok); border-radius: min(var(--radio), 14px); padding: 12px 14px; margin-top: 16px; font-weight: 500; }
.mi-cita a { font-weight: 700; white-space: nowrap; }

/* Servicios: estructura común (nombre · guía · precio / detalle) */
.lista-serv { list-style: none; margin: 0; padding: 0; counter-reset: sv; }
.sv { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n p" "d p"; column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--linea); }
.sv:first-child { border-top: 0; padding-top: 0; }
.sv-n { grid-area: n; font-weight: 600; }
.sv-d { grid-area: d; color: var(--suave); font-size: .9rem; }
.sv-p { grid-area: p; font-weight: 700; white-space: nowrap; text-align: right; align-self: center; }
.sv-guia { display: none; }
/* carta de barbería: nombre ……… precio */
[data-servicios="carta"] .sv { grid-template-columns: auto 1fr auto; grid-template-areas: "n g p" "d d d"; border-top: 0; padding: 9px 0; }
[data-servicios="carta"] .sv-n { font-family: var(--f-titulo); font-weight: var(--peso-titulo); text-transform: var(--tt-titulo); letter-spacing: var(--ls-titulo); font-size: 1.12rem; }
[data-servicios="carta"] .sv-guia { display: block; grid-area: g; border-bottom: 2px dotted color-mix(in srgb, var(--texto) 40%, transparent); margin: 0 8px .45em; align-self: end; }
[data-servicios="carta"] .sv-p { align-self: end; }
/* fichas */
[data-servicios="tarjetas"] .lista-serv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
[data-servicios="tarjetas"] .sv { grid-template-columns: 1fr; grid-template-areas: "n" "d" "p"; border: var(--borde); border-radius: min(var(--radio), 18px);
    background: var(--tarjeta2); padding: 16px; row-gap: 4px; }
[data-servicios="tarjetas"] .sv:first-child { padding-top: 16px; }
[data-servicios="tarjetas"] .sv-n { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 1.15rem; text-transform: var(--tt-titulo); letter-spacing: var(--ls-titulo); }
[data-servicios="tarjetas"] .sv-p { text-align: left; font-size: 1.35rem; color: var(--enlace); margin-top: 6px; }
/* numerada */
[data-servicios="numerada"] .sv { grid-template-columns: auto 1fr auto; grid-template-areas: "x n p" "x d p"; counter-increment: sv; }
[data-servicios="numerada"] .sv::before { content: counter(sv, decimal-leading-zero); grid-area: x; font-family: var(--f-titulo); font-weight: var(--peso-titulo);
    font-size: 2rem; line-height: 1; color: var(--enlace); margin-right: 14px; align-self: center; min-width: 1.6em; }
[data-servicios="numerada"] .sv-n { text-transform: var(--tt-titulo); letter-spacing: var(--ls-titulo); }

/* Horario */
.horario { width: 100%; border-collapse: collapse; }
.horario th, .horario td { text-align: left; padding: 9px 0; border-top: 1px solid var(--linea); vertical-align: top; }
.horario tr:first-child th, .horario tr:first-child td { border-top: 0; }
.horario th { font-weight: 500; width: 40%; }
.horario td { text-align: right; color: var(--suave); font-variant-numeric: tabular-nums; }
.horario tr.hoy th, .horario tr.hoy td { color: var(--texto); font-weight: 700; }
.horario td span { display: block; }
[data-horario="rejilla"] .horario, [data-horario="rejilla"] .horario tbody { display: block; }
[data-horario="rejilla"] .horario tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: 10px; }
[data-horario="rejilla"] .horario td span { white-space: nowrap; }
[data-horario="rejilla"] .horario tr { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--tarjeta2);
    border-radius: min(var(--radio), 14px); border: var(--borde); }
[data-horario="rejilla"] .horario th, [data-horario="rejilla"] .horario td { border: 0; padding: 0; width: auto; text-align: left; }
[data-horario="rejilla"] .horario th { font-weight: 700; }
[data-horario="rejilla"] .horario tr.hoy { background: var(--marca); }
[data-horario="rejilla"] .horario tr.hoy th, [data-horario="rejilla"] .horario tr.hoy td { color: var(--marca-texto); }
.cierres { margin: 16px 0 0; padding: 12px 14px; border-radius: min(var(--radio), 14px); background: color-mix(in srgb, var(--texto) 5%, transparent); }
.cierres h3 { margin: 0 0 6px; font-size: 1rem; }
.cierres ul { margin: 0; padding-left: 18px; color: var(--suave); }

.contacto { list-style: none; margin: 0; padding: 0; }
.contacto li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linea); }
.contacto li:first-child { border-top: 0; padding-top: 0; }
.contacto svg { width: 20px; height: 20px; margin-top: 2px; color: var(--suave); }
.contacto a { font-weight: 500; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ── Reserva por pasos ──────────────────────────────────────────── */
.reserva { padding: 6px 0 4px; }
.reserva > h2 { padding: 14px 18px 0; }
.paso { border-top: 1px solid var(--linea); padding: 16px 18px; }
.reserva > h2 + .paso, .reserva > h2 + noscript + .paso { border-top: 0; }
.paso-cab { display: flex; align-items: center; gap: 12px; }
.paso-num { width: 30px; height: 30px; border-radius: min(var(--radio-ctl), 50%); display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--suave); flex: none; }
[data-forma="pildora"] .paso-num, [data-forma="suave"] .paso-num, [data-forma="plano"] .paso-num { border-radius: 50%; }
.paso.activo .paso-num { background: var(--marca); color: var(--marca-texto); }
.paso.hecho .paso-num { background: var(--ok-fondo); color: var(--ok); }
.paso-tit { flex: 1; min-width: 0; }
.paso-tit h3 { margin: 0; font-size: 1.06rem; outline: none; font-family: var(--f-texto); font-weight: 700; text-transform: none; letter-spacing: normal; }
.paso.pendiente h3 { color: var(--suave); font-weight: 500; }
.paso-resumen { margin: 2px 0 0; color: var(--suave); font-size: .92rem; }
.paso-cuerpo { margin-top: 14px; }
.paso:not(.activo) .paso-cuerpo { display: none; }
.paso:not(.hecho) .paso-cambiar, .paso:not(.hecho) .paso-resumen { display: none; }
.ayuda { color: var(--suave); font-size: .9rem; margin: 0 0 10px; }

.opciones { display: grid; gap: 10px; }
.opcion { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--linea); border-radius: min(var(--radio-ctl), 22px); cursor: pointer; background: var(--campo); }
.opcion:hover { border-color: color-mix(in srgb, var(--marca) 50%, var(--linea)); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion .marca-check { width: 22px; height: 22px; border-radius: min(var(--radio-ctl), 7px); border: 2px solid color-mix(in srgb, var(--texto) 35%, transparent); display: grid; place-items: center; flex: none; }
.opcion input[type="radio"] + .marca-check { border-radius: 50%; }
.opcion .marca-check svg { width: 14px; height: 14px; opacity: 0; color: var(--marca-texto); }
.opcion input:checked + .marca-check { background: var(--marca); border-color: var(--marca); }
.opcion input:checked + .marca-check svg { opacity: 1; }
.opcion:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 7%, var(--campo)); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.opcion .txt { flex: 1; min-width: 0; }
.opcion .n { font-weight: 600; display: block; }
.opcion .d { color: var(--suave); font-size: .88rem; display: block; }
.opcion .p { font-weight: 700; white-space: nowrap; }
.pie-paso { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pie-paso .total { color: var(--suave); font-size: .92rem; }

.mes { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mes strong { font-size: 1rem; }
.flechas { display: flex; gap: 6px; }
.flecha { width: 40px; height: 40px; border-radius: min(var(--radio-ctl), 50%); border: 1px solid var(--linea); background: var(--campo); display: grid; place-items: center; cursor: pointer; }
.flecha:disabled { opacity: .35; cursor: default; }
.flecha svg { width: 18px; height: 18px; }
.dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(66px, 1fr); gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dia { scroll-snap-align: start; border: 1.5px solid var(--linea); border-radius: min(var(--radio-ctl), 16px); background: var(--campo); padding: 8px 4px; text-align: center; cursor: pointer; min-height: 84px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.dia .s { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600; }
.dia .num { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.dia .e { font-size: .68rem; line-height: 1.15; color: var(--ok); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.dia.sin { background: transparent; cursor: default; }
.dia.sin .num { color: var(--suave); font-weight: 500; }
.dia.sin .e { color: var(--suave); font-weight: 500; }
.dia[aria-pressed="true"] { border-color: var(--marca); background: var(--marca); color: var(--marca-texto); }
.dia[aria-pressed="true"] .s, .dia[aria-pressed="true"] .e { color: var(--marca-texto); }
.dia:not(.sin):hover { border-color: color-mix(in srgb, var(--marca) 55%, var(--linea)); }

.franja { margin-top: 14px; }
.franja h4 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.hora { min-height: 44px; border: 1.5px solid var(--linea); border-radius: min(var(--radio-ctl), 12px); background: var(--campo); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.hora:hover { border-color: color-mix(in srgb, var(--marca) 55%, var(--linea)); }
.hora[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.vacio { color: var(--suave); padding: 10px 0; }
.cargando { color: var(--suave); padding: 12px 0; display: flex; align-items: center; gap: 10px; }
.cargando::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--linea); border-top-color: var(--marca); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.campos { display: grid; gap: 14px; }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.campo input, .campo textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid color-mix(in srgb, var(--texto) 22%, transparent); border-radius: min(var(--radio-ctl), 14px); background: var(--campo); }
.campo textarea { min-height: 76px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }
.casilla a { color: var(--enlace); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.msg { border-radius: min(var(--radio), 12px); padding: 11px 14px; margin-top: 12px; font-weight: 500; }
.msg:empty { display: none; }
.msg.error { background: var(--error-fondo); color: var(--error); }
.msg.ok { background: var(--ok-fondo); color: var(--ok); }
.msg.info { background: var(--aviso-fondo); color: var(--aviso); }
.msg a { color: inherit; font-weight: 700; }
.alternativas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.resumen { background: color-mix(in srgb, var(--texto) 5%, transparent); border-radius: min(var(--radio), 12px); padding: 12px 14px; margin-bottom: 14px; }
.resumen p { margin: 0; }
.resumen .q { font-weight: 700; }
.resumen .s { color: var(--suave); font-size: .92rem; }

/* ── Confirmación y gestión de la cita ─────────────────────────── */
.hecha { padding: 22px 18px; text-align: center; }
.hecha .icono { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok); display: grid; place-items: center; }
.hecha .icono svg { width: 34px; height: 34px; }
.hecha h2 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 6px; }
.hecha .cuando { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; }
.hecha .que { color: var(--suave); margin: 0 0 18px; }
.botones { display: grid; gap: 10px; }
@media (min-width: 560px) { .botones { grid-template-columns: 1fr 1fr; } .botones .btn-ancho2 { grid-column: 1 / -1; } }
.enlace-gestion { margin-top: 16px; font-size: .88rem; color: var(--suave); }
.enlace-gestion code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--texto) 6%, transparent); color: var(--texto); word-break: break-all; font-size: .82rem; }

.cita { padding: 22px 18px; }
.cita .etq { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--ok-fondo); color: var(--ok); }
.cita .etq.cancelled, .cita .etq.no_show { background: var(--error-fondo); color: var(--error); }
.cita .etq.completed { background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--suave); }
.cita h2 { font-size: 1.75rem; line-height: 1.15; margin: 10px 0 4px; }
.cita dl { margin: 16px 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.cita dt { color: var(--suave); }
.cita dd { margin: 0; font-weight: 600; }
.confirma-cancel { margin-top: 14px; padding: 14px; border: 1.5px solid color-mix(in srgb, var(--error) 45%, var(--linea)); border-radius: min(var(--radio), 12px); }
.confirma-cancel p { margin: 0 0 10px; font-weight: 600; }
.selector-cambio { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }

/* ── Pie ────────────────────────────────────────────────────────── */
.pie { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px 40px; color: var(--suave); font-size: .85rem; }
.pie details { margin-bottom: 12px; }
.pie summary { cursor: pointer; font-weight: 600; color: var(--texto); padding: 6px 0; }
.pie details p { margin: 6px 0 0; line-height: 1.55; }

/* ══ Maquetaciones (data-layout) ════════════════════════════════ */

/* centrado: todo alineado al eje, sin cajas pesadas */
[data-layout="centrado"] .hero { text-align: center; padding-top: 34px; padding-bottom: 40px; }
[data-layout="centrado"] .hero-logo { margin: 0 auto 20px; max-height: 110px; }
[data-layout="centrado"] .hero .desc { margin-left: auto; margin-right: auto; }
[data-layout="centrado"] .acciones { justify-content: center; }
[data-layout="centrado"] .bloque > h2 { text-align: center; }

/* superpuesto: cabecera alta y el contenido sube encima */
[data-layout="superpuesto"] .hero { padding-bottom: 104px; }
[data-layout="superpuesto"] main { position: relative; z-index: 2; margin-top: -78px; }
[data-layout="superpuesto"] main > :first-child { margin-top: 0; }
[data-layout="superpuesto"] main > .aviso:first-child { box-shadow: var(--sombra); }

/* póster: titular enorme abajo de una cabecera alta */
[data-layout="poster"] .cab { min-height: min(82vh, 760px); display: flex; flex-direction: column; }
[data-layout="poster"] .cab > .cab-in { width: 100%; }
[data-layout="poster"] .hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; width: 100%; padding-bottom: 40px; }
[data-layout="poster"] .hero h1 { font-size: min(calc(clamp(3rem, 13vw, 8.6rem) * var(--escala-h1)), var(--tope-h1)); line-height: .9; margin-bottom: 14px; }
[data-layout="poster"] .hero .lugar { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 600; }

/* revista: filete grueso, secciones numeradas y dos columnas en pantalla ancha */
[data-layout="revista"] { --ancho: 1100px; }
[data-layout="revista"] .cab { border-bottom: 4px solid var(--hero-texto); }
[data-layout="revista"] .hero { padding-top: 36px; }
[data-layout="revista"] .hero h1 { font-size: min(calc(clamp(2.6rem, 11vw, 6.4rem) * var(--escala-h1)), var(--tope-h1)); line-height: .95; max-width: 14ch; }
[data-layout="revista"] main { counter-reset: seccion; }
[data-layout="revista"] .bloque > h2 { counter-increment: seccion; border-bottom: 1px solid var(--linea); padding-bottom: 10px; }
[data-layout="revista"] .bloque > h2::before { content: counter(seccion, decimal-leading-zero); color: var(--enlace); font-size: .62em; vertical-align: .35em; margin-right: .6em; }
[data-layout="revista"] .reserva > h2 { border-bottom: 0; }
@media (min-width: 900px) {
    [data-layout="revista"] main { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
    [data-layout="revista"] main > * { grid-column: 1 / -1; }
    [data-layout="revista"] main > .s-servicios { grid-column: 1; }
    [data-layout="revista"] main > .s-horario { grid-column: 2; }
}

/* marco: toda la página dentro de un doble filete */
[data-layout="marco"] .pagina { margin: 10px; border: 2px solid var(--texto); outline: 1px solid var(--texto); outline-offset: 4px; background: var(--fondo); }
[data-layout="marco"] .cab { margin: 8px 8px 0; }
[data-layout="marco"] .hero { text-align: center; }
[data-layout="marco"] .hero-logo { margin: 0 auto 16px; }
[data-layout="marco"] .acciones { justify-content: center; }
[data-layout="marco"] .bloque > h2 { text-align: center; }
@media (min-width: 760px) { [data-layout="marco"] .pagina { margin: 26px auto; max-width: 900px; } }

/* mosaico: bloques en rejilla en pantalla ancha */
[data-layout="mosaico"] .s-horario { background: var(--tarjeta2); }
@media (min-width: 900px) {
    [data-layout="mosaico"] { --ancho: 1120px; }
    [data-layout="mosaico"] main { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; grid-auto-flow: row dense; padding-top: 18px; }
    [data-layout="mosaico"] main > * { grid-column: 1 / -1; margin-top: 0; }
    [data-layout="mosaico"] main > .s-reserva { grid-column: 1; grid-row: span 3; }
    [data-layout="mosaico"] main > .s-servicios, [data-layout="mosaico"] main > .s-horario, [data-layout="mosaico"] main > .s-contacto { grid-column: 2; }
}

/* dividido: ficha fija a la izquierda y contenido a la derecha en pantalla ancha */
@media (min-width: 980px) {
    [data-layout="dividido"] .pagina { display: grid; grid-template-columns: minmax(340px, 38%) 1fr; grid-template-rows: 1fr auto; min-height: 100vh; }
    [data-layout="dividido"] .cab { grid-row: 1 / span 2; grid-column: 1; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
    [data-layout="dividido"] .cab-in, [data-layout="dividido"] .hero { max-width: none; width: 100%; padding-left: 44px; padding-right: 44px; }
    [data-layout="dividido"] .cab-in { padding-top: 22px; }
    [data-layout="dividido"] .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
    [data-layout="dividido"] .hero-logo { max-height: 120px; }
    [data-layout="dividido"] main { grid-column: 2; width: 100%; max-width: 760px; padding: 18px 36px 24px; }
    [data-layout="dividido"] .pie { grid-column: 2; width: 100%; padding-left: 36px; padding-right: 36px; }
}

@media (min-width: 760px) {
    .bloque:not(.reserva) { padding: 24px 26px; }
    [data-forma="plano"] .bloque:not(.reserva) { padding: 30px 0 10px; }
    .reserva > h2 { padding: 18px 26px 0; }
    .paso { padding: 18px 26px; }
    .hero { padding: 38px 16px 44px; }
    [data-layout="superpuesto"] .hero { padding-bottom: 118px; }
}

/* π abajo a la derecha (guiño a «La red», 1995): acceso discreto al panel del negocio */
.pi-panel {
    position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 30;
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    font: 600 16px/1 Georgia, 'Times New Roman', serif; color: var(--suave); text-decoration: none;
    opacity: .32; transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.pi-panel:hover, .pi-panel:focus-visible { opacity: 1; transform: scale(1.15); background: color-mix(in srgb, var(--texto) 8%, transparent); }
.pi-panel:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pi-panel { transition: none; } .pi-panel:hover { transform: none; } }
@media print { .pi-panel { display: none; } }