/*! ============================================================================ TARI TOURS · HEADER v3 Sistema de navegación premium. Namespace: .tth3- Cargar como archivo externo (no inline en Elementor). ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS Un único lugar donde tocar tamaños, color y ritmo. OJO: .tth3-shell se declara aparte porque el JS lo mueve a y dejaría de heredar las variables si solo vivieran en .tth3. --------------------------------------------------------------------------- */ .tth3,.tth3-shell{ /* Paleta */ --tth3-ink: #12211E; /* verde-negro cálido, más rico que un gris neutro */ --tth3-ink-2: #4A5A56; /* texto secundario */ --tth3-ink-3: #8B9995; /* texto terciario / metadatos */ --tth3-brand: #075651; --tth3-brand-2: #0A7D70; --tth3-brand-9: #043D39; --tth3-accent: #C96F32; --tth3-sand: #FAF7F1; --tth3-sand-2: #F1EDE4; --tth3-line: rgba(18,33,30,.10); --tth3-line-2: rgba(18,33,30,.06); --tth3-wa: #25D366; /* Métrica vertical */ --tth3-logo: 72px; /* logo en estado extendido */ --tth3-logo-c: 54px; /* logo en estado compacto */ --tth3-bar-pad: 14px; /* padding vertical de la barra principal */ --tth3-bar-pad-c:11px; --tth3-util: 38px; /* alto de la barra utilitaria */ /* Métrica horizontal */ --tth3-padx: clamp(20px, 3.6vw, 56px); --tth3-max: 1360px; /* Movimiento */ --tth3-e: cubic-bezier(.22,.61,.36,1); --tth3-e-out: cubic-bezier(.16,1,.3,1); --tth3-t1: .18s; --tth3-t2: .32s; --tth3-t3: .46s; /* Capas */ --tth3-z-scrim: 99988; --tth3-z-header: 99990; --tth3-z-panel: 99996; font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; display:block; width:100%; line-height:normal; } .tth3 *,.tth3 *::before,.tth3 *::after, .tth3-shell,.tth3-shell *,.tth3-shell *::before,.tth3-shell *::after{box-sizing:border-box;} .tth3 :where(ul),.tth3-shell :where(ul){margin:0;padding:0;list-style:none;} .tth3 :where(h1,h2,h3,h4,p), .tth3-shell :where(h1,h2,h3,h4,p){margin:0;} /* :where() = especificidad 0, para no pisar .tth3-cat ni .tth3-aside h3 */ .tth3 :where(button),.tth3-shell :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;} .tth3 :where(a),.tth3-shell :where(a){text-decoration:none;color:inherit;} /* Todos los resets usan :where() (especificidad 0) para no ganarle nunca a las clases del propio header ni a los estilos de estado. */ .tth3-sprite{position:absolute;width:0;height:0;overflow:hidden;} .tth3-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* --------------------------------------------------------------------------- 2. ARMAZÓN DEL HEADER --------------------------------------------------------------------------- */ .tth3-header{ position:fixed; top:0; left:0; right:0; z-index:var(--tth3-z-header); transform:translate3d(0,0,0); transition:transform var(--tth3-t3) var(--tth3-e-out); } /* Capa de fondo: se anima sola para no repintar el contenido */ .tth3-header::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--tth3-line-2); opacity:0; transition:opacity var(--tth3-t2) var(--tth3-e); } /* Velo de legibilidad, solo mientras es transparente */ .tth3-header::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(8,20,18,.52) 0%,rgba(8,20,18,.26) 48%,rgba(8,20,18,0) 100%); opacity:1; transition:opacity var(--tth3-t2) var(--tth3-e); } .tth3-header.is-solid::before{opacity:1;} .tth3-header.is-solid::after{opacity:0;} /* Ocultado al bajar */ .tth3-header.is-hidden{transform:translate3d(0,calc(-100% - 24px),0);} /* Barra de administración de WordPress */ body.admin-bar .tth3-header{top:32px;} body.admin-bar .tth3-shell{top:32px;} @media screen and (max-width:782px){ body.admin-bar .tth3-header{top:46px;} body.admin-bar .tth3-shell{top:46px;} } /* Bloqueo de scroll */ html.tth3-lock,body.tth3-lock{overflow:hidden!important;} /* --------------------------------------------------------------------------- 3. BARRA UTILITARIA Señales de confianza y contacto directo. Se pliega al hacer scroll. --------------------------------------------------------------------------- */ .tth3-util{ position:relative; z-index:1; height:var(--tth3-util); overflow:hidden; transition:height var(--tth3-t2) var(--tth3-e), opacity var(--tth3-t1) var(--tth3-e); } .tth3-header.is-compact .tth3-util{height:0; opacity:0;} .tth3-util-in{ max-width:var(--tth3-max); margin:0 auto; height:var(--tth3-util); padding:0 var(--tth3-padx); display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:11.5px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; color:rgba(255,255,255,.78); border-bottom:1px solid rgba(255,255,255,.14); transition:color var(--tth3-t2) var(--tth3-e), border-color var(--tth3-t2) var(--tth3-e); } .tth3-header.is-solid .tth3-util-in{color:var(--tth3-ink-3); border-bottom-color:var(--tth3-line-2);} .tth3-util-claim{display:flex; align-items:center; gap:8px; min-width:0;} .tth3-util-claim svg{width:13px; height:13px; fill:currentColor; flex:0 0 auto; opacity:.85;} .tth3-util-claim span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tth3-util-links{display:flex; align-items:center; gap:18px; flex:0 0 auto;} .tth3-util-links a{display:inline-flex; align-items:center; gap:7px; transition:color var(--tth3-t1) ease;} .tth3-util-links a svg{width:13px; height:13px; fill:currentColor;} .tth3-util-links a:hover{color:#fff;} .tth3-header.is-solid .tth3-util-links a:hover{color:var(--tth3-brand);} .tth3-util-sep{width:1px; height:12px; background:currentColor; opacity:.28;} /* --------------------------------------------------------------------------- 4. BARRA PRINCIPAL --------------------------------------------------------------------------- */ .tth3-bar{position:relative; z-index:1;} .tth3-bar-in{ max-width:var(--tth3-max); margin:0 auto; padding:var(--tth3-bar-pad) var(--tth3-padx); display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); transition:padding var(--tth3-t2) var(--tth3-e); } .tth3-header.is-compact .tth3-bar-in{padding-top:var(--tth3-bar-pad-c); padding-bottom:var(--tth3-bar-pad-c);} /* Logo */ .tth3-logo{display:block; flex:0 0 auto; border-radius:10px;} .tth3-logo-box{ position:relative; display:block; width:var(--tth3-logo); height:var(--tth3-logo); transition:width var(--tth3-t2) var(--tth3-e), height var(--tth3-t2) var(--tth3-e); } .tth3-header.is-compact .tth3-logo-box{width:var(--tth3-logo-c); height:var(--tth3-logo-c);} .tth3-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity var(--tth3-t2) var(--tth3-e); } .tth3-logo .tth3-logo-w{opacity:1;} .tth3-logo .tth3-logo-c{opacity:0;} .tth3-header.is-solid .tth3-logo-w{opacity:0;} .tth3-header.is-solid .tth3-logo-c{opacity:1;} /* Navegación */ .tth3-nav{margin-left:auto;} .tth3-nav>ul{display:flex; align-items:center; gap:2px;} .tth3-item{position:static; display:flex; align-items:center;} .tth3-link{ position:relative; display:inline-flex; align-items:center; padding:10px 14px; border-radius:9px; font-size:13.5px; font-weight:600; letter-spacing:.035em; color:rgba(255,255,255,.92); white-space:nowrap; transition:color var(--tth3-t1) ease, background var(--tth3-t1) ease; } .tth3-link::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px; background:currentColor; border-radius:2px; transform:scaleX(0); transform-origin:50% 50%; opacity:.9; transition:transform var(--tth3-t2) var(--tth3-e-out); } .tth3-link:hover{color:#fff;} .tth3-link:hover::after, .tth3-item.is-current .tth3-link::after, .tth3-item.is-open .tth3-link::after{transform:scaleX(1);} .tth3-header.is-solid .tth3-link{color:var(--tth3-ink);} .tth3-header.is-solid .tth3-link:hover, .tth3-header.is-solid .tth3-item.is-current .tth3-link, .tth3-header.is-solid .tth3-item.is-open .tth3-link{color:var(--tth3-brand);} /* Botón disclosure del mega (separado del enlace: el enlace navega, el botón despliega) */ .tth3-disc{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:-8px; border-radius:6px; color:inherit; opacity:.75; transition:opacity var(--tth3-t1) ease, background var(--tth3-t1) ease; } .tth3-disc svg{width:9px; height:9px; fill:currentColor; transition:transform var(--tth3-t2) var(--tth3-e);} .tth3-disc:hover{opacity:1;} .tth3-item.is-open .tth3-disc svg{transform:rotate(180deg);} .tth3-item.is-open .tth3-disc{opacity:1;} .tth3-header.is-solid .tth3-disc{color:var(--tth3-ink);} .tth3-header.is-solid .tth3-item.is-open .tth3-disc{color:var(--tth3-brand);} /* Acciones */ .tth3-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:clamp(8px,1.4vw,20px);} .tth3-icon{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.28); color:#fff; transition:background var(--tth3-t1) ease, border-color var(--tth3-t1) ease, color var(--tth3-t1) ease, transform var(--tth3-t1) var(--tth3-e); } .tth3-icon svg{width:19px; height:19px; fill:currentColor;} .tth3-icon:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); transform:translateY(-1px);} .tth3-icon:active{transform:scale(.95);} .tth3-header.is-solid .tth3-icon{border-color:var(--tth3-line); color:var(--tth3-wa);} .tth3-header.is-solid .tth3-icon:hover{background:rgba(37,211,102,.10); border-color:rgba(37,211,102,.4);} /* CTA principal */ .tth3-cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 22px; border-radius:999px; background:#fff; color:var(--tth3-ink); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; box-shadow:0 2px 10px rgba(8,20,18,.14); transition:transform var(--tth3-t1) var(--tth3-e), box-shadow var(--tth3-t2) var(--tth3-e), background var(--tth3-t2) var(--tth3-e), color var(--tth3-t2) var(--tth3-e); } .tth3-cta svg{width:14px; height:14px; fill:currentColor; transition:transform var(--tth3-t2) var(--tth3-e-out);} .tth3-cta:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(8,20,18,.22);} .tth3-cta:hover svg{transform:translateX(3px);} .tth3-cta:active{transform:translateY(0);} .tth3-header.is-solid .tth3-cta{background:var(--tth3-brand); color:#fff; box-shadow:0 2px 10px rgba(7,86,81,.24);} .tth3-header.is-solid .tth3-cta:hover{background:var(--tth3-brand-9); box-shadow:0 10px 26px rgba(7,86,81,.32);} /* Hamburguesa */ .tth3-burger{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.28); color:#fff; transition:background var(--tth3-t1) ease, border-color var(--tth3-t1) ease; } .tth3-burger i{display:block; position:relative; width:17px; height:11px;} .tth3-burger i::before,.tth3-burger i::after{ content:""; position:absolute; left:0; right:0; height:1.6px; border-radius:2px; background:currentColor; transition:transform var(--tth3-t2) var(--tth3-e); } .tth3-burger i::before{top:0;} .tth3-burger i::after{bottom:0;} .tth3-burger:hover i::before{transform:translateY(-1px);} .tth3-burger:hover i::after{transform:translateY(1px);} .tth3-header.is-solid .tth3-burger{border-color:var(--tth3-line); color:var(--tth3-ink);} .tth3-header.is-solid .tth3-burger:hover{background:var(--tth3-sand); border-color:var(--tth3-line);} /* --------------------------------------------------------------------------- 5. MEGA MENÚ --------------------------------------------------------------------------- */ .tth3-scrim{ position:fixed; inset:0; z-index:var(--tth3-z-scrim); background:rgba(8,20,18,.34); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--tth3-t2) var(--tth3-e), visibility var(--tth3-t2); } .tth3-scrim.is-on{opacity:1; visibility:visible; pointer-events:auto;} .tth3-mega{ position:absolute; top:calc(100% - 10px); left:50%; width:min(1180px, calc(100vw - 48px)); transform:translateX(-50%) translateY(14px) scale(.985); transform-origin:50% 0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--tth3-t2) var(--tth3-e), transform var(--tth3-t3) var(--tth3-e-out), visibility var(--tth3-t2); z-index:20; } .tth3-item.is-open .tth3-mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); } .tth3-mega-in{ display:grid; grid-template-columns:1fr 316px; gap:0; background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 1px 0 rgba(18,33,30,.06), 0 32px 80px -20px rgba(8,20,18,.34); max-height:calc(100vh - 200px); } .tth3-mega-main{padding:26px 30px 30px; min-width:0; overflow-y:auto; overscroll-behavior:contain;} .tth3-mega-top{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--tth3-line-2); } .tth3-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--tth3-accent); } .tth3-seeall{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--tth3-brand); transition:gap var(--tth3-t1) var(--tth3-e); } .tth3-seeall svg{width:12px; height:12px; fill:currentColor;} .tth3-seeall:hover{gap:11px;} /* Rejilla de 3 columnas equilibradas */ .tth3-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 26px; align-items:start;} .tth3-col{min-width:0;} /* contenedor de medición: idéntico a una columna real pero fuera de pantalla */ .tth3-measure{position:absolute!important; left:-100000px!important; top:0!important; visibility:hidden!important; pointer-events:none!important;} /* Encabezado de categoría */ .tth3-cat{ display:flex; align-items:center; gap:10px; margin:20px 0 9px; padding-bottom:7px; border-bottom:1px solid var(--tth3-line-2); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tth3-brand); } .tth3-col>.tth3-cat:first-child{margin-top:0;} .tth3-cat i{display:block; width:5px; height:5px; border-radius:50%; background:var(--tth3-accent); flex:0 0 auto;} /* Encabezado de continuación: aparece cuando una categoría se parte entre columnas */ .tth3-cont{ display:flex; align-items:center; gap:8px; margin:0 0 9px; padding-bottom:7px; border-bottom:1px dashed var(--tth3-line-2); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tth3-ink-3); } .tth3-cont em{font-style:normal; opacity:.7; letter-spacing:.04em; text-transform:none; font-weight:600;} /* Fila de tour */ .tth3-tour{ position:relative; display:flex; align-items:baseline; gap:10px; padding:6px 26px 6px 12px; margin-left:-12px; border-radius:8px; font-size:13.5px; font-weight:500; line-height:1.4; color:var(--tth3-ink-2); transition:color var(--tth3-t1) ease, background var(--tth3-t1) ease; } .tth3-tour span{min-width:0;} .tth3-tour em{ flex:0 0 auto; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--tth3-ink-3); padding:2px 6px; border:1px solid var(--tth3-line); border-radius:4px; transition:color var(--tth3-t1) ease, border-color var(--tth3-t1) ease; } .tth3-tour::after{ content:""; position:absolute; right:11px; top:50%; width:5px; height:5px; border-right:1.4px solid currentColor; border-top:1.4px solid currentColor; transform:translateY(-50%) translateX(-4px) rotate(45deg); opacity:0; transition:opacity var(--tth3-t1) ease, transform var(--tth3-t2) var(--tth3-e-out); } a.tth3-tour:hover{color:var(--tth3-brand); background:var(--tth3-sand);} a.tth3-tour:hover em{color:var(--tth3-accent); border-color:rgba(201,111,50,.35);} a.tth3-tour:hover::after{opacity:.6; transform:translateY(-50%) translateX(0) rotate(45deg);} .tth3-tour.is-off{color:var(--tth3-ink-3); cursor:default;} /* Columna CTA */ .tth3-aside{ position:relative; overflow:hidden; padding:30px 28px; background:linear-gradient(155deg,var(--tth3-brand-9) 0%,var(--tth3-brand) 48%,var(--tth3-brand-2) 100%); color:#fff; display:flex; flex-direction:column; } .tth3-aside::before{ content:""; position:absolute; top:-70px; right:-70px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 68%); pointer-events:none; } .tth3-aside-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:12px; } .tth3-aside h3{font-size:22px; font-weight:700; line-height:1.22; letter-spacing:-.01em; margin-bottom:12px;} .tth3-aside p{font-size:13px; line-height:1.62; color:rgba(255,255,255,.8); margin-bottom:22px;} .tth3-aside-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:46px; padding:0 22px; border-radius:999px; background:var(--tth3-wa); color:#08201C; font-size:13px; font-weight:800; letter-spacing:.03em; box-shadow:0 8px 22px rgba(0,0,0,.26); transition:transform var(--tth3-t1) var(--tth3-e), box-shadow var(--tth3-t2) var(--tth3-e); } .tth3-aside-btn svg{width:17px; height:17px; fill:currentColor;} .tth3-aside-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.34);} .tth3-aside-meta{margin-top:auto; padding-top:24px;} .tth3-aside-row{ display:flex; align-items:center; gap:10px; padding-top:13px; margin-top:13px; border-top:1px solid rgba(255,255,255,.14); font-size:12px; color:rgba(255,255,255,.82); } .tth3-aside-row:first-child{border-top:0; margin-top:0; padding-top:0;} .tth3-aside-row svg{width:14px; height:14px; fill:rgba(255,255,255,.5); flex:0 0 auto;} .tth3-aside-row b{font-weight:700; color:#fff; letter-spacing:.01em;} /* --------------------------------------------------------------------------- 6. PANEL MÓVIL / TABLET (drill-down) .tth3-shell se mueve a por JS para escapar de los transform de Elementor. --------------------------------------------------------------------------- */ .tth3-shell{ position:fixed!important; inset:0!important; z-index:var(--tth3-z-panel)!important; overflow:hidden!important; pointer-events:none!important; margin:0!important; padding:0!important; transform:none!important; } .tth3-shell>*{pointer-events:auto;} .tth3-veil{ position:absolute; inset:0; background:rgba(8,20,18,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity var(--tth3-t2) ease, visibility var(--tth3-t2); } .tth3-veil.is-on{opacity:1; visibility:visible;} .tth3-panel{ position:absolute; top:0; right:0; bottom:0; width:min(440px, 92vw); display:flex; flex-direction:column; background:#fff; box-shadow:-20px 0 60px -12px rgba(8,20,18,.4); transform:translate3d(102%,0,0); transition:transform var(--tth3-t3) var(--tth3-e-out); overflow:hidden; padding-bottom:env(safe-area-inset-bottom); } .tth3-panel.is-on{transform:translate3d(0,0,0);} /* Cabecera fija del panel */ .tth3-p-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--tth3-line-2); background:#fff; } .tth3-p-head img{width:56px; height:56px; object-fit:contain; display:block;} .tth3-p-close{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--tth3-sand); color:var(--tth3-brand); transition:background var(--tth3-t1) ease, transform var(--tth3-t1) var(--tth3-e); } .tth3-p-close svg{width:15px; height:15px; fill:currentColor;} .tth3-p-close:hover{background:var(--tth3-sand-2);} .tth3-p-close:active{transform:scale(.92);} /* Carrusel de vistas */ .tth3-p-views{position:relative; flex:1 1 auto; overflow:hidden;} .tth3-p-view{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transition:transform var(--tth3-t3) var(--tth3-e-out), opacity var(--tth3-t2) var(--tth3-e), visibility var(--tth3-t3); } .tth3-p-view[data-view="root"]{transform:translate3d(0,0,0);} .tth3-p-view[data-view="tours"]{transform:translate3d(100%,0,0); opacity:0; visibility:hidden;} .tth3-panel.at-tours .tth3-p-view[data-view="root"]{transform:translate3d(-24%,0,0); opacity:0; visibility:hidden;} .tth3-panel.at-tours .tth3-p-view[data-view="tours"]{transform:translate3d(0,0,0); opacity:1; visibility:visible;} /* Tarjeta CTA del panel */ .tth3-p-card{ position:relative; overflow:hidden; margin:18px; padding:22px; border-radius:18px; background:linear-gradient(155deg,var(--tth3-brand-9),var(--tth3-brand-2)); color:#fff; } .tth3-p-card::before{ content:""; position:absolute; top:-60px; right:-60px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 68%); } .tth3-p-card strong{display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; margin-bottom:5px;} .tth3-p-card span{display:block; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.8); margin-bottom:16px;} .tth3-p-card a{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px; border-radius:999px; background:var(--tth3-wa); color:#08201C; font-size:13px; font-weight:800; } .tth3-p-card a svg{width:16px; height:16px; fill:currentColor;} /* Navegación del panel */ .tth3-p-nav{padding:4px 0 12px;} .tth3-p-nav a,.tth3-p-nav button{ position:relative; display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:16px 20px; font-size:16px; font-weight:600; letter-spacing:-.005em; color:var(--tth3-ink); text-align:left; border-bottom:1px solid var(--tth3-line-2); transition:background var(--tth3-t1) ease, color var(--tth3-t1) ease, padding-left var(--tth3-t2) var(--tth3-e); } .tth3-p-nav a:active,.tth3-p-nav button:active{background:var(--tth3-sand);} .tth3-p-nav a:hover,.tth3-p-nav button:hover{color:var(--tth3-brand); padding-left:24px;} .tth3-p-nav .tth3-p-count{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tth3-ink-3); margin-left:auto; margin-right:10px; } .tth3-p-nav svg{width:13px; height:13px; fill:var(--tth3-ink-3); flex:0 0 auto;} /* Bloque de contacto del panel */ .tth3-p-foot{padding:6px 20px 28px;} .tth3-p-foot .tth3-eyebrow{display:block; margin-bottom:12px;} .tth3-p-foot a{ display:flex; align-items:center; gap:11px; padding:9px 0; font-size:13.5px; font-weight:600; color:var(--tth3-ink-2); } .tth3-p-foot a svg{width:15px; height:15px; fill:var(--tth3-ink-3);} .tth3-p-legal{ margin-top:16px; padding-top:14px; border-top:1px solid var(--tth3-line-2); font-size:11px; line-height:1.6; color:var(--tth3-ink-3); } /* Vista de tours */ .tth3-p-back{ position:sticky; top:0; z-index:2; display:flex!important; align-items:center; gap:10px; width:100%; padding:14px 20px; background:#fff; border-bottom:1px solid var(--tth3-line-2); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tth3-brand); } .tth3-p-back svg{width:12px; height:12px; fill:currentColor; transform:rotate(180deg);} .tth3-p-lead{padding:20px 20px 4px;} .tth3-p-lead h3{font-size:21px; font-weight:700; letter-spacing:-.015em; color:var(--tth3-ink); margin-bottom:6px;} .tth3-p-lead p{font-size:13px; line-height:1.6; color:var(--tth3-ink-3);} .tth3-p-cols{ display:grid; grid-template-columns:repeat(var(--tth3-pcols,1),minmax(0,1fr)); gap:0 22px; padding:16px 20px 30px; align-items:start; } .tth3-p-cols .tth3-tour{padding:9px 26px 9px 12px; font-size:14.5px;} .tth3-p-cols .tth3-cat{margin:22px 0 10px;} .tth3-p-cols .tth3-p-col>.tth3-cat:first-child{margin-top:0;} .tth3-p-allbtn{ display:flex; align-items:center; justify-content:center; gap:9px; margin:0 20px 30px; height:50px; border-radius:999px; background:var(--tth3-ink); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .tth3-p-allbtn svg{width:13px; height:13px; fill:currentColor;} /* --------------------------------------------------------------------------- 7. ESPACIADOR Inicio: 0 (el header vuela sobre el hero). Internas: reserva la altura real. --------------------------------------------------------------------------- */ .tth3-spacer{display:block; width:100%; height:0; transition:height var(--tth3-t2) var(--tth3-e);} .tth3.has-spacer .tth3-spacer{ height:calc(var(--tth3-util) + var(--tth3-logo) + var(--tth3-bar-pad) * 2); } /* --------------------------------------------------------------------------- 8. FOCO VISIBLE --------------------------------------------------------------------------- */ .tth3 :focus-visible,.tth3-shell :focus-visible{outline:2px solid currentColor; outline-offset:3px; border-radius:6px;} .tth3-header.is-solid .tth3-logo:focus-visible{outline-color:var(--tth3-brand);} .tth3-mega :focus-visible,.tth3-panel :focus-visible{outline-color:var(--tth3-brand);} .tth3-aside :focus-visible,.tth3-p-card :focus-visible{outline-color:#fff;} /* --------------------------------------------------------------------------- 9. RESPONSIVE --------------------------------------------------------------------------- */ /* Pantallas muy anchas: más aire */ @media (min-width:1600px){ .tth3,.tth3-shell{--tth3-max:1480px; --tth3-logo:78px; --tth3-logo-c:58px;} .tth3-link{font-size:14px; padding:10px 16px;} .tth3-link::after{left:16px; right:16px;} } /* Laptop */ @media (max-width:1280px){ .tth3,.tth3-shell{--tth3-logo:66px; --tth3-logo-c:50px;} .tth3-link{font-size:13px; padding:10px 11px;} .tth3-link::after{left:11px; right:11px;} .tth3-mega-in{grid-template-columns:1fr 282px;} .tth3-mega-main{padding:22px 24px 26px;} .tth3-aside{padding:26px 24px;} } /* Laptop pequeño: la barra utilitaria pierde el reclamo largo */ @media (max-width:1120px){ .tth3,.tth3-shell{--tth3-logo:60px; --tth3-logo-c:46px;} .tth3-util-claim span{display:none;} .tth3-cta{padding:0 18px; font-size:12px;} .tth3-cols{gap:0 20px;} } /* Tablet y móvil: fuera nav de escritorio, entra el panel */ @media (max-width:1024px){ .tth3,.tth3-shell{--tth3-logo:58px; --tth3-logo-c:46px; --tth3-util:34px;} .tth3-nav{display:none;} .tth3-burger{display:inline-flex;} .tth3-cta{display:none;} /* el CTA vive dentro del panel, sin apretar la barra */ .tth3-actions{margin-left:auto;} } /* Tablet: panel más ancho y dos columnas de tours */ @media (min-width:700px) and (max-width:1024px){ .tth3-panel{width:min(560px, 76vw);} } /* Móvil */ @media (max-width:699px){ .tth3,.tth3-shell{--tth3-logo:52px; --tth3-logo-c:42px; --tth3-bar-pad:12px; --tth3-bar-pad-c:9px;} .tth3-panel{width:min(440px, 94vw);} .tth3-util-links{gap:14px;} .tth3-header.is-hidden{transform:translate3d(0,calc(-100% - 40px),0);} } /* Móvil pequeño: la barra utilitaria se reduce al contacto directo */ @media (max-width:400px){ .tth3,.tth3-shell{--tth3-logo:46px; --tth3-logo-c:40px; --tth3-util:32px;} .tth3-util-claim{display:none;} .tth3-util-in{justify-content:flex-end;} .tth3-icon,.tth3-burger{width:40px; height:40px;} .tth3-actions{gap:8px;} } /* Pantallas bajas en horizontal: sin barra utilitaria y siempre compacto */ @media (max-height:560px) and (orientation:landscape){ .tth3,.tth3-shell{--tth3-util:0px; --tth3-logo:var(--tth3-logo-c);} .tth3-util{display:none;} .tth3-mega-in{max-height:calc(100vh - 96px);} } /* Táctil: sin estados hover fantasma */ @media (hover:none){ .tth3-link:hover,.tth3-icon:hover,.tth3-burger:hover{background:transparent; transform:none;} .tth3-cta:hover{transform:none; box-shadow:0 2px 10px rgba(8,20,18,.14);} .tth3-cta:hover svg{transform:none;} a.tth3-tour:hover{background:transparent;} a.tth3-tour:hover::after{opacity:0;} .tth3-p-nav a:hover,.tth3-p-nav button:hover{padding-left:20px;} .tth3-seeall:hover{gap:7px;} .tth3-aside-btn:hover,.tth3-p-close:hover{transform:none;} } /* Movimiento reducido */ @media (prefers-reduced-motion:reduce){ .tth3 *,.tth3 *::before,.tth3 *::after, .tth3-shell *,.tth3-shell *::before,.tth3-shell *::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } .tth3-header.is-hidden{transform:none!important;} .tth3-mega{transform:translateX(-50%) translateY(0) scale(1);} .tth3-p-view[data-view="tours"]{transform:none;} .tth3-panel.at-tours .tth3-p-view[data-view="root"]{transform:none;} } /* Impresión */ @media print{ .tth3-header,.tth3-shell,.tth3-scrim{display:none!important;} .tth3-spacer{height:0!important;} }