@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

:root { --green:#075f2c; --green2:#0b7a3b; --navy:#0f2530; --lime:#9bec69; --cream:#f5f5f0; --line:#dedfd9; --text:#172228; --muted:#697277; --shadow:0 16px 45px rgba(15,37,48,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:#fff; font-family:"Be Vietnam Pro",Arial,sans-serif; }
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link { position:fixed; top:-80px; left:16px; z-index:100; padding:12px 18px; background:white; border-radius:10px; box-shadow:var(--shadow); }
.skip-link:focus { top:16px; }

.announcement { height:34px; display:flex; justify-content:center; align-items:center; gap:18px; color:#fff; background:var(--navy); font-size:.72rem; font-weight:600; }
.announcement a { color:var(--lime); text-decoration:underline; }
.site-header { height:98px; position:relative; z-index:20; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; padding:0 4vw; background:#fff; border-bottom:1px solid #ecece8; }
.brand { display:flex; align-items:center; font-size:1.42rem; font-weight:900; letter-spacing:.02em; white-space:nowrap; }
.site-header .brand .brand-logo { height:74px; width:auto; display:block; }
.brand span { margin-right:5px; color:var(--green); font-size:1.8rem; font-style:italic; letter-spacing:-.08em; }
.main-nav { display:flex; justify-content:center; gap:clamp(18px,2.5vw,38px); font-size:.82rem; font-weight:700; }
.main-nav a { position:relative; padding:28px 0; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:19px; width:0; height:3px; background:var(--green); transition:.2s; }
.main-nav a:hover::after { width:100%; }
.header-cta { padding:12px 19px; color:#fff; background:var(--green); border-radius:7px; font-size:.78rem; font-weight:800; }
.menu-toggle { display:none; border:0; background:transparent; }

.hero { position:relative; height:610px; display:grid; place-items:center; overflow:hidden; background:var(--navy); }
.hero > img,.hero-overlay { position:absolute; inset:0; height:100%; object-fit:cover; }
.hero > img { object-position:center 46%; }
.hero-overlay { background:linear-gradient(0deg,rgba(9,29,29,.66),rgba(9,29,29,.12)),linear-gradient(90deg,rgba(7,38,31,.18),rgba(7,38,31,.06)); }
.hero-copy { position:relative; z-index:2; max-width:920px; padding:30px; color:#fff; text-align:center; text-shadow:0 3px 18px rgba(0,0,0,.28); }
.kicker { margin:0 0 12px; color:var(--green); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.kicker-light { color:var(--lime); }
.hero h1 { margin:0 0 18px; font-size:clamp(3.2rem,6vw,6.4rem); line-height:.94; letter-spacing:-.07em; }
.hero h1 span { color:var(--lime); }
.hero-copy > p:last-child { margin:0; font-size:clamp(1rem,1.4vw,1.22rem); font-weight:600; }

.search-shell { position:relative; z-index:5; width:min(1180px,92vw); margin:-72px auto 0; padding:25px 27px 20px; background:#fff; border-radius:14px; box-shadow:var(--shadow); }
.search-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; }
.search-title h2 { margin:0; font-size:1.25rem; letter-spacing:-.03em; }
.search-title span { color:var(--muted); font-size:.72rem; }
.search-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:0; border:1px solid #d8dad4; border-radius:8px; overflow:hidden; }
.search-grid label { padding:10px 17px 8px; border-right:1px solid #d8dad4; background:#fff; }
.search-grid label span { display:block; margin-bottom:3px; font-size:.67rem; font-weight:800; }
.search-grid select { width:100%; border:0; outline:0; color:var(--text); background:#fff; font-size:.86rem; }
.search-button { min-width:135px; border:0; color:#fff; background:var(--green); font-weight:800; }
.search-button:hover { background:var(--green2); }
.filter-status { min-height:18px; margin:10px 0 0; color:var(--green); font-size:.75rem; font-weight:600; }

.trust-strip { width:min(1180px,92vw); margin:40px auto 0; display:grid; grid-template-columns:repeat(4,1fr); }
.trust-strip div { padding:20px 24px; text-align:center; border-right:1px solid var(--line); }
.trust-strip div:last-child { border:0; }
.trust-strip svg { display:block; width:28px; height:28px; margin:0 auto 12px; color:var(--green); }
.trust-strip strong,.trust-strip span { display:block; }
.trust-strip strong { color:var(--navy); font-size:.85rem; }
.trust-strip span { margin-top:5px; color:var(--muted); font-size:.72rem; line-height:1.45; }

.section { width:min(1180px,90vw); margin:0 auto; padding:100px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:34px; }
.section-head h2,.why-section h2,.community-banner h2,.faq h2,.final-cta h2 { margin:0; color:var(--navy); font-size:clamp(2.1rem,4vw,4.1rem); line-height:1.03; letter-spacing:-.06em; }
.section-head > a { flex:none; color:var(--green); font-size:.82rem; font-weight:800; }
.section-head > p { max-width:420px; margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.trip-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.trip-card { flex:1 1 240px; overflow:hidden; border:1px solid #e0e2dc; border-radius:12px; background:#fff; transition:transform .22s,box-shadow .22s,opacity .3s,filter .3s; }
.trip-card:hover { transform:translateY(-4px); box-shadow:0 15px 30px rgba(15,37,48,.1); }
.trip-card[hidden] { display:none; }
.trip-photo { position:relative; height:280px; overflow:hidden; }
.trip-photo img { height:100%; object-fit:cover; transition:transform .35s; }
.trip-card:hover img { transform:scale(1.035); }
.pill { position:absolute; left:12px; top:12px; padding:6px 9px; color:#fff; background:var(--green); border-radius:5px; font-size:.62rem; font-weight:800; text-transform:uppercase; }
.trip-photo button { position:absolute; top:10px; right:10px; width:35px; height:35px; border:0; border-radius:50%; color:var(--navy); background:rgba(255,255,255,.92); font-size:1.25rem; }
.trip-body { padding:17px; }
.trip-body small { color:var(--muted); font-size:.65rem; font-weight:700; text-transform:uppercase; }
.trip-body h3 { margin:7px 0; color:var(--navy); font-size:1.06rem; line-height:1.25; }
.trip-body > p { min-height:46px; margin:0 0 16px; color:var(--muted); font-size:.78rem; line-height:1.5; }
.trip-meta { display:flex; justify-content:space-between; gap:8px; padding-top:13px; border-top:1px solid #ecece8; font-size:.67rem; }
.trip-meta span { color:var(--muted); }
.trip-meta a { color:var(--green); font-weight:800; }

.why-section { padding:90px 4vw 100px; color:#fff; background:var(--navy); }
.centered { padding:0 0 38px; text-align:center; }
.why-section h2 { max-width:850px; margin:auto; color:#fff; }
.why-grid { width:min(1320px,100%); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.why-grid article { position:relative; height:500px; overflow:hidden; border-radius:9px; }
.why-grid img { height:100%; object-fit:cover; filter:saturate(.9); }
.why-grid article::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,28,31,.9),transparent 65%); }
.why-grid article div { position:absolute; z-index:2; left:22px; right:22px; bottom:24px; }
.why-grid span { display:block; margin-bottom:10px; color:var(--lime); font-size:.7rem; font-weight:900; }
.why-grid h3 { margin:0; font-size:1.38rem; line-height:1.15; letter-spacing:-.04em; }

.collections { overflow:hidden; }
.collection-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.collection-grid a { position:relative; height:340px; overflow:hidden; border-radius:10px; }
.collection-grid img { height:100%; object-fit:cover; }
.collection-grid a::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,28,29,.72),transparent 62%); }
.collection-grid span { position:absolute; z-index:2; left:18px; bottom:19px; color:#fff; font-size:1.15rem; font-weight:800; }

.moments-section { padding:10px 0 110px; overflow:hidden; background:#f2f3ee; }
.moments-head { display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:end; gap:42px; padding:90px 0 38px; }
.moments-head .kicker { align-self:start; }
.moments-head h2 { margin:0; color:var(--navy); font-size:clamp(2.5rem,5vw,5rem); line-height:.96; letter-spacing:-.065em; }
.moments-head > p:last-child { margin:0; color:var(--muted); font-size:.88rem; line-height:1.7; }
.moments-grid { width:min(1440px,96vw); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:10px; }
.moments-grid figure { position:relative; margin:0; overflow:hidden; border-radius:8px; background:var(--navy); }
.moments-grid .moment-wide { grid-column:span 2; }
.moments-grid .moment-tall { grid-row:span 2; }
.moments-grid img { height:100%; object-fit:cover; transition:transform .4s ease; }
.moments-grid figure:hover img { transform:scale(1.035); }
.moments-grid figure::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,26,31,.78),transparent 62%); }
.moments-grid figcaption { position:absolute; z-index:2; left:18px; right:18px; bottom:17px; color:#fff; }
.moments-grid figcaption span,.moments-grid figcaption b { display:block; }
.moments-grid figcaption span { margin-bottom:5px; color:var(--lime); font-size:.62rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.moments-grid figcaption b { font-size:1rem; }

.makers { padding-top:30px; }
.maker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.maker-image { height:390px; overflow:hidden; border-radius:10px; }
.maker-image img { height:100%; object-fit:cover; }
.maker-grid article:nth-child(2) .maker-image img { object-position:center 34%; }
.maker-grid h3 { margin:17px 0 7px; color:var(--navy); font-size:1.3rem; }
.maker-grid p { margin:0; color:var(--muted); font-size:.84rem; line-height:1.6; }

.community-banner { min-height:620px; display:grid; grid-template-columns:1fr 1fr; color:#fff; background:var(--green); }
.community-banner > img { height:100%; object-fit:cover; }
.community-banner > div { padding:8vw; align-self:center; }
.community-banner h2 { color:#fff; }
.community-banner div > p:not(.kicker) { margin:24px 0; color:rgba(255,255,255,.82); line-height:1.7; }
.white-button { display:inline-flex; padding:13px 20px; color:var(--green); background:#fff; border-radius:7px; font-size:.8rem; font-weight:800; }

.reassurance { padding-bottom:80px; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.benefit-grid article { min-height:235px; padding:30px 25px; border-right:1px solid var(--line); background:var(--cream); }
.benefit-grid article:last-child { border:0; }
.benefit-grid span { color:var(--green); font-size:.7rem; font-weight:900; }
.benefit-grid h3 { margin:60px 0 9px; color:var(--navy); font-size:1rem; }
.benefit-grid p { margin:0; color:var(--muted); font-size:.77rem; line-height:1.55; }

.faq { display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; }
.faq > div:first-child > p:last-child { color:var(--muted); line-height:1.6; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { display:flex; justify-content:space-between; gap:20px; padding:23px 0; color:var(--navy); font-size:.9rem; font-weight:800; list-style:none; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
summary span { color:var(--green); font-size:1.3rem; transition:.2s; }
details[open] summary span { transform:rotate(45deg); }
details p { margin:0; padding:0 45px 23px 0; color:var(--muted); font-size:.82rem; line-height:1.65; }

.final-cta { position:relative; min-height:650px; display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:7vw; overflow:hidden; padding:90px 8vw; color:#fff; background:var(--navy); }
.final-cta > img { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.33; }
.final-cta::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,37,48,.95),rgba(15,37,48,.72)); }
.final-cta > div,.final-cta form { position:relative; z-index:2; }
.final-cta h2 { color:#fff; }
.final-cta form { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:25px; background:#fff; border-radius:12px; box-shadow:var(--shadow); }
.final-cta label span { display:block; margin:0 0 5px 3px; color:var(--navy); font-size:.66rem; font-weight:800; }
.final-cta input,.final-cta select { width:100%; height:49px; padding:0 13px; border:1px solid #dfe1dc; border-radius:7px; outline:0; background:#fafaf8; }
.final-cta input:focus,.final-cta select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(7,95,44,.1); }
.final-cta form button { min-height:49px; border:0; border-radius:7px; color:#fff; background:var(--green); font-weight:800; }
#planner-status { grid-column:1/-1; min-height:20px; margin:0; color:var(--green); font-size:.7rem; }

footer { padding:55px 5vw 28px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; color:#fff; background:#091a21; }
.footer-brand span { color:var(--lime); }
.footer-logo { height:64px; width:auto; display:block; }
footer > p { margin:0; color:rgba(255,255,255,.55); font-size:.78rem; }
footer nav { display:flex; align-items:center; gap:22px; font-size:.72rem; }
footer nav .footer-login { opacity:.7; padding:4px 12px; border:1px solid rgba(255,255,255,.25); border-radius:7px; font-weight:700; }
footer nav .footer-login:hover { opacity:1; color:var(--lime); border-color:var(--lime); }
footer small { grid-column:1/-1; padding-top:25px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.42); font-size:.66rem; }

@media (max-width:1000px) {
  .site-header { grid-template-columns:auto auto; }
  .menu-toggle { display:flex; flex-direction:column; gap:4px; width:42px; height:42px; align-items:center; justify-content:center; justify-self:end; }
  .menu-toggle i { width:19px; height:2px; background:var(--navy); }
  .main-nav { position:absolute; top:70px; left:20px; right:20px; display:none; flex-direction:column; gap:0; padding:12px; background:#fff; border-radius:10px; box-shadow:var(--shadow); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:12px; }
  .main-nav a::after { display:none; }
  .header-cta { display:none; }
  .search-grid { grid-template-columns:1fr 1fr; }
  .search-grid label:nth-child(2) { border-right:0; }
  .search-grid label:nth-child(3) { border-top:1px solid var(--line); }
  .search-button { min-height:60px; }
  .trip-grid,.benefit-grid { grid-template-columns:repeat(2,1fr); }
  .trust-strip { grid-template-columns:repeat(2,1fr); }
  .trust-strip div:nth-child(2) { border-right:0; }
  .trust-strip div:nth-child(1),.trust-strip div:nth-child(2) { border-bottom:1px solid var(--line); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .collection-grid { grid-template-columns:repeat(3,1fr); }
  .collection-grid a { height:300px; }
  .moments-head { grid-template-columns:1fr 1.5fr; }
  .moments-head > p:last-child { grid-column:2; }
  .moments-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:700px) {
  .announcement { padding:0 12px; font-size:.62rem; text-align:center; }
  .site-header { height:80px; padding:0 20px; }
  .site-header .brand .brand-logo { height:56px; }
  .hero { height:570px; }
  .hero > img { object-position:58% center; }
  .hero-copy { padding-bottom:85px; }
  .hero h1 { font-size:clamp(2.8rem,13vw,4.5rem); }
  .search-shell { margin-top:-65px; padding:19px 16px 15px; }
  .search-title { align-items:flex-start; flex-direction:column; gap:4px; }
  .search-grid { grid-template-columns:1fr; }
  .search-grid label { border-right:0; border-bottom:1px solid var(--line); }
  .trust-strip { grid-template-columns:1fr; }
  .trust-strip div { border-right:0; border-bottom:1px solid var(--line); }
  .section { padding:75px 0; }
  .section-head { align-items:flex-start; flex-direction:column; gap:16px; }
  .trip-grid,.why-grid,.maker-grid,.benefit-grid,.faq,.final-cta { grid-template-columns:1fr; }
  .trip-photo { height:360px; }
  .why-grid article { height:440px; }
  .collection-grid { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; }
  .collection-grid a { min-width:76vw; scroll-snap-align:start; }
  .moments-section { padding-bottom:75px; }
  .moments-head { display:block; padding:75px 0 28px; }
  .moments-head h2 { margin-bottom:18px; }
  .moments-grid { width:94vw; grid-template-columns:1fr 1fr; grid-auto-rows:190px; }
  .moments-grid .moment-wide { grid-column:span 2; }
  .moments-grid .moment-tall { grid-row:span 2; }
  .community-banner { grid-template-columns:1fr; }
  .community-banner > img { height:430px; }
  .community-banner > div { padding:70px 6vw; }
  .benefit-grid article { border-right:0; border-bottom:1px solid var(--line); }
  .final-cta { padding:80px 5vw; }
  .final-cta form { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; align-items:start; }
  footer nav { flex-wrap:wrap; }
  footer small { grid-column:1; }
}

/* ============================================================
   UX ENHANCEMENT LAYER — micro-interacciones y movimiento
   ============================================================ */
:root { --ease:cubic-bezier(.22,.61,.36,1); }

/* --- Header inteligente y pegajoso --- */
.site-header { position:sticky; top:0; transition:box-shadow .3s var(--ease), height .3s var(--ease), background .3s; }
.site-header.scrolled { height:80px; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); box-shadow:0 8px 30px rgba(15,37,48,.10); }
.site-header .brand .brand-logo { transition:height .3s var(--ease); }
.site-header.scrolled .brand .brand-logo { height:58px; }
.main-nav a::after { transition:width .28s var(--ease); }
.main-nav a.active::after { width:100%; }
.main-nav a.active { color:var(--green); }

/* --- Scroll reveal (solo cuando hay JS: clase .anim en <html>) --- */
.anim .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.anim .reveal.in { opacity:1; transform:none; }

/* --- Hero: Ken Burns + entrada del texto + indicador de scroll --- */
.hero > img { animation:kenburns 20s ease-out both; will-change:transform; }
@keyframes kenburns { from { transform:scale(1.14); } to { transform:scale(1); } }
.hero-copy .kicker { animation:heroUp .9s var(--ease) both; }
.hero-copy h1 { animation:heroUp .9s var(--ease) .08s both; }
.hero-copy > p:last-child { animation:heroUp .9s var(--ease) .16s both; }
@keyframes heroUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
.scroll-cue { position:absolute; z-index:3; left:50%; bottom:96px; width:40px; height:40px; display:grid; place-items:center; transform:translateX(-50%); color:#fff; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); animation:bob 1.8s ease-in-out infinite; transition:background .2s,border-color .2s; }
.scroll-cue:hover { background:rgba(255,255,255,.16); border-color:#fff; }
@keyframes bob { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(7px); } }

/* --- Botones con vida --- */
.header-cta,.white-button { transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .2s; }
.header-cta:hover,.white-button:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(7,95,44,.28); }
.search-button,.final-cta form button { transition:transform .16s var(--ease), background .2s, box-shadow .2s; }
.search-button:hover,.final-cta form button:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(7,95,44,.24); }
.section-head > a,.trip-meta a { transition:color .2s, letter-spacing .2s; }
.section-head > a:hover { letter-spacing:.02em; }
.trip-meta a:hover { color:var(--green2); }

/* --- Corazón "guardar": pop + color --- */
.trip-photo button { transition:transform .18s var(--ease), background .2s, color .2s, box-shadow .2s; }
.trip-photo button:hover { transform:scale(1.12); box-shadow:0 6px 16px rgba(15,37,48,.2); }
.trip-photo button.saved { color:#e5484d; }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.38); } 100% { transform:scale(1); } }
.trip-photo button.pop { animation:pop .42s var(--ease); }

/* --- Tarjetas y galería: pista de interacción --- */
.trip-card { transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.trip-card:hover { box-shadow:0 22px 44px rgba(15,37,48,.14); }
.collection-grid a,.why-grid article { transition:transform .35s var(--ease); }
.collection-grid a:hover { transform:translateY(-4px); }
.collection-grid img,.why-grid img { transition:transform .5s var(--ease); }
.collection-grid a:hover img { transform:scale(1.06); }
.moments-grid figure { cursor:zoom-in; }
.moments-grid figcaption b { transition:transform .25s var(--ease); }
.moments-grid figure:hover figcaption b { transform:translateX(4px); }

/* --- Filtrado: entrada escalonada de tarjetas visibles --- */
@keyframes cardIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.trip-card.show-anim { animation:cardIn .45s var(--ease) both; }
.filter-status { transition:opacity .2s; }

/* --- Lightbox de la galería --- */
.lightbox { position:fixed; inset:0; z-index:200; display:none; grid-template-rows:1fr auto; place-items:center; padding:4vh 4vw 3vh; background:rgba(8,20,25,.92); backdrop-filter:blur(8px); opacity:0; transition:opacity .3s var(--ease); }
.lightbox.open { display:grid; opacity:1; }
.lightbox figure { position:relative; margin:0; display:grid; place-items:center; }
.lightbox img { max-width:92vw; max-height:80vh; width:auto; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.55); animation:lbZoom .35s var(--ease) both; }
@keyframes lbZoom { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.lightbox figcaption { margin-top:16px; text-align:center; color:#fff; }
.lightbox figcaption span { display:block; margin-bottom:4px; color:var(--lime); font-size:.66rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.lightbox figcaption b { font-size:1.05rem; font-weight:700; }
.lb-btn { position:absolute; z-index:2; width:52px; height:52px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.12); font-size:1.5rem; line-height:1; transition:background .2s, transform .2s; }
.lb-btn:hover { background:rgba(255,255,255,.26); transform:scale(1.06); }
.lb-close { top:18px; right:20px; }
.lb-prev { left:14px; top:50%; transform:translateY(-50%); }
.lb-next { right:14px; top:50%; transform:translateY(-50%); }
.lb-prev:hover { transform:translateY(-50%) scale(1.06); }
.lb-next:hover { transform:translateY(-50%) scale(1.06); }
.lb-count { position:absolute; top:26px; left:24px; color:rgba(255,255,255,.7); font-size:.72rem; font-weight:700; letter-spacing:.05em; }

/* --- Botón volver arriba --- */
.to-top { position:fixed; right:22px; bottom:90px; z-index:150; width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--green); font-size:1.2rem; box-shadow:0 12px 26px rgba(7,95,44,.36); opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .28s var(--ease), transform .28s var(--ease), background .2s; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:var(--green2); transform:translateY(-2px); }

/* --- Progreso de lectura (barra superior finísima) --- */
.read-bar { position:fixed; top:0; left:0; z-index:60; height:3px; width:0; background:linear-gradient(90deg,var(--green),var(--lime)); transition:width .1s linear; }

/* --- Foco accesible visible --- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--lime); outline-offset:3px; border-radius:5px; }

/* --- Cinta animada de categorías (movimiento) --- */
.marquee { overflow:hidden; background:var(--navy); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.marquee-track { display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee span { display:inline-flex; align-items:center; padding:15px 26px; color:#fff; font-size:.82rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.marquee span::after { content:"✦"; margin-left:26px; color:var(--lime); font-size:.62rem; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* --- Botón flotante de WhatsApp --- */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:160; width:56px; height:56px; display:grid; place-items:center; color:#fff; background:#25D366; border-radius:50%; box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .2s var(--ease), box-shadow .2s; }
.wa-float:hover { transform:scale(1.08); box-shadow:0 16px 36px rgba(37,211,102,.6); }
.wa-float svg { position:relative; z-index:2; }
.wa-float::before { content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:1; animation:wapulse 2.4s ease-out infinite; }
@keyframes wapulse { 0% { transform:scale(1); opacity:.55; } 70% { transform:scale(1.75); opacity:0; } 100% { opacity:0; } }

/* --- Globo verbal "HEY!" (iconografía de marca) --- */
.hey-bubble { display:inline-block; margin-bottom:16px; padding:7px 18px; background:var(--lime); color:var(--navy); border-radius:18px 18px 18px 4px; font-weight:900; font-size:.82rem; letter-spacing:.06em; transform:rotate(-3deg); box-shadow:0 8px 20px rgba(0,0,0,.18); }

@media (max-width:700px) {
  .scroll-cue { bottom:104px; }
  .lb-prev,.lb-next { width:44px; height:44px; }
  .wa-float { right:16px; bottom:16px; width:52px; height:52px; }
  .to-top { right:16px; bottom:80px; }
  .marquee span { padding:13px 18px; font-size:.72rem; }
}

/* --- Navegación precisa: la sección no queda tapada por el header pegajoso --- */
#inicio,#explorador,#experiencias,#colecciones,#como-funciona,#comunidad,#preguntas,#plan { scroll-margin-top:88px; }

/* --- Tarjetas: flecha que se desliza al pasar el cursor (más vivo) --- */
.trip-meta a::after { content:" →"; display:inline-block; transition:transform .22s var(--ease); }
.trip-card:hover .trip-meta a::after { transform:translateX(4px); }
.section-head > a::after { content:""; }

/* --- Blindaje anti-huecos: los items de rejilla nunca se ocultan por animación --- */
.anim .trip-card,.anim .collection-grid a,.anim .why-grid article,.anim .moments-grid figure,.anim .maker-grid article,.anim .benefit-grid article { transform:none; }
.anim .collection-grid a,.anim .why-grid article,.anim .moments-grid figure,.anim .maker-grid article,.anim .benefit-grid article { opacity:1!important; }

/* --- Filtro por destaque: sin ocultar tarjetas, sin huecos --- */
.trip-card.dim { opacity:.38; filter:grayscale(.55); }
.trip-card.match { box-shadow:0 0 0 2px var(--green), 0 22px 44px rgba(15,37,48,.16); }
.trip-card.match .pill { background:var(--green2); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none!important; }
  .hero > img { animation:none; }
  .hero-copy .kicker,.hero-copy h1,.hero-copy > p:last-child { animation:none; }
  .scroll-cue { animation:none; }
  .anim .reveal { opacity:1!important; transform:none!important; }
  .trip-card.show-anim,.lightbox img { animation:none; }
  .marquee-track { animation:none; }
  .wa-float::before { animation:none; }
}