/* ========================================================= Landing Premium — styles.css (Sandro Fernández Transportes) - Mobile-first, tipografía elegante, “look caro”. - Paleta ajustada a celeste/azul de la marca. - Incluye ajustes de flota, mapas, certificaciones, etc. ========================================================= */ /* -------------------------------- Variables (modo oscuro por defecto) -------------------------------- */ :root{ /* Fondo y superficies */ --bg: #0f1115; --surface: #131722; --surface-2: #161b27; /* Tipografía */ --text: #e7ecf6; --muted: #8a93a7; /* Marca Sandro */ --primary: #1983BB; /* celeste logo */ --accent: #0D6E9E; /* azul apoyo */ --brand: #9dd7ff; /* detalle suave */ /* Derivados */ --border: #202636; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.35); --grad: linear-gradient(90deg, var(--primary), var(--accent)); /* Espaciado y layout */ --space-1: .5rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --container: 1100px; --header-h: 72px; } /* Tema claro (toggle con .theme-light en ) */ .theme-light{ --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f1f3f9; --text: #0f1115; --muted: #566074; --primary: #1983BB; --accent: #0D6E9E; --brand: #0E7FB8; --border: #e0e5ef; --shadow: 0 10px 28px rgba(19, 22, 33, .1); --grad: linear-gradient(90deg, var(--primary), var(--accent)); } /* -------------------------------- Base -------------------------------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 700px at 20% -10%, color-mix(in oklab, var(--brand), transparent 92%), transparent), radial-gradient(1000px 600px at 90% 10%, color-mix(in oklab, var(--primary), transparent 92%), transparent), var(--bg); line-height:1.55; } /* Micro-textura sutil (look premium) */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect fill='none' width='60' height='60'/%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff0f'/%3E%3C/svg%3E"); opacity:.25; mix-blend-mode: overlay; } /* Contenedores */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline: clamp(16px, 3vw, 28px); } /* Utilidades */ .hide-desktop{ display:none } .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-radius: calc(var(--radius) - 4px); border:1px solid transparent; background:var(--surface-2); color:var(--text); text-decoration:none; font-weight:600; box-shadow:var(--shadow); transition:.2s ease; } .btn:hover{ transform: translateY(-1px) scale(1.01) } .btn-cta{ background: var(--grad); color:#fff; border:1px solid #0000; text-shadow: 0 1px 0 rgba(0,0,0,.15); } .btn-cta:hover{ filter: saturate(1.05) brightness(1.03) } .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text) } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:var(--surface-2); color:var(--text); border:1px solid var(--border); box-shadow: var(--shadow); } /* -------------------------------- Header -------------------------------- */ .header{ position:sticky; top:0; z-index:50; height:var(--header-h); display:flex; align-items:center; backdrop-filter: saturate(120%) blur(8px); background: linear-gradient(to bottom, rgba(10,12,18,.85), rgba(10,12,18,.55), transparent); border-bottom: 1px solid color-mix(in oklab, var(--border), #000 10%); } .header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem } /* Marca (logo + texto) */ .brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; color:var(--text); text-decoration:none; } .brand i{ color:var(--primary); font-size:1.25rem } /* tamaño seguro del logo en mobile */ .header .brand img, .header .brand svg{ display:block; height:28px; width:auto; object-fit:contain; } .header .brand{ gap:.5rem } @media (max-width:420px){ .header .brand img, .header .brand svg{ height:22px } } .nav{ display:flex; align-items:center; gap: clamp(.5rem, 1.5vw, 1rem) } .nav-link{ display:inline-block; padding:.4rem .2rem; color:var(--muted); text-decoration:none; font-weight:600; border-bottom:2px solid transparent; transition:.2s ease color,border; } .nav-link:hover{ color:var(--text) } .nav-cta{ margin-left:.5rem } .header-actions{ display:flex; align-items:center; gap:.5rem } /* Menú móvil (sidebar/dropdown) — estado animable */ .mobile-menu{ position:absolute; inset: var(--header-h) 0 auto 0; z-index:999; background: var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:.75rem; display:block; /* abierto/cerrado con .open */ opacity:0; transform: translateY(-8px); pointer-events:none; transition: opacity .25s ease, transform .25s ease; } .mobile-menu.open{ opacity:1; transform: translateY(0); pointer-events:auto; } .mobile-menu .btn{ width:100%; justify-content:center; margin-top:.5rem } .mobile-link{ display:block; padding:.85rem; text-decoration:none; color:var(--text); border-radius:12px; border:1px solid var(--border); margin:.35rem 0; background:var(--surface-2); } /* -------------------------------- Hero -------------------------------- */ .hero{ position:relative; padding: clamp(72px, 10vw, 120px) 0; overflow:hidden; } .hero-grid{ display:grid; align-items:center; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1.15fr .85fr; } .hero-copy .badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; background:#ffffff10; border:1px solid var(--border); color:var(--text); font-weight:600; font-size:.9rem; } .hero h1{ font-family:'Playfair Display', serif; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height:1.1; margin:.6rem 0 1rem; } .hero h1 .grad{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead{ color:var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem) } .hero-cta{ display:flex; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap } .metrics{ display:flex; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(1rem, 3vw, 2rem) } .metric .num{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight:800 } .metric .label{ color:var(--muted) } /* Hero media */ .preview-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; } .preview-top{ display:flex; gap:.35rem; padding:.6rem; border-bottom:1px solid var(--border); background: linear-gradient(to right, #ffffff05, #ffffff00); } .preview-top span{ width:10px; height:10px; border-radius:999px; background:#fff1 } .preview-body{ padding:1rem 1rem 1.2rem } .preview-hero{ display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap } /* Chips con más aire (evita que “toquen” borde) */ .chip{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.9rem; background:#ffffff0f; border:1px solid var(--border); padding:.42rem .72rem; border-radius:999px; } .preview-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; } .preview-item{ height:88px; background: linear-gradient(135deg, #ffffff10, #ffffff06); border-radius: 12px; border:1px solid var(--border) } .preview-item.tall{ grid-row: span 2; height: 184px } .preview-item.wide{ grid-column: span 2 } /* Fondos animados */ .shape{ position:absolute; border-radius:50%; filter: blur(18px); opacity:.28; } .shape-1{ width:520px; height:520px; left:-120px; top:-80px; background: radial-gradient(closest-side, var(--accent), transparent); animation: float1 14s ease-in-out infinite } .shape-2{ width:420px; height:420px; right:-100px; top:-40px; background: radial-gradient(closest-side, var(--primary), transparent); animation: float2 18s ease-in-out infinite } .shape-3{ width:360px; height:360px; right:20%; bottom:-120px; background: radial-gradient(closest-side, var(--brand), transparent); animation: float3 16s ease-in-out infinite } @keyframes float1{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(20px) } } @keyframes float2{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-26px) } } @keyframes float3{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(18px) } } /* -------------------------------- Secciones genéricas -------------------------------- */ .section{ padding: clamp(56px, 8vw, 100px) 0 } .section.alt{ background: linear-gradient(180deg, #ffffff06, transparent) } /* en mobile lo homogenizamos más abajo */ .section-head{ text-align:center; margin-bottom: clamp(20px, 5vw, 40px) } .section-head .eyebrow{ text-transform:uppercase; letter-spacing:.16em; color:var(--primary); font-weight:800; font-size:.8rem } .section-head h2{ font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin:.4rem 0 } .section-lead{ color:var(--muted) } /* Cards */ .cards{ display:grid; grid-template-columns: repeat( auto-fit, minmax(230px, 1fr) ); gap: clamp(14px, 3vw, 22px); } .card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 2.5vw, 22px); box-shadow: var(--shadow); } .card i{ font-size:1.6rem; color:var(--primary) } .card h3{ margin:.6rem 0 .4rem } .card p{ color:var(--muted) } /* Grid (usado para Flota) */ .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 2vw, 18px); } .tile{ grid-column: span 6; background: linear-gradient(135deg, #ffffff10, #ffffff05); border:1px solid var(--border); border-radius: 14px; min-height: 160px; box-shadow: var(--shadow); position:relative; overflow:hidden; background-size:cover; background-position:center; } .tile.tall{ grid-row: span 2; min-height: 340px } .tile.wide{ grid-column: span 12 } .tile .tag{ position:absolute; left:12px; top:12px; display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .6rem; background:#00000070; color:#fff; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.3px; backdrop-filter: blur(2px); } /* Steps (reutilizado para Cobertura) */ .steps{ list-style:none; padding:0; display:grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap:16px; } .steps li{ background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); position:relative; } .step-idx{ position:absolute; right:12px; top:12px; width:32px; height:32px; display:grid; place-items:center; border-radius:999px; background:#ffffff10; border:1px solid var(--border); font-weight:800; } /* Pricing (reutilizado como “Diferenciales”) */ .pricing{ display:grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap: clamp(14px, 2.2vw, 22px); } .price-card{ background: linear-gradient(180deg, var(--surface), #ffffff04); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 2.2vw, 24px); display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden; } .price-card.featured{ outline:2px solid var(--primary); transform: translateY(-4px); } .badge-top{ position:absolute; top:10px; left:10px; display:inline-flex; gap:.4rem; align-items:center; background:#1a1f2a; color:#d2ecff; padding:.3rem .6rem; border-radius:999px; font-weight:700; border:1px solid var(--border) } .price-head h3{ margin:.2rem 0 .1rem } .price{ font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight:800 } .price span{ font-size:.9rem; color:var(--muted) } .price-note{ color:var(--muted); margin-top:-6px } .price-list{ list-style:none; padding:0; margin:0 0 .4rem 0 } .price-list li{ display:flex; align-items:center; gap:.5rem; margin:.35rem 0; color:var(--text) } .price-list i{ color:var(--primary) } /* Slider (estructura genérica) */ .slider{ position:relative; overflow:hidden; border-radius: var(--radius); border:1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .slides{ display:flex; transition: transform .5s ease } .slide{ min-width:100%; padding: clamp(16px, 4vw, 28px); } .slide blockquote{ font-size: clamp(1rem, 2vw, 1.2rem) } .slide footer{ margin-top:.8rem; color:var(--muted); font-weight:600 } .slider-btn{ position:absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--border); background:#ffffff10; color:var(--text); } .slider-btn.prev{ left:10px } .slider-btn.next{ right:10px } /* FAQ */ .faq{ display:grid; gap:.6rem } .faq-item{ border:1px solid var(--border); border-radius:12px; background: var(--surface); padding:.6rem 1rem } .faq-item > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem; font-weight:700 } .faq-item > p{ color:var(--muted) } /* CTA / Formulario */ .cta-inner{ background: linear-gradient(135deg, #ffffff08, #ffffff02); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 4vw, 28px); display:grid; gap:1rem; overflow:hidden; /* evita que los botones “se salgan” */ padding-bottom: clamp(16px, 4vw, 28px); } .form{ display:grid; gap:.8rem } .form-row{ display:grid; gap:.8rem; grid-template-columns: 1fr 1fr } .form input, .form textarea{ width:100%; padding:.9rem 1rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); color:var(--text) } .form-actions{ display:flex; gap:.6rem; flex-wrap:wrap; /* permite saltar de línea en pantallas chicas */ } .form-actions .btn{ min-width:140px } /* Footer */ .footer{ padding:28px 0; border-top:1px solid var(--border); background:#0b0d12aa } .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem } .footer .social a{ color:var(--muted); text-decoration:none; margin-left:.6rem } .footer .social a:hover{ color:var(--text) } /* -------------------------------- Extras específicos del proyecto -------------------------------- */ /* Badges (Historia) */ .badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; background:#ffffff12; border:1px solid var(--border); color:var(--text); font-weight:700; font-size:.9rem; } /* Listas de contacto e items con icono a la derecha */ .list{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem } .list li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--text) } .list i{ color:var(--brand) } /* si usás tarjetas tipo “info-item”/“list-item” con icono flotante */ .list-item, .info-item{ position:relative; padding-right:56px } .list-item .icon-right, .info-item .icon-right{ position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; } /* Mapas embebidos */ #proceso iframe, #contacto iframe{ width:100%; height:360px; border:0; border-radius:14px; overflow:hidden; outline:1px solid var(--border); box-shadow: var(--shadow); } /* Certificaciones */ #certificaciones .card{ display:flex; flex-direction:column; gap:.6rem } #certificaciones .card i{ color: var(--primary) } /* -------------------------------- Responsive -------------------------------- */ @media (max-width:980px){ .hide-desktop{ display:inline-flex } .nav{ display:none } .hero-grid{ grid-template-columns:1fr } .metrics{ gap:1rem } .form-row{ grid-template-columns:1fr } /* Homogeneiza el fondo de secciones alternas para evitar “corte a mitad” */ .section.alt{ background: var(--bg) } /* Botones del form en fila completa si hay poco ancho */ .form-actions .btn{ flex:1 1 100% } } .preview-item { background-color: #1e1e1e; /* color de fondo por defecto */ border-radius: 10px; background-size: cover; background-position: center; } /* Ejemplo de imágenes específicas */ .preview-item:nth-child(1) { background-image: url("../imagenes/ISO.png"); /* La primera de arriba (lado izquierdo) */ } .preview-item:nth-child(2) { background-image: url("../imagenes/IQNET_Foto.png"); /* La grande del medio */ } .preview-item:nth-child(3) { background-image: url("../imagenes/mension_especial.jpg"); /* La de mas a la derecha */ background-color: #0E7FB8; } .preview-item:nth-child(4) { background-image: url("../imagenes/funcionarios1.jpg"); /* La primera de abajo (lado izquierdo) */ --zoom: 2.20; } /* Ajuste solo para el logo */ .preview-item:nth-child(4) { background-image: url("../imagenes/funcionarios1.jpg"); background-repeat: no-repeat; /* Evita que se repita */ background-position: center; /* Centra el logo */ background-color: #f4f4f4; /* un gris claro más cercano al blanco del logo */ --zoom: 3.20; } /* ========================================================= FIX ÚNICO — Servicios (desktop) + Valor (pill y cortes) - No toca móvil (las reglas van solo para desktop) - Arregla pill "Operativa" y el corte visual de la sección ========================================================= */ /* -------- Servicios (solo desktop) -------- */ @media (min-width: 1200px){ /* 4 columnas en desktop ancho */ #servicios .cards{ grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 22px; align-items: stretch; } /* Alturas consistentes sin “engordar” demasiado */ #servicios .card{ display: flex; flex-direction: column; justify-content: flex-start; min-height: 220px; /* más bajo que 240 para no verse gruesas */ padding: 20px; /* un toque de aire, sin exagerar */ } /* Centrar la 5ª tarjeta en segunda fila (queda prolijo) */ #servicios .cards > .card:last-child{ grid-column: 2 / span 2; } /* Un poco menos de “franja” al final de la sección en desktop */ #servicios.section{ padding-bottom: 72px; } } /* -------- Valor (pill + corte de sección) -------- */ /* Más aire arriba/abajo de la sección para que las cards no toquen el corte */ @media (min-width: 1200px){ #valor.section{ padding-top: 88px; padding-bottom: 88px; } } /* Asegura aire arriba dentro de cada card de Valor */ #valor .price-card{ padding-top: 30px; /* aire sin hacerla “gorda” */ } /* Si alguna está destacada, mantené el aire y evita que “suba” */ #valor .price-card.featured{ padding-top: 34px; transform: none; /* evita que se vaya hacia el corte */ } /* La pill/badge NO debe estar absoluta ni pegada al borde */ #valor .price-card .pill, #valor .price-card .badge, #valor .price-card .badge-top{ position: static; /* saca posicionamientos raros */ margin-top: 8px; /* separación del borde superior */ margin-bottom: 10px; /* separación del título */ line-height: 1.15; align-self: flex-start; } /* Suaviza el gradiente de las secciones alternas en desktop (menos corte) */ @media (min-width: 1200px){ .section.alt{ background: linear-gradient(180deg, #ffffff08 0%, #ffffff05 40%, transparent 100%); } } #contacto .hours{ display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: center; margin-top: 8px; } #contacto .hours .label{ color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } #contacto .hours .value{ font-weight: 700; white-space: nowrap; } .nowrap{ white-space: nowrap !important; } /* En desktop vuelve a una sola línea */ @media (min-width: 980px){ #contacto .hours{ grid-template-columns: auto 1fr auto 1fr; } } /* ================================ Métricas del hero — layout bonito ================================ */ .hero .metrics{ display: grid; grid-template-columns: repeat(3, minmax(90px,1fr)); /* 3 métricas parejas */ gap: clamp(10px, 2.5vw, 22px); align-items: end; } .hero .metric{ display: flex; flex-direction: column; justify-content: flex-end; text-align: left; /* desktop: alineadas a la izquierda */ } .hero .metric .num{ font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1; font-weight: 800; } .hero .metric .label{ color: var(--muted); font-weight: 600; line-height: 1.2; margin-top: .35rem; display: block; /* balancea el salto de línea para que se vea armónico (soporte moderno) */ text-wrap: balance; /* evita cortes feos dentro de palabras/líneas cortas */ hyphens: manual; word-break: normal; } /* En móvil, centro las métricas y doy un poco más de aire vertical */ @media (max-width: 520px){ .hero .metric{ text-align: center; align-items: center; } .hero .metrics{ row-gap: 8px; } } /* Si algún término debe ir siempre junto (p.ej. “24/7”), podés usar esta clase */ .nowrap{ white-space: nowrap; } /* Cobertura / filas con icono a la derecha: evita superposición en mobile */ #proceso .steps li, #cobertura .steps li, .steps li.has-icon-right{ position: relative; padding-right: 76px; /* deja espacio para el botón/icono */ word-break: break-word; } #proceso .steps li .icon-right, #cobertura .steps li .icon-right, .steps li .icon-right{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: #ffffff12; border: 1px solid var(--border); pointer-events: none; /* que no robe el scroll/taps */ } @media (max-width: 420px){ #proceso .steps li, #cobertura .steps li, .steps li.has-icon-right{ padding-right: 88px; /* un toque más de aire en teléfonos chicos */ } } /* ========================================================= GALERÍA — CONTROL FINO POR TILE (posición + zoom) Uso: - Ajustá --x y --y para mover el encuadre (0%..100% o en px). - Ajustá --zoom si querés acercar la imagen (1 = normal). - Se mantiene background-size: cover para llenar el bloque. - Si necesitás MÁS zoom del que cover da, ver sección "zoom fuerte". ========================================================= */ /* Base común de todos los tiles */ .tile{ /* ⚙️ Valores por defecto (se pueden sobrescribir por tile) */ --x: 50%; /* 0% = izquierda, 100% = derecha */ --y: 50%; /* 0% = arriba, 100% = abajo */ --zoom: 1; /* 1 = sin zoom, 1.1 = 10% más grande */ background-repeat: no-repeat; background-size: cover; /* llena el contenedor */ background-position: var(--x) var(--y); /* mueve el encuadre */ /* Truco de zoom sutil: hacemos “cover” + un escalado extra */ /* (aumenta el tamaño de la imagen por encima de cover) */ background-size: calc(100% * var(--zoom)) /* ancho escalado */ auto; /* alto auto (respeta proporción) */ /* NOTA: si tu tile es mucho más alto que ancho, el zoom puede variar. Para volver al cover puro, poné --zoom: 1 en ese tile. */ } /* ================================ CARGA DE IMÁGENES (por tile) 👉 Editá SOLO las variables --x, --y, --zoom de cada uno ================================ */ /* 🚛 Camión 1 */ .tile.camion1{ background-image: url("../imagenes/scania_azul_desde_arriba.jpg"); /* 🎯 Encadre inicial recomendado (modificá a gusto) */ --x: 500%; /* mover a izquierda/derecha: 40%, 60%, etc. */ --y: 70%; /* subir/bajar: 30%, 45%, etc. */ --zoom: 1.00; /* 1.00–1.20 suele ser suficiente */ } /* 🚛 Camión 2 */ .tile.camion2{ background-image: url("../imagenes/flota_entera.jpg"); /* El camión está a derecha → llevamos el encuadre hacia la derecha */ --x: 62%; /*60–70% para “correr” el foco a la derecha */ --y: 45%; /* ajustá si corta techo/suelo */ --zoom: 1.75; /* un toque de zoom para evitar bordes vacíos */ } /* 🛠️ Taller */ .tile.taller{ background-image: url("../imagenes/neumaticos_galeria.jpg"); /* Suelen cortar cielo/suelo: centramos apenas bajo la mitad */ --x: 50%; --y: 55%; --zoom: 1.30; } /* 🏭 Instalaciones */ .tile.instalaciones{ background-image: url("../imagenes/instalaciones_galeria.jpg"); /* El galpón queda bien centrado, con pequeño zoom */ --x: 50%; --y: 52%; --zoom: 1.00; } /* =========================================== OPCIONAL — Ajustes específicos para mobile (A veces en pantallas angostas conviene reencuadrar) =========================================== */ @media (max-width: 768px){ /* 🚛 Camión 1 */ .tile.camion1{ --x: 50%; /* centramos horizontal */ --y: 65%; /* bajamos un poco el encuadre para que entre bien la cabina */ --zoom: 1.80; /* le damos zoom para que rellene sin bordes */ } /* 🚛 Camión 2 */ .tile.camion2{ --x: 60%; /* corremos un poco a la derecha */ --y: 77%; /* subimos encuadre para que no corte el techo */ --zoom: 1.75; /* más zoom porque en mobile se ve más “estirado” */ } /* 🛠️ Taller */ .tile.taller{ --x: 40%; --y: 60%; /* subimos encuadre para no perder el galpón */ --zoom: 1.72; /* zoom medio para que rellene bien el ancho */ } /* 🏭 Instalaciones */ .tile.instalaciones{ --x: 50%; --y: 62%; /* bajamos encuadre para mostrar más piso y evitar cielo vacío */ --zoom: 1.20; /* zoom para rellenar ancho y alto */ } } /* =========================================== ZOOM FUERTE (si necesitás MUCHA aproximación) Activalo agregando la clase .zoomable al tile. - Esto reemplaza “cover” por un ancho en % mayor a 100. - Útil cuando querés recortar bastante una foto. =========================================== */ .tile.zoomable{ background-size: calc(100% * var(--zoom)) auto !important; /* Ejemplo: .tile.camion2.zoomable { --zoom: 1.25; } // 25% más grande */ } /* =========================================== AYUDA VISUAL (debug): guía para encuadrar - Agregá .debug-bg a un tile para ver una cuadrícula. =========================================== */ .tile.debug-bg{ position: relative; } .tile.debug-bg::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 10% 100%, 100% 10%; /* rejilla 10x10 */ border-radius: inherit; } /* ========================= FIX — Fondo del footer ========================= */ .footer{ background: var(--footer-bg, var(--surface)); /* usa variable si existe, sino surface */ backdrop-filter: saturate(120%) blur(6px); /* un blur elegante */ } /* Tema oscuro */ body:not(.theme-light) .footer{ background: linear-gradient(to top, #0b0d12ee, #0b0d1200); } /* Tema claro */ body.theme-light .footer{ background: linear-gradient(to top, #ffffffee, #ffffff00); } /* Firma del desarrollador en el footer */ .footer .dev-signature { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--muted); /* gris elegante */ } .footer .dev-signature b { color: var(--primary); /* usa el celeste corporativo */ font-weight: 600; } .footer .dev-signature { display: block; margin-top: 6px; /* más airecito */ font-size: 0.85rem; color: var(--muted); } .footer .dev-signature b:hover { text-decoration: underline; filter: brightness(1.1); } /* ========================================================= Intro de Marca — FULL BLEED - edge-to-edge: hace que la sección “toque” los bordes de la pantalla - Logo grande a 100vw (sin márgenes laterales) - Previews con

minimalistas y fluidos ========================================================= */ .edge-to-edge{ /* saca el límite del .container y estira el fondo/anchura a 100vw */ margin-inline: calc(50% - 50vw); width: 100vw; } .brand-preview{ /* fondo sutil para diferenciar del hero */ background: radial-gradient(120% 120% at 50% -10%, color-mix(in oklab, var(--bg) 90%, #0b6ea8 10%) 0%, transparent 60%) , var(--bg); padding: 0 0 clamp(28px, 5vw, 40px); /* sin padding arriba: el logo ya empuja */ position: relative; } /* wrapper con padding vertical y sin limitar el ancho */ .brand-wrap{ padding-top: clamp(18px, 3vw, 28px); } /* ===== Logo full-bleed ===== */ .brand-logo-box{ /* bloque que “pega” la imagen a los bordes */ width: 100vw; margin-left: calc(50% - 50vw); /* centra el 100vw en el viewport */ margin-right: calc(50% - 50vw); } .brand-logo-full{ display: block; width: 100vw; /* toca bordes */ height: clamp(120px, 26vw, 260px); /* alto flexible; ajustá a gusto */ object-fit: contain; object-position: center; /* un pelín de sombra para que respire sobre fondos claros/osc */ filter: drop-shadow(0 10px 24px rgba(0,0,0,.18)); user-select: none; -webkit-user-drag: none; } /* Claim/leyenda */ .brand-tagline{ text-align: center; margin: clamp(10px, 2vw, 16px) auto clamp(8px, 2vw, 16px); max-width: 62ch; color: var(--muted); } /* ===== Accordion (details) ===== */ .brand-accordion{ max-width: min(980px, 92vw); margin: 0 auto; display: grid; gap: 10px; } .bp-item{ background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%); border: 1px solid color-mix(in oklab, var(--surface-2) 70%, transparent 30%); border-radius: 14px; overflow: hidden; transition: border-color .2s ease, background .2s ease; } .bp-item[open]{ /* realce al expandir */ background: color-mix(in oklab, var(--surface) 94%, var(--bg) 6%); border-color: color-mix(in oklab, var(--primary) 35%, var(--surface-2) 65%); } .bp-item > summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: clamp(12px, 2.2vw, 16px); font-weight: 600; } .bp-item > summary::-webkit-details-marker{ display: none; } .bp-item .chevron{ transition: transform .2s ease; opacity: .8; } .bp-item[open] .chevron{ transform: rotate(180deg); } .bp-content{ padding: 0 clamp(12px, 2.2vw, 16px) clamp(12px, 2.2vw, 16px); color: var(--text); line-height: 1.6; } .bp-content + .bp-content{ padding-top: 0; } .bp-list{ margin: 0; padding-left: 18px; display: grid; gap: 6px; } /* Responsive fino */ @media (max-width: 640px){ .brand-logo-full{ height: clamp(120px, 32vw, 200px); } .bp-item > summary{ padding: 12px 14px; } .bp-content{ padding: 0 14px 14px; } } /* Modo claro: realce suave */ :root[data-theme="light"] .bp-item{ background: #fff; border-color: rgba(0,0,0,.08); } /* ========================================================= BRAND PREVIEW — Desktop en 2 columnas (logo + texto) - No deforma el logo (quality first) - Mobile queda igual que ahora ========================================================= */ /* Sólo en PC */ @media (min-width: 992px){ /* 1) Armamos grilla 2 columnas dentro del wrapper */ #brand-preview .brand-wrap{ /* centralizamos el contenido dentro del full-bleed */ max-width: 1200px; /* ajustá si tu container es otro */ margin: 0 auto; padding: 16px 24px 24px; /* un poco de aire interno */ display: grid; grid-template-columns: minmax(420px, 560px) 1fr; /* logo | textos */ grid-template-areas: "logo tagline" "logo info"; column-gap: 28px; row-gap: 14px; } /* 2) Cancelamos el full-bleed del logo (en desktop no lo estiramos) */ #brand-preview .brand-logo-box{ grid-area: logo; width: auto; /* quita el 100vw del modo mobile */ margin: 0; /* quita los calc(50% - 50vw) */ padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; /* por si quedó fondo */ } /* 3) Logo con calidad: sin deformar, escala máxima controlada */ #brand-preview .brand-logo-full{ width: 100%; height: auto; /* mantiene proporción */ max-width: 560px; /* ↔ ajustá: 480–640px según guste */ object-fit: contain; object-position: center; filter: drop-shadow(0 6px 16px rgba(0,0,0,.12)); } /* 4) Tagline arriba a la derecha */ #brand-preview .brand-tagline{ grid-area: tagline; margin: 4px 0 6px 0; text-align: left; /* alinear con el acordeón */ } /* 5) Acordeón a la derecha, pegado al logo */ #brand-preview .brand-accordion{ grid-area: info; margin-top: 0; } } /* 🔒 Mobile y tablets pequeñas mantienen el diseño actual (logo full-bleed estirado si así lo definiste) */ /* ========================================================= BRAND PREVIEW — móvil: logo full-bleed pegado al header (desktop queda como lo tenés ahora con 2 columnas) ========================================================= */ @media (max-width: 991.98px){ /* sin aire arriba: toca el header */ #brand-preview{ padding-top: 0 !important; } #brand-preview .brand-wrap{ padding-top: 0 !important; } #brand-preview .brand-logo-box{ margin-top: -1px; /* borra línea/sombra bajo header */ } /* logo a todo el ancho del viewport */ #brand-preview .brand-logo-box{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; } #brand-preview .brand-logo-full{ width: 100%; height: 180px; /* si querés menos, probá 160px */ object-fit: fill; /* lo estira a los lados (como antes) */ object-position: center; max-width: none; } /* tagline centrada como antes en móvil */ #brand-preview .brand-tagline{ text-align: center; margin: 10px auto 8px; } } /* ========================================================= HOTFIX FINAL — Header desktop sin solapamientos - Gradiente “cinta” intacto - 3 zonas en grid: [brand] | [nav centrado] | [actions] - Espacio real entre "Contacto" y los iconos - Mobile NO se toca Pegar al FINAL del CSS ========================================================= */ @media (min-width: 992px){ /* Fondo y altura del header (por si algún estilo lo pisa) */ .header{ background: linear-gradient(90deg, #1c1c1c 0%, #0077c8 100%) !important; height: var(--header-h); min-height: var(--header-h); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(0,0,0,.15); -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px); } /* 3 columnas fijas: IZQ (brand) | CENTRO (nav) | DER (actions) */ .header .container.header-row{ display: grid !important; grid-template-columns: auto 1fr auto; /* ← clave para que nada se empuje */ align-items: center; gap: 22px; width: 100%; } /* --- BRAND (izquierda) ---------------------------------- */ .header .brand{ justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 240px; /* reserva de ancho segura */ max-width: 380px; /* evita invadir el nav */ overflow: hidden; } .header .brand img{ height: 28px; width: auto; object-fit: contain; } .header .brand span{ display: block; white-space: normal; /* permite tu
*/ line-height: 1.1; overflow: visible; text-overflow: clip; /* nunca "..." */ color: #fff; font-weight: 700; } .header .brand span b{ display: block; font-weight: 700; color: #bfe8ff; /* “Transportes” clarito */ } /* --- NAV (centro) --------------------------------------- */ .header .nav{ justify-self: center; display: flex !important; justify-content: center; align-items: center; gap: 22px; min-width: 0; /* para que el grid no reviente */ } /* Link legible */ .header .nav-link{ color: #8fd9ff !important; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.25); transition: color .15s ease; } .header .nav-link:hover{ color: #e8f7ff !important; } .header .nav-link.active, .header .nav-link[aria-current="page"]{ color:#ffffff !important; } /* Botón "Contacto" vive dentro del NAV pero se separa de ACTIONS */ .header .nav-cta{ margin-right: clamp(18px, 2.4vw, 36px); /* ← espacio real antes de los iconos */ flex: 0 0 auto; } /* --- ACTIONS (derecha) ---------------------------------- */ .header .header-actions{ justify-self: end; display: flex !important; align-items: center; gap: 12px; /* espacio entre los 2 iconos */ /* nada de márgenes negativos ni posiciones raras */ } .header .btn, .header .icon-btn{ position: static !important; /* evita overlays sobre "Contacto" */ } } /* Mobile/tablets chicas: sin cambios de layout del header */ @media (max-width: 991.98px){ /* no tocamos tu comportamiento móvil */ } /* ========================================================= HOTFIX FINAL — Aire entre Brand y Nav ========================================================= */ @media (min-width: 992px){ .header .brand{ margin-right: clamp(20px, 2.8vw, 36px); /* más aire antes de Servicios */ } /* Ajuste del nav para mantenerlo centrado */ .header .nav{ gap: 22px; /* el espacio entre cada link */ } } /* ========================================================= PARCHE ÚNICO — Header desktop sin solapes (grid 3 columnas) Pegar al FINAL del CSS ========================================================= */ @media (min-width: 992px){ /* Cinta con gradiente + altura fija */ .header{ background: linear-gradient(90deg,#1c1c1c 0%,#0077c8 100%) !important; height: var(--header-h); min-height: var(--header-h); position: sticky; top: 0; z-index: 100; -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px); border-bottom: 1px solid rgba(0,0,0,.15); } /* 3 zonas firmes: [brand] | [nav] | [actions] */ .header .container.header-row{ display: grid !important; grid-template-columns: minmax(260px,auto) 1fr auto; /* IZQ | CENTRO | DER */ align-items: center; gap: clamp(16px, 2.4vw, 28px); width: 100%; overflow: visible; } /* BRAND (izquierda): 2 líneas y sin cortar */ .header .brand{ grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 260px; /* reserva real */ max-width: 380px; /* no invade el nav */ overflow: hidden; margin-right: 0 !important; /* pisa parches previos */ } .header .brand .brand-text{ white-space:normal; line-height:1.1; overflow:visible; text-overflow:clip; color:#fff; font-weight:700; } .header .brand .brand-text b{ display:block; font-weight:700; color:#bfe8ff; /* “Transportes” clarito */ } .header .brand img{ height:28px; width:auto; object-fit:contain; } /* NAV (centro): centrado, sin wrap, con aire */ .header .nav{ grid-column: 2; justify-self: center; display: flex !important; justify-content: center; align-items: center; gap: clamp(16px, 2vw, 24px); min-width: 0; /* clave para que no empuje al brand */ flex-wrap: nowrap; /* evita saltos de línea */ } .header .nav-link{ color:#8fd9ff !important; font-weight:600; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.25); transition:color .15s ease; } .header .nav-link:hover{ color:#e8f7ff !important; } .header .nav-link.active, .header .nav-link[aria-current="page"]{ color:#ffffff !important; } /* CTA “Contacto”: deja espacio real antes de los iconos */ .header .nav-cta{ margin-right: clamp(20px, 3vw, 40px); flex: 0 0 auto; } /* ACTIONS (derecha): nunca encima del CTA */ .header .header-actions{ grid-column: 3; justify-self: end; display: flex !important; align-items: center; gap: clamp(8px, 1.4vw, 14px); margin-left: 0 !important; } /* Nada flotante: quita cualquier overlay/absoluto previo */ .header .btn, .header .icon-btn{ position: static !important; z-index: 0 !important; } } /* Mobile / tablets chicas intacto */ @media (max-width: 991.98px){ /* no cambiamos tu comportamiento móvil */ } /* ========================================================= HOTFIX ÚNICO — Header desktop SIN solapamientos (no toca mobile). Mantiene el degradé original. Pegar AL FINAL del CSS. ========================================================= */ @media (min-width: 992px){ /* Fondo + altura (por si quedó pisado) */ .header{ background: linear-gradient(90deg,#1c1c1c 0%,#0077c8 100%) !important; height: var(--header-h); min-height: var(--header-h); position: sticky; top: 0; z-index: 100; -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px); } /* 3 columnas reales: [brand] | [nav centrado] | [actions] */ .header .container.header-row{ display: grid !important; grid-template-columns: minmax(260px, auto) 1fr auto; align-items: center; gap: clamp(16px,2.4vw,28px); width: 100%; overflow: visible; } /* -------- BRAND (izquierda) -------- */ .header .brand{ justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 260px; /* reserva fija para que no invada el nav */ max-width: 380px; /* ajustable 360–420 si querés */ overflow: hidden; margin: 0 !important; /* neutraliza empujes previos */ } .header .brand img{ height: 28px; width: auto; object-fit: contain; } .header .brand .brand-text{ white-space: normal !important; /* permite el
*/ line-height: 1.08; overflow: visible !important; text-overflow: clip !important; color: #fff; font-weight: 700; } .header .brand .brand-text b{ display: block; font-weight: 700; color: #bfe8ff; /* “Transportes” clarito */ } /* -------- NAV (centro) -------- */ .header .nav{ justify-self: center; display: flex !important; justify-content: center; align-items: center; gap: 22px; min-width: 0; /* clave para que el grid no reviente */ padding-right: 0 !important; /* quitamos empujes que lo desalinean */ } .header .nav-link{ color: #8fd9ff !important; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.25); transition: color .15s ease; } .header .nav-link:hover{ color:#e8f7ff !important; } .header .nav-link.active, .header .nav-link[aria-current="page"]{ color:#fff !important; } /* CTA separado de los iconos (espacio REAL) */ .header .nav-cta{ margin-right: clamp(24px, 3vw, 44px) !important; flex: 0 0 auto; } /* -------- ACTIONS (derecha) -------- */ .header .header-actions{ justify-self: end; display: flex !important; align-items: center; gap: 12px; margin: 0 !important; /* sin empujes hacia el nav */ position: relative; z-index: 1; /* nunca encima del CTA */ } /* Seguridad: nada “flotante” que vuelva a tapar el CTA */ .header .btn, .header .icon-btn{ position: static !important; inset: auto !important; transform: none !important; } } /* ===== HOTFIX Header sin solapes (Desktop & Móvil) ===== */ /* Fondo y altura del header en todas las vistas */ .header { background: linear-gradient(90deg, #1c1c1c 0%, #0077c8 100%) !important; height: var(--header-h, 72px); min-height: var(--header-h, 72px); position: sticky; top: 0; z-index: 100; /* header se apila por encima del contenido */ border-bottom: 1px solid rgba(0,0,0,.15); -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px); } /* ======= Desktop (>=992px) ======= */ @media (min-width: 992px) { /* Grid de 3 columnas: brand | nav | actions */ .header .container.header-row { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; width: 100%; } /* BRAND (logo y texto) con ancho reservado para evitar colisión con nav */ .header .brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 260px; /* ajustar a 280-300px si el texto de marca es muy largo */ max-width: 380px; overflow: hidden; /* esconde overflow para que el texto no invada el nav */ } .header .brand img { height: 28px; width: auto; object-fit: contain; } .header .brand .brand-text { display: inline-block; line-height: 1.1; white-space: normal; overflow: visible; text-overflow: clip; color: #fff; font-weight: 700; font-size: clamp(14px, 1.8vw, 16px); } .header .brand .brand-text b { display: block; color: #bfe8ff; font-weight: 700; } /* NAV centrado y elementos en una sola línea sin wraps */ .header .nav { justify-self: center; display: flex !important; align-items: center; justify-content: center; gap: 22px; min-width: 0 !important; /* permite que el nav se encoja si es necesario */ flex-wrap: nowrap !important; } .header .nav-link { white-space: nowrap; color: #8fd9ff !important; font-weight: 600; text-shadow: 0 1px 0 rgba(0,0,0,.25); transition: color .15s ease; } .header .nav-link:hover { color: #e8f7ff !important; } .header .nav-link.active, .header .nav-link[aria-current="page"] { color: #ffffff !important; } /* CTA “Contacto” o similar, con margen para separarlo de iconos de acciones */ .header .nav-cta { margin-right: clamp(24px, 3vw, 42px) !important; flex: 0 0 auto; } /* Acciones (botones/iconos) alineadas a la derecha */ .header .header-actions { justify-self: end; display: inline-flex !important; align-items: center; gap: 12px; } .header .btn, .header .icon-btn { position: static !important; z-index: 0 !important; /* evita que botones tengan su propio stacking context por encima */ } } /* ======= Móvil (<992px) ======= */ @media (max-width: 991.98px) { /* Header en una fila: brand izquierda | acciones derecha */ .header .container.header-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-inline: clamp(12px, 4vw, 20px); /* espacio lateral responsivo */ } /* BRAND ajustable en ancho, con texto en 2 líneas */ .header .brand { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 10px; } .header .brand img { height: 26px; width: auto; object-fit: contain; } .header .brand .brand-text { display: inline-flex; flex-direction: column; white-space: normal; line-height: 1.08; font-weight: 700; font-size: 14px; color: #fff; } .header .brand .brand-text b { font-size: 12.5px; color: #bfe8ff; font-weight: 600; } /* Nav y CTA ocultos en mobile (solo menú hamburguesa u iconos permanecen) */ .header .nav, .header .nav-cta, .header .header-actions .btn-cta { display: none !important; } /* Acciones (iconos) a la derecha */ .header .header-actions { flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 10px; margin-left: 8px; } .header .icon-btn { width: 36px; height: 36px; border-radius: 10px; position: static !important; } /* Menú móvil desplegable ubicado debajo del header fijo */ .mobile-menu { position: absolute !important; /* o fixed, según implementación existente */ inset: var(--header-h, 72px) 0 auto 0 !important; /* Con top = altura del header, el menú inicia bajo el header y evita solaparse */ } } /* ===== HOTFIX — Compactar nav en DESKTOP (tipos + espacios) ===== */ @media (min-width: 992px){ /* Texto de los links más chico y sin saltos */ .header .nav-link{ font-size: clamp(13px, 1.00vw, 15px) !important; /* antes ~16px */ padding: .25rem 0 !important; white-space: nowrap !important; letter-spacing: .1px; } /* Menor separación entre items del menú */ .header .nav{ gap: clamp(10px, 1.2vw, 16px) !important; /* antes 22px */ min-width: 0 !important; flex-wrap: nowrap !important; } /* Botón “Contacto” más compacto */ .header .nav-cta{ font-size: clamp(13px, 1.05vw, 15px) !important; padding: .55rem .95rem !important; /* menos alto/ancho */ margin-right: clamp(12px, 1.6vw, 20px) !important; /* menos aire hacia los iconos */ line-height: 1.1; } .header .nav-cta i{ font-size: 1rem !important; } /* Iconos de la derecha, un poco más juntos */ .header .header-actions{ gap: 10px !important; /* antes 12px */ } /* Seguridad: nada flotante encima del CTA */ .header .btn, .header .icon-btn{ position: static !important; z-index: 0 !important; } } /* ========================================================= PARCHE — Servicios (se quitó "Carga y descarga") ✔ Desktop: 4 columnas en una sola fila (todas iguales) ✔ Tablet: 2 columnas ✔ Mobile: 1 columna ✔ Elimina el comportamiento de estirar la última card ========================================================= */ /* Tablet en adelante: 2 columnas por defecto */ @media (min-width: 768px){ #servicios .cards{ display: grid; grid-template-columns: repeat(2, minmax(260px,1fr)) !important; gap: 22px; margin-inline: auto; align-items: stretch; } /* Quita cualquier span heredado en la última tarjeta */ #servicios .cards > .card:last-child{ grid-column: auto !important; } } /* Desktop ancho: 4 columnas en una sola fila */ @media (min-width: 1200px){ #servicios .cards{ grid-template-columns: repeat(4, minmax(240px, 1fr)) !important; max-width: 1200px; /* opcional: limita ancho para que no “flote” */ } } /* Mobile: 1 por fila */ @media (max-width: 767.98px){ #servicios .cards{ grid-template-columns: 1fr !important; gap: 18px; } } /* ================================ CONTACT FORM — Polish & A11y (FIX) Pegar AL FINAL de styles.css ================================ */ #contacto .form label{ font-weight:700; color:var(--text); } /* Inputs + select unificados */ #contacto .form input, #contacto .form textarea, #contacto .form select{ appearance:none; -webkit-appearance:none; width:100%; padding:.9rem 1rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } /* Placeholder con contraste correcto */ #contacto .form ::placeholder{ color: color-mix(in oklab, var(--muted) 80%, transparent 20%); } /* Focus accesible */ #contacto .form input:focus-visible, #contacto .form textarea:focus-visible, #contacto .form select:focus-visible{ outline:none; border-color: color-mix(in oklab, var(--primary) 55%, var(--border) 45%); box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent 80%); } /* Textarea altura cómoda */ #contacto .form textarea{ min-height:140px; resize:vertical; } /* Select con flecha custom (comentarios bien cerrados) */ #contacto .form select{ padding-right:2.25rem; /* El primer gradient es “dummy” para Safari */ background-image: linear-gradient(180deg, #0000, #0000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a7b4c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; background-size:18px 18px; } /* Autofill Chrome */ #contacto .form input:-webkit-autofill, #contacto .form textarea:-webkit-autofill, #contacto .form select:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset !important; -webkit-text-fill-color:var(--text) !important; caret-color:var(--text); } /* Estados de error/ok (los maneja el JS con .is-invalid/.is-valid) */ .form .field{ display:grid; gap:.35rem; } .form .error-text{ display:none; color:#ffb4b4; font-size:.85rem; font-weight:600; } .form .is-invalid input, .form .is-invalid textarea, .form .is-invalid select{ border-color:#ff7a7a; box-shadow:0 0 0 3px color-mix(in oklab, #ff7a7a 22%, transparent 78%); } .form .is-invalid .error-text{ display:block; } .form .is-valid input, .form .is-valid textarea, .form .is-valid select{ border-color: color-mix(in oklab, var(--primary) 55%, var(--border) 45%); } /* Botones: disabled */ .form-actions .btn[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(.15); } /* Respeta reduce-motion */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* Fallback si el navegador no soporta color-mix */ @supports not (color: color-mix(in oklab, white, black)){ #contacto .form input:focus-visible, #contacto .form textarea:focus-visible, #contacto .form select:focus-visible{ border-color: var(--primary); box-shadow:0 0 0 3px rgba(25,131,187,.2); } } /* ================================ Contact chips (phone / email) ================================ */ #contacto .contact-actions{ display:flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 6px; } #contacto .action-pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 700; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease, background .15s ease; } #contacto .action-pill i{ font-size: 1.05rem; color: var(--primary); } /* Hover/focus accesibles */ #contacto .action-pill:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--primary) 55%, var(--border) 45%); } #contacto .action-pill:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent 80%); border-color: color-mix(in oklab, var(--primary) 55%, var(--border) 45%); } /* Variantes (ligero matiz, sin “gritar”) */ #contacto .action-pill.phone{ background: linear-gradient(180deg, #ffffff08, #ffffff03); } #contacto .action-pill.email{ background: linear-gradient(180deg, #ffffff08, #ffffff03); } /* Mobile: que no se rompa */ @media (max-width:520px){ #contacto .action-pill{ flex: 1 1 auto; /* se estiran parejo si hay poco ancho */ justify-content: center; } } #contacto .action-pill.phone{ background: var(--grad); color: #fff; border-color: transparent; } #contacto .action-pill.phone i{ color:#fff; } /* ================================ Footer — layout centrado + pills ================================ */ .footer{ padding: clamp(20px, 4vw, 36px) 0; border-top: 1px solid var(--border); background: linear-gradient(to top, color-mix(in oklab, var(--bg) 96%, #000 4%), transparent); } .footer .footer-row{ /* centrado y prolijo en todas las vistas */ display:flex !important; flex-direction: column; align-items:center; justify-content:center; gap: .5rem; text-align:center; min-height: 120px; } .footer .footer-row > div:first-child p{ margin: 0; font-weight: 600; color: var(--text); } .footer .dev-signature{ margin-top: 2px; color: var(--muted); font-size: .92rem; } .footer .dev-signature a{ color: var(--primary); text-decoration: none; font-weight: 700; } .footer .dev-signature a:hover{ text-decoration: underline; } /* Social pills */ .footer .social{ display:flex; gap: .5rem; margin-top: .35rem; } .footer .social a{ width: 38px; height: 38px; display:grid; place-items:center; border-radius: 999px; background: #ffffff10; border: 1px solid var(--border); color: color-mix(in oklab, var(--text) 82%, transparent); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; } .footer .social a:hover{ transform: translateY(-2px); color: #fff; border-color: color-mix(in oklab, var(--primary) 55%, var(--border) 45%); box-shadow: 0 6px 18px rgba(0,0,0,.25); } .footer .social i{ font-size: 1.05rem; } /* línea suave al centro (opcional, visual) */ .footer::before{ content:""; display:block; width:min(680px, 86vw); height:1px; margin: 0 auto clamp(12px, 2vw, 18px); background: linear-gradient(90deg, #0000, color-mix(in oklab, var(--border) 80%, transparent) 20%, color-mix(in oklab, var(--border) 80%, transparent) 80%, #0000); opacity:.9; } /* Respeta reduce-motion */ @media (prefers-reduced-motion: reduce){ .footer .social a{ transition:none !important; } } /* ============ Lightbox (galería modal) ============ */ .lb{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .lb[aria-hidden="false"]{ opacity: 1; pointer-events: auto; } .lb__backdrop{ position: absolute; inset: 0; background: color-mix(in oklab, #000 80%, transparent); backdrop-filter: blur(2px); } .lb__figure{ position: relative; z-index: 1; max-width: min(1100px, 92vw); max-height: min(82vh, 92vh); display: grid; grid-template-rows: 1fr auto; gap: .6rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--surface); padding: clamp(8px, 1.6vw, 14px); } .lb__img{ width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #000; /* marco negro “fotográfico” */ } .lb__caption{ color: var(--muted); font-weight: 600; text-align: center; min-height: 1.2em; } .lb__btn{ position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border); background: #ffffff10; color: var(--text); box-shadow: var(--shadow); transition: transform .15s ease, background .15s ease; } .lb__btn:hover{ transform: translateY(-1px); background:#ffffff18; } .lb__close{ top: 14px; right: 14px; } .lb__prev{ left: 18px; top: 50%; transform: translateY(-50%); } .lb__next{ right: 18px; top: 50%; transform: translateY(-50%); } .lb__dots{ position: absolute; bottom: clamp(12px, 3vw, 18px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .lb__dots button{ width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--border); background: #ffffff30; } .lb__dots button[aria-current="true"]{ background: var(--primary); border-color: var(--primary); } /* Mobile: botones un toque más grandes */ @media (max-width: 520px){ .lb__btn{ width: 48px; height: 48px; } } /* ==== Lightbox: evitar desbordes en fotos muy altas/anchas ==== */ .lb__figure{ /* ya lo tenías, pero reforzamos: */ width: min(1100px, 92vw); max-height: min(86vh, 92vh); /* CLAVES: permitir que el hijo se encoja y recortar bordes redondeados */ grid-template-rows: minmax(0, 1fr) auto; /* la fila de la imagen puede encogerse */ overflow: hidden; /* respeta el borde redondeado */ } .lb__img{ display: block; /* La imagen llena la PRIMERA fila del grid y se “contiene” */ width: 100%; height: 100%; object-fit: contain; /* ni recorta ni deforma */ /* por si algún estilo previo la forzaba */ max-width: 100%; max-height: 100%; border-radius: 10px; } /* ===== Lightbox — Mobile polish ===== */ @media (max-width: 640px){ /* contenedor más compacto y con unidades seguras de viewport */ .lb__figure{ width: 96vw; /* casi a borde */ max-width: 96vw; max-height: 74svh; /* respeta barra/teclado en móviles */ padding: 10px; /* menos padding */ border-radius: 14px; } .lb__img{ border-radius: 10px; /* por si la foto es muy panorámica */ max-height: calc(74svh - 42px); /* deja lugar al caption */ } /* botones un toque más grandes y pegados al marco del figure */ .lb__btn{ width: 48px; height: 48px; backdrop-filter: blur(2px); } .lb__prev{ left: 10px; } .lb__next{ right: 10px; } /* botón cerrar respeta notch/safe-area */ .lb__close{ top: max(10px, env(safe-area-inset-top, 10px)); right: max(10px, env(safe-area-inset-right, 10px)); } /* caption más legible y sin ocupar de más */ .lb__caption{ font-size: .95rem; padding: 2px 4px 0; min-height: 1.1em; } /* puntos centrados y sin irse muy abajo */ .lb__dots{ bottom: max(10px, env(safe-area-inset-bottom, 10px)); gap: 6px; } .lb__dots button{ width: 7px; height: 7px; } } /* opcional: en móviles MUY chicos, aún más compacto */ @media (max-width: 360px){ .lb__figure{ max-height: 70svh; } .lb__img{ max-height: calc(70svh - 40px); } } /* ===== Lightbox — centrar en mobile ===== */ @media (max-width: 640px){ .lb{ display: flex; /* cambiamos grid → flex */ align-items: center; /* centra vertical */ justify-content: center; /* centra horizontal */ padding: 20px; /* respiro contra bordes */ } .lb__figure{ margin: 0 auto; /* asegura centrado */ max-height: 80svh; /* ajusta al alto visible */ } .lb__img{ max-height: calc(80svh - 40px); /* deja espacio a caption y botones */ } } /* Centrado perfecto de la tarjeta de contacto en móvil */ #contacto .contacto__container{ display:flex; /* centra el bloque interno */ justify-content:center; padding-inline: 18px; /* margen simétrico seguro */ } #contacto .cta-inner{ width: min(720px, 100%); /* límite agradable de ancho */ margin-inline: auto; /* centra sí o sí */ box-sizing: border-box; } /* Respeta notch/safe-areas (iPhone, etc.) */ @supports (padding: max(0px)){ @media (max-width: 640px){ #contacto .contacto__container{ padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } } } /* Contacto — sin cortes a la derecha en móvil */ #contacto .contacto-shell{ /* padding simétrico seguro y centrado del card */ padding-inline: 18px; margin-inline: auto; max-width: var(--container); } #contacto .cta-inner{ /* límite real: nunca más ancho que el viewport menos el padding lateral */ width: 100%; max-width: min(720px, calc(100svw - 36px)); /* 18px x 2 */ margin-inline: auto; box-sizing: border-box; } /* Si alguna animación usa transform, evitamos “recortes” visuales */ #contacto { overflow: visible; } /* Por si algún browser viejo no soporta svw */ @supports not (width: 1svw){ #contacto .cta-inner{ max-width: min(720px, calc(100vw - 36px)); } } /* === CONTACTO — FIX de recorte a la derecha ================== */ #contacto .cta-inner{ /* no recortar los hijos (botones/pills) */ overflow: visible !important; /* asegurar que SIEMPRE entra en el viewport */ max-width: min(720px, calc(100dvw - 36px)) !important; /* 18px x lado */ margin-inline: auto; box-sizing: border-box; } /* Si AOS aplica un scale durante la animación, evitá clipping */ #contacto .cta-inner[data-aos]{ transform-origin: center center; } /* Los botones y pills no deben desbordar */ #contacto .form-actions .btn, #contacto .action-pill{ max-width: 100%; } /* Por si algún navegador no soporta dvw */ @supports not (width: 1dvw){ #contacto .cta-inner{ max-width: min(720px, calc(100vw - 36px)) !important; } } /* FIX Contacto: que la dirección pueda partirse en mobile */ #contacto .hours{ grid-template-columns: auto minmax(0,1fr); /* permite que la 2ª columna encoja */ } #contacto .hours .value{ font-weight:700; white-space: normal !important; /* ← deja que envuelva */ overflow-wrap: anywhere; /* rompe si hace falta */ min-width: 0; /* evita desbordes en grid */ } /* En desktop mantené 2 pares de columnas, pero con minmax */ @media (min-width:980px){ #contacto .hours{ grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); } } /* Solo los que marcaste como “nowrap” deben no partirse */ #contacto .hours .value.nowrap{ white-space: nowrap !important; }