/* ============================================================
   en el script del final: se cambia en toda la página.
   ============================================================ */
:root{
  --fondo:#F6C915; --tinta:#2A2000; --papel:#FFF8E6;
  --serif:'Fraunces',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif;
  --t:.7s cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- Cabecera ---------- */
.cab{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,4vw,48px);color:var(--tinta);transition:color var(--t),background var(--t)}
.cab.solida{background:var(--fondo)}
.logo{font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;text-decoration:none;
  font-variation-settings:"SOFT" 100,"WONK" 1}
.cab nav{display:flex;gap:clamp(14px,2.4vw,34px);font-weight:500;font-size:15px}
.cab nav a{text-decoration:none;position:relative}
.cab nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:currentColor;transition:right .3s}
.cab nav a:hover::after{right:0}
.cesta{font-weight:600;font-size:15px;text-decoration:none;border-bottom:2px solid currentColor}

/* ---------- Portada: el color cambia con el aroma ---------- */
.portada{position:relative;min-height:100svh;background:var(--fondo);transition:background var(--t);display:grid;
  grid-template-columns:1.05fr .95fr;overflow:hidden}
.portada-texto{padding:clamp(110px,14vh,160px) clamp(16px,4vw,48px) 48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;z-index:2}
.portada h1{font-family:var(--serif);font-weight:900;line-height:.86;letter-spacing:-.045em;
  font-size:clamp(46px,6.6vw,112px);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.portada h1 em{font-style:italic;font-weight:300;display:block}
.portada p.lema{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);max-width:30ch;line-height:1.25}
.selector{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;font-weight:600}
.selector button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .3s}
.selector button[aria-pressed="true"]{border-color:currentColor}
.selector i{width:14px;height:14px;border-radius:50%;background:var(--c);outline:2px solid var(--tinta);outline-offset:2px}
.portada-foto{position:relative;overflow:hidden}
.portada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s,transform 1.4s cubic-bezier(.2,.7,.1,1)}
.portada-foto img.ver{opacity:1;transform:scale(1)}
.sello{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);width:clamp(120px,12vw,170px);aspect-ratio:1;border-radius:50%;
  background:var(--papel);color:var(--tinta);display:grid;place-items:center;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.3vw,19px);line-height:1.05;padding:18px;z-index:3;animation:gira 22s linear infinite}
.sello b{font-style:normal;font-weight:900;display:block;font-size:1.6em}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- Trapo y espuma sobre la portada ---------- */
.portada{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 56 56'%3E%3Cpath d='M8 14c8-6 16 2 24-3s14 2 16 9-2 12 1 18-6 12-14 9-14 4-20 1S2 44 6 36 2 20 8 14z' fill='%23ffffff' stroke='%23222' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M14 22c6-3 12 2 18-1M13 31c7-2 13 3 21 0M16 40c5-2 10 1 15-1' fill='none' stroke='%2300000055' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 36 36,auto}
.suciedad,.espuma{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.suciedad{z-index:4;transition:opacity 1.1s}
.espuma{z-index:5}
.portada.limpia .suciedad{opacity:0}
.pista{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(22px,2.4vw,34px);color:#fff;text-align:center;
  text-shadow:0 2px 18px #0009;transition:opacity .6s}
.pista small{display:block;font-family:var(--sans);font-style:normal;font-weight:500;font-size:15px;margin-top:6px;opacity:.9}
.portada.frotando .pista,.portada.limpia .pista{opacity:0}
.brillo{position:absolute;z-index:6;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,#fff9 48%,transparent 60%);background-size:250% 100%;background-position:120% 0}
.portada.limpia .brillo{animation:brilla 1.4s ease-out .3s forwards}
@keyframes brilla{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-30% 0}}

/* ---------- Cinta ---------- */
.cinta{background:var(--tinta);color:var(--fondo);overflow:hidden;white-space:nowrap;padding:16px 0;transition:color var(--t)}
.cinta div{display:inline-block;animation:cinta 38s linear infinite;font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.6vw,36px);font-style:italic}
.cinta span{margin:0 28px}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- Servicios a ancho completo ---------- */
.aroma{display:grid;grid-template-columns:1fr 1fr;min-height:92vh;background:var(--c);color:var(--k)}
.aroma:nth-child(even) .aroma-foto{order:2}
.aroma-foto{position:relative;overflow:hidden;min-height:60vh}
.aroma-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.aroma.dentro .aroma-foto img{transform:scale(1)}
.aroma-texto{padding:clamp(48px,8vw,110px) clamp(16px,5vw,80px);display:flex;flex-direction:column;justify-content:center;gap:28px}
.aroma .num{font-weight:600;font-size:15px;letter-spacing:.02em}
.aroma h2{font-family:var(--serif);font-weight:900;font-size:clamp(64px,9vw,150px);line-height:.85;letter-spacing:-.045em;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.aroma h2 em{display:block;font-weight:300;font-style:italic;font-size:.42em;letter-spacing:-.02em;margin-top:.2em}
.aroma p{font-size:clamp(17px,1.3vw,19px);line-height:1.55;max-width:46ch}
.gama{list-style:none;border-top:2px solid currentColor}
.gama li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);font-weight:500}
.gama li span:last-child{font-family:var(--serif);font-style:italic}

