/* Soft CEO Code · página de la membresía · MC41 · 29-oct-2026 · corrección tras la revisión independiente
   Sistema: el de la home A y la landing de Money Code (P1 Acero, T5 Archivo 125 % + Libre Caslon Text).
   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.
   Corrección (CORRECCION.md): sin bloques de acero (B1), escala única (m2), negritas en burdeos (M4),
   cubiertas de M5 en tinta y papel con filete (M5), precio sin partir (M2), A17 nítida en Retina (m3). */

@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 -- */
.scc{
  --papel:#fffdfb; --papel-sombra:#f0f3f5; --tinta:#111; --tinta-suave:#3c4247;
  --burdeos:#4b1014; --burdeos-vivo:#750e1e; --acero:#4a6274; --acero-claro:#d3dee7;
  --acero-sobre-tinta:#b8c6d0;
  /* Filete de tinta: el de los separadores del bloque de libros de la home (#111 al 20 %). */
  --filete:#11111433;
  /* Medianil: 24 px en el móvil, como la home (24 px en el cierre y en libros). */
  --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);
  /* Escala (m2). Un tamaño de display (el del titular de M1, que también llevan las cubiertas), un solo H2 y dos
     enunciados en Caslon. El titular de M1 (G3) no cambia: --t-display repite su fórmula.
     A 1440: display 57,6 · H2 48 (el H2 de libros de la home) · enunciado 1: 43,2 · enunciado 2: 34,4
             · entrada 23 (la promesa de M1) · texto 18. El H2 sigue al display (1/26 frente a 1/22 del ancho útil),
     así que nunca lo alcanza, tampoco a 1024, donde el titular de M1 baja a 42,5 para caber en una línea. */
  --t-display:clamp(1.75rem,1rem + 4vw,3.6rem);
  --t-h2:clamp(1.875rem,calc((100vw - 2 * var(--g)) / 26),3rem);
  --t-e1:clamp(1.875rem,1.3rem + 2vw,2.7rem);
  --t-e2:clamp(1.45rem,1.15rem + 1.25vw,2.15rem);
  --t-lead:clamp(1.125rem,1rem + .5vw,1.4375rem);
  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){.scc{font-size:18px;--t-display:min(3.6rem,calc((100vw - 2 * var(--g)) / 22))}}
.scc p{text-wrap:pretty}
.scc :where(h1,h2,h3){text-wrap:balance}

/* Titulares: Archivo ancho en versales (T5). Las mayúsculas las pone el CSS; el texto del DOM es el literal. */
.scc-display{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}

/* La negrita del copy: Libre Caslon no tiene negrita y no se sintetiza; se compone en Archivo, como en la home.
   Sobre papel va en burdeos, como «Soft CEO», «El método Arkwright» o «52 referencias» de la home (M4, 14,9:1).
   Sobre tinta y sobre la pieza burdeos se queda en el color del texto. */
.scc-m12__otras a span{white-space:nowrap}
.scc strong{font-family:var(--archivo);font-weight:700;font-variation-settings:"wdth" 108,"wght" 700;font-size:.92em;letter-spacing:-.012em;color:var(--burdeos)}
.scc-tinta strong,.scc-precio strong{color:inherit}

/* Botón de acción (el de la home A, cierre H3-A). El texto nunca se parte (M2). */
.scc-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;box-sizing:border-box;transition:background-color .22s ease,color .22s ease}
.scc-accion span{white-space:nowrap}
.scc-accion svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.scc-accion:hover{background:var(--burdeos)}
.scc-accion:hover svg{transform:translateX(4px)}
.scc-accion:active{transform:translateY(1px)}
.scc-accion:focus-visible{outline:2px solid var(--acero);outline-offset:5px}
.scc-accion--claro{background:var(--papel);color:var(--tinta)}
.scc-accion--claro:hover{background:var(--acero-claro);color:var(--tinta)}
.scc-tinta .scc-accion:focus-visible,.scc-precio .scc-accion:focus-visible{outline-color:var(--papel)}
/* En el móvil, las medidas del botón de la home (.mc40-action a menos de 600 px). */
@media(max-width:599px){.scc-accion{width:100%;max-width:380px;padding-inline:20px;gap:20px;font-size:12px;letter-spacing:.04em}}
@media(min-width:1024px){.scc-accion{min-height:62px;padding:20px 30px;gap:44px;font-size:13.5px}}

