/* Sitio MP Flair Co. Tokens del manual de marca (RE BRANDING MP FLAIR.pdf). */
:root{
  --vino:#5C0C24; --ciruela:#441424; --oro:#BC9444; --crema:#FCF4D4;
  --fondo:#1C080F; --superficie:#2A0E18; --superficie2:#36131F;
  --tinta:#FCF4D4; --tinta2:rgba(252,244,212,.72); --rotulo:rgba(252,244,212,.5);
  --linea:rgba(252,244,212,.14); --linea2:rgba(252,244,212,.26);
  --acento:#BC9444; --acento-claro:#D4A94F; --sobre-acento:#1C080F;
  --acento-rgb:188,148,68; --fondo-rgb:28,8,15; --crema-rgb:252,244,212;
  /* Warbler Banner es la display del manual (comercial, sin licencia aún): si se instala, gana sola */
  --f-titulo:"Warbler Banner","Playfair Display",Georgia,serif;
  --f-texto:"Lexend Deca",system-ui,sans-serif;
  --ancho:1240px; --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;line-height:1.02;margin:0;overflow-wrap:break-word;min-width:0}
h2{font-size:clamp(40px,6.4vw,96px);letter-spacing:-.01em}
h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
p{margin:0}
em{font-family:var(--f-titulo);font-style:italic;color:var(--acento-claro)}
strong{font-weight:500;color:var(--tinta)}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);width:100%}
.ceja{font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--acento-claro)}
:focus-visible{outline:2px solid var(--acento-claro);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--acento);color:var(--sobre-acento);padding:8px 14px;z-index:300}
.skip:focus{left:8px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Capas fijas ---------- */
#seda{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block}
.no-webgl #seda{display:none}
.no-webgl body{background:radial-gradient(ellipse at 75% 20%,rgba(92,12,36,.9),transparent 60%),radial-gradient(ellipse at 10% 90%,rgba(var(--acento-rgb),.14),transparent 50%),var(--fondo)}
.velo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--fondo-rgb),.92) 0%,rgba(var(--fondo-rgb),.7) 45%,rgba(var(--fondo-rgb),.25) 100%);opacity:0}
.grano{position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Carga: el logo se revela y la cortina sube ---------- */
#carga{display:none}
.js #carga{display:grid;position:fixed;inset:0;z-index:400;background:var(--ciruela);place-items:center;align-content:center;gap:22px}
.carga-logo{width:min(320px,60vw);clip-path:inset(0 100% 0 0)}
.carga-hilo{display:block;width:min(320px,60vw);height:1px;background:var(--acento);transform:scaleX(0);transform-origin:left}
#carga-num{font-size:12px;letter-spacing:.3em;color:var(--rotulo)}

/* ---------- Cursor ---------- */
.cursor{display:none}
.cursor-on .cursor{display:block;position:fixed;inset:0;pointer-events:none;z-index:350}
.cursor-on,.cursor-on a,.cursor-on button,.cursor-on input{cursor:none}
.c-punto,.c-anillo{position:fixed;left:0;top:0;border-radius:50%;translate:-50% -50%}
.c-punto{width:5px;height:5px;background:var(--acento-claro)}
.c-anillo{width:38px;height:38px;border:1px solid rgba(var(--acento-rgb),.65);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),background-color .35s,border-color .35s}
.cursor.sobre .c-anillo{width:62px;height:62px;border-color:var(--acento-claro)}
.cursor.etiqueta .c-anillo{width:86px;height:86px;background:var(--acento);border-color:var(--acento)}
#c-txt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sobre-acento);font-weight:500;opacity:0;transition:opacity .25s}
.cursor.etiqueta #c-txt{opacity:1}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;transition:background-color .4s,padding .4s,translate .5s var(--ease)}
.nav.solida{background:rgba(var(--fondo-rgb),.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px 0;border-bottom:1px solid var(--linea)}
.nav.oculta{translate:0 -110%}
.nav .wrap{display:flex;align-items:center;gap:28px}
.logo img{width:132px;height:auto}
.nav ul{display:flex;gap:28px;list-style:none;margin:0 auto;padding:0}
.nav ul a{text-decoration:none;font-size:14px;letter-spacing:.06em;color:var(--tinta2);transition:color .25s}
.nav ul a:hover{color:var(--tinta)}
.nav-der{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--linea2);border-radius:999px;padding:3px}
.lang button{background:none;border:0;font-size:12px;letter-spacing:.1em;padding:6px 10px;border-radius:999px;color:var(--tinta2);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--crema);color:var(--fondo)}
@media (max-width:900px){.nav ul{display:none}.nav .wrap{justify-content:space-between}.nav-der .btn{display:none}}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;padding:15px 28px;border-radius:999px;border:1px solid transparent;transition:background-color .3s,color .3s,border-color .3s;will-change:transform}
.btn-pri{background:var(--acento);color:var(--sobre-acento)}
.btn-pri:hover{background:var(--crema)}
.btn-sec{border-color:var(--linea2);color:var(--tinta)}
.btn-sec:hover{border-color:var(--acento-claro);color:var(--acento-claro)}