/* ---------- Productos en filas ---------- */
.bloque{padding:clamp(72px,10vw,140px) clamp(16px,5vw,80px)}
.titulo-grande{font-family:var(--serif);font-weight:900;font-size:clamp(48px,7vw,112px);line-height:.9;letter-spacing:-.04em;max-width:14ch;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;margin-bottom:clamp(36px,5vw,64px)}
.titulo-grande em{font-weight:300;font-style:italic}
.filas{list-style:none;border-top:2px solid var(--tinta)}
.filas li{display:grid;grid-template-columns:1.1fr 1.4fr 40px;align-items:baseline;gap:24px;padding:28px 0;border-bottom:1px solid #2a20003a;
  transition:background .3s,padding .3s;cursor:default}
.filas li:hover{background:var(--fondo);padding-left:16px;padding-right:16px}
.filas .n{font-family:var(--serif);font-style:italic;font-size:22px}
.filas h3{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;line-height:1}
.filas p{font-size:17px;line-height:1.5}
.filas .f{font-size:26px;text-align:right;transition:transform .3s}
.filas li:hover .f{transform:translateX(6px)}

/* ---------- Mosaico a sangre ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:42vh 42vh}
.mosaico figure{position:relative;overflow:hidden}
.mosaico figure:first-child{grid-column:span 2;grid-row:span 2}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-family:var(--serif);font-style:italic;font-size:20px;text-shadow:0 1px 12px #0008}

/* ---------- Manifiesto ---------- */
.manifiesto{background:var(--tinta);color:var(--papel);padding:clamp(80px,12vw,170px) clamp(16px,5vw,80px)}
.manifiesto p{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,72px);line-height:1.08;letter-spacing:-.025em;max-width:22ch}
.manifiesto p em{color:var(--fondo);transition:color var(--t)}
.manifiesto small{display:block;margin-top:40px;font-size:16px;max-width:52ch;line-height:1.6;opacity:.8}

/* ---------- Aviso / lista de espera ---------- */
.aviso{background:var(--fondo);transition:background var(--t);display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;
  padding:clamp(72px,10vw,140px) clamp(16px,5vw,80px)}
.aviso h2{font-family:var(--serif);font-weight:900;font-size:clamp(48px,6.5vw,104px);line-height:.88;letter-spacing:-.04em;font-variation-settings:"SOFT" 100,"WONK" 1}
.aviso h2 em{font-weight:300;font-style:italic}
.aviso form{display:flex;border-bottom:3px solid var(--tinta)}
.aviso input{flex:1;min-width:0;background:none;border:0;font:500 clamp(18px,1.6vw,22px) var(--sans);color:var(--tinta);padding:14px 0;outline:none}
.aviso input::placeholder{color:color-mix(in srgb,var(--tinta) 55%,transparent)}
.aviso button{background:none;border:0;font:600 18px var(--sans);color:var(--tinta);cursor:pointer;padding:0 0 0 16px}
.aviso .ok{margin-top:14px;font-weight:600;min-height:1.4em}
.aviso .letra{font-size:15px;margin-top:10px}

/* ---------- Pie ---------- */
.pie{background:var(--papel);padding:56px clamp(16px,5vw,80px) 28px}
.pie-marca{font-family:var(--serif);font-weight:900;font-size:clamp(72px,17vw,280px);line-height:.8;letter-spacing:-.05em;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;white-space:nowrap}
.pie-fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:36px;font-size:15px;border-top:1px solid #2a20003a;padding-top:20px}
.pie-fila nav{display:flex;flex-wrap:wrap;gap:22px}
.pie-fila a{text-decoration:none}

/* ---------- Aparecer al bajar ---------- */
.sube{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.1,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.sube{opacity:1;transform:none}}

