- archive.php → dentro de #main, fuera del loop ALINEACIÓN: el breadcrumb se "sube" (margin-top negativo = -1em) para que su baseline coincida con el bottom del logo del header. Visualmente queda en la MISMA línea Y que el final del logo, al margen izquierdo. ========================================================================== */ /* Default: breadcrumb posicionado absoluto cerca del top — independiente de la altura del header (que es más grande ahora 40%/733px y empujaba el breadcrumb muy abajo). Color hereda del padre + opacity → contraste auto-adaptativo (claro sobre oscuro y viceversa). */ .breadcrumbs { position: absolute; top: clamp(60px, 4.5vw, 80px); left: 0; right: 0; width: 100%; padding: 0 var(--gutter); margin: 0; z-index: 9999; /* subido para que los links sean clickables cuando el header no está en overlay */ /* Color: sigue al --ui-color del Hero UI Color (editor ACF). Si no está set, hereda. */ color: var(--ui-color, inherit); } /* Cuando estamos en scrolled-up (header sticky pequeño), ocultamos el breadcrumb para no chocar con el header reducido — el usuario ya está navegando contenido. */ body.scrolled-up .breadcrumbs { opacity: 0; pointer-events: none; transition: opacity 0.3s ease } .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0; padding: 0; list-style: none } .breadcrumbs__item { margin: 0; padding: 0 } /* Links: opacidad full (son los CTAs, deben destacar). Separator + current item: opacidad reducida (decoración/contexto, no son clickables). */ .breadcrumbs__item a { color: inherit; opacity: 1; text-decoration: none; transition: opacity 0.2s ease } .breadcrumbs__item a:hover { text-decoration: underline; text-underline-offset: 3px } .breadcrumbs__item--current { color: inherit; opacity: 0.6; font-weight: inherit } .breadcrumbs__sep { color: inherit; opacity: 0.6; user-select: none } /* Defensivo: nunca debería renderizarse en estos contextos (la función ya lo evita) */ body.tax-paper_edition .breadcrumbs, body.home .breadcrumbs { display: none } /* ─────────── OVERLAY: breadcrumbs sobre el hero ─────────── Cuando el header está en overlay (legacy con image_full / content_full, nuevo hero, etc.), el breadcrumb default queda BAJO el hero — invisible o mal posicionado. Solución: position: absolute alineado al gutter izquierdo, debajo del menu hamburger. Color: el breadcrumb está FUERA del

