/* ============================================================================= MarcoPostal — Homepage Paleta extraída del logo (logomarcopostal2.png): verde #009C2A · navy #173070 ARQUITECTURA DE ESTADOS arranca con .mp-nomotion. Esa clase se retira SÓLO cuando el JS confirmó que GSAP, ScrollTrigger y la escena se construyeron sin excepción. Todo lo que este archivo declara por defecto es la versión legible y estática. Las escenas (sticky, línea, relevo de estados) viven bajo html:not(.mp-nomotion) y a partir de 1025px. Consecuencia: si el CDN cae, si el script explota a mitad, o si el usuario pidió menos movimiento, no queda nada oculto ni a medio animar. ========================================================================== */ /* ---------- reset mínimo del documento de prueba (borrar en WordPress) ------ */ *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} body{background:#FFF;} /* Lenis — estas tres reglas SÍ se conservan en WordPress */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-stopped{overflow:hidden;} /* ============================================================================= 1. TOKENS ========================================================================== */ .mp-home{ --mp-green:#009C2A; --mp-green-br:#22C24A; --mp-green-dk:#00701E; --mp-green-soft:#EAF6EC; --mp-navy:#173070; --mp-navy-dk:#0C1B44; --mp-black:#0D1012; --mp-dark:#12161A; --mp-dark-2:#191F24; --mp-white:#FFFFFF; --mp-off-white:#F5F6F4; --mp-gray-100:#EAEDEA; --mp-gray-300:#C6CCC8; --mp-gray-600:#5A6360; --mp-gray-700:#3E4643; /* verde de relleno para botones con texto encima — ver §botones */ --mp-green-btn:#00871C; --mp-line-light:rgba(13,16,18,.12); --mp-line-dark:rgba(255,255,255,.16); --mp-maxw:1320px; --mp-gutter:64px; --mp-gap:24px; /* escala tipográfica Segunda bajada. La anterior (46/44/28) seguía leyéndose grande en pantallas de ~1850px: el H1 ocupaba dos líneas de 46px y competía con la fotografía en vez de apoyarse en ella. Se baja ~22% el display y ~6% el cuerpo. El cuerpo base NO baja de 15px: por debajo de eso la lectura sostenida en párrafos de 52ch se degrada, y el problema que se reporta es de titulares. */ --mp-h1-size:clamp(28px,2.00vw,35px); --mp-h1-line:1.10; --mp-h1-spacing:-.8px; --mp-h2-size:clamp(26px,1.95vw,34px); --mp-h2-line:1.10; --mp-h2-spacing:-.7px; --mp-h3-size:clamp(19px,1.42vw,23px); --mp-h3-line:1.20; --mp-body-lg:15.5px; --mp-body-lg-line:1.62; --mp-body:15px; --mp-body-line:1.65; --mp-r-img:24px; --mp-r-panel:18px; --mp-r-field:10px; --mp-r-pill:999px; --mp-e:cubic-bezier(.16,1,.3,1); /* Altura ÚNICA del header. Antes había tres fuentes de verdad (aquí, en .is-compact y en el JS); ahora es constante y las escenas sticky la descuentan con calc(100svh - var(--mp-header-h)). */ --mp-header-h:64px; font-family:"Manrope Variable","Manrope","Inter",Arial,sans-serif; font-weight:400;color:var(--mp-black);background:var(--mp-white); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:clip;position:relative; } /* ============================================================================= 2. PRIMITIVAS ========================================================================== */ /* :where() y no .mp-home a secas. Motivo concreto, no estilístico: `.mp-home p` pesa (0,1,1) y le gana a cualquier regla de una sola clase — `.mp-hero__lead`, `.mp-hero__facts`, `.mp-btn--ghost-dark`, `.mp-service-scene__route`. Ese choque ya provocó cuatro defectos distintos (botones sin color, ruta visible en mobile, facts pegados a los botones, lead pegado al H1) y cada vez se parcheó prefijando la regla perdedora, lo cual arregla el síntoma y deja la trampa armada para la próxima. Dentro de :where() la especificidad es cero, así que el reset pesa (0,0,1) y cualquier clase le gana sin prefijo. */ :where(.mp-home) :is(img,svg,video){display:block;max-width:100%;} :where(.mp-home) a{color:inherit;text-decoration:none;} :where(.mp-home) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;} :where(.mp-home) :is(ul,ol,dl){list-style:none;margin:0;padding:0;} :where(.mp-home) :is(p,h1,h2,h3,figure,dd,dt,blockquote){margin:0;} .mp-home :focus-visible{outline:3px solid var(--mp-green);outline-offset:3px;border-radius:4px;} .mp-onlight :focus-visible{outline-color:var(--mp-green-dk);} .mp-skip{ position:absolute;left:16px;top:-64px;z-index:400; background:var(--mp-black);color:#fff;padding:12px 18px;border-radius:var(--mp-r-field); font-size:14px;font-weight:600;transition:top .2s var(--mp-e); } .mp-skip:focus{top:16px;} /* Sólo para lectores de pantalla y rastreadores: el encabezado existe en el documento pero el diseño lo resuelve con otro recurso visual. clip-path en lugar de display:none, que lo sacaría del árbol de accesibilidad. */ .mp-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } .mp-wrap{width:min(100% - var(--mp-gutter), var(--mp-maxw));margin-inline:auto;} .mp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mp-gap);} .mp-anchor{display:block;width:0;height:0;overflow:hidden;} /* ============================================================================= 3. TIPOGRAFÍA ----------------------------------------------------------------------------- Escala Fase 5A: H1 42-58, H2 32-44, H3 23-28, lead 16,5 y cuerpo 15. Con topes de ancho en px (660 / 570 / 540) para que el H1 no barra el viewport. ========================================================================== */ .mp-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:11px;line-height:15px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase; } .mp-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.9;flex:0 0 auto;} .mp-eyebrow--green{color:var(--mp-green-dk);} .mp-eyebrow--ondark{color:var(--mp-green-br);} /* Topes en px: el problema no era sólo la familia, era que el H1 no tenía límite de ancho y a 1900px barría casi todo el viewport. */ .mp-h1{font-size:var(--mp-h1-size);line-height:var(--mp-h1-line);font-weight:500; letter-spacing:var(--mp-h1-spacing);max-width:560px;} .mp-h2{font-size:var(--mp-h2-size);line-height:var(--mp-h2-line);font-weight:500; letter-spacing:var(--mp-h2-spacing);max-width:570px;} .mp-h3{font-size:var(--mp-h3-size);line-height:var(--mp-h3-line);font-weight:500;letter-spacing:-.4px;} .mp-text{font-size:var(--mp-body);line-height:var(--mp-body-line);font-weight:400;max-width:540px;} .mp-text--lead{font-size:var(--mp-body-lg);line-height:var(--mp-body-lg-line);max-width:540px;} .mp-num{font-variant-numeric:tabular-nums;} .mp-onlight .mp-text{color:var(--mp-gray-700);} .mp-ondark .mp-text{color:rgba(255,255,255,.74);} .mp-lines{display:block;} /* El overflow:hidden es lo que enmascara el revelado, pero recorta a la altura de línea y se come los descendentes (la g de "logística"). Medido: glifo 56px contra caja de 53,5px. El padding agranda la zona de recorte y el margen negativo devuelve el espacio, así el ritmo vertical no cambia. */ .mp-lines .mp-line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em;} .mp-lines .mp-line > i{display:block;font-style:inherit;} .mp-lines em{font-style:normal;color:var(--mp-green-dk);} .mp-ondark .mp-lines em{color:var(--mp-green-br);} /* ============================================================================= 4. BOTONES ========================================================================== */ .mp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:44px;height:54px;padding-inline:28px;border-radius:var(--mp-r-pill); font-size:15px;font-weight:600;border:1px solid transparent; transition:transform .3s var(--mp-e),background .3s var(--mp-e), color .3s var(--mp-e),border-color .3s var(--mp-e),box-shadow .3s var(--mp-e); } .mp-btn--sm{height:42px;padding-inline:18px;font-size:13px;} .mp-btn__ar{transition:transform .3s var(--mp-e);} .mp-btn:hover .mp-btn__ar{transform:translateX(4px);} /* ----------------------------------------------------------------------------- CAUSA RAÍZ CORREGIDA `.mp-home a{color:inherit}` tiene especificidad (0,1,1) — una clase más un tipo — y ganaba contra `.mp-btn--primary{color:#fff}`, que es (0,1,0). El color heredado era --mp-black, así que TODOS los botones-enlace salían con texto negro: sobre verde se leía mal y sobre la foto del hero desaparecía. Medido: 0 píxeles con luminancia > 150 en 14.700 del botón fantasma. Al prefijar con .mp-home los modificadores pasan a (0,2,0) y ganan. Regla permanente: ningún texto de botón puede depender de `color:inherit`. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- El relleno del botón principal NO es --mp-green (#009C2A). Medición: texto blanco de 15px con peso 600 sobre #009C2A da 3,63:1, y el mínimo de la WCAG para texto de ese tamaño es 4,5:1 —el umbral de 3:1 aplica sólo a partir de 18,66px en negrita—. O sea que el botón más importante de la página era el elemento menos legible. #00871C es el mismo tono, apenas más oscuro, y da 4,69:1. La diferencia a simple vista es mínima; la del contraste no. --mp-green sigue siendo #009C2A y se usa en todo lo decorativo —viñetas, acentos, la línea de la cinta—, donde no hay texto encima y la regla no aplica. El verde del logotipo no se toca. -------------------------------------------------------------------------- */ .mp-home .mp-btn--primary{background:var(--mp-green-btn,#00871C);color:#fff;} .mp-home .mp-btn--primary:hover{background:var(--mp-green-dk);transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,112,30,.30);} .mp-home .mp-btn--dark{background:var(--mp-black);color:#fff;} .mp-home .mp-btn--dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 14px 32px rgba(13,16,18,.24);} .mp-home .mp-btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.36);} .mp-home .mp-btn--ghost-dark:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.66);transform:translateY(-2px);} .mp-home .mp-btn--ghost-light{background:transparent;color:var(--mp-black);border-color:var(--mp-line-light);} .mp-home .mp-btn--ghost-light:hover{background:var(--mp-black);color:#fff;transform:translateY(-2px);} /* --- botones del hero -------------------------------------------------------- */ .mp-home .mp-hero .mp-btn--primary{ min-height:46px;height:46px;padding-inline:20px;border-radius:var(--mp-r-pill); background:#FFFFFF;color:#111417;border:1px solid #FFFFFF; font-size:13.5px;font-weight:600;box-shadow:none; } .mp-home .mp-hero .mp-btn--primary .mp-btn__ar{color:var(--mp-green);} .mp-home .mp-hero .mp-btn--primary:hover{ background:#FFFFFF;transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,12,18,.28); } .mp-home .mp-hero .mp-btn--ghost-dark{ min-height:46px;height:46px;padding-inline:20px; color:#FFFFFF;border:1px solid rgba(255,255,255,.52); background:rgba(8,12,18,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); font-size:13.5px;font-weight:600; } .mp-home .mp-hero .mp-btn--ghost-dark:hover{ background:rgba(8,12,18,.28);border-color:rgba(255,255,255,.78);transform:translateY(-2px); } .mp-home .mp-hero .mp-btn{ transition:transform 260ms cubic-bezier(.16,1,.3,1), background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease; } .mp-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:10px 0;min-height:44px;color:var(--mp-green-dk);} .mp-link span{position:relative;} .mp-link span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--mp-e);} .mp-link:hover span::after{transform:scaleX(1);} .mp-ondark .mp-link{color:var(--mp-green-br);} /* ============================================================================= 5. HEADER Se comprime al salir del hero y se retrae al bajar / reaparece al subir. ========================================================================== */ /* Grid de tres columnas con canal central elástico. El flex anterior no reservaba espacio y a 1025-1100px los tres grupos se pisaban. */ .mp-header{ position:fixed;top:0;left:0;right:0;z-index:120;height:var(--mp-header-h); color:#fff;background:transparent;border-bottom:1px solid transparent; transition:background .34s var(--mp-e),color .34s var(--mp-e), border-color .34s var(--mp-e),transform .34s var(--mp-e); } .mp-header.is-compact{ background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); color:var(--mp-black);border-bottom-color:rgba(13,16,18,.08); } .mp-header.is-hidden{transform:translateY(-100%);} .mp-header__in{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;height:64px;gap:24px; } .mp-header__logo{display:flex;align-items:center;width:126px;height:40px;flex:0 0 auto;position:relative;} /* ⚠️ Los dos archivos tienen proporciones distintas: el blanco es el lockup vertical (1400×650) y el color el horizontal (1400×289). Al conmutar por ancho fijo el logo daría un salto de 58px a 26px de alto. Se los encierra en una caja de 126×40 con object-fit:contain para que ninguno se deforme. Pendiente de asset: versión blanca del lockup HORIZONTAL. */ .mp-header__logo img{ max-width:126px;max-height:40px;width:auto;height:auto;object-fit:contain; transition:opacity .28s var(--mp-e); } .mp-header__logo .mp-logo--color{opacity:0;position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;} .mp-header.is-compact .mp-logo--color{opacity:1;} .mp-header.is-compact .mp-logo--white{opacity:0;} .mp-nav{display:flex;justify-content:center;align-items:center;gap:26px;min-width:0;white-space:nowrap;} .mp-nav a{ display:inline-flex;align-items:center;height:40px; font-size:13px;line-height:18px;font-weight:500; opacity:.88;transition:opacity .25s var(--mp-e),color .25s var(--mp-e); } .mp-nav a:hover{opacity:1;color:var(--mp-green-br);} .mp-header.is-compact .mp-nav a:hover{color:var(--mp-green-dk);} /* ----------------------------------------------------------------------------- DESPLEGABLE DE SERVICIOS Vive acá y no en la hoja de las subpáginas porque lo usan las dos: la portada y las ocho de servicio. Estaba duplicado y eso garantiza que tarde o temprano una de las dos copias quede vieja. El color va por `inherit`, a propósito. `.mp-header` es blanco cuando está desplegado sobre el hero oscuro y `var(--mp-black)` cuando se comprime sobre fondo claro; heredando, el botón sigue al header sin ninguna regla extra. El único caso que necesita override es el hero claro y las subpáginas, y ese ya está resuelto más abajo junto con los enlaces de la nav. -------------------------------------------------------------------------- */ .mp-navdrop{position:relative;} .mp-navdrop__bt{ display:inline-flex;align-items:center;gap:6px;height:40px; font-family:inherit;font-size:13px;line-height:18px;font-weight:500; color:inherit;background:none;border:0;cursor:pointer;padding:0; opacity:.88;transition:opacity .25s var(--mp-e),color .25s var(--mp-e); } .mp-navdrop__bt:hover{opacity:1;color:var(--mp-green-br);} .mp-header.is-compact .mp-navdrop__bt:hover{color:var(--mp-green-dk);} .mp-navdrop__bt svg{transition:transform .26s var(--mp-e);} .mp-navdrop__bt[aria-expanded="true"] svg{transform:rotate(180deg);} .mp-navdrop__pn{ position:absolute;left:-18px;top:calc(100% + 14px);z-index:60; display:grid;gap:1px;min-width:262px;padding:8px;border-radius:16px; background:#fff;border:1px solid var(--mp-line-light); box-shadow:0 26px 58px -22px rgba(13,16,18,.34); } .mp-navdrop__pn[hidden]{display:none;} /* El panel es blanco en los dos contextos, así que su contenido va oscuro siempre: no hereda del header. */ .mp-home .mp-navdrop__it{ display:block;padding:10px 14px;border-radius:10px; font-size:14px;line-height:1.35;font-weight:500;color:var(--mp-gray-700); opacity:1;height:auto; transition:background .18s var(--mp-e),color .18s var(--mp-e); } .mp-home .mp-navdrop__it:hover{background:var(--mp-off-white);color:var(--mp-black,#111417);} .mp-navdrop__it.is-actual{color:var(--mp-green-dk,#00701E);font-weight:600; background:rgba(0,156,42,.08);} .mp-header__cta{display:flex;align-items:center;gap:10px;white-space:nowrap;} .mp-header__track, .mp-header .mp-btn{min-height:40px;height:40px;padding-inline:15px;font-size:12.5px;} .mp-header__track{ display:inline-flex;align-items:center;gap:8px;border-radius:var(--mp-r-pill); border:1px solid rgba(255,255,255,.52);font-weight:600; transition:background .25s var(--mp-e),border-color .25s var(--mp-e); } .mp-header__track:hover{background:rgba(255,255,255,.12);} .mp-header.is-compact .mp-header__track{border-color:rgba(13,16,18,.20);} .mp-header.is-compact .mp-header__track:hover{background:var(--mp-gray-100);} /* Estado sobre el hero: CTA blanco con texto oscuro. Estado sobre fondo claro: CTA navy con texto blanco. */ .mp-home .mp-header .mp-btn--primary{background:#FFFFFF;color:#111417;border-color:#FFFFFF;box-shadow:none;} .mp-home .mp-header .mp-btn--primary:hover{background:#FFFFFF;transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,12,18,.26);} .mp-home .mp-header.is-compact .mp-btn--primary{background:var(--mp-navy);color:#FFFFFF;border-color:var(--mp-navy);} .mp-home .mp-header.is-compact .mp-btn--primary:hover{background:var(--mp-navy-dk);border-color:var(--mp-navy-dk);box-shadow:0 10px 24px rgba(23,48,112,.30);} .mp-burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:5px;} .mp-burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--mp-e),opacity .2s;} .mp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .mp-burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .mp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mp-menu{position:fixed;inset:0;z-index:130;background:var(--mp-black);color:#fff;display:flex;flex-direction:column;padding:104px 20px 32px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .32s var(--mp-e),transform .32s var(--mp-e),visibility .32s;} .mp-menu.is-open{opacity:1;visibility:visible;transform:none;} .mp-menu a{display:flex;align-items:center;min-height:56px;font-size:21px;line-height:27px;font-weight:500;letter-spacing:-.5px;border-bottom:1px solid var(--mp-line-dark);} .mp-menu__cta{margin-top:auto;display:grid;gap:12px;padding-top:28px;} .mp-menu__cta .mp-btn{width:100%;} /* ============================================================================= 6. CONTENEDOR DEL ACTO ----------------------------------------------------------------------------- Se eliminaron las cuñas diagonales que separaban hero→plataformas y servicios→proceso: sin la ruta que las justificaba quedaban como formas amorfas subiendo sobre el contenido. Los cortes entre secciones son rectos. ========================================================================== */ .mp-act{position:relative;} /* ============================================================================= 7. HERO ========================================================================== */ /* `align-items:flex-end` empujaba todo contra el borde inferior y, sin padding-top, el eyebrow quedaba debajo del header fijo. Ahora el bloque se centra y reserva 104px arriba. */ .mp-hero{ position:relative;min-height:clamp(680px,92svh,860px);overflow:hidden;background:var(--mp-black); display:flex;align-items:center; } .mp-hero__media{position:absolute;inset:0;z-index:0;transform:scale(1.09);transform-origin:64% 42%;} .mp-hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;} .mp-hero__media::before{ content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(70% 90% at 76% 18%,rgba(23,48,112,.5),transparent 70%), radial-gradient(50% 70% at 12% 92%,rgba(0,156,42,.20),transparent 70%),var(--mp-black); } /* degradado direccional: se oscurece el lado del texto, no la imagen entera */ .mp-hero__overlay{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(96deg,rgba(6,8,9,.92) 0%,rgba(6,8,9,.78) 30%,rgba(6,8,9,.34) 62%,rgba(6,8,9,.06) 100%); } .mp-hero__vignette{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(6,8,9,.55) 0%,transparent 26%,transparent 58%,rgba(6,8,9,.72) 100%); } /* Sin `width:100%`: este elemento también lleva .mp-wrap y, al pasar el gutter de padding-inline a width, un width:100% de igual especificidad y posterior anulaba el centrado. Medido: el hero salía a 1521px pegado al borde. */ .mp-hero__grid{position:relative;z-index:4;} /* Todos los bloques arrancan sobre la misma línea izquierda: son hijos directos, sin offsets individuales. */ .mp-hero__content{ grid-column:1 / 7;align-self:center;max-width:700px; padding-top:104px;padding-bottom:118px; } .mp-hero__content .mp-eyebrow{color:var(--mp-green-br);margin-bottom:20px;} .mp-hero__content .mp-h1{color:#fff;margin-top:0;} .mp-hero__lead{color:rgba(255,255,255,.80);margin-top:20px;max-width:480px; font-size:var(--mp-body-lg);line-height:var(--mp-body-lg-line);} .mp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;} /* .mp-home dl{margin:0;padding:0} es (0,1,1) y le ganaba a esta regla, que era (0,1,0): los facts perdían sus 42px de aire y quedaban pegados a los botones. Tercera vez que aparece este patrón — por eso va prefijado. */ .mp-home .mp-hero__facts{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.24); } .mp-hero__fact dt{font-size:15px;line-height:22px;font-weight:600;color:#fff;letter-spacing:-.01em;} .mp-hero__fact dd{margin:3px 0 0;font-size:13px;line-height:20px;color:rgba(255,255,255,.62);} .mp-hero__cue{ position:absolute;left:50%;transform:translateX(-50%);bottom:20px;z-index:5; display:flex;align-items:center;gap:12px; font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.60); } .mp-hero__cue i{display:block;width:44px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden;} .mp-hero__cue i::after{content:"";position:absolute;inset:0;background:var(--mp-green-br);transform:translateX(-100%);animation:mp-cue 2.4s var(--mp-e) infinite;} @keyframes mp-cue{0%{transform:translateX(-100%);}55%{transform:translateX(0);}100%{transform:translateX(100%);}} /* ---------- hero sobre fotografía clara ---------- MEDICIÓN, no criterio estético. Sobre la foto, en la franja donde cae el texto (x 14–41%, y 18–86%): eyebrow media 222 1er percentil 215 0,0% de píxeles por debajo del umbral botones media 209 1er percentil 205 0,0% H1 media 194 1er percentil 57 11,5% lead media 198 1er percentil 51 8,2% cifras media 195 1er percentil 76 6,5% El umbral es 124: con texto #111417 (luminancia relativa 0,0065) hace falta fondo ≥0,204 para llegar a 4,5:1, que en 8 bits es 124. O sea que la foto YA alcanza en el 90% de la franja, y en el eyebrow y los botones alcanza en el 100%. El velo de ancho completo que había —.94 a la izquierda hasta .06 a la derecha— estaba lavando toda la imagen para resolver un 10% de píxeles. Se elimina el velo global y queda una mancha suave, sólo detrás del bloque de texto, con pico .58. Sobre el peor píxel medido (51) da 51·0,42+255·0,58 = 169, que contra #111417 son 8,0:1. Sobre la media (195) da 230. El resto de la fotografía queda sin tocar. */ .mp-hero--claro .mp-hero__overlay{background:none;} /* Arriba: sólo lo justo para que la nav oscura despegue del borde de la foto. Abajo: sólo la costura con la sección blanca que sigue. Nada en el medio. */ .mp-hero--claro .mp-hero__vignette{ background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,transparent 13%, transparent 88%,rgba(247,248,245,.55) 100%); } /* La mancha va detrás del bloque de texto, no del hero. z-index:-1 la manda detrás del contenido pero dentro del contexto de apilamiento de .mp-hero__grid (z-index:4), así que sigue por encima de la fotografía. */ .mp-hero--claro .mp-hero__content{position:relative;} .mp-hero--claro .mp-hero__content::before{ content:"";position:absolute;z-index:-1; inset:2% -18% 4% -14%; background:radial-gradient(62% 54% at 40% 50%, rgba(255,255,255,.58) 0%, rgba(255,255,255,.50) 40%, rgba(255,255,255,.24) 66%, rgba(255,255,255,0) 86%); } .mp-hero--claro .mp-h1{color:var(--mp-black,#111417);} .mp-hero--claro .mp-hero__lead{color:var(--mp-gray-700);} .mp-hero--claro .mp-eyebrow{color:var(--mp-green-dk,#00701E);} .mp-hero--claro .mp-hero__facts{border-top-color:rgba(13,16,18,.16);} .mp-hero--claro .mp-hero__fact dt{color:var(--mp-black,#111417);} .mp-hero--claro .mp-hero__fact dd{color:var(--mp-gray-600);} .mp-hero--claro .mp-hero__cue{color:var(--mp-gray-600);} .mp-hero--claro .mp-hero__cue i{background:var(--mp-green);} /* el botón fantasma pasa a borde oscuro: sobre claro, el blanco desaparece */ .mp-home .mp-hero--claro .mp-btn--ghost-dark{ color:var(--mp-black,#111417);border-color:rgba(13,16,18,.28); } .mp-home .mp-hero--claro .mp-btn--ghost-dark:hover{ background:rgba(13,16,18,.06);border-color:rgba(13,16,18,.5); } .mp-home .mp-hero--claro .mp-btn--primary{ background:var(--mp-green-btn,#00871C);color:#fff;border-color:var(--mp-green-btn,#00871C); } .mp-home .mp-hero--claro .mp-btn--primary .mp-btn__ar{color:#fff;} .mp-home .mp-hero--claro .mp-btn--primary:hover{background:var(--mp-green-dk);border-color:var(--mp-green-dk);} /* ----------------------------------------------------------------------------- HEADER SOBRE HERO CLARO Estas reglas estaban SIN condicionar al hero claro: apuntaban a `.mp-header:not(.is-compact)` a secas, o sea a cualquier header desplegado. Mientras el hero fue claro no se notó, pero al volver el hero a foto oscura el header aparecía con logo a color y nav negra sobre una foto oscura — ilegible—. Es el mismo tipo de error que las cinco veces anteriores: una regla escrita para un caso y aplicada a todos. Ahora se condicionan con :has(). El header está ANTES que el hero en el DOM, así que ningún selector de hermanos alcanza; :has() sobre el contenedor sí. Soporte: Chrome 105+, Safari 15.4+, Firefox 121+. Donde no exista, el bloque entero se ignora y el header queda en su versión clara sobre foto oscura, que es la combinación legible — el fallo es hacia el lado seguro. -------------------------------------------------------------------------- */ .mp-home:has(.mp-hero--claro) .mp-header:not(.is-compact) .mp-logo--white, .mp-serv .mp-header:not(.is-compact) .mp-logo--white{opacity:0;} .mp-home:has(.mp-hero--claro) .mp-header:not(.is-compact) .mp-logo--color, .mp-serv .mp-header:not(.is-compact) .mp-logo--color{opacity:1;} /* El