/* ============================================================
   PRISMA · contenido.css
   Solo para redes-sociales.html ("Contenido & Redes").
   Va DESPUÉS de css/main.css y de css/relato.css (el kit "Relato" de
   Soluciones: capítulos, pantallas, carrusel, escena fija, ventana con
   pestañas, galería, plegables, notas). Aquí viven las piezas propias
   de esta página. Prefijo cr- para lo nuevo; el cotizador (.smm-*) y el
   explorador de perfiles (.ig-*) conservan sus clases porque las usan
   scripts/generate.js, js/redes-sociales.js y js/social-explorer.js.

   Ritmo de la página (técnicas de Apple que eligió el cliente):
   portada con palabra que rota (T09) · resumen en carrusel (T03) ·
   capítulos en negro y carbón con una idea por pantalla y doble capa
   de lectura (T01, T02, T13) · dos ventanas con pestañas (T10) · el
   ciclo como escena fija (T06) · un solo capítulo claro para la
   calculadora, con el resumen como tarjeta de plan (T13, T15) · los
   casos como galería horizontal (T12) · las otras formas de trabajar
   como mosaico de tarjetas con '+' (T11) · una cifra grande (T04).
   Titulares de historia a 56-80 px y en dos líneas como máximo en
   escritorio (T01); .rl-title--m (44 px) solo en la calculadora, el
   mosaico, las galerías, el ciclo y las preguntas.
   Referencias de la segunda tanda (encima de lo anterior): el mes de 30
   cuadros que se depura con Flip (cont-04), el cilindro de palabras
   (cont-06), el ciclo como anillo 3D dentro de la escena fija (cont-01),
   el plan como un feed que se llena (cont-08), los reels a sala llena en
   la pestaña Video (cont-05), la pieza que se convierte en cada formato
   con las versiones del panel (cont-03), el cierre del mes como historias
   (cont-09), el muro de reels y piezas reales (cont-02) y, en cada
   bloque, una línea a la vista y el detalle detrás de "Ver por qué"
   (.cr-why, sobre el plegable del kit).

   Colores: solo tokens. Dentro de un capítulo (.rl-ch) los de main.css
   (--text-on-ink, --line-on-ink…) y los del kit (--rl-fg, --rl-surface,
   --rl-hot…) cambian solos; en el claro --text-on-ink pasa a tinta.
   Estados ocultos para animar: SOLO bajo html.cr-anim (lo pone
   js/contenido.js cuando main.js anima y no hay movimiento reducido).
   Sin JS, todo se ve en su estado final.
   ============================================================ */

.pg-cr {
  --cr-line-2: rgb(var(--fg-rgb) / .24);    /* trazos de diagrama: más presentes que el filete */
  --cr-dim: rgb(var(--fg-rgb) / .28);       /* texto apagado que se enciende con el scroll */
}
.pg-cr [id] { scroll-margin-top: 96px; }
/* Titulares partidos en líneas equilibradas y texto corrido sin huérfanas. */
.pg-cr main :is(h2, h3, .cta__title, .cr-start__yes) { text-wrap: balance; }
.pg-cr main p { text-wrap: pretty; }

/* Tachado que se dibuja (también en dos líneas: el fondo de un elemento en
   línea se reparte entre sus trozos, así el trazo recorre la frase entera). */
.cr-strike {
  text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 58% / 100% 2px;
  transition: background-size 1s var(--ease-enter) .15s;
}
html.cr-anim .cr-strike:not(.is-struck) { background-size: 0% 2px; }

/* Lista de formatos detrás de un '+' (pestañas de Producción) y, sin JS,
   la de cada caso de la galería. */
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chips li, .cr-case__formats li {
  padding: 7px 13px; border: 1px solid var(--rl-line); border-radius: 999px;
  font-size: .9rem; line-height: 1.25; color: var(--rl-fg);
}

/* ============================================================
   1 · PORTADA (T09: la palabra que rota la pone js/relato.js)
   ============================================================ */
.cr-hero { padding: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.cr-hero__inner {
  position: relative; flex: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 96px); align-items: center;
  padding-top: 112px; padding-bottom: 96px;
}
.cr-hero__text { position: relative; z-index: 2; }
.cr-hero .crumbs { margin-bottom: 26px; }
/* --fs-display (css/main.css): el titular de portada de toda la familia de
   Soluciones. Tres renglones fijos: "Creamos el contenido / de tu marca /
   cada mes." La palabra que rota es la última de su renglón, así el resto
   del titular no se mueve mientras cambia (en pantallas angostas, donde
   "de tu lanzamiento" no cabe, va sola en el suyo). */
.cr-hero__title {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); max-width: none;
}
.cr-hero__title .rl-rotate__w { padding: 0 .08em .02em; }
.cr-br-narrow { display: none; }
@media (max-width: 1180px) {
  .cr-br-wide { display: none; }
  .cr-br-narrow { display: inline; }
  /* la palabra empieza su renglón: el borde del texto, alineado con el resto */
  .cr-hero__title .rl-rotate__w { margin-left: -.08em; }
}
.cr-hero__lead { margin-top: 30px; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-on-ink-2); }
.cr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
/* Rótulo de la corriente (son piezas de clientes reales) con su pausa. */
.cr-hero__note {
  position: absolute; z-index: 3; right: var(--gutter); bottom: 24px;
  display: flex; align-items: center; gap: 10px;
  width: auto; max-width: none; margin: 0; padding: 0;
  font-size: .8rem; letter-spacing: .01em;
}
.cr-hero__note a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: rgb(var(--ink-rgb) / .78); border: 1px solid var(--line-on-ink); color: var(--text-on-ink-2);
  transition: color .2s var(--ease-ui), border-color .2s var(--ease-ui);
}
.cr-hero__note a:hover { color: var(--text-on-ink); border-color: rgb(var(--fg-rgb) / .4); }
.cr-hero__note .rl-play { width: 40px; height: 40px; background: rgb(var(--ink-rgb) / .78); border: 1px solid var(--line-on-ink); }
.cr-hero__note .rl-play:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.cr-hero__note .rl-play svg { width: 13px; height: 13px; }
.cr-hero__note .rl-play[hidden] { display: none; }

/* La corriente: tres columnas que suben y bajan a distinta velocidad.
   Cada pista va DUPLICADA por js/contenido.js y se desplaza -50 %: como
   cada imagen lleva su hueco como margen (no `gap`), la mitad exacta
   empalma sin salto. Solo transform: corre en el compositor. */
.cr-stream {
  position: relative; align-self: stretch;
  margin: -40px 0 -96px;    /* arranca justo bajo la cabecera: nunca detrás de la navegación */
  contain: size;            /* no aporta alto a la fila: la marca el texto y la corriente se estira */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 80%, transparent 100%);
}
.cr-stream__lane { position: relative; overflow: hidden; }
.cr-stream__lane:nth-child(2) { margin-top: -18%; }
/* El bucle solo corre cuando JS ya duplicó la pista (.is-loop): sin la
   copia, el -50 % mostraría un salto. */
.cr-stream__track { display: flex; flex-direction: column; }
.cr-stream.is-loop .cr-stream__track {
  animation: cr-up var(--cr-dur, 70s) linear infinite;
  will-change: transform;
}
.cr-stream.is-loop .cr-stream__lane--down .cr-stream__track { animation-name: cr-down; }
.cr-stream.is-loop .cr-stream__lane:nth-child(3) .cr-stream__track { animation-delay: calc(var(--cr-dur, 70s) * -.4); }
.cr-stream img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  margin-bottom: 14px; border-radius: 14px; background: var(--ink-2);
  outline: 1px solid rgb(var(--fg-rgb) / .06); outline-offset: -1px;
}
.cr-stream.is-paused .cr-stream__track { animation-play-state: paused; }
@keyframes cr-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes cr-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes cr-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes cr-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (max-width: 860px) {
  .cr-hero { min-height: 0; }
  .cr-hero__inner { grid-template-columns: 1fr; gap: 44px; padding-top: 128px; padding-bottom: 20px; }
  .cr-stream {
    margin: 0 calc(-1 * var(--gutter)); contain: none;
    grid-template-columns: 1fr; row-gap: 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
  .cr-stream__lane:nth-child(2) { margin-top: 0; margin-left: -46px; }
  .cr-stream__lane:nth-child(3) { display: none; }
  .cr-stream__track { flex-direction: row; width: max-content; }
  .cr-stream.is-loop .cr-stream__track { animation-name: cr-left; }
  .cr-stream.is-loop .cr-stream__lane--down .cr-stream__track { animation-name: cr-right; }
  .cr-stream img { width: 104px; margin: 0 10px 0 0; border-radius: 10px; }
  .cr-hero__note { position: static; padding: 14px var(--gutter) 0; }
}

/* ============================================================
   NAVEGACIÓN LOCAL (el mismo aspecto que .rl-nav del kit)
   Pegada arriba (debajo de la cabecera cuando la cabecera está a la
   vista: --cr-top lo escribe js/contenido.js), aparece al dejar la
   portada y se va al llegar al cierre. El filete de abajo cuenta cuánto
   llevas de la página (--cr-read, lineal como todo lo que sigue al scroll).
   ============================================================ */
.pg-cr { --cr-nav-h: 60px; }
.cr-nav {
  position: sticky; top: 0; z-index: 60; height: var(--cr-nav-h); margin-bottom: calc(-1 * var(--cr-nav-h));
  background: var(--ink); border-bottom: 1px solid var(--line-on-ink);   /* opaca: con .96 se leía el titular de detrás */
  transform: translateY(calc(var(--cr-top, 0px) - 110%)); opacity: 0; visibility: hidden;
  transition: transform .55s var(--ease-exit), opacity .3s var(--ease-ui), visibility 0s .55s;
}
.cr-nav.is-on {
  transform: translateY(var(--cr-top, 0px)); opacity: 1; visibility: visible;
  transition: transform .55s var(--ease-enter), opacity .3s var(--ease-ui), visibility 0s;
}
.cr-nav__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
/* html lleva scroll-padding-top: 96px (main.css): con una barra pegada
   arriba, el navegador "corría" detrás de ella al tabular. La barra
   siempre está a la vista: que el navegador no intente acomodarla. */
.cr-nav :is(a, button) { scroll-margin-top: -240px; }
.cr-nav__id {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 36px;
  font-weight: 500; font-size: .95rem; letter-spacing: -0.005em; white-space: nowrap; color: var(--text-on-ink);
}
.cr-nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.cr-nav__scroll { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.cr-nav__scroll::-webkit-scrollbar { display: none; }
.cr-nav__links { display: flex; justify-content: center; gap: 2px; width: max-content; min-width: 100%; }
.cr-nav__links a {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 4px;
  font-size: .9rem; white-space: nowrap; color: var(--text-on-ink-2);
  transition: color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.cr-nav__links a:hover { color: var(--text-on-ink); background: var(--tint-soft); }
.cr-nav__links a.is-on { color: var(--orange); }
/* el tramo activo lleva además un punto debajo: el color solo no basta */
.cr-nav__links a::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--orange); opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease-ui), transform .3s var(--ease-snap);
}
.cr-nav__links a.is-on::after { opacity: 1; transform: none; }
.cr-nav__links a:focus-visible { outline-offset: -2px; }
.cr-nav__cta { flex: none; height: 36px; padding: 0 16px; font-size: .9rem; transition: opacity .3s var(--ease-ui), visibility 0s; }
/* con la cabecera a la vista encima, su "Hablemos" ya está ahí */
.cr-nav.is-under .cr-nav__cta { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-ui), visibility 0s .2s; }
.cr-nav__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange);
  transform-origin: left; transform: scaleX(var(--cr-read, 0));
}
/* Con la barra a la vista, lo que se pega arriba dentro de la página se
   coloca debajo de ella y no por detrás. --cr-chrome = alto ocupado
   arriba (cabecera si está a la vista + barra). */
html.cr-nav-on .pg-cr :is(.smm-summary, .cr-work__text, .cr-faq__head, .cr-start__head) {
  top: calc(var(--cr-chrome, 60px) + 28px); transition: top .55s var(--ease-enter);
}
@media (max-width: 1099px) {
  .cr-nav__id { display: none; }
  .cr-nav__inner { gap: 12px; }
  .cr-nav__links { justify-content: flex-start; }
  .cr-nav__scroll.is-l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
  .cr-nav__scroll.is-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
  .cr-nav__scroll.is-l.is-r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
}
/* Una sola regla para las barras locales de Soluciones: en el teléfono el
   CTA se queda, igual que en .rl-nav del kit (Programas, 360 y los nueve
   programas). Las anclas se deslizan desde el borde izquierdo y el botón
   queda en el margen derecho. */
@media (max-width: 620px) {
  .pg-cr { --cr-nav-h: 52px; }
  .cr-nav__inner { padding-inline: 0 var(--gutter); }
  .cr-nav__links { padding-inline: calc(var(--gutter) - 13px) 8px; }
  .cr-nav__links a { height: 40px; }
}

/* ============================================================
   2 · RESUMEN EN CARRUSEL (T03 · .rl-hl del kit)
   Cada diapositiva es una composición de piezas reales (.cr-art) a la
   derecha, para que la frase de arriba a la izquierda se lea limpia.
   Las medidas van en unidades del propio lienzo (cqh/cqw).
   ============================================================ */
.cr-sum { position: relative; padding-block: clamp(48px, 8vh, 96px) clamp(24px, 5vh, 64px); }
.cr-sum__head { margin-bottom: 0; }
/* Título, diapositiva y controles en una sola pantalla (64svh y no 72). */
@media (min-width: 760px) {
  .cr-sum .rl-hl__slide { width: min(1180px, 100vw - 2 * var(--gutter) - 56px, 64svh * 16 / 9); }
}
.cr-art {
  position: absolute; inset: 0; container-type: size;
  display: flex; align-items: center; justify-content: flex-end; gap: 2.2cqw;
  padding: 0 5cqw 0 40cqw;
  background:
    radial-gradient(70% 90% at 78% 58%, rgb(var(--fg-rgb) / .06), transparent 70%),
    linear-gradient(180deg, #121213, #0E0E0F);
}
/* Las piezas no se encogen: cada composición está medida para caber a la
   derecha de la frase (en escritorio, en el 55 % derecho del lienzo). */
.cr-art > * { flex-shrink: 0; }
.cr-art img { display: block; object-fit: cover; border-radius: 14px; background: var(--ink-3); outline: 1px solid rgb(var(--fg-rgb) / .08); outline-offset: -1px; }
/* 1 · lo que viene: tres anuncios reales, de más cerca a más lejos */
/* El abanico cabe entero en el 55 % derecho y baja un poco (translate y no
   padding: el padding achicaría el lienzo que miden los cqh), así la frase
   de tres líneas de esta diapositiva no toca la primera pieza. */
.cr-art--fan { gap: 0; }
.cr-art--fan img { position: relative; height: 58cqh; width: auto; aspect-ratio: 4 / 5; translate: 0 10cqh; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.cr-art--fan img:nth-child(1) { z-index: 3; }
.cr-art--fan img:nth-child(2) { z-index: 2; height: 49cqh; margin-left: -6cqw; filter: brightness(.82); }
.cr-art--fan img:nth-child(3) { z-index: 1; height: 41cqh; margin-left: -6cqw; filter: brightness(.66); }
/* 2 · las redes completas (un perfil) o solo producción (una pieza) */
.cr-art__feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; height: 46cqh; aspect-ratio: 6 / 5; }
.cr-art__feed img { width: 100%; height: 100%; border-radius: 6px; }
.cr-art__or { font-size: clamp(1rem, 3cqh, 1.6rem); font-weight: 300; color: var(--text-on-ink-2); padding-inline: .4cqw; }
.cr-art__one { height: 38cqh; width: auto; aspect-ratio: 4 / 5; }
/* 3 · diseño, foto y video: el reel real en su teléfono, al centro */
.cr-art--make { gap: 0; }
.cr-art__side { position: relative; height: 40cqh; width: auto; aspect-ratio: 4 / 5; filter: brightness(.86); }
.cr-art__side:first-child { margin-right: -2cqw; }
.cr-art__side:last-child { margin-left: -2cqw; }
.cr-art__phone { position: relative; z-index: 1; height: 74cqh; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .14), 0 30px 70px -30px rgb(0 0 0 / .9); }
.cr-art__phone .rl-loop video { border-radius: inherit; }
/* 4 · una idea, muchos formatos: la misma marca en sus marcos */
.cr-art--formats { --fh: 36cqh; gap: 2cqw; }
.cr-art--formats .cr-f--reel { --fh: 50cqh; }
.cr-art--formats .cr-f img { border-radius: 0; outline: 0; }
/* El reel vivo: su pausa, a la escala del marco (36 px: sigue siendo un
   blanco cómodo para el dedo). */