/* ---------- Secciones ---------- */
section{position:relative;padding:clamp(110px,16vh,180px) 0}
.cab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:72px}
.cab p{color:var(--tinta2);font-size:18px;max-width:460px}
@media (max-width:860px){.cab{grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:48px}}
.js .rev{opacity:0;transform:translateY(36px)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 0 90px}
.para{display:inline-flex;font-size:13px;letter-spacing:.08em;color:var(--tinta2);border:1px solid var(--linea2);border-radius:999px;padding:7px 16px;margin-bottom:24px}
.para strong{color:var(--acento-claro);font-weight:400}
.hero-ceja{margin-bottom:26px}
.titulo-hero{font-size:clamp(44px,9.4vw,152px);line-height:.92;letter-spacing:-.02em;perspective:800px}
.titulo-hero .linea{display:block}
.titulo-hero .acento{font-style:italic;color:var(--acento-claro);padding-left:.6em}
.ch{display:inline-block;will-change:transform}
.pal{display:inline-block;white-space:nowrap}
.js .titulo-hero,.js .hero-pie,.js .hero .para,.js .hero-ceja{visibility:hidden}
.hero-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:48px;flex-wrap:wrap}
.bajada{max-width:520px;font-size:19px;color:var(--tinta2)}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.baja{position:absolute;left:50%;bottom:26px;width:1px;height:54px;background:var(--linea);overflow:hidden}
.baja span{position:absolute;inset:0;background:var(--acento);animation:baja 2.2s var(--ease) infinite}
@keyframes baja{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@media (max-width:640px){.titulo-hero .acento{padding-left:0}.baja{display:none}}

/* Manifiesto */
.mani-txt{font-family:var(--f-titulo);font-size:clamp(30px,4.3vw,62px);line-height:1.18;margin-top:30px;max-width:1080px}
.mani-txt em{font-style:italic}
.js .mani-txt .wd{opacity:.14}

/* Marquesina */
.mq{padding:26px 0;border-block:1px solid var(--linea);overflow:hidden;background:rgba(var(--fondo-rgb),.35)}
.mq-fila{display:flex;white-space:nowrap;font-family:var(--f-titulo);font-size:clamp(28px,3.6vw,52px);line-height:1.3}
.mq-fila.inv{font-family:var(--f-texto);font-size:clamp(13px,1.2vw,16px);letter-spacing:.32em;text-transform:uppercase;color:var(--tinta2);margin-top:10px}
.mq-pista{display:flex;gap:.6em;padding-right:.6em;flex-shrink:0}
.mq i{font-style:normal;color:var(--acento);font-size:.55em;align-self:center}

/* Marcas */
.lista-marcas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.marca{width:100%;display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:24px;background:none;border:0;border-bottom:1px solid var(--linea);padding:22px 0;text-align:left;cursor:pointer;position:relative;overflow:hidden}
.marca::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--acento-rgb),.14),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.m-num{font-size:13px;letter-spacing:.2em;color:var(--rotulo);position:relative}
.m-nom{font-family:var(--f-titulo);font-size:clamp(52px,9vw,140px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(var(--crema-rgb),.55);transition:color .5s var(--ease),-webkit-text-stroke-color .5s,letter-spacing .7s var(--ease);position:relative}
.m-cat{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta2);position:relative;opacity:.6;transition:opacity .4s,color .4s}
.marca:hover::before,.marca:focus-visible::before,.marca.activa::before{transform:scaleX(1)}
.marca:hover .m-nom,.marca:focus-visible .m-nom,.marca.activa .m-nom{color:var(--crema);-webkit-text-stroke-color:transparent;letter-spacing:.02em}
.marca:hover .m-cat,.marca:focus-visible .m-cat,.marca.activa .m-cat{opacity:1;color:var(--acento-claro)}
@media (max-width:640px){.marca{grid-template-columns:40px minmax(0,1fr);gap:12px}.m-cat{grid-column:2}}

