del eyebrow (wpautop) debe heredar el mint del wrapper, no el color de cuerpo que .unicca-on-dark p le pone directo al
. */ .l-main .unicca-eyebrow p{ color:inherit; } /* ===================== HEADER ===================== */ /* Impreza fija el tamaño de la nav con especificidad alta */ .l-header .w-nav-anchor{ font-size:14px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:0.04em; } /* .btn-header del mockup: 13/600 ls .06em, padding 16/26, gap 10 (el fondo, el radio y el hover los da la regla .us-btn-style_1 de más arriba) */ .l-header .w-btn{ font-size:13px !important; font-weight:600 !important; letter-spacing:0.06em; padding:16px 26px !important; gap:10px; } /* Separación entre items de nav: el mockup usa gap 44 (los anchors de Impreza se tocan y el aire lo da su padding lateral: 22 + 22 = 44) */ @media (min-width:901px){ .l-header .w-nav-list.level_1 > .menu-item > .w-nav-anchor{ padding-left:22px !important; padding-right:22px !important; } } /* ===================== HOME ===================== */ /* Hero (mockup "locked"): min-height 640, columna de texto 42% con padding 180/70/70 y contenido centrado; la foto compuesta llena los 640 de alto. Impreza mete un offset de 110px bajo el header fijo: fuera (el padding-top de 180 de la columna ya lo contempla, como en el mockup). */ #hero .l-section-h{ padding-top:0 !important; } @media (min-width:901px){ #hero .g-cols{ grid-template-columns:42fr 58fr; } #hero .g-cols > .wpb_column:first-child{ padding:180px 70px 70px !important; } #hero .g-cols > .wpb_column:last-child{ padding:0 !important; } #hero .w-image, #hero .w-image img{ height:640px; width:100%; object-fit:cover; display:block; } } #hero .w-separator{ display:none; } #hero h1{ font-size:38px; line-height:1.15; margin-bottom:22px; } #hero .wpb_text_column:not(.unicca-eyebrow) p{ max-width:400px; } /* Mobile/tablet: la regla de padding 180px es min-width:901px, así que acá no aplica y el hero queda pegado arriba (el .l-section-h padding-top:0 le sacó el offset de header). El header fijo mide 110px en tablet y 80px en phone (cambia en ~600): se despeja con ~50 de aire en los dos casos. */ @media (max-width:900px){ #hero .g-cols > .wpb_column:first-child{ padding-top:160px !important; padding-bottom:50px !important; } } @media (max-width:600px){ #hero h1{ font-size:30px; } #hero .g-cols > .wpb_column:first-child{ padding-top:130px !important; } /* Logo del header en phone: Impreza lo genera en 40px (estado inicial) y lo achica a 20px en sticky. Los 40px se veían demasiado grandes/anchos arriba de todo; se baja a 30px. NO se toca .l-header.sticky .ush_image_1 (queda en 20px), así el efecto de shrink al scrollear se conserva. Especificidad 0,2,0 + !important para ganarle a la regla de Impreza (.ush_image_1, 0,1,0 !imp). */ .l-header .ush_image_1{ height:30px !important; } } #approach h2{ font-size:28px; } #what-we-do h2{ font-size:26px; } #what-we-do .w-separator{ display:none; } #what-we-do .unicca-eyebrow{ margin-bottom:14px; } /* Contact (mockup .contact-section): padding 90 0, grid 1fr/1.2fr gap 60. #section-18 es el id que el builder le puso a la sección de contacto. */ #section-18{ padding-top:90px !important; padding-bottom:90px !important; } @media (min-width:901px){ #section-18 .g-cols{ grid-template-columns:1fr 1.2fr; gap:60px; } } /* Contact: en el mockup el heading es
, así que NO hereda la regla h1-h3 del tema: Archivo 800 explícito. */ .l-main .us_custom_07bb9a55, .l-main .us_custom_07bb9a55 *{ font-family:'Archivo', sans-serif !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:0.02em; font-size:28px !important; line-height:1.1 !important; } /* ---- Texto de cuerpo, por sección ---- * El mockup NO fija un tamaño global de
: lo hace sección por sección * (.hero-left p y .approach p en 14.5, .page-hero p en 14.5/15). * * SIEMPRE fijar line-height junto al font-size: el builder emite reglas como * `.us_custom_XXXX{font-size:16px!important;line-height:26px!important}` sobre * el WRAPPER .wpb_text_column, y el
las HEREDA. Pisar solo el font-size * deja el interlineado viejo (26 en vez de 23.2) y descuadra el alto. * * Dos exclusiones que impone el DOM del constructor: * - .unicca-eyebrow: la clase va en el wrapper y el
hereda los 12px. Un * selector con id le gana a esa herencia y agrandaría el eyebrow. * - los
con los que wpautop envuelve un botón. */ #hero .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)), #approach .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)), #about-hero .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)){ font-size:14.5px; line-height:1.6; } #svc-hero .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)), #ourwork-hero .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)){ font-size:15px; line-height:1.6; } /* El mockup afina el color del cuerpo por sección: .hero-left p en 0.75, .approach p en 0.7 (no el 0.72 general de .unicca-on-dark), y las bajadas de los page-hero claros de Services/Our Work en gris. */ #hero .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)){ color:rgba(255,255,255,0.75); } #approach .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)){ color:rgba(255,255,255,0.7); } #svc-hero .wpb_text_column:not(.unicca-eyebrow) p, #ourwork-hero .wpb_text_column:not(.unicca-eyebrow) p{ color:var(--u-gray); } /* Bajada de Contact (mockup: .contact-grid > div:first-child p) */ /* line-height explícito: el constructor le fija 28px a esta columna. */ .l-main .us_custom_d526e00a p{ font-size:14.5px; line-height:1.6; color:var(--u-gray); max-width:340px; } /* Botones oscuros al navy del sistema. us_custom_60e9caca es una clase de hash COMPARTIDA (también la usa una columna de contacto): acotar por .w-btn. "See all projects" del mockup: .btn .btn-dark .btn-pill = 14/600 ls .02em, padding 17/34, radius 100, borde 1.5 transparente y line-height del body (1.6, de ahí sus 58px de alto; con line-height:normal quedaba en 51). El hover va aparte SÍ o SÍ: el !important del fondo pisa también el :hover del tema y el botón se quedaba sin efecto (el del header sí lo tenía). Efecto unificado con el header (pedido del cliente): oscurecen a #000 con el texto en blanco. El mockup los tenía distintos (btn-dark:hover -> charcoal). */ .l-main button.w-btn{ background-color:var(--u-navy) !important; } .l-main button.w-btn:hover{ background-color:#000 !important; } .w-btn.us_custom_60e9caca{ background-color:var(--u-navy) !important; text-transform:uppercase !important; font-size:14px !important; font-weight:600 !important; letter-spacing:0.02em !important; padding:17px 34px !important; border-radius:100px !important; line-height:1.6 !important; border:1.5px solid transparent !important; gap:8px; } .w-btn.us_custom_60e9caca:hover{ background-color:#000 !important; } /* Featured Projects: fotos full-bleed, franja de 280 de alto (mockup) */ #us_grid_1{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; } #us_grid_1 .w-grid-item-h, #us_grid_1 .w-grid-item-h > a{ height:280px; display:block; } #us_grid_1 img{ height:280px !important; width:100%; object-fit:cover; } /* El chip "FEATURED PROJECTS" que iba arriba de la grilla se eliminó a pedido del cliente (primero solo en mobile, después también en desktop). Se sacó el us_vwrapper del contenido de la Home, así que las reglas que lo estilaban (.us_custom_56c50a3a) ya no están acá: no quedan huérfanas apuntando a una clase de hash que además podría reasignarse a otro elemento. */ .l-main section.us_custom_bd99e8a8{ padding-top:50px !important; } .l-main section.us_custom_bd99e8a8 .w-separator{ display:none; } /* ---- Our Approach: geometría exacta del mockup ---- * .approach-grid: 1.1fr/1fr gap 60 (Impreza trae 7/12-5/12 gap 48); * h2 mb 18, p max-width 460 mb 16, eyebrow mb 14, fotos height 230 gap 20. * Los w-separator del constructor se anulan: el ritmo lo dan los márgenes. */ @media (min-width:901px){ #approach .g-cols .g-cols:has(.unicca-photo-pair){ grid-template-columns:1.1fr 1fr; gap:60px; } } #approach .w-separator{ display:none; } #approach .unicca-eyebrow{ margin-bottom:14px; } #approach h2{ margin-bottom:18px; } #approach .wpb_text_column:not(.unicca-eyebrow) p:not(:has(> .unicca-btn)){ max-width:460px; margin-bottom:16px; } #approach{ padding-bottom:0 !important; } .unicca-photo-pair > .vc_column-inner{ display:flex; gap:20px; align-items:stretch; } .unicca-photo-pair .w-image{ flex:1 1 0; margin:0; min-width:0; } .unicca-photo-pair .unicca-notch{ width:100%; height:230px; } @media (max-width:600px){ .unicca-photo-pair > .vc_column-inner{ flex-direction:column; } } /* ---- Franja de métricas (mockup .stats-row: margin-top 70, padding 44 0, grid de tercios SIN gap: las divisorias las dan los border-left) ---- */ /* Solo la home: la franja de About (#about-stats) es una fila plana sin borde. */ #approach .g-cols.unicca-stats-row{ margin-top:70px; border-top:1px solid rgba(255,255,255,0.15); padding:44px 0; gap:0; } #about-stats .g-cols{ gap:0; } .unicca-statcol .vc_column-inner{ text-align:center; border-left:1px solid rgba(255,255,255,0.15); padding:0 20px; } .unicca-statcol.first .vc_column-inner{ border-left:none; } /* Los separadores son verticales porque en desktop las tres métricas van en fila. Impreza las apila a 600px y ahí el borde quedaba como dos líneas sueltas a la izquierda del "+12" y del "60%" que la primera no tenía: eso es lo que el cliente vio como el 60% desalineado. Apiladas, el separador va arriba. */ @media (max-width:600px){ /* El separador necesita el mismo aire de los dos lados. Con padding solo arriba, la línea quedaba a 23px del número de abajo pero pegada al label de la métrica anterior (0px). El padding-bottom lo empareja. */ .unicca-statcol .vc_column-inner{ border-left:none; border-top:1px solid rgba(255,255,255,0.15); padding:22px 20px; } .unicca-statcol.first .vc_column-inner{ border-top:none; padding-top:0; } /* El aire entre el botón y las métricas mide 138px con los valores de desktop (70 de margen + 44 de padding). En una columna eso es una franja negra vacía de casi media pantalla: el cliente la marcó. Acá se recorta a la mitad, manteniendo la separación entre los dos bloques. */ #approach .g-cols.unicca-stats-row{ margin-top:24px; padding:20px 0 0; } #approach{ padding-bottom:40px !important; } } /* Sin line-height propio: el mockup (.stat .num) hereda el 1.6 del body. */ .unicca-stat-num{ font-family:'Archivo', sans-serif; font-weight:800; font-size:34px; color:var(--u-mint); } .unicca-stat-label{ font-size:12.5px; color:rgba(255,255,255,0.65); margin-top:6px; } /* ---- What We Do ---- */ .unicca-cap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; } /* Contenido centrado en columna (pedido del cliente, desvío del mockup, que las tenía en fila con el icono a la izquierda y el texto alineado a izquierda). El icono pasa arriba: dejarlo al costado con el texto centrado descuadra el eje. Mismo formato que las .unicca-svc-card de Services. */ .unicca-cap-card{ background:var(--u-white); border:1.5px solid var(--u-mint); border-radius:16px; padding:30px 34px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; } .unicca-cap-card .unicca-dot{ width:34px; height:34px; border-radius:50%; background:var(--u-mint); flex-shrink:0; } /* Icono real de capability (reemplaza el .dot). Los PNG son line-art con distinto aspect ratio (la lupa es ancha, el resto cuadrado): object-fit contain los encuadra sin deformar. Color natural (charcoal); en mint las líneas finas se lavarían sobre el fondo blanco. El .dot queda de fallback. */ .unicca-cap-card .unicca-cap-icon, .unicca-svc-card .unicca-cap-icon{ width:46px; height:46px; object-fit:contain; flex-shrink:0; display:block; } .unicca-svc-card .unicca-cap-icon{ margin-bottom:16px; } /* Las card h3 del mockup NO tocan font-family ni font-weight: heredan Archivo 800 de la regla h1-h3. Solo bajan el tamaño y sacan mayúscula/tracking. */ .unicca-cap-card h3{ text-transform:none; letter-spacing:0; font-size:16px; color:var(--u-charcoal); margin:0 0 6px; } .unicca-cap-card p{ font-size:13px; color:var(--u-gray); margin:0; } @media (max-width:600px){ .unicca-cap-grid{ grid-template-columns:1fr; } } /* ========================= ABOUT ========================= */ #about-hero h1{ font-size:36px; } #why-unicca h2, #our-team h2{ font-size:26px; } #why-unicca h2 + p, #our-team h2 + p{ font-size:14px; color:var(--u-gray); } /* !important: el CSS generado por el builder trae paddings con !important */ #why-unicca, #structured, #about-stats, #our-team{ padding-top:80px !important; padding-bottom:80px !important; } /* Page hero (mockup About: padding 220 0 70; el offset de header de Impreza va a 0) */ #about-hero .l-section-h{ padding-top:0 !important; } #about-hero{ padding-top:220px !important; padding-bottom:70px !important; } #about-hero h1{ margin-bottom:20px; } #about-hero .wpb_text_column:not(.unicca-eyebrow) p{ max-width:640px; margin-bottom:14px; } /* Ritmo medido en el mockup: h2 -> sub 7, sub (max-width 600, mb 40) -> grid (mt 0) */ #why-unicca h2, #our-team h2{ margin-bottom:10px; } #why-unicca h2 + p{ max-width:600px; margin-bottom:40px; } #our-team h2 + p{ margin-bottom:40px; } #about-hero .w-separator, #why-unicca .w-separator, #structured .w-separator, #our-team .w-separator, #about-stats .w-separator{ display:none; } .unicca-hero-h .l1{ color:var(--u-mint); display:block; } .unicca-hero-h .l2{ color:var(--u-white); display:block; } /* .unicca-lead no lleva peso ni color propios: el .page-hero p del mockup es 400 y toma el color de .unicca-on-dark (blanco 0.72). */ /* Why Unicca (diferenciales) */ .unicca-diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .unicca-diff-card{ background:var(--u-offwhite); border-radius:18px; padding:26px; display:flex; gap:20px; align-items:flex-start; } .unicca-diff-card .w-image, .unicca-diff-card .unicca-notch{ width:96px; height:96px; flex-shrink:0; margin:0; } .unicca-diff-card h3{ text-transform:none; letter-spacing:0; font-size:15.5px; color:var(--u-charcoal); margin:0 0 6px; display:flex; align-items:center; gap:10px; } .unicca-diff-card h3 .unicca-dot{ width:12px; height:12px; border-radius:50%; background:var(--u-mint); flex-shrink:0; } .unicca-diff-card p{ font-size:12.5px; color:var(--u-gray); line-height:1.5; margin:0; } /* How We're Structured (sage) */ .unicca-structure-tag{ display:inline-block; background:rgba(255,255,255,0.5); border:1.5px solid rgba(15,28,30,0.15); color:var(--u-navy); font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:10px 22px; border-radius:100px; } /* Bajada debajo del titular de la sección. Hoy trae un lorem de placeholder: el copy real lo manda el cliente. */ .unicca-structure-lead{ font-size:14.5px; line-height:1.6; color:rgba(15,28,30,0.75); max-width:560px; margin:18px 0 0; } .unicca-structure-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 60px; margin-top:36px; } .unicca-structure-item{ display:flex; gap:20px; align-items:flex-start; } /* 88px, no los 56 del mockup: a ese tamaño las fotos no se leían (pedido del cliente). El .unicca-notch mantiene la mordida proporcional vía su ::after. */ .unicca-structure-item .w-image, .unicca-structure-item .unicca-notch{ width:88px; height:88px; flex-shrink:0; margin:0; } .unicca-structure-item .num{ font-family:'Archivo', sans-serif; font-weight:800; font-size:12px; color:var(--u-navy); opacity:0.55; } .unicca-structure-item h3{ text-transform:none; letter-spacing:0; font-size:15px; color:var(--u-navy); margin:2px 0 4px; } /* Sin line-height propio: el mockup lo deja heredar del body (1.6). */ .unicca-structure-item p{ font-size:12.5px; color:rgba(15,28,30,0.7); margin:0; } /* Our Team */ .unicca-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .unicca-team-card{ background:var(--u-offwhite); border-radius:16px; padding:24px; } /* Foto del equipo al doble del .dot del mockup (80 en vez de 40): pedido del cliente, la card queda ~40px más alta que el mockup. El .dot mantiene la misma caja como fallback si se agrega una persona sin foto. */ .unicca-team-card .unicca-dot, .unicca-team-card .unicca-team-photo{ width:80px; height:80px; border-radius:50%; display:block; margin-bottom:14px; } .unicca-team-card .unicca-dot{ background:var(--u-mint); } .unicca-team-card .unicca-team-photo{ object-fit:cover; object-position:center top; } .unicca-team-card h3{ text-transform:none; letter-spacing:0; font-size:14.5px; color:var(--u-charcoal); margin:0; } .unicca-team-card .role{ font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--u-mint-dark); margin:2px 0 10px; } .unicca-team-card .bio{ font-size:12.5px; color:var(--u-gray); margin:0 0 12px; line-height:1.5; } .unicca-team-card .source{ font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--u-gray-light); } @media (max-width:900px){ .unicca-diff-grid, .unicca-structure-grid{ grid-template-columns:1fr; } .unicca-team-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .unicca-team-grid{ grid-template-columns:1fr; } } /* ========================= SERVICES ========================= */ #svc-hero h1{ font-size:32px; max-width:680px; } #svc-whatwedo h2, #stage-by-stage h2{ font-size:24px; } /* Page hero (mockup Services: padding 230 0 60) */ #svc-hero .l-section-h{ padding-top:0 !important; } #svc-hero{ padding-top:230px !important; padding-bottom:60px !important; } #svc-hero .wpb_text_column:not(.unicca-eyebrow) p{ max-width:600px; } #svc-hero .w-separator, #svc-whatwedo .w-separator, #stage-by-stage .w-separator{ display:none; } .unicca-mint-h h2{ color:var(--u-mint); } .unicca-svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; } /* Contenido centrado, igual que las .unicca-cap-card de la Home: son las mismas cuatro capabilities y tienen que leerse igual en las dos páginas. Acá alcanza con text-align + centrar el icono: la card ya venía en bloque con el icono arriba, no en fila como la de Home (que sí necesitó pasar a columna). */ .unicca-svc-card{ background:var(--u-white); border:1.5px solid var(--u-mint); border-radius:16px; padding:30px 34px; text-align:center; } .unicca-svc-card .unicca-dot{ width:34px; height:34px; border-radius:50%; background:var(--u-mint); display:block; margin-bottom:16px; } /* Los dos son display:block: sin margin auto el text-align no los mueve. */ .unicca-svc-card .unicca-dot, .unicca-svc-card .unicca-cap-icon{ margin-left:auto; margin-right:auto; } .unicca-svc-card h3{ text-transform:none; letter-spacing:0; font-size:16px; color:var(--u-charcoal); margin:0 0 8px; } .unicca-svc-card p{ font-size:13px; color:var(--u-gray); line-height:1.55; margin:0; } /* Stage by Stage (navy) */ .unicca-stage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px; } .unicca-stage-card .w-image, .unicca-stage-card .unicca-notch{ height:320px; margin:0 0 22px; display:block; } /* Reveal al scroll: cada card entra desplazada desde su lateral, una después de la otra (pedido del cliente, en reemplazo del zoom al hover). El estado oculto cuelga de .unicca-js en el , que pone js/unicca-reveal.js desde el head antes del primer paint. Sin JS (o sin IntersectionObserver, o con prefers-reduced-motion) no hay clase y las cards quedan visibles: el efecto es progresivo, nunca esconde contenido a la espera de un script. El desfase lo da el nth-child: la columna izquierda arranca y la derecha entra 140ms después, así la fila se lee de a una y no como un bloque. */ .unicca-js .unicca-stage-card{ opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; } .unicca-js .unicca-stage-card:nth-child(odd){ transform:translateX(-48px); } .unicca-js .unicca-stage-card:nth-child(even){ transform:translateX(48px); transition-delay:.14s; } .unicca-js .unicca-stage-card.is-visible{ opacity:1; transform:none; } /* En mobile la entrada es DESDE ABAJO, no desde el lateral. Con una sola columna la card mide 342 de un viewport de 390, así que los 48px de desplazamiento lateral la empujan fuera de la pantalla: el número de etapa quedaba entero afuera y la foto y el texto se veían cortados (reportado por el cliente en Safari iPhone, donde además se puede arrastrar en horizontal). En desktop el desplazamiento lateral sí entra: la card mide 548 y el grid tiene aire a los costados. */ @media (max-width:900px){ .unicca-js .unicca-stage-card:nth-child(odd), .unicca-js .unicca-stage-card:nth-child(even){ transform:translateY(28px); transition-delay:0s; } } /* Red de seguridad: aunque el desplazamiento ya no se sale del viewport, la sección recorta cualquier desborde horizontal en vez de generar scroll lateral. Va en la sección (full-bleed) y no en el grid, para no cortar la entrada lateral de las cards en desktop. */ #stage-by-stage{ overflow-x:clip; } .unicca-stage-card .num{ font-family:'Archivo', sans-serif; font-weight:800; font-size:13px; color:var(--u-mint); } .unicca-stage-card h3{ text-transform:none; letter-spacing:0; font-size:16px; color:var(--u-white); display:inline; margin-left:5px; /* 10 del mockup menos ~5 del text node que wpautop deja entre los spans */ } .unicca-stage-card p{ font-size:12.5px; color:#B9C4C0; margin-top:10px; max-width:520px; } @media (max-width:900px){ .unicca-svc-grid, .unicca-stage-grid{ grid-template-columns:1fr; } } /* ========================= OUR WORK ========================= */ #ourwork-hero h1{ font-size:34px; max-width:640px; } /* Page hero (mockup Our Work: padding 230 0 60) */ #ourwork-hero .l-section-h{ padding-top:0 !important; } #ourwork-hero{ padding-top:230px !important; padding-bottom:60px !important; } /* Hero y filtros centrados (pedido del cliente; el mockup los tenía a la izquierda como el resto de los page-hero). Los max-width necesitan el margin auto: sin eso el bloque sigue anclado a la izquierda aunque el texto centre. */ #ourwork-hero{ text-align:center; } #ourwork-hero h1{ margin-left:auto; margin-right:auto; } #ourwork-hero .wpb_text_column:not(.unicca-eyebrow) p{ max-width:600px; margin-left:auto; margin-right:auto; } #ourwork-hero .w-separator, #ourwork-grid .w-separator{ display:none; } #ourwork-grid{ padding-top:0 !important; padding-bottom:70px !important; } /* Los filtros van sobre la banda offwhite del hero, no sobre el blanco del grid (mockup .filters{ background:offwhite; padding:0 0 50px }). Sin esto los pills quedan pegados al borde donde el offwhite corta con el blanco. Fondo full-bleed a 100vw manteniendo los pills alineados al contenido; los 50px de aire quedan abajo (los 60 de arriba los da el padding del hero). */ .unicca-filter-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; background:var(--u-offwhite); width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 50% + 0px) 50px calc(50vw - 50%); margin-bottom:10px; /* mockup: 50 offwhite (padding) + 10 blanco = 60 al grid */ box-sizing:border-box; } .unicca-filter-pill{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:100px; border:1.5px solid var(--u-hairline); font-family:'Inter', sans-serif; font-size:13px; font-weight:600; color:var(--u-charcoal); background:var(--u-white); cursor:pointer; } .unicca-filter-pill .count{ color:var(--u-gray); font-weight:500; } .unicca-filter-pill.active{ background:var(--u-mint); border-color:var(--u-mint); color:var(--u-navy); } .unicca-filter-pill.active .count{ color:var(--u-navy); opacity:0.7; } .unicca-proj-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; } .unicca-proj-card{ display:block; color:inherit; } .unicca-proj-card .unicca-notch{ height:210px; margin-bottom:14px; } /* min-height de 2 líneas: las direcciones reales son más largas que las simuladas del mockup y algunas envuelven. Sin reservar el alto, la card que envuelve estira su fila del grid y deja a las de 1 línea con un hueco abajo. Reservando 2 líneas todas las cards miden igual y la grilla queda pareja. */ .unicca-proj-addr{ font-family:'Inter', sans-serif; font-weight:600; font-size:14px; color:var(--u-charcoal); min-height:3.2em; /* 2 líneas al line-height 1.6 heredado del body (como el mockup) */ } .unicca-proj-card[hidden]{ display:none; } /* mockup .gap-note: margin-top 40 (traía 36), 12.5px gris, borde arriba, pad 20 */ .unicca-proj-note{ margin-top:40px; font-size:12.5px; color:var(--u-gray); border-top:1px solid var(--u-hairline); padding-top:20px; } @media (max-width:1080px){ .unicca-proj-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .unicca-proj-grid{ grid-template-columns:1fr; } } /* ============ FORMULARIO DE CONTACTO ============ */ /* UNA sola card. El padding total debe ser 36 (mockup): el padding vive en la columna Y en .vc_column-inner y SE SUMA, así que la columna va a 0. */ .l-main .wpb_column.us_custom_e5cabf0a{ padding:0 !important; border-radius:20px; border:1px solid var(--u-hairline); box-shadow:0 20px 50px rgba(0,0,0,0.08); } .l-main .wpb_column.us_custom_e5cabf0a > .vc_column-inner{ padding:36px !important; border:0; border-radius:0; box-shadow:none; background:transparent; } .l-main .w-form input:not([type=submit]):not([type=hidden]), .l-main .w-form textarea{ border:1.5px solid var(--u-hairline) !important; border-radius:10px !important; padding:14px 16px !important; font-family:'Inter', sans-serif; font-size:14px !important; color:var(--u-charcoal); background:#fff; box-shadow:none !important; line-height:normal !important; /* Impreza forzaba 42px -> input de 72px; el mockup da 47px */ } /* Impreza fija min-height 42px en los inputs; el mockup no tiene mínimo */ .l-main .w-form input:not([type=submit]):not([type=hidden]){ min-height:0 !important; } /* Impreza fija height: calc(--inputs-height * 3) = 126px; el mockup queda en 100 */ .l-main .w-form textarea{ min-height:100px !important; height:auto !important; } /* gap textarea -> boton: 28 medido en el mockup */ .l-main .w-form .w-form-row.for_textarea{ margin-bottom:28px; } .l-main .w-form input:focus, .l-main .w-form textarea:focus{ border-color:var(--u-mint) !important; } .l-main .w-form button.w-btn{ width:100% !important; justify-content:center; border-radius:10px !important; padding:15px 30px !important; background-color:var(--u-navy) !important; font-size:14px !important; font-weight:600 !important; letter-spacing:0.02em; line-height:normal !important; border:1.5px solid transparent !important; } /* El hover va acá y no en la regla genérica de más arriba: aquella tiene la MISMA especificidad (0,3,1) y también !important, así que ganaba ésta por estar después en el archivo y el Send se quedaba sin efecto. */ .l-main .w-form button.w-btn:hover{ background-color:#000 !important; } /* ============ PAGE-HERO EN MOBILE ============ * Los page-hero de About, Services y Our Work llevan padding-top 220-230px, que * es el aire del mockup en desktop (despeja el header fijo). En mobile eso dejaba * 154px de hueco vacío entre el header (80px) y el primer titular (pedido del * cliente: pegarlo al header como la captura ideal). 110 = 80 del header + 30 de * aire. No toca el hero de la Home, que no está en el pedido. */ @media (max-width:600px){ #about-hero, #svc-hero, #ourwork-hero{ padding-top:110px !important; } } /* ============ FOOTER (propio del theme, réplica del mockup) ============ */ /* El markup lo imprime functions.php en el hook us_before_footer. El