/* Shelly CF · hoja de estilos (v4 · recorrido, 2026-10-23)
   v5: portada crema con titular enorme y piezas con profundidad (3D) que flotan y siguen al mouse o al dedo (referencia plantica.net); isla de navegación vino;
   ocasiones en escena fija con dos colores; servicios en lista editorial (sin tarjetas); interludio partido en dos colores;
   muro en filas sin recortes con filtros; globos que suben en el fondo. Sin festón. Un solo radio de esquinas (--r).
   Titulares en Fraunces, texto en DM Sans. */

@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-latin-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --coral:#E55B63; --rosa:#F7C9CF; --crema:#FFF3E6; --polvo:#F6E4DE; --vino:#4A1520; --rojo:#C92A3D; --oro:#EBB343;
  --r:18px;                          /* UN solo radio de esquinas: botones, isla, fotos, filtros, avisos */
  --h:92px; --pad:clamp(18px,4vw,60px); --max:1560px;
  --f-tit:'Fraunces',Georgia,'Times New Roman',serif;
  --f-txt:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --rebote:cubic-bezier(.34,1.56,.64,1);
  --gap:clamp(10px,1.2vw,18px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--h)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--crema);color:var(--vino);font:400 18px/1.6 var(--f-txt);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
em{font-style:normal}
mark{background:none;color:inherit}
:focus-visible{outline:3px solid var(--vino);outline-offset:3px;border-radius:6px}
.hd :focus-visible,.hace :focus-visible,.contacto :focus-visible,.ft :focus-visible{outline-color:var(--crema)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:12px;top:-70px;z-index:100;background:var(--vino);color:var(--crema);padding:10px 16px;border-radius:var(--r);text-decoration:none;transition:top .2s}
.saltar:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(80px,9vw,150px)}
.tit{font:700 clamp(46px,7.4vw,124px)/.96 var(--f-tit);letter-spacing:-.035em;text-wrap:balance}
.lead{font-size:clamp(20px,2vw,28px);line-height:1.4;max-width:24em;margin-top:18px}
.ros{position:absolute;pointer-events:none;will-change:transform}

/* las piezas decorativas nunca se cortan en el borde de una sección (regla 71): las secciones solo recortan a los lados y cada una queda encima de la siguiente */
.hero,.ocas,.hace,.det,.muro,.zona,.contacto{position:relative;overflow-x:clip;overflow-y:visible}
.hero{z-index:0}.ocas{z-index:6}.hace{z-index:5}.det{z-index:4}.muro{z-index:3}.zona{z-index:2}.contacto{z-index:1}
@supports not (overflow-x:clip){.hero,.hace,.det,.muro,.zona,.contacto{overflow:hidden}}

/* ---------- botones: la pastilla del icono se expande y llena el botón al pasar el mouse ---------- */
/* botones (v8): bloque con sombra sólida desplazada (se ve «impreso», con presencia); al entrar el mouse, un círculo de color crece
   desde el punto exacto por donde entró y llena el botón, el texto rueda y el icono gira; al pulsar, el botón se hunde sobre su sombra */
.cta,.lnk--b{--sb:var(--oro);--fill:var(--coral);--sx:6px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;min-height:68px;
  padding:8px 32px 8px 8px;border-radius:var(--r);border:2px solid var(--vino);background:var(--vino);color:var(--crema);font:700 19px/1.15 var(--f-txt);text-decoration:none;
  box-shadow:var(--sx) var(--sx) 0 var(--sb);transition:transform .35s var(--rebote),box-shadow .35s var(--rebote),color .4s var(--ease)}
.cta::after,.lnk--b::after{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;background:var(--fill);
  transform:translate(-50%,-50%);transition:width .6s cubic-bezier(.7,0,.2,1),height .6s cubic-bezier(.7,0,.2,1)}
