/* ========================================================================= HELI Ecuador — hoja de estilo única Orden: variables · base · utilidades · cabecera · portada · secciones · tarjetas · catálogo · renta · formulario · pie · responsive ========================================================================= */ /* ---------------------------------------------------------------- variables */ :root { /* Marca. Rojo oficial HELI, medido del logotipo de helichina.net (#E60012). */ --rojo: #E60012; --rojo-osc: #B3000E; --rojo-tenue: #FDE9EB; /* Granates del roll-up de HELI Rental (hoja de anuncio del banner) */ --granate-claro: #841016; --granate: #4E080C; --granate-osc: #200304; /* Neutros */ --tinta: #141518; --tinta-2: #2B313A; --gris: #6B7079; --gris-claro: #9AA0A8; --linea: #E4E6EA; --hueso: #F6F5F3; --blanco: #FFFFFF; /* Acento industrial (señalización, detalles) */ --amarillo: #F0B323; /* Medidas */ --ancho: 1180px; --ancho-corto: 760px; --radio: 14px; --radio-chico: 8px; --radio-pill: 999px; /* Espaciado vertical de sección */ --aire: clamp(64px, 9vw, 120px); /* Sombras */ --sombra: 0 1px 2px rgba(20, 21, 24, .04), 0 8px 24px rgba(20, 21, 24, .06); --sombra-alta: 0 2px 4px rgba(20, 21, 24, .06), 0 20px 44px rgba(20, 21, 24, .14); /* Movimiento */ --transicion: .28s cubic-bezier(.2, .7, .3, 1); /* Tipografía */ --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --alto-cabecera: 76px; } /* --------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--alto-cabecera); overflow-x: hidden; /* aquí y no en , para no romper position:sticky */ } body { margin: 0; font-family: var(--fuente); font-size: 17px; line-height: 1.65; color: var(--tinta-2); background: var(--blanco); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--rojo); /* todos los títulos van en rojo de marca */ line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; } h2 { font-size: clamp(28px, 3.4vw, 44px); } h3 { font-size: clamp(20px, 2vw, 24px); } p { margin: 0 0 1em; } a { color: var(--rojo); text-decoration: none; transition: color var(--transicion); } a:hover { color: var(--rojo-osc); } img, svg { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 4px; } /* ---------------------------------------------------------------- utilidades */ .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; } .seccion { padding-block: var(--aire); } .seccion--sin-tope { padding-top: 0; } .seccion--hueso { background: var(--hueso); } .seccion--tinta { background: var(--tinta); color: #C9CDD4; } /* en las secciones oscuras los títulos también son rojos */ .lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--gris); max-width: 62ch; } .seccion--tinta .lead { color: #AAB1BB; } .subtitulo { font-size: clamp(16px, 1.4vw, 19px); color: var(--gris); max-width: 60ch; margin: 0; } .centrado { text-align: center; } .centrado .lead, .centrado .subtitulo { margin-inline: auto; } /* Salto de línea decorativo: solo en pantallas anchas */ .corte { display: none; } /* Aparición al hacer scroll (js/main.js añade .visible). Solo se esconde si hay JavaScript: la clase .js la pone el