/* Theme Name: TME Theme Theme URI: https://www.tourmarbella.com Description: Tema clásico de Tour Marbella Experiences. Diseño premium (sistema de Claude Design) implementado a mano en PHP + CSS vanilla, conectado al plugin TME Core (CPTs experiencia/guia, taxonomías destino/tipo). No FSE. Author: Felipe Fernández — felipefg.com Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.0 Text Domain: tme-theme */ /* ============================================================ TOKENS — paleta de marca TME (fuente: design system styles.css) ============================================================ */ :root { --bg: #FCF6ED; /* crema — fondo principal */ --bg-alt: #F4ECDC; /* crema más profundo */ --bg-dark: #0E4A5E; /* teal oscuro — secciones dark/footer */ --paper: #FFFBF3; /* crema más claro */ --ink: #146983; /* teal — texto/UI principal */ --ink-soft: #1F5468; --ink-muted: #7FA0AB; --line: #D9CFBC; /* hairlines (decorativas, no UI) */ --line-soft: #E8DFCB; --field-line: #948764; /* borde de campos de formulario — ≥3:1 sobre crema/paper (WCAG 1.4.11) */ /* Rol "label" para eyebrows/labels sobre fondo CLARO: ink-muted (#7FA0AB) sólo da 2.6:1, insuficiente. Este tono cumple ≥4.5:1 sobre --bg, --paper y --bg-alt. NO usar sobre fondo oscuro (ahí --ink-muted debe seguir claro). */ --label: #556A80; --ratio-card: 3 / 2; /* estándar de foto de experiencia en tarjetas/listados */ --ratio-cover: 16 / 9; /* estándar de portada: hero de ficha + destacado */ --terra: #FE9A7D; /* coral — acento primario (SÓLO relleno/fondo) */ --terra-deep: #E87A5C; /* coral profundo — SÓLO relleno/borde (como texto no llega a 4.5:1) */ --terra-ink: #B04830; /* coral para TEXTO/enlaces sobre fondo claro — ≥4.5:1 sobre --bg/--paper/--bg-alt */ --olive: #A3C8C5; /* salvia */ --olive-deep: #7FAAA7; --ochre: #FFD065; /* dorado — highlight puntual (color del logo) */ --sand: #FFE3A8; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* ---------------------------------------------------------- ESCALA TIPOGRÁFICA FLUIDA (estilo Utopia / Core Framework) ---------------------------------------------------------- Sistema de tokens reutilizables. Cada paso es clamp(MIN, PREFERIDO, MAX) con interpolación LINEAL entre viewport 360px (móvil) y 1280px (desktop). Valores en `rem` para respetar el tamaño de fuente del navegador del usuario (NO se fija html { font-size }, queda al 100% por accesibilidad). Escala modular ~1.2 (móvil) → ~1.25 (desktop). Base subida a 17→19px para mejorar la legibilidad (público de mayor edad). token min→max uso típico --fs-3xs 11→12px eyebrows / kickers en mayúsculas --fs-2xs 13→14px labels, botones, metadatos --fs-xs 15→16px texto pequeño / notas --fs-base 17→19px CUERPO (subido desde 16px fijo) --fs-md 19→22px lead / entradillas --fs-lg 22→26px citas, destacados --fs-xl 26→34px h3 --fs-2xl 34→52px h2 --fs-3xl 44→72px h1 --fs-4xl 52→96px display / hero grande ---------------------------------------------------------- */ --fs-3xs: clamp(0.6875rem, 0.663rem + 0.109vw, 0.75rem); /* 11→12 */ --fs-2xs: clamp(0.8125rem, 0.788rem + 0.109vw, 0.875rem); /* 13→14 */ --fs-xs: clamp(0.9375rem, 0.913rem + 0.109vw, 1rem); /* 15→16 */ --fs-base: clamp(1.0625rem, 1.014rem + 0.217vw, 1.1875rem); /* 17→19 */ --fs-md: clamp(1.1875rem, 1.114rem + 0.326vw, 1.375rem); /* 19→22 */ --fs-lg: clamp(1.375rem, 1.277rem + 0.435vw, 1.625rem); /* 22→26 */ --fs-xl: clamp(1.625rem, 1.429rem + 0.870vw, 2.125rem); /* 26→34 */ --fs-2xl: clamp(2.125rem, 1.685rem + 1.957vw, 3.25rem); /* 34→52 */ --fs-3xl: clamp(2.75rem, 2.065rem + 3.043vw, 4.5rem); /* 44→72 */ --fs-4xl: clamp(3.25rem, 2.174rem + 4.783vw, 6rem); /* 52→96 */ --nav-h: 84px; } /* ============================================================ RESET / BASE ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--fs-base); line-height: 1.6; color: var(--ink); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Cifras alineadas y de ancho fijo (Cormorant por defecto usa old-style descendentes; estas son las "lining figures" — uniformes y legibles). */ font-variant-numeric: lining-nums tabular-nums; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; } /* Accesibilidad: salto al contenido (WCAG 2.4.1, Nivel A) + utilidad para lector de pantalla */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--bg-dark); color: var(--paper); padding: 12px 18px; border-radius: 0 0 2px 2px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 0; outline: 2px solid var(--terra); outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* ============================================================ TIPOGRAFÍA / HELPERS ============================================================ */ .display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 0.98; text-wrap: balance; } .eyebrow { font-family: var(--sans); font-size: var(--fs-3xs); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--label); } .serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: 1400px; margin: 0 auto; padding: 0 48px; } .container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 48px; } .hairline { border: none; border-top: 1px solid var(--line); margin: 0; } /* ============================================================ BOTONES ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border-radius: 2px; transition: all 180ms ease; white-space: nowrap; } .btn-primary { background: var(--ink); color: var(--paper); } .btn-primary:hover { background: var(--terra-deep); } .btn-terra { background: var(--terra); color: var(--bg-dark); } /* texto oscuro sobre coral → 4.69:1 (WCAG 1.4.3) */ .btn-terra:hover { background: var(--bg-dark); color: var(--paper); } /* invierte a teal oscuro (alto contraste) en vez de oscurecer el coral */ .btn-ochre { background: var(--ochre); color: var(--bg-dark); } .btn-ochre:hover { filter: brightness(0.95); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: gap 180ms ease; } .btn-link:hover { gap: 14px; } /* ============================================================ FORMULARIOS ============================================================ */ .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--label); } .field input, .field textarea, .field select { background: transparent; border: none; border-bottom: 1px solid var(--field-line); padding: 10px 0; font-size: var(--fs-xs); color: var(--ink); transition: border-color 180ms ease; } /* Foco robusto (2.4.7): además del cambio de borde, un anillo visible que no depende de :focus-visible (algunos navegadores/estados no lo activan en inputs). */ .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); outline: 2px solid var(--terra); outline-offset: 2px; } .field textarea { resize: vertical; min-height: 80px; } /* ============================================================ PLACEHOLDERS DE IMAGEN (mientras no hay fotos reales) ============================================================ */ .ph { position: relative; background: var(--sand); background-image: repeating-linear-gradient(135deg, rgba(20,105,131,0.08) 0 1px, transparent 1px 10px), linear-gradient(135deg, #FFE3A8 0%, #FFD065 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.1em; text-transform: uppercase; } .ph-label { background: rgba(255,251,243,0.88); padding: 6px 10px; border: 1px solid var(--ink); color: var(--ink); backdrop-filter: blur(4px); } .ph-dark { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 10px), linear-gradient(135deg, #1F7A96 0%, #0A3E4F 100%); color: #FCF6ED; } .ph-olive { background-image: repeating-linear-gradient(135deg, rgba(20,105,131,0.12) 0 1px, transparent 1px 10px), linear-gradient(135deg, #B8D5D2 0%, #7FAAA7 100%); color: var(--ink); } .ph-terra { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 10px), linear-gradient(135deg, #FFB59D 0%, #E87A5C 100%); color: #FCF6ED; } /* Imagen real cubriendo un .ph (cuando hay thumbnail) */ .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ============================================================ REVELADO AL SCROLL ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; } .reveal.is-visible { animation: fadeInUp 600ms cubic-bezier(0.2,0.8,0.2,1) both; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; animation: none; } html { scroll-behavior: auto; } } /* ============================================================ HEADER / NAV (port de Nav.jsx) ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all 260ms ease; background: transparent; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(246,241,232,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1400px; margin: 0 auto; padding: 24px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding 260ms ease; } .site-header.is-scrolled .nav-inner { padding: 16px 48px; } /* Admin bar de WordPress: el header fijo se desplaza para no quedar pisado. Mismos valores/breakpoint que usa el core (32px; 46px en pantallas ≤782px). */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .brand { display: flex; align-items: center; gap: 10px; } /* Isotipo recoloreable: caja enmascarada que se pinta con currentColor */ .brand-mark { display: inline-block; width: auto; aspect-ratio: 1400 / 1267; background-color: currentColor; -webkit-mask: url("assets/img/isotipo.svg") no-repeat center / contain; mask: url("assets/img/isotipo.svg") no-repeat center / contain; } .brand .brand-mark { color: var(--ink); flex: none; } /* Lockup según guía de marca: 'Tour Marbella' Cormorant regular sobre 'Experiences' Cormorant italic, ambas en 2 líneas alineadas a la izquierda. */ .brand .brand-name { display: inline-flex; flex-direction: column; line-height: 1; color: var(--ink); font-family: var(--serif); font-weight: 400; } .brand .brand-name__main { font-size: var(--fs-lg); letter-spacing: 0.01em; } .brand .brand-name__suffix { font-size: var(--fs-md); font-style: italic; margin-top: 3px; letter-spacing: 0.01em; } .nav-menu { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-menu a { font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: all 180ms ease; } .nav-menu a:hover { color: var(--terra); } .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a { color: var(--terra); font-weight: 500; border-bottom-color: var(--terra); } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-agencies { font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--ink-muted); padding-left: 20px; border-left: 1px solid var(--line); } .nav-agencies:hover { color: var(--ink); } .lang-switch { display: flex; gap: 4px; font-size: var(--fs-2xs); color: var(--ink-muted); } .lang-switch a.is-active { color: var(--ink); font-weight: 500; } .nav-cta { padding: 10px 18px; } /* Contenedor colapsable (menú + acciones). En desktop es una fila a la derecha. */ .nav-collapse { display: flex; align-items: center; gap: 36px; } /* Botón hamburguesa (oculto en desktop) */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; display: block; width: 24px; height: 2px; background: currentColor; transition: transform 240ms ease, opacity 200ms ease; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before { position: absolute; left: 0; top: -7px; } .nav-toggle__bars::after { position: absolute; left: 0; top: 7px; } .site-header.is-menu-open .nav-toggle__bars { background: transparent; } .site-header.is-menu-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); } .site-header.is-menu-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ 404 — editorial, navegable ============================================================ */ .error-404 { padding-top: 200px; padding-bottom: 160px; } .error-404__inner { max-width: 760px; margin: 0 auto; } .error-404__eyebrow { color: var(--terra); margin-bottom: 28px; } .error-404__title { font-size: var(--fs-3xl); margin-bottom: 28px; line-height: 1.05; } .error-404__lead { font-family: var(--serif); font-size: var(--fs-lg); color: var(--ink); line-height: 1.45; max-width: 540px; margin: 0 0 56px; position: relative; padding-top: 22px; } .error-404__lead::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 1px; background: var(--terra); } .error-404__paths { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); } .error-404__paths > li { border-bottom: 1px solid var(--line); } .error-404__paths a { display: grid; grid-template-columns: 56px 1fr 32px; gap: 24px; align-items: center; padding: 28px 0; text-decoration: none; color: inherit; transition: padding-left .2s ease; } .error-404__paths a:hover { padding-left: 12px; } .error-404__path-num { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.08em; color: var(--terra-ink); } .error-404__path-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .error-404__path-title { font-family: var(--serif); font-size: var(--fs-lg); color: var(--ink); line-height: 1.2; } .error-404__path-text { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; } .error-404__path-arrow { font-size: var(--fs-md); color: var(--terra); justify-self: end; transition: transform .2s ease; } .error-404__paths a:hover .error-404__path-arrow { transform: translateX(4px); color: var(--ink); } @media (max-width: 720px) { .error-404 { padding-top: 140px; padding-bottom: 96px; } .error-404__paths a { grid-template-columns: 36px 1fr 24px; gap: 16px; padding: 22px 0; } .error-404__path-title { font-size: var(--fs-md); } } /* ============================================================ FOOTER (port de Footer.jsx) ============================================================ */ .site-footer { background: var(--bg-dark); color: var(--paper); padding: 80px 0 32px; } .footer-cta { border-bottom: 1px solid rgba(253,250,243,0.15); padding-bottom: 64px; margin-bottom: 48px; } .footer-cta .eyebrow { color: var(--ochre); margin-bottom: 24px; } .footer-cta h2 { font-size: var(--fs-3xl); max-width: 900px; margin-bottom: 40px; color: var(--paper); } .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; } .footer-cols .eyebrow { color: var(--ochre); margin-bottom: 16px; } .footer-brand .footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .footer-brand .footer-brand-row .brand-name { display: inline-flex; flex-direction: column; line-height: 1; font-family: var(--serif); font-weight: 400; color: var(--paper); } .footer-brand .footer-brand-row .brand-name__main { font-size: var(--fs-md); letter-spacing: 0.01em; } .footer-brand .footer-brand-row .brand-name__suffix { font-size: var(--fs-sm); font-style: italic; margin-top: 2px; letter-spacing: 0.01em; } .footer-brand p { color: rgba(253,250,243,0.65); font-size: var(--fs-2xs); line-height: 1.7; max-width: 340px; } .footer-brand .footer-rta { margin-top: 14px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.06em; } /* código RTA — obligatorio en la publicidad */ .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-2xs); } .footer-col a, .footer-col li { color: rgba(253,250,243,0.8); } .footer-col a:hover { color: var(--paper); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-2xs); color: rgba(253,250,243,0.7); flex-wrap: wrap; gap: 16px; } /* 0.7 → ≥4.5:1 sobre --bg-dark (WCAG 1.4.3) */ .footer-bottom .legal { display: flex; gap: 24px; flex-wrap: wrap; } /* ============================================================ RESPONSIVE ============================================================ */ /* ============================================================ TARJETA DE EXPERIENCIA (card-experience.php) ============================================================ */ .exp-card { display: flex; flex-direction: column; background: transparent; text-align: left; color: inherit; } .exp-card__media { position: relative; aspect-ratio: var(--ratio-card); overflow: hidden; border-radius: 2px; background: var(--sand); } .exp-card__media img { transition: transform 520ms cubic-bezier(0.2,0.8,0.2,1); } .exp-card:hover .exp-card__media img { transform: scale(1.04); } .exp-card__badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--ochre); color: var(--bg-dark); font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 2px; } .exp-card__body { padding-top: 20px; display: flex; flex-direction: column; flex: 1; } .exp-card__meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; } .exp-card__kind { color: var(--terra-ink); } .exp-card__region { color: var(--ink-muted); text-align: right; } .exp-card__title { font-size: var(--fs-xl); line-height: 1.15; margin-bottom: 12px; } .exp-card__summary { font-size: var(--fs-2xs); line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; } .exp-card__bottom { margin-top: auto; } .exp-card__specs { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-2xs); color: var(--ink-soft); margin-bottom: 16px; } .exp-card__spec { display: flex; align-items: baseline; gap: 6px; } .exp-card__spec-label { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .exp-card__foot { border-top: 1px solid var(--line); padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .exp-card__price { display: flex; align-items: baseline; } .exp-card__amount { font-family: var(--serif); font-size: var(--fs-xl); font-variant-numeric: lining-nums; } .exp-card__unit { font-size: var(--fs-2xs); color: var(--ink-muted); font-family: var(--sans); margin-left: 6px; } .exp-card__price .eyebrow { display: inline-block; font-family: var(--mono); color: var(--ink-muted); margin: 0 10px 0 0; } .exp-card__cta { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra-ink); white-space: nowrap; transition: color 180ms ease; } .exp-card__arrow { display: inline-block; color: var(--terra-ink); transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1); } .exp-card:hover .exp-card__cta { color: var(--terra-ink); } .exp-card:hover .exp-card__arrow { transform: translateX(4px); } /* Variante grande (primera destacada de la home) */ .exp-card--large { grid-column: span 2; grid-template-columns: 1.15fr 1fr; background: var(--paper); border: 1px solid var(--line); transition: border-color 240ms ease; } .exp-card--large:hover { border-color: var(--ink-soft); } .exp-card--large .exp-card__media { aspect-ratio: auto; height: 100%; min-height: 440px; border-radius: 0; } .exp-card--large .exp-card__body { padding: 48px; justify-content: space-between; } .exp-card--large .exp-card__title { font-size: var(--fs-3xl); } .exp-card--large .exp-card__region { color: var(--terra-ink); } .exp-card--large .exp-card__amount { font-size: var(--fs-2xl); } @media (prefers-reduced-motion: reduce) { .exp-card__media img, .exp-card__arrow { transition: none; } .exp-card:hover .exp-card__media img { transform: none; } .exp-card:hover .exp-card__arrow { transform: none; } } /* ============================================================ HOME ============================================================ */ .home-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .home-section__title { font-size: var(--fs-3xl); max-width: 800px; } .rule { display: inline-block; width: 40px; height: 1px; background: currentColor; vertical-align: middle; } /* Hero */ .home-hero { position: relative; min-height: 100vh; padding: 160px 0 80px; display: flex; align-items: center; } .home-hero__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 56px; align-items: center; } .home-hero__eyebrow { color: var(--terra); margin-bottom: 32px; } .home-hero__eyebrow .rule { margin-right: 12px; } .home-hero__title { font-size: var(--fs-4xl); margin-bottom: 40px; } .home-hero__lead { font-size: var(--fs-md); max-width: 560px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 48px; } .home-hero__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .home-hero__media { height: 620px; min-height: 520px; position: relative; overflow: hidden; background: var(--bg-alt); } .home-hero__media--video { background: var(--bg-dark); } .home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .home-hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: var(--fs-3xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 12px; } /* Trust strip */ .home-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 0; } .home-trust__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .home-trust__name { font-family: var(--serif); font-size: var(--fs-xs); font-style: italic; color: var(--ink-soft); opacity: 0.75; } /* Manifesto */ .home-manifesto { padding: 120px 0; background: var(--paper); } .home-manifesto__title { font-size: var(--fs-3xl); } .home-manifesto__body { padding-top: 20px; } .home-manifesto__body p { font-size: var(--fs-md); line-height: 1.7; color: var(--ink-soft); margin-bottom: 24px; } /* Featured */ .home-featured { background: var(--bg-alt); padding: 120px 0; } .home-featured__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 64px; gap: 24px; } .home-featured__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .home-empty { color: var(--ink-muted); font-style: italic; } /* ===== Sección Experiences (.tmx-*) — diseñada en Claude Design, portada al tema ===== */ .tmx-exps { --ease: cubic-bezier(.2,.8,.2,1); --tmx-feat-media-h: 560px; padding: var(--s9) 0; background: var(--bg-alt); } .tmx-exps__wrap { max-width: 1400px; margin: 0 auto; padding: 0 48px; display: flex; flex-direction: column; gap: var(--s8); } .tmx-eyebrow { font-family: var(--sans); font-size: var(--fs-3xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; } .tmx-rule { height: 1px; background: var(--line); border: 0; margin: 0; } .tmx-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 14px 24px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } .tmx-btn__arrow { transition: transform .32s var(--ease); } .tmx-btn:hover .tmx-btn__arrow { transform: translateX(4px); } .tmx-btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; } .tmx-btn--terra { background: var(--terra); color: var(--bg-dark); } .tmx-btn--terra:hover { background: var(--terra-deep); color: var(--bg-dark); } .tmx-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } .tmx-btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .tmx-exps__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); } .tmx-exps__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-3xl); line-height: 1.02; margin: var(--s4) 0 0; color: var(--ink); text-wrap: balance; } .tmx-exps__title em { font-style: italic; font-weight: 400; display: block; } .tmx-exps__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s4); flex-shrink: 0; padding-bottom: 6px; } .tmx-social { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-2xs); color: var(--ink-soft); } .tmx-social__stars { color: var(--ochre); font-size: var(--fs-xs); letter-spacing: .12em; } .tmx-social__score { font-family: var(--serif); font-size: var(--fs-md); color: var(--ink); font-variant-numeric: lining-nums; } .tmx-social a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; } .tmx-social a:hover { color: var(--terra-ink); } .tmx-feat { position: relative; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; transition: border-color .24s ease; } .tmx-feat:hover, .tmx-feat:focus-within { border-color: var(--ink); } .tmx-feat__media { position: relative; overflow: hidden; min-height: var(--tmx-feat-media-h); background: var(--sand); } .tmx-feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .52s var(--ease); } .tmx-feat:hover .tmx-feat__media img { transform: scale(1.03); } .tmx-badge { position: absolute; top: var(--s5); left: var(--s5); z-index: 2; background: var(--ochre); color: var(--bg-dark); font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 2px; } .tmx-feat__panel { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s7); } .tmx-feat__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.05; margin: 0; color: var(--ink); } .tmx-feat__title a { color: inherit; } .tmx-feat__title a:hover { color: var(--terra-ink); } .tmx-feat__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tmx-feat__title a:focus-visible { outline: none; } .tmx-feat__title a:focus-visible::after { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; } .tmx-feat__desc { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 52ch; text-wrap: pretty; } .tmx-feat__rating { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-2xs); color: var(--ink-soft); } .tmx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); } .tmx-meta__label { font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; } .tmx-meta__value { font-size: var(--fs-xs); color: var(--ink); } .tmx-feat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-top: auto; } .tmx-price__kicker { font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; } .tmx-price__amount { font-family: var(--serif); font-size: var(--fs-2xl); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; } .tmx-price__amount small { font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-muted); margin-left: 6px; } .tmx-feat .tmx-btn { position: relative; z-index: 2; } .tmx-carousel { display: block; } .tmx-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .tmx-carousel__eyebrow { font-family: var(--sans); font-size: var(--fs-3xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; } .tmx-carousel__nav { display: flex; gap: 8px; } .tmx-carousel__arrow { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: var(--fs-md); border-radius: 2px; cursor: pointer; transition: border-color .18s ease, color .18s ease; } .tmx-carousel__arrow:hover { border-color: var(--ink); } .tmx-carousel__arrow:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; } .tmx-carousel__arrow:disabled { opacity: .3; cursor: default; } .tmx-carousel__track { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 8px; } .tmx-carousel__track::-webkit-scrollbar { display: none; } .tmx-slide { flex: 0 0 calc((100% - 3*32px)/4); scroll-snap-align: start; display: flex; flex-direction: column; color: inherit; text-decoration: none; border: 1px solid transparent; border-radius: 2px; padding: 12px; transition: border-color .24s ease; } .tmx-slide__media { aspect-ratio: var(--ratio-card); overflow: hidden; border-radius: 2px; position: relative; display: block; background: var(--sand); } .tmx-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .52s var(--ease); } .tmx-slide__body { padding-top: 16px; display: flex; flex-direction: column; } .tmx-slide__region { font-family: var(--sans); font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; } .tmx-slide__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); color: var(--ink); line-height: 1.08; transition: color .2s ease; } .tmx-slide__meta { font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-soft); margin: 10px 0 16px; } .tmx-slide__rule { height: 1px; background: var(--line); } .tmx-slide__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; } .tmx-slide__price { font-family: var(--serif); font-size: var(--fs-md); color: var(--ink); font-variant-numeric: tabular-nums; } .tmx-slide__price small { font-family: var(--sans); font-size: var(--fs-3xs); color: var(--ink-muted); } .tmx-slide__cta { font-family: var(--sans); font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .tmx-slide__arrow { color: var(--terra-ink); transition: transform .32s var(--ease); } .tmx-slide:hover, .tmx-slide.is-active, .tmx-slide:focus-visible { border-color: var(--ink); outline: none; } .tmx-slide:hover .tmx-slide__title, .tmx-slide.is-active .tmx-slide__title { color: var(--terra-ink); } .tmx-slide:hover .tmx-slide__media img, .tmx-slide.is-active .tmx-slide__media img { transform: scale(1.04); } .tmx-slide:hover .tmx-slide__arrow, .tmx-slide.is-active .tmx-slide__arrow { transform: translateX(4px); } .tmx-slide:focus-visible { box-shadow: 0 0 0 2px var(--terra); } .tmx-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s7); } .tmx-cta__lead { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-lg); line-height: 1.35; color: var(--ink); margin: 0; max-width: 46ch; text-wrap: pretty; } .tmx-cta__actions { display: flex; align-items: center; gap: var(--s4); flex-shrink: 0; flex-wrap: wrap; } @media (max-width: 1024px) { .tmx-slide { flex-basis: calc((100% - 32px)/2); } .tmx-feat { grid-template-columns: 1fr; } .tmx-feat__media { min-height: 0; aspect-ratio: var(--ratio-cover); } .tmx-feat__panel { padding: var(--s6); } } @media (max-width: 900px) { .tmx-exps__head { flex-direction: column; align-items: flex-start; } .tmx-exps__aside { align-items: flex-start; padding-bottom: 0; } .tmx-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .tmx-exps { padding: var(--s8) 0; } .tmx-exps__wrap { padding: 0 24px; gap: var(--s7); } .tmx-slide { flex-basis: 80%; } .tmx-feat__media { aspect-ratio: var(--ratio-cover); } .tmx-feat__foot { flex-direction: column; align-items: flex-start; gap: var(--s5); } .tmx-feat .tmx-btn, .tmx-cta__actions { width: 100%; } .tmx-feat .tmx-btn, .tmx-cta__actions .tmx-btn { justify-content: center; white-space: normal; text-align: center; min-width: 0; } .tmx-cta__actions { flex-direction: column; align-items: stretch; } } @media (max-width: 560px) { .tmx-meta { gap: var(--s4) var(--s5); } } @media (prefers-reduced-motion: reduce) { .tmx-feat__media img, .tmx-slide__media img, .tmx-slide__arrow, .tmx-btn .tmx-btn__arrow { transition: none; } .tmx-feat:hover .tmx-feat__media img, .tmx-slide:hover .tmx-slide__media img, .tmx-slide.is-active .tmx-slide__media img { transform: none; } .tmx-slide:hover .tmx-slide__arrow, .tmx-slide.is-active .tmx-slide__arrow, .tmx-btn:hover .tmx-btn__arrow { transform: none; } .tmx-carousel__track { scroll-behavior: auto; } } /* ===== Bespoke (.tmx-bespoke) — diseñada en Claude Design, portada al tema ===== */ .tmx-bespoke{ --tmx-bg:#FCF6ED; --tmx-bg-dark:#0E4A5E; --tmx-ink:#146983; --tmx-ink-soft:#1F5468; --tmx-ink-muted:#7FA0AB; --tmx-line:#D9CFBC; --tmx-line-soft:#E8DFCB; --tmx-terra:#FE9A7D; --tmx-terra-deep:#E87A5C; --tmx-sand:#FFE3A8; --tmx-serif:'Cormorant Garamond',Georgia,serif; --tmx-sans:'Inter Tight',system-ui,-apple-system,sans-serif; --tmx-fs-3xs:clamp(.6875rem,.663rem + .109vw,.75rem); --tmx-fs-2xs:clamp(.8125rem,.788rem + .109vw,.875rem); --tmx-fs-base:clamp(1.0625rem,1.014rem + .217vw,1.1875rem); --tmx-fs-3xl:clamp(2.75rem,2.065rem + 3.043vw,4.5rem); --tmx-ease:cubic-bezier(0.2,0.8,0.2,1); padding:var(--s9) 0;background:var(--tmx-bg);color:var(--tmx-ink); font-family:var(--tmx-sans);font-size:var(--tmx-fs-base);line-height:1.6; } .tmx-bespoke__inner{max-width:1400px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:var(--s8)} .tmx-bespoke__media{position:relative;min-height:560px;background:var(--tmx-sand);overflow:hidden;border-radius:2px} .tmx-bespoke__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tmx-bespoke--flip .tmx-bespoke__media{order:2} .tmx-bespoke__body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:34rem} .tmx-bespoke__eyebrow{margin:0 0 24px;font-size:var(--tmx-fs-3xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tmx-ink-muted);font-variant-numeric:lining-nums tabular-nums} .tmx-bespoke__title{margin:0 0 28px;font-family:var(--tmx-serif);font-weight:500;font-size:var(--tmx-fs-3xl);line-height:1.04;text-wrap:balance;color:var(--tmx-ink)} .tmx-bespoke__title em{font-style:italic;font-weight:500} .tmx-bespoke__text{margin:0 0 32px;color:var(--tmx-ink-soft);max-width:52ch;text-wrap:pretty} .tmx-bespoke__list{list-style:none;margin:0 0 40px;padding:24px 0 0;width:100%;border-top:1px solid var(--tmx-line-soft);display:flex;flex-wrap:wrap;row-gap:8px;font-size:var(--tmx-fs-2xs);letter-spacing:.02em;color:var(--tmx-ink-muted)} .tmx-bespoke__list li{white-space:nowrap} .tmx-bespoke__list li + li::before{content:"·";margin:0 12px;color:var(--tmx-line)} .tmx-bespoke__cta{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:2px;border:1px solid transparent;background:var(--tmx-terra);color:var(--tmx-bg-dark);text-decoration:none;font-size:var(--tmx-fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background .32s var(--tmx-ease);cursor:pointer} .tmx-bespoke__cta .tmx-bespoke__arrow{transition:transform .32s var(--tmx-ease);font-weight:500} .tmx-bespoke__cta:hover{background:var(--tmx-terra-deep);color:var(--tmx-bg-dark)} .tmx-bespoke__cta:hover .tmx-bespoke__arrow{transform:translateX(4px)} .tmx-bespoke__cta:focus-visible{outline:2px solid var(--tmx-ink);outline-offset:3px} @media (max-width:900px){ .tmx-bespoke__inner{grid-template-columns:1fr;gap:var(--s6)} .tmx-bespoke--flip .tmx-bespoke__media{order:0} .tmx-bespoke__media{min-height:0;aspect-ratio:16/10} .tmx-bespoke__body{max-width:none} } @media (max-width:700px){ .tmx-bespoke{padding:var(--s8) 0} .tmx-bespoke__inner{padding:0 24px} } @media (prefers-reduced-motion:reduce){ .tmx-bespoke__cta,.tmx-bespoke__cta .tmx-bespoke__arrow{transition:none} .tmx-bespoke__cta:hover .tmx-bespoke__arrow{transform:none} } /* ===== Where We Go (.tmx-wwg) — diseñada en Claude Design, mapa horneado a SVG estático ===== */ .tmx-wwg{ --ochre:#FFD065; --cream:#FCF6ED; --ink-muted:#7FA0AB; --bg-dark:#0E4A5E; --wwg-serif:'Cormorant Garamond',Georgia,serif; --wwg-sans:'Inter Tight',system-ui,sans-serif; background:var(--bg-dark); color:var(--cream); } .tmx-wwg__inner{max-width:1400px;margin:0 auto;padding:var(--s10) 48px;display:grid;grid-template-columns:minmax(360px,5fr) 7fr;gap:var(--s9);align-items:center} .tmx-wwg__eyebrow{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin:0 0 var(--s5);font-weight:600;font-variant-numeric:lining-nums tabular-nums} .tmx-wwg__title{font-family:var(--wwg-serif);font-weight:400;font-size:var(--fs-3xl);line-height:1.08;margin:0 0 var(--s6);color:var(--cream);text-wrap:balance} .tmx-wwg__title em{font-style:italic;font-weight:400} .tmx-wwg__lead{font-size:var(--fs-base);line-height:1.65;color:rgba(252,246,237,.82);max-width:52ch;margin:0 0 var(--s7)} .tmx-wwg__list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s7)} .tmx-wwg__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 2px;border-bottom:1px solid rgba(252,246,237,.16);font-family:var(--wwg-serif);font-size:var(--fs-md);cursor:default;transition:opacity .2s ease} .tmx-wwg__row>span:last-child{font-family:var(--wwg-sans);font-size:var(--fs-3xs);letter-spacing:.1em;text-transform:uppercase;color:#A9C6CE;white-space:nowrap} /* muted claro sobre --bg-dark ≥4.5:1 */ .tmx-wwg__row--req{font-style:italic;color:var(--ochre)} .tmx-wwg__map{position:relative} .tmx-wwg__map svg{display:block;width:100%;height:auto} .tmx-wwg__cred{position:absolute;right:0;bottom:-24px;font-size:10px;letter-spacing:.08em;color:rgba(127,160,171,.55);margin:0} .tmx-wwg__key{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:20px;font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)} .tmx-wwg__key span{display:flex;align-items:center;gap:8px} .tmx-wwg__key i{width:8px;height:8px;border-radius:50%;display:inline-block} .tmx-wwg__key i.is-home{background:var(--ochre)} .tmx-wwg__key i.is-core{background:var(--cream)} .tmx-wwg__key i.is-req{background:transparent;border:1px solid var(--ink-muted)} .tmx-city{transition:opacity .32s ease} @media (max-width:1024px){.tmx-wwg__inner{grid-template-columns:1fr;gap:var(--s8);padding:var(--s9) 24px}} @media (max-width:560px){.tmx-wwg__list{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.tmx-wwg__row,.tmx-city{transition:none}} /* ===== Reviews (.tmx-reviews) — diseñada en Claude Design ===== */ .tmx-reviews { background: var(--bg-alt); padding: var(--s9) 0; } .tmx-reviews__wrap { max-width: 1400px; margin: 0 auto; padding: 0 48px; } .tmx-reviews__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s9); align-items: end; } .tmx-reviews__eyebrow { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra-ink); margin: 0 0 28px; } .tmx-reviews__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-3xl); line-height: 1.08; color: var(--ink); margin: 0; text-wrap: balance; } .tmx-reviews__title em { font-style: italic; font-weight: 500; } .tmx-reviews__lead { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); margin: 28px 0 0; max-width: 44ch; } .tmx-reviews__score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .tmx-reviews__score-num { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: clamp(5rem, 3rem + 9vw, 9.375rem); line-height: 0.85; color: var(--ink); } .tmx-reviews__score-stars { color: var(--ochre); font-size: var(--fs-lg); letter-spacing: 5px; margin-top: 20px; } .tmx-reviews__score-label { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-top: 14px; } .tmx-reviews__cards { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; margin-top: 72px; align-items: stretch; } .tmx-review { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 2px; padding: 40px; margin: 0; display: flex; flex-direction: column; gap: 20px; } .tmx-review--lead { padding: 48px; gap: 24px; } .tmx-review__stars { color: var(--ochre); font-size: var(--fs-xs); letter-spacing: 3px; } .tmx-review--lead .tmx-review__stars { font-size: var(--fs-base); } .tmx-review__quote { font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.35; color: var(--ink); margin: 0; flex: 1; text-wrap: pretty; } .tmx-review--lead .tmx-review__quote { font-size: var(--fs-xl); line-height: 1.3; } .tmx-review__foot { border-top: 1px solid var(--line-soft); padding-top: 18px; display: flex; align-items: center; gap: 14px; } .tmx-review--lead .tmx-review__foot { padding-top: 20px; gap: 16px; } .tmx-review__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--sand); color: var(--ink); font-family: var(--serif); font-size: var(--fs-md); font-weight: 500; } .tmx-review--lead .tmx-review__avatar { width: 56px; height: 56px; } .tmx-review__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tmx-review__name { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); } .tmx-review__meta { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .tmx-reviews__platforms { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 48px; align-items: center; border-top: 1px solid var(--line); margin-top: 64px; padding-top: 32px; } .tmx-reviews__plat { display: flex; align-items: baseline; gap: 14px; } .tmx-reviews__plat-name { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } .tmx-reviews__plat-score { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: var(--fs-xl); color: var(--ink); } .tmx-reviews__plat-link { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra-ink); white-space: nowrap; } .tmx-reviews__plat-link:hover { color: var(--ink); } .tmx-reviews__all { justify-self: end; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 14px 24px; white-space: nowrap; transition: color .18s ease, border-color .18s ease; } .tmx-reviews__all:hover { color: var(--terra-ink); border-color: var(--terra-deep); } @media (max-width: 1024px) { .tmx-reviews__cards { grid-template-columns: 1fr 1fr; } .tmx-review--lead { grid-column: 1 / -1; } } @media (max-width: 900px) { .tmx-reviews__head { grid-template-columns: 1fr; gap: var(--s6); align-items: start; } .tmx-reviews__score { align-items: flex-start; text-align: left; } .tmx-reviews__cards { grid-template-columns: 1fr; } .tmx-review--lead { grid-column: auto; } .tmx-reviews__platforms { grid-template-columns: 1fr; gap: 18px; } .tmx-reviews__all { justify-self: start; } } @media (max-width: 700px) { .tmx-reviews { padding: var(--s8) 0; } .tmx-reviews__wrap { padding: 0 24px; } .tmx-review, .tmx-review--lead { padding: 32px; } } /* ===== DMC / For agencies (.tmx-dmc) — diseñada en Claude Design ===== */ .tmx-dmc { max-width: 1400px; margin: 0 auto; padding: var(--s10) 48px; box-sizing: border-box; } .tmx-dmc__panel { position: relative; background: var(--bg-dark); padding: clamp(56px,7vw,96px) clamp(40px,6vw,88px); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(40px,6vw,96px); align-items: center; } .tmx-dmc__frame { position: absolute; inset: 14px; border: 1px solid rgba(252,246,237,.14); pointer-events: none; } .tmx-dmc__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 8px 0; } .tmx-dmc__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; } .tmx-dmc__eyebrow-line { width: 44px; height: 1px; background: var(--ochre); display: inline-block; flex: none; } .tmx-dmc__eyebrow-label { font-size: var(--fs-3xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ochre); font-weight: 600; } .tmx-dmc__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem,4.6vw,4.25rem); line-height: 1.04; color: var(--bg); margin: 0; text-wrap: balance; } .tmx-dmc__title em { font-weight: 400; font-style: italic; } .tmx-dmc__body { margin: 0; font-size: var(--fs-base); line-height: 1.65; color: rgba(252,246,237,.78); max-width: 52ch; } .tmx-dmc__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; } .tmx-dmc__btn { display: inline-flex; align-items: center; gap: 10px; background: var(--terra); color: var(--bg-dark); padding: 16px 28px; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-decoration: none; border-radius: 2px; transition: background .32s cubic-bezier(.2,.8,.2,1); } .tmx-dmc__btn:hover { background: var(--terra-deep); color: var(--bg-dark); } .tmx-dmc__btn-arrow { display: inline-block; transition: transform .32s cubic-bezier(.2,.8,.2,1); } .tmx-dmc__btn:hover .tmx-dmc__btn-arrow { transform: translateX(4px); } .tmx-dmc__btn:focus-visible, .tmx-dmc__link:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; } .tmx-dmc__link { color: rgba(252,246,237,.85); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(252,246,237,.4); padding-bottom: 4px; transition: color .32s ease, border-color .32s ease; } .tmx-dmc__link:hover { color: var(--bg); border-bottom-color: var(--ochre); } .tmx-dmc__trust { margin-top: 20px; padding-top: 24px; border-top: 1px solid rgba(252,246,237,.16); display: flex; align-items: baseline; gap: 12px 26px; flex-wrap: wrap; font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(252,246,237,.55); } .tmx-dmc__trust-label { color: var(--ochre); letter-spacing: .16em; } .tmx-dmc__media { position: relative; align-self: center; } .tmx-dmc__figure { position: relative; margin: 0; z-index: 2; } .tmx-dmc__figure-frame { position: absolute; inset: 0; transform: translate(18px,18px); border: 1px solid var(--ochre); pointer-events: none; } .tmx-dmc__imgwrap { overflow: hidden; position: relative; display: block; background: rgba(252,246,237,.06); } .tmx-dmc__imgwrap img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .52s cubic-bezier(.2,.8,.2,1); } .tmx-dmc__figure:hover img { transform: scale(1.03); } .tmx-dmc__caption { margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(252,246,237,.55); } .tmx-dmc__caption-note { color: rgba(252,246,237,.75); } @media (max-width: 900px) { .tmx-dmc { padding: var(--s8) 24px; } .tmx-dmc__panel { grid-template-columns: 1fr; } .tmx-dmc__figure-frame { transform: translate(12px,12px); } } @media (prefers-reduced-motion: reduce) { .tmx-dmc__btn, .tmx-dmc__btn-arrow, .tmx-dmc__imgwrap img { transition: none; } .tmx-dmc__figure:hover img { transform: none; } } /* ===== Journal index (.tmx-journal) — diseñada en Claude Design ===== */ .tmx-journal a { color: var(--ink); text-decoration: none; } .tmx-journal__wrap { max-width: 1400px; margin: 0 auto; padding: 0 48px; } .tmx-journal__eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .tmx-journal__eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--terra-deep); } /* masthead */ .tmx-journal-mast { padding: 160px 0 var(--s8); } .tmx-journal-mast__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-4xl); line-height: 1.02; margin: var(--s5) 0 0; text-wrap: balance; max-width: 20ch; } .tmx-journal-mast__title em { font-style: italic; font-weight: 400; } .tmx-journal-mast__lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; max-width: 56ch; margin: var(--s5) 0 0; } /* filters */ .tmx-journal-filters { border-top: 1px solid var(--line); padding: var(--s5) 0; } .tmx-journal-filters__row { display: flex; flex-wrap: wrap; gap: var(--s2); } .tmx-journal-chip { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 9px 16px; cursor: pointer; transition: color .32s var(--ease), border-color .32s var(--ease); } .tmx-journal-chip:hover { color: var(--ink); border-color: var(--ink-muted); } .tmx-journal-chip.is-active { color: var(--ink); border-color: var(--ink); } /* featured */ .tmx-journal-feat { display: block; border-top: 1px solid var(--line); padding: var(--s8) 0; } .tmx-journal-feat__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s7); align-items: center; } .tmx-journal-feat__media { aspect-ratio: var(--ratio-cover); border-radius: 2px; overflow: hidden; background: var(--sand); position: relative; } .tmx-journal-feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .52s var(--ease); } .tmx-journal-feat:hover .tmx-journal-feat__media img { transform: scale(1.03); } .tmx-journal-meta { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-ink); } .tmx-journal-meta span { color: var(--ink-muted); } .tmx-journal-feat__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.08; margin: var(--s4) 0 0; text-wrap: balance; } .tmx-journal-feat__excerpt { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.6; margin: var(--s4) 0 0; max-width: 52ch; } .tmx-journal-byline { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); } .tmx-journal-byline__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--olive); color: var(--bg-dark); display: flex; align-items: center; justify-content: center; font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; flex: none; } .tmx-journal-byline__text { font-size: var(--fs-2xs); color: var(--ink-soft); } .tmx-journal-byline__text b { font-weight: 600; color: var(--ink); } .tmx-journal-more { display: inline-flex; align-items: baseline; gap: 9px; margin-top: var(--s5); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--terra-ink); } .tmx-journal-more .a { display: inline-block; transition: transform .32s var(--ease); } .tmx-journal-feat:hover .tmx-journal-more .a, .tmx-journal-card:hover .tmx-journal-more .a { transform: translateX(4px); } /* grid */ .tmx-journal-grid { border-top: 1px solid var(--line); padding: var(--s8) 0; } .tmx-journal-grid__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8) var(--s6); } .tmx-journal-card { display: flex; flex-direction: column; } .tmx-journal-card__media { aspect-ratio: var(--ratio-card); border-radius: 2px; overflow: hidden; background: var(--sand); position: relative; } .tmx-journal-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .52s var(--ease); } .tmx-journal-card:hover .tmx-journal-card__media img { transform: scale(1.04); } .tmx-journal-card .tmx-journal-meta { margin-top: var(--s4); } .tmx-journal-card__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); line-height: 1.1; margin: var(--s2) 0 0; transition: color .32s var(--ease); } .tmx-journal-card:hover .tmx-journal-card__title { color: var(--terra-ink); } .tmx-journal-card__excerpt { color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.55; margin: var(--s2) 0 0; } .tmx-journal-card .tmx-journal-byline { margin-top: var(--s4); } .tmx-journal-card .tmx-journal-byline__avatar { width: 26px; height: 26px; font-size: 10px; } .tmx-journal-card .tmx-journal-more { margin-top: var(--s3); font-size: var(--fs-3xs); } .tmx-journal-empty { padding: var(--s7) 0; text-align: center; color: var(--ink-muted); font-style: italic; } /* CTA */ .tmx-journal-cta { background: var(--bg-dark); color: #EAF3F2; margin-top: var(--s6); } .tmx-journal-cta__inner { padding: var(--s9) 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s6); } .tmx-journal-cta .tmx-journal__eyebrow { color: var(--olive); } .tmx-journal-cta .tmx-journal__eyebrow::before { background: var(--terra); } .tmx-journal-cta__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.08; margin: var(--s4) 0 0; color: #FCF6ED; } .tmx-journal-cta__title em { font-style: italic; font-weight: 400; } .tmx-journal-cta__lead { color: #BFD8D6; font-size: var(--fs-xs); line-height: 1.6; max-width: 46ch; margin: var(--s4) 0 0; } .tmx-journal-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); } .tmx-journal-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease); } .tmx-journal-btn .a { display: inline-block; transition: transform .32s var(--ease); } .tmx-journal-cta .tmx-journal-btn--terra { background: var(--terra); border-color: var(--terra); color: #0E4A5E; } .tmx-journal-cta .tmx-journal-btn--terra:hover { background: var(--terra-deep); border-color: var(--terra-deep); color: #FCF6ED; } .tmx-journal-cta .tmx-journal-btn--terra:hover .a { transform: translateX(4px); } .tmx-journal-cta .tmx-journal-btn--ghost { background: transparent; border-color: rgba(234,243,242,.35); color: #EAF3F2; } .tmx-journal-cta .tmx-journal-btn--ghost:hover { border-color: #EAF3F2; color: #EAF3F2; } /* pagination (output de WP paginate_links type=list) */ .tmx-journal-pages { padding: var(--s7) 0 var(--s9); } .tmx-journal-pages .page-numbers { list-style: none; display: flex; justify-content: center; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0; padding: 0; } .tmx-journal-pages li { display: flex; } .tmx-journal-pages a.page-numbers, .tmx-journal-pages span.page-numbers { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-soft); text-decoration: none; transition: border-color .32s var(--ease), color .32s var(--ease); } .tmx-journal-pages a.page-numbers:hover { border-color: var(--ink-muted); color: var(--ink); } .tmx-journal-pages .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #FCF6ED; } .tmx-journal-pages .page-numbers.dots { border-color: transparent; } .tmx-journal a:focus-visible, .tmx-journal button:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; } @media (max-width: 1024px) { .tmx-journal-grid__cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .tmx-journal-feat__grid { grid-template-columns: 1fr; gap: var(--s5); } .tmx-journal-mast { padding: 140px 0 var(--s7); } } @media (max-width: 700px) { .tmx-journal__wrap { padding: 0 24px; } .tmx-journal-grid__cols { grid-template-columns: 1fr; gap: var(--s7); } .tmx-journal-cta__inner { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .tmx-journal *, .tmx-journal *::before, .tmx-journal *::after { transition: none !important; } .tmx-journal-feat:hover .tmx-journal-feat__media img, .tmx-journal-card:hover .tmx-journal-card__media img, .tmx-journal-more .a { transform: none !important; } } /* ===== Article / single del blog (.tmx-article) — diseñada en Claude Design ===== */ .tmx-article { background: var(--bg); color: var(--ink); } .tmx-article__wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .tmx-article__eyebrow { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 20px; } .tmx-article__back { padding-top: calc(var(--nav-h) + 40px); } .tmx-article__back a, .tmx-article__foot-back { font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .tmx-article__back a:hover, .tmx-article__foot-back:hover { color: var(--ink); } /* header */ .tmx-article__head { max-width: 760px; margin: 0 auto; padding: 40px 24px 0; text-align: center; } .tmx-article__meta { margin: 0 0 24px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); } .tmx-article__cat { color: var(--terra-ink); } .tmx-article__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: var(--fs-3xl); line-height: 1.04; text-wrap: balance; } .tmx-article__byline { margin: 36px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .tmx-article__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--olive); display: flex; align-items: center; justify-content: center; } .tmx-article__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .tmx-article__avatar-ini { color: var(--bg-dark); font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .06em; } .tmx-article__byline-text { margin: 0; font-size: var(--fs-2xs); color: var(--ink-soft); text-align: left; } .tmx-article__byline-text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line); } .tmx-article__byline-text a:hover { color: var(--terra-ink); text-decoration-color: var(--terra-deep); } .tmx-article__licensed { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 2px; padding: 5px 11px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); } .tmx-article__licensed span[aria-hidden] { color: var(--olive-deep); } .tmx-article__licensed--solid { color: var(--ink-soft); background: var(--paper); margin-bottom: 4px; } /* cover */ .tmx-article__cover { max-width: 1100px; margin: 56px auto 0; padding: 0 24px; } .tmx-article__cover-media { aspect-ratio: var(--ratio-cover); background: var(--sand); border-radius: 2px; overflow: hidden; } .tmx-article__cover-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* body */ .tmx-article__body { max-width: 1100px; margin: 0 auto; padding: 64px 24px 96px; } .tmx-article__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 64px; align-items: start; } .tmx-article__content { max-width: 680px; min-width: 0; } .tmx-article__standfirst { margin: 0 0 40px; font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; } .tmx-article__rule { border: 0; height: 1px; background: var(--line); margin: 0 0 40px; } .tmx-article__prose > p { margin: 0 0 28px; line-height: 1.8; color: var(--ink-soft); text-wrap: pretty; } .tmx-article__prose h2 { margin: 56px 0 20px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); line-height: 1.15; color: var(--ink); } .tmx-article__prose h3 { margin: 40px 0 16px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); line-height: 1.2; color: var(--ink); } .tmx-article__prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--terra-deep); } .tmx-article__prose a:hover { color: var(--terra-ink); } .tmx-article__prose ul, .tmx-article__prose ol { margin: 0 0 28px; padding-left: 22px; line-height: 1.8; color: var(--ink-soft); } .tmx-article__prose li { margin-bottom: 8px; } .tmx-article__prose blockquote { margin: 48px 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--terra-deep); } .tmx-article__prose blockquote p { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-lg); line-height: 1.4; color: var(--ink); margin: 0; } .tmx-article__prose img { max-width: 100%; height: auto; border-radius: 2px; display: block; margin: 44px 0; } .tmx-article__prose figure { margin: 44px 0; } .tmx-article__prose figcaption { margin-top: 10px; font-size: var(--fs-2xs); color: var(--ink-muted); } /* rail sticky (desktop) */ .tmx-article__rail { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 28px 24px; } .tmx-article__rail-eyebrow { margin: 0 0 10px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); } .tmx-article__rail-line { margin: 0 0 20px; font-family: var(--serif); font-style: italic; font-size: var(--fs-lg); line-height: 1.3; color: var(--ink); } .tmx-article__rail-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--terra-ink); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .tmx-article__rail-link:hover { color: var(--ink); } /* módulo guía-autor */ .tmx-article__guide { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tmx-article__guide-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 80px; } .tmx-article__guide-photo { max-width: 300px; width: 100%; aspect-ratio: 4/5; background: var(--sand); border-radius: 2px; overflow: hidden; justify-self: center; } .tmx-article__guide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .tmx-article__guide-name { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.05; } .tmx-article__guide-role { margin: 0 0 18px; font-size: var(--fs-2xs); color: var(--ink-soft); } .tmx-article__guide-bio { margin: 22px 0 32px; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; } .tmx-article__guide-cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 2px; background: var(--terra); color: var(--bg-dark); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background .32s var(--ease); } .tmx-article__guide-cta:hover { background: var(--terra-deep); color: var(--bg-dark); } .tmx-article__guide-cta span { transition: transform .32s var(--ease); } .tmx-article__guide-cta:hover span { transform: translateX(4px); } /* experiencias relacionadas */ .tmx-article__related { padding: 96px 0; } .tmx-article__related-title { margin: 0 0 48px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.05; } .tmx-article__related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 40px; max-width: 840px; } /* cierre bespoke */ .tmx-article__bespoke { background: var(--bg-dark); color: #FCF6ED; } .tmx-article__bespoke-inner { max-width: 820px; margin: 0 auto; padding: 104px 24px; text-align: center; } .tmx-article__bespoke-eyebrow { margin: 0 0 24px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ochre); } .tmx-article__bespoke-title { margin: 0 0 40px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.15; text-wrap: balance; color: #FCF6ED; } .tmx-article__bespoke-title em { font-weight: 500; } .tmx-article__bespoke-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .tmx-article__btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 2px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; transition: background .32s var(--ease), border-color .32s var(--ease); } .tmx-article__btn--terra { background: var(--terra); color: var(--bg-dark); } .tmx-article__btn--terra:hover { background: var(--terra-deep); color: var(--bg-dark); } .tmx-article__btn--terra span { transition: transform .32s var(--ease); } .tmx-article__btn--terra:hover span { transform: translateX(4px); } .tmx-article__btn--ghost { border-color: rgba(252,246,237,.4); color: #FCF6ED; } .tmx-article__btn--ghost:hover { border-color: #FCF6ED; color: #FCF6ED; } /* footer del artículo */ .tmx-article__foot { padding: 72px 0 96px; } .tmx-article__more-eyebrow { margin-top: 56px; margin-bottom: 8px; } .tmx-article__more { display: flex; flex-direction: column; } .tmx-article__more-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); } .tmx-article__more-item:hover { color: var(--terra-ink); } .tmx-article__more-title { font-family: var(--serif); font-size: var(--fs-lg); } .tmx-article__more-cat { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); } .tmx-article a:focus-visible, .tmx-article button:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; } /* barra móvil (companion CTA) */ .tmx-article__bar { display: none; } @media (max-width: 900px) { .tmx-article__grid { grid-template-columns: 1fr; gap: 40px; } .tmx-article__rail { display: none; } .tmx-article__guide-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; } .tmx-article__foot { padding-bottom: 140px; } .tmx-article__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .tmx-article__bar.is-dismissed { display: none; } .tmx-article__bar-text { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--fs-xs); line-height: 1.25; min-width: 0; } .tmx-article__bar-actions { display: flex; align-items: center; gap: 10px; flex: none; } .tmx-article__bar-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 2px; background: var(--terra); color: var(--bg-dark); font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .tmx-article__bar-btn:hover { background: var(--terra-deep); color: var(--bg-dark); } .tmx-article__bar-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--ink-muted); font-size: 15px; cursor: pointer; flex: none; } } @media (prefers-reduced-motion: reduce) { .tmx-article__guide-cta, .tmx-article__guide-cta span, .tmx-article__btn, .tmx-article__btn span { transition: none; } .tmx-article__guide-cta:hover span, .tmx-article__btn--terra:hover span { transform: none; } } /* ===== Planifica tu experiencia (.tmx-request) — formulario en dos pasos ===== */ .tmx-request { background: var(--bg); color: var(--ink); } .tmx-request__wrap { max-width: 820px; margin: 0 auto; padding: 160px 24px 120px; } .tmx-request__eyebrow { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .18em; text-transform: uppercase; color: var(--terra-ink); margin: 0 0 20px; } .tmx-request__head { margin-bottom: 48px; } .tmx-request__title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-3xl); line-height: 1.05; margin: 0 0 24px; text-wrap: balance; } .tmx-request__title em { font-style: italic; font-weight: 400; } .tmx-request__lead { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0; } .tmx-request__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* progreso */ .tmx-request__progress { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); flex-wrap: wrap; } .tmx-request__progress-step.is-active { color: var(--ink); } .tmx-request__progress-step small { text-transform: none; letter-spacing: 0; } .tmx-request__progress-sep { flex: 1; min-width: 24px; height: 1px; background: var(--line); } /* pasos */ .tmx-request__step { border: 0; margin: 0; padding: 0; min-width: 0; } .tmx-request__step[hidden] { display: none; } .tmx-request__group { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; } .tmx-request__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 28px; } .tmx-request__field { display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; } .tmx-request__field--half { grid-column: auto; } .tmx-request__label { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); } .tmx-request__field input[type="text"], .tmx-request__field input[type="email"], .tmx-request__field input[type="tel"], .tmx-request__field input[type="number"], .tmx-request__field input[type="date"], .tmx-request__field select, .tmx-request__field textarea { font-family: var(--sans); font-size: var(--fs-base); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; width: 100%; transition: border-color .18s ease; } .tmx-request__field textarea { resize: vertical; min-height: 96px; } .tmx-request__field input:focus, .tmx-request__field select:focus, .tmx-request__field textarea:focus { outline: none; border-color: var(--ink); } .tmx-request__field input.is-invalid { border-color: var(--terra-deep); } .tmx-request__check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin-top: 6px; } .tmx-request__check--block { margin-top: 0; } .tmx-request__check input, .tmx-request__consent input { accent-color: var(--terra-deep); width: 17px; height: 17px; flex: none; } /* chips */ .tmx-request__chips { display: flex; flex-wrap: wrap; gap: 8px; } .tmx-request__chip { position: relative; display: inline-flex; align-items: center; font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 9px 15px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .tmx-request__chip input { position: absolute; opacity: 0; width: 0; height: 0; } .tmx-request__chip:hover { border-color: var(--ink-muted); } .tmx-request__chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); } .tmx-request__chip:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; } /* consent */ .tmx-request__consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-2xs); line-height: 1.5; color: var(--ink-soft); margin: 8px 0 32px; } .tmx-request__consent a { color: var(--terra-ink); text-decoration: underline; text-underline-offset: 2px; } /* acciones */ .tmx-request__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .tmx-request__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 2px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; } .tmx-request__btn--terra { background: var(--terra); color: var(--bg-dark); } .tmx-request__btn--terra:hover { background: var(--terra-deep); color: var(--bg-dark); } .tmx-request__btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } .tmx-request__btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .tmx-request a:focus-visible, .tmx-request button:focus-visible, .tmx-request input:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; } /* errores / éxito */ .tmx-request__errors { border: 1px solid var(--terra-deep); border-radius: 2px; padding: 16px 20px; margin-bottom: 32px; background: rgba(232,122,92,.06); } .tmx-request__errors p { margin: 4px 0; font-size: var(--fs-2xs); color: var(--terra-ink); } .tmx-request__done { padding: 24px 0 40px; } .tmx-request__done-title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.1; margin: 0 0 20px; } .tmx-request__done-title em { font-style: italic; font-weight: 400; } .tmx-request__done-actions { margin-top: 28px; } @media (max-width: 700px) { .tmx-request__wrap { padding: 140px 20px 100px; } .tmx-request__rows { grid-template-columns: 1fr; } .tmx-request__field--half { grid-column: 1 / -1; } } /* Signature */ .home-signature { padding: 120px 0; } .home-signature__grid { grid-template-columns: 1fr 1.2fr; align-items: center; } .home-signature__media { height: 640px; } .home-signature__title { font-size: var(--fs-2xl); margin-bottom: 28px; } .home-signature__body { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-soft); margin-bottom: 32px; } .home-signature__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; padding-top: 24px; border-top: 1px solid var(--line); } .home-fact { font-family: var(--serif); font-size: var(--fs-lg); } .home-signature__facts .eyebrow { margin-bottom: 6px; } /* Regions */ /* Testimonials */ /* Social proof — 3 plataformas (TripAdvisor / Google / GetYourGuide). Alineado al grid editorial: container estándar, head izquierda con eyebrow + título serif + lead. Cards 3 columnas con jerarquía estrellas → rating → plataforma → reviews → CTA. Sin testimonios falsos. */ .home-proof { padding: 120px 0; background: var(--bg-alt); } .home-proof__head { max-width: 720px; margin-bottom: 72px; } .home-proof__head .eyebrow { color: var(--terra); margin-bottom: 24px; } .home-proof__title { font-size: var(--fs-3xl); margin-bottom: 24px; line-height: 1.05; } .home-proof__lead { font-family: var(--serif); font-size: var(--fs-lg); color: var(--ink); line-height: 1.45; margin: 0; max-width: 540px; position: relative; padding-top: 22px; } .home-proof__lead::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 1px; background: var(--terra); } .home-proof__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .home-proof__card { background: var(--paper); border: 1px solid var(--line); } .home-proof__inner { display: flex; flex-direction: column; padding: 32px; color: inherit; text-decoration: none; height: 100%; transition: border-color .2s ease, transform .2s ease; } a.home-proof__inner:hover { border-color: var(--terra); } a.home-proof__inner:hover .home-proof__cta { color: var(--ink); } a.home-proof__inner:hover .home-proof__cta span { transform: translateX(4px); } .home-proof__stars { color: var(--terra); font-size: var(--fs-lg); letter-spacing: 2px; line-height: 1; margin-bottom: 20px; } .home-proof__rating { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .home-proof__rating-num { font-family: var(--serif); font-size: var(--fs-2xl); line-height: 1; color: var(--ink); font-feature-settings: "lnum"; } .home-proof__rating-of { font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .home-proof__platform { font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); margin-bottom: 20px; } .home-proof__count { font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: 24px; } .home-proof__cta { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--terra-ink); display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; } .home-proof__cta span { transition: transform .2s ease; } @media (max-width: 920px) { .home-proof { padding: 80px 0; } .home-proof__grid { grid-template-columns: 1fr; gap: 18px; } .home-proof__head { margin-bottom: 48px; } .home-proof__title { font-size: var(--fs-2xl); } } /* Corporate teaser */ .home-corp-teaser { padding: 0 0 120px; } .home-corp__card { background: var(--ink); color: var(--paper); padding: 80px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .home-corp__title { font-size: var(--fs-2xl); margin-bottom: 24px; color: var(--paper); } .home-corp__body { font-size: var(--fs-xs); line-height: 1.7; color: rgba(253,250,243,0.75); margin-bottom: 32px; max-width: 520px; } .home-corp__media { height: 360px; } /* ============================================================ CATÁLOGO (archive-experience.php) ============================================================ */ .arch-head { padding-top: 160px; padding-bottom: 56px; } .arch-head__kicker { color: var(--terra); margin-bottom: 24px; font-family: var(--mono); } .arch-head__kicker .rule { margin-right: 12px; } .arch-head__title { font-size: var(--fs-3xl); line-height: 1.05; max-width: 720px; margin-bottom: 28px; } .arch-head__lead { font-size: var(--fs-base); color: var(--ink-soft); max-width: 520px; line-height: 1.55; margin-bottom: 20px; } .arch-head__proof { display: flex; align-items: center; gap: 10px; font-size: var(--fs-2xs); color: var(--ink-soft); margin: 0; } .arch-head__proof strong { font-weight: 600; } .arch-head__stars { color: var(--ochre); letter-spacing: 2px; } .arch-head__proof a { border-bottom: 1px solid var(--line); padding-bottom: 1px; } .arch-head__proof a:hover { color: var(--terra-ink); border-color: var(--terra-deep); } .arch-head__dot { color: var(--ink-muted); } .arch-filterbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: var(--nav-h); background: rgba(246,241,232,0.92); backdrop-filter: blur(12px); z-index: 50; } .arch-filterbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; } .arch-types { display: flex; gap: 6px; flex-wrap: wrap; } .arch-chip { padding: 8px 14px; font-size: var(--fs-2xs); letter-spacing: 0.04em; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 2px; transition: all 180ms ease; } .arch-chip:hover { border-color: var(--ink-muted); } .arch-chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .arch-controls { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .arch-select { display: flex; align-items: center; gap: 8px; } .arch-select select { border: none; border-bottom: 1px solid var(--line); padding: 4px 20px 4px 4px; font-size: var(--fs-2xs); background: transparent; color: var(--ink); cursor: pointer; } .arch-select .eyebrow { font-family: var(--mono); color: var(--ink-muted); } .arch-chip { font-family: var(--sans); } .arch-count { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.04em; color: var(--ink-muted); } .arch-grid-wrap { padding: 80px 0 120px; } .arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 48px 40px; } .arch-empty { padding: 80px; text-align: center; color: var(--ink-muted); } .arch-bespoke { background: var(--bg-alt); padding: 100px 0; } .arch-bespoke__title { font-size: var(--fs-2xl); max-width: 900px; margin: 0 auto 32px; } @media (max-width: 900px) { .arch-head { padding-top: 130px; padding-bottom: 40px; } .arch-grid { grid-template-columns: 1fr; } .arch-filterbar__inner { gap: 16px; } } /* ============================================================ FICHA DE EXPERIENCIA (single-experience.php) ============================================================ */ /* PT clears fixed header (~120 con admin bar) + 40px breathing → respiro coherente con el hero de la home (también PT=160 sobre header de 120). PB separa el breadcrumb del hero split que viene debajo. */ .exp-breadcrumb { padding-top: 160px; padding-bottom: 40px; font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); } .exp-breadcrumb a { text-decoration: none; color: inherit; } .exp-breadcrumb a:hover { color: var(--ink); border-bottom: 1px solid currentColor; } .exp-breadcrumb .is-current { color: var(--ink); } .exp-breadcrumb .sep { margin: 0 10px; color: var(--line); font-weight: 300; } /* Pantallas bajas (laptops 13–15"): comprimimos un poco para no robar fold. */ @media (max-height: 860px) { .exp-breadcrumb { padding-top: 140px; padding-bottom: 32px; } } @media (max-height: 720px) { .exp-breadcrumb { padding-top: 128px; padding-bottom: 24px; } } /* Hero split: texto + portada */ .exp-hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 40px; } .exp-hero__kicker { color: var(--terra); margin-bottom: 20px; } .exp-hero__title { font-size: var(--fs-3xl); margin-bottom: 28px; } .exp-hero__lead { font-family: var(--serif); font-size: var(--fs-lg); color: var(--ink); line-height: 1.45; max-width: 540px; margin: 22px 0 0; } .exp-hero__rating { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: -8px 0 4px; text-decoration: none; color: inherit; } a.exp-hero__rating:hover .exp-hero__rating-source { text-decoration: underline; } .exp-hero__stars { color: var(--terra); font-size: var(--fs-md); letter-spacing: 1px; line-height: 1; } .exp-hero__rating-num { font-family: var(--serif); font-size: var(--fs-md); color: var(--ink); font-feature-settings: "lnum"; } .exp-hero__rating-source { font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } /* Mini-CTA editorial — link tipográfico (no botón terra, sin pisar al sidebar) */ .exp-hero__cta { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 28px; padding: 0 0 6px; background: transparent; border: 0; border-bottom: 1px solid var(--terra); cursor: pointer; font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--terra-ink); transition: gap .15s ease, color .15s ease; } .exp-hero__cta:hover:not([disabled]) { gap: 14px; color: var(--ink); } .exp-hero__cta[disabled] { opacity: .6; cursor: progress; } .exp-hero__cta-price { font-family: var(--serif); font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--ink); font-feature-settings: "lnum"; } .exp-hero__cta-arrow { font-size: var(--fs-sm); transition: transform .15s ease; } .exp-hero__cta:hover:not([disabled]) .exp-hero__cta-arrow { transform: translateX(3px); } .exp-hero__cover { height: 460px; position: relative; overflow: hidden; } .exp-hero__cover img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; animation: exp-hero-kenburns 36s ease-in-out infinite alternate; } /* Overlay terra muy sutil — integra la foto con la paleta sin teñirla */ .exp-hero__cover::after { content: ""; position: absolute; inset: 0; background: var(--terra); mix-blend-mode: multiply; opacity: 0.05; pointer-events: none; } /* Ken Burns muy suave en la cover — respiración cinematográfica sin distraer del texto. Loop con alternate para evitar el snap al reiniciar. */ @keyframes exp-hero-kenburns { 0% { transform: scale(1) translate(0%, 0%); } 100% { transform: scale(1.06) translate(-1.5%, -1%); } } /* Respeto a usuarios con sensibilidad al movimiento. */ @media (prefers-reduced-motion: reduce) { .exp-hero__cover img { animation: none; } } /* Caption editorial flotante, abajo-derecha */ .exp-hero__cover-caption { position: absolute; right: 18px; bottom: 18px; padding: 10px 14px; background: rgba(255, 251, 243, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .exp-hero__cover-caption-label { font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); } .exp-hero__cover-caption-name { font-family: var(--serif); font-size: var(--fs-sm); color: var(--ink); line-height: 1.1; } /* Facts: fila auto-ajustable (3–6 columnas según cuántos haya) */ .exp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .exp-fact { padding: 14px 18px; border-right: 1px solid var(--line); } .exp-fact:last-child { border-right: 0; } .exp-fact__k { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); } .exp-fact__v { font-family: var(--serif); font-size: var(--fs-md); line-height: 1.2; margin-top: 4px; color: var(--ink); } .exp-fact__sub { font-size: var(--fs-3xs); color: var(--ink-muted); margin-top: 2px; } /* Galería · asymmetric editorial grid (Conde Nast pattern). Hero shot grande a la izquierda + secundarias a la derecha; el grid se adapta según el número de imágenes (data-count). */ .exp-gallery { display: grid; gap: 14px; aspect-ratio: 16 / 9; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .exp-gallery > .exp-gallery__item:first-child { grid-row: 1 / 3; grid-column: 1 / 2; } .exp-gallery[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 10; } .exp-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .exp-gallery[data-count="2"] > .exp-gallery__item:first-child { grid-row: auto; grid-column: auto; } .exp-gallery[data-count="3"] { grid-template-columns: 2fr 1fr; } .exp-gallery[data-count="4"] { grid-template-columns: 1fr 1fr; } .exp-gallery[data-count="4"] > .exp-gallery__item:first-child { grid-row: auto; grid-column: auto; } .exp-gallery__item { position: relative; overflow: hidden; margin: 0; background: var(--sand); } .exp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); } .exp-gallery__item:hover img { transform: scale(1.04); } /* Overlay terra muy sutil — integra cualquier foto en la paleta */ .exp-gallery__item::after { content: ""; position: absolute; inset: 0; background: var(--terra); mix-blend-mode: multiply; opacity: 0.04; pointer-events: none; transition: opacity .3s ease; } .exp-gallery__item:hover::after { opacity: 0; } .exp-gallery__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,105,131,0.65); color: var(--paper); font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; z-index: 1; } .exp-gallery__caption { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 6px 10px; background: rgba(255,251,243,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); z-index: 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .exp-gallery__item:hover .exp-gallery__caption { opacity: 1; } /* Cuerpo + narrativa */ .exp-main { padding-top: 64px; padding-bottom: 120px; } .exp-main__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: start; } .exp-narrative { min-width: 0; } .exp-section { padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--line); } .exp-narrative > .exp-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .exp-section > .eyebrow { display: block; color: var(--terra); margin-bottom: 16px; } .exp-content { font-size: var(--fs-base); line-height: 1.75; color: var(--ink); } .exp-content p { margin-bottom: 22px; } .exp-content p:last-child { margin-bottom: 0; } .exp-content h2, .exp-content h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 32px 0 12px; } /* Highlights */ .exp-highlights ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; } .exp-highlights li { display: flex; gap: 16px; font-size: var(--fs-xs); line-height: 1.55; color: var(--ink); } .exp-highlights__n { font-family: var(--mono); font-size: var(--fs-3xs); letter-spacing: 0.08em; line-height: 1.55; color: var(--terra-ink); flex: 0 0 32px; padding-top: 2px; position: relative; } .exp-highlights__n::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 16px; height: 1px; background: var(--terra); } /* Itinerario (lista de paradas, como Bókun) */ .exp-stops { list-style: none; counter-reset: stop; padding: 0; margin: 0; } .exp-stop { display: grid; grid-template-columns: 1fr 180px; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line-soft); counter-increment: stop; } .exp-stop:first-child { border-top: 0; padding-top: 0; } .exp-stop__title { font-family: var(--serif); font-size: var(--fs-md); font-weight: 500; color: var(--ink); margin: 0 0 6px; line-height: 1.25; } .exp-stop__title::before { content: counter(stop, decimal-leading-zero); display: inline-block; margin-right: 12px; font-family: var(--mono); font-size: var(--fs-3xs); color: var(--terra-ink); letter-spacing: 0.04em; vertical-align: 2px; } .exp-stop__text { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.6; margin: 0; } .exp-stop__loc { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--terra-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .exp-stop__loc:hover { color: var(--ink); } .exp-stop__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); } .exp-stop__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .exp-stop:not(:has(.exp-stop__media)) { grid-template-columns: 1fr; } /* Incluye / no incluye */ .exp-incex__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .exp-incex__col h4 { font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; } .exp-inc, .exp-exc { list-style: none; font-size: var(--fs-xs); } .exp-inc li, .exp-exc li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; } .exp-inc li::before { content: "+"; color: var(--olive-deep); font-weight: 700; } .exp-exc li { color: var(--ink-muted); } .exp-exc li::before { content: "\2013"; color: var(--terra-ink); font-weight: 700; } /* Good to know / Requirements */ .exp-know ul, .exp-reqs ul, .exp-access ul { list-style: none; } .exp-know li, .exp-reqs li, .exp-access li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-xs); color: var(--ink-soft); } /* Meeting point ampliado */ .exp-meeting__address { font-size: var(--fs-sm); color: var(--ink); margin: 0; } .exp-meeting__map { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--mono); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--terra-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .exp-meeting__map:hover { color: var(--ink); } .exp-meeting__notes { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .exp-meeting__notes p { font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-soft); margin: 0 0 8px; } /* FAQs (details/summary) */ .exp-faqs__list { display: flex; flex-direction: column; } .exp-faq { border-top: 1px solid var(--line-soft); padding: 18px 0; } .exp-faq:first-child { border-top: 0; padding-top: 0; } .exp-faq__q { font-family: var(--serif); font-size: var(--fs-md); color: var(--ink); cursor: pointer; list-style: none; position: relative; padding-right: 32px; line-height: 1.3; } .exp-faq__q::-webkit-details-marker { display: none; } .exp-faq__q::after { content: "+"; position: absolute; right: 4px; top: 0; font-family: var(--mono); font-size: var(--fs-lg); color: var(--terra); transition: transform .2s ease; line-height: 1; } .exp-faq[open] > .exp-faq__q::after { content: "−"; } .exp-faq__a { padding-top: 12px; } .exp-faq__a p { font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-soft); margin: 0 0 10px; } .exp-faq__a p:last-child { margin-bottom: 0; } /* Tarjeta de reserva */ .exp-booking { position: sticky; top: 100px; } .exp-booking__card { background: var(--paper); border: 1px solid var(--line); padding: 32px; } .exp-booking__price { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; } .exp-booking__amount { font-family: var(--serif); font-size: var(--fs-3xl); line-height: 1; } .exp-booking__unit { font-size: var(--fs-2xs); color: var(--ink-muted); margin-top: 6px; } .exp-booking__btn { width: 100%; justify-content: center; } .exp-booking__btn + .exp-booking__btn { margin-top: 10px; } /* Bókun pinta `disabled` mientras carga su JS — mantenemos la apariencia terra. */ .exp-booking__btn.bokunButton[disabled] { opacity: .85; cursor: progress; } .exp-booking__btn.bokunButton:not([disabled]) { cursor: pointer; } .exp-booking__promises { list-style: none; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); } .exp-booking__promises li { display: flex; gap: 10px; padding: 5px 0; font-size: var(--fs-2xs); color: var(--ink-soft); } .exp-booking__promises li::before { content: "\2713"; color: var(--olive-deep); } .exp-booking__cancel { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: var(--fs-2xs); line-height: 1.6; color: var(--ink-muted); } .exp-booking__cancel strong { color: var(--ink); } .exp-guide { padding: 20px 0 0; margin-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; } .exp-guide__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sand); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--serif); color: var(--terra-ink); font-size: var(--fs-md); flex: none; } .exp-guide__avatar img { width: 100%; height: 100%; object-fit: cover; } .exp-guide__name { color: var(--ink); font-weight: 500; font-size: var(--fs-2xs); } .exp-guide__role { font-size: var(--fs-3xs); color: var(--ink-muted); } .exp-related { background: var(--bg-alt); padding: 100px 0; } .exp-related__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; } .exp-related__head .display { font-size: var(--fs-2xl); } .exp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 1024px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 900px) { .exp-hero__split { grid-template-columns: 1fr; gap: 28px; } .exp-hero__title { font-size: var(--fs-2xl); } .exp-hero__cover { height: 320px; } .exp-gallery { grid-template-columns: repeat(3, 1fr); } .exp-main { padding-top: 48px; } .exp-main__grid { grid-template-columns: 1fr; gap: 48px; } .exp-booking { position: static; } .exp-highlights ul { grid-template-columns: 1fr; } .exp-incex__cols { grid-template-columns: 1fr; gap: 28px; } .exp-stop { grid-template-columns: 1fr; gap: 16px; } .exp-stop__media { aspect-ratio: 16 / 9; } .exp-related__grid { grid-template-columns: 1fr; } .home-hero__grid, .home-2col, .home-signature__grid, .home-corp__card { grid-template-columns: 1fr; gap: 40px; } .home-hero { min-height: 0; padding: 130px 0 64px; } .home-hero__media { height: 360px; min-height: 0; } .home-featured__grid { grid-template-columns: 1fr; } .exp-card--large { grid-column: auto; grid-template-columns: 1fr; } .exp-card--large .exp-card__media { min-height: 320px; } .exp-card--large .exp-card__body { padding: 32px; } .home-corp__card { padding: 40px; } .home-trust__inner { gap: 16px 24px; } } @media (max-width: 860px) { /* Sólo el padding LATERAL. Con el shorthand `padding: 0 24px` se reseteaba padding-top a 0 y, al ir esta regla DESPUÉS (misma especificidad) que los offsets de plantilla cuyo contenedor es `.container` (`.exp-breadcrumb` en la ficha y la taxonomía, `.arch-head` en el archivo), el header fijo se comía el breadcrumb/H1 en móvil (solapamiento). En longhand se conserva el padding-top de cada plantilla. El hero de la home no se ve afectado: su offset vive en `.home-hero__inner` con mayor especificidad. */ .container, .container-narrow { padding-left: 24px; padding-right: 24px; } .nav-inner, .site-header.is-scrolled .nav-inner { padding: 18px 24px; position: relative; } .nav-toggle { display: inline-flex; margin: -10px -10px -10px 0; } /* Panel desplegable: menú + acciones, todo apilado */ .nav-collapse { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 18px 28px -20px rgba(14,74,94,0.4); padding: 8px 24px 24px; max-height: calc(100vh - 100%); overflow-y: auto; } .site-header.is-menu-open .nav-collapse { display: flex; } .nav-collapse .nav-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav-menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-xs); } .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a { border-bottom-color: var(--line-soft); } .nav-right { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 18px; } .nav-agencies { padding-left: 0; border-left: 0; } .lang-switch { justify-content: flex-start; } .nav-cta { width: 100%; justify-content: center; padding: 14px 18px; } /* ── FIX móvil · MENÚ ABIERTO ──────────────────────────────────────────── Con `.is-menu-open` el header pasa a fondo sólido crema y TODO su texto vuelve a tinta oscura. En la home el header lleva `is-over-hero`, que pinta enlaces, lang-switch y toggle en BLANCO (var --paper): sobre el panel crema del menú desplegado quedaban blanco-sobre-blanco → invisibles (BUG 1). Estos selectores llevan `.is-menu-open` (y, para la home, además `.is-over-hero`) para GANAR por especificidad a las reglas de hero.css. Contraste --ink #146983 sobre --paper #FFFBF3 ≈ 5.9:1 y hover --terra-ink #B04830 ≈ 4.5:1 → WCAG 2.2 1.4.3 (AA). Sólo aplica en móvil y con el menú abierto: no toca desktop ni el hero. */ .site-header.is-menu-open, .site-header.is-menu-open.is-over-hero { background: var(--paper); border-bottom-color: var(--line); } .site-header.is-menu-open .nav-inner .brand .brand-mark, .site-header.is-menu-open .nav-inner .brand .brand-name, .site-header.is-menu-open.is-over-hero .nav-inner .brand .brand-mark, .site-header.is-menu-open.is-over-hero .nav-inner .brand .brand-name, .site-header.is-menu-open .nav-collapse .nav-menu a, .site-header.is-menu-open .nav-collapse .lang-switch, .site-header.is-menu-open .nav-collapse .lang-switch a.is-active, .site-header.is-menu-open .nav-collapse .nav-agencies, .site-header.is-menu-open .nav-toggle, .site-header.is-menu-open.is-over-hero .nav-toggle { color: var(--ink); } .site-header.is-menu-open .nav-collapse .nav-menu a:hover, .site-header.is-menu-open .nav-collapse .nav-agencies:hover { color: var(--terra-ink); } .footer-cols { grid-template-columns: 1fr; gap: 32px; } .footer-cta h2 { font-size: var(--fs-2xl); } } /* ─── Aviso de cookies (Consent Mode v2 / RGPD). Markup en tme-core/inc/tracking.php ─── */ .tmx-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(14, 74, 94, 0.45); } .tmx-consent[hidden] { display: none; } .tmx-consent__inner { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 18px 22px; } .tmx-consent__text { flex: 1 1 380px; margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--label); } .tmx-consent__text a { color: var(--terra-ink); text-decoration: underline; text-underline-offset: 2px; } .tmx-consent__actions { display: flex; gap: 12px; flex-shrink: 0; } .tmx-consent__actions .btn { padding: 10px 20px; } @media (max-width: 640px) { .tmx-consent { left: 10px; right: 10px; bottom: 10px; } .tmx-consent__inner { padding: 16px; gap: 14px; } .tmx-consent__actions { width: 100%; } .tmx-consent__actions .btn { flex: 1; justify-content: center; } }