:root{
  --vino:#7F1B46; --vino-hondo:#5E1233; --rosa:#D3ADB6; --uva:#CBCF98; --hoja:#586B39; --crema:#F5F7D5; --negro:#000;
  --bg:#FFFFFF; --bg-alt:#F5F7D5; --ink:#1d1216; --ink-soft:#4a3b40; --line:#e7dde0;
  --accent:var(--vino); --on-accent:#fff; --chip:#f3e8eb; --chip-ink:#5E1233;
  --display:'Zen Loop', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --body:'Figtree', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1a0d13; --bg-alt:#24121a; --ink:#f5f0f2; --ink-soft:#cdbfc4; --line:#3b2530;
    --accent:#D3ADB6; --on-accent:#3a0b20; --chip:#331a25; --chip-ink:#ecd3da;
  }
}
:root[data-theme="dark"]{
  --bg:#1a0d13; --bg-alt:#24121a; --ink:#f5f0f2; --ink-soft:#cdbfc4; --line:#3b2530;
  --accent:#D3ADB6; --on-accent:#3a0b20; --chip:#331a25; --chip-ink:#ecd3da;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--uva); outline-offset:3px; border-radius:6px}
.wrap{width:min(1160px, 100% - 40px); margin-inline:auto}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--vino); color:#fff}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-size:30px; letter-spacing:.04em; line-height:1}
.brand img{width:40px; height:auto; aspect-ratio:632/700}
.nav{display:flex; align-items:center; gap:28px; font-size:15px}
.nav a{text-decoration:none; opacity:.9}
.nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; border:0; font:600 16px/1 var(--body); text-decoration:none; cursor:pointer; transition:transform .15s ease, background-color .15s ease}
.btn svg{width:20px; height:20px; flex:none}
.btn-wa{background:var(--uva); color:#23290f}
.btn-wa:hover{background:#dde0ad; transform:translateY(-1px)}
.btn-line{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn-line:hover{background:rgba(255,255,255,.1)}
.top .btn{min-height:40px; padding:0 18px; font-size:14px}
@media (max-width:760px){ .nav a:not(.btn){display:none} .top .btn{display:none} .brand span{font-size:26px} }

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--vino); color:#fff}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding:56px 0 96px}
.hero .kicker{font-family:var(--body); font-weight:500; font-size:16px; line-height:1.4; color:#f3d9e2; margin:0 0 14px; max-width:40ch}
.hero .tagline{font-family:var(--display); font-weight:400; font-size:clamp(56px, 8.4vw, 112px); line-height:.92; letter-spacing:.01em; margin:0 0 24px}
.hero .tagline .brandname{display:block; letter-spacing:.03em}
.hero .tagline .slogan{display:block; margin-top:18px; font-size:clamp(28px, 3.3vw, 44px); line-height:1.1; letter-spacing:.02em; color:#f3d9e2}
.hero p.lead{font-size:19px; max-width:34ch; margin:0 0 32px; color:#f3e4e9}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero .zone{margin-top:28px; font-size:15px; color:#e7cdd6; display:flex; align-items:center; gap:8px}
.hero .zone svg{width:18px; height:18px}
.hero-logo{justify-self:center; width:min(440px, 100%); height:auto; filter:drop-shadow(0 18px 40px rgba(40,4,20,.35))}
.vine{position:absolute; inset:0; z-index:1; pointer-events:none}
.vine circle{transform-box:fill-box; transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .vine .b{animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both}
  .hero-logo{animation:settle 1.2s cubic-bezier(.2,.8,.2,1) .15s both}
}
@keyframes rise{from{opacity:0; transform:translateY(40px) scale(.6)} to{opacity:1; transform:none}}
@keyframes settle{from{opacity:0; transform:translateY(16px) rotate(-6deg)} to{opacity:1; transform:none}}
.hero-edge{display:block; width:100%; height:48px; color:var(--bg); position:absolute; bottom:-1px; left:0; z-index:3}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; padding:40px 0 88px; gap:24px; text-align:left}
  .hero-logo{grid-row:1; width:132px; justify-self:start}
  .hero .wrap{padding:24px 0 80px; gap:16px}
  .hero p.lead{font-size:17px; margin-bottom:24px}
  .hero .ctas .btn{flex:1 1 100%}
}

/* Section heads */
.sec{padding:88px 0}
.sec-head{max-width:620px; margin-bottom:48px}
.sec-head h2{font-family:var(--display); font-weight:400; font-size:clamp(44px, 6vw, 68px); line-height:1; margin:0 0 14px; color:var(--accent)}
.sec-head p{margin:0; color:var(--ink-soft); font-size:18px}

/* Package jump */
.jump{display:flex; gap:10px; overflow-x:auto; margin:-16px 0 48px; padding:4px 2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; font-weight:500; font-size:15px; color:var(--ink)}
.jump a:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:760px){ .jump{margin-inline:-20px; padding-inline:20px} }
/* Packages */
.pkgs{display:flex; flex-direction:column; gap:72px}
.pkg{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.pkg:nth-child(even) .pkg-art{order:2}
.pkg-art{aspect-ratio:4/5; border-radius:28px; overflow:hidden; position:relative; background:var(--bg-alt); max-width:480px; width:100%; justify-self:center}
.pkg-art img{width:100%; height:100%; object-fit:cover}
.pkg-art .ph{position:absolute; left:16px; bottom:14px; font-size:12.5px; color:rgba(0,0,0,.55); background:rgba(255,255,255,.7); padding:4px 10px; border-radius:999px}
.pkg h2,.pkg h3{font-family:var(--display); font-weight:400; font-size:clamp(40px, 4.6vw, 56px); line-height:1; margin:0 0 16px}
.pkg p{margin:0 0 18px; max-width:52ch; color:var(--ink-soft)}
.pkg .quote{font-style:italic; color:var(--ink)}
.pkg ul.feat{margin:0 0 20px; padding:0; list-style:none; display:grid; gap:8px}
.pkg ul.feat li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft)}
.pkg ul.feat li::before{content:""; flex:none; width:10px; height:10px; margin-top:8px; border-radius:50%; background:var(--rosa)}
.pkg ul.feat li:nth-child(2)::before{background:var(--uva)}
.ideal{margin:0 0 26px}
.ideal b{display:block; font-size:14px; font-weight:600; margin-bottom:10px; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none}
.chips li{background:var(--chip); color:var(--chip-ink); font-size:14px; padding:6px 14px; border-radius:999px}
.btn-quote{background:var(--accent); color:var(--on-accent)}
.btn-quote:hover{filter:brightness(1.08); transform:translateY(-1px)}
@media (max-width:860px){
  .pkg{grid-template-columns:1fr; gap:24px}
  .pkg:nth-child(even) .pkg-art{order:0}
  .pkgs{gap:64px}
}

/* Featured packages (home) */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.card{display:flex; flex-direction:column}
.card .photo{display:block; aspect-ratio:4/5; border-radius:24px; overflow:hidden; background:var(--bg-alt)}
.card .photo img{width:100%; height:100%; object-fit:cover}
.card h3{font-family:var(--display); font-weight:400; font-size:38px; line-height:1; margin:20px 0 8px}
.card h3 a{text-decoration:none}
.card p{margin:0 0 20px; color:var(--ink-soft)}
.card .acts{margin-top:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.link{display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--accent); text-underline-offset:5px}
.all{display:flex; justify-content:center; margin-top:48px}
.btn-outline{background:transparent; color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent)}
.btn-outline:hover{background:var(--chip)}
@media (max-width:860px){
  .feat-grid{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-20px; padding:0 20px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .feat-grid::-webkit-scrollbar{display:none}
  .card{flex:0 0 80%; scroll-snap-align:start; scroll-margin-left:20px}
  .card h3{font-size:34px}
  .all{margin-top:28px}
  .all .btn{width:100%}
}
/* Page header (paquetes) */
.phead{background:var(--vino); color:#fff; position:relative; padding:40px 0 80px}
.crumbs{margin:0 0 18px; padding:0; list-style:none; display:flex; gap:8px; font-size:14.5px; color:#f3d9e2}
.crumbs a{color:#fff; text-underline-offset:4px}
.crumbs li+li::before{content:"/"; margin-right:8px; opacity:.6}
.phead h1{font-family:var(--display); font-weight:400; font-size:clamp(48px, 7vw, 88px); line-height:.95; margin:0 0 16px; max-width:16ch}
.phead p{margin:0; max-width:52ch; color:#f3e4e9; font-size:18px}
.pkgpage{padding-top:56px}
.pkgpage .jump{margin:0 0 48px}
[hidden]{display:none!important}
.search{position:relative; max-width:640px; margin:0 0 10px}
.search > svg{position:absolute; left:18px; top:50%; width:22px; height:22px; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none}
.search input{width:100%; min-height:56px; padding:0 56px 0 52px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font:400 16px var(--body); -webkit-appearance:none; appearance:none}
.search input::placeholder{color:var(--ink-soft); opacity:.85}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--chip)}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink-soft); cursor:pointer; display:grid; place-items:center}
.search .clear:hover{background:var(--chip)}
.search .clear svg{width:20px; height:20px}
.results{min-height:1.6em; margin:0 0 20px; font-size:15px; color:var(--ink-soft)}
.empty{max-width:560px; padding:24px 0 40px}
.empty h2{font-family:var(--display); font-weight:400; font-size:44px; line-height:1; margin:0 0 12px; color:var(--accent)}
.empty p{margin:0 0 24px; color:var(--ink-soft)}

.bar a[aria-current="page"]{color:var(--accent); font-weight:600}
/* How it works */
.how{background:var(--bg-alt)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:0; margin:0; list-style:none; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding-top:76px}
.steps li::before{content:counter(s); position:absolute; top:0; left:0; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:40px; line-height:1; color:#3a0b20; background:var(--rosa)}
.steps li:nth-child(2)::before{background:var(--uva); color:#23290f}
.steps li:nth-child(3)::before{background:var(--vino); color:#fff}
.steps h3{margin:0 0 6px; font-size:19px; font-weight:600}
.steps p{margin:0; color:var(--ink-soft); max-width:32ch}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:28px} }

/* Coverage */
.cov .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.cov .sec-head{margin:0}
.zones{display:grid; gap:16px}
.zone-card{border:1.5px solid var(--line); border-radius:22px; padding:24px 26px; display:flex; gap:18px; align-items:center}
.zone-card .dot{flex:none; width:52px; height:52px; border-radius:50%; background:var(--rosa)}
.zone-card:nth-child(2) .dot{background:var(--uva)}
.zone-card h3{margin:0; font-size:20px; font-weight:600}
.zone-card p{margin:2px 0 0; color:var(--ink-soft); font-size:15.5px}
@media (max-width:860px){ .cov .wrap{grid-template-columns:1fr} }

/* FAQ */
.faq{padding-top:24px}
.qa{max-width:760px; border-top:1.5px solid var(--line)}
.qa details{border-bottom:1.5px solid var(--line)}
.qa summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:64px; padding:14px 0; font-weight:600; font-size:18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--chip); color:var(--chip-ink); font-size:22px; font-weight:400; transition:transform .2s ease}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{margin:0 0 20px; color:var(--ink-soft); max-width:60ch}
/* Final CTA */
.final{background:var(--vino); color:#fff; text-align:center; padding:88px 0; position:relative; overflow:hidden}
.final h2{font-family:var(--display); font-weight:400; font-size:clamp(48px, 7vw, 84px); line-height:.95; margin:0 auto 18px; max-width:14ch}
.final p{margin:0 auto 32px; max-width:44ch; color:#f3e4e9}
.final .btn{position:relative; z-index:2}

footer{background:var(--vino-hondo); color:#e9d3db; font-size:14.5px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:28px 0}
footer .contact{display:flex; gap:20px; flex-wrap:wrap}
footer .contact a{color:#fff; text-underline-offset:4px}
footer .brand{font-size:26px; color:#fff}

/* Mobile bottom bar */
.bar{display:none}
@media (max-width:760px){
  .bar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(4,1fr); background:var(--bg); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -6px 20px rgba(60,10,30,.08)}
  .bar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:62px; font-size:12px; font-weight:500; text-decoration:none; color:var(--ink-soft)}
  .bar a svg{width:24px; height:24px}
  .bar .bar-wa{color:#fff; background:#1f9d55; font-weight:600}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Retrasos de la animación de portada */
.vine .dl05{animation-delay:.05s}
.vine .dl1{animation-delay:.1s}
.vine .dl12{animation-delay:.12s}
.vine .dl18{animation-delay:.18s}
.vine .dl2{animation-delay:.2s}
.vine .dl26{animation-delay:.26s}
.vine .dl3{animation-delay:.3s}
.vine .dl34{animation-delay:.34s}

/* Página 404 */
.nf{min-height:62vh; display:grid; align-items:center}
.nf h1{font-family:var(--display); font-weight:400; font-size:clamp(48px, 7vw, 84px); line-height:.95; margin:0 auto 18px; max-width:14ch}
.nf .nf-acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
