:root{
  --cream:#fbf2e4;
  --ink:#2a1420;
  --magenta:#b32d6a;
  --rosa:#e86a92;
  --marigold:#f6b733;
  --naranja:#e8612c;
  --teal:#1f4d47;
  --turq:#2fa39a;
  --cobalto:#2f4fa8;
  --bg:var(--cream);
  --fg:var(--ink);
  --f-head:"Fraunces",Georgia,serif;
  --f-script:"Great Vibes",cursive;
  --f-body:"DM Sans",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,60px);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* cursor: máquina de tatuar en toda la web */
html,body,*,*::before,*::after{cursor:url("../assets/cursor.png?v=3") 5 27,auto!important;cursor:-webkit-image-set(url("../assets/cursor.png?v=3") 1x,url("../assets/cursor@2x.png?v=3") 2x) 5 27,auto!important;cursor:image-set(url("../assets/cursor.png?v=3") 1x,url("../assets/cursor@2x.png?v=3") 2x) 5 27,auto!important}
html{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--magenta);color:var(--cream)}

.big{font-family:var(--f-head);font-weight:900;font-size:clamp(44px,7vw,110px);line-height:.95;letter-spacing:-.02em}
.big em{font-family:var(--f-script);font-weight:400;font-style:normal;color:var(--magenta);font-size:1.25em;letter-spacing:0}
.pill{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;background:var(--magenta);color:var(--cream);font-weight:700;letter-spacing:.04em;box-shadow:0 6px 0 var(--ink);transition:transform .35s var(--bounce),box-shadow .35s var(--bounce)}
.pill:hover{transform:translateY(-4px) rotate(-2deg);box-shadow:0 10px 0 var(--ink)}
.pill:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.pill--dark{background:var(--ink);box-shadow:0 6px 0 var(--magenta)}
.pill--dark:hover{box-shadow:0 10px 0 var(--magenta)}

/* ---------- símbolos ---------- */
svg use{pointer-events:none}
.deco,.about__flor{position:absolute;pointer-events:none}
.deco{--pet:var(--rosa);--cen:var(--marigold);--dot:var(--naranja)}
.deco--2{--pet:var(--turq)}
.deco--3{--pet:var(--marigold);--cen:var(--magenta)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--magenta);display:grid;place-items:center;align-content:center;gap:10px}
.loader__flor{width:min(38vw,220px);overflow:visible}
.loader__flor .lp ellipse{fill:var(--marigold);transform-box:fill-box;transform-origin:50% 100%}
.loader__flor .lc{fill:var(--cream)}
.loader__name{font-family:var(--f-script);font-size:clamp(56px,10vw,110px);color:var(--cream);line-height:1}

/* ---------- papel picado ---------- */
.picado{position:fixed;top:0;left:0;right:0;height:120px;z-index:40;pointer-events:none}
.picado__rope{position:absolute;inset:0 0 auto;width:100%;height:40px}
.picado__rope path{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.picado__flags{position:absolute;inset:0;display:flex;justify-content:space-around;padding:0 2vw}
.flag{width:clamp(34px,4.6vw,64px);transform-origin:50% 0;will-change:transform}
.flag svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 2px rgba(42,20,32,.2))}
body.scrolled .picado{opacity:0;transform:translateY(-100%);transition:opacity .5s,transform .7s var(--bounce)}
.picado{transition:opacity .5s,transform .7s var(--bounce)}

