/* ============================================================
TEMA — Mantenimiento Aires Guayaquil
Concepto: "Panel de diagnóstico técnico"
Frío (refrigerante) + calor (urgencia) + lectura de instrumento.
Este archivo se carga DESPUÉS de estilos.css en TODAS las páginas.
Al redefinir las variables que Tailwind ya usa (--color-blue-*,
--color-yellow-*, --color-gray-50/900), retiñe el sitio completo
sin tener que tocar cada clase individual en cada archivo — así
se garantiza el mismo look en las 20 páginas con un solo archivo.
Nota: las fuentes (Space Grotesk / Inter / JetBrains Mono) ya NO
se cargan con @import aquí — @import bloquea el renderizado de la
página (findings de PageSpeed: ~1.500 ms de bloqueo). Se cargan
ahora con + en el
de cada página, que el navegador puede descubrir y precargar
mucho antes.
============================================================ */
:root {
/* Paleta de marca */
--panel-deep: #0B2E33; /* teal-negro profundo — header, footer, headings */
--panel-deep-2: #123840; /* variante para bordes/separadores oscuros */
--refrigerant: #17A2AF; /* cian técnico — acento primario, "frío" */
--refrigerant-dark: #0F7A85;
--refrigerant-light: #E4F6F6;
--ember: #E8622C; /* naranja ember — urgencia y CTA secundario, "calor" */
--ember-dark: #C74A1B;
--cream: #FAF7F0; /* fondo cálido, reemplaza el gris frío genérico */
/* Re-mapeo de las variables de Tailwind ya compiladas en estilos.css.
Al no estar dentro de @layer, esta capa "sin nombre" tiene prioridad
sobre @layer theme del archivo de Tailwind, sin importar el orden. */
--color-blue-50: var(--refrigerant-light);
--color-blue-100: #CFEFEF;
--color-blue-200: #AEE3E5;
--color-blue-400: #4FB8C2;
--color-blue-500: var(--refrigerant);
--color-blue-600: #128B96;
--color-blue-700: var(--refrigerant-dark);
--color-blue-800: #0C616A;
--color-blue-900: var(--panel-deep);
--color-blue-950: #081F23;
--color-yellow-500: var(--ember);
--color-yellow-600: var(--ember-dark);
--color-gray-50: var(--cream);
--color-gray-900: var(--panel-deep);
--color-gray-800: var(--panel-deep-2);
}
/* Tipografía: pareja deliberada — Space Grotesk (técnica, geométrica)
para titulares; Inter para texto de lectura; JetBrains Mono para
"lecturas de instrumento" (precios, teléfono). */
body {
font-family: 'Inter', var(--font-sans);
}
h1, h2, h3 {
font-family: 'Space Grotesk', var(--font-sans);
}
.readout {
font-family: 'JetBrains Mono', var(--font-mono);
letter-spacing: 0.01em;
}
/* Acento de marca bajo el nav (el borde gris genérico no cambia de color
con el retinte porque usa la variable --color-gray-200, no azul) */
.nav-brand {
border-bottom: 3px solid var(--refrigerant) !important;
}
/* Panel del hero: gradiente sutil frío + resplandor, en vez del azul plano */
.hero-panel {
background: linear-gradient(160deg, var(--panel-deep) 0%, var(--refrigerant-dark) 130%);
position: relative;
overflow: hidden;
}
.hero-panel::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 88% 12%, rgba(23, 162, 175, .35), transparent 55%);
pointer-events: none;
z-index: 2;
}
/* ============================================================
Foto de fondo del hero (aplicada en las 19 páginas con nav
unificada; guia-clima-guayaquil.html queda fuera a propósito,
ver historial de cambios). Duotono con overlay fuerte para
proteger el contraste ya validado en accesibilidad — la foto
da identidad de nicho como textura, sin competir con el texto.
============================================================ */
.hero-photo-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.hero-photo-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(160deg,
rgba(11, 61, 92, 0.90) 0%,
rgba(10, 77, 110, 0.87) 20%,
rgba(12, 94, 126, 0.83) 45%,
rgba(14, 107, 138, 0.80) 65%,
rgba(15, 122, 149, 0.78) 100%);
}
.hero-copy h1,
.hero-copy p {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Elemento de firma: manómetro/gauge decorativo, un solo lugar, discreto.
Posicionamiento en CSS puro (no en clases de Tailwind): el build de
Tailwind de este sitio está purgado a solo las clases ya usadas, así
que clases nuevas como "top-6"/"right-6" no existen en estilos.css. */
.gauge-dial {
position: absolute;
top: 24px;
right: 24px;
width: 72px;
height: 72px;
opacity: .95;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
padding: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
z-index: 3;
}
/* Foco de teclado visible con el color de marca (accesibilidad) */
:focus-visible {
outline: 3px solid var(--ember);
outline-offset: 2px;
}
/* Barra de urgencia: tono ámbar propio, distinto del ember del botón
de llamar — así el CTA es el único elemento de ese color exacto. */
.barra-urgencia-brand {
background-color: #D97706;
}
/* ============================================================
Insignia de estrellas: esquina superior izquierda del hero,
simétrica al ícono de marca que ya va en la esquina derecha.
============================================================ */
.badge-esquina-izq {
position: absolute;
top: 20px;
left: 24px;
z-index: 5;
}
/* ============================================================
Efecto "foco": resalta un elemento puntual (no continuo en
toda la página) — reservado solo para 2 elementos por página:
las estrellas de Google y el aviso/recuadro propio de cada
zona. No se usa en más lugares para no repetir el ruido visual
que ya se corrigió antes.
============================================================ */
/* ============================================================
Resalte animado: destaca un elemento puntual con brillo tipo
"foco" en loop. Reservado solo para 2 elementos por página:
las estrellas de Google y el aviso/recuadro propio de cada zona.
============================================================ */
@keyframes focoBrilloDorado {
0%, 100% { box-shadow: 0 0 8px 2px rgba(250, 204, 21, .45); }
50% { box-shadow: 0 0 20px 7px rgba(250, 204, 21, .7); }
}
.foco-dorado {
animation: focoBrilloDorado 2.4s ease-in-out infinite;
}
@keyframes focoBrilloBlanco {
0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 255, 255, .35); }
50% { box-shadow: 0 0 22px 8px rgba(255, 255, 255, .6); }
}
.foco-blanco {
animation: focoBrilloBlanco 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
/* ============================================================
ARREGLO: clases de Tailwind con sintaxis arbitraria ([...])
que nunca llegaron a compilarse en el build purgado de
estilos.css (venían así desde el ZIP original, confirmado en
varias auditorías de esta sesión). La más grave: sin z-[999],
el panel del menú desplegable móvil quedaba SIN z-index real,
así que el hero (un bloque opaco que viene después en el HTML)
lo tapaba — por eso solo se veía "Inicio" asomando arriba y
nada más. Estas reglas las definen en CSS puro, sin depender
de que Tailwind las haya compilado.
============================================================ */
.z-\[999\] {
z-index: 999;
}
.top-\[72px\] {
top: 72px;
}
.max-h-\[calc\(100vh-72px\)\] {
max-height: calc(100vh - 72px);
}
.overflow-y-auto {
overflow-y: auto;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
border-top-width: 1px;
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
border-color: #f3f4f6;
}
.w-11 {
width: 2.75rem;
}
.h-11 {
height: 2.75rem;
}
.w-64 {
width: 16rem;
}
.w-72 {
width: 18rem;
}
@media (min-width: 768px) {
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
}