:root {
/* Paleta oficial de la landing page actual. */
--primary: #1e40af;
--primary-dark: #172554;
--primary-soft: #dbeafe;
--accent: #10b981;
--text: #1e293b;
--muted: #64748b;
--surface: #ffffff;
--page: #f8fafc;
--line: #e2e8f0;
--white: #ffffff;

/* Alias compartidos para páginas públicas y panel administrativo. */
--brand-950: var(--primary-dark);
--brand-900: var(--primary-dark);
--brand-800: var(--primary);
--brand-700: #2563eb;
--brand-accent: var(--accent);
--bg: var(--page);
--card: var(--surface);
--soft: var(--primary-soft);
--surface-soft: #eff6ff;
--icon-soft: var(--primary-soft);
--border: var(--line);
--cta: var(--accent);
--info: #0ea5e9;
--cold: #0ea5e9;
--danger: #dc2626;
--alert: #dc2626;

/* Accesos rápidos - colores similares a la referencia */
--quick-avisos-from: #2a64ac;
--quick-avisos-to: #3b7ccb;

--quick-fuga-from: #5a9fcf;
--quick-fuga-to: #46a7d8;

--quick-tarifas-from: #4b995d;
--quick-tarifas-to: #358d5f;

--quick-contacto-from: #2e6e59;
--quick-contacto-to: #177a6d;
}

/* =========================================================
HOME - HERO + ACCESOS RÁPIDOS
========================================================= */

.hero {
min-height: 300px;
height: 34vh;
max-height: 420px;
position: relative;
overflow: hidden;
}

.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-content,
.hero-content-centered {
min-height: 0 !important;
padding: 0 !important;
}

/* Contenedor de botones: flex para que no se estiren */
.quick-access {
position: relative;
z-index: 20;

margin-top: -30px;
margin-bottom: 28px;

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 12px;
}

/* Botón del largo del texto + icono */
.quick-access-card {
width: auto;
min-width: max-content;
max-width: max-content;

min-height: 64px;
padding: 12px 18px;
border-radius: 14px;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;

color: #ffffff;
text-decoration: none;

font-size: 18px;
font-weight: 850;
letter-spacing: -0.02em;

border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);

transition:
transform 0.18s ease,
box-shadow 0.18s ease,
filter 0.18s ease;
}

.quick-access-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
filter: brightness(1.03);
}

/* Iconos compactos */
.quick-access-icon {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 10px;

display: flex;
align-items: center;
justify-content: center;

color: #ffffff;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.quick-access-icon svg {
width: 18px;
height: 18px;
}

.quick-access-card strong {
display: block;
font-size: 18px;
line-height: 1;
white-space: nowrap;
}

/* Colores con degradado institucional */
.quick-access-card-primary {
background: linear-gradient(
135deg,
var(--quick-avisos-from) 0%,
var(--quick-avisos-to) 100%
);
}

.quick-access-card-sky {
background: linear-gradient(
135deg,
var(--quick-fuga-from) 0%,
var(--quick-fuga-to) 100%
);
}

.quick-access-card-green {
background: linear-gradient(
135deg,
var(--quick-tarifas-from) 0%,
var(--quick-tarifas-to) 100%
);
}

.quick-access-card-slate {
background: linear-gradient(
135deg,
var(--quick-contacto-from) 0%,
var(--quick-contacto-to) 100%
);
}

/* Tablet */
@media (max-width: 1024px) {
.quick-access {
margin-top: -26px;
gap: 12px;
}

.quick-access-card {
min-height: 62px;
padding: 12px 17px;
}
}

/* Celular */
@media (max-width: 640px) {
.hero {
min-height: 240px;
height: 30vh;
}

.quick-access {
margin-top: -20px;
margin-bottom: 24px;
gap: 10px;
}

.quick-access-card {
min-height: 58px;
padding: 11px 16px;
border-radius: 13px;
font-size: 17px;
}

.quick-access-card strong {
font-size: 17px;
white-space: nowrap;
}

.quick-access-icon {
width: 30px;
height: 30px;
min-width: 30px;
}

.quick-access-icon svg {
width: 17px;
height: 17px;
}
}