.scc-tinta{background:var(--tinta);color:var(--papel)}
.scc a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ------------------------------------------------------- M1 · primera pantalla -- */
/* G3 · el titular se abre por el centro y la foto crece por la rendija. Se conserva tal cual.
   Estado final (quieto, movimiento reducido, sin JS): titular · foto · titular · promesa · botón. */
.scc-m1{position:relative;padding:calc(64px + 14px) 0 56px;text-align:center;overflow:clip}
.scc-titular{--hueco:12px;--foto-h:calc(100vw * .7);display:grid;justify-items:center;row-gap:var(--hueco);margin:0}
.scc-titular__a,.scc-titular__b{position:relative;z-index:2;display:block;max-width:calc(100% - 2 * var(--g));font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;font-size:clamp(1.75rem,1rem + 4vw,3.6rem);line-height:1.03;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.scc-m1__foto{position:relative;z-index:1;display:block;width:100%;height:var(--foto-h);overflow:hidden;background:var(--papel-sombra)}
.scc-m1__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:57% 34%;transform-origin:50% 50%}
.scc-m1__cierre{display:grid;justify-items:center;gap:20px;max-width:calc(100% - 2 * var(--g));margin:22px auto 0}
.scc-m1__promesa{max-width:34em;margin:0;font:400 17.5px/1.5 var(--caslon)}
@media(min-width:768px){
  .scc-titular{--hueco:18px;--foto-h:calc((100vw - 2 * var(--g)) / 1.5)}
  .scc-m1__foto{width:calc(100% - 2 * var(--g))}
  .scc-m1__promesa{font-size:21px}
}
@media(min-width:1024px){
  .scc-m1{padding:calc(84px + 26px) 0 clamp(80px,8vw,120px)}
  .scc-titular{--hueco:20px;--foto-h:clamp(300px,calc(100svh - 300px),590px)}
  /* En escritorio cada mitad del titular cabe en una línea: el tamaño sale del ancho útil (la mitad más larga mide ≈ 21,5 em). */
  .scc-titular__a,.scc-titular__b{font-size:min(3.6rem,calc((100vw - 2 * var(--g)) / 22));max-width:none;white-space:nowrap}
  .scc-m1__foto{width:calc(var(--foto-h) * 1.5);max-width:calc(100% - 2 * var(--g))}
  .scc-m1__cierre{margin-top:40px;gap:30px}
  .scc-m1__promesa{font-size:23px;line-height:1.5}
}
/* Entrada (sólo con movimiento): la rendija y las dos mitades juntas en el centro de la foto. */
html[data-entrada="1"] .scc-titular__a,html[data-entrada="1"] .scc-titular__b{transition:transform 1.45s var(--ease)}
html[data-entrada="1"] .scc-m1__foto{transition:clip-path 1.45s var(--ease)}
html[data-entrada="1"] .scc-m1__cierre{transition:opacity .8s ease .85s,transform .9s var(--ease) .85s}
html[data-entrada="1"]:not([data-entrada-hecha]) .scc-titular__a{transform:translateY(calc(var(--foto-h) / 2 + var(--hueco)))}
html[data-entrada="1"]:not([data-entrada-hecha]) .scc-titular__b{transform:translateY(calc(-1 * (var(--foto-h) / 2 + var(--hueco))))}
html[data-entrada="1"]:not([data-entrada-hecha]) .scc-m1__foto{clip-path:inset(49.6% 0 49.6% 0)}
html[data-entrada="1"]:not([data-entrada-hecha]) .scc-m1__cierre{opacity:0;transform:translateY(18px)}

/* ---------------------------------------------------- M3 · problema y contraste -- */
.scc-m3{padding:var(--bloque) var(--g)}
.scc-m3__rejilla{max-width:var(--max);margin:0 auto;display:grid;gap:34px}
.scc-m3__titulo{margin:0;font-size:var(--t-h2);max-width:15em}
.scc-m3__foto{margin:0;width:min(100%,380px);aspect-ratio:4/5;overflow:hidden;background:var(--tinta)}
.scc-m3__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.04);transition:filter .9s var(--ease)}
.scc-m3__foto:hover img,.scc-m3__foto.is-color img{filter:none}
.scc-m3__texto{display:grid;gap:24px;align-content:end;max-width:31em}
.scc-m3__texto p{margin:0}
.scc-m3__relato{font-size:var(--t-lead);line-height:1.55;color:#fffdfbe0}
.scc-m3__giro{font:400 var(--t-e1)/1.14 var(--caslon);letter-spacing:-.012em;color:var(--papel)}
.scc-m3__ano{font-size:20px;line-height:1.45}
.scc-m3__ano strong{font-size:1em}
.scc-m3__texto .scc-accion{justify-self:start;margin-top:8px}
@media(min-width:900px){
  .scc-m3__rejilla{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,120px);row-gap:clamp(30px,3vw,44px);align-items:start}
  .scc-m3__foto{grid-column:1;grid-row:1 / span 2;width:min(100%,400px)}
  .scc-m3__titulo{grid-column:2;grid-row:1;align-self:end}
  .scc-m3__texto{grid-column:2;grid-row:2;align-content:start}
}