.cr-f--live .rl-loop .rl-play { width: 36px; height: 36px; right: 8px; bottom: 8px; }
.cr-f--live .rl-loop .rl-play svg { width: 13px; height: 13px; }
/* 5 · cada mes, algo distinto (tres temporadas reales de Sweet Bite) */
.cr-art--season { gap: 2cqw; }
.cr-art--season figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.cr-art--season img { height: 38cqh; width: auto; aspect-ratio: 4 / 5; }
.cr-art--season figure:nth-child(2) { transform: translateY(-5cqh); }
.cr-art--season figcaption {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-on-ink);
  font-size: .78rem; color: var(--text-on-ink-2);
}
@media (max-width: 759px) {
  .cr-art { justify-content: center; align-items: flex-end; padding: 0 5cqw 8cqh; gap: 3cqw; }
  .cr-art--fan { gap: 0; }
  .cr-art--fan img { height: 50cqh; translate: none; }
  .cr-art--fan img:nth-child(2) { height: 43cqh; margin-left: -16cqw; }
  .cr-art--fan img:nth-child(3) { height: 36cqh; margin-left: -16cqw; }
  .cr-art--split { gap: 2cqw; }
  .cr-art__feed { height: 36cqh; }
  .cr-art__one { height: 26cqh; }
  .cr-art--make { gap: 0; }
  .cr-art__side { height: 28cqh; }
  .cr-art__phone { height: 58cqh; border-radius: 16px; }
  .cr-art--formats { --fh: 30cqh; gap: 3cqw; }
  .cr-art--formats .cr-f--reel { --fh: 40cqh; }
  .cr-art--season img { height: 40cqh; }
  .cr-art--season figure:nth-child(3) { display: none; }
  .cr-art--season figcaption { font-size: .7rem; padding: 4px 9px; }
}

/* ============================================================
   3 · NO SE TRATA DE LLENAR UN CALENDARIO (T01 + cont-04)
   Un mes de 30 cuadros iguales ("un post por día") que, con GSAP Flip,
   se depura hasta quedar 5 momentos grandes con piezas reales. La
   rejilla mide siempre lo mismo (aspect-ratio): durante el Flip todo
   va en absoluto y el contenedor no se colapsa. Sin JS se ve el mes
   depurado (.is-real viene en el HTML).
   ============================================================ */
.cr-fill .rl-screen__visual { justify-self: end; width: min(100%, 560px); }
@media (max-width: 959px) { .cr-fill .rl-screen__visual { justify-self: start; } }
.cr-m30 { display: grid; gap: 16px; }
.cr-m30__switch {
  justify-self: start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; padding: 4px; border: 1px solid var(--rl-line); border-radius: 999px; background: var(--rl-surface);
}
.cr-m30__switch[hidden] { display: none; }
.cr-m30__opt {
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: .84rem; font-weight: 500; line-height: 1.2; color: var(--rl-fg-2); cursor: pointer;
  transition: background-color .3s var(--ease-ui), color .3s var(--ease-ui);
}
.cr-m30__opt:hover { color: var(--rl-fg); }
.cr-m30__opt[aria-pressed="true"] { background: var(--orange); color: var(--ink); }
.cr-m30__opt:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cr-m30__grid {
  position: relative; display: grid; gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr));
  aspect-ratio: 6 / 5;
}
.cr-m30__t {
  position: relative; overflow: hidden; border-radius: 8px; min-width: 0; min-height: 0;
  background: rgb(var(--fg-rgb) / .035); border: 1px solid rgb(var(--fg-rgb) / .07);
  /* Los 5 momentos cambian de piel mientras crecen (Flip mueve la caja):
     sin esta transición se volvían negros de golpe en su día y, durante
     un instante, el mes parecía tener 5 huecos. */
  transition: background-color .45s var(--ease-ui), border-color .45s var(--ease-ui), border-radius .45s var(--ease-enter);
}
/* el "post" de relleno: el mismo cuadro gris, todos los días */
.cr-m30__t::after {
  content: ''; position: absolute; left: 20%; right: 20%; top: 34%; bottom: 16%; border-radius: 4px;
  background: linear-gradient(160deg, rgb(var(--fg-rgb) / .2), rgb(var(--fg-rgb) / .08) 70%, rgb(var(--fg-rgb) / .08) 76%, rgb(var(--fg-rgb) / .22) 76%, rgb(var(--fg-rgb) / .22) 84%, transparent 84%);
  transition: opacity .3s var(--ease-ui);
}
.cr-m30__t b {
  position: absolute; z-index: 2; top: 6px; left: 8px; font-size: .62rem; font-weight: 400; line-height: 1.2;
  color: var(--text-on-ink-2); white-space: nowrap; transition: font-size .3s var(--ease-ui), padding .3s var(--ease-ui);
}
.cr-m30__t img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--o, 50% 50%);
  opacity: 0; transition: opacity .55s var(--ease-ui);
}
.cr-m30__t em {
  position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px;
  font-style: normal; font-size: .82rem; font-weight: 500; line-height: 1.2; color: #F4F4F6;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-ui), transform .5s var(--ease-enter);
}
.cr-m30__play {
  position: absolute; z-index: 2; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: rgb(10 10 10 / .5); opacity: 0; transition: opacity .4s var(--ease-ui);
}
.cr-m30__play::before { content: ''; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #F4F4F6; }
/* El mes depurado: 25 cuadros fuera y 5 momentos en su lugar. */
.cr-m30__grid.is-real .cr-m30__t:not(.cr-m30__t--keep) { display: none; }
.cr-m30__grid.is-real .cr-m30__t--keep { border-radius: 14px; border-color: transparent; background: #000; }
.cr-m30__grid.is-real .cr-m30__t--keep::after {
  left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .45), transparent 32%, transparent 52%, rgb(0 0 0 / .78));
}
.cr-m30__grid.is-real .cr-m30__t--keep img { opacity: 1; transition-delay: .18s; }
.cr-m30__grid.is-real .cr-m30__t--keep em,
.cr-m30__grid.is-real .cr-m30__play { opacity: 1; transform: none; transition-delay: .3s; }
.cr-m30__grid.is-real .cr-m30__t--keep b { top: 10px; left: 10px; font-size: .72rem; color: rgb(244 244 246 / .8); }
.cr-m30__grid.is-real .cr-m30__t--keep b::before { content: 'Día '; }
.cr-m30__grid.is-real .cr-m30__t--l { grid-area: 1 / 1 / 4 / 5; }
.cr-m30__grid.is-real .cr-m30__t--r { grid-area: 1 / 5 / 4 / 7; }
.cr-m30__grid.is-real .cr-m30__t--c { grid-area: 4 / 1 / 6 / 3; }
.cr-m30__grid.is-real .cr-m30__t--e { grid-area: 4 / 3 / 6 / 5; }
.cr-m30__grid.is-real .cr-m30__t--h { grid-area: 4 / 5 / 6 / 7; }
.cr-m30__grid.is-real .cr-m30__t--l em { font-size: clamp(1rem, .8rem + .6vw, 1.3rem); }
@media (max-width: 480px) {
  .cr-m30__opt { font-size: .76rem; padding: 7px 10px; }
  .cr-m30__t b { font-size: .55rem; top: 3px; left: 4px; }
  .cr-m30__grid { gap: 4px; }
  .cr-m30__t em { left: 8px; right: 6px; bottom: 7px; font-size: .7rem; }
}

/* ---------- "Una línea + ver por qué" (todas-3) ----------
   Cada bloque deja una línea a la vista y el detalle detrás del plegable
   del kit (.rl-fold). Sin JS el detalle se ve (el kit lo cierra al
   empezar). */
.cr-why { margin-top: clamp(14px, 1.6vw, 20px); justify-items: start; }
.cr-why .rl-fold__btn { font-size: .95rem; }
.cr-why__body { display: grid; gap: 10px; max-width: 36em; padding-top: 12px; }
.cr-why__body p { font-size: clamp(.98rem, .92rem + .2vw, 1.08rem); line-height: 1.5; color: var(--rl-fg-2); }
.cr-why__body strong { font-weight: 500; color: var(--rl-fg); }
/* En las ventanas con pestañas (T10) la línea va centrada y el detalle
   también; en el teléfono, a la izquierda como la leyenda. */
.cr-win__why { margin-top: 10px; }
.cr-win__why .cr-why__body { margin-inline: auto; text-align: center; }
.cr-prod__why { display: grid; gap: 12px; padding-top: 12px; }
.cr-prod__why > p:first-child { max-width: 38em; margin-inline: auto; text-align: center; font-size: clamp(.98rem, .92rem + .2vw, 1.08rem); line-height: 1.5; color: var(--rl-fg-2); }
.cr-prod__can { margin-top: 4px; font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--rl-fg-2); }
.cr-ads__why { max-width: 34em; padding-top: 12px; margin-bottom: 14px; font-size: clamp(.98rem, .92rem + .2vw, 1.08rem); line-height: 1.5; color: var(--rl-fg-2); }
@media (max-width: 759px) {
  .cr-win__why .cr-why__body, .cr-prod__why > p:first-child, .cr-prod__can { text-align: left; margin-inline: 0; }
}

/* ============================================================
   4 · DOS FORMAS DE TRABAJAR (T10 · ventana con dos pestañas)
   Cada vista es el esquema de carriles "Tú / Prisma" sobre su placa.
   ============================================================ */
/* Titular a la izquierda y la frase a la derecha: la ventana entra antes.
   El titular es de historia (.rl-title, 68 px a 1440) y va en dos líneas,
   una oración por línea (<br> en el HTML): su columna es la ancha. */
.cr-modes__head, .cr-prod__head { display: grid; gap: 0 clamp(32px, 5vw, 96px); margin-bottom: clamp(30px, 4.4vw, 56px); }
.cr-modes__head .rl-title, .cr-prod__head .rl-title { max-width: none; }
@media (min-width: 1000px) {
  .cr-modes__head, .cr-prod__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; }
  .cr-modes__head .rl-kicker, .cr-prod__head .rl-kicker { grid-column: 1 / -1; }
  .cr-modes__head .rl-lede, .cr-prod__head .rl-lede { margin-top: 0; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
  .cr-prod__head .cr-why { grid-column: 2; margin-top: 10px; }
}
.cr-board {
  position: absolute; inset: 0; container-type: inline-size;
  display: grid; align-content: center; gap: clamp(18px, 4cqw, 40px);
  padding: clamp(20px, 6cqw, 72px);
  background: radial-gradient(70% 80% at 50% 50%, rgb(var(--fg-rgb) / .045), transparent 72%), var(--rl-surface);
}
/* La ventana de las dos formas es más baja: el esquema es horizontal (y
   desde que tiene cuatro tiempos y no siete, todavía más corto). Los dos
   esquemas van centrados en la placa con el mismo ancho de columna: al
   pasar a "Solo producción" el dibujo pierde un paso, no cambia de escala. */
@media (min-width: 760px) {
  .cr-modes__win .rl-win__stage { aspect-ratio: 16 / 6.3; min-height: 380px; width: min(100%, 1120px); }
  .cr-board__tag { text-align: center; }
}
.cr-board__tag { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); }
.cr-win__go { margin-top: 6px; text-align: center; }
@media (max-width: 759px) { .cr-win__go { text-align: left; } }

/* Carriles: "Tú" arriba, "Prisma" abajo; cada paso cae en su carril y en
   su columna. El trazo que los une lo dibuja js/contenido.js midiendo los
   puntos (sirve igual en fila y en columna). El envoltorio es el
   contenedor que mide (la consulta de abajo): en la ventana del teléfono
   los carriles van en columna. */
.cr-lanes-wrap { container: crmode / inline-size; }
.cr-lanes {
  position: relative;
  display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: 104px 104px;
  row-gap: 8px;
}
.cr-lanes__who {
  grid-column: 1 / -1; display: flex; align-items: center; padding-left: 16px;
  border-radius: 16px; background: rgb(var(--fg-rgb) / .04);
  font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2);
}
.cr-lanes__who--tu { grid-row: 1; }
.cr-lanes__who--prisma { grid-row: 2; color: var(--orange); }
.cr-lanes__steps {
  grid-column: 2; grid-row: 1 / 3; position: relative; z-index: 1;
  display: grid; grid-template-rows: 104px 104px; row-gap: 8px;
  grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr));
}
.cr-lanes__steps li {
  grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 11px; padding-top: 18px;
  text-align: center; font-size: clamp(.78rem, .7rem + .3vw, .92rem); line-height: 1.2; letter-spacing: -0.003em; color: var(--text-on-ink); padding-inline: 2px;
}
/* Los puntos de los dos carriles se miran de frente (Tú abajo de su
   carril, Prisma arriba del suyo) y las etiquetas quedan por fuera: así
   el trazo que va de un carril al otro nunca cruza una palabra. */
.cr-lanes__steps li[data-who="tu"] { grid-row: 1; flex-direction: column-reverse; padding-top: 0; padding-bottom: 18px; }
.cr-lanes:not(.is-js) .cr-lanes__steps li::before, .cr-lanes__dot {
  content: ''; display: block; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px rgb(var(--orange-rgb) / .14);
}
.cr-lanes:not(.is-js) .cr-lanes__steps li[data-who="tu"]::before,
.cr-lanes__steps li[data-who="tu"] .cr-lanes__dot { background: var(--rl-surface); border: 1.5px solid var(--text-on-ink); box-shadow: none; }
.cr-lanes__steps li:nth-child(1) { grid-column: 1; } .cr-lanes__steps li:nth-child(2) { grid-column: 2; }
.cr-lanes__steps li:nth-child(3) { grid-column: 3; } .cr-lanes__steps li:nth-child(4) { grid-column: 4; }
.cr-lanes__steps li:nth-child(5) { grid-column: 5; } .cr-lanes__steps li:nth-child(6) { grid-column: 6; }
.cr-lanes__steps li:nth-child(7) { grid-column: 7; }
.cr-lanes__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.cr-lanes__path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cr-lanes__line { stroke: var(--cr-line-2); stroke-width: 1.4; }
.cr-lanes__back { stroke: rgb(var(--orange-rgb) / .55); stroke-width: 1.2; stroke-dasharray: 3 5; }
/* Dibujo del trazo al elegir la pestaña (lo arma JS con la longitud real). */
html.cr-anim .cr-lanes.is-drawn .cr-lanes__line, html.cr-anim .cr-lanes.is-drawn .cr-lanes__back { transition: stroke-dashoffset 1.6s var(--ease-enter); }
html.cr-anim .cr-lanes .cr-lanes__steps li { transition: opacity .5s var(--ease-ui), transform .6s var(--ease-enter); transition-delay: calc(var(--k, 0) * 110ms + 120ms); }
html.cr-anim .cr-lanes:not(.is-drawn) .cr-lanes__steps li { opacity: 0; transform: translateY(8px); }
/* Que no se estiren a lo ancho de la placa: cuatro tiempos (con gestión)
   y tres (solo producción), con casi el mismo ancho de columna. */
.cr-lanes { margin-inline: auto; }
.cr-lanes--loop { max-width: 820px; }
.cr-lanes:not(.cr-lanes--loop) { max-width: 620px; }
@container crmode (max-width: 459px) {
  .cr-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 6px; row-gap: 0; }
  .cr-lanes__who { grid-column: auto; grid-row: 1 / 3 !important; align-items: flex-start; justify-content: center; padding: 12px 0 0; }
  .cr-lanes__who--tu { grid-column: 1; }
  .cr-lanes__who--prisma { grid-column: 2; }
  .cr-lanes__steps {
    grid-column: 1 / -1; grid-row: 2; padding-top: 38px; padding-bottom: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 46px; row-gap: 0;
  }
  .cr-lanes__steps li { grid-column: 2 !important; grid-row: auto !important; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 0 0 14px; text-align: left; font-size: .8rem; }
  .cr-lanes__steps li[data-who="tu"] { grid-column: 1 !important; flex-direction: row; padding: 0 0 0 14px; }
  .cr-lanes__steps li:nth-child(1) { grid-row: 1 !important; } .cr-lanes__steps li:nth-child(2) { grid-row: 2 !important; }
  .cr-lanes__steps li:nth-child(3) { grid-row: 3 !important; } .cr-lanes__steps li:nth-child(4) { grid-row: 4 !important; }
  .cr-lanes__steps li:nth-child(5) { grid-row: 5 !important; } .cr-lanes__steps li:nth-child(6) { grid-row: 6 !important; }
  .cr-lanes__steps li:nth-child(7) { grid-row: 7 !important; }
}
@media (max-width: 759px) {
  .cr-board { align-content: start; gap: 14px; padding: 22px 18px; }
}

/* ============================================================
   5 · TODO EMPIEZA CON LO QUE ESTÁ PASANDO
   ============================================================ */
/* El titular va arriba y a todo el ancho, una oración por línea (T01: dos
   líneas a 60 px en 1440; a 1024 sigue en dos). Debajo, la pieza pegada a
   la izquierda y la lista a la derecha. */
.cr-start__top { margin-bottom: clamp(36px, 5.4vw, 72px); }
.cr-start__top .rl-title { max-width: none; font-size: clamp(2.125rem, 1.1rem + 2.95vw, 3.75rem); }
.cr-start__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.cr-start__head { position: sticky; top: 120px; }
.cr-start__list { border-top: 1px solid var(--line-on-ink); }
.cr-start__list li {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline;
  padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid var(--line-on-ink);
  font-size: clamp(1.45rem, 2.9vw, 2.6rem); line-height: 1.1; letter-spacing: -0.022em; font-weight: 500;
  color: var(--text-on-ink);
  transition: color .5s var(--ease-ui);
}
.cr-start__n { font-size: .9rem; font-weight: 300; letter-spacing: .04em; color: var(--text-on-ink-2); transition: color .5s var(--ease-ui); }
html.cr-anim .cr-start__list li:not(.is-lit) { color: var(--cr-dim); }
.cr-start__list li.is-now .cr-start__n { color: var(--orange); }
.cr-start__last { font-size: clamp(1.15rem, 1.9vw, 1.6rem) !important; color: var(--text-on-ink-2); }
html.cr-anim .cr-start__list li.cr-start__last.is-lit { color: var(--text-on-ink-2); }
.cr-start__close { margin-top: clamp(70px, 11vh, 130px); display: grid; gap: 14px; max-width: 980px; }
.cr-start__no { font-size: var(--fs-h3); color: var(--text-on-ink-2); }
.cr-start__yes { font-size: clamp(1.55rem, 2.8vw, 2.45rem); line-height: 1.14; letter-spacing: -0.02em; font-weight: 500; max-width: 26ch; }
/* Cómo lo contamos: la pieza real de la línea encendida. En escritorio
   vive bajo el titular pegado (una a la vez, entra subiendo y se funde);
   en el teléfono cada línea lleva su miniatura, que aparece al encenderse. */