/* ---------- nav ---------- */
.nav{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:22px;padding:8px 8px 8px 10px;border-radius:999px;background:rgba(251,242,228,.86);backdrop-filter:blur(12px);border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink);color:var(--ink)}
.nav__logo img{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink)}
.nav__links{display:flex;gap:20px;font-weight:700;font-size:15px}
.nav__links a{position:relative;padding:4px 2px}
.nav__links a::after{content:"";position:absolute;left:50%;bottom:-2px;width:6px;height:6px;border-radius:50%;background:var(--magenta);transform:translateX(-50%) scale(0);transition:transform .35s var(--bounce)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:translateX(-50%) scale(1)}
.nav__cta{background:var(--magenta);color:var(--cream);font-weight:700;padding:12px 20px;border-radius:999px;transition:background .3s}
.nav__cta:hover{background:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:140px var(--gutter) 120px}
.hero__collage{position:absolute;inset:0}
.hc{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r));background:#fff;padding:10px 10px 34px;box-shadow:0 18px 40px -18px rgba(42,20,32,.45);will-change:transform}
.hc img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hc--sm{padding:8px 8px 24px}
.hero__center{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero__kicker{font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:13px;color:var(--magenta)}
.hero__script{display:block;font-family:var(--f-script);font-weight:400;font-size:clamp(120px,22vw,340px);line-height:.9;color:var(--magenta);padding:0 .15em;clip-path:inset(0 100% 0 0);text-shadow:4px 4px 0 var(--marigold)}
.hero__sub{font-family:var(--f-head);font-style:italic;font-size:clamp(20px,2.2vw,30px)}
.hero__sub i{color:var(--naranja);font-style:normal;margin:0 6px}
.deco--1{width:90px;height:90px;left:20%;top:62%}
.deco--2{width:60px;height:60px;right:22%;top:18%}
.deco--3{width:120px;height:120px;right:6%;bottom:-30px}

/* ---------- about ---------- */
.about{position:relative;padding:clamp(110px,14vw,200px) var(--gutter);max-width:1300px;margin:0 auto;overflow:visible}
.about__eyebrow{font-family:var(--f-script);font-size:clamp(40px,5vw,64px);color:var(--magenta);line-height:1;margin-bottom:18px}
.loteria .about__eyebrow{color:var(--marigold)}
.about__text{font-family:var(--f-head);font-weight:700;font-size:clamp(34px,4.8vw,74px);line-height:1.12;letter-spacing:-.01em}
.about__text .w{display:inline-block;opacity:0;transform:translateY(.4em) rotate(4deg)}
.brush{position:relative;display:inline-block;white-space:nowrap}
.brush svg{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.35em;overflow:visible;z-index:-1}
.brush path{fill:none;stroke:var(--magenta);stroke-width:14;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;vector-effect:none}
.about__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:clamp(50px,6vw,80px);font-size:19px;max-width:1000px}
.about__flor--a{width:160px;height:160px;right:2%;top:40px}
.about__flor--b{width:90px;height:90px;left:-20px;bottom:40px}
.about__flor{--pet:var(--magenta);--cen:var(--cream);--dot:var(--marigold)}

/* ---------- lotería ---------- */
.loteria{padding:clamp(110px,14vw,200px) var(--gutter);overflow:hidden}
.loteria__head{max-width:1300px;margin:0 auto 60px}
.loteria .big em{color:var(--marigold)}
.loteria__hint{opacity:.7;margin-top:14px}
.deck{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);perspective:1400px}
.card{aspect-ratio:5/7.4;outline:none}
.card__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--bounce)}
.card:hover .card__inner,.card:focus .card__inner,.card.is-flipped .card__inner{transform:rotateY(180deg)}
.card__front,.card__back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 10px 0 rgba(0,0,0,.25)}
.card__front{padding:14px;display:flex;flex-direction:column;gap:10px}
.card__front img{flex:1;min-height:0;width:100%;object-fit:cover;border:3px solid var(--ink);border-radius:6px}
.card__front h3,.card__back h3{font-family:var(--f-head);font-weight:900;text-transform:uppercase;text-align:center;font-size:clamp(18px,1.9vw,26px);letter-spacing:.02em;line-height:1.05}
.card__n{position:absolute;top:22px;left:22px;z-index:2;background:var(--cream);border:3px solid var(--ink);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-family:var(--f-head);font-weight:900;font-size:20px}
.card__front--flor svg{flex:1;min-height:0;width:100%;background:var(--rosa);border:3px solid var(--ink);border-radius:6px;padding:20%}
.card__front--flor svg{--pet:var(--cream);--cen:var(--marigold);--dot:var(--magenta)}
.card__back{transform:rotateY(180deg);background:var(--marigold);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:30px;text-align:center;background-image:radial-gradient(circle at 50% 50%,transparent 58%,rgba(42,20,32,.08) 59% 61%,transparent 62%)}
.card__back p{font-size:17px}
.card:nth-child(2) .card__back{background:var(--rosa)}
.card:nth-child(3) .card__back{background:var(--turq)}
.card:nth-child(4) .card__back{background:var(--naranja);color:var(--cream)}
.card:nth-child(5) .card__back{background:var(--cream)}
.card:nth-child(6) .card__back{background:var(--magenta);color:var(--cream)}

