/* ============================================================ portada.css Solo la portada: hero, ola, seccion de Mahahual y las tres tarjetas. Parte de la hoja del sitio. Ver README para el orden de carga. ============================================================ */ /* ---------- HERO: LA PORTADA ---------- "Hero" es como se le dice a la primera pantalla de un sitio: la imagen grande con el título encima. Aquí es la foto del faro con una capa de color encima para que el texto se lea. -------------------------------------------------------- */ /* Las opacidades están calculadas contra el peor caso absoluto —una nube blanca pura— así que valen para cualquier píxel de la foto. Dos límites duros de la paleta que hay que respetar aquí: 1. --azul #0061A9 no puede ser color de capa: su techo de contraste contra el eyebrow --rosa-pale #FFA6D4 es 3.52:1 aunque esté al 100%. 2. Ningún rosa de la paleta puede llevar texto chico encima. Sobre blanco, el rosa de marca da 2.54:1 con --rosa-pale y 4.31:1 con blanco: ambos por debajo de 4.5:1. Por eso el rosa vive sólo en el 0-9% superior, detrás del papel picado, donde NO hay texto. Desde el 18% para abajo la capa es --azul-night al 86% o más, que es el mínimo verificado (0.81). Si se cambia la foto o se mueve texto hacia arriba, hay que recalcular. */ .hero{ background-color: var(--azul-night); background-image: linear-gradient(180deg, rgba(88,165,220,0.55) 0%, rgba(0,97,169,0.72) 30%, rgba(0,97,169,0.80) 65%, rgba(0,80,140,0.86) 100%), url('../assets/fotos/faro-mahahual.webp'); background-size:cover; background-position:center 42%; background-repeat:no-repeat; color:var(--paper-light); overflow:hidden; } .hero-inner{ max-width:1160px; margin:0 auto; padding:20px 28px 0; display:grid; gap:36px; } /* Sigue en dos columnas aunque ya no haya ilustración: el texto ocupa la izquierda y la derecha queda libre para que se vea la foto. */ @media(min-width:900px){ .hero-inner{ grid-template-columns: 1.05fr 0.95fr; align-items:center; padding-top:36px; min-height:58vh; } } .hero-eyebrow{ color:var(--paper-light); margin-bottom:18px; } /* ---------- "COSTA MAYA", LA FRASE QUE PIDIÓ DESTACAR EL CLIENTE ---------- Antes iba dentro del eyebrow chico, en mono a 11 px y revuelta con el estado: "Costa Maya · Quintana Roo, México". Ahora sale a línea propia encima del título, en Fraunces, mayúsculas y con el tracking abierto, y el estado baja a la línea de abajo. POR QUÉ VA EN BLANCO Y NO EN ROSA. Se probó --rosa-mist, que es el rosa que aguanta sobre azul. Midiendo contra los píxeles reales de la foto detrás de esta línea —el peor de todos es rgb(90,149,198)— da **2.68:1**, y el texto grande necesita 3:1. --paper-light en el mismo punto da **3.05:1** y sí pasa. El énfasis lo cargan el tamaño, las mayúsculas y el tracking, no el color. Es texto grande (mínimo 21.6 px en bold), por eso el umbral es 3:1 y no 4.5:1. **Si alguien le baja el font-size, hay que volver a medir.** ------------------------------------------------------------------- */ .costa-maya{ display:block; font-family:'Fraunces',serif; font-weight:700; font-size:clamp(1.35rem,3.6vw,2.1rem); line-height:1.1; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-light); } .hero-eyebrow .eyebrow{ display:block; margin-top:9px; } .hero h1{ font-size:clamp(2.6rem, 6vw, 4.2rem); line-height:0.98; color:var(--paper-light); } .hero h1 em{ font-style:italic; color:var(--rosa-pale); font-weight:600; } /* Título de la portada: el nombre en itálica grande y el lema debajo en la sans. La itálica es Fraunces, que ya se carga — no se pidió ninguna fuente nueva. */ .hero-title em{ display:block; font-size:clamp(3.2rem,10vw,6rem); line-height:.9; } .hero-title span{ display:block; margin-top:14px; font-family:'Karla',sans-serif; font-weight:600; font-size:clamp(1.15rem,2.8vw,1.7rem); color:var(--paper-light); } .hero p.lede{ margin-top:20px; max-width:46ch; font-size:18px; color:var(--paper-light); } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } /* El segundo botón va blanco sólido con texto oscuro, como en la maqueta. */ .hero-actions .btn-ghost{ background:#fff; color:var(--ink); border-color:#fff; } .hero-actions .btn-ghost:hover{ background:var(--paper); } .hero-stats{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; } .hero-stat b{ display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--paper-light); } .hero-stat span{ font-size:12.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; } .wave-divider{ display:block; width:100%; margin-top:-2px; } /* ---------- OLA DEL BORDE SUPERIOR ---------- Mismo trazo que la ola de abajo del hero, cerrado hacia arriba y pintado del color del fondo de la página: parece que el papel se hunde sobre la foto. Sustituyó a la guirnalda de papel picado. ----------------------------------------- */ .wave-top{ display:block; width:100%; height:52px; margin-bottom:-1px; } /* Los rellenos de las dos olas viven aquí y no en el HTML, para que usen los tokens de la paleta. Cada ola lleva el color de lo que tiene del otro lado. */ .wave-top path{ fill:var(--azul-soft); } .wave-divider path{ fill:var(--rosa-tint); } /* ---------- INTRO: "MAHAHUAL SIGUE SIENDO MAHAHUAL" ---------- El bloque de fondo arena que cuenta cómo es el pueblo, con la lista de datos y sus puntitos rosas al lado. ---------------------------------------------------------- */ .intro{ background:var(--azul-soft); padding:76px 0 84px; } .intro-grid{ display:grid; gap:40px; } @media(min-width:860px){ .intro-grid{ grid-template-columns: 0.9fr 1.1fr; align-items:start; } } .intro h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); } .intro-lead{ font-size:18.5px; max-width:40ch; } /* Foto del arrecife dentro de la columna de texto de la sección de Mahahual. Respalda con imagen lo que el texto afirma sobre el arrecife. */ .intro-photo{ margin-top:28px; overflow:hidden; border-radius:16px; background:var(--azul-soft); } .intro-photo img{ width:100%; max-height:230px; object-fit:cover; display:block; } /* La foto alarga la columna izquierda, así que la lista se centra verticalmente contra ella. Sin esto la lista termina muy arriba y queda un hueco grande abajo a la derecha. Sólo aplica cuando hay dos columnas. */ .fact-list{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px; } @media(min-width:860px){ .fact-list{ align-self:center; margin-top:0; } } .fact-list li{ display:flex; gap:14px; align-items:flex-start; } .fact-dot{ flex:none; width:10px; height:10px; margin-top:7px; border-radius:50%; background:var(--rosa); } .fact-list b{ font-family:'Fraunces',serif; font-weight:700; } /* ---------- LAS TRES TARJETAS DE LA PORTADA ---------- Los tres tours más pedidos, con su precio, que aparecen en la portada para que se vea una tarifa sin tener que entrar a la página de tours. -------------------------------------------------- */ /* Rosa muy claro: es el mismo color de la ola que baja del hero, para que no quede una costura entre la ola y esta sección. */ .site-menu{ background:var(--rosa-tint); padding:88px 0 96px; } .site-menu-head{ max-width:620px; margin-bottom:44px; } .site-menu-head h2{ font-size:clamp(2rem,4vw,2.6rem); margin-top:10px; } .site-menu-sub{ margin-top:12px; font-size:15px; opacity:.8; } .menu-grid{ display:grid; gap:22px; grid-template-columns:1fr; } @media(min-width:760px){ .menu-grid{ grid-template-columns:repeat(3,1fr); } } .menu-card{ display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:16px; padding:26px 24px; text-decoration:none; color:var(--ink); border:1px solid var(--line); box-shadow:0 1px 0 rgba(17,33,46,0.04), 0 18px 30px -24px rgba(17,33,46,0.4); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .menu-card:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(17,33,46,0.04), 0 26px 40px -20px rgba(17,33,46,0.5); border-color: var(--card-accent, var(--rosa)); } /* Foto de las tarjetas de la portada. Mismo truco de márgenes negativos que en los boletos, pero aquí se redondean las dos esquinas de arriba porque la tarjeta no tiene nada a los lados. */ .card-photo{ margin:-26px -24px 16px -24px; height:170px; overflow:hidden; border-radius:16px 16px 0 0; background:var(--azul-soft); } .card-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .menu-card .card-eyebrow{ color:var(--card-accent, var(--rosa-dark)); } .menu-card h3{ font-size:20px; margin-top:2px; } .menu-card p{ font-size:14.5px; opacity:.82; margin:0; } /* Precio en las tarjetas de la portada. La opacidad de la línea chica es .75 y no menos: a .6 el gris sobre blanco cae a 2.56:1 y no pasa 4.5:1. */ .menu-card .card-price{ font-family:'Fraunces',serif; font-weight:700; font-size:24px; color:var(--card-accent, var(--rosa-dark)); margin-top:4px; } .menu-card .card-price small{ display:block; margin-top:2px; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); opacity:.75; } /* ---------- APARTADO DE VIDEOS Y SHORTS ---------- El cliente pidió el espacio hecho desde ahora, aunque todavía no haya videos, para pegarlos después sin mover el resto. .video-slot es el marco: ya trae la forma vertical de un short (9:16) y recorta lo que le metas dentro, sea