/* ============================================================
   DESIGN SYSTEM 2026 — Páginas de Tour · Hot Air Balloon Teotihuacán
   Mobile-first · glassmorphism · bento · aurora · marquee
   Paleta AMANECER ÁMBAR: carbón cálido #2a1607/#5a2f0c · ámbar #e07b1a · oro #c8851a
   Prefijo .t26-  ·  Se carga DESPUÉS de style.css
   ============================================================ */
:root{
  --t-ink:#2a1607; --t-ink2:#6b5640; --t-ink3:#7d6448;
  --t-cyan:#e07b1a; --t-cyan2:#f4b56a; --t-blue:#5a2f0c; --t-night:#2a1607;
  --t-orange:#c8851a; --t-orange2:#f0b24a;
  --t-cream:#fdf8f1; --t-cream2:#f6ead4; --t-line:#f3e6d2; --t-white:#fff;
  --t-glass:rgba(255,255,255,.62); --t-glass-brd:rgba(255,255,255,.7);
  --t-glass-dark:rgba(255,255,255,.07); --t-glass-dark-brd:rgba(255,255,255,.14);
  --t-rad:26px; --t-rad-lg:34px;
  /* Tipografía 2026: Manrope (geométrica-humanista, estilo Google Sans).
     Display y body comparten familia; la jerarquía la da el PESO (800 vs 400-500). */
  --t-fd:'Manrope',system-ui,-apple-system,sans-serif; --t-fb:'Manrope',system-ui,-apple-system,sans-serif; --t-fm:'Manrope',system-ui,sans-serif;
  --t-shadow:0 24px 60px rgba(42,22,7,.14); --t-shadow-lg:0 40px 90px rgba(42,22,7,.22);
  --t-ease:cubic-bezier(.16,1,.3,1);
}
.t26{font-family:var(--t-fb);color:var(--t-ink);overflow-x:hidden;}
.t26 ::selection{background:var(--t-cyan);color:#fff;}
.t26 .wrap{max-width:1240px;margin:0 auto;padding:0 22px;}
@media(min-width:768px){.t26 .wrap{padding:0 40px;}}

/* ===== Aurora mesh background (decorativo, animado) ===== */
.t26-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.t26-aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:t26float 18s ease-in-out infinite alternate;}
.t26-aurora span:nth-child(1){width:46vw;height:46vw;left:-12%;top:-10%;background:radial-gradient(circle,var(--t-cyan),transparent 65%);}
.t26-aurora span:nth-child(2){width:42vw;height:42vw;right:-10%;top:18%;background:radial-gradient(circle,var(--t-orange),transparent 65%);animation-delay:-6s;}
.t26-aurora span:nth-child(3){width:38vw;height:38vw;left:30%;bottom:-16%;background:radial-gradient(circle,var(--t-cyan2),transparent 65%);animation-delay:-11s;}
@keyframes t26float{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4%,-6%,0) scale(1.12)}}

/* ===== HERO full-screen ===== */
/* background-color OBLIGATORIO: el HTML no trae .t26-hero-img ni .t26-hero-veil, asi que
   con prefers-reduced-motion (video display:none) el H1 y el precio quedaban en blanco
   sobre la crema del body (1.06:1, ilegible). Como el fondo del elemento se pinta ANTES
   que los hijos con z-index negativo, el video lo tapa por completo en el caso normal. */
.t26-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;isolation:isolate;background-color:#2a1607;}
/* Velo reconstruido por CSS (sustituye al <div class="t26-hero-veil"> que borro el clon):
   z-index -1 lo deja ENCIMA del video (-2) y DEBAJO de .t26-hero-inner (1).
   PARADAS REFORZADAS: el h1 ocupa del 21% al 54% de la altura del hero (27%-46% en
   movil) y ahi el degradado original valia alpha .05-.36, o sea casi transparente.
   Solo sujetaba el titular cuando NO habia video (fondo #2a1607); con el video
   mostrando cielo claro el h1 blanco caia a 1.33:1 medido pixel a pixel.
   Ahora el alpha no baja de .48 en toda la banda del titular: peor caso posible
   (fotograma BLANCO) 3.39:1 para texto grande, y 8:1+ en la franja del precio. */
.t26-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(42,22,7,.50) 0%,rgba(42,22,7,.48) 15%,rgba(42,22,7,.56) 35%,rgba(42,22,7,.68) 58%,rgba(42,22,7,.86) 80%,rgba(42,22,7,.94) 100%);}
.t26-hero .t26-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;will-change:transform;}
/* Video de header (autoplay muted loop) — cubre la imagen de fondo; la imagen
   queda de fallback/póster. Bunny CDN. */