.cta:hover::after,.cta:focus-visible::after,.cta.vivo::after,.lnk--b:hover::after,.lnk--b:focus-visible::after{width:320%;height:900%}
.cta:hover,.cta:focus-visible,.lnk--b:hover,.lnk--b:focus-visible{transform:translate(-3px,-3px);--sx:9px;color:var(--vino)}
.cta:active,.lnk--b:active{transform:translate(6px,6px);--sx:0px;transition-duration:.12s}
.cta-tw{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:middle}
.cta-t{display:block;text-shadow:0 1.3em currentColor;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.cta:hover .cta-t,.cta:focus-visible .cta-t,.lnk--b:hover .cta-t,.lnk--b:focus-visible .cta-t,.cta.vivo .cta-t{transform:translateY(-1.3em)}
.cta-i{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:calc(var(--r) - 6px);background:var(--oro);color:var(--vino);transition:transform .6s var(--rebote),background .4s}
.cta-i .ico{width:26px;height:26px}
.cta:hover .cta-i,.cta.vivo .cta-i,.cta:focus-visible .cta-i{transform:rotate(-14deg) scale(1.1);background:var(--crema)}
.cta.vivo{color:var(--vino)}
.cta--g{--sb:var(--coral);--fill:var(--crema);min-height:86px;padding-right:42px;font-size:clamp(20px,2vw,26px);background:var(--oro);color:var(--vino);border-color:var(--oro)}
.cta--g .cta-i{width:66px;height:66px;background:var(--vino);color:var(--crema)}
.cta--g:hover .cta-i,.cta--g.vivo .cta-i{background:var(--coral);color:var(--crema)}
.lnk.lnk--b{--fill:var(--oro);--sb:var(--vino);padding:0 30px;justify-content:center;background:var(--crema);color:var(--vino)}
/* enlace secundario: subrayado que se dibuja y una florecita que gira */
.lnk{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:19px;text-decoration:none;padding:8px 0;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .45s var(--ease)}
.lnk:hover{background-size:0 2px;background-position:100% 100%}
.lnk-f{width:26px;height:26px;transition:transform .7s var(--rebote)}
.lnk:hover .lnk-f{transform:rotate(180deg) scale(1.15)}
.lnk[hidden]{display:none}
.lnk--v{margin-top:22px}

/* ---------- pantalla de carga (v6): logo, arco que pasa fotos de trabajos y porcentaje; al terminar sube como un telón ---------- */
.carga{display:none}
.js .carga{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--crema);color:var(--vino);
  animation:cargaFuera .5s 6s forwards}   /* respaldo: si el script no corre, se quita sola */
@keyframes cargaFuera{to{opacity:0;visibility:hidden}}
.carga.fin{display:none}
.carga-cv{width:min(78vw,620px);height:auto;aspect-ratio:1220/751}
html.sin-carga .carga{display:none}
@media (prefers-reduced-motion:reduce){.js .carga{display:none}}

/* ---------- entrada: un globo sube, se infla y revienta; el confeti descubre la página ---------- */
.intro{display:none}
.js .intro{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:var(--vino);--hueco:0px;
  -webkit-mask:radial-gradient(circle at 50% 46%,transparent var(--hueco),#000 calc(var(--hueco) + 1px));mask:radial-gradient(circle at 50% 46%,transparent var(--hueco),#000 calc(var(--hueco) + 1px));
  animation:introFuera .5s 4s forwards}   /* respaldo: si el script no corre, la entrada se quita sola */
.intro-g{width:min(40vw,250px);color:var(--coral);transform-origin:50% 26%}
.intro-g svg{width:100%;height:auto}
.intro.fin{display:none}
@keyframes introFuera{to{opacity:0;visibility:hidden}}
.confeti{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden}
.confeti i{position:absolute;left:50%;top:46%;width:var(--s);height:var(--s);border-radius:var(--b,50%);background:var(--c)}
html.sin-intro .intro{display:none}
@media (prefers-reduced-motion:reduce){.js .intro{display:none}}

/* ---------- cabecera: isla vino que flota centrada; la pastilla crema marca la sección ---------- */
.hd{position:fixed;inset:14px 0 auto 0;z-index:40;display:flex;justify-content:center;padding-inline:12px;pointer-events:none}
.isla{pointer-events:auto;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);min-height:68px;padding:6px 8px 6px 18px;border-radius:var(--r);
  background:var(--vino);color:var(--crema);box-shadow:0 14px 34px rgba(74,21,32,.28);transition:padding .4s var(--ease),min-height .4s var(--ease),transform .5s var(--ease)}
