/* ARCHIVO GENERADO POR build.py — NO EDITAR A MANO. Para cambiar un estilo, edita el archivo correspondiente dentro de css/src/ y vuelve a ejecutar `python3 build.py`. */ /* ============================================================ 00 · VARIABLES — Tokens de diseño (paleta,radios,sombras) ------------------------------------------------------------ Todo el color/espaciado "de marca" vive aquí. Si mañana cambia el azul o el amarillo corporativo,se cambia SOLO en este archivo y se propaga a todo el sitio automáticamente. Paleta corporativa:Azul (primario) · Amarillo (acento puntual) ============================================================ */:root{--azul:#08327a;--azul-oscuro:#062354;--azul-suave:#eef1f8;--amarillo:#fde61c;--amarillo-op:#f0d900;--gris-900:#1e293b;--gris-700:#334155;--gris-400:#9aa4b2;--gris-100:#f5f6f8;--blanco:#ffffff;--radio:14px;--sombra:0 20px 45px -25px rgba(8,50,122,.35);/* sombra "elevada" estándar */}/* ============================================================ 01 · BASE — Reset mínimo,tipografía base y utilidades globales ------------------------------------------------------------ Estilos que aplican a TODO el sitio sin depender de ninguna página o componente concreto:box-sizing,body,enlaces,títulos,la utilidad .text-azul,el "eyebrow" (etiqueta pequeña sobre los títulos) y el skip-link de accesibilidad. ============================================================ */ *{box-sizing:border-box}html{scroll-behavior:smooth}/* Accesibilidad:desactiva el gesto de "arrastrar/deslizar" del navegador (swipe con trackpad o dedo) que dispara la animación de ir atrás/adelante entre páginas. Con overscroll-behavior-x:none el gesto horizontal deja de navegar y solo queda la flecha "Volver" visible de cada página como forma de retroceder. Soportado en Chrome/Edge/navegadores basados en Chromium;Safari no expone un equivalente 100% completo,pero no afecta en nada al resto de la navegación (enlaces,botón atrás del navegador,etc. siguen funcionando igual). */ html,body{overscroll-behavior-x:none}body{font-family:'Montserrat','Inter',system-ui,-apple-system,sans-serif;color:var(--gris-900);background:var(--blanco);-webkit-font-smoothing:antialiased}a{text-decoration:none}h1,h2,h3,h4,h5{font-weight:800;letter-spacing:-.02em;color:var(--azul-oscuro)}.text-azul{color:var(--azul) !important}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:800;color:var(--azul);display:inline-flex;align-items:center;gap:.5rem}.eyebrow::before{content:"";width:22px;height:3px;background:var(--amarillo);border-radius:2px;display:inline-block}.skip-link{position:absolute;left:-999px;top:0;background:var(--azul);color:#fff;padding:.75rem 1.25rem;z-index:3000;border-radius:0 0 8px 0;font-weight:600}.skip-link:focus{left:0}/* ============================================================ 02 · CABECERA Y PIE — Topbar,navbar y footer ------------------------------------------------------------ Estilos del "chrome" que se repite en todas las páginas. El HTML de estos bloques vive en partials/header.html,partials/header-legal.html y partials/footer.html (ver build.py) — aquí solo el CSS. ============================================================ */ .topbar{background:var(--azul-oscuro);color:#c9d3e8;font-size:.82rem;padding:.45rem 0}.topbar a{color:#c9d3e8;margin-right:1.4rem}.topbar a:hover{color:var(--amarillo)}.topbar .redes a{margin-right:.9rem;font-size:1rem}.navbar-abrisa{background:#fff;padding:1rem 0;box-shadow:0 2px 18px rgba(16,32,74,.06)}.navbar-abrisa .navbar-brand{font-weight:800;font-size:1.55rem;color:var(--azul-oscuro)}.navbar-abrisa .navbar-brand span{color:var(--azul)}.navbar-abrisa .navbar-brand small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.12em;color:var(--gris-400);text-transform:uppercase;margin-top:-2px}.navbar-abrisa .nav-link{font-weight:600;color:var(--gris-900) !important;margin:0 .7rem;position:relative;padding:.4rem .1rem !important}.navbar-abrisa .nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--amarillo);border-radius:2px;transition:width .25s ease}.navbar-abrisa .nav-link:hover::after,.navbar-abrisa .nav-link.active::after{width:100%}.navbar-abrisa .nav-link.active{color:var(--azul) !important}footer.footer-abrisa{background:var(--azul-oscuro);color:#aebada;padding:4rem 0 1.6rem;font-size:.92rem}footer.footer-abrisa h6{color:#fff;font-weight:800;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;margin-bottom:1.1rem}footer.footer-abrisa a{color:#aebada}footer.footer-abrisa a:hover{color:var(--amarillo)}footer.footer-abrisa .marca{font-weight:800;font-size:1.4rem;color:#fff}footer.footer-abrisa .marca span{color:var(--amarillo)}.redes-footer a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;margin-right:.5rem}.redes-footer a:hover{background:var(--amarillo);color:var(--azul-oscuro)}.btn-abrisa{background:var(--azul);border:none;color:#fff;font-weight:700;padding:.72rem 1.6rem;border-radius:100px;transition:.2s ease}.btn-abrisa:hover{background:var(--azul-oscuro);color:#fff;transform:translateY(-1px)}.btn-abrisa-outline{border:1.5px solid var(--azul);color:var(--azul);font-weight:700;border-radius:100px;padding:.68rem 1.5rem;background:transparent;transition:.2s ease}.btn-abrisa-outline:hover{background:var(--azul);color:#fff}.btn-amarillo{background:var(--amarillo);border:none;color:var(--azul-oscuro);font-weight:800;padding:.72rem 1.6rem;border-radius:100px;transition:.2s ease}.btn-amarillo:hover{background:var(--amarillo-op);color:var(--azul-oscuro);transform:translateY(-1px)}.btn-outline-inv{border:1.5px solid #fff;color:#fff;font-weight:700;border-radius:100px;padding:.68rem 1.5rem;background:transparent;transition:.2s ease}.btn-outline-inv:hover{background:#fff;color:var(--azul-oscuro)}/* Usadas en la tarjeta de producto (productos.html) y en la ficha (producto.html). CORRECCIÓN respecto al CSS original:antes esta regla base estaba escrita como ".producto-card .badge-gama",así que SOLO se aplicaba dentro de una tarjeta de la tienda. Fuera de ahí (p. ej. en la ficha de producto.html) el badge se quedaba sin forma de píldora,solo con el color. Se globaliza a ".badge-gama" para que funcione igual en cualquier página. */ .badge-gama{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.28rem .6rem;border-radius:100px;display:inline-block;margin-bottom:.5rem}.badge-gama.riego{background:#e6ecfb;color:var(--azul)}.badge-gama.presion{background:#fff9cc;color:#7a7a00}.badge-gama.evacuacion{background:#fbe4e4;color:#a32d2d}/* ============================================================ 04 · HERO Y SECCIONES DE PÁGINA — bloques grandes de contenido ------------------------------------------------------------ Todo lo que compone las "franjas" de las páginas principales (Inicio/Empresa/Productos):heros,sección amarilla,franja de cifras,contadores animados y el banner de catálogo. ============================================================ */ /* ---------- Hero "clásico" (foto recortada a la derecha) ---------- */ .hero{position:relative;padding:5rem 0 4.5rem;overflow:hidden}.hero-visual{border-radius:28px;overflow:hidden;position:relative;min-height:430px;box-shadow:var(--sombra)}.hero-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.hero-visual .capa{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,74,.05) 30%,rgba(16,32,74,.55))}.hero h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08}.hero p.lead{color:var(--gris-700);font-size:1.12rem;max-width:520px}.hero-full{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;padding:6rem 0}.hero-full-img{position:absolute;inset:0;background-size:cover;background-position:center}.hero-full-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,35,84,.82) 0%,rgba(6,35,84,.55) 55%,rgba(6,35,84,.35) 100%)}.hero-full-contenido{position:relative;z-index:2;color:#fff}.hero-full-contenido .eyebrow-inv{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--amarillo);margin-bottom:1rem;display:block}.hero-full-contenido h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.12;max-width:760px}.hero-full-contenido p.lead{color:rgba(255,255,255,.85);max-width:620px;font-size:1.08rem}.contador-anim{font-size:2.4rem;font-weight:800;color:var(--azul);line-height:1}.contador-anim.inv{color:var(--amarillo)}/* Bloque "ISO / Calidad certificada":no se anima (no lleva data-target),pero debe verse igual que los contadores que sí lo hacen. */ .contador-iso{font-size:2.4rem;font-weight:800;color:var(--azul);line-height:1}.contador-lbl{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;color:var(--gris-700);margin-top:.4rem}.contador-lbl.inv{color:rgba(255,255,255,.7)}/* ---------- Sección amarilla ("Un referente internacional" en empresa.html) ---------- */ .section-amarilla{background:var(--amarillo);border-radius:28px;padding:3.5rem}.section-amarilla h2{color:var(--azul-oscuro)}.tarjeta-mv{background:rgba(255,255,255,.55);border-radius:18px;padding:1.8rem;height:100%}.tarjeta-mv h3{font-size:1.15rem;margin-bottom:.7rem;color:var(--azul-oscuro)}.tarjeta-mv p{color:var(--gris-700);margin-bottom:0;font-size:.95rem}.flex-admarillo{display:flex;gap:2rem}.flex-admarillo h2{align-self:center}.foto-amarilla{border-radius:18px;overflow:hidden;height:100%;min-height:220px}.foto-amarilla img{width:100%;height:100%;object-fit:cover;display:block}.imagen-agricultura{border-radius:18px}.lista-check{list-style:none;margin:0;padding:0}.lista-check li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;color:var(--gris-700)}.lista-check li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;margin-top:.1rem}section{padding:5rem 0}.section-suave{background:var(--gris-100)}.banner-catalogo{background:var(--azul);border-radius:28px;color:#fff;padding:3rem;position:relative;overflow:hidden}.banner-catalogo::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:var(--amarillo);opacity:.12;border-radius:50%}.banner-catalogo h2{color:#fff;font-size:2rem}/* ============================================================ 05 · TARJETAS Y TIENDA — catálogo/productos.html ------------------------------------------------------------ Todo lo que pinta el listado paginado de productos:tarjeta de gama (portada),tarjeta genérica "feature",chips de gama+buscador,tarjeta de producto individual,sidebar de categorías (+el botón hamburguesa solo-móvil) y paginación. La lógica de filtrado/paginado vive en js/productos-tienda.js. ============================================================ */ .gama-card{border-radius:22px;overflow:hidden;position:relative;height:320px;display:block;text-decoration:none;box-shadow:var(--sombra)}.gama-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.gama-card:hover img{transform:scale(1.07)}.gama-card .capa{position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,32,74,.88),rgba(16,32,74,.05) 60%)}.gama-card .contenido{position:absolute;left:1.5rem;right:1.5rem;bottom:1.3rem;color:#fff}.gama-card .contenido small{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700;color:var(--amarillo)}.gama-card .contenido h3{color:#fff;margin:.2rem 0 0;font-size:1.4rem}.feature{display:flex;gap:1rem;align-items:flex-start}.feature .icono{width:52px;height:52px;border-radius:16px;background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;flex:none;font-weight:800;font-size:1.05rem}.feature h4{font-size:1.05rem;margin-bottom:.25rem}.feature p{color:var(--gris-700);margin-bottom:0;font-size:.94rem}.filtros-productos{background:#fff;border:1px solid #e6e9f0;border-radius:20px;padding:1.4rem;box-shadow:0 12px 30px -20px rgba(16,32,74,.25)}.chip-categoria{border:1.5px solid #dbe1ee;background:#fff;color:var(--azul-oscuro);font-weight:700;font-size:.85rem;padding:.5rem 1.1rem;border-radius:100px;cursor:pointer;transition:.18s ease;white-space:nowrap}.chip-categoria:hover{border-color:var(--azul)}.chip-categoria.activo{background:var(--azul);border-color:var(--azul);color:#fff}.chip-categoria .contador{background:rgba(255,255,255,.25);border-radius:100px;padding:.05rem .5rem;margin-left:.4rem;font-size:.76rem}.chip-categoria:not(.activo) .contador{background:var(--azul-suave);color:var(--azul)}.input-buscar{border:1.5px solid #dbe1ee;border-radius:100px;padding:.72rem 1.3rem .72rem 2.8rem;width:100%;font-weight:500}.input-buscar:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(32,58,117,.12)}.buscador-wrap{position:relative}.buscador-wrap svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--gris-400)}.orden-wrap{display:flex;align-items:center;flex-shrink:0}.select-orden{border:1.5px solid #dbe1ee;border-radius:100px;padding:.4rem 2.1rem .4rem 1rem;font-size:.85rem;font-weight:600;color:var(--azul-oscuro);background-color:#fff;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2308327a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:border-color .15s ease,box-shadow .15s ease}.select-orden:hover{border-color:var(--azul)}.select-orden:focus-visible{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(32,58,117,.12)}.producto-card{border:1px solid #e9ecf3;border-radius:18px;overflow:hidden;background:#fff;transition:.2s ease;height:100%}.producto-card:hover{box-shadow:var(--sombra);transform:translateY(-3px);border-color:#dbe1ee}.producto-card .img-wrap{height:180px;background:var(--gris-100);overflow:hidden}.producto-card .img-wrap img{width:100%;height:100%;object-fit:cover}.producto-card .cuerpo{padding:1.1rem 1.2rem 1.3rem}.producto-card h5{font-size:1rem;margin-bottom:.3rem}.producto-card .refs{font-size:.82rem;color:var(--gris-700)}.sidebar-tienda{position:sticky;top:96px}.sidebar-titulo{text-transform:uppercase;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--gris-700);margin-bottom:.7rem}.lista-sidebar{list-style:none;margin:0 0 1rem;padding:0}.lista-sidebar li{margin-bottom:.15rem}.lista-sidebar a{display:block;padding:.45rem .6rem;border-radius:8px;color:var(--gris-900);text-decoration:none;font-size:.9rem;transition:background .15s ease,color .15s ease}.lista-sidebar a:hover{background:var(--azul-suave);color:var(--azul)}.lista-sidebar a.activo{background:var(--azul);color:#fff;font-weight:700}/* Botón "Categorías" que se convierte en acordeón/hamburguesa en móvil y tablet (ver Bootstrap .collapse en productos.html,target #categoriasColapso). OJO:esto NO afecta al selector de Gamas,solo al de Categorías. */ .btn-hamburguesa-categorias{display:flex;align-items:center;justify-content:space-between;width:100%;background:#fff;border:1.5px solid #dbe1ee;border-radius:12px;padding:.8rem 1.1rem;font-weight:700;font-size:.92rem;color:var(--azul-oscuro);margin-top:1.2rem;cursor:pointer;transition:.18s ease}.btn-hamburguesa-categorias svg{color:var(--azul);flex-shrink:0;transition:transform .2s ease}.btn-hamburguesa-categorias[aria-expanded="true"]{border-color:var(--azul)}.btn-hamburguesa-categorias[aria-expanded="true"] svg{transform:rotate(90deg)}#categoriasColapso{margin-top:.6rem}#listaCategorias{max-height:280px;overflow-y:auto;padding-right:.4rem;scrollbar-width:thin;scrollbar-color:var(--gris-400) transparent}#listaCategorias::-webkit-scrollbar{width:6px}#listaCategorias::-webkit-scrollbar-thumb{background:var(--gris-400);border-radius:100px}#listaCategorias::-webkit-scrollbar-track{background:transparent}.pagination .page-link{border:1.5px solid #dbe1ee;color:var(--azul-oscuro);margin:0 .15rem;border-radius:8px !important}.pagination .page-item.active .page-link{background:var(--azul);border-color:var(--azul);color:#fff}.pagination .page-item.disabled .page-link{color:var(--gris-400);background:#fff}#sinResultados{display:none}/* ============================================================ 06 · FICHA DE PRODUCTO — producto.html ------------------------------------------------------------ Estilos exclusivos de la página de detalle de un producto:imagen de la ficha,iconos de bolsa/caja en la tabla de especificaciones,lista de nombre en otros idiomas (con banderas de flag-icons) y las tarjetas de "productos relacionados". Antes vivían en un