/* Ciclo */
.ciclo{padding:0}
.ciclo-pin{min-height:100svh;display:flex;align-items:center;padding:120px 0}
.hilo-ciclo{position:relative}
.hilo-svg{position:absolute;left:0;right:0;top:-10px;width:100%;height:220px;overflow:visible}
.h-base{fill:none;stroke:var(--linea2);stroke-width:1}
.h-vivo{fill:none;stroke:var(--acento);stroke-width:2;filter:drop-shadow(0 0 6px rgba(var(--acento-rgb),.7))}
.pasos{list-style:none;margin:0;padding:230px 0 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;position:relative}
.paso{border-top:1px solid var(--linea);padding-top:18px;opacity:.38;transition:opacity .6s var(--ease)}
.paso.on{opacity:1}
.p-num{display:block;font-size:12px;letter-spacing:.2em;color:var(--acento-claro);margin-bottom:12px}
.paso h3{font-size:clamp(19px,1.6vw,24px);margin-bottom:10px}
.paso p{font-size:14px;color:var(--tinta2);line-height:1.5}
.paso:last-child h3{color:var(--acento-claro)}
@media (max-width:900px){
  .hilo-svg{display:none}
  .pasos{grid-template-columns:minmax(0,1fr);padding:0 0 0 28px;gap:0;border-left:1px solid var(--linea2)}
  .paso{border-top:0;padding:0 0 30px;position:relative}
  .paso::before{content:"";position:absolute;left:-33px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--fondo);border:1px solid var(--acento)}
  .paso.on::before{background:var(--acento)}
}

/* Oficios */
.grid-oficios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.oficio{background:rgba(var(--fondo-rgb),.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:42px 36px 46px;position:relative;transform-style:preserve-3d}
.o-num{font-family:var(--f-titulo);font-style:italic;font-size:56px;color:var(--acento);line-height:1;display:block;margin-bottom:30px}
.oficio h3{margin-bottom:16px}
.oficio p{color:var(--tinta2);font-size:15.5px}
.oficio a{color:var(--acento-claro)}
@media (max-width:860px){.grid-oficios{grid-template-columns:minmax(0,1fr)}}

/* Servicios: acordeón */
.acordeon{border-top:1px solid var(--linea)}
.fila{border-bottom:1px solid var(--linea)}
.fila-cab{width:100%;display:grid;grid-template-columns:70px minmax(0,1fr) 40px;align-items:center;gap:20px;background:none;border:0;padding:30px 0;text-align:left;cursor:pointer}
.f-num{font-size:13px;letter-spacing:.2em;color:var(--rotulo)}
.f-t{font-family:var(--f-titulo);font-size:clamp(28px,3.6vw,52px);line-height:1.05;transition:color .35s,transform .6s var(--ease)}
.fila-cab:hover .f-t,.fila-cab[aria-expanded="true"] .f-t{color:var(--acento-claro);transform:translateX(14px)}
.f-mas{width:26px;height:26px;position:relative;justify-self:end}
.f-mas::before,.f-mas::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tinta);transition:transform .45s var(--ease)}
.f-mas::after{transform:rotate(90deg)}
.fila-cab[aria-expanded="true"] .f-mas::after{transform:rotate(0)}
.fila-cuerpo{overflow:hidden}
.js .fila-cuerpo{height:0}
.fila-cuerpo p{padding:0 40px 34px 90px;color:var(--tinta2);font-size:17px;max-width:820px}
@media (max-width:640px){.fila-cab{grid-template-columns:34px minmax(0,1fr) 26px;gap:12px}.fila-cuerpo p{padding:0 0 28px 46px}}