.t26-hero .t26-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
@media(prefers-reduced-motion:reduce){.t26-hero .t26-hero-video{display:none;}}
.t26-hero .t26-hero-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(42,22,7,.35) 0%,rgba(42,22,7,.05) 28%,rgba(42,22,7,.55) 70%,rgba(42,22,7,.92) 100%);}
.t26-hero-inner{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 22px 48px;z-index:1;}
@media(min-width:768px){.t26-hero-inner{padding:0 40px 70px;}}
.t26-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--t-fm);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:9px 16px;border-radius:999px;margin-bottom:20px;}
.t26-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:t26pulse 1.8s infinite;}
@keyframes t26pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 11px rgba(74,222,128,0)}}
.t26-hero h1{font-family:var(--t-fd);font-weight:800;font-size:clamp(42px,9vw,100px);line-height:.98;letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance;}
.t26-hero h1 em{font-style:normal;font-weight:800;color:var(--t-orange2);}
.t26-hero-lead{max-width:560px;font-size:clamp(15px,2.2vw,18px);line-height:1.6;color:rgba(255,255,255,.9);margin-bottom:26px;}
.t26-hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-bottom:28px;font-size:14px;}
.t26-hero-meta .price{font-family:var(--t-fd);font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.03em;}
.t26-hero-meta .price s{font-size:.5em;opacity:.6;font-weight:400;margin-right:8px;}
.t26-hero-meta .stars{color:#ffc861;font-weight:700;}
.t26-hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
.t26-scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:22px;animation:t26bob 2s ease-in-out infinite;}
@keyframes t26bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===== Buttons ===== */
.t26-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:999px;font-weight:700;font-size:15px;border:none;cursor:pointer;transition:transform .2s var(--t-ease),box-shadow .25s,background .25s;-webkit-tap-highlight-color:transparent;text-decoration:none;}
.t26-btn-primary{background:var(--t-cyan);color:#fff;box-shadow:0 12px 30px rgba(224,123,26,.4);}
.t26-btn-primary:hover{background:var(--t-blue);transform:translateY(-2px);box-shadow:0 18px 40px rgba(224,123,26,.5);}
.t26-btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.t26-btn-glass:hover{background:rgba(255,255,255,.24);}
.t26-btn-orange{background:var(--t-orange);color:#fff;box-shadow:0 12px 30px rgba(200,133,26,.4);}
.t26-btn-orange:hover{background:#a86d12;transform:translateY(-2px);}
.t26-btn-lg{padding:19px 40px;font-size:16.5px;}

/* ===== Sections ===== */
.t26-sec{position:relative;padding:74px 0;}
@media(min-width:768px){.t26-sec{padding:104px 0;}}
.t26-sec.night{background:var(--t-night);color:#fff;}
.t26-sec.cream{background:var(--t-cream);}
.t26-kicker{font-family:var(--t-fm);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-cyan);margin-bottom:14px;display:block;}
.t26-sec.night .t26-kicker{color:var(--t-cyan2);}
.t26-h2{font-family:var(--t-fd);font-weight:800;font-size:clamp(30px,5.5vw,56px);line-height:1.05;letter-spacing:-.03em;margin:0 0 16px;}
.t26-h2 em{font-style:normal;color:var(--t-orange);font-weight:800;}
.t26-lead{font-size:clamp(15px,2vw,18px);line-height:1.7;color:var(--t-ink2);max-width:620px;font-weight:400;}
.t26-sec.night .t26-lead{color:rgba(255,255,255,.72);}

/* ===== BENTO grid (qué incluye / highlights) ===== */
.t26-bento{display:grid;grid-template-columns:1fr;gap:14px;margin-top:38px;}
@media(min-width:680px){.t26-bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(160px,auto);}}
.t26-cell{background:var(--t-white);border:1px solid var(--t-line);border-radius:var(--t-rad);padding:26px;position:relative;overflow:hidden;transition:transform .35s var(--t-ease),box-shadow .35s;display:flex;flex-direction:column;gap:8px;}
.t26-cell:hover{transform:translateY(-6px);box-shadow:var(--t-shadow);}
.t26-sec.night .t26-cell{background:var(--t-glass-dark);border-color:var(--t-glass-dark-brd);backdrop-filter:blur(12px);}
@media(min-width:680px){.t26-cell.wide{grid-column:span 2;}.t26-cell.tall{grid-row:span 2;}}
.t26-cell .ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--t-cyan),var(--t-blue));color:#fff;display:grid;place-items:center;font-size:21px;margin-bottom:6px;}
.t26-cell.accent .ico{background:linear-gradient(135deg,var(--t-orange),var(--t-orange2));}
.t26-cell h3{font-family:var(--t-fd);font-weight:700;font-size:20px;margin:0;letter-spacing:-.02em;}
.t26-cell p{font-size:14.5px;line-height:1.6;color:var(--t-ink2);margin:0;font-weight:400;}
.t26-sec.night .t26-cell p{color:rgba(255,255,255,.66);}
.t26-cell.img{padding:0;min-height:200px;}
.t26-cell.img .ph{position:absolute;inset:0;background-size:cover;background-position:center;}
.t26-cell.img .cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(42,22,7,.85));color:#fff;font-family:var(--t-fd);font-size:18px;font-weight:700;letter-spacing:-.01em;z-index:1;}

