/*
 * Contenido de las páginas *-info (después de la portada).
 * Los colores y tipografías de cada marca están en styles/info/themes.css (variables --ic-*).
 *
 * Movimiento (scripts/info-content.js):
 *  - [data-ic-reveal] aparece al entrar en pantalla (.is-in). Sin JavaScript todo se ve.
 *  - --ic-read (0→1) rellena la entradilla al leerla.
 *  - --h-p / --h-shift desplazan la historia en horizontal mientras la sección está fija.
 *  - --ic-y (-1→1) mueve los móviles de cada capítulo a distinto ritmo.
 */

/* Con overflow-x: hidden el body se convierte en contenedor de scroll y "sticky" no funciona */
body.info-page.info-page--scroll {
    overflow-x: clip;
}

/* Lo mismo con el aviso de cookies abierto (terxo-consent.css pone overflow: hidden al body) */
html.terxo-cookie-open body.info-page.info-page--scroll {
    overflow: visible;
    overflow-x: clip;
}

.info-page--scroll .info-immersive {
    --ic-gutter: clamp(20px, 5vw, 88px);
    --ic-ease: cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--ic-bg);
    color: var(--ic-ink);
}

.info-immersive [data-ic-section] {
    position: relative;
    font-family: var(--ic-body);
    color: var(--ic-ink);
}

.info-immersive [data-ic-section] *,
.info-immersive .ic-footer * {
    box-sizing: border-box;
}

.info-immersive .ic-wrap {
    width: min(1180px, 100% - var(--ic-gutter) * 2 - 24px);
    margin-inline: auto;
}

/* —— Piezas comunes —— */
.info-immersive .ic-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--ic-label-font, var(--ic-body));
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ic-accent-text, var(--ic-accent));
}

.info-immersive .ic-label::before {
    content: '';
    width: 28px;
    height: 2px;
    background: currentColor;
}

.info-immersive .ic-h2 {
    margin: 16px 0 0;
    padding: 0;
    font-family: var(--ic-display);
    font-size: clamp(2rem, 4.2vw, 3.9rem);
    font-style: var(--ic-title-style, normal);
    font-weight: var(--ic-title-weight, 700);
    line-height: 1.04;
    letter-spacing: var(--ic-title-track, -0.02em);
    text-transform: var(--ic-title-case, none);
    color: var(--ic-ink);
    text-wrap: balance;
    background: none;
    border: 0;
    box-shadow: none;
}

.info-immersive .ic-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 40px;
    margin-bottom: clamp(32px, 5vh, 56px);
}

.info-immersive .ic-link {
    display: inline-flex;
    gap: 6px;
    font-weight: 700;
    color: var(--ic-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--ic-accent);
    padding-bottom: 3px;
}

.info-immersive .ic-btn,
.info-immersive .ic-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    min-height: 50px;
    padding: 0 26px;
    font-family: var(--ic-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ic-accent-ink);
    background: var(--ic-accent);
    border-radius: var(--ic-btn-radius, var(--ic-radius));
    text-decoration: none;
    transition: transform 0.35s var(--ic-ease), box-shadow 0.35s var(--ic-ease);
}

.info-immersive .ic-btn:hover,
.info-immersive .ic-footer__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ic-accent) 80%, #000);
}

.info-immersive .ic-btn span[aria-hidden],
.info-immersive .ic-footer__cta span[aria-hidden] {
    transition: transform 0.35s var(--ic-ease);
}

.info-immersive .ic-btn:hover span[aria-hidden],
.info-immersive .ic-footer__cta:hover span[aria-hidden] {
    transform: translateX(5px);
}

.info-immersive a:focus-visible {
    outline: 3px solid var(--ic-accent);
    outline-offset: 4px;
}

