/* Fuentes autoalojadas (carpeta fonts/) */
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-latin-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans-latin-var.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
:root{
  --header-blur:3px; /* desenfoque de la franja superior: 0 = nada, 12px = mucho */
  --coral:#FD6E6E; --crema:#FEEED0; --vino:#622026; --azul:#010D38; --noche:#1F040A;
  --papel:url(../img/papel.jpg); 
  --m:clamp(20px,6.1vw,88px);
  --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
  --t1:clamp(44px,6.95vw,100px); --t2:clamp(20px,2.2vw,32px); --tx:clamp(16px,1.39vw,20px);
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--noche);color:var(--crema);font-family:var(--sans);font-weight:500;font-size:var(--tx);line-height:1.2;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
section{position:relative;padding-inline:var(--m)}
.t1{font-family:var(--serif);font-optical-sizing:auto;font-variation-settings:"opsz" 144;font-weight:400;font-size:var(--t1);line-height:.82;letter-spacing:-.05em;margin:0}
.t2{font-family:var(--sans);font-weight:300;font-size:var(--t2);line-height:.82;letter-spacing:-.05em;margin:0;text-transform:uppercase}
.t1.der{margin-left:24%}
.txt{max-width:36rem}
.txt p{margin:0 0 16px}

/* header fijo */
header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:center;align-items:center;padding:calc(24px + env(safe-area-inset-top,0px)) var(--m) 16px;pointer-events:none}
header>*{pointer-events:auto}

/* hero */
.hero .txt b{font-weight:700}
.hero .cta{margin-top:12px}

/* secciones */
.about{background:var(--vino);padding-block:clamp(64px,9vw,130px) clamp(56px,6vw,90px)}
.about .t2{margin-bottom:clamp(8px,1vw,14px)}
.about .txt{margin-top:clamp(36px,4vw,56px)}
.eventos .pie{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(28px,3vw,44px)}
.galeria{background:var(--noche);padding-block:clamp(48px,9vw,130px) clamp(48px,6vw,90px)}
.contacto{background:var(--noche);padding-block:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px);text-align:center}
.contacto .t2{text-align:left}
.contacto .t1{margin-top:clamp(18px,2.5vw,36px);font-size:clamp(40px,5.2vw,76px);line-height:.95}
.contacto .datos{margin-top:clamp(16px,2vw,28px)}
.contacto nav{margin:clamp(36px,5vw,72px) auto 0;width:min(100%,540px);padding-bottom:clamp(14px,1.6vw,22px);border-bottom:1px solid #8a3a36;gap:.4em clamp(16px,2.8vw,40px)}
.contacto a:hover{color:var(--coral)}

/* carruseles */
.car{position:relative}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track.drag{cursor:grabbing;scroll-snap-type:none}
.slide{flex:none;scroll-snap-align:start;background:#00000040;overflow:hidden;display:grid;place-items:center;font-size:14px;opacity:.9}
.slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.slide.ph{background:repeating-linear-gradient(135deg,#ffffff0d 0 12px,#ffffff05 12px 24px);border:1px dashed #feeed055}
.about .slide{width:clamp(280px,48vw,700px);aspect-ratio:3/2}
.galeria .slide{width:clamp(280px,78vw,1020px);aspect-ratio:1020/800}
.car.full{margin-inline:calc(var(--m)*-1);}
.car.full .track{padding-inline:var(--m);scroll-padding-inline:var(--m)}
.about .car+.cta,.galeria .cta{margin-top:28px}


/* ---- v2 ---- */
.lg{fill:none;display:block;height:auto;flex:none}
.lr{width:clamp(84px,9.8vw,141px)}.re{width:clamp(120px,13vw,188px)}.vc{width:clamp(110px,11.4vw,164px)}.mos{width:clamp(84px,9.2vw,132px)}
.cta{--c:var(--crema);--fill:var(--crema);display:inline-flex;gap:.45em;align-items:center;color:var(--c);font-family:var(--serif);font-variation-settings:"opsz" 36;font-size:clamp(17px,1.5vw,22px);line-height:1;padding:.62em 1em .6em;border:1px solid var(--c);border-radius:999px;background:linear-gradient(var(--fill),var(--fill)) no-repeat left bottom/100% 0;transition:background-size .3s cubic-bezier(.7,0,.2,1),color .25s}
.cta:hover,.cta:focus-visible{background-size:100% 100%;color:var(--noche)}
.cta span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cta:hover span{transform:translateX(6px)}
.cta.coral{--c:var(--coral);--fill:var(--coral)}
/* menú */
.burger{position:absolute;left:var(--m);top:32px;width:44px;height:24px;background:none;border:0;cursor:pointer;padding:0;color:var(--coral)}
.burger i{position:absolute;left:0;width:44px;height:2px;background:currentColor;transition:transform .6s cubic-bezier(.7,0,.2,1),width .6s cubic-bezier(.7,0,.2,1);transform:translateZ(0)}
.burger i:first-child{top:6px}.burger i:last-child{top:16px}
.open .burger i{width:30px}
.open .burger i:first-child{transform:translateY(4px) rotate(45deg)}
.open .burger i:last-child{transform:translateY(-6px) rotate(-45deg)}
body.open{overflow:hidden}
.menu{position:fixed;inset:0;z-index:15;background:var(--noche);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(14px,3vh,28px);clip-path:circle(0 at calc(var(--m) + 22px) 44px);visibility:hidden;transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s .85s}
.open .menu{clip-path:circle(150vmax at calc(var(--m) + 22px) 44px);visibility:visible;transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s}
.menu a{font-family:var(--serif);font-variation-settings:"opsz" 144;font-size:clamp(36px,6vw,72px);letter-spacing:-.04em;line-height:1;opacity:0;transform:translateY(36px);transition:opacity .4s,transform .4s,color .3s}
.open .menu a{opacity:1;transform:none;transition:opacity .8s calc(.35s + var(--i)*.07s),transform .8s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i)*.07s),color .3s}
.menu a:hover{color:var(--coral)}
header .lr{color:var(--coral)}
/* hero */
.hero{aspect-ratio:1440/870;min-height:600px;display:grid;grid-template-columns:1fr minmax(0,28rem);grid-template-rows:1fr auto;column-gap:4vw;padding-top:clamp(120px,16vw,230px);padding-bottom:clamp(32px,4vw,64px);overflow:hidden;
  background:linear-gradient(rgba(1,0,22,.27),rgba(1,0,22,.27)),url(../img/hero.jpg) center/cover no-repeat} /* FOTO del hero: en la carpeta final será url(img/web_laraspa_01.jpg) */
.hero .t1{grid-column:1;grid-row:1;align-self:start;max-width:9.4em}
.hero .txt{grid-column:2;grid-row:2}
/* revelados */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s ease var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .cta.rv{transition:opacity 1s ease var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),background-size .3s cubic-bezier(.7,0,.2,1),color .25s}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.2em .12em .3em;margin:-.2em -.12em -.3em}
.w>span{display:inline-block}
.js .w>span{transform:translateY(112%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.07s + var(--d,0s))}
.js .in .w>span{transform:none}
.slide img{transform:scale(1.14);will-change:transform}
/* secciones */
.cool{background:var(--azul);padding-block:clamp(64px,9vw,130px) clamp(56px,6vw,90px)}
.cool .txt{margin-top:clamp(36px,4vw,56px)}
.cool .t2{display:block;margin-bottom:clamp(16px,2vw,28px)}
.cool .slide{width:clamp(220px,31.5vw,450px);aspect-ratio:450/680}
.eventos{background:var(--papel) center top/1600px;padding-block:clamp(64px,7vw,100px) clamp(40px,5vw,72px)}
.eventos .pie{align-items:flex-end}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(32px,4.5vw,64px);font-weight:300;font-size:clamp(13px,1.2vw,18px);text-transform:uppercase;text-align:left}
.contacto .datos,.contacto nav{font-size:clamp(15px,1.67vw,24px);font-weight:300;text-transform:uppercase;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4em 1.2em;line-height:1.2}
.contacto .datos a,.contacto nav a{transition:color .3s}
.ig{display:inline-flex;margin-left:clamp(14px,2.6vw,44px)}.ig svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.6}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px clamp(28px,5vw,72px);margin-top:clamp(24px,3vw,40px)}
/* botón flotante */
.fab{position:fixed;z-index:12;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));--c:var(--coral);--fill:var(--coral);background-color:rgba(254,238,208,.1);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),background-size .3s cubic-bezier(.7,0,.2,1),color .25s}
.fab.on{opacity:1;transform:none;pointer-events:auto}
@media (max-width:860px){
  .t1.der{margin-left:0;margin-top:16px}.t1{line-height:.9}
  .hero{aspect-ratio:auto;min-height:100svh;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding-top:18vh;row-gap:32px}
  .hero .t1,.hero .txt{grid-column:1}.hero .t1{grid-row:1}.hero .txt{grid-row:3}
  .eventos{background-size:1000px}
  .eventos .pie{flex-direction:column;align-items:flex-start}
  .contacto .datos,.contacto nav,.logos,.legal{flex-direction:column;align-items:center;text-align:center}
  .contacto nav{gap:.7em}
  .legal{align-items:center;justify-content:center}
}

