/* css/styles.css */
/* --- TIPOGRAFIA CORPORATIVA MITSUBISHI (MMC) --- */
/* Solo hay tres pesos. Los rangos evitan que el navegador falsee un bold
sintetico en los 600/800/900 que ya usaba el sitio. */
@font-face {
font-family: 'MMC';
src: url('../assets/fonts/mmc-regular.woff2') format('woff2');
font-weight: 100 450;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MMC';
src: url('../assets/fonts/mmc-medium.woff2') format('woff2');
font-weight: 451 650;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MMC';
src: url('../assets/fonts/mmc-bold.woff2') format('woff2');
font-weight: 651 900;
font-style: normal;
font-display: swap;
}
/* ============================================================================
TOKENS
El arte es "FINAL Japon2026.ai" y tiene UNA sola superficie: el papel washi
crema. No hay cielo, no hay frontera, no hay pagina 1 azul y pagina 2 papel.
Portada y vistas interiores comparten el mismo crema y el mismo patron, y lo
unico que cambia entre ellas es la densidad del patron. Por eso los tokens ya
no estan agrupados por superficie sino por rol.
PALETA MEDIDA SOBRE EL PROPIO .ai (referencia, no todo llega a token: lo que
vive DENTRO de los SVG del arte no necesita variable CSS porque los ficheros
traen sus colores planos):
papel washi crema #FCF1E6 linea del patron #DFC298
tinta / nubes #242348 negro torii #000000
sombra torii #524E4B bruma torii #7F7A77
rojo sol #E10628 rojo profundo #B80025
nieve del Fuji #FFFFFF gris azulado #C6D0D2
rojo corporativo Mitsubishi #E4002B (logotipo y CTAs de marca)
TODOS los ratios de este bloque estan calculados contra el crema #FCF1E6
(luminancia relativa 0.8932), que es el fondo real de cada pieza de texto.
========================================================================== */
:root {
/* --- SUPERFICIE: PAPEL WASHI ---
El crema es la base de TODO el sitio, portada incluida. --paper-hi y
--paper-sunk se quedan dentro de la misma familia calida: un blanco puro
como papel elevado sobre crema se lee como un agujero, asi que sube hacia
el marfil en vez de al #FFF. */
--paper: #FCF1E6; /* washi crema, superficie base */
--paper-hi: #FFFAF3; /* papel elevado: tarjetas y paneles */
--paper-sunk: #F4E7D6; /* papel hundido: sub-bloques y tablas */
/* --- LINEAS ---
La tan es la linea del propio patron seigaiha: 1.53:1 sobre el crema, o
sea DECORATIVA por construccion. Nunca lleva texto encima ni hace de
separador semantico. La hairline de tinta si separa datos (tablas, bordes
de tarjeta) y por eso es navy y no tan. */
--line-washi: #DFC298;
/* Las nueve hairlines de tinta estaban escritas a mano en rgba(20,19,18,...)
-el gris-negro viejo- repartidas por seis componentes. Pasan a dos tokens
sobre el navy nuevo. Suben de alfa (.07/.08 -> .10 y .16 -> .18) porque el
navy es bastante mas claro que el #141312 que sustituye y a igual alfa la
linea desaparecia. */
--hair-ink: rgba(36, 35, 72, .10); /* bordes de tarjeta y separadores */
--hair-ink-2: rgba(36, 35, 72, .18); /* borde de chip y cabecera de tabla */
/* --- TINTA ---
La tinta principal deja de ser el gris-negro #141312 y pasa al navy del
arte: es el color de las nubes y del trazo de la ilustracion, y es lo que
cose el texto con el dibujo. */
--ink: #242348; /* titulares y cuerpo 13.4:1 sobre crema */
--ink-soft: #403E60; /* cuerpo secundario 9.1:1 */
--ink-mute: #55536F; /* notas, captions, th 6.6:1 */
--ink-faint: #6E6C88; /* limite legal para texto >=16px 4.5:1 */
--color-white: #FFFFFF;
/* --- ROJO ---
Sobre el crema los dos rojos claros PIERDEN contraste respecto al papel
viejo (#F8F7F6): el corporativo #E4002B baja de 4.53:1 a 4.35:1 y el rojo
sol del arte #E10628 se queda en 4.43:1. Ninguno de los dos llega a 4.5:1,
asi que los dos quedan reservados a RELLENOS y a TEXTO GRANDE (minimo 3:1,
que cumplen de sobra). Todo texto rojo pequeno usa el rojo profundo del
arte, #B80025, que da 6.15:1 y es el unico que cumple AA a 12-14px. */
--color-red: #E4002B; /* corporativo Mitsubishi 4.35:1 - fills y display */
--color-red-sun: #E10628; /* rojo del sol del arte 4.43:1 - fills y display */
--color-red-deep: #B80025; /* rojo profundo del arte 6.15:1 - texto pequeno */
--red-wash: rgba(228, 0, 43, .055);
--red-hair: rgba(228, 0, 43, .26);
/* --- VELOS SOBRE FOTOGRAFIA ---
El de papel convierte las fotos de la agenda en marca de agua y deja el
itinerario en tinta sobre papel. Las piezas donde la foto si se ve entera
tienen cada una SU velo: un unico velo compartido entre tiles y
experiencias no puede cumplir a la vez con dos alturas de tarjeta y dos
posiciones de etiqueta, y acababa dejando el texto en 1.8-3.1:1. */
--veil-paper: rgba(252, 241, 230, .94); /* es --paper a mano: no se deriva solo */
--veil-ink: rgba(36, 35, 72, .93); /* velo de pantalla completa (nav, galeria) */
/* El velo de Experiencias se habia ido al otro extremo. Estaba en .34 de alfa
justo donde caia el texto -tag y nombre en 1.2:1, ilegibles- y al taparlo
subio a .92/.86 manteniendose denso hasta el 88%: eso arreglo la lectura
pero apago las fotos, que es de lo que va la vista.
La salida no es elegir entre foto y texto sino quitarle al velo el trabajo
de sostener el tag: ese pasa a chip solido (ver .exp-tag) y se paga su
propio contraste. Con eso el velo solo tiene que sostener BLANCO, que
aguanta con mucha menos densidad.
El reparto sale de donde cae el texto, no de un numero redondo: a 390px la
tarjeta mide 227px y la pila -20 de padding, tres lineas de .exp-desc, el
nombre a dos lineas- arranca al 63% de su altura. Por eso el tramo denso
aguanta hasta el 72% y no antes. Medido sobre el peor caso, un pixel blanco
puro de la foto: a .70 de alfa el compuesto queda en L=0.146 y el blanco da
5.4:1. .exp-name son 18px bold, o sea 13.5pt, por DEBAJO del umbral de
texto grande de WCAG (14pt bold), asi que le aplica el 4.5:1 entero.
Del 86% para arriba el velo ya casi no existe y el tercio alto de cada foto
se ve limpio, que es donde de verdad estorbaba. */
--veil-exp: linear-gradient(to top, rgba(36,35,72,.80) 0%,
rgba(36,35,72,.76) 40%,
rgba(36,35,72,.70) 72%,
rgba(36,35,72,.26) 86%,
rgba(36,35,72,0) 100%);
/* --- TIPOGRAFIA ---
Solo tres pesos porque solo hay tres ficheros: pedir 600 u 800 no da un
peso intermedio y 700 y 900 devuelven exactamente el mismo woff2. La
jerarquia la cargan el tamano, el color y el tracking. */
--font-main: 'MMC', 'Helvetica Neue', Arial, sans-serif;
--font-brush: 'Permanent Marker', cursive;
--fw-regular: 400;
/* MMC solo tiene 400 / 500 / 700, asi que el peso intermedio se pide con su
numero real. El corte entre @font-face baja a 450 (regular 100-450, medium
451-650) para que ese 500 caiga en mmc-medium en vez de en el regular. Con
un 600 el fallback -Helvetica Neue / Arial, mientras font-display: swap-
sintetizaba un semibold que no existe en la familia. */
--fw-medium: 500;
--fw-bold: 700;
--fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12.5px;
--fs-sm: 14px; --fs-base: 16px; --fs-md: 18px;
--fs-lg: 21px; --fs-xl: 26px;
--fs-2xl: clamp(20px, 3vw, 28px);
/* el titular de la pagina 2 ocupa ~1/8 de la altura de pagina: 50px de tope
lo dejaba en un h2 de dashboard */
--fs-display: clamp(38px, 8.5vw, 84px);
--lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; --lh-loose: 1.75;
--tr-tight: .01em; --tr-wide: .08em; --tr-mega: .18em;
/* --- ESPACIADO (base 4) --- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
--gutter: clamp(16px, 5vw, 32px);
--measure: 68ch;
/* --- RADIOS --- */
--r-xs: 2px; --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
/* --- SOMBRAS ---
La ilustracion es plana: la profundidad viene de elevacion minima y sombra
larga y difusa, nunca de volumen ni de degradados en las piezas. Las tres
se retonan al navy del arte: sobre crema una sombra gris-neutra vira a
sucio, y el azul cielo de --sh-float ya no tiene de donde salir.
El filete rojo de 1-2px de --sh-card/--sh-lift pasa del #E42827 de la
ilustracion vieja al #B80025 del arte nuevo. */
--sh-card: 0 1px 0 rgba(184,0,37,.06), 0 10px 26px -14px rgba(36,35,72,.20);
--sh-lift: 0 2px 0 rgba(184,0,37,.09), 0 18px 38px -16px rgba(36,35,72,.28);
--sh-float: 0 22px 50px -18px rgba(36,35,72,.32);
/* --- MOVIMIENTO --- */
--dur-fast: .16s; --dur-base: .26s; --dur-slow: .42s;
--ease-out: cubic-bezier(.2, .7, .3, 1);
/* --- Z-INDEX --- */
--z-decor: 0; --z-particles: 1; --z-content: 2;
--z-navbtn: 500; --z-nav: 600; --z-gallery: 700; --z-wipe: 9999;
/* --- PATRON WASHI (ficheros reales del arte, no data-URI) ---
Los dos tiles salen recortados del propio .ai y EMPALMAN por repeticion,
asi que van como background-image con background-repeat y no como ![]()
.
Ninguno de los dos trae fondo propio util: el crema lo pone siempre el
background-color de debajo.
OJO con los tamanos: el tile de seigaiha NO es cuadrado (320x182 en el
fichero, 1.758:1). Poniendole un background-size cuadrado los abanicos
salen aplastados y el empalme deja de casar, asi que los dos valores del
background-size mantienen la proporcion del fichero. El de flores si es
cuadrado (700x700). */
--washi-tile: url("../assets/images/art/washi-seigaiha.svg");
--blooms-tile: url("../assets/images/art/washi-blooms.svg");
--washi-size: 240px 136.5px; /* 320:182 del fichero */
--blooms-size: 520px 520px;
/* Capa de crema translucida que se pone ENCIMA del patron en las vistas
interiores. Es la unica forma de bajar la presencia de un background-image
sin duplicar elementos ni tocar el fichero: aplana la linea tan hacia el
crema y su contraste cae de 1.53:1 a ~1.09:1, o sea marca de agua real
detras de parrafos largos. En el hero NO se aplica: alli el patron es la
escenografia y va a plena fuerza. */
--washi-veil: linear-gradient(rgba(252,241,230,.74), rgba(252,241,230,.74));
/* seigaiha vectorial de repuesto, en la linea tan del arte, para las
superficies NAVY (nav overlay): el fichero real lleva discos crema opacos
y sobre navy taparia el velo entero. Aqui solo van los arcos. */
--seigaiha-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36' viewBox='0 0 64 36'%3E%3Cg fill='none' stroke='%23DFC298' stroke-width='1.3' opacity='0.14'%3E%3Cpath d='M0 36a32 32 0 0 1 64 0'/%3E%3Cpath d='M0 36a23 23 0 0 1 64 0' transform='translate(-16 0)'/%3E%3Cpath d='M0 36a14 14 0 0 1 64 0' transform='translate(16 0)'/%3E%3C/g%3E%3C/svg%3E");
/* Flor de ciruelo: mismo motivo que el tile washi-blooms (cinco circulos de
petalo abiertos, boton central y ocho estambres), redibujado en trazo navy
para que aguante suelto sobre el crema. En el tile va en tan porque alli es
trama; suelto a 34px la tan se pierde (1.53:1) y no se lee como marca. */
--bloom-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23242348' stroke-width='1.5'%3E%3Ccircle cx='37.3' cy='18.4' r='14.3'/%3E%3Ccircle cx='51.5' cy='32.1' r='14.3'/%3E%3Ccircle cx='42.9' cy='49.8' r='14.3'/%3E%3Ccircle cx='23.4' cy='47.0' r='14.3'/%3E%3Ccircle cx='20.0' cy='27.7' r='14.3'/%3E%3C/g%3E%3Cg stroke='%23242348' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M35 35 47.4 36.7M35 35 42.5 45M35 35 33.3 47.4M35 35 25 42.5M35 35 22.6 33.3M35 35 27.5 25M35 35 36.7 22.6M35 35 45 27.5'/%3E%3C/g%3E%3Cg fill='%23242348'%3E%3Ccircle cx='47.4' cy='36.7' r='2.6'/%3E%3Ccircle cx='42.5' cy='45' r='2.6'/%3E%3Ccircle cx='33.3' cy='47.4' r='2.6'/%3E%3Ccircle cx='25' cy='42.5' r='2.6'/%3E%3Ccircle cx='22.6' cy='33.3' r='2.6'/%3E%3Ccircle cx='27.5' cy='25' r='2.6'/%3E%3Ccircle cx='36.7' cy='22.6' r='2.6'/%3E%3Ccircle cx='45' cy='27.5' r='2.6'/%3E%3C/g%3E%3Ccircle cx='35' cy='35' r='5.2' fill='%23E10628'/%3E%3C/svg%3E");
}
/* Utilidad de superficie: el crema con su patron ya velado. Es exactamente lo
que pintan las vistas interiores, extraido para poder aplicarlo a mano a
cualquier isla de papel suelta. */
.paper-tex {
background-color: var(--paper);
background-image: var(--washi-veil), var(--washi-tile);
background-size: auto, var(--washi-size);
background-repeat: repeat, repeat;
}
/* ============================================================================
BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sin scroll-behavior: smooth. router.js hace window.scrollTo(0,0) dentro de
onCover, con el paraguas tapando la pantalla, y da por hecho que el salto al
top es instantaneo; scrollTo() sin `behavior` explicito hereda el valor CSS y
anima, y la animacion de scroll de Chrome escala con la distancia y supera de
largo los 0.38s que tarda el wipe en destapar. Saliendo del final de Tips el
usuario veia la pagina auto-scrolleando con la vista nueva ya descubierta.
No hay un solo enlace ancla interno en index.html que aproveche el smooth. */
body {
font-family: var(--font-main);
font-weight: var(--fw-regular);
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--ink);
/* el documento entero es washi crema: ya no hay una portada azul que repinte
su propia superficie encima */
background-color: var(--paper);
background-image: var(--washi-veil), var(--washi-tile);
background-size: auto, var(--washi-size);
background-repeat: repeat, repeat;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
[data-view] {
/* svh y no vh: con vh la barra de direcciones de iOS provoca un salto y
recorta el hero justo por la fecha */
min-height: 100vh;
min-height: 100svh;
width: 100%;
}
[data-view][hidden] { display: none; }
/* router.js hace .focus() sobre la seccion en cada navegacion: sin esto
aparece un halo alrededor de la vista entera al cambiar de pantalla */
[data-view]:focus,
[data-view]:focus-visible { outline: none; }
:where(button, a, [role="button"], [tabindex]):focus-visible {
outline: 2px solid var(--color-red);
outline-offset: 3px;
border-radius: var(--r-xs);
}
/* La portada ya no es un cielo azul saturado, asi que el anillo rojo se ve
igual de bien alli que en las vistas interiores: se retira el calado en
blanco, que sobre el crema era practicamente invisible. */
/* ============================================================================
WIPE DE TRANSICION (paraguas)
Las medidas viven en transitions.js y estan calculadas para teselar el
circulo; aqui solo se pinta.
========================================================================== */
/* --- LA PINCELADA ---
Sustituye al iris de paraguas de 16 varillas del sitio de distribuidores. Ese
gesto -abrir y cerrar desde el centro- era su firma; este es el del arte de
este viaje, donde el sol esta pintado a brocha con el canto roto.
El contenedor recorta: el trazo mide DOS viewports de ancho y hay que poder
sacarlo de cuadro por los dos lados sin que aparezcan barras de scroll. */
.wipe-brush {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: var(--z-wipe);
}
/* preserveAspectRatio="none" en el SVG: el trazo se estira al viewport a
proposito. Un pincel real tampoco conserva su proporcion segun la mano lo
arrastra, y asi el canto irregular llega igual de roto a 390px que a 1920. */
.wipe-brush__stroke {
position: absolute;
top: 0;
left: 0;
width: 200vw;
height: 100%;
display: block;
will-change: transform;
}
/* ============================================================================
NAV
========================================================================== */
.nav-button {
position: fixed;
right: var(--sp-6);
bottom: var(--sp-6);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-red);
border: none;
color: var(--color-white);
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--sh-lift);
z-index: var(--z-navbtn);
transition: background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
/* el hover se hunde al rojo profundo del arte; antes era un #C4001F suelto que
no estaba en ninguna paleta y que se diferenciaba de --color-red-deep en un
solo digito */
.nav-button:hover { background: var(--color-red-deep); transform: translateY(-2px); }
.nav-button:focus-visible {
outline: 2px solid var(--color-white);
outline-offset: 3px;
box-shadow: var(--sh-lift), 0 0 0 6px var(--red-hair);
}
.nav-button[hidden] { display: none; }
#nav-overlay {
position: fixed;
inset: 0;
background-color: var(--veil-ink);
background-image: var(--seigaiha-svg);
background-size: 64px 36px;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
z-index: var(--z-nav);
display: flex;
align-items: center;
justify-content: center;
padding: var(--gutter);
}
#nav-overlay[hidden] { display: none; }
/* sin transform ni opacity propios: nav-overlay.js los escribe inline con GSAP
y cualquier valor de aqui pelearia con la animacion de apertura */
.nav-overlay__panel {
background: var(--paper-hi);
padding: var(--sp-6);
border-radius: var(--r-md);
box-shadow: var(--sh-float);
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 280px;
max-width: 100%;
}
.nav-overlay__panel button {
font-family: var(--font-main);
font-weight: var(--fw-medium);
font-size: var(--fs-md);
line-height: 1;
letter-spacing: var(--tr-tight);
text-transform: none;
color: var(--ink);
background: none;
border: none;
border-bottom: 1px solid var(--hair-ink);
border-radius: var(--r-sm);
padding: var(--sp-4) var(--sp-2);
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
gap: var(--sp-4);
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
padding-left var(--dur-fast) var(--ease-out);
}
.nav-overlay__panel button lord-icon { flex-shrink: 0; }
.nav-overlay__panel button:hover,
.nav-overlay__panel button:focus-visible {
background: var(--red-wash);
color: var(--color-red-deep);
padding-left: var(--sp-4);
}
.nav-overlay__panel button:last-child { border-bottom: none; }
/* ============================================================================
HOME - PAPEL WASHI
Ya no hay telon azul: la portada es el mismo crema que el resto del sitio,
con el patron washi a plena fuerza y la ilustracion del torii encima.
========================================================================== */
[data-view="grid"] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* el padding superior pasa a .hero-stage, que es quien abre la seccion */
padding: 0 var(--gutter);
/* El patron del body tiene que verse: por debajo del hero la portada son otros
~1000px -"Antes de volar", los tiles y el pie- y con un background-color
OPACO aqui quedaban en crema liso, la unica superficie del sitio sin grano.
Dentro del hero manda .hero-washi, que va a plena fuerza y tapa a este. */
background-color: transparent;
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
/* --- La caja de la portada ---
Toda la escenografia se posiciona contra ESTA caja y no contra la seccion:
.hero-washi es inset:0 y el torii cuelga de su borde inferior. Mientras la
seccion media poco mas de una pantalla el reparto funcionaba, pero al
colgarle "Antes de volar" la seccion paso de ~1263px a ~2350px en movil y la
ilustracion caia fuera del primer pliegue. Fijando la caja a una pantalla, el
reparto vuelve a ser el del arte independientemente de lo que cuelgue por
debajo. */
.hero-stage {
position: relative;
/* sangra el gutter de la seccion: el patron y el torii van a sangre */
width: calc(100% + var(--gutter) * 2);
margin: 0 calc(var(--gutter) * -1);
padding: clamp(20px, 5.2vh, 44px) var(--gutter) 0;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
/* tres bandas: logos arriba, la puerta centrada en el aire que sobre, y la
cartela al pie. space-between reparte y la puerta no necesita margenes
magicos para quedar en su sitio a cualquier alto de pantalla. */
justify-content: flex-start;
padding-bottom: clamp(16px, 3.5vh, 40px);
background-color: var(--paper);
/* el torii sangra por el borde inferior: sin esto asoma por debajo del hero
y se cruza con "Antes de volar" */
overflow: hidden;
isolation: isolate;
}
/* --- Capa 0: el patron washi ---
Los dos tiles del arte, uno encima del otro y los dos a plena fuerza: aqui
el patron NO es marca de agua sino la escenografia, y por eso no lleva el
velo de crema que si llevan las vistas interiores.
Orden: las flores van en la capa de ARRIBA y el seigaiha debajo, que es como
estan compuestos en el .ai. El crema lo pone el background-color, no los
SVG. Es aria-hidden en el HTML y no intercepta punteros: es escenografia. */
.hero-washi {
position: absolute;
inset: 0;
z-index: var(--z-decor);
pointer-events: none;
background-color: var(--paper);
/* Tres capas y el orden importa: el DEGRADADO A BLANCO va arriba del todo,
tapando los dos tiles. Es la aplicacion de color del arte -la textura esta,
pero degradada a blanco por la cabecera-, y ademas resuelve dos cosas de
paso: el logotipo en positivo cae sobre blanco, que es su fondo de guia, y
la banda de registros deja de competir con la trama justo donde hay mas
texto.
El corte esta al 52% y no antes: es donde arranca el dintel del torii, o
sea que la trama recupera su fuerza justo cuando entra la ilustracion. */
background-image:
linear-gradient(to bottom,
#FFFFFF 0%,
rgba(255, 255, 255, .96) 14%,
rgba(255, 255, 255, .74) 30%,
rgba(255, 255, 255, .30) 43%,
rgba(255, 255, 255, 0) 52%),
var(--blooms-tile),
var(--washi-tile);
background-repeat: no-repeat, repeat, repeat;
background-size: 100% 100%, var(--blooms-size), var(--washi-size);
background-position: center top, center top, center top;
}
/* --- Capa 1: LA PUERTA ---
El torii es el eje de la portada y comparte fila con el indice de secciones.
Se dimensiona con la proporcion EXACTA del SVG (1170.38 x 1035.47 = 1.1303:1)
y no "a ojo": al repartir el ancho con el menu, cualquier caja de otra
proporcion apaisaria el dibujo dentro de su hueco.
Se dimensiona por ANCHO, con la altura derivada del aspect-ratio, y el ancho
sale de un min() de tres limites: el viewport, la altura disponible y un tope
duro. Asi nunca se deforma -que es lo que pasaria con height + max-width, donde
el max-width gana y aplasta la caja- y nunca desborda el pliegue. */
.gate {
position: relative;
z-index: var(--z-content);
width: clamp(200px, min(42vw, 31vh * 1.1303), 430px);
aspect-ratio: 1170.38 / 1035.47;
/* SIN margin:0 auto. Como item de .gate-row los margenes automaticos se comen
todo el espacio libre de la fila y empujaban el indice contra el borde
derecho, con 360px de vacio en medio. El centrado lo hace el
justify-content del contenedor. */
flex: none;
}
.gate__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
/* --- El indice de secciones ---
Antes esto eran cinco noren colgados del dintel con el rotulo girado 90
grados. Fallaba en las tres cosas que tiene que hacer un menu: se leia mal
-habia que ladear la cabeza-, se confundia con la ilustracion, y en reposo no
daba ninguna senal de ser pulsable.
El indice va AL LADO del torii, que es donde el .ai pone el lettering, y usa
la escalera clasica: numero, filete y rotulo. Numero en el rojo profundo del
arte (6.15:1 sobre crema) y rotulo en la tinta navy (13.4:1). */
/* El torii y su cartela van apilados y centrados entre si; el indice se alinea
con el centro de ESA columna, no con el centro del hero. */
.gate-col {
display: flex;
flex-direction: column;
align-items: center;
}
.gate-row {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 2.4vw, 44px);
width: 100%;
/* el margin auto absorbe TODO el hueco libre del hero y descuelga el conjunto
de la banda de registros: sin el, el dintel del torii quedaba pegado al
borde inferior de la banda. El padding fija el minimo cuando no sobra aire. */
margin-top: auto;
padding-top: clamp(16px, 4vh, 56px);
}
.menu {
display: flex;
flex-direction: column;
/* ancho fijo y no min-width: como item flexible, con min-width la caja crecia
y el indice se descolgaba del torii en pantallas anchas */
width: min(34vw, 268px);
flex: none;
}
/* La rejilla fija las cuatro columnas -numero, filete, rotulo, flecha- para que
los cinco renglones alineen entre si aunque el numero cambie de ancho. */
.menu__item {
display: grid;
grid-template-columns: auto 34px 1fr auto;
align-items: center;
gap: clamp(8px, 1vw, 14px);
width: 100%;
padding: clamp(9px, 1.5vh, 15px) 2px;
background: none;
border: 0;
border-bottom: 1px solid var(--hair-ink-2);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: color var(--dur-base) var(--ease-out);
}
.menu__item:first-child { border-top: 1px solid var(--hair-ink-2); }
.menu__num {
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-wide);
color: var(--color-red-deep);
font-variant-numeric: tabular-nums;
}
/* el filete crece hacia la derecha al pasar: es la senal mas barata de que la
fila responde, y no mueve ni un pixel de texto */
.menu__rule {
height: 2px;
background: var(--line-washi);
transform-origin: left center;
transition: transform var(--dur-base) var(--ease-out),
background-color var(--dur-base) var(--ease-out);
}
.menu__label {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-tight);
line-height: var(--lh-snug);
text-decoration: 2px solid transparent underline;
text-underline-offset: 5px;
transition: text-decoration-color var(--dur-base) var(--ease-out);
}
/* La flecha aparece al pasar y no en reposo: en reposo, cinco flechas sobre el
washi compiten con el arte. El hueco lo reserva la columna de la rejilla, asi
que al aparecer no empuja el rotulo. */
.menu__arrow {
font-size: var(--fs-md);
color: var(--color-red-deep);
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.menu__item:hover,
.menu__item:focus-visible { color: var(--color-red-deep); }
.menu__item:hover .menu__rule,
.menu__item:focus-visible .menu__rule {
transform: scaleX(1.5);
background: var(--color-red);
}
.menu__item:hover .menu__label,
.menu__item:focus-visible .menu__label { text-decoration-color: var(--color-red); }
.menu__item:hover .menu__arrow,
.menu__item:focus-visible .menu__arrow { opacity: 1; transform: translateX(0); }
.menu__item:focus-visible { outline: 3px solid var(--color-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.menu__rule,
.menu__arrow { transition: none; }
.menu__item:hover .menu__rule,
.menu__item:focus-visible .menu__rule { transform: none; }
}
/* .gate-row entra en la lista: .hero-washi es absoluto con --z-decor, asi que
cualquier hija del hero que se quede en static se pinta POR DEBAJO del patron.
El torii se salvaba porque .gate trae su propio z-index; el indice, que no lo
tenia, desaparecia entero. */
.grid-logo,
.gate-row,
.gate,
.gate-caption,
.pre-trip,
.grid-footer { position: relative; z-index: var(--z-content); }
/* La cartela al pie de la puerta. En el .ai el lettering no esta ENCIMA del
torii sino a su lado; aqui el eje vertical del hero lo ocupa la puerta entera,
asi que baja al pie y se lee como cartela, no como titular flotando. */
.gate-caption {
text-align: center;
margin-top: clamp(6px, 1.4vh, 18px);
}
/* Un solo logotipo y centrado. Murieron la pleca negra del arte viejo, el
lockup de AMDIM -que en la pagina de prensa no va- y el separador entre los
dos; con una sola pieza no hay extremos que enfrentar. Tambien se va la
hairline inferior: sobre el blanco del degradado partia la portada con una
linea que el arte no tiene. */
.grid-logo {
display: flex;
justify-content: center;
width: 100%;
padding: clamp(6px, 1.4vh, 16px) 0 0;
}
.grid-logo img { width: auto; display: block; }
/* Version en POSITIVO sobre el blanco del pliegue: diamante rojo y logotipo en
tinta, que es el "uso principal" de la guia sobre fondo claro y lo que muestra
la aplicacion de color del arte. Sin placa, sin sombra y sin contorno. */
.grid-logo__mmc {
height: clamp(52px, 9vw, 86px);
}
/* En el arte el lettering cae en el tercio alto, por encima del dintel del
torii y con el vacio de washi por delante. El margin baja respecto al arte
viejo (que lo llevaba a ~45% para posarlo sobre la ladera del Fuji) porque
ahora la ilustracion ocupa la mitad inferior entera. */
.grid-title {
line-height: 1;
margin: clamp(16px, 5vh, 64px) auto 0;
}
/* El lettering de pincel del arte nuevo. Deja de heredar color: el SVG trae sus
propios planos (JAPÓN en negro, 2026 en el rojo sol #E10628), asi que ni
`color` ni currentColor pintan nada aqui.
Se cambian tambien los dos drop-shadow: los del arte viejo eran azul cielo y
servian para despegar un lettering BLANCO de un fondo azul. Aqui el lettering
es oscuro sobre crema (18.9:1 el negro, 4.4:1 el rojo, los dos de sobra para
un display de este tamano) y lo unico que hace falta es un halo de crema por
si el titulo llegara a solaparse con el dintel del torii en pantallas bajas:
separa las dos tintas sin ensuciar el trazo. */
.grid-title__art {
/* El viewBox del lettering es 597.20 x 270.52 (2.208:1), asi que cada 100px
de ancho son 45px de alto: a los 780px del arte viejo se comia 353px de
hero. Baja a 600px, que es aproximadamente la mitad del ancho del torii,
que es la proporcion que tienen en el .ai. */
/* Baja de 600px a 400: aqui el lettering ya no es EL titular de la portada
-ese papel lo hace la puerta- sino la cartela a su pie. A 600px la caja de
tres bandas (logos + puerta + cartela) sumaba 938px y se salia de una
pantalla de 900, y overflow:hidden le cortaba la mitad al trazo. */
width: min(27vw, 235px);
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 0 8px rgba(252, 241, 230, .95))
drop-shadow(0 0 2px rgba(252, 241, 230, 1));
}
/* Unico texto pequeno del hero. La placa azul translucida del arte viejo se
cambia por una de crema OPACO -no por un simple contorno-: en pantallas bajas
la cabecera baja lo justo para rozar el sol pincelado del torii, y sobre ese
rojo un texto de 12.5px en tinta se hunde. Con la placa el par es siempre
tinta secundaria sobre crema, 9.1:1, pase lo que pase por detras. El contorno
tan del patron es lo que la ata al resto de la portada. */
.grid-dates {
position: relative;
z-index: 1;
display: inline-block;
margin-top: var(--sp-5);
padding: 6px 16px;
border-radius: var(--r-pill);
background: var(--paper);
border: 1px solid var(--line-washi);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-mega);
text-transform: uppercase;
color: var(--ink-soft);
opacity: 1;
}
/* --- ANTES DE VOLAR: los dos registros previos al viaje ---
Es la primera parada del viajero. Ya no hay problema de contraste que
resolver -el fondo era un cielo azul donde el blanco caia a 2.95:1 y aqui hay
parrafos de 16px-, pero el bloque sigue necesitando SEPARARSE de la portada:
sobre el mismo crema y el mismo patron se leeria como una continuacion del
hero. Por eso sube al papel elevado (marfil, 14.4:1 con la tinta), se le
pone el filete tan del patron y conserva --sh-float, ya retonado al navy.
Sobre esa superficie valen tal cual las piezas de tarjeta ya resueltas:
.tip-tag, .tip-title y .tip-link. */
/* Los dos registros ya no son una isla de papel COLGANDO del hero, sino una
franja DENTRO de el y por encima de la puerta: hay que hacerlos antes de
viajar y tienen fecha limite, asi que no pueden quedar por debajo de la
navegacion. Como ahora comparten pantalla con la puerta y la cartela, la
tarjeta se aplana a una banda de una sola altura: el titulo a la izquierda y
los dos formatos a la derecha. Sin la sombra flotante -que ahi arriba la
leia como modal- y con el filete rojo de aviso en el canto. */
.pre-trip {
width: 100%;
max-width: 1000px;
margin-top: clamp(10px, 2.2vh, 24px);
padding: clamp(10px, 1.6vh, 16px) clamp(14px, 2.2vw, 26px);
background-color: var(--paper-hi);
border: 1px solid var(--line-washi);
border-left: 4px solid var(--color-red);
border-radius: var(--r-sm);
color: var(--ink);
text-align: left;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
align-items: center;
gap: clamp(10px, 2vw, 30px);
}
/* la marca de sakura separaba dos bloques apilados; en banda no hay nada que
separar */
.pre-trip .divider { display: none; }
/* el numero del counter ya ordena los dos formatos: la etiqueta "Formato 1"
repetia esa misma informacion y en banda no cabe */
.pre-trip .tip-tag { display: none; }
/* "Importante" en rojo es lo que convierte el bloque en aviso y no en una
seccion mas: se pidio en la junta que fuera lo primero que salte a la vista.
Va en --color-red-deep porque es texto pequeno (el rojo de marca a este
tamano se queda en 3.4:1 sobre papel). */
.pre-trip__flag {
grid-column: 1;
grid-row: 1;
text-align: left;
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-mega);
text-transform: uppercase;
color: var(--color-red-deep);
margin-bottom: var(--sp-2);
}
.pre-trip__title {
grid-column: 1;
grid-row: 2;
align-self: start;
text-align: left;
font-size: var(--fs-base);
font-weight: var(--fw-bold);
letter-spacing: .01em;
line-height: var(--lh-tight);
color: var(--ink);
}
/* el .divider del bloque es la misma marca de sakura de las vistas interiores */
/* real: el orden de los dos registros importa y el numero sale de un
counter, no del HTML, para que no haya dos fuentes de verdad. */
.pre-trip__steps {
counter-reset: pre-trip;
list-style: none;
display: grid;
grid-column: 2;
grid-row: 1 / span 2;
grid-template-columns: auto auto;
gap: clamp(10px, 1.6vw, 24px);
margin-top: 0;
}
/* dos columnas: el disco rojo en la primera, todo el texto en la segunda */
.pre-trip__step {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--sp-4);
align-content: start;
min-width: 0;
}
.pre-trip__step > * { grid-column: 2; min-width: 0; }
/* el disco cubre las filas de etiqueta y titulo para no forzar la altura de
ninguna de las dos */
.pre-trip__step::before {
counter-increment: pre-trip;
content: counter(pre-trip);
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-red);
color: var(--color-white);
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
line-height: 1;
}
/* en columna, los dos pasos se separan con la misma hairline roja de las
tarjetas; en dos columnas la hairline se pone de pie (ver breakpoint 700) */
/* en banda los dos formatos van uno al lado del otro y la hairline separadora
se pone de pie */
.pre-trip__step + .pre-trip__step {
border-left: 1px solid var(--red-hair);
padding-left: clamp(10px, 1.6vw, 24px);
}
/* el .tip-link es inline-block, pero como item de grid se blockifica y su
subrayado cruzaria toda la columna */
.pre-trip__step .tip-link { justify-self: start; }
#grid-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: var(--z-particles);
pointer-events: none;
}
/* Aqui vivian .tile-grid, .tile y .tile-label: el mosaico de cinco polaroids
con icono y rotulo. Era el molde del sitio de distribuidores y es lo que
delataba el clon; la navegacion se muda al indice junto a la puerta. */
/* El pie se queda solo con la franja de copyright: la ilustracion es la puerta
y vive dentro del hero. */
.grid-footer {
text-align: center;
width: calc(100% + var(--gutter) * 2);
margin: 0 calc(var(--gutter) * -1);
padding-top: 0;
}
/* La franja de pie se apoya en la tinta del arte -el navy de las nubes- y no en
el azul cielo, que ya no existe. El texto va en el propio crema del papel:
13.4:1, que es de lejos el par mas contrastado del sitio y hace que el pie
cierre la pagina en negativo, como el sello de una estampa. */
.grid-footer .footer-copy {
margin: 0;
padding: var(--sp-5) var(--gutter) var(--sp-6);
font-size: var(--fs-3xs);
letter-spacing: var(--tr-wide);
color: var(--paper);
background: var(--ink);
}
/* sin uso en el HTML actual; se dejan coherentes por si vuelven */
.grid-footer .footer-brand {
font-size: var(--fs-md);
font-weight: var(--fw-regular);
letter-spacing: var(--tr-mega);
text-transform: uppercase;
color: var(--paper);
}
.grid-footer .footer-tagline {
font-size: var(--fs-3xs);
letter-spacing: var(--tr-mega);
text-transform: uppercase;
color: var(--paper);
margin-top: var(--sp-1);
}
/* ============================================================================
VISTAS INTERIORES - PAPEL
Mismo crema y MISMO patron que la portada: es lo que hace que las seis vistas
se lean como un solo sistema y no como una portada ilustrada con cinco
pantallas de datos colgando. La diferencia es la densidad: aqui el seigaiha
va bajo el velo de crema (--washi-veil), que aplana la linea tan de 1.53:1 a
~1.09:1 sobre el fondo, y las flores del segundo tile se retiran del todo.
Con eso el patron se percibe como grano del papel y no compite con parrafos
de 16px. El punto unico de entrada del retema de superficie es esta regla.
========================================================================== */
[data-view="agenda"],
[data-view="hospedaje"],
[data-view="experiencias"],
[data-view="tips"],
[data-view="recomendaciones"] {
position: relative;
isolation: isolate;
padding: 0 var(--gutter) var(--sp-24);
background-color: var(--paper);
background-image: var(--washi-veil), var(--washi-tile);
background-size: auto, var(--washi-size);
background-repeat: repeat, repeat;
color: var(--ink);
}
/* Las vistas interiores son washi de borde a borde: ni una pincelada de azul ni
una linea de horizonte. Se retiran la franja de cielo y la cresta de montanas
que abrian TODAS las vistas; la ilustracion se queda donde le toca, en la
portada. */
.view-header {
position: relative;
text-align: center;
max-width: 1160px;
margin: 0 auto var(--sp-12);
padding: var(--sp-16) 0 0;
}
.view-header::before,
.view-header::after { content: none; }
.view-header > * { position: relative; z-index: 1; }
/* Titular rojo integro y pesado. Sobre el crema #E4002B baja de 4.53:1 a
4.35:1, pero --fs-display arranca en 38px: el minimo aplicable es el de texto
grande, 3:1, y lo cumple con holgura. Lo que NO puede hacer este rojo es
bajar a tamano de cuerpo (ver --color-red-deep). */
.view-header h2 {
font-size: var(--fs-display);
font-weight: var(--fw-bold);
text-transform: uppercase;
/* tracking positivo: el -.025em de la pagina 2 solo vale para caja baja */
letter-spacing: .02em;
line-height: var(--lh-tight);
color: var(--color-red);
}
.view-header h2 span { color: var(--color-red-deep); }
/* La marca de sakura del arte viejo pasa a ser la flor de ciruelo del tile
washi-blooms, redibujada en trazo navy con el boton en rojo sol: es el mismo
motivo que corre por el fondo, sacado del patron y puesto de pie. */
.divider {
width: 26px;
height: 26px;
background: var(--bloom-doodle) center / contain no-repeat;
border-radius: 0;
transform: none;
margin: var(--sp-5) auto 0;
}
.view-intro {
max-width: 34em;
margin: var(--sp-6) auto 0;
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--ink-soft);
}
.view-intro em { font-style: italic; color: var(--color-red-deep); }
/* Doodles de flor de ciruelo, el mismo motivo del patron a tamano grande: solo
sangran por esquinas, jamas invaden la columna de texto y como mucho dos por
pantalla. Van al 12% de opacidad y no al 90% como los de sakura: el trazo es
navy y no un contorno rosa, asi que a plena fuerza competiria con el texto. */
[data-view="tips"]::before,
[data-view="tips"]::after,
[data-view="hospedaje"]::before,
[data-view="hospedaje"]::after,
[data-view="recomendaciones"]::before,
[data-view="recomendaciones"]::after {
content: '';
position: absolute;
pointer-events: none;
/* negativo, no 0: un positionado a 0 pinta por encima del contenido en flujo
y el doodle acabaria cruzando por delante de las tarjetas. Con -1 queda
entre el papel y el texto, que es la unica capa donde puede vivir. */
z-index: -1;
/* ~13-15% del ancho de pantalla, que es la proporcion que ocupan en el arte */
width: clamp(130px, 15vw, 230px);
height: auto;
aspect-ratio: 1;
background: var(--bloom-doodle) center / contain no-repeat;
opacity: .12;
}
/* esquina inferior derecha */
[data-view="tips"]::before,
[data-view="hospedaje"]::before,
[data-view="recomendaciones"]::before {
right: -40px;
bottom: 60px;
transform: rotate(24deg);
}
/* y la esquina opuesta: en el arte los motivos sangran por arriba-izquierda y
por abajo-derecha, nunca por una sola */
[data-view="tips"]::after,
[data-view="hospedaje"]::after,
[data-view="recomendaciones"]::after {
top: -30px;
left: -50px;
transform: rotate(-16deg);
}
/* El daruma no existe en el arte nuevo. Tips cierra su esquina con la propia
ilustracion del torii, que es la firma del arte: mismo fichero que el hero,
a tamano de ornamento y casi transparente. El aspect-ratio se corrige al del
viewBox (1170.38 x 1035.47) para que `contain` no deje franjas muertas. */
[data-view="tips"]::before {
background-image: url("../assets/images/art/torii-fuji.svg");
aspect-ratio: 1170 / 1035;
width: clamp(160px, 20vw, 300px);
opacity: .10;
transform: rotate(0deg);
}
/* ============================================================================
AGENDA
El velo pasa de negro a papel: las once fotos sobreviven como marca de agua
y el itinerario entero se lee en tinta sobre papel, como la pagina 2.
========================================================================== */
.agenda {
max-width: 900px;
margin: 0 auto;
border-top: none;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.agenda-item {
background: var(--paper-hi);
border: 1px solid var(--hair-ink);
border-radius: var(--r-md);
box-shadow: var(--sh-card);
overflow: hidden;
transition: box-shadow var(--dur-base) var(--ease-out);
}
.agenda-item:has(.agenda-body.open) { box-shadow: var(--sh-lift); }
/* --- DIA 5: Lanzamiento Oficial Montero ---
Es la razon del viaje, asi que tiene que verse antes de abrir el acordeon,
pero es UN dia de siete y no puede romper la pila: nada de tarjeta mas alta,
ni de tipografia mas grande, ni de fondo saturado.
El destaque se reparte en tres senales debiles que suman:
1. filete rojo de 4px en el canto izquierdo. Solo crece el border-left (de
1px a 4px): con box-sizing:border-box el borde exterior de la tarjeta no
se mueve ni un pixel, se desplaza el contenido 3px hacia dentro, asi que
la columna de tarjetas sigue perfectamente alineada.
2. cabecera con el lavado rojo al 5.5%, el mismo que ya usa el hover del
acordeon: sobre ese compuesto la tinta sigue dando 12.9:1.
3. elevacion de reposo = la de hover (--sh-lift), que es lo que hace que la
tarjeta parezca levantada aunque este cerrada.
Y ninguna de las tres toca el tamano ni el peso del texto. */
.agenda-item--montero {
border-left: 4px solid var(--color-red);
box-shadow: var(--sh-lift);
}
.agenda-item--montero .agenda-header { background: var(--red-wash); }
/* el hover tiene que seguir notandose: si se quedara en --red-wash la cabecera
destacada seria la unica del acordeon sin respuesta al raton */
.agenda-item--montero .agenda-header:hover { background: rgba(228, 0, 43, .11); }
/* sin opacity ni transform propios: main.js anima estas cabeceras con GSAP y
los escribe inline al entrar en la vista */
.agenda-header {
display: grid;
grid-template-columns: 104px 1fr auto;
gap: var(--sp-3);
align-items: center;
padding: var(--sp-5);
cursor: pointer;
background: none;
transition: background var(--dur-fast) var(--ease-out);
}
.agenda-header:hover { background: var(--red-wash); }
.agenda-header:focus-visible { outline: 2px solid var(--color-red); outline-offset: -2px; }
/* unico uso del manuscrito en todo el sitio: rima con el trazo de brocha del
titulo y convierte los once acordeones en pestanas escritas a mano.
Permanent Marker solo tiene un peso: pedir 700 dispararia un bold sintetico. */
.agenda-day {
font-family: var(--font-brush);
font-size: var(--fs-lg);
font-weight: 400;
text-transform: none;
line-height: 1;
color: var(--ink);
}
/* La fecha se leia demasiado clara en la junta. Se descarto el rojo (compite
con el + del acordeon y da sensacion de alerta) y se subio a tinta secundaria
en bold: 10.1:1 sobre papel, sin robarle jerarquia al numero de dia. */
.agenda-day small {
display: block;
font-family: var(--font-main);
font-size: var(--fs-3xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--ink-soft);
margin-top: var(--sp-1);
}
/* frases, no etiquetas: en versalitas se leen peor y ocupan mas */
.agenda-title {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: 0;
text-transform: none;
line-height: var(--lh-snug);
color: var(--ink-soft);
}
/* sin transition de transform: main.js escribe style.transform inline al abrir
y cerrar, y el +/- es textContent real, no un pseudo-elemento */
.agenda-arrow {
font-size: var(--fs-lg);
color: var(--color-red);
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--red-wash);
}
.agenda-body {
position: relative;
background-size: cover;
background-position: center;
isolation: isolate;
/* ponytail: grid 0fr->1fr anima a la altura real del contenido. No volver a
max-height, que recortaba los dias largos del itinerario. */
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.agenda-body::before {
content: '';
position: absolute;
inset: 0;
background: var(--veil-paper);
z-index: -1;
}
.agenda-body__inner { overflow: hidden; color: var(--ink); }
.agenda-body.open { grid-template-rows: 1fr; }
.agenda-body.open .agenda-body__inner { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.agenda-lead {
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--ink-soft);
margin-bottom: var(--sp-4);
}
/* Etiqueta del dia destacado: va dentro del cuerpo, antes de la timeline, y es
lo unico solido en rojo de toda la agenda. Solida y no lavada porque tiene
que leerse como el rotulo del acto y no como una nota mas: el blanco sobre
#E4002B da 4.85:1, que cumple AA incluso a tamano de cuerpo, y aqui va a
18px medium. La vineta es el mismo triangulo del diamante Mitsubishi que ya
usan las listas de tips, calado en blanco. */
.agenda-flag {
/* block y no flex: en flex el nodo de texto y el se convierten en
dos items independientes, se les cuela el gap por medio y -lo importante-
dejan de poder romper juntos, asi que en movil "Lanzamiento Oficial" y
"MONTERO" se quedaban en una linea cada uno o desbordaban. Como bloque, la
frase es un solo flujo de texto y rompe donde le toca. */
display: block;
background: var(--color-red);
color: var(--color-white);
border-radius: var(--r-sm);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-5);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-tight);
line-height: var(--lh-snug);
}
.agenda-flag::before {
content: '';
display: inline-block;
width: 11px;
height: 11px;
margin-right: var(--sp-3);
background: var(--color-white);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* el nombre del modelo es lo unico que cambia de peso: no hace falta subir el
cuerpo entero para que "Montero" sea lo que se lee primero */
.agenda-flag strong {
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: var(--tr-wide);
}
/* linea de tiempo del dia */
.timeline { list-style: none; display: flex; flex-direction: column; gap: var(--sp-5); margin: 0; padding: 0; }
.tl-item {
display: grid;
grid-template-columns: 92px 1fr;
gap: var(--sp-4);
padding-left: 0;
}
.tl-item::before { content: none; }
.tl-time {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--color-red-deep);
letter-spacing: 0;
padding-top: 1px;
white-space: nowrap;
}
.tl-body { border-left: 2px solid var(--red-hair); padding-left: var(--sp-4); }
.tl-title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--ink);
line-height: var(--lh-snug);
margin-bottom: var(--sp-1);
}
.tl-body p { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-soft); }
.tl-body p + p { margin-top: var(--sp-2); }
/* los !important se conservan: pelean con .tl-body p, que es igual de
especifico y va despues en la cascada */
.tl-note {
font-size: var(--fs-sm) !important;
line-height: var(--lh-body) !important;
color: var(--ink-mute) !important;
margin-top: var(--sp-2) !important;
}
.tl-note strong { color: var(--ink); }
.tl-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tl-tag {
font-size: var(--fs-3xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--ink-mute);
background: var(--paper-hi);
border: 1px solid var(--hair-ink-2);
border-radius: var(--r-pill);
padding: 5px 10px;
}
/* chip solido: es el unico dato del itinerario que hay que leer de un vistazo.
El prefijo lo pone el CSS y no el HTML porque en el PDF va DENTRO del propio
recuadro ("Dress Code: Casual elegante"): sin el, un chip que solo dice
"CASUAL ELEGANTE" no se distingue del de comida mas que por el color. */
.tl-tag--dress {
color: var(--color-white);
background: var(--color-red-deep);
border-color: var(--color-red-deep);
}
.tl-tag--dress::before { content: 'Dress code: '; }
/* Aqui vivian .tl-groups, .agenda-split y .timeline--compact: piezas del
itinerario de distribuidores -diez dias, con un dia que partia al grupo en
dos rutas paralelas-. La agenda de prensa va de Dia 0 a Dia 6 y su unico dia
con dos ramas, el 6 con las salidas por Haneda y por Narita, se resuelve con
dos .flight-block. Ninguna de las siete clases aparecia ya en el HTML. */
/* vuelos. Cuatro columnas no caben en 320px: la tabla scrollea dentro de su
bloque para que la pagina no scrollee nunca en horizontal. */
.flight-block {
margin: var(--sp-4) 0;
background: var(--paper-sunk);
border-radius: var(--r-md);
padding: var(--sp-4);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.flight-airline {
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--color-red-deep);
margin-bottom: var(--sp-2);
}
.flight-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--fs-sm); }
.flight-table th {
text-align: left;
font-size: var(--fs-3xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--ink-mute);
padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
border-bottom: 1px solid var(--hair-ink-2);
}
.flight-table td {
padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
color: var(--ink);
border-bottom: 1px solid var(--hair-ink);
vertical-align: top;
}
/* ============================================================================
HOSPEDAJE
========================================================================== */
/* fuera el truco de rejilla negra con gap: con border-radius el negro asomaria
por las esquinas de cada tarjeta */
.hotels-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
background: none;
max-width: 1000px;
margin: 0 auto;
}
.hotel-card {
position: relative;
background: var(--paper-hi);
border: 1px solid var(--hair-ink);
border-radius: var(--r-md);
box-shadow: var(--sh-card);
overflow: hidden;
cursor: pointer;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.hotel-card:hover,
.hotel-card:focus-within { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.hotel-card:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
.hotel-img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease-out);
}
.hotel-card:hover .hotel-img { transform: scale(1.04); }
.hotel-info { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.hotel-city {
font-size: var(--fs-3xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-mega);
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: var(--sp-2);
}
/* nombres propios: sin versalitas */
.hotel-name {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
text-transform: none;
letter-spacing: var(--tr-tight);
line-height: var(--lh-tight);
color: var(--ink);
}
.hotel-name span { color: var(--color-red); }
.hotel-desc {
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--ink-soft);
margin-top: var(--sp-3);
}
.hotel-address {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--hair-ink);
}
.hotel-address p {
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--ink-soft);
margin-top: var(--sp-1);
}
.stat-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--ink-mute);
}
/* sin uso en el HTML actual */
.hotel-stats {
display: flex;
gap: var(--sp-8);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--hair-ink);
}
.stat-value { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-top: var(--sp-1); color: var(--ink); }
/* la flecha avanza al pasar el raton por la tarjeta: es la unica pista de que
la tarjeta entera es un boton */
.hotel-gallery-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-tight);
color: var(--color-red-deep);
margin-top: var(--sp-4);
transition: gap var(--dur-fast) var(--ease-out);
}
.hotel-card:hover .hotel-gallery-hint { gap: 12px; }
.hotel-details { max-width: 1100px; margin: var(--sp-16) auto 0; }
.hotel-details__title {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink);
padding-bottom: var(--sp-3);
border-bottom: 2px solid var(--color-red);
margin-bottom: var(--sp-6);
}
.hotel-details__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
background: none;
}
/* --- GALERIA DE HOTEL --- */
.hotel-gallery {
position: fixed;
inset: 0;
z-index: var(--z-gallery);
background: var(--veil-ink);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--gutter);
}
.hotel-gallery[hidden] { display: none; }
.hotel-gallery__panel {
position: relative;
background: var(--paper-hi);
border-radius: var(--r-md);
box-shadow: var(--sh-float);
width: 100%;
max-width: 980px;
max-height: 88vh;
overflow-y: auto;
padding: var(--sp-8);
}
.hotel-gallery__close {
position: absolute;
top: var(--sp-3);
right: var(--sp-3);
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: var(--ink);
color: var(--color-white);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out);
}
.hotel-gallery__close:hover { background: var(--color-red); }
.hotel-gallery__title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
text-transform: none;
letter-spacing: var(--tr-tight);
color: var(--ink);
margin-bottom: var(--sp-5);
}
.hotel-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.hotel-gallery__grid img {
width: 100%;
height: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
border-radius: var(--r-sm);
}
/* ============================================================================
EXPERIENCIAS
========================================================================== */
.exp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(10px, 2.4vw, 18px);
background: none;
max-width: 1100px;
margin: 0 auto;
}
.exp-card {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
border-radius: var(--r-md);
background: var(--paper-hi);
box-shadow: var(--sh-card);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.exp-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.exp-card picture, .exp-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-card img { transition: transform var(--dur-slow) var(--ease-out); }
.exp-card:hover img { transform: scale(1.05); }
.exp-overlay {
position: absolute;
inset: 0;
background: var(--veil-exp);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--sp-5) var(--sp-4);
}
/* La linea tan del patron washi y no el rojo de marca: sobre el velo navy el
rojo y el fondo tienen casi la misma luminancia y la etiqueta literalmente
desaparece. El tan da 6.05:1 sobre el compuesto y ademas rima con el patron
del papel, que es lo que enmarca la rejilla de tarjetas. */
/* Chip solido y no texto suelto. En tan sobre foto no hay velo razonable que
le de 4.5:1 a 11px -haria falta .85 de alfa, que es justo lo que apagaba las
imagenes-; sobre su propia placa de tinta el mismo tan da 7.7:1 y el velo
queda libre para ser ligero. Va inline-block y con align-self para que la
placa mida lo que el texto y no cruce la tarjeta entera. */
.exp-tag {
align-self: flex-start;
font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--line-washi);
background: var(--ink);
padding: 3px 8px;
border-radius: var(--r-pill);
margin-bottom: var(--sp-2);
}
.exp-name {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--color-white);
line-height: var(--lh-snug);
text-shadow: 0 1px 3px rgba(36, 35, 72, .85), 0 0 12px rgba(36, 35, 72, .5);
}
/* Descripcion de la experiencia, sobre el tramo denso del velo (alfa .86-.92):
ahi el blanco da 9.8:1 incluso sobre el pixel mas claro de la foto. Se baja
a --fs-sm y se limita a 4 lineas para que la tarjeta 3/4 no reviente cuando
la rejilla reflowea de 3 a 2 columnas.
El tope baja a 3 lineas por debajo de 700px: ahi la tarjeta mide 227px de
alto y con nombres de dos o tres lineas -"Kamakura · Gran Buda, Hase Kannon
y Komachi"- la pila se salia por arriba y el tag se recortaba de golpe. */
.exp-desc {
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--color-white);
text-shadow: 0 1px 3px rgba(36, 35, 72, .8), 0 0 10px rgba(36, 35, 72, .45);
margin-top: var(--sp-2);
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================================
TIPS (la .tip-card se comparte con Hospedaje: es la misma pieza)
========================================================================== */
.tips-block { max-width: 1100px; margin: 0 auto var(--sp-16); }
.tips-block__title {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ink);
padding-bottom: var(--sp-3);
border-bottom: 2px solid var(--color-red);
margin-bottom: var(--sp-2);
}
.tips-block__title span { color: var(--color-red); }
.tips-block__lead {
font-size: var(--fs-base);
line-height: var(--lh-loose);
color: var(--ink-soft);
max-width: var(--measure);
margin: var(--sp-3) 0 var(--sp-6);
}
.tips-block__title + .tips-grid { margin-top: var(--sp-6); }
.tips-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
background: none;
max-width: 1100px;
margin: 0 auto;
}
.tip-card {
background: var(--paper-hi);
border: 1px solid var(--hair-ink);
border-radius: var(--r-md);
box-shadow: var(--sh-card);
padding: var(--sp-6);
transition: box-shadow var(--dur-base) var(--ease-out);
}
.tip-card:hover { box-shadow: var(--sh-lift); }
/* Tarjeta con foto: la imagen va a sangre y el padding se lo queda el cuerpo,
asi no hace falta tocar el resto de tarjetas del sitio. El aspect-ratio esta
declarado tambien en el HTML (width/height) para que no salte el layout
mientras cargan las 20 imagenes. */
.tip-card--photo { padding: 0; overflow: hidden; }
.tip-card__photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--paper-sunk);
}
.tip-card__body { padding: var(--sp-6); }
/* La ficha de creditos se pliega: es obligacion legal de las licencias CC,
pero no es contenido que el viajero necesite leer. */
.reco-creditos {
max-width: 1100px;
margin: var(--sp-8) auto 0;
font-size: var(--fs-xs);
color: var(--ink-mute);
}
.reco-creditos summary {
cursor: pointer;
font-weight: var(--fw-bold);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--ink-soft);
padding: var(--sp-3) 0;
}
.reco-creditos ul { margin: var(--sp-3) 0 var(--sp-4) var(--sp-5); }
.reco-creditos li { line-height: var(--lh-body); margin-bottom: var(--sp-1); }
.reco-creditos a { color: var(--color-red-deep); }
/* conserva el radio: el borde grueso no debe cuadrar la esquina */
.tip-card--accent {
border-left: 4px solid var(--color-red);
background: var(--red-wash);
border-radius: var(--r-md);
}
.tip-tag {
font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--color-red-deep);
margin-bottom: var(--sp-3);
}
.tip-title {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--ink);
line-height: var(--lh-snug);
margin-bottom: var(--sp-3);
}
/* el cuerpo de los pasos de "Antes de volar" es esta misma pieza de texto: se
comparte el selector en vez de repetir las tres declaraciones */
.tip-card p,
.pre-trip__step p { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-soft); }
.tip-card strong { font-weight: var(--fw-bold); color: var(--ink); }
/* vineta = diamante Mitsubishi reducido a su triangulo */
.tip-list { margin: 0; padding-left: 0; list-style: none; }
.tip-list li {
position: relative;
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--ink-soft);
padding-left: var(--sp-5);
margin-bottom: var(--sp-2);
}
.tip-list li::before {
content: '';
position: absolute;
left: 0;
top: .62em;
width: 7px;
height: 7px;
background: var(--color-red);
opacity: .85;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tip-list li:last-child { margin-bottom: 0; }
.tip-card p + p, .tip-card p + .tip-list, .tip-list + .tip-link { margin-top: var(--sp-3); }
/* p.tip-inline-tip y no .tip-inline-tip: `.tip-card p` es (0,1,1) y ganaba el
tamano y el color, asi que la nota se quedaba en cuerpo de 16px y solo le
entraba la italica. Compuesto empata la especificidad y va despues. */
p.tip-inline-tip { font-size: var(--fs-sm); color: var(--ink-mute); font-style: italic; }
.tip-note {
margin-top: var(--sp-4);
display: inline-block;
font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
letter-spacing: var(--tr-wide);
text-transform: uppercase;
color: var(--color-red-deep);
background: var(--red-wash);
border: 1px solid var(--red-hair);
border-radius: var(--r-pill);
padding: 6px 12px;
}
.tip-link {
display: inline-block;
margin-top: var(--sp-4);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--tr-tight);
text-transform: uppercase;
color: var(--color-red-deep);
text-decoration: none;
border-bottom: 2px solid var(--red-hair);
padding-bottom: 2px;
/* la url de Visit Japan Web desborda la tarjeta si no se rompe */
overflow-wrap: anywhere;
transition: color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
/* Dos enlaces seguidos en una misma tarjeta -las dos tiendas de la app del
seguro-. En linea no caben, y al envolver el segundo quedaba sangrado por el
margen lateral. Se apilan: la excepcion se activa con :has(), asi que las
otras trece tarjetas con un solo enlace no se enteran. */
.tip-card:has(.tip-link + .tip-link) .tip-link {
display: block;
width: fit-content;
}
.tip-link + .tip-link { margin-top: var(--sp-2); }
.tip-link:hover, .tip-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
/* El enlace a Google Maps repite en veintitantas tarjetas y no es la accion
principal de ninguna: baja a tinta apagada (6.6:1, cumple AA) y pierde el
subrayado grueso, para que el rojo se reserve al enlace que si importa. */
.tip-link--map {
color: var(--ink-mute);
border-bottom-color: var(--hair-ink);
text-transform: none;
letter-spacing: 0;
}
.tip-link--map:hover, .tip-link--map:focus-visible {
color: var(--color-red-deep);
border-bottom-color: var(--red-hair);
}
/* el cambio de color no basta como senal de foco: los enlaces de "Antes de
volar" son los unicos focusables de la portada y tienen que verse */
.tip-link:focus-visible {
outline: 3px solid var(--color-red-deep);
outline-offset: 3px;
border-radius: var(--r-xs);
}
/* eco del "Gracias por ser parte de esta experiencia." de la pagina 2 */
.tips-closing {
max-width: 34em;
margin: 0 auto;
text-align: center;
font-size: var(--fs-md);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
/* 18px bold son 13.5pt: por debajo del umbral de "texto grande" de WCAG
(14pt bold), asi que le aplica el 4.5:1 completo y el rojo de marca no
llega -4.35:1 sobre el crema, 3.92:1 donde asoma la linea tan del washi-.
Va en el rojo profundo del arte: 6.16:1 y 5.54:1. */
color: var(--color-red-deep);
}
.tips-disclaimer {
max-width: 1100px;
margin: var(--sp-6) auto 0;
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--ink-mute);
text-align: center;
}
/* ============================================================================
RESPONSIVE
Tres saltos y solo tres: 560 / 700 / 1000. Antes el de 700 estaba repetido en
siete bloques dispersos, que es la via mas rapida a vistas desincronizadas.
========================================================================== */
@media (max-width: 379px) {
/* el handbook retira el ornamento cuando no cabe, no lo encoge */
[data-view="tips"]::before,
[data-view="tips"]::after,
[data-view="hospedaje"]::before,
[data-view="hospedaje"]::after,
[data-view="recomendaciones"]::before,
[data-view="recomendaciones"]::after { display: none; }
.agenda-header { grid-template-columns: 64px 1fr auto; padding: var(--sp-4); }
}
/* --- La banda de registros en pantalla estrecha ---
A dos columnas, el titulo y los dos formatos se estrangulan: a 390px cada
columna se queda en ~90px y "LLENAR FORMATO" cae letra a letra. Se apila.
Hay que DESHACER ademas la colocacion explicita de celda del escritorio: con
una sola columna declarada, un grid-column:2 no se ignora -crea una segunda
columna implicita- y la banda se volveria a partir en dos. */
@media (max-width: 760px) {
.pre-trip {
grid-template-columns: 1fr;
gap: var(--sp-3);
padding: var(--sp-4);
}
.pre-trip__flag,
.pre-trip__title,
.pre-trip__steps { grid-column: 1; grid-row: auto; }
.pre-trip__steps { grid-template-columns: 1fr; gap: var(--sp-3); }
.pre-trip__step + .pre-trip__step {
border-left: 0;
padding-left: 0;
border-top: 1px solid var(--red-hair);
padding-top: var(--sp-3);
}
}
/* --- La puerta en pantalla estrecha ---
El indice deja de ir al lado del torii y baja debajo: a 390px la fila de dos
columnas dejaria el arte en 150px y el menu en 180px, y no funciona ninguno
de los dos. Es el MISMO menu, solo que apilado, asi que el sitio no tiene dos
navegaciones distintas que mantener. */
@media (max-width: 860px) {
.gate-row {
flex-direction: column;
gap: clamp(14px, 2.6vh, 28px);
}
.menu { width: min(100%, 460px); min-width: 0; }
}
@media (max-width: 560px) {
/* El patron se escala con la pantalla, no se queda fijo: los tiles estan
medidos para un ancho de escritorio y a 360px un abanico de seigaiha de
240px cruzaba dos tercios de la pantalla, que lo convertia en dibujo en vez
de en trama. Se conserva la proporcion 320:182 del fichero (176 x 100.1)
para que el empalme siga casando. */
:root {
--washi-size: 176px 100.1px;
--blooms-size: 360px 360px;
}
.agenda-header { grid-template-columns: 78px 1fr auto; }
/* la hora sube encima del bloque: en 92px + texto no cabe una linea util */
.tl-item { grid-template-columns: 1fr; gap: var(--sp-1); }
.tl-body {
border-left: none;
padding-left: 0;
border-top: 2px solid var(--red-hair);
padding-top: var(--sp-2);
}
/* ver la nota de .exp-desc: a dos columnas la tarjeta no da para cuatro
lineas de cuerpo mas el nombre */
.exp-desc { -webkit-line-clamp: 3; line-clamp: 3; }
/* en movil el bloque llega casi a sangre: se le quita el aire lateral y el
disco baja a 30px para no comerse la columna de texto */
.pre-trip__step { column-gap: var(--sp-2); }
}
@media (min-width: 700px) {
.agenda-header { padding: var(--sp-6); }
.agenda-body.open .agenda-body__inner { padding: var(--sp-8) var(--sp-8) var(--sp-10); }
.hotels-grid { grid-template-columns: 1fr 1fr; }
/* El viaje de prensa tiene UNA sola sede, y a dos columnas la tarjeta del
Conrad se quedaba en la izquierda con media pantalla vacia al lado. Con
:has() la excepcion se apaga sola el dia que vuelva a haber dos hoteles. */
.hotels-grid:has(.hotel-card:only-child) {
grid-template-columns: 1fr;
max-width: 620px;
}
.hotel-img { height: 280px; }
.hotel-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.exp-grid { grid-template-columns: repeat(3, 1fr); }
.hotel-details__grid,
.tips-grid { grid-template-columns: 1fr 1fr; }
.view-header { padding-top: var(--sp-20); }
/* con 10 experiencias la ultima fila de tres se queda con una sola tarjeta
pegada a la izquierda: cuando eso pasa -y solo entonces- se centra */
.exp-card:nth-child(3n+1):last-child { grid-column: 2; }
/* los dos pasos, lado a lado, separados por la hairline roja de pie */
.pre-trip__step + .pre-trip__step {
border-top: none;
padding-top: 0;
border-left: 1px solid var(--red-hair);
padding-left: var(--sp-8);
}
}
@media (min-width: 1000px) {
.tips-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.agenda-body { transition: none; }
.hotel-card:hover, .exp-card:hover { transform: none; }
.hotel-card:hover .hotel-img, .exp-card:hover img { transform: none; }
}