/* ===== Big number / stat band ===== */
.t26-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px;}
@media(min-width:768px){.t26-stats{grid-template-columns:repeat(4,1fr);}}
.t26-stat{text-align:center;}
.t26-stat .n{font-family:var(--t-fd);font-weight:800;font-size:clamp(34px,6vw,52px);line-height:1;letter-spacing:-.03em;color:var(--t-cyan);}
.t26-sec.night .t26-stat .n{color:var(--t-cyan2);}
.t26-stat .l{font-size:12.5px;color:var(--t-ink3);margin-top:8px;text-transform:uppercase;letter-spacing:.06em;}
/* .55 solo aguantaba sobre el carbon plano (5.96:1); las secciones night llevan
   el resplandor ambar de .t26-aurora detras y ahi caia a 3.82:1 medido en vivo.
   .72 (el mismo alpha del pie) da 5.25:1 sobre el punto mas claro de la aurora. */
.t26-sec.night .t26-stat .l{color:rgba(255,255,255,.72);}

/* ===== MARQUEE (badges / reseñas en loop) ===== */
.t26-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.t26-marquee-track{display:flex;gap:16px;width:max-content;animation:t26marq 36s linear infinite;}
.t26-marquee:hover .t26-marquee-track{animation-play-state:paused;}
@keyframes t26marq{to{transform:translateX(-50%)}}
.t26-quote{flex-shrink:0;width:330px;background:var(--t-white);border:1px solid var(--t-line);border-radius:20px;padding:22px 24px;}
.t26-sec.night .t26-quote{background:var(--t-glass-dark);border-color:var(--t-glass-dark-brd);}
/* Estrellas: sobre la tarjeta BLANCA #ffc861 daba 1.53:1. --green-500 #b8560f = 4.80:1 (AA).
   OJO: #c8851a NO sirve aqui (3.08:1 sobre blanco, medido). */
.t26-quote .qs{color:#b8560f;font-size:13px;margin-bottom:8px;}
/* En seccion night la tarjeta es vidrio oscuro: ahi el oro claro SI pasa (11.7:1) y se conserva. */
.t26-sec.night .t26-quote .qs{color:#ffc861;}
.t26-quote p{font-size:14.5px;line-height:1.6;color:var(--t-ink2);margin:0 0 12px;font-style:normal;font-weight:500;}
.t26-sec.night .t26-quote p{color:rgba(255,255,255,.78);}
.t26-quote .who{font-weight:700;font-size:13px;}

/* ===== TIMELINE (itinerario) ===== */
.t26-timeline{position:relative;margin-top:40px;display:grid;gap:8px;}
.t26-tl{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:8px 0;}
.t26-tl .node{display:flex;flex-direction:column;align-items:center;}
.t26-tl .node .dot{width:46px;height:46px;border-radius:50%;background:var(--t-cyan);color:#fff;display:grid;place-items:center;font-family:var(--t-fm);font-weight:600;flex-shrink:0;z-index:1;}
.t26-tl .node .line{flex:1;width:2px;background:linear-gradient(var(--t-cyan),transparent);margin-top:4px;}
.t26-tl:last-child .node .line{display:none;}
.t26-tl .body{padding-bottom:26px;}
.t26-tl .body h3{font-family:var(--t-fd);font-weight:700;font-size:20px;letter-spacing:-.02em;margin:6px 0 4px;}
.t26-tl .body .time{font-family:var(--t-fm);font-size:12px;color:var(--t-orange);}
.t26-tl .body p{font-size:14.5px;line-height:1.6;color:var(--t-ink2);margin:6px 0 0;}
.t26-sec.night .t26-tl .body p{color:rgba(255,255,255,.66);}

/* ===== PRICE CARD premium ===== */
.t26-pricewrap{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;margin-top:38px;}
@media(min-width:900px){.t26-pricewrap{grid-template-columns:1.3fr 1fr;}}
.t26-pricecard{position:relative;background:linear-gradient(160deg,var(--t-blue),var(--t-night));color:#fff;border-radius:var(--t-rad-lg);padding:38px 34px;overflow:hidden;box-shadow:var(--t-shadow-lg);}
.t26-pricecard::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(224,123,26,.45),transparent 70%);top:-90px;right:-60px;}
.t26-pricecard .from{font-size:13px;opacity:.7;text-transform:uppercase;letter-spacing:.08em;}
.t26-pricecard .big{font-family:var(--t-fd);font-weight:800;font-size:clamp(46px,9vw,68px);line-height:1;letter-spacing:-.03em;margin:6px 0;}
.t26-pricecard .big s{font-size:.42em;opacity:.55;font-weight:400;}
.t26-pricecard .unit{font-size:14px;opacity:.8;}
.t26-pricecard .incl{margin:22px 0;display:grid;gap:10px;}
.t26-pricecard .incl li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;list-style:none;}
.t26-pricecard .incl li i{color:var(--t-cyan2);margin-top:2px;}
.t26-pricecard ul{margin:0;padding:0;}

/* ===== Masonry gallery ===== */
.t26-gallery{columns:2;column-gap:12px;margin-top:38px;}
@media(min-width:768px){.t26-gallery{columns:3;column-gap:14px;}}
.t26-gallery .g{break-inside:avoid;margin-bottom:12px;border-radius:18px;overflow:hidden;cursor:pointer;}
.t26-gallery .g img{width:100%;display:block;transition:transform .5s var(--t-ease);}
.t26-gallery .g:hover img{transform:scale(1.06);}

/* ===== FAQ acordeón ===== */
.t26-faq{max-width:780px;margin:36px auto 0;}
.t26-faqi{border-bottom:1px solid var(--t-line);}
.t26-sec.night .t26-faqi{border-color:var(--t-glass-dark-brd);}
.t26-faqq{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 4px;cursor:pointer;font-family:var(--t-fd);font-weight:700;font-size:clamp(17px,2.4vw,21px);letter-spacing:-.015em;user-select:none;}
.t26-faqq .pm{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--t-cream);color:var(--t-blue);display:grid;place-items:center;transition:.3s var(--t-ease);}
.t26-sec.night .t26-faqq .pm{background:var(--t-glass-dark);color:#fff;}
.t26-faqi.open .pm{background:var(--t-cyan);color:#fff;transform:rotate(45deg);}
.t26-faqa{max-height:0;overflow:hidden;transition:max-height .4s var(--t-ease);}
.t26-faqi.open .t26-faqa{max-height:340px;}
.t26-faqa p{padding:0 4px 22px;font-size:15px;line-height:1.7;color:var(--t-ink2);margin:0;}
.t26-sec.night .t26-faqa p{color:rgba(255,255,255,.7);}

/* ===== Trust strip ===== */
.t26-trust{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;margin-top:30px;}
.t26-trust span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--t-ink2);font-weight:600;}
.t26-sec.night .t26-trust span{color:rgba(255,255,255,.8);}
.t26-trust i{color:var(--t-cyan);font-size:17px;}