.cr-peek { display: grid; width: clamp(200px, 19vw, 320px); }
.cr-peek__f {
  grid-area: 1 / 1; margin: 0; display: grid; gap: 12px; align-content: start;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97);
  transition: opacity .28s var(--ease-exit), transform .4s var(--ease-exit), visibility 0s .4s;
}
.cr-peek__f.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s var(--ease-enter), transform .7s var(--ease-enter), visibility 0s;
}
.cr-peek__m {
  display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .07), 0 34px 60px -34px rgb(0 0 0 / .9);
}
.cr-peek__m img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* "Presencia activa": el perfil entero, en cuadrícula de 3 (4:5 como el feed). */
.cr-peek__feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; }
.cr-peek figcaption { font-size: .86rem; line-height: 1.4; color: var(--text-on-ink-2); }
.cr-peek figcaption b { font-weight: 500; color: var(--text-on-ink); margin-right: 6px; }
.cr-start__pic { display: none; }
/* Aire bajo la lista (escritorio): el titular y su pieza siguen pegados
   cuando se enciende la última línea, también en pantallas bajas. */
@media (min-width: 901px) { .cr-start__list { padding-bottom: 7vh; } }
@media (max-width: 900px) {
  .cr-start__grid { grid-template-columns: 1fr; }
  .cr-start__head { position: static; }
  .cr-peek { display: none; }
  .cr-start__list li { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .cr-start__pic {
    display: block; align-self: center; width: 56px; aspect-ratio: 4 / 5; margin-left: 14px;
    border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .08);
    transition: opacity .5s var(--ease-ui), transform .6s var(--ease-enter), filter .5s var(--ease-ui);
  }
  .cr-start__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cr-start__pic--feed { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; }
  /* Apagada como su línea hasta que el scroll la enciende. */
  html.cr-anim .cr-start__list li:not(.is-lit) .cr-start__pic { opacity: .28; transform: scale(.9); filter: grayscale(1); }
}

/* ---------- El cilindro de palabras (cont-06) ----------
   Solo con .is-cyl (lo pone js/contenido.js con movimiento y pantalla
   de 560 px o más). La escena se pega (sticky, nunca el pin de
   ScrollTrigger) y la envoltura mide una pantalla y media: el giro
   empieza cuando la escena termina de entrar, así cada frase tiene su
   tramo sin alargar la página. El cierre ("No empezamos preguntando…")
   va dentro de la escena. La lista queda en el HTML, oculta a la vista.
   Medidas que escribe el JS en .cr-cyl__stage (px):
     --cyl-h   alto de cada cara (el paso del cilindro), calculado para
               que las frases vecinas en reposo nunca toquen los filetes;
     --cyl-dh  alto del tambor (lo que se ve: la frase y sus vecinas);
   y en .cr-cyl__drum:
     --cyl-ln  media distancia entre los filetes = medio alto de la frase
               del frente + aire (una línea o dos);
     --cyl-lo  opacidad de los filetes: 1 en reposo, 0 mientras gira. */
.cr-start.is-cyl { padding-bottom: 0; }
.cr-start.is-cyl .cr-cyl { height: calc(100svh + 42svh); }
.cr-start.is-cyl .cr-cyl__pin {
  position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center;
  padding: calc(var(--cr-chrome, 60px) + 16px) 0 28px;
}
.cr-start.is-cyl .cr-cyl__pin > .container { width: 100%; }
.cr-start.is-cyl .cr-start__top { margin-bottom: clamp(18px, 3.4vh, 44px); }
.cr-start.is-cyl .cr-start__list {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cr-start.is-cyl .cr-start__grid { grid-template-columns: minmax(0, 1fr) min(clamp(190px, 17vw, 270px), 27svh); align-items: center; gap: clamp(28px, 4vw, 72px); }
.cr-start.is-cyl .cr-start__head { position: static; order: 2; }
.cr-start.is-cyl .cr-peek { width: 100%; }
/* El cierre, debajo del cilindro: en gris mientras gira; con la última
   frase al frente se tacha "cuántos posts quieres" y la respuesta se
   enciende (.is-end en la sección). */
.cr-start.is-cyl .cr-start__close {
  margin-top: clamp(16px, 3.4vh, 40px); padding-top: clamp(14px, 2.4vh, 24px); gap: 6px; max-width: none;
  border-top: 1px solid var(--line-on-ink);
}
.cr-start.is-cyl .cr-start__no { font-size: var(--fs-h3); }
.cr-start.is-cyl .cr-start__yes {
  font-size: clamp(1.25rem, .95rem + 1.05vw, 1.95rem); max-width: 34ch; color: var(--text-on-ink-2);
  transition: color .6s var(--ease-ui);
}
.cr-start.is-cyl.is-end .cr-start__yes { color: var(--text-on-ink); }
.cr-cyl__stage {
  --cyl-fs: clamp(1.65rem, .9rem + 2.7vw, 3.35rem);
  --cyl-h: calc(var(--cyl-fs) * 2.7);
  display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 48px);
}
.cr-cyl__lead {
  display: grid; gap: 14px; font-size: clamp(1.2rem, .95rem + .9vw, 1.85rem); font-weight: 500; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--text-on-ink-2);
}
.cr-cyl__n { font-size: .82rem; font-weight: 400; letter-spacing: .06em; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; }
.cr-cyl__n b { font-weight: 500; color: var(--orange); }
/* El punto de fuga, a la altura del texto (va alineado a la izquierda):
   con 50 % las frases de arriba y de abajo salían inclinadas como en
   cursiva y se leían peor. */
.cr-cyl__drum { position: relative; height: var(--cyl-dh, calc(var(--cyl-h) * 2.3)); perspective: 1200px; perspective-origin: 24% 50%; }
/* Los filetes de la frase al frente: se separan lo justo para una línea
   o para dos (--cyl-ln) y se apagan mientras el cilindro gira, así una
   frase que pasa nunca queda tachada por ellos. */
.cr-cyl__drum::before, .cr-cyl__drum::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-on-ink);
  top: calc(50% - var(--cyl-ln, calc(var(--cyl-h) / 2 + 4px)) - 1px);
  opacity: var(--cyl-lo, 1);
  transition: top .35s var(--ease-ui), bottom .35s var(--ease-ui);
}
.cr-cyl__drum::after { top: auto; bottom: calc(50% - var(--cyl-ln, calc(var(--cyl-h) / 2 + 4px)) - 1px); }
.cr-cyl__rot {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--cyl-h); margin-top: calc(var(--cyl-h) / -2);
  transform-style: preserve-3d; will-change: transform;
}
.cr-cyl__face {
  position: absolute; inset: 0; display: flex; align-items: center; backface-visibility: hidden;
  font-size: var(--cyl-fs); font-weight: 500; line-height: 1.06; letter-spacing: -0.026em;
  color: var(--text-on-ink); opacity: 0;
}
.cr-cyl__face > span { display: block; max-width: 22ch; text-wrap: balance; }
.cr-cyl__face--long { font-size: calc(var(--cyl-fs) * .64); line-height: 1.14; }
.cr-cyl__face--long > span { max-width: 34ch; }
.cr-cyl__face:not(.is-front) { color: var(--text-on-ink-2); }
/* Pantallas bajas (portátiles de 720 px): todo un poco más compacto
   para que la escena, cierre incluido, quepa en una pantalla. */
@media (min-width: 901px) and (max-height: 780px) {
  .cr-start.is-cyl .cr-start__top .rl-title { font-size: clamp(2rem, 1rem + 2.4vw, 3.1rem); }
  .cr-start.is-cyl .cr-start__yes { font-size: clamp(1.15rem, .9rem + .85vw, 1.6rem); }
  .cr-cyl__stage { --cyl-fs: clamp(1.6rem, .9rem + 2.3vw, 2.9rem); }
}
@media (max-width: 900px) {
  .cr-start.is-cyl .cr-start__grid { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "lead pic" "drum drum"; gap: 14px 18px; }
  .cr-start.is-cyl .cr-cyl__stage { display: contents; }
  .cr-start.is-cyl .cr-cyl__lead { grid-area: lead; align-self: end; }
  .cr-start.is-cyl .cr-cyl__drum { grid-area: drum; }
  .cr-start.is-cyl .cr-start__head { grid-area: pic; order: 0; }
  .cr-start.is-cyl .cr-peek { display: grid; }
  .cr-start.is-cyl .cr-peek figcaption { display: none; }
  .cr-start.is-cyl .cr-peek__m { border-radius: 10px; }
  .cr-start.is-cyl .cr-start__no { font-size: 1rem; }
  .cr-start.is-cyl .cr-start__yes { font-size: clamp(1.15rem, .9rem + 1.2vw, 1.4rem); }
  .cr-cyl__stage { --cyl-fs: clamp(1.55rem, 1rem + 2.6vw, 2.1rem); --cyl-h: calc(var(--cyl-fs) * 2.6); }
  .cr-cyl__face--long { font-size: calc(var(--cyl-fs) * .7); }
}
/* Teléfonos bajos (667 px o menos de alto útil): la escena entera, cierre
   incluido, tiene que caber pegada; si no, el cierre quedaba cortado
   abajo mientras gira el cilindro. */
@media (max-width: 900px) and (max-height: 740px) {
  .cr-start.is-cyl .cr-cyl__pin { padding-bottom: 12px; }
  .cr-start.is-cyl .cr-start__top { margin-bottom: 12px; }
  .cr-start.is-cyl .cr-start__top .rl-title { font-size: 1.75rem; }
  .cr-start.is-cyl .cr-start__grid { grid-template-columns: minmax(0, 1fr) 60px; gap: 10px 16px; }
  .cr-start.is-cyl .cr-cyl__lead { font-size: 1.1rem; gap: 8px; }
  .cr-cyl__stage { --cyl-fs: 1.35rem; }
  .cr-start.is-cyl .cr-start__close { margin-top: 10px; padding-top: 10px; gap: 4px; }
  .cr-start.is-cyl .cr-start__no { font-size: .9rem; }
  .cr-start.is-cyl .cr-start__yes { font-size: 1.05rem; }
}

/* ============================================================
   6 · EL CICLO (T06 · escena fija del kit) + el círculo del mes
   El kit pega la escena y escribe data-rl-step y --rl-p (0 → 1) en la
   sección; js/contenido.js gira el anillo 3D (cont-01), marca el panel
   al frente y avanza el mes y sus semanas ("Mes 2" al cerrar la vuelta).
   Sin JS o con movimiento reducido: la lista de pasos y los seis
   paneles en rejilla, quietos.
   ============================================================ */
/* Menos de media pantalla por paso (antes 62svh): el anillo gira igual de
   claro y la escena deja de ser la parte más larga de la página. */
.cr-cycle { --rl-step-h: 42svh; }
/* La escena pegada empieza debajo de lo que haya arriba (cabecera y barra
   local; --cr-chrome lo escribe js/contenido.js). */
html.rl-anim .cr-cycle.is-live .rl-scene__pin { padding-top: calc(var(--cr-chrome, 60px) + 28px); }
.cr-cycle .rl-scene__steps { margin-top: clamp(22px, 3vw, 36px); }
.cr-cycle .rl-scene__p { font-size: clamp(1.06rem, .95rem + .45vw, 1.32rem); }
/* Puntos de paso compactos también en escritorio: los nombres ya están
   en el círculo; el botón los lleva para el lector de pantalla. */
html.rl-anim .cr-cycle.is-live .rl-scene__nav button { padding: 0; width: 44px; justify-content: center; }
html.rl-anim .cr-cycle.is-live .rl-scene__nav button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.rl-anim .cr-cycle.is-live .rl-scene__nav button[aria-current="step"] { width: 64px; }
/* La barra de avance se apaga en el último tramo (igual que en 360): si no,
   al soltar la escena quedaba una raya naranja de borde a borde entre el
   ciclo y "La gestión es fija", justo debajo de la barra local. */
html.rl-anim .cr-cycle.is-live .rl-scene__bar { opacity: calc((1 - var(--rl-p, 0)) * 25); }
.cr-cycle__fine { margin-top: 18px; max-width: 34em; font-size: .86rem; line-height: 1.45; color: var(--rl-fg-2); }

/* ---------- El anillo 3D (cont-01) ----------
   Seis paneles sobre un anillo (rotateY de 60° cada uno, a --R del
   centro); el anillo gira con el scroll de la escena (lo escribe
   js/contenido.js, lineal y con un respiro en cada paso). La espalda de
   cada panel es una placa oscura con su número: así se ve el anillo
   entero y no solo los tres de adelante. Sin escena viva: los seis
   paneles en rejilla, quietos. */
