/* ============================================================ UNU - Capa editorial 2026 (art-directed, sin bordes, mobile-first) ------------------------------------------------------------ Se carga DESPUES de unu-2026.css y solo actua dentro de . Fuera de ese cuerpo el sitio sigue exactamente igual, asi que la direccion de arte se puede activar o revertir plantilla por plantilla. La idea: la pagina deja de ser una pila de modulos y pasa a ser UN lienzo continuo. No hay tarjetas, cajas, bordes, sombras ni franjas de color con corte recto. Lo que separa los contenidos es el espacio negativo, la escala tipografica, la posicion en la reticula y el ritmo vertical. MOBILE-FIRST. Lo que hay fuera de un @media es la version movil: una columna, sin sangrados, sin solapes y sin animacion. Las composiciones (reticula rota, dipticos, sticky, parallax) se AGREGAN en @media (min-width: ...). Nunca se escribe una regla de escritorio suelta para luego deshacerla en max-width. Lenguaje de formas: toda forma grande sale de la silueta del producto -el tanque estacionario y la cisterna de la pipa-: cuerpo recto con casquetes elipticos. De pie es un cilindro (border-radius: 50% / 8%), tumbado es un tanque (8% / 50%). Los objetos pequenos -campos, botones, etiquetas- usan la capsula completa (--u-r-pill). Nada de formas libres: acaban pareciendo un huevo y no dicen nada de lo que vendemos. Indice E0 Tokens y puntos de quiebre E1 Borrado de cajas (borderless) E2 Lienzo continuo y formas de tanque E3 Reticula: una columna -> doce E4 Tipografia sobredimensionada E5 Recortes flotantes E6 Composiciones por seccion (roles) E7 Narrativa por scroll (solo escritorio) Vocabulario (se aplica por clase, sin tocar los snippets): Seccion .unu-ed + rol: --indice | --manifiesto | --secuencia --diptico | --registro | --tira Fondo .unu-ed--campo (tanque oscuro) | .unu-ed--velo Reticula .unu-ed__grid .unu-col-* .unu-shift-* Sangrados .unu-bleed--right | --left | --full Tipografia .unu-ed__mega .unu-ed__num .unu-ed__marca Formas .unu-ed-tanque Recortes .unu-cutout .unu-cutout__label .unu-ed-float Scroll data-ed-reveal data-ed-parallax="0.06" ============================================================ */ /* ---------- E0 - Tokens y puntos de quiebre -------------------------- */ /* Dos quiebres, no mas: 700px la retícula admite dos piezas por fila 981px entra la composicion completa (12 columnas, solapes, scroll) */ .unu-editorial { /* Ritmo: el aire ES el separador. Fluido, asi que la mayoria de las medidas no necesitan media query. */ --ed-air: var(--u-section); --ed-air-s: clamp(42px, 4vw, 64px); /* Escala tipografica editorial */ --ed-fs-mega: clamp(2.5rem, 1.1rem + 8.2vw, 8.2rem); --ed-fs-title: clamp(1.9rem, 1.1rem + 4.2vw, 4.6rem); --ed-fs-num: clamp(3.2rem, 2rem + 9vw, 12rem); --ed-fs-lead: clamp(1.02rem, .98rem + .6vw, 1.42rem); /* Planos */ --ed-z-bg: 0; --ed-z-body: 2; --ed-z-float: 4; --ed-hair: color-mix(in srgb, var(--u-lilac) 45%, transparent); /* Rail: distancia real entre el borde de la pantalla y la columna de texto. En movil es el gutter; solo sirve para medir sangrados, que no existen hasta escritorio. */ --ed-rail: max(var(--u-gutter, 20px), (100vw - var(--u-wrap)) / 2); } /* ---------- E1 - Borrado de cajas ------------------------------------ */ /* Un solo bloque quita el lenguaje de tarjeta a TODO lo que el sistema modular dibuja con caja. No se reescribe el HTML: se le retira la caja. Aplica igual en movil y en escritorio. */ .unu-editorial :is( .unu-card, .unu-step, .unu-resource, .unu-zone-card, .unu-lp-benefit, .unu-lp-step, .unu-lp-proof-card, .unu-channel, .unu-widget, .unu-panel__card, .unu-lp-trust-strip, .unu-lp-trust-item, .unu-faq details, .unu-lp-faq__item, .unu-feature__list li, .unu-buscador, .unu-blog-card, .unu-lp-trust, .unu-lp-stats > * ) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; } .unu-editorial :is(.unu-card, .unu-step, .unu-lp-benefit, .unu-blog-card):hover { transform: none; box-shadow: none; border-color: transparent; } /* Las superficies de seccion desaparecen: el lienzo es uno solo. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section), .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--soft, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--tint, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--surface, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--purple, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--ink, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--aqua { background: none; } /* Contenedores y bloques del sistema modular: se quedan sin panel. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--contained > .unu-wrap, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-section--block > .unu-wrap { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } /* Acentos geometricos del sistema modular: aqui la profundidad la dan las capas y los recortes, no los adornos de fondo. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-accent::before, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-accent::after { content: none; } /* Pastillas de icono -> signo suelto sobre el lienzo. */ .unu-editorial :is(.unu-card__icon, .unu-lp-benefit__icon, .unu-lp-step__icon, .unu-step > span:first-child, .unu-feature__list li > i, .unu-lp-trust-item > i, .unu-channel > i:first-child) { display: inline-flex; width: auto; height: auto; margin: 0 0 clamp(8px, 1.4vw, 18px); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--u-violet); font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); } .unu-editorial .unu-feature__list li { grid-template-columns: 26px 1fr; } .unu-editorial .unu-feature__list li > i { margin: 2px 0 0; font-size: 1rem; } /* Al quitar el fondo oscuro de un panel, el texto en blanco que llevaba dentro quedaria ilegible sobre el lienzo claro: se devuelve al color de texto normal. Dentro de un campo oscuro sigue mandando el campo. */ .unu-editorial :is(.unu-widget, .unu-lp-trust, .unu-panel__card, .unu-buscador) { color: var(--u-text); } .unu-editorial :is(.unu-widget, .unu-lp-trust, .unu-panel__card, .unu-buscador) :is(p, li, span, small, time) { color: var(--u-text-2); } .unu-editorial :is(.unu-widget, .unu-lp-trust, .unu-panel__card) :is(h2, h3, strong) { color: var(--u-text); } .unu-editorial .unu-ed--campo :is(.unu-widget, .unu-lp-trust, .unu-panel__card) { color: var(--u-on-dark); } .unu-editorial .unu-ed--campo :is(.unu-widget, .unu-lp-trust, .unu-panel__card) :is(h2, h3, strong) { color: #fff; } /* Pastillas de dato del hero: texto, no chip. */ .unu-editorial :is(.unu-home-hero-v2__proof, .unu-lp-points, .unu-hero-chips) li { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* Eyebrow: de pastilla a linea de cabecera de revista. */ .unu-editorial .unu-eyebrow { display: block; width: auto; margin: 0 0 clamp(12px, 1.8vw, 26px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--u-text-3); font-size: var(--u-fs-xs); letter-spacing: .22em; } .unu-editorial .unu-eyebrow i { display: none; } .unu-editorial .unu-ed--sobre-oscuro .unu-eyebrow { color: color-mix(in srgb, var(--u-yellow) 80%, #fff); } /* Imagenes: fuera del rectangulo. La figura pierde su fondo degradado y su recorte, asi que la fotografia queda suelta sobre el lienzo. */ .unu-editorial :is(.unu-feature__media, .unu-split--media, .unu-promo__media) { display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } .unu-editorial :is(.unu-feature__media, .unu-split--media, .unu-promo__media) img { width: 100%; max-width: 100%; height: auto; max-height: none; border-radius: 0; box-shadow: none; object-fit: contain; } /* ---------- E2 - Lienzo continuo y formas de tanque ------------------ */ .unu-editorial { background: var(--u-canvas); } /* Plano de fondo, fijo por detras de todo el documento. */ .unu-editorial .unu-ed-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80vw 60vw at 78% 6%, color-mix(in srgb, var(--u-violet) 16%, transparent), transparent 68%), radial-gradient(70vw 55vw at 4% 42%, color-mix(in srgb, var(--u-lilac) 26%, transparent), transparent 70%), radial-gradient(80vw 60vw at 92% 82%, color-mix(in srgb, var(--u-yellow) 13%, transparent), transparent 72%); opacity: .9; } /* Ojo: la cabecera NO entra aqui. Es sticky y trae su propio z-index alto; si se le toca la posicion deja de pegarse arriba y el logo y el menu desaparecen en cuanto se baja. */ .unu-editorial > main, .unu-editorial > footer { position: relative; z-index: var(--ed-z-body); } /* Ritmo vertical propio */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) { position: relative; isolation: isolate; padding-block: var(--ed-air); overflow: visible; } .unu-editorial .unu-ed--liga, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) + :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) { padding-block-start: var(--ed-air-s); } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) { border-top: 0; border-bottom: 0; } /* La forma base. Los casquetes son elipses, no semicircunferencias: es como se dibuja de verdad el cierre de un tanque, y ademas su profundidad es proporcional (8% del lado largo) en vez de comerse media figura. De pie -movil- es un cilindro; tumbada -escritorio- es el tanque. */ .unu-editorial :is(.unu-ed--campo, .unu-ed--velo)::before { border-radius: 50% / 8%; } /* Velo: aire de color, muy tenue, detras del texto. */ .unu-editorial .unu-ed--velo::before { content: ""; position: absolute; inset: 6% -4%; z-index: -1; background: linear-gradient(120deg, color-mix(in srgb, var(--u-lilac-soft) 85%, transparent), color-mix(in srgb, var(--u-yellow-soft) 70%, transparent)); opacity: .8; pointer-events: none; } /* Campo oscuro: sustituye a --purple/--block. En movil es un cilindro de pie, con sus dos casquetes a la vista; por eso la seccion necesita mas aire arriba y abajo, para que el texto no caiga sobre la curva. */ /* El casquete se come la esquina superior e inferior: el texto arranca por debajo de la curva para no perder contraste contra el lienzo claro. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-ed--campo { color: var(--u-on-dark); padding-block: calc(var(--ed-air) + clamp(18px, 2vw, 30px)); } .unu-editorial .unu-ed--campo::before { content: ""; position: absolute; inset: 2% -4%; z-index: -1; background: radial-gradient(62% 86% at 26% 22%, var(--u-purple-2), transparent 70%), linear-gradient(155deg, var(--u-purple) 0%, var(--u-ink) 80%); pointer-events: none; } .unu-editorial .unu-ed--campo :is(h2, h3, strong, .unu-title) { color: #fff; } .unu-editorial .unu-ed--campo :is(p, li, .unu-copy) { color: var(--u-on-dark-2); } .unu-editorial .unu-ed--campo :is(.unu-card__icon, .unu-step > span:first-child, .unu-feature__list li > i) { color: var(--u-yellow); } /* El tanque dibujado. A tamano de seccion cualquier capsula se lee como un rectangulo muy redondeado, asi que la forma se nombra ademas con una pieza de proporcion correcta (2.6:1, la de un tanque estacionario): contorno fino y las dos costuras de refuerzo. Se puede usar suelta en cualquier seccion con . */ .unu-editorial .unu-ed-tanque { position: absolute; z-index: -1; width: clamp(180px, 26vw, 420px); aspect-ratio: 2.6 / 1; border: 1px solid var(--u-line-2); border-radius: var(--u-r-pill); background: linear-gradient(90deg, transparent 0 17%, currentColor 17% calc(17% + 1px), transparent calc(17% + 1px)), linear-gradient(90deg, transparent 0 83%, currentColor 83% calc(83% + 1px), transparent calc(83% + 1px)); color: color-mix(in srgb, var(--u-lilac) 55%, transparent); pointer-events: none; } /* --- E2.4 - Formas de fondo ------------------------------------------- El lienzo no puede ser una superficie muerta. Cada seccion recibe DOS piezas de fondo del mismo vocabulario -tanque, cilindro, valvula, retimbrado- que se van alternando solas por posicion, asi que ninguna pagina repite el mismo fondo dos veces seguidas y no hay que colocarlas a mano seccion por seccion. Viven en los pseudoelementos de .unu-wrap (los de la seccion ya estan ocupados por --campo y --velo), van al fondo, sin sombra y sin color propio: solo modulan la superficie. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::before, .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::after { content: ""; position: absolute; z-index: -1; opacity: .55; pointer-events: none; } /* Sobre campo oscuro las mismas formas se dibujan en claro */ .unu-editorial .unu-ed--campo > .unu-wrap::before, .unu-editorial .unu-ed--campo > .unu-wrap::after { opacity: .5; } /* 1 · Tanque tumbado, a la derecha */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section):nth-of-type(4n+1) > .unu-wrap::before { right: -8%; top: 6%; width: clamp(150px, 22vw, 340px); aspect-ratio: 2.6 / 1; border: 1px solid var(--ed-forma, var(--u-line-2)); border-radius: 8% / 50%; background: linear-gradient(90deg, transparent 0 17%, var(--ed-forma, var(--u-line-2)) 17% calc(17% + 1px), transparent calc(17% + 1px)), linear-gradient(90deg, transparent 0 83%, var(--ed-forma, var(--u-line-2)) 83% calc(83% + 1px), transparent calc(83% + 1px)); } /* 2 · Cilindro de pie, a la izquierda */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section):nth-of-type(4n+2) > .unu-wrap::before { left: -10%; bottom: 4%; width: clamp(78px, 9vw, 140px); aspect-ratio: 1 / 2.4; border: 1px solid var(--ed-forma, var(--u-line-2)); border-radius: 50% / 9%; background: linear-gradient(180deg, transparent 0 18%, var(--ed-forma, var(--u-line-2)) 18% calc(18% + 1px), transparent calc(18% + 1px)), linear-gradient(180deg, transparent 0 82%, var(--ed-forma, var(--u-line-2)) 82% calc(82% + 1px), transparent calc(82% + 1px)); } /* 3 · Valvula: el aro de la boca del tanque */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section):nth-of-type(4n+3) > .unu-wrap::before { right: -6%; bottom: 8%; width: clamp(120px, 16vw, 240px); aspect-ratio: 1; border: 1px solid var(--ed-forma, var(--u-line-2)); border-radius: 50%; box-shadow: 0 0 0 clamp(14px, 2.4vw, 34px) color-mix(in srgb, var(--u-lilac) 8%, transparent); } /* 4 · Dos tanques encajados, arriba a la izquierda */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section):nth-of-type(4n) > .unu-wrap::before { left: -12%; top: 4%; width: clamp(130px, 19vw, 300px); aspect-ratio: 2.2 / 1; border: 1px solid var(--ed-forma, var(--u-line-2)); border-radius: 8% / 50%; box-shadow: clamp(14px, 2vw, 30px) clamp(16px, 2.4vw, 36px) 0 -1px var(--ed-forma, var(--u-line-2)); } /* Marca macro: escala e intensidad responden al papel de cada seccion. Una sola parrilla deja respirar sus trazos y funciona como figura. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section) { --ed-marca-size: clamp(300px, 48vw, 740px); --ed-marca-opacity: .23; } .unu-editorial .unu-ed--indice { --ed-marca-size: clamp(340px, 58vw, 880px); --ed-marca-opacity: .29; } .unu-editorial .unu-ed--campo { --ed-marca-size: clamp(360px, 62vw, 960px); --ed-marca-opacity: .36; } .unu-editorial .unu-ed--diptico { --ed-marca-size: clamp(280px, 42vw, 640px); --ed-marca-opacity: .18; } .unu-editorial .unu-ed--secuencia { --ed-marca-opacity: .19; } .unu-editorial .unu-ed--registro { --ed-marca-size: clamp(250px, 34vw, 520px); --ed-marca-opacity: .10; } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::after { width: var(--ed-marca-size); aspect-ratio: 241 / 136; background-image: url("logos/parrilla-unu.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; color: var(--ed-forma, var(--u-lilac)); opacity: var(--ed-marca-opacity); } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section):nth-of-type(odd) > .unu-wrap::after { left: -9%; top: 12%; -webkit-mask-image: linear-gradient(to right, #000 15%, transparent 100%); mask-image: linear-gradient(to right, #000 15%, transparent 100%); } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section):nth-of-type(even) > .unu-wrap::after { right: -7%; bottom: 10%; -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 100%); mask-image: linear-gradient(to left, #000 15%, transparent 100%); } /* En oscuro la marca necesita luz; el filtro conserva el acento amarillo. */ .unu-editorial .unu-ed--campo > .unu-wrap::after { filter: brightness(1.85) saturate(.65); } /* El indice tiene aire junto a su cabecera: ahi vive la marca principal. */ .unu-editorial .unu-ed--indice:nth-of-type(n) > .unu-wrap::after { left: auto; right: -6%; top: 0; bottom: auto; -webkit-mask-image: linear-gradient(to left, #000 18%, transparent 100%); mask-image: linear-gradient(to left, #000 18%, transparent 100%); } /* Sobre oscuro las formas se dibujan en blanco */ .unu-editorial :is(.unu-ed--campo, .unu-section--purple, .unu-section--ink) { --ed-forma: rgba(255, 255, 255, .26); } /* En movil queda una sola marca grande y quieta, sin el punteado repetido. Asi el fondo conserva identidad sin cargar una pantalla pequena. */ @media (max-width: 699px) { .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::after { display: block; width: min(74vw, 340px); aspect-ratio: 241 / 136; background-image: url("logos/parrilla-unu.svg"); background-repeat: no-repeat; background-size: contain; opacity: calc(var(--ed-marca-opacity) * .58); } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::before { opacity: .32; } } /* Una seccion que ya trae su propia composicion de fondo no necesita mas */ .unu-editorial :is(.unu-ed-hero, .unu-ed--tira) > .unu-wrap::before, .unu-editorial :is(.unu-ed-hero, .unu-ed--tira) > .unu-wrap::after { content: none; } /* ---------- E3 - Reticula: una columna ------------------------------- */ /* En movil TODO es una columna. Las clases de colocacion existen pero no hacen nada hasta escritorio: asi el HTML es el mismo en los dos casos. */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) .unu-wrap { position: relative; z-index: var(--ed-z-body); } .unu-editorial .unu-ed__grid { display: grid; gap: var(--u-gap); } /* ---------- E4 - Tipografia sobredimensionada ------------------------ */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) .unu-title { margin: 0 0 clamp(12px, 1.8vw, 26px); font-size: var(--ed-fs-title); line-height: .98; letter-spacing: -.035em; text-wrap: balance; } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) .unu-copy { font-size: var(--ed-fs-lead); line-height: 1.5; max-width: 46ch; } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) :is(.unu-card, .unu-step) strong { font-size: clamp(1.15rem, 1rem + .8vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) :is(.unu-card, .unu-step) p { font-size: 1rem; max-width: 38ch; } .unu-editorial .unu-ed__mega { margin: 0; font-size: var(--ed-fs-mega); font-weight: 800; line-height: .88; letter-spacing: -.045em; text-wrap: balance; } .unu-editorial .unu-ed__mega em { font-style: normal; color: var(--u-yellow); } .unu-editorial .unu-ed__mega .fina { color: transparent; -webkit-text-stroke: clamp(1px, .12vw, 2px) currentColor; } .unu-editorial .unu-ed__num { display: block; font-size: var(--ed-fs-num); font-weight: 900; line-height: .78; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ed-hair); pointer-events: none; user-select: none; } .unu-editorial .unu-ed--campo .unu-ed__num { -webkit-text-stroke-color: rgba(255,255,255,.3); } /* Numeracion del indice y del manifiesto. Sin tarjeta, la cifra en contorno es lo que ordena la lectura: va en el flujo, encima del titulo. Donde hay numero, el icono sobra. */ .unu-editorial :is(.unu-ed--indice, .unu-ed--manifiesto) .unu-grid { counter-reset: paso; } .unu-editorial :is(.unu-ed--indice, .unu-ed--manifiesto) .unu-card { counter-increment: paso; position: relative; } .unu-editorial :is(.unu-ed--indice, .unu-ed--manifiesto) .unu-card::before { content: "0" counter(paso); display: block; margin: 0 0 clamp(8px, 1.2vw, 20px); font-size: clamp(2.6rem, 1.4rem + 4.2vw, 6rem); font-weight: 900; line-height: .78; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ed-hair); pointer-events: none; } .unu-editorial :is(.unu-ed--indice, .unu-ed--manifiesto) .unu-card > .unu-card__icon { display: none; } .unu-editorial .unu-ed--campo .unu-card::before { -webkit-text-stroke-color: rgba(255,255,255,.3); } .unu-editorial .unu-ed__marca { display: block; font-size: clamp(3rem, 1rem + 14vw, 15rem); font-weight: 900; line-height: .8; letter-spacing: -.06em; color: color-mix(in srgb, var(--u-lilac) 30%, transparent); pointer-events: none; user-select: none; } /* ---------- E5 - Recortes flotantes ---------------------------------- */ /* Fotografia sin fondo, sin marco y sin rectangulo: la sombra sigue la silueta (drop-shadow sobre el canal alfa), no la caja. */ .unu-editorial .unu-cutout { display: block; width: 100%; height: auto; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 30px 46px rgba(21, 15, 58, .26)); } .unu-editorial .unu-cutout--suave { filter: drop-shadow(0 22px 34px rgba(21, 15, 58, .18)); } .unu-editorial .unu-ed-float { position: relative; z-index: var(--ed-z-float); pointer-events: none; } .unu-editorial .unu-ed-float--detras { z-index: 1; } .unu-editorial .unu-ed-float--cruza { margin-block-end: clamp(-64px, -8vw, -24px); } /* En movil la etiqueta va debajo del recorte, en el flujo: colgarla con una linea sobre una pantalla estrecha solo tapa la foto. */ .unu-editorial .unu-cutout__label { display: grid; gap: 2px; margin-top: 12px; max-width: 28ch; font-size: var(--u-fs-xs); line-height: 1.35; color: var(--u-text-2); } .unu-editorial .unu-cutout__label strong { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.4rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--u-purple); } .unu-editorial .unu-ed--campo .unu-cutout__label { color: var(--u-on-dark-2); } .unu-editorial .unu-ed--campo .unu-cutout__label strong { color: var(--u-yellow); } /* ---------- E6 - Composiciones por seccion --------------------------- */ /* E6.1 - Portada. En movil: titular grande, datos en linea y el formulario debajo, sin nada que lo tape. */ .unu-editorial .unu-ed-hero { position: relative; isolation: isolate; padding-block: clamp(26px, 6vw, 104px) clamp(40px, 8vw, 150px); background: none; color: var(--u-text); overflow: visible; } .unu-editorial .unu-ed-hero::before, .unu-editorial .unu-ed-hero::after { content: none; } .unu-editorial .unu-ed-hero__campo { position: absolute; inset: -40% -20% -8%; z-index: -1; background: radial-gradient(60% 70% at 22% 26%, var(--u-purple-2), transparent 74%), linear-gradient(150deg, var(--u-purple) 0%, var(--u-ink) 82%); /* Casquete inferior: el hero termina como termina un tanque, en curva */ border-radius: 0 0 50% 50% / 0 0 24% 24%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%); mask-image: linear-gradient(180deg, #000 62%, transparent 97%); pointer-events: none; } /* La portada lleva la expresion mas grande de la parrilla UNU. Se recorta hacia los bordes para que funcione como paisaje y no como un logotipo colocado detras del contenido. */ .unu-editorial .unu-ed-hero__campo::after { content: ""; position: absolute; left: 34%; top: 4%; width: clamp(560px, 72vw, 1120px); aspect-ratio: 241 / 136; background: url("logos/parrilla-unu.svg") center / contain no-repeat; filter: brightness(1.7) saturate(.72); opacity: .34; -webkit-mask-image: radial-gradient(ellipse at center, #000 24%, transparent 74%); mask-image: radial-gradient(ellipse at center, #000 24%, transparent 74%); pointer-events: none; } @media (max-width: 699px) { .unu-editorial .unu-ed-hero__campo::after { left: -12%; top: 3%; width: 138vw; opacity: .22; } } .unu-editorial .unu-ed-hero .unu-home-hero-v2__grid { display: grid; gap: clamp(22px, 5vw, 56px); } .unu-editorial .unu-ed-hero .unu-home-hero-v2__eyebrow { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--u-yellow); font-size: var(--u-fs-xs); letter-spacing: .24em; text-transform: uppercase; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__title { font-size: var(--ed-fs-mega); line-height: .86; letter-spacing: -.045em; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__lead { max-width: 38ch; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__proof { display: flex; flex-wrap: wrap; gap: 10px clamp(14px, 3vw, 46px); margin-top: clamp(18px, 3vw, 42px); padding: 0; list-style: none; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__proof li { color: #fff; font-size: var(--u-fs-sm); font-weight: 700; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__proof i { color: var(--u-yellow); } /* El arte del hero lo aporta el recorte, no la imagen de fondo antigua */ .unu-editorial .unu-ed-hero .unu-home-hero-v2__image { display: none; } /* En movil no hay pieza cruzada: estorba y empuja el formulario */ .unu-editorial .unu-ed-hero__pieza { display: none; } /* E6.1b - Heroes de interiores, cobertura y landing. Reciben el mismo tratamiento que la portada sin tener que marcarlos: la franja morada con imagen de fondo se sustituye por el casquete de tanque, que se desvanece hacia el lienzo. Un hero nuevo entra solo. */ .unu-editorial :is(.unu-page-hero, .unu-lp-hero) { position: relative; isolation: isolate; overflow: visible; background-color: transparent; background-image: none; } .unu-editorial :is(.unu-page-hero, .unu-lp-hero) > .unu-wrap { position: relative; z-index: 1; } .unu-editorial :is(.unu-page-hero, .unu-lp-hero)::before { content: ""; position: absolute; inset: -40% -20% -8%; z-index: -1; background: radial-gradient(60% 70% at 22% 26%, var(--u-purple-2), transparent 74%), linear-gradient(150deg, var(--u-purple) 0%, var(--u-ink) 82%); border-radius: 0 0 50% 50% / 0 0 24% 24%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%); mask-image: linear-gradient(180deg, #000 62%, transparent 97%); pointer-events: none; } .unu-editorial :is(.unu-page-hero, .unu-lp-hero)::after { content: ""; position: absolute; inset: auto; left: 14%; right: auto; top: -26%; height: auto; z-index: 0; width: clamp(620px, 76vw, 1160px); aspect-ratio: 241 / 136; background: url("logos/parrilla-unu.svg") center / contain no-repeat; filter: brightness(2.15) saturate(.62); opacity: .36; -webkit-mask-image: radial-gradient(ellipse at center, #000 22%, transparent 76%); mask-image: radial-gradient(ellipse at center, #000 22%, transparent 76%); pointer-events: none; } @media (max-width: 699px) { .unu-editorial :is(.unu-page-hero, .unu-lp-hero)::after { left: -18%; top: -5%; width: 142vw; opacity: .20; } } .unu-editorial :is(.unu-page-hero h1, .unu-lp-hero__title) { font-size: var(--ed-fs-title); line-height: .92; letter-spacing: -.04em; } /* Kicker: de pastilla a linea de cabecera, como el eyebrow */ .unu-editorial .unu-page-hero__kicker { display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--u-yellow); font-size: var(--u-fs-xs); letter-spacing: .24em; } .unu-editorial .unu-lp-hero__glow { display: none; } .unu-editorial :is(.unu-local-hero__image, .unu-lp-hero__media img) { border-radius: 0; box-shadow: none; filter: drop-shadow(0 30px 46px rgba(21, 15, 58, .42)); } @media (min-width: 981px) { .unu-editorial :is(.unu-page-hero, .unu-lp-hero)::before { inset: -30% -18% -14% -22%; } } /* E6.2 - Formulario de pedido: la unica pieza solida de la portada. Fondo blanco y curvas de capsula, sin borde y sin una sola arista. No se abre ni se aplana: es el objeto que hay que tocar. */ .unu-editorial :is(.unu-ed-form, .unu-home-order) { padding: clamp(20px, 2.6vw, 34px) clamp(18px, 2.4vw, 32px); border: 0; border-radius: clamp(26px, 3.6vw, 52px); background: var(--u-surface); box-shadow: 0 24px 60px rgba(21, 15, 58, .3); color: var(--u-text); gap: clamp(12px, 1.5vw, 18px); } .unu-editorial :is(.unu-ed-form, .unu-home-order) .unu-home-order__step { color: var(--u-violet); letter-spacing: .18em; } .unu-editorial :is(.unu-ed-form, .unu-home-order) h2 { color: var(--u-text); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.05; letter-spacing: -.03em; } .unu-editorial :is(.unu-ed-form, .unu-home-order) .unu-home-order__intro { color: var(--u-text-2); } .unu-editorial :is(.unu-ed-form, .unu-home-order) .unu-home-order__privacy { color: var(--u-text-3); } .unu-editorial :is(.unu-ed-form, .unu-home-order) :is(.unu-home-order__field, .unu-home-order__field legend) { color: var(--u-text-2); } .unu-editorial :is(.unu-ed-form, .unu-home-order) :is(input, select) { min-height: 52px; padding: 0 20px; border: 1.5px solid var(--u-line-2); border-radius: var(--u-r-pill); background: var(--u-surface-2); color: var(--u-text); font-size: 1rem; } .unu-editorial :is(.unu-ed-form, .unu-home-order) input::placeholder { color: var(--u-text-3); } .unu-editorial :is(.unu-ed-form, .unu-home-order) :is(input, select):focus { border-color: var(--u-violet); background: var(--u-surface); box-shadow: 0 0 0 4px rgba(108, 92, 231, .16); } .unu-editorial :is(.unu-ed-form, .unu-home-order) .unu-home-order__channel span { border-radius: var(--u-r-pill); border: 1.5px solid var(--u-line-2); background: var(--u-surface-2); color: var(--u-text-2); } .unu-editorial :is(.unu-ed-form, .unu-home-order) .unu-home-order__submit { min-height: 56px; border-radius: var(--u-r-pill); font-size: 1.02rem; } .unu-editorial .unu-home-order__submit[data-mode="wa"] { background: #128c4b; color: #fff; } .unu-editorial .unu-home-order__submit[data-mode="wa"] :is(i, span) { color: inherit; } .unu-editorial .unu-home-order__submit[data-mode="wa"]:hover { background: #0f7640; } .unu-editorial :is(.unu-ed-form, .unu-home-order) .unu-home-order__status { color: var(--u-violet); } /* E6.3 - Tira de confianza: cinta tipografica, sin chips ni recuadros. */ .unu-editorial .unu-ed--tira { padding-block: clamp(22px, 3.4vw, 52px); } .unu-editorial .unu-ed--tira .unu-lp-trust-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px clamp(14px, 2.2vw, 34px); } .unu-editorial .unu-ed--tira .unu-lp-trust-item { display: inline-flex; align-items: baseline; gap: 8px; font-size: clamp(.74rem, .72rem + .2vw, .92rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--u-text-2); } .unu-editorial .unu-ed--tira .unu-lp-trust-item > i { margin: 0; color: var(--u-violet); font-size: .82em; } /* E6.4 / E6.5 - Indice y manifiesto: en movil, una entrada debajo de otra, separadas solo por aire y por el numero. */ .unu-editorial :is(.unu-ed--indice, .unu-ed--manifiesto) .unu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); margin-top: clamp(28px, 4vw, 56px); } /* E6.6 - Secuencia */ .unu-editorial .unu-ed--secuencia .unu-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); margin-top: clamp(26px, 6vw, 48px); } /* E6.7 - Diptico: en movil, foto a sangre completa y texto debajo. */ .unu-editorial .unu-ed--diptico .unu-feature { display: grid; gap: clamp(20px, 5vw, 56px); } .unu-editorial .unu-ed--diptico .unu-feature > div:first-child { order: -1; } .unu-editorial .unu-ed--diptico .unu-feature__media { margin-inline: calc(-1 * var(--u-gutter, 20px)); } .unu-editorial .unu-ed--diptico .unu-feature__media img { width: 100%; } /* E6.8 - Registro: preguntas frecuentes como indice tipografico. */ .unu-editorial .unu-ed--registro .unu-faq details { padding-block: clamp(14px, 1.9vw, 26px); } .unu-editorial .unu-ed--registro .unu-faq details + details { margin-top: 0; } .unu-editorial .unu-ed--registro .unu-faq summary { padding: 0; gap: 14px; font-size: clamp(1rem, .92rem + .62vw, 1.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } .unu-editorial .unu-ed--registro .unu-faq summary > i { display: none; } .unu-editorial .unu-ed--registro .unu-faq summary::after { width: auto; height: auto; border-radius: 0; background: none; color: var(--u-violet); font-size: 1.5rem; font-weight: 400; } .unu-editorial .unu-ed--registro .unu-faq details[open] summary::after { background: none; color: var(--u-yellow-2); } .unu-editorial .unu-ed--registro .unu-faq details > *:not(summary) { padding: 8px 40px 0 0; max-width: 62ch; font-size: 1rem; } /* ==================================================================== >= 700px - Dos piezas por fila ==================================================================== */ @media (min-width: 700px) { .unu-editorial :is(.unu-ed--indice, .unu-ed--manifiesto) .unu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5.5vw, 96px) clamp(20px, 3vw, 44px); } } /* ==================================================================== >= 981px - Composicion completa Aqui entran las doce columnas, los solapes, los sangrados y el scroll. Todo lo de arriba sigue vigente: esto solo agrega. ==================================================================== */ @media (min-width: 981px) { /* --- E3 - Reticula rota ------------------------------------------ */ .unu-editorial .unu-ed__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--u-gap) clamp(20px, 3vw, 48px); align-items: start; } .unu-editorial .unu-col-1-5 { grid-column: 1 / span 5; } .unu-editorial .unu-col-1-6 { grid-column: 1 / span 6; } .unu-editorial .unu-col-1-7 { grid-column: 1 / span 7; } .unu-editorial .unu-col-2-6 { grid-column: 2 / span 5; } .unu-editorial .unu-col-4-9 { grid-column: 4 / span 6; } .unu-editorial .unu-col-6-12 { grid-column: 6 / span 7; } .unu-editorial .unu-col-7-12 { grid-column: 7 / span 6; } .unu-editorial .unu-col-8-12 { grid-column: 8 / span 5; } .unu-editorial .unu-col-full { grid-column: 1 / -1; } /* Desfases verticales: multiplos del mismo paso, para que el desorden tenga metrica. */ .unu-editorial .unu-shift-1 { margin-block-start: clamp(18px, 2.6vw, 46px); } .unu-editorial .unu-shift-2 { margin-block-start: clamp(36px, 5.2vw, 92px); } .unu-editorial .unu-shift-3 { margin-block-start: clamp(54px, 7.8vw, 138px); } .unu-editorial .unu-shift-up { margin-block-start: clamp(-120px, -6vw, -32px); } /* Sangrados: la pieza sale de la columna y llega al borde de pantalla */ .unu-editorial .unu-bleed--right { margin-inline-end: calc(-1 * var(--ed-rail)); } .unu-editorial .unu-bleed--left { margin-inline-start: calc(-1 * var(--ed-rail)); } .unu-editorial .unu-bleed--full { margin-inline: calc(-1 * var(--ed-rail)); } /* --- E2 - El tanque se tumba ------------------------------------- */ /* Los costados conservan su curva (es lo que da la identidad) y arriba y abajo se desvanece, para que no aparezca ningun corte recto. */ .unu-editorial :is(.unu-ed--campo, .unu-ed--velo)::before { border-radius: 8% / 50%; } .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section).unu-ed--campo { padding-block: calc(var(--ed-air) + clamp(18px, 2vw, 30px)); } .unu-editorial .unu-ed--campo::before { inset: 3% -7%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); } /* El campo oscuro trae puesto su tanque de proporcion correcta */ .unu-editorial .unu-ed--campo::after { content: ""; position: absolute; z-index: -1; right: calc(var(--ed-rail) * -.15); bottom: 7%; width: clamp(210px, 26vw, 420px); aspect-ratio: 2.6 / 1; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--u-r-pill); background: linear-gradient(90deg, transparent 0 17%, currentColor 17% calc(17% + 1px), transparent calc(17% + 1px)), linear-gradient(90deg, transparent 0 83%, currentColor 83% calc(83% + 1px), transparent calc(83% + 1px)); color: rgba(255, 255, 255, .18); pointer-events: none; } .unu-editorial .unu-ed--velo::before { inset: 8% -6%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); } /* --- E5 - La etiqueta se cuelga del recorte ---------------------- */ .unu-editorial .unu-cutout__label { position: absolute; z-index: 1; margin-top: 0; max-width: 22ch; padding-inline-start: 46px; pointer-events: auto; } .unu-editorial .unu-cutout__label::before { content: ""; position: absolute; left: 0; top: .7em; width: 34px; height: 1px; background: var(--u-violet); } .unu-editorial .unu-ed--campo .unu-cutout__label::before { background: var(--u-yellow); } .unu-editorial .unu-cutout__label--ai { left: 4%; bottom: 16%; } .unu-editorial .unu-cutout__label--ad { right: 2%; bottom: 12%; } .unu-editorial .unu-cutout__label--sd { right: 2%; top: 10%; } /* Colgada fuera de la silueta, para no escribir sobre la fotografia */ .unu-editorial .unu-cutout__label--fuera { left: -26%; top: -4%; } .unu-editorial .unu-ed-float--cruza { margin-block-end: clamp(-220px, -11vw, -60px); } /* --- E6.1 - Portada a dos columnas ------------------------------- */ .unu-editorial .unu-ed-hero__campo { inset: -30% -18% -14% -22%; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__copy { grid-column: 1 / span 7; } .unu-editorial .unu-ed-hero .unu-home-order { grid-column: 8 / span 5; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__title { max-width: 11ch; } .unu-editorial .unu-ed-hero .unu-home-hero-v2__lead { max-width: 34ch; } /* El recorte que empieza en el hero y acaba en la seccion siguiente: es el gesto que hace que la pagina se lea como una composicion continua y no como dos bloques apilados. */ .unu-editorial .unu-ed-hero__pieza { display: block; position: absolute; inset: auto 0 0; z-index: var(--ed-z-float); pointer-events: none; } .unu-editorial .unu-ed-hero__pieza > .unu-wrap { position: relative; } .unu-editorial .unu-ed-hero__pipa { position: absolute; right: clamp(-90px, -4.5vw, -20px); bottom: clamp(-360px, -21vw, -130px); width: min(30vw, 360px); margin: 0; } /* Deja libre el costado derecho: por ahi baja el recorte */ .unu-editorial .unu-ed--tira .unu-lp-trust-strip { max-width: 68%; } /* --- E6.4 - Indice: sumario de revista, reticula rota ------------ */ .unu-editorial .unu-ed--indice > .unu-wrap > :is(.unu-eyebrow, .unu-copy) { max-width: 22ch; } .unu-editorial .unu-ed--indice .unu-title { max-width: 16ch; } .unu-editorial .unu-ed--indice .unu-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 92px) clamp(20px, 3vw, 48px); } .unu-editorial .unu-ed--indice .unu-card:nth-child(1) { grid-column: 1 / span 4; } .unu-editorial .unu-ed--indice .unu-card:nth-child(2) { grid-column: 6 / span 4; margin-block-start: clamp(30px, 4.4vw, 84px); } .unu-editorial .unu-ed--indice .unu-card:nth-child(3) { grid-column: 9 / span 4; margin-block-start: clamp(-40px, -2vw, -12px); } .unu-editorial .unu-ed--indice .unu-card:nth-child(n+4) { grid-column: span 4; } /* --- E6.5 - Manifiesto ------------------------------------------- */ .unu-editorial .unu-ed--manifiesto .unu-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); } .unu-editorial .unu-ed--manifiesto > .unu-wrap > * { grid-column: 1 / -1; } .unu-editorial .unu-ed--manifiesto > .unu-wrap > .unu-eyebrow { grid-column: 1 / -1; } .unu-editorial .unu-ed--manifiesto > .unu-wrap > .unu-title { grid-column: 1 / span 7; font-size: var(--ed-fs-mega); } .unu-editorial .unu-ed--manifiesto > .unu-wrap > .unu-copy { grid-column: 8 / span 5; align-self: end; } .unu-editorial .unu-ed--manifiesto .unu-grid { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); } .unu-editorial .unu-ed--manifiesto .unu-card:nth-child(1) { grid-column: 1 / span 5; } .unu-editorial .unu-ed--manifiesto .unu-card:nth-child(2) { grid-column: 7 / span 5; margin-block-start: clamp(24px, 3.4vw, 64px); } .unu-editorial .unu-ed--manifiesto .unu-card:nth-child(3) { grid-column: 2 / span 5; } .unu-editorial .unu-ed--manifiesto .unu-card:nth-child(4) { grid-column: 8 / span 5; margin-block-start: clamp(-30px, -1.6vw, -8px); } /* --- E6.6 - Secuencia: cabecera fija mientras pasan los pasos ---- */ .unu-editorial .unu-ed--secuencia .unu-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); /* Las dos primeras filas las marca la cabecera; la tercera absorbe el alto de la columna de pasos. */ grid-template-rows: auto auto 1fr; gap: clamp(14px, 1.6vw, 24px) clamp(28px, 4vw, 72px); align-items: start; } /* Salvaguarda: un rol con retícula propia solo sabe colocar los elementos que espera. Cualquier otro hijo directo ocupa el ancho completo en vez de caer en una columna de 1/12. */ .unu-editorial .unu-ed--secuencia > .unu-wrap > * { grid-column: 1 / -1; } .unu-editorial .unu-ed--secuencia > .unu-wrap > :is(.unu-eyebrow, .unu-title, .unu-copy) { grid-column: 1 / span 4; } .unu-editorial .unu-ed--secuencia > .unu-wrap > .unu-title { position: sticky; top: clamp(96px, 12vh, 168px); } .unu-editorial .unu-ed--secuencia .unu-steps { grid-column: 6 / span 7; grid-row: 1 / span 3; margin-top: 0; } .unu-editorial .unu-ed--secuencia .unu-step:nth-child(even) { margin-inline-start: clamp(20px, 4vw, 78px); } /* --- E6.7 - Diptico: texto y foto compuestos juntos -------------- */ .unu-editorial .unu-ed--diptico .unu-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .unu-editorial .unu-ed--diptico .unu-feature > div:first-child { grid-column: 1 / span 6; grid-row: 1; order: 0; position: relative; z-index: var(--ed-z-float); } .unu-editorial .unu-ed--diptico .unu-feature__media { grid-column: 6 / span 7; grid-row: 1; margin-inline: 0 calc(-1 * var(--ed-rail)); z-index: 1; } .unu-editorial .unu-ed--diptico .unu-feature__media img { filter: drop-shadow(0 40px 70px rgba(21, 15, 58, .22)); } /* Una fotografia rectangular volveria a dibujar una caja. El borde que da al texto se desvanece con una mascara: la imagen entra en el lienzo en vez de recortarse contra el, y la columna de lectura no pierde contraste. Los recortes sin fondo no la necesitan. */ .unu-editorial .unu-ed--diptico:not(.unu-ed--invertido) .unu-feature__media img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); } /* Invertido: la foto entra por la izquierda, el texto va a la derecha */ .unu-editorial .unu-ed--diptico.unu-ed--invertido .unu-feature > div:first-child { grid-column: 7 / span 6; } .unu-editorial .unu-ed--diptico.unu-ed--invertido .unu-feature__media { grid-column: 1 / span 6; margin-inline: calc(-1 * var(--ed-rail)) 0; } /* --- E6.8 - Registro a dos columnas ------------------------------ */ .unu-editorial .unu-ed--registro .unu-split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); } .unu-editorial .unu-ed--registro .unu-faq details > *:not(summary) { padding-right: 60px; } } /* ==================================================================== E7 - Narrativa por scroll Solo escritorio y solo si el usuario no pidio menos movimiento: la animacion lleva la lectura, nunca es requisito para leer. ==================================================================== */ .unu-editorial [data-ed-reveal] { opacity: 1; } @media (prefers-reduced-motion: no-preference) and (min-width: 981px) { /* La entrada generica del sistema modular estorba a la composicion */ .unu-editorial :is(.unu-ed, .unu-section, .unu-lp-section, .unu-order-section) > .unu-wrap > * { animation: none; } .unu-editorial.ed-js [data-ed-reveal] { opacity: 0; transform: translate3d(0, var(--ed-reveal-y, 26px), 0); transition: opacity .7s var(--u-ease), transform .9s var(--u-ease); transition-delay: var(--ed-delay, 0ms); will-change: opacity, transform; } .unu-editorial.ed-js [data-ed-reveal].is-in { opacity: 1; transform: none; } /* Piezas que entran desde el margen: refuerzan la reticula rota */ .unu-editorial.ed-js [data-ed-reveal="lado"] { --ed-reveal-y: 0px; transform: translate3d(clamp(18px, 3vw, 54px), 0, 0); } /* Parallax: lo mueve el JS escribiendo --ed-shift. Muy corto a proposito; si se nota como efecto, esta mal calibrado. */ .unu-editorial [data-ed-parallax] { transform: translate3d(0, var(--ed-shift, 0px), 0); will-change: transform; } /* El fondo tambien responde al recorrido. Las dos capas viajan a velocidades opuestas y muy cortas para crear profundidad sin que el patron parezca una animacion independiente. Los valores los escribe unu-editorial.js; sin JS ambos quedan en su posicion natural. */ .unu-editorial.ed-js :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::before { transform: translate3d(0, var(--ed-forma-y, 0px), 0) rotate(var(--ed-forma-r, 0deg)); transform-origin: center; will-change: transform; } .unu-editorial.ed-js :is(.unu-ed, .unu-section, .unu-lp-section) > .unu-wrap::after { transform: translate3d(var(--ed-trama-x, 0px), var(--ed-trama-y, 0px), 0); will-change: transform; } .unu-editorial.ed-js .unu-ed-hero__campo::after { transform: translate3d(var(--ed-trama-x, 0px), var(--ed-trama-y, 0px), 0) scale(1.04); will-change: transform; } .unu-editorial.ed-js :is(.unu-page-hero, .unu-lp-hero)::after { transform: translate3d(var(--ed-trama-x, 0px), var(--ed-trama-y, 0px), 0) scale(1.03); will-change: transform; } }