/* ============================================================
   Lightwellworks — v2 sobre Brand System 01 / 2026
   Reparto 60/30/10 del manual: Ink y Paper construyen el espacio,
   Electric Iris organiza estructura, Signal Lime es la señal.
   Regla de accesibilidad que manda el manual y que aquí se respeta:
   texto largo siempre Paper sobre Ink; la lima NUNCA es texto pequeño
   sobre claro (contraste 1.09) — solo acción sobre Ink (15.76).
   ============================================================ */

:root{
  /* --- tokens de marca, tal cual brand-tokens.css --- */
  --lw-ink:#111319;
  --lw-paper:#F5F6F2;
  --lw-lime:#C8FF3D;
  --lw-violet:#5A49E8;
  --lw-coral:#FF6F61;
  --lw-mist:#DFE5E5;
  --lw-font-sans:"Manrope",system-ui,-apple-system,Arial,sans-serif;
  --lw-font-mono:"DM Mono","Courier New",monospace;
  --lw-radius-control:4px;
  --lw-radius-card:6px;
  --lw-content-max:1200px;
  --lw-motion-fast:180ms;
  --lw-motion-standard:520ms;
  --lw-ease:cubic-bezier(0.22,1,0.36,1);

  /* --- derivados de trabajo (nada inventado fuera del sistema) --- */
  --ink-2:#171A22;            /* Ink un punto arriba, para superficies */
  --ink-3:#1E222C;            /* bordes y campos */
  --line:rgba(245,246,242,.12);
  --text:var(--lw-paper);
  --text-soft:rgba(245,246,242,.72);
  --text-faint:rgba(245,246,242,.5);
  --iris-soft:rgba(90,73,232,.16);
}

@media (prefers-reduced-motion:reduce){
  :root{ --lw-motion-fast:0ms; --lw-motion-standard:0ms }
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--lw-ink);
  color:var(--text);
  font:400 17px/1.6 var(--lw-font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--lw-content-max); margin:0 auto; padding:0 28px}
section{padding:104px 0}
@media (max-width:820px){ section{padding:68px 0} body{font-size:16px} .wrap{padding:0 20px} }

/* --- tipografía: Manrope mueve ideas --- */
h1,h2,h3{margin:0; letter-spacing:-0.03em; line-height:1.05; font-weight:700}
h1{font-size:clamp(2.5rem,6.6vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.4vw,3rem)}
h3{font-size:1.14rem; line-height:1.25; letter-spacing:-0.015em; font-weight:600}
p{margin:0}
.lead{font-size:clamp(1.05rem,2vw,1.28rem); color:var(--text-soft); max-width:60ch; line-height:1.55}