.hd.sc .isla{min-height:60px;padding-block:6px}
.hd-logo{display:block;line-height:0;flex:none}
.hd-logo img{height:54px;width:auto}
.lg-i{display:none}
.hd-nav{position:relative;display:flex}
.hd-nav a{position:relative;z-index:1;font-weight:700;font-size:17px;text-decoration:none;padding:12px 16px;border-radius:calc(var(--r) - 6px);transition:color .35s var(--ease)}
.hd-nav a:hover{color:var(--oro)}
.hd-nav a[aria-current="true"]{color:var(--vino)}
.hd-mk{position:absolute;z-index:0;left:0;top:0;height:100%;width:0;border-radius:calc(var(--r) - 6px);background:var(--crema);opacity:0;
  transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
.hd-mk.on{opacity:1}
/* idioma: interruptor ES / EN con una perilla que se desliza */
.idi{position:relative;display:flex;padding:4px;border-radius:calc(var(--r) - 4px);background:rgba(255,243,230,.14)}
.idi button{position:relative;z-index:1;width:46px;height:40px;border:0;padding:0;background:none;color:var(--crema);font-weight:700;font-size:15px;letter-spacing:.04em;transition:color .35s}
.idi button[aria-pressed="true"]{color:var(--vino)}
.idi-k{position:absolute;left:4px;top:4px;width:46px;height:40px;border-radius:calc(var(--r) - 8px);background:var(--oro);transition:transform .5s var(--rebote)}
html[lang="en"] .idi-k{transform:translateX(46px)}
/* botón de la barra: mismo sistema que los de la página (sombra sólida, relleno que nace donde entra el mouse, icono que gira) */
.hd-wa{--sb:var(--oro);--sx:4px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px 0 8px;
  border-radius:calc(var(--r) - 6px);background:var(--crema);color:var(--vino);font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap;
  box-shadow:var(--sx) var(--sx) 0 var(--sb);transition:transform .35s var(--rebote),box-shadow .35s var(--rebote),color .4s}
.hd-wa::after{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;background:var(--coral);transform:translate(-50%,-50%);transition:width .55s cubic-bezier(.7,0,.2,1),height .55s cubic-bezier(.7,0,.2,1)}
.hd-wa:hover::after,.hd-wa:focus-visible::after{width:320%;height:900%}
.hd-wa:hover,.hd-wa:focus-visible{color:var(--crema);transform:translate(-2px,-2px);--sx:6px}
.hd-wa:active{transform:translate(4px,4px);--sx:0px}
.hd-wa .ico{box-sizing:content-box;width:20px;height:20px;padding:7px;border-radius:9px;background:var(--vino);color:var(--crema);transition:transform .55s var(--rebote),background .4s}
.hd-wa:hover .ico{transform:rotate(-14deg) scale(1.08);background:var(--oro);color:var(--vino)}
.hd-menu{display:none;align-items:center;justify-content:center;width:52px;height:52px;border-radius:calc(var(--r) - 6px);border:0;background:var(--crema);color:var(--vino)}
.bars{display:grid;gap:6px;width:22px}
.bars i{display:block;height:2.5px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.hd-menu[aria-expanded="true"] .bars i:first-child{transform:translateY(4.25px) rotate(45deg)}
.hd-menu[aria-expanded="true"] .bars i:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- menú de celular: panel vino que cubre la pantalla y se abre en círculo desde el botón; idioma y WhatsApp van adentro ---------- */
.panel{position:fixed;inset:0;z-index:38;display:flex;flex-direction:column;justify-content:space-between;gap:30px;overflow:hidden auto;
  background:var(--vino);color:var(--crema);padding:calc(var(--h) + 30px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 34px);
  clip-path:circle(0 at calc(100% - 44px) 42px);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s}
.panel.on{clip-path:circle(150% at calc(100% - 44px) 42px);visibility:visible;transition:clip-path .7s var(--ease)}
.panel-nav{position:relative;z-index:1;display:grid;gap:2px}
.panel-nav a{font:700 clamp(42px,12vw,70px)/1.08 var(--f-tit);text-decoration:none;letter-spacing:-.03em;opacity:0;transform:translateY(26px);transition:opacity .4s var(--ease),transform .5s var(--ease),color .3s}
.panel-nav a:nth-child(1){--i:0}.panel-nav a:nth-child(2){--i:1}.panel-nav a:nth-child(3){--i:2}.panel-nav a:nth-child(4){--i:3}
.panel.on .panel-nav a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0) * .07s)}
.panel-nav a:hover,.panel-nav a[aria-current="true"]{color:var(--oro)}
.panel-pie{position:relative;z-index:1;display:grid;gap:18px;justify-items:start}
.panel .cta{background:var(--crema);color:var(--vino)}
.panel-f{right:-18%;bottom:14%;width:62vw;height:62vw;opacity:.9;z-index:0}
.velo{display:none}
.lg-m{display:none}

/* ---------- fondo en movimiento: globos que suben (se generan con JS) ---------- */
.fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gl{position:absolute;bottom:-200px;left:var(--l);width:var(--w);color:var(--c);opacity:var(--o,.9);animation:sube var(--t) linear infinite;animation-delay:var(--d)}
.gl svg{width:100%;height:auto;animation:balancea 3.6s ease-in-out infinite alternate;transform-origin:50% 0}
.fondo[data-suave] .gl{opacity:calc(var(--o,.9) * .35)}
@keyframes sube{to{transform:translateY(calc(-100vh - 520px))}}
@keyframes balancea{from{transform:rotate(-5deg) translateX(-6px)}to{transform:rotate(5deg) translateX(6px)}}

/* ---------- portada (v5, referencia plantica.net): crema, titular enorme centrado y piezas con profundidad ---------- */
/* la portada se queda fija y la sección de ocasiones sube encima como una hoja (Roberto, 2026-10-23); si la portada es más alta que la pantalla, se fija al llegar a su final (--ht) */
.hero{background:var(--crema);position:sticky;top:var(--ht,0px)}
.hero-card{position:relative;overflow:hidden;min-height:max(680px,100vh);min-height:max(680px,100svh);background:var(--crema);color:var(--vino);
  display:grid;place-items:center;padding:calc(var(--h) + 30px) var(--pad) 90px;transform-origin:50% 0}
