/* ========================================================================= 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); } /* Verano: aguamarina con acento coral. Sensación de piscina y frescor, en la misma familia de color que el cartel pero más actual. */ .tema-verano { --temporada: #0e9e86; --temporada-fuerte: #076253; --temporada-suave: #e8f8f4; --temporada-acento: #ff6b4a; --particula-color: rgba(255, 255, 255, 0.9); --particula-borde: rgba(14, 158, 134, 0.5); } .tema-navidad { --temporada: #0d6480; --temporada-fuerte: #084456; --temporada-suave: #eaf5f9; /* Los copos NO son blancos: la cabecera es casi blanca y no se verían. Van en el azul de la temporada, rebajado, como si estuvieran dibujados a lápiz sobre el fondo. */ --particula-color: rgba(13, 100, 128, 0.40); --particula-borde: rgba(13, 100, 128, 0.18); } .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); } /* Texto justificado: preferencia del centro. 'hyphens' no es opcional aquí. El castellano tiene palabras largas y, sin partición, justificar abre ríos de blanco entre palabras. Funciona porque le dice al navegador qué diccionario usar. */ p { text-align: justify; hyphens: auto; } /* Se justifica el texto corrido, no cualquier párrafo. Quedan fuera: - los que van dentro de un bloque centrado a propósito, porque una regla directa sobre 'p' gana a la alineación heredada del contenedor; - los de columna estrecha, donde no caben palabras suficientes por línea y la justificación se ve como agujeros. */ .llamada p { text-align: center; hyphens: manual; } .tarjeta p { text-align: left; hyphens: manual; } .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)); line-height: 1.6; transition: border-color 160ms ease, box-shadow 160ms ease; } /* Chrome no aplica 'line-height' al recuadro de un con el mismo relleno. Puestos en la misma fila se ve el escalón, y lo que venga debajo de cada columna deja de alinearse con la de al lado. Se igualan con una altura mínima calculada igual que la del input: línea (1.6em) + relleno (2 × 0.7em) + bordes. Las casillas y los radios quedan fuera a propósito: tienen su propio tamaño y esto los volvería enormes. */ input:not([type="checkbox"]):not([type="radio"]), select { min-height: calc(1.6em + 1.4em + 4px); } 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. ========================================================================= */ /* Ocultar esperando a JavaScript SOLO en escritorio. Medido con Lighthouse: en movil, con 4G lenta y CPU al 25%, el elemento que cuenta como LCP tardaba NUEVE segundos en aparecer, porque estaba escondido hasta que se descargaban, parseaban y ejecutaban los 135 KB de GSAP. El servidor respondia en 12 milisegundos. En movil se anima con CSS, que corre en cuanto llega la hoja de estilos, y GSAP no interviene. */ @media (min-width: 62em) { .anima [data-anima="entrada"], .anima [data-anima="titulo"] { opacity: 0; } .anima [data-anima="cascada"] > * { opacity: 0; transform: translateY(1.5rem); } } @media (max-width: 61.999em) { .anima [data-anima] { opacity: 0; animation: aparecer 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } } /* ---- EXCEPCIÓN: el hero nunca espera a JavaScript ---- Medido con Lighthouse en móvil con 4G lenta: el titular del hero es el elemento que cuenta como LCP, y esconderlo hasta que GSAP se descargue, se parsee y se ejecute daba 5,5 segundos de pantalla en blanco con un servidor que responde en 12 milisegundos. Aquí se anima con CSS, que corre en cuanto llega la hoja de estilos. El JavaScript ni lo toca. Los retardos van fijos, escalonados por tipo de elemento, porque el CSS no puede leer data-anima-retardo. */ .anima .hero [data-anima] { opacity: 0; animation: aparecer 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .anima .hero .sobretitulo[data-anima] { animation-delay: 0s; } .anima .hero h1[data-anima] { animation-delay: 0.06s; } .anima .hero .entradilla[data-anima] { animation-delay: 0.14s; } .anima .hero [data-anima].hero-marca, .anima .hero [data-anima].hero-cartel { animation-delay: 0.22s; } @keyframes aparecer { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } /* Con movimiento reducido no hay ni fundido: aparece y ya está. */ @media (prefers-reduced-motion: reduce) { .anima .hero [data-anima] { opacity: 1; animation: none; } } /* 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); } /* El puente sobre el hueco. Entre el botón y el panel hay 0,4rem de aire. Ese hueco no es ni lo uno ni lo otro: al bajar el ratón hacia «Verano» se cruzaba una franja sin hover y el desplegable se cerraba en la cara. Esta banda invisible lo tapa. Vive dentro del panel, así que solo existe mientras está abierto; con el panel oculto no captura nada, porque visibility:hidden tampoco recibe ratón. */ .submenu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.6rem; } /* En escritorio el desplegable no se esconde con «display», sino con «visibility». La diferencia importa: display se aplica de golpe y no admite retardo, mientras que visibility sí, y ese retardo es el margen de gracia que hace cómodo el menú. Al salir, el panel se queda quieto y entero 180 ms, y solo entonces se desvanece. Durante todo ese rato sigue siendo alcanzable con el ratón, así que un titubeo o un desvío ya no lo cierran. Al entrar, en cambio, aparece sin esperar: los retardos molestan al abrir y ayudan al cerrar. */ .js .submenu { display: block; visibility: hidden; opacity: 0; transform: translateY(-0.25rem); transition: opacity 140ms ease 180ms, transform 140ms ease 180ms, visibility 0s linear 320ms; } /* Con ratón basta pasar por encima, con teclado basta el foco dentro, y al pulsar el botón se queda fijo con aria-expanded. */ .js .menu-elemento-padre:hover .submenu, .js .menu-elemento-padre:focus-within .submenu, .js .menu-padre[aria-expanded="true"] + .submenu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } } @media (min-width: 62em) and (prefers-reduced-motion: reduce) { /* Sin desplazamiento ni fundido, pero el margen de gracia se queda: no es decoración, es lo que permite llegar al panel. */ .js .submenu { transform: none; transition: opacity 0s linear 180ms, visibility 0s linear 180ms; } } /* ========================================================================= 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-redes { display: flex; gap: 0.6rem; list-style: none; padding: 0; margin-top: 1.2rem; } .pie-redes a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; /* zona táctil holgada */ border: 1px solid rgb(255 255 255 / 0.2); border-radius: 50%; color: #fff; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pie-redes a:hover { background: var(--acento); border-color: var(--acento); color: #fff; transform: translateY(-2px); } .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; }