/* Composición del sitio público. Paleta, controles y apariencia se comparten con administración. */
html { scroll-behavior:smooth; scroll-padding-top:120px; }
.sitio-publico { font-size:16px; line-height:1.65; }
.sitio-publico h1, .sitio-publico h2 { font-family:var(--font-display); font-weight:400; line-height:1.06; letter-spacing:-.025em; }
.sitio-publico h1 { font-size:clamp(3.4rem,6vw,6.1rem); }
.sitio-publico h2 { font-size:clamp(2.6rem,4vw,4.2rem); }
.sitio-publico h3 { font-size:1.25rem; font-weight:500; }
.sitio-publico em { font-weight:400; color:var(--olive); }
.sitio-publico .btn { min-height:50px; padding:12px 24px; font-size:14px; }
.saltar { position:absolute; left:20px; top:-100px; z-index:100; padding:12px 20px; background:var(--surface); border-radius:var(--r-ctl); }
.saltar:focus { top:10px; }
.cabecera-publica { width:100%; min-height:112px; padding:20px var(--page-gutter); display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--separator); }
.marca-publica { display:flex; align-items:center; gap:14px; }
.marca-publica img { border-radius:16px; width:76px; height:76px; flex-shrink:0; object-fit:contain; box-shadow:0 0 0 5px var(--fill); }
.marca-publica strong { font:36px/1 var(--font-display); }
.marca-publica small { display:block; margin-top:7px; font-size:9px; letter-spacing:.16em; }
.cabecera-publica nav { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; font-size:14px; }
.cabecera-publica nav a { padding:7px 0; }
.cabecera-publica nav a[aria-current=page] { border-bottom:1px solid var(--olive); }
.enlace-admin { color:var(--olive); font-weight:600; }
.enlace-flecha { display:inline-block; font-size:14px; font-weight:500; border-bottom:1px solid var(--separator); padding:6px 0; }
.enlace-flecha:hover { border-color:var(--olive); }
.etiqueta { font-size:10px; letter-spacing:.16em; font-weight:600; margin-bottom:24px; color:var(--olive); }
.etiqueta span { font-size:17px; vertical-align:middle; margin-right:8px; }
.intro { font-size:17px; color:var(--label-2); max-width:440px; }
.hero-publico { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:6%; padding:62px var(--page-gutter) 72px; align-items:center; }
.hero-texto h1 { margin-bottom:26px; }
.botones { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin:30px 0 38px; }
.detalle-hero { font-size:10px; letter-spacing:.085em; color:var(--label-2); }
.detalle-hero span { padding:0 10px; }
.hero-foto { position:relative; isolation:isolate; margin:0; min-width:0; }
.hero-foto::before { content:''; position:absolute; inset:-12px 18px 28px -12px; background:var(--sand); border:1px solid var(--separator); border-radius:32px; transform:rotate(-3deg); z-index:-1; }
.hero-foto-marco { margin:0; padding:10px; background:var(--surface); border:1px solid var(--separator); border-radius:30px; box-shadow:var(--glass-shadow); }
.hero-imagen { display:block; width:100%; height:auto; aspect-ratio:1369/1306; border-radius:21px; }
.hero-foto-pie { display:flex; align-items:center; gap:16px; padding:21px 12px 13px; }
.hero-emblema { flex-shrink:0; width:48px; height:48px; object-fit:contain; border-radius:12px; }
.hero-foto-pie>div { display:grid; gap:4px; min-width:0; }
.hero-foto-etiqueta { font-size:9px; font-weight:600; letter-spacing:.14em; color:var(--olive); }
.hero-foto-pie strong { font:400 clamp(19px,1.8vw,28px)/1.2 var(--font-display); letter-spacing:-.025em; }
.hero-foto-direccion { font-size:12px; color:var(--label-2); }
.hero-mapa { display:grid; place-items:center; flex-shrink:0; width:46px; height:46px; margin-left:auto; border:1px solid var(--separator); border-radius:50%; color:var(--label); background:var(--fill); font-size:24px; transition:background .2s,transform .2s; }
.hero-mapa:hover { background:var(--fill-2); transform:translate(2px,-2px); }
.firma-pie { display:flex; align-items:center; gap:18px; }
.firma-pie img { width:76px; height:76px; object-fit:contain; border-radius:16px; }
.franja-publica { background:var(--sand); padding:24px var(--page-gutter); display:flex; align-items:center; justify-content:center; gap:6%; font:18px var(--font-display); border-block:1px solid var(--separator); }
.franja-publica span:nth-child(even) { color:var(--olive); font-size:24px; }
.seccion-publica { width:100%; padding:85px var(--page-gutter); }
.filosofia { display:grid; grid-template-columns:1fr 1fr; gap:12%; align-items:center; }
.filosofia p:not(.etiqueta) { margin-bottom:24px; max-width:485px; color:var(--label-2); }
.filosofia .texto-grande { font:26px/1.4 var(--font-display); color:var(--label)!important; }
.servicios-destacados { padding-top:35px; }
.titulo-seccion { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; gap:25px; }
.especialidades { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.especialidades>a { position:relative; display:flex; flex-direction:column; align-items:start; padding:30px; background:var(--surface); box-shadow:var(--card-shadow); border-radius:var(--r-card); transition:background .2s,transform .2s; }
.especialidades>a:hover { background:var(--surface-hover); transform:translateY(-3px); }
.especialidades>a:nth-child(2) { background:color-mix(in oklab,var(--olive) 7%,var(--surface)); }
.especialidades>a:nth-child(3) { background:color-mix(in oklab,var(--orange) 6%,var(--surface)); }
.numero { font-size:10px; letter-spacing:.1em; }
.simbolo { align-self:end; font:72px/1 var(--font-display); color:var(--olive); margin:0 0 26px; }
.especialidades h3 { font:27px/1.2 var(--font-display); margin-bottom:15px; letter-spacing:-.03em; }
.especialidades p { font-size:14px; color:var(--label-2); margin-bottom:25px; flex:1; }
.cita-publica { text-align:center; background:var(--forest); color:var(--cream); padding:80px 24px; position:relative; overflow:hidden; }
/* Color sólido con opacidad: Safari en iOS pintaba el color-mix con transparente como un asterisco blanco opaco */
.estrella-fondo { position:absolute; font:350px/1 var(--font-display); color:var(--cream); opacity:.05; top:0; left:-75px; pointer-events:none; user-select:none; -webkit-user-select:none; }
.estrella-fondo-2 { left:auto; right:-75px; top:auto; bottom:-70px; }
.cita-publica em,.cita-publica .etiqueta { color:color-mix(in oklab,var(--cream) 75%,var(--olive)); }
.cita-publica .btn { margin-top:30px; }
.contacto-publico { display:grid; grid-template-columns:1fr 1fr; gap:12%; align-items:center; }
.contacto-publico h2 { margin-bottom:30px; }
.contacto-publico p:not(.etiqueta) { color:var(--label-2); margin-bottom:22px; }
.contacto-tarjeta { background:var(--surface); padding:42px; border-radius:var(--r-card); box-shadow:var(--card-shadow); }
.telefono-grande { font:clamp(1.8rem,3vw,2.6rem) var(--font-display); display:inline-block; margin-bottom:20px; }
.contacto-tarjeta .nota { margin-top:18px; }
.comodidades { display:flex; flex-wrap:wrap; gap:8px; padding-top:15px; border-top:1px solid var(--separator); }
.comodidades span { font-size:11px; border:1px solid var(--separator); padding:4px 10px; border-radius:var(--r-pill); }
.nota { font-size:12px; color:var(--label-2); line-height:1.6; }
.pie-publico { padding:46px var(--page-gutter) 24px; background:var(--sand); display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:30px; border-top:1px solid var(--separator); }
.pie-publico strong { font:36px var(--font-display); }
.pie-publico p { font-size:12px; margin-top:8px; color:var(--label-2); }
.pie-publico a:hover { text-decoration:underline; }
.pie-nota { grid-column:1/-1; padding-top:24px; border-top:1px solid var(--separator); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; }
.pie-nota p { margin:0; font-size:11px; letter-spacing:.02em; }
.portada-servicios { padding-bottom:50px; }
.portada-servicios h1 { font-size:clamp(3rem,5vw,5.2rem); margin-bottom:25px; }
.portada-servicios .nota { margin-top:22px; }
.catalogo-publico { display:grid; grid-template-columns:230px minmax(0,1fr); gap:9%; padding-top:10px; }
.catalogo-publico aside { align-self:start; position:sticky; top:35px; }
.catalogo-publico aside nav { display:grid; margin-bottom:25px; }
.catalogo-publico aside nav a { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--separator); font-size:14px; }
.categoria-publica { margin-bottom:48px; scroll-margin-top:40px; }
.categoria-publica h2 { font-size:35px; margin-bottom:24px; }
.servicio-publico { display:flex; gap:20px; justify-content:space-between; align-items:start; padding:19px 0; border-bottom:1px solid var(--separator); }
.servicio-publico h3 { font-size:16px; margin-bottom:5px; }
.servicio-publico p { font-size:13px; color:var(--label-2); max-width:450px; }
.servicio-publico small { font-size:11px; color:var(--label-2); }
.servicio-publico strong { font-weight:500; white-space:nowrap; font-size:16px; }
/* El acceso se centra como una sola tarjeta, a cualquier resolución. */
.acceso-publico { display:grid; place-items:center; min-height:calc(100svh - 112px); padding:64px 24px; background:radial-gradient(ellipse at 20% 15%,var(--fill),transparent 45%),radial-gradient(ellipse at 85% 85%,var(--fill),transparent 45%); }
.acceso-panel { width:100%; max-width:480px; padding:38px 42px 30px; background:var(--surface); border:1px solid var(--separator); border-radius:32px; box-shadow:var(--glass-shadow); }
.acceso-intro { text-align:center; margin-bottom:30px; }
.acceso-intro img { margin:0 auto 24px; border-radius:16px; box-shadow:0 0 0 7px var(--fill); }
.acceso-intro .etiqueta { margin-bottom:16px; }
.acceso-intro h1 { font-size:44px; margin-bottom:18px; }
.acceso-intro>p:last-child { color:var(--label-2); font-size:14px; max-width:30ch; margin:auto; }
.form-acceso { display:grid; gap:20px; }
.form-acceso .input { border:1px solid var(--separator); min-height:48px; }
.form-acceso .btn { width:100%; margin-top:4px; }
.form-acceso .nota { text-align:center; font-size:11px; }
.acceso-volver { display:block; text-align:center; margin-top:22px; padding:6px; font-size:12px; color:var(--olive); }
.estado-error { max-width:760px; margin:80px auto; padding:0 25px; }
.estado-error h1 { font-size:45px; margin:20px 0; }
.estado-error .acciones { margin:25px 0; }
@media(min-width:1200px) {
  .portada-servicios { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:5%; align-items:center; }
  .servicios-intro { border-left:1px solid var(--separator); padding-left:clamp(30px,3vw,72px); }
  .servicios-intro .nota { max-width:50ch; }
  .hero-publico { max-width:1760px; margin-inline:auto; padding-top:48px; padding-bottom:64px; }
  .hero-publico h1 { font-size:clamp(5.5rem,5.8vw,7rem); }
  .hero-foto { width:min(90%,560px); justify-self:center; }
  .hero-publico .intro { max-width:40ch; font-size:clamp(17px,1.15vw,22px); }
  .filosofia,.contacto-publico { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:5%; }
  .filosofia p:not(.etiqueta) { max-width:65ch; }
  .especialidades>a { padding:clamp(30px,2.6vw,64px); }
  .especialidades h3 { font-size:clamp(27px,2vw,42px); }
  .especialidades p { font-size:clamp(14px,1vw,18px); max-width:48ch; }
  .contacto-tarjeta { padding:clamp(42px,3vw,72px); }
  .franja-publica { justify-content:space-between; }
}
@media(min-width:1400px) {
  .catalogo-publico { grid-template-columns:260px minmax(0,1fr); gap:5%; }
  .lista-servicios { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
}
@media(max-width:900px) {
  .cabecera-publica { gap:15px; padding:20px 4%; }
  .cabecera-publica nav { gap:16px; }
  .marca-publica small { font-size:8px; }
  .hero-publico { gap:5%; padding-top:42px; }
  .hero-foto-pie { gap:12px; padding-inline:4px; }
  .hero-foto-pie .hero-emblema { display:none; }
  .hero-publico h1 { font-size:clamp(3rem,7.4vw,4.5rem); }
  .detalle-hero { line-height:2; }
  .seccion-publica { padding:60px 5%; }
  .especialidades { gap:15px; }
  .especialidades>a { padding:23px; }
  .filosofia,.contacto-publico { gap:7%; }
  .catalogo-publico { grid-template-columns:180px minmax(0,1fr); gap:6%; }
}
@media(max-width:650px) {
  .cabecera-publica { flex-wrap:wrap; min-height:unset; padding:15px 5%; gap:15px; }
  .marca-publica img { width:56px; height:56px; }
  .marca-publica strong { font-size:28px; }
  .marca-publica small { font-size:7px; }
  .cabecera-acciones>.btn { min-height:42px; font-size:12px; padding:8px 12px; gap:10px; }
  .cabecera-publica nav { order:3; width:100%; justify-content:space-between; gap:10px; font-size:12px; border-top:1px solid var(--separator); padding-top:9px; }
  .hero-publico { grid-template-columns:1fr; padding:36px 6% 42px; gap:25px; }
  .hero-publico h1 { font-size:4rem; }
  .etiqueta { font-size:9px; margin-bottom:20px; }
  .intro { font-size:15px; }
  .botones { gap:20px; margin:25px 0; }
  .hero-foto { margin:14px 0 0; }
  .hero-foto::before { inset:-8px 12px 24px -8px; border-radius:28px; transform:rotate(-2deg); }
  .hero-foto-marco { padding:7px; border-radius:26px; }
  .hero-imagen { border-radius:19px; }
  .hero-foto-pie { padding:18px 8px 11px; gap:12px; }
  .hero-foto-pie .hero-emblema { display:block; width:38px; height:38px; border-radius:10px; }
  .hero-foto-etiqueta { font-size:8px; }
  .hero-foto-pie strong { font-size:20px; }
  .hero-foto-direccion { font-size:11px; }
  .hero-mapa { width:44px; height:44px; }
  .franja-publica { font-size:14px; padding:20px 0; }
  .filosofia,.contacto-publico { grid-template-columns:1fr; gap:32px; }
  .seccion-publica { padding:48px 6%; }
  .filosofia .texto-grande { font-size:23px; }
  .titulo-seccion { align-items:start; flex-direction:column; gap:20px; }
  .especialidades { grid-template-columns:1fr; }
  .especialidades>a { padding:25px; }
  .simbolo { position:absolute; right:25px; top:24px; font-size:42px; }
  .numero { margin-bottom:35px; }
  .especialidades h3 { font-size:29px; }
  .especialidades p { max-width:320px; }
  .cita-publica { padding:60px 20px; }
  .contacto-tarjeta { padding:28px; }
  .pie-publico { grid-template-columns:1fr; gap:20px; padding:30px 6% 20px; }
  .catalogo-publico { grid-template-columns:1fr; gap:35px; padding-top:0; }
  .catalogo-publico aside { position:static; }
  .catalogo-publico aside nav { display:flex; flex-wrap:wrap; gap:8px; }
  .catalogo-publico aside nav a { padding:7px 11px; border:1px solid var(--separator); border-radius:var(--r-pill); font-size:12px; gap:10px; }
  .catalogo-publico aside>.btn { display:none; }
  .portada-servicios h1 { font-size:3.2rem; }
  .servicio-publico h3,.servicio-publico strong { font-size:14px; }
  .acceso-publico { min-height:0; padding:36px 18px 44px; }
  .acceso-panel { padding:30px 24px 24px; border-radius:var(--r-card); }
  .acceso-intro h1 { font-size:40px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.mfa-panel { display:grid; gap:22px; }
.mfa-panel .acceso-intro { margin-bottom:0; }
.mfa-qr { display:block; width:min(100%,240px); height:auto; margin-inline:auto; border:12px solid #fff; border-radius:16px; background:#fff; }
.mfa-manual { padding:16px; background:var(--fill); border-radius:16px; }
.mfa-manual code { display:block; overflow-wrap:anywhere; padding-top:12px; }
.codigos-recuperacion { display:grid; gap:10px; padding:18px; background:var(--fill); border-radius:16px; }
.codigos-recuperacion code { font-size:12px; overflow-wrap:anywhere; }
.opiniones-portada { display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:center; }
.valoracion-salon { justify-self:center; text-align:center; display:grid; gap:18px; }
.valoracion-salon strong { font:400 clamp(44px,5vw,76px)/1.05 var(--font-display); }
.valoracion-salon strong small { font-size:24px; }
.valoracion-salon p { color:var(--olive); }
.opinion-escribir { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,100px); background:var(--sand); }
.opinion-escribir > div { display:grid; align-content:start; gap:24px; }
.form-opinion { display:grid; gap:24px; }
.opinion-puntuacion { border:0; padding:0; margin:0; }
.opinion-puntuacion legend { font-weight:600; margin-bottom:12px; }
.opinion-puntuacion > div { display:flex; gap:8px; flex-wrap:wrap; }
.opinion-puntuacion label span { display:block; padding:12px 16px; border:1px solid var(--separator); border-radius:999px; cursor:pointer; }
.opinion-puntuacion input { position:absolute; opacity:0; }
.opinion-puntuacion input:checked + span { background:var(--accent); color:var(--accent-ink); }
.opinion-puntuacion input:focus-visible + span { outline:3px solid var(--olive); outline-offset:3px; }
.aviso-opinion { padding:16px; background:var(--fill); border-radius:16px; }
@media(max-width:800px) { .opiniones-portada,.opinion-escribir { grid-template-columns:1fr; gap:36px; } .valoracion-salon { justify-self:start; text-align:left; } }

/* ── Menú hamburguesa (móvil y tablet vertical) ──────────────────────────────
   En escritorio la navegación sigue en línea; hasta 900 px se convierte en un panel que entra por la derecha. */
.menu-publico-cerrar, .menu-publico-titulo, .menu-publico-pie, .boton-menu, .sitio-publico .menu-fondo { display:none; }
@media(max-width:900px) {
  .sitio-publico .cabecera-publica { flex-wrap:nowrap; min-height:unset; padding:14px var(--page-gutter); gap:12px; }
  .cabecera-acciones { margin-left:auto; gap:10px; }
  .boton-menu { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; border:1px solid var(--separator); background:var(--surface); color:var(--label); }
  .boton-menu[aria-expanded="true"] { background:var(--fill); }
  .cabecera-publica nav.menu-publico {
    position:fixed; inset:0 0 0 auto; z-index:50; order:0; width:min(360px,88vw); margin:0;
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap; gap:0;
    padding:calc(22px + env(safe-area-inset-top)) 26px calc(24px + env(safe-area-inset-bottom));
    border:0; border-radius:24px 0 0 24px; background:var(--surface); overflow-y:auto; overscroll-behavior:contain;
    font-size:inherit; transform:translateX(104%); visibility:hidden;
    transition:transform .38s var(--ease), visibility 0s linear .38s, box-shadow .38s;
  }
  .cabecera-publica nav.menu-publico:target, .menu-abierto .cabecera-publica nav.menu-publico {
    transform:none; visibility:visible; box-shadow:0 24px 80px rgb(0 0 0 / .28); transition:transform .38s var(--ease), box-shadow .38s;
  }
  .cabecera-publica nav.menu-publico > a:not(.menu-publico-cerrar) {
    display:flex; align-items:center; justify-content:space-between; padding:16px 2px; border-bottom:1px solid var(--separator);
    font:400 26px/1.2 var(--font-display); letter-spacing:-.02em; white-space:normal;
  }
  .cabecera-publica nav.menu-publico > a:not(.menu-publico-cerrar)::after { content:''; flex:none; width:14px; height:14px; background:var(--olive); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
  .cabecera-publica nav.menu-publico > a[aria-current=page] { border-bottom-color:var(--olive); color:var(--olive); }
  .menu-publico-cerrar { display:grid; place-items:center; align-self:flex-end; width:44px; height:44px; border-radius:50%; background:var(--fill); color:var(--label); }
  .menu-publico-titulo { display:block; margin:4px 0 18px; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); }
  .menu-publico-pie { display:grid; gap:10px; margin-top:auto; padding-top:28px; }
  .cabecera-publica .menu-publico-pie .btn { min-height:52px; padding:12px 24px; }
  .menu-publico-telefono { font:400 24px var(--font-display); }
  .menu-publico-pie p { font-size:12px; color:var(--label-2); }
  .sitio-publico .menu-fondo {
    display:block; position:fixed; inset:0; z-index:45; background:rgb(10 20 17 / .42);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .menu-publico:target ~ .menu-fondo, .menu-abierto .sitio-publico .menu-fondo { opacity:1; pointer-events:auto; }
  .menu-abierto, .menu-abierto body { overflow:hidden; }
}
/* Teléfonos: el botón «Reservar» de la cabecera pasa al menú para dejar sitio al logo */
@media(max-width:520px) {
  .cabecera-reservar { display:none; }
  .cabecera-publica .marca-publica img { width:48px; height:48px; }
  .cabecera-publica .marca-publica strong { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) { .menu-publico, .sitio-publico .menu-fondo { transition:none !important; } }
/* Adornos que antes eran caracteres (✳ ↗ →) y ahora son SVG: tamaño y separación en su contexto */
.etiqueta > svg { margin-right: 6px; vertical-align: -3px; }
.franja-pista > svg { width: 22px; height: 22px; color: var(--olive); flex: none; }