/* ================================================================= * GastroCanarias 2026 · Hoja de estilos principal * Sistema de marca extraído del Brandbook (Studio Gabbbah). * Paleta: amarillo #ffeda8 + negro #282828, secundarios y grises. * Tipografía: Inter (display + body) + Barlow Condensed (sub). * ================================================================= */ /* ---------------------------------------------------------------- * 1. Tokens de marca * ---------------------------------------------------------------- */ :root { /* Paleta principal — alineada con gastrocanarias.com */ --gc-yellow: #ffeda8; /* acento — no fondo principal */ --gc-black: #282828; /* texto principal */ --gc-white: #ffffff; /* fondo principal */ /* Paleta secundaria */ --gc-yellow-toast: #a37b41; --gc-grey-light: #f6f6f3; /* fondo de sección alterna */ --gc-grey-border: #ebf3eb; /* borde inferior header (oficial) */ --gc-grey-medium: #ccc; --gc-grey-dark: #666; /* texto secundario / muted */ --gc-accent-orange: #f90; /* enlaces destacados (oficial) */ /* Aliases semánticos */ --bg: var(--gc-white); --bg-alt: var(--gc-grey-light); --fg: var(--gc-black); --fg-muted: var(--gc-grey-dark); --accent: var(--gc-accent-orange); /* Tipografía (Google Fonts: Montserrat + Roboto) */ --font-display: 'Montserrat', Verdana, Arial, Helvetica, sans-serif; --font-condensed: 'Montserrat', Verdana, Arial, Helvetica, sans-serif; --font-body: 'Roboto', Verdana, Arial, Helvetica, sans-serif; /* Escala tipográfica fluida (clamp para mobile-first) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); --fs-lg: clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem); --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --fs-2xl: clamp(2.5rem, 1.9rem + 3vw, 4.5rem); --fs-3xl: clamp(3.5rem, 2.5rem + 5vw, 7rem); /* Espaciado base 8px */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* Otros */ --radius: 0; /* La marca es editorial, sin bordes redondeados */ --radius-pill: 9999px; --container: min(100% - 2rem, 1280px); --transition: 200ms cubic-bezier(0.2, 0, 0.2, 1); --shadow-lift: 0 8px 24px rgba(40, 40, 40, 0.12); } /* ---------------------------------------------------------------- * 2. Fuentes * Cargadas desde Google Fonts en (ver app/templates/layouts/base.php): * - Montserrat 300, 400, 800 (display / titulares) * - Roboto 300, 400, 700 (body) * Mismas fuentes que la web oficial gastrocanarias.com. * ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- * 3. Reset moderno * ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55; color: var(--fg); background: var(--bg); font-feature-settings: 'kern', 'liga', 'cv02', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity var(--transition); } a:hover { opacity: 0.7; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--gc-black); outline-offset: 3px; } /* ---------------------------------------------------------------- * 4. Tipografía editorial * ---------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--s-4); text-wrap: balance; color: var(--gc-black); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); letter-spacing: -0.01em; } h4 { font-size: var(--fs-lg); } .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; display: inline-block; color: var(--gc-grey-dark); } p { margin: 0 0 var(--s-4); max-width: 65ch; text-wrap: pretty; } .lead { font-size: var(--fs-md); line-height: 1.45; max-width: 50ch; } /* ---------------------------------------------------------------- * 5. Layout * ---------------------------------------------------------------- */ .container { width: var(--container); margin-inline: auto; } .section { padding: var(--s-8) 0; } .section--alt { background: var(--bg-alt); } .section--invert { background: var(--gc-black); color: var(--gc-yellow); } .section--invert :focus-visible { outline-color: var(--gc-yellow); } .skip-link { position: absolute; left: -9999px; background: var(--gc-black); color: var(--gc-yellow); padding: var(--s-3) var(--s-4); z-index: 100; } .skip-link:focus { left: var(--s-4); top: var(--s-4); } /* ---------------------------------------------------------------- * Splash de carga · refuerza la imagen de marca * Se muestra solo en la primera visita de la sesión. * ---------------------------------------------------------------- */ .splash { position: fixed; inset: 0; z-index: 9999; background: var(--gc-yellow); display: flex; align-items: center; justify-content: center; padding: var(--s-5); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .splash img { width: min(70vw, 480px); height: auto; object-fit: contain; animation: splashBreathe 1.6s ease-in-out infinite; -webkit-user-select: none; user-select: none; pointer-events: none; } .splash.is-hiding { opacity: 0; pointer-events: none; } /* Si el navegador no soporta JS o ya se vio el splash, no se muestra */ html.splash-skip .splash { display: none; } @keyframes splashBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.92; } } @media (prefers-reduced-motion: reduce) { .splash img { animation: none; } .splash { transition: opacity 0.2s linear; } } @media (max-width: 767px) { .splash img { width: min(80vw, 360px); } } /* ---------------------------------------------------------------- * 6. Cabecera * ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--gc-yellow); border-bottom: 2px solid var(--gc-black); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-3) 0; } /* Logo oficial GASTRO CANARIAS (PNG con canario) */ .brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; } .brand img { display: block; width: auto; height: auto; max-height: 52px; max-width: 100%; object-fit: contain; } @media (max-width: 1023px) { .brand img { max-height: 42px; } } @media (max-width: 480px) { .brand img { max-height: 34px; } } /* Navegación SIEMPRE visible. En móvil hace scroll horizontal silencioso. */ .site-nav { display: flex; gap: var(--s-4); font-family: var(--font-condensed); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1 1 auto; min-width: 0; /* Quita la barra de scroll visualmente sin perder funcionalidad */ } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { text-decoration: none; padding: 0.5rem 0; white-space: nowrap; flex: 0 0 auto; } .site-nav a.is-active { border-bottom: 2px solid var(--gc-black); } @media (min-width: 1024px) { .site-nav { gap: var(--s-5); font-size: var(--fs-sm); overflow: visible; flex: 0 0 auto; } } /* Buscador en cabecera — input + botón con jerarquía clara (fondo blanco para contrastar con el amarillo del header) */ .site-search { display: flex; align-items: stretch; border: 2px solid var(--gc-black); background: var(--gc-white); height: 44px; flex: 0 1 320px; min-width: 0; } .site-search input { background: transparent; border: 0; outline: 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--gc-black); padding: 0 var(--s-3); width: 100%; min-width: 0; } .site-search input::placeholder { color: var(--gc-grey-dark); font-style: italic; } .site-search input:focus { background: #fff; } .site-search button { background: var(--gc-black); color: var(--gc-yellow); border: 0; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; padding: 0 var(--s-5); cursor: pointer; transition: background var(--transition); display: inline-flex; align-items: center; white-space: nowrap; } .site-search button:hover { background: var(--gc-yellow-toast); } .site-search:focus-within { box-shadow: 0 0 0 3px rgba(40,40,40,0.15); } @media (max-width: 1023px) { /* Tablet y móvil: el buscador baja a fila completa para no aplastarse */ .site-header__inner { flex-wrap: wrap; row-gap: var(--s-3); } .site-search { order: 99; flex-basis: 100%; height: 48px; } .site-nav { order: 2; } } /* ---------------------------------------------------------------- * 7. Hero editorial * ---------------------------------------------------------------- */ .hero { padding: 0 0 var(--s-8); position: relative; } .hero__eyebrow { color: var(--accent); margin-bottom: var(--s-3); } /* El .lead dentro del hero ocupa más ancho que el .lead estándar (50ch) — el hero tiene espacio de sobra y queda raro con la columna tan estrecha al lado del titular grande. */ .hero .lead { max-width: 72ch; } /* Botonera del hero: en escritorio/tablet se reparte con wrap. En teléfono (≤600 px) forzamos los tres botones a una sola línea repartiendo el ancho disponible al 33%. */ .hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; } @media (max-width: 600px) { .hero__cta { flex-wrap: nowrap; gap: 0.45rem; } .hero__cta .btn { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.4rem; font-size: 0.68rem; letter-spacing: 0.04em; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; word-break: break-word; } } .hero__title { font-size: var(--fs-3xl); font-weight: 800; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: var(--s-5); } /* "GASTROCANARIAS" como el logo: GASTRO normal + CANARIAS bold */ .hero__title-light { font-weight: 400; } .hero__title-bold { font-weight: 800; } /* Banner del hero: full-width, sale del .container. El color de fondo coincide con el del propio banner para que en pantallas anchas (>1280 px) la imagen se centre sin “cortes”. */ .hero__banner { display: block; width: 100%; margin: 0 0 30px; background: #e8e4d8; } .hero__banner img, .hero__banner picture { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-sm); margin-top: var(--s-6); } /* ---------------------------------------------------------------- * 8. Live strip (banda "AHORA EN VIVO") * ---------------------------------------------------------------- */ .live-strip { background: var(--gc-black); color: var(--gc-yellow); padding: var(--s-3) 0; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-sm); } .live-strip__inner { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .live-strip__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--gc-yellow); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ---------------------------------------------------------------- * 9. Botones y chips * ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-sm); border: 2px solid var(--gc-black); background: transparent; color: var(--gc-black); text-decoration: none; transition: background var(--transition), color var(--transition); } .btn:hover { background: var(--gc-black); color: var(--gc-yellow); opacity: 1; } .btn--solid { background: var(--gc-black); color: var(--gc-yellow); } .btn--solid:hover { background: transparent; color: var(--gc-black); } /* Chip de interés — diseño base (sin envoltorio) */ .topic-chip { display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; border: 1px solid var(--gc-black); background: transparent; color: var(--gc-black); text-decoration: none; border-radius: var(--radius-pill); transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; flex: 0 0 auto; line-height: 1; } .topic-chip.is-active, .topic-chip:hover { background: var(--gc-black); color: var(--gc-yellow); opacity: 1; } /* Barra de filtros — sutil, sobre fondo blanco principal */ .topic-filters { background: var(--gc-grey-light); border-top: 1px solid var(--gc-grey-border); border-bottom: 1px solid var(--gc-grey-border); padding: var(--s-5) 0; } .topic-filters__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .topic-filters__label { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--fg-muted); margin-right: var(--s-2); flex: 0 0 auto; } @media (max-width: 767px) { .topic-filters { padding: var(--s-4) 0; } .topic-filters__label { display: none; } } /* ---------------------------------------------------------------- * Filtros rápidos por día (Todo / Mar 19 / Mié 20 / Jue 21) * ---------------------------------------------------------------- */ .day-filters { background: var(--gc-yellow); border-top: 1px solid var(--gc-black); border-bottom: 1px solid var(--gc-black); padding: var(--s-4) 0; } .day-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .day-filters__label { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--gc-black); margin-right: var(--s-2); } .day-chip { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.5rem 0.95rem; background: var(--gc-white); color: var(--gc-black); border: 2px solid var(--gc-black); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), transform var(--transition); } .day-chip:hover { transform: translateY(-1px); } .day-chip.is-active { background: var(--gc-black); color: var(--gc-yellow); } .day-chip__month { font-family: var(--font-body); font-weight: 400; font-size: 0.75rem; letter-spacing: 0; opacity: 0.7; } .day-chip.is-active .day-chip__month { opacity: 0.85; color: var(--gc-yellow); } @media (max-width: 767px) { .day-filters { padding: var(--s-3) 0; } .day-filters__label { display: none; } .day-chip { padding: 0.45rem 0.8rem; font-size: 0.82rem; } .day-chip__month { display: none; } } /* ---------------------------------------------------------------- * 10. Tarjetas * ---------------------------------------------------------------- */ .card-session { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--gc-white); border: 1px solid var(--gc-grey-border); text-decoration: none; color: var(--gc-black); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card-session:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--gc-black); opacity: 1; } /* Cabecera de la tarjeta: día + hora a la misma jerarquía visual */ .card-session__when { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--gc-black); } .card-session__day { font-family: var(--font-condensed); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; background: var(--gc-black); color: var(--gc-yellow); padding: var(--s-1) var(--s-3); line-height: 1.2; } .card-session__time { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; line-height: 1; } .card-session__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.25; margin: 0; } .card-session__meta { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.4; } /* Variante en vivo */ .card-session--live { background: var(--gc-black); color: var(--gc-yellow); border-color: var(--gc-yellow); } .card-session--live .card-session__when { border-bottom-color: var(--gc-yellow); } .card-session--live .card-session__day { background: var(--gc-yellow); color: var(--gc-black); } .card-session--live .card-session__meta { color: var(--gc-yellow); opacity: 0.85; } /* ---------------------------------------------------------------- * Franja "Nuestras bebidas oficiales" en la home * ---------------------------------------------------------------- */ .drinks-strip__title { margin: 0.25rem 0 1.5rem; } .drinks-strip__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); align-items: stretch; } .drinks-strip__tile { display: flex; align-items: center; justify-content: center; background: var(--gc-white); border: 1px solid var(--gc-grey-border); border-radius: 10px; padding: var(--s-4); aspect-ratio: 4 / 3; transition: border-color var(--transition), transform var(--transition); } .drinks-strip__tile:hover { border-color: var(--gc-black); transform: translateY(-2px); } .drinks-strip__tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* En móvil/tablet mantenemos las 5 columnas pero más compactas: los logos siempre en una sola línea, nunca tan grandes como en el muro. */ @media (max-width: 900px) { .drinks-strip__grid { gap: var(--s-2); } .drinks-strip__tile { padding: var(--s-2); aspect-ratio: 1 / 1; } } @media (max-width: 480px) { .drinks-strip__grid { gap: 0.4rem; } .drinks-strip__tile { padding: 0.45rem; border-radius: 7px; } } /* ---------------------------------------------------------------- * Listado de expositores con TODA la información (sin entrar a la ficha) * ---------------------------------------------------------------- */ .exhibitor-list { display: grid; gap: var(--s-4); } .exhibitor-card { background: var(--gc-white); border: 1px solid var(--gc-grey-border); border-radius: 12px; padding: var(--s-5); transition: border-color var(--transition); } .exhibitor-card:hover { border-color: var(--gc-black); } .exhibitor-card__head { margin-bottom: 0.75rem; } .exhibitor-card__meta { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); color: var(--fg-muted); margin-bottom: 0.35rem; } .exhibitor-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin: 0 0 0.3rem; } .exhibitor-card__count { font-size: 0.85rem; color: var(--fg-muted); } .exhibitor-card__desc { margin: 0.5rem 0 0.75rem; font-size: 0.95rem; line-height: 1.45; } .exhibitor-card__web a { display: inline-block; font-family: var(--font-condensed); font-weight: 700; letter-spacing: 0.06em; font-size: 0.8rem; text-transform: uppercase; text-decoration: none; padding: 0.35rem 0.85rem; background: var(--gc-yellow); border: 1.5px solid var(--gc-black); border-radius: 999px; color: var(--gc-black); } .exhibitor-card__web a:hover { background: var(--gc-black); color: var(--gc-yellow); } .exhibitor-card__agenda { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--gc-grey-border); display: grid; gap: 0.85rem; } .exhibitor-day__label { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--gc-black); margin: 0 0 0.4rem; background: var(--gc-yellow); display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px; } .exhibitor-day__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; } .exhibitor-day__list li { display: grid; grid-template-columns: 90px 1fr; gap: 0.6rem; font-size: 0.92rem; line-height: 1.4; padding: 0.25rem 0; border-bottom: 1px dotted var(--gc-grey-border); } .exhibitor-day__list li:last-child { border-bottom: 0; } .exhibitor-day__time { font-family: var(--font-condensed); font-weight: 700; color: var(--gc-black); font-variant-numeric: tabular-nums; } .exhibitor-day__title { color: var(--gc-black); } .exhibitor-day__detail { color: var(--fg-muted); font-style: italic; } @media (max-width: 600px) { .exhibitor-card { padding: var(--s-4); border-radius: 10px; } .exhibitor-day__list li { grid-template-columns: 70px 1fr; font-size: 0.88rem; gap: 0.4rem; } } /* Tarjeta de expositor */ .card-exhibitor { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--gc-white); border: 1px solid var(--gc-grey-border); text-decoration: none; color: var(--gc-black); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card-exhibitor:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--gc-black); opacity: 1; } .card-exhibitor__meta { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); color: var(--fg-muted); } .card-exhibitor__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.2; margin: 0; } .card-exhibitor__stand { font-family: var(--font-condensed); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; display: inline-block; padding: 0.2rem 0.6rem; background: var(--gc-black); color: var(--gc-yellow); justify-self: start; } .card-exhibitor__count { font-family: var(--font-condensed); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); } /* Lista de actividades de un expositor (ficha) */ .activity-list { display: grid; gap: 0; border-top: 1px solid var(--gc-black); } .activity { display: grid; grid-template-columns: minmax(80px, 110px) 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--gc-black); align-items: baseline; } .activity__time { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.01em; white-space: nowrap; } .activity__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.3; margin: 0 0 var(--s-2); } .activity__detail { margin: 0; color: var(--fg); font-size: var(--fs-sm); line-height: 1.5; } @media (max-width: 767px) { .activity { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; } .activity__time { font-size: 1.125rem; } } /* ---------------------------------------------------------------- * 11. Grid utilitario * ---------------------------------------------------------------- */ .grid { display: grid; gap: var(--s-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ---------------------------------------------------------------- * 12. Footer * ---------------------------------------------------------------- */ .site-footer { background: var(--gc-black); color: var(--gc-yellow); padding: var(--s-8) 0 var(--s-5); margin-top: 0; /* el muro de patrocinadores ya separa visualmente */ } .site-footer a { color: var(--gc-yellow); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* Grid principal del footer: marca + 3 columnas */ .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid rgba(255, 237, 168, 0.15); } @media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); } } @media (max-width: 559px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-5); } } /* Bloque de marca */ .footer__logo { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; color: var(--gc-yellow); margin-bottom: var(--s-3); } .footer__logo strong { font-weight: 800; } .footer__logo-year { display: inline-block; font-weight: 800; font-size: 0.85em; margin-left: 0.4em; } .footer__tagline { font-size: 0.9rem; line-height: 1.5; margin: 0 0 var(--s-3); opacity: 0.9; } .footer__address { font-size: 0.78rem; line-height: 1.55; margin: 0; opacity: 0.7; } /* Columnas de enlaces */ .footer__heading { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gc-yellow); opacity: 0.6; margin: 0 0 var(--s-3); } .footer__nav { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); } .footer__nav a { font-size: 0.92rem; } .footer__small-text { font-size: 0.82rem; line-height: 1.55; margin: 0 0 var(--s-2); opacity: 0.9; } .footer__small-text strong { font-weight: 700; } /* Línea legal inferior */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-top: var(--s-5); font-size: 0.78rem; } .footer__legal-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); } .footer__copyright { margin: 0; opacity: 0.6; flex: 1 1 240px; text-align: center; } .footer__credit { margin: 0; font-size: 0.85rem; opacity: 0.95; display: inline-flex; align-items: center; gap: 0.5rem; } .footer__credit a { display: inline-flex; align-items: center; border: 0; } .footer__credit-logo { display: block; height: 28px; width: auto; transition: opacity var(--transition); } .footer__credit a:hover .footer__credit-logo { opacity: 0.75; } @media (max-width: 767px) { .footer__legal { flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); } .footer__legal-nav { justify-content: center; } .footer__copyright, .footer__credit { flex: 1 1 100%; text-align: center; justify-content: center; } } /* ---------------------------------------------------------------- * Página de contenido (aviso legal, privacidad, cookies, etc.) * ---------------------------------------------------------------- */ .legal-page { max-width: 72ch; font-size: 1rem; line-height: 1.65; color: var(--gc-black); } .legal-page h2 { font-size: var(--fs-lg); font-weight: 800; margin-top: var(--s-7); margin-bottom: var(--s-3); letter-spacing: -0.01em; } .legal-page h3 { font-size: 1.125rem; font-weight: 700; margin-top: var(--s-5); margin-bottom: var(--s-2); } .legal-page p { margin: 0 0 var(--s-4); } .legal-page ul, .legal-page ol { margin: 0 0 var(--s-4); padding-left: 1.4rem; } .legal-page li { margin: 0.25rem 0; } .legal-page a { color: var(--gc-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal-page a:hover { color: var(--gc-yellow-toast); } .legal-page table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: 0.92rem; } .legal-page th, .legal-page td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--gc-grey-border); vertical-align: top; } .legal-page th { font-family: var(--font-display); font-weight: 700; background: var(--gc-grey-light); } .legal-page code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 0.1rem 0.35rem; background: var(--gc-grey-light); border-radius: 2px; } .legal-page__updated { margin-top: var(--s-7); padding-top: var(--s-3); border-top: 1px solid var(--gc-grey-border); color: var(--fg-muted); font-size: 0.85rem; font-style: italic; } /* ---------------------------------------------------------------- * 13. Utilidades * ---------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .muted { color: var(--fg-muted); } .text-center { text-align: center; } /* ---------------------------------------------------------------- * Muro de patrocinadores · justo encima del footer * Estructura visual: 4 bandas con jerarquía decreciente. * Organiza → 2 logos centrados, tile grande * Colab. institucional → 3 logos en línea * Patrocinio principal → 2 logos en línea * Colaboradores → grid denso con muchos tiles pequeños * ---------------------------------------------------------------- */ .sponsors-wall { background: var(--gc-white); border-top: 1px solid var(--gc-grey-border); padding: var(--s-8) 0 var(--s-7); scroll-margin-top: 90px; /* el header sticky no debe tapar el ancla #patrocinadores */ } html { scroll-behavior: smooth; } .sponsors-band + .sponsors-band { margin-top: var(--s-7); } .sponsors-band__label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--gc-grey-dark); text-align: center; margin: 0 0 var(--s-5); position: relative; padding-bottom: var(--s-3); } .sponsors-band__label::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--gc-black); } /* ─── Grid por tier ─── */ .sponsors-band__grid { display: grid; align-items: center; justify-items: center; gap: var(--s-5); } /* Organiza: 2 tiles grandes, fila central */ .sponsors-band__grid--organizer { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 720px; margin: 0 auto; } /* Institucional: 3 tiles */ .sponsors-band__grid--institucional { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 960px; margin: 0 auto; } /* Premium: 2 tiles */ .sponsors-band__grid--premium { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 640px; margin: 0 auto; } /* Oficial: 3 tiles SIEMPRE en una sola línea (Ladrón · Águila · Incabe). */ .sponsors-band__grid--oficial { grid-template-columns: repeat(3, 1fr); max-width: 820px; margin: 0 auto; } /* Colaboradores: grid denso */ .sponsors-band__grid--colaborador { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-4); } /* ─── Tile individual ─── */ .sponsor-tile { display: flex; align-items: center; justify-content: center; background: var(--gc-white); border: 1px solid var(--gc-grey-border); padding: var(--s-4); width: 100%; aspect-ratio: 3 / 2; transition: border-color var(--transition), transform var(--transition); } .sponsor-tile:hover { border-color: var(--gc-black); transform: translateY(-2px); } .sponsor-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: none; } /* Tamaños específicos por banda */ .sponsor-tile--organizer { aspect-ratio: 16 / 10; padding: var(--s-5); } .sponsor-tile--institucional { aspect-ratio: 4 / 3; } .sponsor-tile--premium { aspect-ratio: 5 / 3; padding: var(--s-5); } .sponsor-tile--oficial { aspect-ratio: 4 / 3; padding: var(--s-4); } .sponsor-tile--colaborador { aspect-ratio: 3 / 2; padding: var(--s-3); } /* Tile sin logo: nombre en Montserrat */ .sponsor-tile__text { font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; text-align: center; letter-spacing: 0.01em; color: var(--gc-black); line-height: 1.2; text-wrap: balance; } .sponsor-tile--colaborador .sponsor-tile__text { font-size: 0.78rem; } @media (max-width: 767px) { .sponsors-wall { padding: var(--s-6) 0 var(--s-5); } .sponsors-band + .sponsors-band { margin-top: var(--s-6); } .sponsors-band__grid { gap: var(--s-3); } /* En móvil, todas las bandas con tile grande pasan a 2 columnas (auto-fit con minmax pequeño). La mitad del tamaño anterior. */ .sponsors-band__grid--organizer, .sponsors-band__grid--institucional, .sponsors-band__grid--premium { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-width: 100%; } /* En la banda "oficial" mantenemos 3 columnas para que Ladrón · Águila · Incabe siempre estén en una sola línea, también en pantallas pequeñas. */ .sponsors-band__grid--oficial { grid-template-columns: repeat(3, 1fr); max-width: 100%; gap: var(--s-2); } .sponsors-band__grid--colaborador { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: var(--s-2); } .sponsor-tile { padding: var(--s-3); } .sponsor-tile--organizer, .sponsor-tile--premium, .sponsor-tile--oficial { padding: var(--s-3); aspect-ratio: 4 / 3; } .sponsor-tile--institucional { aspect-ratio: 4 / 3; } .sponsor-tile--colaborador { aspect-ratio: 3 / 2; padding: var(--s-2); } .sponsor-tile__text { font-size: 0.72rem; } .sponsor-tile--colaborador .sponsor-tile__text { font-size: 0.65rem; } } /* ---------------------------------------------------------------- * Chat del asistente IA * ---------------------------------------------------------------- */ .chat { display: grid; gap: var(--s-4); } .chat__log { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--gc-grey-light); border: 1px solid var(--gc-black); min-height: 320px; max-height: 60vh; overflow-y: auto; scroll-behavior: smooth; } .chat__msg { display: grid; gap: var(--s-2); max-width: 88%; } .chat__msg--user { justify-self: end; } .chat__msg--bot { justify-self: start; } .chat__bubble { padding: var(--s-3) var(--s-4); border: 1px solid var(--gc-black); font-size: var(--fs-sm); line-height: 1.55; } .chat__bubble p { margin: 0 0 0.5rem; } .chat__bubble p:last-child { margin-bottom: 0; } .chat__bubble ul { margin: 0.5rem 0; padding-left: 1.25rem; } .chat__bubble li { margin: 0.15rem 0; } .chat__bubble a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .chat__bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; padding: 0.05rem 0.3rem; background: rgba(40,40,40,0.08); } .chat__msg--user .chat__bubble { background: var(--gc-black); color: var(--gc-yellow); border-color: var(--gc-black); } .chat__msg--bot .chat__bubble { background: var(--gc-yellow); color: var(--gc-black); } /* Indicador "está escribiendo" */ .chat__dots { display: inline-flex; gap: 4px; align-items: center; height: 1.25em; } .chat__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--gc-black); animation: chatDot 1s ease-in-out infinite; } .chat__dots span:nth-child(2) { animation-delay: 0.15s; } .chat__dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes chatDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } /* Citas: tarjetas pequeñas con la fuente real */ .chat__citations { display: grid; gap: var(--s-2); margin-top: var(--s-1); } .chat__cite { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--gc-black); background: #fffaef; color: var(--gc-black); text-decoration: none; font-size: var(--fs-xs); transition: background var(--transition); } .chat__cite:hover { background: var(--gc-yellow); opacity: 1; } .chat__cite-title { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.25; } .chat__cite-meta { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; color: var(--fg-muted); } .chat__hint { font-family: var(--font-condensed); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); opacity: 0.7; } /* Sugerencias rápidas */ .chat__suggestions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .chat__suggestions-label { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--fg-muted); margin-right: var(--s-1); } .chat__suggestion { font-family: var(--font-body); font-size: 0.82rem; padding: 0.5rem 0.85rem; border: 1px solid var(--gc-black); background: transparent; color: var(--gc-black); cursor: pointer; border-radius: var(--radius-pill); transition: background var(--transition), color var(--transition); } .chat__suggestion:hover { background: var(--gc-black); color: var(--gc-yellow); } /* Input + botón */ .chat__form { display: flex; align-items: stretch; border: 2px solid var(--gc-black); background: #fffaef; height: 52px; } .chat__form input { flex: 1 1 auto; background: transparent; border: 0; outline: 0; font-size: 16px; /* evita zoom iOS */ padding: 0 var(--s-4); font-family: var(--font-body); color: var(--gc-black); } .chat__form input::placeholder { color: var(--gc-grey-dark); } .chat__form input:disabled { opacity: 0.55; } .chat__send { background: var(--gc-black); color: var(--gc-yellow); border: 0; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; padding: 0 var(--s-5); cursor: pointer; transition: background var(--transition); } .chat__send:hover { background: var(--gc-yellow-toast); } .chat__notice { font-size: var(--fs-xs); color: var(--fg-muted); padding: var(--s-2) 0; margin: 0; } @media (max-width: 767px) { .chat__log { padding: var(--s-3); max-height: 55vh; } .chat__msg { max-width: 94%; } .chat__bubble { padding: var(--s-3); } .chat__form { height: 48px; } .chat__send { padding: 0 var(--s-4); font-size: 0.75rem; } .chat__suggestion { font-size: 0.75rem; padding: 0.45rem 0.7rem; } } /* ================================================================ * 14. AFINADO MOBILE (≤ 767 px) * 99,99 % del tráfico previsto. Tap targets ≥ 40 px, jerarquía * tipográfica comprimida, paddings ajustados a pantalla pequeña. * ================================================================ */ @media (max-width: 767px) { /* ---- Container un pelín más ajustado ---- */ :root { --container: min(100% - 1.5rem, 1280px); } /* ---- Header compacto ---- */ .site-header__inner { padding: var(--s-2) 0; gap: var(--s-3); } .brand { font-size: 1.0625rem; letter-spacing: -0.02em; } .brand__cond { font-size: 0.85em; } /* Buscador: ya cae a fila completa con el @media de 1023px, aquí solo afinamos altura y padding del input para iOS */ .site-search { height: 44px; } .site-search input { font-size: 16px; /* evita el zoom de iOS al focus */ padding: 0 var(--s-3); } .site-search button { padding: 0 var(--s-3); font-size: 0.72rem; } /* ---- Tipografía y hero ---- */ .hero { padding: 0 0 var(--s-5); } /* banner pegado al header */ .hero__banner { margin: 0 0 var(--s-5); } /* margen tras la imagen en móvil */ .hero__title { font-size: clamp(2.1rem, 9vw, 3.25rem); line-height: 0.95; } .hero__meta { gap: var(--s-2) var(--s-3); font-size: 0.72rem; } .lead { font-size: 1rem; line-height: 1.5; } /* ---- Secciones más compactas ---- */ .section { padding: var(--s-6) 0; } /* ---- Grids a 1 columna en móvil para evitar wrapping raro ---- */ .grid { gap: var(--s-3); } .grid--2, .grid--3 { grid-template-columns: 1fr; } /* ---- Tarjeta de sesión ---- */ .card-session { padding: var(--s-4); gap: var(--s-2); } .card-session__when { padding-bottom: var(--s-2); gap: var(--s-2) var(--s-3); } .card-session__day { font-size: 0.72rem; padding: 0.25rem 0.6rem; } .card-session__time { font-size: 1.375rem; } .card-session__title { font-size: 1rem; line-height: 1.25; } .card-session__meta { font-size: 0.7rem; } /* ---- Chips: más altos para tap fácil (≥ 36 px) ---- */ .topic-chip { padding: 0.65rem 0.95rem; font-size: 0.72rem; line-height: 1; } /* ---- Filtros: padding menor, sin label ---- */ .topic-filters { padding: var(--s-4) 0; } .topic-filters__row { gap: var(--s-2); } .topic-filters__label { display: none; } /* ---- Botones con tap target generoso ---- */ .btn { padding: 0.7rem 1.1rem; font-size: 0.78rem; } /* ---- Footer una columna ---- */ .site-footer { padding: var(--s-6) 0 var(--s-5); margin-top: var(--s-7); } .site-footer .grid--3 { grid-template-columns: 1fr; gap: var(--s-5); } .site-footer__small { margin-top: var(--s-4); } /* ---- Detalle de sesión: meta apila bonito ---- */ .hero__meta a { padding: 0.25rem 0; display: inline-block; } } /* ================================================================ * Pantallas muy estrechas (≤ 360 px — iPhone SE, móviles antiguos) * Última red de seguridad para que nada desborde. * ================================================================ */ @media (max-width: 360px) { :root { --container: min(100% - 1rem, 1280px); } .brand { font-size: 1rem; } .hero__title { font-size: clamp(1.85rem, 10vw, 2.5rem); } .card-session { padding: var(--s-3); } .topic-chip { padding: 0.6rem 0.8rem; font-size: 0.68rem; } .btn { padding: 0.65rem 1rem; font-size: 0.74rem; } } /* ================================================================ * Mapa del recinto · visor con zoom y desplazamiento * ================================================================ */ .map-viewer { padding: var(--s-6) 0 var(--s-7); background: var(--gc-grey-light); border-top: 1px solid var(--gc-grey-border); border-bottom: 1px solid var(--gc-grey-border); } .map-viewer__frame { position: relative; overflow: hidden; background: var(--gc-white); border: 2px solid var(--gc-black); border-radius: 12px; aspect-ratio: 1175 / 690; width: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .map-viewer__stage { position: relative; width: 100%; height: 100%; transform-origin: center center; transition: none; } .map-viewer__frame picture, .map-viewer__frame img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* el SVG no captura; las hijas sí */ } .map-area { pointer-events: auto; cursor: pointer; text-decoration: none; } .map-area rect { fill: transparent; stroke: transparent; stroke-width: 2; transition: fill 0.18s ease, stroke 0.18s ease; } .map-area:hover rect, .map-area:focus rect, .map-area.is-highlighted rect { fill: rgba(255, 237, 168, 0.55); /* amarillo gc translúcido */ stroke: var(--gc-black); } .map-area:active rect { fill: rgba(255, 237, 168, 0.8); } .map-area--service:hover rect { fill: rgba(50, 200, 100, 0.35); } .map-area--stand-block:hover rect { fill: rgba(255, 200, 0, 0.4); } .map-viewer__controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--s-4); flex-wrap: wrap; } .map-viewer__btn { font: inherit; font-family: var(--font-display); font-weight: 700; background: var(--gc-white); color: var(--gc-black); border: 2px solid var(--gc-black); border-radius: 999px; padding: 0.55rem 1.1rem; min-width: 48px; cursor: pointer; transition: background var(--transition), color var(--transition); -webkit-tap-highlight-color: rgba(40,40,40,0.1); } .map-viewer__btn:hover { background: var(--gc-black); color: var(--gc-yellow); } .map-viewer__btn--reset { min-width: 0; padding-left: 1.1rem; padding-right: 1.1rem; } .map-viewer__hint { margin: var(--s-3) 0 0; font-size: 0.85rem; text-align: center; color: var(--fg-muted); } .map-legend { list-style: none; padding: 0; margin: 0.75rem 0 0; } .map-legend li { padding: 0.45rem 0; border-bottom: 1px solid var(--gc-grey-border); font-size: 0.95rem; } .map-legend li:last-child { border-bottom: 0; } @media (max-width: 600px) { .map-viewer { padding: var(--s-4) 0 var(--s-6); } .map-viewer__btn { padding: 0.5rem 0.9rem; font-size: 0.85rem; } .map-viewer__hint { font-size: 0.78rem; } } /* ── Popover de información de zona ── */ .map-popover { position: fixed; z-index: 1100; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%); width: min(420px, calc(100vw - 1.5rem)); background: var(--gc-white); color: var(--gc-black); border: 2px solid var(--gc-black); border-radius: 14px; padding: 1.1rem 1.25rem 1rem; box-shadow: 0 18px 40px rgba(0,0,0,0.18); opacity: 0; transition: transform 0.32s cubic-bezier(.2,.85,.25,1), opacity 0.25s ease; } .map-popover.is-visible { transform: translate(-50%, 0); opacity: 1; } .map-popover h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.05rem; padding-right: 1.5rem; } .map-popover p { margin: 0 0 0.5rem; font-size: 0.92rem; } .map-popover__close { position: absolute; top: 0.35rem; right: 0.55rem; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 0; font-size: 1.5rem; line-height: 1; border-radius: 50%; cursor: pointer; color: var(--gc-black); transition: background var(--transition); } .map-popover__close:hover { background: rgba(0,0,0,0.08); } .map-popover__list { list-style: none; margin: 0.25rem 0 0; padding: 0; max-height: 280px; overflow-y: auto; } .map-popover__list li { border-top: 1px solid var(--gc-grey-border); } .map-popover__list li:first-child { border-top: 0; } .map-popover__list a { display: block; padding: 0.55rem 0.25rem; color: var(--gc-black); text-decoration: none; font-size: 0.9rem; transition: background var(--transition); } .map-popover__list a:hover { background: var(--gc-grey-light); } .map-popover__list strong { font-family: var(--font-display); margin-right: 0.4rem; } @media (prefers-reduced-motion: reduce) { .map-popover { transition: opacity 0.2s ease; transform: translate(-50%, 0); } } /* ================================================================ * Aviso del canario (cookie / almacenamiento técnico) * ================================================================ */ .cookie-notice { position: fixed; z-index: 1000; left: 50%; bottom: 1.25rem; transform: translate(-50%, 130%); width: min(720px, calc(100vw - 1.5rem)); background: var(--gc-white, #fff); color: var(--gc-black); border: 2px solid var(--gc-black); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.08); opacity: 0; transition: transform 0.45s cubic-bezier(.2,.85,.25,1), opacity 0.35s ease; } .cookie-notice.is-visible { transform: translate(-50%, 0); opacity: 1; } .cookie-notice__inner { position: relative; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 1rem; padding: 1rem 1.25rem 1rem 0.75rem; } .cookie-notice__canary { display: block; width: 100%; height: auto; max-width: 110px; pointer-events: none; } .cookie-notice__bubble { position: relative; background: var(--gc-yellow); border: 2px solid var(--gc-black); border-radius: 14px; padding: 0.85rem 1rem 0.95rem; font-size: 0.95rem; line-height: 1.45; } .cookie-notice__bubble::before { content: ""; position: absolute; left: -12px; top: 28px; width: 14px; height: 14px; background: var(--gc-yellow); border-left: 2px solid var(--gc-black); border-bottom: 2px solid var(--gc-black); transform: rotate(45deg); } .cookie-notice__greeting { margin: 0 0 0.25rem; font-family: var(--font-display, 'Montserrat', sans-serif); font-size: 1rem; } .cookie-notice__text { margin: 0 0 0.75rem; font-size: 0.9rem; } .cookie-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .cookie-notice__btn { padding: 0.55rem 1rem; font-size: 0.9rem; background: var(--gc-black); color: var(--gc-white, #fff); border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; transition: transform 0.2s ease, background var(--transition); } .cookie-notice__btn:hover { transform: translateY(-1px); background: #000; } .cookie-notice__link { font-size: 0.85rem; text-decoration: underline; color: var(--gc-black); font-weight: 600; } .cookie-notice__link:hover { text-decoration: none; } .cookie-notice__close { position: absolute; top: 0.35rem; right: 0.6rem; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--gc-black); cursor: pointer; border-radius: 50%; transition: background var(--transition); } .cookie-notice__close:hover { background: rgba(0, 0, 0, 0.08); } @media (max-width: 600px) { .cookie-notice { bottom: 0.75rem; width: calc(100vw - 1rem); border-radius: 14px; } .cookie-notice__inner { grid-template-columns: 78px 1fr; gap: 0.65rem; padding: 0.85rem 0.85rem 0.85rem 0.55rem; } .cookie-notice__canary { max-width: 78px; } .cookie-notice__bubble { padding: 0.7rem 0.85rem 0.85rem; font-size: 0.88rem; } .cookie-notice__greeting { font-size: 0.95rem; } .cookie-notice__text { font-size: 0.85rem; } .cookie-notice__bubble::before { top: 22px; } } @media (prefers-reduced-motion: reduce) { .cookie-notice { transition: opacity 0.2s ease; transform: translate(-50%, 0); } } /* ================================================================ * iOS / safe-areas en móviles con notch * ================================================================ */ @supports (padding: env(safe-area-inset-bottom)) { body { padding-bottom: env(safe-area-inset-bottom); } .site-header__inner { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .cookie-notice { bottom: calc(1.25rem + env(safe-area-inset-bottom)); } }