/* ========================================================================== TASS — servicios.css Estilos exclusivos de servicios.html: encabezado editorial (único de la página, sin hero fotográfico — ya no hay separación entre "hero" y "contenido") y el grid de las 4 capacidades de servicio. 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). Selector: . ========================================================================== */ /* ---------- Fondo unificado con el resto del sitio ---------- Continuidad visual Servicios ↔ Inicio/Acerca de: mismo --color-linen plano que ya usan esas páginas (la variable global definida en base.css, no una aproximación local) — antes #capacidades heredaba --color-off-white de la clase .section--alt (base.css), un crema ligeramente distinto. #capacidades usa un selector de ID a propósito para ganarle en especificidad a .section--alt sin tocar esa clase compartida (la usan otras páginas). .servicios-secondary (más abajo) se actualiza igual, para que toda la página comparta un solo tono. Ronda "equilibrio final 2": la franja blanca visible antes de "También te apoyamos con" no venía del background-color (ya corregido arriba) sino de .page-services .section--alt (insumos-servicios-shared.css), que dibuja un degradado a --color-paper (blanco) de 48px en los bordes superior E INFERIOR de cualquier .section--alt — #capacidades es una de ellas. Nunca se había desactivado ese background-image, solo el background-color. Se anula aquí (background-image:none), específico de esta página vía el mismo selector de ID — Insumos, que también usa .section--alt, no se ve afectado. */ .page-servicios #capacidades { background-color: var(--color-linen); background-image: none; } /* Ronda "refinamiento móvil": la fotografía y "También te apoyamos con" se sentían demasiado separadas. El tramo real = este padding-bottom (heredado de .section/--space-xl, ya en 84px a ≤700px vía base.css) + el padding-top de .servicios-secondary (16px, sin tocar) = 100px. Se recorta solo este lado (84px → 57px) para un total de 73px, -27% (dentro de 25-30% pedido). Fotografía (archivo, tamaño, ancho, crop, object-fit, radio, posición) sin cambios — solo el espacio después de ella. --space-xl (variable global) no se toca: este override es específico de #capacidades (ID exclusivo de esta página) y solo <701px; tablet (701-800px) y desktop conservan 112px heredado de --space-xl, sin cambios. */ @media (max-width: 700px) { .page-servicios #capacidades { padding-bottom: 3.5625rem; } } /* ---------- Encabezado de la sección Servicios ---------- Mismo tamaño/peso/tracking que el encabezado de Insumos y Acerca de (.insumos-header__title / .about-hero__content h1): Insumos, Servicios y Acerca de comparten tratamiento tipográfico de encabezado como una sola familia visual — lo que las distingue es el contenido que sigue (catálogo / capacidades / historia), no el encabezado. Antes el H1 de Servicios no tenía esta regla y heredaba el tamaño del h1 global (pensado para un hero a pantalla completa), por eso se veía desproporcionado. */ /* Rediseño editorial: más presencia — peso 700→600 ("medium/semibold elegante", ya no bold pesado) y tamaño ampliado en desktop (ver @media abajo), mismo tratamiento que ya usan Insumos/Acerca de para sus encabezados grandes. Alineación izquierda y line-height compacto ya los resolvía .servicios-header (más abajo, "Layout"), sin cambio. Ronda "nuevo H1 (fusión con el subtítulo)": el H1 pasó de "Servicios" (9 caracteres) al texto completo del antiguo subtítulo, "Soluciones técnicas, instalación, mantenimiento y acompañamiento especializado" (79 caracteres) — el tamaño anterior (56-64px desktop) desbordaba en muchísimas líneas cortas dentro de la columna de contenido (~580px a 1440px, grid 55/45 sin tocar). Se redujo a 24-32px móvil/tablet, 32-38px desktop para ~3 líneas equilibradas. Ronda "simplificar el H1": el texto se acorta a "Soluciones técnicas para la agricultura protegida" (50 caracteres) — se pidió que, al ser más corto, recupere algo de presencia. El límite real sigue siendo el ancho de la columna (~580px a 1440px, sin tocar): a este ancho, 50 caracteres caben en 2 líneas razonablemente equilibradas ("Soluciones técnicas para" / "la agricultura protegida" o similar, según el corte natural real) recién a partir de ~36-40px — subir mucho más de ahí (por ejemplo, cerca del tamaño de una sola palabra como "Servicios", 56-64px) volvería a forzar 3+ líneas o un salto incómodo con una palabra suelta. Se sube el techo del clamp de 38px a 40px y se sube el piso (36px en vez de 32px a partir de 901px) — un aumento real pero acotado por lo que el ancho permite en 1-2 líneas. line-height (1.05, dentro de 0.98-1.08 pedido) sin cambio, sigue encajando para 1-2 líneas. */ .page-servicios .servicios-header__title { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-espresso); } @media (min-width: 901px) { .page-servicios .servicios-header__title { /* 28-36px → 36-40px. */ font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.5rem); } } /* Ronda "refinamiento de servicios": se retira a petición del usuario ("no quiero un separador visual entre la introducción y los servicios; la transición debe conseguirse únicamente mediante espacio negativo") — oculta por CSS, sin tocar HTML/JS, mismo criterio ya usado en otras páginas del sitio para elementos retirados visualmente. */ .page-servicios .servicios-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-servicios .servicios-header__divider.reveal { transition-delay: calc(var(--stagger-step) * 2); } /* ---------- Capacidades ---------- Rediseño editorial: de "ícono + texto centrado" a una composición editorial más sólida — título → descripción breve → CTA tipo enlace, todo alineado a la izquierda. Sigue sin caja, sin borde, sin sombra: la presencia viene de escala + tipografía + espacio, nunca de un contenedor. 2 columnas × 2 filas en desktop (≥600px, sin cambio de breakpoint), ahora sin el max-width:720px que antes centraba un grid angosto — ocupa el ancho completo de la columna de contenido. Gap más generoso (antes 64px/32px) para que cada servicio tenga aire de sobra. Ronda "sin íconos": se retira por completo el ícono/SVG que vivía entre el índice y el título — a petición explícita del usuario, sin reemplazarlo por otro símbolo. Ronda "refinamiento de servicios": gap vertical (entre la fila 01/02 y la fila 03/04) 56px → 80px, +24px dentro de 20-30px pedido. Gap horizontal (48px) sin cambio. Ronda "simplificación editorial 2": se retiran también el índice (01-04) y su raya — a petición explícita del usuario, la jerarquía queda solo en tipografía + espacio negativo. position:relative + ::before (más abajo, solo desktop ≥600px) añaden una hairline vertical muy sutil entre las dos columnas del grid, como único recurso editorial de la retícula. */ .page-servicios .servicios-grid { display: grid; grid-template-columns: 1fr; gap: 5rem 3rem; position: relative; } /* Ronda "refinamiento móvil": -17.5% del gap vertical entre servicios (80px → 66px, dentro de 15-20% pedido) — cada servicio se sentía demasiado aislado. Gap horizontal (48px) sin cambio: no forma parte de lo pedido. Solo <701px; el layout 2×2 de escritorio (gap, grid, hairline) no se toca. Título, descripción, CTA y su relación interna (sin cambios en sus propias reglas, arriba) quedan intactos — el ajuste es exclusivamente ENTRE servicios, no dentro de cada uno. */ @media (max-width: 700px) { .page-servicios .servicios-grid { gap: 4.125rem 3rem; } } @media (min-width: 600px) { .page-servicios .servicios-grid { grid-template-columns: repeat(2, 1fr); } /* Hairline entre columnas: con 2 columnas 1fr/1fr, el 50% horizontal del grid cae exactamente en el centro del gap (48px) entre ambas, sin importar el ancho real del contenedor. position:absolute la saca del flujo de grid (no participa en el posicionamiento de los 4 servicios) y con eso alcanza para que no se muestre en móvil: al vivir dentro de este mismo @media, deja de existir por completo por debajo de 600px, donde la retícula pasa a 1 columna. Muy fina (1px), tono sand ya usado en el sitio como línea divisoria, a baja opacidad, e inset 12px arriba/abajo para no tocar los bordes de la retícula ("sin extenderse exageradamente"). */ .page-servicios .servicios-grid::before { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background-color: color-mix(in srgb, var(--color-sand) 55%, transparent); pointer-events: none; } } .page-servicios .servicios-grid__item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; transition: transform 350ms var(--ease-elegant); } .page-servicios .servicios-grid__item:hover { transform: translateY(-3px); } /* Título de servicio (antes .servicios-grid__text, ahora un