/* Caso */
.caso-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:60px;align-items:end;margin-top:36px}
.naak{font-size:clamp(86px,13vw,200px);line-height:.85;letter-spacing:.02em}
.caso-sub{margin-top:18px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2)}
.caso-txt p{font-size:20px;color:var(--tinta2)}
.estado{display:inline-flex;margin-top:26px;font-size:12px!important;letter-spacing:.24em;text-transform:uppercase;color:var(--acento-claro)!important;border:1px solid rgba(var(--acento-rgb),.5);border-radius:999px;padding:8px 16px}
@media (max-width:860px){.caso-grid{grid-template-columns:minmax(0,1fr);gap:30px}}

/* Modelo: sección crema (corta el ritmo oscuro) */
.modelo{background:var(--crema);color:var(--ciruela)}
.modelo h2,.modelo h3{color:var(--vino)}
.modelo .cab p{color:rgba(68,20,36,.75)}
.principios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.principio{border-top:1px solid rgba(92,12,36,.25);padding-top:26px}
.pr-num{display:block;font-size:12px;letter-spacing:.2em;color:#96701F;margin-bottom:22px}
.principio h3{margin-bottom:16px}
.principio p{color:rgba(68,20,36,.8);font-size:16px}
@media (max-width:860px){.principios{grid-template-columns:minmax(0,1fr);gap:36px}}

/* Para un cliente (perfiles de i18n.js) */
.parati{display:none}
.parati.activo{display:block}
.recos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.reco{background:rgba(var(--fondo-rgb),.8);padding:34px}
.reco span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acento-claro)}
.reco span.ya{color:var(--tinta2)}
.reco h3{margin:14px 0 12px}
.reco p{color:var(--tinta2);font-size:15px}

/* Final */
.final{min-height:100svh;display:flex;align-items:center;text-align:center}
.final-t{font-size:clamp(70px,14vw,220px);line-height:.9;font-style:italic;color:var(--crema);transition:letter-spacing .2s linear}
.final-p{max-width:560px;margin:34px auto 0;color:var(--tinta2);font-size:19px}
.tirar{margin:60px auto 0;max-width:420px;display:grid;gap:14px}
.tirar label{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--acento-claro)}
#hilo{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:0%}
#hilo::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--acento) var(--p),var(--linea2) var(--p))}
#hilo::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--acento) var(--p),var(--linea2) var(--p))}
#hilo::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--crema);border:5px solid var(--acento);margin-top:-10px;box-shadow:0 0 0 6px rgba(var(--acento-rgb),.18)}
#hilo::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--crema);border:5px solid var(--acento)}
.final-acc{margin-top:46px}
.final-acc .btn{font-size:clamp(14px,1.6vw,18px);letter-spacing:.08em;text-transform:none;padding:18px 34px}

/* Footer */
footer{border-top:1px solid var(--linea);padding:34px 0;font-size:13px;color:var(--rotulo);background:var(--fondo)}
footer .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
footer img{width:96px;height:auto}
footer a{color:var(--tinta2)}

@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none}
  .js .mani-txt .wd{opacity:1}
  .baja span{animation:none}
  *{transition-duration:.01ms!important}
}