.hero-c{position:relative;z-index:3;text-align:center;max-width:min(1300px,68vw);pointer-events:none}
.hero-c a{pointer-events:auto}
.hero-h{font-weight:700;margin-top:clamp(16px,2.4vh,28px)}
.hero-k{display:inline-block;font-weight:700;font-size:clamp(15px,1.25vw,19px);letter-spacing:.06em;text-transform:uppercase;color:var(--crema);background:var(--vino);padding:9px 18px;border-radius:var(--r)}
.l1{display:block;font:700 clamp(50px,6vw,118px)/.98 var(--f-tit);letter-spacing:-.045em;color:var(--vino)}
.l2{display:block;margin-top:.02em;font:italic 500 clamp(48px,5.7vw,112px)/1.02 var(--f-tit);letter-spacing:-.035em;color:var(--vino)}
/* resaltado estilo plantica.net (aceptado por Roberto): bloque sólido y recto detrás de la mitad inferior de la palabra, que sobresale un poco; sin redondear ni animar */
.l2 mark{color:inherit;padding:0 .06em;margin:0 -.02em;background:linear-gradient(transparent 50%,var(--oro) 50%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.botones{margin-top:clamp(26px,4.4vh,48px);display:flex;flex-wrap:wrap;gap:14px 18px;align-items:stretch;justify-content:center}
/* fotos alrededor del titular, como recuerdos pegados (arcos y polaroids con marco blanco sobre el crema) */
.ph{position:absolute;z-index:2;margin:0;overflow:hidden;background:#fff;will-change:transform;box-shadow:0 24px 44px rgba(74,21,32,.2),0 2px 6px rgba(74,21,32,.08)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph:not(.pol){border:10px solid #fff;border-radius:999px 999px var(--r) var(--r)}
.ph.pol{padding:10px 10px 38px;border-radius:var(--r)}
.ph.pol img{border-radius:calc(var(--r) - 8px)}
.ph1{left:2%;top:11%;width:clamp(170px,15vw,285px);aspect-ratio:.72;rotate:-7deg}
.ph2{right:2.5%;top:12%;width:clamp(180px,16.5vw,315px);aspect-ratio:.78;rotate:6deg}
.ph3{left:5.5%;bottom:5%;width:clamp(170px,14.5vw,280px);aspect-ratio:.8;rotate:5deg}
.ph4{right:6.5%;bottom:4%;width:clamp(180px,15.5vw,300px);aspect-ratio:.72;rotate:-5deg}
.ph5{left:23%;bottom:-3%;width:clamp(130px,11vw,210px);aspect-ratio:.82;rotate:-9deg;z-index:1}
/* escena: piezas con profundidad. Las lejanas son pequeñas, borrosas y lentas; las cercanas, grandes y nítidas */
.escena{position:absolute;inset:0;z-index:1;perspective:1100px;pointer-events:none}
.pz{position:absolute;left:0;top:0;width:var(--w,80px);transform-style:preserve-3d;will-change:transform;filter:blur(var(--bl,0px)) drop-shadow(0 calc(var(--w) * .06) calc(var(--w) * .08) rgba(74,21,32,var(--sh,.14)))}
.rastro .pz{will-change:transform;transform-origin:50% 50%}
.pz > *{display:block;width:100%;height:auto}
.pz svg{aspect-ratio:var(--ar,1)}
.pz.cerca{z-index:4}
.rastro{position:absolute;inset:0;z-index:1;perspective:900px;pointer-events:none;overflow:hidden}   /* detrás del titular: el rastro nunca tapa las letras */

/* ---------- ocasiones: escena fija, dos colores por celebración ---------- */
.ocas{--a:var(--crema);--b:var(--rosa);--tx:var(--vino);height:430vh;background:var(--crema);border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;box-shadow:0 -24px 60px rgba(74,21,32,.2)}
.oc-fijo{border-radius:inherit}
.oc-fijo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--a);color:var(--tx);transition:background .8s var(--ease),color .8s var(--ease)}
.oc-arco{position:absolute;right:-8vw;bottom:-30vh;width:min(70vw,1000px);aspect-ratio:1;border-radius:50%;background:var(--b);transition:background .8s var(--ease),transform 1s var(--ease);transform:scale(var(--z,1))}
.oc-g{position:relative;z-index:2;height:100%;max-width:var(--max);margin-inline:auto;padding:calc(var(--h) + 20px) var(--pad) 90px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,70px);align-items:center}
.oc-pal{position:relative;height:clamp(240px,40vh,420px);container-type:inline-size}
.oc-w{position:absolute;left:0;right:0;top:50%;translate:0 -50%;font:700 clamp(44px,8.4vw,160px)/.95 var(--f-tit);font-size:min(clamp(44px,8.4vw,160px),13.5cqi);letter-spacing:-.045em;opacity:0;pointer-events:none}
.oc-w .wd{display:inline-block;white-space:nowrap}
.oc-w .ch{display:inline-block;transform:translateY(.9em) rotate(8deg);opacity:0;transition:transform .7s var(--rebote),opacity .4s var(--ease);transition-delay:calc(var(--i) * .035s)}
.oc-w.on{opacity:1}
.oc-w.on .ch{transform:none;opacity:1}
.oc-w:not(.on) .ch{transition-delay:0s;transition-duration:.25s}
.oc-fin{position:absolute;left:0;right:0;top:50%;translate:0 -50%;opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.oc-fin.on{opacity:1;transform:none}
.oc-ft{font:700 clamp(40px,6.2vw,108px)/1 var(--f-tit);font-size:min(clamp(40px,6.2vw,108px),10cqi);letter-spacing:-.035em}
.oc-ft mark{font-style:italic;font-weight:500;background:none;color:var(--rojo)}
.oc-p{margin-top:22px;font-size:clamp(19px,1.8vw,25px);line-height:1.45;max-width:28em}
.oc-pila{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:.78}
.oc-f{position:absolute;inset:0;padding:12px 12px 46px;background:#fff;border-radius:var(--r);box-shadow:0 26px 50px rgba(74,21,32,.3);
  transform:translateY(130vh) rotate(calc(var(--rot) * 4));transition:transform .9s var(--ease)}
.oc-f img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 8px)}
.oc-f.on{transform:rotate(var(--rot))}
.oc-idx{position:absolute;z-index:3;left:50%;translate:-50% 0;width:max-content;max-width:calc(100% - 24px);bottom:clamp(18px,4vh,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 24px;padding:10px 20px;border-radius:var(--r);background:var(--crema);color:var(--vino);font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 24px rgba(74,21,32,.18)}
.oc-idx li{font-weight:500;transition:opacity .4s}
.oc-idx li.on{font-weight:700}
.oc-idx li.on::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:currentColor;vertical-align:1px}

