/* ==========================================================================
Agrillendo Insurance — Sitio corporativo
Hoja de estilos principal
Paleta y tipografía extraídas del diseño referencial (home_page.png)
y de los SVG oficiales de marca.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* Color — muestreado del mockup y de los assets SVG */
--navy-900: #042450; /* footer, titulares */
--navy-800: #062E5F;
--navy-700: #0E3564;
--ink: #1B3F6B; /* texto de párrafo */
--ink-soft: #24507F; /* texto secundario en tarjetas */
--teal-700: #027480;
--teal-600: #028E99; /* botones, acentos, epígrafes */
--teal-500: #06AAA4; /* acento del logo */
--teal-400: #0BA7B0; /* iconografía */
--teal-100: #C9E6EA;
--teal-050: #E5F2F2; /* fondo de círculo de icono */
--ice: #F1F7F9; /* franja de contacto */
--surface: #FFFFFF;
--line: #E3EAF0;
--line-strong: #CFDDE6;
--whatsapp: #05C241;
/* Tipografía */
--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Layout */
--container: 1200px;
--gutter: 24px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--header-h: 96px;
--shadow-card: 0 2px 10px rgba(4, 36, 80, 0.05);
--shadow-float: 0 10px 30px rgba(4, 36, 80, 0.16);
}
/* --------------------------------------------------------------------------
2. Reset y base
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.75;
color: var(--ink);
background: var(--surface);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--navy-900);
font-weight: 700;
margin: 0 0 .6em;
line-height: 1.25;
letter-spacing: -0.01em;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible {
outline: 3px solid var(--teal-600);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--navy-900);
color: #fff;
padding: 12px 20px;
z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding: 88px 0; }
.section--ice { background: var(--ice); }
.section--tight { padding-top: 0; }
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-head p { color: var(--ink); }
.eyebrow {
font-family: var(--font-sans);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--teal-600);
margin: 0 0 12px;
}
.section-title { font-size: clamp(1.75rem, 3vw, 2.35rem); margin-bottom: .4em; }
/* --------------------------------------------------------------------------
3. Botones
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 26px;
border: 1.5px solid transparent;
border-radius: var(--radius-sm);
font-size: .9375rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn .arrow { font-size: 1.05em; line-height: 1; }
.btn--primary { background: var(--teal-600); color: #fff; }
.btn--primary:hover { background: var(--teal-700); }
.btn--ghost { background: #fff; color: var(--teal-600); border-color: var(--teal-600); }
.btn--ghost:hover { background: var(--teal-600); color: #fff; }
.btn--white { background: #fff; color: var(--navy-900); }
.btn--white:hover { background: var(--teal-600); color: #fff; }
.btn--sm { padding: 11px 20px; font-size: .875rem; }
.btn--block { width: 100%; }
/* --------------------------------------------------------------------------
4. Header
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: #fff;
border-bottom: 1px solid transparent;
transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-stuck {
box-shadow: 0 2px 14px rgba(4, 36, 80, .08);
border-bottom-color: var(--line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: var(--header-h);
}
.brand { flex: 0 0 auto; }
/* El logo funciona como ![]()
(versión multiarchivo) o como