.cr-orb { --R: 272px; --pw: 214px; display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 26px); width: 100%; }
.cr-orb__view {
  position: relative; width: 100%; height: calc(var(--pw) * 1.92); perspective: 1200px; perspective-origin: 50% 46%;
}
.cr-orb__ring {
  position: absolute; left: 50%; top: 58%; width: var(--pw); height: calc(var(--pw) * 1.41);
  margin: calc(var(--pw) * -.705) 0 0 calc(var(--pw) / -2);
  transform-style: preserve-3d; transform: rotateX(-12deg) translateZ(calc(var(--R) * -1)) rotateY(0deg);
  will-change: transform;
}
.cr-orb__p {
  position: absolute; inset: 0; margin: 0; transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--R));
}
.cr-orb__face, .cr-orb__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cr-orb__face { display: grid; grid-template-rows: auto 1fr; gap: 10px; transition: opacity .5s var(--ease-ui); }
.cr-orb__back {
  transform: rotateY(180deg); display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(160deg, #1E1E21, #121214); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .06);
  height: calc(var(--pw) * 1.25);
}
.cr-orb__back b { font-size: 2.2rem; font-weight: 200; letter-spacing: -0.04em; color: rgb(var(--fg-rgb) / .22); }
.cr-orb__m {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #000;
  box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .08), 0 30px 50px -30px rgb(0 0 0 / .9);
}
.cr-orb__m > img, .cr-orb__m > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-orb__m--feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; background: #000; }
.cr-orb__m--feed > img { position: static; width: 100%; height: 100%; object-fit: cover; }
.cr-orb__m--reel > video { object-position: 50% 30%; }
.cr-orb__play {
  position: absolute; left: 10px; bottom: 10px; width: 22px; height: 22px; border-radius: 6px; background: rgb(10 10 10 / .5);
}
.cr-orb__play::before { content: ''; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #F4F4F6; }
.cr-orb__m--post { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #F4F4F6; }
.cr-orb__m--post > img { position: static; min-height: 0; }
.cr-orb__ig { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.cr-orb__ig img { width: 16px; height: 16px; border-radius: 50%; }
.cr-orb__ig em { font-style: normal; font-size: .62rem; font-weight: 500; color: #0A0A0A; }
.cr-orb__likes { display: flex; gap: 6px; padding: 6px 8px 8px; }
.cr-orb__likes i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #0A0A0A; }
.cr-orb__likes i:first-child { border-color: #E2361F; background: #E2361F; }
.cr-orb__cta {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; background: rgb(10 10 10 / .82);
}
.cr-orb__cta em { font-style: normal; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(244 244 246 / .8); }
.cr-orb__cta i { width: 46px; height: 16px; border-radius: 4px; background: var(--orange); }
.cr-orb__m--learn { background: linear-gradient(170deg, #1F1F22, #0E0E10); display: grid; }
.cr-orb__note { display: grid; align-content: center; gap: 10px; padding: 16px; }
.cr-orb__note em { font-style: normal; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.cr-orb__note strong { font-size: .98rem; font-weight: 500; line-height: 1.15; color: #F4F4F6; padding-bottom: 8px; border-bottom: 1px solid rgb(244 244 246 / .14); }
.cr-orb__note span { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(244 244 246 / .5); }
.cr-orb__face figcaption {
  order: -1; display: flex; align-items: baseline; gap: 8px; justify-content: center;
  font-size: .9rem; font-weight: 500; line-height: 1.2; color: var(--rl-fg-2); white-space: nowrap; transition: color .4s var(--ease-ui);
}
.cr-orb__face figcaption b { font-size: .72rem; font-weight: 400; letter-spacing: .06em; color: var(--rl-fg-2); }
.cr-orb__p.is-on .cr-orb__face figcaption { color: var(--rl-fg); }
.cr-orb__p.is-on .cr-orb__face figcaption b { color: var(--orange); }
/* Mes y semanas: avanzan con el giro (--w, de 0 a 1, lo escribe el JS). */
.cr-orb__month { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; width: min(100%, 440px); }
.cr-orb__mes { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; font-size: 1.5rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1; color: var(--rl-fg); white-space: nowrap; }
.cr-orb__mes b { display: inline-block; min-width: .6em; font-weight: 200; }
.cr-orb__mes b.is-roll { animation: cr-roll .6s var(--ease-enter); }
@keyframes cr-roll { 0% { transform: translateY(50%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.cr-orb__mes span { font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); }
.cr-orb.is-again .cr-orb__mes span { color: var(--rl-hot); }
.cr-orb__weeks { position: relative; height: 26px; margin: 0 8px; }
.cr-orb__weeks::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--rl-line); }
.cr-orb__fill { position: absolute; left: 0; top: 6px; height: 2px; width: 100%; border-radius: 2px; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--w, 1)); }
.cr-orb__weeks span {
  position: absolute; left: calc(var(--x) * 100%); top: 0; transform: translateX(-50%); padding-top: 14px;
  font-size: .68rem; line-height: 1; color: var(--rl-fg-2); font-variant-numeric: tabular-nums;
}
.cr-orb__weeks span::before {
  content: ''; position: absolute; left: 50%; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--rl-bg); box-shadow: inset 0 0 0 1.5px var(--cr-line-2); transition: background-color .3s var(--ease-ui), box-shadow .3s var(--ease-ui);
}
.cr-orb__weeks span.is-on { color: var(--rl-fg); }
.cr-orb__weeks span.is-on::before { background: var(--orange); box-shadow: none; }
/* Sin escena viva (sin JS, movimiento reducido, pantalla baja): los seis
   paneles en rejilla y el mes completo. */
.cr-cycle:not(.is-live) .cr-orb__view { height: auto; perspective: none; }
.cr-cycle:not(.is-live) .cr-orb__ring {
  position: static; margin: 0; width: 100%; height: auto; transform: none !important;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px;
}
.cr-cycle:not(.is-live) .cr-orb__p { position: relative; transform: none; }
.cr-cycle:not(.is-live) .cr-orb__face { position: relative; }
.cr-cycle:not(.is-live) .cr-orb__back { display: none; }
.cr-cycle:not(.is-live) .cr-orb__face figcaption { color: var(--rl-fg); justify-content: start; }
.cr-cycle:not(.is-live) .cr-orb__weeks span::before { background: var(--orange); box-shadow: none; }
@media (min-width: 960px) {
  .cr-cycle:not(.is-live) .rl-scene__layout { align-items: start; }
  .cr-cycle:not(.is-live) .rl-scene__stage { position: sticky; top: 120px; }
}
@media (max-width: 1180px) and (min-width: 960px) { .cr-orb { --R: 222px; --pw: 176px; } }
@media (max-width: 959px) {
  .cr-orb { --R: 150px; --pw: 114px; gap: 10px; }
  .cr-orb__face { gap: 6px; }
  .cr-orb__face figcaption { font-size: .74rem; gap: 5px; }
  .cr-orb__face figcaption b { font-size: .62rem; }
  .cr-orb__note { padding: 9px; gap: 5px; }
  .cr-orb__note strong { font-size: .62rem; padding-bottom: 4px; }
  .cr-orb__note em, .cr-orb__note span { font-size: .5rem; }
  .cr-orb__cta { padding: 5px 6px; } .cr-orb__cta em { font-size: .48rem; } .cr-orb__cta i { width: 26px; height: 10px; }
  .cr-orb__ig { padding: 4px 5px; } .cr-orb__ig em { font-size: .48rem; } .cr-orb__ig img { width: 10px; height: 10px; }
  .cr-orb__likes { padding: 4px 5px 5px; gap: 4px; } .cr-orb__likes i { width: 8px; height: 8px; }
  .cr-orb__back b { font-size: 1.4rem; }
  .cr-orb__month { width: min(100%, 320px); gap: 12px; }
  .cr-orb__mes { font-size: 1.2rem; }
  .cr-orb__mes span { font-size: .6rem; letter-spacing: .1em; }
  .cr-cycle:not(.is-live) .cr-orb__ring { gap: 16px 10px; }
  .cr-cycle .rl-scene__steps { margin-top: 14px; }
  .cr-cycle .rl-scene__t { font-size: 1.3rem; }
  .cr-cycle .rl-scene__p { font-size: 1rem; }
  .cr-cycle .rl-scene__tag { margin-top: 10px; font-size: .8rem; }
  html.rl-anim .cr-cycle.is-live .rl-scene__nav { margin-top: 14px; }
  .cr-cycle__fine { margin-top: 10px; font-size: .78rem; }
}

/* ============================================================
   7 · LA GESTIÓN ES FIJA. EL CONTENIDO CAMBIA.
   ============================================================ */
.cr-fixed__head { max-width: 1060px; margin-bottom: clamp(32px, 5vw, 60px); }
/* Titular de dos líneas en escritorio (T01: nunca más de dos). */
.cr-fixed__head .rl-title { max-width: none; text-wrap: balance; }
.cr-months {
  position: relative; overflow: hidden;
  padding: clamp(22px, 3vw, 40px) clamp(16px, 2.6vw, 36px) 0;
  border: 1px solid var(--rl-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(var(--fg-rgb) / .025), transparent 60%);
}
.cr-months__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 28px); }
.cr-month { display: flex; flex-direction: column; transition: opacity .35s var(--ease-ui); }
.cr-months__cols:hover .cr-month:not(:hover) { opacity: .45; }
.cr-month__label { display: grid; gap: 6px; align-content: start; min-height: 5.4em; font-size: .9rem; line-height: 1.3; }
.cr-month__label span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); }
.cr-month__label strong { font-weight: 500; color: var(--text-on-ink); font-size: clamp(.95rem, 1.2vw, 1.08rem); }
.cr-month__stack {
  flex: 1; min-height: 236px; margin-top: 18px; padding-bottom: 10px;
  display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 6px;
}
.cr-piece {
  position: relative;
  flex: 1 1 calc(50% - 3px); height: 40px; border-radius: 8px;
  display: flex; align-items: flex-end; padding: 6px 8px;
  border: 1px solid var(--cr-line-2); background: var(--ink-3);
  font-size: .7rem; line-height: 1.1; color: var(--text-on-ink-2); overflow: hidden;
  transition: opacity .45s var(--ease-ui), transform .65s var(--ease-enter);
  transition-delay: calc(var(--d, 0) * 1ms);
}
/* Un gesto mínimo de qué es cada pieza (arriba a la derecha). */
.cr-piece::after { content: ''; position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--cr-line-2); }
.cr-piece--reel::after { width: 0; height: 0; border-radius: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent rgb(var(--fg-rgb) / .45); }
.cr-piece--photo::after { border-radius: 50%; width: 10px; height: 10px; }
.cr-piece--accent::after { border-radius: 50%; border-color: var(--orange); box-shadow: inset 0 0 0 2px var(--ink-3), inset 0 0 0 4px var(--orange); }
.cr-piece--half::after { width: 4px; height: 10px; border-radius: 2px; }
.cr-piece--ghost::after { display: none; }
.cr-piece--reel { height: 66px; }
.cr-piece--tall { flex-basis: 100%; height: 92px; }
.cr-piece--photo { flex-basis: 100%; height: 70px; background: linear-gradient(140deg, var(--ink-3), rgb(var(--fg-rgb) / .09)); }
.cr-piece--accent { border-color: rgb(var(--orange-rgb) / .6); background: rgb(var(--orange-rgb) / .12); color: var(--text-on-ink); }
.cr-piece--half { height: 56px; }
.cr-piece--ghost {
  border-style: dashed; background: none; justify-content: center; align-items: center; text-align: center;
  font-size: .92rem; font-weight: 400; color: var(--text-on-ink-2);
}
/* El cuarto mes no sabe todavía qué necesita: la pieza cambia de nombre
   una vuelta (js/contenido.js, menos de 5 s) y se queda en "¿?". */
.cr-piece--ghost span { display: block; transition: opacity .35s var(--ease-ui), transform .45s var(--ease-enter); }
.cr-piece--ghost span.is-out { opacity: 0; transform: translateY(6px); }
html.cr-anim .cr-months:not(.is-in) .cr-piece { opacity: 0; transform: translateY(-46px); }
.cr-months__base {
  position: relative; margin: 0 calc(-1 * clamp(16px, 2.6vw, 36px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 16px clamp(16px, 2.6vw, 36px);
  border-top: 1px solid rgb(var(--orange-rgb) / .55);
  background: linear-gradient(180deg, rgb(var(--orange-rgb) / .12), rgb(var(--orange-rgb) / .04));
  font-size: .9rem; color: var(--text-on-ink-2);
}
.cr-months__base::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--orange);
  transform-origin: left; transform: scaleX(1); transition: transform 1s var(--ease-enter);
}
html.cr-anim .cr-months:not(.is-in) .cr-months__base::before { transform: scaleX(0); }
.cr-months__base-tag {
  padding: 5px 12px; border-radius: 999px; border: 1px solid rgb(var(--orange-rgb) / .7);
  font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
}
.cr-fixed__end { margin-top: clamp(40px, 7vh, 84px); display: grid; justify-items: start; gap: 18px; }
.cr-fixed__end .rl-lede { margin-top: 0; max-width: 34em; }
@media (max-width: 760px) {
  .cr-months__cols { grid-template-columns: 1fr; gap: 0; }
  .cr-month { flex-direction: row; flex-wrap: wrap; gap: 10px 0; padding: 16px 0; border-bottom: 1px solid var(--line-on-ink); }
  .cr-month:first-child { padding-top: 0; }
  .cr-months__cols:hover .cr-month:not(:hover) { opacity: 1; }
  .cr-month__label { min-height: 0; flex-basis: 100%; }
  .cr-month__stack { min-height: 0; margin-top: 0; padding-bottom: 0; flex-wrap: wrap; flex-basis: 100%; }
  /* La base fija, al principio de cada mes: la misma en todos. */
  .cr-month__stack::before {
    content: 'Gestión'; flex: none; height: 34px; display: flex; align-items: center; padding: 0 10px;
    border-radius: 8px; border: 1px solid rgb(var(--orange-rgb) / .6); background: rgb(var(--orange-rgb) / .12);
    font-size: .7rem; color: var(--text-on-ink);
  }
  .cr-piece, .cr-piece--reel, .cr-piece--tall, .cr-piece--photo, .cr-piece--half { flex: 0 1 auto; height: 34px; align-items: center; gap: 8px; padding: 0 10px; }
  .cr-piece::after { position: static; flex: none; order: -1; }
  .cr-piece--ghost { min-width: 10.5em; padding: 0 14px; }
  html.cr-anim .cr-months:not(.is-in) .cr-piece { transform: translateX(-20px); }
  .cr-months__base { margin-top: 16px; }
}

/* ============================================================
   MARCOS DE FORMATO (carrusel, galería de casos)
   ============================================================ */
/* ---------- Marcos de formato ----------
   La misma pieza real recortada a la proporción de cada formato y con
   lo mínimo de su interfaz (barra de la historia, botón del reel, franja
   del anuncio, barra del navegador…). --fh es el alto de referencia. */
.cr-f { position: relative; display: block; flex: none; height: var(--fh, 128px); aspect-ratio: var(--ar, .8); border-radius: 8px; }
.cr-f__m {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: var(--ink-3); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .12);
}
.cr-f__m img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: var(--o, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%);
}
.cr-f i { position: absolute; display: block; pointer-events: none; }
/* Fotografía: copia impresa, con su borde claro. */
.cr-f--photo { border-radius: 3px; }
.cr-f--photo .cr-f__m { border: 4px solid #ECE9E4; }
/* Post: la pieza y debajo la fila de reacciones. */
.cr-f--post { --ar: .74; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .12); }
.cr-f--post .cr-f__m { inset: 0 0 13% 0; border-radius: 8px 8px 0 0; }
.cr-f__foot { left: 8%; bottom: 4.5%; width: 34%; height: 4%; background: radial-gradient(circle, rgb(var(--fg-rgb) / .55) 45%, transparent 52%) 0 50% / 33.3% 100% repeat-x; }
/* Carrusel: dos láminas detrás y los puntos de paginación. */
.cr-f--carousel::before, .cr-f--carousel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ink-3);
  box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .16);
}
.cr-f--carousel::before { transform: translate(10px, -7px); opacity: .45; }
.cr-f--carousel::after { transform: translate(5px, -3.5px); opacity: .8; }
.cr-f--carousel .cr-f__m { z-index: 1; }
.cr-f__dots { z-index: 2; left: 50%; bottom: 6%; width: 26px; height: 4px; transform: translateX(-50%); background: radial-gradient(circle, var(--on-photo) 1.6px, transparent 2.1px) 0 50% / 6.5px 4px repeat-x; opacity: .9; }
/* Reel e historia: vertical 9:16. */
.cr-f--reel, .cr-f--story { --ar: .5625; border-radius: 10px; }
.cr-f--reel .cr-f__m::after, .cr-f--video .cr-f__m::after {
  content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(var(--shadow-rgb) / .55));
}
.cr-f__play {
  left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgb(var(--shadow-rgb) / .38); box-shadow: inset 0 0 0 1px rgb(var(--on-photo-rgb) / .7);
}
.cr-f__play::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--on-photo);
}
.cr-f__bar { left: 8%; right: 8%; bottom: 6%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--on-photo) 38%, rgb(var(--on-photo-rgb) / .35) 38%); }
.cr-f__seg { left: 6%; right: 6%; top: 3.5%; height: 2px; background: linear-gradient(90deg, var(--on-photo) 0 31%, transparent 31% 34.5%, rgb(var(--on-photo-rgb) / .45) 34.5% 65.5%, transparent 65.5% 69%, rgb(var(--on-photo-rgb) / .45) 69%); border-radius: 2px; }
.cr-f__av { left: 7%; top: 8%; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 1.5px var(--orange); }
/* Anuncio: la pieza y la franja con el botón de acción. */
.cr-f--ad { background: var(--ink-2); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .12); }
.cr-f--ad .cr-f__m { inset: 0 0 19% 0; border-radius: 8px 8px 0 0; }
.cr-f__cta { left: 8%; right: 8%; bottom: 6%; height: 7%; background: linear-gradient(rgb(var(--fg-rgb) / .38), rgb(var(--fg-rgb) / .38)) 0 50% / 38% 3px no-repeat; }
.cr-f__cta::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 36%; border-radius: 3px; background: var(--orange); }
/* Web: ventana de navegador. */
.cr-f--web { --ar: 1.6; height: calc(var(--fh, 128px) * .68); border-radius: 7px; background: var(--ink-3); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .16); }
.cr-f--web .cr-f__m { inset: 12px 0 0 0; border-radius: 0 0 7px 7px; }
.cr-f__chrome { left: 7px; top: 4px; width: 22px; height: 4px; background: radial-gradient(circle, rgb(var(--fg-rgb) / .5) 1.6px, transparent 2.1px) 0 50% / 7px 4px repeat-x; }
/* Pieza comercial impresa: papel con margen. */
.cr-f--print { --ar: .78; border-radius: 2px; background: #ECE9E4; }
.cr-f--print .cr-f__m { inset: 7%; border-radius: 1px; box-shadow: none; }
/* Video horizontal. */
.cr-f--video { --ar: 1.78; height: calc(var(--fh, 128px) * .6); border-radius: 6px; }
/* Invitación: tarjeta con las muescas de un boleto. */
.cr-f--invite .cr-f__m {
  -webkit-mask: radial-gradient(circle at 0 62%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 62%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
}
/* Retrato: arco arriba. */
.cr-f--portrait { border-radius: 999px 999px 8px 8px; }
/* LinkedIn: tarjeta con cabecera (perfil) y la imagen apaisada. */
.cr-f--linkedin { --ar: .92; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .14); }
.cr-f--linkedin .cr-f__m { inset: 26% 0 15% 0; border-radius: 0; }
.cr-f__head { left: 8%; top: 7%; width: 84%; height: 14%; background:
  radial-gradient(circle at 9px 50%, rgb(var(--fg-rgb) / .5) 6px, transparent 6.5px),
  linear-gradient(rgb(var(--fg-rgb) / .4), rgb(var(--fg-rgb) / .4)) 22px 30% / 46% 3px no-repeat,
  linear-gradient(rgb(var(--fg-rgb) / .2), rgb(var(--fg-rgb) / .2)) 22px 72% / 30% 3px no-repeat; }
.cr-f--linkedin .cr-f__foot { bottom: 5%; }


/* ============================================================
   8 · CALCULADORA en el capítulo claro (T13) y su resumen como
   tarjeta de plan (T15). El marcado de la calculadora lo escribe
   generate.js (ADMIN.md §3 smm): aquí solo se viste, y siempre con
   tokens, para que funcione mientras el capítulo se enciende.
   ============================================================ */
.cr-calc__head { max-width: 860px; margin-bottom: clamp(34px, 5vw, 60px); }
.cr-calc__head .muted { margin-top: clamp(16px, 2vw, 24px); max-width: 40em; font-size: var(--rl-fs-lede); line-height: 1.45; color: var(--rl-fg-2); }
.smm-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(20px, 3vw, 48px); align-items: start; }
.smm-calc__main { min-width: 0; }
.cr-calc.is-called .smm-gestion, .cr-calc.is-called .smm-summary { animation: cr-called 1.6s var(--ease-ui); }
@keyframes cr-called { 0% { border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--orange-rgb) / .18); } 100% { } }

.smm-gestion {
  border: 1px solid var(--rl-line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 32px); background: var(--rl-surface);
  transition: border-color .3s var(--ease-ui), background-color .3s var(--ease-ui);
}
.smm-gestion.is-on { border-color: rgb(var(--orange-rgb) / .7); }
.smm-gestion.is-off { background: transparent; }
.smm-gestion__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.smm-gestion__head h3 { font-size: 1.15rem; line-height: 1.25; color: var(--rl-fg); }
.smm-gestion__head p { color: var(--rl-fg-2); font-size: .92rem; margin-top: 6px; max-width: 46ch; }
.smm-gestion__price { white-space: nowrap; font-size: 1.45rem; font-weight: 300; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--rl-fg); }
.smm-gestion__price small { font-size: .55em; color: var(--rl-fg-2); margin-left: 2px; }