/* —— Aparición al hacer scroll (solo con JavaScript) —— */
body.ic-js .info-immersive [data-ic-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.9s var(--ic-ease),
        transform 0.9s var(--ic-ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}

body.ic-js .info-immersive [data-ic-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* =========================================================
   En corto
   ========================================================= */
.info-immersive .ic-intro {
    padding: clamp(90px, 16vh, 170px) 0 clamp(70px, 11vh, 130px);
    background: var(--ic-bg);
}

.info-immersive .ic-intro__statement {
    max-width: 30ch;
    margin: 28px 0 0;
    font-family: var(--ic-display);
    font-size: clamp(1.7rem, 3.4vw, 3.1rem);
    font-style: var(--ic-title-style, normal);
    font-weight: var(--ic-intro-weight, 600);
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--ic-ink);
}

/* Se va "leyendo": las líneas pasan de tenues a plenas de arriba abajo */
body.ic-js .info-immersive .ic-intro__statement {
    color: transparent;
    background-image: linear-gradient(180deg, var(--ic-ink) 0 50%, color-mix(in srgb, var(--ic-ink) 24%, transparent) 50% 100%);
    background-size: 100% 200%;
    background-position: 0 calc(100% - var(--ic-read, 1) * 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* A la derecha, los tres mejor valorados en abanico sobre el panel de la marca */
.info-immersive .ic-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.58fr);
    align-items: end;
    gap: clamp(32px, 6vw, 96px);
}

.info-immersive .ic-intro__visual {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1.02;
}

.info-immersive .ic-intro__panel {
    position: absolute;
    inset: 16% 0 0;
    border-radius: var(--ic-panel-radius, 28px);
    background: var(--ic-panel);
}

.info-immersive .ic-intro__phone {
    position: absolute;
    bottom: 9%;
    left: 50%;
    width: 36%;
    transform: translateX(-50%) rotate(var(--fan-r, 0deg));
    transform-origin: 50% 100%;
    transition:
        left 1.1s var(--ic-ease) 0.25s,
        transform 1.1s var(--ic-ease) 0.25s;
}

.info-immersive .ic-intro__phone img {
    display: block;
    width: 100%;
    height: auto;
    clip-path: inset(0.4% 1.2% round 13% / 6%);
}

/* El mejor valorado, delante y en el centro */
.info-immersive .ic-intro__phone--1 {
    z-index: 3;
    width: 40%;
}

.info-immersive .ic-intro__phone--2 {
    z-index: 2;
    left: 27%;
    --fan-r: -11deg;
}

.info-immersive .ic-intro__phone--3 {
    z-index: 1;
    left: 73%;
    --fan-r: 11deg;
}

/* Llegan apilados y se abren al aparecer */
@media (prefers-reduced-motion: no-preference) {
    body.ic-js .info-immersive .ic-intro__visual:not(.is-in) .ic-intro__phone {
        left: 50%;
        --fan-r: 0deg;
    }
}

.info-immersive .ic-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: clamp(48px, 8vh, 90px) 0 0;
    padding: 0;
}

.info-immersive .ic-fact {
    padding: 22px 24px 0 0;
    border-top: 1px solid var(--ic-line);
}

.info-immersive .ic-fact + .ic-fact {
    padding-left: 24px;
    border-left: 1px solid var(--ic-line);
}

.info-immersive .ic-fact dt {
    font-family: var(--ic-label-font, var(--ic-body));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ic-muted);
}

.info-immersive .ic-fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 12px 0 0;
    font-family: var(--ic-display);
    font-size: clamp(1.5rem, 2.8vw, 2.6rem);
    font-weight: var(--ic-title-weight, 700);
    line-height: 1.05;
    color: var(--ic-ink);
    font-variant-numeric: tabular-nums;
}

.info-immersive .ic-fact dd a {
    color: inherit;
    text-decoration: none;
    font-size: 0.62em;
    border-bottom: 2px solid var(--ic-accent);
}

.info-immersive .ic-fact dd small {
    padding: 3px 9px;
    font-family: var(--ic-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ic-accent-ink);
    background: var(--ic-accent);
    border-radius: 999px;
}

/* =========================================================
   Historia: fija y en horizontal en escritorio
   ========================================================= */
