adentro del nuestro). */ #tripmars-page #tm-main .alignfull, #tripmars-page #tm-main .alignwide { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #tripmars-page #tm-main { overflow-x: hidden; } #tripmars-page h1, #tripmars-page h2, #tripmars-page h3, #tripmars-page h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 16px; line-height: 1.15; } #tripmars-page p { color: var(--text-muted); font-weight: 400; margin: 0 0 16px; } #tripmars-page .container { max-width: 1160px; margin: 0 auto; } #tripmars-page .eyebrow { display: inline-block; color: var(--color-accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 12px; } #tripmars-page .section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; } #tripmars-page :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* Fondo espacial con gradiente radial + estrellas */ #tripmars-page .space-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), transparent 45%), radial-gradient(circle at 85% 80%, rgba(243,162,18,0.10), transparent 40%), radial-gradient(circle at 10% 90%, rgba(47,39,99,0.9), transparent 40%), var(--color-bg); } #tripmars-page .space-bg .sparkle { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; opacity: 0.6; animation: tm-twinkle 3.5s ease-in-out infinite; } @keyframes tm-twinkle { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.6); } } @media (prefers-reduced-motion: reduce) { #tripmars-page .space-bg .sparkle { animation: none; } } /* ========================================================= 2) HEADER / NAV — igual en todas las páginas (header.php) ========================================================= */ #tripmars-page .tm-header { position: sticky; top: 0; z-index: 50; width: 100%; padding: 14px 24px; background: rgba(72, 62, 140, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } #tripmars-page .tm-header.is-scrolled { background: rgba(34, 28, 74, 0.85); border-bottom-color: var(--surface-border); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } #tripmars-page .tm-header-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #tripmars-page .tm-logo img { height: 40px; width: auto; } #tripmars-page .tm-logo { display: flex; align-items: center; gap: 8px; } #tripmars-page .tm-nav-links { display: flex; align-items: center; gap: 32px; } #tripmars-page .tm-nav-links a { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); transition: color 0.2s ease; padding: 4px 2px; } #tripmars-page .tm-nav-links a:hover, #tripmars-page .tm-nav-links a:focus-visible { color: var(--color-accent); } #tripmars-page .tm-header-actions { display: flex; align-items: center; gap: 12px; } #tripmars-page .tm-burger { display: none; background: transparent; width: 40px; height: 40px; border-radius: 8px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } #tripmars-page .tm-burger span { width: 22px; height: 2px; background: #fff; display: block; transition: 0.25s ease; } #tripmars-page .tm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #tripmars-page .tm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } #tripmars-page .tm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Icono de carrito con contador */ #tripmars-page .tm-cart-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--surface-border); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; flex-shrink: 0; } #tripmars-page .tm-cart-btn:hover, #tripmars-page .tm-cart-btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); } #tripmars-page .tm-cart-icon { width: 22px; height: 22px; display: block; color: #fff; overflow: visible; } #tripmars-page .tm-cart-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9999px; background: var(--color-accent); color: #1A1200; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } #tripmars-page .tm-cart-count.is-empty { display: none; } /* ========================================================= 3) BOTONES ========================================================= */ #tripmars-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; white-space: nowrap; } #tripmars-page .btn-primary { background: var(--color-accent); color: #1A1200; box-shadow: var(--shadow-cta); } #tripmars-page .btn-primary:hover, #tripmars-page .btn-primary:focus-visible { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(243, 162, 18, 0.55); } #tripmars-page .btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--surface-border); } #tripmars-page .btn-secondary:hover, #tripmars-page .btn-secondary:focus-visible { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } #tripmars-page .btn-sm { padding: 10px 24px; font-size: 0.85rem; } /* ========================================================= 4) DRAWERS — menú móvil y carrito lateral (overlay compartido) ========================================================= */ #tripmars-page .tm-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #tripmars-page .tm-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } #tripmars-page .tm-mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); height: 100vh; background: var(--color-bg-darker); border-left: 1px solid var(--surface-border); padding: 90px 28px 28px; display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); transition: transform 0.3s ease; z-index: 56; } #tripmars-page .tm-mobile-menu.is-open { transform: translateX(0); } #tripmars-page .tm-mobile-menu a { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: #fff; } @media (min-width: 769px) { #tripmars-page .tm-mobile-menu { display: none; } } /* Carrito lateral: disponible en todas las páginas y todos los anchos */ #tripmars-page .tm-cart-drawer { position: fixed; inset: 0 0 0 auto; width: min(90vw, 400px); height: 100vh; background: var(--color-bg-darker); border-left: 1px solid var(--surface-border); z-index: 57; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; } #tripmars-page .tm-cart-drawer.is-open { transform: translateX(0); } #tripmars-page .tm-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--surface-border); flex-shrink: 0; } #tripmars-page .tm-cart-drawer-head h2 { margin: 0; font-size: 1.15rem; } #tripmars-page .tm-cart-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; } #tripmars-page .tm-cart-close:hover, #tripmars-page .tm-cart-close:focus-visible { background: rgba(255,255,255,0.16); color: var(--color-accent); } /* IMPORTANTE — encontrado inspeccionando el sitio en vivo: WooCommerce reemplaza automáticamente el contenido del carrito lateral por AJAX poco después de cargar la página (su script wc-cart-fragments, para que el carrito nunca se quede con datos viejos si la página está cacheada). Esa versión nueva SOLO trae la clase propia de WooCommerce (widget_shopping_cart_content) — pierde nuestra clase .tm-cart-drawer-body. Por eso todas estas reglas ya NO dependen de esa clase: usan #tm-cart-drawer (nuestro