/* ════════════════════════════════════════════════════════════════════
   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 #af0101, 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: #af0101;          /* 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: #af0101;         /* 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 {
    grid-template-columns: 38px minmax(90px, 1fr) minmax(120px, 1.6fr) 78px 132px;
    gap: 16px;
}

/* 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 <img> 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 <a> 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://financialports.com/wp-content/uploads/2026/08/ptimage-e1786753590396.png') center / contain no-repeat;
    /* La sombra es lo que lo hace visible sobre una foto clara; sin
       ella el sello desaparece en cuanto la imagen es de cielo o de
       muelle al sol. */
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
    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,
[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://financialports.com/wp-content/uploads/2026/08/ptimage-e1786753590396.png') center / contain no-repeat;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
    pointer-events: none;
    z-index: 3;
}