/* Consultorías 1:1 · maquetación MC41 sobre el sistema aprobado (home A + landing de Money Code).
   Estructura literal de Jen Gottlieb /speaking: cita como titular → vídeos → ficha → capturas → cierre.
   Móvil primero. Paleta P1, tipografía T5 (Archivo ancho en versales + Libre Caslon Text). */

@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}

.cs{
  --paper:#fffdfb;--paper-2:#f0f3f5;--ink:#111;--ink-soft:#3c4247;--wine:#4b1014;--steel:#4a6274;--steel-light:#d3dee7;
  --sans:"DB Archivo",Arial,sans-serif;--serif:"A1 Caslon Text","DB Caslon",Georgia,serif;
  --gutter:clamp(20px,4.4vw,64px);--ease:cubic-bezier(.16,1,.3,1);--nav-h:64px;
  display:block;padding-top:var(--nav-h);background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--serif);font-synthesis:none;
}
@media(min-width:1100px){.cs{--nav-h:84px}}
.cs ::selection{background:var(--steel-light);color:var(--ink)}
.cs :focus-visible{outline:3px solid var(--steel);outline-offset:4px}

/* Titular de sección compartido (Jen: titular centrado; aquí Archivo ancho en versales, como Money Code). */
.cs-h2{margin:0 auto;font:800 clamp(31px,.9rem + 3.1vw,60px)/1.05 var(--sans);font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;letter-spacing:-.03em;text-transform:uppercase;text-align:center;text-wrap:balance;color:var(--ink)}