/* ------------------------------------------------------------- M4 · reencuadre -- */
.scc-m4{padding:var(--bloque) var(--g);text-align:center}
.scc-m4__dentro{max-width:52rem;margin:0 auto;display:grid;gap:26px;justify-items:center}
.scc-m4 p{margin:0}
.scc-m4__apertura{display:grid;gap:24px;justify-items:center}
.scc-m4__frase{font:400 var(--t-e1)/1.2 var(--caslon);letter-spacing:-.012em;max-width:22em}
.scc-m4__porque{font:400 var(--t-lead)/1.45 var(--caslon);max-width:30em}
.scc-m4__puente{font-size:1em;line-height:1.65;color:var(--tinta-suave);max-width:36em;padding-top:26px;border-top:1px solid var(--filete)}
.scc-m4[data-apertura="c"] .scc-m4__frase{font-size:var(--t-e2);line-height:1.3;max-width:26em}

/* ------------------------------------------------------ M5 · lo que hay dentro -- */
/* Cuatro cubiertas (Broadcast Room A5, una por programa). Sin maquetas del producto, el visual es la cubierta impresa:
   tinta o papel con filete de tinta (B1), con la sombra y el lomo de la cubierta del bloque de libros de la home.
   El nombre va arriba como en una portada y el valor abajo, como el pie de imprenta; así los valores de una fila
   quedan a la misma altura y Feminine Awakening no parece una casilla rota. En papel, el nombre va en burdeos,
   como «El método Arkwright» en la home. Debajo, la línea del copy. */
