/* ========================================================================== FERRETERÍA LA BARRETA — styles.css Arquetipo: Brutalist Grid en clave industrial clara. Un solo archivo, por secciones numeradas. Las fichas y todo el primer pantallazo están embebidos en el ; acá va el resto. Una sola escala de espaciado (--s1..--s6), un solo radio, un solo alto de botón, una sola sombra. El TODO §0 lista esas cuatro incoherencias como el delator número uno de una web de $50. ========================================================================== */ /* ── 01 · Utilidades ───────────────────────────────────────────────────── */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .ojo{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--cobalto);margin:0 0 var(--s2)} .aviso{display:inline-block;font-family:var(--mono);font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3); border:1px solid var(--linea);padding:.35rem .7rem;margin:var(--s5) 0 var(--s2)} /* ── 02 · Secciones ────────────────────────────────────────────────────── */ .sec{padding:var(--sec-y) 0} .sec--alt{background:var(--fondo-2)} .sec__t{font-size:clamp(1.8rem,5.5vw,3.2rem);max-width:20ch} .sec__lead{max-width:56ch;color:var(--tinta-2);margin:var(--s3) 0 0} /* ── 03 · Barra de confianza ───────────────────────────────────────────── */ /* Va pegada al hero, en negro, sin aire: es un dato duro, no una tarjeta. */ .confianza{background:var(--tinta);color:var(--fondo)} /* `margin-inline:auto`, NO `margin:0`. Lleva la clase .wrap, que calcula el ancho con aire a los lados y centra con auto — ponerle margin:0 encima lo anulaba y la lista quedaba pegada al borde izquierdo del teléfono, con el «28» tocando el marco. */ .confianza__in{list-style:none;margin-inline:auto;padding:var(--s4) 0; display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s2)} .confianza li{display:flex;flex-direction:column;gap:.15rem} .confianza__n{font-family:var(--display);font-weight:700; font-size:clamp(2rem,7vw,3rem);line-height:1; font-variant-numeric:tabular-nums;color:#fff} .confianza__n--txt{font-size:clamp(1.3rem,4.5vw,1.9rem)} .confianza__t{font-size:.82rem;color:#A9AEB6;line-height:1.4} /* ── 04 · Categorías ───────────────────────────────────────────────────── */ /* Sin foto, a propósito: ver NOTAS.md. Lo que ordena es la retícula. */ .cats{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid; gap:2px;background:var(--tinta);border:2px solid var(--tinta)} .cat{background:var(--fondo);padding:var(--s3);display:flex; flex-direction:column;gap:.35rem; transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .cat__n{font-size:1.35rem} .cat__d{margin:0;color:var(--tinta-2);font-size:.92rem;flex:1} .cat__a{margin-top:var(--s2);font-weight:600;font-size:.92rem; color:var(--cobalto);text-decoration:none; min-height:44px;display:inline-flex;align-items:center;align-self:flex-start} .cat__a:hover{text-decoration:underline;text-underline-offset:3px} /* ── 05 · Productos ────────────────────────────────────────────────────── */ .prods{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)} .prod{background:var(--panel);border:2px solid var(--tinta);padding:var(--s3); display:flex;flex-direction:column;gap:.2rem; transition:transform .15s ease,box-shadow .15s ease} .prod__cod{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em; color:var(--tinta-3)} .prod__n{font-size:1.3rem;margin-top:.2rem} .prod__marca{margin:0;font-size:.85rem;font-weight:600;color:var(--cobalto); text-transform:uppercase;letter-spacing:.06em} .prod__med{margin:.15rem 0 0;color:var(--tinta-2);font-size:.9rem;flex:1} .prod__pre{margin:var(--s2) 0 var(--s2);font-family:var(--display); font-weight:700;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums} .prod__sol{font-size:1.1rem;margin-right:.2rem;color:var(--tinta-3)} .prod .btn{align-self:flex-start} /* Hover de tarjeta: elevación de 2 px y una sombra que crece. NADA MÁS — es el efecto 3 de los cinco permitidos (TODO §4). */ @media(hover:hover) and (pointer:fine){ .cat:hover{background:var(--panel)} .cat:hover,.prod:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(22,24,28,.13)} } /* ── 06 · Listas de datos ──────────────────────────────────────────────── */ .datos{margin:var(--s4) 0 0;display:grid;gap:0; border-top:2px solid var(--tinta);max-width:60ch} .datos dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-3);padding:var(--s2) 0 .15rem} .datos dd{margin:0 0 var(--s2);color:var(--tinta-2); border-bottom:1px solid var(--linea);padding-bottom:var(--s2)} /* ── 07 · Zonas de reparto ─────────────────────────────────────────────── */ .zonas{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex; flex-wrap:wrap;gap:.5rem} .zonas li{border:2px solid var(--tinta);padding:.45rem .9rem; font-weight:600;font-size:.92rem;background:var(--panel)} /* ── 08 · El negocio y testimonios ─────────────────────────────────────── */ .nosotros{margin-top:var(--s3);max-width:62ch} .nosotros p{margin:var(--s3) 0 0;color:var(--tinta-2)} .testis{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)} .testis li{background:var(--panel);border-left:4px solid var(--cobalto); border-top:1px solid var(--linea);border-right:1px solid var(--linea); border-bottom:1px solid var(--linea);padding:var(--s3)} .testis blockquote{margin:0} .testis p{margin:0;color:var(--tinta)} .testis cite{display:block;margin-top:var(--s2);font-style:normal; font-family:var(--mono);font-size:.7rem;letter-spacing:.08em; text-transform:uppercase;color:var(--tinta-3)} /* ── 09 · Dónde estamos ────────────────────────────────────────────────── */ .donde{display:grid;gap:var(--s5)} .donde p{margin:var(--s3) 0 0;max-width:52ch} .donde__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s4)} .horario{border-collapse:collapse;width:100%;max-width:30rem;font-size:.95rem} .horario caption{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-3);text-align:left; padding-bottom:var(--s2)} .horario th,.horario td{text-align:left;padding:.7rem 0; border-bottom:1px solid var(--linea);vertical-align:top} .horario th{font-weight:600;color:var(--tinta-2)} .horario td{text-align:right;font-variant-numeric:tabular-nums} /* ── 10 · Pie ──────────────────────────────────────────────────────────── */ .pie{background:var(--tinta);color:var(--fondo);padding:var(--s5) 0 var(--s4)} .pie__marca{margin:0;font-family:var(--display);font-weight:700;font-size:1.7rem; text-transform:uppercase} .pie__nap{margin:var(--s2) 0 0;color:#B9BEC6;font-size:.92rem;line-height:1.7} .pie__nap a{color:#fff} .pie__fic{margin:var(--s3) 0 0;font-size:.9rem;color:#B9BEC6;max-width:58ch} .pie__fic a{color:#fff} .pie__cred{margin:var(--s2) 0 0;font-size:.82rem;color:#9099A3} .pie__anio{margin:var(--s3) 0 0;font-family:var(--mono);font-size:.7rem; letter-spacing:.1em;text-transform:uppercase;color:#9099A3} /* ── 11 · Botón flotante de WhatsApp, con pulso ────────────────────────── */ /* Efecto 5 de los cinco. El pulso es `transform: scale()`, nunca `width`: animar el ancho cuesta layout y paint en cada frame (TODO §4 y §5). */ .wa{position:fixed;right:1rem;bottom:1rem;z-index:60; display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:.9rem 1.5rem;border-radius:2px; background:var(--cobalto);color:#fff;font-weight:700;font-size:1rem; text-decoration:none;box-shadow:0 6px 18px rgba(22,24,28,.28)} @media(prefers-reduced-motion:no-preference){ .wa{animation:pulso 3.6s ease-in-out infinite} } @keyframes pulso{ 0%,88%,100%{transform:scale(1)} 93%{transform:scale(1.045)} } @media(min-width:960px){.wa{display:none}} /* ── 12 · Reveal al entrar — efecto 1, un solo estilo ──────────────────── */ /* Fade + 16 px hacia arriba, 300 ms, ease-out, escalonado 60 ms. Donde el navegador soporta scroll-driven animations no interviene JavaScript; donde no, main.js pone .visible con IntersectionObserver. */ @media(prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .cat,.prod,.testis li,.zonas li,.confianza li{ animation:entra .3s ease-out both; animation-timeline:view(); animation-range:entry 0% entry 30%} } @supports not (animation-timeline:view()){ .js .cat,.js .prod,.js .testis li,.js .zonas li,.js .confianza li{ opacity:0;transform:translateY(16px); transition:opacity .3s ease-out,transform .3s ease-out} .js .visible{opacity:1;transform:none} } } @keyframes entra{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}} /* ── 13 · Responsive — los cinco breakpoints del proyecto ──────────────── */ @media(min-width:540px){ .cats{grid-template-columns:repeat(2,1fr)} .prods{grid-template-columns:repeat(2,1fr)} .confianza__in{grid-template-columns:repeat(4,1fr)} } @media(min-width:720px){ .cab__nav{display:flex} .testis{grid-template-columns:repeat(3,1fr)} .donde{grid-template-columns:1.1fr .9fr;align-items:start} .hero__foto{aspect-ratio:5/2} /* franja ancha; en móvil, la foto entera */ } @media(min-width:960px){ .cats{grid-template-columns:repeat(3,1fr)} .prods{grid-template-columns:repeat(3,1fr)} } @media(min-width:1280px){ .sec__t{max-width:18ch} } @media(min-width:1600px){ .wrap{width:min(100% - 4rem,1400px)} } /* ── 14 · Movimiento reducido ──────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important; scroll-behavior:auto !important} .js .cat,.js .prod,.js .testis li,.js .zonas li,.js .confianza li{ opacity:1;transform:none} } /* ── 15 · El CTA de la cabecera, solo en escritorio ────────────────────── */ /* En móvil sobra: el botón flotante hace exactamente lo mismo, está siempre a la vista y cae donde está el pulgar. Dos llamadas idénticas a la vez es lo que ya se corrigió en el portal. En escritorio el flotante se oculta, así que allí este botón es el único y se queda. */ @media(max-width:959px){ .cab .btn{display:none} } /* ── 16 · Etiquetas que cambian de largo según el ancho ────────────────── */ /* En el botón de la cabecera: en móvil «Cotizar», en escritorio «Cotizar por WhatsApp». Las dos están en el HTML, así que sin CSS se leen las dos y no se pierde información. */ .solo-corto{display:inline} .solo-ancho{display:none} @media(min-width:720px){ .solo-corto{display:none} .solo-ancho{display:inline} }