/* Botón de pago: píldora de Money Code, rellena para la acción principal. */
.cs-pay{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:62px;padding:16px 26px;border-radius:100px;background:var(--ink);color:var(--paper);font:600 15px/1.3 var(--sans);font-variation-settings:"wdth" 100,"wght" 600;letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.cs-pay svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.cs-pay:hover{background:var(--wine)}
.cs-pay:hover svg{transform:translateX(4px)}
.cs-pay:active{transform:translateY(1px)}
.cs-pay--paper{background:var(--paper);color:var(--ink)}
.cs-pay--paper:hover{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}

/* ---------------------------------------------------------------- 1 · apertura --
   Jen: foto a sangre oscurecida y una cita firmada como titular. El velo sólo cubre
   la mitad baja, donde va el texto; la cara de Lara queda limpia.
   Quién habla: la cita va en Caslon cursiva (así habla una clienta en la home: «gracias a ti
   ya no tengo ansiedad»), la firma va pegada a ella y el botón lleva la miniatura del mensaje real.
   En escritorio la composición es la de Jen: la autora a un lado de la foto y la cita sobre la
   zona oscura, de modo que no se lee como pie del retrato de Lara. */
.cs-open{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:max(560px,calc(100svh - var(--nav-h)));padding:140px var(--gutter) 34px;background:var(--ink);color:var(--paper);overflow:hidden;text-align:center}
.cs-open__photo{position:absolute;inset:0;z-index:-2;margin:0;overflow:hidden}
.cs-open__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 10%;transform-origin:50% 28%}
.cs-open::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(17,17,17,0) 22%,rgba(17,17,17,.34) 36%,rgba(17,17,17,.8) 50%,rgba(17,17,17,.92) 64%,rgba(17,17,17,.97) 100%)}
.cs-open__voice{display:flex;flex-direction:column;align-items:center;width:100%}
.cs-open__quote{width:100%;margin:0}
.cs-open blockquote p{max-width:16.5em;margin:0 auto;font:italic 400 clamp(26px,1.05rem + 2.2vw,46px)/1.22 var(--serif);letter-spacing:-.01em;text-wrap:balance;color:var(--paper);padding-bottom:.04em}
.cs-open figcaption{margin-top:16px;font:600 15px/1.45 var(--sans);font-stretch:112%;font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.015em;color:var(--paper);text-wrap:balance}
.cs-open figcaption span{font-variation-settings:"wdth" 112,"wght" 400}
.cs-open__proof{display:inline-flex;align-items:center;gap:12px;min-height:52px;white-space:nowrap;margin-top:22px;padding:5px 22px 5px 5px;border:1px solid rgba(255,253,251,.72);border-radius:100px;color:var(--paper);font:600 13px/1.3 var(--sans);font-variation-settings:"wdth" 100,"wght" 600;letter-spacing:.01em;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.cs-open__proof svg{width:12px;height:12px;flex:none;transition:transform .3s var(--ease)}
/* La miniatura es el propio mensaje: ancla visual de quién habla. B/N que pasa a color.
   Corrección D7: recorte limpio del primer bocadillo (y 80–327 del original de 1206 px, todo su alto, desde su borde
   izquierdo), sin la fecha, sin el segundo bocadillo ni su reacción azul. */
.cs-open__proof-thumb{position:relative;flex:none;width:58px;height:40px;border-radius:100px;overflow:hidden;background:var(--ink)}
.cs-open__proof-thumb img{position:absolute;left:0;top:-12.96px;width:195.3px;height:auto;max-width:none;filter:grayscale(1) contrast(1.35) brightness(.92);transition:filter .9s var(--ease)}
/* La ventana de papel del mensaje sólo existe por debajo de 960 px (ver «Apertura en móvil»). */
.cs-open__paper{display:none}
.cs-open__proof:is(:hover,:focus-visible) .cs-open__proof-thumb img,.cs-open__proof.is-current .cs-open__proof-thumb img{filter:grayscale(0) contrast(1)}
.cs-open__proof:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cs-open__proof:hover svg{transform:translate(2px,-2px)}
.cs-open :focus-visible{outline-color:var(--paper)}

/* ----------------------------------------------------------------- 2 · vídeos --
   Jen: titular centrado y cuatro vídeos verticales. En móvil, 2 × 2 en lugar de apilarlos
   (mismo componente, una pantalla en vez de dos). B/N que pasa a color al señalar o al deslizar. */
.cs-voices{padding:84px var(--gutter) 112px;background:var(--paper)}
.cs-voices__title{max-width:12ch}
.cs-voices__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;max-width:1120px;margin:40px auto 0}
.cs-video{display:block;color:var(--ink);text-decoration:none}
.cs-video__frame{position:relative;display:block;aspect-ratio:3/5;overflow:hidden;background:var(--ink)}
.cs-video__frame img{--hover:1;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 35%);transform:scale(calc(var(--zoom,1) * var(--hover)));transform-origin:var(--origin,50% 40%);filter:grayscale(1) contrast(1.04);transition:filter .8s var(--ease),transform 1s var(--ease)}
.cs-video:is(:hover,:focus-visible) .cs-video__frame img,.cs-video.is-current .cs-video__frame img{filter:grayscale(0) contrast(1)}
.cs-video:is(:hover,:focus-visible) .cs-video__frame img{--hover:1.035}
.cs-video__play{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background-color .2s ease,color .2s ease}
.cs-video__play svg{width:18px;height:18px;fill:currentColor}
.cs-video:is(:hover,:focus-visible) .cs-video__play{background:var(--ink);color:var(--paper)}
.cs-video__name{display:block;margin-top:12px;font:600 14px/1.3 var(--sans);font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.01em}
.cs-video__meta{display:block;margin-top:3px;font:400 12px/1.4 var(--sans);color:var(--ink-soft)}

/* ------------------------------------------------------------------ 3 · ficha --
   Jen: titular centrado y tarjeta con la foto de la autora, título en dos tiempos
   (sans + cursiva serif), objetivo, resumen y para quién. Aquí, además, la redacción A,
   el precio, el botón y la agenda (elección de Lara: «Jen + A»). */
