/* ========================================================================== Fletes Álica — hoja de estilos Paleta extraída de LOGOFLETES.png (rojo #EB1C24, negro, gris-acero del trazo/ola del isotipo). Identidad de marca fija: no sigue el modo claro/ oscuro del sistema, es una decisión de marca (fondo tinta + acentos rojo y acero en toda la página). ========================================================================== */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlowcond-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlowcond-700.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlowcond-800.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format("woff2"); } :root { --ink: #16171a; --ink-soft: #212328; --paper: #f4f5f4; --surface: #ffffff; --red: #eb1c24; --red-deep: #93101a; --red-ink: #5c0b10; --red-on-ink: #ff5a5f; --steel: #5f7a74; --steel-tint: #dfe6e4; --line: rgba(22, 23, 26, 0.12); --line-on-ink: rgba(255, 255, 255, 0.14); --text-muted: rgba(22, 23, 26, 0.64); --text-on-ink-muted: rgba(255, 255, 255, 0.66); --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", -apple-system, "Segoe UI", sans-serif; --container: 1180px; --section-pad: clamp(4rem, 8vw, 7rem); --radius: 4px; /* Sombras compartidas — mismo tono (negro/tinta) y forma en toda la página, solo cambia el alcance: sm para elementos pequeños, lg para tarjetas grandes o modales. */ --shadow-sm: 0 12px 24px -8px rgba(0, 0, 0, 0.45); --shadow-md: 0 20px 40px -20px rgba(22, 23, 26, 0.42); --shadow-lg: 0 34px 64px -24px rgba(22, 23, 26, 0.45); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Solo en , no en : si el "overflow" también se pone en body, body pasa a ser su propio contenedor de scroll y eso rompe "position: sticky" (el hero de la portada) en la mayoría de navegadores. */ html { overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } /* Enlace al sitio corporativo de Grupo Álica: mismo estilo en cualquier sección donde aparezca el nombre, sin importar el fondo. */ .link-brand { color: var(--red); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; } .link-brand:hover { color: var(--red-deep); } .link-brand:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; border-radius: 2px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0; text-wrap: balance; overflow-wrap: break-word; } p { margin: 0; max-width: 62ch; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin: 0 0 0.9rem; } .eyebrow::before { content: ""; width: 2.2em; height: 3px; background: var(--steel); display: inline-block; } .eyebrow--on-ink { color: var(--red-on-ink); } section { padding-block: var(--section-pad); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); } .section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); } .section-head p { margin-top: 0.9rem; color: var(--text-muted); font-size: 1.05rem; } .section--ink .section-head p { color: var(--text-on-ink-muted); } .section-head .eyebrow { margin-top: 0; font-size: 0.85rem; color: var(--red); } .section-head .eyebrow--on-ink { color: var(--red-on-ink); } .fleet .section-head p, .contact .section-head p { color: var(--text-on-ink-muted); } /* -------------------- botones -------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding: 0.85rem 1.7rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn--primary { background: var(--red); color: var(--surface); } .btn--primary:hover { background: var(--red-deep); } .btn--ghost-ink { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost-ink:hover { border-color: var(--ink); } .btn--ghost-light { background: transparent; color: var(--surface); border-color: var(--line-on-ink); } .btn--ghost-light:hover { border-color: var(--surface); } /* -------------------- header -------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 100; background: rgba(22, 23, 26, 0.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line-on-ink); transition: background-color 0.2s ease, box-shadow 0.2s ease; } .site-header.is-scrolled { background: rgba(14, 15, 17, 0.97); box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--surface); flex-shrink: 0; } .brand img { height: 44px; width: auto; } .brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; white-space: nowrap; } .brand-word span { color: var(--red); } .main-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); } .main-nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; padding-block: 0.35rem; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .main-nav a:hover, .main-nav a:focus-visible { color: var(--surface); border-color: var(--red); } .main-nav a:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; } .main-nav a.is-active { color: var(--surface); border-color: var(--red); } .main-nav .btn--primary { display: none; } .header-actions { display: flex; align-items: center; gap: 1rem; } .nav-toggle { display: none; background: none; border: 1px solid var(--line-on-ink); border-radius: var(--radius); padding: 0.5rem 0.6rem; /* Área táctil mínima ~44px recomendada, aunque el ícono visual (22px) sea más pequeño — se centra con flex (ver regla @media abajo). */ min-width: 44px; min-height: 44px; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--surface); position: relative; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .main-nav { position: fixed; top: 76px; left: 0; right: 0; /* No "bottom: 0": .site-header tiene "backdrop-filter", lo que lo convierte en el contenedor de posicionamiento de sus descendientes "position:fixed" (según la spec, igual que transform/filter/perspective) — "bottom:0" se resolvía contra los ~77px de .site-header, no contra el viewport, dejando el panel con solo ~64px de alto. "vh"/"dvh" miden siempre el viewport real sin importar el contenedor de posicionamiento, así que quedan inmunes a ese problema. "100dvh" es una mejora progresiva sobre "100vh" (ajusta cuando la barra del navegador móvil aparece/desaparece); "top:76px" ya calculaba bien porque el borde superior de .site-header coincide con el del viewport. */ height: calc(100vh - 76px); height: calc(100dvh - 76px); background: var(--ink); flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 2rem clamp(1.25rem, 4vw, 2.5rem) calc(2rem + env(safe-area-inset-bottom, 0px)); gap: 1.5rem; transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; overscroll-behavior: contain; } .main-nav[data-open="true"] { transform: translateX(0); } .main-nav a { font-size: 1.4rem; } .header-actions .btn--primary { display: none; } .main-nav .btn--primary { display: inline-flex; margin-top: 0.5rem; } } /* -------------------- hero -------------------- */ /* * Video de fondo continuo (autoplay/loop nativos del navegador — sin JS de * scroll). Altura normal de una sola pantalla, igual que el resto del sitio. */ .hero { position: relative; color: var(--surface); min-height: min(88vh, 780px); display: flex; align-items: center; padding-top: 76px; isolation: isolate; overflow: hidden; } /* Capa de video, detrás de todo. object-position mantiene el camión visible en el centro-derecha. */ .hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--ink); } .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; } /* Degradado sobre el video: oscuro a la izquierda (texto), progresivamente más claro hacia la derecha (donde queda visible el camión). */ .hero-overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient( 100deg, rgba(14, 15, 17, 0.96) 0%, rgba(14, 15, 17, 0.92) 24%, rgba(14, 15, 17, 0.6) 44%, rgba(14, 15, 17, 0.18) 62%, rgba(14, 15, 17, 0.4) 100% ); } .hero .container { width: 100%; } /* "Reducir movimiento": el video ni siquiera intenta reproducirse (ver js/main.js) — se queda en su primer cuadro (poster), como una foto fija. */ .hero-copy { max-width: 40rem; padding-block: clamp(2.5rem, 7vw, 4rem); } .hero-copy h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); margin-bottom: 1.25rem; text-wrap: wrap; } .hero-copy h1 em { font-style: normal; color: var(--red); } .hero-copy p { font-size: 1.15rem; color: var(--text-on-ink-muted); max-width: 40ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } @media (max-width: 860px) { .hero-video { object-position: 70% 58%; } .hero-copy { max-width: none; } } @media (max-width: 480px) { .hero-video { object-position: 74% 55%; } .hero-copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); } } /* -------------------- ventajas / barra de confianza -------------------- */ .advantages { background: var(--surface); border-bottom: 1px solid var(--line); } .advantages-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .advantages-route { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--steel); opacity: 0.3; z-index: 0; pointer-events: none; } .advantages-copy, .advantages-photo { position: relative; z-index: 1; } @media (max-width: 860px) { .advantages-route { display: none; } } .advantages-lead { margin-top: 0.9rem; color: var(--text-muted); font-size: 1.05rem; max-width: 46ch; } .ribbon-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); } .ribbon-item { position: relative; display: flex; align-items: center; gap: 1rem; background: var(--ink); color: var(--surface); padding: 1.05rem 2.75rem 1.05rem 1.15rem; border-left: 5px solid var(--red); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); transition: transform 0.2s ease, background-color 0.2s ease; } .ribbon-item:hover { transform: translateX(6px); background: var(--ink-soft); } .ribbon-icon { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ribbon-item h3 { font-size: 1rem; margin-bottom: 0.2rem; } .ribbon-item p { font-size: 0.86rem; color: var(--text-on-ink-muted); max-width: 32ch; } .advantages-photo { position: relative; display: flex; justify-content: center; } .advantages-photo-frame { width: min(100%, 440px); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--surface); padding: 10px; box-shadow: var(--shadow-lg); } .advantages-photo-frame .ring { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } /* La foto ya trae su propio marco rojo/blanco integrado (mismo estilo que el resto del sitio); aquí solo se centra y se recorta en circulo. */ .advantages-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .advantages-callout { position: absolute; top: 10%; right: -4%; display: flex; align-items: center; gap: 0.65rem; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 0.65rem 1.25rem 0.65rem 0.65rem; box-shadow: var(--shadow-md); font-size: 0.85rem; font-weight: 600; max-width: 210px; line-height: 1.25; } .advantages-callout-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 980px) { .advantages-callout { right: 4%; } } @media (max-width: 860px) { .advantages-grid { grid-template-columns: 1fr; } .advantages-photo { order: -1; margin-bottom: 0.5rem; } .advantages-photo-frame { width: min(100%, 300px); } } @media (max-width: 480px) { .ribbon-item { padding-right: 1.5rem; clip-path: none; } } /* -------------------- nosotros -------------------- */ .about { background: var(--paper); } .about-copy { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); } .about-copy p + p { margin-top: 1rem; } .about-copy p { color: var(--text-muted); max-width: none; } .about-photo { position: relative; z-index: 1; margin: 0 clamp(14px, 2.2vw, 22px) clamp(14px, 2.2vw, 22px) 0; padding: clamp(12px, 1.8vw, 18px); background: var(--ink); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-lg); } .about-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); border-radius: calc(var(--radius) + 6px); transform: translate(clamp(14px, 2.2vw, 22px), clamp(14px, 2.2vw, 22px)); } .about-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); } .frame-corner { position: absolute; width: 34px; height: 34px; border: 4px solid var(--red); z-index: 2; pointer-events: none; } .frame-corner--tl { top: 12px; left: 12px; border-width: 4px 0 0 4px; } .frame-corner--tr { top: 12px; right: 12px; border-width: 4px 4px 0 0; } .frame-corner--bl { bottom: 12px; left: 12px; border-width: 0 0 4px 4px; } .frame-corner--br { bottom: 12px; right: 12px; border-width: 0 4px 4px 0; } .about-badge { position: absolute; left: clamp(1.75rem, 4vw, 2.75rem); bottom: clamp(1.75rem, 4vw, 2.75rem); z-index: 3; display: flex; align-items: center; gap: 0.75rem; background: rgba(14, 15, 17, 0.85); backdrop-filter: blur(4px); padding: 0.65rem 1.25rem 0.65rem 0.75rem; border-radius: 999px; color: var(--surface); font-size: 0.92rem; } .about-badge img { height: 30px; width: auto; } .about-badge strong { color: var(--red); } .about-badge a { text-decoration: none; } .about-badge a:hover strong, .about-badge a:focus-visible strong { text-decoration: underline; } .about-badge a:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 2px; } /* La foto (img/equipo-fletes.jpg) es un panorámico de gente borde a borde, casi 3.9:1 — recortarla con aspect-ratio/object-fit para hacerla más alta cortaría personas en los costados. Por eso en móvil no se toca la proporción de la imagen: se saca la tarjeta de encima (posición relativa, debajo, con una pequeña superposición al borde inferior — ahí caen piernas/cintura en esta foto, nunca rostros) en vez de encoger la foto para que quepa la tarjeta absoluta actual. */ @media (max-width: 767px) { .about-photo { margin-right: 10px; padding: 8px; } /* Más chico y contenido cerca de la esquina de la foto (como en escritorio, solo un filo) — ya no un bloque grande detrás de toda la composición. */ .about-photo::before { inset: auto 0 0 auto; width: 55%; height: 42%; transform: translate(6px, 8px); } .about-badge { position: relative; left: auto; bottom: auto; width: 88%; max-width: 88%; margin-top: -22px; margin-inline: auto; padding: 12px 16px; gap: 10px; border-radius: 22px; font-size: clamp(1rem, 4.5vw, 1.35rem); /* Opaca en móvil (a diferencia de escritorio): aquí la tarjeta ya no flota sobre la foto — sin esto, el acento rojo de detrás se transparentaba a través del 15% de alfa y se veía "cruzado". */ background: var(--ink); backdrop-filter: none; box-shadow: var(--shadow-md); } .about-badge img { height: clamp(34px, 9vw, 44px); flex-shrink: 0; } } @media (max-width: 390px) { .about-photo::before { width: 50%; height: 38%; } .about-badge { width: 90%; max-width: 90%; margin-top: -14px; padding: 10px 14px; gap: 8px; } .about-badge img { height: 32px; } } @media (min-width: 768px) and (max-width: 1024px) { .about-badge { left: clamp(1.25rem, 3vw, 1.75rem); bottom: clamp(1.25rem, 3vw, 1.75rem); padding: 0.55rem 1.05rem 0.55rem 0.65rem; font-size: 0.85rem; } .about-badge img { height: 26px; } } /* -------------------- historia (franja con corte) -------------------- */ .history { background: var(--ink); color: var(--surface); position: relative; clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%); margin-block: 2rem; } .history .container { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .history-copy p { color: var(--text-on-ink-muted); } .history-copy p + p { margin-top: 1rem; } .history-marks { display: flex; flex-direction: column; gap: 1.5rem; } .history-mark { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line-on-ink); padding-bottom: 1.25rem; } .history-mark:last-child { border-bottom: none; padding-bottom: 0; } .history-mark .icon { color: var(--red); flex-shrink: 0; transform: translateY(3px); } .history-mark h3 { font-size: 1.15rem; margin-bottom: 0.2rem; } .history-mark p { font-size: 0.92rem; color: var(--text-on-ink-muted); } @media (max-width: 860px) { .history .container { grid-template-columns: 1fr; } .history { clip-path: none; } } /* -------------------- nuestra flotilla -------------------- */ .fleet { position: relative; color: var(--surface); background-image: radial-gradient( 58% 68% at 95% 4%, rgba(147, 16, 26, 0.34) 0%, rgba(147, 16, 26, 0) 62% ), linear-gradient(180deg, rgba(13, 14, 16, 0.74) 0%, rgba(13, 14, 16, 0.8) 100%), url("../img/flotilla-fletes.jpg"); background-size: cover; background-position: center, center, center 62%; } /* -------------------- nuestra flotilla: scroll storytelling -------------- ".fleet" arriba solo aporta ya "position: relative" y el color de texto base — su "background-image" con la foto queda siempre reemplazado por ".fleet.fleet--scroll" de aquí abajo (más específica), que es la única variante que existe hoy en el HTML. */ .fleet.fleet--scroll { background-image: radial-gradient( 65% 55% at 88% 8%, rgba(147, 16, 26, 0.28) 0%, rgba(147, 16, 26, 0) 60% ), linear-gradient(180deg, #0d0e10 0%, #16171a 100%); padding-bottom: 0; } .fleet-scroll-track { --fleet-scene-vh: 80vh; position: relative; height: calc(var(--fleet-scene-count, 4) * var(--fleet-scene-vh)); /* El header fijo mide 76px (.site-header): al entrar por el ancla "#flotilla" (menú, URL directa, recarga), este margen evita que el header tape el inicio de la escena fija. Un solo valor, un solo lugar — no se repite en JS ni en otro selector. */ scroll-margin-top: 76px; } .fleet-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; } .fleet-stage-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .fleet-floor-line { position: absolute; left: 0; right: 0; bottom: 16%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.14) 70%, rgba(255, 255, 255, 0) 100%); } .fleet-road-texture { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background-image: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 64px ); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); } .fleet-stage-inner { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-rows: auto auto 1fr; /* El header fijo mide 76px (misma medida documentada en .fleet-scroll-track): este padding evita que tape el encabezado compacto, que ahora vive dentro de la zona fija. */ padding-top: calc(76px + 1.25rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); } .section-head--fleet { margin-bottom: clamp(0.85rem, 2vw, 1.25rem); } .fleet-progress { display: flex; align-items: center; gap: 0.85rem; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); } .fleet-progress-count { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--text-on-ink-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; } .fleet-progress-track { display: block; width: min(220px, 30vw); height: 2px; background: var(--line-on-ink); border-radius: 999px; overflow: hidden; } .fleet-progress-fill { display: block; height: 100%; width: 0%; background: var(--red); border-radius: inherit; } .fleet-scenes { position: relative; min-height: 0; } .fleet-scene { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; } .fleet-scene-copy { max-width: 34rem; } .fleet-scene-tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-on-ink); margin-bottom: 0.75rem; } .fleet-scene-copy h3 { color: var(--surface); font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.85rem; } .fleet-scene-copy p { color: var(--text-on-ink-muted); font-size: 1.05rem; max-width: 32rem; } .fleet-scene-visual { position: relative; display: flex; align-items: center; justify-content: center; } .fleet-scene-shadow { position: absolute; left: 50%; bottom: 6%; width: 62%; height: 14%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 72%); transform: translateX(-50%); } .fleet-scene-visual img { position: relative; width: 100%; max-width: 640px; height: auto; display: block; /* En escritorio con poca altura (p. ej. 1366×768, 1280×720) el ancho por sí solo puede producir una imagen más alta que el espacio disponible en la fila de la escena, y .fleet-stage la recortaría (overflow:hidden). 387px es el "techo fijo" medido (encabezado compacto + indicador + paddings) por encima de los 900px de ancho; este límite evita el recorte sin afectar el tamaño ya usado en viewports altos, donde nunca se alcanza. */ max-height: calc(100vh - 390px); } @media (max-width: 900px) { .fleet-scroll-track { --fleet-scene-vh: 75vh; } .section-head--fleet { margin-bottom: clamp(0.65rem, 2vw, 1rem); } .fleet-progress { margin-bottom: clamp(0.85rem, 2vw, 1.25rem); } .fleet-scene { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.25rem; text-align: center; } .fleet-scene-copy { max-width: none; } .fleet-scene-copy p { margin-inline: auto; } .fleet-scene-visual img { max-width: 460px; margin-inline: auto; } } @media (max-width: 600px) { .fleet-scroll-track { --fleet-scene-vh: 70vh; } .section-head--fleet { margin-bottom: clamp(0.5rem, 2vw, 0.75rem); } .fleet-scene-copy h3 { font-size: clamp(1.5rem, 7vw, 2rem); } .fleet-scene-copy p { font-size: 0.95rem; } .fleet-scene-visual img { max-width: 320px; } .fleet-road-texture { display: none; } } @media (prefers-reduced-motion: reduce) { .fleet-scroll-track { height: auto; } .fleet-stage { position: static; height: auto; padding-block: clamp(2rem, 5vw, 3rem) 0; } .fleet-stage-inner { height: auto; display: block; padding-top: 0; padding-bottom: 0; } .fleet-progress { display: none; } .fleet-scenes { min-height: 0; display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); } .fleet-scene { position: static; opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; z-index: auto !important; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .fleet-road-texture { display: none; } } @media (prefers-reduced-motion: reduce) and (max-width: 900px) { .fleet-scene { grid-template-columns: 1fr; text-align: center; } } /* -------------------- misión y visión -------------------- */ .mv { background: var(--paper); } .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2rem); } .mv-card { border-radius: var(--radius); padding: clamp(2rem, 4vw, 2.5rem); position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .mv-card h3 { font-size: 1.6rem; margin-bottom: 1rem; } .mv-card--red { background: var(--red); color: var(--surface); } .mv-card--red p { color: rgba(255, 255, 255, 0.9); } .mv-card--ink { background: var(--ink); color: var(--surface); } .mv-card--ink p { color: var(--text-on-ink-muted); } .mv-card .icon { margin-bottom: 1.25rem; opacity: 0.9; } .values { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 2.5rem); } .value-pill { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.15rem; } .value-pill .dot { color: var(--red); margin-right: 0.4rem; } @media (max-width: 720px) { .mv-grid { grid-template-columns: 1fr; } } /* -------------------- servicios -------------------- */ .services { background: var(--surface); border-block: 1px solid var(--line); } .service-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .service-col { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.25rem); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .service-col:hover { border-color: var(--red); box-shadow: var(--shadow-md); } .service-col h3 { display: flex; align-items: center; gap: 0.65rem; font-size: 1.3rem; text-transform: none; margin-bottom: 1.4rem; color: var(--ink); } .service-col h3 .icon { color: var(--red); flex-shrink: 0; } .service-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .service-col li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--text-muted); font-size: 0.98rem; } .service-col .check { color: var(--red); flex-shrink: 0; margin-top: 0.15rem; } .added-values { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); padding-top: clamp(1.75rem, 3vw, 2.25rem); } .added-values h3 { font-size: 1.05rem; text-transform: none; color: var(--ink); margin-bottom: 1.1rem; } .added-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem 1.5rem; } .added-list li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--text-muted); font-size: 0.92rem; } .added-list .check { color: var(--steel); flex-shrink: 0; margin-top: 0.1rem; } @media (max-width: 720px) { .service-cols { grid-template-columns: 1fr; } .added-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .added-list { grid-template-columns: 1fr; } } /* -------------------- cartera de clientes -------------------- */ .clients { background: var(--paper); } .clients-list { list-style: none; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; } .client-tag { font-size: 0.95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1.1rem; } /* -------------------- grupo álica -------------------- */ .group-band { background: var(--steel-tint); } .group-band .container { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); } .group-copy { max-width: 34rem; } .group-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1rem; } .group-copy p { color: var(--ink); opacity: 0.78; } .group-copy p + p { margin-top: 0.85rem; } .group-copy p.group-closing { margin-top: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--ink); opacity: 1; } /* ---- nube de empresas ------------------------------------------------- */ .group-cloud { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 590; margin-inline: auto; } .group-cloud-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .group-cloud-lines line { stroke: var(--line); stroke-width: 0.35; /* dasharray/dashoffset del "dibujado" progresivo se controlan por atributo SVG desde JS, nunca por CSS: si esta regla les pusiera un valor, el atributo quedaría siempre invalidado por la cascada (una propiedad CSS le gana a un atributo de presentación aunque JS lo anime correctamente) y la línea nunca se vería animarse. */ } .group-dot { position: absolute; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); transform: translate(-50%, -50%); } .group-dot--red { background: var(--red); border-color: var(--red); } .group-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; /* El padding en % siempre se calcula sobre el ancho del contenedor PADRE, nunca sobre el propio círculo — por eso va en px fijo, uno por cada tamaño, y no como porcentaje aquí. */ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .group-node:hover { transform: translate(-50%, calc(-50% - 4px)); box-shadow: var(--shadow-md); border-color: rgba(235, 28, 36, 0.35); } .group-node img { width: 100%; height: 100%; object-fit: contain; display: block; } .group-node--center { width: 150px; height: 150px; padding: 20px; } .group-node--lg { width: 140px; height: 140px; padding: 18px; } .group-node--md { width: 125px; height: 125px; padding: 16px; } .group-node--sm { width: 105px; height: 105px; padding: 13px; } @media (max-width: 1100px) { .group-band .container { grid-template-columns: 1fr; text-align: center; } .group-copy { max-width: none; margin-inline: auto; } .group-cloud { max-width: 480px; } .group-node--center { width: 120px; height: 120px; padding: 16px; } .group-node--lg { width: 110px; height: 110px; padding: 15px; } .group-node--md { width: 98px; height: 98px; padding: 13px; } .group-node--sm { width: 82px; height: 82px; padding: 11px; } } @media (max-width: 600px) { .group-cloud-lines, .group-dot { display: none; } .group-cloud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 1.5rem 1rem; max-width: 360px; aspect-ratio: auto; } /* La nube absoluta no funciona en dos columnas: en móvil se vuelve una cuadrícula normal — hay que anular la posición inline con !important porque un estilo inline siempre le gana a una regla de hoja de estilos, sin importar su especificidad. */ .group-node { position: static !important; top: auto !important; left: auto !important; transform: none !important; } .group-node:hover { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .group-node, .group-dot { opacity: 1 !important; transform: translate(-50%, -50%) !important; } .group-node--center, .group-node--lg { transform: translate(-50%, -50%) !important; } /* Las líneas no necesitan regla aquí: sin JS (que es lo que pasa bajo reduced-motion, ese bloque nunca corre) el atributo stroke-dashoffset nunca se toca y la línea queda sólida por defecto. */ } @media (prefers-reduced-motion: reduce) and (max-width: 600px) { .group-node { transform: none !important; } } /* -------------------- bolsa de trabajo -------------------- */ .jobs { background: var(--surface); } .jobs-filter { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); } .filter-chip { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.6rem 1.25rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .filter-chip:hover { border-color: var(--ink); } .filter-chip:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; } .filter-chip.is-active { background: var(--red); border-color: var(--red); color: var(--surface); } .jobs-list { display: flex; flex-direction: column; gap: 1.75rem; } .job-card { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .job-card-body { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; } .job-card-head { position: relative; background: var(--ink); color: var(--surface); border-left: 5px solid var(--red); padding: 1.1rem 2.25rem 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; } .job-card-head::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%); } .job-card-head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0; } .job-tag { display: inline-flex; align-items: center; gap: 0.4em; background: var(--steel-tint); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem 0.35rem 0.65rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .job-tag .icon { color: var(--red); flex-shrink: 0; } .job-card-head .job-tag { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: var(--surface); } .job-card-head .job-tag .icon { color: var(--red-on-ink); } .job-tag--accent { background: var(--red); border-color: var(--red); color: var(--surface); } .job-tag--accent .icon { color: var(--surface); } .job-card-content { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.35rem; flex: 1; } .job-card-desc { color: var(--text-muted); font-size: 1rem; } .job-card-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1.5rem; } .job-card-features li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--ink); } .job-card-features .check { color: var(--red); flex-shrink: 0; margin-top: 0.15rem; } .job-card-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: auto; } .job-card-photo { flex: 0 0 40%; max-width: 40%; margin: 1.25rem 1.25rem 1.25rem 0; border-radius: var(--radius); overflow: hidden; border: 3px solid rgba(235, 28, 36, 0.35); box-shadow: var(--shadow-lg); } .job-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; } .job-card-photo--ventas img { object-position: 68% 38%; } .job-card-photo--operador img { object-position: 62% center; } .jobs-empty { text-align: center; color: var(--text-muted); padding: 2.25rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius); } @media (max-width: 860px) { .job-card { flex-direction: column; } .job-card-photo { flex: none; max-width: none; width: auto; margin: 0 1.25rem 1.25rem; aspect-ratio: 16 / 10; } } @media (max-width: 560px) { .job-card-features { grid-template-columns: 1fr; } .job-card-actions { flex-direction: column; } .job-card-actions .btn { width: 100%; } .job-card-head { padding-right: 1.75rem; } } /* -------------------- modales -------------------- */ .modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.28s; } .modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 16, 18, 0.72); opacity: 0; transition: opacity 0.28s ease; } .modal.is-open .modal-backdrop { opacity: 1; } .modal-panel { position: relative; width: min(640px, 100%); max-height: min(85vh, 760px); overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 0.28s ease, transform 0.28s ease; } .modal.is-open .modal-panel { opacity: 1; transform: translateY(0) scale(1); } body.modal-open, body.nav-open { overflow: hidden; } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .modal-close:hover { border-color: var(--red); color: var(--red); } .modal-body h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.85rem 0 0.5rem; } .modal-body > p { color: var(--text-muted); margin-top: 0.5rem; } .modal-lead { margin-bottom: 1.5rem; } .modal-body h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin: 1.75rem 0 0.9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .modal-body h4:first-of-type { margin-top: 1.35rem; padding-top: 0; border-top: none; } .modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .modal-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; color: var(--ink); } .modal-list .check { color: var(--red); flex-shrink: 0; margin-top: 0.15rem; } .modal-cta { margin-top: 2rem; width: 100%; justify-content: center; } /* -------------------- vacantes: paso de confirmación antes de mailto: --- */ .apply-confirm h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.85rem 0 0.5rem; } .apply-confirm h3:focus-visible, .apply-confirm-postsend p:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 2px; } .apply-confirm > p { color: var(--text-muted); margin-top: 0.75rem; } .apply-confirm-highlight { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--steel-tint); border-left: 4px solid var(--red); border-radius: var(--radius); font-weight: 700; color: var(--ink); } .apply-confirm-summary { margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.85rem; } .apply-confirm-summary div { border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; } .apply-confirm-summary dt { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; } .apply-confirm-summary dd { margin: 0; font-size: 1rem; color: var(--ink); font-weight: 600; overflow-wrap: break-word; word-break: break-word; } .apply-confirm-checklist { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .apply-confirm-checklist li { position: relative; padding-left: 1.35rem; font-size: 0.95rem; color: var(--ink); } .apply-confirm-checklist li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } .apply-confirm-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } /* "display:flex" de arriba, al tener la misma especificidad que la regla nativa "[hidden]{display:none}" del navegador pero venir de la hoja de estilos del autor (no la del user-agent), le gana siempre — sin esto el atributo "hidden" quedaría sin efecto visual aquí. */ .apply-confirm-actions[hidden] { display: none; } .apply-confirm-actions .btn { flex: 1 1 200px; justify-content: center; } .apply-confirm-postsend { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .apply-confirm-postsend > p { color: var(--text-muted); } .apply-confirm-fallback { margin-top: 1rem; padding: 1rem; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); } .apply-confirm-email { font-weight: 700; color: var(--ink); margin: 0.35rem 0 0.85rem; overflow-wrap: break-word; } .apply-confirm-fallback .btn, .apply-confirm-postsend > .btn { width: 100%; justify-content: center; } .apply-confirm-postsend > .btn { margin-top: 1.25rem; } /* Honeypot anti-spam: oculto de verdad (no solo "de la vista"), fuera del flujo de foco/lectura para personas, pero presente en el DOM para que los bots que llenan cualquier campo de un formulario caigan en él. */ .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; left: -9999px; } .field-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem; cursor: pointer; } .field-check input { margin-top: 0.2rem; accent-color: var(--red); flex-shrink: 0; } .field-check a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; } .field-check a:hover, .field-check a:focus-visible { color: var(--red-deep); } #apply-form .btn { width: 100%; justify-content: center; } #apply-form .form-status.is-success { color: var(--ink); font-weight: 700; } #apply-form .form-status.is-error { color: var(--red-deep); font-weight: 700; } @media (max-width: 480px) { .modal { padding: 0.75rem; } .modal-panel { max-height: 92vh; } } /* -------------------- contacto -------------------- */ .contact { background: var(--ink); color: var(--surface); } .contact .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 5vw, 4rem); } .contact .section-head { grid-column: 1 / -1; } .contact-form { background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.5rem); } .form-row { display: grid; /* minmax(0, 1fr) y no solo "1fr": un tiene un ancho mínimo de contenido (el botón nativo "Elegir archivo") que "1fr" (que implica un mínimo "auto") no puede encoger — sin el "0" explícito, esa columna empuja el formulario fuera de la tarjeta en pantallas angostas. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; } .field label { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .field input, .field textarea { font-family: var(--font-body); font-size: 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--red); background: var(--surface); } .field-hint { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); } .field-hint.is-error { color: var(--red-deep); } .form-status { min-height: 1.4em; font-size: 0.92rem; margin-top: 0.75rem; color: var(--steel); } .contact-info { display: flex; flex-direction: column; gap: 1.75rem; } .info-row { display: flex; gap: 1rem; align-items: flex-start; border-bottom: 1px solid var(--line-on-ink); padding-bottom: 1.5rem; } .info-row:last-of-type { border-bottom: none; } .info-row .icon { color: var(--red); flex-shrink: 0; margin-top: 0.15rem; } .info-row h3 { font-size: 0.85rem; letter-spacing: 0.1em; color: var(--text-on-ink-muted); margin-bottom: 0.3rem; } .info-row a, .info-row p { font-family: var(--font-body); font-size: 1.08rem; text-decoration: none; color: var(--surface); } .info-row a:hover, .info-row a:focus-visible { color: var(--red); } .contact-social { display: flex; gap: 0.85rem; margin-top: 0.25rem; } .contact-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-on-ink); display: flex; align-items: center; justify-content: center; color: var(--surface); transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .contact-social a:hover, .contact-social a:focus-visible { border-color: var(--red); background: var(--red); } .contact-social a:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } @media (max-width: 860px) { .contact .container { grid-template-columns: 1fr; } .form-row { grid-template-columns: minmax(0, 1fr); } } /* -------------------- footer -------------------- */ .site-footer { background: #0e0f11; color: var(--text-on-ink-muted); padding-block: 3rem 2rem; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; padding-bottom: 2.25rem; border-bottom: 1px solid var(--line-on-ink); } .footer-brand { display: flex; align-items: center; gap: 1rem; } .footer-brand img { height: 46px; width: auto; } .footer-brand .footer-brand-alica { height: 34px; width: auto; opacity: 0.85; } .footer-nav { display: flex; gap: 2.5rem; flex-wrap: wrap; } .footer-nav-col h4 { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--surface); margin-bottom: 0.9rem; } .footer-nav-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .footer-nav-col a { text-decoration: none; font-size: 0.95rem; color: var(--text-on-ink-muted); } .footer-nav-col a:hover, .footer-nav-col a:focus-visible { color: var(--surface); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; font-size: 0.85rem; } .footer-legal-link { color: var(--text-on-ink-muted); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .footer-legal-link:hover, .footer-legal-link:focus-visible { color: var(--red-on-ink); } .footer-legal-link:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 2px; } /* -------------------- whatsapp flotante -------------------- */ .whatsapp-fab { position: fixed; right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right, 0px)); /* env(safe-area-inset-bottom) es 0px en cualquier pantalla sin notch/ barra de gestos (todo escritorio incluido), así que este cálculo no cambia nada fuera de esos dispositivos. */ bottom: calc(clamp(1rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; color: var(--surface); z-index: 90; box-shadow: var(--shadow-sm); transition: transform 0.2s ease; } .whatsapp-fab:hover { transform: scale(1.06); } /* El menú móvil ya pinta encima por su z-index (vive dentro de .site-header, que es más alto que el 90 del botón) y "inert" ya lo saca del foco/teclado — esta regla lo hace explícito e inequívoco también visualmente, sin depender solo del orden de apilamiento. */ body.nav-open .whatsapp-fab { visibility: hidden; } @media (max-width: 600px) { .whatsapp-fab { width: 52px; height: 52px; } /* El botón es "position:fixed", así que su hueco (alto + separación del borde + su propio safe-area) siempre queda sobre el mismo rincón de la pantalla sin importar qué haya debajo. El footer es el único caso permanente (no transitorio, como al pasar el dedo por una tarjeta): es el final real del scroll, así que aquí sí reservamos espacio para que nunca quede tapado. */ .site-footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); } } /* -------------------- utilidades -------------------- */ .section--ink { background: var(--ink); color: var(--surface); } @media (max-width: 480px) { .form-row { gap: 0; } }