/* ============================================================ Almami — reskin.css Capa 1: tokens base (paleta, tipografías, variables). Se carga después de style.css y responsive.css para ganar por orden de cascada. NO toca componentes (botones, tarjetas, header, formularios) — eso vive en capas posteriores. Para revertir: quitar el de reskin.css del . ============================================================ */ /* ----------------------------------------------------------- 1. Design tokens ----------------------------------------------------------- */ :root { /* Paleta de marca */ --color-brand: #8E131C; --color-brand-dark: #670B13; --color-brand-deep: #4E0710; --color-brand-soft: #F7E6E8; /* Texto */ --color-ink: #272727; --color-ink-soft: #4B4B4B; --color-muted: #72757A; /* Superficies */ --color-surface: #F6F8FA; --color-surface-alt: #EDEDED; --color-white: #FFFFFF; /* Líneas y vidrio */ --color-line: rgba(39, 39, 39, 0.12); --color-glass: rgba(255, 255, 255, 0.68); --color-glass-border: rgba(255, 255, 255, 0.42); /* Gradientes */ --gradient-brand: linear-gradient(135deg, #8E131C 0%, #670B13 55%, #3A050B 100%); --gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.46)); /* Tipografía */ --font-heading: 'Poppins', sans-serif; --font-body: 'Raleway', sans-serif; /* Espaciado (escala 8px) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-16: 128px; /* Radios */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px; /* Sombras */ --shadow-soft: 0 18px 60px rgba(39, 39, 39, 0.08); --shadow-card: 0 16px 48px rgba(39, 39, 39, 0.10); --shadow-glass: 0 24px 80px rgba(39, 39, 39, 0.16); /* Timings */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 160ms; --duration-normal: 240ms; --duration-slow: 520ms; } /* ----------------------------------------------------------- 2. Tipografía y color base Solo lo global: body + headings. Componentes en capas siguientes. ----------------------------------------------------------- */ body { font-family: var(--font-body); color: var(--color-ink); background-color: var(--color-white); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-ink); } /* ----------------------------------------------------------- 3. Botones — Capa 2 - .btn-primary: pílde bordó (acción principal). - .btn-secondary: glass sobre claro (acción secundaria). - .button-rrhh: CTA de RRHH (CTA principal en su contexto). - .slider_btn_one: "Ver más" del slider — usa el lenguaje secundario. - .whatsapp: flotante integrado al sistema, ícono mantiene su forma. Sobreescribimos selectores viejos para no tocar el HTML. ----------------------------------------------------------- */ /* Botón primario (incluye el submit del form, que viene con .button.btn-primary). Cubrimos también .button-rrhh, que actúa como CTA principal en rrhh.html. */ .btn-primary, .button.btn-primary, button.btn-primary, .button-rrhh { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-white); font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; border: 1px solid var(--color-brand); box-shadow: 0 14px 34px rgba(142, 19, 28, 0.26); text-decoration: none; text-transform: none; cursor: pointer; transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease; } .btn-primary:hover, .btn-primary:focus, .button.btn-primary:hover, .button.btn-primary:focus, button.btn-primary:hover, button.btn-primary:focus, .button-rrhh:hover, .button-rrhh:focus { background: var(--color-brand-dark); color: var(--color-white); border-color: var(--color-brand-dark); transform: translateY(-2px); box-shadow: 0 18px 46px rgba(142, 19, 28, 0.34); outline: none; } /* Botón secundario aplicado al "Ver más" del slider. También expone la clase utilitaria .btn-secondary para uso futuro. */ .btn-secondary, .slider_btn .slider_btn_one, .slider_btn_one { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.72); color: var(--color-ink); font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; border: 1px solid rgba(39, 39, 39, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-decoration: none; text-transform: none; transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, background var(--duration-fast) ease, color var(--duration-fast) ease; } .btn-secondary:hover, .btn-secondary:focus, .slider_btn .slider_btn_one:hover, .slider_btn .slider_btn_one:focus, .slider_btn_one:hover, .slider_btn_one:focus { transform: translateY(-2px); background: var(--color-white); color: var(--color-ink); border-color: rgba(142, 19, 28, 0.32); outline: none; } /* WhatsApp flotante. Botón redondo verde marca, logo blanco vía Font Awesome. Visible e identificable de inmediato. */ .whatsapp { width: 60px !important; height: 60px !important; right: 24px; bottom: 24px; } .whatsapp button { width: 100%; height: 100%; background: var(--color-brand) !important; border: none !important; border-radius: 50%; padding: 0 !important; box-shadow: 0 10px 28px rgba(142, 19, 28, 0.45) !important; display: grid; place-items: center; cursor: pointer; transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease; } .whatsapp button:hover { background: var(--color-brand-dark) !important; box-shadow: 0 14px 36px rgba(142, 19, 28, 0.55) !important; transform: translateY(-2px); } .whatsapp .fa-whatsapp { color: var(--color-white); font-size: 34px; line-height: 1; } /* ----------------------------------------------------------- 4. Tarjetas de servicio — Capa 3 Aplicamos el lenguaje de .service-card del documento a la estructura existente (Bootstrap 3): .service_list (col-md-4) con .service_img + .service_para adentro. Sin tocar HTML. Por qué dos elementos forman el card: - .col-md-4 tiene padding lateral 15px (gutter). Si pintamos fondo en el col, las tarjetas se tocan. En cambio .service_img y .service_para son hijos: respetan el content-box y dejan los 30px de aire entre tarjetas. - Los dos hijos van adyacentes sin gap visual, así que con borde compartido y border-radius arriba/abajo, se ven como un solo card. Altura uniforme: - .row pasa a display:flex (anula los floats de Bootstrap pero conserva el wrap natural en mobile). - .service_list crece a la altura mayor de la fila. - .service_para usa flex:1 para llenar el alto restante. ----------------------------------------------------------- */ /* Hacer la fila flexible para igualar alturas */ .service_section .row { display: flex; flex-wrap: wrap; } /* Cada col-md-4 se convierte en columna flex que llena la altura de la fila */ .service_section .service_list { display: flex; flex-direction: column; margin-bottom: var(--space-4); background: transparent !important; /* anula el #f6f8fa viejo */ transition: transform var(--duration-normal) var(--ease-out); } .service_section .service_list:hover { transform: translateY(-6px); } /* Imagen: borde superior del card */ .service_section .service_list .service_img { border: 1px solid var(--color-line); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--color-white); } .service_section .service_list .service_img img { display: block; width: 100%; height: auto; transition: transform var(--duration-slow) var(--ease-out); } .service_section .service_list:hover .service_img img { transform: scale(1.04); } /* Cuerpo de texto: borde inferior del card. flex:1 para que cubra el alto restante y todas las tarjetas de la fila queden parejas, sin importar el largo del texto. */ .service_section .service_list .service_para { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--space-3) var(--space-3) var(--space-4); background: var(--color-white); border: 1px solid var(--color-line); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-card); text-align: left; transition: box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); } .service_section .service_list:hover .service_para { box-shadow: 0 26px 80px rgba(39, 39, 39, 0.12); border-color: rgba(142, 19, 28, 0.22); } /* Regla obsoleta: se hizo cuando en home un envolvía volanta+h5+descripción. Ese wrapper se eliminó al sumar el botón .service-cta (Capa 10) para evitar anchors anidados. El único que ahora queda como hijo directo de .service_para es el botón .btn-outline-brand.service-cta, que se estiliza solo. */ /* ----------------------------------------------------------- 5. Jerarquía interna de la tarjeta — Capa 3 Tres niveles: volanta (eyebrow) / título (gancho) / descripción. ----------------------------------------------------------- */ /* Volanta: eyebrow bordó, Poppins 600, tracking amplio. Sin fondo (no es badge sólido), va alineado a la izquierda. */ .service_section .service_list .service-volanta { margin: 0 0 var(--space-2); padding: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.12em; color: var(--color-brand); text-transform: uppercase; } /* Título (gancho): Poppins, alineado izquierda, sin tracking exagerado. Sobreescribe la regla vieja .service_list h5 (text-align:center; letter-spacing:1px; margin-bottom:-5px). */ .service_section .service_list h5 { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink); text-align: left; text-transform: none; } /* Descripción: Raleway, color soft, lectura cómoda. */ .service_section .service_list .service_para p:not(.service-volanta) { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); text-transform: none; } /* ----------------------------------------------------------- 6. Header y navegación — Capa 4 REFINAR el header existente, no reconstruirlo. - Sin tocar HTML ni el JS del menumaker (#menu-button / .small-screen). - Sin convertirlo en píldora flotante. - Solo aspecto: tipografía Poppins, hover bordó, sombra suave, línea roja fina como hover en los items de navegación. ----------------------------------------------------------- */ /* Barra superior de redes/contacto en mobile */ .redes-mobile { background-color: var(--color-ink); } .redes-mobile ul li a { color: var(--color-white); transition: color var(--duration-fast) ease; } .redes-mobile ul li a:hover, .redes-mobile ul li a:focus { color: var(--color-brand-soft); } /* Header principal */ .navigation { background-color: var(--color-white); box-shadow: var(--shadow-soft); } /* Conserva la sombra cuando el plugin pone .is-sticky, pero coherente */ .is-sticky .navigation { box-shadow: var(--shadow-card); } /* Borde gris claro que separaba el contenedor: lo afinamos a brand-soft */ .navigation .container { border-top-color: var(--color-line); } /* Items del menú principal (desktop) Sobreescribimos color, hover (que estaba en azul #1490D6) y agregamos una línea bordó como recurso "líneas rojas" del documento. */ #navigation > ul > li > a { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; color: var(--color-ink); text-transform: none; transition: color var(--duration-fast) ease; } #navigation > ul > li > a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 22px; height: 2px; background: var(--color-brand); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-normal) var(--ease-out); } #navigation > ul > li:hover > a, #navigation > ul > li > a:focus { color: var(--color-brand); } #navigation > ul > li:hover > a::after, #navigation > ul > li > a.active::after, #navigation > ul > li > a:focus::after { transform: scaleX(1); } /* Item "activo" — peso fuerte + línea ya visible (ver regla de arriba) */ #navigation > ul > li > a.active { color: var(--color-brand); font-weight: 700; } /* Íconos sociales a la derecha del header */ .menu_right > ul > li > a { color: var(--color-ink); transition: color var(--duration-fast) ease; } .menu_right > ul > li > a:hover, .menu_right > ul > li > a:focus { color: var(--color-brand); } /* ----------------------------------------------------------- 7. Menú mobile (.small-screen) — SOLO aspecto. La lógica del toggle la maneja jquery.menumaker en main.js. No tocamos #menu-button (estructura ni handler), solo color. ----------------------------------------------------------- */ /* Botón hamburguesa: las dos barras son ::before/::after. Las repintamos al ink del sistema. */ #navigation.small-screen #menu-button::before, #navigation.small-screen #menu-button::after { background: var(--color-ink); } #navigation.small-screen #menu-button.menu-opened::before, #navigation.small-screen #menu-button.menu-opened::after { background: var(--color-ink); } /* Items del menú abierto */ #navigation.small-screen > ul > li > a { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); border-bottom: 1px solid var(--color-line); } #navigation.small-screen > ul > li > a:hover, #navigation.small-screen > ul > li > a:focus, #navigation.small-screen > ul > li > a.active { color: var(--color-brand); background: var(--color-surface); } /* Línea hover bordó del desktop NO debe aparecer en mobile (rompía el layout vertical al posicionarse absoluto) */ @media (max-width: 991px) { #navigation > ul > li > a::after { display: none; } } /* ----------------------------------------------------------- 8. Líneas rojas — recurso "orden" del documento. La regla vieja .base_header_2 h3::after ya dibuja una línea bajo cada h3 de sección (color #414141, 100px). La repintamos al brand y la afinamos. ----------------------------------------------------------- */ .base_header_2 h3::after { background: var(--color-brand); height: 2px; width: 64px; margin-left: -32px; } /* ----------------------------------------------------------- 9. CTA del header — "Pedí presupuesto" El .header_cta reemplaza a .menu_right (íconos sociales). Reutiliza .btn-primary de la Capa 2 — sin CSS de botón nuevo. Aquí solo controlamos posicionamiento dentro del col-sm-2 y el comportamiento en cada breakpoint. Breakpoints en juego: - Bootstrap col-sm: 768px. - Menumaker (hamburguesa): 998px. - responsive.css viejo apila el header desde 1014px (oculta .menu_right, pone .header_logo width:100% y #navigation float:none). Aprovechamos esa misma franja para apilar el CTA. ----------------------------------------------------------- */ /* Desktop ≥1015px: el CTA va alineado a la derecha dentro del col-sm-2 */ .header_cta { display: flex; align-items: center; justify-content: flex-end; padding: 16px 15px 16px 0; } .header_cta .btn-primary { /* Versión compacta del btn-primary para uso en header: en md (1015-1199) el col-sm-2 mide ~162px y el btn-primary "tamaño form" (padding 26px + min-height 52px) se sale. Reducimos padding/min-height/font-size para que "Pedí presupuesto" entre cómodo en el col sin perder presencia. white-space:nowrap evita un wrap accidental. */ min-height: 44px; padding: 0 20px; font-size: 13px; white-space: nowrap; } /* Ícono de WhatsApp dentro del CTA: hereda color blanco del botón, levemente más grande que el texto para que se reconozca como logo. */ .header_cta .btn-primary .fa-whatsapp { font-size: 18px; margin-right: 12px; line-height: 1; } /* Franja md angosta (1015-1199): col-sm-2 ≈ 162px. Botón con ícono no entra cómodo con padding 20+20; bajamos padding y gap para que ícono + texto ocupen menos. */ @media (min-width: 1015px) and (max-width: 1199px) { .header_cta .btn-primary { padding: 0 14px; font-size: 12px; } .header_cta .btn-primary .fa-whatsapp { font-size: 16px; margin-right: 10px; } } /* ----------------------------------------------------------- 10. Botón outline bordó (.btn-outline-brand) Variante "outline" del CTA primario, para contextos donde el bordó sólido recargaría (ej. 6 tarjetas en grilla). Modificador .service-cta lo posiciona al pie de las tarjetas de servicio aprovechando el flex column de la Capa 3. ----------------------------------------------------------- */ .btn-outline-brand { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-brand); font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; border: 1px solid var(--color-brand); text-decoration: none; text-transform: none; cursor: pointer; transition: transform var(--duration-fast) ease, background var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease; } .btn-outline-brand:hover, .btn-outline-brand:focus { background: var(--color-brand); color: var(--color-white); border-color: var(--color-brand); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(142, 19, 28, 0.22); outline: none; text-decoration: none; } .btn-outline-brand .fa-whatsapp { font-size: 16px; margin-right: 10px; line-height: 1; } /* Modificador .service-cta: botón al pie de cada tarjeta de servicio. - margin-top:auto lo empuja al fondo del .service_para (flex column, ver Capa 3), de modo que todos los botones de una fila quedan alineados al fondo aunque las descripciones tengan largos distintos. - align-self:flex-start mantiene el botón al ancho de su contenido, alineado a la izquierda. En grillas con 6 tarjetas un botón full-width repetido recargaría visualmente. */ .service_section .service_list .service_para .service-cta { margin-top: var(--space-3); margin-top: auto; margin-bottom: 0; align-self: flex-start; } .service_section .service_list .service_para p:not(.service-volanta) { /* aire bajo la descripción para que el botón no quede pegado si la descripción es muy larga y llena casi todo el card */ margin-bottom: var(--space-3); } /* Override: la regla vieja .service_list a (style.css:1470) define color:#333, font-size:14px, letter-spacing:1px, text-transform:capitalize. Por especificidad (0,1,1) le gana a .btn-outline-brand (0,1,0). Pisamos con contexto explícito (0,3,0). */ .service_section .service_list .service-cta { color: var(--color-brand); font-size: 13px; letter-spacing: -0.01em; text-transform: none; } .service_section .service_list .service-cta:hover, .service_section .service_list .service-cta:focus { color: var(--color-white); } /* Doble CTA en las cards de abono y final de obra: "Más info" (outline) + WhatsApp, lado a lado al pie de la card. La fila asume el margin-top:auto que pinaba al fondo el botón único. */ .service_section .service_list .service-cta-row { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; } /* Dentro de la fila el botón de WhatsApp ya no pina solo. Le damos borde 2px del mismo bordó (en vez del 1px de .btn-primary) para que iguale la altura del botón "Más info" (que tiene borde 2px). */ .service_section .service_list .service-cta-row .service-cta { margin-top: 0; align-self: auto; border-width: 2px; } /* Botón secundario "Más info": fondo blanco, borde negro 2px, texto negro, sin ícono. Mismo alto y tipografía que el de WhatsApp (.btn-primary: min-height 52px, padding 0 26px, pill, Poppins). Hover invertido (negro/blanco). */ .service_section .service_list .service-cta-secondary { display: inline-flex; align-items: center; justify-content: center; /* Mismo alto y padding que el botón de WhatsApp de las cards (.btn-primary.service-cta: min-height 44px, padding 0 20px, reskin.css:875), con borde 2px en ambos => igual altura. */ min-height: 44px; padding: 0 20px; margin-right: var(--space-2); border: 2px solid #000; border-radius: var(--radius-pill); background: #fff; color: #000; font-family: var(--font-heading); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; text-transform: none; text-decoration: none; transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease; } .service_section .service_list .service-cta-secondary:hover, .service_section .service_list .service-cta-secondary:focus { background: #000; color: #fff; border-color: #000; } /* Entre 990px y 1200px: los dos botones apilados y al 100% del ancho de la card (contenidos por su padding). "Más info" arriba con margin-bottom para no quedar pegado al de WhatsApp. Es la franja donde las 3 cards por fila quedan angostas y los botones lado a lado no entran; abajo de 990px las cards ya apilan. */ @media (min-width: 990px) and (max-width: 1200px) { .service_section .service_list .service-cta-row { flex-direction: column; align-items: stretch; } .service_section .service_list .service-cta-secondary { margin-right: 0; margin-bottom: var(--space-2); } } /* Franja tablet/mobile (≤1014px): aquí responsive.css ya ocultaba .menu_right y apilaba header_logo + #navigation con float:none. Replicamos esa lógica para .header_cta: que pase a ocupar su propia fila debajo del nav, centrado y visible. Esto cubre toda la franja crítica entre 768-991px que vos marcaste, y se extiende hasta 1014px porque el reset viejo actúa hasta ese ancho. */ @media only screen and (max-width: 1014px) { .header_cta { float: none; clear: both; width: 100%; padding: 0 15px 14px; justify-content: center; } } /* Mobile <768px: Bootstrap apila los col-sm a width:100% por default. La regla de arriba ya cubre el comportamiento; agregamos un pequeño ajuste de aire arriba para separar del nav apilado. */ @media (max-width: 767px) { .header_cta { padding-top: 6px; } } /* ----------------------------------------------------------- 11. Hamburguesa (#menu-button) — 3 líneas parejas. El estilo viejo de style.css usaba ::before como UNA barra arriba y ::after como una caja con border-top+border-bottom (dos barras pegadas) → visualmente "1 fina arriba + 1 gruesa abajo". Lo reemplazamos por 3 barras iguales del mismo grosor y separación: ::before pinta la barra superior y, con box-shadow, las otras 2 barras debajo. ::after queda oculto en cerrado. En .menu-opened reconstruimos la X (2 barras rotadas). ----------------------------------------------------------- */ #navigation.small-screen #menu-button::before { position: absolute; top: 16px; right: 2px; display: block; width: 26px; height: 2px; border: 0; background: var(--color-ink); box-shadow: 0 7px 0 var(--color-ink), 0 14px 0 var(--color-ink); content: ''; transform: none; } #navigation.small-screen #menu-button::after { display: none; } /* Estado abierto: X = ::before + ::after, ambos rotados. Anulamos el box-shadow del ::before y revivimos ::after. */ #navigation.small-screen #menu-button.menu-opened::before { top: 23px; width: 18px; height: 2px; border: 0; background: var(--color-ink); box-shadow: none; transform: rotate(-45deg); } #navigation.small-screen #menu-button.menu-opened::after { position: absolute; top: 23px; right: 2px; display: block; width: 18px; height: 2px; border: 0; background: var(--color-ink); content: ''; transform: rotate(45deg); } /* ----------------------------------------------------------- 12. Ocultar CTA "Pedí presupuesto" del header en mobile. En <768px el botón duplica esfuerzo con el flotante de WhatsApp y los CTA de cada tarjeta de servicio. Lo escondemos solo en xs. ----------------------------------------------------------- */ @media (max-width: 767px) { .header_cta { display: none !important; } } /* ----------------------------------------------------------- 13. Aire lateral en mobile (0.5em). En xs el contenido tocaba los bordes de la pantalla. Sumamos 0.5em al padding lateral del .container manteniendo el gutter de 15px de Bootstrap 3. Los .row con margin:-15px siguen compensando contra el padding original; el 0.5em extra queda como respiro a ambos lados sin desbordar el viewport. overflow-x:hidden en html/body como cinturón de seguridad ante el margen negativo de .row. ----------------------------------------------------------- */ @media (max-width: 767px) { .container { padding-left: calc(15px + 0.5em); padding-right: calc(15px + 0.5em); } html, body { overflow-x: hidden; } } /* ----------------------------------------------------------- 14. Bloque 1 — Pesos del menú (default fino, activo/hover negrita) Por default los items van en Poppins 400. Activo y hover suben a 700 con color bordó y la línea inferior ya definida en la Capa 4. ----------------------------------------------------------- */ #navigation > ul > li > a { font-weight: 400; } #navigation > ul > li > a.active, #navigation > ul > li:hover > a, #navigation > ul > li > a:focus { font-weight: 700; color: var(--color-brand); } /* Mobile (.small-screen) replica el mismo criterio */ #navigation.small-screen > ul > li > a { font-weight: 400; } #navigation.small-screen > ul > li > a.active, #navigation.small-screen > ul > li > a:hover, #navigation.small-screen > ul > li > a:focus { font-weight: 700; color: var(--color-brand); } /* ----------------------------------------------------------- 15. Bloque 2 — CTA de tarjeta de servicio en bordó sólido Las 6 tarjetas usan ahora .btn-primary.service-cta. La regla de la Capa 10 (.service-cta del outline) pisaba color a bordó por especificidad; acá lo devolvemos a blanco para el sólido. ----------------------------------------------------------- */ .service_section .service_list .btn-primary.service-cta { min-height: 44px; padding: 0 20px; font-size: 13px; color: var(--color-white); letter-spacing: -0.01em; text-transform: none; } .service_section .service_list .btn-primary.service-cta:hover, .service_section .service_list .btn-primary.service-cta:focus { color: var(--color-white); } .service_section .service_list .btn-primary.service-cta .fa-whatsapp { font-size: 16px; margin-right: 10px; line-height: 1; } /* ----------------------------------------------------------- 16. Bloque 3 — Loader con logo Almami El #preloader es un
vacío con background gif por defecto. Lo blanqueamos y dibujamos un logo centrado con pulse sobrio. El JS de main.js sigue haciendo fadeOut+remove al load — no se toca. ----------------------------------------------------------- */ #preloader { background: var(--color-white) !important; display: flex !important; align-items: center; justify-content: center; } #preloader::before { content: ""; display: block; width: 160px; height: 160px; background: url("../images/logo.png") no-repeat center center; background-size: contain; animation: almami-pulse 1.6s ease-in-out infinite; } @keyframes almami-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } } /* Spinner del slider preload: misma identidad. */ .slides__preload_wrapper { display: flex; align-items: center; justify-content: center; background: var(--color-white); } .slides__preload_wrapper .spinner { display: none; } .slides__preload_wrapper::before { content: ""; display: block; width: 140px; height: 140px; background: url("../images/logo.png") no-repeat center center; background-size: contain; animation: almami-pulse 1.6s ease-in-out infinite; } /* ----------------------------------------------------------- 17. Bloque 4 — "Nuestros equipos" (maquinaria): bordes redondeados, sombra, hover sobrio (overlay gradient + label). Anula el comportamiento viejo del .project-hover (caja saltarina con transform:scale 0→1 y ::before bordó 70% opacidad). ----------------------------------------------------------- */ .work-section .single-project-item, .work_pg .single-project-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } .work-section .single-project-item:hover { transform: translateY(-4px); box-shadow: 0 26px 80px rgba(39, 39, 39, 0.18); } .work-section .single-project-item .project-hover { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; visibility: visible; transform: none; transition: opacity var(--duration-normal) var(--ease-out); display: flex; align-items: flex-end; padding: 18px 22px; cursor: default; } .work-section .single-project-item .project-hover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%); opacity: 1; width: 100%; height: 100%; z-index: 0; } .work-section .single-project-item:hover .project-hover { opacity: 1; visibility: visible; transform: none; } /* Label dentro del overlay: nombre + categoría, alineado abajo-izquierda */ .work-section .single-project-item .project-hover h6 { position: relative; z-index: 1; top: auto; left: auto; margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--color-white); line-height: 1.25; } .work-section .single-project-item .project-hover h6 span { position: relative; top: auto; display: block; margin-top: 6px; padding-top: 0; font-family: var(--font-heading); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-white); opacity: 0.82; } /* Iconito decorativo de la esquina inferior derecha: lo escondemos para no recargar el overlay. */ .work-section .single-project-item .project-hover .project-link i, .work-section .single-project-item .project-link i { display: none; } /* ----------------------------------------------------------- 18. Bloque 5 — Caja del formulario con radio parejo .estimate_form_inner (home y servicios) tenía radius-lg solo en una esquina por herencia; igualamos las 4 a --radius-lg. .contact-form (contacto.html) no tenía radius: lo agregamos. ----------------------------------------------------------- */ .estimat_sectn .estimate_form_inner { border-radius: var(--radius-lg); overflow: hidden; } .contact-form { border-radius: var(--radius-lg); overflow: hidden; } /* ----------------------------------------------------------- 19. Bloque 6 — Iframe del mapa redondeado El iframe del mapa vive dentro de un .col-sm-12 que envuelve al embed de Google Maps. Apuntamos por src (no a "todo iframe") para no pisar al iframe del reCAPTCHA, que también vive en .contact_page y se vería raro con esquinas redondeadas. ----------------------------------------------------------- */ .contact_page iframe[src*="google.com/maps"], .contact-section iframe[src*="google.com/maps"] { border-radius: var(--radius-lg); overflow: hidden; display: block; box-shadow: var(--shadow-soft); margin-top: var(--space-3); } /* ----------------------------------------------------------- 20. Bloque 7 — Footer: layout y estética a) Sacar justificado de "Nosotros". b) Aire entre las 3 columnas. c) Igualar line-height/espacio de "Información" a "Links útiles". El renombrado "Nuestros servicios" → "Servicios" va en cada HTML. ----------------------------------------------------------- */ /* a) Texto de "Nosotros" alineado a la izquierda (no justificado) */ .footer-section .widget p, .footer-section-inverted .widget p, .footer_para, .footer_para_inverted { text-align: left; line-height: 1.7; } /* b) Aire entre columnas: padding lateral por widget. En mobile (col-xs-12) el padding lateral lo aporta Bootstrap; no alteramos eso. Solo separamos en >=768px. */ @media (min-width: 768px) { footer .widget { padding-left: 18px; padding-right: 18px; } footer .col-sm-5:first-of-type .widget { padding-left: 0; } footer .col-sm-5:last-of-type .widget, footer .col-sm-7 .widget { padding-right: 0; } } /* c) Línea y espacio de la columna "Información" (.recent-post no .helpful_post) igualados a "Links útiles" (.helpful_post). */ footer .recent-post li, footer .recent-post-inverted li, footer .recent-post.helpful_post li, footer .recent-post-inverted.helpful_post li { margin: 12px 0; padding-bottom: 6px; line-height: 1.55; } footer .recent-post li a, footer .recent-post-inverted li a, footer .recent-post.helpful_post li a, footer .recent-post-inverted.helpful_post li a, footer .recent-post li h6, footer .recent-post-inverted li h6 { font-family: var(--font-body); font-size: 15px; line-height: 1.55; margin: 0; } /* Los íconos de la columna Información alineados a la línea de texto */ footer .recent-post li i { width: 22px; text-align: left; font-size: 15px; vertical-align: baseline; } /* ----------------------------------------------------------- 21. Bloque 8 — Footer logo + redes circulares Estructura nueva en el HTML: un .footer-top con el logo y las tres redes en .footer-social-circles arriba de las 3 columnas. ----------------------------------------------------------- */ .footer-section .footer-top, .footer-section-inverted .footer-top { text-align: center; padding: 8px 0 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 28px; } .footer-section-inverted .footer-top { border-bottom-color: rgba(0, 0, 0, 0.08); } .footer-section .footer-top .footer-logo, .footer-section-inverted .footer-top .footer-logo { display: inline-block; margin-bottom: 18px; } .footer-section .footer-top .footer-logo img, .footer-section-inverted .footer-top .footer-logo img { height: 90px; width: auto; display: block; } .footer-social-circles { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; justify-content: center; } .footer-social-circles li { margin: 0; padding: 0; } .footer-social-circles a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: var(--color-white); transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease; text-decoration: none; } .footer-social-circles a i { font-size: 18px; line-height: 1; } .footer-social-circles a:hover, .footer-social-circles a:focus { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-white); transform: translateY(-2px); text-decoration: none; } /* Eliminar la fila de íconos sueltos que ahora vive en el .footer-top: en el HTML quitamos del