/* Metta Melt · landing · usa tokens.css */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--fons);color:var(--text);font:400 var(--t-cos)/1.65 var(--font-text);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.w{max-width:var(--amplada);margin:0 auto;padding:0 var(--s3)}
h1,h2,h3{font-family:var(--font-titol);font-weight:700;line-height:1.05;text-wrap:balance}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:1.2}
.et{font-size:var(--t-petit);letter-spacing:.02em;margin-bottom:var(--s2);color:var(--text-suau)}
.acc{font-family:var(--font-accent);font-weight:400;color:var(--accent)}
p{text-wrap:pretty}

/* botones */
.btn{display:inline-block;padding:.95rem 1.9rem;border-radius:var(--radi);font:600 1rem var(--font-text);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,background .2s}
.btn{transition:transform .6s cubic-bezier(.2,.8,.2,1),background .5s ease,color .5s ease,box-shadow .8s cubic-bezier(.2,.8,.2,1),translate .5s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(24,65,46,.45)}
.b3:hover{background:var(--albahaca);color:var(--crema)}
.b1:hover{background:#d02f14}
.b2:hover{background:#ffd42e}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--mantequilla);outline-offset:3px}
.b1{background:var(--tomate);color:#fff}
.b2{background:var(--mantequilla);color:var(--albahaca)}
.b3{border-color:var(--albahaca);color:var(--albahaca)}

/* cabecera: transparente sobre el hero, crema al hacer scroll */
.cab{position:fixed;top:0;left:0;right:0;z-index:10;background:transparent;border-bottom:1px solid transparent;transition:background .3s,box-shadow .3s,border-color .3s}
.cab .w{display:flex;align-items:center;justify-content:space-between;height:76px;transition:height .3s}
.cab .logo{position:relative;display:block}
.cab .logo img{height:34px;width:auto;transition:opacity .3s,transform .3s}
.cab .logo .l-tomate{position:absolute;left:0;top:0;opacity:0}
.cab.peq{background:color-mix(in srgb,var(--crema) 94%,transparent);backdrop-filter:blur(10px);border-color:var(--linia);box-shadow:0 8px 24px -16px rgba(24,65,46,.4)}
.cab.peq .w{height:58px}
.cab.peq .l-crema{opacity:0}
.cab.peq .l-tomate{opacity:1}
.nav{display:flex;gap:var(--s3);align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:.98rem;color:#fff;transition:color .3s}
.cab.peq .nav a:not(.btn){color:var(--albahaca)}
.nav a:hover{color:var(--mantequilla)}
.cab.peq .nav a:not(.btn):hover{color:var(--tomate)}
.nav a.btn{color:#fff}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:#fff;transition:color .3s}
.cab.peq .burger{color:var(--albahaca)}
.burger span{display:block;width:26px;height:2px;background:currentColor;margin:6px 0;transition:.2s}

/* hero: foto a pantalla completa */
.hero{position:relative;overflow:hidden;min-height:560px;height:calc(100svh - 10.5rem);display:flex;align-items:center;color:#fff;isolation:isolate}
.hero .hero-fondo{position:absolute;inset:-8% 0;z-index:-2;border-radius:0;min-height:0;padding:0;background:#6f9583;place-items:end start}
.hero .hero-fondo span{color:rgba(255,255,255,.8);position:absolute;right:var(--s3);bottom:calc(10% + 2.5rem);max-width:34ch;text-align:right;z-index:1}
.hero-fondo::before{background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(156,186,170,.12) 16px 32px)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,65,46,.78) 0%,rgba(24,65,46,.4) 55%,rgba(24,65,46,.1) 100%),linear-gradient(0deg,rgba(24,65,46,.45),transparent 40%)}
.hero-cont{padding-top:100px;padding-bottom:var(--s3);width:100%}
.hero h1{margin:0 0 var(--s3);max-width:13ch;font-size:clamp(2.6rem,5.6vw,4.8rem)}
.hero .acc{color:var(--mantequilla)}
.hero p.lead{font-size:1.3rem;max-width:34ch;margin-bottom:var(--s4)}
.hero .acciones{display:flex;gap:var(--s2);flex-wrap:wrap}
.b3.claro{border-color:#fff;color:#fff}
.b3.claro:hover{background:#fff;color:var(--albahaca)}

/* placeholders de imagen */
.ph{display:grid;place-items:center;text-align:center;padding:var(--s3);background:var(--menta);color:var(--albahaca);border-radius:var(--radi-targeta);font-size:var(--t-petit);min-height:180px;position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(24,65,46,.07) 16px 32px)}
.ph span{position:relative;max-width:26ch}

/* secciones */
section{padding:var(--s6) 0}
.mision{background:var(--albahaca);color:var(--sobre-fosc)}
.mision .et{color:var(--menta)}
.mision .acc{color:var(--mantequilla)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.dos p{font-size:1.25rem;margin-top:var(--s3);max-width:44ch}
.vision .dos{direction:rtl}.vision .dos>*{direction:ltr}
.vision .ph{background:var(--mantequilla)}

.hacemos h2{max-width:16ch;margin-bottom:var(--s4)}
.tarjetas{display:grid;gap:var(--s3);grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border-radius:var(--radi-targeta);padding:var(--s4);border:1px solid var(--linia)}
.card .num{font-family:var(--font-accent);color:var(--tomate);font-size:2.4rem;line-height:1}
.card h3{margin:var(--s2) 0 var(--s1)}
.card p{color:var(--text-suau)}
.cinta{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}

.contacto{background:var(--tomate);color:#fff}
.contacto .et{color:#fff;opacity:.85}
.contacto .dos{align-items:start}
.contacto .dos p{color:#fff}
.datos{margin-top:var(--s3);list-style:none;padding:0;display:grid;gap:.4rem}
.datos a{font-weight:600}
.canales{list-style:none;padding:0;background:var(--albahaca);border-radius:var(--radi-targeta);padding:var(--s2) var(--s4)}
.canales li{display:grid;gap:.15rem;padding:var(--s3) 0;border-bottom:1px solid rgba(255,255,255,.14)}
.canales li:last-child{border:0}
.canales span{font-size:var(--t-petit);color:var(--menta)}
.canales a,.canales b{font-family:var(--font-titol);font-size:1.5rem;line-height:1.2;text-decoration:none;word-break:break-word}
.canales a:hover{color:var(--mantequilla)}

footer{background:var(--albahaca);color:var(--crema);padding:var(--s4) 0}
footer .w{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
footer img{height:30px;width:auto}
footer p{font-size:var(--t-petit);opacity:.8}

.js .ap{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.js .ap.on{opacity:1;transform:none}

@media (max-width:860px){
  .hero{height:auto;min-height:calc(100svh - 10.5rem)}
  .hero .hero-fondo span{display:none}
  .hero .w,.dos,.tarjetas,.cinta{grid-template-columns:1fr}
  .hero{padding:var(--s4) 0 var(--s5)}
  .vision .dos{direction:ltr}
  section{padding:var(--s5) 0}
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--crema);flex-direction:column;align-items:flex-start;padding:var(--s3);gap:var(--s2);border-bottom:1px solid var(--linia);display:none}
  .nav.abierto{display:flex}
  .nav a:not(.btn){color:var(--albahaca)!important}
  .canales{padding:var(--s1) var(--s3)}
}

/* ---------- interactividad ---------- */
.cab .logo:hover{transform:rotate(-3deg) scale(1.05)}
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:var(--mantequilla);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.nav a.act::after,.nav a:not(.btn):hover::after{transform:scaleX(1)}

/* titulares palabra a palabra */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .04em .16em;margin:-.12em -.04em -.16em}
.pal>span{display:inline-block}
.js [data-split] .pal>span{transform:translateY(115%) rotate(4deg);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms)}
.js [data-split].on .pal>span{transform:none}
.acc{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.acc:hover{transform:rotate(-4deg) scale(1.06)}

/* fondo vivo */
.ph{transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow 1s cubic-bezier(.2,.8,.2,1);will-change:transform}
.ph:hover{box-shadow:0 30px 50px -30px rgba(24,65,46,.5)}
.ph::before{animation:rayas 6s linear infinite}
@keyframes rayas{to{transform:translate(45px,45px)}}
.ph::before{inset:-45px}

/* cinta de marca: fundido con gotas */
.cinta-marca{position:relative;z-index:2;overflow-x:clip;background:linear-gradient(180deg,#ffd83d 0%,#FAC504 75%,#FAC504 100%);color:var(--albahaca);padding:1.25rem 0 1rem;transform:rotate(-1.4deg) scale(1.03);margin:-1.5rem 0;box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.cinta-marca::before,.cinta-marca::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 6px);height:100px;background-repeat:repeat-x;background-position:0 0;transform-origin:50% 0;pointer-events:none}
.cinta-marca::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22880%22 height=%22100%22 viewBox=%220 0 880 100%22%3E%3Crect width=%22880%22 height=%2212%22 fill=%22%23E8A800%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M33.0%2C10 C43.0%2C10 47.0%2C14 47.0%2C26 V54.0 A8.0%2C8.0 0 0 0 63.0%2C54.0 V26 C63.0%2C14 67.0%2C10 77.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M129.0%2C10 C139.0%2C10 143.0%2C14 143.0%2C26 V32.0 A8.0%2C8.0 0 0 0 159.0%2C32.0 V26 C159.0%2C14 163.0%2C10 173.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M198.0%2C10 C208.0%2C10 212.0%2C14 212.0%2C26 V34.0 A10.0%2C10.0 0 0 0 232.0%2C34.0 V26 C232.0%2C14 236.0%2C10 246.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M316.0%2C10 C326.0%2C10 330.0%2C14 330.0%2C26 V54.0 A8.0%2C8.0 0 0 0 346.0%2C54.0 V26 C346.0%2C14 350.0%2C10 360.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M407.0%2C10 C417.0%2C10 421.0%2C14 421.0%2C26 V22.0 A10.0%2C10.0 0 0 0 441.0%2C22.0 V26 C441.0%2C14 445.0%2C10 455.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M518.0%2C10 C528.0%2C10 532.0%2C14 532.0%2C26 V39.0 A10.0%2C10.0 0 0 0 552.0%2C39.0 V26 C552.0%2C14 556.0%2C10 566.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M594.0%2C10 C604.0%2C10 608.0%2C14 608.0%2C26 V54.0 A8.0%2C8.0 0 0 0 624.0%2C54.0 V26 C624.0%2C14 628.0%2C10 638.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M688.0%2C10 C698.0%2C10 702.0%2C14 702.0%2C26 V47.0 A10.0%2C10.0 0 0 0 722.0%2C47.0 V26 C722.0%2C14 726.0%2C10 736.0%2C10 Z%22/%3E%3Cpath fill=%22%23E8A800%22 d=%22M811.0%2C10 C821.0%2C10 825.0%2C14 825.0%2C26 V31.0 A15.0%2C15.0 0 0 0 855.0%2C31.0 V26 C855.0%2C14 859.0%2C10 869.0%2C10 Z%22/%3E%3C/svg%3E");background-size:880px 100px;background-position:120px 0;z-index:-1;animation:gotea-b 7s ease-in-out infinite alternate}
.cinta-marca::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%22100%22 viewBox=%220 0 640 100%22%3E%3Crect width=%22640%22 height=%2212%22 fill=%22%23FAC504%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M14.0%2C10 C24.0%2C10 28.0%2C14 28.0%2C26 V53.0 A10.0%2C10.0 0 0 0 48.0%2C53.0 V26 C48.0%2C14 52.0%2C10 62.0%2C10 Z%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M122.0%2C10 C132.0%2C10 136.0%2C14 136.0%2C26 V82.0 A8.0%2C8.0 0 0 0 152.0%2C82.0 V26 C152.0%2C14 156.0%2C10 166.0%2C10 Z%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M204.0%2C10 C214.0%2C10 218.0%2C14 218.0%2C26 V63.0 A12.0%2C12.0 0 0 0 242.0%2C63.0 V26 C242.0%2C14 246.0%2C10 256.0%2C10 Z%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M276.0%2C10 C286.0%2C10 290.0%2C14 290.0%2C26 V30.0 A10.0%2C10.0 0 0 0 310.0%2C30.0 V26 C310.0%2C14 314.0%2C10 324.0%2C10 Z%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M364.0%2C10 C374.0%2C10 378.0%2C14 378.0%2C26 V27.0 A15.0%2C15.0 0 0 0 408.0%2C27.0 V26 C408.0%2C14 412.0%2C10 422.0%2C10 Z%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M462.0%2C10 C472.0%2C10 476.0%2C14 476.0%2C26 V26.0 A15.0%2C15.0 0 0 0 506.0%2C26.0 V26 C506.0%2C14 510.0%2C10 520.0%2C10 Z%22/%3E%3Cpath fill=%22%23FAC504%22 d=%22M587.0%2C10 C597.0%2C10 601.0%2C14 601.0%2C26 V44.0 A8.0%2C8.0 0 0 0 617.0%2C44.0 V26 C617.0%2C14 621.0%2C10 631.0%2C10 Z%22/%3E%3C/svg%3E");background-size:640px 100px;animation:gotea-a 5s ease-in-out infinite alternate}
@keyframes gotea-a{0%{transform:scaleY(.72)}55%{transform:scaleY(1.05)}100%{transform:scaleY(1.22)}}
@keyframes gotea-b{0%{transform:scaleY(1.2)}50%{transform:scaleY(.8)}100%{transform:scaleY(1.05)}}
.cinta-marca .agujeros{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 22px 15px at 8% 35%,rgba(184,120,0,.22) 98%,transparent),radial-gradient(ellipse 14px 10px at 27% 72%,rgba(184,120,0,.2) 98%,transparent),radial-gradient(ellipse 30px 20px at 46% 28%,rgba(184,120,0,.18) 98%,transparent),radial-gradient(ellipse 12px 9px at 63% 66%,rgba(184,120,0,.22) 98%,transparent),radial-gradient(ellipse 24px 16px at 82% 40%,rgba(184,120,0,.2) 98%,transparent),radial-gradient(ellipse 10px 8px at 94% 74%,rgba(184,120,0,.2) 98%,transparent)}
.pista{position:relative;display:flex;width:max-content;gap:1.6rem;animation:cinta 28s linear infinite;align-items:center}
.cinta-marca:hover .pista{animation-play-state:paused}
.pista span{font-family:var(--font-accent);font-size:clamp(1.6rem,3.4vw,2.6rem);white-space:nowrap;line-height:1}
.pista i{width:.9rem;height:.9rem;border-radius:50% 50% 50% 8%;background:var(--tomate);flex:none;transform:rotate(-45deg)}
@keyframes cinta{to{transform:translateX(calc(-50% - .8rem))}}

/* lectura por scroll */
.js [data-leer] .lw{opacity:.22;transition:opacity .25s}
.js [data-leer] .lw.on{opacity:1}

/* tarjetas */
.card{position:relative;overflow:hidden;transition:transform .35s ease-out,box-shadow .9s cubic-bezier(.2,.8,.2,1),border-color .8s ease;will-change:transform}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(250,197,4,.28),transparent 60%);opacity:0;transition:opacity .9s ease;pointer-events:none}
.card:hover{box-shadow:0 30px 40px -28px rgba(24,65,46,.45);border-color:var(--menta)}
.card:hover::after{opacity:1}
.card .num{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.card .num{transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.card:hover .num{transform:rotate(-12deg) scale(1.25)}

/* contacto */
.canales li{position:relative;transition:padding-left .35s cubic-bezier(.2,.8,.2,1)}
.canales li:has(a):hover{padding-left:14px}
.canales li:has(a)::after{content:"→";position:absolute;right:0;top:50%;translate:-10px -50%;opacity:0;font-size:1.6rem;color:var(--mantequilla);transition:.35s}
.canales li:has(a):hover::after{opacity:1;translate:0 -50%}
.canales a::before{content:"";position:absolute;inset:0}

/* cursor y gotas */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--mantequilla);mix-blend-mode:multiply;pointer-events:none;z-index:40;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s}
.cursor.v{opacity:.85}
.cursor.g{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--menta)}
.gota{position:fixed;width:12px;height:12px;border-radius:50% 50% 50% 8%;pointer-events:none;z-index:40;animation:gota 1s cubic-bezier(.3,.7,.5,1) forwards}
@keyframes gota{0%{transform:translate(0,0) rotate(-45deg) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(-45deg) scale(.4);opacity:0}}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ap,.js [data-split] .pal>span{opacity:1;transform:none;transition:none}
  .pista,.ph::before,.cinta-marca::before,.cinta-marca::after{animation:none}
  .cursor{display:none}
  .js [data-leer] .lw{opacity:1}
}
.ph[data-par]{transition:box-shadow 1s cubic-bezier(.2,.8,.2,1)}
.js .ap.card.listo{transition:transform .35s ease-out,box-shadow .9s cubic-bezier(.2,.8,.2,1),border-color .8s ease;transition-delay:0s}
html,body{overflow-x:clip}

/* fotos reales */
.hero .hero-fondo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block}
.foto{border-radius:var(--radi-targeta);overflow:hidden;background:var(--menta);transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow 1s cubic-bezier(.2,.8,.2,1)}
.foto:hover{box-shadow:0 30px 50px -30px rgba(24,65,46,.5)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.vision .foto{aspect-ratio:4/3}
.cinta .foto{aspect-ratio:4/5}

footer a{color:inherit;text-decoration:none;font-weight:600}footer a:hover{color:var(--mantequilla)}