.smm-switch {
  flex: none; width: 58px; height: 32px; border-radius: 999px;
  border: 1px solid var(--rl-field); background: transparent;
  position: relative; cursor: pointer; transition: background-color .25s var(--ease-ui), border-color .25s var(--ease-ui);
}
.smm-switch::before { content: ''; position: absolute; inset: -7px -4px; }   /* área de toque de 44 px */
.smm-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--rl-fg-2); transition: transform .25s var(--ease-snap), background-color .25s var(--ease-ui);
}
.smm-switch:hover { border-color: var(--orange); }
.smm-switch[aria-checked="true"] { background: var(--orange); border-color: var(--orange); }
.smm-switch[aria-checked="true"]::after { transform: translateX(26px); background: var(--ink); }
.smm-switch:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.smm-gestion__inc { list-style: none; margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.cr-gest__fold { margin-top: 14px; }
.cr-gest__fold .smm-gestion__inc { margin-top: 6px; }
/* La frase de la gestión abre su desplegable (js/contenido.js la lleva ahí). */
.cr-gest__fold .cr-gest__line { margin: 2px 0 12px; max-width: 46ch; font-size: .92rem; line-height: 1.45; color: var(--rl-fg-2); }
.smm-gestion__inc li { padding-left: 20px; position: relative; font-size: .9rem; color: var(--rl-fg-2); transition: opacity .25s var(--ease-ui); }
.smm-gestion__inc li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.smm-gestion.is-off .smm-gestion__inc li { opacity: .45; text-decoration: line-through; }
.smm-gestion.is-off .smm-gestion__inc li::before { background: transparent; border: 1px solid var(--rl-fg-2); }
.smm-gestion__warn { margin-top: 16px; font-size: .88rem; color: var(--rl-fg-2); border-top: 1px solid var(--rl-line); padding-top: 14px; display: none; }
.smm-gestion.is-off .smm-gestion__warn { display: block; }

.smm-items__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  margin: 34px 4px 12px; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg);
}
.smm-items__head span { font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rl-fg-2); }
.smm-items { border: 1px solid var(--rl-line); border-radius: var(--r-lg); overflow: hidden; }
/* A 320 px la fila no cabía en una línea (WCAG 1.4.10): con flex-wrap el
   precio y el selector bajan en vez de desbordar. */
.smm-item {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  padding: 18px clamp(16px, 2vw, 26px); background: var(--rl-surface);
  transition: background-color .25s var(--ease-ui);
}
.smm-item > * { min-width: 0; }
.smm-item + .smm-item { border-top: 1px solid var(--rl-line); }
.smm-item::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: var(--orange); transform: scaleY(0); transition: transform .35s var(--ease-snap);
}
.smm-item:hover { background: color-mix(in srgb, var(--rl-surface) 94%, var(--rl-fg)); }
.smm-item.has-qty { background: color-mix(in srgb, var(--rl-surface) 93%, #FF4201); }
.smm-item.has-qty::before { transform: scaleY(1); }
.smm-item__name { font-size: 1rem; color: var(--rl-fg); }
.smm-item__meta { font-size: .82rem; color: var(--rl-fg-2); margin-top: 3px; max-width: 52ch; }
.smm-item__right { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; margin-left: auto; }
.smm-item__price { font-size: .95rem; color: var(--rl-fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.smm-item.has-qty .smm-item__price { color: var(--rl-fg); }
.smm-stepper { display: flex; align-items: center; gap: 4px; }
.smm-stepper button {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rl-field);
  background: transparent; color: var(--rl-fg); font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui), color .2s var(--ease-ui), transform .12s var(--ease-snap);
}
.smm-stepper button:hover:not(:disabled) { border-color: var(--orange); color: var(--rl-hot); }
.smm-stepper button[data-plus]:hover { background: var(--orange); color: var(--ink); }
.smm-stepper button:active:not(:disabled) { transform: scale(.92); }
.smm-stepper button:disabled { opacity: .35; cursor: default; border-color: var(--rl-line); }
.smm-stepper output { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--rl-fg); }
.smm-stepper output.is-bump { animation: cr-bump .32s var(--ease-snap); }
@keyframes cr-bump { 40% { transform: translateY(-3px); color: var(--rl-hot); } }
@media (pointer: coarse) { .smm-stepper button { width: 44px; height: 44px; } }

/* La tarjeta de plan (T15): nombre, la composición del plan, el total
   grande en naranja (en el claro, #FF4201 a ese tamaño da más de 3:1),
   la línea de ahorro (la barra del descuento por volumen), lo incluido
   como iconos que se van sumando, el desglose plegable y el botón. */
.smm-summary {
  position: sticky; top: 96px;
  padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg);
  background: var(--rl-surface); border: 1px solid rgb(var(--orange-rgb) / .55);
  box-shadow: 0 24px 60px -36px rgb(10 10 10 / .35);
}
.cr-plan__name { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; color: var(--rl-fg); }
.cr-plan__line { margin-top: 6px; font-size: .95rem; color: var(--rl-fg-2); min-height: 1.5em; }
.cr-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: clamp(18px, 2vw, 26px); }
.cr-plan__price strong {
  font-size: clamp(2.6rem, 1.9rem + 2vw, 3.7rem); font-weight: 200; line-height: 1; letter-spacing: -0.045em;
  color: var(--rl-hot-big); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cr-plan__per { font-size: .95rem; color: var(--rl-fg-2); }
.smm-goal { margin-top: 18px; }
.smm-goal__bar { height: 4px; border-radius: 999px; background: var(--rl-line); overflow: hidden; }
.smm-goal__fill { height: 100%; width: 0%; border-radius: 999px; background: var(--orange); transition: width .4s linear; }
.smm-goal__text { margin-top: 10px; font-size: .88rem; line-height: 1.45; color: var(--rl-fg-2); }
.smm-goal__text strong { color: var(--rl-fg); font-weight: 500; }
.smm-goal.is-unlocked .smm-goal__text { color: var(--rl-hot); }
.cr-plan__inc {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rl-line);
}
.cr-plan__inc li {
  position: relative; display: grid; justify-items: center; gap: 7px; text-align: center;
  font-size: .76rem; line-height: 1.2; color: var(--rl-fg-2);
  transition: color .3s var(--ease-ui), opacity .3s var(--ease-ui);
}
.cr-plan__inc li:not(.is-on) { opacity: .6; }
.cr-plan__inc i {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--rl-line); color: var(--rl-fg-2);
  transition: border-color .3s var(--ease-ui), color .3s var(--ease-ui), transform .4s var(--ease-snap);
}
.cr-plan__inc svg { width: 22px; height: 22px; }
.cr-plan__inc li.is-on { color: var(--rl-fg); }
.cr-plan__inc li.is-on i { border-color: var(--orange); color: var(--rl-fg); }
.cr-plan__inc li.is-pop i { animation: cr-pop .45s var(--ease-snap); }
@keyframes cr-pop { 40% { transform: scale(1.12); } }
.cr-plan__inc b {
  position: absolute; top: -7px; left: calc(50% + 14px); min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--orange); color: var(--ink); font-size: .72rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.cr-plan__inc b:empty { display: none; }
.cr-plan__fold { margin-top: 14px; }
.smm-summary__rows { display: grid; gap: 10px; padding-top: 6px; font-size: .95rem; }
.smm-summary__rows > div { display: flex; justify-content: space-between; gap: 12px; color: var(--rl-fg-2); font-variant-numeric: tabular-nums; }
.smm-summary__rows > div:last-child { padding-top: 10px; border-top: 1px solid var(--rl-line); }
.smm-summary__rows .disc { color: var(--rl-hot); }
.smm-summary__rows .disc.hidden, .smm-row-gestion.hidden { display: none; }
.cr-plan__foot { display: grid; gap: 4px; margin-top: 18px; }
.smm-summary .btn--wa { width: 100%; height: auto; padding: 13px 20px; gap: 14px; text-align: left; justify-content: space-between; }
/* El botón principal lleva debajo lo que se va a enviar (total + de qué
   está hecho el plan). .84 de opacidad: por debajo la tinta sobre naranja
   baja de 4,5:1 y este texto es pequeño. */
.btn__lines { display: grid; gap: 5px; min-width: 0; }
.btn__sub { font-size: .76rem; font-weight: 400; line-height: 1.32; opacity: .84; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.smm-summary .btn--wa:hover .btn__sub, .smm-summary .btn--wa:focus-visible .btn__sub { opacity: 1; }
.btn--wa .btn__arrow { flex: 0 0 auto; }
.cr-plan__mail { justify-self: center; font-size: .95rem; }
.smm-summary__note { margin-top: 6px; font-size: .8rem; text-align: center; color: var(--rl-fg-2); }
@media (max-width: 960px) {
  .smm-calc { grid-template-columns: 1fr; }
  .smm-summary { position: static; }
  .smm-gestion__inc { grid-template-columns: 1fr; }
}
/* En el teléfono el texto de la gestión ocupa todo el ancho y el precio
   con su interruptor bajan a una fila propia. El !important vence al
   estilo en línea que escribe generate.js en ese bloque. */
@media (max-width: 560px) {
  .smm-gestion__head { flex-wrap: wrap; gap: 14px; }
  .smm-gestion__head > div:first-child { flex: 1 1 100%; }
  .smm-gestion__head > div:last-child {
    flex: 1 1 100%; flex-direction: row !important; align-items: center !important; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid var(--rl-line);
  }
  .cr-plan__inc { gap: 4px; }
  .cr-plan__inc i { width: 42px; height: 42px; }
}

/* ---------- Calculadora: una línea, el feed y las descripciones en un "i" ----------
   (cont-08 + presupuesto de palabras: zona de decisión ≤ 150). Con JS la
   frase generada (descuento e IVA) deja su lugar a una línea corta y pasa
   a la nota 1; sin JS se ve la de siempre. */
.cr-calc__line { margin-top: clamp(14px, 1.6vw, 20px); max-width: 34em; }
html.rl-js .cr-calc__head > p.muted { display: none; }
html:not(.rl-js) .cr-calc__line { display: none; }
/* La descripción de cada pieza, detrás de un "i" (al pasar, al enfocar o al
   tocar). La lee el lector de pantalla con el botón (aria-describedby). */
.cr-tip {
  position: relative; flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--rl-field); background: transparent; color: var(--rl-fg-2);
  font-family: inherit; font-size: .74rem; font-weight: 600; font-style: normal; line-height: 1; cursor: help;
  display: inline-grid; place-items: center; transition: border-color .2s var(--ease-ui), color .2s var(--ease-ui);
}
.cr-tip::before { content: ''; position: absolute; inset: -11px; }   /* área de toque de 44 px */
.cr-tip:hover, .cr-tip[aria-expanded="true"] { border-color: var(--orange); color: var(--rl-fg); }
.cr-tip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
html.cr-tips .smm-item > div:first-child { position: relative; display: flex; align-items: center; gap: 9px; }
/* La lista ya no recorta (el globo de la última pieza sale por abajo): las
   esquinas redondeadas pasan a la primera y la última pieza. */
html.cr-tips .smm-items { overflow: visible; }
html.cr-tips .smm-item:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
html.cr-tips .smm-item:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
html.cr-tips .smm-item.is-tip { z-index: 3; }
.cr-feed__t.is-pop { animation: cr-pop .45s var(--ease-snap); }
html.cr-tips .smm-item__meta {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 10px); width: max-content; max-width: min(300px, 74vw);
  margin: 0; padding: 10px 13px; border-radius: 12px;
  background: #0A0A0A; color: #F4F4F6; font-size: .82rem; line-height: 1.4;
  box-shadow: 0 16px 34px -16px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s var(--ease-ui), transform .25s var(--ease-enter), visibility 0s .25s;
  pointer-events: none;
}
html.cr-tips .smm-item__meta::before { content: ''; position: absolute; left: 14px; top: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
html.cr-tips .smm-item.is-tip .smm-item__meta { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-ui), transform .25s var(--ease-enter), visibility 0s; }

/* El feed del plan: un teléfono oscuro dentro de la tarjeta clara. Cada
   pieza es un cuadro con su ícono (Flip los reacomoda al sumar o restar);
   la gestión es el aro del perfil. La leyenda (lo incluido) va al lado. */