.cs-session{padding:8px var(--gutter) 104px;background:var(--paper)}
.cs-session__title{max-width:18ch}
.cs-card{display:grid;gap:34px;max-width:1040px;margin:44px auto 0}
/* A30 lleva un gris en la sien que puede leerse como canas (MAPA-FOTOS, verificación 2): como A18 en Soft CEO Code,
   como mucho 300 px CSS de ancho y nunca a sangre. */
.cs-card__photo{width:min(100%,300px);margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--paper)}
.cs-card__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* El nombre del servicio, en burdeos como los nombres de producto en negrita de la home («El método Arkwright», «Soft CEO»). */
.cs-card__title{font:800 clamp(21px,.95rem + 1.15vw,32px)/1.12 var(--sans);font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;color:var(--wine)}
.cs-card__benefit{margin-top:8px;font:italic 400 clamp(25px,1rem + 1.55vw,38px)/1.18 var(--serif);letter-spacing:-.012em;text-wrap:balance;padding-bottom:.08em;color:var(--ink)}
.cs-card__lead{margin-top:24px;font-size:clamp(19px,1rem + .35vw,22px);line-height:1.55;text-wrap:pretty;max-width:34em}
.cs-card__facts{display:grid;gap:22px;margin-top:32px;padding-top:28px;border-top:1px solid var(--steel-light)}
/* Negritas sobre papel en burdeos #4B1014, como en la home (14,9:1). */
.cs-card__facts dt{font:700 12px/1.4 var(--sans);font-variation-settings:"wdth" 112,"wght" 700;letter-spacing:.1em;text-transform:uppercase;color:var(--wine)}
.cs-card__facts dd{margin:6px 0 0;font-size:17px;line-height:1.6;text-wrap:pretty;max-width:36em}
/* La pieza burdeos (R9: una vez en la página) con el brillo Hanya de la invitación de la home: mismos valores que el precio de Soft CEO Code. */
.cs-buy-wrap{display:grid;gap:6px;margin-top:34px}
.cs-buy{--brillo-x:68%;--brillo-y:24%;position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:start;gap:18px;padding:36px 26px 30px;background:var(--wine);color:var(--paper);border:1px solid #6a2b2e;box-shadow:inset 0 1px 0 #ffffff18,inset 0 -1px 0 #160005aa;scroll-margin-top:110px}
.cs-buy::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}
.cs-buy::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)}
.cs-buy:hover::before,.cs-buy.is-luz::before{opacity:1}
.cs-buy:hover::after,.cs-buy.is-luz::after{transform:translateX(40%)}
.cs-buy__price{font:800 clamp(44px,1.4rem + 1.8vw,52px)/.98 var(--sans);font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;letter-spacing:-.035em;white-space:nowrap;color:var(--paper);font-variant-numeric:lining-nums}
.cs-buy .cs-pay{justify-self:stretch;margin-top:4px}
.cs-buy .cs-pay{min-width:0;width:100%}
.cs-buy :focus-visible{outline-color:var(--paper)}
.cs-firma{position:relative;flex:none;justify-self:end;width:100px;height:110px;margin:0 -6px -10px 0;display:flex;align-items:center;justify-content:center}
.cs-firma .rl-hazel{display:block;font-size:74px;line-height:1;margin:.275em .356em .187em .185em;color:var(--wine)}
.cs-buy__note{font-style:italic;font-size:16px;line-height:1.5;color:rgba(255,253,251,.88);text-wrap:pretty}

/* --------------------------------------------------------------- 4 · capturas --
   Jen: capturas de historias en carril, sin texto propio. Aquí tres recibos de negocio legibles
   (de los que ya enseña la home), firmados como «asesorada». En móvil el carril se desliza con imán;
   en escritorio llena el ancho y cada captura flota a su ritmo con el scroll. */