html:not(.js) .ocas{height:auto}
html:not(.js) .oc-fijo{position:relative;height:auto;padding-block:120px}
html:not(.js) .oc-pal{height:auto}
html:not(.js) .oc-w,html:not(.js) .oc-fin{position:static;translate:none;opacity:1;transform:none}
html:not(.js) .oc-f{transform:rotate(var(--rot))}

/* ---------- lo que hacemos: lista editorial en vino ---------- */
.hace{background:var(--vino);color:var(--crema);padding-block:clamp(90px,10vw,170px)}
.hace-cab{position:relative;z-index:2;max-width:var(--max);margin:0 auto clamp(40px,6vw,90px);padding-inline:var(--pad)}
.hace .lead{color:var(--rosa)}
.r3{right:-6%;top:6%;width:min(26vw,380px);height:min(26vw,380px);opacity:.9;z-index:1}
.sv{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sv-r{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,24em);align-items:center;gap:clamp(18px,3vw,50px);min-height:clamp(170px,24vh,260px);
  padding-block:clamp(30px,3.4vw,48px);border-top:1.5px solid rgba(255,243,230,.24)}
.sv-r:last-child{border-bottom:1.5px solid rgba(255,243,230,.24)}
.sv-n{font:700 clamp(40px,5.4vw,98px)/1.02 var(--f-tit);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px var(--crema);transition:color .6s var(--ease),-webkit-text-stroke-color .6s}
.sv-f{width:0;height:clamp(150px,18vh,210px);border-radius:999px 999px var(--r) var(--r);overflow:hidden;opacity:0;rotate:4deg;transition:width .8s var(--ease),opacity .5s var(--ease)}
.sv-f img{width:clamp(130px,11vw,180px);max-width:none;height:100%;object-fit:cover}
.sv-d{font-size:clamp(18px,1.5vw,21px);line-height:1.5;opacity:.72;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sv-r.on .sv-n{color:var(--oro);-webkit-text-stroke-color:var(--oro)}
.sv-r.on .sv-f{width:clamp(130px,11vw,180px);opacity:1}
.sv-r.on .sv-d{opacity:1;transform:none}
.sv-r:nth-child(even) .sv-f{rotate:-4deg}

/* ---------- interludio: dos colores partidos y la frase que se rellena ---------- */
.det{background:var(--polvo);color:var(--vino)}
.det-in{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;padding:clamp(110px,13vw,210px) var(--pad)}
.det-h{font:700 clamp(54px,9vw,170px)/.95 var(--f-tit);letter-spacing:-.045em;max-width:11em}
.det-h .w{display:inline-block;color:transparent;-webkit-text-stroke:2px var(--vino);background:linear-gradient(var(--vino),var(--vino)) 0 0/var(--f,0%) 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.det-h .d2 .w{font-style:italic;font-weight:500;--col:var(--crema)}
.d2{display:inline}
.det-p{margin-top:clamp(24px,3vw,40px);max-width:24em;font-size:clamp(19px,1.8vw,25px);line-height:1.45;font-weight:500}
.r4{right:4%;bottom:6%;width:min(20vw,300px);height:min(20vw,300px);z-index:1}

/* ---------- muro de trabajos: filtros y filas sin recortes ---------- */
.muro{background:var(--crema)}
.muro-cab{max-width:var(--max);margin:0 auto clamp(30px,4vw,56px);padding-inline:var(--pad)}
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,36px)}
/* filtros: fichas con sombra sólida; la elegida queda «hundida» y en vino; al pasar el mouse se llenan de mostaza desde donde entra */
.fil{--sx:4px;position:relative;isolation:isolate;overflow:hidden;min-height:52px;padding:0 24px;border-radius:var(--r);border:2px solid var(--vino);background:var(--crema);color:var(--vino);
  font-weight:700;font-size:17px;box-shadow:var(--sx) var(--sx) 0 var(--vino);transition:transform .3s var(--rebote),box-shadow .3s var(--rebote),color .35s,background .35s}
