/* =====================================================================
   PLANTILLA SALÓN DE BELLEZA · estilos de la web pública
   Diseño: Mockups/manicurista/handoff («Hcode Nails»).
   Colores de base fijos (crema y vino) + los dos colores del salón, que llegan
   ya ajustados para contraste AA desde App\Support\Belleza::paleta():
     --ac / --sobre-ac      botón principal y su letra
     --ac-txt               el color usado como letra sobre crema y rosas
     --ac2 / --sobre-ac2    segundo color (sello, estrellas) y su letra
     --ac2-txt              el segundo color como letra sobre el vino
   COLORIMETRÍA (2-oct, Kevin: elegante, caro y a la vez confiable y acogedor):
     espresso (--vino)      estructura y confianza: cabecera, cinta de avisos, bloques oscuros
     cinta de categorías     marfil con letra espresso (resalta sobre el video oscuro de la portada)
     marfil y greige         calma y limpieza: los fondos (sin rosas ni lilas fijos)
     color del salón (--ac)  calidez: SOLO el botón principal y lo elegido
     segundo color (--ac2)   detalle premium (champán): estrellas, cifras, sello
   Nada se mueve con html[data-quieto] (botón de accesibilidad) ni con
   «reducir movimiento» del equipo.
   ===================================================================== */
