/* * Lector de la revista (Heyzine). Tres piezas: * - .edition__hojear / .btn--sec: detalles de la tarjeta "Esta edición". * - .lector: ventana () a pantalla casi completa que carga el flipbook * solo cuando se abre. * - .lector-inline: el flipbook incrustado en la página de cada edición * (escritorio); en celular se cambia por un botón que abre la ventana. */ /* ── Tapa real de la revista ── La tapa subida como imagen destacada ya trae el logo y el número impresos y no tiene el formato vertical de la foto de relleno (la revista es casi cuadrada, 250 x 240 mm). Se muestra completa, con su propia proporción, sin recorte, sin degradado y sin los rótulos que el tema le ponía encima. */ .issue__cover--tapa{aspect-ratio:auto;background:transparent} .issue__cover--tapa img{height:auto;object-fit:contain;filter:none} .issue__cover--tapa::after{display:none} /* La etiqueta "Hojear" taparía el texto de la tapa: solo aparece al pasar el cursor o enfocar con teclado (el botón "Leer la revista" ya está debajo). */ .issue__cover--tapa .edition__hojear{opacity:0;right:50%;transform:translateX(50%);transition:opacity .25s var(--ease),background .25s var(--ease),color .25s var(--ease)} .issue__cover--tapa:hover .edition__hojear, .issue__cover--tapa:focus-visible .edition__hojear{opacity:1} /* Cabecera de "Contenidos" de la portada: se quitó el texto "14 artículos · Edición 014" (estaba escrito a mano en Elementor). Se oculta desde el tema para no tocar la portada; la fecha de la página de cada edición usa la misma clase y NO se ve afectada. */ #sumario .contents__count{display:none} /* ── Edición destacada (portada) ── "Esta edición" es una columna de Elementor junto a la lista de contenidos. Pasa a ocupar todo el ancho, encima de la lista, con la tapa grande. La columna se mide a sí misma (container query): ancha → tapa a la izquierda y datos a la derecha; angosta (celular, o navegadores sin :has) → se apila como tarjeta. */ .elementor-column.edition{container-type:inline-size;container-name:edicion;align-self:flex-start} .edicion-feature{display:grid;gap:22px} .edicion-feature__titulo{ margin:.35em 0 .55em;font-family:var(--display);font-weight:500; font-size:clamp(30px,3.4vw,52px);line-height:1.04;letter-spacing:-.02em; } .edicion-feature__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .edicion-feature__acciones .btn{flex:1 1 auto;justify-content:center;margin:0} @container edicion (min-width:760px){ .edicion-feature{ grid-template-columns:minmax(0,500px) minmax(0,1fr); gap:clamp(32px,5vw,80px);align-items:center; } .edicion-feature__acciones .btn{flex:0 0 auto;padding-inline:34px} } /* Solo en la portada: la columna de la edición sube y ocupa todo el ancho. */ .elementor-container:has(> .elementor-column.edition){flex-wrap:wrap;row-gap:clamp(32px,5vw,56px)} .elementor-container:has(> .elementor-column.edition) > .elementor-column.edition{ order:-1;width:100%;padding:clamp(24px,3.4vw,44px); } .elementor-container:has(> .elementor-column.edition) > .elementor-column.toc{width:100%} /* La lista, ahora a todo el ancho, se reparte en dos columnas. */ @media (min-width:1025px){ .elementor-container:has(> .elementor-column.edition) > .elementor-column.toc > .elementor-widget-wrap{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,5vw,72px);align-content:start; } } .edition__cover{cursor:pointer} .edition__hojear{ position:absolute;z-index:1;right:7%;bottom:5.5%; font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600; color:var(--ink);background:var(--paper);padding:7px 11px;border-radius:2px; transition:background .25s var(--ease),color .25s var(--ease); } .edition__cover:hover .edition__hojear, .edition__cover:focus-visible .edition__hojear{background:var(--rust);color:#fff} .btn--sec{margin-top:10px} /* ── Ventana del lector ── */ .lector{ width:min(1280px,96vw);height:min(920px,94vh);height:min(920px,94dvh); max-width:none;max-height:none;margin:auto;padding:0;border:0; background:var(--ink);color:var(--paper); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); } .lector[open]{display:flex;flex-direction:column} .lector::backdrop{background:rgba(14,16,19,.82)} .lector__barra{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 16px;border-bottom:1px solid var(--rule-light); } .lector__titulo{ font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .lector__cerrar{ flex:0 0 auto;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.18em; text-transform:uppercase;font-weight:600;color:var(--paper); background:transparent;border:1px solid var(--rule-light);padding:9px 14px;border-radius:2px; } /* Hello Elementor pinta de rosa (#c36) todo [type=button] enfocado o en hover. */ .lector .lector__cerrar:hover, .lector .lector__cerrar:focus{color:var(--paper);border-color:var(--paper);background:rgba(244,242,237,.08)} .lector .lector__cerrar:focus-visible{outline:2px solid var(--rust);outline-offset:2px} .lector__marco{position:relative;z-index:1;flex:1 1 auto;width:100%;min-height:0;border:0;background:transparent} /* Heyzine tarda unos segundos en abrir: mientras tanto se ve este aviso detrás del iframe. */ .lector[open]{position:fixed} .lector__barra+.lector__marco{margin-top:0} .lector::after{content:"Cargando la revista…";position:absolute;z-index:0;inset:46px 0 0;display:grid;place-items:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(244,242,237,.6)} html.lector-abierto{overflow:hidden} /* Edición sin texto de bajada: la tarjeta de datos queda sola, bajo la revista. */ .contents__grid--solo{grid-template-columns:minmax(0,360px)} /* ── Incrustado en la página de la edición ── */ .lector-inline{position:relative;margin-bottom:clamp(28px,4vw,48px)} .lector-inline::before{ content:"Cargando la revista…";position:absolute;z-index:0;top:0;left:0;right:0; height:clamp(520px,80vh,860px);display:grid;place-items:center; font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted); } .lector-inline__marco{ position:relative;z-index:1;display:block;width:100%;height:clamp(520px,80vh,860px); border:1px solid var(--rule);background:transparent; } .lector-inline{background:linear-gradient(var(--paper-2),var(--paper-2)) top/100% clamp(520px,80vh,860px) no-repeat} .lector-inline__abrir{ display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.18em; text-transform:uppercase;font-weight:600;color:var(--ink); } .lector-inline__abrir:hover{color:var(--rust)} .lector-movil{display:none} @media (max-width:700px){ /* En el celular un flipbook incrustado queda diminuto: se abre a pantalla completa. */ .lector-inline{display:none} .lector-movil{display:flex;margin-top:0;margin-bottom:28px} .lector{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100dvh} } /* ── Pie de página: contacto y privacidad ── */ .footer__legal{display:flex;flex-wrap:wrap;gap:8px 24px} .footer__legal a{color:rgba(244,242,237,.75);transition:color .2s var(--ease)} .footer__legal a:hover{color:var(--rust)} /* ── Bloque del podcast sin auspiciadores ── Sin la columna de publicidad el episodio ocuparía los 1.144 px completos y su video quedaría gigante. Se limita a un ancho de lectura cómodo, alineado a la izquierda. */ @media (min-width:1025px){ #radio .elementor-container:not(:has(> .sponsor)) > .radio__head{flex:0 1 920px;max-width:920px} } /* ── Redes sociales: más visibles y también en el pie ── En el encabezado el ícono naranjo sobre la foto oscura se perdía (y en celular el encabezado no los muestra, solo el menú ☰). Siempre en el naranjo exacto de la marca (var(--rust)); el pie —visible en todos los tamaños— lleva su propia fila. */ .header__actions .social a{width:38px;height:38px} .header__actions .social svg{width:20px;height:20px} .social--pie{margin:18px 0 0;gap:8px} .social--pie a{width:42px;height:42px;border:1px solid var(--rule-light);color:var(--rust)} .social--pie svg{width:20px;height:20px} .social--pie a:hover{background:var(--rust);border-color:var(--rust);color:#fff} /* ── Redes en el encabezado también en celular ── Antes se escondían dentro del menú ☰ para que cupiera el botón del menú. Ahora se quedan a la vista: en pantallas angostas se oculta la palabra «PLATAFORMA» del logo y, bajo 440 px, el botón «Anunciar» (sigue disponible dentro del menú). */ @media (max-width:820px){ .header__actions .social{display:flex} } @media (max-width:560px){ .header__actions{gap:6px} .header__actions .social{margin-right:0;gap:0} .header__actions .social a{width:36px;height:36px} .logo__sub{display:none} /* Anunciar más compacto para que quepa junto a las redes y al menú. */ .header__actions > .btn--solid{padding:9px 13px} } /* Solo en pantallas muy angostas (≤340 px) el botón «Anunciar» cede su lugar; sigue en el menú ☰. */ @media (max-width:340px){ .header__actions > .btn--solid{display:none} } /* Con el menú de texto oculto (≤1080 px) nada empuja los botones del encabezado a la derecha. */ @media (max-width:1080px){ .header__actions{margin-left:auto} } /* ── Botones sin el fucsia del tema padre ── Hello Elementor pinta de #c36 (fucsia) cualquier