/* --- DM Mono rotula sistemas: siempre en mayúsculas y con moderación --- */
.label{
  font-family:var(--lw-font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lw-lime);
  margin:0 0 18px; display:block;
}
.label.iris{color:#A79BFF}   /* iris puro no llega a AA sobre Ink; este es su tono legible */
.label.quiet{color:var(--text-faint)}

/* --- barra --- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(17,19,25,.82); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:28px; height:72px}
.brand{display:flex; align-items:center; text-decoration:none; flex:none}
/* Manual, p.11: minimo digital 120 px de ancho para el logotipo completo,
   16 px para el isotipo. A 30 px de alto el logotipo mide ~123 px: cumple.
   En movil el espacio es compacto, y ahi el manual manda usar el isotipo. */
.brand img{width:auto}
.brand .logo-full{height:30px}
.brand .logo-mark{height:28px; display:none}
.nav nav{margin-left:auto; display:flex; align-items:center; gap:30px}
.nav nav a:not(.btn){
  text-decoration:none; color:var(--text-soft); font-size:.93rem; font-weight:500;
  transition:color var(--lw-motion-fast) var(--lw-ease);
}
.nav nav a:not(.btn):hover{color:var(--lw-lime)}
@media (max-width:880px){ .nav nav > a:not(.btn){display:none} .nav .wrap{height:64px; gap:12px} }
@media (max-width:620px){ .brand .logo-full{display:none} .brand .logo-mark{display:block} }

/* --- botones: control de 4px, nada de píldoras --- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--lw-font-sans); font-weight:600; font-size:.98rem;
  padding:14px 24px; border-radius:var(--lw-radius-control); border:1px solid transparent;
  white-space:nowrap; cursor:pointer;
  transition:background var(--lw-motion-fast) var(--lw-ease),
             border-color var(--lw-motion-fast) var(--lw-ease),
             transform var(--lw-motion-fast) var(--lw-ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-lime{background:var(--lw-lime); color:var(--lw-ink)}      /* señal: 15.8:1 sobre Ink */
.btn-lime:hover{background:#D6FF6B}
.btn-line{border-color:var(--line); color:var(--text)}
.btn-line:hover{border-color:var(--lw-lime); color:var(--lw-lime)}
@media (max-width:560px){ .nav .btn{padding:10px 16px; font-size:.86rem} }

/* --- hero --- */
.hero{padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px); position:relative; overflow:hidden}
/* la luz que emerge del pozo: un solo gesto, no decoración constante */
.hero::before{
  content:""; position:absolute; top:-44%; left:46%; width:900px; height:900px; pointer-events:none;
  background:radial-gradient(circle, rgba(90,73,232,.30) 0%, rgba(90,73,232,.10) 38%, transparent 66%);
}
.hero .wrap{position:relative}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:44px} }
h1 .lime{color:var(--lw-lime)}
.hero .lead{margin-top:24px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero-meta{
  margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 26px;
  font-family:var(--lw-font-mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint);
}
.hero-meta span{display:inline-flex; align-items:center; gap:9px}
.tick{width:5px; height:5px; background:var(--lw-lime); flex:none}

/* maqueta de conversación: tecnología en uso, no clichés de circuitos */
.demo{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--lw-radius-card);
  padding:20px; width:min(340px,100%); margin-left:auto;
}
.demo-head{
  display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-family:var(--lw-font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint);
}
.demo-head .dotlive{width:7px; height:7px; border-radius:50%; background:var(--lw-lime)}
.demo-head time{margin-left:auto}
.chat{display:flex; flex-direction:column; gap:11px; padding-top:16px}
.msg{padding:11px 14px; border-radius:var(--lw-radius-card); font-size:.88rem; line-height:1.45; max-width:88%}
.msg.them{background:#22262F; color:var(--text)}
.msg.us{background:var(--iris-soft); border:1px solid rgba(167,155,255,.4); color:var(--text); align-self:flex-end}
.msg em{
  display:block; margin-top:6px; font-style:normal;
  font-family:var(--lw-font-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint);
}

/* --- franja de contraste (Paper: el manual pide alternar, no un túnel oscuro) --- */
.paper{background:var(--lw-paper); color:var(--lw-ink)}
.paper h2{color:var(--lw-ink)}
.paper .lead{color:#4A4E57}
.paper .label{color:var(--lw-violet)}   /* iris sobre paper: 5.45:1, el único acento válido en claro */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; border-top:1px solid rgba(17,19,25,.14)}
@media (max-width:820px){ .facts{grid-template-columns:1fr} }
.fact{padding:30px 28px 30px 0; border-right:1px solid rgba(17,19,25,.14)}
.fact:last-child{border-right:0}
@media (max-width:820px){ .fact{border-right:0; border-bottom:1px solid rgba(17,19,25,.14); padding-right:0} .fact:last-child{border-bottom:0} }
.fact .n{
  font-family:var(--lw-font-mono); font-size:2.1rem; font-weight:500; line-height:1;
  color:var(--lw-violet); margin-bottom:14px; letter-spacing:-.02em;
}
.fact p{color:#4A4E57; font-size:.98rem}

/* --- capas --- */
.layers{display:grid; gap:1px; margin-top:52px; background:var(--line); border:1px solid var(--line)}
.layer{
  display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:start;
  background:var(--lw-ink); padding:34px 32px;
  transition:background var(--lw-motion-fast) var(--lw-ease);
}
.layer:hover{background:var(--ink-2)}
@media (max-width:880px){ .layer{grid-template-columns:auto 1fr; gap:20px; padding:26px 22px} .layer .when{grid-column:2} }
.layer .num{
  font-family:var(--lw-font-mono); font-size:.86rem; font-weight:500; color:var(--lw-lime);
  padding-top:3px; letter-spacing:.06em;
}
.layer p{color:var(--text-soft); margin-top:11px}
.layer ul{margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.layer li{
  font-family:var(--lw-font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); border:1px solid var(--line); border-radius:var(--lw-radius-control); padding:6px 11px;
}
.when{
  font-family:var(--lw-font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); white-space:nowrap; padding-top:5px;
}

/* --- bloque iris: estructura, el 30% --- */
.iris{background:linear-gradient(150deg,#2A2199 0%, #5A49E8 58%, #6E5EF0 100%); color:var(--lw-paper)}
.iris .label{color:var(--lw-lime)}
.iris .lead{color:rgba(245,246,242,.86)}
.proof{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:52px; background:rgba(245,246,242,.22)}
@media (max-width:820px){ .proof{grid-template-columns:1fr} }
.proof > div{background:#3B2FC4; padding:30px}
.proof h3{color:var(--lw-paper)}
.proof p{color:rgba(245,246,242,.84); margin-top:10px; font-size:.97rem}
.iris-foot{margin-top:46px; display:flex; flex-wrap:wrap; gap:18px; align-items:center}
.iris-foot p{color:rgba(245,246,242,.84); font-size:.95rem; max-width:48ch}

/* --- trabajo --- */
.work{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
@media (max-width:900px){ .work{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .work{grid-template-columns:1fr} }
.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--lw-radius-card); overflow:hidden;
  transition:border-color var(--lw-motion-fast) var(--lw-ease), transform var(--lw-motion-fast) var(--lw-ease);
}
.card:hover{border-color:var(--lw-lime); transform:translateY(-3px)}
.card img{aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1px solid var(--line)}
.card .body{padding:22px}
.card h3{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card p{color:var(--text-soft); font-size:.95rem; margin-top:9px}
.card .go{
  display:inline-block; margin-top:16px; text-decoration:none; color:var(--lw-lime);
  font-family:var(--lw-font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
}
.card .go:hover{text-decoration:underline}
.own{
  font-family:var(--lw-font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lw-ink); background:var(--lw-lime); padding:3px 8px; border-radius:var(--lw-radius-control);
}

/* --- proceso --- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.step{border-top:1px solid var(--line); padding-top:22px}
.step .k{
  font-family:var(--lw-font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lw-lime); display:block; margin-bottom:16px;
}
.step p{color:var(--text-soft); font-size:.95rem; margin-top:10px}
.step .when{display:block; margin-top:14px; padding:0}

/* --- quién --- */
.who{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media (max-width:880px){ .who{grid-template-columns:1fr; gap:32px} }
.who-card{border:1px solid var(--line); border-radius:var(--lw-radius-card); padding:34px; background:var(--ink-2)}
.who-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.who-list li{display:flex; gap:13px; align-items:flex-start; color:var(--text-soft); font-size:.97rem}
.who-list .tick{margin-top:9px}

/* --- contacto --- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr; gap:32px} }
.contact-side p{color:var(--text-soft); margin-top:16px}
.contact-side .direct{margin-top:26px; display:grid; gap:8px}
.contact-side .direct a{
  color:var(--lw-lime); text-decoration:none; font-family:var(--lw-font-mono);
  font-size:.92rem; letter-spacing:.04em;
}
.contact-side .direct a:hover{text-decoration:underline}
.legal{
  margin-top:28px; font-family:var(--lw-font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); line-height:1.7;
}
.form{border:1px solid var(--line); border-radius:var(--lw-radius-card); padding:32px; background:var(--ink-2)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){ .row{grid-template-columns:1fr} }
.field{margin-bottom:18px}
label{
  display:block; font-family:var(--lw-font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:9px;
}
input,select,textarea{
  width:100%; padding:13px 14px; font:400 .98rem var(--lw-font-sans); color:var(--text);
  background:var(--lw-ink); border:1px solid var(--ink-3); border-radius:var(--lw-radius-control);
  transition:border-color var(--lw-motion-fast) var(--lw-ease);
}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lw-lime); outline-offset:1px; border-color:transparent}
textarea{min-height:140px; resize:vertical}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* --- pie --- */
footer{border-top:1px solid var(--line); padding:44px 0}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center;
  font-family:var(--lw-font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint)}
footer a{color:var(--text-soft); text-decoration:none}
footer a:hover{color:var(--lw-lime)}
footer .right{margin-left:auto}
.tagline{color:var(--lw-lime)}

/* --- selector de idioma: DM Mono rotula, y se queda visible en movil
       porque es justo donde Arturo manda el enlace por WhatsApp --- */
/* Se ven SIEMPRE los dos idiomas: el activo marcado, el otro como enlace.
   Con uno solo nadie se entera de que el sitio es bilingüe. */
.langs{
  display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--lw-radius-control);
  font-family:var(--lw-font-mono); font-size:.72rem; font-weight:500; letter-spacing:.12em;
  line-height:1;
}
.langs span,.langs a{padding:8px 10px; text-decoration:none}
.langs .on{background:var(--lw-lime); color:var(--lw-ink)}
.langs a{
  color:var(--text-soft);
  transition:color var(--lw-motion-fast) var(--lw-ease), background var(--lw-motion-fast) var(--lw-ease);
}
.langs a:hover{color:var(--lw-lime); background:rgba(200,255,61,.08)}

/* aviso de idiomas en el bloque de contacto */
.idiomas{
  margin-top:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.9rem; color:var(--text-soft);
}
.idiomas span{
  font-family:var(--lw-font-mono); font-size:.66rem; letter-spacing:.12em;
  color:var(--lw-lime); border:1px solid var(--line);
  border-radius:var(--lw-radius-control); padding:4px 8px;
}
@media (max-width:880px){ .nav nav{gap:12px} }
@media (max-width:420px){ .langs{font-size:.66rem} .langs span,.langs a{padding:7px 8px} }

/* --- muestra de identidad del hero: lo que se entrega en diseño gráfico,
       dibujado con CSS para no depender de una foto de archivo --- */
.pieza{
  margin-left:auto; font-family:var(--lw-font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.kit{padding-top:18px; display:grid; gap:16px}
.kit-mark{
  width:46px; height:46px; border-radius:50%; border:2px solid var(--lw-lime);
  background:radial-gradient(circle at 50% 42%, var(--lw-lime) 0 24%, transparent 25%);
}
.kit-type{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding-bottom:14px}
.kit-type b{font-size:2rem; font-weight:700; letter-spacing:-.04em; line-height:1}
.kit-type span{color:var(--text-faint); font-size:.82rem; line-height:1.3}
.kit-swatches{display:flex; gap:8px}
.kit-swatches i{width:40px; height:40px; border-radius:var(--lw-radius-control); border:1px solid var(--line)}
.kit-items{display:flex; flex-wrap:wrap; gap:7px}
.kit-items span{
  font-family:var(--lw-font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); border:1px solid var(--line); border-radius:var(--lw-radius-control); padding:5px 10px;
}

/* --- aviso de envío: la persona tiene que VER que su mensaje salió --- */
.aviso{
  border-radius:var(--lw-radius-card); padding:16px 18px; margin-bottom:20px;
  font-size:.96rem; line-height:1.5; scroll-margin-top:90px;
}
.aviso b{display:block; margin-bottom:4px}
.aviso-ok{background:rgba(200,255,61,.12); border:1px solid var(--lw-lime); color:var(--text)}
.aviso-ok b{color:var(--lw-lime)}
.aviso-mal{background:rgba(255,111,97,.12); border:1px solid var(--lw-coral); color:var(--text)}
.aviso-mal b{color:var(--lw-coral)}

/* --- los dos idiomas --- */
.dual{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
@media (max-width:880px){ .dual{grid-template-columns:1fr; gap:32px} }
.dual-card{border:1px solid rgba(17,19,25,.16); border-radius:var(--lw-radius-card); overflow:hidden}
.dual-row{display:grid; grid-template-columns:64px 1fr; gap:16px; padding:18px 20px; border-bottom:1px solid rgba(17,19,25,.12)}
.dual-row:last-child{border-bottom:0}
.dual-row span{
  font-family:var(--lw-font-mono); font-size:.72rem; font-weight:500; letter-spacing:.12em;
  color:var(--lw-violet); padding-top:3px;
}
.dual-row p{color:#4A4E57; font-size:.95rem; line-height:1.5}

/* --- revisión gratuita --- */
.revision{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
  border:1px solid var(--lw-lime); border-radius:var(--lw-radius-card);
  padding:44px; background:linear-gradient(140deg, rgba(200,255,61,.07), transparent 62%);
}
@media (max-width:880px){ .revision{grid-template-columns:1fr; gap:30px; padding:28px 24px} }
.revision .btn{margin-top:28px}
.revision-nota{
  margin-top:14px; font-family:var(--lw-font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint);
}
.revision-lista{list-style:none; margin:0; padding:0; display:grid; gap:0}
.revision-lista li{
  color:var(--text-soft); font-size:.96rem; line-height:1.5;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.revision-lista li:last-child{border-bottom:0}
.revision-lista b{display:block; color:var(--text); font-weight:600; margin-bottom:3px}

/* --- WhatsApp: el canal por el que de verdad escriben los clientes --- */
.wa-flota{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--lw-lime); color:var(--lw-ink); text-decoration:none;
  font-family:var(--lw-font-sans); font-weight:650; font-size:.94rem;
  padding:13px 18px; border-radius:var(--lw-radius-control);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
  transition:transform var(--lw-motion-fast) var(--lw-ease), background var(--lw-motion-fast) var(--lw-ease);
}
.wa-flota:hover{transform:translateY(-2px); background:#D6FF6B}
.wa-flota svg{flex:none}
/* en el teléfono manda el pulgar: circulo, sin texto, y lejos del borde */
@media (max-width:640px){
  .wa-flota{right:14px; bottom:14px; padding:0; width:54px; height:54px; border-radius:50%; justify-content:center}
  .wa-flota span{display:none}
}
.wa-inline{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--lw-lime); text-decoration:none;
  font-family:var(--lw-font-mono); font-size:.92rem; letter-spacing:.04em;
}
.wa-inline:hover{text-decoration:underline}
.wa-inline svg{width:18px; height:18px}

/* --- Jerarquía también aquí: el cliente real que está en vivo manda.
       Tres tarjetas iguales leen como plantilla (ver skill sitios-no-genericos). --- */
@media (min-width:901px){
  .work{grid-template-columns:repeat(2,1fr)}
  .card.principal{grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch}
  .card.principal img{aspect-ratio:auto; height:100%; border-bottom:0; border-right:1px solid var(--line)}
  .card.principal .body{padding:34px; display:flex; flex-direction:column; justify-content:center}
  .card.principal h3{font-size:1.5rem; letter-spacing:-.03em}
  .card.principal p{font-size:1rem}
}
/* enlace al portafolio, al final de la sección de trabajo */
.mas-trabajo{
  margin-top:30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line);
}
.mas-trabajo p{color:var(--text-soft); font-size:.95rem; max-width:46ch}