, para que el catálogo empiece de forma directa. La profundidad del CTA y las líneas de transición entre secciones son genéricas y viven en insumos-servicios-shared.css (cargado también por esta página); la clase .page-photo-hero de ese archivo ya no se usa aquí, solo en servicios.html. Selector: . ========================================================================== */ /* ---------- Paleta propia de Insumos ---------- Variables CSS declaradas en .page-insumos (el body de esta página), no en :root de base.css: viven y mueren en este archivo, sin afectar a ninguna otra página. "Café elegante" reutiliza --color-espresso (base.css) tal cual — ya es el mismo café profundo que usa el H1 del Hero de Inicio, así que no hace falta un tono nuevo para mantener la conexión de marca. "Dark olive" y los crema/marfil sí son nuevos, pero de uso moderado (acento y fondo respectivamente), nunca como color dominante. */ .page-insumos { --insumos-cream: #FAF6ED; /* fondo general: crema/marfil muy claro (antes var(--color-off-white), #F6F4F1) */ --insumos-paper: #FDFBF5; /* "papel": franjas/panel activo — blanco cálido, más claro que --insumos-cream */ --insumos-cafe: var(--color-espresso); /* café elegante — mismo tono que el H1 del Hero de Inicio */ --insumos-olive: #4E5A40; /* dark olive — acento, uso moderado (categoría activa) */ --insumos-olive-soft: rgba(78, 90, 64, 0.22); /* olive muy diluido, para el scrollbar discreto */ } /* Ronda "más presencia": sobrescribe --container-max (base.css, 1200px) solo dentro de

y el footer de esta página, nunca en .page-insumos/ — declararla en el body la heredaba también .header-container (layout.css), que usa la misma variable, y ensanchaba el header por accidente (header y footer/main son hermanos del , no hijos uno del otro). Aislada aquí, el header vuelve a heredar 1200px global (igual que Contacto) y el resto de la página (catálogo, índice de categorías, CTA, footer) conserva exactamente el mismo ancho de antes: misma columna de 3, mismo gap de 28px, cada tarjeta en ~411px (~11% más grande que el 1200px base, sin reducir el aire entre ellas). En viewports <1352px el propio width:100% de .container sigue acotando sin overflow (mismo comportamiento responsive de siempre). */ .page-insumos main, .page-insumos .site-footer { --container-max: 1320px; } /* ---------- Encabezado de la sección Insumos ---------- Único encabezado de la página (h1): hereda tamaño/peso/tracking del h1 global (base.css, sistema tipográfico Manrope) sin duplicarlos aquí. Subtítulo en cursiva, y una línea-degradado (no una barra sólida) que reutiliza el mismo lenguaje visual que ya usan .insumos-cat-transition y las líneas entre secciones del archivo compartido. Jerarquía por encima de .insumos-cat__title: las categorías nunca deben verse más grandes que el título de la sección que las contiene. */ /* Ronda "catálogo editorial" (Paso 1): se retira la sensación de tarjeta/panel del encabezado — título y subtítulo pasan a vivir directamente sobre el fondo crema de la sección (--insumos-cream), alineados a la izquierda como el resto de la página, en vez de centrados dentro de una caja ajustada a su contenido. Se retiran width:fit-content (ya no hace falta abrazar ningún panel) y text-align:center (la clase .text-center sigue en el HTML por si otro estilo la necesitara, pero aquí se sobreescribe). */ /* Ronda "encabezado centrado": vuelve a text-align:center (revierte el left de la ronda "catálogo editorial") — la clase .text-center ya presente en el HTML habría bastado sola, pero se deja explícito aquí para que la intención quede clara en este archivo. Esto centra "Insumos" (una sola palabra, sin max-width propio) dentro del ancho completo del header; el subtítulo se centra además con su propio max-width + margin-inline:auto (ver .insumos-header__intro, más abajo). Únicamente este encabezado general cambia — la navegación de categorías y todo el catálogo (subsecciones, tarjetas) siguen alineados a la izquierda, sin tocar. */ .page-insumos .insumos-header { position: relative; z-index: 1; /* Ronda "eliminar subtítulo": con el subtítulo fuera del hero (.insumos-header__intro retirado del HTML), el H1 pasa a ser el último contenido visible dentro de este header — este margin-bottom ahora controla, él solo, todo el tramo H1→navegación de categorías (antes 26px, repartido junto con el margin-bottom del título que sostenía el hueco hacia el subtítulo). Nuevo valor dentro de los 55-75px pedidos. */ margin-bottom: 4rem; width: auto; max-width: 100%; text-align: center; } /* ---------- Panel liso detrás del título + subtítulo ---------- Mismo concepto que el panel del Hero de Inicio, adaptado al lenguaje de Insumos: aquí NO hay video que preservar, así que el panel es de tono liso (sin degradado ni blur), usando --insumos-paper (el "papel" que ya usan las franjas/panel activo del catálogo) a baja opacidad. z-index:-1 lo pinta detrás del H1 y el subtítulo automáticamente (contenido en flujo normal dentro de .insumos-header) sin tocar esos elementos. El aire alrededor lo da el inset negativo del pseudo-elemento, no padding en .insumos-header, así que la posición real del título y subtítulo no cambia. No se cambió el color del texto: --insumos-cafe y --color-graphite ya tenían contraste suficiente sobre este panel. Ahora que .insumos-header__divider está oculto (ver más abajo), el hueco inferior ya no necesita calc() para esquivarlo: -24px simétrico con el superior (-16px en móvil), centrando el texto en altura. Izquierda/derecha simétricos (-72px / -32px) y más anchos que antes para un panel alargado, con el texto centrado en ancho gracias al text-align:center heredado (.text-center) sobre una caja que se ajusta a su contenido (width: fit-content). Contorno con textura: en vez de un solo border plano, dos sombras interiores (un filo claro arriba a la izquierda, uno oscuro abajo a la derecha, ambas de 1px) simulan un borde grabado/biselado con ligera dimensión — más "textura" que una línea sólida uniforme, sin volverse un patrón llamativo. El border en sí queda muy fino y discreto, solo para cerrar el contorno. */ /* Ronda "catálogo editorial": panel retirado a petición explícita del usuario ("eliminar esa sensación de tarjeta/contenedor... el título y subtítulo deben vivir directamente sobre el fondo crema"). content:none basta para que el pseudo-elemento no se pinte — se deja la regla (en vez de borrarla) para no perder el historial de valores por si se retoma más adelante; el @media asociado, más abajo, ya no tiene efecto y se retira por completo. */ .page-insumos .insumos-header::before { content: none; } /* H1 propio de Insumos: el h1 global (base.css) llega hasta 4.5rem, pensado para un hero a pantalla completa — aquí, sin hero, se ve desproporcionado. Mismo peso (700) que el H1 del Hero de Inicio (home-about.css) para que se sienta de la misma familia tipográfica/marca, pero en un tamaño de encabezado de sección, no de hero. */ /* Tamaño igualado al H1 del Hero de Inicio (home-about.css): mismo sistema de dos tramos — bajo 900px usa el clamp del h1 global (base.css, sin override aquí, igual que hace el Hero) y desde 901px el mismo clamp reducido que usa .page-home .home-hero__title. Antes tenía un clamp propio distinto en todo el rango. */ /* Ronda "catálogo editorial": peso 700→600 ("medium/semibold elegante", ya no un bold pesado) y se retira el text-shadow — existía para mantener contraste sobre la fotografía de fondo (retirada más abajo, .insumos-bg), sin ella es innecesario y el propio café oscuro sobre crema ya tiene contraste de sobra ("sin sombra" pedido). */ .page-insumos .insumos-header__title { font-weight: 600; letter-spacing: -0.02em; color: var(--insumos-cafe); /* Ronda "eliminar subtítulo": sin .insumos-header__intro ya no hay nada después del H1 dentro del header que necesite este espacio (antes separaba título↔subtítulo) — el tramo H1→navegación ahora lo controla únicamente el margin-bottom de .insumos-header. */ margin-bottom: 0; /* Ronda "título largo" (antes "Insumos", ahora "Catálogo: Insumos & Equipamiento"): el line-height compacto del h1 global (1.08, pensado para una sola palabra) se abre un poco para que un eventual salto a 2 líneas respire — mismo tratamiento en todos los breakpoints, sin max-width artificial: el salto de línea lo decide el ancho real del contenedor en cada tamaño. */ line-height: 1.18; } /* Ronda "microajuste móvil": -7% de font-size solo en móvil real (<701px; 701-900px es tablet y sigue heredando el clamp del h1 global de base.css, sin cambios). Ese h1 global (clamp(2.625rem, 1.6rem + 4.2vw, 4.5rem)) es compartido por el sitio — en vez de tocarlo, se sobreescribe aquí, solo para este título y solo en este rango, con los 3 valores del clamp multiplicados por 0.93: esto preserva la misma curva/lógica responsive (la razón de reducción es idéntica en cualquier ancho de este rango, incluidos los extremos donde el clamp toca su piso o techo) en vez de solo restar un valor fijo. line-height (1.18, arriba) y letter-spacing (-0.02em, arriba) son relativos a em/sin unidad, así que ya escalan proporcionalmente con este nuevo tamaño sin necesidad de tocarlos. Peso, color, alineación, ancho del bloque, categorías y catálogo no se tocan. */ @media (max-width: 700px) { .page-insumos .insumos-header__title { font-size: clamp(2.44rem, 1.488rem + 3.906vw, 4.185rem); } } @media (min-width: 901px) { .page-insumos .insumos-header__title { /* Ronda "título largo": el tamaño baja de 56-64px a 48-56px — con 4x más texto que "Insumos", el tamaño anterior se veía apretado contra el ancho del contenedor (1200px) o forzaba un salto de línea poco equilibrado. En monitores anchos (~1000px+ de viewport) el título entra en una sola línea con aire de sobra; en desktop más angosto (901-1000px) salta a 2 líneas de forma natural, sin ayuda de max-width. Ronda "microajustes de cierre": -4% adicional (48-56px → ~46-54px) — seguía sintiéndose muy cerca del límite horizontal del contenedor en una línea; mismos saltos de línea naturales, solo un poco más de aire. */ font-size: clamp(2.88rem, 2.3rem + 1.44vw, 3.36rem); } } /* Ronda "catálogo editorial": ancho controlado (460px, ya dentro de lo pedido) pero ya no centrado (margin auto → 0, alineado a la izquierda igual que el título). Cursiva retirada (no la usa ningún otro subtítulo secundario del sitio) y text-shadow retirado (mismo motivo que el título, ya no hay fotografía de fondo que contrastar). Tamaño 1.12rem→1rem (16px, dentro de 15-17px pedido) y más espacio respecto al título (1.375rem→1.25rem... en realidad el espacio real lo da ahora margin-bottom del título, ver más abajo — aquí solo queda el margin-top mínimo de reset). Ronda "encabezado centrado": max-width 460px→560px (dentro de 520-620px pedido) + margin-inline:auto para centrarlo bajo el título ya centrado (arriba). margin-block se mantiene en 0: la separación respecto al título la sigue dando el margin-bottom de .insumos-header__title. */ /* Se retira a petición del usuario: el panel de arriba ya delimita visualmente el encabezado, la línea quedaba de sobra. Oculta en vez de eliminada del HTML — no se toca la estructura ni JavaScript. */ .page-insumos .insumos-header__divider { display: none; width: min(180px, 40%); height: 1px; margin: var(--space-md) auto 0; background: linear-gradient(to right, transparent, var(--color-sand), transparent); } .page-insumos .insumos-header__divider.reveal { transition-delay: calc(var(--stagger-step) * 2); } /* Fondo de la sección: imagen estática (ver insumos.html) en vez de la textura/tinte estático anterior. background-color se conserva como respaldo (se ve si la imagen no carga). */ .page-insumos #insumos { position: relative; isolation: isolate; background-color: var(--insumos-cream); } /* Imagen de fondo: cubre TODA la sección (igual que el Hero de Inicio), pero solo queda expuesta en la franja del encabezado — el panel de categoría activo tiene su propio fondo opaco (.insumos-cat, más abajo) y la tapa de forma natural, sin necesidad de recortar la imagen a una altura fija. Archivo original del usuario sin modificar, solo copiado a assets/img/insumos/fondo-insumos.jpg; el encuadre se resuelve aquí con background-size/position, no editando el archivo. */ /* Ronda "catálogo editorial": la fotografía de fondo y su overlay se ocultan (display:none, no se borran del HTML) — se pidió explícitamente que el título/subtítulo "vivan directamente sobre el fondo crema de TASS", lo que implica retirar la imagen que vivía detrás de todo #insumos. El fondo crema plano (--insumos-cream, ver arriba en #insumos) queda expuesto de forma natural, sin más cambios. Los elementos siguen en el DOM (aria-hidden ya los marcaba como decorativos) por si se retoman más adelante. */ .page-insumos .insumos-bg, .page-insumos .insumos-bg__overlay { display: none; } /* ---------- Carrusel de categorías (índice editorial, una sola línea) ---------- Abandona por completo el vocabulario de "chip/botón" (sin bordes, sin fondo, sin caja): cada categoría es una palabra tipográfica suelta, como el índice de un catálogo impreso. La categoría activa se distingue por peso + color + una línea inferior fija (nunca solo color); el hover expande esa misma línea desde el centro, con un desplazamiento vertical mínimo — sin bordes, sombras ni fondos que aparezcan/desaparezcan. CARRUSEL (reemplaza el fade/scroll simple de la versión anterior): .insumos-index-carousel es un fila flex de 3 partes — [flecha][nav][flecha] — así las flechas viven FUERA del área que hace scroll: nunca se superponen al texto de la primera/última categoría, no hace falta fade ni máscara. .insumos-index sigue siendo el elemento con overflow-x real (scroll con mouse/trackpad/touch nativo, más arrastre con mouse e insumos.js) y ahora además usa scroll-snap para que, tras soltar un arrastre o un swipe, la fila quede alineada de forma limpia en vez de en una posición intermedia. cursor:grab / .is-dragging→grabbing y user-select:none en los items son para el arrastre con mouse (ver insumos.js). El scrollbar sigue oculto en los tres motores (WebKit/Firefox/Edge legacy). */ /* Ronda "más presencia": +40px hacia la primera subsección (32px → 72px, dentro de 30-45px pedido) — único valor tocado para este tramo (la navegación "termina de respirar" antes del catálogo). Ronda "ajuste fino": -42px (72px → 30px, dentro de 35-50px de reducción pedido) — sumado a los 40px de padding-top de .insumos-cat (sin tocar), el tramo navegación→"Mallas para invernadero" queda en ~70px. Único valor tocado para este tramo; el padding-top de cada .insumos-cat individual y el margin-top entre subsecciones posteriores (.insumos-group + .insumos-group) no se tocaron. */ .page-insumos .insumos-index-carousel { display: flex; align-items: center; gap: 0.5rem; /* Ronda "eliminar subtítulo": +8px (12px → 20px) — sumado a los 40px de padding-top de .insumos-cat (sin tocar), el tramo categorías→"Mallas para invernadero" queda en ~60px, dentro de los 55-70px pedidos. Margin normal: todo el contenido posterior sube/ baja junto en el flujo normal. */ margin: 0 auto 1.25rem; } .page-insumos .insumos-index { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; column-gap: 3.5rem; padding: 4px 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-padding-inline: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .page-insumos .insumos-index.is-dragging { cursor: grabbing; scroll-snap-type: none; } .page-insumos .insumos-index::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .page-insumos .insumos-index { scroll-behavior: auto; } } /* Flechas: pequeñas, circulares, en la paleta de la página (papel + café + dark olive al hover). disabled (JS, insumos.js según posición real de scroll) las oculta con opacity:0 en vez de display:none, para que no haya saltos de layout cuando aparecen/desaparecen. Ronda "flecha interactiva": área clicable 30px→34px (dentro de 32-38px pedido, "ligeramente más perceptible"); el resto del tratamiento (borde fino, fondo crema, flecha café, sin sombras fuertes) ya cumplía lo pedido, sin cambio. */ .page-insumos .insumos-index-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background-color: var(--insumos-paper); border: 1px solid var(--color-border); border-radius: 999px; color: var(--insumos-cafe); box-shadow: 0 6px 16px -10px rgba(70, 49, 31, 0.3); cursor: pointer; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, opacity 220ms ease, box-shadow 220ms ease; } /* Ronda "flecha interactiva": 15px→16px (mismo ratio ~el círculo agrandado). transition propia para transform: la usan tanto el hover (más abajo) como el corte de la microanimación en loop al pasar el cursor. */ .page-insumos .insumos-index-arrow svg { width: 16px; height: 16px; transition: transform 300ms var(--ease-elegant); } .page-insumos .insumos-index-arrow:hover:not(:disabled) { border-color: var(--insumos-olive); color: var(--insumos-olive); box-shadow: 0 8px 18px -9px rgba(70, 49, 31, 0.32); } /* Ronda "flecha interactiva": microanimación ambiental — la flecha permanece quieta la mayor parte del ciclo (3s totales) y hace un pequeño gesto horizontal de 5px (dentro de 4-6px pedido) en los últimos ~600ms de cada ciclo (dentro de 500-700ms pedido), volviendo a su lugar — "cada 2.5-3.5s" se cumple con el propio período del loop (3s). --next se desplaza a la derecha, --prev (visible solo después de avanzar, misma lógica ya existente) en espejo hacia la izquierda. Se aplica solo si el botón NO está disabled (mismo :disabled real que ya oculta la flecha por completo, sin tocar esa lógica). --ease-elegant: mismo easing suave que el resto del sitio, sin bounce ni escalado. */ .page-insumos .insumos-index-arrow--next:not(:disabled) svg { animation: insumos-arrow-nudge-next 3s var(--ease-elegant) infinite; } .page-insumos .insumos-index-arrow--prev:not(:disabled) svg { animation: insumos-arrow-nudge-prev 3s var(--ease-elegant) infinite; } @keyframes insumos-arrow-nudge-next { 0%, 80% { transform: translateX(0); } 90% { transform: translateX(5px); } 100% { transform: translateX(0); } } @keyframes insumos-arrow-nudge-prev { 0%, 80% { transform: translateX(0); } 90% { transform: translateX(-5px); } 100% { transform: translateX(0); } } /* Ronda "flecha interactiva": al hover se anula la animación en loop (si no, seguiría disputando la propiedad transform con este valor) y la flecha interior se desplaza 4px (dentro de 3-5px pedido) con la misma transición de 300ms declarada arriba (dentro de 250-350ms pedido). Al quitar el cursor, la regla deja de aplicar y el loop retoma su ciclo con normalidad. */ .page-insumos .insumos-index-arrow--next:hover:not(:disabled) svg { animation: none; transform: translateX(4px); } .page-insumos .insumos-index-arrow--prev:hover:not(:disabled) svg { animation: none; transform: translateX(-4px); } /* Ronda "flecha interactiva": respeta prefers-reduced-motion — se elimina el loop automático, queda solo el estado estático y el comportamiento funcional (clic, disabled) intactos. */ @media (prefers-reduced-motion: reduce) { .page-insumos .insumos-index-arrow svg { animation: none; } } .page-insumos .insumos-index-arrow:focus-visible { outline: 2px solid var(--insumos-olive); outline-offset: 2px; } .page-insumos .insumos-index-arrow:disabled { opacity: 0; pointer-events: none; box-shadow: none; } .page-insumos .insumos-index__item { position: relative; display: inline-block; flex-shrink: 0; scroll-snap-align: start; -webkit-user-drag: none; padding: 0.35rem 0.5rem 0.55rem; /* Ronda "catálogo editorial": 15.2px → 14px, y ronda "más presencia": 14px → 15px (dentro de 14-16px pedido ahora). Peso 500 ("medium"). Color secundario, tracking y línea inferior de 1px en hover/activo: sin cambio, ya cumplían lo pedido. */ font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.045em; text-transform: uppercase; color: var(--color-graphite); white-space: nowrap; user-select: none; transition: color 260ms var(--ease-elegant), transform 260ms var(--ease-elegant); } .page-insumos .insumos-index__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background-color: var(--color-sand); transform: scaleX(0); transform-origin: center; transition: transform 280ms var(--ease-elegant); } .page-insumos .insumos-index__item:hover, .page-insumos .insumos-index__item:focus-visible { color: var(--color-espresso); transform: translateY(-1px); } .page-insumos .insumos-index__item:hover::after, .page-insumos .insumos-index__item:focus-visible::after { transform: scaleX(1); } .page-insumos .insumos-index__item:focus-visible { outline: 2px solid var(--color-espresso); outline-offset: 4px; } /* Categoría activa: café/espresso como acento (antes dark olive), el mismo tono que el resto del sitio usa para "activo" (.main-nav a[aria-current="page"] en layout.css, .lang-btn.is-active en components.css — ver más abajo el hover, que ya usaba este mismo café). Activo y hover comparten color a propósito: peso tipográfico + línea inferior FIJA (vs. la del hover, que solo aparece al pasar el mouse) + aria-selected siguen distinguiendo el estado activo, sin depender únicamente del color. Los tabs inactivos no se tocan: se quedan en var(--color-graphite), el gris/café neutro que ya tenían. */ .page-insumos .insumos-index__item.is-active { color: var(--color-espresso); /* Ronda "catálogo editorial": 700→600 — un peso más dentro de "medium", la distinción principal la sigue dando color + línea inferior fija. */ font-weight: 600; } .page-insumos .insumos-index__item.is-active::after { background-color: var(--color-espresso); transform: scaleX(1); } /* Stagger de entrada: [data-reveal-group] de base.css ya cubre 6 hijos; el índice tiene 9 categorías, así que se extiende el patrón (mismo --stagger-step) solo para esta página en vez de tocar el sistema global. */ .page-insumos .insumos-index__item:nth-child(7) { transition-delay: calc(var(--stagger-step) * 6); } .page-insumos .insumos-index__item:nth-child(8) { transition-delay: calc(var(--stagger-step) * 7); } .page-insumos .insumos-index__item:nth-child(9) { transition-delay: calc(var(--stagger-step) * 8); } @media (prefers-reduced-motion: reduce) { .page-insumos .insumos-index__item { transition: color 150ms ease; } .page-insumos .insumos-index__item::after { transition: none; } .page-insumos .insumos-index__item:hover, .page-insumos .insumos-index__item:focus-visible { transform: none; } } /* Móvil: sigue siendo un carrusel de una sola línea (swipe con el dedo, más las flechas como apoyo) — ya no se convierte en grid de dos columnas. Solo se ajustan tamaño/separación/flechas para la fila más angosta; overflow-x, scroll-snap y flex-shrink:0 se heredan tal cual de la regla base de arriba. */ @media (max-width: 700px) { .page-insumos .insumos-index-carousel { margin-bottom: var(--space-sm); gap: 0.35rem; } .page-insumos .insumos-index { column-gap: 2.25rem; padding-inline: 8px; scroll-padding-inline: 8px; } .page-insumos .insumos-index-arrow { width: 26px; height: 26px; } .page-insumos .insumos-index-arrow svg { width: 13px; height: 13px; } .page-insumos .insumos-index__item { font-size: 0.8rem; white-space: nowrap; } } /* ---------- Catálogo: bloques de categoría ---------- Borde fino alrededor de TODO el bloque del catálogo (encabezado de categoría + línea de acento + panel de productos), para delimitarlo del fondo/encabezado de Insumos que queda arriba. Color: var(--color-espresso) (antes --insumos-olive, dark olive) — mismo café que usa el resto del sitio como acento (H1 del hero, botones), para que el catálogo se sienta parte de la misma identidad visual de TASS, no un verde aparte. Se suma una sombra ambiental muy discreta en el mismo tono café (mismo lenguaje que la sombra de .home-about__media: difuminado amplio, opacidad baja) para dar una sensación de profundidad/elevación elegante sin volverse llamativa. Mismo radio que ya usa el panel activo (--radius-md), así que no introduce ningún lenguaje visual nuevo. Sin fondo propio: el fondo/imagen de la sección sigue viéndose en el margen entre el borde y el contenido. Acabado "hairline" (a petición del usuario, sustituye el tratamiento "grabado/biselado" que tenía antes): línea fina de 1px (antes 2px), sin el filo claro arriba-izquierda ni la sombra oscura abajo-derecha del bisel — solo la sombra ambiental de arriba, ahora más tenue (0.45 a 0.22 de opacidad), como único acompañamiento. Se ve más ligero y editorial, menos "recuadro de caja". El panel del encabezado (.insumos-header::before) conserva su propio borde olive sin cambios, y el borde interior del panel activo (.js-tabs-ready .insumos-cat, más abajo) tampoco se tocó esta vez. */ /* Ronda "catálogo editorial": se retira el borde exterior de 2px + la sombra ambiental — a petición explícita del usuario ("eliminar sensación de contenedor dentro de contenedor... reduce significativamente los bordes visibles"). El catálogo ya no es "una sola caja": queda estructurado solo por espacio + tipografía, sobre el mismo fondo crema de la sección. padding también se retira aquí (pasa a vivir únicamente en .insumos-cat, ver abajo) para no apilar dos paddings horizontales distintos y así lograr tarjetas de 350-400px en el grid de 3 columnas (ver .insumos-grid/.product-card más abajo). */ .page-insumos .insumos-catalog { display: flex; flex-direction: column; } /* Ronda "catálogo editorial": padding horizontal retirado (vivía duplicado aquí Y en .insumos-catalog, arriba) — el único margen horizontal ahora es el de .container (heredado, --space-sm en todo breakpoint), evitando el "contenedor dentro de contenedor". Vertical: más aire antes de cada categoría (--space-sm→2.5rem) y se conserva bastante después (--space-lg) antes de la siguiente. */ .page-insumos .insumos-cat { scroll-margin-top: 96px; padding: 2.5rem 0 var(--space-lg); } /* Ronda "catálogo editorial": franjas alternadas retiradas — creaban una sucesión de "cajas" papel/crema; ahora todo el catálogo comparte el mismo fondo crema plano de la sección (--insumos-cream), separado solo por el espacio entre categorías/grupos. */ /* margin-bottom quitado: este encabezado ahora solo contiene elementos ocultos (título, subtítulo, línea), así que ese margen ya no separaba nada visible, solo agregaba hueco antes del primer grupo de productos. */ .page-insumos .insumos-cat__header { max-width: 680px; margin: 0 auto; text-align: center; } /* Oculto a petición del usuario: los títulos de cada categoría (las 9 dentro del catálogo) se quitan visualmente. Igual que .insumos-cat__desc más abajo, se ocultan por CSS sin tocar HTML/JS. */ .page-insumos .insumos-cat__title { display: none; font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.1rem); letter-spacing: -0.01em; } /* Oculto a petición del usuario: los subtítulos de cada categoría (las 9 dentro del catálogo) se quitan visualmente. Se ocultan por CSS en vez de borrarse del HTML — el texto y el elemento siguen existiendo para cada categoría, no se toca la estructura ni JavaScript. */ .page-insumos .insumos-cat__desc { display: none; color: var(--color-graphite); font-size: 0.95rem; margin-top: 0.5rem; } /* Entrada escalonada título → descripción → línea (mismo sistema .reveal/.reveal-up de base.css, solo se ajusta el retraso). */ .page-insumos .insumos-cat__desc.reveal-up { transition-delay: var(--stagger-step); } /* Oculta a petición del usuario junto con el título y el subtítulo de cada categoría — mismo criterio: CSS únicamente, sin tocar HTML/JS. */ .page-insumos .insumos-cat__divider { display: none; width: 48px; height: 2px; margin: var(--space-md) auto 0; background-color: var(--color-sand); border-radius: 999px; } .page-insumos .insumos-cat__divider.reveal { transition-delay: calc(var(--stagger-step) * 2); } /* Línea de transición entre categorías: mismo lenguaje visual que las líneas de sección (ver insumos-servicios-shared.css), solo que aquí separa bloques dentro de la misma sección. Único lugar del catálogo donde el dark olive aparece en un separador (Etapa 1, "en algunas zonas de transición, pero no en todas" — los demás dividers, arriba, se quedan en sand). */ .page-insumos .insumos-cat-transition { width: min(50%, 360px); height: 1px; margin: 0 auto; background: linear-gradient(to right, transparent, var(--insumos-olive-soft), transparent); } /* ---------- Grupos de productos (subcategoría) ---------- Ronda "catálogo editorial": más aire antes de cada subsección (var(--space-md)/32px → 4rem/64px). Ronda "más presencia": 64px → 88px (dentro de 70-100px pedido) — único valor tocado para este ritmo (separación después de la última fila de una subsección y antes del título de la siguiente), sin sumar otro margin/padding adicional en ningún otro punto de la cadena. */ .page-insumos .insumos-group + .insumos-group { margin-top: 5.5rem; } /* Ronda "catálogo editorial": título de subsección con más presencia — 14.7px→18-22px (clamp), peso 700→500 ("medium"), se retira uppercase (a ese tamaño mayor afectaba la legibilidad; el texto real, p.ej. "Mallas para invernadero", ya está escrito en case normal en el HTML) y con ello el tracking especial de mayúsculas (0.05em) también se retira. Se retira también el border-bottom (menos "caja", la separación del grid ahora la da el espacio, ver margin-bottom). Ronda "más presencia": 18-22px → 20-24px (dentro de lo pedido ahora), mismo peso 500 ("medium", nunca bold pesado). */ .page-insumos .insumos-group__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.005em; color: var(--color-espresso); margin-bottom: 1.75rem; } /* Ronda "catálogo editorial": grid de 3 columnas fijas en desktop (antes escalaba a 4 desde 1200px) — "en 1440px busca 3 productos por fila", así que se retira ese último salto. Gap horizontal 32px→28px y vertical 32px→48px (dentro de 24-34px / 40-60px pedido) desde 900px; en mobile/tablet (<900px, fuera de alcance de este Paso 1) se deja el mismo var(--space-sm) de siempre. */ .page-insumos .insumos-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); } @media (min-width: 600px) { .page-insumos .insumos-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .page-insumos .insumos-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.75rem; } } /* ---------- Tarjeta de producto ---------- Ronda "más presencia": borde aún más tenue (var(--color-border) puro → mezclado 60/40 con el propio fondo de la tarjeta) — "muy tenue, que no se convierta en tabla". Se conserva al pasar el cursor (border-color: var(--color-sand), más abajo, sin cambio). */ .page-insumos .product-card { display: flex; flex-direction: column; background-color: var(--color-paper); border: 1px solid color-mix(in srgb, var(--color-border) 60%, var(--color-paper) 40%); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } /* Ronda "catálogo editorial": hover más discreto (translateY -3px→-2px, sombra 0.28→0.16 de opacidad) — "sin sombras fuertes", una elevación casi imperceptible en vez de un lift pronunciado. */ .page-insumos .product-card:hover, .page-insumos .product-card:focus-within { border-color: var(--color-sand); transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(70, 49, 31, 0.16); } /* Miniatura: reutiliza el componente global .img-placeholder (layout.css) ajustado a un formato compacto de tarjeta de catálogo. Proporción fija (4:3) para que, al incorporar la fotografía real, la tarjeta no cambie de altura ni deforme la imagen: basta con colocar un dentro de este contenedor, la regla de abajo ya define el recorte (object-fit). */ /* Ronda "catálogo editorial": se retira la línea divisoria foto/texto (border-width:0 0 1px + border-color espresso, más abajo) — un borde interno adicional era exactamente el tipo de "ruido visual" señalado ("no mediante muchas cajas"); el propio padding del cuerpo ya separa visualmente la imagen del texto. Proporción 4:3 sin cambio (con el nuevo ancho de tarjeta, ~350-400px, da una altura de imagen de ~260-300px, dentro de 240-280px pedido). */ .page-insumos .product-card__media { position: relative; aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; } .page-insumos .product-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .page-insumos .product-card:hover .product-card__media img, .page-insumos .product-card:focus-within .product-card__media img { transform: scale(1.02); } .page-insumos .product-card__media .img-placeholder__icon { width: 24px; height: 24px; transition: transform 0.3s var(--ease-elegant); } .page-insumos .product-card:hover .img-placeholder__icon, .page-insumos .product-card:focus-within .img-placeholder__icon { transform: scale(1.04); } /* Miniatura con fotografía real: catálogo profesional TASS. Fondo limpio + object-fit:contain (nunca recorta el producto) + firma de marca (logo TASS pequeño) sobre el área fotográfica. Especificidad deliberadamente alta en los selectores de abajo para ganarle a las reglas genéricas ".product-card__media img" de arriba (pensadas para el recorte tipo placeholder) sin tocarlas ni afectar otras categorías. */ /* Ronda "más presencia": +1pp de padding en cada lado — más aire alrededor del producto sin ampliarlo artificialmente hasta tocar los bordes (object-fit:contain sin cambio). El alto real de esta área ya sube a ~300px con el nuevo ancho de tarjeta (~411px × 4:3), dentro de 260-300px pedido — sin tocar aspect-ratio. */ .page-insumos .product-card__media--photo { display: flex; align-items: center; justify-content: center; background-color: #ffffff; padding: 16% 13% 11%; } .page-insumos .product-card__media--photo .product-card__photo { width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transform: scale(0.98); transition: opacity 0.7s var(--ease-elegant), transform 0.7s var(--ease-elegant); } .page-insumos .product-card.is-visible .product-card__media--photo .product-card__photo { opacity: 1; transform: scale(1); } .page-insumos .product-card:hover .product-card__media--photo .product-card__photo, .page-insumos .product-card:focus-within .product-card__media--photo .product-card__photo { transform: scale(1.02); } .page-insumos .product-card__brand { position: absolute; top: 10px; left: 10px; width: 14%; min-width: 36px; max-width: 64px; z-index: 2; opacity: 0; pointer-events: none; background-color: rgba(255, 255, 255, 0.55); border-radius: 4px; padding: 3px 4px; transition: opacity 0.7s var(--ease-elegant) 0.12s; } .page-insumos .product-card.is-visible .product-card__brand { opacity: 0.96; } .page-insumos .product-card__brand img { display: block; width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .page-insumos .product-card__media--photo .product-card__photo, .page-insumos .product-card__brand { transition: none; opacity: 1; transform: none; } } /* Ronda "catálogo editorial": más aire interno (16px→24px) y más separación entre nombre y acción (0.6rem/9.6px→1rem/16px) — "espacio suficiente para imagen/nombre/acción sin sentirse comprimido". Ronda "más presencia": otro salto — padding 24px→28px (alrededor de la imagen, debajo del CTA) y gap 16px→20px (entre nombre y CTA). */ .page-insumos .product-card__body { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 1; } /* Ronda "catálogo editorial": 14.7px→16-18px (clamp, dentro de lo pedido), peso 600→500 ("medium") y line-height más cómodo (1.35→1.4). Ronda "más presencia": 16-18px → 17-19px (dentro de lo pedido ahora). flex:1 sin cambio — sigue empujando la acción al mismo borde inferior en toda la fila, sin importar cuántas líneas ocupe el nombre. */ .page-insumos .product-card__name { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); font-weight: 500; color: var(--color-espresso); line-height: 1.4; flex: 1; } /* Ronda "catálogo editorial": de botón (.btn.btn-secondary.btn-block, componentes.css) a CTA editorial tipo enlace — mismo texto, mismo href/función (data-wa-product, target, rel: todo intacto en el HTML), solo cambia la presentación. Se anula la caja del botón global (fondo, borde, ancho completo, padding grande) y queda como texto café con una flecha discreta (::after, no agregada al HTML) y un subrayado al pasar el cursor — sin animaciones elaboradas. */ /* Ronda "más presencia": 13px→14px (dentro de 13-14px pedido) y peso 500→600 para un poco más de contraste (el color, --color-espresso, ya es el más oscuro de la paleta — no hay a dónde oscurecerlo más). Sigue sin caja/fondo/borde: formato enlace intacto. */ .page-insumos .product-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; width: auto; padding: 0; background-color: transparent; border: none; border-radius: 0; color: var(--color-espresso); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; } .page-insumos .product-card__cta::after { content: "\2192"; } .page-insumos .product-card__cta:hover, .page-insumos .product-card__cta:focus-visible { background-color: transparent; color: var(--color-espresso); transform: none; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Selector interactivo de categorías (panel único) ---------- Progresivo: estas reglas solo aplican bajo html.js-tabs-ready, clase que agrega un script inline en apenas confirma que JS corrió. Sin JS (o si falla), esta clase nunca existe y las 9 categorías se ven completas una tras otra, exactamente como antes — nada queda oculto de forma permanente. Ver assets/js/insumos.js para la lógica de activación. */ .js-tabs-ready .page-insumos .insumos-cat:not(.is-active) { display: none; } .js-tabs-ready .page-insumos .insumos-cat-transition { display: none; } /* Línea de acento que conectaba visualmente el selector con el panel activo: quitada a petición del usuario ahora que .insumos-catalog ya tiene su propio borde (arriba) delimitando el bloque completo. */ /* Ronda "catálogo editorial": se retira el panel (fondo papel + borde + sombra grabada/biselada) — a petición explícita del usuario ("no crear una gran caja blanca para el catálogo"). La categoría activa ahora vive sobre el mismo fondo crema plano de la sección, separada solo por el espacio de .insumos-cat (arriba). Se conserva la transición de opacity/transform: es la animación de entrada/salida al cambiar de categoría (lógica intacta, .is-leaving más abajo), no parte del "panel" visual retirado. */ .js-tabs-ready .page-insumos .insumos-cat { transition: opacity 180ms var(--ease-elegant), transform 180ms var(--ease-elegant); } /* Salida corta al cambiar de categoría: fade + leve desplazamiento hacia arriba, mismo par opacity/transform y el mismo --ease-elegant que usa .reveal-up, solo con una duración más corta pensada para una micro-interacción de clic (no para revelado por scroll). */ .js-tabs-ready .page-insumos .insumos-cat.is-leaving { opacity: 0; transform: translateY(-6px); } @media (prefers-reduced-motion: reduce) { .js-tabs-ready .page-insumos .insumos-cat { transition: none; } }