/* ============================================================ SITIO PUBLICO — FERRECOMAS Concepto: "sala de maquinas". La web hereda el lenguaje de la vitrina GC -- escenario oscuro, velo, barras de generador de caracteres, Poppins 800 con tracking negativo -- y le suma una reticula tecnica de plano P&ID como textura de marca. Los iconos son simbolos de instrumentacion, no formas decorativas. Requiere assets/css/tokens.css cargado ANTES. Los cuatro colores de marca NO se declaran aqui: salen de la tabla `paleta` y los escribe index.php en un bloque inline, igual que hace la vitrina. Todo lo que esta hoja define son DERIVADOS de esos cuatro, con color-mix, para que cambiar la paleta en el panel mueva el sitio entero sin tocar una linea de CSS. ============================================================ */ :root{ /* ---------- derivados, NO colores nuevos ---------- */ --escenario: color-mix(in srgb, var(--secundario) 55%, #000); --escenario-2: color-mix(in srgb, var(--secundario) 78%, #000); /* El celeste no pasa 4,5:1 sobre el azul oscuro (da 4,26). Para texto chico sobre fondo oscuro se aclara; el celeste puro queda para lineas, divisores y barra de avance, que es su rol en la TV. */ /* EL ACENTO ACLARADO, y ahora con UN solo trabajo: el kicker cuando hay una FOTOGRAFIA debajo. Nacio porque el acento anterior --- #1C9BD8 --- no llegaba al minimo ni sobre el azul plano, asi que se usaba en todas partes. Con el acento oficial eso se acabo: sobre color plano da 8,51 y el aclarado ahi solo lava el color de la marca sin ganar nada. Sobre foto es otra cosa. El velo no tapa del todo, y contra el peor caso --- una foto blanca --- el kicker es el texto que PRIMERO deja de leerse, antes que el titular: velo titular kicker puro kicker aclarado 0,80 9,51 4,59 AA 6,35 AA 0,75 7,94 3,83 no 5,30 AA 0,70 6,64 3,20 no 4,43 no O sea que el aclarado compra margen donde de verdad hace falta. Sin el, `--cab-velo` no puede bajar de 0,80 sin sacar el kicker del minimo. */ --acento-txt: color-mix(in srgb, var(--acento) 55%, #fff); --acento-velo: color-mix(in srgb, var(--acento) 12%, transparent); --primario-hover: color-mix(in srgb, var(--primario) 82%, #000); --tinte: color-mix(in srgb, var(--acento) 9%, #fff); --linea: color-mix(in srgb, var(--secundario) 14%, #fff); /* 68% y no 62%: con 62 el gris daba 4,47:1 sobre blanco y se quedaba a tres centesimas del minimo AA. Lo usa el texto de apoyo y las fichas de producto, asi que no es un detalle. */ --gris: color-mix(in srgb, var(--texto) 68%, #fff); /* El ritmo del banner es de la WEB y no se hereda de la TV. `video_slides.segundos` esta calibrado para leer de pie a cinco metros: 6 a 8 segundos. Aqui se lee a cuarenta centimetros y con tiempo, y a ese ritmo la frase se va antes de terminarla. */ --dur: 9s; /* Dos radios y no veinte sueltos. `--radio` es de superficie --- tarjetas, paneles, la tira --- y `--radio-chico` de control --- botones, chips, pastillas ---. Con un solo valor los botones se ven demasiado blandos dentro de una tarjeta del mismo radio: lo que hace que un control se lea como control es ser MAS cerrado que la caja que lo contiene. */ --radio: 10px; --radio-chico: 6px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--tipo-texto); color:var(--texto); background:var(--blanco); line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* `ol` TAMBIEN. Esto decia solo `ul`, y los tres pilares de Nosotros son un
    --- lo son de verdad: es una lista ordenada y su numero significa algo ---. Con el marcador vivo el navegador dibujaba SU numeracion, en su tipografia y, como el reset global deja el `padding` en cero, por FUERA de la tarjeta: cada pilar salia con un «1.» suelto flotando a la izquierda, ademas del numero en circulo que dibuja `.pilar-num`. Dos numeraciones para la misma lista, una de ellas descuadrada. */ ul,ol{list-style:none} h1,h2,h3{font-family:var(--tipo-titulo);font-weight:800;letter-spacing:-.02em;line-height:1.04;color:var(--secundario)} svg{flex:none} .contenedor{max-width:1240px;margin:0 auto;padding:0 28px} section{padding:96px 0} /* ---------- retícula técnica: la textura de marca ---------- Reemplaza a las manchas de gradiente. Es un plano, no una acuarela. */ .reticula{ position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, var(--acento-velo) 1px, transparent 1px), linear-gradient(to bottom, var(--acento-velo) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 78%); } /* ---------- kicker: igual que .aviso .kicker de la vitrina ---------- */ .kicker{ font-family:var(--tipo-texto); font-weight:600; font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--primario); display:flex; align-items:center; gap:11px; margin-bottom:14px; } /* Sin el guion delante. Estaba en TODAS las cejas de la pagina y no decia nada: era una linea decorativa repetida ocho veces. */ .kicker.claro{color:var(--acento)} /* Solo con foto debajo: sobre el color plano del cierre el acento puro da 8,51 y aclararlo seria lavar la marca por nada. */ .pagina-cabecera.con-foto .kicker.claro{color:var(--acento-txt)} /* ---------- botones ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--tipo-titulo); font-weight:700; font-size:15.5px; letter-spacing:-.01em; padding:15px 26px; border:2px solid transparent; cursor:pointer; border-radius:var(--radio-chico); transition:background .18s ease, border-color .18s ease, color .18s ease; } .btn svg{width:17px;height:17px} .btn-solido{background:var(--primario);color:#fff} .btn-solido:hover{background:var(--primario-hover)} .btn-linea{border-color:rgba(255,255,255,.42);color:#fff} .btn-linea:hover{background:rgba(255,255,255,.12);border-color:#fff} .btn-linea-osc{border-color:var(--secundario);color:var(--secundario)} .btn-linea-osc:hover{background:var(--secundario);color:#fff} :where(a,button):focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:var(--radio-chico)} .saltar{position:absolute;left:-9999px;background:var(--secundario);color:#fff;padding:14px 22px;z-index:300} .saltar:focus{left:0;top:0} /* Existe en panel.css desde el principio pero faltaba aqui: una etiqueta que solo leen los lectores de pantalla. Sin ella, el campo de busqueda se anunciaba como «cuadro de edicion» a secas. */ .oculto-visual{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ============================================================ HEADER — PRUEBA: degradado de blanco a azul Blanco en el sector del logotipo y azul en el extremo donde viven el teléfono y «Cotizar». El degradado no recorre toda la barra: se mantiene blanco hasta el 78% y cae al azul en el último 22%, que es justo el ancho de esos dos elementos. Reemplaza a la barra oscura que era «continua con el escenario del hero». Se pierde esa continuidad —ahora hay un corte claro sobre la franja azul— y se gana que la cabecera deje de ser un bloque pesado antes de que la página empiece. El logotipo en uso (`logo-05b753c92438.svg`) es de dos azules y no lleva blanco, así que sobre el tramo claro se lee entero. El `logo.svg` de relleno del repositorio SÍ tiene partes en #fff y sobre blanco perdería medio dibujo --- si alguna vez se instala una copia limpia, el logotipo de verdad tiene que entrar antes de mirar la cabecera y sacar conclusiones. ============================================================ */ header.sitio{ position:sticky; top:0; z-index:100; background:linear-gradient(90deg, #fff 0, #fff 78%, var(--primario) 100%); border-bottom:1px solid var(--linea); } .barra{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1240px;margin:0 auto;padding:14px 28px} .marca{display:flex;align-items:center;gap:13px} /* El logotipo se sube COMPLETO (regla del CLAUDE.md): caja con alto fijo y tope de ancho, object-fit contain. Nunca alto auto. */ .marca .logo{height:42px;max-width:190px;width:auto;object-fit:contain;object-position:left center} .marca .nombre{font-family:var(--tipo-titulo);font-weight:800;font-size:20px;color:var(--secundario);letter-spacing:-.015em;line-height:1.1} .marca .nombre b{color:var(--acento)} .marca .tag{font-family:var(--tipo-texto);font-size:11.5px;color:var(--gris);letter-spacing:.02em;display:block} nav.principal{display:flex;gap:32px} nav.principal a{ font-family:var(--tipo-titulo);font-weight:600;font-size:15px;color:var(--gris); padding:8px 0;position:relative } nav.principal a:hover,nav.principal a[aria-current]{color:var(--secundario)} nav.principal a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--primario);transition:width .2s ease} nav.principal a:hover::after,nav.principal a[aria-current]::after{width:100%} .acciones{display:flex;align-items:center;gap:16px} /* El telefono cae dentro de la rampa, donde el fondo pasa de blanco a azul: ningun color de texto pasa contraste en los dos extremos. Se le pone su propia pastilla clara para que el fondo bajo el sea uno solo, decidido aqui y no por donde quedo. */ .tel-cabecera{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:var(--secundario); background:rgba(255,255,255,.92);padding:8px 14px;border-radius:var(--radio-chico)} .tel-cabecera svg{width:16px;height:16px;stroke:var(--primario)} /* «Cotizar» queda sobre el azul del extremo: invertido. Azul sobre azul no se distinguiria del fondo. */ header.sitio .btn-solido{background:#fff;color:var(--primario)} header.sitio .btn-solido:hover{background:var(--tinte)} .hamburguesa{display:none;background:none;border:1px solid var(--linea);border-radius:var(--radio-chico);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center} .hamburguesa svg{width:22px;height:22px;stroke:var(--secundario)} /* ============================================================ HERO — el escenario. Ya NO es «la misma anatomía que la vitrina». Lo fue: foto a sangre, velo sobre toda la imagen y barra GC de tres bloques, calcado de la TV. Se cambió a propósito. En la TV el GC existe porque no hay cabecera; aquí hay una doce píxeles más arriba con el mismo logotipo y el mismo teléfono, y el GC los repetía. Lo que queda de la vitrina es lo que sí tiene sentido compartir: el escenario oscuro, el celeste de la barra de avance y la tipografía. No la anatomía. ============================================================ */ /* padding:0 explícito: el escenario es un
    y el padding general de sección le metía 96px de aire arriba del hero. */ .escenario{ position:relative; padding:0; overflow:hidden; background:var(--escenario); } /* Las láminas se apilan con `grid-area:1/1`, no con posicionamiento absoluto. Es la misma decisión que ya tomó la otra instancia del Kit, y por el mismo motivo: con todas absolutas la caja necesita un alto FIJO, y entonces un titular de tres líneas se desborda por arriba y la cabecera se lo come. Apiladas en grid, la caja la mide la lámina más alta; el `min-height` solo pone el piso. `visibility:hidden` en vez de `display:none` a propósito: la lámina apagada tiene que seguir midiendo, o la caja daría saltos de alto al cambiar de una a otra. Y saca del orden de tabulación los botones que no se ven. */ /* ============================================================ LA FRANJA 4:1, que es el 44% del alto de una 16:9. La franja no es una decision estetica: es la que permite que el MISMO archivo sirva para la TV a pantalla completa y para el banner. La mecanica, que importa mas que el aspecto: · La foto va a sangre de SU COLUMNA, la derecha. No cruza a la del texto. Contenida en su columna, un 16:9 pierde el 18% de su alto; a sangre de todo el ancho perderia el 56% --- mas de la mitad, y con ella la cabeza de cualquier producto. · El velo cubre la columna del texto entera y se apaga ENCIMA del borde izquierdo de la foto. Monta sobre ella, no termina donde ella empieza: si terminaran en el mismo punto habria una linea recta y se verian dos cajas pegadas en vez de una pieza. · El texto va siempre sobre la zona solida. El contraste lo pone la hoja y no la fotografia, igual que antes. Y NO hay barra GC. En la TV el GC existe porque no hay cabecera; aqui hay una doce pixeles mas arriba con el mismo logotipo y el mismo telefono, asi que el GC los repetia. Con el se fueron `velo_modo`, `velo_fuerza` y `banner_variante`: regulaban un velo que ya no cubre la foto y un alto que ahora manda la proporcion. ============================================================ */ :root{ /* Donde empieza la foto, hasta donde el velo es solido, y donde termina de apagarse. Los tres viven juntos porque describen una sola cosa: cuanto se monta el oscuro sobre la imagen. La primera version tenia la foto en 46% y el velo solido hasta 48%: el degradado arrancaba justo donde nacia la imagen, asi que el oscuro nunca llegaba a cubrirla y no se leia como un velo sobre la foto, sino como dos zonas pegadas. Ahora el solido se mete 16 puntos DENTRO de la foto y recien ahi empieza a desvanecerse. La rampa (56 -> 84) es el ultimo 33% del recorrido del velo, que es lo pedido. De paso la columna de la foto crece a 60%, y con eso un 16:9 pierde el 26% del alto en vez del 18%... pero gana en que la imagen se ve. */ --col-foto: 40%; --velo-solido: 56%; --velo-hasta: 84%; } .laminas{ position:relative; display:grid; /* `width:100%` NO es redundante, y esto costó encontrarlo. `aspect-ratio` y `min-height` se pelean: al forzar el alto a 300px, la proporción 4:1 recalcula el ANCHO a 1200px aunque el hero mida 985. La lámina se ensancha, y con ella todo lo que va anclado a sus bordes --- panel de la foto, imagen y pastilla de precio --- que se salía 215px fuera de la pantalla. Pasaba en cualquier ventana por debajo de 1200px, o sea en casi todos los notebooks. Fijando el ancho, la proporción solo puede opinar sobre el alto. */ width:100%; /* 3,5:1 --- el 51% del alto de una 16:9 --- y no 4:1. Es donde deja de mandar el alto y empieza a mandar el ancho de la columna: mas baja, la foto se achica; mas alta, no gana nada porque el ancho la topa igual. Y con archivos 16:9 la caja visible queda en 1,78, que es exactamente la proporcion del archivo. */ aspect-ratio:3.5 / 1; /* El piso evita que en una ventana angosta la franja se convierta en una linea de 90px donde no entra ni el titular. */ min-height:300px; } .lamina{ grid-area:1 / 1; position:relative; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s; } .lamina.activa{opacity:1;visibility:visible} /* ---------- la columna de la foto ---------- */ .lam-foto{ position:absolute; inset:0 0 0 var(--col-foto); overflow:hidden; background:var(--escenario-2); } .foto{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .foto-1{background:linear-gradient(118deg,#06263f 0%,var(--primario) 58%,var(--acento) 132%)} /* ---------- la columna cuando la lámina es de producto ---------- MISMA estructura, otro relleno, y la diferencia está medida: El aviso trae foto de ambiente. `cover` la recorta y no pasa nada, porque una foto de patio de acopio sigue siendo una foto de patio de acopio recortada. El producto llega recortado sobre blanco desde la ficha del proveedor, y con proporciones que no son 16:9 — la fosa séptica es de 900×729, casi cuadrada. `cover` en una columna de 2,16:1 le come el 43% del alto: se ve una mancha azul gigante sin principio ni fin, y deja de reconocerse como un producto. Se probó, se miró y por eso está esta excepción. `contain` sobre panel claro, y `multiply` para que el blanco del recorte se funda con el panel en vez de dibujar su rectángulo. Sin `drop-shadow`: la sombra rodearía el rectángulo del archivo, no la pieza. */ /* El relleno del panel NO es aire decorativo: es lo que hace que la pieza se centre en lo que SE VE y no en la caja entera. El panel va de `--col-foto` (40%) al borde derecho, pero su franja izquierda queda bajo el velo sólido —hasta `--velo-solido`, 56%— y su base bajo la tira de categorías. Centrando en la caja completa, el producto se mete por igual debajo del azul y debajo de la tira: se ve un estanque cortado por abajo y comido por la izquierda. Los dos paddings se calculan de las mismas variables, así que mover el velo o el solape reencuadra la foto solo. El porcentaje resuelve contra el ancho del bloque contenedor, que es la LÁMINA completa y no el panel --- por eso 16% son exactamente los 16 puntos que el velo se mete dentro de la foto. */ .lamina.es-producto .lam-foto{ background:var(--tinte); padding:10px 18px calc(var(--solape) + 6px) calc(var(--velo-solido) - var(--col-foto)); } .lamina.es-producto .foto{ object-fit:contain; /* Pegada a la DERECHA y no centrada. Manda el alto de la franja, así que sobra ancho; centrada, ese sobrante se parte en dos huecos y la pieza queda flotando en medio de nada. Contra el borde derecho el sobrante se junta en uno solo, del lado de la rampa del velo, donde se lee como la continuación del degradado y no como un hueco. */ object-position:right center; mix-blend-mode:multiply; } /* El velo monta sobre el panel igual que sobre una fotografía. Lo tuve cortando limpio en el borde, con el argumento de que un panel claro es una superficie deliberada y difuminarse encima la ensucia. Era falso, y se ve: el corte recto deja la imagen sobrepuesta al azul en vez del azul sobrepuesto a la imagen, que es justo al revés de lo que hace la mecánica. Un borde recto no es una decisión, es una costura. */ /* ---------- el velo ---------- Solido hasta `--velo-solido` y apagandose hasta `--velo-hasta`. Es un solo degradado y no dos capas: la rampa tiene que ser continua o se ve el escalon. */ .velo{ position:absolute; inset:0; z-index:2; pointer-events:none; /* Cinco paradas y no tres. Un degradado de opaco a transparente en dos pasos se apaga demasiado rapido por el medio y deja ver el canto: se lee un borde en vez de una disolucion. Las paradas intermedias curvan la caida (85 · 62 · 34 · 14) y es la diferencia entre «hay un degradado» y «no se ve donde termina». */ background:linear-gradient(90deg, var(--secundario) 0, var(--secundario) var(--velo-solido), color-mix(in srgb, var(--secundario) 85%, transparent) calc(var(--velo-solido) + (var(--velo-hasta) - var(--velo-solido)) * .22), color-mix(in srgb, var(--secundario) 62%, transparent) calc(var(--velo-solido) + (var(--velo-hasta) - var(--velo-solido)) * .44), color-mix(in srgb, var(--secundario) 34%, transparent) calc(var(--velo-solido) + (var(--velo-hasta) - var(--velo-solido)) * .66), color-mix(in srgb, var(--secundario) 14%, transparent) calc(var(--velo-solido) + (var(--velo-hasta) - var(--velo-solido)) * .84), transparent var(--velo-hasta)); } /* ---------- el texto ---------- */ /* ABSOLUTO, igual que la columna de la foto, y esto no es un detalle de maquetación: en flujo, el texto empujaba la lámina 26px por debajo de la franja. `aspect-ratio` es una medida PREFERIDA, no un límite: si el contenido no cabe, la caja crece. Y al crecer, la columna de la foto —que va pegada a la lámina, no al hero— se pasaba de largo y arrastraba consigo la pastilla de precio, que terminaba detrás de la tira de categorías. Sacando el texto del flujo, el alto lo manda la proporción y solo la proporción. Lo que no quepa se recorta, que es lo correcto en una franja: antes de desbordar, se corta. */ .lamina-txt{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; /* Alinea el titular con el resto de la pagina en pantallas anchas y se rinde al minimo en las angostas: la misma cuenta que hace `.contenedor` con su max-width de 1240. El padding de abajo lleva el solape sumado: la tira de categorias pisa el borde inferior del banner, y sin esto el texto se centra en el alto completo y los botones quedan cortados por la mitad debajo de ella. Medido: la botonera terminaba 2px dentro. */ padding:34px 28px calc(34px + var(--solape)) max(28px, calc((100vw - 1240px) / 2 + 28px)); } .lamina-txt > div{max-width:min(48%, 560px)} /* Dos líneas de titular y nada más. Con el texto fuera del flujo, lo que sobra ya no empuja: se recorta en silencio. Un titular de tres líneas en una franja de 4:1 se comía la bajada y los botones. */ .lamina-txt :is(h1,h2){ color:#fff; font-size:clamp(26px,3.4vw,44px); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .lamina-txt :is(h1,h2) em{font-style:normal;color:var(--acento)} /* `.bajada` y no `p` a secas: el kicker tambien es un parrafo, y un selector con etiqueta le ganaba en especificidad a `.kicker`. */ .lamina-txt .bajada{ color:rgba(255,255,255,.88); font-size:15.5px; margin:10px 0 20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .botonera{display:flex;gap:12px;flex-wrap:wrap} .escenario .btn{padding:12px 22px;font-size:14.5px} /* ---------- pastilla de precio ---------- EN LA FILA DE LOS BOTONES, no sobre la foto. Sobre la imagen competia con el producto y habia que esquivar los sellos que los proveedores estampan en las esquinas --- dos veces la movimos por eso. Aqui ocupa alto que ya estaba gastado por la botonera, y cae al lado del boton de consultar, que es donde se decide. `position:static` explicito porque hereda del `.precio` de la grilla, que si es absoluto dentro de su tarjeta. */ .precio.hero{ position:static; padding:10px 18px 12px; text-align:left; display:flex; flex-direction:column; justify-content:center; } .precio.hero .cifra{font-size:clamp(20px,1.9vw,26px)} .precio.hero .unidad{font-size:11.5px;margin-top:2px} /* ---------- barra de avance ---------- ARRIBA, pegada al canto de la cabecera, y no abajo. Abajo compartia borde con la tira de categorias --- una linea celeste de 3px justo encima de una tarjeta blanca --- y parecia el subrayado de la tira en vez del reloj del carrusel. Arriba nace donde nace el banner y no toca nada mas. */ .avance{position:absolute;left:0;top:0;height:3px;background:var(--acento);width:0;z-index:6} .avance.corre{animation:avanzar var(--dur,7s) linear forwards} @keyframes avanzar{from{width:0}to{width:100%}} /* ---------- flechas ---------- A los costados y verticalmente centradas. Agrupadas abajo a la derecha caian justo sobre la foto y sobre donde va a pisar la botonera de categorias. */ .ctrl{ position:absolute; z-index:7; top:50%; transform:translateY(-50%); width:40px; height:40px; border:1px solid rgba(255,255,255,.42); background:rgba(0,0,0,.34); color:#fff; cursor:pointer; border-radius:var(--radio-chico); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); transition:background .18s ease; } .ctrl:hover{background:rgba(255,255,255,.22)} .ctrl svg{width:16px;height:16px} .ctrl-izq{left:14px} .ctrl-der{right:14px} /* La pausa no compite con las flechas: mas chica y en una esquina. Un carrusel que rota solo tiene que poder pararse, pero el boton no es lo que la gente viene a pulsar. Abajo a la IZQUIERDA, sobre la zona solida del velo. A la derecha caia justo encima de la pastilla de precio --- dos objetos peleandose la misma esquina, y perdia el que importa. */ .ctrl-pausa{ top:auto; bottom:14px; left:14px; right:auto; transform:none; width:30px; height:30px; opacity:.72; } .ctrl-pausa:hover{opacity:1} .ctrl-pausa svg{width:13px;height:13px} /* ---------- apilada ---------- 4:1 en un telefono son 94px: no entra ni el titular. Se apila, y la foto recupera su 16:9 nativo --- sin recorte ninguno, que es mejor de lo que se ve en el escritorio. */ @media (max-width:820px){ .laminas{aspect-ratio:auto;min-height:0} .lamina{display:grid;grid-template-rows:auto auto} .lam-foto{position:relative;inset:auto;aspect-ratio:16/9} /* Apilado no hay velo que esquivar ni tira que pise: el panel de producto recupera un relleno parejo y la pieza vuelve al centro. Sin esto arrastraba los 16% de sangría izquierda que existen solo para dejarle sitio al degradado. */ .lamina.es-producto .lam-foto{padding:16px} .lamina.es-producto .foto{object-position:center} .velo{display:none} /* De vuelta AL FLUJO. En escritorio el texto va absoluto para que el alto lo mande la proporción; apilado hace falta lo contrario —que el texto ocupe su sitio debajo de la foto—. Absoluto aquí, con `inset:0` y fondo sólido, tapaba la fotografía entera. */ .lamina-txt{ position:relative; inset:auto; background:var(--secundario); padding:30px 24px 34px; height:auto; } .lamina-txt > div{max-width:none} .lamina-txt :is(h1,h2){font-size:clamp(24px,6vw,32px)} .lamina-txt .bajada{-webkit-line-clamp:3} .ctrl-izq{left:10px;top:28%} .ctrl-der{right:10px;top:28%} .ctrl-pausa{display:none} } /* ============================================================ DEL CHOAPA, PARA EL CHOAPA Titular ancho y el párrafo en dos columnas. Las columnas no son decorativas: a 1240px de ancho una sola columna de texto da líneas de 150 caracteres, y el ojo pierde el renglón al volver. Partido en dos quedan en 60-70, que es donde se lee sin esfuerzo. `columns` y no un grid de dos cajas, porque el texto es UNO solo —`inicio.nosotros_texto`— y el navegador lo reparte. Con un grid habría que decidir dónde cortarlo, y eso lo tendría que hacer Carolina cada vez que reescribe un párrafo. ============================================================ */ /* Ceja y titular centrados; el párrafo NO. El texto largo se sigue leyendo alineado a la izquierda —centrado, el ojo pierde el arranque de cada renglón—, y en dos columnas sería peor. */ .choapa .kicker{justify-content:center} .choapa h2{ font-size:clamp(30px,4vw,46px); max-width:15ch; margin-inline:auto; text-align:center; } /* El botón también al centro. Alineado a la izquierda quedaba colgado de la primera columna, con la ceja y el titular centrados encima: el bloque se leía torcido. */ .choapa .btn{display:flex;width:max-content;margin-inline:auto} .choapa-cols{ margin:26px auto 30px; max-width:66ch; color:var(--gris); font-size:16.5px; line-height:1.65; } /* Los parrafos no llevan margen arriba: en dos columnas, el primero de la segunda columna arrancaria mas abajo que el de la primera. */ .choapa-cols p{margin:0 0 1em} .choapa-cols p:last-child{margin-bottom:0} /* La banda del valle: ancha y baja, como el paisaje que retrata. Un 16:9 aqui la haria tan alta como la seccion entera de texto. */ .choapa-foto{ width:100%; margin-top:42px; border-radius:var(--radio); aspect-ratio:2.6/1; object-fit:cover; object-position:center; } @media (max-width:640px){ .choapa-foto{aspect-ratio:16/9;margin-top:30px} } /* ============================================================ TIRA DE CATEGORÍAS RÁPIDAS Pisa el borde de abajo del banner: mitad sobre la franja, mitad sobre lo que viene. No es decoración —— estar a caballo entre dos secciones es lo que la hace leerse como un atajo y no como una sección más. El solape es UNA variable y no un número suelto, porque lo usan tres cosas que tienen que moverse juntas: la tira sube ese tanto, la sección siguiente reserva ese tanto de aire arriba, y todo lo que el banner ancla abajo —precio, pausa, barra de avance— se levanta por encima para no quedar debajo de la tira. ============================================================ */ :root{ --solape: 46px; } .tira-cats{ position:relative; z-index:20; margin-top:calc(var(--solape) * -1); padding:0 28px; } .tira-cats-caja{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border:1px solid var(--linea); border-radius:var(--radio); box-shadow:0 18px 44px rgba(0,47,85,.16); overflow:hidden; } .tira-cats .cat{ display:flex; flex-direction:column; align-items:center; gap:11px; padding:20px 14px 18px; text-align:center; border-right:1px solid var(--linea); transition:background .18s ease, color .18s ease; } .tira-cats .cat:last-child{border-right:none} .tira-cats .cat:hover{background:var(--tinte)} .tira-cats .cat b{ font-family:var(--tipo-titulo); font-weight:700; font-size:14px; color:var(--secundario); letter-spacing:-.01em; line-height:1.2; } /* Los simbolos P&ID son trazo; los iconos propios son archivos macizos. Conviven mientras queden categorias sin archivo. */ .tira-cats svg.cat-ico{ width:34px; height:34px; stroke:var(--primario); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; } /* ALTO fijo y ancho libre, no una caja cuadrada. Los cinco archivos van de 0,69 a 1,35 de proporcion --- sanitarios es alto y angosto, bombas es ancho y bajo ---. Metidos en un cuadrado con `contain`, cada uno toca un borde distinto y la fila se ve de tamaños desparejos. Compartiendo la linea de base se leen como un juego. */ .tira-cats img.cat-ico{ height:46px; width:auto; max-width:74px; } .tira-cats .cat-ico .macizo{fill:var(--primario);stroke:none} .tira-cats .cat:hover svg.cat-ico{stroke:var(--secundario)} /* Un no se recolorea desde fuera: se le sube el contraste. */ .tira-cats .cat:hover img.cat-ico{filter:brightness(.82)} /* Postes y suelo más gruesos que el alambre: es lo que distingue un cerco de una grilla. Aplica a cualquier tamaño del símbolo. */ .cat-ico .poste,.marcador .poste,.cred svg .poste{stroke-width:2.2} /* Lo que el banner ancla abajo se levanta por encima del solape. Sin esto la pastilla de precio y la barra de avance quedan debajo de la tira, que es opaca. */ /* La pastilla de precio ya no esta anclada abajo --- vive en la fila de botones --- y la barra de avance se fue arriba. Queda solo la pausa esquivando la tira. */ .escenario .ctrl-pausa{ bottom:var(--solape); } /* La sección que viene después reserva el aire que la tira le come. `+ *` y no una clase: la tira no sabe qué va debajo, y en la portada eso cambia según qué textos tenga escritos Carolina. */ .tira-cats + *{ padding-top:calc(var(--solape) + 56px); } @media (max-width:900px){ .tira-cats-caja{grid-template-columns:repeat(3,1fr)} .tira-cats .cat:nth-child(3){border-right:none} .tira-cats .cat:nth-child(-n+3){border-bottom:1px solid var(--linea)} } @media (max-width:820px){ /* Apilado el banner ya no tiene borde que pisar: la tira baja y se comporta como un bloque más. */ :root{--solape:0px} .tira-cats{margin-top:0;padding:0 20px} .tira-cats-caja{box-shadow:none} .tira-cats + *{padding-top:56px} } @media (max-width:560px){ .tira-cats-caja{grid-template-columns:repeat(2,1fr)} .tira-cats .cat{border-right:1px solid var(--linea);border-bottom:1px solid var(--linea)} .tira-cats .cat:nth-child(2n){border-right:none} .tira-cats .cat:last-child{border-bottom:none} } /* ============================================================ VITRINA DE PRODUCTOS — las mismas tarjetas que la TV, en formato navegable: foto, pastilla de precio, unidad y ficha corta. Todos los campos existen ya en la tabla `productos`. ============================================================ */ .encabezado{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:42px} .encabezado h2{font-size:clamp(30px,3.8vw,42px)} .encabezado p{color:var(--gris);font-size:16px;max-width:460px;margin-top:12px} .filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px} .filtro{ font-family:var(--tipo-titulo);font-weight:600;font-size:13.5px;padding:9px 17px;border-radius:var(--radio-chico); border:1px solid var(--linea);color:var(--gris);background:#fff;cursor:pointer;transition:.18s ease } .filtro:hover{border-color:var(--primario);color:var(--primario)} .filtro[aria-pressed="true"]{background:var(--secundario);border-color:var(--secundario);color:#fff} /* ============================================================ CATÁLOGO — productos.php Los filtros son con direccion propia, no botones con estado: el enlace de una categoria se puede mandar por WhatsApp, marcar como favorito e indexar. Por eso el activo se marca con `aria-current`, que es lo que anuncia un lector de pantalla, y no solo con un color. ============================================================ */ .catalogo{padding-top:56px} /* ============================================================ CONTACTO — fichas de dato Sin formulario a proposito: en una ferreteria el mensaje llega por WhatsApp o por telefono, y un formulario que nadie lee promete una respuesta que no va a venir. La rejilla se adapta a CUANTAS fichas haya, porque cada dato en blanco no dibuja la suya: con cuatro van dos y dos, con tres van tres, con una ocupa su ancho y ya. `data-cuantas` lo dice desde PHP en vez de dejar que `auto-fit` decida y deje una sola ficha estirada de lado a lado. ============================================================ */ .contacto{padding-top:56px} .fichas{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)} .fichas[data-cuantas="1"]{grid-template-columns:minmax(0,420px)} .fichas[data-cuantas="2"]{grid-template-columns:repeat(2,1fr)} .fichas[data-cuantas="3"]{grid-template-columns:repeat(3,1fr)} .ficha-dato{ border:1px solid var(--linea); background:#fff; padding:26px 24px 22px; border-radius:var(--radio); display:flex; flex-direction:column; transition:border-color .2s ease, box-shadow .2s ease; } .ficha-dato:hover{border-color:var(--primario);box-shadow:0 16px 34px rgba(0,47,85,.10)} .ficha-ico{width:30px;height:30px;stroke:var(--primario);margin-bottom:16px} .ficha-ico .macizo{fill:var(--primario);stroke:none} .ficha-rotulo{ font-family:var(--tipo-texto); font-weight:600; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin-bottom:8px; } .ficha-texto{ font-family:var(--tipo-titulo); font-weight:700; font-size:17.5px; color:var(--secundario); letter-spacing:-.01em; line-height:1.35; } /* `margin-top:auto` para que la accion quede pegada abajo aunque una ficha tenga tres lineas de horario y la de al lado una sola: si no, los enlaces bailan a distintas alturas dentro de la misma fila. */ .ficha-accion{ margin-top:auto; padding-top:18px; font-family:var(--tipo-titulo); font-weight:700; font-size:14px; color:var(--primario); display:inline-flex; align-items:center; gap:8px; } .ficha-accion svg{width:14px;height:14px;transition:transform .2s ease} .ficha-dato:hover .ficha-accion svg{transform:translateX(4px)} @media (max-width:940px){ .fichas, .fichas[data-cuantas="3"]{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .fichas, .fichas[data-cuantas="2"], .fichas[data-cuantas="3"]{grid-template-columns:1fr} } /* ---------- el mapa ---------- Va DEBAJO de las fichas y no dentro de la de la dirección: ahí habría que elegir entre un mapa diminuto o una tarjeta el doble de alta que las otras tres, y la fila se descuadra igual. El alto lo manda una proporción y no un `height` fijo. A 21:9 en escritorio la calle y las dos esquinas caben, que es lo que se mira; el mismo 21:9 en un teléfono deja una franja de 170px donde no se distingue nada, así que abajo pasa a 4:3. `overflow:hidden` no es decorativo: el