/* ═══════════════════════════════════════════════════════════════════════ FULL LOVE — hoja de la home en WordPress Puerto del estático del repo. La carga fl2-estilos.php desde el sandbox, con filemtime como cache-bust. Aquí NO va todo styles.css: el DOM de Elementor es otro. Va lo que el panel no sabe expresar y lo que, si se toca a ojo, rompe algo medido. ═══════════════════════════════════════════════════════════════════════ */ :root{ --fl-paper:#F6F4F1; --fl-ink:#0B0A0A; --fl-ink-2:#2B2825; --fl-rule:#DCD6CE; --fl-wine:#8E2C3B; --fl-spray:#C59F6E; } body{ background:var(--fl-paper); color:var(--fl-ink-2); } /* clip y no hidden: overflow-x:hidden obliga a overflow-y a calcularse como auto y convierte al body en contenedor de scroll — el asesino clásico de position:sticky, que es lo que apila las tarjetas. */ body{ overflow-x:clip; } /* ── 1. CABECERA ─────────────────────────────────────────────────────── Sobre el vídeo va en papel; al pasar el hero, en tinta sobre papel. El wordmark es tinta plana sobre alfa: invert(1) lo deja en #F5F5F5, que es papel a efectos prácticos. Un solo PNG para los dos fondos. */ #flhd{ background:transparent; border-bottom:1px solid transparent; transition:background .4s ease, border-color .4s ease; } #flhd img{ filter:invert(1); transition:filter .4s ease; } #flhd .elementor-widget-heading a{ color:var(--fl-paper); } body.fl-stuck #flhd{ background:rgba(246,244,241,.94); backdrop-filter:blur(10px); border-bottom-color:var(--fl-rule); } body.fl-stuck #flhd img{ filter:none; } body.fl-stuck #flhd .elementor-widget-heading a{ color:var(--fl-ink); } /* El CTA de la derecha. En el estático es .hdr__cta: rótulo en versalitas con filete debajo, que pasa a vino al pasar por encima. En Elementor el botón venía sin tocar —decía «Haz clic aquí» y no enlazaba a ningún sitio—, así que todo su aspecto se define aquí. Sigue el mismo cambio de color que el resto de la cabecera cuando se queda pegada. */ #flhd .flhd-cta .elementor-button{ background:transparent; border:0; border-bottom:1px solid rgba(246,244,241,.45); border-radius:0; padding:.55rem 0; color:var(--fl-paper); font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; transition:border-color .35s cubic-bezier(.22,.61,.36,1); } #flhd .flhd-cta .elementor-button:hover, #flhd .flhd-cta .elementor-button:focus-visible{ border-bottom-color:var(--fl-paper); } body.fl-stuck #flhd .flhd-cta .elementor-button{ color:var(--fl-ink); border-bottom-color:rgba(11,10,10,.45); } body.fl-stuck #flhd .flhd-cta .elementor-button:hover, body.fl-stuck #flhd .flhd-cta .elementor-button:focus-visible{ border-bottom-color:var(--fl-ink); } #flhd .ue_inner_menu{ background-color:var(--fl-ink); } body.menu-opened{ overflow:hidden; } html:has(body.menu-opened){ overflow:hidden; } #flhd .elementor-widget-image, #flhd .flhd-cta{ transition:opacity .3s ease, visibility .3s ease; } body.menu-opened #flhd .elementor-widget-image, body.menu-opened #flhd .flhd-cta{ opacity:0; visibility:hidden; } #flhd .uc-list-menu li.fl-nav-cta{ margin-top:1.5rem; } #flhd .uc-list-menu li.fl-nav-cta > a{ display:inline-block; padding:.85rem 2rem; border:1px solid currentColor; border-radius:0; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; transition:background-color .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1); } #flhd .uc-list-menu li.fl-nav-cta > a:hover, #flhd .uc-list-menu li.fl-nav-cta > a:focus-visible{ background:#FFFFFF; border-color:#FFFFFF; color:var(--fl-ink); } body.menu-opened #flhd .ue-input-wrapper-align{ position:relative; z-index:100000001; } body.menu-opened #flhd .ue-input-wrapper{ background-color:var(--fl-ink); padding:.75rem; } body.menu-opened #flhd .ue_hamburger > div, body.menu-opened #flhd .ue_hamburger > div::before, body.menu-opened #flhd .ue_hamburger > div::after{ background-color:#FFFFFF; } /* ── 2. HERO ─────────────────────────────────────────────────────────── svh y no vh: en móvil, vh cuenta la barra del navegador y el hero se sale de la ventana. */ #flhero{ min-height:100svh; } /* El velo en TODOS los anchos, igual que el estatico (2026-09-14). El overlay del panel es un 105deg sin parada intermedia y Elementor le aplica --overlay-opacity:0.5, que lo deja a la mitad: sobre la foto del showroom no llegaba ni de lejos. Se anula la opacidad y se pone el del estatico: franja arriba para la cabecera y 105deg con la parada del 60 % a .62. */ body #flhero::before{ opacity:1; background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0, rgb(0 0 0 / 0.55) 90px, transparent 150px), linear-gradient(105deg, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0.62) 60%, transparent 82%); } @media (max-width:959px){ #flhero .elementor-background-video-container{ display:none; } body #flhero{ /* 9:16 desde el 2026-09-14 (adjunto 453). La cara esta al ~22 % del ancho: centrada, a 390 el pelo toca el borde izquierdo; al 25 % queda entero, tambien a 360. En escritorio el fondo lo pone Elementor (adjunto 454, apaisada) y ya no hay video. */ background-image:url("/wp-content/uploads/2026/09/camisa-blanca-collar-cuentas-de-colores.webp"); background-size:cover; background-position:25% top; background-repeat:no-repeat; } /* Meseta de .55 a .60 el 2026-09-14: sobre la foto nueva el wordmark daba 4,42:1 a 360x800. Con .60, 5,20:1. */ body #flhero::before{ opacity:1; background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.60) 0%, rgb(0 0 0 / 0.60) 10%, transparent 17%), linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.25) 75%, transparent 100%); } } /* El CTA del hero. En el estático es .hero__read y NO lleva filete debajo: lleva una línea corta a la izquierda que se alarga al pasar por encima. Esa línea es un vacío en el HTML; en Elementor no hay dónde meterlo, así que va de ::before. El filete que traía el botón se quitó del panel, porque contradecía al estático. */ #flhero .flhero-cta .elementor-button{ display:inline-flex; align-items:center; gap:1rem; padding:0; border-radius:0; } #flhero .flhero-cta .elementor-button::before{ content:""; display:block; width:3.5rem; height:1px; background:currentColor; transition:width .4s cubic-bezier(.22,.61,.36,1); } #flhero .flhero-cta .elementor-button:hover::before, #flhero .flhero-cta .elementor-button:focus-visible::before{ width:5rem; } /* ── 3. LOOKBOOK: tarjetas apiladas ──────────────────────────────────── El widget ya trae el sticky. Aquí solo el escalón, quitarle el radio —que no existe en esta marca— y apagarle la sombra. La sombra la mete el widget como «soft style»: una regla .ue_card_content sin prefijo, que pierde contra cualquier selector con id. Y no se apaga desde el panel, porque su control Box Shadow solo emite CSS si están sus seis valores (x, y, blur, spread, color y position): quitarla desde ahí obliga a inventarse uno por cada uno. */ #looks .ue_stacking_card_item{ --card-top-offset:40px; } #looks .ue_card_content{ background:var(--fl-paper); border-top:1px solid var(--fl-ink); border-radius:0; box-shadow:none; } #looks .ue_sc_title{ font-family:"Prata",serif; letter-spacing:-.01em; color:var(--fl-ink); } #looks .ue_sc_desc{ color:var(--fl-ink-2); } #looks .ue_sc_img{ border-radius:0; } /* ── 4. BANDA DE CORTE: texto DETRÁS del vídeo ───────────────────────── La pila mide lo que la línea más larga (max-content), así que el % del vídeo es un % del TEXTO, no del panel. Es lo que ata las dos capas: con el vídeo en % del panel y el texto en vw la relación bailaba — a 1440 asomaban 54px por lado y a 768 solo 6. Desde el 2026-09-15 el vídeo es VERTICAL 9:16 (pasarela, adjunto 455) y el que aprieta ya no son los lados, sino el alto. Medido en el estático: el ancho máximo que admite un 9:16 es el 50,2% del texto —el mismo porcentaje en cualquier pantalla, porque la proporción del bloque de texto es constante— y con margen queda en 45%, que deja 25px arriba y abajo en escritorio y 13px en móvil. Al 78% de antes se salía 134,5px por arriba y por abajo y la banda dejaba de hacer lo que hace. Dos cosas de Elementor que hay que anular, las dos en post-39.css, que carga DESPUÉS: el wrapper lleva --video-aspect-ratio:1.77777, y .e-hosted-video .elementor-video va con object-fit:cover, así que un 9:16 dentro de un hueco 16:9 sale recortado por arriba y por abajo. Ganamos por el #flcut, que es un id. */ #flcut .flcut-pila{ position:relative; display:grid; place-items:center; width:max-content; max-width:100%; margin-inline:auto; } #flcut .flcut-pila > .elementor-widget-heading{ position:relative; z-index:1; } #flcut .flcut-pila > .elementor-widget-video{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:45%; z-index:2; } #flcut .flcut-pila > .elementor-widget-video .elementor-wrapper{ --video-aspect-ratio:.5625; } /* El ≤700 llevaba la pila al 100% y el vídeo con ella. Con el vídeo vertical eso rompe la relación —el % pasa a ser del panel y no del texto— y el vídeo se sale por arriba y por abajo. Se queda en max-content, como en el resto de anchos. */ @media (max-width:700px){ #flcut .flcut-pila{ width:max-content; } #flcut .flcut-pila > .elementor-widget-video{ width:45%; } } #looks .elementor-widget-button .elementor-button, #sobre .elementor-widget-button .elementor-button{ display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem; padding:.9rem 2.1rem; line-height:1; border:1px solid var(--fl-ink); border-radius:0; background:var(--fl-ink); color:var(--fl-paper); font-weight:500; letter-spacing:.2em; transition:background .35s cubic-bezier(.22,.61,.36,1), color .35s cubic-bezier(.22,.61,.36,1); } #looks .elementor-widget-button .elementor-button:hover, #looks .elementor-widget-button .elementor-button:focus-visible, #sobre .elementor-widget-button .elementor-button:hover, #sobre .elementor-widget-button .elementor-button:focus-visible{ background:transparent; color:var(--fl-ink); } /* ── 5. TRES PANTALLAS: fotos detrás del titular ─────────────────────── OPACIDAD .55 Y NO MÁS. Medido píxel a píxel: el punto más oscuro de las seis fotos es (0,0,0), y sobre papel aguanta hasta alfa 0,62 manteniendo el 3:1 que pide el titular por ser texto grande. Por encima de ahí la frase deja de leerse sobre la foto negra. */ .fltri-fotos{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55; } .fltri-fotos > .elementor-widget{ position:absolute; transform:translateY(-50%); } /* SIN PROPORCIÓN IMPUESTA, desde el 2026-09-21 y a petición de la clienta. Antes iba `aspect-ratio:3/4` con `object-fit:cover`, y como las seis fotos son cuadradas (640×640) eso se comía el 25 % del ancho: 80 px por lado. Ahora manda la proporción del fichero y se ven enteras. Misma regla que `.tri__img` del estático. */ .fltri-fotos > .elementor-widget img{ width:auto; display:block; } .fltri-fotos > .elementor-widget:nth-child(1){ left:12%; top:45%; } .fltri-fotos > .elementor-widget:nth-child(2){ right:9%; top:58%; } /* ni el mismo tamaño ni el mismo sitio en los tres: repetido idéntico se lee como plantilla. El `min(…,42vw)` y el techo de 22rem son la contrapartida de quitar el 3:4: al ensancharse un 33 %, en pantallas estrechas y altas las dos fotos de un panel llegaban a tocarse. Con 42vw dos nunca suman más de 84vw. El `clamp` con 22rem además iguala esto al estático, que sí lo tenía: hasta hoy, en una pantalla de más de 930 px de alto, producción pintaba estas fotos más grandes que el estático. */ .fltri-fotos:nth-of-type(1) > .elementor-widget:nth-child(1) img{ height:clamp(8rem,min(25vh,42vw),22rem); } .fltri-fotos:nth-of-type(1) > .elementor-widget:nth-child(2) img{ height:clamp(8rem,min(36vh,42vw),22rem); } .fltri-fotos:nth-of-type(2) > .elementor-widget:nth-child(1) img{ height:clamp(8rem,min(36vh,42vw),22rem); } .fltri-fotos:nth-of-type(2) > .elementor-widget:nth-child(2) img{ height:clamp(8rem,min(24vh,42vw),22rem); } .fltri-fotos:nth-of-type(3) > .elementor-widget:nth-child(1) img{ height:clamp(8rem,min(22vh,42vw),22rem); } .fltri-fotos:nth-of-type(3) > .elementor-widget:nth-child(2) img{ height:clamp(8rem,min(38vh,42vw),22rem); } /* 1024 y no 900: es el techo de tablet de este sitio —escritorio arranca en 1025—. Con el corte en 900, una ventana de 912×1368 dejaba las dos fotos solapadas: ahí volvían los márgenes de escritorio (12 % + 9 %), que a esa anchura no caben. */ @media (max-width:1024px){ .fltri-fotos > .elementor-widget:nth-child(1){ left:0; } .fltri-fotos > .elementor-widget:nth-child(2){ right:0; } .fltri-fotos > .elementor-widget img{ height:clamp(8rem,min(22vh,42vw),22rem); } } /* ── 6. MARQUESINA ───────────────────────────────────────────────────── El widget solo trae la dirección izquierda en la versión libre; la segunda línea se invierte aquí. Y se desvanece por los bordes: sin eso hay corte seco. */ #marcas .elementor-widget-ucaddon_scroll_marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } #marcas .elementor-widget-ucaddon_scroll_marquee:last-of-type [class*=marquee]{ animation-direction:reverse; } #marcas .elementor-widget-ucaddon_scroll_marquee img{ object-fit:contain; } /* ── 7. FAQ: foto en blanco y negro ──────────────────────────────────── Sin duotono: el panel va en tinta y la foto en gris encima. */ #faq .flfaq-foto{ background:var(--fl-ink); overflow:hidden; } #faq .flfaq-foto img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); } #faq .flfaq-foto .elementor-widget-image, #faq .flfaq-foto .elementor-widget-container{ height:100%; } @media (max-width:820px){ #faq{ flex-direction:column; } #faq .flfaq-foto{ min-height:14rem; } } body .elementor-widget-image-carousel .swiper-slide-inner{ margin:0; } body .elementor-widget-image-carousel .swiper-slide-image{ display:block; width:100%; height:auto; object-fit:cover; } body .elementor-widget-image-carousel .swiper-wrapper{ transition-timing-function:linear; } /* ── 8. PIE: rejilla a sangre ────────────────────────────────────────── La proporción cuadrada va en el BLOQUE, no en el : junto a height:100% no se aplica. Y la pieza grande NO se apila en móvil: siguen siendo dos columnas, 8/12 y 4/12. */ #flfoot .flfoot-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:2px; width:100%; } #flfoot .flfoot-grid > .elementor-widget{ position:relative; overflow:hidden; aspect-ratio:1; margin:0; } #flfoot .flfoot-grid > .elementor-widget:first-child{ grid-column:span 8; } #flfoot .flfoot-grid > .elementor-widget:not(:first-child){ grid-column:span 4; } #flfoot .flfoot-grid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } #flfoot .flfoot-grid > .elementor-widget:nth-child(n+4){ display:none; } @media (min-width:760px){ #flfoot .flfoot-grid > .elementor-widget:first-child{ grid-column:span 6; grid-row:span 2; aspect-ratio:auto; } #flfoot .flfoot-grid > .elementor-widget:not(:first-child){ grid-column:span 2; } #flfoot .flfoot-grid > .elementor-widget:nth-child(n+4){ display:block; } } /* ── botones y foco ──────────────────────────────────────────────────── Ningún radio en toda la marca. Y el anillo de foco en vino, que es el único acento del sitio. */ .elementor-button{ border-radius:0; } :focus-visible{ outline:2px solid var(--fl-wine); outline-offset:3px; } /* ── movimiento reducido ─────────────────────────────────────────────── Quien lo pide no quiere dos cintas girando. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms; transition-duration:.01ms; } #marcas [class*=marquee]{ animation:none; } } /* ── correcciones tras ver el render ─────────────────────────────────── Dos cosas que solo se vieron con la página montada. */ /* El titular de los tres paneles se partía palabra a palabra. Elementor le había puesto 18em de ancho al widget y ganaba: misma especificidad que la nuestra pero su hoja carga después. La medida del estático son 18ch del cuerpo del titular, así que va en el propio título —donde ch vale lo que vale a 118px— y el widget se suelta a ancho completo. El body delante no es adorno: post-39.css empata en especificidad y carga después, así que hace falta ese elemento de más para ganarle. */ body .fltri-fotos ~ .elementor-widget.elementor-widget-heading{ --container-widget-width:100%; width:100%; } body .fltri-fotos ~ .elementor-widget-heading .elementor-heading-title{ max-width:18ch; margin-inline:auto; text-wrap:balance; } /* El burger venía con el azul de fábrica del widget. Las tres barras son un div y sus dos pseudoelementos, y pintan con background-color: tocar color no las cambia. Papel mientras va sobre el vídeo, tinta cuando la cabecera ya está en papel. */ #flhd .ue_hamburger > div, #flhd .ue_hamburger > div::before, #flhd .ue_hamburger > div::after{ background-color:var(--fl-paper); } body.fl-stuck #flhd .ue_hamburger > div, body.fl-stuck #flhd .ue_hamburger > div::before, body.fl-stuck #flhd .ue_hamburger > div::after{ background-color:var(--fl-ink); } /* La casilla nativa que abre el menú va invisible por encima del icono. Se le quita la apariencia de sistema para que Chrome no dibuje la suya debajo. Aquí NO vale barrer con * : el overlay del menú abierto se pinta con background-color y se quedaría transparente. */ #flhd input.checkbox-toggle{ appearance:none; -webkit-appearance:none; background:transparent; border:0; } /* El recuadro azul es del propio .ue_hamburger, que trae fondo de fábrica. Aquí el icono va suelto sobre el vídeo, sin caja. */ body #flhd .ue_hamburger{ background-color:transparent; box-shadow:none; outline:0; border-radius:0; } /* ── el grafiti: medir por ALTO ──────────────────────────────────────── La marca es casi cuadrada (712 × 900). Elementor solo sabe fijar el ancho de una imagen, y con ese ancho la marca sale un 25 % más alta de lo que debe. El estático la mide por alto —ver .news__stamp y .logoimg en assets/css/styles.css— y aquí se hace igual, con los mismos clamps. El #id gana de sobra a la hoja de Elementor, que no usa ninguno. */ #faq img[src*="logo-graffiti"]{ height:clamp(44px,4.5vw,60px); width:auto; filter:brightness(1.08) saturate(1.06); /* Elementor la centra con text-align; en el estático va a la izquierda, a plomo con el titular. En bloque y con el margen derecho automático se alinea sola, sin depender de :has() ni del control del panel. */ display:block; margin-left:0; margin-right:auto; } #flfoot img[src*="logo-graffiti"]{ height:clamp(48px,5vw,68px); width:auto; filter:brightness(1.08) saturate(1.06); } /* La marca del pie va clavada en la esquina, encima de la rejilla, no en el flujo empujando al titular: es lo que deja a la rejilla ocupar el 100 % sin márgenes. Debajo de 760 no cabe y vuelve al flujo. */ @media (min-width:760px){ #flfoot{ position:relative; } /* Los contenedores de Elementor son position:relative de serie, así que la fila de la marca haría de referencia y la dejaría 56px más abajo —justo su padding superior—. Se pone estática para que la referencia sea el pie entero, como .foot en el estático. */ #flfoot .flfoot-marca-fila{ position:static; } /* y además deja de ocupar sitio: si no, su fila vacía más el gap de la columna bajan el titular 20px respecto al estático. */ #flfoot .flfoot-marca-fila, #flfoot .flfoot-marca-fila > .e-con-inner{ height:0; min-height:0; padding-block:0; } #flfoot .flfoot-marca{ position:absolute; z-index:2; margin:0; top:clamp(1.25rem,3vw,2.25rem); left:clamp(1.25rem,5vw,5rem); /* --gut del estático */ } } /* El arroba del pie va subrayado con un filete al 40 %, que se enciende al pasar por encima. Elementor deja el enlace pelado. */ #flfoot .elementor-heading-title a{ color:var(--fl-paper); text-decoration:none; border-bottom:1px solid rgba(246,244,241,.4); } #flfoot .elementor-heading-title a:hover, #flfoot .elementor-heading-title a:focus-visible{ border-bottom-color:var(--fl-paper); } /* En móvil el contenedor de los tres paneles trae 40px de margen lateral y el estático solo 20 (--gut, que abajo se queda en su mínimo). Con 40 la primera frase se va a cinco líneas en vez de cuatro. */ @media (max-width:760px){ .e-con:has(> .fltri-fotos){ padding-inline:clamp(1.25rem,5vw,5rem); } } /* La barra social del pie usa los dos SVG propios (adjuntos 198 y 199), que pintan el trazo con stroke="currentColor". Elementor, para un SVG subido, solo sabe ponerle fill; el trazo se quedaria sin color. Se lo damos aqui, con el .8 de opacidad del estatico. El fondo lo apaga ya el widget (icon_primary_color transparente), pero se repite por si alguien toca el panel: las pastillas de color de fabrica no van en este pie. */ #flfoot .elementor-social-icon{ background-color:transparent; color:var(--fl-paper); opacity:.8; transition:opacity .3s cubic-bezier(.22,.61,.36,1); } #flfoot .elementor-social-icon:hover, #flfoot .elementor-social-icon:focus-visible{ opacity:1; } /* fullove66 — 2026-08-26 — QA móvil: A, B y C. Borrar el bloque revierte. */ @media (max-width:767px){ #looks .ue_cards_wrapper, #looks .ue_stacking_card_item{ --card-height:780px; } #looks .ue_stacking_card_item{ top:55px; } #flfoot .elementor-element-1940b3e{ display:none; } #looks [id^="look-0"] > .e-con{ min-height:0; } #looks [id^="look-0"] > .e-con:nth-child(2){ flex:1 1 auto; } #looks [id^="look-0"] > .e-con:nth-child(2) > .e-con:first-child{ flex:1 1 auto; } } /* fullove66 — 2026-09-14 — lookbook al 100 % en tablet y movil. Borrar el bloque revierte. Medido antes, en produccion: a 768-1024 la tarjeta seguia en dos columnas y la foto se quedaba en el 29 % (209 px a 768); y entre ~480 y 767 el widget se encogia a su contenido dentro del contenedor en columna (345 de 553 px a 600). Los textos ocultos en movil (hide_mobile en Elementor) se quedan ocultos: decision del usuario el 2026-09-14. */ @media (max-width:1024px){ #looks .elementor-element-411a3b4{ --width:100%; width:100%; max-width:100%; align-self:stretch; } #looks [id^="look-0"] > .e-con{ min-height:0; } #looks [id^="look-0"] > .e-con:nth-child(2){ --flex-direction:column; flex-direction:column; flex:1 1 auto; } #looks [id^="look-0"] > .e-con:nth-child(2) > .e-con{ --width:100%; width:100%; max-width:100%; } #looks [id^="look-0"] > .e-con:nth-child(2) > .e-con:first-child{ flex:1 1 auto; } } /* En columna la tarjeta de tablet pide mas alto que los 600 px de serie. Con 780 se recortaban las seis a 1024 (hasta 104 px); con 860, ninguna a 1024, 900 ni 768. En una tablet apaisada (768 de alto) una tarjeta pegada de 860 no cabe entera: con foto y texto apilados no hay alto que quepa. */ @media (min-width:768px) and (max-width:1024px){ #looks .ue_cards_wrapper, #looks .ue_stacking_card_item{ --card-height:860px; } } /* fullove66 — 2026-09-15 — el lookbook enseña la foto entera. Borrar el bloque revierte. Las seis fotos son 640×640 y el hueco no es cuadrado, así que el background-size:cover de post-39.css recortaba. Medido en el estático antes de tocar nada: el recorte iba del 3 % a 1280 al 35 % a 960 px, y se lo comía por los costados, que es donde están el brazo y el bolso. Aquí NO es el mismo arreglo que en el estático: allí la foto es un con object-fit; aquí es fondo del contenedor, así que va por background-size, y la caja se lleva a 1:1 para que `contain` no deje bandas: cuadrada la caja y cuadrada la foto, no hay nada que rellenar. 🔴 Esto SOLO se sostiene porque el apilado esta retirado (bloque de abajo). Mientras el widget fijaba la altura de la tarjeta con overflow:hidden, una caja cuadrada se iba a 624 px de lado a 1440 y a 969 a 1024, y recortaba entre 112 y 555 px de CADA tarjeta. Si algun dia vuelve el apilado, esto hay que volver a bajarlo a `contain` sobre la caja sin tocar. Medido con el apilado ya fuera: 624x624 a 1440, 609 a 1280, 969 a 1024, 713 a 768 y 343 a 390. Cero recorte y cero desborde en los cinco. */ #looks [id^="look-0"] > .e-con:nth-child(2) > .e-con:first-child{ aspect-ratio:1/1; align-self:flex-start; flex:0 0 auto; min-height:0; --min-height:0; background-size:contain; background-repeat:no-repeat; background-position:center center; } /* fullove66 — 2026-09-15 — el lookbook deja de apilarse. Borrar el bloque devuelve la baraja. Decision del usuario: tarjetas normales, una debajo de otra, sin nada que se pegue ni se mueva al hacer scroll. En el estatico basta con quitar una linea (`.look{position:sticky}`); aqui no, porque lo monta el widget `ucaddon_stacking_cards` y hay cuatro piezas que deshacer: 1. El wrapper es un grid con `grid-template-rows: repeat(6, var(--card-height))`, o sea seis filas de altura FIJA. Pasa a filas automaticas. 2. `.ue_card_content` lleva `height` y `min-height` a `--card-height` con `overflow:hidden`: es lo que recortaba el contenido que no cabia. 3. El `position:sticky` NO esta en la hoja del widget, lo pone su JS en caliente —su propio comentario lo dice—. Por eso va con `!important`: un estilo en linea gana a cualquier selector, pero no a un !important. 4. El `padding-top:var(--card-top-offset)` de cada item y el `padding-bottom:calc(6 * ...)` del wrapper eran el hueco de la pila. Con las cuatro fuera, la tarjeta mide lo que mide su contenido y ya no recorta nada, que es lo que permite ademas devolverle a la foto su caja cuadrada en todos los anchos (bloque de abajo). */ /* 🔴 El `body` delante no es decoracion. El widget emite su CSS en un