/* ========================================================================= estilos.css — Hoja única. Sin preprocesador, sin build. Orden: tokens → reset → utilidades → componentes → secciones → responsive. ========================================================================= */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* --- Neutros ---------------------------------------------------------- Paleta clara: blanco y gris. El único bloque oscuro del sitio es el pie. */ --blanco: #ffffff; --gris-fondo: #f5f6f7; /* fondo de secciones alternas y del inicio */ --gris-tenue: #eef0f3; /* tiles de ícono y chips de técnica */ --gris-claro: #e3e6ea; /* bordes y fondo de la figura del producto */ --gris: #5f6672; /* texto secundario — 5.78:1 sobre blanco */ --gris-oscuro: #343941; /* pie, avatares, botón + */ --tinta: #1a1d21; /* texto principal — 16.9:1 sobre blanco */ /* --- Naranja de marca ------------------------------------------------- #ff4d2e con texto blanco da 3.30:1 y REPRUEBA el mínimo de accesibilidad (4.5:1). Por eso el naranja está partido en cuatro: el vistoso solo para adorno, y versiones más oscuras donde hay texto que leer. */ --acento: #ff4d2e; /* decorativo: halos, del título, foco */ --acento-osc: #d93a1e; /* fondo de botón con texto blanco — 4.59:1 */ --acento-hover: #b32e14; /* hover del botón — 6.33:1 */ --acento-texto: #c93714; /* naranja para texto chico — 5.20:1 */ --wa: #25d366; /* verde oficial de WhatsApp: el único verde */ --wa-texto: #06331a; /* Tipografía: stack del sistema, cero pedidos a la red. */ --fuente: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; /* Espaciado y forma */ --ancho: 1180px; --radio: 14px; --radio-sm: 8px; --sombra: 0 1px 2px rgba(26,29,33,.06), 0 8px 24px rgba(26,29,33,.07); --sombra-alta: 0 12px 40px rgba(26,29,33,.14); --borde: 1px solid var(--gris-claro); --transicion: .18s ease; } /* ---------- 2. Reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 86px; } body { margin: 0; font-family: var(--fuente); font-size: 16px; line-height: 1.6; color: var(--tinta); background: var(--blanco); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; } h1 { font-size: clamp(2.2rem, 5.5vw, 3.9rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); } h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1rem; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } /* El atributo `hidden` viene del navegador con la prioridad MÁS BAJA de toda la cascada, así que cualquier `display` que le pongamos a un elemento le gana y el elemento aparece igual aunque esté marcado como oculto. Pasa apenas se le da `display: grid` a algo que arranca con [hidden] — como la ficha de producto. Esta línea lo zanja de una vez. */ [hidden] { display: none !important; } /* Foco visible en teclado, invisible al hacer clic con el mouse. */ :focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; } /* ---------- 3. Utilidades ------------------------------------------------ */ .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; } /* 52px, bajado de 84: con la etiqueta naranja ya grande, el aire de arriba dejaba la cabecera flotando lejos del borde de la sección. */ .seccion { padding: 52px 0; } .seccion--gris { background: var(--gris-fondo); } .cabecera-seccion { max-width: 620px; margin-bottom: 44px; } .cabecera-seccion--centro { margin-inline: auto; text-align: center; } .cabecera-seccion p { color: var(--gris); font-size: 1.05rem; margin: 0; } /* JERARQUÍA INVERTIDA a pedido del cliente: el rótulo naranja de arriba manda y el título negro queda como segundo renglón. 1.25rem = 20px exactos, ajustado a ojo sobre el render. Va en `.cabecera-seccion h2` y no en `h2` para no tocar el del panel de cotización, que no es cabecera de sección. */ .cabecera-seccion h2 { font-size: 1.25rem; } /* Mismo tratamiento tipográfico que el resalte naranja del carrusel (.diapo__titulo em): idéntico font-size, line-height y letter-spacing. Dejó de ser un rótulo con tracking amplio y pasó a leerse como un título. ⚠️ El COLOR no se copia, y es a propósito: el del carrusel es #ff6a4d, un naranja aclarado para que contraste sobre la foto oscurecida. Sobre el fondo claro de estas secciones da ~2.5:1, por debajo del mínimo legible; acá va el naranja de marca para texto (5.20:1). */ .etiqueta { display: inline-block; margin-bottom: .2em; /* Al 80 % del tamaño del carrusel, a pedido del cliente: los tres valores del clamp escalados por igual (2.2/5.2/3.9 × 0.8), así la curva y los puntos de quiebre no se mueven — solo baja la escala. */ font-size: clamp(1.76rem, 4.16vw, 3.12rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; color: var(--acento-texto); } .solo-lectores { /* visible solo para lectores de pantalla */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 4. Botones --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border-radius: 100px; font-weight: 700; font-size: .95rem; text-align: center; transition: transform var(--transicion), background var(--transicion), box-shadow var(--transicion); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--primario { background: var(--acento-osc); color: var(--blanco); box-shadow: 0 6px 18px rgba(217,58,30,.28); } .btn--primario:hover { background: var(--acento-hover); } .btn--oscuro { background: var(--gris-oscuro); color: var(--blanco); } .btn--oscuro:hover { background: var(--tinta); } .btn--borde { border: 2px solid var(--gris-oscuro); color: var(--tinta); padding: 11px 24px; } .btn--borde:hover { border-color: var(--acento-osc); color: var(--acento-texto); } .btn--wa { background: var(--wa); color: var(--wa-texto); box-shadow: 0 6px 18px rgba(37,211,102,.3); } .btn--bloque { width: 100%; } /* Latido lento del CTA. Un ciclo de 3 s con el pico al medio: crece un 6 % y la sombra se abre, para que se note sin parecer un banner parpadeando. Se anima `scale` y NO `transform`, porque `.btn:hover` usa translateY: son propiedades distintas, así que el latido y el hover conviven. Con `transform` la animación pisaba el hover y el botón no se levantaba al pasar el mouse. */ @keyframes latido { 0%, 100% { scale: 1; box-shadow: 0 6px 18px rgba(217,58,30,.28); } 50% { scale: 1.06; box-shadow: 0 10px 28px rgba(217,58,30,.45); } } .btn--latido { animation: latido 3s ease-in-out infinite; } /* Se frena al apuntarle: un blanco quieto es más fácil de clickear. */ .btn--latido:hover { animation-play-state: paused; } /* ---------- 5. Cabecera: menú desplegable y buscador --------------------- */ .cabecera { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: var(--borde); } /* position:relative ancla el panel desplegable. En móvil la fila crece a dos líneas, por eso min-height y no height. */ .cabecera__fila { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 72px; /* Más ancha que el resto del sitio (--ancho, 1180px). La cabecera tiene seis elementos en fila y con 1180 quedaban apretados al centro, con dos franjas blancas enormes a los costados en pantallas grandes. El contenido de las secciones SÍ se queda en 1180: una línea de texto más ancha que eso se vuelve incómoda de leer, que es la razón de ese límite. */ max-width: 1560px; } /* El logo es una IMAGEN (cuadro + nombre + tagline, todo en una pieza). Se dimensiona por el alto y el ancho sale solo, así la proporción no se deforma nunca. El del HTML lleva width/height reales para que el navegador reserve el espacio y la cabecera no salte al cargar. */ .logo { display: flex; align-items: center; flex-shrink: 0; } .logo img { height: 47px; width: auto; } /* 38 → 44 (+15 %) → 47 (+6 %) */ /* Botón "Menú": visible en TODOS los tamaños. Gris oscuro y no naranja para no competir con el CTA "Cotizar", que sí es naranja. */ .btn-menu { /* margin-left: auto acá y otro en .cabecera__acciones parten el espacio sobrante en DOS huecos: uno después del logo y otro después del buscador. Así el grupo Menú + buscador queda al centro en vez de pegado al logo. */ margin-left: auto; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 11px 20px; border-radius: 100px; background: var(--gris-oscuro); color: var(--blanco); font-weight: 700; font-size: .93rem; transition: background var(--transicion); } .btn-menu:hover { background: var(--tinta); } .btn-menu[aria-expanded="true"] { background: var(--acento-osc); } .btn-menu svg { width: 20px; height: 20px; } /* Buscador: ocupa el centro y se estira con lo que sobra. */ /* max-width es lo que lo frena: con `flex: 1` sin tope, el buscador se comía todo el espacio sobrante de la cabecera y quedaba desproporcionado en pantallas anchas. Sigue siendo flexible hacia abajo para que en pantallas chicas se encoja antes que nada. */ .buscador { position: relative; display: flex; flex: 1 1 240px; min-width: 180px; max-width: 420px; } .buscador input { width: 100%; padding: 11px 50px 11px 18px; border: var(--borde); border-radius: 100px; background: var(--gris-fondo); font-size: .93rem; } .buscador input::placeholder { color: var(--gris); } .buscador input:focus { outline: none; border-color: var(--acento-osc); background: var(--blanco); } .buscador__lupa { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--acento-osc); color: var(--blanco); transition: background var(--transicion); } .buscador__lupa:hover { background: var(--acento-hover); } .buscador__lupa svg { width: 18px; height: 18px; } /* (.nav se eliminó junto con el enlace "Catálogo" de la cabecera. Al catálogo se llega por el menú desplegable y por el pie.) */ /* margin-left: auto empuja el bloque de acciones al extremo derecho. Sin esto, al ponerle tope al buscador, el sobrante quedaba DESPUÉS de las acciones y todo el grupo se corría hacia el centro. */ .cabecera__acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* Botón que abre el panel de cotización, con contador */ /* Teléfono de la cabecera: ocupa el lugar del antiguo botón "Mi cotización". Es un tel: de verdad, así en el celular llama de una. */ /* El número grande pero la píldora del tamaño de siempre: al subir la letra, el padding y el line-height heredados (1.6) inflaban la cápsula. El line-height ajustado es lo que la mantiene compacta sin achicar el texto. */ .telefono-cabecera { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; border: 2px solid var(--gris-oscuro); font-weight: 700; font-size: 1.16rem; line-height: 1.2; white-space: nowrap; transition: border-color var(--transicion), color var(--transicion); } .telefono-cabecera:hover { border-color: var(--acento-osc); color: var(--acento-texto); } .telefono-cabecera svg { width: 20px; height: 20px; } .btn-cotizacion { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; border: 2px solid var(--gris-oscuro); font-weight: 700; font-size: .9rem; } .btn-cotizacion svg { width: 18px; height: 18px; } .btn-cotizacion__contador { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 100px; background: var(--acento-osc); color: var(--blanco); font-size: .74rem; font-weight: 800; } .btn-cotizacion[data-vacio="true"] .btn-cotizacion__contador { background: var(--gris-claro); color: var(--gris); } /* Inicio de sesión: círculo con el ícono de usuario que abre un desplegable. Discreto a propósito — es un placeholder y no debe competir con "Cotizar", que es el CTA real. */ .sesion { position: relative; flex-shrink: 0; } .btn-sesion { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--gris-claro); background: var(--blanco); color: var(--gris-oscuro); transition: border-color var(--transicion), background var(--transicion), color var(--transicion); } .btn-sesion:hover { border-color: var(--gris-oscuro); background: var(--gris-oscuro); color: var(--blanco); } .btn-sesion[aria-expanded="true"] { border-color: var(--gris-oscuro); background: var(--gris-oscuro); color: var(--blanco); } .btn-sesion svg { width: 21px; height: 21px; } /* right:0 y no left:0 — pegado al borde derecho de la cabecera, si no se sale de la pantalla. */ .menu-sesion { position: absolute; top: calc(100% + 10px); right: 0; z-index: 6; display: none; width: 260px; padding: 18px; background: var(--blanco); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); } .menu-sesion[data-abierto="true"] { display: block; } /* Panel desplegable del menú. OJO: .cabecera tiene backdrop-filter, que crea bloque contenedor. Este panel es absolute y queda bien anclado; si alguien lo pasa a fixed, se va a anclar a la cabecera y no a la ventana. */ .menu-panel { position: absolute; top: 100%; left: 0; z-index: 5; display: none; /* cerrado = fuera del árbol de accesibilidad */ width: min(720px, 100%); grid-template-columns: 1.35fr 1fr; gap: 26px; padding: 24px 26px 26px; background: var(--blanco); border: var(--borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); box-shadow: var(--sombra-alta); max-height: calc(100vh - 120px); overflow-y: auto; } .menu-panel[data-abierto="true"] { display: grid; } .menu-panel__titulo { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); margin: 0 0 10px; } .menu-panel__lista { display: grid; gap: 2px; } .menu-panel__lista a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radio-sm); font-size: .93rem; font-weight: 600; color: var(--gris-oscuro); transition: background var(--transicion), color var(--transicion); } .menu-panel__lista a:hover { background: var(--gris-fondo); color: var(--acento-texto); } .menu-panel__lista svg { width: 19px; height: 19px; color: var(--acento-osc); flex-shrink: 0; } .menu-panel__grupo--sitio { border-left: var(--borde); padding-left: 24px; } /* ---------- 6. Carrusel del inicio --------------------------------------- */ .hero { position: relative; background: var(--gris-fondo); } .carrusel { position: relative; overflow: hidden; } .carrusel__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; /* que deslizar no dispare el "atrás" del navegador */ scrollbar-width: none; /* Firefox */ } .carrusel__pista::-webkit-scrollbar { display: none; } /* La foto ocupa TODA la diapositiva y el texto va centrado encima. min-height fija el alto del banner; place-items centra el contenido. */ .diapo { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; min-height: 580px; padding: 72px 0; overflow: hidden; } .diapo__foto { position: absolute; inset: 0; } .diapo__foto img { width: 100%; height: 100%; object-fit: cover; } /* Velo oscuro. NO es decoración: las tres fotos son claras y sin él el texto blanco encima no se lee. Al 50 %, medido sobre el render: kit eco 5,16:1 · resaltadores 4,53:1 · útiles (menta) 4,19:1. El mínimo exigible para texto normal es 4,5:1, así que la bajada de la diapositiva de los útiles queda apenas por debajo: es la foto más clara de las tres. Los títulos sí cumplen en las tres (por su tamaño el mínimo es 3:1). Si se cambia este valor o entra una foto nueva, hay que VOLVER A MEDIRLO sobre el render, no calcularlo a ojo. */ .diapo__foto::after { content: ''; position: absolute; inset: 0; background: rgba(18,20,24,.5); } .diapo__contenido { position: relative; z-index: 1; /* 1040 y no 820: con 820 el título "Papeles y vinil para plasmar" se partía en dos renglones y el titular quedaba en cuatro líneas. La bajada NO se estira con esto porque tiene su propio max-width en ch. */ max-width: 1040px; text-align: center; color: var(--blanco); } /* Solo la primera diapositiva es