.fil::after{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;background:var(--oro);transform:translate(-50%,-50%);transition:width .5s cubic-bezier(.7,0,.2,1),height .5s cubic-bezier(.7,0,.2,1)}
.fil:hover::after{width:300%;height:700%}
.fil:hover{transform:translate(-2px,-2px);--sx:6px}
.fil[aria-pressed="true"]{background:var(--vino);color:var(--crema);transform:translate(4px,4px);--sx:0px}
.fil[aria-pressed="true"]::after{display:none}
.gal{max-width:1680px;margin-inline:auto;padding-inline:var(--pad);columns:4;column-gap:var(--gap)}           /* sin JavaScript: columnas con fotos completas */
.t{margin:0 0 var(--gap);break-inside:avoid}
.t-b{display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--crema);line-height:0;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.t-b img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.t-b:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 22px 40px rgba(74,21,32,.28)}
.t-b:hover img{transform:scale(1.04)}
.gal.filas{columns:auto;display:flex;flex-direction:column;gap:var(--gap)}
.fila{display:flex;gap:var(--gap)}
.filas .t{margin:0;flex:calc(var(--ar) * 100) 1 0;aspect-ratio:var(--ar);min-width:0}
.t.oculta{display:none}
.t.entra{animation:entra .7s var(--ease) both;animation-delay:calc(var(--k,0) * 45ms)}
@keyframes entra{from{opacity:0;transform:translateY(30px) scale(.96)}}
@media (max-width:1000px){.gal{columns:3}}
@media (max-width:640px){.gal{columns:2}}

/* ---------- visor de fotos ---------- */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;color:var(--crema)}
.lb::backdrop{background:rgba(74,21,32,.94)}
.lb[open]{display:grid;place-items:center}
.lb figure{max-height:92vh}
.lb img{max-height:88vh;width:auto;max-width:min(92vw,760px);border-radius:var(--r);margin-inline:auto}
.lb-x{position:fixed;top:16px;right:16px;width:52px;height:52px;border-radius:var(--r);border:2px solid var(--crema);background:none;color:var(--crema);font-size:22px}
.lb-x:hover{background:var(--crema);color:var(--vino)}
.lb-n{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:var(--r);border:2px solid var(--crema);background:none;color:var(--crema);font-size:34px;line-height:1;padding:0 0 4px}
.lb-n:hover{background:var(--crema);color:var(--vino)}
.lb-ant{left:14px}.lb-sig{right:14px}

/* ---------- zona de servicio ---------- */
.zona{background:var(--polvo);color:var(--vino)}
.zona-g{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,5vw,90px);align-items:center}
.zona-p{margin-top:16px;font-size:clamp(19px,1.8vw,24px);line-height:1.5;max-width:26em}
.mapa{position:relative;width:100%;max-width:620px;justify-self:center}
.mapa[hidden]{display:none}
.mapa-arco{position:relative;aspect-ratio:1/1.1;border:11px solid var(--vino);border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--crema);box-shadow:0 26px 50px rgba(74,21,32,.22)}
.mapa-arco iframe{position:absolute;left:0;top:-120px;width:100%;height:calc(100% + 120px);border:0;pointer-events:none;filter:saturate(.9) sepia(.16) hue-rotate(-8deg)}
.mapa.on iframe{pointer-events:auto}
.mapa-cap{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 22px;border:0;background:none}
.mapa-cap span{background:var(--vino);color:var(--crema);padding:13px 22px;border-radius:var(--r);font-weight:700;font-size:17px;line-height:1.2;transition:background .25s var(--ease)}
.mapa-cap:hover span{background:var(--rojo)}
.mapa.on .mapa-cap{display:none}
.r9{right:-8%;top:-6%;width:min(15vw,210px);height:min(15vw,210px);z-index:3}

