/* ═══════════════════════════════════════════════════════════════════
   IP PLUS · v2.198.0
   ───────────────────────────────────────────────────────────────────
   Vuelta al estado de la 2.196.0: el rediseño que seguía a la captura
   —franja negra, barra alta, gris cálido, filas estiradas— queda
   retirado por decisión del CEO.

   Lo único nuevo es el pulido del redactor de CAMAL AI: fondo blanco
   sólido y el icono de CAMAL de vuelta en el botón de enviar.

   Paleta de InfoPuertos: navy var(--et-brand, #114F6E), fondo crema, filete fino y
   esquinas de 4px. Nada de esquinas muy redondeadas ni sombras
   difusas.
   ═══════════════════════════════════════════════════════════════════ */

.ipp {
    --ipp-navy:   var(--et-brand, #114F6E);
    --ipp-navy-d: #0B3A52;
    --ipp-blue:   #2C7FA6;
    --ipp-ink:    #141C24;
    --ipp-mute:   #59677A;
    --ipp-hair:   var(--et-rule, #E3EAF0);
    --ipp-crema:  #F6F4EC;
    --ipp-panel:  #DCE7F2;
    --ipp-oscuro: #1B2129;
    --ipp-barra:  62px;

    background: var(--ipp-crema);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ipp-ink);
    min-height: 100vh;
}

/* El theme trae su propio header; en IP Plus manda la barra oscura. */
.ipp-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 20px 60px;
}

/* ── 1 · LA BARRA OSCURA, FIJA ────────────────────────────────────
   `sticky` y no `fixed`: fixed la saca del flujo y habría que
   compensar con un padding-top que se descuadra en cuanto cambia la
   altura. Con sticky, el hueco lo reserva el propio elemento. */
.ipp-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--ipp-oscuro);
    color: #fff;
    transition: box-shadow .16s ease;
}
/* Pegada al borde de arriba no se distingue del contenido; en cuanto
   el lector baja, la barra se despega con una sombra. */
.ipp-bar.is-stuck { box-shadow: 0 2px 10px rgba(11,26,38,.28); }
.ipp-bar__in {
    max-width: 1180px;
    margin: 0 auto;
    height: var(--ipp-barra);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ipp-bar__search-btn {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #fff; cursor: pointer;
    border-radius: 4px;
}
.ipp-bar__search-btn:hover { background: rgba(255,255,255,.10); }

/* v2.204.0 · Inicio · Archivo · Novedades iban casi pegados (2px) y se
   leían como un bloque. Con 14px cada uno se lee como una parada. */
.ipp-bar__nav { display: flex; align-items: center; gap: 14px; }
.ipp-bar__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 11px;
    border-radius: 4px;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}
.ipp-bar__item:hover      { background: rgba(255,255,255,.10); color: #fff; }
.ipp-bar__item.is-active  { background: rgba(255,255,255,.14); color: #fff; }

/* La marca, centrada de verdad: el hueco flexible va a los dos lados. */
.ipp-bar__brand {
    margin: 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: #fff; text-decoration: none;
}
/* v2.201.0 · La marca es una imagen. `object-fit: contain` la mantiene
   proporcionada aunque cambie el alto de la barra. */
.ipp-bar__logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.ipp-bar__right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ipp-bar__report {
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; text-decoration: none;
    font-size: 12.5px; font-weight: 700;
    padding: 7px 11px; border-radius: 4px;
    white-space: nowrap;
}
.ipp-bar__report:hover { background: rgba(255,255,255,.10); }

.ipp-bar__user {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ipp-navy);
    color: #fff; text-decoration: none;
    font-size: 14px; font-weight: 800;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,.35);
}
.ipp-bar__user img { width: 100%; height: 100%; object-fit: cover; }
.ipp-bar__user--anon { background: rgba(255,255,255,.12); }
.ipp-bar__user:hover { border-color: #fff; }

.ipp-bar__search {
    background: #141A21;
    border-top: 1px solid rgba(255,255,255,.10);
}
.ipp-bar__search[hidden] { display: none; }
.ipp-bar__search {
    display: flex; align-items: center; gap: 10px;
    max-width: 1180px; margin: 0 auto; padding: 12px 18px;
    color: rgba(255,255,255,.6);
}
.ipp-bar__search input {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none;
    color: #fff; font-size: 15px; font-family: inherit;
}
.ipp-bar__search input::placeholder { color: rgba(255,255,255,.45); }
.ipp-bar__search button {
    background: var(--ipp-navy); color: #fff; border: 0;
    padding: 8px 16px; border-radius: 4px;
    font: 700 13px/1 inherit; cursor: pointer;
}

/* ── 2 · EL AVISO ─────────────────────────────────────────────── */
.ipp-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 16px 20px; margin: 0 0 22px;
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-radius: 4px;
    flex-wrap: wrap;
}
.ipp-notice p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ipp-mute); }
.ipp-notice strong { color: var(--ipp-navy); }