:root{
  --crema:#F3EBE4; --vino:#2E1B22; --vino-2:#41262F; --texto:#2E1B22; --suave:#6B5560;
  --etiqueta:#735A63; --linea:rgba(46,27,34,.16); --rosa:#EADFD6; --lila:#EADFD6;
  --ac:#A24F63; --sobre-ac:#fff; --ac-txt:#8E4356; --ac2:#F4C95D; --sobre-ac2:#2E1B22; --ac2-txt:#F4C95D;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ancho:1520px; --gutter:clamp(16px,4vw,56px); --curva:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--crema);color:var(--texto);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ac-txt)}
::selection{background:var(--ac);color:var(--sobre-ac)}
:focus-visible{outline:3px solid var(--ac-txt);outline-offset:3px;border-radius:6px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.saltar{position:absolute;left:12px;top:-60px;z-index:200;background:var(--vino);color:#fff;padding:12px 18px;border-radius:999px;font-weight:500}
.saltar:focus{top:12px;color:#fff}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
main{position:relative;z-index:1;outline:none}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Lo oculto se oculta siempre, aunque su componente tenga display propio (fotos por categoría, pasos, avisos). */
[hidden]{display:none!important}

/* Fondo de manchas suaves */
.fondo-manchas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.fondo-manchas span{position:absolute;border-radius:50%;opacity:.7;animation:flotar 9s ease-in-out infinite}
.fondo-manchas span:nth-child(1){left:-12vw;top:10vh;width:48vw;height:48vw;background:radial-gradient(circle,#E6D9CF 0%,rgba(214,198,186,0) 65%)}
.fondo-manchas span:nth-child(2){right:-14vw;top:40vh;width:52vw;height:52vw;background:radial-gradient(circle,#E6D9CF 0%,rgba(214,198,186,0) 65%);animation-duration:11s}
.fondo-manchas span:nth-child(3){left:30vw;bottom:-20vh;width:44vw;height:44vw;background:radial-gradient(circle,#EDE2DA 0%,rgba(214,198,186,0) 65%);animation-duration:13s}
@keyframes flotar{50%{transform:translateY(-12px)}}

/* ---------- Tipografía de sección ---------- */
.etiqueta{display:block;font:500 12px/1.2 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ac-txt)}
/* La etiqueta nunca pegada al título de abajo (3-oct, Kevin). :where() no pesa: cada sección puede ajustarlo. */
:where(.etiqueta):has(+ .titulo, + h1, + h2, + h3){margin-bottom:14px}
.etiqueta--oro{color:var(--ac2-txt)}
.titulo{font:400 clamp(40px,4.9vw,83px)/.95 var(--serif);letter-spacing:-.02em;color:var(--vino);text-wrap:balance}
.titulo em{font-style:italic;color:var(--ac-txt)}
.bajada{font-size:17px;line-height:1.6;font-weight:300;color:var(--suave);max-width:400px}
.seccion{position:relative;padding:clamp(32px,3.6vw,56px) 0}
.cab-seccion{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,40px)}
.fondo-rosa{background:linear-gradient(180deg,rgba(243,235,228,0) 0%,#EDE2DA 8%,#EADFD6 92%,rgba(243,235,228,0) 100%)}
.chispa{color:var(--ac2-txt)}
.bel-vacio{margin:24px auto;padding:22px 26px;border:2px dashed rgba(46,27,34,.25);border-radius:24px;color:var(--suave);max-width:calc(var(--ancho) - 2*var(--gutter))}
.bel-vacio b{color:var(--vino);display:block}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font:500 13px/1.1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-align:center;transition:background-position .9s ease,background-color .25s,color .25s,transform .25s var(--curva)}
.boton--grande{padding:19px 34px;font-size:14px}
.boton--ancho{width:100%}
.boton--acento{color:var(--sobre-ac);background:linear-gradient(110deg,var(--ac) 0%,var(--ac) 40%,rgba(255,255,255,.55) 50%,var(--ac) 60%,var(--ac) 100%);background-size:260% 100%;background-position:100% 0;box-shadow:0 20px 40px -18px var(--ac)}
.boton--acento:hover{background-position:0 0;color:var(--sobre-ac)}
.boton--vino{color:#fff;background:linear-gradient(110deg,var(--vino) 0%,var(--vino) 42%,#7a3a53 50%,var(--vino) 58%,var(--vino) 100%);background-size:260% 100%;background-position:100% 0}
.boton--vino:hover{background-position:0 0;color:#fff}
.boton--oro{color:var(--sobre-ac2);background:linear-gradient(110deg,var(--ac2) 0%,var(--ac2) 40%,#fff 50%,var(--ac2) 60%,var(--ac2) 100%);background-size:260% 100%;background-position:100% 0;border:0}
.boton--oro:hover{background-position:0 0;color:var(--sobre-ac2)}
.boton--vidrio{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(46,27,34,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.boton--vidrio:hover{background:#FBF7F3;color:var(--vino)}
.boton--linea{border-color:var(--vino);color:var(--vino);background:transparent}
.boton--linea:hover{background:var(--vino);color:#fff}
.boton--blanco{background:rgba(255,255,255,.8);border-color:rgba(46,27,34,.18);color:var(--vino)}
.boton--blanco:hover{background:#FBF7F3;color:var(--vino)}
.boton--wa{background:#157347;color:#fff}
.boton--wa:hover{background:#0f5c38;color:#fff}
.boton[disabled]{opacity:.6;cursor:wait}
.enlace-linea{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;border-bottom:1.5px solid var(--ac-txt);padding:8px 0 4px;display:inline-block}
.redondo{width:56px;height:56px;border-radius:50%;border:1px solid rgba(46,27,34,.4);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--vino)}
.redondo--lleno{background:var(--ac);border-color:var(--ac);color:var(--sobre-ac)}
.redondo:hover{background:var(--vino);color:#fff;border-color:var(--vino)}

/* ---------- Medios ---------- */
.medio{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:linear-gradient(140deg,var(--rosa),var(--lila))}
.medio__archivo{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover}
.medio--vacio{display:grid;place-items:center}
.medio__chispa{width:34px;height:34px;color:rgba(255,255,255,.9)}

/* ---------- Cinta de avisos (arriba) ---------- */
.avisos{position:relative;z-index:2;background:var(--vino);color:var(--crema);overflow:hidden;white-space:nowrap;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:12px 0}
.avisos__pista,.cinta-cats__pista,.pie__pista,.pie__fotos-pista{display:inline-flex;animation:correr 50s linear infinite}
.avisos__grupo,.cinta-cats__grupo,.pie__grupo,.pie__fotos-grupo{display:inline-flex;align-items:center;gap:48px;padding-right:48px}
@keyframes correr{to{transform:translateX(-50%)}}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:50;background:rgba(243,235,228,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(46,27,34,.1)}
.cab__fila{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.cab__menu{display:flex;gap:28px;flex-wrap:wrap}
.cab__menu a,.cab__visita{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:10px 0}
.cab__der{display:flex;justify-content:flex-end;gap:24px;align-items:center}
.logo{display:flex;align-items:center;gap:10px;color:var(--vino)}
.logo__img{height:44px;width:auto;max-width:220px;object-fit:contain}
html[data-logo="s"] .cab .logo__img{height:34px}
html[data-logo="l"] .cab .logo__img{height:58px}
.logo__texto{font:italic 400 30px/1 var(--serif);color:var(--ac-txt);letter-spacing:-.01em}
.hamburguesa{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);background:#FBF7F3;cursor:pointer;position:relative}
.hamburguesa span:first-child,.hamburguesa span:first-child::before,.hamburguesa span:first-child::after{position:absolute;left:13px;width:18px;height:2px;background:var(--vino);border-radius:2px;content:""}
.hamburguesa span:first-child{top:22px}
.hamburguesa span:first-child::before{left:0;top:-6px}
.hamburguesa span:first-child::after{left:0;top:6px}
.hamburguesa[aria-expanded="true"] span:first-child{background:transparent}
.hamburguesa[aria-expanded="true"] span:first-child::before{top:0;transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:first-child::after{top:0;transform:rotate(-45deg)}

/* ---------- Medallón del logo (Kevin, 2-oct) ----------
   Arriba de todo (html[data-arriba], lo pone el script del <head> y lo mantiene belleza.js) el logo va en un
   medallón marfil con filete champán que cuelga sobre la cinta y la cabecera. La forma y el tamaño del logo
   dentro vienen del servidor (Belleza::medallon): redondo u ovalado, y el logo siempre ENTERO.
   Al bajar, el medallón se encoge justo hasta el logo de la fila (belleza.js mide --med-k/--med-dx/--med-dy)
   y ahí se cambian, sin salto. Sin JS no hay medallón: queda el logo de siempre. */
.logo--medallon{position:relative}
.medallon{display:none;position:absolute;z-index:1;left:50%;top:50%;width:calc(var(--med-w) * var(--med-esc,1));height:calc(var(--med-h) * var(--med-esc,1));
  margin:calc(var(--med-h) * var(--med-esc,1) / -2 + var(--med-baja,0px)) 0 0 calc(var(--med-w) * var(--med-esc,1) / -2);
  flex-direction:column;align-items:center;justify-content:center;gap:6px;transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity 0s}
html.js .medallon{display:flex}
.medallon::before,.medallon::after{content:"";position:absolute;z-index:-1;border-radius:50%;transition:opacity .4s ease}
.medallon::before{inset:0;background:#FBF7F3;box-shadow:0 26px 46px -26px rgba(46,27,34,.6),0 3px 10px -4px rgba(46,27,34,.18)}
.medallon::after{inset:7px;border:1px solid var(--ac2);opacity:.75}
.medallon__img{width:calc(var(--med-iw) * var(--med-esc,1));height:calc(var(--med-ih) * var(--med-esc,1));object-fit:contain}
.medallon__nombre{font:italic 400 calc(36px * var(--med-esc,1))/1 var(--serif);color:var(--vino);letter-spacing:-.01em;white-space:nowrap}
.medallon__resto{max-width:72%;font:500 calc(9.5px * var(--med-esc,1))/1.35 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ac-txt);text-align:center}
/* Sin cinta de avisos arriba: el medallón empieza dentro de la cabecera (no se corta contra el borde). */
.cab:not(.cab--con-avisos) .medallon{top:6px;margin-top:var(--med-baja,0px);--med-esc:.84}
/* Arriba: el logo de la fila se esconde al instante (el medallón está encima, en el mismo sitio). */
html[data-arriba] .logo--medallon > .logo__img,html[data-arriba] .logo--medallon > .logo__texto{opacity:0;transition:none}
html[data-arriba] .logo--medallon:focus-visible{outline:none}
html[data-arriba] .logo--medallon:focus-visible .medallon::before{outline:3px solid var(--ac-txt);outline-offset:3px}
/* Al bajar: el medallón se encoge hasta el logo de la fila; al terminar, se cambian. */
html.js:not([data-arriba]) .cab .medallon{transform:translate(var(--med-dx,0px),var(--med-dy,0px)) scale(var(--med-k,.45));opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .14s linear .5s}
html.js:not([data-arriba]) .cab .medallon::before,html.js:not([data-arriba]) .cab .medallon::after{opacity:0}
.logo--medallon > .logo__img,.logo--medallon > .logo__texto{transition:opacity .14s linear .5s}
html[data-quieto] .medallon,html[data-quieto] .medallon::before,html[data-quieto] .medallon::after,html[data-quieto] .logo--medallon > *{transition:none!important}

/* ---------- Portada ---------- */
.portada{position:relative;height:calc(100vh - 110px);min-height:640px;max-height:980px;overflow:hidden;background:var(--vino);color:#fff;isolation:isolate}
.portada__medio{position:absolute;inset:0;z-index:-1}
.portada__medio .medio{background:var(--vino)}
.portada__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,27,34,.3) 0%,rgba(46,27,34,.1) 35%,rgba(46,27,34,.82) 100%),radial-gradient(ellipse at 80% 10%,rgba(46,27,34,.3),transparent 50%)}
.portada__texto{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:clamp(36px,5vw,72px)}
.portada__copia{display:flex;flex-direction:column;gap:26px;max-width:min(860px,calc(100% - 300px))}
.portada__titulo{font:400 clamp(43px,7vw,124px)/.92 var(--serif);letter-spacing:-.02em;color:#fff;text-shadow:0 4px 30px rgba(46,27,34,.45)}
.portada__titulo em{font-style:italic;color:var(--ac2-txt);white-space:nowrap}
.portada__botones{display:flex;gap:12px;flex-wrap:wrap}
.hoy{background:rgba(243,235,228,.95);color:var(--vino);border-radius:28px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);min-width:260px;animation:flotar 6s ease-in-out infinite}
.hoy__cab{display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.2em;color:var(--etiqueta)}
.hoy__punto{width:9px;height:9px;border-radius:50%;background:#1a8a4e;box-shadow:0 0 0 4px rgba(31,175,98,.2)}
.hoy__punto--no{background:#a3586f;box-shadow:0 0 0 4px rgba(46,27,34,.2)}
.hoy__horas{display:flex;gap:6px}
.hoy__horas a,.hoy__otro{border:1px solid var(--vino);border-radius:999px;padding:9px 14px;font-size:14px;font-weight:500;display:inline-flex;gap:6px;align-items:center}
.hoy__horas a:hover,.hoy__otro:hover{background:var(--vino);color:#fff}
.hoy__nota{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(46,27,34,.12);padding-top:12px;font-size:13px;color:var(--suave)}
.hoy__nota b{font:400 30px/1 var(--serif);color:var(--vino)}
.estrellas{color:#a8761d;letter-spacing:.1em}
.sello{position:absolute;z-index:3;right:clamp(16px,4vw,56px);top:clamp(20px,4vw,48px);width:136px;height:136px;border-radius:50%;background:var(--ac2);display:grid;place-items:center;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);color:var(--sobre-ac2)}
.sello:hover{color:var(--sobre-ac2);transform:scale(1.04)}
.sello__giro{position:absolute;inset:7px;width:122px;height:122px;animation:girar 16s linear infinite}
.sello__giro text{font:500 8.6px var(--sans);letter-spacing:2px;text-transform:uppercase;fill:currentColor}
.sello > span{font:italic 400 32px/1 var(--serif)}
@keyframes girar{to{transform:rotate(360deg)}}
.destellos i{position:absolute;pointer-events:none;background:#FBF7F3;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:titilar 3s ease-in-out infinite}
.destellos i:nth-child(1){right:24%;top:20%;width:44px;height:44px}
.destellos i:nth-child(2){left:12%;top:16%;width:26px;height:26px;background:var(--ac2);animation-delay:.4s}
.destellos i:nth-child(3){right:40%;top:42%;width:30px;height:30px;animation-delay:.8s}
.destellos i:nth-child(4){left:44%;top:10%;width:18px;height:18px;background:var(--ac);animation-delay:1.2s}
@keyframes titilar{0%,100%{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}
.pausar{position:absolute;z-index:4;left:var(--gutter);top:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(46,27,34,.45);color:#fff;display:grid;place-items:center;cursor:pointer}
.pausar svg{width:18px;height:18px}
.pausar__play{display:none}
.pausar[aria-pressed="true"] .pausar__pausa{display:none}
.pausar[aria-pressed="true"] .pausar__play{display:block}

/* Cinta inclinada de categorías */
.cinta-cats{position:relative;z-index:2;margin-top:-34px;transform:rotate(-2deg);background:var(--crema);color:var(--vino);padding:22px 0;overflow:hidden;white-space:nowrap;box-shadow:0 20px 40px -20px rgba(46,27,34,.5)}
.cinta-cats__pista{animation-duration:34s}
.cinta-cats__grupo{font:italic 400 clamp(28px,3.3vw,46px)/1 var(--serif);gap:40px;padding-right:40px}
.cinta-cats .chispa{color:var(--ac-txt);font-style:normal}

/* ---------- Filosofía ---------- */

/* ---------- Servicios ---------- */
.servicios{padding-top:0}
.serv p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.serv__txt{display:flex;flex-direction:column;gap:8px}
.serv h3{font:400 clamp(26px,2.6vw,40px)/1.05 var(--serif);letter-spacing:-.02em}
.serv p{font-size:16px;line-height:1.5;color:var(--suave);font-weight:300}
.serv__dur{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--etiqueta);margin-top:4px}
.serv__der{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.serv__precio{font:400 38px/1 var(--serif)}

/* ---------- «Hay más a los lados»: flechas, bordes que se desvanecen y barra de avance ---------- */
.desliza{position:relative}
.desliza::before,.desliza::after{content:"";position:absolute;top:0;bottom:24px;width:clamp(36px,8vw,110px);z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.desliza::before{left:0;background:linear-gradient(90deg,var(--fondo-borde,var(--crema)),transparent)}
.desliza::after{right:0;background:linear-gradient(270deg,var(--fondo-borde,var(--crema)),transparent)}
.desliza.hay-izq::before,.desliza.hay-der::after{opacity:1}
.desliza__flecha{position:absolute;top:calc(50% - 40px);z-index:3;width:52px;height:52px;border-radius:50%;border:0;background:var(--vino);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -10px rgba(46,27,34,.6);transition:transform .2s}
.desliza__flecha:hover{transform:scale(1.08)}
.desliza__flecha--izq{left:max(52px,var(--gutter))}   /* lejos del botón de accesibilidad, pegado al borde izquierdo */
.desliza__flecha--der{right:max(12px,var(--gutter))}
.desliza--dias::before,.desliza--dias::after{bottom:10px;width:40px}
.desliza--dias .desliza__flecha{top:calc(50% - 26px);width:40px;height:40px}
.desliza--dias .desliza__flecha--izq{left:-6px}
.desliza--dias .desliza__flecha--der{right:-6px}
.desliza__ayuda{display:none;font-size:13px;color:var(--suave);margin-top:-6px}
@media (hover:none){.desliza__ayuda{display:block}}

/* En las formas redondas el «▶» va abajo al centro (en la esquina se cortaba). */

/* ---------- Tonos ---------- */

/* ---------- Reservar ---------- */
.reservar__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:clamp(28px,3.5vw,56px);align-items:start}
.reservar__pasos{display:flex;flex-direction:column;gap:30px;min-width:0}
.paso{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.paso legend{font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.24em;color:var(--etiqueta);padding:0;margin-bottom:14px}
.paso__ayuda{margin:-4px 0 14px;font-size:14px;color:var(--suave)}
.segmentos__b[data-n]::after{content:attr(data-n);display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:8px;padding:0 5px;border-radius:999px;
  background:var(--ac);color:var(--sobre-ac);font-size:11px;letter-spacing:0;vertical-align:1px}
.paso__ayuda--nota{margin:12px 0 0;padding:12px 16px;border-radius:16px;background:#FBF7F3;border:1px solid var(--linea);color:var(--vino)}
.opciones{display:flex;gap:8px;flex-wrap:wrap}
.opcion{position:relative;cursor:pointer}
.opcion input,.dia input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opcion__caja{display:flex;align-items:center;gap:12px;height:76px;border:1px solid rgba(46,27,34,.3);border-radius:22px;padding:8px 14px 8px 8px;background:rgba(255,255,255,.55);transition:all .25s}
.opcion__foto{flex:none;width:58px;height:58px;border-radius:16px;overflow:hidden;display:block}
.opcion__foto--redonda{border-radius:50%}
.opcion__foto--chispa{display:grid;place-items:center;background:linear-gradient(140deg,var(--rosa),var(--lila));color:var(--ac-txt)}
.opcion__foto--chispa svg{width:24px;height:24px;fill:currentColor}
.opcion__txt{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.2}
.opcion__txt b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opcion__txt small{font-size:12.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opcion input:checked + .opcion__caja{background:var(--vino);color:var(--crema);border-color:var(--vino);box-shadow:0 0 0 3px var(--crema),0 0 0 5px var(--ac)}
.opcion input:checked + .opcion__caja small{color:rgba(243,235,228,.8)}
.opcion input:focus-visible + .opcion__caja,.dia input:focus-visible + span,.hora input:focus-visible + span{outline:3px solid var(--ac-txt);outline-offset:3px}
.opcion[hidden]{display:none}
.dias{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;scroll-snap-type:x proximity}
.dia{position:relative;flex:0 0 74px;scroll-snap-align:start}
.dia span{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid rgba(46,27,34,.3);border-radius:22px;padding:14px 4px;transition:all .25s}
.dia small{font:500 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em}
.dia b{font:400 30px/1 var(--serif)}
.dia input:checked + span{background:var(--vino);color:var(--crema);border-color:var(--vino)}
.dia--cerrado span{opacity:.5;text-decoration:line-through;border-style:dashed}
.dia--cerrado input{cursor:not-allowed}
.horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;min-height:52px}
.horas__msj{grid-column:1/-1;color:var(--suave);font-size:15px;padding:12px 0}
.hora{position:relative}
.hora input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.hora span{display:flex;flex-direction:column;align-items:center;border:1px solid rgba(46,27,34,.3);border-radius:16px;padding:12px 4px;font:500 15px/1.2 var(--sans);transition:all .25s}
.hora small{font-size:11px;font-weight:400;color:var(--suave)}
.hora input:checked + span{background:var(--vino);color:var(--crema);border-color:var(--vino)}
.hora input:checked + span small{color:rgba(243,235,228,.8)}
.cargando{opacity:.55;pointer-events:none}
.resumen{position:sticky;top:96px;background:var(--vino);color:var(--crema);border-radius:44px;padding:clamp(28px,3vw,48px);overflow:hidden;box-shadow:0 60px 100px -50px rgba(46,27,34,.8)}
.resumen__form,.resumen__ok{position:relative;display:flex;flex-direction:column;gap:22px}
.resumen__datos{margin:0;display:flex;flex-direction:column;gap:14px;font-size:16px}
.resumen__datos > div{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid rgba(243,235,228,.16);padding-bottom:14px}
.resumen__datos dt{color:rgba(243,235,228,.75);font-weight:300}
.resumen__datos dd{margin:0;font-weight:500;text-align:right}
.resumen select{background:rgba(243,235,228,.1);color:var(--crema);border:1px solid rgba(243,235,228,.3);border-radius:12px;padding:8px 12px;max-width:190px}
.resumen select option{color:var(--vino)}
.campos{display:flex;flex-direction:column;gap:12px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:500}
.campo label small{font-weight:300;opacity:.8}
.campo input,.campo textarea,.campo select{width:100%;border-radius:18px;padding:15px 18px;font-size:16px;outline:none;transition:border-color .2s}
.resumen .campo input,.resumen .campo textarea,.resumen .campo select{background:rgba(243,235,228,.08);border:1px solid rgba(243,235,228,.3);color:var(--crema)}
.resumen .campo input::placeholder,.resumen .campo textarea::placeholder{color:rgba(243,235,228,.6)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--ac2-txt)!important;box-shadow:0 0 0 3px rgba(244,201,93,.3)}
.campo__ayuda{font-size:13px;opacity:.8}
.campo input[aria-invalid="true"]{border-color:#ff9db5!important}
.error{color:#9e1238;font-size:14px;font-weight:500}
.lateral .error{color:#ffb3c6}
.error--resumen{padding:12px 16px;border-radius:14px;background:rgba(255,179,198,.12)}
.pago{display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(243,235,228,.16);padding-top:16px}
.pago__fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;color:rgba(243,235,228,.8)}
.pago__fila b{font:400 52px/1 var(--serif);color:var(--crema)}
.pago__msj{font-size:15px;color:rgba(243,235,228,.85)}
.pago--local{flex-direction:row;gap:10px;align-items:flex-start;color:var(--crema)}
.pago--local svg{flex:none;color:var(--ac2-txt);margin-top:3px}
.pago__cuenta{font-size:14px;color:var(--ac2-txt)}
.resumen__legal{font-size:13px;color:rgba(243,235,228,.75)}
.resumen__legal a{text-decoration:underline}
.resumen__lista{font:italic 400 72px/1 var(--serif);color:var(--ac2-txt)}
.resumen__ok p{font-size:18px;line-height:1.6;font-weight:300}
.resumen__ok-botones{display:flex;gap:10px;flex-wrap:wrap}
.resumen__ok[hidden],.resumen__form[hidden]{display:none}
.aviso-ok{padding:14px 18px;border-radius:18px;background:#e7f6ee;color:#145c39;font-weight:500}

/* ---------- Tienda ---------- */
.tienda__lead{margin:-14px 0 28px}
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:22px}
.producto{display:flex;flex-direction:column;gap:14px;height:100%}
.producto[hidden]{display:none}
.producto__foto{position:relative;aspect-ratio:1/1;border-radius:36px;overflow:hidden}
.producto__etq{position:absolute;top:18px;left:18px;background:var(--crema);border-radius:999px;padding:8px 14px;font:500 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.2em}
.producto__fila{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 4px;flex:1}
.producto__fila > div{min-width:0}
.producto__fila{min-height:84px}
.producto h3{font:400 24px/1.1 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.producto p{font-size:14px;font-weight:300;color:var(--suave);margin-top:4px;min-height:1.6em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.producto .boton{margin-top:auto}
.producto__precio{font:400 26px/1 var(--serif);white-space:nowrap}
.carrito-boton{position:fixed;right:20px;bottom:20px;z-index:60;box-shadow:0 20px 40px -14px rgba(46,27,34,.6)}
.carrito-boton[hidden]{display:none}
.lateral{position:fixed;inset:0;z-index:90;background:rgba(46,27,34,.55);display:flex;justify-content:flex-end}
.lateral[hidden]{display:none}
.lateral__caja{position:relative;width:min(440px,100%);height:100%;overflow-y:auto;background:var(--vino);color:var(--crema);padding:32px 28px;display:flex;flex-direction:column;gap:18px}
.lateral__caja h2{font:400 40px/1 var(--serif)}
.lateral__caja .campo input{background:rgba(243,235,228,.08);border:1px solid rgba(243,235,228,.3);color:var(--crema)}
.lateral__nota{font-size:15px;color:rgba(243,235,228,.85)}
.lateral__nota a{color:var(--ac2-txt);text-decoration:underline}
.lateral form{display:flex;flex-direction:column;gap:14px}
/* Retiro o envío (2-oct): dos opciones grandes, la elegida en marfil. */
.entrega{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.entrega legend{font-size:14px;font-weight:500;margin-bottom:10px}
.entrega__opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.entrega__op{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:10px 12px;border-radius:16px;
  border:1px solid rgba(243,235,228,.3);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.entrega__op input{position:absolute;opacity:0;inset:0;cursor:pointer}
.entrega__op:has(input:checked){background:var(--crema);color:var(--vino);border-color:var(--crema)}
.entrega__op:has(input:focus-visible){outline:3px solid var(--ac2-txt);outline-offset:2px}
.lateral__caja .campo select,.lateral__caja .campo input[type=file]{background:rgba(243,235,228,.08);border:1px solid rgba(243,235,228,.3);color:var(--crema);border-radius:14px;padding:12px 14px;font:inherit}
.lateral__caja .campo select option{color:#2E1B22}
.lateral__caja .campo__ayuda{font-size:13px;color:rgba(243,235,228,.75)}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.45}
.acepto input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--ac)}
.acepto a{color:var(--ac2-txt);text-decoration:underline}
.cerrar{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,235,228,.3);background:transparent;color:inherit;cursor:pointer;font-size:18px}
.lista-pedido{display:flex;flex-direction:column;gap:10px}
.lista-pedido li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(243,235,228,.16);padding-bottom:10px}
.lista-pedido__der{display:flex;gap:10px;align-items:center}
.quitar{width:32px;height:32px;border-radius:50%;border:1px solid rgba(243,235,228,.3);background:transparent;color:inherit;cursor:pointer}

/* ---------- Testimonios ---------- */
.testimonios{background:linear-gradient(180deg,rgba(243,235,228,0) 0%,#EFE5DD 8%,#F1E8E1 92%,rgba(243,235,228,0) 100%)}

/* ---------- Instagram ---------- */
.insta .titulo span{font-style:italic;color:var(--ac-txt)}
.insta__rejilla{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:20px}
.insta__item.no-pc{display:none}
/* Cada foto con forma de PUBLICACIÓN de Instagram (Kevin, 3-oct): su cuenta arriba, la foto cuadrada y el corazón abajo. */
.insta__post{display:flex;flex-direction:column;background:#FBF7F3;border-radius:24px;overflow:hidden;box-shadow:var(--sombra-suave);transition:transform .5s var(--curva),box-shadow .5s}
.insta__post:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(46,27,34,.55)}
.insta__cab{display:flex;align-items:center;gap:10px;padding:12px 14px;min-width:0}
.insta__avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#F9CE34,#EE2A7B 55%,#6228D7);font:italic 400 15px/1 var(--serif);color:#fff}
.insta__avatar img{width:100%;height:100%;border-radius:50%;object-fit:contain;background:#fff;border:2px solid #FBF7F3}
.insta__cab b{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--vino);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insta__mas{font-weight:700;letter-spacing:1px;color:var(--suave)}
.insta__foto{position:relative;display:block;aspect-ratio:1/1;overflow:hidden}
.insta__foto .medio{position:absolute;inset:0}
.insta__reel{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:rgba(46,27,34,.55);color:#fff;display:grid;place-items:center}
.insta__pie{display:flex;align-items:center;gap:14px;padding:12px 14px 14px;color:var(--vino)}
.insta__pie svg{flex:none;transition:transform .3s var(--curva),color .3s}
.insta__guardar{margin-left:auto}
.insta__post:hover .insta__corazon{color:#E3405F;transform:scale(1.12)}
.insta__post:hover .insta__corazon path{fill:currentColor}


/* ---------- Visítanos ---------- */
.visitanos__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:clamp(28px,3.5vw,56px);align-items:stretch}
.visitanos__rejilla > div:first-child{display:flex;flex-direction:column;gap:28px}
.visitanos__datos{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.visitanos__datos dt{font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.24em;color:var(--etiqueta);margin-bottom:12px}
.visitanos__datos dd{margin:0;display:flex;flex-direction:column;font-size:17px;line-height:1.8;font-weight:300}
.visitanos__dir{font:400 26px/1.25 var(--serif)!important}
.cerrado{color:var(--suave)}
.visitanos__botones{display:flex;gap:10px;flex-wrap:wrap}
.visitanos__mapa{position:relative;min-height:440px;border-radius:44px;overflow:hidden;background:var(--lila)}
.visitanos__mapa .medio,.mapa{position:absolute;inset:0;width:100%;height:100%;border:0}
.preguntas{border-top:1px solid var(--linea)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta h4{font:inherit}
.pregunta button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;padding:20px 0;font:400 18px/1.4 var(--sans);color:var(--vino);cursor:pointer;text-align:left}
.pregunta__signo{font:400 30px/1 var(--serif);color:var(--ac-txt);flex:none}
.pregunta__resp p{padding:0 0 22px;font-size:16px;line-height:1.65;font-weight:300;color:var(--suave);max-width:560px}

/* ---------- Páginas legales ---------- */
.legal .envoltura{max-width:900px}
.legal .titulo{margin:12px 0}
.legal__fecha{color:var(--suave);font-size:14px;margin-bottom:24px}
.legal__texto{font-size:17px;line-height:1.75}

/* ---------- Pie ---------- */
.pie{position:relative;z-index:1;background:linear-gradient(180deg,rgba(243,235,228,0) 0%,#EDE2DA 18%,#EDE2DA 60%,#EADFD6 100%)}
.pie__cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(28px,3.5vw,56px);align-items:center;padding-top:clamp(32px,3.6vw,56px);padding-bottom:clamp(32px,3.2vw,48px)}
.pie__cta > div:first-child{display:flex;flex-direction:column;gap:22px}
.pie__arcos{position:relative;height:clamp(280px,26vw,380px)}
.pie__arco{position:absolute;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(46,27,34,.6);animation:flotar 7s ease-in-out infinite}
.pie__arco img{width:100%;height:100%;object-fit:cover}
.pie__arco--0{left:0;top:8%;width:36%;height:76%;border-radius:200px}
.pie__arco--1{left:30%;top:0;width:40%;height:100%;border-radius:220px 220px 32px 32px;z-index:1;animation-delay:1s}
.pie__arco--2{right:0;top:14%;width:34%;height:70%;border-radius:32px 32px 200px 200px;animation-delay:2s}
.pie__palabras{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(46,27,34,.14);border-bottom:1px solid rgba(46,27,34,.14);padding:16px 0}
.pie__pista{animation-duration:34s}
.pie__grupo{font:italic 400 clamp(24px,2.4vw,36px)/1 var(--serif);gap:36px;padding-right:36px}
.pie__grupo .chispa{color:var(--ac-txt);font-style:normal}
.pie__oscuro{position:relative;margin-top:clamp(28px,3vw,44px);background:var(--vino);color:var(--crema);border-radius:56px 56px 0 0;overflow:hidden;padding-bottom:28px}
.pie__oscuro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 12% 0%,rgba(46,27,34,.3),transparent 45%),radial-gradient(ellipse at 90% 100%,rgba(46,27,34,.25),transparent 50%);pointer-events:none}
.pie__oscuro > .envoltura{position:relative;display:flex;flex-direction:column;gap:clamp(30px,3.5vw,50px);padding-top:clamp(36px,4vw,56px)}
.pie__fotos{position:relative;overflow:hidden;padding-top:clamp(28px,3vw,44px)}
.pie__fotos-pista{animation-duration:60s}
.pie__fotos-grupo{gap:14px;padding-right:14px;align-items:center}
.pie__mini{flex:none;width:150px;height:150px;overflow:hidden;border:3px solid rgba(243,235,228,.14);border-radius:24px}
.pie__mini--1{height:190px}
.pie__mini--2{border-radius:999px}
.pie__mini img{width:100%;height:100%;object-fit:cover}
.pie__marca{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
/* El logo del pie, GRANDE y en su medallón (Kevin, 2-oct): la misma forma que el de arriba, quieto. */
.medallon--pie{display:flex;position:relative;left:auto;top:auto;margin:0;--med-esc:.92}
.medallon--pie::after{border-color:var(--ac2)}
.medallon--pie .medallon__nombre{color:var(--vino)}
.pie__nav{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap}
.pie__nav a{font:400 clamp(22px,2vw,30px)/1.2 var(--serif);color:var(--crema);padding:4px 0}
.pie__nav a:hover{color:#E6D9CF}
.pie__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(24px,3vw,44px);border-top:1px solid rgba(243,235,228,.16);padding-top:clamp(28px,3vw,40px)}
.pie__cols h2{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.26em;color:#E6D9CF;margin-bottom:14px}
.pie__cols p,.pie__redes a{font-size:17px;line-height:1.6;color:var(--crema)}
.pie__cols a:hover{color:#E6D9CF}
.pie__cols .cerrado{color:rgba(243,235,228,.75)}
.pie__redes{display:flex;flex-direction:column;gap:8px}
.pie__redes a{display:inline-flex;align-items:center;gap:10px;word-break:break-word}
.pie__bajo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(243,235,228,.8);border-top:1px solid rgba(243,235,228,.16);padding-top:22px}
.pie__bajo a{color:var(--crema);text-decoration:underline}
.pie__bajo nav{display:flex;gap:18px}

/* ---------- Aparecer al bajar ---------- */
html.js .revelar{opacity:0;transform:translateY(40px);transition:opacity 1s var(--curva),transform 1s var(--curva)}
html.js .revelar.visto{opacity:1;transform:none}
/* Respaldo: si el JS no llega, todo se ve igual a los 1,5 s. */
html.js:not(.bel-listo) .revelar{animation:mostrar 0s 1.5s forwards}
@keyframes mostrar{to{opacity:1;transform:none}}

/* ---------- Cursor con brillo (solo con mouse y si nadie pidió quietud) ---------- */
.cursor-punto,.cursor-anillo{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;z-index:9998}
.cursor-punto{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.cursor-anillo{width:42px;height:42px;margin:-21px 0 0 -21px;border:1px solid var(--ac);transition:width .25s,height .25s,margin .25s,background .25s}
.cursor-anillo.encima{width:72px;height:72px;margin:-36px 0 0 -36px;background:color-mix(in srgb,var(--ac) 16%,transparent)}
.brillito{position:fixed;pointer-events:none;z-index:9997;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:caer .9s ease-out forwards}
@keyframes caer{to{opacity:0;transform:translate(var(--dx),40px) scale(.2) rotate(180deg)}}

/* =====================================================================
   RONDA DEL 2-OCT (pedidos de Kevin): servicios con foto grande, una sola galería
   («Nuestro trabajo») con visor, testimonios con fotos grandes, menú del celular
   propio. Nada de bandas borrosas ni flechas encima de las fotos.
   ===================================================================== */
.ancla{position:absolute;top:-80px}

/* ---------- Servicios: foto grande del servicio + menú ---------- */
.servicios__cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 32px;margin-bottom:clamp(24px,3vw,40px)}
.servicios__rejilla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:start}
.servicios__vitrina{position:sticky;top:96px}
.vitrina{margin:0;position:relative;border-radius:32px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(46,27,34,.55);background:var(--rosa)}
.vitrina .medio{display:block;width:100%;aspect-ratio:1/1;max-height:72vh}
.servicios__menu{display:flex;flex-direction:column;min-width:0}
.servicios__vitrina,.reservar__pasos,.paso{min-width:0}
.lista-serv__sub{font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--etiqueta);margin-bottom:6px}
.serv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 0 20px 18px;border-top:1px solid var(--linea);border-left:3px solid transparent;transition:background .3s,border-color .3s}
.serv[aria-current="true"]{border-left-color:var(--ac);background:linear-gradient(90deg,rgba(46,27,34,.08),transparent 70%)}
.serv__nombre{all:unset;cursor:pointer;font:400 clamp(24px,2.3vw,34px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--vino)}
/* Toda la tarjeta elige el servicio (Kevin, 3-oct: «solo vale al tocar las letras grandes»). */
.serv{position:relative;cursor:pointer}
.serv__nombre::after{content:"";position:absolute;inset:0;border-radius:inherit}
.serv .boton{position:relative;z-index:1}
.serv:has(.serv__nombre:focus-visible){outline:3px solid var(--ac-txt);outline-offset:3px}
.serv__nombre:focus-visible{outline:none}
.serv__nombre:focus-visible{outline:3px solid var(--ac-txt);outline-offset:4px;border-radius:6px}
.serv__nombre:hover{color:var(--ac-txt)}

/* ---------- Nuestro trabajo: rejilla tipo mosaico con la forma real de cada foto ---------- */
.obras{background:linear-gradient(180deg,rgba(243,235,228,0) 0%,#EFE5DD 10%,#EFE5DD 90%,rgba(243,235,228,0) 100%)}
.obras__cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin-bottom:24px}
.obras__filtros{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.obras__tonos{display:flex;flex-wrap:wrap;gap:8px}
.tono-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px 8px 10px;border-radius:999px;border:1px solid var(--linea);background:#FBF7F3;color:var(--vino);font:500 14px/1 var(--sans);cursor:pointer}
.tono-chip__gota,.obra__gota{width:16px;height:16px;border-radius:50%;background:var(--tono);flex:none;box-shadow:inset 0 -2px 4px rgba(0,0,0,.25)}
.tono-chip[aria-pressed="true"]{border-color:var(--vino);box-shadow:0 0 0 2px var(--vino)}
.obras__rejilla{columns:4 240px;column-gap:16px}
.obra{break-inside:avoid;margin-bottom:16px}
/* Con JavaScript: mosaico sin huecos (cada foto en la columna más baja; ver belleza.js) */
.obras__rejilla--js{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:4px;column-gap:16px;columns:auto}
.obras__rejilla--js .obra{margin:0}
.obra--estirada .obra__boton{height:calc(100% - 16px)}
.obra--estirada .medio{height:100%;aspect-ratio:auto!important}
.obra__boton{all:unset;position:relative;display:block;width:100%;border-radius:22px;overflow:hidden;cursor:zoom-in;background:var(--rosa);box-shadow:0 24px 40px -30px rgba(46,27,34,.6)}
.obra__boton:focus-visible{outline:3px solid var(--ac-txt);outline-offset:3px}
.obra__boton .medio{display:block;width:100%;transition:transform .7s var(--curva)}
.obra__boton:hover .medio{transform:scale(1.04)}
.obra__rotulo{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(46,27,34,.78);color:#fff;font:500 13px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obra__play{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--vino);display:grid;place-items:center}
.obra__play svg{width:14px;height:14px;margin-left:2px}
.obras__vacio{color:var(--suave);padding:24px 0}
.obras__mas{display:flex;justify-content:center;margin-top:20px}

/* El visor: la foto entera en grande; flechas a los lados, fuera de la foto */
.visor{border:0;padding:0;margin:auto;width:min(1180px,96vw);max-width:none;max-height:94vh;background:transparent;color:#fff;overflow:visible}
.visor::backdrop{background:rgba(46,27,34,.9);backdrop-filter:blur(6px)}
.visor__caja{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;grid-template-areas:"izq medio der" ". info .";align-items:center;gap:14px 18px;position:relative}
.visor__medio{grid-area:medio;display:flex;justify-content:center}
.visor__medio img,.visor__medio video{max-width:100%;max-height:74vh;width:auto;height:auto;border-radius:20px;background:#000}
.visor__flecha{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.visor__flecha:hover{background:rgba(255,255,255,.2)}
.visor__flecha--izq{grid-area:izq}
.visor__flecha--der{grid-area:der}
.visor__info{grid-area:info;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.visor__info h3{font:400 clamp(24px,2.4vw,32px)/1.1 var(--serif);color:#fff}
.visor__rotulo{font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ac2-txt);width:100%}
.visor__cuenta{font:500 13px/1 var(--sans);letter-spacing:.16em;opacity:.8;margin-right:auto}
.visor__cerrar{position:absolute;top:-58px;right:0;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);cursor:pointer}
.visor__cerrar span::before,.visor__cerrar span::after,.menu-movil__cerrar span::before,.menu-movil__cerrar span::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.visor__cerrar span::after,.menu-movil__cerrar span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.visor__cerrar{color:#fff}

/* ---------- Testimonios: fotos grandes y poco texto debajo ---------- */
.testimonios{background:linear-gradient(180deg,rgba(243,235,228,0) 0%,#EFE5DD 10%,#F1E8E1 90%,rgba(243,235,228,0) 100%)}
.carrusel__pista{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 22px) / 3);column-gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista > li{scroll-snap-align:start}
.carrusel__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.carrusel__cuenta{font:500 13px/1 var(--sans);letter-spacing:.18em;min-width:72px;text-align:center}
.redondo:disabled{opacity:.35;cursor:default}
.testi figure{margin:0;display:flex;flex-direction:column;gap:18px;height:100%}
.testi__foto{display:block;border-radius:28px;overflow:hidden;box-shadow:0 40px 70px -44px rgba(46,27,34,.55)}
.testi__foto .medio{display:block;width:100%;aspect-ratio:4/5}
.testi figcaption{display:flex;flex-direction:column;gap:10px;padding:0 6px}
.testi__chapa{align-self:flex-start;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ac-txt)}
.testi blockquote{margin:0;font:italic 400 clamp(20px,1.7vw,24px)/1.3 var(--serif);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.testi__quien{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:15px}
.testi__quien b{font-weight:500}
.testi__quien span{color:var(--suave);font-size:14px}

/* ---------- Menú del celular: pantalla propia ---------- */

@media (max-width:1100px){
  .servicios__rejilla{grid-template-columns:1fr}
  .servicios__vitrina{position:static}
  .vitrina .medio{aspect-ratio:16/11;max-height:none}
  .carrusel__pista{grid-auto-columns:calc((100% - 22px) / 2)}
  .obras__rejilla{columns:3 200px}
  .obras__rejilla--js{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .vitrina{border-radius:24px}
  .vitrina .medio{aspect-ratio:4/3}
  .serv{grid-template-columns:1fr;padding:16px 0 16px 12px;gap:6px 12px}
  .serv__nombre{font-size:24px}
  .obras__rejilla{columns:2;column-gap:10px}
  .obras__rejilla--js{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
  .obra--estirada .obra__boton{height:calc(100% - 10px)}
  .obra{margin-bottom:10px}
  .obra__boton{border-radius:16px}
  .obra__rotulo{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:6px 10px;font-size:12px}
  .obra__play{top:8px;right:8px;width:30px;height:30px}
  .carrusel__pista{grid-auto-columns:100%}
  .visor{width:100vw;max-height:100vh;height:100%}
  .visor__caja{grid-template-columns:1fr auto auto;grid-template-areas:"medio medio medio" "info izq der";align-content:center;min-height:100%;padding:70px 16px 24px}
  .visor__medio img,.visor__medio video{max-height:66vh;border-radius:16px}
  .visor__cerrar{top:14px;right:16px}
  .visor__flecha{width:46px;height:46px}
}

/* =====================================================================
   RONDA 2 DEL 2-OCT: un solo tamaño de foto en todo el salón, textos en recuadros con
   diseño (que se lean bien), filosofía con línea de tiempo, reserva más corta y
   enfocada en el servicio. Lo que no es producto va sin bordes: relleno suave y sombra.
   ===================================================================== */
:root{--radio-foto:24px;--panel:rgba(255,255,255,.72);--sombra-suave:0 18px 40px -26px rgba(46,27,34,.45)}

/* ---------- Filosofía: frase más contenida + línea de tiempo alternada ---------- */

/* ---------- Servicios: categorías en una barra y filas con recuadro ---------- */
.segmentos{display:flex;gap:4px;padding:5px;margin-bottom:18px;border-radius:999px;background:rgba(46,27,34,.06);overflow-x:auto;scrollbar-width:none;max-width:100%}
.segmentos::-webkit-scrollbar{display:none}
.segmentos--ajustado{align-self:flex-start;width:fit-content;margin-bottom:0}
.segmentos__b{flex:none;border:0;background:transparent;color:var(--vino);border-radius:999px;padding:12px 20px;min-height:44px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.segmentos__b:hover{background:rgba(255,255,255,.7)}
.segmentos__b[aria-selected="true"],.segmentos__b[aria-pressed="true"]{background:var(--vino);color:var(--crema);box-shadow:0 8px 18px -10px rgba(46,27,34,.8)}
.lista-serv{display:flex;flex-direction:column;gap:10px}
.lista-serv__sub{margin:0 0 4px 4px}
.serv{border:0;border-left:0;border-radius:22px;padding:18px 22px;background:var(--panel);box-shadow:var(--sombra-suave);transition:transform .3s var(--curva),box-shadow .3s}
.serv:hover{transform:translateX(4px)}
.serv[aria-current="true"]{background:#FBF7F3;box-shadow:inset 4px 0 0 var(--ac),0 22px 44px -26px rgba(46,27,34,.55)}
.serv__nombre{font-size:clamp(22px,2vw,30px)}
.serv p{font-size:15px}
.serv__der{gap:10px}
.serv__precio{font-size:30px}
.boton--mini{min-height:38px;padding:9px 18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--vino);color:#fff}
.boton--mini:hover{background:var(--ac);color:var(--sobre-ac)}
.vitrina{border-radius:var(--radio-foto)}

/* ---------- Galería: las etiquetas de cada foto, más legibles ---------- */
.obra__boton{border-radius:var(--radio-foto)}
.obra__rotulo{background:rgba(255,255,255,.94);color:var(--vino);font-weight:600;box-shadow:0 6px 16px -8px rgba(46,27,34,.6)}

/* ---------- Testimonios: foto más chica y el texto en su recuadro ---------- */
.testimonios__lista{max-width:1180px;margin:0 auto}
.testi figure{gap:0;background:var(--panel);border-radius:28px;padding:12px;box-shadow:var(--sombra-suave)}
.testi__foto{border-radius:20px;box-shadow:none}
.testi__foto .medio{aspect-ratio:4/3}
.testi figcaption{padding:16px 10px 8px}
.testi blockquote{font-size:clamp(19px,1.5vw,22px)}

/* ---------- Productos: el mismo redondeo que las demás fotos ---------- */
.producto__foto{border-radius:var(--radio-foto)}

/* ---------- Reserva: servicios como fotos, sin recuadros; la tarjeta clara y corta ---------- */
.reservar__rejilla{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}
.opciones--servicios{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 14px}
.opcion--servicio .opcion__caja{flex-direction:column;align-items:stretch;gap:10px;height:auto;padding:0;border:0;background:none;border-radius:0}
.opcion--servicio .opcion__foto{position:relative;width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radio-foto);box-shadow:var(--sombra-suave);transition:box-shadow .25s,transform .25s}
.opcion--servicio .opcion__foto .medio{position:absolute;inset:0}
.opcion--servicio:hover .opcion__foto{transform:translateY(-3px)}
.opcion__marca{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--ac);color:var(--sobre-ac);display:grid;place-items:center;font-weight:700;opacity:0;transform:scale(.6);transition:all .25s}
.opcion--servicio .opcion__txt{padding:0 4px}
.opcion--servicio .opcion__txt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.opcion--servicio input:checked + .opcion__caja{background:none;color:var(--vino);box-shadow:none}
.opcion--servicio input:checked + .opcion__caja small{color:var(--suave)}
.opcion--servicio input:checked + .opcion__caja .opcion__foto{box-shadow:0 0 0 3px var(--crema),0 0 0 6px var(--ac),0 22px 40px -22px rgba(46,27,34,.7)}
.opcion--servicio input:checked + .opcion__caja .opcion__marca{opacity:1;transform:none}
.opciones--equipo{display:flex;flex-wrap:wrap;gap:10px}
.opciones--equipo .opcion__caja{height:62px;border:0;border-radius:999px;padding:6px 18px 6px 6px;background:rgba(46,27,34,.06)}
.opciones--equipo .opcion__foto{width:50px;height:50px}
.dia span,.hora span{border:0;background:rgba(46,27,34,.06)}
.dia--cerrado span{background:transparent;outline:1px dashed rgba(46,27,34,.25);outline-offset:-1px}
.resumen{top:96px;background:#FBF7F3;color:var(--vino);border-radius:28px;padding:18px 18px 22px;box-shadow:0 40px 80px -46px rgba(46,27,34,.55)}
.resumen__form,.resumen__ok{gap:16px}
.resumen__foto{position:relative;aspect-ratio:16/10;border-radius:20px;background:linear-gradient(135deg,var(--rosa),var(--lila)) center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.resumen__foto span{font:italic 400 22px/1 var(--serif);color:var(--suave)}
.resumen__foto.con-foto span{display:none}
.resumen__datos{gap:10px;font-size:15px;padding:0 4px}
.resumen__datos > div{border-bottom:1px solid rgba(46,27,34,.1);padding-bottom:10px}
.resumen__datos dt{color:var(--suave)}
.resumen .campo input,.resumen .campo textarea,.resumen .campo select{background:var(--crema);border:1px solid rgba(46,27,34,.14);color:var(--vino);border-radius:14px;padding:13px 14px}
.resumen .campo input::placeholder,.resumen .campo textarea::placeholder{color:rgba(94,58,72,.6)}
.campos--dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mas-datos{border-radius:14px;background:rgba(46,27,34,.04);padding:0 14px}
.mas-datos summary{cursor:pointer;padding:13px 0;font-size:14px;font-weight:500;list-style:none}
.mas-datos summary::-webkit-details-marker{display:none}
.mas-datos summary::before{content:"+ ";color:var(--ac-txt);font-weight:600}
.mas-datos[open] summary::before{content:"– "}
.mas-datos summary small{font-weight:300;color:var(--suave)}
.mas-datos .campos{padding-bottom:14px}
.resumen .pago{border-top-color:rgba(46,27,34,.1)}
.resumen .pago__fila,.resumen .pago__msj,.resumen__legal{color:var(--suave)}
.resumen .pago__fila b{color:var(--vino)}
.resumen .pago--local{color:var(--vino);font-size:14px}
.resumen .pago--local svg{color:var(--ac-txt)}
.resumen .pago__cuenta{color:var(--ac-txt)}
.resumen .error{color:#9e1238}
.resumen .error--resumen{background:#fde7ec}
.resumen__lista{color:var(--ac-txt);font-size:56px}

@media (max-width:1100px){
  .reservar__rejilla{grid-template-columns:1fr}
  .resumen{position:relative;top:auto}
}
@media (max-width:760px){
  /* Celular: la línea de tiempo baja en columna, con la línea a la izquierda */
  .segmentos{border-radius:18px}
  .serv{padding:14px 16px}
  .opciones--servicios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campos--dos{grid-template-columns:1fr}
  .resumen{padding:14px 14px 18px;border-radius:24px}
  .testi figure{border-radius:22px;padding:10px}
}

/* ---------- Filosofía: quiénes somos, en corto (referencia de Kevin, 2-oct) ---------- */
.filosofia{padding:clamp(36px,4vw,64px) 0 clamp(28px,3vw,44px)}
.filosofia__rejilla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.filosofia__fotos{position:relative;min-height:440px}
.filosofia__foto{position:absolute;display:block;overflow:hidden;border-radius:var(--radio-foto);box-shadow:0 30px 60px -36px rgba(46,27,34,.5)}
.filosofia__foto .medio{position:absolute;inset:0}
.filosofia__foto--1{left:0;top:0;width:68%;height:82%}
.filosofia__foto--2{right:0;bottom:0;width:52%;height:56%;border:8px solid var(--crema)}
.filosofia__texto{display:flex;flex-direction:column;gap:14px;justify-content:center}
.filosofia__titulo{font:400 clamp(32px,3.4vw,54px)/1.1 var(--serif);letter-spacing:-.015em;color:var(--vino);text-wrap:balance}
.filosofia__titulo em,.filosofia__bajada em{font-style:italic;color:var(--ac-txt)}
.filosofia__bajada{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--suave);max-width:560px}
/* Cómo trabajamos: una línea con los pasos; el texto va debajo, sin recuadros */
.linea-tiempo{margin-top:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:28px}
.linea-tiempo__cuerpo{position:relative}
.linea-tiempo__via{position:absolute;left:0;right:0;top:26px;height:2px;background:rgba(46,27,34,.12);overflow:hidden}
.linea-tiempo__via span{position:absolute;left:0;top:0;height:100%;width:4%;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width 1.8s var(--curva)}
.linea-tiempo__via span.lleno{width:100%}
.linea-tiempo__pasos{position:relative;display:grid;grid-template-columns:repeat(var(--pasos),minmax(0,1fr));gap:24px}
.linea-tiempo__paso{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.linea-tiempo__punto{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--vino);color:#fff;font:400 18px/1 var(--serif);box-shadow:0 0 0 6px var(--crema)}
.linea-tiempo__txt h3{font:500 19px/1.25 var(--sans);color:var(--vino)}
.linea-tiempo__txt p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--suave);max-width:240px;margin-left:auto;margin-right:auto}
html[data-quieto] .linea-tiempo__via span{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.linea-tiempo__via span{width:100%;height:100%}}
@media (max-width:900px){
  .filosofia__rejilla{grid-template-columns:1fr}
  .filosofia__fotos{max-width:520px;width:100%;margin:0 auto;aspect-ratio:5/4;min-height:0}
  .linea-tiempo__via{left:25px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .linea-tiempo__via span{width:100%!important;height:4%;transition:height 1.8s var(--curva)}
  .linea-tiempo__via span.lleno{height:100%}
  .linea-tiempo__pasos{grid-template-columns:1fr;gap:22px}
  .linea-tiempo__paso{flex-direction:row;align-items:flex-start;text-align:left}
  .linea-tiempo__punto{flex:none}
  .linea-tiempo__txt{padding-top:4px}
  .linea-tiempo__txt p{margin-left:0;max-width:none}
}

/* ---------- Menú del celular: claro y sencillo (2-oct, Kevin: «elegante») ---------- */
.menu-movil{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;overflow-y:auto;background:var(--crema);color:var(--vino)}
.menu-movil__cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);border-bottom:1px solid var(--linea)}
.menu-movil__cab .logo__img{height:40px;width:auto}
.menu-movil__cerrar{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);background:transparent;color:var(--vino);cursor:pointer;flex:none}
.menu-movil__nav{padding:8px var(--gutter)}
.menu-movil__nav a{display:flex;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px solid var(--linea);font:400 30px/1.15 var(--serif);color:var(--vino)}
.menu-movil__nav a:hover{color:var(--ac-txt)}
.menu-movil__nav a svg{margin-left:auto;align-self:center;opacity:.45}
.menu-movil__num{font:500 11px/1 var(--sans);letter-spacing:.18em;color:var(--etiqueta);min-width:22px}
.menu-movil__pie{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:24px var(--gutter) 28px}
.menu-movil__pie .boton--wa{background:transparent;color:var(--vino);border:1px solid var(--linea)}
.menu-movil__pie .boton--wa svg{color:#1d8f52}
.menu-movil__datos{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:14px;color:var(--suave)}
.menu-movil__datos p{display:flex;gap:8px;align-items:flex-start}
.menu-movil__datos svg{flex:none;margin-top:3px}
.menu-movil__redes{display:flex;gap:8px;margin-top:6px}
.menu-movil__redes a{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;color:var(--vino)}

/* ---------- Quién te atiende: las fotos del equipo bajo la frase, tres por fila (Kevin, 2-oct) ---------- */
.equipo{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding-top:22px;border-top:1px solid var(--linea)}
.equipo__lista{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:18px 14px}
.equipo__persona{display:flex;flex-direction:column;gap:2px;min-width:0}
.equipo__foto{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;margin-bottom:8px;box-shadow:var(--sombra-suave)}
.equipo__foto .medio{position:absolute;inset:0}
.equipo__nombre{font:400 20px/1.2 var(--serif);color:var(--vino)}
.equipo__rol{font-size:13px;line-height:1.35;color:var(--suave)}
@media (max-width:560px){
  /* Celular (Kevin, 3-oct): como en la computadora, las fotos de las personas en fila (hasta tres), un poco más
     chicas y con su nombre debajo, centrado. */
  .equipo__lista{gap:14px 10px}
  .equipo__persona{text-align:center;align-items:center}
  .equipo__foto{width:100%;aspect-ratio:3/4;border-radius:16px;margin-bottom:6px}
  .equipo__nombre{font-size:17px}
  .equipo__rol{font-size:12px}
  /* ¿Con quién?: opciones grandes, una por fila (se tocan fácil con el dedo). */
  .opciones--equipo{display:grid;grid-template-columns:1fr;gap:10px}
  .opciones--equipo .opcion__caja{height:auto;min-height:76px;border-radius:24px;padding:8px 18px 8px 8px}
  .opciones--equipo .opcion__foto{width:60px;height:60px}
  .opciones--equipo .opcion__txt b{font-size:17px}
  .opciones--equipo .opcion__txt small{font-size:14px}
}

/* ---------- Ventana de accesibilidad: clara, con los colores del salón (2-oct, Kevin) ---------- */
html[data-logo] .wa11y-fab{background:var(--vino);color:var(--crema);box-shadow:0 10px 24px -10px rgba(46,27,34,.6)}
html[data-logo] .wa11y-pop{background:#FBF7F3;color:var(--vino);border:1px solid var(--linea);box-shadow:0 30px 60px -30px rgba(46,27,34,.55);font-family:var(--sans)}
html[data-logo] .wa11y-pop h2{color:var(--vino);font:400 20px/1.1 var(--serif)}
html[data-logo] .wa11y-row{border-top-color:var(--linea)}
html[data-logo] .wa11y-nota{color:var(--suave)}
html[data-logo] .wa11y-seg button{border-color:var(--linea);color:var(--vino);background:var(--crema);font-family:var(--sans)}
html[data-logo] .wa11y-seg button[aria-pressed="true"]{background:var(--vino);border-color:var(--vino);color:var(--crema)}
html[data-logo] .wa11y-sw{border-color:var(--linea);background:var(--crema)}
html[data-logo] .wa11y-sw::after{background:#FBF7F3;box-shadow:0 1px 3px rgba(46,27,34,.35)}
html[data-logo] .wa11y-sw[aria-pressed="true"]{background:var(--ac);border-color:var(--ac)}
html[data-logo] .wa11y-estado{color:var(--ac-txt)}
html[data-logo] .wa11y-reset{border-color:var(--linea);color:var(--suave)}
html[data-logo] .wa11y-reset:hover{color:var(--vino)}

/* ---------- Vista previa del panel ---------- */
/* Lo que se está editando en el panel: un BORDE amarillo alrededor (2-oct, Kevin: «la línea amarilla tapa el texto»).
   Nada encima ni detrás del texto: solo el contorno y un halo suave que late dos veces. */
.en-preview .ed-campo{outline:3px solid #FFD43B;outline-offset:5px;border-radius:6px;box-shadow:0 0 0 9px rgba(255,212,59,.28);animation:ed-pulso 1.4s ease-in-out 2}
.en-preview .portada__medio.ed-campo,.en-preview .avisos.ed-campo,.en-preview .pie__palabras.ed-campo{outline-offset:-6px;box-shadow:inset 0 0 0 9px rgba(255,212,59,.28)}
@keyframes ed-pulso{50%{outline-color:#F08C00}}
.en-preview .portada{height:640px}
.en-preview [data-campo]{outline:1px dashed transparent}

/* ---------- Tableta ---------- */
@media (max-width:1100px){
  /* Tableta: el menú pasa a la hamburguesa (en dos líneas se veía amontonado). */
  .cab__fila{grid-template-columns:auto 1fr}
  .cab__menu,.cab__visita{display:none}
  .hamburguesa{display:block}
  .portada__copia{max-width:100%}
  .medallon{left:0;margin-left:0}
  .pausar{top:44px}
  .hoy{display:none}
}

/* ---------- Celular ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .cab__fila{padding-top:8px;padding-bottom:8px}
  .cab__der{gap:10px}
  .cab__der .boton{min-height:44px;padding:12px 18px;font-size:12px}
  .logo__img{height:36px}
  html[data-logo="l"] .cab .logo__img{height:44px}
  .logo__texto{font-size:24px}
  /* PORTADA EN EL CELULAR: como en el computador, el video llena la pantalla y el título va ENCIMA,
     sobre un velo vino (Kevin, 2-oct: «el atractivo es que el video quede debajo del texto»). */
  .portada{height:auto;min-height:min(calc(100svh - 70px),820px);max-height:none;display:flex;flex-direction:column;justify-content:flex-end}
  .portada__velo{background:linear-gradient(180deg,rgba(46,27,34,.35) 0%,rgba(46,27,34,.15) 30%,rgba(46,27,34,.7) 62%,rgba(46,27,34,.94) 100%)}
  .portada__texto{position:relative;padding-top:120px;padding-bottom:48px;justify-content:center;text-align:center}
  .portada__copia{align-items:center;gap:18px}
  .portada__titulo{font-size:clamp(40px,12vw,52px)}
  .portada__titulo em{white-space:normal}
  .portada__botones{justify-content:center}
  .portada__botones .boton--grande{padding:16px 22px;font-size:12px}
  .sello{width:84px;height:84px;top:12px;right:12px}
  .sello__giro{width:76px;height:76px;inset:4px}
  .sello > span{font-size:22px}
  .pausar{top:32px;left:12px}
  .logo--medallon{--med-esc:.7}
  .cab:not(.cab--con-avisos) .medallon{top:4px;--med-esc:.6}
  .destellos i:nth-child(n+3){display:none}
  .cinta-cats{margin-top:0;padding:16px 0}
  .serv__der{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .serv__precio{font-size:30px}
  .resumen{position:relative;top:auto;border-radius:32px;padding:26px 20px}
  .resumen__datos > div{flex-wrap:wrap}
  .resumen__lista{font-size:56px}
  .pago__fila b{font-size:40px}
  .insta__rejilla{gap:12px;grid-template-columns:repeat(var(--cols-cel,2),minmax(0,1fr))}
  .insta__item.no-pc{display:block}
  .insta__item.no-cel{display:none}
  .insta__post{border-radius:18px}
  .insta__cab{gap:7px;padding:9px 10px}
  .insta__avatar{width:26px;height:26px;font-size:12px}
  .insta__cab b{font-size:12px}
  .insta__pie{gap:10px;padding:9px 10px 11px}
  .insta__pie svg{width:18px;height:18px}
  .productos{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .producto{gap:10px}
  .producto__foto{border-radius:24px}
  .producto__etq{top:10px;left:10px;padding:6px 10px;font-size:9px}
  .producto__fila{flex-direction:column;gap:4px;padding:0 2px}
  .producto h3{font-size:19px}
  .producto__fila{min-height:92px}
  .producto__precio{font-size:20px}
  .producto .boton{padding:12px 10px;font-size:11px;letter-spacing:.1em}
  .logo__texto{font-size:clamp(19px,5.4vw,24px);line-height:1.05}
  .visitanos__mapa{min-height:300px;border-radius:32px}
  .visitanos__dir{font-size:22px!important}
  .pie__arcos{height:280px}
  .pie__oscuro{border-radius:36px 36px 0 0}
  .pie__nav a{font-size:22px}
  .pie__mini{width:110px;height:110px}
  .pie__mini--1{height:140px}
  .carrito-boton{right:12px;bottom:12px}
}

/* ---------- Quietud: «Detener animaciones» o «reducir movimiento» ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .revelar{opacity:1;transform:none}
}
html[data-quieto] .cursor-punto,html[data-quieto] .cursor-anillo,html[data-quieto] .brillito{display:none}
html[data-quieto] .avisos__pista,html[data-quieto] .cinta-cats__pista,html[data-quieto] .pie__pista,html[data-quieto] .pie__fotos-pista{transform:none}