/* ===== Arte Pal' Corrillo — Smart Link ===== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Caveat:wght@600;700&display=swap');

/* ---- Palette: Tropical (default, light) ---- */
:root,
[data-palette="tropical"] {
  --sun:#FFC83D;   --sun-deep:#F59312;
  --ocean:#10B5C6; --ocean-deep:#0B7A93;
  --coral:#FF5E7A; --coral-deep:#E8456B;
  --leaf:#27B073;
  --bg:#FFF4E6;
  --bg-2:#FFE7D2;
  --paper:#FFFFFF;
  --paper-soft:rgba(255,255,255,.72);
  --ink:#1C2B33;
  --ink-soft:#5C6B72;
  --hair:rgba(28,43,51,.10);
  --shadow:0 18px 40px -18px rgba(31,49,58,.34);
  --shadow-lg:0 30px 70px -28px rgba(31,49,58,.45);
}

/* ---- Palette: Atardecer (warm dusk) ---- */
[data-palette="atardecer"] {
  --sun:#FFB23E;   --sun-deep:#F0820B;
  --ocean:#FF7A59; --ocean-deep:#D94f33;
  --coral:#F0457E; --coral-deep:#C92F6A;
  --leaf:#E06B3B;
  --bg:#FFE9D6;
  --bg-2:#FFD3B8;
  --paper:#FFFFFF;
  --paper-soft:rgba(255,255,255,.74);
  --ink:#3A1B22;
  --ink-soft:#8A5b53;
  --hair:rgba(58,27,34,.12);
  --shadow:0 18px 40px -18px rgba(120,45,30,.34);
  --shadow-lg:0 30px 70px -28px rgba(120,45,30,.45);
}

/* ---- Palette: Noche Tropical (dark) ---- */
[data-palette="noche"] {
  --sun:#FFD24A;   --sun-deep:#FFB020;
  --ocean:#28D2C0; --ocean-deep:#13A799;
  --coral:#FF6E8A; --coral-deep:#FF4D72;
  --leaf:#34D08A;
  --bg:#072028;
  --bg-2:#0C3038;
  --paper:#0F2E36;
  --paper-soft:rgba(255,255,255,.07);
  --ink:#EAF7F4;
  --ink-soft:#9FC2C0;
  --hair:rgba(255,255,255,.12);
  --shadow:0 22px 50px -20px rgba(0,0,0,.6);
  --shadow-lg:0 36px 80px -28px rgba(0,0,0,.7);
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.45;
}

/* radius scale (tweakable) */
:root { --r:26px; }

/* ===== Aurora / mesh background ===== */
.bg-mesh { position:fixed; inset:-10% -10% -10% -10%; z-index:-3; filter:saturate(1.05); }
.bg-mesh .blob {
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.55;
  animation:drift 22s ease-in-out infinite;
  will-change:transform;
}
.bg-mesh .b1 { width:48vw; height:48vw; left:-10vw; top:-8vw; background:var(--coral); opacity:.42; }
.bg-mesh .b2 { width:42vw; height:42vw; right:-8vw; top:6vh; background:var(--sun); opacity:.5; animation-delay:-6s; }
.bg-mesh .b3 { width:50vw; height:50vw; left:8vw; bottom:-14vw; background:var(--ocean); opacity:.4; animation-delay:-12s; }
.bg-mesh .b4 { width:30vw; height:30vw; right:2vw; bottom:-6vw; background:var(--leaf); opacity:.3; animation-delay:-3s; }
.grain { position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.4;
  background-image:url("assets/grain.png"); background-size:128px 128px; }

@keyframes drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(4vw,3vh) scale(1.08); }
  66% { transform:translate(-3vw,2vh) scale(.95); }
}

