/* ============================================================ Ok Costa Maya · Tours Mahahual HOJA DE ESTILOS — aquí vive TODA la apariencia del sitio. Los archivos .html dicen QUÉ hay en cada página (un título, un botón, una lista). Este archivo dice CÓMO se ve: colores, tamaños, espacios, sombras. Son las mismas reglas para las 6 páginas, en español y en inglés. ÍNDICE — busca el título con Ctrl+F y caes en la sección 1. LOS COLORES, DEFINIDOS UNA SOLA VEZ 2. BASES 3. NAV: LA BARRA DE ARRIBA 4. HERO: LA PORTADA 5. OLA DEL BORDE SUPERIOR 6. INTRO: "MAHAHUAL SIGUE SIENDO MAHAHUAL" 7. LAS TRES TARJETAS DE LA PORTADA 8. LOS BOLETOS DE LA PÁGINA DE TOURS 9. LOS TRES PASOS PARA RESERVAR 10. DATOS DE CONTACTO 11. FOOTER: EL PIE DE PÁGINA 12. BOTÓN FLOTANTE DE WHATSAPP 13. ACCESIBILIDAD CÓMO LEER ESTE ARCHIVO Está dividido en secciones con títulos en mayúsculas y guiones, como NAV, HERO o FOOTER. Cada sección corresponde a una parte visible de la página, y van en el mismo orden en que aparecen de arriba hacia abajo. Si quieres cambiar cómo se ve el pie de página, busca la sección FOOTER. Todo lo que va entre barra-asterisco y asterisco-barra es un comentario: explicaciones para quien lea el archivo. El navegador las ignora por completo. Las reglas se leen así: .btn-primary{ background:var(--rosa); } ^ a qué ^ qué cambio ^ con qué valor REGLA DE COLOR DEL CLIENTE El azul es el color estructural (fondos oscuros, navegación) y el rosa mexicano es sólo color de acción: botones y acentos, nunca más del 15% de lo que se ve. Los tonos neutros cargan el resto para que los dos colores fuertes nunca queden pegados uno al otro. ============================================================ */ /* ============================================================ base.css Colores, tipografia y botones. Va primero: define los tokens que usan los demas. Parte de la hoja del sitio. Ver README para el orden de carga. ============================================================ */ /* ---------- LOS COLORES, DEFINIDOS UNA SOLA VEZ ---------- Cada color se escribe aquí una vez y se le pone un nombre. En el resto del archivo se usa por su nombre, así: var(--rosa). La ventaja: si el cliente quiere otro tono de azul, se cambia UNA línea aquí y cambia en todo el sitio. Las variantes claras y oscuras de cada color no son capricho: existen porque el mismo tono no se lee bien sobre todos los fondos. Ver las notas de cada línea. ---------------------------------------------------------- */ :root{ /* --- Marca --- */ --azul:#0061A9; /* azul principal (cumple AA sobre blanco) */ --azul-deep:#00447A; /* fondos oscuros medios: stubs, iconos, sección "cómo reservar" */ --azul-night:#03294A; /* fondos profundos: base del hero y footer */ --azul-light:#58A5DC; /* detalles sobre azul oscuro */ --azul-soft:#E7F0F8; /* superficies claras azuladas: chips, iconos */ --rosa:#E4007C; /* rosa mexicano — acción y acento */ --rosa-dark:#B4005F; /* hover y texto rosa sobre fondo claro */ --rosa-light:#FF7EC0; /* cifras y titulares grandes sobre azul oscuro */ --rosa-pale:#FFA6D4; /* texto chico sobre azul oscuro (mantiene 4.5:1) */ --rosa-mist:#FFE4F1; /* texto grande sobre el hero azul claro (3:1) */ --rosa-tint:#FFD9EC; /* fondo de sección y ola inferior */ /* --- Neutros --- */ --paper:#FFF7FB; /* fondo principal, blanco con un velo rosa */ --paper-light:#F7FAFD; /* texto y superficies sobre azul */ --ink:#11212E; --line: rgba(17,33,46,0.14); } /* ---------- BASES ---------- Los ajustes generales que afectan a toda la página: la tipografía, el color del texto, el ancho máximo del contenido y el aspecto de los botones. Es la capa sobre la que se monta todo lo demás. --------------------------------------------------------- */ /* Hace que el ancho de una caja incluya su borde y su relleno. Sin esto, ponerle relleno a algo lo hace más ancho de lo que pediste y las cosas se desacomodan. Se pone siempre. */ *{box-sizing:border-box;} /* Al hacer clic en un enlace que lleva a otra parte de la misma página, se desliza en vez de saltar de golpe. */ html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Karla', sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:700; letter-spacing:-0.01em; margin:0; } .mono{ font-family:'IBM Plex Mono', monospace; } a{color:inherit;} img,svg{display:block;max-width:100%;} /* .wrap es el "carril" del contenido: lo centra y le pone un ancho máximo para que en pantallas grandes el texto no quede en renglones larguísimos e incómodos de leer. */ .wrap{max-width:1160px;margin:0 auto;padding:0 28px;} /* "Eyebrow" (ceja) es el textito chico en mayúsculas que va encima de los títulos, tipo "TRES PASOS" o "NUESTROS TOURS". Se llama así porque queda arriba del título, como una ceja. */ .eyebrow{ font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:0.16em; font-size:12.5px; font-weight:500; } section{position:relative;} /* Los botones. Hay dos tipos en el sitio: .btn-primary → relleno rosa, para la acción principal .btn-ghost → sólo contorno, para la acción secundaria El :hover es cómo se ven cuando pasas el mouse encima. */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:100px; font-family:'Karla', sans-serif; font-weight:700; font-size:15px; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn:hover{transform:translateY(-2px);} /* Rosa suave con texto oscuro. Al bajarle al rosa, el blanco encima ya no se leería (4.31:1); el texto oscuro sobre este tono da 7.12:1. */ .btn-primary{ background:var(--rosa-light); color:var(--ink); box-shadow:0 8px 20px -8px rgba(180,0,95,0.45);} .btn-primary:hover{ background:var(--rosa-pale); } .btn-ghost{ border-color:currentColor; background:transparent; }