.info-immersive .ic-history {
    height: calc(100vh + var(--n, 6) * 36vh);
    background: var(--ic-bg-2);
}

.info-immersive .ic-history__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(28px, 6vh, 64px);
    padding-top: var(--header-height, 76px);
    overflow: hidden;
}

.info-immersive .ic-history__viewport {
    width: 100%;
}

.info-immersive .ic-history__track {
    --col: clamp(270px, 28vw, 400px);
    position: relative;
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0 max(calc(var(--ic-gutter) + 12px), calc((100vw - 1180px) / 2));
    list-style: none;
    transform: translate3d(calc(var(--h-p, 0) * var(--h-shift, 0px) * -1), 0, 0);
    will-change: transform;
}

/* Línea del tiempo que atraviesa todos los hitos */
.info-immersive .ic-history__track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(clamp(4rem, 8.6vw, 8rem) * 0.9 + 22px);
    height: 1px;
    background: var(--ic-line);
}

.info-immersive .ic-milestone {
    position: relative;
    width: var(--col);
    flex: 0 0 auto;
    padding-right: clamp(28px, 3vw, 48px);
}

.info-immersive .ic-milestone__year {
    display: block;
    font-family: var(--ic-display);
    font-size: clamp(4rem, 8.6vw, 8rem);
    font-weight: var(--ic-year-weight, 800);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ic-ink) 45%, transparent);
    transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}

.info-immersive .ic-milestone.is-current .ic-milestone__year,
body:not(.ic-js) .info-immersive .ic-milestone__year {
    color: var(--ic-accent-text, var(--ic-accent));
    -webkit-text-stroke-color: transparent;
}

.info-immersive .ic-milestone__dot {
    position: relative;
    display: block;
    width: 13px;
    height: 13px;
    margin: 16px 0 26px;
    border-radius: 50%;
    background: var(--ic-bg-2);
    box-shadow: inset 0 0 0 2px var(--ic-accent);
    transition: background 0.4s ease, transform 0.4s var(--ic-ease);
}

.info-immersive .ic-milestone.is-current .ic-milestone__dot {
    background: var(--ic-accent);
    transform: scale(1.35);
}

.info-immersive .ic-milestone__title {
    margin: 0;
    font-family: var(--ic-display);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-style: var(--ic-title-style, normal);
    font-weight: var(--ic-title-weight, 700);
    line-height: 1.15;
    color: var(--ic-ink);
}

.info-immersive .ic-milestone__body {
    margin: 10px 0 0;
    max-width: 34ch;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ic-muted);
}

.info-immersive .ic-history__bar {
    position: relative;
    height: 2px;
    background: var(--ic-line);
}

.info-immersive .ic-history__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--h-p, 0) * 100%);
    background: var(--ic-accent);
}

/* Sin JavaScript: la línea se recorre con su propia barra */
body:not(.ic-js) .info-immersive .ic-history {
    height: auto;
}

body:not(.ic-js) .info-immersive .ic-history__sticky {
    position: static;
    height: auto;
    padding: 100px 0;
}

body:not(.ic-js) .info-immersive .ic-history__viewport {
    overflow-x: auto;
}

/* =========================================================
   Capítulos
   ========================================================= */
.info-immersive .ic-chapter {
    padding: clamp(90px, 15vh, 160px) 0;
    background: var(--ic-bg);
    overflow: clip;
}

.info-immersive .ic-chapter--flip {
    background: var(--ic-bg-2);
}

.info-immersive .ic-chapter__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: center;
    gap: clamp(36px, 6vw, 110px);
}

.info-immersive .ic-chapter--flip .ic-chapter__copy {
    order: 2;
}

.info-immersive .ic-chapter__kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--ic-label-font, var(--ic-body));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ic-muted);
}

.info-immersive .ic-chapter__num {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    font-family: var(--ic-display);
    font-size: 0.95rem;
    letter-spacing: 0;
    color: var(--ic-accent-ink);
    background: var(--ic-accent);
    border-radius: var(--ic-chip-radius, 999px);
}