.cs-wall{--row-h:300px;padding:16px 0 104px;background:var(--paper);overflow:hidden}
.cs-wall__row{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px var(--gutter) 26px;scroll-padding-inline:var(--gutter)}
.cs-wall__row::-webkit-scrollbar{display:none}
.cs-wall__track{display:flex;align-items:flex-start;gap:16px;width:max-content}
.cs-wall__item{flex:none;scroll-snap-align:start}
.cs-shot__name{margin-top:12px;font:600 13px/1.3 var(--sans);font-stretch:112%;font-variation-settings:"wdth" 112,"wght" 600;letter-spacing:.015em;color:var(--ink)}
.cs-shot__name span{font-variation-settings:"wdth" 112,"wght" 400;color:var(--ink-soft)}
.cs-shot{display:block;height:var(--row-h);padding:7px;background:#fff;box-shadow:0 22px 38px -24px rgba(17,17,17,.42),0 2px 6px rgba(17,17,17,.07);color:var(--ink);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.cs-shot img{display:block;height:100%;width:auto;max-width:none;filter:grayscale(1) contrast(1.03);transition:filter .8s var(--ease)}
.cs-shot:is(:hover,:focus-visible) img,.cs-shot.is-current img{filter:grayscale(0) contrast(1)}
.cs-shot:hover{transform:translateY(-4px);box-shadow:0 30px 46px -26px rgba(17,17,17,.48),0 3px 8px rgba(17,17,17,.08)}
.cs-shot:focus-visible{outline-offset:6px}

/* ----------------------------------------------------------------- 5 · cierre --
   Jen: foto oscura a sangre, la pregunta como titular y una sola acción. */
.cs-close{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:660px;padding:0 var(--gutter) 60px;background:var(--ink);color:var(--paper);overflow:hidden}
.cs-close__photo{position:absolute;inset:0;z-index:-2;margin:0;overflow:hidden}
.cs-close__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
/* Por debajo de 1200 px la foto va a sangre: la piedra greige de A08 (R8) queda bajo un velo ≥ 0,55 hasta el 40 %
   (corrección D5). Desde 1200 px manda el velo lateral de la media banda. */
.cs-close::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(17,17,17,.6) 0%,rgba(17,17,17,.57) 24%,rgba(17,17,17,.62) 40%,rgba(17,17,17,.82) 52%,rgba(17,17,17,.93) 64%,#111 100%)}
.cs-close__inner{width:100%;max-width:640px;margin:0 auto;text-align:center}
.cs-close__title{font:800 clamp(31px,.9rem + 3.1vw,60px)/1.05 var(--sans);font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 800;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.cs-close__price{margin-top:22px;font:700 20px/1 var(--sans);font-stretch:112%;font-variation-settings:"wdth" 112,"wght" 700;letter-spacing:.02em;white-space:nowrap}
.cs-close .cs-pay{margin:18px auto 0}
.cs-close :focus-visible{outline-color:var(--paper)}

/* ------------------------------------------------------------------ anchos -- */
@media(min-width:768px){
  .cs-voices__title{max-width:none}
  .cs-voices__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .cs-pay{width:auto;display:inline-flex;min-width:340px}
  .cs-close .cs-pay{display:flex;width:max-content}
}
@media(max-width:879px){
  .cs-card__photo{margin-inline:auto}
}
/* En tableta la pieza no se estira a todo el ancho: precio y botón en un bloque contenido, la firma a su lado. */
@media(min-width:600px){
  .cs-buy-wrap{grid-template-columns:minmax(0,520px) auto;justify-content:space-between;align-items:end;column-gap:24px}
}
@media(min-width:880px){
  .cs-card{grid-template-columns:300px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;margin-top:64px}
  .cs-card__photo{position:sticky;top:32px}
  .cs-card__body{padding-top:8px}
}
@media(min-width:960px){
  .cs-session{padding:16px var(--gutter) 150px}
  .cs-card{margin-top:72px}
  .cs-card__facts{gap:24px}
  .cs-buy-wrap{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:24px;margin-top:40px}
  .cs-buy{padding:48px 42px 40px;gap:20px}
  .cs-firma{width:118px;height:128px;margin:0 -8px -12px 0}
  .cs-firma .rl-hazel{font-size:86px}
  .cs-close{min-height:760px;padding-bottom:72px}
}
/* El retrato del cierre es vertical (1086 px): a sangre hasta ~1200 px; por encima, media banda para no ampliarlo. */
@media(min-width:1200px){
  .cs-close{min-height:720px;align-items:center;padding:96px var(--gutter)}
  .cs-close__photo{left:auto;width:56%}
  .cs-close__photo img{object-position:50% 18%}
  /* Jen: «foto oscura». La foto queda bajo un velo de tinta (también la piedra clara de A08, que R8 no quiere dominante). */
  .cs-close::after{background:linear-gradient(90deg,#111 0%,#111 48%,rgba(17,17,17,.82) 54%,rgba(17,17,17,.5) 63%,rgba(17,17,17,.34) 75%,rgba(17,17,17,.4) 100%)}
  .cs-close__inner{max-width:min(690px,48%);margin:0;text-align:left}
  .cs-close .cs-pay{margin:20px 0 0}
}
@media(min-width:1024px){
  /* Los tres recibos caben siempre en el ancho (la suma de sus proporciones es ≈2,56 × la altura). */
  .cs-wall{--row-h:min(440px,calc((100vw - 2 * var(--gutter) - 140px) / 2.6));padding:56px 0 172px}
  .cs-wall__row{overflow:visible;padding:10px var(--gutter) 30px}
  .cs-wall__track{gap:clamp(24px,2.4vw,40px);margin-inline:auto}
  /* Ritmo de recortes sobre la mesa: alturas de partida distintas, base común de lectura. */
  .cs-wall__item:nth-child(2){margin-top:72px}
  .cs-wall__item:nth-child(3){margin-top:28px}
}
/* Apertura en escritorio: Lara a la derecha (como Jen en su foto) y la cita a la izquierda, sobre la tinta. */
@media(min-width:960px){
  .cs-open{align-items:flex-start;justify-content:flex-end;text-align:left;padding:120px var(--gutter) 64px}
  .cs-open__photo{left:auto;width:68%}
  .cs-open__photo img{object-position:50% 16%}
  .cs-open::after{background:linear-gradient(90deg,#111 0%,#111 35%,rgba(17,17,17,.9) 40%,rgba(17,17,17,.56) 48%,rgba(17,17,17,.18) 58%,rgba(17,17,17,0) 68%),linear-gradient(180deg,rgba(17,17,17,0) 60%,rgba(17,17,17,.5) 100%)}
  .cs-open__voice{align-items:flex-start;width:min(46%,36rem)}
  .cs-open blockquote p{max-width:none;margin:0;font-size:clamp(30px,.6rem + 2.6vw,46px);text-wrap:pretty}
  .cs-open figcaption{margin-top:20px}
}
/* Apertura en móvil y tableta (corrección D1): la cita de Sonia no puede leerse como pie del retrato de Lara.
   La foto termina antes, con el borde inferior limpio, y la voz (cita, firma, su mensaje y botón) va entera sobre la tinta.
   La imagen de quien habla pasa a ser su mensaje: el primer bocadillo real, en color, en la ventana de papel de la home
   (papel blanco, -2°, el original recortado por CSS). La foto se amplía por tamaño, no por transform (GSAP anima el transform):
   cara y hombros, sin los brazos sobre la mesa (pendiente de A05). El escritorio no cambia. */
@media(max-width:959px){
  .cs-open{display:block;min-height:0;padding:0;text-align:left}
  .cs-open::after{content:none}
  .cs-open__photo{position:relative;inset:auto;z-index:auto;height:58vh;height:clamp(300px,58svh,640px)}
  .cs-open__photo img{height:142%;object-position:50% 0;transform-origin:50% 18%}
  .cs-open__voice{align-items:flex-start;padding:26px var(--gutter) 40px}
  .cs-open blockquote p{max-width:17em;margin:0}
  .cs-open figcaption{margin-top:14px}
  /* Si la firma no cabe en una línea, se parte antes del punto: «Sonia Castillo» / «· asesorada de Lara Lawn». */
  .cs-open figcaption span{display:inline-block}
  .cs-open__paper{display:block;width:min(100%,240px);margin-top:18px;padding:6px;background:#fff;transform:rotate(-2deg);transform-origin:0 50%;box-shadow:0 16px 28px -16px rgba(0,0,0,.75);cursor:pointer}
  /* Primer bocadillo con su orla verde: x 18–1045 · y 80–327 del original (1206 × 2084). */
  .cs-open__paper-window{display:block;position:relative;overflow:hidden;aspect-ratio:1027/247;background:#fff}
  .cs-open__paper-window img{position:absolute;left:-1.7527%;top:-32.389%;width:117.429%;height:auto;max-width:none}
  .cs-open__proof{margin-top:24px;padding:0 22px 0 24px}
  .cs-open__proof-thumb{display:none}
}
@media(min-width:600px) and (max-width:959px){
  .cs-open__paper{width:clamp(240px,34vw,300px)}
}
/* La L firma en la esquina de la pieza burdeos también por debajo de 600 px (corrección D4): montada sobre la esquina
   inferior derecha, como desde 960, y sin el hueco de debajo. */
@media(max-width:599px){
  .cs-buy-wrap{position:relative;display:block;margin-bottom:52px}
  .cs-firma{position:absolute;right:-10px;bottom:-60px;z-index:2;width:86px;height:95px;margin:0}
  .cs-firma .rl-hazel{font-size:64px}
  .cs-session{padding-bottom:58px}
}
@media(min-width:1100px){
  .cs-open{padding-bottom:76px}
  .cs-voices{padding:144px var(--gutter) 156px}
  .cs-voices__grid{margin-top:64px}
}
@media(max-width:350px){
  .cs-open blockquote p{font-size:24px}
  .cs-card__benefit{font-size:23px}
  .cs-pay{padding-inline:20px;gap:14px;font-size:14px}
}

/* ---------------------------------------------------- reposo y movimiento -- */
@media(prefers-reduced-motion:reduce){
  .cs *,.cs *::before,.cs *::after{transition:none!important;animation:none!important}
  .cs-video__frame img{--hover:1!important}.cs-shot:hover{transform:none}
  .cs-buy::after{display:none}
}
html[data-quieto="1"] .cs-buy::after{display:none}

/* --------------------------------------------- visor de vídeos y capturas -- */
.cs-dialog{padding:0;border:0;background:#fffdfb;color:#111;width:min(calc(100% - 24px),760px);max-height:92dvh;overflow:hidden;font-family:"DB Archivo",Arial,sans-serif;font-synthesis:none}
.cs-dialog::backdrop{background:rgba(17,17,17,.8)}
.cs-dialog[open]{display:flex;flex-direction:column}
.cs-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 20px;border-bottom:1px solid rgba(17,17,17,.14);flex-shrink:0}
.cs-dialog__title{margin:0;font:600 14px/1.3 "DB Archivo",Arial,sans-serif;font-variation-settings:"wdth" 112,"wght" 600}
.cs-dialog__close{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:92px;border:0;background:none;color:#111;font:500 13px/1 "DB Archivo",Arial,sans-serif;cursor:pointer}
.cs-dialog__close span{font-size:24px;line-height:1}
.cs-dialog__body{overflow:auto;overscroll-behavior:contain;min-height:0;padding:16px;background:#fffdfb}
.cs-dialog__body video{display:block;margin:auto;max-width:100%;max-height:76dvh;background:#111}
.cs-dialog__body img{display:block;margin:auto;width:auto;max-width:min(100%,560px);height:auto}
.cs-dialog :focus-visible{outline:3px solid #4a6274;outline-offset:3px}