/* Página de Software. 1rem = 10px. Una sola hoja para compu y celular. */
:root {
  --negro: #000;
  --texto: #F2F1ED;
  --texto-80: rgba(242, 241, 237, 0.8);
  --texto-70: rgba(242, 241, 237, 0.7);
  --texto-55: rgba(242, 241, 237, 0.55);
  --texto-18: rgba(242, 241, 237, 0.18);
  --texto-10: rgba(242, 241, 237, 0.1);
  --rojo: #C10801;
  --letra-titulo: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --letra-texto: 'Bricolage Grotesque', Arial, Helvetica, sans-serif;
  --margen: 2.4rem;
}
@media (min-width: 420px) { :root { --margen: 3.2rem; } }
@media (min-width: 1024px) { :root { --margen: 4rem; } }
html { font-size: 62.5%; }
@media (min-width: 1600px) { html { font-size: 68.75%; } }
@media (min-width: 1920px) { html { font-size: 75%; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body { background: var(--negro); color: var(--texto); font-family: var(--letra-texto); font-optical-sizing: auto; line-height: 1; -webkit-font-smoothing: antialiased; }
img, video, canvas, picture, svg { -webkit-user-drag: none; user-select: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.saltar { position: fixed; top: 2.4rem; left: 2.4rem; z-index: 1002; padding: 1rem 1.4rem; background: var(--texto); color: #0C0C0C; font-size: 1.4rem; text-decoration: none; transform: translateY(-200%); }
.saltar:focus-visible { transform: none; }

/* Texto chico en mayúsculas (como el "captionL" de Forge) */
/* Rótulos: sin mayúsculas ni letras separadas (Octa: eso "es muy de IA").
   Los de arriba de cada sección, en la serif cursiva; los chicos de navegación y notas, en Bricolage normal. */
.sw-ante { font-family: var(--letra-titulo); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 1.6vw, 2.4rem); line-height: 1.25; letter-spacing: 0; }
.sw-sigue, .sw-mod__num, .sw-cierre__nota, .sw-pie, .cabeza__lado {
  font-family: var(--letra-texto); font-weight: 400; font-size: 1.4rem; line-height: 1.5; letter-spacing: 0;
}

/* ---------- Cabecera ---------- */
.cabeza { position: fixed; inset: 0 0 auto; z-index: 1000; display: flex; justify-content: space-between; align-items: flex-start; padding: 2.4rem; pointer-events: none; }
@media (min-width: 420px) { .cabeza { padding: 3.2rem; } }
@media (min-width: 1024px) { .cabeza { padding: 4rem; } }
.cabeza::before { content: ''; position: absolute; inset: 0 0 auto; height: 12rem; background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); pointer-events: none; }
.cabeza > * { position: relative; pointer-events: auto; }
.cabeza__logo { position: absolute; left: 50%; top: 2.4rem; transform: translateX(-50%); }
@media (min-width: 420px) { .cabeza__logo { top: 3.2rem; } }
@media (min-width: 1024px) { .cabeza__logo { top: 4rem; } }
.cabeza__logo img { height: 2.6rem; width: auto; }
@media (min-width: 1024px) { .cabeza__logo img { height: 3.2rem; } }
.cabeza__lado { text-decoration: none; color: var(--texto); transition: opacity 0.3s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .cabeza__lado:hover { opacity: 0.4; } }

/* ---------- 1. Portada ---------- */
.sw-portada { position: relative; height: 100svh; min-height: 56rem; display: grid; place-items: center; overflow: hidden; text-align: center; }
.sw-portada__fondo { position: absolute; inset: 0; }
.sw-portada__fondo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.sw-portada__fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.85) 85%, #000 100%); }
.sw-portada__centro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 var(--margen); }
.sw-ante { color: var(--texto-70); }
.sw-titulo { max-width: 13ch; margin-top: 2.4rem; font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(5.2rem, 8.4vw, 14rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.sw-bajada { max-width: 46rem; margin-top: 3.2rem; font-weight: 400; font-size: 1.7rem; line-height: 1.5; color: var(--texto-80); text-wrap: balance; }
@media (min-width: 1200px) { .sw-bajada { font-size: 1.8rem; } }
.sw-sigue { position: absolute; left: 50%; bottom: 4rem; z-index: 1; transform: translateX(-50%); color: var(--texto-55); }

/* ---------- 2. El dashboard que se agranda ---------- */
.sw-tablero { position: relative; height: 200vh; }
.sw-tablero__fija { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.sw-tablero__marco { width: min(92vw, calc(86vh * 1.633)); aspect-ratio: 1600 / 980; overflow: hidden; border: 1px solid var(--texto-10); border-radius: 1.6rem; box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.6); transform: scale(0.72); transform-origin: 50% 50%; will-change: transform; background: #0c0c0c; }
.sw-tablero__marco img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .sw-tablero { height: auto; padding: 8rem 0; } .sw-tablero__fija { position: static; height: auto; } .sw-tablero__marco { width: calc(100vw - 2 * var(--margen)); border-radius: 0.8rem; transform: none; } }

/* ---------- 3. Frase que se enciende ---------- */
.sw-frase { padding: 24vh var(--margen); display: flex; justify-content: center; }
.sw-frase__texto { max-width: 26ch; font-family: var(--letra-titulo); font-size: clamp(3.2rem, 4.6vw, 7.2rem); line-height: 1.1; letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
.sw-frase__texto .p { transition: none; }

/* ---------- 4. Módulos ---------- */
.sw-modulos { position: relative; }
.sw-modulos__grid { display: grid; grid-template-columns: 1fr 1fr; }
.sw-mod { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 6vw; }
.sw-mod__cuerpo { max-width: 48rem; }
.sw-mod__num { font-family: var(--letra-titulo); font-size: 2.4rem; color: var(--texto-55); }
.sw-mod__nombre { margin-top: 1.6rem; font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(4.4rem, 5vw, 8rem); line-height: 1; letter-spacing: -0.02em; }
.sw-mod__bajada { margin-top: 2.4rem; font-family: var(--letra-titulo); font-size: clamp(2rem, 1.9vw, 2.8rem); line-height: 1.2; color: var(--texto-80); }
.sw-mod__texto { margin-top: 2.4rem; font-weight: 400; font-size: 1.6rem; line-height: 1.6; color: var(--texto-70); }
@media (min-width: 1200px) { .sw-mod__texto { font-size: 1.7rem; } }
.sw-mod__celu { display: none; }
.sw-modulos__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sw-foto { position: absolute; inset: 0; overflow: hidden; }
.sw-foto[data-i]:not([data-i="0"]) { clip-path: inset(100% 0 0 0); }
.sw-foto__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); transform: scale(1.2); will-change: transform; }
.sw-foto__ui { position: absolute; left: 50%; top: 50%; width: 82%; transform: translate(-50%, -50%); border-radius: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.7); }
@media (max-width: 1023px) {
  .sw-modulos__grid { grid-template-columns: 1fr; }
  .sw-modulos__fotos { display: none; }
  .sw-mod { min-height: 0; display: block; padding: 0 0 8rem; }
  .sw-mod__celu { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 3.2rem; }
  .sw-mod__celu img:first-child { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
  .sw-mod__celu .sw-mod__ui { position: absolute; left: 50%; top: 50%; width: 88%; transform: translate(-50%, -50%); border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.12); }
  .sw-mod__cuerpo { padding: 0 var(--margen); }
}