.info-immersive .ic-chapter__body {
    max-width: 50ch;
    margin: 24px 0 0;
    font-size: clamp(1.02rem, 1.15vw, 1.14rem);
    line-height: 1.68;
    color: var(--ic-text, var(--ic-muted));
}

.info-immersive .ic-chapter__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.info-immersive .ic-chapter__facts li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ic-ink);
    background: var(--ic-card);
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-chip-radius, 999px);
}

.info-immersive .ic-chapter__facts li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ic-accent);
}

.info-immersive .ic-chapter__models {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 30px 0 0;
}

.info-immersive .ic-chapter__model {
    display: inline-flex;
    gap: 8px;
    padding-bottom: 4px;
    font-weight: 700;
    color: var(--ic-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--ic-accent);
}

.info-immersive .ic-chapter__model span {
    transition: transform 0.35s var(--ic-ease);
}

.info-immersive .ic-chapter__model:hover span {
    transform: translateX(5px);
}

/* Visual: panel de color, letra gigante y los móviles flotando a distinto ritmo */
.info-immersive .ic-chapter__visual {
    position: relative;
    aspect-ratio: 1 / 0.98;
    margin: 0;
}

.info-immersive .ic-chapter__panel {
    position: absolute;
    inset: 10% 0 0;
    overflow: hidden;
    border-radius: var(--ic-panel-radius, 28px);
    background: var(--ic-panel);
}

body.ic-js .info-immersive .ic-chapter__visual[data-ic-reveal] {
    transform: none;
}

body.ic-js .info-immersive .ic-chapter__visual .ic-chapter__panel {
    clip-path: inset(100% 0 0 0 round var(--ic-panel-radius, 28px));
    transition: clip-path 1.2s var(--ic-ease);
}

body.ic-js .info-immersive .ic-chapter__visual.is-in .ic-chapter__panel {
    clip-path: inset(0 0 0 0 round var(--ic-panel-radius, 28px));
}

.info-immersive .ic-chapter__glyph {
    position: absolute;
    right: 5%;
    top: 12%;
    font-family: var(--ic-display);
    font-size: clamp(9rem, 21vw, 19rem);
    font-weight: 800;
    line-height: 0.8;
    color: var(--ic-glyph);
    pointer-events: none;
    translate: 0 calc(var(--ic-y, 0) * 46px);
}

.info-immersive .ic-phone {
    position: absolute;
    display: block;
}

.info-immersive .ic-phone img {
    display: block;
    width: 100%;
    height: auto;
    /* Las fotos traen fondo blanco: se recortan las esquinas */
    clip-path: inset(0.4% 1.2% round 13% / 6%);
    transition: transform 0.5s var(--ic-ease);
}

.info-immersive .ic-phone:hover img {
    transform: translateY(-8px);
}

.info-immersive .ic-phone--main {
    left: 18%;
    bottom: 3%;
    width: 38%;
    z-index: 2;
    translate: 0 calc(var(--ic-y, 0) * -40px);
}

.info-immersive .ic-phone--alt {
    left: 50%;
    bottom: 13%;
    width: 30%;
    z-index: 1;
    rotate: 7deg;
    translate: 0 calc(var(--ic-y, 0) * -90px);
}

.info-immersive .ic-chapter--flip .ic-phone--main {
    left: auto;
    right: 18%;
}

.info-immersive .ic-chapter--flip .ic-phone--alt {
    left: auto;
    right: 50%;
    rotate: -7deg;
}

.info-immersive .ic-chapter--flip .ic-chapter__glyph {
    right: auto;
    left: 5%;
}

body.ic-js .info-immersive .ic-chapter__visual .ic-phone {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
    transition: opacity 1s var(--ic-ease), transform 1.2s var(--ic-ease);
}

body.ic-js .info-immersive .ic-chapter__visual.is-in .ic-phone {
    opacity: 1;
    transform: none;
}

body.ic-js .info-immersive .ic-chapter__visual.is-in .ic-phone--main {
    transition-delay: 0.25s;
}

