/* =========================================================
Nuvlo Agency · style.css
Sistema global definitivo
========================================================= */
/* ---------- 1. Fuente (Nunito · auto-alojada) ----------
Fuente variable (pesos 400–700) servida desde assets/fonts/.
El archivo "latin" va precargado en el de cada página
(), así está listo antes del primer pintado.
font-display: optional → usa Nunito desde el inicio si ya está
cargada (lo está, por el preload) y nunca hace el "flash" a otra
fuente. */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url('assets/fonts/nunito-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 700;
font-display: optional;
src: url('assets/fonts/nunito-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- Variables ---------- */
:root {
--color-text: #2C2C2C;
--color-blanca: #FFFFFF;
--color-azul: #EFF5FE;
--color-brand: #6BAEDC;
--color-dark: #2B6C9D;
--font-base: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--fs-tagline: 14px;
--fs-title: 45px;
--fs-subtitle: 18px;
--fs-body: 15px;
--fw-regular: 400;
--fw-semibold: 600;
--fw-bold: 700;
--lh-title: 1.2;
--lh-text: 1.5;
--space-tagline: 10px; /* tagline → título */
--space-hero: 20px; /* hero: título → subtítulo */
--space-card: 20px; /* interno en cuadros: título → texto */
--space-block: 30px; /* resto de bloques */
--container-max: 1200px;
--radius-btn: 5px;
--radius-card: 7px;
/* Altura estándar de la primera sección del Inicio */
--height-hero: 500px;
/* Altura de la primera sección en páginas internas (mitad del hero del Inicio) */
--height-hero-interior: 250px;
/* Altura estándar del resto de secciones */
--height-section: 500px;
/* Margen entre secciones */
--space-section: 10px;
--t-fast: .25s ease;
}
/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
letter-spacing: 0;
/* Regla global: este sitio no usa sombras (ni box-shadow ni text-shadow)
en ningún componente. Confiar en color, borde y composición. */
box-shadow: none !important;
text-shadow: none !important;
}
html, body { height: auto; }
body {
font-family: var(--font-base);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-text);
color: var(--color-text);
background-color: var(--color-blanca);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
/* =========================================================
2. Jerarquía de textos
========================================================= */
/* Tagline
Regla: la tagline (texto en mayúsculas sobre el título principal) siempre
comparte la alineación del título principal de su sección. Como text-align
es heredable, basta con definir la alineación en el contenedor (.head-seccion,
.hero__content, .contacto-intro, etc.) — la tagline y el título la heredan.
No fijar text-align en .tagline ni en .titulo-principal de forma individual. */
.tagline {
font-size: var(--fs-tagline);
font-weight: var(--fw-bold);
line-height: var(--lh-text);
text-transform: uppercase;
color: var(--color-text);
text-align: inherit;
margin-bottom: var(--space-tagline);
}
/* Títulos */
h1, h2, h3, h4, h5, h6 { color: var(--color-text); }
.titulo-principal,
h1 {
font-size: var(--fs-title);
font-weight: var(--fw-bold);
line-height: var(--lh-title);
}
/* Subtítulos */
.subtitulo,
h2, h3 {
font-size: var(--fs-subtitle);
font-weight: var(--fw-bold);
line-height: var(--lh-text);
margin-bottom: var(--space-block);
}
/* Texto común */
.texto-comun,
p {
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-text);
color: var(--color-text);
margin-bottom: var(--space-block);
}
/* Texto destacado en color de marca */
.text-brand { color: var(--color-brand); }
/* Excepción: hero · título → subtítulo = 20px */
.titulo-principal + .subtitulo,
h1 + .subtitulo {
margin-top: var(--space-hero);
margin-bottom: 0;
}
/* =========================================================
3. Contenedor + Secciones (700px fijo, contenido centrado)
========================================================= */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: 24px;
}
.sec-blanca,
.sec-azul {
width: 100%;
margin-block: var(--space-section);
padding-block: 80px; /* respiración interna en secciones normales */
min-height: var(--height-section); /* altura mínima estándar de sección */
display: flex;
flex-direction: column;
justify-content: center; /* contenido centrado verticalmente */
position: relative;
}
/* Primera sección de la página (justo después del header):
- se pega al header (sin margen superior)
- usa la altura estándar de hero (500px) con contenido centrado
- oculta los desbordes para que funcionen los bloques decorativos */
.site-header + .sec-blanca,
.site-header + .sec-azul {
height: var(--height-hero);
padding-block: 0;
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
/* Primera sección de páginas internas (todas excepto Inicio):
- altura fija de --height-hero-interior (250px, mitad del hero del Inicio)
- el resto de secciones de la página mantienen su altura/padding por defecto
Uso: añadir la clase `.interior` al en todas las páginas que NO sean Inicio.
La primera sección tras el header heredará automáticamente la altura reducida. */
body.interior .site-header + .sec-blanca,
body.interior .site-header + .sec-azul {
height: var(--height-hero-interior);
min-height: var(--height-hero-interior);
}
.sec-blanca { background-color: var(--color-blanca); }
.sec-azul { background-color: var(--color-azul); }
/* ---------- Reveal on scroll (aparición de abajo hacia arriba) ----------
Animación dirigida por scroll (pura CSS, sin JS): cada sección aparece
desde abajo a medida que entra en pantalla. Ocurre en cada carga/recarga.
Gateada por @supports → en navegadores sin soporte las secciones se ven
con normalidad (nunca quedan ocultas). Se respeta prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
section.sec-azul,
section.sec-blanca {
animation: reveal-up linear both;
animation-timeline: view();
animation-range: entry 0% entry 45%;
}
}
}
@keyframes reveal-up {
from { opacity: 0; transform: translateY(48px); }
to { opacity: 1; transform: none; }
}
/* Última sección antes del footer: sin margen inferior (evita franja blanca) */
.sec-blanca:has(+ .site-footer),
.sec-azul:has(+ .site-footer) { margin-bottom: 0; }
/* =========================================================
4. Cuadro de dos columnas (con divisoria + fondos inversos)
========================================================= */
.cuadro-dos-columnas {
display: grid;
grid-template-columns: 1fr;
gap: 10px; /* separación entre cuadros */
margin-bottom: var(--space-block); /* 30px separación antes del botón */
}
.cuadro-dos-columnas .columna {
padding: 20px;
border: 1px solid var(--color-text); /* borde en todo el perímetro */
border-radius: 7px; /* mismo radio que el fondo */
background-clip: padding-box;
}
/* Fondos inversos según contenedor */
.sec-blanca .cuadro-dos-columnas .columna { background-color: var(--color-azul); }
.sec-azul .cuadro-dos-columnas .columna { background-color: var(--color-blanca); }
/* Interno: título → texto = 20px */
.columna .subtitulo,
.columna h3 { margin-bottom: var(--space-card); }
.columna p:last-child { margin-bottom: 0; }
/* Dos columnas en desktop, con 10px de separación entre cuadros */
@media (min-width: 768px) {
.cuadro-dos-columnas {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
/* =========================================================
4.b Cuadro vertical (lista de recuadros apilados)
Mismas reglas que .cuadro-dos-columnas (borde, radio, fondos inversos
según .sec-blanca / .sec-azul), pero apilados en una sola columna.
Uso:
========================================================= */
.cuadro-vertical {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: var(--space-block);
}
.cuadro-vertical .columna {
padding: 20px;
border: 1px solid var(--color-text);
border-radius: var(--radius-card);
background-clip: padding-box;
}
.sec-blanca .cuadro-vertical .columna { background-color: var(--color-azul); }
.sec-azul .cuadro-vertical .columna { background-color: var(--color-blanca); }
/* =========================================================
4.c Cuadro tres columnas (mismas reglas que el de dos columnas)
Uso:
========================================================= */
.cuadro-tres-columnas {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: var(--space-block);
}
.cuadro-tres-columnas .columna {
padding: 20px;
border: 1px solid var(--color-text);
border-radius: var(--radius-card);
background-clip: padding-box;
}
.sec-blanca .cuadro-tres-columnas .columna { background-color: var(--color-azul); }
.sec-azul .cuadro-tres-columnas .columna { background-color: var(--color-blanca); }
@media (min-width: 768px) {
.cuadro-tres-columnas { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
/* =========================================================
5. Encabezado de sección (tagline + título + subtítulo)
========================================================= */
.head-seccion {
text-align: center;
margin-bottom: var(--space-block);
}
.head-seccion .titulo-principal { margin-bottom: var(--space-block); }
/* =========================================================
6. Botón principal
========================================================= */
.btn-principal {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1;
color: var(--color-blanca);
background-color: var(--color-brand);
border: 0;
border-radius: var(--radius-btn);
transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.btn-principal:hover {
color: var(--color-text);
background-color: #5aa1d6;
}
.btn-wrap { display: flex; justify-content: center; }
/* =========================================================
7. HEADER
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background-color: var(--color-blanca);
border-bottom: 1px solid #f1f5f9;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
.site-header__logo img { width: 150px; height: 48px; }
.nav { display: none; }
.nav__list { display: flex; gap: 32px; align-items: center; }
.nav__link {
position: relative;
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--color-text);
padding-bottom: 4px;
transition: color var(--t-fast);
}
.nav__link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background-color: var(--color-brand);
transition: width .3s ease;
}
.nav__link:hover::after,
.nav__link--active::after { width: 100%; }
.site-header__cta { display: none; margin-bottom: 0; }
/* Hamburguesa */
.menu-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: transparent;
border: 0;
border-radius: 6px;
}
.menu-toggle:hover { background-color: #f1f5f9; }
.menu-toggle__bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text);
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle__bar + .menu-toggle__bar { margin-top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.mobile-menu {
overflow: hidden;
max-height: 0;
transition: max-height .3s ease-in-out;
border-top: 1px solid #f1f5f9;
}
.mobile-menu__list { padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__link {
display: block;
padding: 12px;
border-radius: 8px;
font-weight: var(--fw-semibold);
font-size: var(--fs-body);
color: var(--color-text);
}
.mobile-menu__link:hover { background-color: #f8fafc; }
.mobile-menu__link.mobile-menu__link--active { background-color: #f1f5f9; }
.mobile-menu__cta {
display: block;
text-align: center;
margin-top: 8px;
padding: 12px 20px;
border-radius: var(--radius-btn);
background-color: var(--color-brand);
color: var(--color-blanca);
font-weight: var(--fw-bold);
font-size: var(--fs-body);
}
/* =========================================================
8. HERO
========================================================= */
.hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 2;
}
.hero__content > *:last-child { margin-bottom: 0; }
.hero__image {
width: 100%;
border-radius: var(--radius-card);
border: 7px solid var(--color-blanca);
position: relative;
z-index: 2;
}
/* Bloques decorativos solo en desktop */
.hero__deco-dark,
.hero__deco-light { display: none; }
/* Regla: el borde de la imagen siempre es el opuesto al fondo de su sección.
- sec-azul → borde blanco (valor por defecto en .hero__image)
- sec-blanca → borde azul claro */
.sec-blanca .hero__image { border-color: var(--color-azul); }
/* =========================================================
8.b HERO HEADLINE (primera sección de páginas internas)
========================================================= */
.hero-headline {
text-align: center;
position: relative;
z-index: 2;
}
.hero-headline .titulo-principal { margin-bottom: 0; }
/* =========================================================
9. FAQ
========================================================= */
.faq-layout {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
width: 100%;
}
.faq-list {
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-item:last-child { border-bottom: 0; }
.faq-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-block: 20px;
cursor: pointer;
list-style: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-question {
font-size: 17px;
font-weight: var(--fw-bold);
line-height: var(--lh-text);
color: var(--color-text);
padding-right: 16px;
}
.faq-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 9999px;
background-color: var(--color-brand);
color: var(--color-blanca);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color var(--t-fast);
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-icon:hover { background-color: #2c2c2c; }
.faq-item[open] .faq-icon { background-color: #2c2c2c; }
.faq-item[open] .faq-plus-v { display: none; }
.faq-item[open] .faq-question { color: var(--color-brand); }
.faq-answer {
box-sizing: border-box;
overflow: hidden;
padding: 0 48px 20px 0;
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-text);
color: var(--color-text);
will-change: height, padding, opacity;
transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item:not([open]) .faq-answer {
opacity: 0;
transform: translateY(-4px);
}
.faq-item[open] .faq-answer {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.faq-answer { transition: none; }
}
.faq-head .titulo-principal { margin-bottom: 0; }
/* =========================================================
10. CONTACTO (formulario)
========================================================= */
.contacto-layout {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
}
.contacto-intro .titulo-principal { margin-bottom: var(--space-block); }
.contacto-intro__text { margin-bottom: 0; }
/* Subrayado curvo bajo el texto destacado */
.text-underline {
color: var(--color-brand);
position: relative;
display: inline-block;
white-space: normal;
}
.text-underline__line {
position: absolute;
left: 0;
right: 0;
bottom: -10px;
width: 100%;
height: 14px;
color: var(--color-brand);
overflow: visible;
pointer-events: none;
}
/* Formulario */
.form-contacto { width: 100%; }
/* Honeypot anti-spam: campo señuelo oculto a usuarios (lo rellenan los bots). */
.form-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 16px;
}
.form-field { display: flex; flex-direction: column; }
.form-field--half { grid-column: span 2; } /* móvil: todo ancho completo */
.form-field--full { grid-column: span 2; }
.form-label {
display: block;
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: var(--lh-text);
color: var(--color-text);
margin-bottom: 6px;
}
.form-required { color: var(--color-brand); }
.form-input {
width: 100%;
font-family: inherit;
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-text);
color: var(--color-text);
background-color: var(--color-blanca);
border: 1px solid #d6dde6;
border-radius: var(--radius-card);
padding: 12px 14px;
transition: border-color var(--t-fast), background-color var(--t-fast);
-webkit-appearance: none;
appearance: none;
}
.form-input::placeholder { color: #9aa3ad; }
.form-input:hover { border-color: #b9c4d1; }
.form-input:focus,
.form-input:focus-visible {
outline: 0;
border-color: var(--color-brand);
}
.form-textarea {
resize: vertical;
min-height: 140px;
}
.form-submit { margin-top: 6px; }
.form-button { width: 100%; padding-block: 14px; }
/* =========================================================
10.b Páginas legales (texto largo: aviso, privacidad, cookies)
Estructura:
- Títulos de sección (h2) usan estilo subtítulo pero algo más grandes
- Listas con viñeta personalizada en color de marca
- Bloques separados con espaciado consistente
========================================================= */
.legal-content {
max-width: 820px;
margin-inline: auto;
}
.legal-content > * + * { margin-top: var(--space-block); }
.legal-content h2 {
font-size: 22px;
font-weight: var(--fw-bold);
line-height: var(--lh-text);
color: #2c2c2c; /* títulos numerados de páginas legales */
margin-bottom: 0;
display: inline-block;
padding-bottom: 4px;
border-bottom: 5px solid #6baedc;
}
.legal-content p {
font-size: var(--fs-body);
line-height: var(--lh-text);
color: var(--color-text);
margin-bottom: 0;
}
.legal-content ul.legal-list {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.legal-content ul.legal-list li {
position: relative;
padding-left: 22px;
font-size: var(--fs-body);
line-height: var(--lh-text);
color: var(--color-text);
}
.legal-content ul.legal-list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 8px;
border-radius: 9999px;
background-color: var(--color-brand);
}
.legal-content a {
color: var(--color-brand);
font-weight: var(--fw-semibold);
transition: color var(--t-fast);
}
.legal-content a:hover { color: var(--color-dark); }
.legal-update {
font-size: var(--fs-tagline);
text-transform: uppercase;
font-weight: var(--fw-bold);
color: var(--color-brand);
}
/* Tabla legal (Política de Cookies) */
.legal-content .legal-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.legal-content .legal-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-body);
line-height: var(--lh-text);
background-color: var(--color-blanca);
}
.legal-content .legal-table thead th {
text-align: left;
font-weight: var(--fw-bold);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text);
background-color: #f6f7f9;
padding: 14px 16px;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.legal-content .legal-table tbody td {
padding: 16px;
vertical-align: top;
border-top: 1px solid #eef0f3;
color: var(--color-text);
}
.legal-content .legal-table tbody tr:first-child td { border-top: 0; }
.legal-content .legal-table code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
background-color: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
}
/* =========================================================
11. FOOTER
========================================================= */
.site-footer {
background-color: var(--color-blanca);
border-top: 1px solid #e5e7eb;
color: var(--color-text);
}
.site-footer__inner { padding-top: 56px; padding-bottom: 0; }
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: baseline;
}
.footer-heading {
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: var(--lh-text);
text-transform: uppercase;
margin: 0 0 16px 0;
color: var(--color-text);
}
.footer-brand .footer-heading { text-transform: none; font-size: 18px; }
.footer-text {
font-size: var(--fs-body);
line-height: var(--lh-text);
margin: 0 0 16px 0;
max-width: 235px;
}
.footer-link {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--color-text);
transition: color var(--t-fast);
}
.footer-link:hover { color: var(--color-brand); }
.footer-list { display: flex; flex-direction: column; gap: 12px; }
.social-list { display: flex; gap: 12px; }
.social-link {
width: 40px;
height: 40px;
border-radius: 9999px;
background-color: var(--color-brand);
color: var(--color-blanca);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--t-fast);
}
.social-link:hover { color: #2c2c2c; }
.social-link svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
margin-top: 48px;
padding-top: 24px;
padding-bottom: 24px;
border-top: 1px solid #e5e7eb;
text-align: center;
}
.footer-copy {
font-size: var(--fs-body);
white-space: nowrap;
margin: 0;
}
/* =========================================================
RESPONSIVE — Desktop (≥ 1024px)
========================================================= */
@media (min-width: 1024px) {
.nav { display: flex; }
.site-header__cta { display: inline-flex; }
.menu-toggle { display: none; }
.hero__grid { grid-template-columns: 3fr 2fr; gap: 64px; }
.hero__image-wrap { justify-self: end; width: 100%; }
.hero__deco-dark {
display: block;
position: absolute;
inset-block: 0;
right: 0;
width: 20%;
background-color: var(--color-dark);
z-index: 0;
}
.hero__deco-light {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 28.5%;
height: 35%;
background-color: var(--color-brand);
z-index: 1;
}
.faq-layout { grid-template-columns: 1fr 1fr; gap: 64px; }
/* Contacto: dos columnas y campos del formulario en pares */
.contacto-layout { grid-template-columns: 1fr 1fr; gap: 64px; }
.form-field--half { grid-column: span 1; }
.footer-grid { grid-template-columns: repeat(4, 1fr); }
.footer-social { text-align: right; }
.footer-social .social-list { justify-content: flex-end; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* =========================================================
RESPONSIVE — Móvil / Tablet (< 1024px)
En estas pantallas el hero se apila en una sola columna
(título + imagen). Con altura fija + overflow:hidden el
título y la imagen quedaban recortados, así que aquí la
sección crece según su contenido (sin recorte).
========================================================= */
@media (max-width: 1023.98px) {
.site-header + .sec-blanca,
.site-header + .sec-azul {
height: auto;
min-height: var(--height-hero);
padding-block: 56px;
overflow: visible;
}
body.interior .site-header + .sec-blanca,
body.interior .site-header + .sec-azul {
height: auto;
min-height: var(--height-hero-interior);
padding-block: 40px;
}
}
/* Título principal más compacto en teléfonos (evita líneas excesivas) */
@media (max-width: 639.98px) {
.titulo-principal,
h1 { font-size: 34px; }
}
/* =========================================================
12. BANNER DE COOKIES (fijo abajo, inyectado por cookie-consent.js)
========================================================= */
.cookie-banner {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 1000;
background-color: var(--color-azul);
border-top: 1px solid #D6E4FB;
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.cookie-banner__inner {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cookie-banner__text {
flex: 1;
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-text);
color: var(--color-text);
}
.cookie-banner__link {
font-weight: var(--fw-semibold);
color: var(--color-text);
text-decoration: underline;
text-decoration-color: var(--color-brand);
text-underline-offset: 3px;
}
.cookie-banner__link:hover { color: var(--color-dark); }
.cookie-banner__btn { flex-shrink: 0; }
@media (min-width: 640px) {
.cookie-banner__inner {
flex-direction: row;
align-items: center;
}
}