/* ---------- 5. Y además ---------- */
.sw-ademas, .sw-pasos-sec { padding: 16rem var(--margen) 12rem; }
@media (min-width: 1024px) { .sw-ademas, .sw-pasos-sec { padding-left: 8.333vw; padding-right: 8.333vw; } }
.sw-cabecera { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 6.4rem; }
.sw-h2 { font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(4rem, 6vw, 9.6rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.sw-fila { display: grid; grid-template-columns: 8rem 1fr 1fr; gap: 3.2rem; align-items: baseline; padding: 4rem 0; border-top: 1px solid var(--texto-10); }
.sw-fila:last-child { border-bottom: 1px solid var(--texto-10); }
.sw-fila__num { font-family: var(--letra-titulo); font-size: 2.4rem; color: var(--texto-55); }
.sw-fila__nombre { font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(3.2rem, 3.6vw, 5.6rem); line-height: 1.05; letter-spacing: -0.01em; }
.sw-fila__texto { font-weight: 400; font-size: 1.6rem; line-height: 1.6; color: var(--texto-70); max-width: 48rem; }
@media (max-width: 1023px) { .sw-fila { grid-template-columns: 1fr; gap: 1.2rem; padding: 3.2rem 0; } }

/* ---------- 6. Cómo trabajamos ---------- */
.sw-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.2rem; }
.sw-paso { display: flex; flex-direction: column; gap: 1.6rem; padding-top: 2.4rem; border-top: 1px solid var(--texto-10); }
.sw-paso__num { font-family: var(--letra-titulo); font-size: clamp(5.6rem, 6vw, 9.6rem); line-height: 1; color: var(--texto); opacity: 0.2; }
.sw-paso__nombre { font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(2.8rem, 2.6vw, 4rem); line-height: 1.1; }
.sw-paso__texto { font-weight: 400; font-size: 1.6rem; line-height: 1.6; color: var(--texto-70); }
@media (max-width: 1023px) { .sw-pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .sw-pasos { grid-template-columns: 1fr; } }

/* ---------- 7. Cierre ---------- */
.sw-cierre { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; padding: 16rem var(--margen) 12rem; text-align: center; overflow: hidden; }
.sw-cierre__textura { position: absolute; inset: 0; background: url('../assets/texturas/carbono.webp') center / 60rem repeat; opacity: 0.2; }
.sw-cierre__textura::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, #000 75%); }
.sw-cierre > *:not(.sw-cierre__textura) { position: relative; }
.sw-cierre__titulo { font-family: var(--letra-titulo); font-weight: 400; font-size: clamp(4.4rem, 7vw, 12rem); line-height: 1.02; letter-spacing: -0.02em; }
.sw-cierre__titulo em { color: var(--texto-55); }
.sw-cierre__nota { color: var(--texto-55); }
.sw-pie { position: absolute !important; left: var(--margen); right: var(--margen); bottom: 3.2rem; display: flex; justify-content: space-between; color: var(--texto-55); font-size: 1.3rem; }
.sw-pie a { text-decoration: none; transition: color 0.3s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .sw-pie a:hover { color: var(--texto); } }

/* ---------- Títulos que suben letra por letra + barrido rojo (mismo efecto que la legal) ---------- */
.js .anim-titulo { visibility: hidden; }
.js.quieto .anim-titulo { visibility: visible; }
.t-palabra { display: inline-block; white-space: nowrap; }
.t-letra { display: inline-block; will-change: transform; }
.t-linea { display: block; width: fit-content; padding: 0.14em; margin: -0.14em auto -0.14em -0.14em; white-space: nowrap; }
.sw-titulo .t-linea, .sw-cierre__titulo .t-linea { margin-left: auto; }
.t-linea.relleno {
  --fill-pos: -16;
  background-image: linear-gradient(97deg, var(--texto) 0%, var(--texto) calc((var(--fill-pos) - 8) * 1%), var(--rojo) calc(var(--fill-pos) * 1%), var(--texto-18) calc((var(--fill-pos) + 8) * 1%), var(--texto-18) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Entrada suave de bloques al aparecer */
.js .aparece { opacity: 0; transform: translateY(2.4rem); }
.js .aparece.visto { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(0.43, 0.195, 0.02, 1), transform 1s cubic-bezier(0.43, 0.195, 0.02, 1); }
.js.quieto .aparece { opacity: 1; transform: none; }

/* Las pantallas ahora son transparentes (las tarjetas flotan sobre la foto): sin recuadro, borde ni sombra */
.sw-foto__ui, .sw-mod__celu .sw-mod__ui { border: 0; border-radius: 0; box-shadow: none; }
.sw-tablero__marco { background: transparent; border-color: transparent; box-shadow: none; }

/* ---------- Módulos fijos (2026-11-10): la sección mide n × 85vh; el bloque (texto + fotos) queda clavado y los
   textos se reemplazan en el lugar (pagina-software.js). Nunca queda la foto sola. ---------- */
@media (min-width: 1024px) {
  .sw-modulos { height: calc(var(--n, 5) * 85vh + 15vh); }
  .sw-modulos__grid { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .sw-modulos__textos { position: relative; height: 100%; }
  .sw-mod { position: absolute; inset: 0; min-height: 0; will-change: opacity; }
  .sw-mod__cuerpo { will-change: transform, opacity; }
  .sw-modulos__fotos { height: 100%; }
  .sw-modulos__fijo { position: relative; height: 100%; }
  .sw-tablero { height: 140vh; }
}
/* La frase: más chica y con más aire (antes era un bloque muy grande de la misma letra) */
.sw-frase { padding: 16vh var(--margen); }
.sw-frase__texto { max-width: 30ch; font-size: clamp(2.6rem, 2.9vw, 4.4rem); line-height: 1.22; }

/* La foto de la portada arranca ya agrandada (1,12) y el JS la lleva a 1: sin el salto de "se abre a medias" */
.js .sw-portada__fondo img { transform: scale(1.12); }
.js.quieto .sw-portada__fondo img { transform: none; }
.js .sw-sigue { opacity: 0; }

/* Módulos con un poco más de recorrido cada uno (cambios más tranquilos) */
@media (min-width: 1024px) { .sw-modulos { height: calc(var(--n, 5) * 100vh + 10vh); } }

/* Mismo espaciado con las letras sueltas (animando) y juntas (terminado): así no se "compactan" al final */
.anim-titulo { font-kerning: none; font-variant-ligatures: none; }

/* ---------- Textura sutil en todo el fondo negro (2026-11-10) ----------
   Fondo de la página = grano fino en alta (assets/texturas/fondo-negro-hd.webp, 1024 px mostrado a 512: nítido en retina), sobre
   negro). Grano, no trama de puntos. Las fotos y bloques con fondo propio la tapan. */
:root { --fondo-pagina: #000 url('../assets/texturas/fondo-negro-hd.webp') repeat 0 0 / 512px 512px; }
body { background: var(--fondo-pagina); }

.sw-cierre__botones { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }   /* WhatsApp arriba, Ir al menú abajo */
.sw-cierre__botones [data-abrir-menu] { border-color: rgba(255, 255, 255, 0.06); background: transparent; color: rgba(255, 255, 255, 0.75); }
.sw-cierre__nota { margin-bottom: -1.6rem; }

/* Celular (sesión celu, 2026-11-10): el texto pasaba por debajo de Inicio · logo · menú y se enciman.
   Degradé más firme arriba solo en pantallas chicas */
@media (max-width: 1023px) {
  .cabeza::before { height: 11.5rem; background: linear-gradient(rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0)); }
}

/* ---------- Celular (sesión celu, 2026-11-10): como en compu, adaptado a la pantalla parada ----------
   El scroll solo elige qué módulo va (clase .activo, pagina-software.js); los cambios los anima el iPhone con
   transiciones de CSS (opacidad y transform: fuera del hilo de JS), así van fluidos aunque el teléfono esté exigido.
   Dashboard fijo que crece al llegar. Módulos: pantalla fija con la foto, el sistema arriba y el texto abajo. */
@media (max-width: 1023px) {
  .sw-tablero { height: 130svh; padding: 0; }
  .sw-tablero__fija { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
  .sw-tablero__marco { width: calc(100vw - 2 * var(--margen)); transform: scale(0.8); transition: transform 1.2s cubic-bezier(0.43, 0.195, 0.02, 1); will-change: transform; }
  .sw-tablero.grande .sw-tablero__marco { transform: scale(1); }

  .sw-frase__texto .p { opacity: 0.18; transition: opacity 0.6s ease; }
  .sw-frase__texto.encendida .p { opacity: 1; transition-delay: calc(var(--i) * 45ms); }

  .sw-modulos { height: calc(var(--n, 5) * 90svh + 10svh); }
  .sw-modulos__grid { position: sticky; top: 0; height: 100svh; overflow: hidden; display: block; }
  .sw-modulos__fotos { display: block; position: absolute; inset: 0; }
  .sw-modulos__fijo { position: relative; height: 100%; }
  .sw-modulos__fijo::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 80%, #000 100%); }
  .sw-modulos .sw-foto[data-i] { clip-path: none; opacity: 0; visibility: hidden; z-index: 1; transition: opacity 0s linear 0.75s, visibility 0s linear 0.75s; }
  .sw-modulos .sw-foto[data-i].activo { opacity: 1; visibility: visible; z-index: 2; transition: opacity 0.7s ease; }
  .sw-foto__fondo { filter: none; opacity: 0.5; transform: scale(1.12); transition: transform 0s linear 0.75s; }
  .sw-foto.activo .sw-foto__fondo { transform: scale(1); transition: transform 2.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .sw-foto__ui { top: max(12rem, 14svh); width: 96%; z-index: 4; transform: translate3d(-50%, 34px, 0); transition: transform 0s linear 0.75s; }
  .sw-foto.activo .sw-foto__ui { transform: translate3d(-50%, 0, 0); transition: transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .sw-modulos__textos { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .sw-mod { position: absolute; left: 0; right: 0; top: calc(max(12rem, 14svh) + (100vw * 0.96 * 980 / 1600) + 3.2rem); bottom: 0; min-height: 0; display: block; padding: 0; }
  .sw-mod__celu { display: none; }
  .sw-mod__cuerpo { padding: 0 var(--margen); opacity: 0; visibility: hidden; transform: translate3d(0, 22px, 0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
  .sw-mod.activo .sw-mod__cuerpo { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity 0.55s ease 0.28s, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s, visibility 0s linear 0.28s; }
  .sw-mod__nombre { margin-top: 0.8rem; font-size: clamp(3.6rem, 10vw, 4.8rem); }
  .sw-mod__bajada { margin-top: 1.2rem; font-size: 2rem; }
  .sw-mod__texto { margin-top: 1.4rem; font-size: 1.5rem; line-height: 1.55; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .sw-mod__texto { display: none; }   /* teléfonos bajitos: número, nombre y bajada (el resto no entra) */
}

/* Celular (2026-11-10, pedido de Octa): el panel general con su frase abajo, en una pantalla; sin huecos negros entre secciones */
@media (max-width: 1023px) {
  .sw-tablero { height: 150svh; }
  .sw-tablero__fija { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2rem; padding: 6rem var(--margen) 4rem; }
  .sw-tablero .sw-frase__texto { max-width: 34ch; font-size: 2.3rem; line-height: 1.28; text-align: center; color: var(--texto); }
  .sw-frase__texto .p.f { font-style: italic; color: #fff; }
  .sw-frase__texto.encendida .p { transition-delay: calc(0.5s + var(--i) * 40ms); }
  .sw-frase.vacia { display: none; }
  .sw-ademas, .sw-pasos-sec { padding: 7.2rem var(--margen) 6rem; }
  .sw-cabecera { margin-bottom: 3.2rem; }
  .sw-cierre { min-height: 0; padding: 10rem var(--margen) 12rem; gap: 2.4rem; }
  .sw-cierre__titulo { font-size: clamp(3.8rem, 10.5vw, 4.8rem); }
  .sw-cierre__nota { font-size: 1.6rem; margin-bottom: 0.8rem; max-width: 30ch; }
  /* Portadas internas: título, textos y "Seguí bajando" juntos (antes había mucho aire y "Seguí bajando" quedaba lejos, abajo) */
  .sw-titulo { margin-top: 1.4rem; }
  .sw-bajada { margin-top: 2rem; }
  .sw-portada { align-content: center; grid-auto-rows: auto; }
  .sw-portada .sw-sigue { position: relative; left: auto; bottom: auto; transform: none; margin-top: 3.6rem; }
}
.sw-bajada strong { font-weight: 500; color: var(--texto); }

/* La IA: Tech Provider de Meta debajo de la bajada (Octa 11-10) */
.sw-meta { max-width: 46rem; margin-top: 1.6rem; font-family: var(--letra-titulo); font-style: italic; font-size: 1.8rem; line-height: 1.4; color: var(--texto-80); text-wrap: balance; }
.sw-meta strong { font-weight: 400; color: #fff; }

/* Portadas internas en celular, textos acomodados (Octa 11-10: "desincronizados"): mismo ancho de columna para todo,
   rótulo sin palabras sueltas, bajada más chica y la línea de Meta separada con una rayita roja */
@media (max-width: 1023px) {
  .sw-portada__centro { padding: 0 2.4rem; }
  .sw-ante { max-width: 26ch; font-size: 1.8rem; text-wrap: balance; }
  .sw-bajada { max-width: 31ch; font-size: 1.6rem; line-height: 1.55; }
  .sw-meta { position: relative; max-width: 34ch; text-wrap: balance; margin-top: 2.6rem; padding-top: 2rem; font-size: 1.7rem; line-height: 1.35; color: var(--texto-70); }
  .sw-meta::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 2px; margin-left: -16px; background: #E5484D; }
}