/* ---------- galería ---------- */
.gallery{padding:clamp(110px,14vw,200px) var(--gutter);max-width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:50px}
.gallery__head{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{padding:10px 20px;border-radius:999px;border:2px solid var(--ink);font-weight:700;font-size:15px;transition:background .3s,color .3s,transform .35s var(--bounce)}
.filters button:hover{transform:translateY(-3px)}
.filters button.is-on{background:var(--ink);color:var(--cream)}
.grid{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.g{background:#fff;padding:10px 10px 30px;box-shadow:0 14px 30px -16px rgba(42,20,32,.5);transform:rotate(var(--rot,0deg));transition:transform .5s var(--bounce),box-shadow .5s}
.g:nth-child(3n+1){--rot:-2.2deg}.g:nth-child(3n+2){--rot:1.6deg}.g:nth-child(3n){--rot:-.8deg}
.g:hover{transform:rotate(0) scale(1.05);box-shadow:0 26px 40px -18px rgba(42,20,32,.55);z-index:2}
.g img{width:100%;aspect-ratio:1;object-fit:cover}
.g.is-hidden{display:none}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(42,20,32,.9);opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__img{max-width:min(86vw,640px);max-height:78vh;border:10px solid #fff;border-bottom-width:44px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__cap{position:absolute;bottom:4vh;color:var(--cream);font-family:var(--f-head);font-style:italic;font-size:20px;text-align:center;padding:0 var(--gutter)}
.lightbox__close{position:absolute;top:20px;right:26px;font-size:48px;color:var(--cream);line-height:1}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);font-size:64px;color:var(--cream);padding:0 20px;transition:transform .3s var(--bounce)}
.lightbox__nav--prev{left:1vw}.lightbox__nav--next{right:1vw}
.lightbox__nav:hover{transform:translateY(-50%) scale(1.25)}

/* ---------- visita ---------- */
.visit{padding:clamp(110px,14vw,200px) var(--gutter) 160px;max-width:1400px;margin:0 auto}
.visit__title{font-family:var(--f-head);font-weight:900;font-size:clamp(64px,12vw,200px);line-height:.85;letter-spacing:-.03em;word-spacing:.18em;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .2em}
.visit__title .script{font-family:var(--f-script);font-weight:400;color:var(--marigold);font-size:1.2em;letter-spacing:0}
.visit__title span{display:inline-block}
.visit__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.visit__card{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;box-shadow:0 10px 0 var(--ink)}
.visit__card h3{font-family:var(--f-head);font-weight:900;font-size:28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.visit__card a{font-weight:700;color:var(--magenta);border-bottom:2px solid currentColor}
.hours{list-style:none;width:100%;font-size:15px}
.hours li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed rgba(42,20,32,.25)}
.hours li.is-today{font-weight:700;color:var(--magenta)}
.status{font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#ddd;display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.is-open{background:#d6f3dc;color:#1a7a35}
.status.is-open::before{animation:pulse 1.4s infinite}
.status.is-closed{background:#f6d7de;color:#a3223f}
@keyframes pulse{50%{opacity:.25}}
.visit__map{margin-top:40px;border:3px solid var(--ink);border-radius:18px;overflow:hidden;height:clamp(280px,36vw,440px);box-shadow:0 10px 0 var(--ink)}
.visit__map iframe{width:100%;height:100%;border:0}

/* ---------- footer ---------- */
.footer{position:relative;padding:150px var(--gutter) 130px;text-align:center;overflow:hidden}
.footer__flags{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-around}
.footer__script{font-family:var(--f-script);font-size:clamp(100px,18vw,260px);line-height:1;color:var(--rosa)}
.footer__line{font-family:var(--f-head);font-style:italic;font-size:22px;margin-top:10px}
.footer__small{margin-top:30px;font-size:14px;opacity:.7}
.footer__small a{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{gap:10px;bottom:14px;width:calc(100% - 24px);justify-content:space-between}
  .nav__links{display:none}
  .hc{--w:30vw!important}
  .hc--sm{display:none}
  .about__cols{grid-template-columns:1fr}
  .deck{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .visit__grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .deck{grid-template-columns:1fr;max-width:340px}
  .hero__script{font-size:32vw}
}
@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__script{clip-path:none}
  .about__text .w{opacity:1;transform:none}
  .brush path{stroke-dashoffset:0}
}
