/* ========================================================================= CEA100 — Sistema de diseño Orden: fuentes, tokens, reinicio, base, tipografía, enlaces, disposición, botones, accesibilidad. ========================================================================= */ /* ---------- 1. Fuentes ------------------------------------------------- */ /* Autoalojadas: ninguna petición a dominios ajenos, ninguna cookie. Solo el subconjunto latino: cubre castellano, francés y portugués. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 800; /* variable: rango real del archivo */ font-display: swap; src: url('../fuentes/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fuentes/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 2. Tokens -------------------------------------------------- */ :root { /* Marca. El índigo sale de la paleta del logo original. */ --indigo-900: #16113d; --indigo-700: #241d6b; --indigo-600: #312984; /* color de marca */ --indigo-500: #4338a8; --indigo-300: #8b82d4; --indigo-100: #e6e3f6; --indigo-050: #f3f1fb; /* Acento cálido. Dos valores a propósito: el vivo es para superficies grandes, el oscuro para texto y bordes, donde hace falta contraste. */ --acento: #ff6b35; --acento-texto: #c2410c; /* Neutros */ --tinta: #14122b; --tinta-suave:#4a4763; --papel: #ffffff; --niebla: #f6f5fa; --borde: #ddd9ee; /* Temporada. Las sobrescriben .tema-verano / .tema-navidad / .tema-semana-santa sobre . */ --temporada: var(--indigo-600); --temporada-fuerte:var(--indigo-700); --temporada-suave: var(--indigo-050); /* Tipografía */ --familia-titulos: 'Fraunces', Georgia, 'Times New Roman', serif; --familia-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala. Nombres por uso, no por tamaño, para que las reglas no se desdibujen cuando el sitio crezca. */ --texto-xs: 0.8125rem; /* 13px, pies de foto */ --texto-sm: 0.9375rem; /* 15px, apoyos */ --texto-base: 1.0625rem; /* 17px, cuerpo */ --texto-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); --titulo-sm: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --titulo-md: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); --titulo-lg: clamp(2rem, 1.6rem + 2vw, 3.25rem); --titulo-xl: clamp(2.5rem, 1.8rem + 3.4vw, 5rem); /* Ritmo y anchuras */ --paso: clamp(1rem, 0.7rem + 1.5vw, 1.75rem); --seccion: clamp(3.5rem, 2rem + 7vw, 8rem); --ancho-texto: 66ch; --ancho-pagina:1180px; --radio: 14px; --radio-sm: 8px; /* Sombras discretas: elevación, no drama. */ --sombra-sm: 0 1px 2px rgb(20 18 43 / 0.06), 0 2px 8px rgb(20 18 43 / 0.04); --sombra-md: 0 2px 4px rgb(20 18 43 / 0.06), 0 12px 32px rgb(20 18 43 / 0.08); } .tema-verano { --temporada: #d2600a; --temporada-fuerte: #9a4506; --temporada-suave: #fff4e9; } .tema-navidad { --temporada: #0d6480; --temporada-fuerte: #084456; --temporada-suave: #eaf5f9; } .tema-semana-santa { --temporada: #6d3f9e; --temporada-fuerte: #4c2a70; --temporada-suave: #f4eefc; } /* ---------- 3. Reinicio ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; /* que las anclas no queden bajo la cabecera fija */ /* El cajón del menú de móvil espera fuera de pantalla, a la derecha, y sin esto genera scroll horizontal. Es 'clip' y no 'hidden' a propósito: 'hidden' crearía un contenedor de scroll y dejaría de funcionar el position:sticky de la cabecera. */ overflow-x: clip; } body { min-height: 100svh; background: var(--papel); color: var(--tinta); font-family: var(--familia-texto); font-size: var(--texto-base); line-height: 1.6; /* En macOS el texto renderiza más grueso de lo previsto. Se corrige una sola vez, en la raíz. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* ---------- 4. Tipografía ---------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--familia-titulos); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; /* los titulares grandes piden algo de apriete */ text-wrap: balance; /* evita el titular cojo de dos líneas */ font-optical-sizing: auto; } h1 { font-size: var(--titulo-xl); } h2 { font-size: var(--titulo-lg); } h3 { font-size: var(--titulo-md); letter-spacing: -0.01em; } h4 { font-size: var(--titulo-sm); letter-spacing: 0; } p, li { text-wrap: pretty; } /* nada de una palabra huérfana al final */ p { max-width: var(--ancho-texto); } .entradilla { font-size: var(--texto-lg); line-height: 1.5; color: var(--tinta-suave); max-width: 58ch; } .sobretitulo { font-family: var(--familia-texto); font-size: var(--texto-sm); font-weight: 600; letter-spacing: 0.08em; /* las versalitas pequeñas necesitan aire */ text-transform: uppercase; color: var(--temporada); } /* Cualquier cifra que cambie o se compare en columna: ancho fijo, para que no baile la maquetación. */ .cifra, time, .precio { font-variant-numeric: tabular-nums; } /* Dato heredado de 2022 sin confirmar por el centro. Se ve, pero se ve marcado: nunca publicamos un precio como si fuera actual. */ .pendiente { background: #fff8e1; border-bottom: 2px dotted #b45309; padding: 0 0.2em; cursor: help; } ::selection { background: var(--indigo-600); color: #fff; } /* ---------- 5. Enlaces -------------------------------------------------- */ a { color: var(--indigo-700); } /* :where() deja esta regla con especificidad de elemento (0,0,1), para que cualquier clase de componente pueda quitarle el subrayado sin pelear. */ a:where(:not(.boton, .enlace-limpio)) { text-decoration: underline; text-underline-position: from-font; /* posición según las métricas de la fuente */ text-decoration-thickness: from-font; text-decoration-skip-ink: auto; /* que no corte las jotas y las ges */ text-underline-offset: 0.12em; } a:hover { color: var(--indigo-500); } .enlace-limpio { text-decoration: none; } /* Foco visible y consistente en todo lo que se puede enfocar. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--acento-texto); outline-offset: 3px; border-radius: var(--radio-sm); } /* ---------- 6. Disposición --------------------------------------------- */ .contenedor { width: min(100% - 2 * var(--paso), var(--ancho-pagina)); margin-inline: auto; } .seccion { padding-block: var(--seccion); } .pila > * + * { margin-top: var(--paso); } .rejilla { display: grid; gap: var(--paso); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .saltar-al-contenido { position: absolute; left: var(--paso); top: -100%; z-index: 999; padding: 0.75rem 1.25rem; background: var(--indigo-600); color: #fff; border-radius: var(--radio-sm); text-decoration: none; transition: top 150ms ease; } .saltar-al-contenido:focus { top: var(--paso); color: #fff; } .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- 7. Botones -------------------------------------------------- */ .boton { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.6em; border: 2px solid transparent; border-radius: 999px; font-weight: 600; font-size: var(--texto-base); line-height: 1.2; text-decoration: none; cursor: pointer; /* Solo transform y color: ambos van por GPU. */ transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .boton:active { transform: translateY(1px); } .boton-principal { background: var(--temporada); color: #fff; box-shadow: var(--sombra-sm); } .boton-principal:hover { background: var(--temporada-fuerte); color: #fff; transform: translateY(-2px); box-shadow: var(--sombra-md); } .boton-secundario { background: transparent; border-color: var(--borde); color: var(--indigo-700); } .boton-secundario:hover { border-color: var(--indigo-600); background: var(--indigo-050); color: var(--indigo-700); transform: translateY(-2px); } /* ---------- 8. Formularios ---------------------------------------------- */ label { display: block; font-weight: 600; font-size: var(--texto-sm); } input, select, textarea { width: 100%; padding: 0.7em 0.9em; border: 2px solid var(--borde); border-radius: var(--radio-sm); background: var(--papel); /* 16px como suelo: por debajo, Safari en iOS hace zoom al enfocar. */ font-size: max(1rem, var(--texto-base)); transition: border-color 160ms ease, box-shadow 160ms ease; } input:focus, select:focus, textarea:focus { border-color: var(--indigo-600); box-shadow: 0 0 0 4px var(--indigo-100); } textarea { min-height: 9rem; resize: vertical; } /* ---------- 9. Movimiento ----------------------------------------------- */ /* Quien pide menos movimiento en su sistema, lo obtiene. Las animaciones de GSAP se desactivan aparte, en animaciones.js. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================= ESTADOS INICIALES DE LAS ANIMACIONES Solo se aplican si lleva la clase 'anima', que pone un script en antes de pintar y que animaciones.js retira si GSAP no ha cargado. Sin esa clase, todo se ve. Es lo que garantiza que un fallo del JavaScript no deje la web en blanco. Regla que no se salta nunca: un teléfono, una fecha o un precio jamás llevan data-anima. Esos datos se leen de inmediato. ========================================================================= */ .anima [data-anima="entrada"], .anima [data-anima="titulo"] { opacity: 0; } .anima [data-anima="cascada"] > * { opacity: 0; transform: translateY(1.5rem); } /* SplitText envuelve cada palabra: hace falta inline-block para poder transformarla. */ [data-anima="titulo"] .palabra { display: inline-block; } /* ========================================================================= CABECERA ========================================================================= */ .cabecera { position: sticky; top: 0; z-index: 100; background: rgb(255 255 255 / 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); } .cabecera-interior { display: flex; align-items: center; gap: var(--paso); min-height: 4.5rem; } /* ---- Marca ---- */ .marca { display: flex; align-items: center; gap: 0.7rem; color: var(--indigo-600); margin-right: auto; } .marca-icono { display: block; width: 2.1rem; flex: none; } .marca-icono svg { width: 100%; height: auto; } .marca-texto { display: grid; line-height: 1.05; font-family: var(--familia-texto); } .marca-linea-1 { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta-suave); } .marca-linea-2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--indigo-600); } /* ---- Botón de móvil ---- */ .menu-boton { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; /* zona táctil holgada */ border: 0; border-radius: var(--radio-sm); background: transparent; cursor: pointer; color: var(--indigo-600); } .menu-boton-barras { display: grid; gap: 5px; width: 22px; } .menu-boton-barras span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease; } .menu-boton[aria-expanded="true"] .menu-boton-barras span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-boton[aria-expanded="true"] .menu-boton-barras span:nth-child(2) { opacity: 0; } .menu-boton[aria-expanded="true"] .menu-boton-barras span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- Menú ---- */ .menu-lista, .submenu, .pie-enlaces { list-style: none; padding: 0; margin: 0; } .menu-enlace { display: flex; align-items: center; gap: 0.35em; padding: 0.6rem 0.75rem; border: 0; background: none; border-radius: var(--radio-sm); font-size: var(--texto-sm); font-weight: 600; color: var(--tinta); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease; } .menu-enlace:hover { color: var(--indigo-600); background: var(--indigo-050); } .menu-enlace[aria-current="page"] { color: var(--indigo-600); } .menu-flecha { transition: transform 200ms ease; flex: none; } .menu-padre[aria-expanded="true"] .menu-flecha { transform: rotate(180deg); } .submenu-enlace { display: block; padding: 0.55rem 0.9rem; border-radius: var(--radio-sm); font-size: var(--texto-sm); color: var(--tinta); text-decoration: none; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease; } .submenu-enlace:hover { color: var(--indigo-600); background: var(--indigo-050); } .submenu-enlace[aria-current="page"] { color: var(--indigo-600); font-weight: 600; background: var(--indigo-050); } .menu-telefono { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--indigo-600); color: #fff; font-size: var(--texto-sm); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 160ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .menu-telefono:hover { background: var(--indigo-700); color: #fff; transform: translateY(-1px); } /* ---- Plegado de desplegables ---- Solo se pliegan si hay JavaScript para volver a abrirlos. Sin JS, el menú queda desplegado: más largo, pero entero y navegable. */ .js .submenu { display: none; } .js .menu-padre[aria-expanded="true"] + .submenu { display: block; } /* ---- Móvil: cajón lateral ---- */ @media (max-width: 61.999em) { .menu { position: fixed; inset: 4.5rem 0 0 auto; width: min(22rem, 88vw); padding: var(--paso); background: var(--papel); border-left: 1px solid var(--borde); box-shadow: var(--sombra-md); overflow-y: auto; display: grid; align-content: start; gap: 0.75rem; /* Fuera de pantalla, no oculto: así conserva el foco y las transiciones. */ transform: translateX(100%); visibility: hidden; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 260ms; } .js .menu-abierto { transform: translateX(0); visibility: visible; } /* Sin JavaScript el cajón no se puede abrir, así que el menú se muestra en el flujo normal, debajo de la cabecera. */ html:not(.js) .menu { position: static; width: auto; transform: none; visibility: visible; border: 0; box-shadow: none; } .menu-lista { display: grid; gap: 0.15rem; } .menu-enlace { width: 100%; justify-content: space-between; font-size: var(--texto-base); } .submenu { padding-left: 0.75rem; border-left: 2px solid var(--indigo-100); margin: 0.15rem 0 0.4rem; } .menu-telefono { justify-content: center; margin-top: 0.5rem; } body.menu-bloqueado { overflow: hidden; } } /* ---- Escritorio: barra horizontal ---- */ @media (min-width: 62em) { .menu-boton { display: none; } .menu { display: flex; align-items: center; gap: 0.75rem; } .menu-lista { display: flex; align-items: center; gap: 0.15rem; } .menu-elemento-padre { position: relative; } .submenu { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 12rem; padding: 0.4rem; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-md); } /* Con ratón, basta pasar por encima; con teclado, basta el foco dentro. */ .js .menu-elemento-padre:hover .submenu, .js .menu-elemento-padre:focus-within .submenu { display: block; } } /* ========================================================================= PIE ========================================================================= */ .pie { margin-top: var(--seccion); padding-top: var(--seccion); background: var(--indigo-900); color: #d9d6ea; } .pie a { color: #fff; } .pie a:hover { color: var(--acento); } .pie-interior { display: grid; gap: calc(var(--paso) * 1.6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding-bottom: var(--seccion); } .pie-icono { display: block; width: 2.6rem; color: #fff; margin-bottom: 0.9rem; } .pie-icono svg { width: 100%; height: auto; } .pie-lema { font-size: var(--texto-sm); max-width: 24ch; } .pie-titulo { font-family: var(--familia-texto); font-size: var(--texto-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--indigo-300); margin-bottom: 0.9rem; } .pie-datos { font-style: normal; font-size: var(--texto-sm); line-height: 1.9; } .pie-horario { font-size: var(--texto-sm); margin: 0; } .pie-horario dt { font-weight: 600; color: #fff; margin-top: 0.6rem; } .pie-horario dt:first-child { margin-top: 0; } .pie-horario dd { margin: 0; font-variant-numeric: tabular-nums; } .pie-enlaces { font-size: var(--texto-sm); line-height: 2; } .pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: var(--texto-xs); color: var(--indigo-300); } .pie-legal p { max-width: none; margin: 0; }