/* ---------- Móvil ---------- */
@media (max-width:860px){
  .cab nav{display:none}
  .portada{grid-template-columns:1fr;min-height:auto}
  .portada-texto{padding-top:96px}
  .portada-foto{height:62vh;order:2}
  .aroma{grid-template-columns:1fr;min-height:auto}
  .aroma:nth-child(even) .aroma-foto{order:0}
  .aroma-foto{min-height:52vh}
  .filas li{grid-template-columns:1fr 28px;grid-template-areas:"h f" "p .";gap:8px 12px;padding:22px 0}
  .filas li:hover{padding-left:0;padding-right:0}
  .filas h3{grid-area:h}.filas li p{grid-area:p}.filas .f{grid-area:f}
  .pie-marca{font-size:clamp(56px,17vw,280px)}
  .mosaico{grid-template-columns:1fr 1fr;grid-template-rows:46vh 26vh 26vh}
  .mosaico figure:first-child{grid-column:span 2;grid-row:span 1}
  .aviso{grid-template-columns:1fr}
}

/* ---------- Servicios: extras ---------- */
.aroma h2{font-size:clamp(46px,6.2vw,104px)}
.aroma .incluye{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:16px}
.aroma .incluye li::before{content:"— "}
.aroma .precio{font-family:var(--serif);font-size:clamp(20px,1.7vw,24px);border-top:2px solid currentColor;padding-top:14px}
.aroma .precio b{font-weight:800}
/* ---------- Precios en filas ---------- */
.tabla{list-style:none;border-top:2px solid var(--tinta)}
.tabla li{display:grid;grid-template-columns:1.2fr 1fr 1.6fr;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid #2a20003a}
.tabla h3{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
.tabla .cifra{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);font-style:italic}
.tabla p{font-size:17px;line-height:1.5}
.nota{margin-top:28px;font-size:17px;line-height:1.6;max-width:70ch}
/* ---------- Zonas ---------- */
.zonas{background:var(--tinta);color:var(--papel)}
.zonas .titulo-grande{color:var(--papel)}
.zonas .filas{border-color:var(--papel)}
.zonas .filas li{border-color:#ffffff30}
.zonas .filas li:hover{background:#ffffff12}
.zonas .intro{font-size:18px;line-height:1.6;max-width:62ch;margin:-24px 0 40px;opacity:.9}
/* ---------- Preguntas ---------- */
.faq details{border-bottom:1px solid #2a20003a;padding:22px 0}
.faq{border-top:2px solid var(--tinta)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--serif);font-weight:700;font-size:clamp(21px,2vw,28px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:1.3em;line-height:.8;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-size:17px;line-height:1.6;max-width:72ch;margin-top:14px}
/* ---------- Formulario ---------- */
.aviso form.presu{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;border:0}
.presu input,.presu select{width:100%;background:none;border:0;border-bottom:2px solid var(--tinta);font:500 18px var(--sans);color:var(--tinta);padding:12px 0;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.presu .ancho{grid-column:1/-1}
.presu button{grid-column:1/-1;justify-self:start;background:var(--tinta);color:var(--fondo);border:0;padding:16px 28px;font:600 18px var(--sans);cursor:pointer;transition:transform .2s}
.presu button:hover{transform:translateX(4px)}
@media (max-width:860px){
  .aroma .incluye{grid-template-columns:1fr}
  .tabla li{grid-template-columns:1fr;gap:6px}
  .aviso form.presu{grid-template-columns:1fr}
}

/* ---------- Páginas de servicio ---------- */
.hero-sub{display:grid;grid-template-columns:1.1fr .9fr;min-height:88svh;background:var(--fondo);color:var(--tinta)}
.hero-sub .txt{padding:clamp(110px,15vh,170px) clamp(16px,5vw,80px) 56px;display:flex;flex-direction:column;justify-content:flex-end;gap:26px}
.migas{font-size:14px;font-weight:500}.migas a{text-decoration:none;border-bottom:1px solid currentColor}
.hero-sub h1{font-family:var(--serif);font-weight:900;font-size:clamp(44px,6vw,100px);line-height:.9;letter-spacing:-.04em;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.hero-sub h1 em{display:block;font-weight:300;font-style:italic;font-size:.46em;letter-spacing:-.02em;margin-top:.25em;line-height:1.1}
.hero-sub .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:52ch}
.hero-sub .ctas{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.boton{display:inline-block;background:var(--tinta);color:var(--fondo);text-decoration:none;padding:16px 26px;font-weight:600;font-size:17px;transition:transform .2s}
.boton:hover{transform:translateX(4px)}
.enlace{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor}
.hero-sub .foto{position:relative;overflow:hidden;min-height:50vh}
.hero-sub .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.texto-largo{max-width:72ch;font-size:18px;line-height:1.65;margin:-20px 0 36px}
.texto-largo p+p{margin-top:16px}
.banda{background:var(--fondo);color:var(--tinta)}
.otros{display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:700}
.otros a{text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:860px){.hero-sub{grid-template-columns:1fr;min-height:auto}.hero-sub .txt{padding-top:100px}.hero-sub .foto{min-height:46vh}}