/* ---------- contacto: vino con un gran arco coral ---------- */
.contacto{background:var(--vino);color:var(--crema);padding-bottom:clamp(110px,12vw,190px);overflow:hidden}
.ct-arco{position:absolute;right:-22vw;bottom:-62%;width:min(76vw,1060px);aspect-ratio:1;border-radius:50%;background:var(--rojo);z-index:0}
.contacto-in{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.gran{position:relative}
.c1{display:block;font:700 clamp(66px,13vw,220px)/.88 var(--f-tit);letter-spacing:-.05em}
.c2{display:block;margin:.1em 0 0 .06em;font:italic 500 clamp(40px,6vw,100px)/1 var(--f-tit);letter-spacing:-.03em;color:var(--oro)}
.contacto-p{margin-top:clamp(20px,3vw,36px);max-width:28em;font-size:clamp(19px,1.9vw,26px);line-height:1.45}
.contacto .cta--g{margin-top:clamp(28px,3.6vw,48px)}
.canales{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(30px,4vw,50px)}
.canales li[hidden]{display:none}
.canales li{display:flex;gap:10px;align-items:center}
.chip{display:inline-flex;gap:10px;align-items:center;min-height:50px;padding:0 20px;border:2px solid rgba(255,243,230,.55);border-radius:var(--r);text-decoration:none;font-size:18px;overflow-wrap:anywhere}
.chip:hover{background:var(--crema);color:var(--vino)}
.chip-t{font-weight:700}
.copiar{min-height:50px;padding:0 16px;border:2px solid rgba(255,243,230,.55);border-radius:var(--r);background:none;font-size:16px}
.copiar:hover{background:var(--crema);color:var(--vino)}
.r7{right:6%;top:10%;width:min(18vw,270px);height:min(18vw,270px);z-index:1}

/* ---------- pie ---------- */
.ft{position:relative;z-index:1;background:var(--vino);color:var(--crema);border-top:2px solid rgba(255,243,230,.18);padding-top:clamp(34px,5vw,64px)}
.ft-g{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,70px);align-items:center}
.ft-logo{height:auto;width:min(260px,62vw)}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:center}
.ft-nav a{text-decoration:none;font-size:19px;font-weight:500;padding:6px 0}
.ft-nav a:hover{color:var(--oro)}
.redes{display:flex;gap:12px}
.redes li[hidden]{display:none}
.redes a{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r);border:2px solid rgba(255,243,230,.45)}
.redes a:hover{background:var(--crema);color:var(--vino)}
.ft-leg{max-width:var(--max);margin-inline:auto;padding:36px calc(var(--pad) + 84px) 36px var(--pad);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font-size:16px;color:#f3d6d2}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.ft-links a,.ft-links button{background:none;border:0;padding:6px 0;text-decoration:underline;text-underline-offset:4px;font-size:16px}
@media (max-width:860px){.ft-g{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- WhatsApp flotante y cookies ---------- */
.wa-flot{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:35;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r);
  background:var(--oro);color:var(--vino);box-shadow:0 10px 26px rgba(74,21,32,.35);transition:background .25s var(--ease),transform .35s var(--rebote)}
.wa-flot:hover{background:var(--crema);transform:translateY(-3px) rotate(-6deg)}
.wa-flot .ico{width:30px;height:30px}
.ck{position:fixed;left:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:70;width:min(390px,calc(100vw - 24px));background:var(--crema);color:var(--vino);
  border:2px solid var(--vino);border-radius:var(--r);padding:20px 22px;box-shadow:0 18px 40px rgba(74,21,32,.3)}
.ck[hidden]{display:none}
.ck h2{font:700 24px/1.2 var(--f-tit)}
.ck p{margin-top:8px;font-size:16px;line-height:1.5}
.ck-b{display:flex;gap:10px;margin-top:16px}
.ck-b button{flex:1;min-height:46px;padding:0 12px;font-size:16px;font-weight:700;border-radius:var(--r);border:2px solid var(--vino);background:transparent;color:var(--vino)}   /* Aceptar y Rechazar con el mismo peso visual */
.ck-b button:hover{background:var(--vino);color:var(--crema)}
.ck a{display:inline-block;margin-top:12px;font-size:16px}

/* ---------- páginas interiores y 404 ---------- */
.simple{padding-top:calc(var(--h) + clamp(48px,8vw,120px));min-height:72vh}
.simple .tit{font-size:clamp(40px,7vw,96px)}
.simple .lead{margin-block:22px 30px}

/* ---------- aparecer al llegar ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .gl,.gl svg{animation:none}
  .oc-w .ch,.oc-f,.oc-fin,.sv-n,.sv-f,.sv-d{transition:none}
}

/* ---------- tableta y celular ---------- */
@media (max-width:1180px){.hd-nav{display:none}.hd-menu{display:flex}}
@media (min-width:861px){.panel{display:none}}
@media (max-width:860px){
  :root{--h:84px}
  .hd{inset:10px 0 auto 0}
  /* celular: chapa crema con el logo a la izquierda y botón de menú a la derecha; nada más */
  .isla{width:100%;justify-content:space-between;min-height:0;padding:0;gap:8px;background:none;box-shadow:none}
  .hd.sc .isla{min-height:0;padding:0}
  .hd-logo{display:flex;align-items:center;height:60px;padding:0 14px;border-radius:var(--r);background:var(--crema);box-shadow:0 10px 24px rgba(74,21,32,.22)}
  .hd-logo img.lg-h{display:none}.hd-logo img.lg-m{display:block;height:46px;width:auto}
  .isla > .idi,.hd-wa{display:none}
  .hd-menu{width:60px;height:60px;border-radius:var(--r);background:var(--vino);color:var(--crema);box-shadow:0 10px 24px rgba(74,21,32,.28)}
  .bars{gap:5px}
  .hd-menu[aria-expanded="true"]{background:var(--oro);color:var(--vino)}
  .hd-menu[aria-expanded="true"] .bars i:first-child{transform:translateY(7.5px) rotate(45deg)}
  .hd-menu[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  .hd-menu[aria-expanded="true"] .bars i:last-child{transform:translateY(-7.5px) rotate(-45deg)}
  .panel .idi button,.panel .idi-k{width:56px;height:46px;font-size:17px}
  html[lang="en"] .panel .idi-k{transform:translateX(56px)}
  .hero-card{min-height:auto;padding:calc(var(--h) + 62vw) var(--pad) 74vw;align-items:start}
  .hero-c{max-width:none}
  .l1{font-size:13.4vw}.l2{font-size:12.6vw}
  .hero-k{font-size:14px;letter-spacing:.01em;text-transform:none;padding:7px 14px}
  .botones{flex-direction:column;align-items:stretch;width:min(100%,340px);margin-inline:auto}
  .botones > *{justify-content:center}
  .ph1{left:-4%;top:calc(var(--h) + 2vw);width:39vw}
  .ph2{right:-3%;top:calc(var(--h) + 5vw);width:40vw}
  .ph3{left:3%;bottom:3vw;width:37vw;top:auto}
  .ph4{right:2%;bottom:6vw;width:38vw}
  .ph5{display:none}
  .ph:not(.pol){border-width:7px}.ph.pol{padding:7px 7px 26px}
  .ocas{height:400vh}
  .oc-g{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding-top:calc(var(--h) + 18px);padding-bottom:84px;gap:10px}
  .oc-pal{height:34vh}
  .oc-w{font-size:15vw}
  .oc-ft{font-size:11vw}.oc-p{font-size:18px;margin-top:14px}
  .oc-pila{width:62vw;max-height:46svh;aspect-ratio:.78;align-self:center}
  .oc-arco{width:120vw;right:-40vw;bottom:-20vh}
  .oc-idx{left:14px;translate:none;bottom:22px;gap:6px;padding:12px 14px;font-size:0}
  .oc-idx li{width:26px;height:6px;border-radius:3px;background:currentColor;opacity:.3;transition:width .4s var(--ease),opacity .4s}
  .oc-idx li.on{width:48px;opacity:1}
  .oc-idx li.on::before{display:none}
  .sv-r{grid-template-columns:1fr auto;grid-template-areas:"n f" "d d";gap:12px 16px;min-height:0;padding-block:26px}
  .sv-n{grid-area:n;font-size:11vw}
  .sv-f{grid-area:f;height:28vw}
  .sv-f img{width:22vw}
  .sv-r.on .sv-f{width:22vw}
  .sv-d{grid-area:d}
  .r3{width:40vw;height:40vw;right:-14%;top:2%}
  .det-h{font-size:14vw}
  .r4{width:30vw;height:30vw;right:-6%;top:3%}
  .zona-g{grid-template-columns:1fr}
  .mapa{max-width:520px}
  .r9{width:24vw;height:24vw;right:-5%;top:-7%}
  .ct-arco{width:150vw;right:-70vw;bottom:-48%}
  .r7{width:30vw;height:30vw;right:-8%;top:3%}
}

@media (max-width:699px){
  .ck{padding:12px 14px;width:calc(100vw - 20px);left:10px;bottom:10px}
  .ck h2{font-size:19px}.ck p{margin-top:4px}.ck-b{margin-top:10px}.ck-b button{min-height:42px}.ck a{margin-top:6px}
  .wa-flot{bottom:calc(env(safe-area-inset-bottom,0px) + 16px);right:12px;width:56px;height:56px}
  body:has(#ck:not([hidden])) .wa-flot{bottom:calc(env(safe-area-inset-bottom,0px) + 190px)}
  .cta{font-size:17px;min-height:60px;padding-right:22px}
}
@media (max-height:560px) and (min-width:861px){.ocas{height:auto}.oc-fijo{position:relative;height:auto;min-height:100vh}}