real): 18.4px→24-30px (clamp, dentro de lo pedido), peso 600→500 ("medium"), alineación izquierda, sin el max-width:220px que antes forzaba el ajuste de línea en un bloque centrado — ahora fluye dentro del ancho de la columna del grid. Ronda "simplificación editorial 2": margin-bottom explícito (antes heredado del gap:0.75rem del contenedor, ahora retirado para poder controlar cada separación por separado — ver .servicios-grid__desc más abajo) — mismo valor de siempre (12px), título→descripción sin cambio. Al quitarse el índice de arriba, el título pasa a ser el primer elemento del item sin necesidad de ajustar nada más. */ .page-servicios .servicios-grid__title { margin: 0 0 0.75rem; font-weight: 500; color: var(--color-espresso); font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); line-height: 1.3; } /* Descripción breve (nueva): tono secundario, tamaño de cuerpo discreto, 1-2 líneas según el servicio. Ronda "refinamiento de servicios": ya estaba en 15px (0.9375rem), el propio extremo superior del rango pedido (14-15px) — para entregar la mejora perceptible de legibilidad solicitada, sube un paso más a 16px (1rem). Ronda "simplificación editorial 2": +10% (16px → 17.6px, dentro de 8-12% pedido) para más presencia y legibilidad, sin volverse pesada (peso, color, ancho, line-height sin cambio). margin-bottom explícito (4px) reemplaza al gap compartido del contenedor. Ronda "microajustes finales": margin-bottom baja a 0 (era lo único ajustable sin tocar tamaño/line-height/color de la descripción, que esta ronda pide dejar intactos). El interlineado propio de la descripción (line-height:1.55) ya deja ~4.8px de aire invisible bajo su última línea — sumado al recorte de interlineado del CTA (ver más abajo), es el máximo acercamiento posible sin tocar esta regla más que en este único valor. Ronda "un poco más de aire hacia el CTA": +12px (0 → 0.75rem, dentro de 10-16px pedido). El CTA sigue con margin-top:auto (sin tocar) — como ese auto absorbe el espacio restante de la fila ya estirada (align-items:stretch), añadir aquí un margin-bottom fijo resta esa misma cantidad al espacio "auto" y empuja el CTA hacia abajo el mismo tanto en los 4 servicios por igual, sea cual sea el largo de su descripción — no rompe el anclaje al fondo de la fila. Tamaño/ color/line-height/ancho de la descripción, título, y todo lo demás del bloque: sin cambio. */ .page-servicios .servicios-grid__desc { margin: 0 0 0.75rem; max-width: 320px; color: color-mix(in srgb, var(--color-graphite) 85%, var(--color-ink) 15%); font-size: 1.1rem; font-weight: 400; line-height: 1.55; } /* CTA editorial (nuevo): mismo lenguaje que .product-card__cta en Insumos — sin caja/fondo/borde, texto café con flecha discreta añadida por CSS (::after, no está en el HTML) y subrayado sutil al pasar el cursor. Sin animaciones elaboradas ("en esta etapa"). Ronda "refinamiento de servicios": margin-top pasa a auto — el .servicios-grid__item ya se estira automáticamente a la altura de su fila (comportamiento por defecto de CSS Grid, align-items:stretch, sin overrides), así que 01/02 (y por separado 03/04) ya comparten la misma altura de caja; lo único que faltaba era anclar el CTA al fondo de esa caja en vez de dejarlo pegado a la descripción. Con margin-top:auto el espacio libre restante en cada columna flex se consume ANTES del CTA, empujándolo al borde inferior — sin height fija arbitraria, sin tocar el HTML, aprovechando el grid/flex ya existente. Ronda "simplificación editorial 2": sin line-height propio este elemento heredaba 1.6 del body — a 14px eso deja ~4px de interlineado invisible ENCIMA del texto. line-height:1.1 recorta ese aire. Ronda "microajustes finales": +11% de tamaño (14px → 15.52px, dentro de 10-12% pedido) para más presencia, sigue siendo un enlace editorial (sin negrita nueva, mismo font-weight 500, misma tipografía). Color: mismo --color-espresso mezclado con un poco de --color-ink (12%, mismo recurso ya usado en la descripción de este archivo) para oscurecerlo ligeramente sin introducir un color nuevo. line-height 1.1 → 1.0 (recorte adicional del interlineado propio) — junto con el margin-bottom:0 de la descripción (arriba), la separación percibida total queda en ~4.8-5px (el piso real, determinado por el propio interlineado de la descripción, que esta ronda no se toca) — la reducción máxima posible sin tocar más que estos dos valores, ligeramente corta del mínimo de 5px pedido por ese motivo. margin-top:auto se conserva igual (sigue anclando el CTA al fondo de la fila estirada). */ /* Ronda "microajustes finales 2": +~6% de tamaño adicional (0.97rem → 1.03rem, dentro de 5-8% pedido) — un poco más de presencia, muy sutil, sigue siendo un enlace editorial discreto (mismo peso 500, misma tipografía, mismo color, misma flecha). line-height se mantiene en 1 (sin leading extra), así que este cambio no mueve el spacing hacia la descripción de arriba, que no se toca en esta ronda. Posición (margin-top:auto) sin cambio. */ .page-servicios .servicios-grid__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; color: color-mix(in srgb, var(--color-espresso) 88%, var(--color-ink) 12%); font-size: 1.03rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; } /* Microinteracción (ronda "microajustes finales"): la flecha (único contenido del ::after) se desplaza 3px a la derecha en hover/focus, con una transición suave — display:inline-block es necesario para que el transform se aplique de forma consistente (un ::after inline con solo texto no siempre acepta transform en todos los motores). El subrayado en hover (ya existente, más abajo) se conserva sin cambios. Sin bounce/zoom/underline grueso/movimientos grandes. */ .page-servicios .servicios-grid__cta::after { content: "\2192"; display: inline-block; transition: transform 250ms var(--ease-elegant); } .page-servicios .servicios-grid__cta:hover::after, .page-servicios .servicios-grid__cta:focus-visible::after { transform: translateX(3px); } .page-servicios .servicios-grid__cta:hover, .page-servicios .servicios-grid__cta:focus-visible { text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .page-servicios .servicios-grid__item, .page-servicios .servicios-grid__cta::after { transition: none; } } /* ---------- Layout: contenido + fotografía a un lado ---------- Mismo patrón de 2 columnas ya usado en Acerca de (.about-hero__grid) y en la vista previa de Inicio (.home-about__grid), con clases propias para no tocar esas reglas. El encabezado deja de estar centrado (text-center se quitó en el HTML) para leerse bien en la columna izquierda, junto con el grid de capacidades; la foto queda como columna derecha, independiente, no como fondo. En móvil pasa a 1 columna con la foto debajo del contenido (orden natural del HTML). Rediseño editorial: proporción 3fr/2fr (60/40) → 11fr/9fr (55/45) — la fotografía gana algo de ancho ("un poco más de protagonismo, sin efectos fuertes"), sin tocar el archivo ni su encuadre/proporción (object-fit y demás, más abajo, sin cambio). */ .page-servicios .servicios-layout { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: stretch; gap: var(--space-xl); } @media (max-width: 800px) { .page-servicios .servicios-layout { grid-template-columns: 1fr; gap: var(--space-lg); } } /* Ronda "refinamiento de servicios": margin-bottom 64px → 116px. La línea divisoria (retirada arriba) aportaba ~33px de espacio propio (margin-top de --space-md + su alto de 1px) que desaparece al ocultarla — sin compensar eso, el hueco visible se habría reducido en vez de aumentar. Este valor compensa esos ~33px y suma ~19px adicionales (dentro de 15-25px pedido) sobre el espacio que ya se percibía antes con la línea visible. Ronda "simplificación editorial 2": -24px (7.25rem → 5.75rem, dentro de 20-30px pedido, punto de partida) — título, subtítulo y servicios deben leerse como un mismo bloque. Título/subtítulo (tamaño, posición, alineación) sin cambio: solo se acorta el espacio después de ellos. Ronda "microajustes finales 2": -15px adicionales (5.75rem → 4.8125rem, punto de partida pedido) — título/subtítulo/servicios deben sentirse aún más como una sola composición, sin llegar a compactarse en exceso. Título y subtítulo (tamaño, posición, alineación) sin cambio. */ .page-servicios .servicios-header { max-width: 100%; margin: 0 0 4.8125rem; text-align: left; } /* Ronda "refinamiento móvil": -22% (77px → 60px, dentro de 20-25% pedido) — el H1 y el primer servicio se sentían demasiado separados en teléfono. Solo <701px (el breakpoint móvil real del proyecto, ver --space-xl en base.css); tablet (701-800px, layout aún apilado pero grid 2×2) y desktop conservan 77px, regla base sin cambios. Tamaño, peso, color y alineación del H1 no se tocan. Ronda "reordenamiento móvil — foto tras el título": con la fotografía reubicada justo después del H1 en este mismo breakpoint (ver bloque de reordenamiento más abajo, junto a .servicios-photo), este margin-bottom pasa a ser el espacio título→foto en vez de título→primer servicio. 60px → 44px (dentro de 35-50px pedido). Tamaño, peso, color y saltos de línea del H1: sin cambio. */ @media (max-width: 700px) { .page-servicios .servicios-header { margin-bottom: 2.75rem; } } .page-servicios .servicios-header__divider { margin: var(--space-md) 0 0; } /* ---------- Fotografía de servicio ---------- Elemento visual independiente (no background). Proporción natural, sin recorte ni aspect-ratio forzado. Mismo tratamiento cinematográfico ya usado en las fotos de Acerca de/Inicio (radio de esquina, sombra cálida muy sutil, viñeta en multiply + veladura cálida en soft-light, filtro de contraste/saturación discreto) para mantener un solo lenguaje visual en todo el sitio. */ .page-servicios .servicios-photo { position: relative; height: 100%; min-height: 320px; } .page-servicios .servicios-photo::before, .page-servicios .servicios-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: var(--radius-md); } .page-servicios .servicios-photo::before { background: radial-gradient(ellipse at center, transparent 58%, rgba(15, 11, 6, 0.22) 100%); mix-blend-mode: multiply; } .page-servicios .servicios-photo::after { background: linear-gradient(155deg, rgba(199, 165, 124, 0.18) 0%, rgba(199, 165, 124, 0) 48%, rgba(20, 14, 8, 0.12) 100%); mix-blend-mode: soft-light; } /* Ajuste de encuadre: la fotografía original (1086×1449px, ≈3:4) no está recortada — contiene completa a la persona con chaleco TASS en el costado izquierdo, con margen de terreno/reja a su izquierda. El recorte ocurría solo por CSS: .servicios-photo estira su altura (height:100%, align-items:stretch en .servicios-layout) para igualar la columna de contenido, que ahora es bastante más alta desde el rediseño de "Servicios" (título grande + 4 servicios con descripción). A un ancho de columna de ~475px, esa altura mayor hace que el contenedor quede más angosto/vertical que la proporción 3:4 de la foto, así que object-fit:cover recorta desde los LADOS (izquierda/derecha), no arriba/abajo — con "center" ese recorte lateral caía justo sobre la persona, ubicada en el costado izquierdo del encuadre. object-position: horizontal 50%→15% (deja el recorte casi todo del lado derecho, donde no hay nada crítico, y conserva a la persona completa con algo de aire a su izquierda). Vertical 65%→75%: sigue sesgado hacia abajo (conserva el terreno donde está parada la persona) por si el contenedor llega a quedar más ancho que alto en algún punto y el recorte ocurriera en cambio verticalmente — en ese escenario también protege a la persona, que está en la mitad inferior de la foto. object-fit y dimensiones del marco: sin tocar (primera prioridad, object-position, ya resuelve el encuadre). */ .page-servicios .servicios-photo__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 15% 75%; border-radius: var(--radius-md); box-shadow: 0 24px 48px -26px rgba(70, 49, 31, 0.4); filter: contrast(1.09) saturate(0.92) brightness(0.99); } @media (max-width: 800px) { .page-servicios .servicios-photo { height: 380px; } } /* Ronda "reordenamiento móvil — foto tras el título": solo <701px (el breakpoint móvil real del proyecto, ver comentario en .servicios-header más arriba). Narrativa pedida: título → foto → detalle de servicios. En el HTML, .servicios-header y .servicios-grid viven dentro de .servicios-content, mientras que .servicios-photo es su hermano directo dentro de .servicios-layout (grid, 1 columna en este rango) — para poder intercalar la foto ENTRE el título y el grid de servicios sin duplicar el
ni tocar el HTML, .servicios-content pasa a display:contents (solo en este breakpoint): deja de tener caja propia y sus dos hijos (header, grid) se vuelven ítems directos del grid de .servicios-layout, exactamente igual que la foto — sin esto, "order" no podría intercalarlos porque están en dos niveles distintos del árbol. .servicios-content no tiene reglas propias en este archivo (ni en ningún otro), así que quitarle su caja no rompe ningún padding/margin/ancho. Con los 3 ahora en el mismo grid, "order" fija la secuencia visual (1 título, 2 foto, 3 servicios) sin tocar el orden del HTML ni usar JS/position:absolute/translateY/márgenes negativos/transforms. El gap propio del grid (--space-lg, pensado para el layout de 2 ítems título+servicios/foto) se pone en 0 aquí para que el único espacio entre bloques sea el margin-bottom explícito de cada uno (título→foto en .servicios-header, foto→servicios aquí abajo) — así los rangos pedidos (35-50px y 45-60px) quedan exactos, sin sumarse al gap heredado. Tablet (701-800px) y desktop: sin cambio, siguen con .servicios-content como caja normal, gap y orden documentales originales (título+servicios, luego foto). */ @media (max-width: 700px) { .page-servicios .servicios-content { display: contents; } .page-servicios .servicios-layout { gap: 0; } .page-servicios .servicios-header { order: 1; } .page-servicios .servicios-photo { order: 2; margin-bottom: 3.25rem; } .page-servicios .servicios-grid { order: 3; } } /* ---------- También te apoyamos con (capacidades complementarias) ---------- Rediseño: cada capacidad gana índice editorial (01-05) + línea fina + nombre, mismo lenguaje que los índices del bloque de servicios de arriba y de Misión/Visión en Acerca de — pero deliberadamente más ligera: sin descripción, sin CTA, sin ícono. Sigue sin tarjetas, sin fondo ni sombra por elemento — la jerarquía viene solo de índice + línea + tipografía + espacio + microinteracción de hover. Mismo --color-linen que #capacidades arriba (ronda "fondo unificado", ver comentario al inicio del archivo), para que toda la página comparta un solo tono continuo, sin franjas. Espacio respecto al bloque de servicios (arriba, sin tocar): ese bloque termina con el padding-bottom de #capacidades (112px, heredado de .section base, no se toca por ser parte del "bloque superior ya terminado"). Ronda "equilibrio final 2": padding-top 32px→16px, para que la suma con esos 112px quede en ~128px (dentro de 100-140px pedido ahora, reducido desde el ~144px de la ronda anterior) — un solo valor tocado, sin sumar márgenes adicionales. padding-bottom 144px→104px (dentro de 90-120px pedido) — el CTA final sigue sin tocarse; su propio padding-top vive dentro de su caja oscura, así que este valor es la separación visible real sobre fondo crema. */ .page-servicios .servicios-secondary { padding-top: 1rem; padding-bottom: 6.5rem; background-color: var(--color-linen); } /* Ronda "refinamiento móvil": -17% (104px → 86px, dentro de 15-20% pedido) — espacio entre "Capacitación" y la siguiente sección (CTA) antes del footer. padding-top (16px, espacio hacia los 4 servicios de arriba, ya ajustado en la ronda de #capacidades) sin cambio adicional aquí. Solo <701px; tablet/desktop conservan 104px. */ @media (max-width: 700px) { .page-servicios .servicios-secondary { padding-bottom: 5.375rem; } } /* Ronda "equilibrio final": la línea de transición larga que insumos-servicios-shared.css dibuja automáticamente entre secciones adyacentes (.page-services main .section + .section::before) se desactiva específicamente para este límite (servicios → también te apoyamos con) — a petición explícita del usuario, "la separación debe ser solo espacio negativo". Se apaga con un selector propio de esta página, sin tocar la regla compartida: Insumos y cualquier otro límite de sección en esta misma página conservan la línea tal cual. Ronda "equilibrio final 2": ese intento anterior no funcionaba en realidad — la regla compartida (.page-services main .section + .section::before) tiene MÁS especificidad (3 clases) que .page-servicios .servicios-secondary::before (2 clases), así que seguía ganando pese al content:none de aquí. Se añade !important como excepción deliberada y acotada (un solo selector, para anular puntualmente una regla decorativa de un archivo compartido en esta página, sin tocar ese archivo ni afectar a Insumos). */ .page-servicios .servicios-secondary::before { content: none !important; } /* Título secundario: no debe competir con el H1 "Servicios" (58-64px en desktop). Base (aquí, también aplica en móvil) 24-30px; en desktop (@media abajo) sube a ~39-42px (dentro de 36-42px pedido). Peso 600 ("medium/semibold elegante"), café oscuro y alineación izquierda: sin cambio respecto al título anterior. Ronda "microajustes": margin-bottom 48px→60px, y +8px más (60px→68px) a petición posterior — solo el espacio hacia la fila; tamaño y posición horizontal del título intactos, nada más se tocó. Ronda "microajustes finales": -12px (68px → 56px, punto de partida pedido) — título y conceptos deben leerse como una misma sección. El espacio hacia los 4 servicios de arriba (padding-top de .servicios-secondary, sin tocar) no se ve afectado por este valor, que es exclusivamente interno de este título. */ .page-servicios .servicios-secondary__title { margin: 0 0 3.5rem; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); font-weight: 600; letter-spacing: -0.01em; color: var(--color-espresso); } @media (min-width: 901px) { .page-servicios .servicios-secondary__title { font-size: clamp(2.25rem, 1.9rem + 1vw, 2.625rem); } } /* Distribución (ronda "equilibrio final 2"): 1 columna en móvil (aquí, base) → 3 columnas en tablet (≥700px, "3+2": 01/02/03 en la primera fila, 04/05 en la segunda, sin centrado artificial) → 5 columnas en una sola fila desde escritorio grande (≥1100px). Este