/* Sobre mí · página de Lara · MC41 · 29-oct-2026
   Sistema: el de la home A y la landing de Money Code (P1 Acero, T5 Archivo 125 % + Libre Caslon Text), como Soft CEO Code.
   Menú H2-A y pie H4-E vienen tal cual de la home (hero.css, base.css, home.css). Aquí sólo lo propio de la página.
   Estructura: Shelby Sapp /about/ en su orden (portada · tesis · historia · hoy · lo que sí/no · datos · por dónde seguir · guía),
   con la ranura de casos detrás de «Hoy». Móvil primero. */

@font-face{font-family:"DB Archivo";src:url("/home/web-motion-2026-10-24/assets/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

/* ------------------------------------------------------------------ tokens -- */
.smi{
  --papel:#fffdfb; --papel-sombra:#f0f3f5; --tinta:#111; --tinta-suave:#3c4247;
  --burdeos:#4b1014; --burdeos-vivo:#750e1e; --acero:#4a6274; --acero-claro:#d3dee7;
  --acero-sobre-tinta:#b8c6d0;
  --g:clamp(24px,4.4vw,64px); --max:1312px;
  --archivo:"DB Archivo",Arial,sans-serif;
  --caslon:"A1 Caslon Text","DB Caslon",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --bloque:clamp(72px,9vw,136px);
  --nav-h:64px;
  display:block;background:var(--papel);color:var(--tinta);
  font:400 17px/1.65 var(--caslon);font-kerning:normal;font-synthesis:none;
}
@media(min-width:1024px){.smi{font-size:18px}}
@media(min-width:1100px){.smi{--nav-h:84px}}
.smi [hidden]{display:none!important}
.smi p{text-wrap:pretty}
.smi :where(h1,h2,h3,h4){text-wrap:balance}
.smi a:focus-visible,.smi button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.smi-tinta{background:var(--tinta);color:var(--papel)}
/* Negritas del copy: Archivo 700 dentro del Caslon (Libre Caslon no tiene negrita y no se sintetiza), en burdeos sobre papel, como en la home A. */
.smi strong{font-family:var(--archivo);font-weight:700;font-stretch:108%;font-variation-settings:"wdth" 108,"wght" 700;font-size:.92em;letter-spacing:-.012em;color:var(--burdeos)}
.smi-tinta strong{color:inherit}
/* Titulares: Archivo ancho en versales (T5). Las mayúsculas las pone el CSS; el texto del DOM es el literal. */
.smi-display,.smi-portada__nombre,.smi-hoy__titulo,.smi-valor__titulo,.smi-dato__titulo,.smi-puerta__nombre,.smi-money__titulo,.smi-programa__nombre,.smi-crono__titulo{
  font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;text-transform:uppercase;letter-spacing:-.03em;line-height:1.03}
/* Separadores del texto literal que la composición sustituye por saltos de línea (los lee el lector de pantalla). */
.smi-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Botón de acción (el de la home A, cierre H3-A; mismo que Soft CEO Code) */
.smi-accion{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:58px;padding:18px 26px;background:var(--tinta);color:var(--papel);font:600 13px/1.3 var(--archivo);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background-color .22s ease,color .22s ease}
.smi-accion span{white-space:nowrap}
.smi-accion svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.smi-accion:hover{background:var(--burdeos)}
.smi-accion:hover svg{transform:translateX(4px)}
.smi-accion:active{transform:translateY(1px)}
.smi-accion:focus-visible{outline:2px solid var(--acero);outline-offset:5px}
@media(max-width:599px){.smi-accion{width:100%;max-width:380px;padding-inline:22px;gap:18px}}
/* Pantallas muy estrechas (320): el botón sigue en una línea; se ajustan relleno y espaciado, no el texto. */
@media(max-width:359px){.smi-accion{padding-inline:16px;gap:10px;font-size:12px;letter-spacing:.035em}.smi-money__texto{padding-inline:18px}}
@media(min-width:1024px){.smi-accion{min-height:62px;padding:20px 30px;gap:44px;font-size:13.5px}}

/* ------------------------------------------------------------- SM1 · portada -- */
/* Banda de tinta con «Sobre mí» + el nombre; el retrato B/N baja desde la banda y cuelga sobre el papel (Shelby, bloque 2).
   La L de Hazel va en negativo sobre el cuello negro de la foto, lejos de la cara. */
/* La L es monumental: su bucle cruza el borde izquierdo de la foto por el pelo, a la altura de los ojos y sin tocar la cara;
   el resto de la letra queda sobre la banda de tinta. En móvil la foto se alinea a la derecha para dejarle sitio.
   Corrección M3: como «meet SHELBY», la base de «LARA LAWN» monta sobre el pelo. El retrato sube 0,25 em del nombre
   y el nombre va por encima de la foto (z-index); la cara queda libre y la L se queda donde estaba. */
.smi-portada{
  --foto-w:min(64vw,300px);
  --foto-h:calc(var(--foto-w) * 1.25);
  --cuelga:.2;                                  /* parte del retrato que cae sobre el papel */
  --nombre-fs:min(10.5rem,calc((100vw - 2 * var(--g)) / 7.8),19svh);
  --l-fs:min(calc(var(--foto-h) * .4),calc((100vw - var(--g) - var(--foto-w) * .86 - 6px) / 1.3704));
  --l-cruce:.14;                                /* cuánto entra la L en la foto (fracción del ancho) */
  position:relative;padding-top:var(--nav-h);background:var(--papel)}
.smi-portada__tinta{display:flow-root;background:var(--tinta);color:var(--papel);padding:clamp(22px,3vw,38px) var(--g) 0;text-align:center}
.smi-portada__titulo{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(4px,.5vw,8px);margin:0}
.smi-portada__sobre{display:block;font:italic 400 clamp(1.3rem,1.05rem + 1vw,2.05rem)/1.15 var(--caslon);letter-spacing:-.005em}
.smi-portada__nombre{display:block;font-size:var(--nombre-fs);line-height:.86;letter-spacing:-.035em;white-space:nowrap}
.smi-portada__escena{position:relative;z-index:1;width:var(--foto-w);margin:calc(var(--nombre-fs) * -.25) 0 calc(var(--foto-h) * var(--cuelga) * -1) auto}
.smi-portada__foto{position:relative;margin:0;width:100%;aspect-ratio:4/5;overflow:hidden;background:#1b1b1b}
.smi-portada__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:grayscale(1) contrast(1.06);transform-origin:50% 40%}
/* La L se queda donde estaba: baja dentro de la escena lo mismo que sube el retrato (.25 − .06 em del nombre); si subiera con la foto, su trazo fino tocaría el pie de «LARA». */
.smi-portada__l{position:absolute;z-index:2;left:calc(var(--foto-w) * var(--l-cruce) - var(--l-fs) * 1.3704);top:calc(var(--foto-h) * .045 + var(--nombre-fs) * .19);width:calc(var(--l-fs) * 1.3704);height:calc(var(--l-fs) * 1.4444);display:flex;align-items:center;justify-content:center;pointer-events:none}
.smi-portada__l .rl-hazel{display:block;font-size:var(--l-fs);line-height:1;margin:.275em .356em .187em .185em}
.smi-portada__l:not(.rl-activo) .rl-hazel{color:#f8f4ed}
/* 2.ª revisión: por debajo de 600 px el retrato sube 0,4 em para que el nombre monte sobre el pelo como a 1440; la L baja lo mismo y no se mueve. */
@media(max-width:599px){.smi-portada__escena{margin-top:calc(var(--nombre-fs) * -.4)}.smi-portada__l{top:calc(var(--foto-h) * .045 + var(--nombre-fs) * .34)}}
.smi-portada__pie{display:grid;justify-items:center;gap:10px;padding:calc(var(--foto-h) * var(--cuelga) + 22px) var(--g) clamp(34px,4vw,52px);text-align:center}
.smi-portada__pie p{margin:0}
.smi-portada__rol{font:600 12px/1.3 var(--archivo);letter-spacing:.18em;text-transform:uppercase;color:var(--acero)}
.smi-portada__linea{max-width:27em;font:400 17px/1.5 var(--caslon)}
@media(min-width:600px){
  .smi-portada{--foto-w:min(48vw,380px);--l-fs:min(calc(var(--foto-h) * .46),calc(((100vw - var(--foto-w)) / 2 + var(--foto-w) * var(--l-cruce) - 10px) / 1.3704))}
  .smi-portada__escena{margin-left:auto;margin-right:auto}
}
@media(min-width:1024px){
  .smi-portada{--foto-h:clamp(380px,calc(100svh - 440px),540px);--foto-w:calc(var(--foto-h) * .8);--cuelga:.18;--l-fs:min(calc(var(--foto-h) * .48),calc(((100vw - var(--foto-w)) / 2 + var(--foto-w) * var(--l-cruce) - 10px) / 1.3704))}
  .smi-portada__linea{font-size:20px;max-width:34em}
  .smi-portada__pie{gap:12px}
}

/* ---------------------------------------------------------------- SM2 · tesis -- */
/* La pieza burdeos de la página (R9: un bloque, ≈5 %), con el brillo Hanya de la invitación de la home. */
.smi-tesis{--brillo-x:64%;--brillo-y:30%;position:relative;z-index:2;isolation:isolate;overflow:hidden;background:var(--burdeos);color:var(--papel);padding:clamp(96px,7.6vw,110px) var(--g);text-align:center;box-shadow:inset 0 1px 0 #ffffff14}
/* Corrección m2: sin sombra exterior al subir sobre la portada (el telón de la home sube limpio; una sola luz en la página). Queda el filete interior. */
.smi-tesis::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse at var(--brillo-x) var(--brillo-y),#e9b5a64d 0%,#c67d711c 34%,transparent 70%);transition:opacity .8s ease}
.smi-tesis::after{content:"";position:absolute;inset:-120% -70%;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 44%,#ffddd618 49%,#ffddd636 50%,#ffddd618 51%,transparent 56%);transform:translateX(-65%);transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
.smi-tesis:hover::before,.smi-tesis.is-luz::before{opacity:1}
.smi-tesis.is-luz::after{transform:translateX(40%)}
.smi-tesis__dentro{max-width:62rem;margin:0 auto}
.smi-tesis__kicker{margin:0 auto 24px;max-width:26em;font:600 12px/1.6 var(--archivo);letter-spacing:.17em;text-transform:uppercase;color:#fffdfbe0}
.smi-tesis__titulo{margin:0;font:400 clamp(2.65rem,1.6rem + 4.6vw,5.6rem)/1.04 var(--caslon);letter-spacing:-.022em}
.smi-tesis__titulo em{display:block;font-style:italic;padding-bottom:.06em}
.smi-tesis--larga .smi-tesis__titulo{font-size:clamp(2rem,1.3rem + 3vw,3.9rem);line-height:1.1;max-width:17em;margin:0 auto}
.smi-tesis--larga .smi-tesis__titulo em{display:inline}
@media(min-width:1024px){.smi-tesis__kicker{font-size:13px;margin-bottom:30px}}

/* ------------------------------------------------------------- SM3 · historia -- */
.smi-historia{position:relative;z-index:2;background:var(--papel);padding:var(--bloque) var(--g)}
.smi-historia__rejilla{max-width:var(--max);margin:0 auto;display:grid;gap:40px}
.smi-historia__foto{margin:0;width:min(100%,420px);aspect-ratio:4/5;overflow:hidden;background:#e6e6e6}
.smi-historia__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.05)}
.smi-historia__texto{display:grid;gap:28px;align-content:start;max-width:33em}
.smi-historia__texto p{margin:0}
.smi-historia__destacado-caja{display:grid;gap:28px}
.smi-historia__p{font-size:17px;line-height:1.72}
.smi-historia__destacado{font:italic 400 clamp(1.4rem,1.12rem + 1.2vw,1.9rem)/1.32 var(--caslon);letter-spacing:-.008em}
/* Capitular de la plantilla «Quién soy» que eligió Lara: Caslon, tres líneas, burdeos. Sin soporte de initial-letter, no hay capitular. */
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .smi-capitular::first-letter{-webkit-initial-letter:3;initial-letter:3;margin-right:.09em;color:var(--burdeos);font-family:var(--caslon);font-weight:400}
}
.smi-crono__titulo{margin:0;font-size:clamp(1.55rem,1.2rem + 1.5vw,2.4rem);max-width:14em}
.smi-crono__hitos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.smi-crono__hitos li{display:grid;gap:6px;padding:20px 0}
.smi-crono__hitos li + li{border-top:1px solid var(--acero-claro)}
.smi-crono__etiqueta{margin:0;font:600 12px/1.4 var(--archivo);letter-spacing:.16em;text-transform:uppercase;color:var(--acero)}
.smi-crono__hitos p{font:400 clamp(1.15rem,1.02rem + .5vw,1.4rem)/1.45 var(--caslon)}
@media(min-width:900px){
  .smi-historia__rejilla{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:center}
  .smi-historia__texto{grid-column:1 / span 6;grid-row:1}
  .smi-historia__foto{grid-column:8 / span 5;grid-row:1;width:100%;max-width:470px;justify-self:end}
  .smi-historia__p{font-size:18px}
}

/* ------------------------------------------------------------------ SM4 · hoy -- */
.smi-hoy{background:var(--papel);padding:var(--bloque) var(--g) clamp(48px,5vw,72px)}
.smi-hoy__rejilla{max-width:var(--max);margin:0 auto;display:grid;gap:28px}
.smi-hoy__titulo{margin:0;font-size:clamp(3.4rem,2.2rem + 6vw,8.2rem);line-height:.9;letter-spacing:-.04em}
.smi-hoy__foto{position:relative;margin:0;width:100%;aspect-ratio:4/5;overflow:hidden;background:#e6e6e6}
@media(min-width:600px) and (max-width:899px){.smi-hoy__foto{max-width:520px}}
.smi-hoy__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:21% 30%;filter:grayscale(1);transition:filter 1.2s var(--ease)}
.smi-hoy__foto:hover img,.smi-hoy__foto.is-color img{filter:none}
.smi-hoy__texto{max-width:32em}
.smi-hoy__voz{display:grid;gap:22px}
.smi-hoy__voz p{margin:0}
.smi-hoy__p{font-size:17px;line-height:1.7}
.smi-hoy__cierre{display:grid;justify-items:start;gap:0;padding-top:6px}
.smi-hoy__cierre .smi-firma{justify-self:end;margin:10px -6px -14px 0}
/* Corrección m1 (2.ª revisión): cursiva y L en fila sólo desde 1400 px; por debajo, la L va bajo la cursiva con margen positivo, para que su trazo fino no toque el punto de «también.». */
@media(min-width:1400px){.smi-hoy__cierre{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.smi-hoy__cierre .smi-firma{margin:0 -8px -18px 0}}
.smi-hoy__cursiva{font:italic 400 clamp(1.2rem,1.05rem + .65vw,1.55rem)/1.45 var(--caslon);letter-spacing:-.005em;max-width:22em}
/* La L de Hazel como firma (L1, relieve Hanya; mismo calibrado que la firma aprobada de Money Code). */
.smi-firma{position:relative;flex-shrink:0;width:118px;height:124px;margin:0 -8px -18px 0;display:flex;align-items:center;justify-content:center}
.smi-firma .rl-hazel{display:block;font-size:86px;line-height:1;margin:.275em .356em .187em .185em;color:var(--burdeos)}
@media(min-width:900px){
  .smi-hoy__rejilla{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);row-gap:clamp(26px,3vw,40px);align-items:start}
  .smi-hoy__foto{grid-column:1 / span 6;grid-row:1 / span 2;max-width:600px}
  .smi-hoy__titulo{grid-column:8 / span 5;grid-row:1;align-self:end}
  .smi-hoy__texto{grid-column:8 / span 5;grid-row:2}
  .smi-hoy__p{font-size:18px}
  .smi-firma{width:148px;height:156px}
  .smi-firma .rl-hazel{font-size:108px}
}

/* ---------------------------------------------------------------- SM10 · casos -- */
/* Tres originales (mensaje y vídeos) en B/N que cobran color al cursor o, en táctil, al quedar a la vista. Se abren íntegros. */
.smi-casos{background:var(--papel);padding:0 0 var(--bloque)}
.smi-casos__lista{list-style:none;margin:0 var(--g);padding:6px 0 10px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.smi-casos__lista::-webkit-scrollbar{display:none}
.smi-caso{flex:0 0 min(74%,300px);scroll-snap-align:start}
.smi-caso__abrir{display:grid;gap:12px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.smi-caso__marco{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#e6e6e6}
.smi-caso__marco img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(1) contrast(1.03);transition:filter .9s var(--ease),transform 1.2s var(--ease)}
.smi-caso--mensaje .smi-caso__marco img{object-position:50% 0}
.smi-caso__abrir:hover img,.smi-caso__abrir:focus-visible img,.smi-caso.is-color img{filter:none}
.smi-caso__abrir:hover img{transform:scale(1.025)}
.smi-caso__play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:#111111d9}
.smi-caso__play::after{content:"";position:absolute;left:18px;top:14px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent var(--papel)}
/* Corrección M1: el nombre en negrita y «· asesorada de Lara Lawn» en tinta suave, como en la home. El rótulo va en su propia línea,
   a todo el ancho de la tarjeta, y el tipo («Mensaje», «Vídeo · 1:12») se queda a la derecha de la primera, alineado por la base. */
.smi-caso__pie{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding-top:2px;border-top:1px solid #4a627440}
.smi-caso__nombre{grid-column:1 / -1;grid-row:1;padding-top:10px;font:700 14px/1.3 var(--archivo);font-variation-settings:"wdth" 104,"wght" 700}
.smi-caso__asesorada{display:block;font-weight:400;font-variation-settings:"wdth" 104,"wght" 400;color:var(--tinta-suave)}
.smi-caso__tipo{grid-column:2;grid-row:1;font:italic 400 15px/1.3 var(--caslon);color:var(--tinta-suave)}
.smi-caso__abrir:focus-visible{outline:2px solid var(--acero);outline-offset:6px}
@media(min-width:900px){
  .smi-casos__lista{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3.2fr);column-gap:clamp(20px,2.6vw,40px);align-items:start;max-width:var(--max);margin:0 auto;padding:12px var(--g) 0;overflow:visible}
  .smi-caso{flex:none}
  .smi-caso--mensaje .smi-caso__marco{aspect-ratio:4/5}
  .smi-caso:nth-child(2){margin-top:clamp(70px,7vw,120px)}
  .smi-caso:nth-child(2) .smi-caso__marco{aspect-ratio:1/1}
  .smi-caso:nth-child(3){margin-top:clamp(24px,2.4vw,40px)}
}

/* ---------------------------------------------------- SM6 · lo que sí, lo que no -- */
.smi-valores{padding:var(--bloque) var(--g);text-align:center}
.smi-valores__dentro{max-width:46rem;margin:0 auto;display:grid;gap:0}
.smi-valor{display:grid;gap:14px;justify-items:center}
.smi-valor + .smi-valor{margin-top:clamp(30px,3.4vw,46px)}
.smi-valor + .smi-valor::before{content:"";display:block;width:116px;height:1px;margin-bottom:clamp(18px,2.4vw,30px);background:var(--acero-claro)}
.smi-valor__titulo{margin:0;font-size:clamp(2.35rem,1.55rem + 3.6vw,4.7rem);line-height:.98;letter-spacing:-.04em}
.smi-valor__frase{margin:0;max-width:22em;font:400 clamp(1.3rem,1.06rem + 1.1vw,2rem)/1.3 var(--caslon);letter-spacing:-.01em}
.smi-valores__cierre{margin:clamp(34px,4vw,52px) auto 0;max-width:27em;font:italic 400 clamp(1.08rem,1rem + .4vw,1.3rem)/1.5 var(--caslon);color:var(--burdeos)}

/* --------------------------------------------------------- SM7 · en cuatro datos -- */
/* Banda de tinta con la foto detrás, oscurecida (Shelby, bloque 7). A19 en B/N (corrección M2: intercambiada con A08, que pasa a la historia).
   Móvil: la foto arriba y el rótulo entra sobre su parte baja. Escritorio: filas a la izquierda, foto a la derecha. */
.smi-datos{position:relative;isolation:isolate;overflow:hidden;padding:clamp(250px,64vw,300px) var(--g) var(--bloque)}
.smi-datos__foto{position:absolute;z-index:-1;inset:0 0 auto 0;margin:0;height:clamp(330px,86vw,400px)}
.smi-datos__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:56% 14%;filter:grayscale(1) brightness(.66) contrast(1.06)}
.smi-datos__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#11111129 0%,#11111166 42%,#111111e6 78%,#111 100%)}
.smi-datos__rejilla{position:relative;max-width:var(--max);margin:0 auto;display:grid;gap:26px}
.smi-datos__titulo{margin:0;font:italic 400 clamp(2.4rem,1.55rem + 3.4vw,4.8rem)/1.02 var(--caslon);letter-spacing:-.025em}
.smi-datos__lista{list-style:none;margin:0;padding:0}
.smi-dato{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:8px;align-items:baseline;padding:24px 0}
.smi-dato + .smi-dato{border-top:1px solid #fffdfb2e}
.smi-dato__n{grid-row:1 / span 2;font:800 clamp(1.35rem,1.1rem + 1.1vw,2.2rem)/1 var(--archivo);font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;letter-spacing:-.03em;color:var(--acero-sobre-tinta);font-variant-numeric:tabular-nums;min-width:1.6em}
.smi-dato__titulo{margin:0;font-size:clamp(1.18rem,.98rem + 1vw,1.9rem);line-height:1.08}
.smi-dato__linea{margin:0;font:italic 400 17px/1.5 var(--caslon);color:#fffdfbd9}
@media(min-width:900px){
  .smi-datos{padding:var(--bloque) var(--g)}
  .smi-datos__foto{inset:0 0 0 auto;width:46%;height:auto}
  .smi-datos__foto img{object-position:50% 22%}
  .smi-datos__foto::after{background:linear-gradient(90deg,#111 0%,#111111b3 26%,#11111140 62%,#11111126 100%)}
  .smi-datos__rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr);row-gap:clamp(18px,2vw,30px)}
  .smi-datos__titulo,.smi-datos__lista{grid-column:1}
  .smi-dato{padding:28px 0;column-gap:28px}
  .smi-dato__linea{font-size:18px}
}

/* --------------------------------------------------------- SM8 · por dónde seguir -- */
.smi-seguir{padding:var(--bloque) var(--g) clamp(84px,10vw,150px)}
.smi-seguir__dentro{max-width:var(--max);margin:0 auto}
.smi-seguir__titulo{position:relative;z-index:2;margin:0 0 30px;font:italic 400 clamp(2.7rem,1.65rem + 4.4vw,5.9rem)/1 var(--caslon);letter-spacing:-.025em;color:var(--burdeos)}
.smi-puertas{list-style:none;margin:0;padding:0;display:grid;gap:60px}
.smi-puerta{position:relative;container-type:inline-size}
.smi-puerta__enlace{display:block;color:inherit;text-decoration:none}
.smi-puerta__foto{display:block;aspect-ratio:4/5;overflow:hidden;background:#e6e6e6}
.smi-puerta__foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.smi-puerta__enlace:hover .smi-puerta__foto img{transform:scale(1.03)}
.smi-puerta--prensa .smi-puerta__foto img{object-position:50% 22%}
.smi-puerta--programas .smi-puerta__foto img{object-position:62% 30%}
.smi-puerta__caja{position:relative;z-index:1;display:grid;gap:8px;width:fit-content;max-width:calc(100% - 26px);margin:-62px 0 0 18px;padding:18px 22px 20px;background:var(--papel)}
.smi-puerta__rotulo{font:600 11.5px/1.3 var(--archivo);letter-spacing:.15em;text-transform:uppercase;color:var(--acero)}
/* El titular de cada tarjeta se mide con su tarjeta (consulta de contenedor): «L'Officiel Monaco» cabe entero en cualquier columna. */
.smi-puerta__nombre{display:block;font-size:clamp(1rem,6.2cqi,1.65rem);line-height:1.06}
.smi-puerta__nombre--revistas span:not(.smi-sep){display:block}
.smi-puerta__nombre--redes{display:grid;gap:6px}
.smi-puerta__nombre--redes a{color:inherit;text-decoration:none;min-height:44px;display:flex;align-items:center}
.smi-puerta__nombre--redes a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
/* Corrección m3: una sola regla para las flechas de las puertas. Van en línea tras el titular, dentro de la caja, con la caja (20 px) y el trazo (1,6)
   de las → de Programas; ↗ para las que salen de la web (prensa y libros). La última palabra y su flecha no se separan. */
.smi-puerta__ultima{white-space:nowrap}
.smi-puerta__flecha{display:inline-block;width:20px;height:20px;margin-left:10px;vertical-align:calc(.36em - 10px);color:var(--tinta);transition:transform .3s var(--ease)}
.smi-puerta__enlace:hover .smi-puerta__flecha{transform:translate(3px,-3px)}
.smi-puerta__linea{display:block;margin-top:14px;font:400 17px/1.5 var(--caslon);color:var(--tinta-suave)}
.smi-puerta__enlace:hover .smi-puerta__nombre{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* Libros: la cubierta original sobre papel sombra, como objeto; la caja va arriba (Shelby, tercera tarjeta). */
.smi-puerta--libros .smi-puerta__caja{margin:0 0 -10px 0;padding-left:0}
.smi-puerta__foto--libro{display:grid;place-items:center;background:none;aspect-ratio:auto;overflow:visible;padding:18px 14% 6px}
.smi-puerta__foto--libro img{width:100%;height:auto;aspect-ratio:1875/2775;object-fit:contain;box-shadow:0 26px 40px -24px #11111170,0 4px 10px -4px #1111113d}
.smi-puerta__enlace:hover .smi-puerta__foto--libro img{transform:translateY(-4px)}
/* Programas: dos destinos, sin tarjeta-enlace única. */
.smi-programas{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:18px}
.smi-programas li{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--acero-claro)}
.smi-programa{display:inline-flex;align-items:center;gap:12px;min-height:44px;justify-self:start;color:var(--tinta);text-decoration:none}
.smi-programa__nombre{font-size:clamp(1rem,6.4cqi,1.5rem);line-height:1.05}
.smi-programa svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.smi-programa:hover svg{transform:translateX(4px)}
.smi-programa:hover .smi-programa__nombre{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.smi-programa__linea{margin:0;font:400 17px/1.55 var(--caslon);color:var(--tinta-suave);max-width:28em}
.smi-puerta--redes .smi-puerta__caja{margin:0;width:100%;max-width:none;padding:22px 24px;background:var(--papel);border:1px solid var(--acero-claro)}
/* Programas: la caja lleva el rótulo como titular (los dos programas, con su línea, van debajo, como el párrafo de Shelby). */
.smi-puerta--programas .smi-puerta__caja{margin:-56px 18px 0 auto;padding:16px 22px 18px}
.smi-puerta--programas .smi-puerta__rotulo{font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;font-size:clamp(1.2rem,1.02rem + .8vw,1.65rem);line-height:1.06;letter-spacing:-.03em;color:var(--tinta)}
/* Tableta: dos columnas de tarjetas, sin fotos a todo el ancho. */
@media(min-width:600px) and (max-width:899px){
  .smi-puertas{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:56px;align-items:start}
  .smi-puerta--programas{margin-top:clamp(40px,8vw,72px)}
  .smi-puerta--redes{grid-column:1 / -1}
}
@media(min-width:900px){
  /* Como el rótulo de Shelby: en dos líneas, dentro de la primera columna y montado sobre la primera foto (fondo claro). */
  .smi-seguir__titulo{margin:0 0 -.95em;padding-left:clamp(0px,1.6vw,24px);max-width:5.4em;font-size:clamp(3.4rem,1.9rem + 3.4vw,5.4rem)}
  .smi-puertas{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.6vw,64px);row-gap:64px;align-items:start}
  .smi-puerta--prensa{margin-top:clamp(70px,7vw,110px)}
  .smi-puerta--programas{margin-top:0}
  .smi-puerta--libros{margin-top:clamp(40px,5vw,80px)}
  .smi-puerta--redes{grid-column:1 / -1}
  .smi-puerta--redes .smi-puerta__nombre--redes{display:flex;flex-wrap:wrap;gap:6px 36px}
}

/* -------------------------------------------------------------- SM9 · Money Code -- */
/* Tarjeta clara sobre papel sombra que se monta sobre el pie de tinta (Shelby, bloque 9). Money Code sobre negro: botón de tinta (R9). */
.smi-money{--solape:56px;position:relative;z-index:1;display:flow-root;background:var(--papel);padding:clamp(24px,4vw,56px) var(--g) 0}
.smi-money__tarjeta{position:relative;z-index:2;display:grid;max-width:1080px;margin:0 auto calc(-1 * var(--solape));background:var(--papel);border:1px solid var(--acero-claro);box-shadow:0 34px 60px -44px #11111159}
.smi-money__foto{margin:0;aspect-ratio:5/4;overflow:hidden;background:#2a2a2a}
.smi-money__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.smi-money__texto{display:grid;gap:16px;justify-items:start;align-content:center;padding:30px 24px 36px}
.smi-money__texto p{margin:0}
.smi-money__kicker{font:600 12px/1.4 var(--archivo);letter-spacing:.17em;text-transform:uppercase;color:var(--acero)}
.smi-money__titulo{margin:0;font-size:clamp(2.5rem,1.7rem + 3.4vw,4.6rem);line-height:.96;letter-spacing:-.04em}
.smi-money__titulo span{display:block}
.smi-money__frase{font:400 clamp(1.15rem,1.02rem + .6vw,1.45rem)/1.45 var(--caslon);max-width:24em}
.smi-money__texto .smi-accion{margin-top:8px}
@media(min-width:900px){
  .smi-money{--solape:72px}
  .smi-money__tarjeta{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .smi-money__foto{aspect-ratio:auto;min-height:440px}
  .smi-money__texto{padding:56px clamp(40px,5vw,72px)}
}
/* El pie H4-E deja sitio a la tarjeta que se monta encima. */
.smi-page .mc40-footer{padding-top:calc(70px + 56px)}
@media(min-width:900px){.smi-page .mc40-footer{padding-top:calc(70px + 72px)}}
@media(max-width:600px){.smi-page .mc40-footer{padding-top:calc(56px + 56px)}}

/* ------------------------------------------------------------- visor de casos -- */
.smi-visor{box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #111;background:#fffdfb;color:#111;margin:auto;overflow:hidden;font-synthesis:none}
.smi-visor::backdrop{background:#111111c7}
.smi-visor[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.smi-visor__cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 20px;border-bottom:1px solid #d3dee7}
.smi-visor__cabeza h2{margin:0;font:600 15px/1.3 "DB Archivo",Arial,sans-serif}
.smi-visor__cerrar{width:44px;height:44px;border:0;background:none;color:#111;font:300 28px/1 Georgia,serif;cursor:pointer}
.smi-visor__cerrar:focus-visible,.smi-visor__cuerpo:focus-visible{outline:2px solid #4a6274;outline-offset:-4px}
.smi-visor__cuerpo{overflow:auto;overscroll-behavior:contain;background:#f0f3f5}
.smi-visor__cuerpo img{display:block;width:100%;height:auto}
.smi-visor__cuerpo video{display:block;width:100%;max-height:calc(100dvh - 120px);background:#111}


/* -------------------------------------------------------- movimiento (no quieto) -- */
/* G1 · telón: la portada se queda pegada y la tesis y la historia suben y la tapan. */
html[data-movimiento="1"] .smi-portada{position:sticky;top:var(--telon-top,0px);z-index:0}
/* Entrada: el retrato sube por su marco y el nombre se asienta; la L aparece después. Estado final = el de lectura. */
html[data-entrada="1"] .smi-portada__foto{transition:clip-path 1.35s var(--ease)}
html[data-entrada="1"] .smi-portada__nombre,html[data-entrada="1"] .smi-portada__sobre{transition:opacity .9s ease,transform 1.2s var(--ease)}
html[data-entrada="1"] .smi-portada__l{transition:opacity 1s ease .9s}
html[data-entrada="1"] .smi-portada__pie{transition:opacity .9s ease .7s,transform 1s var(--ease) .7s}
html[data-entrada="1"]:not([data-entrada-hecha]) .smi-portada__foto{clip-path:inset(100% 0 0 0)}
html[data-entrada="1"]:not([data-entrada-hecha]) .smi-portada__nombre{opacity:0;transform:translateY(.16em)}
html[data-entrada="1"]:not([data-entrada-hecha]) .smi-portada__sobre{opacity:0;transform:translateY(12px)}
html[data-entrada="1"]:not([data-entrada-hecha]) .smi-portada__l{opacity:0}
html[data-entrada="1"]:not([data-entrada-hecha]) .smi-portada__pie{opacity:0;transform:translateY(14px)}

/* ------------------------------------------------- quieto y movimiento reducido -- */
html[data-quieto="1"] .smi *,html[data-quieto="1"] .smi *::before,html[data-quieto="1"] .smi *::after{transition:none!important;animation:none!important}
html[data-quieto="1"] .smi-hoy__foto img,html[data-quieto="1"] .smi-caso__marco img{filter:none}
@media(prefers-reduced-motion:reduce){
  .smi *,.smi *::before,.smi *::after{transition:none!important;animation:none!important}
  .smi-hoy__foto img,.smi-caso__marco img{filter:none}
  .smi-portada{position:relative!important;top:auto!important}
  .smi-tesis::after{display:none}
}