con
el gradiente azul semitransparente que iba encima de la imagen en cada
página) — la imagen se ve tal cual, sin tinte. bg-isa-primary se
conserva como color de respaldo SOLO para el caso en que la imagen no
cargue (ver el aviso con onerror de cada
![]()
de hero).
========================================================================== */
.hero-section{
position: relative;
height: var(--hero-height, 550px);
display: flex;
align-items: center;
overflow: hidden;
}
/* ==========================================================================
Hero de index.html (#inicio): altura FIJA de 500px (la imagen de fondo
debe verse completa a su ancho real, sin recortarse — por eso la caja
no se toca). El espacio que sobraba entre el menú y el bloque de
logo+texto NO se resuelve achicando esta caja, sino cambiando cómo se
posiciona el contenido DENTRO de ella: en vez de centrado verticalmente
(align-items:center, heredado de .hero-section), aquí se ancla arriba
(align-items:flex-start) con un colchón chico (padding-top) — así el
bloque de logo+texto queda pegado cerca del menú, sin afectar el
tamaño de la imagen ni de la caja del hero.
==========================================================================
Selector con #inicio para que SOLO afecte esta página: las otras 6
siguen usando la altura fija compartida de --hero-height Y el centrado
vertical normal de .hero-section (ahí sí tiene sentido, son fotos a
pantalla completa sin un bloque de texto tan alto encima). */
#inicio.hero-section{
height: 500px;
align-items: flex-start;
padding-top: 2rem;
}
/* Misma excepción al mini-compilador de utilities.css que las de arriba:
.h-\[3px\] no estaba en uso en ningún otro lado antes de la línea
divisoria roja del hero de index.html. */
.h-\[3px\]{ height:3px; }
/* Misma excepción: .w-48 no estaba en uso en ningún otro lado antes de
duplicar el largo de la línea divisoria roja del hero de index.html. */
.w-48{ width:12rem; }
/* Línea divisoria roja del hero de index.html: 4 veces su largo anterior
(12rem -> 48rem). Como 48rem no es un valor de la escala estándar de
utilities.css, se define aquí como excepción, mismo criterio que las
de arriba. */
.hero-divider-4x{ width:48rem; max-width:100%; }
/* Línea divisoria roja del hero de index.html: la mitad de larga que
.hero-divider-4x de arriba. Como esta última quedaba topada al 100%
del ancho de su columna (48rem excedía el contenedor), "la mitad" se
calcula sobre ese 100% visible, no sobre los 48rem literales que nunca
llegaban a verse completos. */
.hero-divider-half{ width:50%; }
/* Misma excepción: fondo #f4f4f4 semitransparente + margen negativo para
el "parche" de legibilidad detrás del párrafo del hero de index.html
(la imagen de fondo ya no lleva degradado oscuro, así que un párrafo
gris podía perderse contra zonas oscuras de la foto). Se usa #f4f4f4
(el mismo gris de --color-bg) en vez de blanco puro, para que combine
con el resto de la paleta. El margen negativo compensa visualmente el
padding para que el texto siga alineado con el encabezado de arriba.
El padding vertical (.hero-text-patch) queda lo más ajustado posible al
texto (.1rem = 1.6px), casi pegado a las letras sin recortarlas. */
.bg-isa-bg-85{ background-color: rgba(244,244,244,.85); }
.-mx-4{ margin-left:-1rem; margin-right:-1rem; }
.hero-text-patch{ padding-top:.1rem; padding-bottom:.1rem; }
/* Botones del hero de index.html: más chicos que el resto del sitio (que
usa .btn-isa sin modificar). Solo se aplica junto con btn-isa en esos 2
botones — no afecta ningún otro botón del proyecto (formulario de
contacto, CTA de cronología, etc.). Reduce alto (padding vertical),
ancho (padding horizontal) y tamaño de letra a la vez. */
/* Botones del hero de index.html, 25% menos altos que el resto del sitio
(que usa .btn-isa sin modificar: padding vertical .75rem). Solo se
aplica junto con btn-isa en esos 2 botones — no afecta ningún otro
botón del proyecto (formulario de contacto, CTA de cronología, etc.). */
.hero-cta-btn{ padding-top:.4rem; padding-bottom:.4rem; padding-left:1.4875rem; padding-right:1.4875rem; }
/* h1 del hero de index.html: esta clase NUNCA se había generado en ningún
CSS del proyecto (ni utilities.css, ni una excepción aquí), así que el
navegador ignoraba "leading-[1.05]" en el HTML y usaba el line-height:1.5
por defecto del body (definido en base.css) — de ahí el salto tan grande
entre "INTEGRACIÓN" y "DE SISTEMAS". Se define aquí, más ajustado
(0.92 en vez del 1.05 que nunca llegó a aplicarse). */
.leading-\[1\.05\]{ line-height:.92; }
/* Misma excepción al mini-compilador de utilities.css: .text-base y .h-16
no estaban en uso en ningún otro lado antes de achicar un escalón el
texto del hero y agrandar un escalón el logotipo de index.html. */
.text-base{ font-size:1rem; }
.h-16{ height:4rem; }
/* Misma excepción: .h-28 (7rem) no estaba en uso en ningún otro lado antes
de subir un escalón más el logotipo del hero de index.html (h-24 -> h-28). */
.h-28{ height:7rem; }
/* Misma excepción: .h-56 (14rem) no estaba en uso en ningún otro lado antes
de duplicar el tamaño del logotipo del hero de index.html (h-28 -> h-56). */
.h-56{ height:14rem; }
/* Misma excepción: .flex-1 y .min-w-0 no estaban en uso en ningún otro
lado antes de corregir el desbordamiento del bloque de texto del hero
de index.html. Sin min-w-0, un hijo flex nunca se encoge más allá del
ancho de su contenido (comportamiento por defecto de CSS Grid/Flexbox),
así que el texto se salía del contenedor en vez de hacer salto de línea
(wrap) para caber junto al logotipo. */
.flex-1{ flex:1 1 0%; }
.min-w-0{ min-width:0; }
/* Misma excepción: .pt-2 no estaba en uso en ningún otro lado antes de
alinear verticalmente el bloque de texto del hero con el logotipo
(index.html) cuando los botones se movieron debajo del logotipo. */
.pt-2{ padding-top:.5rem; }
@media (min-width:768px){
.md\:pt-2{ padding-top:.5rem; }
}
/* ==========================================================================
Menú principal (header) — ancho reducido 30% en las 7 páginas del sitio
==========================================================================
Auditoría: 5 de las 7 páginas (casos-de-exito, contacto-isadc,
cronologiaISA, servicios-integrales, venta) YA tenían esta clase
aplicada en su header con un valor de -20% (64rem). index.html y
capacitacion.html no la tenían (por eso se veían con el hueco amplio
en la captura de referencia). Se mantiene el mismo NOMBRE de clase
(max-w-5xl) para no romper esas 5 páginas que ya la usan — solo se
actualiza el VALOR al 30% pedido ahora, y se agrega la clase al header
de index.html y capacitacion.html para que las 7 queden iguales.
Cálculo: hueco medido en pantalla ~220px (equivalentes en CSS) a cada
lado del menú. Con justify-between, ese hueco es exactamente la mitad
del espacio libre del contenedor — angostar el contenedor 128px reduce
cada hueco en 64px (~29% ≈ 30% pedido). 80rem (1280px, max-w-7xl) menos
esos 128px = 72rem.
Se aplica SOLO al contenedor interno del
, no a los demás
bloques "max-w-7xl" de cada página (footer, hero, secciones internas),
que conservan su ancho de 80rem sin cambios — así el logo y el botón
se acercan al menú sin que el header dejе de alinearse con el resto
del contenido de la página. */
.max-w-5xl{ max-width:72rem; }
/* ==========================================================================
Colores de marca en venta.html — ProSoft, ABB, ifm y Airtac
==========================================================================
Auditoría: el mini-compilador de utilities.css solo había generado las
clases de color arbitrario (bg-[#..], border-[#..], hover:border-[#..],
text-[#..]) para Rockwell, Siemens, Delta y Danfoss — probablemente
porque esas 4 marcas se agregaron al HTML antes de la última vez que se
compiló utilities.css. Las 4 restantes (ProSoft #1a1a1a, ABB #e2001a,
ifm #ee7203, Airtac #004990) SÍ tenían las clases puestas en el HTML,
pero al no existir en ningún CSS no hacían nada — por eso no se veía ni
el marco superior de su sección, ni el color del nombre de la marca, ni
el borde al pasar el mouse sobre sus imágenes. Se agregan aquí manual,
mismo criterio que el resto de excepciones de este archivo. */
.bg-\[\#1a1a1a\]{ background-color:#1a1a1a; }
.bg-\[\#1a1a1a\]\/5{ background-color:rgba(26,26,26,.05); }
.border-\[\#1a1a1a\]{ border-color:#1a1a1a; }
.hover\:border-\[\#1a1a1a\]:hover{ border-color:#1a1a1a; }
.text-\[\#1a1a1a\]{ color:#1a1a1a; }
.bg-\[\#e2001a\]{ background-color:#e2001a; }
.bg-\[\#e2001a\]\/5{ background-color:rgba(226,0,26,.05); }
.border-\[\#e2001a\]{ border-color:#e2001a; }
.hover\:border-\[\#e2001a\]:hover{ border-color:#e2001a; }
.text-\[\#e2001a\]{ color:#e2001a; }
.bg-\[\#ee7203\]{ background-color:#ee7203; }
.bg-\[\#ee7203\]\/5{ background-color:rgba(238,114,3,.05); }
.border-\[\#ee7203\]{ border-color:#ee7203; }
.hover\:border-\[\#ee7203\]:hover{ border-color:#ee7203; }
.text-\[\#ee7203\]{ color:#ee7203; }
.bg-\[\#004990\]{ background-color:#004990; }
.bg-\[\#004990\]\/5{ background-color:rgba(0,73,144,.05); }
.border-\[\#004990\]{ border-color:#004990; }
.hover\:border-\[\#004990\]:hover{ border-color:#004990; }
.text-\[\#004990\]{ color:#004990; }
/* ==========================================================================
Clases de utilidad usadas en el HTML pero nunca generadas por el mini-
compilador de utilities.css — agregadas el 7 de septiembre de 2026 tras
la auditoría integral de producción (39 clases en total, agrupadas por
tipo). Mismo patrón ya usado para .border-b-4/.max-h-20/.text-red-600/
.btn-isa-cta-sm: se agregan aquí a mano, con la misma escala 0.25rem por
unidad que ya usa utilities.css (confirmada revisando sus reglas
existentes), en vez de modificar el archivo compilado.
========================================================================== */
/* Espaciado y tamaño simples */
.mb-5{ margin-bottom:1.25rem; }
.mt-8{ margin-top:2rem; }
.pt-6{ padding-top:1.5rem; }
.pb-20{ padding-bottom:5rem; }
.pr-4{ padding-right:1rem; }
.px-5{ padding-left:1.25rem; padding-right:1.25rem; }
.py-10{ padding-top:2.5rem; padding-bottom:2.5rem; }
.gap-1\.5{ gap:0.375rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ margin-top:0.375rem; }
.w-12{ width:3rem; }
.max-w-full{ max-width:100%; }
.max-w-xl{ max-width:36rem; }
.min-h-screen{ min-height:100vh; }
.right-5{ right:1.25rem; }
.top-5{ top:1.25rem; }
.-left-8{ left:-2rem; }
.z-0{ z-index:0; }
/* Valores arbitrarios entre corchetes (el mini-compilador no genera esta
sintaxis) */
.max-h-\[85vh\]{ max-height:85vh; }
.max-w-\[240px\]{ max-width:240px; }
.max-w-\[300px\]{ max-width:300px; }
.z-\[80\]{ z-index:80; }
/* Variantes de opacidad de color (formato color/N) */
.bg-black\/85{ background-color:rgba(0, 0, 0, 0.85); }
.border-white\/40{ border-color:rgba(255, 255, 255, 0.40); }
.hover\:bg-white\/20:hover{ background-color:rgba(255, 255, 255, 0.20); }
.hover\:opacity-75:hover{ opacity:0.75; }
.hover\:opacity-90:hover{ opacity:0.90; }
/* Texto y listas */
.underline{ text-decoration:underline; }
.list-disc{ list-style-type:disc; list-style-position:outside; }
/* Usa el mismo azul ya aplicado por .text-isa-primary en utilities.css
(#053f87) para que el color del bullet coincida con el resto del texto
ya pintado con esa clase en la página — no el azul de variables.css
(#002060), que utilities.css no usa en ningún otro lado. */
.marker\:text-isa-primary::marker{ color:#053f87; }
/* Ring-offset: en el proyecto no existe un sistema genérico de "ring" con
separación (Tailwind real lo hace con varias variables CSS encadenadas);
aquí solo se usa una vez, en el artículo destacado de
casos-de-exito.html (clases combinadas .ring-2.ring-isa-accent.ring-
offset-4), así que se resuelve como una sola regla dirigida a esa
combinación exacta en vez de construir el sistema completo para un único
uso. Un solo box-shadow con 2 capas: 4px blancos (el "hueco") + 2px más
de acento dorado (el aro), en vez de un anillo pegado al borde. */
.ring-2.ring-isa-accent.ring-offset-4{ box-shadow:0 0 0 4px #fff, 0 0 0 6px #ffb800; }
/* Variantes responsive: mismos puntos de quiebre que ya usa utilities.css
(640px/768px/1024px), en bloques @media propios de este archivo. */
@media (min-width: 640px){
.sm\:block{ display:block; }
.sm\:mt-24{ margin-top:6rem; }
.sm\:px-10{ padding-left:2.5rem; padding-right:2.5rem; }
}
@media (min-width: 768px){
.md\:block{ display:block; }
.md\:gap-4{ gap:1rem; }
.md\:items-start{ align-items:flex-start; }
.md\:text-lg{ font-size:1.125rem; }
}
@media (min-width: 1024px){
.lg\:gap-16{ gap:4rem; }
.lg\:text-5xl{ font-size:3rem; }
}