.scc-m5{padding:var(--bloque) var(--g)}
.scc-piezas{list-style:none;margin:0 auto;padding:0;max-width:var(--max);display:grid;gap:clamp(44px,6vw,56px)}
.scc-pieza{margin:0}
.scc-pieza__hoja{display:grid;align-content:start;background:var(--papel)}
.scc-pieza__portada{--filete-cubierta:var(--tinta);--pie-cubierta:var(--tinta-suave);position:relative;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:16px;aspect-ratio:16/9;padding:20px 22px 18px;box-sizing:border-box;border-radius:1px 3px 3px 1px;box-shadow:0 1px 1px #11111414,10px 16px 26px -14px #11111152}
.scc-pieza__portada::before{content:"";position:absolute;inset:10px;z-index:-1;border:1px solid var(--filete-cubierta);pointer-events:none}
.scc-pieza--tinta .scc-pieza__portada{--filete-cubierta:#fffdfb4d;--pie-cubierta:#fffdfbb8;background:var(--tinta);color:var(--papel);box-shadow:inset 1px 0 0 #fffdfb1a,0 1px 1px #11111414,10px 16px 26px -14px #11111166}
.scc-pieza--papel .scc-pieza__portada{background:var(--papel);color:var(--burdeos);box-shadow:inset 2px 0 2px #11111414,0 0 0 1px #11111412,0 1px 1px #11111414,10px 16px 26px -14px #11111140}
/* El nombre se compone a la medida de su cubierta: en el móvil, 24 px (dos líneas caben en la franja de 76 px);
   desde 900 px, el display de la página, sin pasar nunca del ancho («COMUNIDAD» mide 7,9 em). */
.scc-pieza__nombre{margin:0;font-size:min(1.5rem,calc(100cqi / 8.1));line-height:.98;letter-spacing:-.035em}
.scc-pieza__nombre .scc-pieza__sub{display:block;margin-top:10px;font:600 13px/1.4 var(--archivo);font-stretch:100%;font-variation-settings:"wdth" 100,"wght" 600;letter-spacing:.01em;text-transform:none;max-width:24em;opacity:.86}
.scc-pieza__nombre .scc-pieza__sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scc-pieza__valor{margin:0;font:600 12px/1.4 var(--archivo);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--pie-cubierta)}
.scc-pieza__cuerpo{padding:18px 2px 20px}
.scc-pieza__cuerpo[hidden]{display:none}
.scc-pieza__linea{margin:0;max-width:31em}
@media(max-width:899px){.scc-piezas{max-width:30rem;grid-template-columns:minmax(0,1fr)}}
@media(min-width:900px){
  .scc-piezas{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);row-gap:clamp(56px,6vw,88px);align-items:start}
  .scc-pieza__portada{padding:clamp(26px,2.4vw,34px)}
  .scc-pieza__nombre{font-size:min(var(--t-display),calc(100cqi / 8.1))}
  .scc-pieza__portada::before{inset:clamp(12px,1.1vw,16px)}
  .scc-pieza__cuerpo{padding:24px 2px 0}
}
/* G2 · hojas que suben (móvil): cada hoja tapa la anterior y deja visible su nombre arriba (M3).
   Las cuatro se pegan al mismo sitio y el escalón de 76 px es relleno transparente (arriba i × 76, abajo (3 − i) × 76):
   las hojas visibles miden lo mismo, ningún nombre queda tapado y la pila sale entera, sin cortar letras.
   La fila final (sostener) deja la pila completa en pantalla antes de salir; el relleno inferior de la lista
   no sirve para esto, porque el pegado sólo cuenta el contenido. */
@media(max-width:899px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  html:not([data-quieto="1"]) .scc-piezas{--franja:76px;grid-template-rows:repeat(4,1fr) 160px;row-gap:0}
  html:not([data-quieto="1"]) .scc-piezas::after{content:""}
  html:not([data-quieto="1"]) .scc-pieza{position:sticky;top:14px;display:grid;padding-top:calc(var(--i,0) * var(--franja));padding-bottom:calc((3 - var(--i,0)) * var(--franja));pointer-events:none}
  html:not([data-quieto="1"]) .scc-pieza__hoja{pointer-events:auto;box-shadow:0 -16px 28px -24px #11111166}
}

/* --------------------------------------------------------------- M6 · comunidad -- */
/* Sobre papel, sin campo a sangre (B1). Un filete de tinta abre el bloque, como en el bloque de libros de la home. */
.scc-m6{padding:0 var(--g) var(--bloque)}
.scc-m6__dentro{max-width:var(--max);margin:0 auto;display:grid;gap:30px;padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--filete)}
.scc-m6 p{margin:0}
.scc-m6__uno{font:400 var(--t-e1)/1.18 var(--caslon);letter-spacing:-.012em;max-width:19em}
.scc-m6__dos{font:400 var(--t-lead)/1.5 var(--caslon);max-width:23em}
@media(min-width:900px){
  .scc-m6__dentro{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:44px}
  .scc-m6__uno{grid-column:1 / span 8}
  .scc-m6__dos{grid-column:7 / span 6}
}

/* -------------------------------------------------------- M7 · sesión mensual -- */
.scc-m7{padding:var(--bloque) var(--g)}
.scc-m7__dentro{max-width:var(--max);margin:0 auto;display:grid;gap:34px}
.scc-m7__cabeza{display:grid;gap:14px}
.scc-m7__etiqueta{margin:0;font:600 12px/1.4 var(--archivo);letter-spacing:.16em;text-transform:uppercase;color:var(--acero)}
.scc-m7__titulo{margin:0;font-size:var(--t-h2);max-width:16em}
.scc-m7__foto{margin:0;width:min(100%,300px);aspect-ratio:4/5;overflow:hidden;background:var(--papel-sombra)}
.scc-m7__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.scc-m7__texto{display:grid;gap:22px;align-content:end;max-width:34em}
.scc-m7__texto p{margin:0}
.scc-m7__invitacion{font:400 var(--t-lead)/1.45 var(--caslon)}
.scc-m7__valor{padding-top:12px;border-top:1px solid var(--filete);font:600 12px/1.5 var(--archivo);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--acero)}
/* La L de Hazel como firma (L1, relieve Hanya; mismo calibrado que la firma aprobada de Money Code). */
.scc-firma{position:relative;justify-self:end;width:132px;height:146px;margin:-18px -8px -22px 0;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.scc-firma .rl-hazel{display:block;font-size:98px;line-height:1;margin:.275em .356em .187em .185em;color:var(--burdeos)}
@media(min-width:900px){
  .scc-m7__dentro{grid-template-columns:300px minmax(0,1fr);column-gap:clamp(48px,6vw,104px);row-gap:clamp(44px,5vw,64px);align-items:end}
  .scc-m7__cabeza{grid-column:1 / -1}
  .scc-firma{width:148px;height:156px}
  .scc-firma .rl-hazel{font-size:108px}
}

/* ----------------------------------------------------------------- M8 · precio -- */
/* Hasta 1180 px va en una columna: la consecuencia y, debajo, la pieza (como mucho 520 px, para que siga siendo pieza).
   Desde 1180 px, texto a la izquierda y pieza a la derecha. El importe y el botón no se parten nunca (M2). */
.scc-m8{padding:var(--bloque) var(--g)}
.scc-m8__rejilla{max-width:var(--max);margin:0 auto;display:grid;gap:44px;align-items:start}
.scc-m8__texto{display:grid;gap:24px}
.scc-m8__texto p{margin:0}
.scc-m8__consecuencia{font:400 var(--t-e2)/1.25 var(--caslon);letter-spacing:-.01em;max-width:21em}
.scc-m8__cambio{font:400 var(--t-lead)/1.55 var(--caslon);color:var(--tinta-suave);max-width:30em}
/* La pieza burdeos de la página (R9: una vez, ~5 %), con el brillo Hanya de la invitación de la home. */
.scc-precio{--brillo-x:68%;--brillo-y:24%;position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;display:grid;gap:18px;box-sizing:border-box;width:min(100%,520px);padding:34px 22px 26px;background:var(--burdeos);color:var(--papel);border:1px solid #6a2b2e;box-shadow:inset 0 1px 0 #ffffff18,inset 0 -1px 0 #160005aa}
.scc-precio::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse at var(--brillo-x) var(--brillo-y),#e9b5a655 0%,#c67d7120 32%,transparent 68%);transition:opacity .7s ease}
.scc-precio::after{content:"";position:absolute;inset:-120% -70%;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 44%,#ffddd61c 49%,#ffddd63d 50%,#ffddd61c 51%,transparent 56%);transform:translateX(-65%);transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.scc-precio:hover::before,.scc-precio.is-luz::before{opacity:1}
.scc-precio:hover::after,.scc-precio.is-luz::after{transform:translateX(40%)}
.scc-precio p{margin:0}
.scc-precio__total{font:600 12px/1.4 var(--archivo);letter-spacing:.14em;text-transform:uppercase;color:#fffdfbc7}
.scc-precio__total s{text-decoration-thickness:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.scc-precio__desde strong{display:grid;gap:4px;font-size:1em;letter-spacing:0}
.scc-precio__palabra{font:700 12px/1.2 var(--archivo);letter-spacing:.16em;text-transform:uppercase;color:#fffdfbe6}
/* El importe se mide con la pieza: «1.499 €» mide 4,27 em, así que cabe a 1/4,5 del ancho interior. */
.scc-precio__importe{font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;font-size:clamp(3.4rem,2.6rem + 3vw,5.25rem);font-size:clamp(3.4rem,calc(100cqi / 4.5),5.25rem);line-height:.98;letter-spacing:-.035em;font-variant-numeric:lining-nums;white-space:nowrap}
.scc-precio__pago{font:400 15px/1.55 var(--archivo);color:#fffdfbe6;max-width:30em}
.scc-precio__pago a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.scc-precio__pago a:hover{text-decoration-color:var(--acero-claro)}
.scc-precio .scc-accion{margin-top:6px;justify-self:stretch;width:auto;max-width:none}
@media(max-width:599px){.scc-precio .scc-accion{padding-inline:16px;gap:12px}}
@media(max-width:340px){.scc-precio{padding-inline:16px}.scc-precio .scc-accion{padding-inline:14px}}
@media(min-width:600px){.scc-precio{padding:44px 40px 38px;gap:20px}}
@media(min-width:1180px){
  .scc-m8__rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,7vw,120px);align-items:center}
  .scc-precio{width:auto}
  .scc-precio .scc-accion{gap:28px}
}

/* ------------------------------------------- M9 · banda de foto (y telón de M11) -- */
/* A17 mide 1536 × 1024. Para que se vea nítida en Retina (m3) no se muestra a más píxeles de los que tiene:
   en escritorio, una lámina de 720 × 480 centrada (en 2×, 1440 × 960 px de pantalla con el 6 % del paralaje: 1526 px);
   en el móvil, la banda a todo el ancho con la altura limitada según la densidad de la pantalla. Sin retocar el archivo. */
.scc-telon{position:relative}
.scc-m9{margin:0;display:grid;place-items:center;height:min(125vw,640px);overflow:hidden;background:var(--papel)}
.scc-m9__plancha{display:block;width:100%;height:100%;overflow:hidden;background:var(--papel-sombra)}
.scc-m9 img{display:block;width:100%;height:100%;object-fit:cover;object-position:47% 18%}
@media(max-width:899px) and (min-resolution:2dppx){.scc-m9{height:min(125vw,480px)}}
@media(max-width:899px) and (min-resolution:3dppx){.scc-m9{height:min(125vw,320px)}}
@media(min-width:900px){
  .scc-m9{height:min(88svh,820px)}
  .scc-m9__plancha{width:min(720px,calc(100% - 2 * var(--g)));height:auto;aspect-ratio:3/2}
  .scc-m9 img{object-position:50% 34%}
}
/* G1 · la foto se queda y la hoja siguiente sube y la tapa. */
html:not([data-quieto="1"]) .scc-m9{position:sticky;top:0;z-index:0}
.scc-telon > .scc-m11{position:relative;z-index:1}

/* ------------------------------------------------------------- M11 · preguntas -- */
/* El titular va encima de las preguntas en todos los anchos: «Soft CEO Code» no se parte y entre 900 y 1180 px
   ya no queda en seis líneas (M2). En escritorio, las preguntas arrancan en la columna 5. */
.scc-m11{padding:var(--bloque) var(--g) clamp(64px,8vw,120px)}
.scc-m11__dentro{max-width:var(--max);margin:0 auto;display:grid;gap:36px}
.scc-m11__titulo{margin:0;font-size:var(--t-h2);max-width:13em}
@media(max-width:599px){.scc-m11__titulo{font-size:min(var(--t-h2),calc((100vw - 2 * var(--g)) / 10.6))}}
.scc-faq{border-top:1px solid #fffdfb33}
.scc-faq details{border-bottom:1px solid #fffdfb33}
.scc-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:21px 0;cursor:pointer;list-style:none;font:600 17px/1.4 var(--archivo);font-variation-settings:"wdth" 104,"wght" 600;letter-spacing:-.005em}
.scc-faq summary::-webkit-details-marker{display:none}
.scc-faq summary:focus-visible{outline:2px solid var(--papel);outline-offset:4px}
.scc-faq__signo{position:relative;flex:none;width:18px;height:18px}
.scc-faq__signo::before,.scc-faq__signo::after{content:"";position:absolute;left:0;top:8.5px;width:18px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.scc-faq__signo::after{transform:rotate(90deg)}
.scc-faq details[open] .scc-faq__signo::after{transform:rotate(0deg)}
.scc-faq__respuesta{padding:0 0 26px;max-width:38em;color:#fffdfbe0}
.scc-faq__respuesta p{margin:0}
.scc-faq__enlace{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:14px;color:var(--papel);font:600 13px/1.3 var(--archivo);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.scc-faq__enlace svg{width:18px;height:18px}
@media(min-width:900px){
  .scc-m11__dentro{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,2.5vw,40px);row-gap:clamp(40px,4.5vw,64px)}
  .scc-m11__titulo{grid-column:1 / -1}
  .scc-faq{grid-column:5 / -1}
  .scc-faq summary{font-size:18px;padding:24px 0}
}

/* ------------------------------------------------------------------- M12 · pie -- */
.scc-m12{padding:clamp(56px,7vw,96px) var(--g) clamp(48px,6vw,80px);border-top:1px solid #fffdfb24}
.scc-m12__dentro{max-width:var(--max);margin:0 auto;display:grid;gap:40px}
.scc-m12__bio{margin:0;max-width:30em;font:400 var(--t-lead)/1.55 var(--caslon)}
.scc-m12__otras{display:grid;gap:12px;align-content:start}
.scc-m12__rotulo{margin:0 0 4px;font:600 12px/1.4 var(--archivo);letter-spacing:.16em;text-transform:uppercase;color:var(--acero-sobre-tinta)}
.scc-m12__otras a{display:inline-flex;align-items:center;gap:14px;min-height:44px;justify-self:start;color:var(--papel);text-decoration:none;font-family:var(--archivo);font-weight:800;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);letter-spacing:-.02em;text-transform:uppercase;line-height:1.1}
.scc-m12__otras a svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.scc-m12__otras a:hover{color:var(--acero-sobre-tinta)}
.scc-m12__otras a:hover svg{transform:translateX(4px)}
@media(min-width:900px){.scc-m12__dentro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,7vw,120px);align-items:start}}

/* El pie H4-E sigue a M12 sobre la misma tinta: un filete los separa. */
.scc-page .mc40-footer{border-top:1px solid #fffdfb24}

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