body.ic-js .info-immersive .ic-chapter__visual.is-in .ic-phone--alt {
    transition-delay: 0.45s;
}

/* =========================================================
   Los mejor valorados
   ========================================================= */
.info-immersive .ic-models {
    padding: clamp(90px, 14vh, 150px) 0;
    background: var(--ic-bg);
}

.info-immersive .ic-models__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-immersive .ic-model a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 14px 16px;
    color: var(--ic-ink);
    text-decoration: none;
    background: var(--ic-card);
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius);
    transition: transform 0.4s var(--ic-ease), box-shadow 0.4s var(--ic-ease), border-color 0.3s;
}

.info-immersive .ic-model a:hover {
    transform: translateY(-6px);
    border-color: var(--ic-accent);
    box-shadow: 0 24px 40px -26px rgba(0, 0, 0, 0.45);
}

.info-immersive .ic-model__img {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    padding: 10px 0;
    border-radius: calc(var(--ic-radius) * 0.7);
}

.info-immersive .ic-model__img img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.5s var(--ic-ease);
}

.info-immersive .ic-model a:hover .ic-model__img img {
    transform: scale(1.05);
}

.info-immersive .ic-model__name {
    margin-top: 14px;
    font-family: var(--ic-display);
    font-size: 1rem;
    font-weight: var(--ic-title-weight, 700);
    line-height: 1.2;
}

.info-immersive .ic-model__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.82rem;
    color: var(--ic-muted);
}

.info-immersive .ic-model__meta b {
    padding: 2px 8px;
    font-weight: 700;
    color: var(--ic-accent-ink);
    background: var(--ic-accent);
    border-radius: 999px;
}

/* =========================================================
   Análisis Terxo
   ========================================================= */
.info-immersive .ic-verdict {
    padding: clamp(90px, 14vh, 150px) 0;
    background: var(--ic-bg-2);
}

.info-immersive .ic-verdict__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.info-immersive .ic-verdict__take {
    position: relative;
    margin: 0;
    padding: 0 0 0 clamp(20px, 2vw, 30px);
    font-family: var(--ic-display);
    font-size: clamp(1.25rem, 1.9vw, 1.7rem);
    font-style: var(--ic-title-style, normal);
    font-weight: var(--ic-quote-weight, 500);
    line-height: 1.42;
    color: var(--ic-ink);
    border-left: 3px solid var(--ic-accent);
    background: none;
    box-shadow: none;
}

.info-immersive .ic-verdict__lists {
    display: grid;
    gap: 16px;
}

.info-immersive .ic-verdict__card {
    padding: 22px 24px;
    background: var(--ic-card);
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-radius);
}

.info-immersive .ic-verdict__card h3 {
    margin: 0 0 12px;
    font-family: var(--ic-label-font, var(--ic-body));
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ic-muted);
}

.info-immersive .ic-verdict__card ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-immersive .ic-verdict__card li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ic-ink);
}

.info-immersive .ic-verdict__card li::before {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
}

.info-immersive .ic-verdict__card--plus li::before {
    content: '✓';
    color: #fff;
    background: #1f9d55;
}

.info-immersive .ic-verdict__card--minus li::before {
    content: '!';
    color: #fff;
    background: #d97706;
}

.info-immersive .ic-verdict__final {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 40px;
    margin-top: clamp(28px, 5vh, 48px);
    padding: clamp(22px, 3vw, 34px);
    color: var(--ic-accent-ink);
    background: var(--ic-accent);
    border-radius: var(--ic-radius);
}

.info-immersive .ic-verdict__label {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--ic-label-font, var(--ic-body));
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.8;
}

.info-immersive .ic-verdict__text {
    margin: 0;
    font-family: var(--ic-display);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: var(--ic-quote-weight, 500);
    line-height: 1.45;
}

.info-immersive .ic-verdict__final .ic-btn {
    color: var(--ic-accent);
    background: var(--ic-accent-ink);
}

