/* ===================================================================== publico/assets/portada.css --------------------------------------------------------------------- SOLO LA PORTADA. Nada de acá se usa en otra página. Se carga con un propio desde index.php y no desde la cabecera: es la única página que lo necesita, y meterlo en el layout haría que cada ficha de producto y cada página institucional descarguen estilos de una pantalla que no van a mostrar. La rejilla de productos y la tarjeta NO están acá: viven en layout.css porque las comparte con el catálogo. EL ACENTO, POR PANTALLA ----------------------- El manual permite un amarillo por vista. En una página que se scrollea, "vista" se lee como pantalla de scroll: hero el botón sólido. Por eso el hero no lleva eyebrow. bandas la barra de la eyebrow. Por eso no llevan botón sólido. cierre el botón sólido. Por eso no lleva eyebrow. Nunca dos amarillos a la misma altura de pantalla. Si agregás una sección, ese es el presupuesto: uno, y elegís cuál. ORDEN DE CARGA: tema.css → layout.css → publico.css → portada.css ===================================================================== */ /* ===================================================================== LÁMINA DE PORTADA ===================================================================== */ .hero{ background-color:var(--bg-elev); border-bottom:1px solid var(--panel-border); padding:var(--s12) 0; overflow:hidden; } .hero-fila{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--s8); align-items:start; } /* Alineado arriba y no al centro: la bajada puede crecer un renglón con el texto, y con centrado vertical la lámina de datos bailaría sin que se entienda por qué. */ .hero-titular{ font-size:clamp(38px, 5.6vw, 62px); line-height:1.02; letter-spacing:0.005em; color:var(--ink); margin-bottom:var(--s3); } .hero-bajada{ font-size:18px; line-height:1.55; color:var(--ink-dim); max-width:52ch; /* medida de línea del manual: 55–75 caracteres */ margin:0 0 var(--s4); } .hero-acciones{ display:flex; gap:12px; flex-wrap:wrap; } .hero-nota{ margin-top:var(--s3); } /* ---------- La lámina de datos ---------- Es la prueba de lo que dice la bajada: números que salen del catálogo, no adjetivos. */ .hero-lamina{ margin-top:var(--s1); } .hero-datos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s2); margin:0; } .hero-datos dt{ font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; } .hero-datos dd{ margin:0; font-family:var(--font-display); font-size:34px; font-weight:600; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; /* que no bailen al cambiar */ } .hero-dato-texto{ font-size:22px !important; } /* ===================================================================== BANDAS ===================================================================== */ .banda{ padding:var(--s12) 0; } /* Las superficies elevadas tapan la cuadrícula del , así que se la vuelven a poner encima. Si no, la portada alterna bandas con textura y bandas lisas, y la cuadrícula se lee como un accidente en vez de como el papel sobre el que está todo. */ .banda-alt{ background-color:var(--bg-elev); background-image: repeating-linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, var(--grid-minor) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, var(--grid-minor) 0 1px, transparent 1px 24px); border-block:1px solid var(--panel-border); } .banda-corta{ padding:var(--s6) 0; } .banda-titulo{ font-size:clamp(24px, 3vw, 34px); color:var(--ink); margin-bottom:var(--s4); } .banda-cabecera{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; } .banda-cabecera .banda-titulo{ margin-bottom:var(--s4); } .banda-cabecera-acciones{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } /* ===================================================================== CATEGORÍAS Rejilla y no carrusel: un carrusel esconde detrás de una flecha la mitad de lo que se vende, y en móvil esa flecha casi no se toca. ===================================================================== */ /* Tarjetas grandes: la foto de categoría es lo primero que alguien mira al entrar, y a 260px una bobina de filamento se lee como una mancha de color. A 340 se ve el producto. */ .cat-rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:var(--s3); } .cat{ display:block; border:1px solid var(--panel-border); border-radius:var(--radius-md); background:var(--bg-elev); overflow:hidden; transition:border-color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); } .cat-foto{ aspect-ratio:3/2; overflow:hidden; background:var(--bg-elev-2); } .cat-foto img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-panel) var(--ease-out); } .cat-pie{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:18px 20px; border-top:1px solid var(--panel-border); } .cat-nombre{ font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink); } /* La cuenta en cifras tabulares para que la columna no baile entre una categoría de 4 productos y otra de 41. */ .cat-cuenta{ font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--ink-faint); font-variant-numeric:tabular-nums; } @media (hover:hover) and (pointer:fine){ .cat:hover{ border-color:var(--line); transform:translateY(-2px); } /* El zoom es leve y lento: la foto es el producto, no un efecto. */ .cat:hover .cat-foto img{ transform:scale(1.04); } } /* ===================================================================== CARRUSEL DE PRODUCTOS En la portada no hay columna de filtros, así que la rejilla de cuatro daba tarjetas de 275px: casi el doble que en el catálogo, y ocho de esas ocupaban dos pantallas enteras de scroll. Carrusel y no rejilla chica: la portada tiene que dejar ver que hay MÁS. Ocho tarjetas quietas dicen "esto es todo"; ocho que se desplazan dicen "seguí". Sin librería. Es overflow-x con scroll-snap: el navegador ya sabe hacer esto, y en móvil el gesto del dedo funciona solo. ===================================================================== */ .carrusel{ position:relative; } .carrusel-pista{ display:grid; grid-auto-flow:column; grid-auto-columns:236px; gap:var(--s2); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; /* Aire para que la tarjeta enfocada con teclado no quede cortada contra el borde del contenedor. */ padding:4px 4px var(--s2); scrollbar-width:none; } .carrusel-pista::-webkit-scrollbar{ display:none; } .carrusel-pista > *{ scroll-snap-align:start; } .carrusel-mandos{ display:flex; gap:8px; } .carrusel-flecha{ width:44px; height:44px; flex:none; padding:0; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-elev); color:var(--ink); cursor:pointer; transition:border-color var(--dur-ui) ease, opacity var(--dur-ui) ease; } .carrusel-flecha svg{ width:18px; height:18px; } .carrusel-flecha:active{ transform:scale(0.97); } /* Deshabilitada en el extremo: una flecha que no hace nada es peor que una flecha que no está, porque el clic sin respuesta se lee como que la página se colgó. */ .carrusel-flecha[disabled]{ opacity:.35; cursor:default; } @media (hover:hover) and (pointer:fine){ .carrusel-flecha:not([disabled]):hover{ border-color:var(--ink); } } /* ===================================================================== PILARES Acá sí van las esquinas de registro: son tres piezas de sección, no una rejilla de veinticuatro. ===================================================================== */ .pilares{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s4); } .pilar{ padding:var(--s4) var(--s3) var(--s3); } .pilar-titulo{ font-size:17px; color:var(--ink); margin-bottom:12px; } .pilar p{ margin:0; font-size:15px; color:var(--ink-dim); line-height:1.55; } /* Las tres etiquetas de lámina son amarillas y están a la misma altura de pantalla. Se aceptan como UNA marca porque numeran una secuencia —01, 02, 03— y no compiten entre sí por la atención: se leen como una sola cosa, igual que una cota. Es la excepción y no se repite. */ /* ===================================================================== MARCAS Una marca ajena no se recolorea para que combine con el tema. Lo único que se controla acá es el tamaño y el aire alrededor. ===================================================================== */ .marcas-tira{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s6); } .marca-celda{ display:flex; align-items:center; justify-content:center; height:44px; min-width:88px; transition:opacity var(--dur-ui) ease; opacity:.75; } .marca-celda img{ max-height:100%; max-width:150px; object-fit:contain; } @media (hover:hover) and (pointer:fine){ .marca-celda:hover{ opacity:1; } } /* ===================================================================== MURO DE CLIENTES Rótulo a la izquierda, logos a la derecha. El rótulo va en una superficie distinta para que la fila entera se lea como una sola pieza y no como una banda más de logos sueltos. ===================================================================== */ .clientes-banda{ padding:var(--s8) 0; } .clientes-fila{ display:grid; grid-template-columns:260px 1fr; gap:var(--s6); align-items:center; } .clientes-rotulo{ border-left:2px solid var(--accent); padding-left:var(--s3); } .clientes-titulo{ font-size:clamp(20px, 2.4vw, 26px); color:var(--ink); } .clientes-rotulo .eyebrow{ margin-bottom:8px; } /* La eyebrow ya trae su barra amarilla; acá el borde izquierdo cumple esa función para el bloque entero, así que se le quita la suya. */ .clientes-rotulo .eyebrow::before{ display:none; } .clientes-muro{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s8); } .cliente-celda{ display:flex; align-items:center; justify-content:center; height:56px; min-width:110px; } /* Sin filtro de escala de grises: recolorear la marca de otro para que combine con la nuestra es justo lo que el manual prohíbe. Los archivos entran ya en monocromo, PNG con fondo transparente. */ .cliente-celda img{ max-height:100%; max-width:190px; object-fit:contain; } /* ===================================================================== CIERRE ===================================================================== */ .cierre{ border-top:1px solid var(--panel-border); padding:var(--s8) 0; } .cierre-fila{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; } .cierre-titulo{ font-size:clamp(21px, 2.6vw, 28px); color:var(--ink); margin-bottom:10px; } .cierre-bajada{ margin:0; font-size:16px; color:var(--ink-dim); max-width:48ch; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:900px){ .clientes-fila{ grid-template-columns:1fr; gap:var(--s4); } .hero{ padding:var(--s8) 0; } .hero-fila{ grid-template-columns:1fr; gap:var(--s6); } /* La lámina de datos pasa a cuatro columnas apretadas en vez de apilarse: son cuatro números cortos y así no empuja el resto de la página media pantalla hacia abajo. */ .hero-datos{ grid-template-columns:repeat(4,1fr); } .hero-datos dd{ font-size:26px; } .hero-dato-texto{ font-size:17px !important; } .banda{ padding:var(--s8) 0; } } @media (max-width:560px){ .hero-datos{ grid-template-columns:1fr 1fr; } .carrusel-pista{ grid-auto-columns:64vw; } .carrusel-mandos{ display:none; } /* en móvil manda el dedo */ .hero-acciones .btn-sistema{ flex:1; } .cat-rejilla{ grid-template-columns:1fr; } .banda-cabecera .btn-sistema{ width:100%; } } /* ===================================================================== MOVIMIENTO REDUCIDO Se conservan opacidad y color; se va todo desplazamiento y escalado. ===================================================================== */ @media (prefers-reduced-motion: reduce){ .cat:hover{ transform:none; } .carrusel-flecha:active{ transform:none; } .cat:hover .cat-foto img{ transform:none; } .cat-foto img{ transition:none; } }