/* ========================================================================== MP Travel Services — Base -------------------------------------------------------------------------- Sistema de diseño: papel, tinta y latón. Filetes finos, un rombo de latón como única viñeta y nada de cajas: cada bloque se apoya en una regla y el texto cuelga de ahí. La página es neutra a propósito: el color lo ponen los flyers y las fotos. El vidrio esmerilado que ordenaba antes el sitio —tarjetas, formulario, apartados legales, flyers montados en una placa— se retiró: sobre un papel cálido, una pila de rectángulos con borde y sombra se lee como una interfaz y no como una página impresa. Queda solo donde hace falta que algo flote por encima del contenido: la barra del encabezado, el panel lateral de celular, la lista del desplegable de destinos y el panel de administración. LOS ARCHIVOS Esto era un solo `styles.css` de mil ciento treinta líneas. Ahora cada archivo es un tema y cada página carga solo los que usa: base.css tokens, escalas, fondo, vidrio, botones todas estructura.css header, menú, pie, botón de WhatsApp todas paginas.css encabezado, secciones, prosa, tarjetas todas menos inicio portada.css la pantalla de inicio inicio paquetes.css la rejilla de paquetes y el visor paquetes contacto.css el formulario y los datos de contacto contacto documento.css los apartados plegables reglamento, renuncia, protección de datos El orden del importa y es siempre el mismo: base, estructura, paginas, y al final el de la página. `documento.css` va después de `paginas.css` porque lo pisa en algún punto —`.articulo .datos`, por ejemplo—, y cargado antes esa corrección no tendría efecto. El panel de administración carga base y estructura, y encima su propio `admin/admin.css`. LAS DOS MAQUETAS Cada archivo trae primero la maqueta de celular y, al final, un bloque `@media (min-width:960px)` con la de escritorio. No son la misma estirada: en celular es una columna centrada; en escritorio el ancho se reparte en dos carriles y se rompe el eje. El corte va por ANCHO y nunca por tipo de puntero. Cuando en un celular se pide "Sitio de escritorio", el aparato no cambia: sigue siendo una pantalla táctil, sin mouse. Lo único que cambia es que el navegador dibuja la página como si midiera ~980px de ancho. Por eso acá no se usa `hover:hover` ni `pointer:fine`: con cualquiera de esas dos, pedir el modo escritorio en el celular no traería nada. Los 960px quedan justo debajo de esos ~980, así que ese modo entra por la maqueta ancha, que es lo que se espera. ========================================================================== */ /* ========================================================================== TIPOGRAFÍA Y ESCALAS Times New Roman para todo el sitio. Es fuente de sistema, así que no se carga nada externo; los fallbacks cubren Linux (Liberation Serif / Tinos). Ojo: solo trae 400 y 700. Un font-weight:500 se renderiza igual que 400. ========================================================================== */ :root{ --font:"Times New Roman",Times,"Liberation Serif",Tinos,serif; --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; --r-md:14px; --r-lg:20px; --r-pill:999px; --ease-out:cubic-bezier(.16,1,.3,1); /* Dos carriles, no uno. El de lectura manda en la prosa; el amplio lo usan las composiciones (portada, paquetes) para que en escritorio el contenido no quede en una tira angosta rodeada de aire muerto. */ /* --- Texto chico --------------------------------------------------------- Los rótulos, el menú y los pies vivían en valores sueltos repartidos por todos lados, entre .68rem y .95rem. En una serif, y más en versalitas con letra espaciada, eso se lee bastante más chico de lo que mide. Ahora todo sale de estos cinco valores y se ajusta de un solo tiro. OJO CON LA CUENTA: `body` está en 17px, pero `rem` no mide contra el body sino contra la raíz, que sigue en los 16px de fábrica. O sea 1rem = 16px, NO 17. Por eso va el equivalente en píxeles al lado de cada uno: es fácil calcularlos mal y creer que se subió más de lo que se subió. */ --t-menu: 1.05rem; /* 16.8px — la navegación */ --t-titulo: 1.05rem; /* 16.8px — título de una tarjeta o de un paquete */ --t-rotulo: .82rem; /* 13.1px — versalitas chicas: eyebrow, dt, label */ --t-apoyo: 1.05rem; /* 16.8px — párrafo de apoyo: tarjetas, intros, ayudas */ --t-pie: .9rem; /* 14.4px — pie de página, notas al pie, fechas */ /* El alto del header. Es sticky, así que varias cosas necesitan descontarlo (la altura de la portada, el `top` de lo que queda fijo al desplazar). */ --alto-header:72px; --ancho:1140px; --ancho-amplio:1320px; } /* ========================================================================== TOKENS — color -------------------------------------------------------------------------- LA PALETA Y POR QUÉ ES ESTA Son tres colores y nada más: papel, tinta y latón. La regla que los ordena es que el color de la página nunca compita con el de las fotos —los flyers y la galería ya traen todo el color que hace falta—, así que el sitio pone el papel y se calla. PAPEL #F5F2ED Un hueso cálido, no un gris. Es el cambio que más se nota: el gris azulado de antes era correcto pero frío, de plantilla; el papel tibio es lo que usan las marcas de viaje y de hotelería de gama alta, y con una serif lee a papel de revista y no a interfaz. TINTA #17282D Negro verdoso, muy oscuro y apenas desaturado. Sustituye al casi-negro neutro en el texto, en los botones llenos y en el pie. De lejos se lee negro; de cerca tiene temperatura y no ese aire de pantalla apagada. LATÓN #856334 El único acento, y va con cuentagotas: los rótulos en versalitas, el filete del apartado activo del menú y las líneas finas de separación. Nunca en un bloque grande. Es el metal de las molduras y los herrajes, y basta esa insinuación para que el conjunto se lea caro. Nada de degradados de dos colores saturados ni de violetas: son la marca de agua de lo hecho a máquina y de lo que envejece en un año. Acá el ánimo lo ponen la temperatura del papel y el aire entre las cosas. CONTRASTE (WCAG AA, medido, no estimado): la tinta da 13.6:1 sobre el papel; --text-mut 5.8:1; --text-soft 4.6:1; el latón 4.9:1. Los tres últimos rozan el mínimo de 4.5, así que si alguien los aclara, que vuelva a medirlos. ========================================================================== */ :root{ color-scheme:light; --bg: #F5F2ED; /* papel */ --text: #17282D; /* tinta — 13.6:1 sobre --bg */ --text-mut: #57605F; /* 5.8:1 */ --text-soft: #67706E; /* 4.6:1 */ /* Tinta más honda, para el estado :hover de lo que ya viene lleno de tinta. Antes esto era #000 a secas y rompía la temperatura de la paleta justo en el momento en que el botón se mira. */ --tinta-honda: #0C1A1E; --acento: #856334; /* latón — 4.9:1 sobre --bg */ --acento-tenue:rgba(133,99,52,.30); /* filetes y separadores */ /* Receta de vidrio. El blanco lleva una gota de amarillo: sobre un fondo cálido, el vidrio blanco puro se ve azulado y despegado del papel. */ --glass: rgba(255,253,250,.58); --glass-2: rgba(255,253,250,.40); --glass-3: rgba(255,253,250,.74); --glass-edge: rgba(23,40,45,.10); --glass-blur: blur(20px) saturate(180%); --spec: rgba(255,255,255,1); --hi: inset 0 1px 0 rgba(255,255,255,.9); --hair: rgba(23,40,45,.12); /* Sólido a propósito: el panel lateral del celular tapa la página, no la deja ver. Apenas más claro que --bg para que se lea como algo encima. */ --panel: #FBF9F5; /* Las sombras también son de tinta y no negras: una sombra neutra sobre papel cálido se ve gris sucio. */ --shadow-sm:0 1px 2px rgba(23,40,45,.05), 0 4px 12px -4px rgba(23,40,45,.08); --shadow: 0 2px 4px rgba(23,40,45,.05), 0 14px 32px -12px rgba(23,40,45,.14); --shadow-lg:0 4px 8px rgba(23,40,45,.06), 0 28px 60px -18px rgba(23,40,45,.20); /* Luces del fondo. Muy lavadas a propósito: son lo que el vidrio refracta, no una decoración que se deba mirar. Arena, salvia y un azul de bruma; las tres a menos de un 8% de saturación aparente. */ --orb-1:rgba(226,214,193,.62); --orb-2:rgba(205,213,203,.55); --orb-3:rgba(203,211,216,.48); } /* ========================================================================== BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} /* El panel lateral de celular espera fuera de pantalla, a la derecha, y eso ensancha la página. `clip` corta ese sobrante sin convertir a en un contenedor de scroll, así que el header sticky sigue funcionando —cosa que `overflow-x:hidden` sí rompe—. */ html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0; min-height:100vh; font-family:var(--font); font-size:17px; line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} .contenedor{width:min(100% - 3rem, var(--ancho));margin-inline:auto} .oculto{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } /* -------------------------------------------------------------------------- FONDO AMBIENTAL Tres manchas de luz fijas detrás de todo. Sin ellas el vidrio no tiene qué refractar y el efecto se pierde. -------------------------------------------------------------------------- */ .ambient{ position:fixed;inset:0;z-index:-1; pointer-events:none;overflow:hidden; background:var(--bg); } .orb{position:absolute;display:block;border-radius:50%;filter:blur(90px);will-change:transform} .orb-1{ width:52vw;height:52vw;min-width:420px;min-height:420px; top:-14vw;right:-10vw;background:var(--orb-1); animation:drift-a 26s ease-in-out infinite alternate; } .orb-2{ width:44vw;height:44vw;min-width:360px;min-height:360px; top:38vh;left:-14vw;background:var(--orb-2); animation:drift-b 32s ease-in-out infinite alternate; } .orb-3{ width:60vw;height:44vw;min-width:400px;min-height:340px; bottom:-16vw;right:-6vw;background:var(--orb-3); animation:drift-a 38s ease-in-out infinite alternate-reverse; } @keyframes drift-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4vw,3vw,0)}} @keyframes drift-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(5vw,-3vw,0)}} /* -------------------------------------------------------------------------- VIDRIO Fondo translúcido + desenfoque + filete + reflejo superior + sombra. En el sitio público ya no lo usa nadie: lo dejan puesto el encabezado y el panel de administración, que sí necesitan flotar sobre el contenido. Para un bloque de contenido va la receta de filete y rombo de `paginas.css`. -------------------------------------------------------------------------- */ .glass{ position:relative; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); border-radius:var(--r-lg); box-shadow:var(--hi), var(--shadow-sm); isolation:isolate; } /* Arco especular: la línea de luz que corre por el borde superior */ .glass::before{ content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,var(--spec),transparent); opacity:.55;pointer-events:none;border-radius:inherit; } /* ========================================================================== BOTONES ========================================================================== */ /* El peso 700 no es capricho: Times New Roman solo trae 400 y 700, así que el 500 que había acá se renderizaba idéntico a un texto normal y el botón no se leía como botón. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); padding:.85rem 1.9rem;border-radius:var(--r-pill); font-size:.95rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; text-decoration:none;cursor:pointer; transition:background-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out); } .btn:hover{transform:translateY(-2px)} .btn-1{ background:var(--text);color:#fff;border:1px solid var(--text); box-shadow:var(--shadow); } .btn-1:hover{background:var(--tinta-honda);box-shadow:var(--shadow-lg)} /* El borde iba en --glass-edge (10% de opacidad) y sobre el fondo claro prácticamente no se veía: el botón parecía texto suelto. */ .btn-2{ background:var(--glass-3);color:var(--text); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid rgba(20,24,28,.28);box-shadow:var(--shadow-sm); } .btn-2:hover{background:#fff;border-color:var(--text);box-shadow:var(--shadow)} @media (max-width:560px){ /* En pantalla angosta el header se achica; como varias medidas se calculan a partir de él, se cambia el token y no cada regla. */ :root{--alto-header:62px} /* Con el cuerpo de letra subido ya no entran dos botones en un renglón angosto. Se les recorta el relleno lateral, que es lo que sobraba. */ .btn{padding:.85rem 1.4rem} /* El logo ya no compite con el menú, así que la marca se queda escrita. */ .contenedor{width:min(100% - 2rem, var(--ancho))} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .orb{animation:none} .btn{transition:none} .btn:hover{transform:none} } /* ========================================================================== APARICIÓN AL BAJAR Se esconde solo dentro de `scripting: enabled`: si el JS está apagado —o el navegador no entiende la consulta— la regla ni se aplica y todo se ve de entrada. Así el contenido nunca puede quedar invisible por un fallo de JS. ========================================================================== */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference){ .revelar{ opacity:0;transform:translateY(16px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .revelar.visible{opacity:1;transform:none} } /* --- Escritorio --------------------------------------------------------- Por qué el corte va en 960px de ancho y no por tipo de puntero: ver la cabecera de base.css. En resumen, es lo que hace que el "Sitio de escritorio" del celular reciba también esta maqueta. ----------------------------------------------------------------------- */ @media (min-width:960px){ /* --- Carriles ----------------------------------------------------------- */ /* El carril de lectura sigue siendo el de siempre; `amplio` es el que usan las composiciones que sí quieren el ancho de la pantalla. */ .contenedor.amplio{width:min(100% - 4rem, var(--ancho-amplio))} }