.cr-feed {
  display: grid; grid-template-columns: minmax(0, 178px) minmax(0, 1fr); gap: 18px; align-items: center;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rl-line);
}
.cr-feed__phone {
  display: grid; gap: 8px; padding: 12px 10px 10px; border-radius: 22px; background: #0E0E10;
  box-shadow: 0 0 0 1px rgb(10 10 10 / .08), 0 18px 40px -22px rgb(10 10 10 / .55); color: #F4F4F6;
}
.cr-feed__top { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.cr-feed__av {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 2px;
  background: rgb(244 244 246 / .16); transition: background-color .4s var(--ease-ui);
}
.cr-feed__av i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #0E0E10; background: linear-gradient(145deg, #3A3A3E, #1A1A1D); }
.cr-feed.is-gest .cr-feed__av { background: conic-gradient(from 210deg, #FF4201, #FF8A3D, #FF4201); }
.cr-feed__who { display: grid; gap: 2px; min-width: 0; }
.cr-feed__who b { font-size: .74rem; font-weight: 500; line-height: 1.1; }
.cr-feed__who em { font-style: normal; font-size: .64rem; color: rgb(244 244 246 / .62); font-variant-numeric: tabular-nums; }
.cr-feed__tag {
  justify-self: start; margin-left: 2px; padding: 3px 8px; border-radius: 999px; font-size: .6rem; font-weight: 500; letter-spacing: .02em;
  background: rgb(244 244 246 / .08); color: rgb(244 244 246 / .7);
}
.cr-feed.is-gest .cr-feed__tag { background: rgb(var(--orange-rgb) / .18); color: #FF8A5C; }
.cr-feed__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border-radius: 6px; overflow: hidden; }
.cr-feed__ph, .cr-feed__t { position: relative; aspect-ratio: 4 / 5; }
.cr-feed__ph { background: rgb(244 244 246 / .04); box-shadow: inset 0 0 0 1px rgb(244 244 246 / .06); }
.cr-feed__t { background: var(--bg, #2B2724); overflow: hidden; }
.cr-feed__t::after { display: none; }
.cr-feed__t--carousel::after, .cr-feed__t--reel::after { display: block; }
.cr-feed__t::before { /* el ícono de la pieza, al centro y suave */
  content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: rgb(244 244 246 / .58); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.cr-feed__t::after { /* el ícono de Instagram arriba a la derecha (carrusel y reel) */
  content: ''; position: absolute; right: 4px; top: 4px; width: 9px; height: 9px;
  background: #F4F4F6; -webkit-mask: var(--mark, none) center / contain no-repeat; mask: var(--mark, none) center / contain no-repeat;
}
.cr-feed__t--post { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 11.5V18h12v-3l-3.2-3.2-3 3-2-2z' fill='%23000'/%3E%3C/svg%3E"); }
.cr-feed__t--design { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 3v1.6h8V6z' fill='%23000'/%3E%3C/svg%3E"); }
.cr-feed__t--carousel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h11a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm14 1h2v11h-2zm3.5 1.5H23v8h-1.5z' fill='%23000'/%3E%3C/svg%3E");
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1h8v8H3zM1 3h1v8h8v1H1z' fill='%23000'/%3E%3C/svg%3E"); }
.cr-feed__t--reel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23000'/%3E%3C/svg%3E");
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm2.5 2.6v4.8L8.4 6z' fill='%23000'/%3E%3C/svg%3E"); }
.cr-feed__t--reel::before { background: rgb(var(--orange-rgb) / .9); }
.cr-feed__more { display: grid; place-items: center; font-size: .78rem; font-weight: 500; color: #F4F4F6; background: #26262A; font-variant-numeric: tabular-nums; }
.cr-feed__more::before, .cr-feed__more::after { display: none; }
/* La leyenda: la lista de lo incluido (con su texto para lector), en columna. */
.cr-feed .cr-plan__inc { grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; border: 0; }
.cr-feed .cr-plan__inc li { grid-template-columns: 36px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 10px; text-align: left; font-size: .84rem; }
.cr-feed .cr-plan__inc i { width: 36px; height: 36px; border-radius: 11px; }
.cr-feed .cr-plan__inc svg { width: 18px; height: 18px; }
.cr-feed .cr-plan__inc b { position: static; justify-self: end; }
.cr-plan__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 8px; }
.cr-plan__share { background: none; border: 0; padding: 0; font: inherit; font-size: .95rem; color: var(--rl-fg); cursor: pointer; }
.cr-plan__share[hidden] { display: none; }
.cr-plan__more .cr-plan__mail { justify-self: auto; }
.cr-plan__said { min-height: 1.2em; font-size: .82rem; text-align: center; color: var(--rl-fg-2); }
@media (max-width: 960px) {
  .cr-feed { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .cr-feed { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; }
  .cr-feed .cr-plan__inc li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; font-size: .78rem; }
  .cr-feed .cr-plan__inc i { width: 30px; height: 30px; border-radius: 9px; }
}

/* ============================================================
   9 · PRODUCCIÓN (T10 · ventana con tres pestañas)
   Cada vista es una composición de piezas reales en su lienzo (las
   medidas, en unidades del lienzo). Al elegir la pestaña, las piezas se
   abren en abanico desde el centro (la clase .is-on la pone el kit).
   ============================================================ */
.cr-view {
  position: absolute; inset: 0; container-type: size;
  background: radial-gradient(70% 80% at 50% 58%, rgb(var(--fg-rgb) / .05), transparent 70%), var(--rl-surface);
}
.cr-view__card {
  --h: 64cqh; --sx: 30cqw; --rot: 5deg;
  position: absolute; left: 50%; top: 47%; margin: 0;
  display: grid; justify-items: center; gap: 10px;
  transform: translate(-50%, -50%) translateX(calc((var(--i, 1) - 1) * var(--sx))) rotate(calc((var(--i, 1) - 1) * var(--rot)));
  transition: transform .9s var(--ease-enter);
}
.cr-view__card:nth-child(1) { --i: 0; }
.cr-view__card:nth-child(2) { --i: 1; z-index: 2; }
.cr-view__card:nth-child(3) { --i: 2; }
.cr-view__card img {
  display: block; height: var(--h); width: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px; background: var(--ink-3); outline: 1px solid rgb(var(--fg-rgb) / .08); outline-offset: -1px;
}
.cr-view__card:nth-child(2) img { height: calc(var(--h) * 1.1); }
.cr-view__card figcaption, .cr-view__tag { display: flex; gap: 8px; align-items: baseline; font-size: .8rem; color: var(--rl-fg-2); }
.cr-view__card figcaption span, .cr-view__tag span { font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rl-hot); }
/* Antes de elegir la pestaña las piezas esperan apiladas en el centro. */
html.rl-anim .rl-win__view:not(.is-on) .cr-view__card { transform: translate(-50%, -50%) rotate(calc((var(--i, 1) - 1) * 2deg)); transition-duration: .3s; }
.cr-view--photo .cr-view__card { --rot: 0deg; --sx: 31cqw; }
.cr-view--photo .cr-view__card:nth-child(2) img { height: calc(var(--h) * 1.18); }
.cr-view--video { display: grid; place-items: center; align-content: center; gap: 12px; }
.cr-view__phone { position: relative; height: 82cqh; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .14); }
.cr-view__phone .rl-loop video { border-radius: inherit; }
@media (max-width: 759px) {
  .cr-view__card { --h: 42cqh; --sx: 27cqw; --rot: 4deg; top: 48%; }
  .cr-view__card figcaption { font-size: .72rem; }
  .cr-view--photo .cr-view__card { --sx: 28cqw; }
  .cr-view__phone { height: 80cqh; border-radius: 20px; }
}
/* ---------- La pestaña Video (cont-05): los reels a sala llena ----------
   El reel al centro sobre su propio fotograma desenfocado, el nombre de
   la marca en grande detrás, el formato a la izquierda, la marca a la
   derecha y una barra por segmentos (uno por reel) que se llena con el
   avance de cada uno. */
.cr-reels { display: block; background: #050505; overflow: hidden; }
.cr-reels__bg { position: absolute; inset: -6%; }
.cr-reels__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.15) brightness(.42); transform: scale(1.08); transition: opacity .6s var(--ease-ui); }
.cr-reels__name {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%);
  display: flex; justify-content: space-between; align-items: center; padding: 0 3.2cqw;
  font-size: min(14cqw, 30cqh); font-weight: 500; line-height: .9; letter-spacing: -0.055em; color: #F4F4F6; pointer-events: none;
}
.cr-reels__phone {
  position: absolute; left: 50%; top: 46%; height: 78cqh; aspect-ratio: 9 / 16; transform: translate(-50%, -50%);
  border-radius: 22px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgb(244 244 246 / .14), 0 40px 80px -30px rgb(0 0 0 / .9);
}
.cr-reels__phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-reels__kind, .cr-reels__meta {
  position: absolute; bottom: calc(5cqh + 18px); display: flex; align-items: baseline; gap: 8px;
  font-size: .82rem; line-height: 1.2; color: #F4F4F6; font-variant-numeric: tabular-nums;
}
.cr-reels__kind { left: 3.2cqw; }
.cr-reels__kind span { font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #FF6A33; }
.cr-reels__kind b { font-weight: 500; }
.cr-reels__meta { right: 3.2cqw; font-weight: 500; }
.cr-reels__meta span { font-weight: 400; color: rgb(244 244 246 / .62); }
.cr-reels__bar { position: absolute; left: 3.2cqw; right: 3.2cqw; bottom: 4cqh; display: flex; gap: 6px; }
.cr-reels__seg { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.cr-reels__seg i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgb(244 244 246 / .26); overflow: hidden; }
.cr-reels__seg i::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cr-reels__seg.is-done i::after { transform: scaleX(1); }
.cr-reels__seg:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.cr-reels__pause { position: absolute; top: 16px; right: 16px; z-index: 2; }
@media (max-width: 759px) {
  .cr-reels__name { top: 4cqh; transform: none; justify-content: center; gap: .22em; font-size: 15cqw; }
  .cr-reels__phone { top: 52%; height: 64cqh; border-radius: 16px; }
  .cr-reels__kind, .cr-reels__meta { bottom: calc(4cqh + 16px); font-size: .74rem; }
  .cr-reels__kind span { font-size: .62rem; }
  .cr-reels__pause { top: auto; bottom: calc(4cqh + 44px); right: 3.2cqw; }
}
.cr-prod .rl-win__panel .rl-fold { margin-top: 12px; }
.cr-prod .rl-win__panel .rl-fold__btn { justify-self: center; }
@media (max-width: 759px) { .cr-prod .rl-win__panel .rl-fold__btn { justify-self: start; } }
.cr-prod .rl-win__panel .cr-chips { justify-content: center; }
@media (max-width: 759px) { .cr-prod .rl-win__panel .cr-chips { justify-content: flex-start; } }

/* ============================================================
   10 · UNA IDEA. MUCHOS FORMATOS. (T12 · galería horizontal)
   Cada tarjeta lleva la idea en el centro y, alrededor, la misma marca
   real convertida en cada formato (lo arma js/contenido.js desde la
   lista de la tarjeta). En tarjetas angostas, una rejilla.
   ============================================================ */
.cr-formats .rl-gal__head { align-items: end; }

/* ---------- Una pieza que se convierte en cada formato (cont-03) ----------
   Quieta (sin JS, movimiento reducido, pantalla baja): la tira con la
   misma pieza en cada proporción. Con .is-live (lo pone js/contenido.js)
   la columna del dibujo mide una pantalla más un tramo por formato, la
   pieza se pega y el scroll le cambia el ancho, el alto y el recorte;
   la tira queda para el lector de pantalla. */
.cr-formats { padding-bottom: clamp(64px, 8vw, 120px); }
.cr-morph { margin-bottom: clamp(56px, 7vw, 110px); }
.cr-morph__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.cr-morph__text .rl-title { max-width: 13em; }
.cr-morph__stage { margin: 0; display: grid; gap: 16px; align-content: start; }
.cr-morph__view { display: none; }
.cr-morph__strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 14px; }
.cr-morph__s { display: grid; justify-items: start; gap: 8px; }
.cr-morph__sm {
  position: relative; display: block; height: clamp(104px, 11vw, 150px); aspect-ratio: var(--ar, 1);
  overflow: hidden; border-radius: 8px; background: var(--rl-surface);
}
.cr-morph__sm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--o, 50% 50%); }
.cr-morph__sl { font-size: .78rem; line-height: 1.2; color: var(--rl-fg-2); }
.cr-morph__cap { font-size: .9rem; line-height: 1.4; color: var(--rl-fg-2); }
.cr-morph__cap b { font-weight: 500; color: var(--rl-fg); margin-right: .35em; }

/* Unas 0,3 pantallas por formato: la escena entera mide 1,8 pantallas
   (con 28svh por formato eran 2,4 y la página se alargaba). */
.cr-morph.is-live .cr-morph__track { height: calc(100svh + (var(--n, 6) - 1) * 16svh); }
.cr-morph.is-live .cr-morph__text { position: sticky; top: calc(var(--cr-chrome, 60px) + (100svh - var(--cr-chrome, 60px)) * .22); }
.cr-morph.is-live .cr-morph__stage {
  --sh: min(calc(100svh - var(--cr-chrome, 60px) - 6vh), 760px);
  position: sticky; top: calc(var(--cr-chrome, 60px) + (100svh - var(--cr-chrome, 60px) - var(--sh)) / 2);
  height: var(--sh); grid-template-rows: minmax(0, 1fr) auto;
}
.cr-morph.is-live .cr-morph__view { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 18px; min-height: 0; }
.cr-morph.is-live .cr-morph__strip {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cr-morph__frame {
  position: relative; width: 300px; height: 300px; overflow: hidden; border-radius: 14px;
  background: var(--rl-surface); box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .1), 0 40px 80px -40px rgb(0 0 0 / .7);
}
.cr-morph__l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; }
.cr-morph__chip {
  position: absolute; left: 12px; top: 12px; z-index: 3; padding: 6px 11px; border-radius: 999px;
  background: rgb(10 10 10 / .62); color: #F4F4F6; font-size: .8rem; font-weight: 500; line-height: 1; letter-spacing: .01em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap;
  transition: top .35s var(--ease-enter);
}
/* Lo mínimo de la interfaz de cada formato: aparece cuando el formato llega. */
.cr-morph__frame > i, .cr-morph__cta { position: absolute; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-ui); }
.cr-morph__seg { left: 10px; right: 10px; top: 9px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #F4F4F6 0 31%, transparent 31% 34.5%, rgb(244 244 246 / .45) 34.5% 65.5%, transparent 65.5% 69%, rgb(244 244 246 / .45) 69%); }
.cr-morph__frame[data-k="story"] .cr-morph__seg { opacity: 1; }
.cr-morph__frame[data-k="story"] .cr-morph__chip { top: 22px; }
.cr-morph__play { left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgb(10 10 10 / .38); box-shadow: inset 0 0 0 1.5px rgb(244 244 246 / .8); }
.cr-morph__play::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #F4F4F6; }
.cr-morph__frame[data-k="reel"] .cr-morph__play { opacity: 1; }
.cr-morph__web { left: 0; right: 0; top: 0; height: 26px; background: #1A1A1D;
  box-shadow: inset 0 -1px 0 rgb(244 244 246 / .08); }
.cr-morph__web::before { content: ''; position: absolute; left: 12px; top: 10px; width: 30px; height: 6px;
  background: radial-gradient(circle, rgb(244 244 246 / .45) 2.4px, transparent 3px) 0 50% / 10px 6px repeat-x; }
.cr-morph__frame[data-k="web"] .cr-morph__web { opacity: 1; }
.cr-morph__frame[data-k="web"] .cr-morph__chip { top: 36px; }
.cr-morph__cta { left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: #111113; color: #F4F4F6; font-size: .78rem; }
.cr-morph__cta b { font-weight: 500; }
/* El botón del anuncio: una flecha en tinta sobre naranja (vacío parecía un
   botón roto). */
.cr-morph__cta i { position: relative; flex: none; width: 46px; height: 26px; border-radius: 6px; background: var(--orange); }
.cr-morph__cta i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px;
  border: solid var(--ink); border-width: 1.8px 1.8px 0 0; transform: rotate(45deg);
}
.cr-morph__frame[data-k="ad"] .cr-morph__cta { opacity: 1; }
/* Un video real (versiones del panel) ya se mueve: sin el triángulo de reel. */
.cr-morph__frame[data-v] .cr-morph__play { opacity: 0; }
/* Su pausa, en el pie junto al riel (solo si alguna versión real es video);
   más tenue mientras el formato a la vista no es el video. */
.cr-morph__pause { position: relative; flex: none; width: 34px; height: 34px; background: rgb(var(--ink-rgb) / .78); border: 1px solid var(--line-on-ink); }
.cr-morph__pause svg { width: 12px; height: 12px; }
.cr-morph__pause.is-off { opacity: .45; }
/* El riel: todos los formatos, el que se ve marcado; el pie, centrado debajo. */
.cr-morph__foot { display: flex; justify-content: center; align-items: center; gap: 12px 18px; max-width: 100%; }
.cr-morph.is-live .cr-morph__cap { text-align: center; }
.cr-morph__rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: 100%; }
.cr-morph__rail li {
  position: relative; padding-left: 12px; font-size: .78rem; line-height: 1.3; color: var(--rl-fg-2);
  transition: color .3s var(--ease-ui);
}
.cr-morph__rail li::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: rgb(var(--fg-rgb) / .28); transition: background-color .3s var(--ease-ui), transform .3s var(--ease-snap); }
.cr-morph__rail li.is-past::before { background: rgb(var(--fg-rgb) / .6); }
.cr-morph__rail li.is-on { color: var(--rl-fg); }
.cr-morph__rail li.is-on::before { background: var(--orange); transform: scale(1.4); }
/* La galería de casos, debajo, con su propio subtítulo. */
.cr-formats__sub { max-width: 34em; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.012em; color: var(--rl-fg); }
.cr-formats__sub span { display: block; font-weight: 400; color: var(--rl-fg-2); font-size: .82em; margin-top: 4px; }
@media (max-width: 959px) {
  .cr-morph__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cr-morph.is-live .cr-morph__text { position: static; }
  .cr-morph.is-live .cr-morph__stage { --sh: calc(100svh - var(--cr-chrome, 60px) - 26px); top: calc(var(--cr-chrome, 60px) + 10px); }
  .cr-morph.is-live .cr-morph__track { height: calc(100svh + (var(--n, 6) - 1) * 16svh); }
  .cr-morph__sm { height: 92px; }
}

.cr-formats .rl-gal__item { width: clamp(300px, 44vw, 660px); }
.cr-case__frame { aspect-ratio: 5 / 4; container-type: size; background: radial-gradient(60% 70% at 50% 50%, rgb(var(--fg-rgb) / .05), transparent 72%), var(--rl-surface); }
.cr-case__art { position: absolute; inset: 0; --fh: 19cqh; }
.cr-case .rl-gal__cap { max-width: 40ch; }
.cr-case__formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Con JS la lista se lee en el dibujo (con sus rótulos) y queda para el
   lector de pantalla; sin JS, la lista a la vista bajo la tarjeta. */
.cr-case.is-js .cr-case__formats { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.rl-js) .cr-case__frame { display: none; }
@media (max-width: 759px) {
  .cr-formats .rl-gal__head { flex-direction: column; align-items: flex-start; }
  .cr-formats .rl-gal__item { width: min(86vw, 380px); }
  .cr-case__frame { aspect-ratio: 4 / 5; }
}

/* El dibujo: la idea (un círculo con su nombre y la marca) y los
   formatos alrededor, unidos por trazos finos. --x/--y (px) y el avance
   --k (0 = dentro de la idea, 1 = en su sitio) los escribe JS. */
.cr-orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cr-orbit__lines line { stroke: rgb(var(--orange-rgb) / .42); stroke-width: 1; stroke-dasharray: 2 4; }
.cr-orbit__core {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); z-index: 2;
  width: clamp(96px, 24cqh, 140px); aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; text-align: center; border-radius: 50%;
  background: var(--rl-surface); border: 1px solid rgb(var(--orange-rgb) / .7);
}
.cr-orbit__txt { display: grid; justify-items: center; gap: 5px; padding: 0 10px; }
.cr-orbit__txt::before { content: 'La idea'; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); font-weight: 500; }
.cr-orbit__label { font-size: clamp(.86rem, .8rem + .3vw, 1rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--rl-fg); }
.cr-orbit__brand { font-size: .7rem; line-height: 1.2; color: var(--rl-fg-2); }
.cr-sat {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  opacity: var(--k, 1);
  transform: translate(calc(var(--x) * 1px - 50%), calc(var(--y) * 1px - 50%))
             translate(calc(var(--dx) * (1 - var(--k, 1)) * 1px), calc(var(--dy) * (1 - var(--k, 1)) * 1px))
             scale(calc(.45 + .55 * var(--k, 1)));
  will-change: transform, opacity;
}
.cr-sat__label {
  max-width: 130px; font-size: .74rem; line-height: 1.2; color: var(--rl-fg);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease-ui), transform .35s var(--ease-snap);
}
.cr-sat.is-in .cr-sat__label { opacity: 1; transform: none; transition-delay: .05s; }
/* Rejilla (tarjeta angosta): la idea arriba y los formatos en filas. */
.cr-case__art.is-grid { display: grid; grid-template-rows: auto auto; align-content: center; gap: 22px; padding: 18px 14px; --fh: 16cqh; }
.cr-case__art.is-grid .cr-orbit__core { position: relative; left: auto; top: auto; transform: none; width: auto; aspect-ratio: auto; justify-self: center; padding: 8px 16px; border-radius: 999px; }
.cr-case__art.is-grid .cr-orbit__txt { grid-auto-flow: column; align-items: baseline; gap: 8px; padding: 0; }
.cr-mini__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; align-content: start; }
.cr-mini__it { display: grid; justify-items: center; align-content: start; gap: 7px; text-align: center; min-width: 0; }
.cr-mini__g { display: flex; align-items: flex-end; justify-content: center; height: var(--fh); width: 100%; }
.cr-mini__g .cr-f { max-width: 100%; }
.cr-mini__g .cr-f--web, .cr-mini__g .cr-f--video { height: auto; width: min(100%, calc(var(--fh) * 1.12)); }
.cr-mini__label { font-size: .68rem; line-height: 1.2; color: var(--rl-fg); }
.cr-mini__it { transition: opacity .5s var(--ease-ui), transform .7s var(--ease-enter); transition-delay: calc(var(--i, 0) * 60ms); }
html.cr-anim .cr-case__art.is-grid:not(.is-open) .cr-mini__it { opacity: 0; transform: translateY(14px) scale(.94); }