; las otras son

con el mismo aspecto, para no tener tres

en una misma página. */ .diapo__titulo { /* El máximo bajó de 3.9 a 3.35rem por la misma razón que el ancho de arriba: entre las dos medidas, cada renglón del título entra entero. Si se agrega una diapositiva con un título más largo, hay que volver a mirarlo. */ font-size: clamp(2rem, 4.5vw, 3.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .45em; color: var(--blanco); text-shadow: 0 2px 18px rgba(0,0,0,.35); } /* display:block fuerza el resalte a su propia línea. Sin esto el corte depende del ancho y quedaban cosas como "Tu mockup listo en 5" / "horas hábiles". Además deja los tres títulos en dos líneas, así todas las diapositivas miden igual y no hay huecos entre una y otra. */ .diapo__titulo em { display: block; font-style: normal; color: #ff6a4d; } .diapo__bajada { font-size: 1.12rem; color: rgba(255,255,255,.92); max-width: 60ch; margin: 0 auto 28px; text-shadow: 0 1px 12px rgba(0,0,0,.4); } .diapo__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 26px; } /* El botón de borde oscuro sería invisible sobre la foto: acá va en blanco. */ .diapo__ctas .btn--borde { border-color: rgba(255,255,255,.65); color: var(--blanco); } .diapo__ctas .btn--borde:hover { border-color: var(--blanco); background: rgba(255,255,255,.14); color: var(--blanco); } .diapo__pildoras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .diapo__pildoras li { display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); font-size: .84rem; font-weight: 600; color: var(--blanco); } .diapo__pildoras svg { width: 15px; height: 15px; color: #ff9a83; flex-shrink: 0; } /* Flechas a los costados, centradas verticalmente sobre la foto. */ .carrusel__flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: var(--blanco); backdrop-filter: blur(6px); transition: background var(--transicion), border-color var(--transicion); } .carrusel__flecha:hover { background: rgba(255,255,255,.34); border-color: var(--blanco); } .carrusel__flecha--izq { left: 22px; } .carrusel__flecha--der { right: 22px; } .carrusel__flecha svg { width: 20px; height: 20px; } /* Puntos y pausa, abajo al centro, también encima de la foto. */ .carrusel__controles { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; } .carrusel__puntos { display: flex; align-items: center; gap: 8px; } .carrusel__punto { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); transition: width var(--transicion), background var(--transicion); } .carrusel__punto[aria-selected="true"] { width: 28px; border-radius: 100px; background: var(--blanco); } .carrusel__pausa { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: var(--blanco); backdrop-filter: blur(6px); transition: background var(--transicion); } .carrusel__pausa:hover { background: rgba(255,255,255,.32); } .carrusel__pausa svg { width: 15px; height: 15px; } /* ---------- 7. Beneficios ------------------------------------------------ */ .beneficios { padding: 68px 0; } .grilla-beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* El min-height da el alto; el contenido va ARRIBA, no centrado. Centrado se ve mejor solo si los 4 títulos ocupan las mismas líneas: en cuanto uno wrapea, su ícono queda a distinta altura que el de las otras tarjetas y salta a la vista. Alineado arriba, los 4 íconos quedan siempre en la misma línea. */ .beneficio { display: flex; flex-direction: column; min-height: 288px; padding: 44px 26px 40px; border-radius: 18px; background: var(--gris-fondo); text-align: center; } .beneficio__ico { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--acento-osc); color: var(--acento-osc); } .beneficio__ico svg { width: 30px; height: 30px; } /* 1rem y .03em de espaciado: con más, "ENTREGA EN 2 A 7 DÍAS" no entra en una línea al ancho de tarjeta que da la grilla de 4 columnas. */ .beneficio h3 { font-size: 1rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; } .beneficio p { font-size: .92rem; line-height: 1.55; color: var(--gris); margin: 0; } /* ---------- 8. (libre) ---------------------------------------------------- */ /* Acá vivían los estilos de la franja de logos de clientes, eliminada junto con su sección del HTML. Se dejó el hueco numerado para no renumerar el resto. */ /* ---------- 9. Catálogo -------------------------------------------------- */ .filtros__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .chip { padding: 8px 16px; border-radius: 100px; border: var(--borde); background: var(--blanco); font-size: .87rem; font-weight: 600; color: var(--gris-oscuro); transition: all var(--transicion); } .chip:hover { border-color: var(--gris-oscuro); } .chip[aria-pressed="true"] { background: var(--acento-osc); border-color: var(--acento-osc); color: var(--blanco); } .grilla-productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .producto { /* relative: es el marco de referencia del ::after que hace clickeable toda la tarjeta. Sin esto el enlace se estira sobre la página entera. */ position: relative; display: flex; flex-direction: column; background: var(--blanco); border: var(--borde); border-radius: var(--radio); overflow: hidden; transition: transform var(--transicion), box-shadow var(--transicion); } .producto:hover { transform: translateY(-4px); box-shadow: var(--sombra); } /* ---- Tarjeta clickeable ("block link") ---------------------------------- El envuelve SOLO el título, y este ::after lo estira sobre toda la tarjeta. Así el clic funciona en cualquier parte pero hay una sola parada de tabulador, y el nombre accesible del enlace es el nombre del producto y no el chorizo de "categoría + detalle + técnicas + precio + Agregar" que saldría si el envolviera el
entero (que además metería un