/* ==========================================================================
Tenex — hoja de estilos única
Tokens derivados del sitio oficial (www.tenex.cl).
Ver docs/analisis-sitio-oficial.md para el origen de cada valor.
Mobile-first: las media queries usan min-width.
========================================================================== */
:root {
/* Color de marca */
--color-primary: #bf0029;
--color-heading: #18364a;
--color-accent-yellow: #fff72a;
--color-accent-yellow-alt: #ffcc00;
/* Fondos de sección */
--color-banner-bg: #1d3955;
--color-calculator-bg: #274459;
--color-footer-bg: #d07400;
--color-band: #bf0029;
/* Fondo alterno de las secciones planas. Antes todas eran blancas y, con las
cuatro secciones de fondo azul, el sitio se leia como una sola tira. Este
gris da 5.68 contra --color-body y 5.86 contra el rojo de los titulos, asi
que no se pierde nada de contraste al pintar el fondo. */
--color-section-alt: #f2f4f5;
/* Texto y bordes */
--color-body: #5b6167;
--color-muted: #6b7278;
--color-border: #e3e6e8;
--color-white: #fff;
--color-overlay: rgba(24, 54, 74, 0.62);
/* Tipografía
El sitio oficial usa Open Sans (cuerpo) y Roboto (hero).
Decision consciente: se cargan desde Google Fonts para conservar la
identidad visual. Si el peso o el ancho de banda manda, cambiar ambas
a la pila system-ui del reset y borrar los del . */
--font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-hero: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--fs-h1: 2.25rem;
--fs-h2: 2rem;
--fs-h3: 1.5rem;
--fs-h4: 1.25rem;
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-tiny: 0.75rem;
/* Medidas */
--container: 1170px;
--gutter: 20px;
--header-h: 72px;
--radius-btn: 30px;
--radius-input: 3px;
--section-pad: 56px;
--transition: 0.25s ease;
}
/* --------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.7;
color: var(--color-body);
background: var(--color-white);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.6em;
font-family: var(--font-sans);
font-weight: 700;
line-height: 1.25;
color: var(--color-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-heading); }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* --------------------------------------------------------------------------
Utilidades
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 200;
padding: 12px 20px;
background: var(--color-primary);
color: var(--color-white);
font-weight: 600;
border-radius: 0 0 var(--radius-btn) var(--radius-btn);
}
.skip-link:focus { top: 0; color: var(--color-white); }
.is-ok { color: #2e7d32; }
.is-error { color: var(--color-primary); }
/* --------------------------------------------------------------------------
Iconos — paths exactos de Font Awesome 4.6.2, el webfont que carga el
sitio oficial. Se inyectan como máscaras para poder usar currentColor.
Generados desde fonts/fontawesome-webfont.svg del tema `transera`.
-------------------------------------------------------------------------- */
.icon {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
vertical-align: -0.125em;
flex: none;
}
.icon--search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1152 704q0 185 -131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5t316.5 131.5t131.5 316.5zM1664 -128q0 -52 -38 -90t-90 -38q-54 0 -90 38l-343 342q-179 -124 -399 -124q-143 0 -273.5 55.5t-225 150t-150 225t-55.5 273.5 t55.5 273.5t150 225t225 150t273.5 55.5t273.5 -55.5t225 -150t150 -225t55.5 -273.5q0 -220 -124 -399l343 -343q37 -37 37 -90z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1152 704q0 185 -131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5t316.5 131.5t131.5 316.5zM1664 -128q0 -52 -38 -90t-90 -38q-54 0 -90 38l-343 342q-179 -124 -399 -124q-143 0 -273.5 55.5t-225 150t-150 225t-55.5 273.5 t55.5 273.5t150 225t225 150t273.5 55.5t273.5 -55.5t225 -150t150 -225t55.5 -273.5q0 -220 -124 -399l343 -343q37 -37 37 -90z'/%3E%3C/svg%3E")}
.icon--check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1671 970q0 -40 -28 -68l-724 -724l-136 -136q-28 -28 -68 -28t-68 28l-136 136l-362 362q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -295l656 657q28 28 68 28t68 -28l136 -136q28 -28 28 -68z'/%3E%3C/svg%3E")}
.icon--plane{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1376 1376q44 -52 12 -148t-108 -172l-161 -161l160 -696q5 -19 -12 -33l-128 -96q-7 -6 -19 -6q-4 0 -7 1q-15 3 -21 16l-279 508l-259 -259l53 -194q5 -17 -8 -31l-96 -96q-9 -9 -23 -9h-2q-15 2 -24 13l-189 252l-252 189q-11 7 -13 23q-1 13 9 25l96 97q9 9 23 9 q6 0 8 -1l194 -53l259 259l-508 279q-14 8 -17 24q-2 16 9 27l128 128q14 13 30 8l665 -159l160 160q76 76 172 108t148 -12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1376 1376q44 -52 12 -148t-108 -172l-161 -161l160 -696q5 -19 -12 -33l-128 -96q-7 -6 -19 -6q-4 0 -7 1q-15 3 -21 16l-279 508l-259 -259l53 -194q5 -17 -8 -31l-96 -96q-9 -9 -23 -9h-2q-15 2 -24 13l-189 252l-252 189q-11 7 -13 23q-1 13 9 25l96 97q9 9 23 9 q6 0 8 -1l194 -53l259 259l-508 279q-14 8 -17 24q-2 16 9 27l128 128q14 13 30 8l665 -159l160 160q76 76 172 108t148 -12z'/%3E%3C/svg%3E")}
.icon--map-marker{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M768 896q0 106 -75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75t75 181zM1024 896q0 -109 -33 -179l-364 -774q-16 -33 -47.5 -52t-67.5 -19t-67.5 19t-46.5 52l-365 774q-33 70 -33 179q0 212 150 362t362 150t362 -150t150 -362z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M768 896q0 106 -75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75t75 181zM1024 896q0 -109 -33 -179l-364 -774q-16 -33 -47.5 -52t-67.5 -19t-67.5 19t-46.5 52l-365 774q-33 70 -33 179q0 212 150 362t362 150t362 -150t150 -362z'/%3E%3C/svg%3E")}
.icon--phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1408 296q0 -27 -10 -70.5t-21 -68.5q-21 -50 -122 -106q-94 -51 -186 -51q-27 0 -53 3.5t-57.5 12.5t-47 14.5t-55.5 20.5t-49 18q-98 35 -175 83q-127 79 -264 216t-216 264q-48 77 -83 175q-3 9 -18 49t-20.5 55.5t-14.5 47t-12.5 57.5t-3.5 53q0 92 51 186 q56 101 106 122q25 11 68.5 21t70.5 10q14 0 21 -3q18 -6 53 -76q11 -19 30 -54t35 -63.5t31 -53.5q3 -4 17.5 -25t21.5 -35.5t7 -28.5q0 -20 -28.5 -50t-62 -55t-62 -53t-28.5 -46q0 -9 5 -22.5t8.5 -20.5t14 -24t11.5 -19q76 -137 174 -235t235 -174q2 -1 19 -11.5t24 -14 t20.5 -8.5t22.5 -5q18 0 46 28.5t53 62t55 62t50 28.5q14 0 28.5 -7t35.5 -21.5t25 -17.5q25 -15 53.5 -31t63.5 -35t54 -30q70 -35 76 -53q3 -7 3 -21z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1408 296q0 -27 -10 -70.5t-21 -68.5q-21 -50 -122 -106q-94 -51 -186 -51q-27 0 -53 3.5t-57.5 12.5t-47 14.5t-55.5 20.5t-49 18q-98 35 -175 83q-127 79 -264 216t-216 264q-48 77 -83 175q-3 9 -18 49t-20.5 55.5t-14.5 47t-12.5 57.5t-3.5 53q0 92 51 186 q56 101 106 122q25 11 68.5 21t70.5 10q14 0 21 -3q18 -6 53 -76q11 -19 30 -54t35 -63.5t31 -53.5q3 -4 17.5 -25t21.5 -35.5t7 -28.5q0 -20 -28.5 -50t-62 -55t-62 -53t-28.5 -46q0 -9 5 -22.5t8.5 -20.5t14 -24t11.5 -19q76 -137 174 -235t235 -174q2 -1 19 -11.5t24 -14 t20.5 -8.5t22.5 -5q18 0 46 28.5t53 62t55 62t50 28.5q14 0 28.5 -7t35.5 -21.5t25 -17.5q25 -15 53.5 -31t63.5 -35t54 -30q70 -35 76 -53q3 -7 3 -21z'/%3E%3C/svg%3E")}
.icon--truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M640 128q0 52 -38 90t-90 38t-90 -38t-38 -90t38 -90t90 -38t90 38t38 90zM256 640h384v256h-158q-13 0 -22 -9l-195 -195q-9 -9 -9 -22v-30zM1536 128q0 52 -38 90t-90 38t-90 -38t-38 -90t38 -90t90 -38t90 38t38 90zM1792 1216v-1024q0 -15 -4 -26.5t-13.5 -18.5 t-16.5 -11.5t-23.5 -6t-22.5 -2t-25.5 0t-22.5 0.5q0 -106 -75 -181t-181 -75t-181 75t-75 181h-384q0 -106 -75 -181t-181 -75t-181 75t-75 181h-64q-3 0 -22.5 -0.5t-25.5 0t-22.5 2t-23.5 6t-16.5 11.5t-13.5 18.5t-4 26.5q0 26 19 45t45 19v320q0 8 -0.5 35t0 38 t2.5 34.5t6.5 37t14 30.5t22.5 30l198 198q19 19 50.5 32t58.5 13h160v192q0 26 19 45t45 19h1024q26 0 45 -19t19 -45z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M640 128q0 52 -38 90t-90 38t-90 -38t-38 -90t38 -90t90 -38t90 38t38 90zM256 640h384v256h-158q-13 0 -22 -9l-195 -195q-9 -9 -9 -22v-30zM1536 128q0 52 -38 90t-90 38t-90 -38t-38 -90t38 -90t90 -38t90 38t38 90zM1792 1216v-1024q0 -15 -4 -26.5t-13.5 -18.5 t-16.5 -11.5t-23.5 -6t-22.5 -2t-25.5 0t-22.5 0.5q0 -106 -75 -181t-181 -75t-181 75t-75 181h-384q0 -106 -75 -181t-181 -75t-181 75t-75 181h-64q-3 0 -22.5 -0.5t-25.5 0t-22.5 2t-23.5 6t-16.5 11.5t-13.5 18.5t-4 26.5q0 26 19 45t45 19v320q0 8 -0.5 35t0 38 t2.5 34.5t6.5 37t14 30.5t22.5 30l198 198q19 19 50.5 32t58.5 13h160v192q0 26 19 45t45 19h1024q26 0 45 -19t19 -45z'/%3E%3C/svg%3E")}
.icon--envelope{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1792 826v-794q0 -66 -47 -113t-113 -47h-1472q-66 0 -113 47t-47 113v794q44 -49 101 -87q362 -246 497 -345q57 -42 92.5 -65.5t94.5 -48t110 -24.5h1h1q51 0 110 24.5t94.5 48t92.5 65.5q170 123 498 345q57 39 100 87zM1792 1120q0 -79 -49 -151t-122 -123 q-376 -261 -468 -325q-10 -7 -42.5 -30.5t-54 -38t-52 -32.5t-57.5 -27t-50 -9h-1h-1q-23 0 -50 9t-57.5 27t-52 32.5t-54 38t-42.5 30.5q-91 64 -262 182.5t-205 142.5q-62 42 -117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5 -47t47.5 -113z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1792 826v-794q0 -66 -47 -113t-113 -47h-1472q-66 0 -113 47t-47 113v794q44 -49 101 -87q362 -246 497 -345q57 -42 92.5 -65.5t94.5 -48t110 -24.5h1h1q51 0 110 24.5t94.5 48t92.5 65.5q170 123 498 345q57 39 100 87zM1792 1120q0 -79 -49 -151t-122 -123 q-376 -261 -468 -325q-10 -7 -42.5 -30.5t-54 -38t-52 -32.5t-57.5 -27t-50 -9h-1h-1q-23 0 -50 9t-57.5 27t-52 32.5t-54 38t-42.5 30.5q-91 64 -262 182.5t-205 142.5q-62 42 -117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5 -47t47.5 -113z'/%3E%3C/svg%3E")}
.icon--angle-up{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1075 352q0 -13 -10 -23l-50 -50q-10 -10 -23 -10t-23 10l-393 393l-393 -393q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l466 466q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1075 352q0 -13 -10 -23l-50 -50q-10 -10 -23 -10t-23 10l-393 393l-393 -393q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l466 466q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E")}
.icon--angle-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1075 800q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l393 -393l393 393q10 10 23 10t23 -10l50 -50q10 -10 10 -23z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1075 800q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l393 -393l393 393q10 10 23 10t23 -10l50 -50q10 -10 10 -23z'/%3E%3C/svg%3E")}
.icon--angle-double-right{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1075 672q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l393 -393l393 393q10 10 23 10t23 -10l50 -50q10 -10 10 -23zM1075 1056q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23 t10 23l50 50q10 10 23 10t23 -10l393 -393l393 393q10 10 23 10t23 -10l50 -50q10 -10 10 -23z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1075 672q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l393 -393l393 393q10 10 23 10t23 -10l50 -50q10 -10 10 -23zM1075 1056q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23 t10 23l50 50q10 10 23 10t23 -10l393 -393l393 393q10 10 23 10t23 -10l50 -50q10 -10 10 -23z'/%3E%3C/svg%3E")}
/* Glyph de Font Awesome Free (solid/link). Se usa para "Alianzas
Estrategicas": el sitio original pedia a-handshake-o, que no existe
en Font Awesome 4.6.2 y salia vacio. link es el glifo oficial de la
misma familia, sin inventar ninguna forma. Licencia CC BY 4.0.
https://fontawesome.com/license/free */
.icon--link{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'/%3E%3C/svg%3E")}
/* Glyph de WhatsApp. No viene en Font Awesome 4.6.2 (las marcas llegaron en
la 5); se usa el path público de la marca, no un icono inventado. */
.icon--whatsapp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222.7 99.6-222.7 222 0 39.1 10.2 77.3 29.6 110.9L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 82.6 56.1 132.9 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.6 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.7 5.7-9.1 16.3-30.3 1.8-3.5.9-6.5-.4-9-1.4-2.6-12.5-30.1-17.1-41.2-4.5-11.1-9.1-9.5-12.5-9.6-3.2-.1-6.9.2-10.6 4.9-3.7 4.7-14 13.7-14 33.4 0 19.7 14 38.6 16.4 41.3 2 2.7 28.2 43 68.3 60.2 9.5 4.2 16.9 6.7 23 8.6 9.7 3.1 18.5 2.7 25.5 1.6 7.8-1.2 23.9-9.7 27.3-19.1 3.4-9.4 3.4-17.5 2.4-19.1-1-1.6-3.6-2.6-7.6-4.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222.7 99.6-222.7 222 0 39.1 10.2 77.3 29.6 110.9L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 82.6 56.1 132.9 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.6 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.7 5.7-9.1 16.3-30.3 1.8-3.5.9-6.5-.4-9-1.4-2.6-12.5-30.1-17.1-41.2-4.5-11.1-9.1-9.5-12.5-9.6-3.2-.1-6.9.2-10.6 4.9-3.7 4.7-14 13.7-14 33.4 0 19.7 14 38.6 16.4 41.3 2 2.7 28.2 43 68.3 60.2 9.5 4.2 16.9 6.7 23 8.6 9.7 3.1 18.5 2.7 25.5 1.6 7.8-1.2 23.9-9.7 27.3-19.1 3.4-9.4 3.4-17.5 2.4-19.1-1-1.6-3.6-2.6-7.6-4.6z'/%3E%3C/svg%3E")}
/* --------------------------------------------------------------------------
Botones
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
padding: 12px 35px;
border: 1px solid transparent;
border-radius: var(--radius-btn);
background: var(--color-primary);
color: var(--color-white);
font-size: 1rem;
font-weight: 300;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover,
.btn:focus { background: var(--color-heading); color: var(--color-white); }
.btn--hero { padding: 12px 35px; border-radius: var(--radius-btn); }
.btn--ghost {
background: rgba(255, 255, 255, 0.01);
border-color: var(--color-white);
color: var(--color-white);
}
.btn--ghost:hover,
.btn--ghost:focus { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.btn--block { display: block; width: 100%; }
/* --------------------------------------------------------------------------
Formularios
-------------------------------------------------------------------------- */
.form__row { margin-bottom: 16px; }
.form__label {
display: block;
margin-bottom: 6px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--color-heading);
}
.form__control {
display: block;
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-white);
color: var(--color-heading);
font: inherit;
font-size: var(--fs-small);
transition: border-color var(--transition);
}
.form__control::placeholder { color: var(--color-muted); }
.form__control:focus {
border-color: var(--color-primary);
outline: none;
}
.form__control:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }
textarea.form__control { resize: vertical; min-height: 120px; }
.form__hint {
margin: 6px 0 0;
font-size: var(--fs-tiny);
color: var(--color-muted);
}
/* Aviso honesto: los formularios ya estan conectados a /api/*. Si el envio
falla, se revela este bloque con los datos de contacto reales. */
.form__notice {
margin-top: 16px;
padding: 14px 16px;
border-left: 3px solid var(--color-primary);
background: #fdf2f4;
font-size: var(--fs-small);
color: var(--color-heading);
}
.form__notice[hidden] { display: none; }
/* Resultado del envio. El texto SIEMPRE viene del servidor: nunca se escribe
un "gracias" desde el navegador. :empty lo oculta para no dejar un margen
vacio antes de que la persona envíe algo. */
.form__status {
margin-top: 16px;
padding: 12px 16px;
border-left: 3px solid var(--color-heading);
background: #eef3f7;
font-size: var(--fs-small);
font-weight: 600;
color: var(--color-heading);
}
.form__status:empty { display: none; }
.form__status.is-ok {
border-left-color: #1f7a3d;
background: #eef8f1;
color: #1b5e30;
}
.form__status.is-error {
border-left-color: var(--color-primary);
background: #fdf2f4;
color: #8f0020;
}
/* Error por campo. El texto lo devuelve el Worker y se coloca junto al control,
enlazado con aria-describedby para que un lector de pantalla lo anuncie. */
.form__error {
margin-top: 4px;
font-size: var(--fs-small);
color: #8f0020;
}
.form__control--error,
input.form__control--error,
textarea.form__control--error {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary);
}
/* Campo trampa del honeypot. No se oculta con display:none ni visibility:hidden
porque algunos bots los saltan; queda fuera de pantalla pero presente. */
.form__trampa {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
/* Requisito visible del formulario de casillas. Mismo lenguaje visual que
.form__notice para no inventar un estilo nuevo, pero siempre visible. */
.form-requirement {
margin: 0 0 22px;
padding: 14px 18px;
border-left: 4px solid var(--color-primary);
background: #fdf2f4;
color: var(--color-heading);
font-size: var(--fs-small);
font-weight: 600;
}
.form-requirement__text { margin: 0; }
/* --------------------------------------------------------------------------
Cabecera
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--header-h);
background: transparent;
transition: background-color var(--transition), box-shadow var(--transition);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 100%;
}
.site-header.is-scrolled,
.site-header.is-open { background: var(--color-white); box-shadow: 0 2px 12px rgba(24, 54, 74, 0.12); }
.brand { display: inline-flex; align-items: center; }
.brand__logo { width: auto; height: 38px; }
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--color-white);
transition: color var(--transition);
}
.site-header.is-scrolled .nav-toggle,
.site-header.is-open .nav-toggle { color: var(--color-heading); }
.nav-toggle__bar {
position: relative;
display: block;
width: 24px;
height: 2px;
background: currentColor;
transition: background-color var(--transition);
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: currentColor;
transition: transform var(--transition), top var(--transition);
}
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }
.site-nav { display: none; }
.site-nav.is-open {
display: block;
position: absolute;
top: var(--header-h);
left: 0;
right: 0;
max-height: calc(100vh - var(--header-h));
overflow-y: auto;
padding: 8px var(--gutter) 24px;
background: var(--color-white);
box-shadow: 0 8px 20px rgba(24, 54, 74, 0.16);
}
.site-nav__list > li {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid var(--color-border);
}
.site-nav__item--has-sub { position: relative; }
.site-nav__list > li > .site-nav__link { flex: 1 1 auto; }
.site-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-heading);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--color-primary); }
.site-nav__sub-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
padding: 0;
border: 0;
background: transparent;
color: var(--color-heading);
font-size: 0.8rem;
}
.site-nav__sub-toggle .icon { transition: transform var(--transition); }
.site-nav__sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__sub-toggle[aria-expanded="true"] { color: var(--color-primary); }
.site-nav__sub { display: none; flex: 1 0 100%; padding: 0 0 12px 14px; }
.site-nav__sub.is-open { display: block; }
.site-nav__sub .site-nav__link {
padding: 10px 0;
font-size: 1rem;
font-weight: 400;
color: var(--color-body);
}
.nav-search { padding: 16px 0 4px; }
.nav-search__row { display: flex; gap: 8px; }
.nav-search__input {
flex: 1 1 auto;
min-width: 0;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
font: inherit;
font-size: var(--fs-small);
color: var(--color-heading);
}
.nav-search__input:focus { border-color: var(--color-primary); outline: none; }
.nav-search__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-size: 1rem;
}
/* Newsletter del pie */
.newsletter { margin-top: 14px; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter__input {
flex: 1 1 auto;
min-width: 0;
padding: 10px 16px;
border: 1px solid rgba(24, 54, 74, 0.2);
border-radius: var(--radius-btn);
background: var(--color-white);
font: inherit;
font-size: var(--fs-small);
color: var(--color-heading);
}
.newsletter__input:focus { border-color: var(--color-primary); outline: none; }
.newsletter__input:focus-visible { outline: 3px solid var(--color-heading); outline-offset: 2px; }
/* --------------------------------------------------------------------------
Hero slider
Altura fija por breakpoint y slides en posicion absoluta: no hay CLS.
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 480px;
height: 78vh;
height: 78svh;
max-height: 760px;
overflow: hidden;
background: var(--color-heading);
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s linear, visibility 0s linear 0.3s;
}
.hero__slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
transition: opacity 0.3s linear, visibility 0s;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-overlay);
}
.hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding-top: var(--header-h);
color: var(--color-white);
text-align: center;
}
.hero__line { margin: 0; font-family: var(--font-hero); }
/* El mínimo era 2.75rem y el coeficiente 11vw. Con eso "Internacionales"
(15 caracteres) se renderizaba a ~363px, contra 280px disponibles a 320px
de viewport, y el hero se salía de la pantalla. A 10vw con mínimo 2rem la
palabra entra tanto a 320 como a 375, y el máximo de 6.25rem no cambia: en
escritorio el hero se ve exactamente igual. */
.hero__line--1 {
font-size: clamp(2rem, 10vw, 6.25rem);
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.hero__line--2 {
font-size: clamp(1.5rem, 5.5vw, 3.75rem);
font-weight: 100;
line-height: 1.1;
}
.hero__line--3 {
font-size: clamp(1.25rem, 4.5vw, 3.75rem);
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
color: var(--color-accent-yellow);
}
.hero__slide--3 .hero__line--3 { color: var(--color-accent-yellow-alt); }
.hero__cta { margin-top: 28px; }
.hero__controls {
position: absolute;
z-index: 3;
bottom: 20px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.hero__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--color-white);
font-size: 0.75rem;
transition: background-color var(--transition);
}
.hero__arrow:hover { background: var(--color-primary); border-color: var(--color-primary); }
.hero__arrow--prev .icon { transform: scaleX(-1); }
.hero__dots { display: flex; gap: 8px; }
.hero__dot {
width: 11px;
height: 11px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
background: transparent;
transition: background-color var(--transition), transform var(--transition);
}
.hero__dot[aria-current="true"] { background: var(--color-white); transform: scale(1.25); }
/* --------------------------------------------------------------------------
Encabezado de sección
-------------------------------------------------------------------------- */
.section { padding: var(--section-pad) 0; }
.section--tight { padding: 40px 0; }
.section__head { margin-bottom: 36px; text-align: center; }
.section__head::before {
content: "";
display: block;
width: 123px;
height: 10px;
margin: 0 auto 14px;
background: url("img/ornaments/title-underline.png") no-repeat center / contain;
}
.section__head h2 { margin-bottom: 0.3em; }
.section__head p { margin: 0; font-size: 1.0625rem; }
.section__head--light h2,
.section__head--light p { color: var(--color-white); }
/* --------------------------------------------------------------------------
Servicios
-------------------------------------------------------------------------- */
.services__grid { display: grid; gap: 30px; }
.service-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-border);
transition: box-shadow var(--transition), transform var(--transition);
}
.service-card:hover { box-shadow: 0 12px 28px rgba(24, 54, 74, 0.12); transform: translateY(-3px); }
.service-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 26px 24px 28px; }
.service-card__title { font-size: var(--fs-h3); margin-bottom: 0.5em; }
.service-card__text { flex: 1 1 auto; margin-bottom: 20px; }
.service-card__link { font-weight: 600; }
.service-card__link .icon { font-size: 0.7em; margin-left: 6px; }
/* --------------------------------------------------------------------------
Banners
-------------------------------------------------------------------------- */
.banner {
position: relative;
padding: 56px 0;
background-color: var(--color-banner-bg);
background-size: cover;
background-position: center;
text-align: center;
}
.banner__title { color: var(--color-white); margin-bottom: 0.6em; }
.banner__text { color: rgba(255, 255, 255, 0.9); }
.banner__cta { margin-top: 22px; }
.banner--eeuu { background-image: url("img/bg/banner-eeuu.jpg"); }
.banner--eeuu { background-image: image-set(url("img/bg/banner-eeuu.webp") type("image/webp"), url("img/bg/banner-eeuu.jpg") type("image/jpeg")); }
.banner--miami { background-image: url("img/bg/banner-miami.jpg"); }
.banner--miami { background-image: image-set(url("img/bg/banner-miami.webp") type("image/webp"), url("img/bg/banner-miami.jpg") type("image/jpeg")); }
.band { height: 90px; background: var(--color-band); }
/* --------------------------------------------------------------------------
Habilidades
-------------------------------------------------------------------------- */
.skills__grid { display: grid; gap: 34px; }
.skill { text-align: center; }
.skill__icon {
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
margin: 0 auto 18px;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-primary);
font-size: 2rem;
}
.skill__title { font-size: var(--fs-h4); margin-bottom: 0.5em; }
.skill__text { margin: 0; }
/* --------------------------------------------------------------------------
Calculadora
-------------------------------------------------------------------------- */
.calculator {
background-color: var(--color-calculator-bg);
background-image: url("img/bg/calculadora.jpg");
background-image: image-set(url("img/bg/calculadora.webp") type("image/webp"), url("img/bg/calculadora.jpg") type("image/jpeg"));
background-size: cover;
background-position: center;
}
.calculator__form { max-width: 640px; margin: 0 auto; }
.calculator__units {
display: flex;
gap: 24px;
margin: 0 0 20px;
padding: 0;
border: 0;
}
.calculator__units legend { padding: 0; }
.calculator__unit {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--fs-small);
font-weight: 600;
color: var(--color-white);
cursor: pointer;
}
.calculator__unit input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.calculator__control {
width: 100%;
padding: 14px 16px;
border: 1px solid transparent;
border-radius: var(--radius-input);
font: inherit;
font-size: var(--fs-small);
color: var(--color-heading);
}
.calculator__control:focus { border-color: var(--color-primary); outline: none; }
.calculator__control:focus-visible { outline: 3px solid var(--color-accent-yellow); outline-offset: 2px; }
.calculator__foot {
max-width: 640px;
margin: 26px auto 0;
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.82);
}
.calculator__foot li { margin-bottom: 4px; }
.calculator__result {
margin-top: 26px;
padding: 22px;
background: var(--color-white);
border-radius: var(--radius-input);
text-align: center;
color: var(--color-heading);
}
.calculator__result[hidden] { display: none; }
.calculator__amount { font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.calculator__question { margin: 0 0 16px; font-weight: 600; }
.calculator__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.calculator__error { margin-top: 18px; color: var(--color-accent-yellow); font-size: var(--fs-small); text-align: center; }
.calculator__error[hidden] { display: none; }
/* --------------------------------------------------------------------------
Partners
-------------------------------------------------------------------------- */
.partners__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
align-items: center;
}
.partners__item {
display: flex;
align-items: center;
justify-content: center;
height: 96px;
padding: 12px;
border: 1px solid var(--color-border);
}
/* `max-width` es indispensable: con solo `max-height` la caja de 104px a
320px renderiza el logo a 194px de ancho (72px de alto x 388/144) y la
fila se sale de la pantalla. Con ambos límites el navegador escala el
logo proporcionalmente y entra en la celda. */
.partners__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* --------------------------------------------------------------------------
Testimonios
-------------------------------------------------------------------------- */
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.testimonial__quote-mark { width: 50px; height: 48px; margin: 0 auto 18px; opacity: 0.35; }
.testimonial__text { font-size: 1.125rem; font-style: italic; margin-bottom: 26px; }
.testimonial__author { display: flex; align-items: center; justify-content: center; gap: 16px; }
.testimonial__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.testimonial__name { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--color-heading); }
.testimonial__role { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
/* --------------------------------------------------------------------------
Pie
-------------------------------------------------------------------------- */
.footer-top {
background-color: var(--color-heading);
background-image: url("img/bg/footer-top.jpg");
background-image: image-set(url("img/bg/footer-top.webp") type("image/webp"), url("img/bg/footer-top.jpg") type("image/jpeg"));
background-size: cover;
background-position: center;
color: var(--color-footer-bg);
padding: 44px 0;
}
.footer-top__grid { display: grid; gap: 30px; }
.footer-contact { display: flex; gap: 14px; }
.footer-contact__icon { font-size: 1.375rem; padding-top: 4px; }
.footer-contact__label { margin: 0 0 2px; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.06em; }
.footer-contact__value { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--color-white); }
.footer-contact a { color: var(--color-white); }
.footer-contact a:hover { color: var(--color-accent-yellow); }
.footer-main { background: var(--color-footer-bg); padding: 48px 0; }
.footer-main__grid { display: grid; gap: 34px; }
.footer-main__title {
position: relative;
margin-bottom: 18px;
color: var(--color-primary);
font-size: 1.25rem;
}
.footer-main__text { color: var(--color-heading); font-size: var(--fs-small); }
.footer-main__schedule { margin: 18px 0 0; color: var(--color-heading); font-size: var(--fs-small); }
.footer-main__schedule strong { display: block; margin-bottom: 2px; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--color-heading); font-weight: 600; }
.footer-links a:hover { color: var(--color-primary); }
.footer-bottom {
padding: 18px 0;
background: #18364a;
color: rgba(255, 255, 255, 0.75);
font-size: var(--fs-tiny);
}
.footer-bottom__inner { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.back-to-top {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 90;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-size: 0.875rem;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition), background-color var(--transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-heading); color: var(--color-white); }
/* --------------------------------------------------------------------------
Páginas internas
-------------------------------------------------------------------------- */
.page-header {
padding: calc(var(--header-h) + 44px) 0 44px;
background-color: var(--color-banner-bg);
background-size: cover;
background-position: center;
text-align: center;
color: var(--color-white);
}
.page-header h1 { margin: 0; color: var(--color-white); }
.page-header p { margin: 8px 0 0; color: rgba(255, 255, 255, 0.88); }
.page-body { padding: var(--section-pad) 0; }
.page-body > * + * { margin-top: 18px; }
.page-body h2 { margin-top: 34px; }
.page-body ul { list-style: disc; padding-left: 22px; }
.page-body li { margin-bottom: 8px; }
/* Las imagenes de las paginas internas NUNCA se amplian: con `width: 100%` una
foto de 442x700 se estiraba a 1130x1790 dentro del contenedor de 1170px, o
sea 2.5 veces su tamano real. Se veía pixelada y, en contacto y courier,
ocupaba mas alto que la pantalla. Verificado el 2026-09-26.
`width: auto` + `max-height` dejan que el navegador escale conservando la
proporcion, y como todas las fotos miden al menos 457px de alto, ninguna
llega al tope: siempre se muestran a escala real o menor. */
.page-figure {
display: flex;
justify-content: center;
margin: 0 0 28px;
}
.page-figure img {
width: auto;
height: auto;
max-width: 100%;
max-height: 400px;
border-radius: 2px;
}
.values { display: grid; gap: 20px; }
.values__item { padding: 20px; border: 1px solid var(--color-border); }
.values__term { margin: 0 0 6px; font-weight: 700; color: var(--color-heading); }
.values__desc { margin: 0; }
.form-box { max-width: 720px; }
.form-grid { display: grid; gap: 0 20px; }
.aside-contact { display: grid; gap: 18px; margin-top: 30px; }
.wa-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
/* Resultados de búsqueda */
.search-results { padding: var(--section-pad) 0; }
.search-results__list { display: grid; gap: 18px; }
.search-results__item { padding: 18px; border: 1px solid var(--color-border); }
.search-results__item h3 { margin-bottom: 0.3em; font-size: 1.125rem; }
.search-results__item p { margin: 0; font-size: var(--fs-small); }
.search-results__status { margin-bottom: 22px; }
/* --------------------------------------------------------------------------
Breakpoints (mobile-first)
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
:root {
--fs-h1: 2.5rem;
--fs-h2: 2.25rem;
--section-pad: 72px;
}
.section__head { margin-bottom: 44px; }
.services__grid { grid-template-columns: repeat(2, 1fr); }
.skills__grid { grid-template-columns: repeat(2, 1fr); }
.footer-top__grid { grid-template-columns: repeat(2, 1fr); }
.footer-main__grid { grid-template-columns: repeat(2, 1fr); }
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.band { height: 120px; }
.hero { min-height: 560px; }
.values { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
:root { --header-h: 90px; }
.brand__logo { height: 46px; }
.services__grid { grid-template-columns: repeat(3, 1fr); }
.partners__grid { grid-template-columns: repeat(4, 1fr); }
.footer-main__grid { grid-template-columns: 1.6fr 1fr 1.2fr; }
.hero__arrow { width: 46px; height: 46px; }
.aside-contact--split { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (min-width: 1024px) {
/* Navegación horizontal: se oculta el botón hamburguesa */
.nav-toggle { display: none; }
.site-nav {
display: flex;
align-items: center;
gap: 26px;
}
.site-nav__list {
display: flex;
align-items: center;
gap: 26px;
}
.site-nav__list > li {
display: block;
border-bottom: 0;
}
.site-nav__sub-toggle { display: none; }
.site-nav__link { padding: 8px 0; white-space: nowrap; }
/* Submenú desplegable */
.site-nav__sub {
position: absolute;
top: 100%;
left: -14px;
z-index: 10;
display: block;
flex: none;
min-width: 240px;
padding: 6px 14px;
background: var(--color-white);
box-shadow: 0 8px 20px rgba(24, 54, 74, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.site-nav__list > li:hover .site-nav__sub,
.site-nav__list > li:focus-within .site-nav__sub,
.site-nav__sub.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-nav__sub .site-nav__link { color: var(--color-body); font-weight: 400; }
.nav-search { padding: 0; }
.nav-search__row { position: relative; }
.nav-search__input { width: 0; padding: 0; border-color: transparent; opacity: 0; }
.nav-search__row:hover .nav-search__input,
.nav-search__row:focus-within .nav-search__input {
width: 190px;
padding: 9px 14px;
border-color: var(--color-border);
opacity: 1;
}
.site-header:not(.is-scrolled) .nav-search__input { color: var(--color-heading); }
.nav-search__btn { flex: none; }
}
@media (min-width: 1200px) {
.hero { min-height: 640px; }
}
/* --------------------------------------------------------------------------
"Cómo funciona" — pasos del proceso
-------------------------------------------------------------------------- */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}
.step { text-align: center; }
.step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 16px;
border-radius: 50%;
background: rgba(191, 0, 41, 0.08);
color: var(--color-primary);
font-size: 1.75rem;
}
.step__title {
margin: 0 0 8px;
font-size: 1.125rem;
line-height: 1.3;
color: var(--color-heading);
}
.step__text { margin: 0; font-size: var(--fs-small); }
.steps__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 36px 0 0;
}
@media (min-width: 768px) {
.steps { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}
@media (min-width: 992px) {
.steps { grid-template-columns: repeat(4, 1fr); }
}
/* --------------------------------------------------------------------------
Preguntas frecuentes — nativo, sin JS
-------------------------------------------------------------------------- */
.faq__list {
display: grid;
gap: 12px;
max-width: 820px;
margin: 0 auto;
}
.faq__item {
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-white);
}
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-heading);
cursor: pointer;
list-style: none;
}
/* Safari >= 15.4 y Chrome siguen mostrando el triángulo sin esto */
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-primary); }
.faq__q .icon {
flex: none;
color: var(--color-primary);
transition: transform var(--transition);
}
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__a { padding: 0 20px 18px; }
.faq__a p { margin: 0; }
.faq__a a {
color: var(--color-primary);
text-decoration: underline;
}
/* --------------------------------------------------------------------------
Botón flotante de WhatsApp
Número +56934363068, tomado de las páginas oficiales de casillas, courier
y logística. Se apila sobre `.back-to-top` (fixed 16/16, 44px) para que los
dos controles fijos no se pisen en pantallas angostas.
-------------------------------------------------------------------------- */
.whatsapp-float {
position: fixed;
right: 16px;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
z-index: 89;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
width: 56px;
height: 56px;
border-radius: 28px;
background: #25d366;
color: #fff;
font-size: 1.75rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
transition: width var(--transition), background-color var(--transition),
box-shadow var(--transition);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
background: #1eb855;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}
/* La etiqueta solo aparece en pantallas con espacio; en móvil queda el glyph,
que junto con el aria-label mantiene la accesibilidad. */
.whatsapp-float__label {
display: none;
max-width: 0;
overflow: hidden;
white-space: nowrap;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1;
}
/* El glyph de WhatsApp NO es cuadrado: su viewBox es 0 0 448 512, o sea 0.875
de ancho por cada 1 de alto. Con el .icon generico (width: 1em, height: 1em
y mask-size: contain) queda letterboxed: se dibuja 24.5px dentro de una caja
de 28px, con huecos a los lados que lo hacen ver cortado. Se le da una caja
con la misma proporcion del dibujo y se estira al 100%, asi el trazo llena
el espacio y no le falta ninguna parte.
Esta regla va ANTES del media query de abajo a proposito: si fuera despues,
el orden de fuente la haria ganarle al tamano del pill. */
.whatsapp-float .icon--whatsapp {
width: 1.75rem;
height: 2rem;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media (min-width: 992px) {
.whatsapp-float {
width: auto;
max-width: calc(100vw - 32px);
height: 52px;
padding: 0 20px 0 16px;
border-radius: 26px;
}
.whatsapp-float__label { display: block; max-width: 9rem; }
/* En el pill se muestra la etiqueta, asi que el glyph vuelve a su tamano. */
.whatsapp-float .icon--whatsapp { width: 1.5rem; height: 1.714rem; }
}
/* Anillo que late: llama la atencion sin necesidad de texto ni destellos. Solo
con el boton a la vista (IntersectionObserver lo mete en .wa-visible), porque
un pulso infinito en un elemento que no se ve es trabajo tirado. */
.whatsapp-float::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid #25d366;
opacity: 0;
pointer-events: none;
}
.whatsapp-float.wa-visible::after {
animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
0% { opacity: 0.55; transform: scale(1); }
70% { opacity: 0; transform: scale(1.45); }
100% { opacity: 0; transform: scale(1.45); }
}
.aviso-file {
position: fixed;
inset: 0 0 auto 0;
z-index: 9999;
background: var(--color-primary);
color: var(--color-white);
font-size: var(--fs-small);
line-height: 1.5;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.aviso-file__caja {
max-width: 900px;
margin: 0 auto;
padding: 14px 20px;
}
.aviso-file p { margin: 0 0 6px; }
.aviso-file p:last-child { margin: 0; }
.aviso-file__como { color: var(--color-accent-yellow); }
.aviso-file code {
font-family: Consolas, "Courier New", monospace;
font-weight: 700;
color: var(--color-white);
}
/* ==========================================================================
AJUSTES DE COLOR
Los tres problemas que complained el cliente el 2026-09-26, y como se
arreglan sin tirar la paleta de marca.
1. TODO el sitio era azul: cabecera #1d3955, banners #1d3955, calculadora
#274459 y pie #18364a. Con cuatro azules distintos y ningun otro color de
fondo, las secciones no se diferenciaban entre si. Agora las secciones
"planas" alternan blanco y gris clarisimo, y el titulo va en rojo, que es
el unico color de marca que ya estaba en el sitio.
2. El pie: hereda naranja #d07400 sobre azul #18364a, ratio 3.71. Alcanza
para texto grande, no para texto chico, y las etiquetas son petites. El
naranja se queda como ACENTO GRAFICO (los iconos, que necesitan 3:1 y lo
tienen) y el texto pasa a blanco (12.61).
3. `--color-muted` era #8a9199, ratio 3.19: no Sirve para texto. Baja a
#6b7278, ratio 4.88.
Todos los ratios se calcularon, no se estimaron. Y lo que NO se hizo:
cambiar los tokens de marca. `--color-banner-bg` y `--color-calculator-bg`
siguen igual.
========================================================================== */
/* --- 1. Titulos en rojo, menos donde el fondo es oscuro ------------------ */
/* Se aplica al .section__head de las secciones con fondo blanco o gris. El
modificador --light queda con blanco a proposito: rojo #bf0029 sobre el azul
de la calculadora da 1.58 y sobre el azul de los banners 1.84, o sea
ilegible. Por eso el selector excluye --light en vez de confiar en acordarse
despues. */
.section__head:not(.section__head--light) h2 { color: var(--color-primary); }
/* Los titulos de las paginas internas ( Nosotros, Contacto, Casillas...) van en
el mismo rojo: antes eran del mismo azul que la cabecera y se diluian. */
.page-body h2 { color: var(--color-primary); }
/* --- 2. Fondos alternos --------------------------------------------------- */
/* Las secciones planas alternan. La clase se pone en el HTML, no con
:nth-of-type, porque los del sitio no son hermanos del mismo tipo:
hay .banner y .calculator en medio y contarlos por posicion es fragil. */
.section--alt { background-color: var(--color-section-alt); }
/* La cabecera azul de las paginas internas y el cuerpo no se tocan: el
contraste entre ambos ya es total. */
/* --- 3. Pie de pagina y gris claro --------------------------------------- */
/* El texto del pie a blanco (12.61) y el naranja queda en los iconos (3.71,
y para elementos graficos el minimo es 3:1). */
.footer-top { color: var(--color-white); }
.footer-contact__label {
color: var(--color-white);
font-weight: 700;
}
.footer-contact__icon { color: var(--color-footer-bg); }
@media print {
.whatsapp-float { display: none; }
}
/* ==========================================================================
ANIMACIONES
Todo lo de esta seccion es adorno: si el navegador no lo soporta, o el
visitante pidio menos movimiento, o el JS no corrio, el sitio se ve IGUAL de
bien, solo que sin animacion. Nunca al reves.
El interruptor es `html.js-anim`. Lo pone el JS en cuanto carga. Todas las
reglas que esconden algo cuelgan de esa clase, asi que sin JS no hay nada
escondido: ese es el motivo de no escondir nada en el CSS pelado. Un
`opacity: 0` a secas dejaria la pagina en blanco si el JS falla.
========================================================================== */
/* --- Entrada al hacer scroll ------------------------------------------- */
.js-anim .reveal {
opacity: 0;
transform: translate3d(0, 26px, 0);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.js-anim .reveal.is-in {
opacity: 1;
transform: none;
will-change: auto;
}
/* Escalonado: los hijos de una grilla no aparecen todos de golpe. */
.js-anim .reveal--d1 { transition-delay: 0.08s; }
.js-anim .reveal--d2 { transition-delay: 0.16s; }
.js-anim .reveal--d3 { transition-delay: 0.24s; }
.js-anim .reveal--d4 { transition-delay: 0.32s; }
/* Direccion de entrada segun donde esta el bloque: los que estan a la derecha
entran desde la derecha. Se marca con data-reveal en el HTML. */
.js-anim .reveal[data-reveal="izq"] { transform: translate3d(-30px, 0, 0); }
.js-anim .reveal[data-reveal="der"] { transform: translate3d(30px, 0, 0); }
.js-anim .reveal[data-reveal="izq"].is-in,
.js-anim .reveal[data-reveal="der"].is-in { transform: none; }
/* --- Tarjetas: se levantan al pasar el mouse ---------------------------- */
.js-anim .service-card,
.js-anim .skill,
.js-anim .step,
.js-anim .partners__item {
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s ease;
}
.js-anim .service-card:hover,
.js-anim .skill:hover,
.js-anim .step:hover {
transform: translateY(-6px);
box-shadow: 0 14px 32px rgba(24, 54, 74, 0.16);
}
.js-anim .service-card:hover .service-card__media img,
.js-anim .partners__item:hover img {
transform: scale(1.06);
}
.js-anim .service-card__media img,
.js-anim .partners__item img {
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* El icono de habilidad gira apenas al apuntarlo: se nota el blanco y no
distrae. */
.js-anim .skill__icon {
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.3s ease;
}
.js-anim .skill:hover .skill__icon { transform: rotate(-8deg) scale(1.06); }
/* --- Enlaces del menu: subrayado que se dibuje -------------------------- */
.site-nav__link { position: relative; }
.js-anim .site-nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-anim .site-nav__link:hover::after,
.js-anim .site-nav__link:focus-visible::after,
.js-anim .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* El submenu se abre con un desliz corto, no de golpe. */
.js-anim .site-nav__sub.is-open { animation: sub-desplaza 0.24s ease both; }
@keyframes sub-desplaza {
from { opacity: 0; transform: translateY(-7px); }
to { opacity: 1; transform: none; }
}
/* --- Botones: hundido al apretar --------------------------------------- */
.btn, .service-card__link, .whatsapp-float, .back-to-top {
transition: transform 0.2s ease, background-color var(--transition),
color var(--transition), box-shadow 0.25s ease;
}
.btn:active, .service-card__link:active,
.whatsapp-float:active, .back-to-top:active { transform: scale(0.96); }
/* --- Titulos: la rayita decorativa se abre al entrar -------------------- */
.section__head h2 { position: relative; }
.js-anim .section__head h2::after {
content: "";
display: block;
width: 78px;
height: 3px;
margin: 14px auto 0;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.js-anim .is-in .section__head h2::after,
.js-anim .section__head.is-in h2::after { transform: scaleX(1); }
/* --- FAQ: el signo mas gira al abrir ------------------------------------ */
.faq summary .icon { transition: transform 0.28s ease; }
.js-anim .faq__item.is-open summary .icon { transform: rotate(45deg); }
/* --- WhatsApp: entrada suave al aparecer -------------------------------- */
.js-anim .whatsapp-float { animation: wa-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes wa-entra {
from { opacity: 0; transform: translateY(14px) scale(0.9); }
to { opacity: 1; transform: none; }
}
/* --- Barra al hacer scroll: sombra cuando deja de estar pegada ---------- */
.site-header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
/* ==========================================================================
Si el visitante pidio menos movimiento, se apaga TODO lo de arriba.
El bloque global que ya existia pone las duraciones en 0.001ms; estas reglas
son la segunda red, para los elementos que usan transicion en vez de
animacion (y para que la entrada al scroll no deje nada a media animacion).
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.js-anim .reveal { opacity: 1 !important; transform: none !important; }
.js-anim .site-nav__link::after,
.js-anim .section__head h2::after { transform: none !important; }
.js-anim .service-card:hover,
.js-anim .skill:hover,
.js-anim .step:hover { transform: none; }
.whatsapp-float.wa-visible::after { animation: none !important; }
}