/* ============================================================
   11 · CAMPAÑAS & PAUTA (T01 + T02, con el detalle detrás de un '+')
   ============================================================ */
.cr-ads .rl-title { max-width: 17ch; }   /* "Crear es una parte. / Hacer que llegue, otra." */
/* La columna del texto un poco más ancha que la del dibujo: el titular
   cabe en dos líneas también a 1024. */
@media (min-width: 960px) { .rl-screen--split.rl-screen--flip.cr-ads .rl-screen__grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); } }
.cr-ads__fold { margin-top: clamp(18px, 2.4vw, 28px); }
.cr-ads .rl-screen__visual { display: grid; justify-items: center; }
.cr-reach {
  position: relative; width: min(100%, 62svh, 600px); aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--rl-line); border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 50%, rgb(var(--fg-rgb) / .035), transparent 62%), var(--rl-surface);
}
.cr-reach__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cr-reach__piece {
  position: absolute; left: 50%; top: 50%; width: 19%; aspect-ratio: 4 / 5; transform: translate(-50%, -50%);
  overflow: hidden; border-radius: 8px; background: var(--ink-3);
  box-shadow: 0 0 0 1px rgb(var(--orange-rgb) / .8), 0 0 0 6px rgb(var(--ink-2-rgb) / .9);
}
/* Una pieza real (Equindeca) en el centro: el anillo sale de ella. */
.cr-reach__piece img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-reach__legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 7px 14px; border-radius: 999px; background: rgb(var(--ink-2-rgb) / .92); border: 1px solid var(--line-on-ink);
  font-size: .76rem; color: var(--text-on-ink-2);
}
.cr-reach__key { display: inline-flex; align-items: center; gap: 8px; }
.cr-reach__key::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--fg-rgb) / .4); }
.cr-reach__key--hit { color: var(--text-on-ink); }
.cr-reach__key--hit::before { width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 0 4px rgb(var(--orange-rgb) / .14); }
.cr-reach__pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; background: rgb(var(--ink-rgb) / .78); border: 1px solid var(--line-on-ink); }
.cr-reach__pause svg { width: 13px; height: 13px; }
.cr-reach__pause[hidden] { display: none; }
.cr-checks { border-top: 1px solid var(--rl-line); }
.cr-checks li {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rl-line);
  font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--rl-fg);
}
/* El check se dibuja: primero el trazo corto, después el largo, uno
   detrás de otro por fila (al abrir el plegable). */
.cr-checks li::before {
  content: ''; width: 13px; height: 7px; margin: -5px 0 0 2px;
  border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange);
  transform: rotate(-45deg); transform-origin: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path .5s var(--ease-enter), opacity .2s var(--ease-ui);
  transition-delay: calc(var(--k, 0) * 90ms + 150ms);
}
html.cr-anim .cr-checks:not(.is-on) li::before { clip-path: inset(0 100% 0 0); opacity: 0; }
@media (max-width: 959px) {
  .cr-ads .rl-screen__visual { justify-items: start; }
  .cr-reach { width: min(100%, 460px); }
}

/* ============================================================
   12 · LO QUE APRENDEMOS TAMBIÉN ES CONTENIDO (cont-09)
   El cierre del mes como historias de un solo dato (9:16). Sin JS o con
   movimiento reducido: las seis fichas en rejilla. Con .is-live (lo pone
   js/contenido.js): una historia al frente y las vecinas asomando,
   segmentos de avance arriba, flechas y pausa.
   ============================================================ */
.cr-learn { padding-block: clamp(72px, 9vh, 110px); }
.cr-learn__head { margin-bottom: clamp(22px, 3vw, 38px); }
.cr-learn__head .rl-title { max-width: 17em; text-wrap: balance; }   /* dos líneas a 68 px */
/* El texto arriba, pegado a su titular (centrado contra las historias
   quedaba flotando a 200 px del titular y se leía como otro bloque). */
.cr-learn__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.cr-learn__text { max-width: 30em; }
.cr-stories { --sw: min(clamp(220px, 17vw, 280px), calc((100svh - 430px) * .5625)); display: grid; gap: 14px; justify-items: center; }
.cr-stories__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.cr-story {
  position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  aspect-ratio: 9 / 16; padding: 52px 18px 18px; border-radius: 16px; color: #F4F4F6;
  background:
    radial-gradient(120% 70% at 100% 0%, oklch(46% .09 var(--tone, 30deg) / .55), transparent 62%),
    linear-gradient(170deg, oklch(26% .035 var(--tone, 30deg)), oklch(15% .015 var(--tone, 30deg)));
  box-shadow: inset 0 0 0 1px rgb(244 244 246 / .08);
}
.cr-story__q { font-size: .82rem; line-height: 1.3; color: rgb(244 244 246 / .72); }
.cr-story__a { font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.cr-story__s { font-size: .86rem; line-height: 1.35; color: rgb(244 244 246 / .78); max-width: 20ch; }
.cr-story__eg {
  position: absolute; left: 18px; top: 16px; padding: 4px 9px; border-radius: 999px;
  font-size: .64rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  background: rgb(244 244 246 / .1); color: rgb(244 244 246 / .82);
}
/* El dibujo de cada respuesta: un formato en línea fina, abajo. */
.cr-story__art { position: relative; margin-top: auto; align-self: center; width: 58%; aspect-ratio: 1; display: block; }
.cr-story__art i { position: absolute; display: block; border: 1.5px solid rgb(244 244 246 / .55); border-radius: 10px; }
.cr-story__art--reel i { inset: 0 18%; border-radius: 12px; }
.cr-story__art--reel i::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--orange); }
.cr-story__art--talk i { width: 62%; height: 26%; border-radius: 14px 14px 14px 4px; }
.cr-story__art--talk i:nth-child(1) { left: 0; top: 4%; }
.cr-story__art--talk i:nth-child(2) { right: 0; top: 37%; border-radius: 14px 14px 4px 14px; border-color: var(--orange); }
.cr-story__art--talk i:nth-child(3) { left: 8%; top: 70%; width: 44%; }
.cr-story__art--carousel i { top: 8%; bottom: 8%; width: 62%; }
.cr-story__art--carousel i:nth-child(1) { left: 0; border-color: var(--orange); background: rgb(var(--orange-rgb) / .12); z-index: 2; }
.cr-story__art--carousel i:nth-child(2) { left: 22%; opacity: .7; }
.cr-story__art--carousel i:nth-child(3) { left: 38%; opacity: .4; }
.cr-story__art--target i { border-radius: 50%; }
.cr-story__art--target i:nth-child(1) { inset: 0; }
.cr-story__art--target i:nth-child(2) { inset: 20%; opacity: .8; }
.cr-story__art--target i:nth-child(3) { inset: 40%; background: var(--orange); border-color: var(--orange); }
.cr-story__art--skip i { inset: 6% 14%; }
.cr-story__art--skip i::before, .cr-story__art--skip i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 1.5px; background: var(--orange); transform: translate(-50%, -50%) rotate(45deg); }
.cr-story__art--skip i::after { transform: translate(-50%, -50%) rotate(-45deg); background: rgb(244 244 246 / .55); }
.cr-story__art--poll i:nth-child(1) { left: 0; right: 0; top: 10%; height: 30%; border-radius: 999px; }
.cr-story__art--poll i:nth-child(2) { left: 0; right: 0; top: 52%; height: 30%; border-radius: 999px; border-color: var(--orange); background: linear-gradient(90deg, rgb(var(--orange-rgb) / .35) 0 62%, transparent 62%); }
.cr-stories__note { max-width: 40ch; margin-top: clamp(18px, 2.4vw, 28px); font-size: .82rem; line-height: 1.45; color: var(--rl-fg-2); }

/* Visor de historias (con JS y movimiento) */
.cr-stories.is-live .cr-stories__list { position: relative; display: block; width: 100%; height: calc(var(--sw) * 16 / 9); overflow: hidden; }
.cr-stories.is-live .cr-story {
  position: absolute; left: 50%; top: 0; width: var(--sw); margin-left: calc(var(--sw) / -2);
  transform: translateX(calc(var(--off, 0) * 74%)) scale(var(--sc, 1)); opacity: var(--op, 1);
  transition: transform .6s var(--ease-enter), opacity .45s var(--ease-ui); cursor: pointer;
}
.cr-stories.is-live .cr-story.is-cur { z-index: 3; cursor: default; }
.cr-stories.is-live .cr-story:not(.is-cur) { z-index: 1; }
.cr-stories.is-live .cr-story[data-off="far"] { visibility: hidden; transition: transform .6s var(--ease-enter), opacity .45s var(--ease-ui), visibility 0s .6s; }
.cr-stories.is-live .cr-story:not(.is-cur) > * { opacity: .55; }
.cr-story__bars { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 4px; z-index: 2; }
.cr-story__bars i { flex: 1; height: 2px; border-radius: 2px; background: rgb(244 244 246 / .3); overflow: hidden; }
.cr-story__bars i::after { content: ''; display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #F4F4F6; }
.cr-stories.is-live .cr-story__eg { top: 22px; }
.cr-stories__ctl { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cr-stories__ctl .rl-play { position: static; }
.cr-stories__count { min-width: 4.2em; font-size: .82rem; text-align: center; color: var(--rl-fg-2); font-variant-numeric: tabular-nums; }
@media (max-width: 959px) {
  .cr-learn__body { grid-template-columns: minmax(0, 1fr); }
  .cr-stories { --sw: min(62vw, 270px); }
  .cr-stories__note { margin-top: 14px; }
  .cr-stories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   13 · TODO TIENE QUE SEGUIR PARECIENDO TU MARCA
   ============================================================ */
.cr-same { overflow-x: clip; }
.cr-wall { margin: 0; width: min(100%, 560px); justify-self: end; }
.cr-wall__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
/* --x, --y, --r y --m (desorden) los escribe JS según el scroll: de 1
   (fuera de lugar) a 0 (alineadas). Sin JS, alineadas. */
.cr-wall__grid img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 12px; background: var(--ink-2);
  transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)) rotate(calc(var(--r, 0) * 1deg)) scale(calc(1 - var(--m, 0) * .08));
  filter: grayscale(var(--m, 0)) brightness(calc(1 - var(--m, 0) * .35));
}
.cr-wall__cap { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .88rem; color: var(--text-on-ink-2); }
.cr-wall__cap img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-on-ink); }
.cr-wall__cap strong { color: var(--text-on-ink); font-weight: 500; }
@media (max-width: 959px) { .cr-wall { justify-self: start; } }

/* ============================================================
   14 · PARA MARCAS QUE YA TIENEN ALGO QUE DECIR (pantalla partida del kit)
   ============================================================ */
.cr-voice .rl-screen__visual { display: grid; justify-items: center; }
/* Tres capas: la marca abajo (la más ancha), Contenido & Redes arriba. */
.cr-voice__layers { width: min(100%, 540px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cr-voice__layer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: clamp(64px, 6.2vw, 92px); border-radius: 16px;
  padding: 0 clamp(18px, 2vw, 28px); text-align: left;
  transition: transform .8s var(--ease-enter), opacity .6s var(--ease-ui);
}
.cr-voice__layer b { font-size: clamp(.8rem, .62rem + .3vw, .92rem); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cr-voice__layer i { font-style: normal; font-size: clamp(.8rem, .62rem + .3vw, .92rem); color: var(--text-on-ink-2); white-space: nowrap; }
.cr-voice__layer--a { width: 100%; background: var(--rl-surface); border: 1px solid var(--cr-line-2); color: var(--text-on-ink); }
.cr-voice__layer--b { width: 88%; background: var(--rl-surface); border: 1px solid var(--line-on-ink); color: var(--text-on-ink); }
.cr-voice__layer--c { width: 76%; border: 1px solid var(--orange); color: var(--orange); background: rgb(var(--orange-rgb) / .08); }
.cr-voice__layer--c i { color: var(--text-on-ink); }
html.cr-anim .cr-voice__layers:not(.is-in) .cr-voice__layer { opacity: 0; transform: translateY(-24px); }
.cr-voice__layer--b { transition-delay: .15s; }
.cr-voice__layer--c { transition-delay: .3s; }
@media (max-width: 959px) {
  .cr-voice .rl-screen__visual { justify-items: start; }
  .cr-voice__layers { gap: 8px; max-width: 420px; }
  .cr-voice__layer { height: 50px; padding: 0 14px; }
  .cr-voice__layer b { font-size: .7rem; letter-spacing: .04em; white-space: nowrap; }
  .cr-voice__layer i { font-size: .72rem; }
  .cr-voice__layer--b { width: 96%; }
  .cr-voice__layer--c { width: 92%; }
}

/* ============================================================
   15 · ¿QUÉ NECESITAS TODOS LOS MESES? (T11 · mosaico de tarjetas con '+')
   Arriba, Contenido & Redes y 360 con el mismo peso (arte arriba, frase
   abajo). Abajo, más bajas y apaisadas, la pieza suelta y sin
   permanencia (texto a la izquierda, dibujo a la derecha). La tarjeta y
   la hoja son del kit (.rl-tile, .rl-sheet); aquí solo su contenido.
   ============================================================ */
.cr-paths__head { margin-bottom: clamp(28px, 4vw, 48px); }
.cr-paths__head .rl-title { max-width: none; }
.cr-path .rl-tile__k { margin-top: auto; padding-top: 18px; }
.cr-path .rl-tile__t { max-width: 19ch; }
.cr-path .rl-tile__s { padding-right: 56px; }           /* aire para el '+' */
.cr-path__here { color: var(--rl-fg); }
.cr-path--here {
  background: linear-gradient(180deg, rgb(var(--orange-rgb) / .08), rgb(var(--orange-rgb) / 0) 62%), var(--rl-surface);
  box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / .5);
}
/* Los botones de cada detalle, en fila: en la hoja (vive fuera de la
   página, en <body>) y, sin JS, dentro de la propia tarjeta. */
.cr-path__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.rl-sheet .cr-path__go { margin-top: 1.6em; }

/* Lo que se ve de cada camino (aria-hidden). Contenido & Redes: tres
   piezas reales en abanico. 360: las formas de lo que pide una marca
   entera (presentación, material comercial, campaña y, punteada, lo
   nuevo), en el orden en que las nombra su hoja. Medidas en cqi: el
   dibujo cabe en la tarjeta a cualquier ancho. */
.cr-vs__art { position: relative; flex: none; height: clamp(128px, 11vw, 160px); container-type: inline-size; }
.cr-vs__art--feed img {
  position: absolute; bottom: 0; left: calc(var(--i) * min(82px, 26cqi)); width: min(112px, 36cqi); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px; box-shadow: 0 0 0 1px rgb(var(--fg-rgb) / .08), 0 18px 34px -18px rgb(0 0 0 / .9);
  transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 100%;
  transition: opacity .6s var(--ease-enter), transform .9s var(--ease-enter);
}
.cr-vs__art--feed img:nth-child(1) { --i: 0; --r: -5deg; --y: 0px; z-index: 1; }
.cr-vs__art--feed img:nth-child(2) { --i: 1; --r: 0deg; --y: -14px; z-index: 2; transition-delay: .08s; }
.cr-vs__art--feed img:nth-child(3) { --i: 2; --r: 5deg; --y: 0px; z-index: 1; transition-delay: .16s; }
html.cr-anim .cr-vs__art:not(.is-in) img { opacity: 0; transform: translateY(26px) rotate(0deg); }
.cr-vs__art--brand { display: flex; align-items: flex-end; gap: min(20px, 3.2cqi); padding-bottom: 4px; }
.cr-shape { display: block; flex: none; transition: opacity .6s var(--ease-enter), transform .8s var(--ease-enter); }
.cr-shape:nth-child(2) { transition-delay: .08s; }
.cr-shape:nth-child(3) { transition-delay: .16s; }
.cr-shape:nth-child(4) { transition-delay: .24s; }
html.cr-anim .cr-vs__art:not(.is-in) .cr-shape { opacity: 0; transform: translateY(18px); }
.cr-shape i {
  position: relative; display: block; flex: none; border-radius: 7px; background: var(--ink-3); border: 1px solid var(--cr-line-2);
}
/* renglones de texto dentro de cada forma */
.cr-shape i::before, .cr-shape i::after { content: ''; position: absolute; left: 12%; height: 3px; border-radius: 2px; background: rgb(var(--fg-rgb) / .16); }
.cr-shape i::before { top: 22%; width: 56%; }
.cr-shape i::after { top: calc(22% + 9px); width: 38%; }
.cr-shape--slide i { width: min(150px, 30cqi); aspect-ratio: 16 / 9; }
.cr-shape--doc i { width: min(88px, 17.6cqi); aspect-ratio: 11 / 15; }
.cr-shape--camp i { width: min(100px, 20cqi); aspect-ratio: 1; border-top: 2px solid var(--orange); }
.cr-shape--new i { width: min(84px, 16.8cqi); aspect-ratio: 21 / 25; background: none; border-style: dashed; }
.cr-shape--new i::before { left: 50%; top: 50%; width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.cr-shape--new i::after { left: 50%; top: 50%; width: 1.5px; height: 14px; transform: translate(-50%, -50%); }

/* La pieza suelta: una foto real del catálogo del Shop. */
.cr-pair__art { flex: none; height: 118px; }
.cr-pair__art img {
  display: block; height: 100%; width: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 10px;
  box-shadow: 0 18px 34px -18px rgb(0 0 0 / .9);
  transition: opacity .6s var(--ease-enter), transform .9s var(--ease-enter);
}
html.cr-anim .cr-pair__art:not(.is-in) img { opacity: 0; transform: translateY(22px); }
/* Sin permanencia: seis meses que cambian de tamaño (el plan se mueve
   con la marca). js/contenido.js los baraja dos veces al llegar. */
.cr-free { flex: none; display: flex; align-items: flex-end; gap: 8px; height: 118px; }
.cr-free span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; width: 22px; height: 100%; }
.cr-free i {
  display: block; width: 100%; height: calc(var(--h, .5) * 84px); min-height: 8px; border-radius: 5px;
  background: var(--ink-3); border: 1px solid var(--cr-line-2); border-top: 2px solid var(--orange);
  transition: height 1.1s var(--ease-enter);
}
.cr-free b { font-size: .72rem; font-weight: 400; line-height: 1; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; }
.cr-free em { align-self: flex-end; margin-left: 6px; font-style: normal; font-size: .72rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); }