/* =========================================================
   Índice final
   ========================================================= */
.info-immersive .ic-footer {
    padding: clamp(70px, 11vh, 120px) 0 clamp(80px, 12vh, 130px);
    background: var(--ic-bg);
    border-top: 1px solid var(--ic-line);
    font-family: var(--ic-body);
}

.info-immersive .ic-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 40px;
}

.info-immersive .ic-footer__nav a {
    padding: 10px 18px;
    font-weight: 600;
    color: var(--ic-ink);
    text-decoration: none;
    border: 1px solid var(--ic-line);
    border-radius: var(--ic-chip-radius, 999px);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.info-immersive .ic-footer__nav a:hover {
    color: var(--ic-accent-ink);
    background: var(--ic-accent);
    border-color: var(--ic-accent);
}

.info-immersive .ic-footer__cta {
    min-height: 58px;
    padding: 0 30px;
    font-size: 1.1rem;
}

/* =========================================================
   Tablet y móvil
   ========================================================= */
@media (max-width: 900px) {
    .info-immersive .ic-intro__grid {
        display: block;
    }

    .info-immersive .ic-intro__visual {
        display: none;
    }

    .info-immersive .ic-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .info-immersive .ic-fact:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .info-immersive .ic-history {
        height: auto;
    }

    .info-immersive .ic-history__sticky {
        position: static;
        height: auto;
        padding: 90px 0 70px;
        gap: 36px;
        overflow: visible;
    }

    .info-immersive .ic-history__track {
        flex-direction: column;
        width: auto;
        padding: 0 calc(var(--ic-gutter) + 4px);
        transform: none;
    }

    .info-immersive .ic-history__track::before {
        left: calc(var(--ic-gutter) + 10px);
        right: auto;
        top: 0;
        bottom: 0;
        width: 1px;
        height: auto;
    }

    .info-immersive .ic-milestone {
        width: auto;
        padding: 0 0 34px 34px;
    }

    .info-immersive .ic-milestone__dot {
        position: absolute;
        left: 0;
        top: 0.9rem;
        margin: 0;
    }

    .info-immersive .ic-milestone__year {
        font-size: 2.8rem;
        margin-bottom: 8px;
    }

    .info-immersive .ic-history__bar {
        display: none;
    }

    .info-immersive .ic-chapter__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .info-immersive .ic-chapter--flip .ic-chapter__copy {
        order: 0;
    }

    .info-immersive .ic-chapter__visual {
        width: min(100%, 460px);
        margin-inline: auto;
    }

    .info-immersive .ic-models__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .info-immersive .ic-verdict__grid,
    .info-immersive .ic-verdict__final {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .info-immersive .ic-models__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-immersive .ic-fact,
    .info-immersive .ic-fact + .ic-fact {
        padding: 18px 0 0;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ic-js .info-immersive [data-ic-reveal],
    body.ic-js .info-immersive .ic-chapter__visual .ic-phone,
    body.ic-js .info-immersive .ic-chapter__visual .ic-chapter__panel {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }
}

/* Sin movimiento, la historia no se desplaza sola: en escritorio se recorre con su barra, como sin JavaScript */
@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
    .info-immersive .ic-history {
        height: auto;
    }

    .info-immersive .ic-history__sticky {
        position: static;
        height: auto;
        padding: 100px 0;
    }

    .info-immersive .ic-history__viewport {
        overflow-x: auto;
    }

    .info-immersive .ic-history__bar {
        display: none;
    }
}

/* Las fotos traen fondo blanco: multiply lo hace desaparecer sobre cualquier color */
.info-immersive .ic-phone img,
.info-immersive .ic-intro__phone img {
    mix-blend-mode: multiply;
}

/* Ir a un capítulo con desplazamiento suave */
html:has(body.info-page--scroll) {
    scroll-behavior: smooth;
}

.info-immersive [data-ic-section] {
    scroll-margin-top: 70px;
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.info-page--scroll) {
        scroll-behavior: auto;
    }
}

/* =========================================================
   Versión con datos (brand-story con `layout`)
   Sin antetítulos: cada bloque se presenta con su título.
   ========================================================= */

.info-immersive .ic-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.info-immersive .ic-sec-head .ic-h2:first-child {
    margin-top: 0;
}

.info-immersive .ic-sec-sub {
    max-width: 56ch;
    margin: 14px 0 0;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.6;
    color: var(--ic-text, var(--ic-muted));
}

/* —— Entradilla —— */
.info-immersive .ic-intro--v2 .ic-intro__statement {
    margin-top: 0;
}

.info-immersive .ic-intro__note {
    max-width: 48ch;
    margin: clamp(24px, 3.5vh, 36px) 0 0;
    padding-top: 18px;
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    color: var(--ic-text, var(--ic-muted));
    border-top: 1px solid var(--ic-line);
}

/* —— Capítulos: la serie es el título; el gancho, la entradilla —— */
.info-immersive .ic-chapter--v2 .ic-chapter__title {
    margin-top: 0;
    font-size: clamp(2.6rem, 5.6vw, 5rem);
    line-height: 0.98;
}

.info-immersive .ic-chapter__stand {
    max-width: 28ch;
    margin: 16px 0 0;
    font-family: var(--ic-display);
    font-size: clamp(1.25rem, 1.9vw, 1.65rem);
    font-style: var(--ic-title-style, normal);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.01em;
    color: var(--ic-ink);
    text-wrap: balance;
}

.info-immersive .ic-chapter__data {
    display: flex;
    flex-wrap: wrap;
    gap: 14px clamp(28px, 3vw, 48px);
    margin: 28px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--ic-line);
}