/* v4 */
header::before{content:"";position:absolute;inset:0 0 -14px 0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(31,4,10,.22),rgba(31,4,10,0));-webkit-backdrop-filter:blur(var(--header-blur));backdrop-filter:blur(var(--header-blur));-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
@keyframes hdr{from{opacity:0;transform:translateY(-16px)}}
header .burger{animation:hdr 1s .15s cubic-bezier(.2,.7,.2,1) backwards}
header>a{animation:hdr 1s .3s cubic-bezier(.2,.7,.2,1) backwards}
.cta.fab:hover span{transform:translateY(5px)}
.hero{background-position:0 0,50% calc(50% + var(--py,0px))}
.eventos{background-position:center var(--py,0px)}
@media (min-width:861px){.galeria .slide{width:clamp(420px,50vw,720px)}}
@media (min-width:861px){.contacto nav{flex-wrap:nowrap;width:max-content;max-width:100%;padding-inline:clamp(24px,3vw,44px)}}
@media (max-width:860px){.re{width:160px}.ig{margin-left:0;margin-top:.3em}}

/* v5 */
.hero .cta{font-weight:700;background-color:rgba(254,238,208,.1);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
@media (max-width:860px){
  .track{gap:8px}
  .about .slide{width:78vw;aspect-ratio:4/5}
  .cool .slide{width:78vw}
  .galeria .slide{width:84vw;aspect-ratio:4/5}
}
.slide picture{display:contents}
@media (max-width:860px){.slide img.pr{object-position:100% 50%}}

/* Solo se aplica si en js/main.js RESPETAR_REDUCIR_MOVIMIENTO es true */
html.reduce-motion{scroll-behavior:auto}
html.reduce-motion .rv,html.reduce-motion .w>span{opacity:1!important;transform:none!important;transition:none!important}
html.reduce-motion .slide img{transform:none!important}
html.reduce-motion header .burger,html.reduce-motion header>a{animation:none}