/* ===== MEGA CTA ===== */
/* MISMO defecto que .t26-hero: el clon borro los <div class="bg"> y <div class="veil">,
   asi que el h2/p/eyebrow en blanco quedaban sobre la crema de la seccion (1.06:1) hasta
   que lazy-video.js cargara el video (preload="none": puede no ocurrir nunca).
   background-color + velo por CSS lo dejan legible siempre. */
.t26-mega{position:relative;border-radius:var(--t-rad-lg);overflow:hidden;padding:64px 30px;text-align:center;color:#fff;isolation:isolate;background-color:#2a1607;}
.t26-mega .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;}
.t26-mega .lazy-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
/* El velo va sobre un VIDEO, asi que el contraste depende del fotograma. Con el
   ambar claro a .72 el respaldo solo aguantaba fotogramas oscuros: medido sobre un
   fotograma blanco caia a 2.18:1 (y el <p> a .92 de opacidad a 4.47:1 incluso con
   el video real). Se baja al ambar oscuro --green-600 a .88: peor caso posible
   5.45:1 en blanco y 4.90:1 para el parrafo; sin video, 8.07:1. Conserva el tinte calido. */
.t26-mega .veil,.t26-mega::before{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(160deg,rgba(138,68,16,.88),rgba(42,22,7,.90));}
.t26-mega::before{content:"";}
.t26-mega h2{font-family:var(--t-fd);font-weight:700;font-size:clamp(30px,6vw,58px);line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance;}
.t26-mega p{font-size:16px;opacity:.92;max-width:560px;margin:0 auto 28px;}

/* ===== Reveal on scroll (no choca con .reveal del sitio) ===== */
/* Red de seguridad: si el JS no carga, la animación revela el contenido a los 1.6s (nunca queda invisible) */
.t26-up{opacity:0;transform:translateY(38px);transition:opacity .8s var(--t-ease),transform .9s var(--t-ease);animation:t26safety .01s linear 1.6s forwards;}
.t26-up.in{opacity:1;transform:none;animation:none;}
@keyframes t26safety{to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  .t26-aurora span,.t26-eyebrow .dot,.t26-scrollcue,.t26-marquee-track{animation:none!important;}
  .t26-up{opacity:1!important;transform:none!important;}
}