, así que var(--header-color) definido en .OffPageHeader NO le cascadea. Por eso lo definimos TAMBIÉN en el body con :has(), para que cascadee a todos los descendientes incluido el breadcrumb. */ body { position: relative; } /* contexto para el absolute */ /* Propagar --header-color al body cuando hay overlay (también lo usan otros elementos fuera del header). Pero para el breadcrumb, hardcodeamos el color directamente porque var() puede no resolver fiable en todas las cascadas con :has(). */ body:has(.OffPageHeader.is-overlay) { --header-color: #fff; } /* default legacy magic */ body:has(.OffPageHeader.theme-light.is-overlay) { --header-color: #000; } /* user-explicit Light */ body:has(.OffPageHeader.theme-dark.is-overlay) { --header-color: #fff; } /* user-explicit Dark */ /* En scrolled-up el header sticky se separa del hero overlay → el color blanco del overlay deja de tener sentido (el fondo detrás ya no es el hero oscuro sino el contenido normal de la página). Forzamos negro para que el logo sea visible. TARGET en el elemento (no en body) porque el rule legacy `.OffPageHeader.theme-dark.is-overlay` está en el elemento — al settear el var en el body, el del elemento gana por especificidad. */ body.scrolled-up .OffPageHeader.is-overlay, body.scrolled-up .OffPageHeader.theme-dark.is-overlay, body.scrolled-up .OffPageHeader.theme-light.is-overlay { --header-color: #000 !important; } /* Breadcrumb sobre el hero: - Position absolute con BOTTOM alineado al bottom del LOGO (más bajo que el menú) - LEFT al gutter izquierdo (debajo del menú, sin overlap porque está más abajo) - Color blanco por defecto (magia legacy), negro si theme-light explícito */ body:has(.OffPageHeader.is-overlay) .breadcrumbs { position: absolute; /* Logo: top = header_wrap padding-top (clamp 20-24px) + 0 = 20-24px. Logo height = 300px ancho × (158/718 viewBox) ≈ 66px. Logo bottom = 86-90px. Breadcrumb texto ~12px → top = 74-78px deja el bottom alineado con el logo. */ top: clamp(74px, 5.5vw, 78px); left: var(--gutter); right: auto; width: auto; margin: 0; padding: 0; color: var(--ui-color, #fff); /* sigue Hero UI Color del editor; fallback = magia legacy blanco */ z-index: 10000; /* por encima del header (z:9999) */ } /* Overrides por theme explícito. --ui-color (Hero UI Color del editor) gana sobre el default del theme. */ body:has(.OffPageHeader.theme-light.is-overlay) .breadcrumbs { color: var(--ui-color, #000); } body:has(.OffPageHeader.theme-dark.is-overlay) .breadcrumbs { color: var(--ui-color, #fff); } /* Todos los items heredan el color base. Links destacados (CTA), current + sep con opacidad. */ body:has(.OffPageHeader.is-overlay) .breadcrumbs__list, body:has(.OffPageHeader.is-overlay) .breadcrumbs__item, body:has(.OffPageHeader.is-overlay) .breadcrumbs__item a, body:has(.OffPageHeader.is-overlay) .breadcrumbs__item--current, body:has(.OffPageHeader.is-overlay) .breadcrumbs__sep { color: inherit; } body:has(.OffPageHeader.is-overlay) .breadcrumbs__item a { opacity: 1; transition: opacity 0.2s ease; } body:has(.OffPageHeader.is-overlay) .breadcrumbs__item a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Mobile: el breadcrumb en overlay arranca pegado al borde izquierdo (sin gutter) */ @media (max-width: 767px) { body:has(.OffPageHeader.is-overlay) .breadcrumbs { left: 0 } } body:has(.OffPageHeader.is-overlay) .breadcrumbs__item--current { opacity: 0.6; font-weight: inherit; } body:has(.OffPageHeader.is-overlay) .breadcrumbs__sep { opacity: 0.6; } /* Mobile-only back arrow (SVG) — oculto en desktop por defecto */ .breadcrumbs__back { display: none } /* ── Mobile: solo flecha SVG del mismo ancho que .menu__toggle, a 0.5em bajo el logo ── */ @media (max-width: 767px) { /* Sobreescribir el lift desktop (-0.7em) para que la flecha quede 0.5em DEBAJO del logo */ .breadcrumbs { margin: 0.5em 0 0; padding: 0 var(--gutter) } /* Ocultar la lista textual */ .breadcrumbs__list { display: none } /* Mostrar la flecha SVG. Color matchea el del logo (var(--header-color)) para que en overlay/scrolled-up cambie con el theme. Si no hay --header-color definido, cae a negro. */ .breadcrumbs__back { display: inline-block; color: var(--header-color, #000); line-height: 0; } /* Width controlado en el SVG (no en el contenedor) para que el padding del 660px no reduzca el área del icono — el SVG mantiene su tamaño tipo menu hamburguesa. */ .breadcrumbs__back svg { display: block; width: clamp(30px, 2.22vw, 40px); height: auto; fill: currentColor; } } /* ========================================================================== CATEGORY ARCHIVE — category.php Estructura: .categoryPage .categoryFeatured (3 destacadas — animación scale-down + meta-reveal) .categoryFeatured__grid .categoryFeatured__card.is-active (scale 0.65 anclada top-left) .categoryFeatured__media ( cover) .categoryFeatured__meta (.month + .year + .title) .categoryHeader ( wraph1 con "( h1 )" + descripción ) .categoryArchive .categoryArchive__grid (12 por página, mismo layout que home27Category__featured) .categoryPagination ========================================================================== */ .categoryPage { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--gutter) } /* ── Featured (3 cards) — animación scale-down + meta-reveal ───────────── Estado default: 3 imágenes a tamaño completo, sin meta. Estado .is-active: imagen scale(0.65) anclada top-left + meta visible debajo. Auto-rotación 1→2→3→1 cada 4s (JS en category.php). */ .categoryFeatured { width: 100%; margin: clamp(40px, 4vw, 60px) 0 0 } /* Desktop ≥1025px: ancho 80% centrado (tablet/mobile siguen al 100%) */ @media (min-width: 1025px) { .categoryFeatured { width: 80%; margin: clamp(40px, 4vw, 60px) auto 0 } } .categoryFeatured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: start } /* Card: aspect ratio 3/4 (portrait). overflow visible para que la meta pueda extenderse horizontalmente si el título es largo. */ .categoryFeatured__card { position: relative; width: 100%; aspect-ratio: 3 / 4; background: transparent } .categoryFeatured__link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none } /* Media wrapper: ocupa toda la card; se escala a 0.65 desde top-left cuando .is-active. Easing fluido y duración 0.9s para acompasar con el reveal del meta. */ .categoryFeatured__media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transform-origin: top left; transform: scale(1); transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .categoryFeatured__media img, .categoryFeatured__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } /* Meta: arranca oculta debajo de la imagen. Cuando .is-active sube a top:65%+50px. Layout (% relativos al ancho de la card): [ 5% margin-L ] [ wrap-data 25% (month ↔ year space-between) ] [ 15% gap ] [ title 40% ] [ 15% margin-R ] */ .categoryFeatured__meta { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; display: flex; align-items: baseline; flex-wrap: nowrap; color: #000; opacity: 0; pointer-events: none; transition: top 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease 0.15s; will-change: top, opacity; } .categoryFeatured__wrap-data { width: 25%; margin-left: 5%; display: flex; justify-content: space-between; flex-shrink: 0; } .categoryFeatured__month { display: inline-block; white-space: nowrap; text-transform: capitalize } .categoryFeatured__year { display: inline-block; white-space: nowrap } .categoryFeatured__title { margin: 0 15% 0 auto; width: 40%; flex: 0 0 40%; line-height: 1.1em } /* Estado activo: imagen reducida + meta visible debajo (sync con la misma easing) */ .categoryFeatured__card.is-active .categoryFeatured__media { transform: scale(0.65) } .categoryFeatured__card.is-active .categoryFeatured__meta { top: calc(65% + 50px); opacity: 1; pointer-events: auto; } /* Reduce motion: sin animación. Todas las cards muestran meta debajo sin scale. */ @media (prefers-reduced-motion: reduce) { .categoryFeatured__media, .categoryFeatured__meta { transition: none !important } .categoryFeatured__card .categoryFeatured__media { transform: scale(0.65) } .categoryFeatured__card .categoryFeatured__meta { top: calc(65% + 50px); opacity: 1; pointer-events: auto } } /* ── Cabecera de categoría ──────────────────────────────────────────────── */ .categoryHeader { width: 100%; max-width: 600px; margin: 0; padding: var(--block-vpad) 0 } /* Wrapper que contiene los parentesis "( )" alrededor del h1, todo en h01 */ .categoryHeader__wraph1 { margin: 0 0 1em; line-height: 1em } .categoryHeader__wraph1 .categoryHeader__title { display: inline; margin: 0; font: inherit; letter-spacing: inherit } .categoryHeader__desc { margin: 0; line-height: 1.5em } .categoryHeader__desc p { margin: 0 0 1em } .categoryHeader__desc p:last-child { margin-bottom: 0 } /* ── Archive grid ───────────────────────────────────────────────────────── */ .categoryArchive { width: 100% } /* Mismo grid 3-col gap 0 que .home27Category__featured-grid */ .categoryArchive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: var(--block-vpad) } .categoryArchive__empty { text-align: center; padding: clamp(40px, 5vw, 100px) 0; color: #9a9a9a } /* Cards: mismo estilo EXACTO que .home27Category__featured .archiveCard (horizontal 50/50 — imagen izquierda, texto derecha) El .archiveCard__body usa el default 74%/20%/6% (mismo que home27Category__featured) */ .categoryArchive__grid .archiveCard { min-width: 0; max-width: none; flex: 0 0 auto; width: 100%; scroll-snap-align: start } /* ── Paginación ─────────────────────────────────────────────────────────── */ .categoryPagination { display: flex; justify-content: center; align-items: center; width: 100%; padding: var(--block-vpad) 0 } .categoryPagination .pagination ul { display: flex; gap: 1em; list-style: none; padding: 0; margin: 0 } .categoryPagination .pagination ul li { margin: 0 } .categoryPagination .pagination .page-numbers { font-size: clamp(11px, 0.67vw, 12px); line-height: 1em; color: #9a9a9a; text-decoration: none; padding: 0.3em 0.5em } .categoryPagination .pagination .page-numbers.current { color: #000; font-weight: 600 } .categoryPagination .pagination a.page-numbers:hover { color: #000 } /* ── Tablet (768-1024px) — carousel peek: 1 entero centro + 2 mitades laterales ── Las 3 cards rotan posiciones (la del centro siempre es la "activa" con scale+meta). En cada tick: la mitad-izquierda hace snap a off-screen-right, las demás transicionan a su nuevo slot. Resultado: card entra fluida desde la derecha. */ @media (min-width: 768px) and (max-width: 1024px) { .categoryFeatured { overflow: hidden } .categoryFeatured__grid { display: block; position: relative; width: 100%; height: 0; padding-bottom: 66.66vw; /* aspect 50vw × 4/3 = 66.66vw — alto del card */ } .categoryFeatured__card { position: absolute; top: 0; left: 0; width: 50%; margin: 0; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Slots: translateX está en % del propio width del card (50% viewport), por eso 50% = 25% viewport, 100% = 50% viewport, etc. */ .categoryFeatured__card.is-slot-0 { transform: translateX(-50%) } /* left peek: left edge a -25vw */ .categoryFeatured__card.is-slot-1 { transform: translateX(50%) } /* center: left edge a 25vw */ .categoryFeatured__card.is-slot-2 { transform: translateX(150%) } /* right peek: left edge a 75vw */ .categoryFeatured__card.is-offscreen-right { transform: translateX(250%); transition: none } /* Solo la card del centro CUANDO está .is-active tiene scale + meta visible. Sin .is-active = estado "rest" (centro a tamaño full sin meta). */ .categoryFeatured__card.is-slot-1.is-active .categoryFeatured__media { transform: scale(0.65) } .categoryFeatured__card.is-slot-1.is-active .categoryFeatured__meta { top: calc(65% + 50px); opacity: 1; pointer-events: auto; } /* Las cards laterales (y el centro en rest): imagen sin scale, meta oculta */ .categoryFeatured__card:not(.is-slot-1) .categoryFeatured__media, .categoryFeatured__card.is-slot-1:not(.is-active) .categoryFeatured__media { transform: scale(1) } .categoryFeatured__card:not(.is-slot-1) .categoryFeatured__meta, .categoryFeatured__card.is-slot-1:not(.is-active) .categoryFeatured__meta { opacity: 0; pointer-events: none } } /* ── Mobile (<768px) — carousel peek IGUAL que tablet, pero center al 75% ── Misma rotación de slots y cycle ACTIVE+REST. Solo cambian las proporciones: - card width = 75vw - center: left edge a 12.5vw (translateX = 12.5/75 = 16.66% del card) - peeks: left edge a -62.5vw / 87.5vw (translateX = ±83.33% / 116.66%) - off-screen right: left edge a 162.5vw (translateX 216.66%) */ @media (max-width: 767px) { .categoryFeatured { overflow: hidden } .categoryFeatured__grid { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100vw; /* aspect 75vw × 4/3 = 100vw — alto del card */ } .categoryFeatured__card { position: absolute; top: 0; left: 0; width: 75%; margin: 0; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } .categoryFeatured__card.is-slot-0 { transform: translateX(-83.33%) } /* left peek */ .categoryFeatured__card.is-slot-1 { transform: translateX(16.66%) } /* center */ .categoryFeatured__card.is-slot-2 { transform: translateX(116.66%) } /* right peek */ .categoryFeatured__card.is-offscreen-right { transform: translateX(216.66%); transition: none } /* Solo centro .is-active tiene scale + meta visible (mismo patrón que tablet) */ .categoryFeatured__card.is-slot-1.is-active .categoryFeatured__media { transform: scale(0.65) } .categoryFeatured__card.is-slot-1.is-active .categoryFeatured__meta { top: calc(65% + 25px); /* gap más pequeño en mobile (25px en lugar de 50px) */ opacity: 1; pointer-events: auto; flex-wrap: wrap; } .categoryFeatured__card:not(.is-slot-1) .categoryFeatured__media, .categoryFeatured__card.is-slot-1:not(.is-active) .categoryFeatured__media { transform: scale(1) } .categoryFeatured__card:not(.is-slot-1) .categoryFeatured__meta, .categoryFeatured__card.is-slot-1:not(.is-active) .categoryFeatured__meta { opacity: 0; pointer-events: none } /* Meta vertical en mobile: wrap-data en una línea (month ↔ year), title en la siguiente */ .categoryFeatured__wrap-data { width: 60%; margin-left: 5%; flex: 0 0 60%; } .categoryFeatured__title { flex: 0 0 100%; width: 100%; max-width: 235px; margin: 40px 0 0 5%; } .categoryArchive__grid { grid-template-columns: 1fr; gap: var(--block-vpad) } .categoryHeader { max-width: 100% } } /* ========================================================================== PÁGINAS INTERNAS HEADER — logo grande arriba (40%/733px) + shrink al scrollear (20%/290px). Aplica a TODAS las internas excepto taxonomy paper_edition (que tiene su propia regla fija). Excluye también las variantes home (h1, home27). ========================================================================== */ /* Logo: transición suave al cambiar de tamaño (near-top ↔ scrolled-up). */ .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27) { transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), max-width 1s cubic-bezier(0.16, 1, 0.3, 1) } /* Tamaño base reafirmado en near-top y scrolled-once (override del 64%/17.36% genérico de la home) */ body.near-top:not(.tax-paper_edition) .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27), body.scrolled-once:not(.tax-paper_edition) .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27) { width: 40%; max-width: 733px; transform: none } /* Sticky scrolled-up: logo pequeño con la misma transición suave que el grow-back (1s cubic-bezier de la regla base) — sin `transition: none` para que ambas direcciones shrink ↔ grow vayan igual de suaves. */ body.scrolled-up:not(.tax-paper_edition) .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27) { width: 20%; max-width: 290px; transform: none } /* ═══════════════════════════════════════════════════════════════════════════ PAPER27 — MENÚ PANEL (.PaperMenu) slide from left ═══════════════════════════════════════════════════════════════════════════ */ /* Override: .PaperMenu no añade nada al #mobile-menu ya definido arriba — solo layout interno */ .PaperMenu__inner { display: flex; flex-direction: column; min-height: 100%; padding: 0 } /* ── WRAP + MAIN ── */ .PaperMenu__wrap { width: 100%; max-width: 1800px; margin: 0 auto; height: auto !important; padding: var(--gutter) !important } .PaperMenu__main { display: flex; align-items: flex-start; width: 100% } /* ── LEFT 50%: imagen hover (66.66%) + texto categorías (33.33%) ── */ .PaperMenu__left { width: 50%; display: flex; align-items: flex-start } .PaperMenu__catImage { width: 66%; position: relative; overflow: hidden } .PaperMenu__hoverImg { width: 50%; margin: 4em auto 0; display: block; aspect-ratio: 3/4; opacity: 0; transition: opacity .4s ease } .PaperMenu__hoverImg.is-visible { opacity: 1 } .PaperMenu__catText { width: 33.33%; padding-left: 0 } /* ── Etiqueta de columna ── */ .PaperMenu__colLabel { text-transform: uppercase; color: #000; margin-bottom: 5em } .PaperMenu__colLabel a { color: #000; text-decoration: none; display: inline-block } /* ── Lista categorías ── */ .PaperMenu__catList { list-style: none; padding: 0; margin: 0 } .PaperMenu__catList li { margin: 0 0 .15em } .PaperMenu__catList li a { display: block; color: #000; text-decoration: none; padding-bottom: 0.6em; transition: font-weight .2s ease } @media(hover:hover) and (pointer:fine) { .PaperMenu__catList li a:hover { font-weight: 600 } } .PaperMenu__catList li.MarginTop { margin-top: 1.25em } /* ── RIGHT 50%: 3 columnas ── */ .PaperMenu__right { width: 50%; display: flex; align-items: flex-start } .PaperMenu__col { width: 30%; margin-right: 3.33%; text-align: left } .PaperMenu__col:last-child { margin-right: 0; width: 33.34% !important; border: 0 } /* Col 2 — BACK TO HOME: misma tipografía que .PaperMenu__colLabel (font-size via sz12) */ .PaperMenu__closeLink { display: block; width: fit-content; font-family: 'SuisseIntl',Helvetica,Arial,sans-serif; font-weight: 500; line-height: 1em; letter-spacing: 0; text-transform: uppercase; color: #000; text-decoration: none } /* Col 3 — WPML nativo */ .PaperMenu__lang { text-transform: uppercase } /* Reset estilos WPML que interfieren */ .wpml-ls-legacy-list-horizontal { border: 0; padding: 0 !important; clear: none !important } .PaperMenu__lang .wpml-ls, .PaperMenu__lang .wpml-ls * { float: none !important; clear: none !important } .PaperMenu__lang .wpml-ls { display: inline-block !important; list-style: none; padding: 0 !important; margin: 0 !important } .PaperMenu__lang .wpml-ls-item { display: inline-block !important; line-height: 1em !important; margin: 0 !important; padding: 0 !important } .PaperMenu__lang .wpml-ls-link { position: relative; display: inline-block; color: #000; text-decoration: none; font-family: 'SuisseIntl',Helvetica,Arial,sans-serif; font-weight: 500; line-height: 1em; padding: 0 !important; opacity: 1 } /* Underline: activo siempre visible, hover animado */ .PaperMenu__lang .wpml-ls-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } .PaperMenu__lang .wpml-ls-current-language .wpml-ls-link::after { transform: scaleX(1) } @media(hover:hover) and (pointer:fine) { .PaperMenu__lang .wpml-ls-link:hover::after { transform: scaleX(1) } } /* Activo: nombre nativo. Inactivo: nombre traducido al idioma actual (sin paréntesis) */ .PaperMenu__lang .wpml-ls-item:not(.wpml-ls-current-language) .wpml-ls-native { display: none } .PaperMenu__lang .wpml-ls-item:not(.wpml-ls-current-language) .wpml-ls-display { display: inline } .PaperMenu__lang .wpml-ls-bracket { display: none } /* Separador entre idiomas */ .PaperMenu__lang .wpml-ls-item + .wpml-ls-item::before { content: " / "; display: inline-block; font-family: 'SuisseIntl',Helvetica,Arial,sans-serif; font-weight: 400; color: #000; line-height: 1em; padding: 0 0.5em } /* ── Efecto underline animado — títulos/labels + colList ── */ .PaperMenu__closeLink, .PaperMenu__colLabel a, .PaperMenu__colList li a, .PaperMenu__edition__title a, .PaperMenu__edition__post-title { position: relative } /* display específico: closeLink es block (toma ancho), title a + post-title son inline-block para que el ::after se ajuste al texto */ .PaperMenu__edition__title a, .PaperMenu__edition__post-title { display: inline-block } .PaperMenu__closeLink::after, .PaperMenu__colLabel a::after, .PaperMenu__colList li a::after, .PaperMenu__edition__title a::after, .PaperMenu__edition__post-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } @media(hover:hover) and (pointer:fine) { .PaperMenu__closeLink:hover::after, .PaperMenu__colLabel a:hover::after, .PaperMenu__colList li a:hover::after, .PaperMenu__edition__title a:hover::after, .PaperMenu__edition__post:hover .PaperMenu__edition__post-title::after { transform: scaleX(1) } } .PaperMenu__colList { list-style: none; padding: 0; margin: 0 } .PaperMenu__colList li { margin: 0 0 .15em } .PaperMenu__colList li a { display: block; width: fit-content; color: #000; text-decoration: none } /* ── EDICIÓN (bloque inferior) ── */ .PaperMenu__edition { width: 100%; margin-top: 0 } .PaperMenu__edition__wrap { width: 100%; max-width: 1800px; margin: 0 auto; display: flex; align-items: stretch } .PaperMenu__edition__img { width: 25.5%; flex: 0 0 25.5%; align-self: stretch; overflow: hidden } .PaperMenu__edition__img img { width: 100%; height: 100%; object-fit: cover; display: block } .PaperMenu__edition__content { width: 66.66%; margin-left: 8.34%; padding: 4vw var(--gutter) 5vw 0; display: flex; flex-direction: column } .PaperMenu__edition__num { display: block; margin: 0 0 3em } .PaperMenu__edition__title { margin: 0 0 2em } .PaperMenu__edition__title a { color: inherit; text-decoration: none } .PaperMenu__edition__text { max-width: 440px; margin: 0 0 5em } .PaperMenu__edition__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none } .PaperMenu__edition__scroll::-webkit-scrollbar { display: none } .PaperMenu__edition__track { display: flex; gap: clamp(24px,2.5vw,48px); align-items: flex-start; width: max-content } .PaperMenu__edition__post { display: block; text-decoration: none; color: #000; min-width: 200px; max-width: 280px } .PaperMenu__edition__post-num { display: block; margin: 0 0 1.5em } /* ── RESPONSIVE ── */ @media (max-width: 767px) { /* Estructura: wrap es flex wrap, columnas suben con display:contents */ .PaperMenu__wrap { display: flex !important; flex-wrap: wrap; row-gap: 4vw } .PaperMenu__main { display: contents } .PaperMenu__left { display: contents } .PaperMenu__right { display: contents } /* Ocultos en mobile */ .PaperMenu__catImage { display: none } .PaperMenu__edition__img { display: none } .PaperMenu__edition__text { display: none } /* sin descripción en mobile */ /* La lista de items de la columna brand se oculta — solo se muestra el label "MASSIMODUTTI.COM" */ .PaperMenu__right > .PaperMenu__col:nth-child(1) .PaperMenu__colList { display: none } /* Reset margin-bottom de labels (override desktop 5em) */ .PaperMenu__colLabel { margin-bottom: 0 } /* ESP/ENG (full row, alineado a la derecha) */ .PaperMenu__right > .PaperMenu__col:nth-child(3) { width: 100%; order: 1; margin: 0 0 0 auto; padding: 0; text-align: right } .PaperMenu__lang .wpml-ls-legacy-list-horizontal { display: flex; justify-content: flex-end; text-align: right } /* BACK HOME (full row, debajo de ESP/ENG) */ .PaperMenu__right > .PaperMenu__col:nth-child(2) { width: 100%; order: 2; margin: 8vw 0 0 0; padding: 0 } /* MASSIMODUTTI.COM (label de la columna brand, full row, separación al bloque siguiente) */ .PaperMenu__right > .PaperMenu__col:nth-child(1) { width: 100%; order: 3; margin: 0 0 6vw; padding: 0 } /* CATEGORIAS + lista (full row, label con su separación propia) */ .PaperMenu__catText { width: 100%; order: 4; padding: 0; margin: 0 } .PaperMenu__catText .PaperMenu__colLabel { margin-bottom: 4vw } .PaperMenu__catList { margin-bottom: 4vw } /* Bloque edición */ .PaperMenu__edition__wrap { flex-direction: column } .PaperMenu__edition__content { width: 100%; margin-left: 0; padding: 2.5em 22px 5em } .PaperMenu__edition__num { margin: 0 0 2em } .PaperMenu__edition__title { margin: 0 0 2.5em } /* Tipografía dentro del menú: intro/intro_bold a 13px, título de edición a 15px */ .PaperMenu__inner .intro, .PaperMenu__inner .intro_bold { font-size: 13px } .PaperMenu__inner h3.intro_bold.PaperMenu__edition__title { margin: 0 0 2.5em; font-size: 15px; max-width: 200px } /* Posts vertical, sin scroll */ .PaperMenu__edition__scroll { overflow: visible } .PaperMenu__edition__track { flex-direction: column; width: 100%; gap: 2.2em } .PaperMenu__edition__post { min-width: 0; max-width: 100%; width: 100% } .PaperMenu__edition__post-num { display: block; margin: 0 0 1em } } /* Body con menú abierto: bloquea scroll */ body.menu-open { overflow: hidden } /* ========================================================================== RELATED POSTS — .relatedPosts Reusa el patrón visual `.home27Category--horizontal` (header con ( Cat ) + arrows + scroll horizontal). Solo necesita su propio contenedor + posicionamiento de las flechas a la derecha del header. ========================================================================== */ .relatedPosts { padding: var(--block-vpad) 0 var(--block-vpad) var(--gutter); margin: 0; width: 100% } /* Header: el padding-left lo da el parent (.relatedPosts), reseteamos el margin-left que viene de home27Category */ .relatedPosts .home27Category__header { margin-left: 0 !important } /* Flechas L/R en la esquina derecha del header del related (no en bottom como home27Category) */ .relatedPosts__arrows { display: flex; gap: 1.2em; align-items: center; flex-shrink: 0 } /* Asegura que el scroll horizontal funciona en touch — iOS Safari a veces ignora overflow-x:auto si no hay touch-action explícita. width:100% fuerza el ancho del scroll container. */ .relatedPosts .home27Category__scroll { width: 100%; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch } /* Card — 35% ancho, split 50/50 imagen/texto */ .archiveCard { flex: 0 0 35%; min-width: 500px; max-width: 590px; display: flex; flex-direction: row; scroll-snap-align: start } /* Imagen — 50% del card */ .archiveCard__img-link { display: block; width: 50%; flex-shrink: 0 } .archiveCard__img-wrap { width: 100%; background: #f0eeeb; overflow: hidden } .archiveCard__img { width: 100%; height: auto; display: block; margin: 0 auto; transition: transform .45s ease } .archiveCard__img-link:hover .archiveCard__img { transform: scale(1.03) } /* Columna texto — 50% del card */ .archiveCard__text { width: 50%; display: flex; flex-direction: column } /* Body */ .archiveCard__body { width: 75%; margin: 0 17.5% 0 7.5%; display: flex; flex-direction: column; height: 100% } /* Meta: fecha + número edición */ .archiveCard__meta { padding-top: 0 } .archiveCard__date { display: flex; width: 80%; text-transform: capitalize } .archiveCard__year { margin: 0 0 0 auto } /* Título + excerpt — pegados al bottom */ .archiveCard__bottom { margin-top: auto } .archiveCard__title { margin: 0 20% 1em 0; line-height: 1.05em !important } .archiveCard__title a { text-decoration: none; color: inherit; display: block } /* line-clamp: 2 líneas visuales máximo. El texto que sobre se trunca con `…` automáticamente. El navegador respeta el wrapping natural y siempre muestra exactamente 2 líneas. */ .archiveCard__excerpt { margin: 0; line-height: 1.2em !important; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } /* (Removed: el antiguo @media 1199px que forzaba .archiveCard a layout vertical en tablet. Ahora tablet usa el mismo layout horizontal 50/50 que desktop.) */ /* Mobile (≤660px) — .archiveCard usa la convención 660 porque tiene tablet styling (661-1024) en home27Category__featured-grid. Mantenemos el bloque consistente. */ @media (max-width: 660px) { .archiveCard { flex: 0 0 52vw; min-width: 0; max-width: none; flex-direction: column } .archiveCard__img-link { width: 100% } .archiveCard__text { width: 100% } .archiveCard__body { width: 90%; margin: 0 10% 0 0 } .archiveCard__meta { padding: 2em 0 } .archiveCard__date { width: auto } .archiveCard__year { margin: 0 auto 0 4em } .archiveCard__title { margin: 0 0 0.8em } } /* Mobile (<768px): logo páginas internas al 70% en estados normales, 45% al scrollear arriba. Tablet (768-1024px) NO recibe override → usa los valores desktop (40%/20%). EXCLUYE explícitamente: - .LogoMDheader--h1 → logo H1 grande de la home legacy - .LogoMDheader--home27 → logo H1 de la home27 (tiene su propio sizing en línea ~167) */ @media (max-width: 767px) { /* Default (near-top, scrolled-once) → 70%. Selector matchea exactamente la especificidad de las reglas globales (líneas ~958-959) para poder ganar dentro del mismo @media. */ body.near-top:not(.tax-paper_edition) .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27), body.scrolled-once:not(.tax-paper_edition) .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27) { width: 70%; max-width: none; margin: 0 auto; } /* Scrolled-up (header fijo reducido tras volver a subir) → 45% */ body.scrolled-up:not(.tax-paper_edition) .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1):not(.LogoMDheader--home27) { width: 45%; max-width: none; margin: 0 auto; } /* Taxonomy paper_edition (body lockeado, sin scroll) → 70% */ body.tax-paper_edition .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1) { width: 70%; max-width: none; } } /* ── ≤660px: ajustes finales mobile ── - Breadcrumb back arrow con padding lateral (alineado con el menu hamburger) - .categoryPage sin padding lateral (las cards se van a edge-to-edge) - .categoryFeatured margin-top reducido - Center card del carousel a 100vw (peeks fuera de pantalla) */ @media (max-width: 660px) { /* .breadcrumbs container sin padding — el padding pasa al elemento back para que el icono quede a 1 gutter (no doble) */ .breadcrumbs { padding: 0 } .breadcrumbs__back { display: block; padding: 0 var(--gutter); } .categoryPage { padding: 0 } .categoryFeatured { margin: 6.11vw 0 0 } /* Como .categoryPage ya no tiene padding lateral, devolvemos el gutter a los bloques que SÍ deben respetar el margen. categoryHeader mantiene también el block-vpad vertical (igual que desktop) y categoryArchive solo necesita el gutter horizontal. */ .categoryHeader { padding: var(--block-vpad) var(--gutter) } .categoryArchive { padding: 0 var(--gutter) } /* Center card 100% — peeks completamente off-screen (solo se ve la del centro) */ .categoryFeatured__grid { padding-bottom: 133.33vw } /* aspect 100vw × 4/3 */ .categoryFeatured__card { width: 100% } .categoryFeatured__card.is-slot-0 { transform: translateX(-100%) } /* off-screen left */ .categoryFeatured__card.is-slot-1 { transform: translateX(0%) } /* center fully */ .categoryFeatured__card.is-slot-2 { transform: translateX(100%) } /* off-screen right */ .categoryFeatured__card.is-offscreen-right { transform: translateX(200%) } } @media (max-width: 460px) { .archiveCard { flex: 0 0 75vw } } /* ========================================================================== FOOTER — REVEAL SCROLL (Chanel-style) El footer es position: fixed con z-index bajo. El #container tiene z-index alto + background opaco → cubre el footer durante el scroll. --footer-h se setea desde JS midiendo la altura real del footer. body padding-bottom reserva ese espacio al final del documento. ========================================================================== */ body { padding-bottom: var(--footer-h, 0) } #container { position: relative; z-index: 2; background: #FAF9F7; min-height: 100vh } .PaperFooter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; background: #000; color: #fff; padding: clamp(60px, 8vw, 120px) 0 clamp(30px, 3vw, 60px) } .PaperFooter__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(50px, 5vw, 80px); width: 100%; max-width: 1920px; margin: 0 auto } /* ── Carrusel de Ediciones ─────────────────────────────────────────────── */ .PaperFooter__editions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2vw, 40px) } .PaperFooter__editions-label { text-align: center; margin: 2em auto 0 } .PaperFooter__editions-scroll { width: 100%; max-width: 1920px; margin: 2em auto; overflow: hidden } .PaperFooter__editions-track { display: flex; gap: 0; align-items: flex-start; width: max-content; will-change: transform } /* Respeta el reduce motion del sistema */ @media (prefers-reduced-motion: reduce) { .PaperFooter__editions-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch } .PaperFooter__editions-track { transform: none !important } } /* Center-highlight: card central destacada SOLO por tamaño. Opacity/filter desactivados — todas las cards mantienen color y opacidad al 100%. */ .PaperFooter__edition { flex: 0 0 auto; width: 16.66vw; margin: 0; display: flex; flex-direction: column; text-decoration: none; color: inherit; transform: scale(0.80); opacity: 0.9; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease; transform-origin: center center; z-index: 1 } .PaperFooter__edition.is-center { transform: scale(1); opacity: 1; z-index: 2 } .PaperFooter__edition-cover { width: 100%; aspect-ratio: 3/4; background: #d8d6d2; overflow: hidden; display: flex; align-items: center; justify-content: center } .PaperFooter__edition-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease } @media(hover:hover) and (pointer:fine) { .PaperFooter__edition:hover .PaperFooter__edition-cover img { transform: scale(1.03) } } .PaperFooter__edition-meta { display: none /* flex; flex-direction: column; gap: 0.4em; align-items: center; text-align: center; padding-top: 0.8em */ } .PaperFooter__edition-num { display: block } .PaperFooter__edition-name { display: block; margin: 0 } /* Descubrir / Descargar */ .PaperFooter__editions-actions { display: flex; align-items: center; gap: 0.8em } .PaperFooter__editions-action { color: inherit; text-decoration: none; position: relative } .PaperFooter__editions-action::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } @media(hover:hover) and (pointer:fine) { .PaperFooter__editions-action:hover::after { transform: scaleX(1) } } .PaperFooter__editions-sep { opacity: .5 } /* ── Widgets (categorías + social) ─────────────────────────────────────── */ .PaperFooter__widgets { display: flex; flex-direction: column; align-items: center; gap: clamp(50px, 5vw, 80px); width: 100% } /* Categorías */ .footerWidget.widget_nav_menu ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; list-style: none; padding: 0; margin: 0; gap: 0 } .footerWidget.widget_nav_menu ul li { display: flex; align-items: center } .footerWidget.widget_nav_menu ul li::after { content: '/'; margin: 0 1em; opacity: .5 } .footerWidget.widget_nav_menu ul li:last-child::after { display: none } .footerWidget.widget_nav_menu ul li a { text-decoration: none; color: inherit; position: relative } .footerWidget.widget_nav_menu ul li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } @media(hover:hover) and (pointer:fine) { .footerWidget.widget_nav_menu ul li a:hover::after { transform: scaleX(1) } } /* Legal — copyright, cookies, idioma. Todo en línea, separación por gap */ .PaperFooter__legal { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(24px, 4vw, 80px); width: 100% } .footerLegalWidget { display: flex; align-items: center } /* Layout del widget custom HTML con botón cookies + política */ .footerLegalWidget .wrap_flex_footer { display: flex; align-items: center; gap: clamp(24px, 4vw, 80px) } /* Botón de cookies (OneTrust) */ .footerLegalWidget button#ot-sdk-btn, .footerLegalWidget button.ot-sdk-show-settings { background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer; color: inherit !important; font: inherit !important; text-decoration: none !important; position: relative } /* Enlaces — override inline styles del widget HTML (text-decoration: underline) */ .footerLegalWidget a { color: inherit !important; text-decoration: none !important; position: relative; padding: 0 !important; font-size: inherit !important } .footerLegalWidget a::after, .footerLegalWidget button.ot-sdk-show-settings::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } @media(hover:hover) and (pointer:fine) { .footerLegalWidget a:hover::after, .footerLegalWidget button.ot-sdk-show-settings:hover::after { transform: scaleX(1) } } /* WPML selector de idioma — inline, separador / */ .PaperFooter__legal .wpml-ls-legacy-list-horizontal { padding: 0 !important; border: 0 !important } .PaperFooter__legal .wpml-ls, .PaperFooter__legal .wpml-ls * { float: none !important; clear: none !important } .PaperFooter__legal .wpml-ls ul { display: flex !important; align-items: center; gap: 0.4em; padding: 0 !important; margin: 0 !important; list-style: none } .PaperFooter__legal .wpml-ls-item { display: inline-flex !important; align-items: center; padding: 0 !important; margin: 0 !important; line-height: 1em !important } .PaperFooter__legal .wpml-ls-item + .wpml-ls-item::before { content: '/'; margin-right: 0.4em; opacity: 0.5 } .PaperFooter__legal .wpml-ls-link { padding: 0 !important; color: inherit; text-decoration: none; position: relative } .PaperFooter__legal .wpml-ls-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } @media(hover:hover) and (pointer:fine) { .PaperFooter__legal .wpml-ls-link:hover::after { transform: scaleX(1) } } .PaperFooter__legal .wpml-ls-current-language .wpml-ls-link::after { transform: scaleX(1) } /* Redes sociales */ .footerSocial { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1em, 1.5vw, 2em) } .footerSocial br { display: none } .footerSocial a { text-decoration: none; color: inherit; position: relative } .footerSocial a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease } @media(hover:hover) and (pointer:fine) { .footerSocial a:hover::after { transform: scaleX(1) } } /* Tablet (661-1024px) — .PaperFooter__edition width 33vw (convención mobile≤660 / tablet 661-1024) */ @media (min-width: 661px) and (max-width: 1024px) { .PaperFooter__edition { width: 33vw } } /* Mobile (.PaperFooter__edition específico — convención 660) */ @media (max-width: 660px) { .PaperFooter__edition { width: 60vw } } /* Tablet + mobile (≤1024px) — menú de categorías del footer: ancho 80% con wrap natural (las categorías se reparten en varias líneas como en el mockup) */ @media (max-width: 1024px) { .footerWidget.widget_nav_menu ul { width: 80%; margin-left: auto; margin-right: auto; gap: 0.5em /* ; flex-direction: column */ } } /* Mobile general del PaperFooter — sigue en 767 porque no tiene tablet styling */ @media (max-width: 767px) { .PaperFooter { padding: 60px 0 22px } .PaperFooter__inner { gap: 36px } .PaperFooter__editions-track { padding: 0 22px } } /* Mobile específico ≤660px — más aire entre widgets + legal apilado en column-reverse + ocultar menú de categorías del footer en mobile */ @media (max-width: 660px) { .PaperFooter__widgets { gap: 15vw } .PaperFooter__legal { flex-direction: column-reverse; margin-top: 4vw; gap: 11vw } .menu-categorias-container { display: none } } /* ═══════════════════════════════════════════════════════════════ TAXONOMY — PAPER EDITION ═══════════════════════════════════════════════════════════════ */ /* ── Vimeo SDK fix: el SDK inyecta vp-center en body → display:flex ── */ /* Esto rompe el layout completo de la taxonomy page. */ body.tax-paper_edition.vp-center { display: block !important } /* El SDK también inyecta un div#player directamente en */ body.tax-paper_edition > #player { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important } /* ── Layout reset ──────────────────────────────────────────────────── */ body.tax-paper_edition #container, body.tax-paper_edition #main, body.tax-paper_edition .editionPage, body.tax-paper_edition .editionSwiper { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important } /* ── Body lock CONDICIONAL: hidden mientras navegues entre slides 0..N-1. Cuando el JS detecta que estás en el ÚLTIMO slide (último card), añade .edition-on-footer al body → desbloqueamos overflow → wheel-down extra libera al body scroll y revela el footer claro debajo del swiper. */ body.tax-paper_edition { overflow: hidden; overscroll-behavior: contain } body.tax-paper_edition.edition-on-footer { overflow: auto } /* ── Header position: siempre fixed (mismo patrón que home-cards) ── */ body.tax-paper_edition .OffPageHeader, body.tax-paper_edition .OffPageHeader.is-overlay { position: fixed; top: 0; left: 0; width: 100%; transition: opacity 0.35s ease, visibility 0.35s ease } /* ── Logo MÁS GRANDE solo en taxonomy paper_edition (override del 35%/300px global) ── */ body.tax-paper_edition .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1) { width: 40%; max-width: 733px } /* Mobile override — debe ir DESPUÉS de la regla 40% global para ganar en la cascada (misma especificidad, la última gana). En mobile el logo va al 70% siempre. */ @media (max-width: 767px) { body.tax-paper_edition .OffPageHeader .LogoMDheader:not(.LogoMDheader--h1) { width: 70%; max-width: none } } /* ═══════════════════════════════════════════════════════════════════════════ HERO base — .editionHero / .editionHero__* (compartido home27 + taxonomy) Estas reglas son la BASE: aplican en `page-home27.php` (hero en flujo normal) y son override por `.editionSlide--hero` en `taxonomy-paper_edition.php`. ═══════════════════════════════════════════════════════════════════════════ */ .editionHero { position: relative; width: 100vw; overflow: hidden; color: var(--edition-color, #fff) } .editionHero__media { width: 100%; position: relative; z-index: 1; display: block } .editionHero__desktop { display: block } .editionHero__mobile { display: none } .editionHero__desktop img, .editionHero__mobile img { width: 100%; height: auto; display: block; margin: 0 } /* Meta overlay: número + h1 — posición top 28% (default home27, anterior al swiper) */ .editionHero__meta { position: absolute; top: 28%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; pointer-events: none; padding: 0 22px; color: var(--edition-color, #fff); z-index: 2 } .editionHero__number { margin: 0 auto; text-align: center } .editionHero__title { text-align: center; margin: 1.2em auto 0 } .editionHero__title a { color: inherit; text-decoration: none; pointer-events: auto } /* Flecha de scroll — anclada al hero, nunca fuera del viewport */ .editionHero__arrow { position: fixed; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 200; color: var(--edition-color, #fff); display: block; width: 24px; height: auto; opacity: 0.85; transition: opacity 0.4s ease, visibility 0.4s ease; text-decoration: none; animation: opNextBounce 1.4s ease-in-out infinite } body.hero-short .editionHero__arrow { position: absolute; bottom: 5% } .editionHero__arrow:hover { opacity: 1 } .editionHero__arrow.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; animation: none } .editionHero__arrow .next-arrow { display: block; width: 20px; height: auto } .editionHero__arrow .next-arrow svg { display: block; width: 100%; height: auto } .editionHero__arrow svg path { fill: var(--edition-color, #fff) } /* Mobile: oculta desktop, muestra mobile */ @media (max-width: 767px) { .editionHero__desktop { display: none !important } .editionHero__mobile { display: block !important } .editionHero__mobile .video-wrapper { padding-bottom: 177.78% } } /* ═══════════════════════════════════════════════════════════════════════════ SWIPER vertical (patrón zarahome.com) — solo taxonomy-paper_edition ═══════════════════════════════════════════════════════════════════════════ */ /* ── Container 100vh, oculta overflow para que el swiper-wrapper se mueva dentro ── */ .editionSwiper { position: relative; width: 100vw; height: 100vh; overflow: hidden; color: var(--edition-color, #fff) } .editionSwiper__container { width: 100%; height: 100% } .editionSwiper__container .swiper-wrapper { height: 100% } /* ── Cada slide: 100vw × 100vh, imagen full-bleed ── */ .editionSlide { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #111 } .editionSlide__media { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1 } .editionSlide__media picture { position: absolute; inset: 0; width: 100%; height: 100% } .editionSlide__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; max-width: none } /* Overlay negro 30% sobre todo el media (cards + hero video) — mejora la legibilidad del título del hero, el logo del header y los labels de la pagination. */ .editionSlide__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.30); pointer-events: none; z-index: 2 } .editionSlide__link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; position: relative; z-index: 3 } /* ── Hero slide específico — wrappers desktop/mobile siguen activos pero ahora se posicionan absolute para llenar todo el slide ───────────── */ .editionSlide--hero .editionHero__media { position: absolute; inset: 0; width: 100%; height: 100% } .editionSlide--hero .editionHero__desktop, .editionSlide--hero .editionHero__mobile { position: absolute; inset: 0; width: 100%; height: 100% } .editionSlide--hero .editionHero__desktop img, .editionSlide--hero .editionHero__mobile img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0 } .editionSlide--hero .editionHero__mobile { display: none } .editionSlide--hero .editionHero__desktop { display: block } /* Video wrapper en hero ocupa todo el slide (override del padding-bottom inline) */ .editionSlide--hero .video-wrapper { position: absolute !important; inset: 0; padding-bottom: 0 !important; height: 100%; width: 100%; overflow: hidden } /* CRITICAL: iframes/video capturan wheel events y no los propagan al swiper. Con pointer-events: none los eventos pasan transparentes a Swiper → wheel = next slide. El video sigue reproduciéndose (autoplay/loop), solo deja de ser interactivo. */ .editionSlide--hero iframe, .editionSlide--hero video { pointer-events: none } /* COVER del vídeo del hero. Usa --video-cover-ratio inyectado por PHP (ACF edition_video_ratio). Fallback 56.25 = 16:9. !important overridea los inline styles top/left/width/height del iframe. */ .editionSlide--hero .video-wrapper iframe, .editionSlide--hero .video-wrapper video { position: absolute !important; top: 50% !important; left: 50% !important; width: 100vw !important; height: calc(100vw * var(--video-cover-ratio, 56.25) / 100) !important; min-width: calc(100vh * 100 / var(--video-cover-ratio, 56.25)) !important; min-height: 100vh !important; transform: translate(-50%, -50%) !important; max-width: none !important; border: 0; } /* Mobile: usa el ratio mobile (--video-cover-ratio-mobile, fallback 177.78 = 9:16) ya que el slide muestra el vídeo mobile que puede tener otra proporción que el desktop. */ @media (max-width: 767px) { .editionSlide--hero .video-wrapper iframe, .editionSlide--hero .video-wrapper video { height: calc(100vw * var(--video-cover-ratio-mobile, 177.78) / 100) !important; min-width: calc(100vh * 100 / var(--video-cover-ratio-mobile, 177.78)) !important; } } /* Meta overlay del hero — usa la posición base de .editionHero__meta (top: 28%, align-items center, flex-start) heredada de las reglas base de home. Solo subimos el z-index para asegurar que va por encima del media del slide. */ .editionSlide--hero .editionHero__meta { z-index: 3 } .editionSlide--hero .editionHero__title a { color: inherit; text-decoration: none; pointer-events: auto } /* ═══════════════════════════════════════════════════════════════════════════ PAGINATION OVERLAY persistente (bottom de cada slide) Línea horizontal con flechas L/R en extremos + lista de ( 0X ) Título debajo. ═══════════════════════════════════════════════════════════════════════════ */ /* Pagination overlay — centrado horizontalmente con width fija (92%) y space-between en los labels: funciona igual con 2, 3, 4 o 5 cards, cada label se reparte el ancho disponible. bottom: 12vh deja respiro respecto al borde inferior. */ .editionNav { position: absolute; left: auto; right: auto; margin: 0 auto; bottom: 12vh; width: 92%; z-index: 50; color: var(--edition-color, #fff); pointer-events: none } /* Para que el width + margin auto funcione hace falta padding por el lado del flex parent: forzamos al nav a centrarse con left/right: 0 + margin-auto. */ .editionSwiper .editionNav { left: 0; right: 0 } .editionNav__label { pointer-events: auto } /* Lista de labels distribuida horizontal — patrón Maria mockup */ .editionNav__labels { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5vw } .editionNav__item { flex: 1 1 0; min-width: 0; text-align: left } /* Label: flex column con número arriba + título debajo. Gap 1.2em. Todos los labels van a opacity 1 — la diferenciación del activo se hace con font-weight, no con opacidad. */ .editionNav__label { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2em; text-align: left; width: 100%; opacity: 0.5; transition: opacity 0.25s ease, font-weight 0.25s ease; font: inherit } /* Activo: opacity 1 + título en bold. El número (.credit) ya viene en font-weight 600. */ .editionNav__label.is-active { opacity: 1 } .editionNav__label.is-active .editionNav__title { font-weight: 700 } .editionNav__num { display: block } /* Hasta 2 líneas con ellipsis en la 2ª si desborda. max-width 200px. */ .editionNav__title { text-align: left; line-height: 1.2; max-width: 200px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word; } /* ── Footer claro #FAF9F7 — accesible scrolleando bajo el último slide. El footer del site es position: fixed por defecto (Chanel reveal). En la taxonomy lo pasamos a position: static para que entre en flujo normal y quede debajo del swiper. Al wheel-down en último slide + releaseOnEdges: true del mousewheel, el body scrollea y revela el footer. */ body.tax-paper_edition { padding-bottom: 0 !important } /* anula la reserva que body { padding-bottom: var(--footer-h) } hace para el footer fixed (Chanel-reveal). En taxonomy el footer es static y ya ocupa su sitio. */ body.tax-paper_edition .PaperFooter { position: static !important; background-color: #FAF9F7; color: #000 } body.tax-paper_edition .OffPageFooter, body.tax-paper_edition #colophon, body.tax-paper_edition .site-footer { background-color: #FAF9F7; color: #000 } /* Header SIEMPRE visible mientras estés en los slides. El color se adapta por slide vía --header-color (gestionado por el inyector del wp_head en la propia taxonomy: edition_color / edition_hero_ui_color). */ /* EXCEPCIÓN: cuando el footer empieza a aparecer (IntersectionObserver del JS), el header se funde para no superponerse a los títulos del footer claro. */ body.edition-footer-visible.tax-paper_edition .OffPageHeader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease } /* ── Mobile ────────────────────────────────────────────────────── */ @media (max-width: 767px) { .editionSlide--hero .editionHero__desktop { display: none !important } .editionSlide--hero .editionHero__mobile { display: block !important } /* Pagination: scroll horizontal si los títulos no caben — mantiene visible siempre */ .editionNav { bottom: 12vh } .editionNav__labels { gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; justify-content: flex-start } .editionNav__labels::-webkit-scrollbar { display: none } .editionNav__item { flex: 0 0 auto; min-width: 45vw } .editionNav__title { white-space: normal; line-height: 1.25 } } /* ═══════════════════════════════════════════════════════════════════════════ HOME 27 — page-home27.php ═══════════════════════════════════════════════════════════════════════════ */ /* ── Logo H1 en el header (home27) Doble clase encadenada → especificidad (0,3,0)/(0,3,1) igual que :not() y gana por orden posterior en el archivo. ──────────────────────────────── */ .OffPageHeader .LogoMDheader.LogoMDheader--home27 { width: auto; max-width: none; margin: 0 auto; position: relative; text-align: center } .OffPageHeader .LogoMDheader.LogoMDheader--home27 a { display: block; text-decoration: none; font-family: 'ZalandoSans', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 5.56vw; /* 100px @ 1800px */ line-height: 0.85em; /* 85px */ letter-spacing: -0.06em; /* -6% */ text-transform: uppercase; color: var(--header-color); text-align: center } .OffPageHeader .LogoMDheader.LogoMDheader--home27 .LogoMD, .OffPageHeader .LogoMDheader.LogoMDheader--home27 .LogoPaper { display: block } /* ── Desktop/mobile hero — control explícito ─────────────────────────────── */ .home27Hero__desktop { display: block } .home27Hero__mobile { display: none } /* Overlay negro 30% sobre el media del hero — igual que en la taxonomy. Mejora legibilidad del logo del header + título del edition meta. position relative en el media para crear el contexto del ::after. */ .home27Hero__media { position: relative } .home27Hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.30); pointer-events: none; z-index: 2 } /* Asegura que el meta queda por encima del overlay */ .home27Hero .editionHero__meta { z-index: 3 } /* ── Flecha home27: hereda position:fixed de .editionHero__arrow — igual que taxonomía ── */ /* ── Sección edición (fondo de color) ───────────────────────────────────── */ .home27Edition { display: grid; grid-template-columns: auto 1fr; gap: 0; width: 100%; align-items: start; background-color: #ffecc9; color: #000000; padding: clamp(90px, 7vw, 120px) 0 clamp(60px, 4.5vw, 80px) } .home27Edition__info { padding: 0; display: flex; flex-direction: column; gap: 0; width: 18vw; max-width: 220px; margin-left: var(--gutter); margin-right: min(10vw, 180px) } .home27Edition__num { display: block; margin: 0 0 2em } .home27Edition__title { margin: 0 0 3em } .home27Edition__desc { margin: 0 } /* ── Scroll horizontal de posts ─────────────────────────────────────────── */ /* Wrapper col 2 del grid — min-width:0 es CRÍTICO para que respete el 1fr track y permita al .home27Edition__scroll activar su overflow-x: auto. Sin esto, el track interno con width:max-content empuja al wrapper a crecer y no hay scroll. */ .home27Edition__right { min-width: 0; display: block; width: 100% } .home27Edition__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding: 0; cursor: grab; width: 100% } .home27Edition__scroll::-webkit-scrollbar { display: none } .home27Edition__scroll.is-dragging { cursor: grabbing } .home27Edition__track { display: flex; gap: 0; align-items: flex-start; width: max-content; scroll-snap-type: x mandatory } /* Flechas L/R desktop — visibles solo si hay scroll horizontal (JS lo gestiona). */ .home27Edition__arrows { display: flex; gap: 1em; align-items: center; justify-content: flex-end; margin: 0 var(--gutter) 1.5em 0 } .home27Edition__arrows .scroll-arrow--right svg { transform: scaleX(-1) } .home27Edition__arrows .scroll-arrow.is-disabled { opacity: 0.3; cursor: default } /* ── Cards ──────────────────────────────────────────────────────────────── */ /* Impares: portrait 3:4 → 18vw */ .home27Card:nth-child(odd) { width: 18vw; min-width: 160px; flex: 0 0 auto; scroll-snap-align: start; margin-right: min(6vw, 80px) } /* Pares: landscape (imagen 3:4 rotada 90°) → 24vw */ .home27Card:nth-child(even) { width: 24vw; min-width: 213.33px; flex: 0 0 auto; scroll-snap-align: start; margin-right: min(6vw, 80px) } .home27Card:last-child { margin-right: var(--gutter) } .home27Card__link { display: flex; flex-direction: column; text-decoration: none; color: inherit } /* Imagen base — portrait natural */ .home27Card__img { width: 100%; height: auto; margin-bottom: 0 } .home27Card__img img { width: 100%; height: auto; display: block; transition: transform 0.4s ease } /* Pares: imagen portrait 3:4 rotada 90° → visual landscape 4:3. tras rotar = visual width 24vw (ancho del card). = 24vw × 3/4 = 18vw tras rotar = visual height. Contenedor = 18vw (visual height). margin-bottom 6vw = 24-18 (diferencia card vs imagen para balance simétrico). */ .home27Card:nth-child(even) .home27Card__img { position: relative; height: 18vw; margin-bottom: 6vw } .home27Card:nth-child(even) .home27Card__img img { position: absolute; top: 50%; left: 50%; width: auto; height: 24vw; display: block; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center } .home27Card__link:hover .home27Card__img img { transform: scale(1.03) } .home27Card:nth-child(even) .home27Card__link:hover .home27Card__img img { transform: translate(-50%, -50%) rotate(90deg) } /* Número de la card */ .home27Card__num { display: block; margin: 5em 0 3em; text-align: left } /* ── Bloques modulares (ACF Flexible Content) ───────────────────────────── */ .home27Blocks { width: 100%; display: block } .home27Block { width: 100%; position: relative; display: block } .home27Block--full-width { /* sin restricciones por defecto — total libertad */ } .home27Block--full-width img { max-width: 100%; height: auto; display: block } .home27Block--full-width p:last-child { margin-bottom: 0 } .home27Block--categories { width: 100%; max-width: 1920px; margin: 0 auto } /* ── Bloque Categorías ──────────────────────────────────────────────────── */ .home27Categories { padding: var(--block-vpad) 0; width: 100% } .home27Category { /* padding: 0 var(--gutter); */ margin-bottom: var(--block-vpad) } /* Header y featured usan MARGIN (no padding) — para que el border-bottom del header quede indentado al ancho del contenido y no edge-to-edge del viewport. Bottom solo lleva padding-left para que el scroll a la derecha llegue al edge. */ .home27Category__header, .home27Category__featured { margin: 0 var(--gutter) } .home27Category__bottom { padding-left: var(--gutter) } .home27Category:last-child { margin-bottom: 0 } /* Header — nombre con paréntesis fuera del h2 + línea separadora */ .home27Category__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; border-bottom: 1px solid #000; padding-bottom: 1.4em; margin-bottom: var(--gutter) } .home27Category__name { display: flex; align-items: baseline; gap: 0.3em } /* Par L/R de flechas en el header del bloque — visible solo en tablet/mobile (≤1024px). `padding-right: var(--gutter)` añade separación lateral derecha; ancho fijo y gap entre las dos flechas controlado por gap. Las flechas usan la clase base `.scroll-arrow`. */ .home27Category__featured-arrows { display: none; align-items: center; gap: 1.2em; flex-shrink: 0; padding-right: var(--gutter) } .home27Category__title { margin: 0 } .home27Category__title a { color: inherit; text-decoration: none } .home27Category__paren { line-height: 1 } /* Fila 1 — Featured: 3 cards al 33.33% cada una ocupando todo el ancho (sin col vacía a la izq) */ .home27Category__featured { display: block; margin-bottom: var(--block-vpad) } .home27Category__featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 } /* Fila 2 — Desc (16.66%) + scroll (83.34%) */ .home27Category__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); gap: 0; align-items: start } /* Arrows scroll left/right — flow normal arriba del bottom, alineadas a la derecha */ .home27Category__bottom-arrows { display: flex; gap: 1em; align-items: center; justify-content: flex-end; margin: 0 var(--gutter) 2em 0 } /* Reutilizable: arrow base */ .scroll-arrow { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 11px; opacity: 1; transition: opacity 0.3s ease } .scroll-arrow svg { display: block; width: 100%; height: 100% } .scroll-arrow--right svg { transform: scaleX(-1) } .scroll-arrow.is-disabled { opacity: 0.5; pointer-events: none; cursor: default } .home27Category__desc { display: flex; flex-direction: column; gap: 0; padding-right: 20%; height: 100% } .home27Category__desc-text { margin: 0; max-width: 208px } .home27Category__more { display: inline-flex; align-items: center; gap: 0.6em; color: inherit; text-decoration: none; width: fit-content; margin: auto auto 0 0 } .home27Category__more-icon { display: inline-flex; align-items: center; width: clamp(16px, 1vw, 19px); height: auto; transition: transform .45s cubic-bezier(.22,.61,.36,1) } .home27Category__more-icon svg { display: block; width: 100%; height: auto } @media(hover:hover) and (pointer:fine) { .home27Category__more:hover .home27Category__more-icon { transform: translateX(0.35em) } } /* Scroll horizontal — fila 2 col 2 */ .home27Category__scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch } .home27Category__scroll::-webkit-scrollbar { display: none } .home27Category__track { display: flex; gap: 0; align-items: flex-start; width: max-content } /* Cards en el bloque — HORIZONTALES 50/50 (mismo estilo que .relatedPosts). Solo override del min/max-width para que entren en el grid (3 cols dentro del 3fr) y en el scroll. */ .home27Category__featured .archiveCard, .home27Category__track .archiveCard { min-width: 0; max-width: none; flex: 0 0 auto; scroll-snap-align: start } .home27Category__featured .archiveCard { width: 100% } /* En los 3 destacados del bloque (.home27Category__featured) no mostramos el excerpt — solo imagen + título + fecha. El excerpt sigue visible en el scroll del bottom. */ .home27Category__featured .archiveCard__excerpt { display: none } /* Sin excerpt no hace falta el margin-bottom del título — quitamos el `margin: 0 0 1em` default */ .home27Category__featured .archiveCard__title { margin-bottom: 0 } .home27Category__track .archiveCard { width: clamp(380px, 32vw, 578px) } /* "Descubrir todo" — botón + paneles */ .home27Categories__discover { padding: 0 var(--gutter); margin-top: clamp(40px, 3.5vw, 60px); text-align: center } .home27Categories__discover-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 0.6em; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit } .home27Categories__discover-icon { display: inline-flex; align-items: center; width: clamp(13px, 0.83vw, 15px); transition: transform .35s ease } .home27Categories__discover-icon svg { display: block; width: 100%; height: auto } .home27Categories__discover-icon { transition: transform .45s cubic-bezier(.22,.61,.36,1) } .home27Categories__discover[data-state="open"] .home27Categories__discover-icon { transform: rotate(45deg) } .home27Categories__discover-panel { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; text-align: left; transition: max-height .6s cubic-bezier(.22,.61,.36,1), opacity .4s ease, margin-top .6s cubic-bezier(.22,.61,.36,1) } .home27Categories__discover[data-state="open"] .home27Categories__discover-panel { max-height: 9000px; opacity: 1; margin-top: clamp(40px, 3.5vw, 60px) } .home27Categories__discover-row { display: block; margin-bottom: clamp(60px, 6vw, 100px) } .home27Categories__discover-row:last-child { margin-bottom: 0 } .home27Categories__discover-row.is-hidden { display: none } /* En el panel "Descubrir todo": ocultar el bloque de featured de las categorías horizontales (solo se muestra el bottom con desc + scroll de últimos posts). */ .home27Categories__discover-panel .home27Category--horizontal .home27Category__featured { display: none } /* Botón "Ver más" — desbloquea siguiente batch */ .home27Categories__discover-more-wrap { text-align: center; margin-top: clamp(40px, 3.5vw, 60px) } .home27Categories__discover-more { display: inline-flex; flex-direction: column; align-items: center; gap: 0.6em; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit } .home27Categories__discover-more-icon { display: inline-flex; align-items: center; width: clamp(13px, 0.83vw, 15px) } .home27Categories__discover-more-icon svg { display: block; width: 100%; height: auto } /* Tablet + Mobile (≤1024px) — posts destacados de TODAS las categorías: se vuelve scroll horizontal con cards al 50% (2 visibles, la 3a se ve scrolleando) + flecha en el header del bloque para scrollear/volver. El ancho de las cards lo afinan las media queries más estrechas más abajo. */ @media (max-width: 1024px) { .home27Category__featured-grid { display: flex; flex-direction: row; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .home27Category__featured-grid::-webkit-scrollbar { display: none } .home27Category__featured-grid > .archiveCard { flex: 0 0 50%; min-width: 50%; max-width: 50%; scroll-snap-align: start } /* Activar par de flechas L/R en el header (visibles solo cuando hay scroll) */ .home27Category__featured-arrows { display: inline-flex } /* Bottom row: ratio 1:3 (en lugar de 1:5 desktop) para dar más aire al desc en tablet */ .home27Category__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) } } /* Tablet estrecho (661-767px) — cards al 70% + ajuste de body, date y ratio del bottom */ @media (min-width: 661px) and (max-width: 767px) { .home27Category__featured-grid > .archiveCard { flex: 0 0 70%; min-width: 70%; max-width: 70%; scroll-snap-align: start } .archiveCard__date { width: 90% } .archiveCard__body { width: 88%; margin: 0 6% 0 6%; height: 100% } /* Bottom row: ratio 1:1.75 (aún más balanced) en este rango pequeño */ .home27Category__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) } } /* Mobile (≤660px) — featured scroll horizontal con 1 card visible + peek de la siguiente (85%); bottom es UN SOLO scroll horizontal donde el desc es el primer item (55vw) y las cards lo siguen → todo se desplaza junto. */ @media (max-width: 660px) { .home27Category { margin-bottom: 15vw } .home27Category__featured { margin-bottom: 15vw } /* Featured: cards a 85% (1 visible + peek de la siguiente para invitar al scroll) */ .home27Category__featured { margin-right: 0 !important } /* sin margin-right en mobile para que las cards lleguen al edge */ .home27Category__featured-grid { gap: var(--gutter); padding-right: var(--gutter) } /* gap entre cards + trailing gutter — solo cuando archiveCard pasa a column */ .home27Category__featured-grid > .archiveCard { flex: 0 0 90%; min-width: 90%; max-width: 90% } /* Bottom: scroll horizontal — desc + cards en una misma fila desplazable */ .home27Category__bottom { display: flex; flex-direction: row; gap: 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: start; padding-right: var(--gutter) } /* Arrows ocultas en mobile — la navegación con touch + scroll-snap es suficiente. */ .home27Category__featured-arrows, .home27Category__bottom-arrows { display: none } .home27Category__bottom::-webkit-scrollbar { display: none } .home27Category__desc { width: 55vw; flex: 0 0 55vw; padding-right: 0; height: auto } .home27Category__desc-text { margin: 0; max-width: 200px; min-height: 93.33vw } /* El wrapper del scroll deja de tener su propio overflow para no romper el flujo del padre. EXCEPTO en .relatedPosts: éste no tiene .home27Category__bottom como contenedor scrollable, así que SU .home27Category__scroll SÍ debe scrollear en mobile. */ .home27Category__scroll { overflow: visible } .relatedPosts .home27Category__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch } /* Ocultar las flechas L/R del header en mobile — la navegación con touch + scroll-snap es suficiente */ .relatedPosts__arrows { display: none } .home27Category__track { gap: 22px } /* Track cards al 70% del viewport en mobile — menores que las destacadas (90%) para jerarquía editorial. */ .home27Category__track .archiveCard { flex: 0 0 auto; width: 70vw; min-width: 0; max-width: none } } /* ── Layout VERTICAL — 3 columnas 33.33%: Col1 sticky featured#1, Col2 sticky desc+featured#2, Col3 scroll posts ───────── */ /* IMPORTANTE: en mobile NO se renderiza este markup (PHP usa wp_is_mobile() para renderizar como horizontal). Los estilos abajo son solo para desktop/tablet con UA no-mobile. */ /* Header sticky a top:0 con padding-top (clamp 45-55px). z-index alto + bg opaco. */ .home27Category--vertical .home27Category__header { position: sticky; top: 0; z-index: 5; background: #FAF9F7; padding-top: clamp(45px, 3.5vw, 55px) } /* Layout: 3 columnas alineadas al horizontal block para coherencia visual. · Col 1 (desc): exactamente 1/6 del contenido (mismo ancho que .home27Category__desc del horizontal) · Col 2 (destacada): 1fr — empieza donde empieza el .home27Category__track del horizontal · Col 3 (scroll resto): 33vw = 1/3 del viewport, igual que la 3ª col del featured-grid · gap: 0 entre col 1 y col 2 (mismo `gap: 0` que el bloque horizontal); var(--gutter) antes de col 3 */ .home27CategoryV__layout { display: grid; grid-template-columns: calc((100vw - var(--gutter)) / 6) minmax(0, 1fr) 33vw; gap: 0; padding-left: var(--gutter); padding-right: 0; align-items: start; width: 100% } .home27CategoryV__col { min-width: 0 } /* COL 1 — Descripción + link "Todo {Category}". Sticky al top para acompañar el scroll. `padding-right: 20%` igual que .home27Category__desc del horizontal (deja respiro a la derecha). El texto a max-w 208px (mismo que .home27Category__desc-text). */ .home27CategoryV__col--1 { position: sticky; top: clamp(115px, 8.6vw, 130px); align-self: start; padding-right: 20% } .home27CategoryV__intro { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 45px) } .home27CategoryV__intro-text { margin: 0; max-width: 208px } .home27CategoryV__more { display: inline-flex; align-items: center; gap: 0.6em; color: inherit; text-decoration: none; width: fit-content } .home27CategoryV__more-icon { display: inline-flex; align-items: center; width: clamp(16px, 1vw, 19px); height: auto; transition: transform .45s cubic-bezier(.22,.61,.36,1) } .home27CategoryV__more-icon svg { display: block; width: 100%; height: auto } @media (hover: hover) { .home27CategoryV__more:hover .home27CategoryV__more-icon { transform: translateX(0.35em) } } /* COL 2 — 1 destacado. · Excerpt oculto y margin-bottom: 0 del título → estilo igual al `.home27Category__featured` (consistencia editorial) · Aplica en TODOS los sizes (mobile/tablet/desktop). */ .home27CategoryV__col--2 .archiveCard__excerpt { display: none } .home27CategoryV__col--2 .archiveCard__title { margin-bottom: 0 } /* Desktop-only (≥1025px): layout especial stacked con título 40% / date 40% / espacio 20%. En mobile/tablet la card se queda en su layout default horizontal — exactamente igual que los destacados del bloque horizontal `.home27Category__featured`. */ @media (min-width: 1025px) { .home27CategoryV__col--2 { position: sticky; top: clamp(115px, 8.6vw, 130px); align-self: start } .home27CategoryV__col--2 .archiveCard { min-width: 0; flex-direction: column; max-width: min(33vw, 600px) } .home27CategoryV__col--2 .archiveCard__img-link { width: 100% } .home27CategoryV__col--2 .archiveCard__text { width: 100%; padding-top: clamp(24px, 2.5vw, 44px) } .home27CategoryV__col--2 .archiveCard__body { width: 100%; margin: 0; height: auto; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline } .home27CategoryV__col--2 .archiveCard__bottom { margin: 0; padding: 0; width: 40%; flex: 0 0 40% } .home27CategoryV__col--2 .archiveCard__meta { width: 40%; flex: 0 0 40% } .home27CategoryV__col--2 .archiveCard__date { display: flex; justify-content: space-between; align-items: baseline; width: 100% } .home27CategoryV__col--2 .archiveCard__title { margin: 0 } } /* COL 3 — Scroll vertical con resto de posts (archiveCard standard). Sin sticky → es el que scrollea. */ .home27CategoryV__col--3 { display: flex; flex-direction: column; gap: clamp(50px, 5vw, 100px) } .home27CategoryV__col--3 .archiveCard { min-width: 0; max-width: none; width: 100% } /* ── Tablet 768–1024px: col 1 + col 2 en fila 1 (50/50), col 3 span full width en fila 2 con horizontal scroll ── */ @media (min-width: 768px) and (max-width: 1024px) { .home27CategoryV__layout { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: clamp(30px, 4vw, 60px) var(--gutter) } .home27CategoryV__col--1 { position: static; padding-right: 5% } .home27CategoryV__col--2 { position: static } /* Col 3 — horizontal scroll, full row, cards al 50% (igual que `.home27Category__featured-grid` tablet) */ .home27CategoryV__col--3 { grid-column: 1 / -1; position: static; flex-direction: row; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .home27CategoryV__col--3::-webkit-scrollbar { display: none } .home27CategoryV__col--3 .archiveCard { flex: 0 0 50%; min-width: 50%; max-width: 50%; scroll-snap-align: start; width: auto } } /* Mobile ≤767px: stack vertical de las 3 cols; col 3 con horizontal scroll, cards al 85% (igual que featured-grid mobile) */ @media (max-width: 767px) { .home27CategoryV__layout { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 80px); padding: 0 var(--gutter) } .home27CategoryV__col--1, .home27CategoryV__col--2, .home27CategoryV__col--3 { position: static } .home27CategoryV__col--2 { margin-bottom: 15vw } /* respiro entre destacado y col 3 (scroll) */ .home27CategoryV__intro-text { max-width: none } .home27CategoryV__col--3 { flex-direction: row; gap: var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: var(--gutter); } .home27CategoryV__col--3::-webkit-scrollbar { display: none } /* Mismo ancho que `.home27Category__track .archiveCard` mobile — distingue jerarquía vs destacados (90%). */ .home27CategoryV__col--3 .archiveCard { flex: 0 0 auto; width: 70vw; min-width: 0; max-width: none; scroll-snap-align: start } } .home27Card__title { margin: 0; line-height: 1em !important } /* ── Header en home27: absolute overlay — se va con el scroll ───────────── */ body.page-template-page-home27-php .OffPageHeader, body.page-template-page-home27-php .OffPageHeader.is-overlay, body.page-template-page-home27-php.scrolled-up .OffPageHeader, body.page-template-page-home27-php.scrolled-up .OffPageHeader.is-overlay { position: absolute; top: 0; left: 0; width: 100% } /* ── Mobile ─────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .home27Hero__desktop { display: none !important } .home27Hero__mobile { display: block !important } /* Vídeo mobile — ratio 9:16 */ .home27Hero__mobile .video-wrapper { padding-bottom: 177.78% } /* Flecha hero (taxonomy y home27): más pequeña en mobile */ .editionHero__arrow .next-arrow { width: 16px } /* Meta hero (número + título): ancho 80% centrado en mobile (taxonomy y home27) */ .editionHero__meta { width: 80%; left: 10%; right: auto } /* home27Edition: stack vertical (info arriba, scroll abajo) */ .home27Edition { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: clamp(60px, 12vw, 90px) 0 clamp(40px, 8vw, 60px) } .home27Edition__info { width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: clamp(50px, 10vw, 70px); padding: 0 22px; position: static } /* Título dentro del info: 75% del info + margin-right 25% para que respire */ .home27Edition__title { width: 75%; margin-right: 25% } .home27Edition__scroll { padding: 0 0 0 22px } /* Flechas ocultas en mobile — el touch swipe es suficiente */ .home27Edition__arrows { display: none } .home27Edition__track { padding-right: var(--gutter) } /* aire al final del scroll */ .home27Card__num { margin: 3em 0 1.5em } /* reducir el gigante 5em 0 3em desktop */ /* Cards: tamaños diferenciados (odd 30vw, even 40vw) — ratio 3:4 entre ellas */ .home27Card:nth-child(odd) { width: 30vw; min-width: 300px; flex: 0 0 auto; scroll-snap-align: start; margin-right: min(8vw, 100px) } .home27Card:nth-child(even) { width: 40vw; min-width: 400px; flex: 0 0 auto; scroll-snap-align: start; margin-right: min(8vw, 100px) } /* Card par (landscape rotada) — math 3:4 sobre 40vw: - card width: 40vw - imagen natural 3:4 portrait, rotada 90deg → landscape 4:3 - visual width tras rotación = 40vw, visual height = 40vw × 3/4 = 30vw - .home27Card__img (contenedor) height = 30vw (visual height tras rotación) - height = 40vw (esto se convierte en visual width tras rotación) */ /* Math 3:4 + min-heights proporcionales al min-width 400px de la card: - Card 400px wide → visual width 400px → height: 400px (mín) - Container visual height = 400 × 3/4 = 300px (mín) - Margin = diferencia (400 - 300) = 100px (mín) */ .home27Card:nth-child(even) .home27Card__img { height: 30vw; min-height: 300px; margin-bottom: max(10vw, 100px) } .home27Card:nth-child(even) .home27Card__img img { height: 40vw; min-height: 400px } } /* ───────────────────────────────────────────────────────────── Página 404 ───────────────────────────────────────────────────────────── */ .page404 { background: #FAF9F7; color: #000; min-height: 60vh; padding: clamp(60px, 6vw, 120px) var(--gutter) clamp(80px, 8vw, 160px); display: flex; align-items: center; justify-content: center; } .page404__inner { width: 100%; max-width: 600px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2vw, 32px); } .page404__media { width: clamp(180px, 18vw, 260px); margin: 0 auto clamp(20px, 2vw, 32px); } .page404__media img { display: block; width: 100%; height: auto; } .page404__title { margin: 0; } .page404__subtitle { margin: 0; } .page404__text { margin: 0; max-width: 380px; } .page404__home { display: inline-block; margin-top: clamp(20px, 2vw, 32px); color: inherit; text-decoration: underline; text-underline-offset: 4px; } @media (hover: hover) { .page404__home:hover { text-decoration-thickness: 2px } } /* ───────────────────────────────────────────────────────────── Pages con template "Page with blocks" (page-blocks.php) Para legales, contacto, about, etc. Usa el mismo ACF Flexible Content que single posts. Estilos editoriales mínimos. ───────────────────────────────────────────────────────────── */ .pageBlocks { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 var(--gutter) } .pageBlocks__article { width: 100%; max-width: 100%; margin: 0 auto; padding: var(--block-vpad) 0 } .pageBlocks__content { max-width: 100% } .pageBlocks__content--classic p { margin: 0 0 1.2em; line-height: 1.5em } .pageBlocks__content--classic h2 { margin: 2em 0 0.5em } .pageBlocks__content--classic h3 { margin: 1.5em 0 0.5em } .pageBlocks__content--classic a { color: inherit; text-decoration: underline; text-underline-offset: 3px } .pageBlocks__content--classic ul, .pageBlocks__content--classic ol { margin: 0 0 1.2em 1.5em; line-height: 1.5em } @media (max-width: 660px) { .pageBlocks { padding: 0 } .pageBlocks__article { padding: var(--block-vpad) var(--gutter) } } /* ───────────────────────────────────────────────────────────── Search form [paper_search] shortcode — minimal editorial ───────────────────────────────────────────────────────────── */ .paperSearch { display: flex; align-items: stretch; width: 100%; max-width: 540px; margin: 0 auto; border-bottom: 1px solid currentColor; gap: 0.6em; } .paperSearch__label { flex: 1; display: block; margin: 0 } .paperSearch__input { width: 100%; background: transparent; border: 0; padding: 0.6em 0; font: inherit; color: inherit; outline: none; appearance: none; -webkit-appearance: none; } .paperSearch__input::placeholder { color: inherit; opacity: 0.45 } .paperSearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none } .paperSearch__submit { background: transparent; border: 0; padding: 0.6em 0; font: inherit; color: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(11px, 0.67vw, 12px); transition: opacity 0.2s ease; } @media (hover: hover) { .paperSearch__submit:hover { opacity: 0.6 } } /* Variante hero (más grande) — uso opcional: [paper_search class="paperSearch--hero"] */ .paperSearch--hero .paperSearch__input { font-size: clamp(20px, 2vw, 28px); padding: 0.4em 0 } .paperSearch--hero { max-width: 720px } /* Bloque del formulario en search.php — centrado, debajo del logo */ .searchPage__form { width: 100%; padding: 0 var(--gutter); margin-top: clamp(60px, 5.5vw, 100px); display: flex; justify-content: center; } .searchPage__form .paperSearch { width: 100%; max-width: 540px; margin: 0 } /* ========================================================================== OVERRIDES 2026-08-03 — bloque al final: gana por orden en cascada. Rollback = borrar este bloque entero. ========================================================================== */ /* 1. Taxonomía paper_edition — restaura el color de la edición sobre el override de archive. Las páginas /numero/{slug}/ son archives pero deben usar el edition_color inyectado inline, no el negro forzado. */ body.tax-paper_edition .OffPageHeader, body.tax-paper_edition .OffPageHeader.is-overlay { --header-color: var(--edition-color, #fff) !important; --ui-color: var(--edition-color, #fff) !important; } /* 2. Navegación de ediciones — inactivos más apagados */ .editionNav__label { opacity: 0.3 !important; } .editionNav__label.is-active { opacity: 1 !important; } /* 3. Home hero — se retira el velo negro del 30 % */ .home27Hero__media::after { background: rgba(0,0,0,0) !important; } /* 4. Slides de edición — velo al 20 % */ .editionSlide__media::after { background: rgba(0,0,0,0.2) !important; } /* 5. Entradilla del hero de post */ .postHero__intro--c3c4 .postHero__excerpt.body-bold { text-align: left; line-height: 1.25em; } /* 6. Título de edición en la home */ .home27Edition__title.h01 { text-transform: uppercase; max-width: 200px; } .home27Edition__title.h01:hover a { text-decoration: underline !important; }