/* ═══════════════════════════════════════════════════════════════════ FP 1.25.0 · PLAYFAIR DISPLAY, SERVIDA POR EL THEME ═══════════════════════════════════════════════════════════════════ El archivo vive en assets/fonts. Sin petición a Google: no depende de que responda, no lo puede bloquear una extensión, y no manda la IP del lector a un tercero —que es además lo que pide el RGPD—. `font-display: swap` a propósito: primero se lee el titular con el serif del sistema y luego cambia. Es preferible a que la palabra AFRICA no exista durante medio segundo. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/playfair-display-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } /* ════════════════════════════════════════════════════════════════════ FINANCIAL PORTS · PIEL · v2.270.0 ════════════════════════════════════════════════════════════════════ Se carga DESPUÉS del resto de hojas y SOLO cuando el perfil del sitio es financialports. InfoPuertos no la descarga nunca. Cómo funciona ───────────── El azul de marca (#114F6E) dejó de estar escrito a fuego: sus 508 apariciones son ahora var(--et-brand, #114F6E). Sin esta hoja el respaldo devuelve el azul de siempre — por eso InfoPuertos no puede cambiar de color por accidente. Aquí redefinimos el token y la web entera gira a la paleta de FP de una sola vez. La paleta · NEGRO Y ROJO #C1272D, los colores de FP ─────────────────────────────────────────────────── Los dos colores de la marca mandan en todo. El salmón es el papel sobre el que se imprimen, como en el Financial Times: no compite, sostiene. El negro del TEXTO se calienta un punto (#1A1614) porque un negro puro sobre salmón vibra y cansa la vista en un artículo largo. El negro de las BANDAS sí es negro de verdad (#0D0D0D): ahí es una superficie, no letra que haya que leer seguido. El rojo se reserva para antetítulos, enlaces activos y datos. Es deliberado: un rojo que aparece en todas partes deja de señalar nada. ════════════════════════════════════════════════════════════════════ */ :root { --et-brand: #C1272D; /* pisa el azul en las 508 apariciones */ /* FP 1.2.0 · EL SALMÓN DE VERDAD. ───────────────────────────── Antes solo se pintaban seis contenedores y la web se veía BLANCA: el theme tenía 318 fondos blancos repartidos por sus hojas —tarjetas, secciones, cajas de datos, el pie, el panel del lector— y todos ellos tapaban el salmón por encima. Ahora esos 318 son var(--et-paper, #fff): con el respaldo puesto InfoPuertos sigue blanco exactamente igual, y aquí basta redefinir el token para que TODA la superficie de FP sea salmón de una vez. Es el mismo truco que con el azul, y por la misma razón: perseguir selectores uno a uno no acaba nunca. */ --et-paper: #FFF1E5; /* FP 1.6.0 · LOS FILETES, EN ROJO CLARO. ────────────────────────────────────── Las líneas que separan noticias y bloques eran los grises fríos del theme (#E4E9EE, #E5E3DD…). Sobre salmón un gris azulado se ve sucio, y además no dice nada de la marca. Se han tokenizado los 74 filetes del theme igual que el azul y los fondos: con el respaldo puesto InfoPuertos no cambia, y aquí basta redefinir el token. Es el rojo de FP muy rebajado — tiene que ORGANIZAR la página, no llamar la atención: un filete que se nota deja de ser un filete y pasa a ser un elemento. */ --et-rule: #EBC9C9; --fp-paper: #FFF1E5; /* el salmón · fondo de todo */ --fp-paper-2: #F7E4D3; /* salmón hundido · cajas y huecos */ --fp-ink: #1A1614; /* negro cálido · titulares y texto */ --fp-ink-2: #4A403A; /* texto secundario */ --fp-muted: #6E6058; /* firmas, horas, pies */ --fp-claret: #C1272D; /* el acento */ --fp-rule: #EBC9C9; /* filete · el rojo de FP rebajado */ --fp-rule-strong: #1A1614; /* filete de cabecera de sección */ --fp-deep: #0D0D0D; /* negro de marca · bandas y pie */ --fp-red-soft: #E05A5A; /* el rojo aclarado, para fondo negro */ --fp-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif; } /* ─── El papel ───────────────────────────────────────────────────── Todo lo que era blanco pasa a salmón. Se listan los contenedores reales del theme en vez de poner background:transparent a todo, que arrastraría también a los bloques que SÍ deben ir en blanco (fichas de datos, tarjetas de anuncio). */ html, body, .et-pcv2-page, .et-m, .site, .et-article-v2 { background: var(--fp-paper); color: var(--fp-ink); } /* ─── Tipografía · el serif es la marca ──────────────────────────── Titulares en serif; firmas, antetítulos y datos siguen en sans, que es lo que da el contraste de periódico económico. */ .et-pcv2-hero__title, .et-pcv2-hero__title--xl, .et-pcv2__card-title, .et-msec__card-title, .et-msec__row-title, .et-mhero__title, .et-m-suc__htitle, .et-m-suc__stitle, .et-m-oph__title, .et-pcv2-oph__title, .et-article-v2__title, .et-section-head__title, .et-msec__head-title, .et-msec__sub-head, h1.entry-title, .et-pc-wordmark__h { font-family: var(--fp-serif); font-weight: 400; letter-spacing: -.015em; color: var(--fp-ink); } /* El titular no necesita 800 cuando es serif: el peso lo da el cuerpo. Se mantiene el TAMAÑO que ya afinamos en móvil — solo cambia el trazo. */ .et-msec__card-title, .et-mhero__title, .et-m-suc__htitle, .et-m-oph__title { font-weight: 600; } /* ─── Antetítulos y firmas ───────────────────────────────────────── El kicker es lo único que va en rojo oscuro dentro del titular. */ .et-pcv2-hero__kicker, .et-mhero__kicker, .et-msec .et-pcv2-hero__kicker, .et-m-suc .et-pcv2-hero__kicker, .et-m-oph .et-pcv2-hero__kicker { color: var(--fp-claret); font-family: var(--fp-serif); font-weight: 700; } .et-pcv2-hero__byline-author, .et-m-suc .et-pcv2-hero__byline-author, .et-m-oph .et-pcv2-hero__byline-author, .et-msec__meta, .et-pcv2-hero__meta { color: var(--fp-muted); } /* ─── Filetes ────────────────────────────────────────────────────── El gris frío del theme se sustituye por el filete cálido: un #E5E3DD sobre salmón se ve sucio. */ .et-msec, .et-msec__row, .et-msec__card, .et-m-suc__sub, .et-mhero__hairline, .et-pcv2__col, .et-pcv2-hero__col { border-color: var(--fp-rule); } .et-mhero__hairline, hr { background: var(--fp-rule); border-color: var(--fp-rule); } /* Cabecera de sección: filete negro grueso, como en la maqueta. */ .et-section-head, .et-msec__head, .et-msec__sub-head, .et-m-section-head { border-color: var(--fp-rule-strong); } .et-msec__sub-head::before { background: var(--fp-claret); } /* ─── Huecos de imagen ───────────────────────────────────────────── Mientras carga la foto se ve salmón hundido, no gris. */ .et-msec__media, .et-mhero__media, .et-pcv2-hero__photo, .et-m-suc__photo, .et-pcv2-oph__tphoto { background-color: var(--fp-paper-2); } /* ─── Cabecera y navegación ────────────────────────────────────────*/ .et-pc-masthead, .et-pc-nav, .et-m__hdr, .et-m-subnav { background: var(--fp-paper); border-color: var(--fp-rule); } .et-pc-masthead { border-bottom: 1px solid var(--fp-ink); } .et-pc-nav { border-bottom: 1px solid var(--fp-rule); } .et-pc-nav__link { color: var(--fp-ink); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .et-pc-nav__link:hover, .et-pc-nav__link.is-active { color: var(--fp-claret); } .et-pc-wordmark__pre { color: var(--fp-claret); } .et-pc-wordmark__main, .et-pc-wordmark__h { color: var(--fp-ink); } .et-pc-wordmark__tagline { color: var(--fp-muted); font-family: var(--fp-serif); font-style: italic; } /* ─── Enlaces ──────────────────────────────────────────────────────*/ .et-pcv2-page a, .et-m a { color: inherit; } .et-pcv2-page a:hover, .et-m a:hover { color: var(--fp-claret); } /* ─── Bandas en negativo · PCP y rankings ──────────────────────────*/ .et-m-pcpl__ticker, .et-pcv2-pcpl, .et-m-pcpl { background: transparent; } .et-m-pcpl__rank, .et-pcv2-pcpl__rank { background: var(--fp-deep); color: var(--fp-paper); } .et-m-pcpl__rank-h, .et-m-pcpl__rank-port, .et-m-pcpl__rank-val { color: var(--fp-paper); font-family: var(--fp-serif); } /* ─── Pie ──────────────────────────────────────────────────────────*/ .et-footer, .et-footer-premium, footer.site-footer { background: var(--fp-deep); color: var(--fp-paper); border-top: 0; } .et-footer a, .et-footer-premium a { color: var(--fp-paper); } /* Sobre el negro del pie, el rojo de marca no tiene contraste suficiente para un enlace: se usa su versión aclarada, que sigue siendo el mismo color y sí se lee. */ .et-footer a:hover, .et-footer-premium a:hover, .et-pcv2-footer a:hover { color: var(--fp-red-soft); } /* El pie de PC comparte el negro de marca. */ .et-pcv2-footer { background: var(--fp-deep); color: var(--fp-paper); } /* El logotipo del pie, a un tamaño que se lea sin dominar. */ .et-pcv2-footer__logo { max-height: 42px; width: auto; } /* ─── La columna de publicidad de Opinión ────────────────────────── FP 1.3.0 · Sin filete a la izquierda —era el que separaba «El debate» de la columna de al lado, y con un anuncio dentro parecía un borde de caja— y a TODA la altura de la fila: el banner llega hasta abajo en vez de quedarse colgando con un hueco debajo. */ /* FP 1.4.0 · LA CAUSA DE LA LÍNEA, POR FIN. Al cambiar «El debate» por publicidad le puse a la columna la clase `--ad`, pero la rejilla de tres columnas solo tiene reglas para `--proa`, `--op` y `--debate`. Mi columna se quedó SIN posición en la rejilla y sin el `border-left: 0` que las otras tres sí llevan, así que heredaba el filete de la regla genérica de columnas. Por eso seguía saliendo por más veces que lo quitara: estaba apagando un borde en un selector que no era el que lo pintaba. Aquí se le da a `--ad` exactamente el sitio que tenía `--debate`. */ .et-pcv2-oph__grid--v3 .et-pcv2-oph__col--ad { grid-column: 3; grid-row: 1; padding: 0 0 0 32px; background: none; } /* Y el filete fuera en TODA la rejilla, venga de donde venga. */ .et-pcv2-oph__grid--v3 .et-pcv2-oph__col, .et-pcv2-oph__grid--v3 .et-pcv2-oph__col--ad, .et-pcv2-oph__col--ad { border-left: 0; border-right: 0; } .et-pcv2-oph__col--ad { padding-left: 0; display: flex; flex-direction: column; align-self: stretch; } .et-pcv2-oph__col--ad > * { flex: 1 1 auto; display: flex; flex-direction: column; } /* El creativo estira hasta el fondo de la columna. */ .et-pcv2-oph__col--ad .et-ad, .et-pcv2-oph__col--ad .et-natad, .et-pcv2-oph__col--ad .et-natad2 { height: 100%; min-height: 100%; } .et-pcv2-oph__col--ad .et-natad2__media { flex: 1 1 auto; min-height: 260px; } /* ─── World Port Ranking · /port-ranking/ ────────────────────────── FP 1.11.0 · La página reutiliza el markup del ranking de CAMAL (.rkp__row con barra), que ya trae su CSS de port-stats.css. Aquí solo se cambian los colores: tipografía en NEGRO donde era gris y filetes y barras en el rojo de FP. */ .et-rank-main { background: var(--fp-paper); } .rkp--fp { max-width: 1000px; margin: 0 auto; padding: 44px 20px 80px; color: var(--fp-ink); } .rkp--fp .rkp__head { border-bottom: 2px solid var(--fp-ink); padding-bottom: 14px; margin-bottom: 22px; } .rkp--fp .rkp__title { font-family: var(--fp-serif); font-weight: 800; font-size: clamp(30px,5vw,46px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 8px; color: var(--fp-ink); } .rkp--fp .rkp__sub { margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--fp-claret); } /* Cabecera de columnas · negra, no gris. */ .rkp--fp .rkp__lh { color: var(--fp-ink); border-bottom: 1px solid var(--fp-ink); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: 11px; } /* Filas · filete rojo rebajado en vez del gris. */ .rkp--fp .rkp__row { border-bottom: 1px solid var(--fp-rule); color: var(--fp-ink); } .rkp--fp .rkp__nm { color: var(--fp-ink); font-weight: 700; } .rkp--fp .rkp__vl { color: var(--fp-ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* El país ocupa el hueco del interanual: negro y sin color de signo. */ .rkp--fp .rkp__dl { color: var(--fp-ink); font-weight: 400; } /* El puesto y la barra, en el rojo de marca. */ .rkp--fp .rkp__rk { color: var(--fp-claret); font-family: var(--fp-serif); } .rkp--fp .rkp__bar { background: var(--fp-paper-2); } .rkp--fp .rkp__bar i { background: var(--fp-claret); transition: width .6s cubic-bezier(.33,.9,.25,1); } /* Podio: las tres primeras con la barra a plena intensidad y el puesto más grande. Es lo que hace que un ranking se lea de un vistazo en vez de tener que buscarlo. */ .rkp--fp .rkp__row.top .rkp__rk { font-size: 1.35em; } .rkp--fp .rkp__row.t1 .rkp__bar i { background: var(--fp-claret); } .rkp--fp .rkp__row.t2 .rkp__bar i, .rkp--fp .rkp__row.t3 .rkp__bar i { background: #C64A4A; } /* ─── Alineación de las barras ───────────────────────────────────── Las barras salían escalonadas. El motivo: en el ranking original CADA FILA es su propia rejilla y las dos últimas columnas van en `auto`, así que cada fila se mide sola — un país largo o una cifra larga ensanchan SU columna y empujan la barra hacia la izquierda solo en esa fila. Ahí no hay nada que alinear porque no comparten rejilla. La solución es quitarle a esas columnas la libertad de medirse: con ancho fijo todas las filas parten y acaban en el mismo sitio, y la cabecera cuadra con ellas aunque ponga «Index» y «Country». */ .rkp--fp .rkp__lh, .rkp--fp .rkp__row { /* FP 1.71.3 · el display:grid va AQUÍ, no fiado a port-stats.css: esa hoja no carga en las páginas nuevas y las filas salían como texto corrido apelmazado (captura del CEO en /port-ranking/). */ display: grid; align-items: center; grid-template-columns: 38px minmax(90px, 1fr) minmax(120px, 1.6fr) 78px 132px; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--fp-rule); font-variant-numeric: tabular-nums; } /* Con ancho fijo hay que decir qué pasa si el texto no cabe: se corta con puntos suspensivos en vez de reventar la columna. */ /* El rótulo del puesto, centrado como el número que va debajo. */ .rkp--fp .rkp__lh-r { text-align: center; } .rkp--fp .rkp__vl, .rkp--fp .rkp__dl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La línea de medición: fondo del carril algo más marcado para que se vea dónde acaba la escala, no solo dónde llega el puerto. */ .rkp--fp .rkp__bar { height: 4px; background: #F3DCDC; border-radius: 0; } .rkp--fp .rkp__bar i { border-radius: 0; } /* El atributo hidden NO basta aquí. `[hidden]{display:none}` es una regla del NAVEGADOR, y `.rkp__row{display:grid}` del theme es de autor: gana el grid y las filas de las páginas 2 en adelante se seguían pintando — salían los 900 puertos de golpe con el paginador encima. Hay que decirlo en una regla de autor. */ .rkp--fp .rkp__row[hidden] { display: none !important; } /* ─── Paginación ───────────────────────────────────────────────── */ .rkp__pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; } .rkp__pager button { appearance: none; cursor: pointer; background: transparent; border: 1px solid var(--fp-rule); color: var(--fp-ink); font: 700 12px/1 var(--sans, inherit); letter-spacing: .04em; padding: 9px 12px; font-variant-numeric: tabular-nums; } .rkp__pager button { min-width: 38px; text-align: center; } .rkp__pager button:hover:not([disabled]) { border-color: var(--fp-claret); color: var(--fp-claret); } .rkp__pager button[disabled] { opacity: .35; cursor: default; } .rkp__gap { align-self: center; padding: 0 2px; color: var(--fp-muted); font-weight: 700; font-size: 12px; } .rkp__pager button.on { background: var(--fp-claret); border-color: var(--fp-claret); color: var(--fp-paper); } .rkp__source, .rkp__empty { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--fp-ink); } .rkp__empty { padding: 40px 0; text-align: center; font-family: var(--fp-serif); font-size: 18px; } @media (max-width: 640px) { .rkp--fp { padding: 26px 14px 60px; } /* En móvil la barra sobra: se queda puesto · puerto · cifra. */ .rkp--fp .rkp__bar, .rkp--fp .rkp__lh-b { display: none; } .rkp--fp .rkp__lh, .rkp--fp .rkp__row { grid-template-columns: 30px 1fr 66px 88px; gap: 10px; } } /* ─── Suplemento FP Plus ─────────────────────────────────────────── La barra del suplemento va en negro con el rojo de marca, no en el azul heredado de IP Plus. */ .ipp-bar { background: var(--fp-deep); border-color: var(--fp-claret); } .ipp-bar__logo { max-height: 34px; width: auto; } /* ─── Publicidad ─────────────────────────────────────────────────── El rótulo de publicidad se mantiene visible pero discreto: es una obligación de transparencia, no un elemento de diseño. */ .et-ad__label, .et-natad__label { color: var(--fp-muted); letter-spacing: .14em; } /* ─── Esquinas ───────────────────────────────────────────────────── Un periódico económico no lleva esquinas redondeadas. Se anulan las del theme en los contenedores de contenido — se dejan las de avatares y botones circulares, que sí las necesitan. */ .et-msec__card, .et-msec__media, .et-mhero__media, .et-msec__row, .et-pcv2-hero__photo, .et-m-suc__photo, .et-ad, .et-natad { border-radius: 0; } /* ═══════════════════════════════════════════════════════════════════ FP 1.13.0 · FIRMA, FILETES Y SELLO ═══════════════════════════════════════════════════════════════════ */ /* ─── La firma ───────────────────────────────────────────────────── La plaza (el «custom») en rojo y el autor en negro. Es el reparto clásico de un diario económico: la plaza señala, el nombre informa. Estas clases las emiten PC y móvil por igual, así que una sola regla vale para toda la casa. */ .et-pcv2-hero__byline-custom { color: var(--fp-claret); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .et-pcv2-hero__byline-author, .et-m-suc .et-pcv2-hero__byline-author, .et-m-oph .et-pcv2-hero__byline-author { color: var(--fp-ink); font-weight: 700; } /* La fecha y el cargo sí se quedan atrás: si todo pesa, nada pesa. */ .et-pcv2-hero__byline-date, .et-pcv2-hero__byline-role { color: var(--fp-muted); } /* ─── Los filetes que faltaban ───────────────────────────────────── El theme no pinta sus separadores con el hex a la vista: los reparte desde variables propias de cada hoja (--pcv2-line, --msec-hair, --et-line, --obs-line, --ip-hair…). Por eso seguía saliendo gris por todas partes aunque los bordes sueltos ya estuvieran cambiados: se apagaban uno a uno mientras la variable seguía repartiendo. Esas 22 variables ya son var(--et-rule, …) en su declaración, así que con el token redefinido arriba cambian de golpe todas las líneas que cuelgan de ellas —horizontales y verticales—. Aquí solo quedan los casos que no pasan por borde. */ .et-pcv2-page hr, .et-m hr { background: var(--et-rule); border: 0; height: 1px; } /* Los puntitos bajo los títulos de sección: mismo rojo rebajado. */ .et-pcv2-page [style*="dotted"], .et-pcv2-page .is-dotted, .et-m .is-dotted { border-color: var(--et-rule) !important; } /* ─── El sello sobre las fotos ───────────────────────────────────── Va como ::after del contenedor de la foto, no como dentro de cada plantilla: las tarjetas del home salen de más de treinta parciales distintos y perseguirlas una a una es garantía de que alguna se quede sin sello. Los contenedores son con la foto de fondo, así que admiten pseudo-elemento sin tocar el HTML. */ .et-pcv2-page [class*="photo"], .et-pcv2-page [class*="__media"], .et-pcv2-page [class*="thumb"], .et-m [class*="photo"], .et-m [class*="__media"], .et-m [class*="thumb"] { position: relative; } .et-pcv2-page [class*="photo"]::after, .et-pcv2-page [class*="__media"]::after, .et-pcv2-page [class*="thumb"]::after, .et-m [class*="photo"]::after, .et-m [class*="__media"]::after, .et-m [class*="thumb"]::after { content: ""; position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; background: url('https://diariodemarruecos.com/wp-content/uploads/2026/09/camal-34-e1788363851872.png') center / contain no-repeat; /* El icono va con SU color, sin tocar. Lo que cambia es la sombra: era negra y ensuciaba la foto; ahora es un halo CLARO, que hace el mismo trabajo —despegarlo del fondo— sin manchar. */ filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(255,255,255,.7)); pointer-events: none; z-index: 3; } /* En las miniaturas, más pequeño: un sello de 38px sobre una foto de 80 tapa la noticia en vez de firmarla. */ .et-pcv2-page [class*="thumb"]::after, .et-pcv2-page [class*="mini"]::after, .et-m [class*="thumb"]::after { width: 24px; height: 24px; top: 5px; right: 5px; } /* Donde NO va: publicidad, logos de cabecera de bloque, retratos de firma y la caja de luz. Ahí el sello sería mentira o estorbo. */ .et-ad [class*="photo"]::after, .et-ad [class*="__media"]::after, .et-ad [class*="thumb"]::after, [class*="ad-img"]::after, [class*="brand-img"]::after, [class*="brand-photo"]::after, .et-pcv2-firma__img::after, .et-pcv2-lightbox__img::after, [class*="author-photo"]::after, /* Los nativos de publicidad y el boletín llevan SU imagen: el sello del periódico ahí no pinta nada, y encima el selector genérico lo colaba porque `et-natad2__media` contiene la palabra «media». */ .et-natad2__media::after, .et-natad__media::after, /* FP 1.66.5 · las tarjetas del Centro de Boletines llevan su LOGO de boletín, no una foto de noticia: el ancla ahí sobra (orden del CEO). */ .et-pcv2-news__media::after, [class*="avatar"]::after { content: none !important; } @media (max-width: 640px) { .et-m [class*="photo"]::after, .et-m [class*="__media"]::after { width: 30px; height: 30px; top: 6px; right: 6px; } } /* La foto de Conflicts (.et-pcv2-oph__tphoto) se quedó sin sello: la metí en la lista de exclusiones creyendo que era el retrato de una firma de opinión, y es la foto de la noticia. Va con las demás. */ .et-pcv2-oph__tphoto { position: relative; } .et-pcv2-oph__tphoto::after { content: ""; position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; background: url('https://diariodemarruecos.com/wp-content/uploads/2026/09/camal-34-e1788363851872.png') center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(255,255,255,.7)); pointer-events: none; z-index: 3; } /* ═══════════════════════════════════════════════════════════════════ FP 1.16.0 · ECONOMY & MARKETS ═══════════════════════════════════════════════════════════════════ Tres columnas al modo del recorte del CEO: una ancha con foto grande que sostiene el bloque, una media que alterna sin-foto/con-foto para que la página no se lea como una rejilla, y un carril de datos. EL ANCHO ──────── Salía más estrecha que el resto del home porque le puse max-width y padding propios. El bloque de Ports | Shipyards NO lleva ninguno de los dos: hereda el contenedor de la portada y se limita a separarse con margen y filete. Al ponerle los míos, mi padding se sumaba al del contenedor y la sección se metía hacia dentro. Aquí se hace lo mismo que hace Ports y encaja sola. LA TIPOGRAFÍA ───────────── La misma que Ports | Shipyards: Inter 800. El serif se reserva para el hero y las cabeceras — si cada sección usa su propia letra, la portada deja de parecer un periódico y pasa a parecer una plantilla. La pieza de apertura conserva su tamaño grande, que es lo que le da el peso de entrada al bloque. */ .fp-eco { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--fp-rule); background: var(--fp-paper); --fp-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .fp-eco__head { border-bottom: 2px solid var(--fp-claret); padding-bottom: 9px; margin-bottom: 20px; } /* FP 2.4.1 · El rótulo y la puerta a Stock Markets en la MISMA línea: título a la izquierda, enlace en versalitas a la derecha, con la flecha que se desliza al pasar el ratón. */ .fp-eco__head--con-enlace { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .fp-eco__head-link { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--fp-claret); text-decoration: none; white-space: nowrap; } .fp-eco__head-link span { display: inline-block; transition: transform .15s ease; } .fp-eco__head-link:hover { color: var(--fp-ink); } .fp-eco__head-link:hover span { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .fp-eco__head-link span { transition: none; } } /* FP 2.0.2 · Un punto mas de negrita en TODA la seccion Economy, por orden del CEO: los rotulos (Economy & Markets, World Economy, Markets, See all, Container lines) y los titulares de las seis noticias pasan de 800 a 900. Inter trae el 900 cargado en el de fuentes; con una familia de sistema este cambio no se veria. */ .fp-eco__head-t { margin: 0; font-family: var(--fp-serif); font-weight: 900; font-size: 24px; letter-spacing: -.01em; color: var(--fp-claret); } .fp-eco__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 250px; } .fp-eco__col { min-width: 0; } .fp-eco__col--a { padding-right: 30px; } .fp-eco__col--b { padding: 0 26px; border-left: 1px solid var(--fp-rule); border-right: 1px solid var(--fp-rule); } .fp-eco__col--c { padding-left: 26px; } /* ─── Columna 1 · la pieza de apertura ─────────────────────────── */ .fp-eco__lead-photo { display: block; width: 100%; aspect-ratio: 16 / 10; background: var(--fp-paper-2) center / cover no-repeat; } .fp-eco__cap { margin: 7px 0 0; text-align: right; font-family: var(--fp-sans); font-size: 11.5px; line-height: 1.4; color: var(--fp-muted); } /* Conserva el tamaño grande —es la entrada del bloque— pero con la letra y el grosor de Ports. */ .fp-eco__lead-t { margin: 15px 0 0; font-family: var(--fp-sans); font-weight: 900; font-size: clamp(24px, 2.2vw, 29px); line-height: 1.15; letter-spacing: -.5px; text-align: center; text-wrap: balance; } .fp-eco__lead-t a { color: var(--fp-ink); text-decoration: none; } .fp-eco__lead-t a:hover { color: var(--fp-claret); } /* La entradilla y la firma acompañan al titular: centradas también. Una firma alineada a la izquierda bajo un titular centrado deja el bloque descolgado por un lado. */ .fp-eco__lead .fp-eco__dek { text-align: center; } .fp-eco__lead .et-pcv2-hero__byline { justify-content: center; text-align: center; } .fp-eco__sub { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--fp-rule); } /* ─── Columna 2 · rótulo + las dos piezas ──────────────────────── */ .fp-eco__col-h { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--fp-rule); font-family: var(--fp-sans); font-size: 15px; font-weight: 900; letter-spacing: .02em; color: var(--fp-claret); } .fp-eco__it + .fp-eco__it { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--fp-rule); } .fp-eco__it-photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 13px; background: var(--fp-paper-2) center / cover no-repeat; } /* El resto de titulares, calcados del b1 de Ports. */ .fp-eco__sub-t, .fp-eco__it-t { margin: 0; font-family: var(--fp-sans); font-weight: 900; font-size: 19px; line-height: 1.22; letter-spacing: -.3px; } .fp-eco__sub-t a, .fp-eco__it-t a { color: var(--fp-ink); text-decoration: none; } .fp-eco__sub-t a:hover, .fp-eco__it-t a:hover { color: var(--fp-claret); } .fp-eco__dek { margin: 9px 0 0; font-family: var(--fp-sans); font-size: 14.5px; line-height: 1.46; color: var(--fp-ink-2); } .fp-eco .et-pcv2-hero__byline { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 10px 0 0; font-family: var(--fp-sans); font-size: 12px; } /* ─── Columna 3 · el carril de datos ─────────────────────────────── Compacto a propósito: son nueve marcadores y con la altura anterior el carril estiraba la sección medio metro por debajo de las noticias. Rótulo pequeño, fila de dos líneas y cifra en sans tabular — que es además como se leen los números en un panel de bolsa. */ .fp-eco__rail { position: sticky; top: 84px; } /* Rojo y con cuerpo: son los dos rótulos que ordenan el carril, y a 9,5px se perdían contra los nombres de los marcadores. */ .fp-eco__rail-h { margin: 0 0 4px; padding-bottom: 7px; border-bottom: 1px solid var(--fp-claret); font-family: var(--fp-sans); font-size: 13px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--fp-claret); } .fp-eco__rail-h--2 { margin-top: 16px; } .fp-eco__q { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1px 10px; padding: 8px 0; border-bottom: 1px solid var(--fp-rule); } .fp-eco__q-lb { font-family: var(--fp-sans); font-size: 12px; font-weight: 700; color: var(--fp-ink); } /* La cifra y la referencia van a la izquierda, alineadas con el nombre del marcador: en una columna estrecha, alinear a la derecha rompe el eje de lectura y obliga a saltar de un lado a otro en cada fila. La variación se queda a la derecha porque es lo único que se escanea en vertical. */ .fp-eco__q-vl { grid-column: 1 / -1; font-family: var(--fp-sans); font-size: 14px; font-weight: 800; text-align: left; color: var(--fp-ink); font-variant-numeric: tabular-nums; } .fp-eco__q-un { font-size: 10.5px; font-weight: 600; color: var(--fp-muted); } /* La referencia y la variación, en la segunda línea: la referencia dice QUÉ es y la variación CÓMO va, y juntas ocupan una sola línea. */ .fp-eco__q-nt { grid-column: 1 / -1; font-family: var(--fp-sans); font-size: 9.5px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--fp-muted); } .fp-eco__q-dl { font-family: var(--fp-sans); font-size: 11px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; } /* El color y la flecha van juntos por accesibilidad: en un panel de bolsa el verde y el rojo son la única señal, y quien no los distingue se queda sin dato. La flecha lo dice también. */ .fp-eco__q-dl--up { color: #0A7B4B; } .fp-eco__q-dl--down { color: var(--fp-claret); } .fp-eco__q-dl--flat { color: var(--fp-muted); } .fp-eco__rail-f { margin: 12px 0 0; font-family: var(--fp-sans); font-size: 10px; line-height: 1.45; color: var(--fp-muted); } /* ─── Tableta y móvil ──────────────────────────────────────────── */ @media (max-width: 1080px) { .fp-eco__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .fp-eco__col--b { border-right: 0; padding-right: 0; } .fp-eco__col--c { grid-column: 1 / -1; margin-top: 22px; padding: 18px 0 0; border-top: 1px solid var(--fp-rule); } .fp-eco__rail { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 26px; } .fp-eco__rail-h, .fp-eco__rail-f { grid-column: 1 / -1; } } @media (max-width: 720px) { .fp-eco { margin-top: 30px; padding-top: 24px; } .fp-eco__grid { grid-template-columns: 1fr; } .fp-eco__col--a { padding-right: 0; } .fp-eco__col--b { margin-top: 20px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--fp-rule); } .fp-eco__lead-t { text-align: left; font-size: 24px; } .fp-eco__lead .fp-eco__dek { text-align: left; } .fp-eco__lead .et-pcv2-hero__byline { justify-content: flex-start; text-align: left; } .fp-eco__cap { text-align: left; } } /* ═══════════════════════════════════════════════════════════════════ FP 1.19.0 · EL BOLETÍN ═══════════════════════════════════════════════════════════════════ NO es una maqueta nueva: es el nativo de Boluda (`.et-natad2`) con un formulario donde va el botón. Todo lo que se hereda —la rejilla de 132px, el titular, la fila de abajo, la píldora negra— no se repite aquí; solo se escribe lo que cambia. Así, si mañana se retoca el nativo, el boletín se retoca con él. ALTURA ────── La tarjeta no puede ser más alta que la de Boluda, y ahí manda la columna de la foto: 132px. Todo lo que se añade —el formulario, la casilla, el aviso— tiene que caber dentro de eso, y por eso los textos son cortos y la casilla va en una línea de 10,5px. El aviso nace vacío y no ocupa nada hasta que hay algo que decir; para entonces el lector ya ha pulsado y que crezca 14px da igual. */ /* La zona: ancho de la columna A y filete que la separa de la última noticia — el mismo tratamiento que la publicidad de pie de columna. */ .fp-nlzone { width: 100%; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--fp-rule); } .et-natad2--nl { grid-template-columns: 172px 1fr; /* SIN suelo de altura a propósito. Llenar de arriba abajo y verse entera son incompatibles mientras la caja y la imagen tengan proporciones distintas: con `cover` se recorta y con `contain` sobra hueco. La única salida es que la caja adopte la proporción de la imagen, así que la altura de la tarjeta la marca ella. */ /* Papel salmón y filete rojo, que esto es de la casa, no de un anunciante. */ background: var(--fp-paper-2); border-color: var(--fp-rule); border-radius: 0; } .et-natad2--nl:hover { box-shadow: none; border-color: var(--fp-rule); } .et-natad2--nl:hover .et-natad2__title { text-decoration: none; } .et-natad2--nl .et-natad2__mid { gap: 3px; padding: 16px 16px; } .et-natad2--nl .et-natad2__brand { color: var(--fp-claret); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .et-natad2--nl .et-natad2__title { color: var(--fp-ink); } /* Las dos mitades —textos y formulario— centradas entre sí, y la fila entera centrada dentro de la tarjeta: el mismo aire arriba y abajo contra la imagen de la izquierda. */ .et-natad2--nl .et-natad2__mid { justify-content: center; } .et-natad2--nl .et-natad2__row { align-items: center; gap: 18px; } /* La columna de textos: antetítulo, titular y entradilla pegados, con su interlínea y nada más. */ .fp-nl__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* ─── El bloque de marca, donde el nativo lleva la foto ───────────── */ /* El hueco de la foto lleva la imagen del boletín, en negro de marca por detrás: si el PNG tiene transparencia, se apoya en el negro en vez de dejar ver el salmón. `contain` y no `cover` porque es un logotipo — recortarlo por los bordes sería descabezarlo. */ /* ─── La imagen ──────────────────────────────────────────────────── Sin recuadro negro y a todo el ancho de su columna. Con `background-image` había que elegir entre dos males: `cover` la recortaba por los lados y `contain` la encogía dejando el marco negro alrededor. Como no hay que elegir: ocupa el ancho de la columna, se ve entera y la caja se adapta a su proporción. (Y de paso desaparece el problema de especificidad con el atajo `background:` de pc-v2.css, que era lo que ignoraba el `contain`.) */ .et-natad2--nl .fp-nl__media { display: block; align-self: stretch; background: none; padding: 0; line-height: 0; } /* A su proporción natural y a todo el ancho de la columna. La tarjeta crece o encoge con ella, así que no hay recorte NI hueco: los bordes de la imagen SON los bordes de la caja. El precio es que la altura del banner depende del archivo: si algún día se cambia por uno mucho más alto, la tarjeta se estira. Se avisa aquí para que no sorprenda. */ .et-natad2--nl .fp-nl__img { display: block; width: 100%; height: auto; } .fp-nl__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; } .fp-nl__form { display: flex; align-items: center; gap: 6px; } /* La etiqueta existe para los lectores de pantalla; en pantalla basta el placeholder. */ .fp-nl__lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .fp-nl__input { width: 200px; padding: 8px 11px; border: 1px solid #c6cacd; border-radius: 999px; background: var(--fp-paper); font: 400 12.5px/1 inherit; color: var(--fp-ink); } .fp-nl__input::placeholder { color: var(--fp-muted); } .fp-nl__input:focus { outline: 2px solid var(--fp-claret); outline-offset: 1px; } .et-natad2--nl .fp-nl__btn { border: 0; cursor: pointer; background: var(--fp-claret); font-family: inherit; font-weight: 800; letter-spacing: .04em; } .et-natad2--nl .fp-nl__btn:hover:not(:disabled) { background: var(--fp-deep); } .et-natad2--nl .fp-nl__btn:disabled { opacity: .55; cursor: default; } /* ─── El consentimiento ──────────────────────────────────────────── Sin marcar y legible. Una casilla premarcada no es consentimiento, y en un medio europeo eso se paga. */ .fp-nl__consent { display: flex; align-items: center; gap: 7px; font-size: 10.5px; line-height: 1.3; color: var(--fp-muted); cursor: pointer; } .fp-nl__consent input { flex: 0 0 auto; width: 13px; height: 13px; accent-color: var(--fp-claret); } .et-natad2--nl .fp-nl__consent a, .fp-nl__consent a { color: var(--fp-claret); font-weight: 700; text-decoration: underline; } /* Nace vacío: sin texto no ocupa ni una línea. */ .fp-nl__msg { display: block; text-align: right; font-size: 11.5px; font-weight: 700; } .fp-nl__msg:empty { display: none; } .fp-nl__msg.is-ok { color: #0A7B4B; } .fp-nl__msg.is-err { color: var(--fp-claret); } /* ─── Móvil ──────────────────────────────────────────────────────── Por debajo de 560px el correo y el botón no caben al lado del texto: la fila se parte y el formulario pasa a ocupar el ancho. */ @media (max-width: 560px) { .et-natad2--nl { grid-template-columns: 116px 1fr; } .et-natad2--nl .et-natad2__row { flex-wrap: wrap; } .fp-nl__side { flex: 1 1 100%; align-items: stretch; } .fp-nl__msg { text-align: left; } .fp-nl__input { width: auto; flex: 1 1 auto; min-width: 0; } } /* ═══════════════════════════════════════════════════════════════════ FP 1.22.0 · AFRICA ═══════════════════════════════════════════════════════════════════ La maqueta del recorte: logotipo grande arriba a la izquierda, debajo el titular en serif centrado con entradilla y firma, y la foto a lo alto ocupando la derecha. Es el único bloque de la portada que centra su texto, y por eso funciona: entre dos secciones alineadas a la izquierda, un bloque centrado se lee como una parada distinta y no como más de lo mismo. */ .fp-afr { display: grid; /* La foto pesa MENOS que el texto: el bloque lo sostiene el logotipo y el titular, no la imagen. */ grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: center; margin: 34px 0; padding: 30px 0; /* SIN filetes propios. Los ponía yo «para no depender de los vecinos» y resultó que los vecinos ya los traían: salían cuatro líneas, dos arriba y dos abajo. El bloque de arriba cierra con la suya y Conflicts abre con la suya, así que aquí no hace falta ninguna. */ --fp-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .fp-afr__col { display: flex; flex-direction: column; align-items: center; text-align: center; } /* ─── El logotipo ────────────────────────────────────────────────── La palabra en el rojo de marca y el punto en negro. Es la vuelta del original —donde la palabra es negra y el punto rojo— y funciona igual de bien porque el contraste sigue estando entre los dos. */ .fp-afr__logo { display: inline-flex; align-items: flex-end; gap: 8px; margin-bottom: 14px; /* FP 1.73.2 · menos aire hasta el filete rojo */ text-decoration: none; } /* CONTRA `.et-pcv2-page * { font-family: Inter }` DE pc-v2.css. ───────────────────────────────────────────────────────────────── Esa regla empata en especificidad con una sola clase y gana por orden de carga. Aquí van las TRES defensas a la vez, porque esto ya ha vuelto tres veces: 1. doble clase — sube la especificidad a (0,2,0); 2. `!important` — gana a cualquier declaración sin marcar, venga en el orden que venga y con la especificidad que sea; 3. la pila de respaldo ESCRITA, no `var(--fp-serif)`. Si esa variable no estuviera definida en el ámbito, la declaración entera sería inválida y la propiedad heredaría… la Inter del selector universal. Justo el síntoma que veíamos. */ .fp-afr .fp-afr__logo-w { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important; font-weight: 900; font-size: clamp(44px, 4.6vw, 66px); line-height: .85; letter-spacing: -.03em; color: var(--fp-claret); } /* El punto va como caja y no como carácter: un punto tipográfico cambia de tamaño y de posición con cada fuente, y aquí tiene que ser SIEMPRE el mismo círculo a la misma altura. */ .fp-afr__logo-d { width: .21em; height: .21em; margin-bottom: .07em; border-radius: 50%; background: var(--fp-deep); font-size: clamp(44px, 4.6vw, 66px); } /* ─── El texto ─────────────────────────────────────────────────── */ /* Corto y grueso: hace de antetítulo sin repetir la palabra que ya está en el logotipo justo encima. */ .fp-afr__rule { display: block; width: 54px; height: 4px; margin: 0 0 16px; background: var(--fp-claret); } .fp-afr__title { margin: 0; /* FP 1.73.0 · el titular se ensancha (15ch era un carril muy estrecho, orden del CEO): más aire a izquierda y derecha y menos cortes de línea absurdos. */ max-width: 36ch; /* FP 1.73.2 · más ancho aún (2ª pasada del CEO) */ font-family: var(--fp-serif); font-weight: 400; font-size: clamp(26px, 2.7vw, 36px); line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; } /* El antetítulo va CON el titular: misma familia, mismo cuerpo, mismo peso. Lo único que lo separa es el color. Es lo que hace que se lea como parte de la frase —«CAPITAL. Marsa Maroc plans…»— y no como una etiqueta pegada delante. */ .fp-afr .fp-afr__title .et-pcv2-hero__kicker { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; vertical-align: baseline; color: var(--fp-claret); } .fp-afr__title a { color: var(--fp-ink); text-decoration: none; } .fp-afr__title a:hover { color: var(--fp-claret); } .fp-afr__dek { margin: 18px 0 0; max-width: 74ch; /* FP 1.73.2 · ensanchada con el titular */ font-family: var(--fp-serif); font-size: 14.5px; line-height: 1.5; color: var(--fp-ink-2); } .fp-afr .et-pcv2-hero__byline { justify-content: center; margin: 16px 0 0; font-family: var(--fp-sans); font-size: 11.5px; } /* ─── FP 1.73.0 · La SEGUNDA de África ────────────────────────────── Un segundo titular bajo la principal, separado por un filete: solo antetítulo, titular y firma. Cuerpo menor y sin entradilla — tiene que leerse como el hermano pequeño, no como otra noticia principal. */ .fp-afr__next { width: 100%; max-width: 72ch; /* FP 1.73.2 · a la anchura de la principal */ margin: 24px auto 0; padding: 20px 0 0; border-top: 1px solid var(--fp-rule); } .fp-afr__next-t { margin: 0; font-family: var(--fp-serif); font-weight: 400; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.22; letter-spacing: -.015em; text-wrap: balance; } .fp-afr__next-t a { color: var(--fp-ink); text-decoration: none; } .fp-afr__next-t a:hover { color: var(--fp-claret); } /* el antetítulo va DENTRO de la frase, igual que en la principal */ .fp-afr .fp-afr__next-t .et-pcv2-hero__kicker { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; vertical-align: baseline; color: var(--fp-claret); } .fp-afr .fp-afr__next .et-pcv2-hero__byline { justify-content: center; margin: 10px 0 0; font-size: 10.5px; } /* ─── La foto ──────────────────────────────────────────────────── */ .fp-afr__photo { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--fp-paper-2) center / cover no-repeat; } /* ─── Móvil ────────────────────────────────────────────────────── */ @media (max-width: 860px) { .fp-afr { grid-template-columns: 1fr; gap: 22px; margin: 26px 0; padding: 24px 0; } /* La foto sube: en una columna, la imagen es lo que frena el scroll y el titular gana leyéndose debajo de ella. */ .fp-afr__photo { order: -1; aspect-ratio: 16 / 10; } .fp-afr__logo { margin-bottom: 12px; } .fp-afr__title { max-width: none; } .fp-afr__dek, .fp-afr__next { max-width: none; } } /* ─── El sello de FP Plus en la firma ────────────────────────────── El logo de FP tiene otra proporción que el de CAMAL, así que no se le fija el ancho: se le da el alto y el navegador calcula el resto. Con un ancho heredado saldría estrujado. De 12 a 15px, y ALINEADO: caía por debajo del nombre del autor porque una imagen en línea se apoya en la línea base del texto, y la línea base no es el centro. Se centra con flex, que es lo que sí mira el alto real de los dos. */ .ipp-firma-marca { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; } .ipp-firma-marca img { display: block; width: auto; height: 15px; } /* ─── El boletín DENTRO de la noticia ────────────────────────────── FP 1.30.0 · En el pie de columna del home la tarjeta tiene 700px y todo cabe en una fila. En la noticia la columna es más estrecha, así que el titular partía en dos, la entradilla en tres y el formulario se quedaba sin sitio: se veía estrujado. Aquí la tarjeta se apila —imagen arriba a lo ancho, texto y formulario debajo— que es lo que hace cualquier bloque de captación en una columna de lectura. */ .et-article-v2 .fp-nlzone, .dunes-template .fp-nlzone { margin: 30px 0 0; } .et-article-v2 .et-natad2--nl, .dunes-template .et-natad2--nl { grid-template-columns: 1fr; min-height: 0; } .et-article-v2 .et-natad2--nl .fp-nl__img, .dunes-template .et-natad2--nl .fp-nl__img { max-height: 132px; object-fit: cover; } .et-article-v2 .et-natad2--nl .et-natad2__row, .dunes-template .et-natad2--nl .et-natad2__row { flex-wrap: wrap; gap: 14px; } .et-article-v2 .et-natad2--nl .fp-nl__side, .dunes-template .et-natad2--nl .fp-nl__side { flex: 1 1 100%; align-items: stretch; margin-left: 0; } .et-article-v2 .et-natad2--nl .fp-nl__input, .dunes-template .et-natad2--nl .fp-nl__input { width: auto; flex: 1 1 auto; min-width: 0; } .et-article-v2 .et-natad2--nl .fp-nl__msg, .dunes-template .et-natad2--nl .fp-nl__msg { text-align: left; } /* ─── Remates del artículo ───────────────────────────────────────── FP 1.31.0 */ /* El boletín, pegado al borde. Traía el margen del pie de columna del home, donde SÍ hace falta separarlo de la última noticia; al final de la noticia ese aire deja una franja salmón entre el borde y la imagen. */ .et-article-v2 .fp-nlzone, .dunes-template .fp-nlzone { margin: 30px 0 0; padding-top: 0; border-top: 0; } /* La cabecera del panel del sidebar salía en blanco sobre salmón: se ve como un parche. En rojo rebajado se lee como parte de la casa. */ .et-cta-side__head, .et-cta-side__kicker, [class*="cta-side"] [class*="head"] { background: var(--fp-rule) !important; color: var(--fp-ink) !important; } /* ─── La ficha del autor y la firma · CLASES REALES ──────────────── FP 1.33.0 · Las dos rondas anteriores fallaron porque escribí los selectores por patrón —`[class*="author-card"]`— sin abrir la plantilla. Las clases de verdad las pone el plugin: · firma de arriba → .dai-tpl__byline · ficha del final → .dai-tpl-op__author Apuntado a ellas, esta vez sí manda. */ /* ── La firma de arriba: menos aire bajo el filete ── El bloque traía padding abajo Y margen abajo, y encima el filete de separación tiene su propio espacio: tres aires sumados. Se queda uno. */ .dai-tpl__byline { gap: 12px; padding-bottom: 12px; margin-bottom: 16px; } .dai-tpl__byline-meta, .dai-tpl__byline-read, .dai-tpl__byline-city { line-height: 1.35; } .dai-tpl__byline-info { gap: 2px; } /* ── La ficha del final, LIMPIA ── FP 1.66.6 · Fuera el panel salmón y la línea roja (orden del CEO, con captura): la firma va al aire, centrada, sin caja. Y el retrato redondo DE VERDAD: la foto del autor no es cuadrada y al estirarla a la caja sin object-fit salía OVALADA. */ .dai-tpl-op__author { gap: 12px; padding: 0; background: transparent; border: 0; } .dai-tpl-op__author-photo img, .dai-tpl-op__author-photo { width: 72px; height: 72px; flex: 0 0 auto; } .dai-tpl-op__author-photo img { object-fit: cover; border-radius: 50%; } .dai-tpl-op__author-info { gap: 3px; } .dai-tpl-op__author-name { font-size: 15.5px; font-weight: 800; line-height: 1.2; color: var(--fp-ink); text-decoration: none; } .dai-tpl-op__author-name:hover { color: var(--fp-claret); } .dai-tpl-op__author-bio { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--fp-ink-2); } .dai-tpl-op__author-meta { margin-top: 2px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fp-claret); } /* ── El logo de CAMAL en el chat del artículo ── El PNG nuevo es más alto que el anterior, así que a 15px se comía la línea del titular. Bajado a 13 y alineado a la altura de la x. */ .nai__title-logo img { height: 17px !important; } /* ── La cabecera del panel del sidebar: rojo con letra blanca ── */ .et-cta-sidebar__head, .et-cta-sidebar__kicker { background: var(--fp-claret) !important; color: #FFF !important; border-color: var(--fp-claret) !important; } /* ─── El hueco sobre la imagen del boletín ────────────────────────── FP 1.34.0 · No era margen ni padding: es un NODO DE TEXTO. En la plantilla el va en su propia línea, indentado dentro del de la imagen. Ese salto de línea más la tabulación son un nodo de texto en blanco, y cuando el contenedor es de bloque el navegador le reserva una línea entera encima de la imagen. De ahí la franja salmón que salía DENTRO del borde de la tarjeta. Se colapsa poniendo el cuerpo de letra y la interlínea a cero en el contenedor: sin altura de línea, el espacio en blanco no ocupa. Se arregla en el CSS y no metiendo el pegado a la etiqueta porque así no depende de que nadie reformatee la plantilla mañana. */ .et-natad2--nl .fp-nl__media { font-size: 0; line-height: 0; margin: 0; padding: 0; } .et-natad2--nl .fp-nl__img { vertical-align: top; } /* Y sin separación entre las filas de la tarjeta apilada. */ .et-article-v2 .et-natad2--nl, .dunes-template .et-natad2--nl { row-gap: 0; } /* ═══════════════════════════════════════════════════════════════════ FP 1.35.0 · LOS DOS QUE SE RESISTÍAN ═══════════════════════════════════════════════════════════════════ Los dos fallaban por lo mismo: yo colgaba las reglas de una clase ANCESTRA que adivinaba, y si la plantilla usa otra el selector no casa. Ya me pasó con `.et-cta-side` cuando la real era `.et-cta-sidebar`. Aquí se deja de adivinar. */ /* ─── 1 · El boletín al final de la noticia ──────────────────────── Ahora el propio PHP le pone `--art` al renderizarlo ahí, así que no depende de qué clase tenga el envoltorio de la plantilla. */ .fp-nlzone--art { margin: 30px 0 0; padding: 0; border: 0; } .fp-nlzone--art .et-natad2--nl { grid-template-columns: 1fr; row-gap: 0; min-height: 0; overflow: hidden; } /* La imagen, a sangre por arriba. El hueco venía del nodo de texto en blanco entre la etiqueta y el ; sin altura de línea no ocupa. */ .fp-nlzone--art .fp-nl__media { display: block; font-size: 0; line-height: 0; margin: 0; padding: 0; align-self: start; } .fp-nlzone--art .fp-nl__img { display: block; width: 100%; height: auto; max-height: 150px; object-fit: cover; vertical-align: top; margin: 0; } .fp-nlzone--art .fp-nl__side { flex: 1 1 100%; align-items: stretch; margin-left: 0; } .fp-nlzone--art .et-natad2__row { flex-wrap: wrap; gap: 12px; } .fp-nlzone--art .fp-nl__input { width: auto; flex: 1 1 auto; min-width: 0; } .fp-nlzone--art .fp-nl__msg { text-align: left; } /* ─── 2 · La cabecera del panel del sidebar ──────────────────────── El rótulo ya salía rojo, pero la BANDA que lo envuelve seguía rosa: son dos elementos y yo solo pintaba uno. En vez de perseguir su clase, se pinta el PRIMER HIJO del panel, que es esa banda venga como venga. */ .et-cta-sidebar > *:first-child, .et-cta-sidebar__head { background: var(--fp-claret) !important; border-color: var(--fp-claret) !important; } .et-cta-sidebar > *:first-child, .et-cta-sidebar > *:first-child *, .et-cta-sidebar__head, .et-cta-sidebar__head * { color: #FFF !important; } /* El chip del rótulo se funde con la banda: dos rojos distintos uno\n dentro de otro se ven como un error, no como un diseño. */ .et-cta-sidebar__kicker { background: transparent !important; padding-left: 0 !important; } /* ─── El hueco sobre la imagen · TERCERA hipótesis ────────────────── FP 1.36.0 · He probado margen, relleno, interlínea y nodo de texto, y el hueco sigue. Queda una causa que no es CSS: que el PNG traiga una banda vacía —transparente o del color del papel— en su parte de arriba. Encajaría con todo lo visto: se ve del color de la tarjeta porque ES la tarjeta vista a través del archivo, y por eso ninguna propiedad de caja lo quita. Se recorta desde el CSS con `object-position`: la imagen llena una caja de alto fijo y se encuadra por debajo de esa banda. Es un apaño honesto —el arreglo de verdad es reexportar el PNG sin ese margen—, pero deja el banner presentable hoy. */ .fp-nlzone--art .fp-nl__img { height: 140px; max-height: 140px; object-fit: cover; object-position: center 62%; } /* ─── El hueco sobre la imagen · MEDIDO, no adivinado ─────────────── FP 1.37.0 · Abrí el artículo en el navegador y leí quién gana la declaración. El culpable tiene nombre: .dunes-template-noticia .dai-tpl__body img { margin-top: 28px } (noticia.css, del PLUGIN) Es la regla que separa las fotos del cuerpo del texto, y es razonable… salvo que el banner del boletín también es un dentro de ese cuerpo, así que se comía 28px justo encima. Especificidad (0,2,1) contra mis (0,2,0): mi `margin:0` perdía por un elemento. De ahí que tres intentos de margen, relleno e interlínea no movieran nada: la regla estaba bien escrita, simplemente perdía. Se gana con !important a propósito: es una excepción puntual a una regla del plugin que no puedo tocar desde el theme, no un parche a ciegas. Y la imagen no trae banda vacía —naturalWidth la mide bien—, así que se retira el recorte que puse por si acaso. */ .fp-nlzone--art .fp-nl__img { margin: 0 !important; padding: 0 !important; border: 0 !important; height: auto !important; max-height: 160px; object-fit: cover; object-position: center center; display: block !important; } .fp-nlzone--art .fp-nl__media { margin: 0 !important; padding: 0 !important; } /* ─── AFRICA · el logotipo pasa a ser imagen ──────────────────────── FP 1.40.0 · Medido en la web, no calculado a ojo: el rótulo de texto ocupaba 234 × 50 px con el viewport a 1280 (la palabra 213 + 8 de hueco + 12 del punto), y la imagen mide 893 × 208 → ratio 4.29. Para que ocupe LO MISMO manda la anchura, que es lo que se ve en una línea: 234 px a 1280 = 18.3vw. Y los topes salen de los mismos que tenía la tipografía —clamp(44px, 4.6vw, 66px) de cuerpo, que a razón de 3.98 anchos por cuerpo daba de 175 a 262 px—, así que la imagen crece y se para exactamente donde se paraba el texto. */ /* FP 1.41.0 · Un 15 % menos: de 234 px a 200 px con el viewport a 1280 (18.3vw → 15.6vw), y los topes bajan en la misma proporción para que siga escalando igual. */ .fp-afr__logo-img { display: block; width: clamp(150px, 15.6vw, 224px); height: auto; } /* El contenedor era un flex de dos piezas con hueco; ahora lleva una sola y el hueco sobra. */ .fp-afr .fp-afr__logo { gap: 0; align-items: center; } /* ─── FP 1.44.0 · La FOTO de la noticia: esquinas y franja ────────── En 1.43.0 se lo puse al logotipo por leer mal el encargo. Va aquí: la fotografía de la pieza, la columna de la derecha. Las esquinas, apenas insinuadas: 3 px. En un diario el redondeo grande delata plantilla. La franja es UN solo elemento con degradado de PARADA DURA, no dos cajas apiladas: así el corte cae en el 80 % exacto de la altura que tenga la foto en cada momento —cambia con el viewport y en móvil pasa de 4/3 a 16/10— sin píxeles fijos que se descuadren. El negro es el de la marca (`--fp-deep`), no #000 puro: pegado al granate, el negro absoluto canta y parece un error de impresión. */ .fp-afr__photo { position: relative; border-radius: 3px; } .fp-afr__photo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 3px 0 0 3px; background: linear-gradient( to bottom, var(--fp-claret) 0 80%, var(--fp-deep, #0D0D0D) 80% 100% ); } /* Las reglas de `.fp-afr__logo-w` y `.fp-afr__logo-d` de más arriba quedan DORMIDAS: ya no hay spans que las casen. No se borran a propósito —documentan la pelea con `* { font-family: Inter }` de pc-v2.css, que volvió tres veces— y devuelven el rótulo de texto en cuanto se restauren los dos spans. */ /* ─── Los iconos del panel del sidebar, ahora imágenes ────────────── FP 1.42.0 · Las tarjetas de Infopuertos y CamalAI llevaban un SVG dibujado a mano; ahora llevan el favicon de la casa hermana y el icono rojo de CAMAL. El hueco medía 22×22 con el SVG, así que se respeta: `contain` para que ninguno de los dos se deforme si su proporción no es exactamente cuadrada. */ .et-cta-sidebar__icon img, .et-cta__icon img { width: 22px; height: 22px; object-fit: contain; display: block; margin: 0; } /* ═══════════════════════════════════════════════════════════════════ FP 1.45.0 · CABECERA MÓVIL Y ICONOS DEL PANEL ═══════════════════════════════════════════════════════════════════ */ /* ─── 1 · Los iconos de imagen no se pintan de rojo al pasar por encima `article-v2.css` pinta el cuadrito con el color de acento en :hover y al SVG le pone el trazo en blanco, así que el SVG se sigue leyendo. Un PNG oscuro, no: se queda invisible sobre el granate. El PHP marca el caso con `--img` en vez de que el CSS lo adivine, y aquí se le devuelve el fondo neutro en hover Y en :active —el CEO avisó de que también pasaba al PICAR, que es el estado que se queda pegado en pantallas táctiles—. */ .et-cta-sidebar__link:hover .et-cta-sidebar__icon--img, .et-cta-sidebar__link:active .et-cta-sidebar__icon--img, .et-cta-sidebar__link:focus .et-cta-sidebar__icon--img, .et-cta-sidebar__link:focus-visible .et-cta-sidebar__icon--img { background: #F5F5F5 !important; } /* Y que no herede ningún tinte por si otra regla intenta recolorearlo. */ .et-cta-sidebar__icon--img img { filter: none !important; opacity: 1 !important; } /* ─── 2 · El topbar móvil, en salmón ──────────────────────────────── El subnav ya lo tenía (`--fp-paper`, más arriba en este fichero); el topbar se quedó con el blanco translúcido del theme original, y por eso la cabecera de móvil no cuajaba con la de PC. Se mantiene la translucidez y el desenfoque —es lo que le da el aire de app— y solo se cambia el color de debajo. */ .et-m__topbar { background: rgba(255, 241, 229, 0.92); } /* El pull-to-refresh y el fondo del bloque, del mismo papel: si no, al arrastrar aparece una franja blanca detrás de la cabecera. */ .et-m, .et-m__ptr { background: var(--fp-paper); } /* ─── 3 · El logotipo, más grande ─────────────────────────────────── La altura la escribe el PHP en un `style=` en línea, sacada de la marca del Studio. Se corrige desde aquí con `!important` a propósito: un estilo en línea solo se gana así, y cambiar el valor por defecto en el código no habría servido —lo que manda es la opción guardada en la base de datos, que ya está escrita. */ .et-m__topbar .et-m__wordmark img { height: 40px !important; } /* ─── 4 · El sello del subnav ─────────────────────────────────────── FP 1.46.0 · Medido en el móvil real, no calculado a ojo, y salieron dos cosas: 1. Mi regla de 1.45.0 NO SE APLICÓ. Pedía 18 px con un solo nombre de clase (0,1,0) y `mobile.css` fija 15 px con dos (`.et-m-subnav .et-m-subnav__brand-logo`, 0,2,0). Perdía. El sello seguía a 15. Aquí se escribe con TRES nombres para que no dependa del orden de carga. 2. El desplazamiento NO era geométrico: el enlace, la fecha y el sello estaban centrados en el mismo eje —los tres a 75 px— y la tinta del PNG está centrada en su lienzo (8 px de aire arriba y 8 abajo). Lo que engaña es el TEXTO: una línea de 10 px reserva hueco para las colas de la p y la j, y como esas letras no aparecen, las mayúsculas se ven más altas que el centro real de su caja. Centrar la imagen «bien» la deja por debajo del texto. Por eso la corrección es óptica y pequeña: 2 px arriba. Un número mayor arreglaría el síntoma inventando un descuadre al revés. */ .et-m-subnav .et-m-subnav__brand .et-m-subnav__brand-logo { height: 17px; width: auto !important; max-width: none !important; margin-top: -2px; } /* ═══════════════════════════════════════════════════════════════════ FP 1.47.0 · /plus/ · papel salmón y maqueta sin chat ═══════════════════════════════════════════════════════════════════ */ /* ─── 1 · El papel ────────────────────────────────────────────────── El módulo de /plus/ se escribió con blanco en las cajas (`var(--et-paper, #fff)`), así que quedaba una isla blanca dentro de un diario salmón. Se pasa a `--fp-paper` en el contenedor y en las cajas; los filetes al granate claro para que no canten sobre él. */ .ipp, .ipp-wrap, .ipp-top, .ipp-bottom, .ipp-col, .ipp-col--fav, .ipp-col--dest, .ipp-intro { background: var(--fp-paper) !important; } .ipp-col, .ipp-intro { border-color: var(--fp-rule) !important; } /* ─── 2 · Sin chat, una sola columna arriba ───────────────────────── `.ipp-top` era una rejilla de 400px + resto para intro y chat. Con el chat fuera, dejar las dos columnas deja media portada vacía. */ .ipp-top { grid-template-columns: 1fr !important; } /* ─── 3 · Los exclusivos, en horizontal y a todo el ancho ─────────── `.ipp-bottom` partía el ancho en dos: guardados | exclusivos. Ahora se apilan, cada uno a todo el ancho, y los exclusivos reparten sus piezas en fila. El rótulo ocupa la fila entera (`1 / -1`) porque es el título del bloque, no una tarjeta más; y las tarjetas pasan de fila con foto al lado a columna con foto arriba, que es lo que pide un carril horizontal. `auto-fit` decide cuántas caben sin números fijos. */ .ipp-bottom { grid-template-columns: 1fr !important; } .ipp-col--dest { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; align-items: start; } .ipp-col--dest .ipp-col__head { grid-column: 1 / -1; } .ipp-col--dest .ipp-dest { flex-direction: column; gap: 10px; padding: 0; border-top: 0; /* el filete separaba filas; ya no hay filas */ } .ipp-col--dest .ipp-dest__foto, .ipp-col--dest .ipp-dest img { width: 100%; height: auto; order: -1; /* la foto, arriba de la tarjeta */ border-radius: 3px; } /* Los guardados siguen en lista vertical: son la hemeroteca del lector, se leen de arriba abajo y no compiten con el carril de exclusivos. */ .ipp-col--fav .ipp-dest { flex-direction: row; } /* ═══════════════════════════════════════════════════════════════════ FP 1.48.0 · EL PANEL DEL LECTOR (.et-acc-*) ═══════════════════════════════════════════════════════════════════ */ /* ─── Papel salmón en TODO ────────────────────────────────────────── El panel se pintó en blanco. Se pasa al papel del diario: contenedor, tarjetas, pestañas y bloques. */ .et-acc, .et-acc__head, .et-acc__tabs, .et-acc__card, .et-acc__panel, .et-acc__box, .et-acc__verify, .et-acc__cards, .et-acc__main, .et-acc__side { background: var(--fp-paper) !important; } .et-acc__card, .et-acc__panel, .et-acc__box { border-color: var(--fp-rule) !important; } /* ─── Fuera la tarjeta de CAMAL AI ────────────────────────────────── El PHP le pone `--camal` a esa tarjeta y solo a esa, así que no hay que contar posiciones ni usar :nth-child, que se rompe en cuanto se añade o se quita una tarjeta. */ .et-acc__card--camal { display: none !important; } /* ─── «Exclusive stories», en fila y a todo el ancho ──────────────── Mismo criterio que en /plus/: una rejilla que reparte con `auto-fit` —sin número fijo de columnas— y la foto arriba en vez de al lado. */ .et-acc__exclusivas, .et-acc__plus-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; align-items: start; } .et-acc__exclusivas > h2, .et-acc__plus-list > h2 { grid-column: 1 / -1; } .et-acc__exclusivas article, .et-acc__plus-list article { display: flex; flex-direction: column; gap: 10px; border-top: 0; padding: 0; } .et-acc__exclusivas article img, .et-acc__plus-list article img { width: 100%; height: auto; order: -1; border-radius: 3px; } /* ═══════════════════════════════════════════════════════════════════ FP 1.49.0 · NADA EN BLANCO, TODO EN GRANATE ═══════════════════════════════════════════════════════════════════ En la captura quedaban islas blancas: el panelón del fondo, las tarjetas, el pie. Se define un SEGUNDO papel, un poco más oscuro que el del diario, para las cajas que antes eran blancas: así se distinguen del fondo sin volver al blanco. */ :root { --fp-paper-3: #FBE6D6; /* salmón un punto más oscuro que --fp-paper */ } /* Las cajas que salían blancas, al papel oscuro. */ .et-acc, .et-acc__panel, .et-acc__box, .et-acc__card, .et-acc__verify, .ipp-col, .ipp-intro, .et-cta-sidebar, .et-natad2, .fp-nlzone .et-natad2 { background: var(--fp-paper-3) !important; } /* El pie, del papel del diario y no blanco. */ .et-pc-footer, .et-footer, footer.et-footer, .et-m__footer { background: var(--fp-paper) !important; } /* ─── Bordes y separadores, en granate ────────────────────────────── Todos los filetes del sitio pasan al rojo de marca. Se usa el token claro para las líneas finas —un granate pleno en cada separador convertiría la página en una reja— y el pleno solo donde ya había un borde con peso. */ .et-acc__card, .et-acc__panel, .et-acc__box, .et-acc__verify, .et-acc__tabs, .ipp-col, .ipp-intro, .et-natad2, .et-cta-sidebar, .et-pc-footer, .et-footer { border-color: var(--fp-rule) !important; } /* Los separadores horizontales y verticales, sin excepción. */ .et-acc__tabs a, .et-acc__h2, .ipp-col__head, .ipp-dest, .et-acc hr, .ipp hr, hr { border-color: var(--fp-rule) !important; } hr { background: var(--fp-rule) !important; } /* ═══════════════════════════════════════════════════════════════════ FP 1.50.0 · CERO BLANCO · CLASES LEÍDAS DEL MARCADO ═══════════════════════════════════════════════════════════════════ En 1.49.0 pinté clases que me inventé (`.et-acc__panel`, `.et-acc__exclusivas`) y ninguna existe. Las de verdad, leídas de inc/user-panel.php, son: `.et-acc__wrap`, `.et-acc__content`, `.et-acc__two`, `.et-acc__col`, `.et-acc__grid`. El recuadro blanco grande era `.et-acc__content`. */ .et-acc, .et-acc__wrap, .et-acc__content, .et-acc__two, .et-acc__col, .et-acc__grid, .et-acc-send, .et-acc-nov, .et-acc__empty { background: var(--fp-paper) !important; } .et-acc__content { border-color: var(--fp-rule) !important; } /* ─── Barrido: nada en blanco ──────────────────────────────────────── Va a propósito con brocha ancha —cualquier caja con `#fff` o `#FFFFFF` inline o heredado— porque la instrucción es que NO quede ni un fondo blanco. Es un barrido, no un diseño: cuando el panel se rehaga, esto debe volver a sus tokens de origen. */ body, #page, #content, .site, .site-content, [class*="footer"], [class*="__panel"], [class*="__card"], [class*="__box"] { background-color: var(--fp-paper) !important; } /* Las cajas dentro del panel, un punto más oscuras para que se distingan del papel del diario sin volver al blanco. */ .et-acc__card, .et-acc__verify, .et-acc__grid > a, .et-acc__grid > div { background-color: var(--fp-paper-3) !important; } /* ─── Las exclusivas, en UNA fila a todo el ancho ─────────────────── `.et-acc__two` partía el ancho en dos para dejar sitio al chat. Sin chat, una sola columna; y las piezas de `.et-acc__col` se reparten en fila con la foto arriba. */ .et-acc__two { grid-template-columns: 1fr !important; display: grid !important; } .et-acc__col { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; align-items: start; } .et-acc__col > .et-acc__h2, .et-acc__col > a.et-acc__all, .et-acc__col > .et-acc__more { grid-column: 1 / -1; } .et-acc__col article { display: flex !important; flex-direction: column !important; gap: 10px; padding: 0 !important; border-top: 0 !important; } .et-acc__col article img { width: 100%; height: auto; order: -1; border-radius: 3px; } /* ═══════════════════════════════════════════════════════════════════ FP 1.51.0 · LOS DOS QUE FALTABAN, CON EL SELECTOR CORRECTO ═══════════════════════════════════════════════════════════════════ */ /* ─── 1 · Las exclusivas, ahora sí en fila ─────────────────────────── Puse la rejilla en `.et-acc__col`, el padre. Pero las piezas van dentro de un `