/* ===== Floating tropical decor ===== */
.decor { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.decor .motif { position:absolute; opacity:.9; will-change:transform; animation:bob 9s ease-in-out infinite; }
.decor .m1 { top:7%;  left:5%;  width:120px; animation-duration:11s; }
.decor .m2 { top:14%; right:4%; width:96px;  animation-duration:8s; animation-delay:-2s; }
.decor .m3 { top:46%; left:2%;  width:86px;  animation-duration:13s; animation-delay:-4s; }
.decor .m4 { top:60%; right:3%; width:120px; animation-duration:10s; animation-delay:-1s; }
.decor .m5 { bottom:6%; left:8%; width:90px;  animation-duration:12s; animation-delay:-5s; }
.decor .m6 { bottom:12%; right:8%; width:74px; animation-duration:9s;  animation-delay:-3s; }
@keyframes bob {
  0%,100% { transform:translateY(0) rotate(var(--rot,0deg)); }
  50% { transform:translateY(-22px) rotate(calc(var(--rot,0deg) + 6deg)); }
}

/* ===== Layout column ===== */
.wrap { position:relative; max-width:540px; margin:0 auto; padding:34px 20px 60px; }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ===== Hero ===== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero { position:relative; margin-bottom:30px; }
.banner {
  position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:16/10; box-shadow:var(--shadow-lg);
  transform:rotate(-1.4deg);
  border:5px solid var(--paper);
}
.banner img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); }
.banner::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,30,36,.5), transparent 55%); }
.banner .flag { position:absolute; top:12px; right:12px; font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

.id-row { display:flex; justify-content:center; margin-top:-66px; position:relative; }
.logo-badge {
  width:132px; height:132px; flex:0 0 auto; border-radius:50%;
  border:5px solid var(--paper); box-shadow:var(--shadow-lg);
  background:#FBEFF6; object-fit:cover; display:block;
  animation:logo-float 6s ease-in-out infinite;
}
[data-motion="off"] .logo-badge { animation:none; }
@keyframes logo-float { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-7px) rotate(2deg); } }

.title-block { text-align:center; margin-top:14px; }
.script {
  font-family:'Caveat',cursive; font-weight:700;
  font-size:clamp(20px,5.4vw,25px); color:var(--ocean-deep);
  margin:8px 0 0; transform:rotate(-1.5deg);
}
.tags { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:14px; }
.tag {
  font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--paper-soft); backdrop-filter:blur(8px);
  border:1px solid var(--hair); padding:5px 11px; border-radius:999px;
}