/* Fila de abajo, apaisada: texto a la izquierda y dibujo a la derecha. */
@media (min-width: 960px) {
  .cr-path--row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto;
    column-gap: clamp(20px, 2.4vw, 36px); min-height: clamp(210px, 16vw, 250px);
  }
  .cr-path--row > .cr-pair__art, .cr-path--row > .cr-free { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .cr-path--row .rl-tile__k { grid-column: 1; grid-row: 1; align-self: end; padding-top: 0; }
  .cr-path--row .rl-tile__t { grid-column: 1; grid-row: 2; }
  .cr-path--row .rl-tile__s { grid-column: 1; grid-row: 3; }
  .cr-path--row .rl-tile__detail { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .cr-vs__art { height: 128px; }
  .cr-pair__art, .cr-free { height: 104px; }
  .cr-free i { height: calc(var(--h, .5) * 72px); }
}

/* ============================================================
   18 · TRABAJO REAL (explorador de perfiles + T04)
   ============================================================ */
.cr-work__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.cr-work__text { position: sticky; top: 110px; }
/* La cifra (T04): cuántas piezas reales se pueden recorrer, contada desde
   los datos del explorador. Aislada, con una línea chica debajo. */
/* El titular va arriba, antes del muro (cont-02), con la pausa del muro a
   la derecha; la columna de texto empieza con la cifra. */
.cr-work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 48px); }
.cr-work__ctl { display: flex; align-items: center; gap: 14px; }
.cr-work__ctl[hidden] { display: none; }
.cr-work__ctl .rl-play { width: 44px; height: 44px; }
.cr-work__ctl .rl-play svg { width: 14px; height: 14px; }
.cr-work__ctl .rl-play[hidden] { display: none; }
.cr-work__fig { margin-top: 0; }
.cr-work__fig[hidden] { display: none; }
.cr-work__fig .rl-fig__n { font-size: clamp(4.2rem, 2rem + 6vw, 8.5rem); }
.cr-work__fig .rl-fig__line { max-width: 22ch; }
.cr-work .ig { margin: 0; width: 100%; justify-self: end; }
@media (max-width: 960px) {
  .cr-work__grid { grid-template-columns: 1fr; }
  .cr-work__text { position: static; }
  .cr-work .ig { justify-self: center; }
}


/* ---------- Muro de reels y piezas reales (cont-02) ----------
   Dos filas a sangre, más anchas que la pantalla; js/contenido.js las
   arma desde los datos del explorador y las desplaza con el scroll
   (--x en px). Cada pieza en su proporción real, a la misma altura. */
.cr-reelwall { margin-bottom: clamp(48px, 6vw, 96px); }
.cr-reelwall[hidden] { display: none; }
.cr-reelwall__rows { display: grid; gap: clamp(10px, 1vw, 14px); overflow: hidden; padding: 4px 0; }
.cr-reelwall__row { display: flex; gap: clamp(10px, 1vw, 14px); width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.cr-reelwall__t {
  position: relative; flex: none; height: clamp(180px, 17.4vw, 250px); aspect-ratio: var(--ar, .8);
  overflow: hidden; border-radius: 12px; background: var(--rl-surface);
}
.cr-reelwall__t img, .cr-reelwall__t video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-reelwall__t::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .55)); pointer-events: none; }
.cr-reelwall__b { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-size: .74rem; font-weight: 500; color: #F4F4F6; }
.cr-reelwall__k {
  position: absolute; right: 9px; top: 9px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 7px; border-radius: 999px; background: rgb(10 10 10 / .5); color: #F4F4F6; font-size: .66rem; font-weight: 500;
}
.cr-reelwall__k svg { width: 10px; height: 10px; }
.cr-reelwall__t--reel { box-shadow: 0 0 0 1.5px rgb(var(--orange-rgb) / .9); }
.cr-reelwall__cap { font-size: .86rem; line-height: 1.4; color: var(--rl-fg-2); }
/* En el teléfono, una sola fila (js/contenido.js), un poco más alta. */
@media (max-width: 759px) { .cr-reelwall__t { height: 210px; border-radius: 10px; } }

/* ---------- Explorador de redes: perfil tipo Instagram ----------
   (estilos que vivían en línea en la página; sin cambios de comportamiento)
   Columna de ancho de teléfono (máx 640px) incluso en escritorio, para que
   se sienta como mirar un perfil desde el móvil. */
.ig {
  max-width: 640px; margin: clamp(28px, 4vh, 48px) auto 0;
  border: 1px solid var(--line-on-ink); border-radius: var(--r-lg);
  background: var(--ink-2); overflow: hidden;
}
.ig-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 24px 20px 4px; }
.ig-head__avatar {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--ink-3); border: 1px solid var(--line-on-ink);
}
.ig-head__id { grid-column: 2; min-width: 0; }
.ig-head__handle { font-size: 1.15rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ig-head__name { font-size: .9rem; line-height: 1.3; color: var(--text-on-ink-2); margin-top: 2px; }
.ig-head__stats { grid-column: 2; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ig-head__stat { display: grid; justify-items: start; line-height: 1.2; flex: none; }
.ig-head__num { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-on-ink); }
.ig-head__label { font-size: .74rem; color: var(--text-on-ink-2); white-space: nowrap; }
.ig-head__bio { grid-column: 1 / -1; margin-top: 16px; font-size: .9rem; line-height: 1.5; }
.ig-head__bio p + p { margin-top: 1px; }
@media (max-width: 340px) {
  .ig-head__avatar { grid-row: 1; }
  .ig-head__stats { grid-column: 1 / -1; justify-content: flex-start; gap: 6px 24px; margin-top: 14px; }
}
@media (min-width: 761px) {
  .ig-head { column-gap: 28px; padding: 32px 28px 6px; }
  .ig-head__avatar { width: 110px; height: 110px; }
  .ig-head__handle { font-size: 1.25rem; }
  .ig-head__stats { justify-content: flex-start; gap: 6px 36px; margin-top: 14px; }
  .ig-head__num { font-size: 1.05rem; }
  .ig-head__label { font-size: .78rem; }
  .ig-head__bio { grid-column: 2; margin-top: 14px; }
}
.ig-clients { display: flex; gap: 14px; padding: 22px 18px 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ig-head + .ig-clients { padding-top: 14px; }
.ig-clients::-webkit-scrollbar { display: none; }
.ig-client {
  flex: none; width: 82px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--text-on-ink-2); font: inherit; display: grid; justify-items: center; gap: 8px;
  border-radius: 12px; transition: color .2s var(--ease-ui);
}
.ig-client__ring {
  width: 70px; height: 70px; border-radius: 50%; padding: 3px; box-sizing: border-box;
  border: 2px solid var(--line-on-ink); background: var(--ink-2);
  transition: border-color .25s var(--ease-ui), transform .25s var(--ease-snap);
}
.ig-client__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ig-client__name { font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-client:hover .ig-client__ring { transform: scale(1.04); border-color: rgb(var(--fg-rgb) / .36); }
.ig-client:active .ig-client__ring { transform: scale(.96); }
.ig-client[aria-selected="true"] { color: var(--text-on-ink); }
.ig-client[aria-selected="true"] .ig-client__ring { border-color: var(--orange); }
.ig-client:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ig-profile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 0 20px 12px; font-size: .8rem; line-height: 1.4; color: var(--text-on-ink-2); }
.ig-profile:empty { display: none; }
.ig-profile__name { color: var(--text-on-ink); font-weight: 500; font-size: .88rem; }
.ig-profile__count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ig-tabs { display: flex; border-top: 1px solid var(--line-on-ink); }
.ig-tab {
  flex: 1; height: 46px; background: none; border: 0; cursor: pointer; position: relative;
  color: var(--text-on-ink-2); display: grid; place-items: center; transition: color .2s var(--ease-ui);
}
.ig-tab svg { width: 22px; height: 22px; }
.ig-tab:hover { color: var(--text-on-ink); }
.ig-tab[aria-selected="true"] { color: var(--text-on-ink); }
.ig-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--text-on-ink); }
.ig-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
/* Misma proporción que tendrá la pieza al abrirla: 4:5 en publicaciones,
   9:16 en reels (js/social-explorer.js la fija en --ig-tile). */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink-2); }
.ig-tile { position: relative; aspect-ratio: var(--ig-tile, 4 / 5); overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--ink-3); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease-soft); }
.ig-tile:hover img { transform: scale(1.04); }
.ig-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; z-index: 1; }
.ig-tile__badge { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.ig-tile__badge svg { width: 100%; height: 100%; }
.ig-empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: var(--text-on-ink-2); font-size: .9rem; }

/* Modal de publicación */
.ig-modal { position: fixed; inset: 0; z-index: 250; display: none; }
.ig-modal.is-open { display: block; }
.ig-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .88); }
.ig-modal__close, .ig-modal__nav {
  position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244, 244, 246, .36); background: rgba(10, 10, 10, .6);
  color: var(--text-on-ink); cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s var(--ease-ui), transform .12s var(--ease-snap), opacity .2s var(--ease-ui);
}
.ig-modal__close svg, .ig-modal__nav svg { width: 20px; height: 20px; }
.ig-modal__close { top: 18px; right: 18px; }
.ig-modal__close:hover, .ig-modal__nav:hover:not(:disabled) { border-color: var(--orange); }
.ig-modal__close:active, .ig-modal__nav:active:not(:disabled) { transform: scale(.94); }
.ig-modal__nav { top: 50%; transform: translateY(-50%); }
.ig-modal__nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.ig-modal__nav--prev { left: 18px; }
.ig-modal__nav--next { right: 18px; }
.ig-modal__nav:disabled { opacity: .22; cursor: default; }
.ig-modal__close:focus-visible, .ig-modal__nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
/* Escritorio: media a la izquierda e información a la derecha. --ig-ratio
   (ancho/alto del media abierto) lo pisa social-explorer.js con el real. */
.ig-post {
  --ig-ratio: 0.8; --ig-info: 360px;
  --ig-h: min(88vh, 820px, calc((100vw - 148px - var(--ig-info)) / var(--ig-ratio)));
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: var(--ig-h); min-height: 420px;
  width: calc(var(--ig-h) * var(--ig-ratio) + var(--ig-info)); max-width: calc(100vw - 148px);
  background: var(--ink); border: 1px solid var(--line-on-ink); border-radius: var(--r); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--ig-info); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "media head" "media body";
}
@media (max-width: 1100px) { .ig-post { --ig-info: 300px; } }
.ig-post__head { grid-area: head; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-on-ink); }
.ig-post__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line-on-ink); }
.ig-post__name { font-size: .95rem; font-weight: 500; }
.ig-post__sub { font-size: .8rem; color: var(--text-on-ink-2); }
.ig-post__media { grid-area: media; position: relative; background: #000; min-height: 0; min-width: 0; }
.ig-post__body { grid-area: body; padding: 18px; overflow: auto; min-height: 0; }
.ig-post__caption { font-size: .95rem; line-height: 1.55; white-space: pre-line; }
.ig-post__caption strong { font-weight: 500; }
.ig-post__meta { margin-top: 14px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-ink-2); }
.ig-media { position: absolute; inset: 0; }
.ig-media__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ig-media__track::-webkit-scrollbar { display: none; }
.ig-media__slide { flex: none; width: 100%; height: 100%; scroll-snap-align: start; display: grid; place-items: center; }
.ig-media__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-media--reel { display: grid; place-items: center; }
.ig-media__video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; background: #000; }
.ig-media__slide--video { background: #000; }
.ig-media__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(244, 244, 246, .92); color: var(--ink); display: grid; place-items: center;
  transition: transform .12s var(--ease-snap), opacity .2s var(--ease-ui);
}
.ig-media__arrow::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }   /* toque de 44 px */
.ig-media__arrow svg { width: 16px; height: 16px; }
.ig-media__arrow:active { transform: translateY(-50%) scale(.92); }
.ig-media__arrow--prev { left: 12px; }
.ig-media__arrow--next { right: 12px; }
.ig-media__arrow[hidden] { display: none; }
.ig-media__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.ig-media__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 244, 246, .45); transition: background .2s var(--ease-ui); }
.ig-media__dots i.is-on { background: var(--orange); }
.ig-media__count { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 10, 10, .7); color: #fff; font-size: .74rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .ig-post {
    left: 0; top: 0; transform: none; width: 100vw; max-width: none;
    height: 100vh; height: 100dvh; min-height: 0; max-height: none;
    border: 0; border-radius: 0; overflow: auto; display: block;
  }
  .ig-post__head { position: sticky; top: 0; z-index: 2; background: var(--ink); padding-right: 70px; }
  .ig-post__media {
    position: relative; width: auto; max-width: 100%; margin-inline: auto;
    aspect-ratio: var(--ig-ratio, 0.8);
    height: min(calc(100vw / var(--ig-ratio, 0.8)), 80vh);
    height: min(calc(100vw / var(--ig-ratio, 0.8)), 80dvh);
  }
  .ig-post__body { padding: 16px 18px 96px; overflow: visible; }
  .ig-modal__close { top: 12px; right: 12px; }
  .ig-modal.is-open::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; z-index: 2;
    background: linear-gradient(to top, var(--ink) 52%, rgba(10, 10, 10, 0)); pointer-events: none;
  }
  .ig-modal__nav { top: auto; bottom: 18px; transform: none; }
  .ig-modal__nav:active:not(:disabled) { transform: scale(.94); }
  .ig-modal__nav--prev { left: 18px; }
  .ig-modal__nav--next { right: 18px; }
  .ig-client { width: 74px; }
  .ig-client__ring { width: 64px; height: 64px; }
}


/* ============================================================
   19 · PREGUNTAS FRECUENTES (acordeón sobre negro)
   ============================================================ */
/* Zona de decisión: titular a 44 px (.rl-title--m) en dos líneas; su
   columna mide lo justo para "Lo que suelen preguntarnos". */
.cr-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cr-faq__head { position: sticky; top: 110px; }
.cr-faq__head .rl-title { max-width: none; }
.cr-faq__more { margin-top: 22px; color: var(--text-on-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cr-faq__list { border-top: 1px solid var(--line-on-ink); }
.cr-q { border-bottom: 1px solid var(--line-on-ink); }
.cr-q summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; font-size: clamp(1.04rem, 1.35vw, 1.2rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em;
  transition: color .2s var(--ease-ui);
}
.cr-q summary::-webkit-details-marker { display: none; }
.cr-q summary:hover { color: var(--orange); }
.cr-q summary i {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--cr-line-2); transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui), transform .4s var(--ease-snap);
}
.cr-q summary i::before, .cr-q summary i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px;
  background: currentColor; transition: transform .35s var(--ease-snap);
}
.cr-q summary i::after { transform: rotate(90deg); }
.cr-q summary:hover i { border-color: var(--orange); }
.cr-q[open] summary i { transform: rotate(180deg); border-color: var(--orange); }
.cr-q[open] summary i::after { transform: rotate(0deg); }
.cr-q__a { overflow: hidden; }
.cr-q__a p { padding: 0 54px 26px 0; color: var(--text-on-ink-2); max-width: 62ch; }
.cr-q__a strong { color: var(--text-on-ink); font-weight: 500; }
@media (max-width: 1100px) {
  .cr-faq__grid { grid-template-columns: 1fr; }
  .cr-faq__head { position: static; }
}
@media (max-width: 900px) { .cr-q__a p { padding-right: 0; } }

/* ============================================================
   20 · CIERRE (un solo CTA) y NOTAS
   ============================================================ */
/* El cierre a la escala de los titulares de historia (68 px a 1440) y
   en dos líneas, una oración por línea: en escritorio se parte sin
   equilibrar (el equilibrado cortaba "…cosas que / decir. Hagamos…"). */
.cr-cta .cta__title { font-size: var(--rl-fs-title); line-height: 1.04; letter-spacing: var(--rl-ls-title); max-width: 17ch; }
@media (min-width: 760px) { .pg-cr .cr-cta .cta__title { max-width: 14.6em; text-wrap: wrap; } }   /* le gana a .pg-cr main :is(h2…) */
.cr-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 40px; }
.cr-cta .cr-cta__actions .btn { margin-top: 0; }
.cr-cta__alt { font-size: 1rem; }
.cr-notes { padding-bottom: clamp(56px, 8vh, 96px); }
@media (max-width: 560px) { .cr-cta__actions .btn, .cr-hero__actions .btn { flex: 1 1 100%; justify-content: center; } }

/* ============================================================
   Movimiento reducido: nada se mueve solo, todo en su estado final.
   (main.css acorta TODAS las animaciones a .001s; un bucle infinito con
   esa duración parpadearía, así que los bucles se apagan aquí.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cr-stream__track { animation: none !important; }
  .cr-view__card, .cr-sat, .cr-story { transition: none !important; }
}