/* ── botones ── */
.ipp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--ipp-navy);
    border-radius: 4px;
    background: var(--et-paper, #fff); color: var(--ipp-navy);
    font: 700 13.5px/1 inherit;
    text-decoration: none; cursor: pointer;
    white-space: nowrap;
}
.ipp-btn:hover { background: #F2F7FA; color: var(--ipp-navy); }
.ipp-btn--primary { background: var(--ipp-navy); color: #fff; }
.ipp-btn--primary:hover { background: var(--ipp-navy-d); color: #fff; }

/* ── 3 · FILA DE ARRIBA ───────────────────────────────────────── */
/* v2.199.0 · `stretch` y no `start`: el chat tiene que llegar hasta
   abajo, a la altura del cuadrante de la izquierda, sin dejar un hueco
   muerto debajo. Con `start` cada tarjeta medía lo que medía su
   contenido y quedaba un escalón. */
.ipp-top {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin: 0 0 26px;
}

/* 3a · qué es IP Plus */
.ipp-intro {
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-radius: 4px;
    overflow: hidden;
}
/* v2.201.0 · El panel deja el azul claro y pasa al NAVY de InfoPuertos,
   con el texto en blanco. Sobre navy, el gris apagado del `pub` y el
   navy del kicker eran ilegibles: los tres pasan a blanco, con el de
   abajo algo más tenue para que no compita con el titular. */
.ipp-intro__kicker,
.ipp-intro__title,
.ipp-intro__pub {
    background: var(--ipp-navy);
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
}
.ipp-intro__kicker {
    padding-top: 22px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    color: rgba(255,255,255,.82);
}
.ipp-intro__title {
    padding-top: 10px;
    /* v2.202.0 · «Zona suscriptores» pide más peso: 900 ya es el techo
       de Inter, así que el extra se consigue con un trazo. */
    font-size: 32px; font-weight: 900; line-height: 1.1;
    letter-spacing: -0.03em;
    /* v2.203.0 · un punto menos de trazo: 0.6 pesaba demasiado. */
    -webkit-text-stroke: 0.3px currentColor;
    color: #fff;
    text-wrap: balance;
}
.ipp-intro__pub {
    padding-top: 8px; padding-bottom: 20px;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.75);
}
.ipp-intro__body { padding: 20px 24px 4px; }
.ipp-intro__body p {
    margin: 0 0 14px;
    font-size: 15px; line-height: 1.62; color: #3D4A57;
}
.ipp-intro__body strong { color: var(--ipp-navy); font-weight: 700; }

.ipp-intro__perks { list-style: none; margin: 16px 0 4px; padding: 0; }
.ipp-intro__perks li {
    position: relative;
    padding: 7px 0 7px 24px;
    font-size: 14px; line-height: 1.45; color: #3D4A57;
    border-top: 1px solid var(--et-rule, #F0F4F7);
}
.ipp-intro__perks li:first-child { border-top: 0; }
.ipp-intro__perks li::before {
    content: "";
    position: absolute; left: 2px; top: 14px;
    width: 7px; height: 7px;
    background: var(--ipp-blue);
    border-radius: 1px;
}
.ipp-intro__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 24px 22px;
    flex-wrap: wrap;
}
.ipp-intro__more {
    font-size: 13px; font-weight: 700;
    color: var(--ipp-navy); text-decoration: none;
}
.ipp-intro__more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── 3b · CAMAL AI · EL CHAT ──────────────────────────────────── */
/* v2.208.0 · Filete claro alrededor del chat. */
.ipp-chat { border: 1px solid var(--et-rule, #DCE7EF); }
.ipp-chat {
    display: flex; flex-direction: column;
    /* `min-height: 0` es imprescindible: sin él, un hijo flex con scroll
       se niega a encoger y el log desborda la tarjeta en vez de hacer
       scroll dentro. */
    min-height: 0;
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-radius: 4px;
    overflow: hidden;
}
.ipp-chat__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ipp-hair);
    background: #FBFDFE;
    flex-wrap: wrap;
}
img.ipp-chat__logo { display: block; height: 26px; width: auto; }
.ipp-chat__sub { font-size: 12.5px; font-weight: 600; color: var(--ipp-mute); }

/* El contador de consultas. El límite existía desde siempre, pero el
   lector solo se enteraba al chocarse con él. */
.ipp-chat__quota {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--et-rule, #D7E4EE);
    border-radius: 3px;
    background: var(--et-paper, #fff);
    font-size: 11.5px; font-weight: 600; color: var(--ipp-mute);
    font-variant-numeric: tabular-nums;
    cursor: help;
}
.ipp-chat__quota b { font-weight: 800; color: var(--ipp-navy); }
.ipp-chat__quota.is-low  { border-color: #E8C99A; background: #FDF7EC; }
.ipp-chat__quota.is-low b  { color: #9A6B18; }
.ipp-chat__quota.is-out { border-color: #E3B3B3; background: #FBF0F0; }
.ipp-chat__quota.is-out b { color: #9E3535; }

/* Sin sesión, el muro llena la tarjeta y se centra: si no, quedaba
   pegado arriba con un vacío enorme debajo. */
.ipp-chat__gate { padding: 26px 20px; flex: 1; display: flex; align-items: center; }

/* v2.203.0 · EL CHAT NO CAMBIA DE TAMAÑO AL ESCRIBIR
   ───────────────────────────────────────────────────────────────
   Con `flex-basis: auto` el ALTO DEL CONTENIDO contaba para el alto
   de la fila, así que cada mensaje nuevo estiraba la tarjeta —y con
   ella toda la rejilla— hacia abajo.

   Con `flex-basis: 0` el contenido deja de contar: el log se queda
   con el alto que le da la rejilla (el del cuadrante de al lado) y
   la conversación se desplaza DENTRO. El `min-height` es solo el
   suelo, para cuando el cuadrante vecino es corto.

   `overscroll-behavior: contain` evita que al llegar al final del
   log siga desplazándose la página entera. */
.ipp-chat__log {
    flex: 1 1 0;
    /* v2.208.0 · Más recorrido: 260px daban tres mensajes escasos. */
    min-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 14px;
}
/* v2.201.0 · LA MARCA DE AGUA
   ───────────────────────────────────────────────────────────────
   Al estirarse el chat hasta abajo quedaba un vacío enorme bajo el
   saludo. Se llena con la espiral de CAMAL, muy tenue y detrás de
   todo.

   `position: sticky` y no `absolute`: el log tiene scroll, y con
   absolute la marca se iría hacia arriba al desplazarse. Con sticky
   se queda quieta mientras el contenido pasa por delante.

   Vive solo mientras el log tiene la clase `is-vacio`; el JS la quita
   con el primer mensaje del lector. La transición hace que se apague
   en vez de desaparecer de golpe. */
.ipp-chat__log { position: relative; }
.ipp-chat__marca {
    position: sticky;
    /* v2.202.0 · Estaba a media altura y quedaba muy abajo: el saludo
       ocupa la parte de arriba y la marca caía casi en el redactor.
       Al 26% se sitúa en el hueco real. */
    top: 26%;
    align-self: center;
    width: 220px; height: 220px;
    max-width: 62%;
    margin: 0 auto -220px;   /* no ocupa sitio en el flujo */
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 0;
}
.ipp-chat__log.is-vacio .ipp-chat__marca { opacity: .07; }
/* Los mensajes, por delante de la marca. */
.ipp-chat__log .ipp-msg { position: relative; z-index: 1; }

/* La barra de desplazamiento: fina y discreta, y solo se marca cuando
   el ratón está encima. Firefox usa `scrollbar-*`; el resto, los
   pseudoelementos de WebKit. */
.ipp-chat__log {
    scrollbar-width: thin;
    scrollbar-color: #CBD5DE transparent;
}
.ipp-chat__log::-webkit-scrollbar { width: 6px; }
.ipp-chat__log::-webkit-scrollbar-track { background: transparent; }
.ipp-chat__log::-webkit-scrollbar-thumb {
    background: #D7DFE7;
    border-radius: 3px;
}
.ipp-chat__log:hover::-webkit-scrollbar-thumb { background: #B6C4D1; }

.ipp-msg { display: flex; gap: 10px; max-width: 92%; }
/* v2.208.0 · Medida explícita y selector con peso: si solo se fía del
   atributo del HTML, cualquier `… img { height: auto }` global lo
   descoloca. Es la misma trampa que ya mordió con el logo de la firma. */
.ipp-msg__ico { flex: 0 0 20px; margin-top: 3px; }
img.ipp-msg__ico { display: block; width: 20px; height: 20px; object-fit: contain; }
.ipp-msg__tx {
    font-size: 14px; line-height: 1.6;
    white-space: pre-wrap;
}
.ipp-msg--ai .ipp-msg__tx {
    background: #F4F8FB;
    border: 1px solid var(--et-rule, #E4EDF3);
    border-radius: 4px;
    padding: 11px 14px;
    color: #2F3B47;
}
.ipp-msg--yo { align-self: flex-end; }
.ipp-msg--yo .ipp-msg__tx {
    background: var(--ipp-navy);
    color: #fff;
    border-radius: 4px;
    padding: 11px 14px;
}
.ipp-msg.is-loading .ipp-msg__tx { color: var(--ipp-mute); font-style: italic; }

/* La respuesta, con formato: el JS construye párrafos, negritas,
   enlaces y viñetas nodo a nodo (nunca innerHTML), así que hay que
   vestirlos. `pre-wrap` se apaga: con párrafos de verdad ya no hace
   falta y duplicaría los espacios. */
.ipp-msg--ai .ipp-msg__tx { white-space: normal; }
.ipp-msg--ai .ipp-msg__tx p { margin: 0 0 8px; }
.ipp-msg--ai .ipp-msg__tx p:last-child { margin-bottom: 0; }
.ipp-msg--ai .ipp-msg__tx strong { font-weight: 700; color: var(--ipp-navy); }
.ipp-msg--ai .ipp-msg__tx a {
    color: var(--ipp-navy); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: #A9C6D8;
    overflow-wrap: anywhere;
}
.ipp-msg--ai .ipp-msg__tx a:hover { text-decoration-color: var(--ipp-navy); }
.ipp-msg__li { position: relative; padding-left: 15px; }
.ipp-msg__li::before {
    content: "";
    position: absolute; left: 2px; top: 9px;
    width: 5px; height: 5px;
    background: var(--ipp-blue);
    border-radius: 1px;
}

.ipp-chat__chips {
    display: flex; gap: 7px; flex-wrap: wrap;
    padding: 0 20px 12px;
}
.ipp-chip {
    padding: 6px 12px;
    border: 1px solid var(--ipp-hair);
    border-radius: 999px;
    background: var(--et-paper, #fff); color: var(--ipp-navy);
    font: 600 12.5px/1 inherit;
    cursor: pointer;
}
.ipp-chip:hover { border-color: var(--ipp-navy); background: #F2F7FA; }
/* Borrar la conversación es destructivo: se distingue y no compite con
   las sugerencias de pregunta. */
/* v2.208.0 · Borde liso: el punteado gritaba «provisional». */
.ipp-chip--borrar { margin-left: auto; color: var(--ipp-mute); border-style: solid; border-width: 1px; }
.ipp-chip--borrar:hover { color: #9E3535; border-color: #D9A9A9; background: #FBF4F4; }
.ipp-chip[hidden] { display: none; }

/* ── EL REDACTOR  ·  v2.198.0 ─────────────────────────────────────
   Lo único que se toca en esta versión. Todo el redactor —la barra, el
   campo y el botón— va en BLANCO SÓLIDO, sin transparencias: así se
   despega del resto de la tarjeta y se ve dónde se escribe.

   Y el botón de enviar recupera el icono de CAMAL. Ojo con esto: el
   favicon de CAMAL es OSCURO, así que el botón tiene que ser claro. */
.ipp-chat__form {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--ipp-hair);
    background: var(--et-paper, #fff);
}
.ipp-chat__form input {
    flex: 1; min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--et-rule, #DCE3E9);
    border-radius: 6px;
    background: var(--et-paper, #fff);
    font: 400 14.5px/1.4 inherit;
    color: var(--ipp-ink);
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.ipp-chat__form input::placeholder { color: #98A3B0; }
.ipp-chat__form input:focus {
    border-color: var(--ipp-navy);
    box-shadow: 0 0 0 3px rgba(17,79,110,.10);
}
.ipp-chat__send {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    background: var(--et-paper, #fff);
    border: 1px solid var(--et-rule, #DCE3E9);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
}
.ipp-chat__send img { display: block; width: 22px; height: 22px; object-fit: contain; }
.ipp-chat__send:hover:not(:disabled) { border-color: var(--ipp-navy); background: #F7FAFC; }
.ipp-chat__send:disabled { opacity: .45; cursor: default; }

.ipp-chat__legal {
    margin: 0;
    padding: 0 20px 14px;
    font-size: 11.5px; line-height: 1.5; color: #8A97A8;
}

/* ── 4 · LAS DOS COLUMNAS DE ABAJO ────────────────────────────── */
.ipp-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.ipp-col {
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-radius: 4px;
    padding: 20px 22px 8px;
}
.ipp-col--dest { background: #FAF9F4; }
.ipp-col__head {
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--ipp-navy);
    font-size: 14px; font-weight: 800; letter-spacing: 0;
    color: var(--ipp-navy);
}
.ipp-col__all {
    float: right;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0;
    color: var(--ipp-blue);
    text-decoration: none;
}
.ipp-col__all:hover { color: var(--ipp-navy); text-decoration: underline; text-underline-offset: 2px; }

.ipp-empty {
    margin: 0 0 16px;
    padding: 16px;
    background: #F7FAFC;
    border: 1px dashed var(--et-rule, #D5DFE8);
    border-radius: 4px;
    font-size: 13px; line-height: 1.55; color: var(--ipp-mute);
}

/* 4a · opinión  ·  v2.199.0 · EL RETRATO MANDA
   ───────────────────────────────────────────────────────────────────
   Una columna de opinión va de QUIÉN firma. Antes el retrato era un
   círculo de 34px arrinconado, y la pieza principal ni siquiera decía
   el autor: era lo primero que había que arreglar.

   Ahora la cara es lo primero que se ve —84px en la principal, 56px en
   el resto— y la firma va por encima del titular, como en cualquier
   sección de opinión de un diario. */
.ipp-op {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--et-rule, #F0F4F7);
}
.ipp-op:first-of-type { border-top: 0; padding-top: 0; }

.ipp-op__face {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}
.ipp-op__face img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #E3EAF0;
    /* Anillo blanco + filete: despega la cara del fondo de la tarjeta
       sin recurrir a una sombra difusa. */
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ipp-hair);
}
.ipp-op--lead .ipp-op__face img { width: 84px; height: 84px; }

.ipp-op__tx { min-width: 0; }

/* La firma: nombre en negro, sección en color, separados por un punto
   medio. Es la línea que identifica al columnista de un vistazo. */
.ipp-op__firma {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 5px;
}
.ipp-op__author {
    font-size: 13.5px; font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ipp-ink);
}
.ipp-op--lead .ipp-op__author { font-size: 15px; }
.ipp-op__kicker {
    position: relative;
    padding-left: 11px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ipp-blue);
}
.ipp-op__kicker::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    width: 3px; height: 3px;
    margin-top: -1.5px;
    background: #C8D3DC;
    border-radius: 50%;
}

.ipp-op__title {
    margin: 0 0 6px;
    font-size: 17px; font-weight: 800; line-height: 1.28;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.ipp-op--lead .ipp-op__title { font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; }
.ipp-op__title a { color: var(--ipp-ink); text-decoration: none; }
.ipp-op__title a:hover { color: var(--ipp-navy); }

.ipp-op__dek {
    margin: 0 0 6px;
    font-size: 14px; line-height: 1.5; color: var(--ipp-mute);
}
.ipp-op__date {
    margin: 0;
    font-size: 11.5px; color: #8A97A8;
    font-variant-numeric: tabular-nums;
}

/* La foto de la pieza principal ocupa la fila entera debajo del texto:
   con el retrato ya a la izquierda, flotarla a la derecha dejaba el
   titular en una columna de dos palabras. */
.ipp-op--lead .ipp-op__photo {
    grid-column: 1 / -1;
    display: block;
    width: 100%; height: 176px;
    margin: 12px 0 0;
    background: #E3EAF0 center/cover no-repeat;
    border-radius: 3px;
}
/* 4b · destacadas */
.ipp-dest {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 15px 0;
    border-top: 1px solid var(--et-rule, #ECEBE3);
}
.ipp-dest:first-of-type { border-top: 0; padding-top: 0; }
.ipp-dest__tx { flex: 1; min-width: 0; }
/* v2.202.0 · La categoría vuelve encima del titular, en el azul de
   InfoPuertos. */
.ipp-dest__sec {
    display: block;
    font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
    color: var(--ipp-blue);
    margin: 0 0 5px;
}
.ipp-dest__title {
    margin: 0 0 6px;
    font-size: 17px; font-weight: 800; line-height: 1.28;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.ipp-dest__title a { color: var(--ipp-ink); text-decoration: none; }
.ipp-dest__title a:hover { color: var(--ipp-navy); }
/* v2.202.0 · Un filete fino y claro separa el titular de la firma. Sin
   él, titular y autor se leían como un bloque continuo. Va corto —no
   a todo el ancho— para que sea un remate, no un divisor. */
.ipp-dest__title::after {
    content: "";
    display: block;
    width: 46px; height: 2px;
    margin: 10px 0 0;
    background: #B9D2E2;
    border-radius: 1px;
}
.ipp-dest__dek {
    margin: 0 0 6px;
    font-size: 14px; line-height: 1.5; color: var(--ipp-mute);
}
.ipp-dest__date {
    margin: 0; font-size: 11.5px; color: #8A97A8;
    font-variant-numeric: tabular-nums;
}
/* La firma de las noticias · v2.199.0
   ───────────────────────────────────────────────────────────────────
   El marcado lo genera `et_pcv2_render_meta()`, el MISMO del home PC,
   así que las clases son las suyas: autor · barra · custom. Pero su
   CSS vive en pc-v2.css, que NO se carga en móvil; sin estas reglas la
   firma saldría como texto suelto en el teléfono. */
.ipp .et-pcv2-hero__byline {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #8A97A8;
}
.ipp .et-pcv2-hero__byline-author {
    font-weight: 700;
    color: var(--ipp-ink);
    letter-spacing: -0.01em;
}
/* v2.205.0 · El «custom» se iguala en color al autor: en IP Plus las
   dos piezas son información editorial del mismo rango, y el gris
   claro lo dejaba en segundo plano. El peso NO cambia —el autor
   sigue en negrita—, así que se distinguen sin perder unidad. */
.ipp .et-pcv2-hero__byline-custom { color: var(--ipp-ink); }
.ipp .et-pcv2-hero__byline-role,
.ipp .et-pcv2-hero__byline-date { color: #8A97A8; }
/* La barra: la misma vertical fina y gris del home. */
.ipp .et-pcv2-hero__byline-pipe,
.ipp .et-pcv2-hero__byline-sep {
    display: inline-block;
    width: 1px; height: 12px;
    background: #BFBDB6;
    flex-shrink: 0;
}
.ipp .et-pcv2-hero__byline-pipe { margin: 0 2px; }

/* La marca de CAMAL al final de la firma en las piezas Plus. Va sobre
   el fondo claro de la tarjeta: la espiral es OSCURA y sobre navy no
   se vería. */
.ipp-firma-marca {
    display: inline-flex; align-items: center;
    line-height: 0;
    opacity: .9;
    transition: opacity .14s ease;
}
.ipp-firma-marca:hover { opacity: 1; }
/* v2.205.0 · EL LOGO, A LA ESCALA DE LA FIRMA.
   ───────────────────────────────────────────────────────────────
   Estaba a 18px de alto en una línea de 11,5–12px: era medio
   centímetro más alto que el nombre del autor, así que dominaba la
   firma en vez de rematarla. Y como este CSS se carga en TODO el
   sitio —no solo en /plus/—, ese tamaño también salía en el home.

   12px es la altura de las barras separadoras y la de las mayúsculas
   del texto de al lado: el logo pasa a ser un elemento más de la
   línea. El ancho lo calcula el navegador con la proporción real. */
/* v2.206.0 · POR QUÉ ESTE SELECTOR LLEVA EL `a` DELANTE
   ───────────────────────────────────────────────────────────────
   `.ipp-firma-marca img` pesa (0,1,1): una clase y un elemento.
   Exactamente lo mismo que `.et-pcv2-page img { height: auto }` de
   pc-v2.css. En un empate manda quien se carga DESPUÉS, y pc-v2.css
   va en prioridad 25 mientras que ipplus.css va en la 20: ganaba
   pc-v2 en TODO el home.

   Y perder ahí no dejaba el logo un poco más grande: lo dejaba a
   TAMAÑO NATURAL. Con `height: auto` heredado de pc-v2 y el
   `width: auto` de aquí, los atributos width/height del HTML dejan
   de contar y la imagen sale a sus 952px, recortada solo por el
   `max-width: 100%` del contenedor. De ahí el logo gigante detrás
   de autor · custom que reportó el CEO.

   Dentro de /plus/ no pasaba: allí el contenedor no es
   `.et-pcv2-page`, así que la regla de pc-v2 ni siquiera casaba.
   Por eso se veía bien en el suplemento y mal en la portada.

   `a.ipp-firma-marca img` pesa (0,1,2) y gana siempre, sin depender
   del orden de carga ni de un !important. Es el mismo remedio que
   ya está documentado dos veces dentro de pc-v2.css para esta misma
   trampa. */
a.ipp-firma-marca img { display: block; height: 12px; width: auto; }
@media (prefers-reduced-motion: reduce) { .ipp-firma-marca { transition: none; } }

.ipp-dest__photo {
    flex: 0 0 132px;
    width: 132px; height: 92px;
    background: #E3EAF0 center/cover no-repeat;
    border-radius: 3px;
}

/* ── 4c · QUE LA PIEZA ENTERA RESPONDA ────────────────────────────
   Antes solo cambiaba de color el enlace del titular; el resto de la
   fila —foto, entradilla, fecha— se quedaba muerto. */
.ipp-op, .ipp-dest {
    margin: 0 -10px;
    padding-left: 10px; padding-right: 10px;
    border-radius: 3px;
    transition: background-color .14s ease;
}
.ipp-op:hover  { background: #F4F8FB; }
.ipp-dest:hover { background: #F3F1E9; }
.ipp-op:hover .ipp-op__title a,
.ipp-dest:hover .ipp-dest__title a { color: var(--ipp-navy); }
.ipp-op__photo, 
.ipp-dest__photo { transition: opacity .14s ease; }
.ipp-op:hover .ipp-op__photo,
.ipp-dest:hover 
.ipp-dest__photo { opacity: .92; }

/* El foco de teclado, visible de verdad. */
.ipp a:focus-visible,
.ipp button:focus-visible,
.ipp input:focus-visible {
    outline: 2px solid var(--ipp-blue);
    outline-offset: 2px;
    border-radius: 2px;
}
.ipp-bar a:focus-visible,
.ipp-bar button:focus-visible,
.ipp-bar input:focus-visible { outline-color: #7FC3E8; }

@media (prefers-reduced-motion: reduce) {
    .ipp-op, .ipp-dest, .ipp-op__photo, .ipp-dest__photo,
    .ipp-bar, .ipp-chat__form input, .ipp-chat__send { transition: none; }
}

/* ── 5 · EL SELLO «IP PLUS» ───────────────────────────────────────
   Sale también fuera de /plus/: en la portada, en los listados y
   dentro de la noticia. Por eso vive aquí y el CSS se encola en todo
   el frontend. */
.ipp-tag {
    display: inline-flex; align-items: baseline; gap: 2px;
    margin-left: 7px;
    padding: 2px 6px 3px;
    border-radius: 3px;
    background: var(--ipp-navy, var(--et-brand, #114F6E));
    color: #fff !important;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none !important;
    vertical-align: middle;
    white-space: nowrap;
}
.ipp-tag span { font-style: italic; opacity: .9; }
.ipp-tag:hover { background: #0B3A52; }

/* ── 6 · EL MURO ──────────────────────────────────────────────── */
.ipp-locked__teaser {
    font-size: 17px; line-height: 1.7; color: #2F3B47;
    margin: 0 0 6px;
}

.ipp-wall {
    position: relative;
    margin: 22px 0;
    padding: 30px 26px;
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair, var(--et-rule, #E3EAF0));
    border-top: 3px solid var(--ipp-navy, var(--et-brand, #114F6E));
    border-radius: 4px;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
}
/* El degradado que muerde el final del teaser: deja claro que el texto
   sigue, sin necesidad de escribirlo. */
.ipp-wall::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -74px;
    height: 74px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
    pointer-events: none;
}
.ipp-wall__mark {
    display: inline-flex; align-items: baseline; gap: 3px;
    padding: 4px 10px 5px;
    border-radius: 3px;
    background: var(--ipp-navy, var(--et-brand, #114F6E));
    color: #fff;
    font-size: 13px; font-weight: 900; line-height: 1;
    margin: 0 0 14px;
}
.ipp-wall__mark span { font-style: italic; opacity: .9; }
.ipp-wall__title {
    margin: 0 0 8px;
    font-size: 22px; font-weight: 900; line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ipp-ink, #141C24);
    text-wrap: balance;
}
.ipp-wall__lede {
    max-width: 46ch; margin: 0 auto 20px;
    font-size: 14.5px; line-height: 1.6; color: var(--ipp-mute, #59677A);
}
.ipp-wall__acc {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 0 0 14px;
}
.ipp-wall__legal {
    margin: 0; font-size: 12px; color: #8A97A8;
}

/* ═══════════════════════════════════════════════════════════════════
   7 · MÓVIL
   ───────────────────────────────────────────────────────────────────
   Revisado contra scmp.com/plus a 375px de ancho, abriéndolo de verdad
   y leyendo su DOM. Dos cosas que salieron de ahí:

   a) SCMP Plus NO TIENE VERSIÓN MÓVIL WEB. A 375px sirve un aviso —«To
      enjoy SCMP Plus on a mobile device, you'll need to open or
      download our mobile app»— con los dos botones de las tiendas. Es
      una decisión suya para empujar instalaciones de la app. Copiarla
      aquí sería tirar por la borda a la mayoría del tráfico de un
      producto cuyo objetivo es CAPTAR REGISTROS. Así que ese muro NO se
      clona; IP Plus se lee entero en el teléfono.

   b) Lo que sí merece copiarse es su barra: la navegación va en UNA
      SOLA LÍNEA que se desliza en horizontal (su propio código la llama
      `oneline_menu`), no en un menú plegado. Es lo que se hace abajo.
      La primera versión la escondía con display:none, que era peor:
      dejaba la barra coja y sin manera de llegar a PCP o al Ranking.

   El orden apilado —intro → chat → opinión → destacadas— coincide con
   el de SCMP en móvil y ya lo da el propio orden del marcado.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
    .ipp-top,
    .ipp-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    /* La barra pasa a dos alturas: marca + acciones arriba, navegación
       deslizable debajo. Apretar seis cosas en 375px no cabe. */
    .ipp-bar__in {
        height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ipp-bar__brand { order: 1; margin: 0 auto 0 0; }
    .ipp-bar__search-btn { order: 2; margin-left: auto; }
    .ipp-bar__right { order: 3; }

    /* La navegación, en una línea que se desliza. */
    .ipp-bar__nav {
        order: 4;
        flex: 1 0 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin: 2px -12px -2px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .ipp-bar__nav::-webkit-scrollbar { display: none; }
    .ipp-bar__item {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 6px;
        padding: 7px 12px;
        font-size: 12.5px;
    }
    .ipp-bar__item svg { width: 15px; height: 15px; }
}

@media (max-width: 720px) {
    .ipp-wrap { padding: 16px 14px 44px; }

    /* «Reporta un problema» se queda en el icono: el texto entero se
       come el ancho que necesita la marca. El title sigue diciendo qué
       es, y el enlace no cambia. */
    .ipp-bar__report { font-size: 0; gap: 0; padding: 7px; }
    .ipp-bar__report svg { width: 18px; height: 18px; }

    .ipp-intro__title { font-size: 25px; }
    .ipp-intro__kicker,
    .ipp-intro__title,
    .ipp-intro__pub,
    .ipp-intro__body,
    .ipp-intro__foot { padding-left: 18px; padding-right: 18px; }
    .ipp-intro__body p { font-size: 14.5px; }

    .ipp-col { padding: 16px 16px 4px; }
    .ipp-notice { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ipp-notice .ipp-btn { width: 100%; }

    /* v2.199.0 · La foto de la principal ya ocupa la fila entera en
       escritorio; en móvil solo se le baja el alto. */
    .ipp-op--lead .ipp-op__photo { height: 200px; }
    /* En móvil la columna pasa a ancho completo, así que el titular
       principal tiene que crecer, no encogerse. */
    .ipp-op--lead .ipp-op__title { font-size: 23px; }
    /* El retrato se modera para que el titular no quede en un carril
       estrecho: 64px en la principal, 48px en el resto. */
    .ipp-op { gap: 12px; }
    .ipp-op__face img { width: 48px; height: 48px; }
    .ipp-op--lead .ipp-op__face img { width: 64px; height: 64px; }
    .ipp-dest__photo { flex-basis: 96px; width: 96px; height: 68px; }

    /* El chat, cómodo con el teclado abierto: sin alto máximo grande el
       teclado del móvil deja el campo debajo del pliegue. */
    /* En móvil SÍ se acota el log: apilado no hay tarjeta de al lado que
       igualar, y con el teclado abierto una conversación larga dejaría el
       redactor debajo del pliegue. */
    .ipp-chat__log { max-height: 320px; min-height: 180px; }
    .ipp-msg { max-width: 100%; }

    /* 16px en los campos: por debajo de eso, Safari de iOS hace zoom al
       enfocar y descoloca la página entera. */
    .ipp-chat__form input,
    .ipp-bar__search input { font-size: 16px; }
    .ipp-chat__form { padding: 10px 14px; }
    .ipp-chat__legal { padding: 0 14px 12px; }

    .ipp-wall { padding: 24px 18px; }
    .ipp-wall__title { font-size: 19px; }
    .ipp-wall__acc .ipp-btn { width: 100%; }
}

@media (max-width: 400px) {
    .ipp-dest { gap: 10px; }
    .ipp-dest__photo { flex-basis: 84px; width: 84px; height: 60px; }
    .ipp-dest__dek { display: none; }   /* a este ancho, ruido */
}

/* ═══════════════════════════════════════════════════════════════════
   8 · EL ARCHIVO  ·  v2.196.0 · FASE 4
   ───────────────────────────────────────────────────────────────────
   /plus/archivo/ — todo lo publicado en el suplemento. Rejilla de
   tarjetas, no lista: aquí el lector viene a buscar, y la foto ayuda a
   reconocer la pieza que tiene a medias.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-col__all {
    float: right;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0;
    color: var(--ipp-blue);
    text-decoration: none;
}
.ipp-col__all:hover { color: var(--ipp-navy); text-decoration: underline; text-underline-offset: 2px; }

.ipp-arch__head { margin: 4px 0 24px; }
.ipp-arch__kicker {
    margin: 0 0 8px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
    color: var(--ipp-blue);
}
.ipp-arch__title {
    margin: 0 0 10px;
    font-size: 34px; font-weight: 900; line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--ipp-ink);
}
.ipp-arch__lede {
    margin: 0;
    max-width: 62ch;
    font-size: 15px; line-height: 1.6; color: var(--ipp-mute);
}

.ipp-arch__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    margin: 0 0 30px;
}
.ipp-arch__item {
    display: flex; flex-direction: column;
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .14s ease;
}
.ipp-arch__item:hover { border-color: #BFD3E0; }
.ipp-arch__photo {
    display: block;
    aspect-ratio: 16 / 9;
    background: #E3EAF0 center/cover no-repeat;
}
/* Sin foto no se deja un agujero gris: se pone la trama de la casa. */
.ipp-arch__photo.is-empty {
    background:
        repeating-linear-gradient(135deg, #E9EFF4 0 10px, #E2EAF1 10px 20px);
}
.ipp-arch__tx { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.ipp-arch__sec {
    display: block; margin: 0 0 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    color: var(--ipp-navy);
}
.ipp-arch__h {
    margin: 0 0 8px;
    font-size: 17px; font-weight: 800; line-height: 1.28;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.ipp-arch__h a { color: var(--ipp-ink); text-decoration: none; }
.ipp-arch__item:hover .ipp-arch__h a { color: var(--ipp-navy); }
.ipp-arch__dek {
    margin: 0 0 10px;
    font-size: 13.5px; line-height: 1.5; color: var(--ipp-mute);
    flex: 1;
}
.ipp-arch__date {
    margin: 0;
    font-size: 11.5px; color: #8A97A8;
    font-variant-numeric: tabular-nums;
}

.ipp-pag {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin: 0 0 26px;
    flex-wrap: wrap;
}
.ipp-pag__n {
    font-size: 13px; font-weight: 600; color: var(--ipp-mute);
    font-variant-numeric: tabular-nums;
}

.ipp-arch__back { margin: 0; }
.ipp-arch__back a {
    font-size: 13.5px; font-weight: 600;
    color: var(--ipp-navy); text-decoration: none;
}
.ipp-arch__back a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 720px) {
    .ipp-arch__title { font-size: 27px; }
    .ipp-arch__grid { grid-template-columns: 1fr; gap: 16px; }
    /* En una sola columna, la tarjeta se tumba: la foto al lado del
       texto ocupa la mitad de alto y caben el doble de piezas. */
    .ipp-arch__item { flex-direction: row; }
    .ipp-arch__photo { flex: 0 0 118px; aspect-ratio: auto; }
    .ipp-arch__tx { padding: 12px 14px; }
    .ipp-arch__h { font-size: 16px; }
    .ipp-arch__dek { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   9 · NOVEDADES  ·  v2.201.0
   ───────────────────────────────────────────────────────────────────
   /plus/novedades/ — lo que la redacción publica para TODOS. Formato
   de línea de tiempo: fecha a la izquierda, aviso a la derecha, con
   un filete que los cose. Se lee de arriba abajo sin esfuerzo y deja
   claro qué es lo último.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-nov { list-style: none; margin: 0 0 30px; padding: 0; }
.ipp-nov__item {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid var(--ipp-hair);
}
.ipp-nov__item:first-child { border-top: 0; padding-top: 0; }
.ipp-nov__meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ipp-nov__fecha {
    font-size: 12.5px; font-weight: 700;
    color: var(--ipp-mute);
    font-variant-numeric: tabular-nums;
}
.ipp-nov__tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--ipp-panel);
    color: var(--ipp-navy);
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.ipp-nov__cuerpo {
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-left: 3px solid var(--ipp-navy);
    border-radius: 4px;
    padding: 18px 20px;
}
.ipp-nov__title {
    margin: 0 0 8px;
    font-size: 19px; font-weight: 800; line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ipp-ink);
    text-wrap: balance;
}
/* El cuerpo lo escribe la redacción en HTML: se le da estilo a lo que
   puede aparecer, sin suponer que siempre serán párrafos sueltos. */
.ipp-nov__tx { font-size: 14.5px; line-height: 1.62; color: #3D4A57; }
.ipp-nov__tx > *:first-child { margin-top: 0; }
.ipp-nov__tx > *:last-child  { margin-bottom: 0; }
.ipp-nov__tx p  { margin: 0 0 12px; }
.ipp-nov__tx ul,
.ipp-nov__tx ol { margin: 0 0 12px; padding-left: 20px; }
.ipp-nov__tx li { margin: 0 0 5px; }
.ipp-nov__tx h2,
.ipp-nov__tx h3 { margin: 16px 0 8px; font-size: 15.5px; font-weight: 800; color: var(--ipp-ink); }
.ipp-nov__tx a  { color: var(--ipp-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ipp-nov__tx strong { color: var(--ipp-navy); }
.ipp-nov__tx img { max-width: 100%; height: auto; border-radius: 3px; }
.ipp-nov__cta { margin: 14px 0 0; }

@media (max-width: 720px) {
    /* Apilado: la fecha encima, en una fila con la etiqueta. */
    .ipp-nov__item { grid-template-columns: 1fr; gap: 10px; }
    .ipp-nov__meta { flex-direction: row; align-items: center; gap: 10px; }
    .ipp-nov__cuerpo { padding: 16px; }
    .ipp-nov__title { font-size: 17px; }
    /* El logotipo de la barra, algo menor para que quepa con el resto. */
    .ipp-bar__logo { height: 26px; max-width: 140px; }
    /* La marca de agua se modera: en el teléfono el log es más bajo. */
    .ipp-chat__marca { width: 150px; height: 150px; margin-bottom: -150px; }
}

/* ═══════════════════════════════════════════════════════════════════
   10 · ARCHIVO Y NOVEDADES, EMBEBIDAS  ·  v2.202.0
   ───────────────────────────────────────────────────────────────────
   Las dos páginas flotaban sueltas sobre el fondo crema. Ahora van
   dentro de una caja blanca con filete claro, igual que los cuadrantes
   de la portada: el suplemento se lee como una sola pieza y no como
   tres plantillas distintas.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-panel {
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-radius: 4px;
    padding: 30px 34px 34px;
    margin: 0 0 24px;
}
/* La cabecera, cosida al panel por un filete de ancho completo. */
.ipp-panel .ipp-arch__head {
    margin: 0 0 26px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--ipp-hair);
}
.ipp-panel .ipp-arch__kicker {
    margin: 0 0 10px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
    color: var(--ipp-blue);
}
.ipp-panel .ipp-arch__title {
    font-size: 32px; letter-spacing: -0.03em;
    -webkit-text-stroke: 0.4px currentColor;
}
/* Dentro del panel, la rejilla del archivo respira más y las tarjetas
   pierden su propio filete: dos marcos anidados ensucian. */
.ipp-panel .ipp-arch__grid { gap: 24px; margin-bottom: 0; }
.ipp-panel .ipp-arch__item { border: 0; border-radius: 0; }
.ipp-panel .ipp-arch__item + .ipp-arch__item { }
.ipp-panel .ipp-arch__photo { border-radius: 3px; }
.ipp-panel .ipp-arch__tx { padding: 12px 0 0; }

/* La paginación y el «volver», ya fuera del panel, centrados. */
.ipp-pag { margin-top: 0; }
.ipp-arch__back { text-align: center; }

@media (max-width: 720px) {
    .ipp-panel { padding: 20px 18px 24px; border-radius: 4px; }
    .ipp-panel .ipp-arch__title { font-size: 25px; }
    .ipp-panel .ipp-arch__head { margin-bottom: 20px; padding-bottom: 16px; }
    /* Apilado, la tarjeta del archivo recupera su filete para que se
       distinga una de otra sin la rejilla. */
    .ipp-panel .ipp-arch__item { border-top: 1px solid var(--ipp-hair); padding-top: 16px; }
    .ipp-panel .ipp-arch__item:first-child { border-top: 0; padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   11 · LAS TARJETAS DE DATOS DEL CHAT  ·  v2.203.0
   ───────────────────────────────────────────────────────────────────
   Cuando la pregunta la responde la casa —el tiempo de un puerto, el
   ranking, el PCP—, bajo la respuesta aparece una tarjeta con el dato
   real. Se distingue del texto por el fondo y el filete lateral: es
   un dato medido, no una frase del modelo.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-card {
    margin: 12px 0 0;
    padding: 14px 16px;
    background: var(--et-paper, #fff);
    border: 1px solid var(--ipp-hair);
    border-left: 3px solid var(--ipp-navy);
    border-radius: 4px;
}
.ipp-card__title {
    margin: 0 0 2px;
    font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
    color: var(--ipp-ink);
}
.ipp-card__sub {
    margin: 0 0 12px;
    font-size: 11.5px; font-weight: 600; color: var(--ipp-mute);
}
/* Clave a la izquierda, valor a la derecha, alineados en columna con
   cifras tabulares para que los números no bailen. */
.ipp-card__filas {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}
.ipp-card__filas dt { color: var(--ipp-mute); white-space: nowrap; }
.ipp-card__filas dd {
    margin: 0;
    text-align: right;
    font-weight: 700; color: var(--ipp-ink);
    font-variant-numeric: tabular-nums;
}
.ipp-card__cta {
    display: inline-block;
    margin: 12px 0 0;
    font-size: 12.5px; font-weight: 700;
    color: var(--ipp-navy);
    text-decoration: underline; text-underline-offset: 2px;
    text-decoration-color: #A9C6D8;
}
.ipp-card__cta:hover { text-decoration-color: var(--ipp-navy); }
/* El ranking lleva muchas filas: se aprieta un punto. */
.ipp-card--ranking .ipp-card__filas { gap: 5px 12px; font-size: 12.5px; }

@media (max-width: 720px) {
    .ipp-card { padding: 12px 14px; }
    .ipp-card__filas { font-size: 12.5px; gap: 5px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   12 · LA PUERTA PARA QUIEN NO TIENE CUENTA  ·  v2.203.0
   ───────────────────────────────────────────────────────────────────
   Sin sesión, /plus/ enseña SOLO la invitación. Se centra en la
   página y se le da aire para que no parezca una página rota, sino
   una puerta.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46vh;
    padding: 20px 0 40px;
}
.ipp-notice--solo {
    max-width: 620px;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 30px 32px;
    border-left: 3px solid var(--ipp-navy);
}
.ipp-notice--solo p { font-size: 15px; line-height: 1.62; }
.ipp-notice--solo .ipp-btn { padding: 12px 22px; font-size: 14px; }

@media (max-width: 720px) {
    .ipp-gate { min-height: 40vh; padding: 10px 0 30px; }
    .ipp-notice--solo { padding: 22px 20px; }
    .ipp-notice--solo .ipp-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   13 · TUS ARTÍCULOS GUARDADOS  ·  v2.204.0
   ───────────────────────────────────────────────────────────────────
   El cuadrante de la izquierda ya no es Opinión: es la hemeroteca del
   lector. Usa las MISMAS tarjetas que Destacados (.ipp-dest), así que
   aquí solo hace falta el fondo de la columna y el botón de quitar.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-col--fav { background: var(--et-paper, #fff); }

/* El botón vive al final del titular, en la misma línea de texto: por
   eso es inline-flex y baja un pelo con vertical-align, para sentarse
   sobre la línea base y no sobre el borde superior de la caja. */
/* v2.205.0 · MÁS PEQUEÑO Y A LA ALTURA DE LA FIRMA.
   El botón competía con el titular: 10,5px en negrita 700, con
   marco a 3px de radio y 9px de aire, pesaba casi como una palabra
   más del título. Ahora se mide contra la línea de autor · custom
   —9,5px, peso 600, marco de un pelo— y el icono baja de 15 a 11px.

   `vertical-align: 2px` lo sube sobre la línea base para que quede
   ópticamente centrado con la altura de las minúsculas del titular,
   no colgando de ellas. */
.ipp-fav__off {
    display: inline-flex; align-items: center; gap: 4px;
    vertical-align: 2px;
    margin-left: 7px;
    padding: 2px 7px 2px 6px;
    background: #F7FAFC;
    border: 1px solid var(--et-rule, #DCE7EF);
    border-radius: 2px;
    color: #5A7180;
    font: inherit;
    font-size: 9.5px; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.ipp-fav__off svg { width: 11px; height: 11px; opacity: .8; }
.ipp-fav__off svg { display: block; flex: none; }
/* Al pasar por encima cambia a rojo: el botón dice «Guardado», y lo que
   hace al pulsarlo es lo contrario. El color avisa antes del clic. */
.ipp-fav__off:hover {
    background: #FCF3F4;
    border-color: #E3A2AC;
    color: #C8102E;
}
.ipp-fav__off:hover svg { opacity: 1; }
.ipp-fav__off:focus-visible {
    outline: 2px solid var(--ipp-blue);
    outline-offset: 2px;
}
.ipp-fav__off:disabled { opacity: .45; cursor: wait; }

/* La tarjeta se va con un desvanecido corto en vez de desaparecer de
   golpe: el lector ve QUÉ pieza ha quitado. */
.ipp-dest--fav { transition: opacity .2s ease, transform .2s ease; }
.ipp-dest--fav.is-yendose { opacity: 0; transform: translateX(-8px); }
@media (prefers-reduced-motion: reduce) {
    .ipp-dest--fav { transition: none; }
}

@media (max-width: 720px) {
    .ipp-fav__off { margin-left: 6px; padding: 2px 6px; font-size: 9px; }
    .ipp-bar__nav { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   14 · EL REPASO DE LOS GUARDADOS  ·  v2.205.0
   ───────────────────────────────────────────────────────────────────
   La tarjeta heredaba el hover crema de Destacados (#F3F1E9), que en
   una columna blanca se leía como un marrón sucio. Aquí el realce es
   un filete fino y un azul muy claro de la casa.

   El filete va como `box-shadow: inset` y no como `border`: un borde
   de verdad sumaría 2px al alto de la tarjeta y las de abajo darían
   un salto cada vez que el ratón entra y sale.
   ═══════════════════════════════════════════════════════════════════ */

.ipp-dest--fav:hover {
    background: #F4F9FC;
    box-shadow: inset 0 0 0 1px #D7E6F1;
}

/* ═══════════════════════════════════════════════════════════════════
   15 · EL MURO, PARA QUIEN LLEGA SIN CUENTA  ·  v2.208.0
   ═══════════════════════════════════════════════════════════════════ */

/* El sello pasa de letras a lockup y sube de tamaño. El selector lleva
   `img` delante (0,1,2) por la misma razón de siempre: cualquier
   `… img { height: auto }` global empataría con (0,1,1) y ganaría la
   hoja que se cargue después. */
img.ipp-wall__mark--img {
    display: block;
    height: 32px; width: auto;
    margin: 0 auto 16px;
    background: none; border: 0; padding: 0;
}

/* El texto del muro, centrado y en negrita: es la frase que tiene que
   convencer, no un pie de página. */
.ipp-wall__lede {
    text-align: center;
    font-weight: 700;
    max-width: 46ch;
    margin-left: auto; margin-right: auto;
}

@media (max-width: 720px) {
    img.ipp-wall__mark--img { height: 26px; margin-bottom: 13px; }
}