/* ===== Social quick row ===== */
.socials { display:flex; justify-content:center; gap:12px; margin:22px 0 26px; }
.soc {
  width:48px; height:48px; display:grid; place-items:center; border-radius:16px; touch-action:manipulation;
  background:var(--paper); color:var(--ink); box-shadow:var(--shadow);
  border:1px solid var(--hair); transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.soc svg { width:21px; height:21px; }
.soc:hover { transform:translateY(-4px) scale(1.06); box-shadow:var(--shadow-lg); }
.soc.ig:hover { background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); color:#fff; }
.soc.wa:hover { background:#25D366; color:#fff; }
.soc.tk:hover { background:#000; color:#fff; }
.soc.mail:hover { background:var(--ocean); color:#fff; }

/* ===== Primary CTA ===== */
.cta {
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:19px 22px; border:0; cursor:pointer; touch-action:manipulation;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px;
  color:#fff; border-radius:var(--r);
  background:linear-gradient(118deg, var(--coral) 0%, var(--coral-deep) 42%, var(--sun-deep) 100%);
  box-shadow:0 16px 34px -12px color-mix(in srgb, var(--coral-deep) 70%, transparent);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.cta:hover { transform:translateY(-3px); box-shadow:0 22px 44px -14px color-mix(in srgb, var(--coral-deep) 80%, transparent); }
.cta:active { transform:translateY(0); }
.cta::before {
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%;
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:shimmer 3.6s ease-in-out infinite;
}
@keyframes shimmer { 0%{ left:-60%; } 55%,100%{ left:130%; } }

/* ===== Link cards ===== */
.links { display:flex; flex-direction:column; gap:14px; margin-top:16px; perspective:1000px; }
.card {
  --tx:0; --ty:0;
  position:relative; display:flex; align-items:center; gap:15px;
  padding:13px; border-radius:var(--r); text-decoration:none; color:var(--ink);
  background:var(--paper-soft); backdrop-filter:blur(12px);
  border:1px solid var(--hair); box-shadow:var(--shadow);
  font:inherit; text-align:left; width:100%; cursor:pointer; touch-action:manipulation;
  transform:rotateX(var(--ty)) rotateY(var(--tx)) translateZ(0);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  transform-style:preserve-3d; will-change:transform;
}
.card:hover { box-shadow:var(--shadow-lg); }
.card .thumb {
  width:64px; height:64px; flex:0 0 auto; border-radius:16px; object-fit:cover;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4); transform:translateZ(28px);
}
.card .body { flex:1; min-width:0; transform:translateZ(16px); }
.card .ttl { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16.5px; letter-spacing:-.01em; }
.card .sub { font-size:12.8px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .arrow {
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ocean) 14%, var(--paper)); color:var(--ocean-deep);
  transform:translateZ(20px); transition:transform .25s ease, background .25s ease, color .25s ease;
}
.card:hover .arrow { background:var(--coral); color:#fff; transform:translateZ(20px) translateX(4px); }
.card .accent { position:absolute; left:0; top:14px; bottom:14px; width:5px; border-radius:0 6px 6px 0; }
.card.c-beach .accent { background:var(--ocean); }
.card.c-night .accent { background:var(--coral); }
.card.c-kids  .accent { background:var(--sun-deep); }
.card.c-group .accent { background:var(--leaf); }
.card.c-mural .accent { background:var(--coral-deep); }
.card.c-loc   .accent { background:var(--ocean-deep); }
.card.c-fiesta .accent { background: oklch(0.65 0.22 310); }

/* card style variants */
[data-cards="solid"] .card { background:var(--paper); backdrop-filter:none; }
[data-cards="outline"] .card { background:transparent; backdrop-filter:none; box-shadow:none; border:1.5px solid var(--hair); }
[data-cards="outline"] .card:hover { box-shadow:var(--shadow); border-color:transparent; }

/* ===== Section heading ===== */
.sec-head { display:flex; align-items:center; gap:12px; margin:38px 4px 16px; }
.sec-head h2 { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px; margin:0; letter-spacing:-.01em; }
.sec-head .line { flex:1; height:2px; background:linear-gradient(90deg,var(--hair),transparent); border-radius:2px; }
.sec-head .kicker { font-family:'Caveat',cursive; font-size:20px; color:var(--coral-deep); }

/* ===== Gallery marquee ===== */
.gallery { position:relative; margin:0 -20px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.track { display:flex; gap:14px; width:max-content; padding:6px 20px; animation:scroll-x 38s linear infinite; }
.track.rev { animation-direction:reverse; animation-duration:46s; margin-top:14px; }
.gallery:hover .track { animation-play-state:paused; }
.track .ph { width:172px; height:128px; flex:0 0 auto; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:3px solid var(--paper); }
.track .ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.track .ph:hover img { transform:scale(1.08); }
@keyframes scroll-x { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ===== Booking note ===== */
.note {
  margin-top:30px; text-align:center; padding:22px;
  border-radius:var(--r); background:var(--paper-soft); backdrop-filter:blur(10px);
  border:1px dashed var(--hair);
}
.note .big { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px; }
.note .small { font-size:13.5px; color:var(--ink-soft); margin-top:6px; }
.note .wa-btn {
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  background:#25D366; color:#fff; text-decoration:none; font-weight:700; font-size:14.5px;
  padding:12px 20px; border-radius:999px; box-shadow:0 12px 26px -12px rgba(37,211,102,.8);
  transition:transform .2s ease;
}
.note .wa-btn:hover { transform:translateY(-3px); }

/* ===== Footer ===== */
.foot { text-align:center; margin-top:44px; color:var(--ink-soft); }
.foot .fm { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:18px; color:var(--ink); }
.foot .heart { margin-top:6px; font-size:13px; }
.foot .copy { font-size:11.5px; opacity:.7; margin-top:14px; }

/* ===== Motion off ===== */
[data-motion="off"] .bg-mesh .blob,
[data-motion="off"] .decor .motif,
[data-motion="off"] .cta::before { animation:none !important; }
[data-motion="off"] .card { transform:none !important; }
[data-gallery="off"] .track { animation:none !important; }

@media (prefers-reduced-motion: reduce) {
  .bg-mesh .blob, .decor .motif, .cta::before, .track { animation:none !important; }
  .reveal { transition:none; }
}

/* ===== Detail modal ===== */
.modal-root { position:fixed; inset:0; z-index:80; display:none; }
.modal-root.open { display:block; }
.modal-back {
  position:absolute; inset:0; background:rgba(12,28,33,.5);
  backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease;
}
.modal-root.open .modal-back { opacity:1; }
.modal-card {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%) translateY(40px);
  width:min(480px,100%); max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--paper); color:var(--ink);
  border-radius:30px 30px 0 0; padding:26px 24px 30px;
  box-shadow:var(--shadow-lg); opacity:0;
  transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  border:1px solid var(--hair); border-bottom:0;
}
.modal-root.open .modal-card { transform:translateX(-50%) translateY(0); opacity:1; }
.modal-card .grip { width:44px; height:5px; border-radius:3px; background:var(--hair); margin:0 auto 18px; }
.modal-close {
  position:absolute; top:16px; right:16px; width:38px; height:38px; border:0; cursor:pointer;
  border-radius:50%; background:color-mix(in srgb, var(--coral) 14%, var(--paper)); color:var(--coral-deep);
  display:grid; place-items:center; font-size:20px; transition:transform .2s ease, background .2s ease;
}
.modal-close:hover { transform:rotate(90deg); background:var(--coral); color:#fff; }
.modal-ic {
  width:62px; height:62px; border-radius:20px; display:grid; place-items:center;
  font-size:30px; margin-bottom:14px;
  background:color-mix(in srgb, var(--m-accent,var(--ocean)) 16%, var(--paper));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--m-accent,var(--ocean)) 30%, transparent);
}
.modal-card h3 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:26px; margin:0 0 10px; letter-spacing:-.02em; }
.modal-card .desc { color:var(--ink-soft); font-size:15px; line-height:1.55; margin:0 0 18px; }
.price-badge {
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--coral) 14%, var(--paper));
  border-radius:18px; padding:16px 20px; margin-bottom:18px;
}
.price-badge .unit { font-weight:700; font-size:14px; color:var(--ink); }
.price-badge .amt { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:32px; color:var(--coral-deep); }
.price-badge.quote .amt { font-size:20px; }
.inc { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; }
.inc li { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; }
.inc li::before { content:"✓"; color:var(--leaf); font-weight:800; font-size:16px; }
.m-note { font-size:13.5px; font-weight:600; color:var(--sun-deep); margin:0 0 20px; line-height:1.5; }
.m-note.info { color:var(--coral-deep); }
.wa-btn.full { display:flex; width:100%; justify-content:center; margin-top:0; }

/* ===== Contact ===== */
.contact { margin-top:18px; }
.field { margin-bottom:14px; }
.field label { display:block; font-weight:700; font-size:13.5px; margin-bottom:7px; }
.field input, .field select, .field textarea {
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--hair); border-radius:14px;
  padding:13px 15px; outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize:vertical; min-height:104px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--coral); box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent);
}
.field select { appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235C6B72' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; }
.send-btn {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer; touch-action:manipulation;
  background:#25D366; color:#fff; border:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:16px;
  padding:16px; border-radius:16px; box-shadow:0 14px 30px -12px rgba(37,211,102,.8);
  transition:transform .2s ease;
}
.send-btn:hover { transform:translateY(-3px); }

@media (max-width:430px) {
  .decor .m1,.decor .m3,.decor .m5 { left:-4%; }
  .decor .m2,.decor .m4,.decor .m6 { right:-4%; }
  .track .ph { width:148px; height:112px; }
}

@media (min-width:560px){
  .modal-card { bottom:auto; top:50%; transform:translate(-50%,-46%); border-radius:30px; border-bottom:1px solid var(--hair); }
  .modal-root.open .modal-card { transform:translate(-50%,-50%); }
  .modal-card .grip { display:none; }
}