.info-immersive .ic-chapter__data > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-immersive .ic-chapter__data dt {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ic-muted);
}

.info-immersive .ic-chapter__data dd {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ic-ink);
}

.info-immersive .ic-chapter__data a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ic-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.25s;
}

.info-immersive .ic-chapter__data a:hover,
.info-immersive .ic-chapter__data a:focus-visible {
    text-decoration-color: var(--ic-accent);
}

.info-immersive .ic-chapter__data b {
    margin-left: 6px;
    color: var(--ic-accent-text, var(--ic-accent));
}

/* —— El que destaca en cada cosa —— */
.info-immersive .ic-picks {
    padding: clamp(90px, 14vh, 150px) 0;
    background: var(--ic-bg-2, var(--ic-bg));
}

.info-immersive .ic-picks__list {
    display: grid;
    /* --n: nº de tarjetas (un móvil que gana dos cifras va en una sola) */
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    gap: 0 clamp(24px, 3vw, 48px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-immersive .ic-pick {
    display: grid;
    grid-template-columns: clamp(72px, 7vw, 104px) minmax(0, 1fr);
    grid-template-areas:
        "phone title"
        "phone model"
        "phone value";
    align-content: start;
    column-gap: 20px;
    row-gap: 6px;
    padding-top: 26px;
    border-top: 2px solid var(--ic-ink);
}

.info-immersive .ic-pick__title {
    grid-area: title;
    margin: 0;
    font-family: var(--ic-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ic-muted);
}

.info-immersive .ic-pick__phone {
    grid-area: phone;
    display: block;
    align-self: start;
}

.info-immersive .ic-pick__phone img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.5s var(--ic-ease);
}

.info-immersive .ic-pick:hover .ic-pick__phone img {
    transform: translateY(-4px) rotate(-2deg);
}

.info-immersive .ic-pick__model {
    grid-area: model;
    margin: 0;
    font-family: var(--ic-display);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-style: var(--ic-title-style, normal);
    font-weight: var(--ic-title-weight, 700);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.info-immersive .ic-pick__model a {
    color: var(--ic-ink);
    text-decoration: none;
}

.info-immersive .ic-pick__model a:hover,
.info-immersive .ic-pick__model a:focus-visible {
    color: var(--ic-accent-text, var(--ic-accent));
}

.info-immersive .ic-pick__value {
    grid-area: value;
    margin: 4px 0 0;
    font-size: 1rem;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    color: var(--ic-text, var(--ic-muted));
}

/* —— Lanzamientos por año —— */
.info-immersive .ic-rhythm {
    padding: clamp(90px, 14vh, 150px) 0;
    background: var(--ic-bg);
}

.info-immersive .ic-rhythm__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ic-text, var(--ic-muted));
}

.info-immersive .ic-rhythm__legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-immersive .ic-rhythm__legend .ic-rhythm__seg {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* Tonos de cada serie: por defecto, el acento mezclado con el fondo; un tema oscuro puede fijarlos (--ic-seg-*) */
.info-immersive .ic-rhythm__seg {
    display: block;
    background: var(--ic-seg-0, var(--ic-accent));
}

.info-immersive .ic-rhythm__seg--1 {
    background: var(--ic-seg-1, color-mix(in srgb, var(--ic-accent) 62%, var(--ic-bg)));
}

.info-immersive .ic-rhythm__seg--2 {
    background: var(--ic-seg-2, color-mix(in srgb, var(--ic-accent) 34%, var(--ic-bg)));
}

.info-immersive .ic-rhythm__seg--3 {
    background: var(--ic-seg-3, color-mix(in srgb, var(--ic-accent) 18%, var(--ic-bg)));
}

.info-immersive .ic-rhythm__seg--other {
    background: var(--ic-seg-other, color-mix(in srgb, var(--ic-ink) 16%, var(--ic-bg)));
}

.info-immersive .ic-rhythm__chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(6px, 1.4vw, 20px);
    height: clamp(240px, 36vh, 360px);
    margin: 0;
    padding: 0 0 2px;
    list-style: none;
    border-bottom: 2px solid var(--ic-ink);
}

.info-immersive .ic-rhythm__year {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
    height: 100%;
    padding-bottom: 34px;
}

.info-immersive .ic-rhythm__total {
    margin-bottom: 8px;
    font-size: 0.98rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--ic-ink);
}

.info-immersive .ic-rhythm__bar {
    display: flex;
    flex-direction: column-reverse;
    height: calc(var(--h) * (100% - 30px));
    min-height: 6px;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    transform-origin: bottom;
}

.info-immersive .ic-rhythm__bar .ic-rhythm__seg {
    flex: var(--s) 0 0;
    min-height: 0;
}

.info-immersive .ic-rhythm__bar .ic-rhythm__seg + .ic-rhythm__seg {
    border-bottom: 2px solid var(--ic-bg);
}

.info-immersive .ic-rhythm__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--ic-muted);
}

/* El año en curso todavía no ha terminado */
.info-immersive .ic-rhythm__year.is-partial .ic-rhythm__bar {
    opacity: 0.72;
}

.info-immersive .ic-rhythm__year.is-partial .ic-rhythm__label::after {
    content: "*";
}

@media (prefers-reduced-motion: no-preference) {
    body.ic-js .info-immersive .ic-rhythm__chart[data-ic-reveal] {
        transform: none;
    }

    body.ic-js .info-immersive .ic-rhythm__chart .ic-rhythm__bar {
        transform: scaleY(0);
        transition: transform 1s var(--ic-ease);
        transition-delay: calc(var(--i, 0) * 70ms + 150ms);
    }

    body.ic-js .info-immersive .ic-rhythm__chart.is-in .ic-rhythm__bar {
        transform: none;
    }
}

@media (max-width: 900px) {
    .info-immersive .ic-picks__list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
    }

    .info-immersive .ic-pick {
        grid-template-columns: 84px minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .info-immersive .ic-rhythm__chart {
        gap: 4px;
        height: 240px;
    }

    .info-immersive .ic-rhythm__total {
        font-size: 0.8rem;
    }

    .info-immersive .ic-rhythm__label {
        font-size: 0.75rem;
        letter-spacing: -0.02em;
    }

    .info-immersive .ic-chapter__data {
        gap: 14px 24px;
    }
}