*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.smooth { scroll-behavior: smooth; } /* la pone MOTION_JS 500 ms después del load: refrescar o abrir con #ancla salta directo */
body {
  margin: 0; background: var(--dio-bg); color: var(--dio-text);
  font: var(--dio-weight-text) var(--dio-text-md)/var(--dio-leading-body) var(--dio-font-text);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dio-link); text-underline-offset: 0.18em; }
a:hover { color: var(--dio-link-hover); }
:focus-visible { outline: 3px solid var(--dio-focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--dio-font-display); font-weight: var(--dio-weight-display); letter-spacing: var(--dio-tracking-display); line-height: var(--dio-leading-tight); margin: 0 0 var(--dio-space-4); text-wrap: balance; }
h1 { font-size: var(--dio-h1); }
h2 { font-size: var(--dio-h2); }
h3 { font-size: var(--dio-h4); line-height: var(--dio-leading-snug); }
p { margin: 0 0 var(--dio-space-4); }
code { font-family: var(--dio-font-mono); font-size: 0.9em; background: var(--dio-surface-2); padding: 0 0.3em; border-radius: 4px; }
.wrap { width: min(100% - 2rem, var(--dio-container)); margin-inline: auto; }
.muted { color: var(--dio-text-muted); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--dio-surface); padding: 0.5rem 1rem; }
/* la barra es amarilla en los dos temas, así que su texto no puede heredar el color del tema:
   en oscuro el enlace salía casi blanco sobre amarillo (1,5:1) */
.promo-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--dio-space-3); background: var(--dio-amarillo); color: var(--dio-petroleo-950); padding: 0.55rem 3rem; }
.promo-bar__link { color: var(--dio-petroleo-950) !important; text-decoration: none; font-size: var(--dio-text-sm); font-weight: 600; line-height: var(--dio-leading-snug); text-align: center; }
.promo-bar__link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.promo-bar__link span { display: inline-block; transition: transform var(--dio-dur) var(--dio-ease); }
.promo-bar__link:hover span { transform: translateX(3px); }
.promo-bar__x { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: transparent; color: var(--dio-petroleo-950); cursor: pointer; transition: background var(--dio-dur) var(--dio-ease); }
.promo-bar__x:hover { background: color-mix(in srgb, var(--dio-petroleo-950) 14%, transparent); }
.promo-bar__x svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.promo-off .promo-bar { display: none; }
@media (max-width: 40rem) { .promo-bar { padding: 0.5rem 2.6rem 0.5rem 0.9rem; } .promo-bar__link { font-size: var(--dio-text-xs); text-align: left; } }

/* Cabecera */
.site-header { position: sticky; top: 0; z-index: 5; background: var(--dio-surface); border-bottom: 1px solid var(--dio-border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--dio-space-4); min-height: 4rem; flex-wrap: wrap; }
.brand img { width: 170px; height: auto; }
.nav-btn { cursor: pointer; font-weight: 600; padding: 0.5rem 0.9rem; border: 1px solid var(--dio-border-input); border-radius: var(--dio-radius-pill); }
.nav { display: none; width: 100%; padding-bottom: var(--dio-space-4); }
.nav-open:checked ~ .nav { display: block; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dio-space-2); }
.menu a, .menu .has-sub > span { color: var(--dio-text); text-decoration: none; font-weight: 600; display: inline-block; padding: 0.35rem 0; }
.menu a[aria-current] { color: var(--dio-link); text-decoration: underline; text-decoration-thickness: 2px; }
.menu .has-sub ul { list-style: none; padding-left: var(--dio-space-4); margin: 0; }
.menu .has-sub ul a { font-weight: 400; }
.lang { display: flex; gap: var(--dio-space-2); margin: var(--dio-space-4) 0; }
.lang a { font-size: var(--dio-text-sm); font-weight: 600; text-decoration: none; color: var(--dio-text-muted); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-sm); padding: 0.15rem 0.5rem; }
.lang a[aria-current] { color: var(--dio-on-accent); background: var(--dio-accent); border-color: var(--dio-accent); }

@media (min-width: 72rem) {
  .site-header .wrap { flex-wrap: nowrap; }
  .menu a, .menu .has-sub > span, .btn--sm { white-space: nowrap; }
  .menu { font-size: var(--dio-text-sm); }
  .nav-btn { display: none; }
  .nav { display: flex; align-items: center; gap: var(--dio-space-4); width: auto; padding: 0; }
  .menu { display: flex; gap: var(--dio-space-4); }
  .menu .has-sub { position: relative; }
  .menu .has-sub > span { cursor: default; }
  .menu .has-sub > span::after { content: " ▾"; font-size: 0.8em; color: var(--dio-text-muted); }
  .menu .has-sub.is-active > span { color: var(--dio-link); }
  .menu .has-sub ul { display: none; position: absolute; top: 100%; left: -1rem; min-width: 15rem; padding: var(--dio-space-3) var(--dio-space-4); background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-md); box-shadow: var(--dio-shadow-md); }
  .menu .has-sub:hover ul, .menu .has-sub:focus-within ul { display: block; }
  .lang { margin: 0; }
}

.menu .sep { height: 1px; background: var(--dio-border); margin: var(--dio-space-2) 0; }

/* Migas */
/* Migas (refactor 20/09, investigación de NN/g + WAI-ARIA APG + Google + Stripe/Apple/MDN):
   viven dentro del hero, pegadas al título, como hacen hoy los sitios de referencia. Antes
   eran una franja propia a 81 px del H1, compitiendo con el eyebrow. Arreglado de paso:
   el hover no hacía nada (.crumbs a le ganaba a a:hover), el área de toque medía 17 px
   (WCAG 2.5.8 pide 24), la página actual no se distinguía de los enlaces y el separador era
   texto de verdad que el lector de pantalla leía en voz alta. */
.crumbs { font-size: var(--dio-text-xs); margin-bottom: var(--dio-space-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--dio-space-2); color: var(--dio-text-muted); }
/* El «/ ""» le da texto alternativo vacío: se ve, no se escucha (patrón APG) */
.crumbs li + li::before { content: "›" / ""; margin-right: var(--dio-space-2); color: var(--dio-border-input); }
/* El enlace es una pastilla: el área de toque se ve al pasar el mouse, en vez de un subrayado
   suelto (Juan, 20/09). Los márgenes negativos compensan el padding para que el texto no se
   corra de la línea del H1. */
.crumbs a { color: var(--dio-text-muted); text-decoration: none; border-radius: var(--dio-radius-pill); padding: 0.3rem 0.55rem; margin: -0.3rem -0.2rem; transition: background var(--dio-dur) var(--dio-ease), color var(--dio-dur) var(--dio-ease); }
.crumbs a:hover { background: var(--dio-surface-2); color: var(--dio-text); text-decoration: none; }
.crumbs a:first-child { margin-left: -0.55rem; }
.crumbs [aria-current="page"] { color: var(--dio-text); font-weight: 600; }

/* WhatsApp fijo en móvil (ficha 00 §4.1) */
.wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 6; background: var(--dio-verde-700); color: var(--dio-blanco); font-weight: 700; text-decoration: none; padding: 0.7rem 1.1rem; border-radius: var(--dio-radius-pill); box-shadow: var(--dio-shadow-lg); }
.wa-float:hover { color: var(--dio-blanco); background: var(--dio-verde-800); }
@media (min-width: 72rem) { .wa-float { display: none; } }

/* Botones */
.btn { display: inline-block; background: var(--dio-accent); color: var(--dio-on-accent); font-weight: 700; text-decoration: none; padding: 0.8rem 1.4rem; border-radius: var(--dio-radius-pill); border: 2px solid var(--dio-accent); transition: background var(--dio-dur) var(--dio-ease); }
.btn:hover { background: var(--dio-accent-hover); color: var(--dio-on-accent); }
.btn--ghost { background: transparent; color: var(--dio-accent); }
.btn--ghost:hover { background: var(--dio-surface-2); color: var(--dio-accent); }
.btn--sm { padding: 0.45rem 1rem; font-size: var(--dio-text-sm); }

/* Hero */
.hero { padding: var(--dio-space-8) 0 var(--dio-space-7); background: var(--dio-surface); border-bottom: 1px solid var(--dio-border); }
.hero--art .wrap { display: grid; gap: var(--dio-space-6); align-items: center; }
@media (min-width: 56rem) { .hero--art .wrap { grid-template-columns: 1.5fr 1fr; } }
.hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.4rem); }
.hero__art img { width: 100%; max-width: 30rem; margin-inline: auto; }
.lead { font-size: var(--dio-text-lg); color: var(--dio-text-muted); max-width: var(--dio-container-text); }
.lead strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-h3); line-height: var(--dio-leading-tight); color: var(--dio-text); margin-bottom: var(--dio-space-2); }
.price { font-family: var(--dio-font-display); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--dio-space-5); margin: var(--dio-space-5) 0; }
.cta small { display: block; margin-top: var(--dio-space-2); max-width: 20rem; color: var(--dio-text-muted); font-size: var(--dio-text-xs); }
.proof { font-weight: 600; color: var(--dio-petroleo-600); border-left: 3px solid var(--dio-verde-marca); padding-left: var(--dio-space-3); }

/* Secciones */
.section { padding: var(--dio-space-8) 0; }
.section:nth-of-type(even) { background: var(--dio-surface); }
.section > .wrap > h2 { max-width: 48rem; }
.intro { max-width: var(--dio-container-text); color: var(--dio-text-muted); font-size: var(--dio-text-lg); }
.note { font-size: var(--dio-text-sm); color: var(--dio-text-muted); margin-top: var(--dio-space-5); }
.section--dark { background: var(--dio-petroleo) !important; color: var(--dio-niebla); }
.section--dark h2 { color: var(--dio-blanco); }
.section--dark .intro, .section--dark .note { color: var(--dio-niebla-dark); }
.section--dark .btn { background: var(--dio-amarillo); color: var(--dio-tinta); border-color: var(--dio-amarillo); }
.section--dark a:not(.btn) { color: var(--dio-verde-300); }

.grid { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--dio-space-6); }
.card { background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-lg); padding: var(--dio-space-5); box-shadow: var(--dio-shadow-sm); }
.section:nth-of-type(even) .card { background: var(--dio-bg); }
.card h3 a { color: inherit; text-decoration-color: var(--dio-verde-marca); }
.card__img { border-radius: var(--dio-radius-md); margin: calc(var(--dio-space-2) * -1) 0 var(--dio-space-4); border: 1px solid var(--dio-border); max-height: 22rem; object-fit: cover; object-position: top; width: 100%; }
.card__text { color: var(--dio-text-muted); }
.card__meta { font-family: var(--dio-font-display); font-weight: 600; color: var(--dio-petroleo-600); margin: 0; }
.badge { display: inline-block; font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; background: var(--dio-verde-100); color: var(--dio-verde-800); border-radius: var(--dio-radius-pill); padding: 0.1rem 0.6rem; margin-bottom: var(--dio-space-3); }
.card--proof .card__text { font-style: italic; color: var(--dio-text); }

.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--dio-space-6) 0 0; display: grid; gap: var(--dio-space-4); }
.steps li { counter-increment: s; position: relative; padding: var(--dio-space-4) var(--dio-space-5) var(--dio-space-4) 4.5rem; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-lg); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: var(--dio-space-5); top: var(--dio-space-4); font-family: var(--dio-font-display); font-weight: 800; color: var(--dio-verde-700); font-size: var(--dio-text-lg); }
.steps h3 { margin-bottom: var(--dio-space-2); }
.steps p { color: var(--dio-text-muted); }

.faq { margin-top: var(--dio-space-6); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--dio-border); padding: var(--dio-space-4) 0; }
.faq summary { cursor: pointer; font-family: var(--dio-font-display); font-weight: 600; font-size: var(--dio-text-lg); }
.faq details p { margin: var(--dio-space-3) 0 0; color: var(--dio-text-muted); }

.list { max-width: 52rem; padding-left: 1.2rem; }
.list li { margin-bottom: var(--dio-space-3); }

.table-wrap { overflow-x: auto; margin-top: var(--dio-space-6); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-lg); background: var(--dio-surface);
  /* Sombra en el borde que se desvanece al llegar al final: avisa que hay más tabla a los
     lados, que en celular no se ve de otro modo. `local` la ata al contenido, `scroll` al marco. */
  background-image: linear-gradient(to right, var(--dio-surface), transparent 2.5rem),
                    linear-gradient(to left, var(--dio-surface), transparent 2.5rem),
                    linear-gradient(to right, rgba(1,32,33,.14), transparent 1rem),
                    linear-gradient(to left, rgba(1,32,33,.14), transparent 1rem);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
  background-attachment: local, local, scroll, scroll; }
table { border-collapse: collapse; width: 100%; min-width: 36rem; }
th, td { text-align: left; padding: var(--dio-space-3) var(--dio-space-4); border-bottom: 1px solid var(--dio-border); vertical-align: top; }
th { font-family: var(--dio-font-display); font-size: var(--dio-text-sm); background: var(--dio-surface-2); }
tr:last-child td { border-bottom: 0; }

.form-stub { margin-top: var(--dio-space-6); border: 2px dashed var(--dio-border-input); border-radius: var(--dio-radius-lg); padding: var(--dio-space-5) var(--dio-space-6); background: var(--dio-surface); max-width: 40rem; }
.form-stub ol { margin: 0; padding-left: 1.2rem; }
.form-stub li { margin-bottom: var(--dio-space-2); font-weight: 600; }

.todo { margin-top: var(--dio-space-5); font-size: var(--dio-text-sm); background: var(--dio-amarillo-100); color: var(--dio-amarillo-900); border: 1px solid var(--dio-amarillo-400); border-radius: var(--dio-radius-md); padding: var(--dio-space-2) var(--dio-space-3); max-width: 52rem; }
.todo span { font-weight: 800; text-transform: uppercase; letter-spacing: var(--dio-tracking-caps); margin-right: 0.3rem; }

/* Pie v2 */
.site-footer { background: var(--dio-petroleo-950); color: rgba(243,246,244,.72); padding: var(--dio-space-8) 0 calc(var(--dio-space-6) + 3.5rem); font-size: var(--dio-text-sm); }
@media (min-width: 72rem) { .site-footer { padding-bottom: var(--dio-space-6); } }
.site-footer a { color: rgba(243,246,244,.86); text-decoration: none; transition: color var(--dio-dur) var(--dio-ease); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.foot-top { display: grid; gap: var(--dio-space-6) var(--dio-space-4); grid-template-columns: 1.6fr 1fr; padding-bottom: var(--dio-space-7); border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 64rem) { .foot-top { grid-template-columns: 1.6fr repeat(3, 1fr) 1.4fr; } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 64rem) { .foot-brand { grid-column: auto; } }
.foot-brand img { width: 170px; margin-bottom: var(--dio-space-4); }
.foot-brand p { max-width: 28ch; color: rgba(243,246,244,.72); line-height: var(--dio-leading-snug); }
.foot-social { display: flex; flex-wrap: wrap; gap: var(--dio-space-2); margin-top: var(--dio-space-4); }
.foot-social a { font-size: var(--dio-text-xs); font-weight: 700; border: 1px solid rgba(255,255,255,.18); border-radius: var(--dio-radius-pill); padding: 0.3rem 0.8rem; }
.foot-social a:hover { background: rgba(255,255,255,.08); text-decoration: none; border-color: rgba(255,255,255,.35); }
.foot-col h2 { font-size: var(--dio-text-xs); letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-amarillo); margin: 0 0 var(--dio-space-4); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dio-space-3); }
.foot-contact small { display: block; margin-top: 0.25rem; font-size: var(--dio-text-xs); color: rgba(243,246,244,.55); line-height: var(--dio-leading-snug); }
.foot-wa { font-weight: 700; color: #fff !important; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--dio-space-4); padding-top: var(--dio-space-5); font-size: var(--dio-text-xs); color: rgba(243,246,244,.5); }
.foot-bottom p { margin: 0; line-height: var(--dio-leading-body); }
.foot-bottom span { color: rgba(243,246,244,.42); }
.foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-space-5); }
.foot-legal { display: flex; gap: var(--dio-space-4); }
.foot-lang { display: flex; gap: 0.35rem; }
.foot-lang a { font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--dio-radius-sm); border: 1px solid rgba(255,255,255,.14); color: rgba(243,246,244,.7); }
.foot-lang a[aria-current] { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-tinta); }
.foot-lang a:hover { text-decoration: none; }

/* Fotos de persona (avatar de Juan, Vitto): retrato completo, no recorte de captura */
.card:has(.card__img[src*="avatar"]), .card:has(.card__img[src*="vitto"]) { display: grid; grid-template-columns: 9rem 1fr; gap: 0 var(--dio-space-5); align-items: start; }
.card:has(.card__img[src*="avatar"]) > :not(img), .card:has(.card__img[src*="vitto"]) > :not(img) { grid-column: 2; }
.card__img[src*="avatar"], .card__img[src*="vitto"] { grid-row: 1 / span 4; width: 9rem; height: 9rem; max-height: none; object-fit: cover; object-position: center 20%; border-radius: 50%; margin: 0; background: var(--dio-petroleo-100); }
@media (max-width: 30rem) {
  .card:has(.card__img[src*="avatar"]), .card:has(.card__img[src*="vitto"]) { grid-template-columns: 1fr; }
  .card:has(.card__img[src*="avatar"]) > *, .card:has(.card__img[src*="vitto"]) > * { grid-column: 1 !important; }
  .card__img[src*="avatar"], .card__img[src*="vitto"] { grid-row: auto; margin-bottom: var(--dio-space-4); }
}
.proof { max-width: 44rem; }
.stats { list-style: none; margin: var(--dio-space-6) 0 0; padding: var(--dio-space-4) 0 0; border-top: 1px solid var(--dio-border); display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--dio-space-4); max-width: 44rem; }
.stats li { font-size: var(--dio-text-sm); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); border-left: 3px solid var(--dio-verde); padding-left: var(--dio-space-3); }
.stats strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-h3); font-weight: 700; color: var(--dio-text); line-height: 1.1; }

/* Tarjetas de servicio (home) */
.services { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: var(--dio-space-6); }
.svc { position: relative; display: flex; flex-direction: column; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-xl); padding: var(--dio-space-5) var(--dio-space-6) var(--dio-space-6); box-shadow: var(--dio-shadow-sm); transition: box-shadow var(--dio-dur) var(--dio-ease), transform var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.svc:hover { box-shadow: var(--dio-shadow-lg); transform: translateY(-3px); border-color: var(--dio-petroleo-300); }
.section:nth-of-type(even) .svc { background: var(--dio-bg); }
.svc__art { display: block; margin: 0 auto var(--dio-space-3); }
.svc__art img { width: 9.5rem; height: 9.5rem; object-fit: contain; }
.svc__title { font-size: var(--dio-h4); margin-bottom: var(--dio-space-2); }
.svc__text { color: var(--dio-text-muted); line-height: var(--dio-leading-snug); min-height: 3.9em; }
.svc__list { list-style: none; padding: 0; margin: var(--dio-space-2) 0 var(--dio-space-5); display: grid; gap: var(--dio-space-2); font-size: var(--dio-text-sm); }
.svc__list li { position: relative; padding-left: 1.6rem; }
.svc__list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.6rem; height: 0.6rem; background: var(--dio-verde-marca); transform: rotate(45deg); border-radius: 2px; }
.svc__price { margin-top: auto; padding-top: var(--dio-space-4); border-top: 1px dashed var(--dio-border-input); display: flex; flex-direction: column; gap: 0.15rem; }
.svc__price span:first-child { grid-column: 1 / -1; font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-text-muted); }
.svc__price strong { white-space: nowrap; font-family: var(--dio-font-display); font-size: var(--dio-h3); font-weight: 800; letter-spacing: var(--dio-tracking-display); color: var(--dio-text); line-height: 1.1; }
.svc__price span:last-child { color: var(--dio-text-muted); font-size: var(--dio-text-sm); }
.svc__link { margin-top: var(--dio-space-4); font-weight: 700; text-decoration: none; color: var(--dio-petroleo); }
.svc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc__link span { display: inline-block; transition: transform var(--dio-dur) var(--dio-ease); }
.svc:hover .svc__link span { transform: translateX(4px); }

.section--services .note { text-align: start; }
.section--services > .wrap > p:has(.btn) { text-align: center; }

.section--services > .wrap > p:has(.btn) .btn { background: transparent; color: var(--dio-accent); }
.section--services > .wrap > p:has(.btn) .btn:hover { background: var(--dio-surface-2); }

/* Para quem (segmentos por situación) */
.segments { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: var(--dio-space-6); }
.seg { position: relative; display: flex; flex-direction: column; background: var(--dio-surface); border: 1px solid var(--dio-border); border-top: 4px solid var(--dio-verde); border-radius: var(--dio-radius-lg); padding: var(--dio-space-5) var(--dio-space-6) var(--dio-space-6); transition: box-shadow var(--dio-dur) var(--dio-ease), transform var(--dio-dur) var(--dio-ease); }
.seg:hover { box-shadow: var(--dio-shadow-lg); transform: translateY(-3px); }
.seg__who { font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-verde-700); margin-bottom: var(--dio-space-3); }
.seg__title { font-size: var(--dio-text-lg); line-height: var(--dio-leading-snug); }
.seg__text { color: var(--dio-text-muted); }

.seg .svc__link { margin-top: var(--dio-space-3); }
.seg:hover .svc__link span { transform: translateX(4px); }

/* Simetría: las 5 filas de cada tarjeta alineadas entre tarjetas (subgrid) */
@media (min-width: 60rem) {
  .segments { grid-template-columns: repeat(3, 1fr); }
  .seg { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
}
.seg__proof { margin-top: auto; align-self: end; padding: var(--dio-space-4); background: var(--dio-bg); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-md); }
.section:nth-of-type(even) .seg__proof { background: var(--dio-surface); }
.seg__client { margin: 0 0 var(--dio-space-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--dio-space-3); }
.seg__client strong { font-family: var(--dio-font-display); font-size: var(--dio-text-lg); color: var(--dio-text); }
.seg__place { font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-text-muted); }
.seg__place::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; background: var(--dio-amarillo); transform: rotate(45deg) translateY(-1px); border-radius: 1px; }
.seg__fact { margin: 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.seg .svc__link { align-self: end; margin-top: var(--dio-space-4); }
.seg__text { margin-bottom: var(--dio-space-4); }
.seg__client { display: block; }
.seg__client strong, .seg__place { display: block; }
.seg__place { margin-top: 0.15rem; }
@media (min-width: 60rem) { .seg__proof { align-self: stretch; } }

/* Como trabalhamos: línea de tiempo de 4 pasos */
.process { list-style: none; margin: var(--dio-space-6) 0 0; padding: 0; display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); position: relative; }
.step { position: relative; display: flex; flex-direction: column; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-lg); padding: var(--dio-space-5); }
.section:nth-of-type(even) .step { background: var(--dio-bg); }
.step__n { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dio-petroleo); color: var(--dio-amarillo); font-family: var(--dio-font-display); font-weight: 800; margin-bottom: var(--dio-space-4); position: relative; z-index: 1; }
.step h3 { font-size: var(--dio-text-lg); margin-bottom: var(--dio-space-2); }
.step p { color: var(--dio-text-muted); font-size: var(--dio-text-sm); }
.step__get { margin: auto 0 0; padding-top: var(--dio-space-3); border-top: 1px dashed var(--dio-border-input); color: var(--dio-text) !important; font-weight: 600; }
.step__get span { display: block; font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-verde-700); margin-bottom: 0.15rem; }
@media (min-width: 64rem) {
  .process { grid-template-columns: repeat(4, 1fr); }
  .process::before { content: ""; position: absolute; top: calc(var(--dio-space-5) + 1.3rem); left: 3rem; right: 3rem; border-top: 2px dashed var(--dio-petroleo-300); }
}
.section--process .note { font-weight: 600; color: var(--dio-text); }
@media (min-width: 64rem) { .step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } .step__n { justify-self: start; } .step__get { align-self: end; } }

/* Clientes que confiam (sitios en vivo + testimonios) */
.clients { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: var(--dio-space-6); }
.cli { position: relative; display: flex; flex-direction: column; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-lg); overflow: hidden; transition: box-shadow var(--dio-dur) var(--dio-ease), transform var(--dio-dur) var(--dio-ease); }
.cli:hover { box-shadow: var(--dio-shadow-lg); transform: translateY(-3px); }
.cli > :not(.cli__shot) { margin-left: var(--dio-space-5); margin-right: var(--dio-space-5); }
.cli__shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--dio-border); }
.cli__quote { margin-top: var(--dio-space-4); margin-bottom: var(--dio-space-3); }
.cli__quote p { margin: 0; font-style: italic; color: var(--dio-text); font-size: var(--dio-text-sm); line-height: var(--dio-leading-body); }
.cli__quote footer { margin-top: var(--dio-space-2); font-size: var(--dio-text-xs); color: var(--dio-text-muted); }
.cli__quote footer::before { content: "— "; }
.cli__fact { margin-top: var(--dio-space-4); font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.cli__name { margin-top: auto; padding-top: var(--dio-space-3); border-top: 1px dashed var(--dio-border-input); }
.cli__name strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-text-lg); }
.cli .seg__place { display: block; margin-top: 0.15rem; }
.cli .svc__link { margin-top: var(--dio-space-3); margin-bottom: var(--dio-space-5); }
.cli:hover .svc__link span { transform: translate(2px, -2px); }
@media (min-width: 64rem) {
  .clients { grid-template-columns: repeat(4, 1fr); }
  .cli { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}

/* Caso destacado (storytelling + capturas) */
.case { display: grid; gap: var(--dio-space-7); margin-top: var(--dio-space-6); align-items: center; }
@media (min-width: 64rem) { .case { grid-template-columns: 1fr 1.15fr; } }
.case__ch { position: relative; padding-left: var(--dio-space-5); border-left: 2px solid var(--dio-border); padding-bottom: var(--dio-space-4); }
.case__ch:last-of-type { border-left-color: var(--dio-verde); }
.case__ch::before { content: ""; position: absolute; left: -0.4rem; top: 0.35rem; width: 0.7rem; height: 0.7rem; background: var(--dio-surface); border: 2px solid var(--dio-petroleo-400); transform: rotate(45deg); border-radius: 2px; }
.case__ch:last-of-type::before { background: var(--dio-amarillo); border-color: var(--dio-amarillo-600); }
.case__ch span { display: block; font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-verde-700); margin-bottom: var(--dio-space-1); }
.case__ch p { margin: 0; color: var(--dio-text); }
.case__stats { list-style: none; padding: 0; margin: var(--dio-space-5) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--dio-space-3); }
.case__stats li { background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-md); padding: var(--dio-space-3); font-size: var(--dio-text-xs); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); }
.section:nth-of-type(even) .case__stats li { background: var(--dio-bg); }
.case__stats strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-h4); color: var(--dio-text); }
.case__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-space-5); }
.case__art { position: relative; padding-bottom: var(--dio-space-6); }
.case__desk { margin: 0; border-radius: var(--dio-radius-lg); overflow: hidden; box-shadow: var(--dio-shadow-lg); border: 1px solid var(--dio-border); background: var(--dio-surface); }
.case__bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; background: var(--dio-gris-100); border-bottom: 1px solid var(--dio-border); }
.case__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dio-gris-300); }
.case__url { margin-left: var(--dio-space-3); font-size: var(--dio-text-xs); color: var(--dio-text-muted); background: var(--dio-surface); border-radius: var(--dio-radius-pill); padding: 0.1rem 0.8rem; }
.case__desk img { width: 100%; }
.case__mob { position: absolute; right: -0.5rem; bottom: 0; width: 26%; margin: 0; border-radius: 1.4rem; overflow: hidden; border: 6px solid var(--dio-tinta); box-shadow: var(--dio-shadow-lg); background: var(--dio-tinta); }
.case__mob img { width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top; }
@media (max-width: 40rem) { .case__mob { width: 34%; right: 0; } }
.case { margin-top: 0; align-items: start; }
@media (min-width: 64rem) {
  .case__art { position: sticky; top: 6.5rem; margin-top: var(--dio-space-3); }
}

/* Aplicativos que fizemos */
.apps { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--dio-space-6); }
.app { display: flex; flex-direction: column; align-items: flex-start; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-xl); padding: var(--dio-space-5) var(--dio-space-5) var(--dio-space-6); }
.section:nth-of-type(even) .app { background: var(--dio-surface); }
.app__phone { align-self: center; width: 11rem; aspect-ratio: 9 / 18.5; border: 7px solid var(--dio-tinta); border-radius: 1.8rem; overflow: hidden; background: var(--dio-tinta); box-shadow: var(--dio-shadow-lg); margin-bottom: var(--dio-space-5); }
.app__phone > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.app__soon { height: 100%; display: grid; place-items: center; align-content: center; gap: var(--dio-space-3); background: linear-gradient(180deg, var(--dio-petroleo-100), var(--dio-niebla)); }
.app__soon img { width: 70%; }
.app__soon span { font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-petroleo-600); }
.app__badge { font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; background: var(--dio-amarillo-100); color: var(--dio-amarillo-800); border-radius: var(--dio-radius-pill); padding: 0.15rem 0.7rem; margin-bottom: var(--dio-space-3); }
.app__badge--live { background: var(--dio-tint-ok); color: var(--dio-verde-800); }
.app__name { font-size: var(--dio-h4); margin-bottom: 0.2rem; }
.app__text { color: var(--dio-text-muted); margin-top: var(--dio-space-3); }
.app__stores { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--dio-space-2); }
.app__store { font-size: var(--dio-text-sm); font-weight: 700; text-decoration: none; color: var(--dio-blanco); background: var(--dio-tinta); border-radius: var(--dio-radius-md); padding: 0.45rem 0.9rem; }
.app__store:hover { color: var(--dio-blanco); background: var(--dio-petroleo); }
@media (min-width: 64rem) { .apps { grid-template-columns: repeat(3, 1fr); } .app { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; justify-items: start; } .app__phone { justify-self: center; } .app__stores { align-self: end; } }
.section--apps > .wrap > p:has(.btn) { text-align: center; margin-top: var(--dio-space-6); }
.app__soonline { margin: auto 0 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); font-style: italic; }

/* Produtos nossos: tarjetas inmersivas con la identidad de cada producto */
.prods { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); margin-top: var(--dio-space-6); }
.prod { --bg1: var(--dio-gris-950); --bg2: var(--dio-gris-800); --hl: var(--dio-blanco); --hl-ink: var(--dio-gris-950); --glow: rgba(255,255,255,.12); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; border-radius: 1.75rem; color: var(--dio-niebla); background: radial-gradient(120% 90% at 100% 0%, var(--glow), transparent 55%), linear-gradient(160deg, var(--bg2), var(--bg1) 70%); box-shadow: 0 30px 60px -30px rgba(10,5,20,.55); transition: transform var(--dio-dur) var(--dio-ease), box-shadow var(--dio-dur) var(--dio-ease); }
.prod:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(10,5,20,.65); }
.prod--nimbo { --bg1: #1C1019; --bg2: #4A0B39; --hl: #C8F53C; --hl-ink: #1C1019; --glow: rgba(200,245,60,.18); }
.prod--mandrake { --bg1: #150F2B; --bg2: #3A1F86; --hl: #B794FF; --hl-ink: #150F2B; --glow: rgba(145,86,253,.45); }
.prod__top { position: relative; padding: var(--dio-space-6) var(--dio-space-6) 0; min-height: 17rem; display: flex; flex-direction: column; background: none; overflow: visible; }
.prod__top::after { content: none; }
.prod__logo { height: 2.2rem; width: auto; align-self: flex-start; }
.prod__art { position: absolute; right: -0.5rem; bottom: -1rem; width: 58%; max-width: 20rem; max-height: none; margin: 0; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.prod--mandrake .prod__art { width: 36%; right: 1.5rem; bottom: 0.2rem; border-radius: 1rem; box-shadow: none; }
.prod__body { position: relative; z-index: 1; display: flex; flex-direction: column; padding: var(--dio-space-6); padding-top: var(--dio-space-5); border-top: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)); }
.prod__tag { font-family: var(--dio-font-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin-bottom: var(--dio-space-3); max-width: 22ch; }
.prod__text { color: color-mix(in srgb, var(--dio-niebla) 78%, transparent); max-width: 42ch; }
.prod__list { list-style: none; padding: 0; margin: var(--dio-space-2) 0 var(--dio-space-5); display: grid; gap: var(--dio-space-2); font-size: var(--dio-text-sm); color: color-mix(in srgb, var(--dio-niebla) 92%, transparent); }
.prod__list li { position: relative; padding-left: 1.6rem; }
.prod__list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--hl); transform: rotate(45deg); outline: 0; }
.prod__origin { margin-top: auto; padding-top: var(--dio-space-4); border-top: 1px solid rgba(255,255,255,.14); font-size: var(--dio-text-sm); font-weight: 600; color: rgba(244,241,246,.7); }
.prod__cta { align-self: flex-start; margin-top: var(--dio-space-4); background: var(--hl); color: var(--hl-ink); font-weight: 800; text-decoration: none; padding: 0.8rem 1.4rem; border-radius: var(--dio-radius-pill); transition: filter var(--dio-dur) var(--dio-ease); }
.prod__cta:hover { color: var(--hl-ink); filter: brightness(1.08); }
.prod--nimbo .prod__cta, .prod--nimbo .prod__cta:hover { background: var(--hl); color: var(--hl-ink); }
@media (max-width: 40rem) { .prod__top { min-height: 14rem; } .prod__art { width: 62%; } .prod--mandrake .prod__art { width: 50%; } }

/* Quem está por trás: fundador + artículos de autor */
.founder { display: grid; gap: var(--dio-space-6); margin-top: var(--dio-space-6); align-items: start; }
@media (min-width: 64rem) { .founder { grid-template-columns: 1fr 1.1fr; } }
.founder__card { background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-xl); padding: var(--dio-space-6); }
.section:nth-of-type(even) .founder__card { background: var(--dio-bg); }
.founder__photo { width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--dio-petroleo-100); border: 4px solid var(--dio-surface); box-shadow: var(--dio-shadow-md); margin-bottom: var(--dio-space-4); }
.founder__name { font-size: var(--dio-h3); margin-bottom: 0.2rem; }
.founder__role { font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-verde-700); }
.founder__bio { color: var(--dio-text); }
.founder__facts { list-style: none; padding: 0; margin: 0 0 var(--dio-space-5); display: flex; flex-wrap: wrap; gap: var(--dio-space-2); }
.founder__facts li { font-size: var(--dio-text-xs); font-weight: 700; color: var(--dio-text-muted); background: var(--dio-surface-2); border-radius: var(--dio-radius-pill); padding: 0.2rem 0.7rem; }
.founder__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-space-5); }
.founder__writes h3 { font-size: var(--dio-text-lg); margin-bottom: var(--dio-space-4); }
.arts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--dio-space-3); }
.founder__authors { display: grid; gap: var(--dio-space-2); margin-top: var(--dio-space-5); }
@media (max-width: 30rem) { .art { grid-template-columns: 1fr; } .art__go { display: none; } }

/* Mascotas: centradas sobre una esfera de luz en el color de la marca */
.prod { --orb1: rgba(255,255,255,.35); --orb2: rgba(255,255,255,0); }
.prod--nimbo { --orb1: rgba(200,245,60,.55); --orb2: rgba(122,15,92,0); --orb-ring: rgba(200,245,60,.25); }
.prod--mandrake { --orb1: rgba(183,148,255,.75); --orb2: rgba(58,31,134,0); --orb-ring: rgba(183,148,255,.3); }
.prod__top { min-height: 19rem; }
.prod__top::before { content: ""; position: absolute; z-index: 0; top: 1.25rem; right: 1.5rem; width: 16.5rem; height: 16.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--orb1) 0%, var(--orb2) 68%); box-shadow: inset 0 0 0 1px var(--orb-ring); }
.prod__top::after { content: ""; position: absolute; z-index: 0; top: 2.75rem; right: 3rem; width: 13.5rem; height: 13.5rem; border-radius: 50%; border: 1px dashed var(--orb-ring); }
.prod__logo { position: relative; z-index: 2; }
.prod__art, .prod--mandrake .prod__art { position: absolute; z-index: 1; top: 2.5rem; right: 2.6rem; bottom: auto; width: auto; height: 14rem; max-width: 15rem; object-fit: contain; border-radius: 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.prod--nimbo .prod__art { height: 12.5rem; top: 3.2rem; right: 2rem; max-width: 16rem; }
@media (max-width: 40rem) {
  .prod__top { min-height: 16rem; }
  .prod__top::before { width: 12rem; height: 12rem; top: 3.5rem; right: 0.75rem; }
  .prod__top::after { width: 9.5rem; height: 9.5rem; top: 4.75rem; right: 2rem; }
  .prod__art, .prod--mandrake .prod__art { height: 10rem; top: 4.5rem; right: 1.6rem; }
  .prod--nimbo .prod__art { height: 8.5rem; top: 5.2rem; right: 1rem; }
}

/* Quem está por trás v2: placa editorial + cita + datos + artículos */
.fdr { display: grid; gap: var(--dio-space-6); margin-top: var(--dio-space-6); align-items: start; }
@media (min-width: 64rem) { .fdr { grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "plate main" "plate writes"; column-gap: var(--dio-space-7); } .fdr__plate { grid-area: plate; } .fdr__main { grid-area: main; } .fdr__writes { grid-area: writes; } }
.fdr__plate { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 1.75rem; overflow: hidden; isolation: isolate; background: radial-gradient(90% 70% at 70% 30%, rgba(43,150,112,.45), transparent 60%), linear-gradient(165deg, #155456, #0A2E2F 75%); box-shadow: 0 30px 60px -30px rgba(1,32,33,.6); }
.fdr__plate::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 18%; width: 78%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,201,74,.35), rgba(255,201,74,0) 65%); }
.fdr__plate::after { content: ""; position: absolute; right: 1.4rem; top: 1.4rem; width: 0.9rem; height: 0.9rem; background: var(--dio-amarillo); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 5px rgba(255,201,74,.18); }
.fdr__cut { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 92%; width: auto; max-width: none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.fdr__plate figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: var(--dio-space-4) var(--dio-space-5); border-radius: var(--dio-radius-lg); background: rgba(10,46,47,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.fdr__plate figcaption strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-text-lg); }
.fdr__plate figcaption span { font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-amarillo-300); }
.fdr__quote { margin: 0 0 var(--dio-space-5); font-family: var(--dio-font-display); font-weight: 700; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--dio-text); position: relative; padding-left: var(--dio-space-5); border-left: 4px solid var(--dio-amarillo); }
.fdr__bio { color: var(--dio-text-muted); font-size: var(--dio-text-lg); max-width: 44ch; }
.fdr__stats { list-style: none; padding: 0; margin: var(--dio-space-5) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dio-space-3); }
.fdr__stats li { font-size: var(--dio-text-xs); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); border-top: 2px solid var(--dio-verde); padding-top: var(--dio-space-2); }
.fdr__stats strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-h3); color: var(--dio-text); line-height: 1.1; }
@media (max-width: 40rem) { .fdr__stats { grid-template-columns: repeat(2, 1fr); } .fdr__plate { aspect-ratio: 1 / 1.05; } }
.fdr__in { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: none; color: var(--dio-petroleo); }
.fdr__in span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; background: #0A66C2; color: #fff; font-size: 0.8rem; font-weight: 800; }
.fdr__writes { border-top: 1px solid var(--dio-border); padding-top: var(--dio-space-5); }
.fdr__writes h3 { font-size: var(--dio-text-lg); margin-bottom: var(--dio-space-4); }

/* Quem está por trás v3: retrato contenido y artículos a todo el ancho */
@media (min-width: 64rem) {
  .fdr { grid-template-columns: 17rem 1fr; grid-template-areas: "plate main" "writes writes"; column-gap: var(--dio-space-7); row-gap: var(--dio-space-6); align-items: center; }
  .fdr__writes .founder__authors { grid-template-columns: repeat(2, max-content); column-gap: var(--dio-space-6); }
}
.fdr__plate { width: 100%; max-width: 17rem; aspect-ratio: 4 / 5; }
.fdr__cut { height: 90%; }
.fdr__plate figcaption { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; padding: var(--dio-space-3) var(--dio-space-4); }
.fdr__plate figcaption strong { font-size: var(--dio-text-md); }
.fdr__plate figcaption span { font-size: 0.68rem; }
.fdr__plate::after { right: 1rem; top: 1rem; width: 0.7rem; height: 0.7rem; }
.fdr__quote { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.fdr__bio { font-size: var(--dio-text-md); max-width: 60ch; }
@media (max-width: 63.99rem) { .fdr__plate { max-width: 15rem; margin-inline: auto; } }
.fdr__plate figcaption { left: 0; right: 0; bottom: 0; border: 0; border-radius: 0; padding: 2.75rem var(--dio-space-4) var(--dio-space-4); background: linear-gradient(180deg, rgba(10,46,47,0), rgba(10,46,47,.92) 55%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.fdr__cut { height: 86%; bottom: 1.2rem; }

/* Artículos del fundador: 4 tarjetas iguales + enlaces de autor */
.fdr__whead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--dio-space-3) var(--dio-space-5); margin-bottom: var(--dio-space-5); }
.fdr__whead h3 { margin: 0; }
.fdr__authors { display: flex; flex-wrap: wrap; gap: var(--dio-space-3); }
.fdr__writes { border-top: 1px solid var(--dio-border); padding-top: var(--dio-space-6); }

/* FAQ v2: columna fija + acordeón */
.faq2 { display: grid; gap: var(--dio-space-6); }
@media (min-width: 64rem) { .faq2 { grid-template-columns: 0.8fr 1.2fr; gap: var(--dio-space-8); align-items: start; } .faq2__side { position: sticky; top: 6.5rem; } }
.faq2__side h2 { margin-bottom: var(--dio-space-3); }
.faq2__ask { margin-top: var(--dio-space-6); padding: var(--dio-space-5); border-radius: var(--dio-radius-lg); background: var(--dio-petroleo); color: var(--dio-niebla); }
.faq2__ask strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-text-lg); color: #fff; margin-bottom: var(--dio-space-2); }
.faq2__ask p { color: var(--dio-niebla-dark); }
.faq2__ask .btn { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-tinta); }
.faq2__list details { border-bottom: 1px solid var(--dio-border); }
.faq2__list details:first-child { border-top: 1px solid var(--dio-border); }
.faq2__list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--dio-space-4); padding: var(--dio-space-5) 0; font-family: var(--dio-font-display); font-weight: 700; font-size: var(--dio-text-lg); color: var(--dio-text); }
.faq2__list summary::-webkit-details-marker { display: none; }
/* hover: ver bloque «FAQ hover» al final */
.faq2__list summary i { flex: none; position: relative; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--dio-border-input); transition: background var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.faq2__list summary i::before, .faq2__list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8rem; height: 2px; background: var(--dio-text); transform: translate(-50%, -50%); transition: transform var(--dio-dur) var(--dio-ease); }
.faq2__list summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq2__list details[open] summary i { background: var(--dio-amarillo); border-color: var(--dio-amarillo); }
.faq2__list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq2__a { padding: 0 3rem var(--dio-space-5) 0; color: var(--dio-text-muted); font-size: var(--dio-text-md); line-height: var(--dio-leading-body); }
.faq2__a p { margin: 0; }

/* Cierre: CTA final de alta conversión */
.section--closing { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 90% 10%, rgba(43,150,112,.35), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(255,201,74,.12), transparent 60%), linear-gradient(160deg, #155456, #0A2E2F 70%) !important; }
.close { display: grid; gap: var(--dio-space-7); align-items: center; }
@media (min-width: 64rem) { .close { grid-template-columns: 1.25fr 0.9fr; } }
.close h2 { color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 20ch; }
.close .intro { color: rgba(243,246,244,.82); max-width: 50ch; }
.close__steps { list-style: none; padding: 0; margin: var(--dio-space-6) 0 0; display: grid; gap: var(--dio-space-3); counter-reset: s; }
@media (min-width: 48rem) { .close__steps { grid-template-columns: repeat(3, 1fr); } }
.close__steps li { display: flex; align-items: center; gap: var(--dio-space-3); color: #fff; font-weight: 600; font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--dio-radius-md); padding: var(--dio-space-3) var(--dio-space-4); }
.close__steps li span { flex: none; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--dio-amarillo); color: var(--dio-tinta); font-family: var(--dio-font-display); font-weight: 800; font-size: var(--dio-text-sm); }
.close__box { background: #fff; color: var(--dio-text); border-radius: 1.5rem; padding: var(--dio-space-6); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.close__btn { display: flex; justify-content: center; align-items: center; gap: 0.5rem; background: var(--dio-amarillo); color: var(--dio-tinta) !important; font-family: var(--dio-font-display); font-weight: 800; font-size: var(--dio-text-lg); text-decoration: none; padding: 1rem 1.5rem; border-radius: var(--dio-radius-pill); box-shadow: 0 10px 24px -8px rgba(220,167,68,.7); transition: transform var(--dio-dur) var(--dio-ease), box-shadow var(--dio-dur) var(--dio-ease); }
.close__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(220,167,68,.8); }
.close__btn span { transition: transform var(--dio-dur) var(--dio-ease); }
.close__btn:hover span { transform: translateX(4px); }
.close__micro { text-align: center; font-size: var(--dio-text-sm); color: var(--dio-text-muted); margin: var(--dio-space-3) 0 0; }
.close__or { display: flex; align-items: center; gap: var(--dio-space-3); margin: var(--dio-space-5) 0; color: var(--dio-text-muted); font-size: var(--dio-text-xs); text-transform: uppercase; letter-spacing: var(--dio-tracking-caps); }
.close__or::before, .close__or::after { content: ""; flex: 1; height: 1px; background: var(--dio-border); }
.close__wa { display: flex; align-items: center; gap: var(--dio-space-4); text-decoration: none; color: var(--dio-text) !important; border: 1.5px solid var(--dio-border-input); border-radius: var(--dio-radius-lg); padding: var(--dio-space-3) var(--dio-space-4); transition: border-color var(--dio-dur) var(--dio-ease), background var(--dio-dur) var(--dio-ease); }
.close__wa:hover { border-color: var(--dio-petroleo-600); background: var(--dio-tint); }
.close__wa img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--dio-petroleo-100); flex: none; }
.close__wa strong { display: block; font-family: var(--dio-font-display); }
.close__wa small { display: block; color: var(--dio-text-muted); font-size: var(--dio-text-xs); }
.close__trust { list-style: none; padding: 0; margin: var(--dio-space-5) 0 0; display: grid; gap: var(--dio-space-2); font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.close__trust li { position: relative; padding-left: 1.6rem; }
.close__trust li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border-radius: 50%; background: var(--dio-tint-ok); color: var(--dio-verde-800); font-size: 0.7rem; font-weight: 800; }
:root[data-theme="dark"] .close__trust li::before { background: var(--dio-verde); color: var(--dio-tinta); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .close__trust li::before { background: var(--dio-verde); color: var(--dio-tinta); } }
@media (max-width: 63.99rem) { .foot-contact { grid-column: 1 / -1; } }
.foot-wa { white-space: nowrap; }

/* ===== Pulido v1: amarillo en la parte superior y detalles ===== */
/* Acción principal = amarillo (regla de marca) */
.site-header .btn--sm, .hero .ctas .cta:first-child .btn { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-tinta); box-shadow: 0 8px 20px -10px rgba(220,167,68,.9); }
.site-header .btn--sm:hover, .hero .ctas .cta:first-child .btn:hover { background: var(--dio-amarillo-300); border-color: var(--dio-amarillo-300); color: var(--dio-tinta); }
.hero .ctas .cta:first-child .btn::after { content: " →"; }
/* Una sola receta de pastilla tintada: antes convivían 13%, 14% y un escalón sólido. */
:root { --dio-verde-marca: color-mix(in srgb, var(--dio-verde) 60%, var(--dio-petroleo)); }
:root[data-theme="dark"] { --dio-verde-marca: color-mix(in srgb, var(--dio-verde-300) 88%, var(--dio-petroleo)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dio-verde-marca: color-mix(in srgb, var(--dio-verde-300) 88%, var(--dio-petroleo)); } }
/* ── Superficie tintada: UNA sola receta para todo el sitio ────────────────────────────────
   Todo fondo suave decorativo dentro de una tarjeta (la caja «o que você recebe», la prova de
   cliente, la pastilla de público, el badge del blog, la columna «com plano», el ✓ de incluido,
   el sello «no ar») usa `--dio-tint`.

   Es el **verde de la marca diluido**, no un color nuevo: `color-mix` sobre el propio
   `--dio-verde` #2B9670. Antes convivían tres tintes que no salían de ningún token —
   `verde-50` #EBFBF3 (menta frío), `petroleo-50` #EAFBFB (cian) y el gris del fondo — y en
   pantalla se leían como tres verdes distintos dentro de la misma tarjeta. Al derivarlo del
   token, el tinte es exactamente el tono de marca y se mueve con él si la marca cambia.

   `--dio-tint-ok` queda como alias semántico del mismo valor: «no ar», ✓ de incluido y WhatsApp
   son el mismo verde, con el texto y el ícono marcando la diferencia, no el fondo. */
:root {
  --dio-tint: color-mix(in srgb, var(--dio-verde) 12%, transparent);
  --dio-tint-line: color-mix(in srgb, var(--dio-verde) 26%, transparent);
  --dio-tint-text: var(--dio-verde-800);
}
:root[data-theme="dark"] {
  --dio-tint: color-mix(in srgb, var(--dio-verde-300) 12%, transparent);
  --dio-tint-line: color-mix(in srgb, var(--dio-verde-300) 26%, transparent);
  --dio-tint-text: var(--dio-verde-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dio-tint: color-mix(in srgb, var(--dio-verde-300) 12%, transparent);
    --dio-tint-line: color-mix(in srgb, var(--dio-verde-300) 26%, transparent);
    --dio-tint-text: var(--dio-verde-300);
  }
}
:root, :root[data-theme="dark"] { --dio-tint-ok: var(--dio-tint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dio-tint-ok: var(--dio-tint); } }

/* Etiqueta de sección con rombo amarillo */
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dio-petroleo-600); margin-bottom: var(--dio-space-3); }
.eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--dio-amarillo); transform: rotate(45deg); border-radius: 1.5px; box-shadow: 0 0 0 3px rgba(255,201,74,.22); }
.section--dark .eyebrow, .close .eyebrow { color: var(--dio-amarillo); }
/* Marcador amarillo en el H1 */
mark { background: none; color: inherit; background-image: linear-gradient(transparent 62%, rgba(255,201,74,.75) 62%, rgba(255,201,74,.75) 92%, transparent 92%); padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Hero: halo amarillo y trama sutil */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(15,61,62,.07) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 75%); mask-image: linear-gradient(90deg, transparent 35%, #000 75%); }
.hero .wrap { position: relative; z-index: 1; }
.hero__art { position: relative; }
.hero__art::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 88%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,201,74,.38), rgba(255,201,74,0) 66%); }
/* Cifras del hero */
.stats { border-top-color: var(--dio-border); }
.stats li { border-left-color: var(--dio-amarillo); }
/* Nota de ajustes: aviso liviano */
/* Números de los pasos: petróleo con la cifra amarilla, igual que los chips de ícono y
   «Para quem» (21/09). Antes eran amarillo sólido y competían con el botón primario, que es
   lo único que debería gritar en la pantalla. */
.step__n { background: var(--dio-petroleo); color: var(--dio-amarillo); }
.section--dark .step__n { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
.process::before { border-top-color: var(--dio-amarillo-400); }
@media (min-width: 64rem) { .step__get { align-self: start; } }

/* ===== Modo claro / oscuro ===== */
.logo--dark { display: none; }
:root[data-theme="dark"] {
  --dio-bg: var(--dio-petroleo-900);
  --dio-surface: var(--dio-petroleo);
  --dio-surface-2: var(--dio-petroleo-700);
  --dio-text: var(--dio-niebla);
  --dio-text-muted: var(--dio-niebla-dark);
  --dio-accent: var(--dio-amarillo);
  --dio-on-accent: var(--dio-tinta);
  --dio-accent-hover: var(--dio-amarillo-300);
  --dio-accent-active: var(--dio-amarillo-500);
  --dio-focus: var(--dio-amarillo);
  --dio-link: var(--dio-verde-300);
  --dio-link-hover: var(--dio-niebla);
  --dio-signal: var(--dio-verde-300);
  --dio-highlight: var(--dio-amarillo);
  --dio-border: var(--dio-petroleo-600);
  --dio-border-input: var(--dio-petroleo-400);
  --dio-line: var(--dio-petroleo-400);
  --dio-ok: var(--dio-ok-dark); --dio-warning: var(--dio-warning-dark); --dio-error: var(--dio-error-dark); --dio-info: var(--dio-info-dark);
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] body { background: var(--dio-bg); }
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }
:root[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--dio-petroleo-900) 88%, transparent); backdrop-filter: blur(10px); }
:root[data-theme="dark"] .hero { background: var(--dio-petroleo-900); }
:root[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(243,246,244,.08) 1px, transparent 1.2px); }
:root[data-theme="dark"] .section:nth-of-type(even) { background: var(--dio-petroleo-950); }
:root[data-theme="dark"] .section:nth-of-type(odd) { background: var(--dio-petroleo-900); }
:root[data-theme="dark"] .eyebrow { color: var(--dio-verde-300); }
/* El cierre y el pie son petróleo en los dos temas: su amarillo no cambia. */
:root[data-theme="dark"] .close .eyebrow, :root[data-theme="dark"] .section--dark .eyebrow { color: var(--dio-amarillo); }
:root[data-theme="dark"] .foot-col h2 { color: var(--dio-amarillo); }
:root[data-theme="dark"] .lead, :root[data-theme="dark"] .intro, :root[data-theme="dark"] .card__text, :root[data-theme="dark"] .svc__text, :root[data-theme="dark"] .seg__text, :root[data-theme="dark"] .step p, :root[data-theme="dark"] .fdr__bio, :root[data-theme="dark"] .faq2__a, :root[data-theme="dark"] .note { color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .proof, :root[data-theme="dark"] .card__meta, :root[data-theme="dark"] .seg__proof, :root[data-theme="dark"] .prod__origin { color: var(--dio-verde-300); }
:root[data-theme="dark"] .svc, :root[data-theme="dark"] .seg, :root[data-theme="dark"] .step, :root[data-theme="dark"] .cli, :root[data-theme="dark"] .app, :root[data-theme="dark"] .acard, :root[data-theme="dark"] .card, :root[data-theme="dark"] .founder__card, :root[data-theme="dark"] .case__stats li { background: var(--dio-petroleo); border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .section:nth-of-type(even) .svc, :root[data-theme="dark"] .section:nth-of-type(even) .card, :root[data-theme="dark"] .section:nth-of-type(even) .step, :root[data-theme="dark"] .section:nth-of-type(even) .case__stats li { background: var(--dio-petroleo); }
:root[data-theme="dark"] .seg__proof { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .svc__link, :root[data-theme="dark"] .menu a, :root[data-theme="dark"] .menu .has-sub > span { color: var(--dio-niebla); }
:root[data-theme="dark"] .svc__price { border-top-color: var(--dio-petroleo-400); }
:root[data-theme="dark"] .svc__price strong, :root[data-theme="dark"] .app__name, :root[data-theme="dark"] .cli__name strong, :root[data-theme="dark"] .acard__title, :root[data-theme="dark"] .fdr__quote, :root[data-theme="dark"] .fdr__stats strong, :root[data-theme="dark"] .stats strong, :root[data-theme="dark"] .case__stats strong, :root[data-theme="dark"] .seg__title, :root[data-theme="dark"] .seg__client strong, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: #fff; }
:root[data-theme="dark"] .badge { background: rgba(123,215,176,.15); color: var(--dio-verde-300); }
:root[data-theme="dark"] .app__badge { background: rgba(255,201,74,.15); color: var(--dio-amarillo-300); }
:root[data-theme="dark"] .app__badge--live { background: var(--dio-tint-ok); color: var(--dio-verde-300); }
:root[data-theme="dark"] .app__store { background: #fff; color: var(--dio-tinta); }
:root[data-theme="dark"] .founder__facts li { background: var(--dio-petroleo-700); color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .case__bar { background: var(--dio-petroleo-700); border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .case__url { background: var(--dio-petroleo-900); color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .case__ch p { color: var(--dio-niebla); }
:root[data-theme="dark"] .case__ch::before { background: var(--dio-petroleo-900); }
:root[data-theme="dark"] .close__box { background: var(--dio-petroleo-900); color: var(--dio-niebla); border: 1px solid var(--dio-petroleo-600); }
:root[data-theme="dark"] .close__wa { color: var(--dio-niebla) !important; border-color: var(--dio-petroleo-400); }
:root[data-theme="dark"] .close__wa:hover { background: var(--dio-petroleo); border-color: var(--dio-verde-300); }
:root[data-theme="dark"] .close__micro, :root[data-theme="dark"] .close__trust, :root[data-theme="dark"] .close__wa small { color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .faq2__list summary { color: #fff; }
:root[data-theme="dark"] .faq2__list summary i::before, :root[data-theme="dark"] .faq2__list summary i::after { background: #fff; }
:root[data-theme="dark"] .faq2__list details[open] summary i::before, :root[data-theme="dark"] .faq2__list details[open] summary i::after { background: var(--dio-tinta); }
:root[data-theme="dark"] .fdr__in { color: var(--dio-niebla); }
:root[data-theme="dark"] .todo { background: rgba(255,201,74,.1); color: var(--dio-amarillo-300); border-color: rgba(255,201,74,.35); }
:root[data-theme="dark"] .site-footer { background: var(--dio-petroleo-950); }
:root[data-theme="dark"] .btn--ghost { color: var(--dio-niebla); border-color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .btn--ghost:hover { background: var(--dio-petroleo); color: #fff; }
:root[data-theme="dark"] .section--services > .wrap > p:has(.btn) .btn { color: var(--dio-niebla); border-color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .app__phone { border-color: var(--dio-petroleo-950); }
:root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] table { background: var(--dio-petroleo); }
:root[data-theme="dark"] th { background: var(--dio-petroleo-700); }
:root[data-theme="dark"] .form-stub { background: var(--dio-petroleo); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --dio-bg: var(--dio-petroleo-900);
  --dio-surface: var(--dio-petroleo);
  --dio-surface-2: var(--dio-petroleo-700);
  --dio-text: var(--dio-niebla);
  --dio-text-muted: var(--dio-niebla-dark);
  --dio-accent: var(--dio-amarillo);
  --dio-on-accent: var(--dio-tinta);
  --dio-accent-hover: var(--dio-amarillo-300);
  --dio-accent-active: var(--dio-amarillo-500);
  --dio-focus: var(--dio-amarillo);
  --dio-link: var(--dio-verde-300);
  --dio-link-hover: var(--dio-niebla);
  --dio-signal: var(--dio-verde-300);
  --dio-highlight: var(--dio-amarillo);
  --dio-border: var(--dio-petroleo-600);
  --dio-border-input: var(--dio-petroleo-400);
  --dio-line: var(--dio-petroleo-400);
  --dio-ok: var(--dio-ok-dark); --dio-warning: var(--dio-warning-dark); --dio-error: var(--dio-error-dark); --dio-info: var(--dio-info-dark);
}

:root:not([data-theme="light"]) { color-scheme: dark; }
:root:not([data-theme="light"]) body { background: var(--dio-bg); }
:root:not([data-theme="light"]) .logo--light { display: none; }
:root:not([data-theme="light"]) .logo--dark { display: block; }
:root:not([data-theme="light"]) .site-header { background: color-mix(in srgb, var(--dio-petroleo-900) 88%, transparent); backdrop-filter: blur(10px); }
:root:not([data-theme="light"]) .hero { background: var(--dio-petroleo-900); }
:root:not([data-theme="light"]) .hero::before { background-image: radial-gradient(rgba(243,246,244,.08) 1px, transparent 1.2px); }
:root:not([data-theme="light"]) .section:nth-of-type(even) { background: var(--dio-petroleo-950); }
:root:not([data-theme="light"]) .section:nth-of-type(odd) { background: var(--dio-petroleo-900); }
:root:not([data-theme="light"]) .eyebrow { color: var(--dio-verde-300); }
/* El cierre y el pie son petróleo en los dos temas: su amarillo no cambia. */
:root:not([data-theme="light"]) .close .eyebrow, :root:not([data-theme="light"]) .section--dark .eyebrow { color: var(--dio-amarillo); }
:root:not([data-theme="light"]) .foot-col h2 { color: var(--dio-amarillo); }
:root:not([data-theme="light"]) .lead, :root:not([data-theme="light"]) .intro, :root:not([data-theme="light"]) .card__text, :root:not([data-theme="light"]) .svc__text, :root:not([data-theme="light"]) .seg__text, :root:not([data-theme="light"]) .step p, :root:not([data-theme="light"]) .fdr__bio, :root:not([data-theme="light"]) .faq2__a, :root:not([data-theme="light"]) .note { color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .proof, :root:not([data-theme="light"]) .card__meta, :root:not([data-theme="light"]) .seg__proof, :root:not([data-theme="light"]) .prod__origin { color: var(--dio-verde-300); }
:root:not([data-theme="light"]) .svc, :root:not([data-theme="light"]) .seg, :root:not([data-theme="light"]) .step, :root:not([data-theme="light"]) .cli, :root:not([data-theme="light"]) .app, :root:not([data-theme="light"]) .acard, :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .founder__card, :root:not([data-theme="light"]) .case__stats li { background: var(--dio-petroleo); border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .section:nth-of-type(even) .svc, :root:not([data-theme="light"]) .section:nth-of-type(even) .card, :root:not([data-theme="light"]) .section:nth-of-type(even) .step, :root:not([data-theme="light"]) .section:nth-of-type(even) .case__stats li { background: var(--dio-petroleo); }
:root:not([data-theme="light"]) .seg__proof { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .svc__link, :root:not([data-theme="light"]) .menu a, :root:not([data-theme="light"]) .menu .has-sub > span { color: var(--dio-niebla); }
:root:not([data-theme="light"]) .svc__price { border-top-color: var(--dio-petroleo-400); }
:root:not([data-theme="light"]) .svc__price strong, :root:not([data-theme="light"]) .app__name, :root:not([data-theme="light"]) .cli__name strong, :root:not([data-theme="light"]) .acard__title, :root:not([data-theme="light"]) .fdr__quote, :root:not([data-theme="light"]) .fdr__stats strong, :root:not([data-theme="light"]) .stats strong, :root:not([data-theme="light"]) .case__stats strong, :root:not([data-theme="light"]) .seg__title, :root:not([data-theme="light"]) .seg__client strong, :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3 { color: #fff; }
:root:not([data-theme="light"]) .badge { background: rgba(123,215,176,.15); color: var(--dio-verde-300); }
:root:not([data-theme="light"]) .app__badge { background: rgba(255,201,74,.15); color: var(--dio-amarillo-300); }
:root:not([data-theme="light"]) .app__badge--live { background: var(--dio-tint-ok); color: var(--dio-verde-300); }
:root:not([data-theme="light"]) .app__store { background: #fff; color: var(--dio-tinta); }
:root:not([data-theme="light"]) .founder__facts li { background: var(--dio-petroleo-700); color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .case__bar { background: var(--dio-petroleo-700); border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .case__url { background: var(--dio-petroleo-900); color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .case__ch p { color: var(--dio-niebla); }
:root:not([data-theme="light"]) .case__ch::before { background: var(--dio-petroleo-900); }
:root:not([data-theme="light"]) .close__box { background: var(--dio-petroleo-900); color: var(--dio-niebla); border: 1px solid var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .close__wa { color: var(--dio-niebla) !important; border-color: var(--dio-petroleo-400); }
:root:not([data-theme="light"]) .close__wa:hover { background: var(--dio-petroleo); border-color: var(--dio-verde-300); }
:root:not([data-theme="light"]) .close__micro, :root:not([data-theme="light"]) .close__trust, :root:not([data-theme="light"]) .close__wa small { color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .faq2__list summary { color: #fff; }
:root:not([data-theme="light"]) .faq2__list summary i::before, :root:not([data-theme="light"]) .faq2__list summary i::after { background: #fff; }
:root:not([data-theme="light"]) .faq2__list details[open] summary i::before, :root:not([data-theme="light"]) .faq2__list details[open] summary i::after { background: var(--dio-tinta); }
:root:not([data-theme="light"]) .fdr__in { color: var(--dio-niebla); }
:root:not([data-theme="light"]) .todo { background: rgba(255,201,74,.1); color: var(--dio-amarillo-300); border-color: rgba(255,201,74,.35); }
:root:not([data-theme="light"]) .site-footer { background: var(--dio-petroleo-950); }
:root:not([data-theme="light"]) .btn--ghost { color: var(--dio-niebla); border-color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .btn--ghost:hover { background: var(--dio-petroleo); color: #fff; }
:root:not([data-theme="light"]) .section--services > .wrap > p:has(.btn) .btn { color: var(--dio-niebla); border-color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .app__phone { border-color: var(--dio-petroleo-950); }
:root:not([data-theme="light"]) .table-wrap, :root:not([data-theme="light"]) table { background: var(--dio-petroleo); }
:root:not([data-theme="light"]) th { background: var(--dio-petroleo-700); }
:root:not([data-theme="light"]) .form-stub { background: var(--dio-petroleo); }
}

/* Menús de idioma y tema */
.hdr-ctl { display: flex; align-items: center; gap: var(--dio-space-2); }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; height: 2.4rem; padding: 0 0.7rem; border-radius: var(--dio-radius-pill); border: 1px solid var(--dio-border); color: var(--dio-text); font-size: var(--dio-text-sm); font-weight: 700; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover { border-color: var(--dio-border-input); }
.dd svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd ul { list-style: none; margin: 0; padding: 0.4rem; position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 15.5rem; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-radius-md); box-shadow: var(--dio-shadow-lg); z-index: 20; white-space: nowrap; }
.dd li a, .dd li button { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: var(--dio-radius-sm); background: none; border: 0; font: inherit; font-size: var(--dio-text-sm); color: var(--dio-text); text-decoration: none; cursor: pointer; text-align: left; }
.dd li a:hover, .dd li button:hover { background: var(--dio-surface-2); color: var(--dio-text); }
.dd li a span { display: inline-grid; place-items: center; min-width: 2rem; font-size: var(--dio-text-xs); font-weight: 800; color: var(--dio-text-muted); }
.dd li a[aria-current], .dd li button[aria-pressed="true"] { font-weight: 800; }
.dd li a[aria-current]::after, .dd li button[aria-pressed="true"]::after { content: ""; margin-left: auto; width: 0.5rem; height: 0.5rem; background: var(--dio-amarillo); transform: rotate(45deg); border-radius: 1px; }
@media (max-width: 71.99rem) { .hdr-ctl { margin: var(--dio-space-4) 0; } .dd ul { left: 0; right: auto; } }
@media (prefers-color-scheme: dark) {
}

/* Botón de tema: muestra la preferencia elegida (sol / luna / pantalla), centrado */
.dd--theme > summary { width: 2.4rem; padding: 0; justify-content: center; }
.dd--theme > summary .ico { display: none; align-items: center; justify-content: center; line-height: 0; }
:root[data-theme-pref="light"] .dd--theme > summary .ico-light,
:root[data-theme-pref="dark"] .dd--theme > summary .ico-dark,
:root[data-theme-pref="system"] .dd--theme > summary .ico-system,
:root:not([data-theme-pref]) .dd--theme > summary .ico-system { display: inline-flex !important; }
.dd li button svg { flex: none; }

/* Selector de idioma del pie: mismo menú, abre hacia arriba */
.dd--up ul { top: auto; bottom: calc(100% + 0.4rem); right: 0; left: auto; }
.site-footer .dd > summary { color: rgba(243,246,244,.86); border-color: rgba(255,255,255,.18); font-weight: 600; }
.site-footer .dd > summary:hover { border-color: rgba(255,255,255,.35); color: #fff; }
.site-footer .dd ul { background: #0A2E2F; border-color: rgba(255,255,255,.14); }
.site-footer .dd li a { color: rgba(243,246,244,.86); }
.site-footer .dd li a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.site-footer .dd li a span { color: rgba(243,246,244,.5); }
@media (max-width: 40rem) { .dd--up ul { left: 0; right: auto; } }
.foot-lang .dd li a, .foot-lang .dd li a[aria-current] { background: none; border: 0; padding: 0.55rem 0.7rem; color: rgba(243,246,244,.86); border-radius: var(--dio-radius-sm); }
.foot-lang .dd li a[aria-current] { color: #fff; font-weight: 800; }
.foot-lang .dd li a:hover { background: rgba(255,255,255,.08); }

/* ===== Sistema de terminación (pasada final) ===== */
:root {
  --r-inner: 12px;   /* elementos dentro de tarjetas */
  --r-card: 20px;    /* tarjetas de contenido */
  --r-feature: 28px; /* piezas protagonistas */
  --sh-rest: 0 1px 2px rgba(15,61,62,.05), 0 0 0 1px rgba(15,61,62,.02);
  --sh-hover: 0 22px 44px -22px rgba(15,61,62,.32), 0 2px 6px rgba(15,61,62,.04);
  --sh-feature: 0 34px 64px -34px rgba(1,32,33,.55);
  --pad-card: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  --ease-out: cubic-bezier(.2,.7,.2,1);
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(255,201,74,.55); color: var(--dio-tinta); }
[id] { scroll-margin-top: 6rem; }
.stats strong, .svc__price strong, .case__stats strong, .fdr__stats strong, .step__n, .close__steps li span { font-variant-numeric: tabular-nums lining-nums; }
.fdr__quote, .cli__quote p { hanging-punctuation: first; }

/* Ritmo vertical de secciones */
.section { padding-block: clamp(4rem, 2.8rem + 4.5vw, 7rem); }
.section > .wrap > h2 { margin-bottom: var(--dio-space-3); }
.section > .wrap > .intro { margin-bottom: 0; }
.services, .segments, .process, .clients, .apps, .prods, .fdr, .case { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* Radios: 3 niveles */
.svc, .seg, .step, .cli, .app, .acard, .founder__card, .faq2__ask, .case__desk, .card { border-radius: var(--r-card); }
.prod, .fdr__plate, .close__box { border-radius: var(--r-feature); }
.seg__proof, .case__stats li, .app__store, .close__steps li, .close__wa { border-radius: var(--r-inner); }

/* Rellenos de tarjeta */
.svc, .seg, .app { padding: var(--pad-card); }
.step, .acard { padding: var(--pad-card); }
.cli > :not(.cli__shot) { margin-left: var(--pad-card); margin-right: var(--pad-card); }
.cli .svc__link { margin-bottom: var(--pad-card); }

/* Sombras y elevación: mismas reglas para todo lo clickeable */
.svc, .seg, .cli, .acard, .app, .step { box-shadow: var(--sh-rest); }
.svc, .seg, .cli, .acard, .prod, .art { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out); }
.svc:hover, .seg:hover, .cli:hover, .acard:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.prod { box-shadow: var(--sh-feature); }
.prod:hover { transform: translateY(-4px); }
.fdr__plate { box-shadow: var(--sh-feature); }
.close__box { box-shadow: 0 40px 80px -36px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .svc, .seg, .cli, .acard, .prod { transition: none; } .svc:hover, .seg:hover, .cli:hover, .acard:hover, .prod:hover { transform: none; } }

/* Foco visible consistente */
a:focus-visible, button:focus-visible, summary:focus-visible,
.svc:focus-within, .seg:focus-within, .cli:focus-within, .acard:focus-visible {
  outline: 3px solid var(--dio-amarillo); outline-offset: 3px;
  /* El amarillo solo da 1,53:1 sobre blanco. El anillo petróleo pegado al elemento es
     lo que aporta el contraste exigido (WCAG 1.4.11): el amarillo queda entre dos
     superficies oscuras y se ve. En tema oscuro el amarillo ya pasa por sí solo. */
  box-shadow: 0 0 0 3px var(--dio-petroleo-900);
}

/* Botones: misma altura y peso */
.btn { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; letter-spacing: -0.005em; transition: background 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.btn:active, .close__btn:active, .prod__cta:active { transform: translateY(1px); }
.btn--sm { min-height: 2.5rem; }
/* Hero: columna fluida en celular (la ilustración no empuja el ancho) y cifras sin línea superior */
.hero--art .wrap { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .hero--art .wrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.hero__text, .hero__art { min-width: 0; }
.hero__art img { max-width: min(100%, 30rem); }
.stats { border-top: 0; padding-top: 0; margin-top: var(--dio-space-6); }
@media (max-width: 40rem) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dio-space-3); }
  .stats li { padding-left: var(--dio-space-2); font-size: 0.72rem; }
  .stats strong { font-size: 1.45rem; }
  .hero__art img { max-width: 19rem; }
}
/* Tablet: clientes en 2 columnas hasta 72rem; datos del caso siempre en 4 */
@media (min-width: 40rem) and (max-width: 71.99rem) { .clients { grid-template-columns: repeat(2, 1fr) !important; } .cli { display: flex !important; } }
@media (min-width: 72rem) { .clients { grid-template-columns: repeat(4, 1fr); } }
.case__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case__stats li { padding: var(--dio-space-3) var(--dio-space-2) var(--dio-space-3) var(--dio-space-3); }
@media (max-width: 30rem) { .case__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Secciones solapadas (como NimboCDN): hojas con esquinas superiores redondeadas ===== */
:root { --sheet: clamp(24px, 2vw + 12px, 40px); }
.hero { border-bottom: 0; padding-bottom: calc(var(--dio-space-7) + var(--sheet)); }
main > .section, .site-footer { position: relative; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; padding-top: calc(clamp(4rem, 2.8rem + 4.5vw, 7rem) + var(--sheet) * 0.5); box-shadow: 0 -18px 36px -30px rgba(15,61,62,.28); }
main > .section:nth-of-type(odd) { background: var(--dio-surface); }
main > .section:nth-of-type(even) { background: var(--dio-bg); }
main > .section:last-of-type { padding-bottom: calc(clamp(4rem, 2.8rem + 4.5vw, 7rem) + var(--sheet)); }
.site-footer { padding-top: calc(var(--dio-space-8) + var(--sheet) * 0.5); box-shadow: 0 -18px 36px -30px rgba(0,0,0,.5); }
.hero, main > .section { isolation: isolate; }
/* tarjetas en fondos alternos: mantener contraste */
main > .section:nth-of-type(odd) .svc, main > .section:nth-of-type(odd) .step, main > .section:nth-of-type(odd) .card, main > .section:nth-of-type(odd) .case__stats li { background: var(--dio-bg); }
main > .section:nth-of-type(even) .svc, main > .section:nth-of-type(even) .seg, main > .section:nth-of-type(even) .step, main > .section:nth-of-type(even) .cli, main > .section:nth-of-type(even) .app, main > .section:nth-of-type(even) .acard, main > .section:nth-of-type(even) .card { background: var(--dio-surface); }
:root[data-theme="dark"] main > .section:nth-of-type(odd) { background: var(--dio-petroleo-900); }
:root[data-theme="dark"] main > .section:nth-of-type(even) { background: var(--dio-petroleo-950); }
:root[data-theme="dark"] main > .section:nth-of-type(odd) .svc, :root[data-theme="dark"] main > .section:nth-of-type(odd) .step, :root[data-theme="dark"] main > .section:nth-of-type(odd) .card, :root[data-theme="dark"] main > .section:nth-of-type(odd) .case__stats li, :root[data-theme="dark"] main > .section:nth-of-type(even) .svc, :root[data-theme="dark"] main > .section:nth-of-type(even) .seg, :root[data-theme="dark"] main > .section:nth-of-type(even) .step, :root[data-theme="dark"] main > .section:nth-of-type(even) .cli, :root[data-theme="dark"] main > .section:nth-of-type(even) .app, :root[data-theme="dark"] main > .section:nth-of-type(even) .acard, :root[data-theme="dark"] main > .section:nth-of-type(even) .card { background: var(--dio-petroleo); }
:root[data-theme="dark"] main > .section, :root[data-theme="dark"] .site-footer { box-shadow: 0 -18px 36px -28px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) main > .section:nth-of-type(odd) { background: var(--dio-petroleo-900); }
:root:not([data-theme="light"]) main > .section:nth-of-type(even) { background: var(--dio-petroleo-950); }
:root:not([data-theme="light"]) main > .section:nth-of-type(odd) .svc, :root:not([data-theme="light"]) main > .section:nth-of-type(odd) .step, :root:not([data-theme="light"]) main > .section:nth-of-type(odd) .card, :root:not([data-theme="light"]) main > .section:nth-of-type(odd) .case__stats li, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .svc, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .seg, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .step, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .cli, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .app, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .acard, :root:not([data-theme="light"]) main > .section:nth-of-type(even) .card { background: var(--dio-petroleo); }
:root:not([data-theme="light"]) main > .section, :root:not([data-theme="light"]) .site-footer { box-shadow: 0 -18px 36px -28px rgba(0,0,0,.6); }
}
.svc__art img { width: auto; height: 9rem; max-width: 100%; object-fit: contain; }

/* Hero: espaciado afinado */
.hero { padding-top: clamp(3rem, 1.8rem + 4vw, 5.5rem); padding-bottom: calc(clamp(3.5rem, 2.4rem + 4vw, 6rem) + var(--sheet)); }
.hero--art .wrap { gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.hero .eyebrow { margin-bottom: var(--dio-space-5); }
.hero h1 { margin-bottom: var(--dio-space-5); line-height: 1.06; }
.hero .lead { margin-bottom: 0; max-width: 36rem; }
.hero .lead p { margin: 0; }
.hero .ctas { margin: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem) 0 0; gap: var(--dio-space-4) var(--dio-space-5); }
.hero .cta small { margin-top: var(--dio-space-3); }
.hero .stats { margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); max-width: 38rem; gap: var(--dio-space-5); }
.hero__art img { max-width: min(100%, 36rem); }
@media (max-width: 55.99rem) { .hero__art { margin-top: var(--dio-space-4); } }
/* Hero: trama de puntos y halo más presentes */
.hero::before { background-image: radial-gradient(rgba(15,61,62,.16) 1.2px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 30%, #000 70%); }
.hero__art::before { width: 105%; background: radial-gradient(circle, rgba(255,201,74,.62) 0%, rgba(255,201,74,.28) 38%, rgba(255,201,74,0) 68%); }
:root[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(243,246,244,.16) 1.2px, transparent 1.5px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background-image: radial-gradient(rgba(243,246,244,.16) 1.2px, transparent 1.5px); } }
/* Oscuro: trama y halo más sutiles */
:root[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(243,246,244,.075) 1.1px, transparent 1.4px); }
:root[data-theme="dark"] .hero__art::before { background: radial-gradient(circle, rgba(255,201,74,.26) 0%, rgba(255,201,74,.1) 38%, rgba(255,201,74,0) 66%); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero::before { background-image: radial-gradient(rgba(243,246,244,.075) 1.1px, transparent 1.4px); }
:root:not([data-theme="light"]) .hero__art::before { background: radial-gradient(circle, rgba(255,201,74,.26) 0%, rgba(255,201,74,.1) 38%, rgba(255,201,74,0) 66%); }
}
/* Puntos del hero más discretos */
.hero::before { background-image: radial-gradient(rgba(15,61,62,.10) 1px, transparent 1.3px); }
:root[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(243,246,244,.055) 1px, transparent 1.3px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background-image: radial-gradient(rgba(243,246,244,.055) 1px, transparent 1.3px); } }
/* Puntos del hero: punto intermedio */
.hero::before { background-image: radial-gradient(rgba(15,61,62,.13) 1.1px, transparent 1.4px); }
:root[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(243,246,244,.075) 1.1px, transparent 1.4px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background-image: radial-gradient(rgba(243,246,244,.075) 1.1px, transparent 1.4px); } }

/* Para quem v3 */
.segments { gap: var(--dio-space-5); }
@media (min-width: 60rem) { .segments { grid-template-columns: repeat(3, 1fr); } }
.seg2 { position: relative; display: flex; flex-direction: column; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--sh-rest); overflow: hidden; transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.seg2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--dio-amarillo), var(--dio-verde)); transform: scaleX(0.25); transform-origin: left; transition: transform 400ms var(--ease-out); }
.seg2:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); }
.seg2:hover::before { transform: scaleX(1); }
@media (min-width: 60rem) { .seg2 { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } }
.seg2__head { display: flex; align-items: center; gap: var(--dio-space-3); margin-bottom: var(--dio-space-5); }
.seg2__ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--dio-petroleo); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.seg2__ico svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--dio-amarillo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg2__who { font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dio-petroleo-600); }
.seg2__title { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: var(--dio-space-5); }
.seg2__how { color: var(--dio-text-muted); margin-bottom: var(--dio-space-5); }
.seg2__how span { display: block; font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-verde-700); margin-bottom: var(--dio-space-2); }
.seg2__proof { display: flex; gap: var(--dio-space-3); align-items: flex-start; align-self: end; padding: var(--dio-space-4); border-radius: var(--r-inner); background: var(--dio-bg); border: 1px solid var(--dio-border); }
main > .section:nth-of-type(even) .seg2 { background: var(--dio-surface); }
main > .section:nth-of-type(odd) .seg2__proof { background: var(--dio-bg); }
.seg2__av { flex: none; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--dio-amarillo); color: var(--dio-tinta); font-family: var(--dio-font-display); font-weight: 800; font-size: var(--dio-text-sm); }
.seg2__proof strong { display: block; font-family: var(--dio-font-display); font-size: var(--dio-text-md); line-height: 1.2; }
.seg2__proof .seg__place { display: block; margin: 0.15rem 0 var(--dio-space-2); }
.seg2__proof p { margin: 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); }
.seg2__link { display: flex; align-items: center; justify-content: space-between; gap: var(--dio-space-3); margin-top: var(--dio-space-5); padding-top: var(--dio-space-4); border-top: 1px solid var(--dio-border); font-weight: 700; text-decoration: none; color: var(--dio-text); }
.seg2__link::after { content: ""; position: absolute; inset: 0; }
.seg2__go { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--dio-border-input); transition: background 260ms var(--ease-out), border-color 260ms var(--ease-out), transform 260ms var(--ease-out); }
.seg2:hover .seg2__go { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-tinta); transform: translateX(3px); }
.seg2:focus-within { outline: 3px solid var(--dio-amarillo); outline-offset: 3px; }
:root[data-theme="dark"] .seg2 { background: var(--dio-petroleo) !important; border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .seg2__proof { background: var(--dio-petroleo-900) !important; border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .seg2__who { color: var(--dio-verde-300); }
:root[data-theme="dark"] .seg2__how, :root[data-theme="dark"] .seg2__proof p { color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .seg2__how span { color: var(--dio-amarillo-300); }
:root[data-theme="dark"] .seg2__title, :root[data-theme="dark"] .seg2__proof strong, :root[data-theme="dark"] .seg2__link { color: #fff; }
:root[data-theme="dark"] .seg2__link { border-top-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .seg2__ico { background: var(--dio-petroleo-900); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .seg2 { background: var(--dio-petroleo) !important; border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .seg2__proof { background: var(--dio-petroleo-900) !important; border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .seg2__who { color: var(--dio-verde-300); }
:root:not([data-theme="light"]) .seg2__how, :root:not([data-theme="light"]) .seg2__proof p { color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .seg2__how span { color: var(--dio-amarillo-300); }
:root:not([data-theme="light"]) .seg2__title, :root:not([data-theme="light"]) .seg2__proof strong, :root:not([data-theme="light"]) .seg2__link { color: #fff; }
:root:not([data-theme="light"]) .seg2__link { border-top-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .seg2__ico { background: var(--dio-petroleo-900); }
}
/* Menos margen superior en cada sección */
main > .section { padding-top: calc(clamp(2.75rem, 1.9rem + 2.6vw, 4.5rem) + var(--sheet) * 0.5); }

/* Quem está por trás v4: tarjeta única + artículos compactos */
.fd3 { display: grid; gap: var(--dio-space-5); margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
@media (min-width: 64rem) { .fd3 { grid-template-columns: 1.35fr 1fr; align-items: stretch; } }
.fd3__card { display: grid; grid-template-columns: auto 1fr; gap: var(--dio-space-5); align-items: start; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--sh-rest); }
main > .section:nth-of-type(odd) .fd3__card, main > .section:nth-of-type(odd) .fd3__writes { background: var(--dio-bg); }
.fd3__photo { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--dio-petroleo-100); box-shadow: 0 0 0 4px var(--dio-surface), 0 0 0 6px var(--dio-amarillo); }
.fd3__quote { margin: 0 0 var(--dio-space-4); font-family: var(--dio-font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--dio-text); }
.fd3__name { margin: 0 0 var(--dio-space-2); }
.fd3__name strong { font-family: var(--dio-font-display); margin-right: var(--dio-space-2); }
.fd3__name span { font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-verde-700); }
.fd3__bio { color: var(--dio-text-muted); font-size: var(--dio-text-sm); margin-bottom: var(--dio-space-4); }
.fd3__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-space-4); }
@media (max-width: 40rem) { .fd3__card { grid-template-columns: 1fr; } .fd3__photo { width: 5.5rem; height: 5.5rem; } }
.fd3__writes { background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--sh-rest); }
.fd3__writes h3 { font-size: var(--dio-text-md); margin-bottom: var(--dio-space-3); }
.fd3__writes ul { list-style: none; margin: 0; padding: 0; }
.fa { --p: var(--dio-verde-800); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--dio-space-3); padding: 0.7rem 0; border-bottom: 1px solid var(--dio-border); text-decoration: none; color: var(--dio-text); }
.fd3__writes li:last-child .fa { border-bottom: 0; }
.fa--nimbo, .fa--mandrake { --p: var(--dio-verde-800); }
.fa__chip { font-size: 0.68rem; font-weight: 800; color: var(--p); background: color-mix(in srgb, var(--p) 10%, transparent); border-radius: var(--dio-radius-pill); padding: 0.1rem 0.5rem; }
.fa__title { font-size: var(--dio-text-sm); font-weight: 600; line-height: var(--dio-leading-snug); }
.fa__go { color: var(--dio-text-muted); transition: transform 200ms var(--ease-out); }
.fa:hover { color: var(--dio-text); } .fa:hover .fa__title { text-decoration: underline; text-underline-offset: 0.2em; } .fa:hover .fa__go { transform: translate(2px,-2px); color: var(--dio-text); }
.fd3__authors { margin: var(--dio-space-3) 0 0; font-size: var(--dio-text-xs); color: var(--dio-text-muted); }
.fd3__authors a { color: var(--dio-text-muted); }
:root[data-theme="dark"] .fd3__card { background: var(--dio-petroleo) !important; border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .fd3__writes { background: var(--dio-petroleo) !important; border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .fd3__quote { color: #fff; }
:root[data-theme="dark"] .fd3__name strong { color: #fff; }
:root[data-theme="dark"] .fd3__name span { color: var(--dio-verde-300); }
:root[data-theme="dark"] .fd3__bio { color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .fd3__photo { box-shadow: 0 0 0 4px var(--dio-petroleo), 0 0 0 6px var(--dio-amarillo); }
:root[data-theme="dark"] .fa { color: var(--dio-niebla); border-bottom-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .fa--nimbo, :root[data-theme="dark"] .fa--mandrake { --p: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .fd3__card { background: var(--dio-petroleo) !important; border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .fd3__writes { background: var(--dio-petroleo) !important; border-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .fd3__quote { color: #fff; }
:root:not([data-theme="light"]) .fd3__name strong { color: #fff; }
:root:not([data-theme="light"]) .fd3__name span { color: var(--dio-verde-300); }
:root:not([data-theme="light"]) .fd3__bio { color: var(--dio-niebla-dark); }
:root:not([data-theme="light"]) .fd3__photo { box-shadow: 0 0 0 4px var(--dio-petroleo), 0 0 0 6px var(--dio-amarillo); }
:root:not([data-theme="light"]) .fa { color: var(--dio-niebla); border-bottom-color: var(--dio-petroleo-600); }
:root:not([data-theme="light"]) .fa--nimbo, :root:not([data-theme="light"]) .fa--mandrake { --p: var(--dio-verde-300); }
}
.fd3__name strong { display: block; margin: 0 0 0.15rem; }
.fd3__name span { display: block; }
.fd3__card { align-items: center; }
/* La capa clickeable de .svc__link solo dentro de tarjetas (fuera de ellas cubría la sección entera) */
.svc__link::after { content: none; }
.svc .svc__link::after, .cli .svc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* El caso lleva su título adentro: sin margen extra arriba */
.case { margin-top: 0 !important; }

/* ===== Motion ===== (GUIA §5.5 · investigación: docs/bitacora/fuentes/2026-09-19-motion.md)
   Pocas cosas, bien hechas: entrada del hero, aparición al hacer scroll, cifras que cuentan, tema con círculo,
   FAQ con altura animada, menús que se despliegan y micro-interacciones. Solo transform/translate/opacity/clip-path
   (salvo la altura del FAQ, que responde a un clic). Sin JS o con «reducir movimiento», todo se ve y nada se mueve. */
:root {
  --dur-1: 160ms;  /* micro: hover de botón, menú, foco */
  --dur-2: 260ms;  /* tarjetas, flechas, iconos */
  --dur-3: 420ms;  /* acordeón, cambios de estado grandes */
  --dur-4: 560ms;  /* entradas (hero, scroll) */
  --stagger: 70ms;
  --rv-dist: 18px;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);   /* entradas: arranca rápido y frena largo */
  --ease-spring: linear(0, 0.042, 0.143, 0.275, 0.415, 0.55, 0.672, 0.775, 0.858, 0.922, 0.969, 1.001, 1.022, 1.033, 1.038, 1.038, 1.035, 1.03, 1.025, 1.02, 1.015, 1.01, 1.007, 1.004, 1); /* resorte ζ 0,72: 4 % de rebote, solo en piezas chicas */
}
@keyframes rv-in { from { opacity: 0; translate: 0 var(--rv-dist); } }
@keyframes hero-in { from { opacity: 0.001; translate: 0 14px; } }
@keyframes hero-art-in { from { opacity: 0.001; scale: 0.96; } }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Hero: cascada corta al cargar (CSS puro: funciona sin JS y termina siempre visible) */
  .hero__text > * { animation: hero-in var(--dur-4) var(--ease-out-expo) both; }
  .hero__text > :nth-child(2) { animation-delay: 60ms; }
  .hero__text > :nth-child(3) { animation-delay: 120ms; }
  .hero__text > :nth-child(4) { animation-delay: 180ms; }
  .hero__text > :nth-child(n+5) { animation-delay: 240ms; }
  .hero__art { animation: hero-art-in 600ms var(--ease-out-expo) 80ms both; }

  /* 2. Aparición al entrar en pantalla (la lista = REVEAL en build.py). Oculto solo con html.motion, que pone el JS */
  .motion :is(main > .section :is(.eyebrow, h2, .intro), .svc, .seg2, .process > li, .cli, .case__ch, .case__stats, .case__links, .case__head, .case__desk, .case__mob, .app, .prod, .fd3__card, .fd3__writes, .faq2__ask, .faq2__list, .close__steps, .close__box, .deck, .rel, .tela__txt, .duo__c, .cmp__row, .inc > li, .plan, .say2, .tl, .steps > li, .story__text, .story__aside, .note, .nota, .table-wrap):not(.in) { opacity: 0; }
  .motion :is(main > .section :is(.eyebrow, h2, .intro), .svc, .seg2, .process > li, .cli, .case__ch, .case__stats, .case__links, .case__head, .case__desk, .case__mob, .app, .prod, .fd3__card, .fd3__writes, .faq2__ask, .faq2__list, .close__steps, .close__box, .deck, .rel, .tela__txt, .duo__c, .cmp__row, .inc > li, .plan, .say2, .tl, .steps > li, .story__text, .story__aside, .note, .nota, .table-wrap).in { animation: rv-in var(--dur-4) var(--ease-out-expo) var(--rv-d, 0ms) both; }

  /* 3. Ilustración del hero: flota leve (10 px + 0,6°, 7 s) y el halo amarillo respira; transform/scale no chocan con el translate del parallax */
  /* Solo de tablet para arriba: en celular las ilustraciones quedan quietas (pedido de Juan) */
  @media (min-width: 48rem) {
  /* Hero: la ilustración queda fija y flotan solo los chips de clientes (Juan, 19/09) */
  /* Mismo flote en el caso (Musical Riff): los dispositivos y el spot; arranca desfasado para no ir al unísono con el hero */
  /* Caso: la imagen queda fija, igual que en el hero (Juan, 19/09); solo flota la ficha técnica */
  .case__art::before { animation: hero-glow 7s ease-in-out -2s infinite; }
  }
  @keyframes hero-float { 50% { transform: translateY(-10px) rotate(-0.6deg); } }
  /* Caso: sin giro (el panel tiene su propio flote, más abajo) */
  @keyframes case-float { 50% { transform: translateY(-8px); } }
  @keyframes hero-glow { 50% { scale: 1.06; opacity: .8; } }

  /* 3b. Parallax mínimo de la ilustración del hero (scroll-driven; sin soporte queda quieta) */
  @supports (animation-timeline: scroll()) {
    @media (min-width: 56rem) {
      .hero__art img { animation: hero-par linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
      @keyframes hero-par { to { translate: 0 44px; } }
    }
  }

  /* 4. Navegación entre páginas: fundido nativo (View Transitions entre documentos) */
  @view-transition { navigation: auto; }

  /* 5. Menús (idioma, tema, submenú de Serviços): aparecen con fundido + 4 px */
  .dd[open] > ul { transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out-expo); }
  @starting-style { .dd[open] > ul { opacity: 0; translate: 0 -4px; } }
  @starting-style { .dd--up[open] > ul { translate: 0 4px; } }
  @media (min-width: 72rem) {
    .menu .has-sub:hover ul, .menu .has-sub:focus-within ul { transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out-expo); }
    @starting-style { .menu .has-sub:hover ul, .menu .has-sub:focus-within ul { opacity: 0; translate: 0 -4px; } }
  }

  /* 6. FAQ: la respuesta se abre con altura animada (Chrome/Edge; el resto abre al instante) */
  @supports (interpolate-size: allow-keywords) {
    .faq2__list { interpolate-size: allow-keywords; }
    .faq2__list details::details-content { height: 0; overflow: clip; opacity: 0; transition: height var(--dur-3) var(--ease-out-expo), opacity var(--dur-2) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
    .faq2__list details[open]::details-content { height: auto; opacity: 1; }
  }

  /* 7. Micro-interacciones: botones suben 1 px; flechas e iconos con resorte */
  .btn, .close__btn, .prod__cta { transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-1) var(--ease-out); }
  .btn:hover, .prod__cta:hover { transform: translateY(-1px); }
  .btn:active, .close__btn:active, .prod__cta:active { transform: translateY(1px); transition-duration: 80ms; }
  .svc__link span, .close__btn span, .acard__go span { transition: transform var(--dur-2) var(--ease-spring); }
  .seg2__go { transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
  .fa__go { transition: transform var(--dur-2) var(--ease-spring); }
  .faq2__list summary i::before, .faq2__list summary i::after { transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1) var(--ease-out); }
  .faq2__list summary i { transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
}

/* Cambio de tema: el tema nuevo entra como un círculo desde el botón (el JS anima el clip-path) */
:root.vt-theme::view-transition-old(root), :root.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.vt-theme::view-transition-group(root) { animation: none; }

/* Red de seguridad: con «reducir movimiento» o al imprimir, todo visible y quieto */
@media (prefers-reduced-motion: reduce), print {
  .motion :is(main > .section :is(.eyebrow, h2, .intro), .svc, .seg2, .process > li, .cli, .case__ch, .case__stats, .case__links, .case__head, .case__desk, .case__mob, .app, .prod, .fd3__card, .fd3__writes, .faq2__ask, .faq2__list, .close__steps, .close__box, .deck, .rel, .tela__txt, .duo__c, .cmp__row, .inc > li, .plan, .say2, .tl, .steps > li, .story__text, .story__aside, .note, .nota, .table-wrap) { opacity: 1 !important; animation: none !important; }
  .hero__text > *, .hero__art, .hero__art img, .hero__art::before, .case__dev, .case__art::before, .case__report, .case__live i::after { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Volver arriba (como NimboCDN): lo inyecta MOTION_JS; aparece pasados 400 px con fundido + 10 px, sin salir del flujo
   (sin reflow) y sin foco posible mientras está oculto. En celular va ENCIMA del botón fijo de WhatsApp (.wa-float). */
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 6; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--dio-border-input); border-radius: var(--dio-radius-pill); background: var(--dio-surface); color: var(--dio-petroleo); cursor: pointer; box-shadow: 0 6px 20px rgba(15,61,62,.16); opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out), visibility var(--dur-2); }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--dio-petroleo); transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--dio-amarillo); outline-offset: 3px; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 71.99rem) { .to-top { right: 1rem; bottom: calc(1rem + 3rem + 0.75rem); width: 42px; height: 42px; } }
:root[data-theme="dark"] .to-top { background: var(--dio-petroleo); border-color: var(--dio-petroleo-600); color: var(--dio-amarillo); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
:root[data-theme="dark"] .to-top:hover { border-color: var(--dio-amarillo); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .to-top { background: var(--dio-petroleo); border-color: var(--dio-petroleo-600); color: var(--dio-amarillo); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
:root:not([data-theme="light"]) .to-top:hover { border-color: var(--dio-amarillo); }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity 1ms; } .to-top:hover { transform: none; } }

/* Flecha de enlace externo «↗»: un solo efecto en todo el sitio (build.py → normalize_ext la envuelve en span.ext).
   Al pasar el mouse o con foco de teclado se desplaza en diagonal; el resto del botón hace solo lo que ya hacía. */
a span.ext { display: inline-block; transition: transform 200ms var(--ease-out); }
a:hover span.ext, a:focus-visible span.ext, .cli:hover span.ext, .acard:hover span.ext, a.fa:hover .fa__go.ext { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
  a span.ext { transition: none; }
  a:hover span.ext, a:focus-visible span.ext, .cli:hover span.ext, .acard:hover span.ext, a.fa:hover .fa__go.ext { transform: none; }
}

/* La insignia «in» es solo el primer span; la flecha ↗ queda como las demás */
.fdr__in .ext { display: inline-block; width: auto; height: auto; background: none; color: inherit; border-radius: 0; font-size: inherit; font-weight: inherit; }

/* FAQ hover: franja suave + ícono que se afirma. Usa currentColor para funcionar igual en claro y oscuro */
.faq2__list summary { margin-inline: -1rem; padding-inline: 1rem; border-radius: var(--r-inner); transition: background var(--dur-1, 160ms) var(--ease-out, ease-out); }
.faq2__list summary:hover, .faq2__list summary:focus-visible { background: color-mix(in srgb, currentColor 6%, transparent); }
.faq2__list summary:hover i, .faq2__list summary:focus-visible i { border-color: currentColor; }
.faq2__list details:not([open]) summary:hover i, .faq2__list details:not([open]) summary:focus-visible i { background: currentColor; }
.faq2__list details:not([open]) summary:hover i::before, .faq2__list details:not([open]) summary:hover i::after,
.faq2__list details:not([open]) summary:focus-visible i::before, .faq2__list details:not([open]) summary:focus-visible i::after { background: var(--dio-bg); }
.faq2__list summary:focus-visible { outline: 2px solid var(--dio-amarillo); outline-offset: 2px; }
.faq2__a { padding-left: 0; }

/* Caso: escenario a toda altura para la columna de la imagen (puntillado + spot amarillo, igual que el hero) */
@media (min-width: 64rem) {
  .case { align-items: stretch; }
  .case__art { position: relative; top: auto; margin-top: 0; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--dio-space-6); padding: clamp(1.5rem, 2.2vw, 2.25rem); border-radius: var(--r-feature); isolation: isolate; overflow: hidden;
    background: radial-gradient(rgba(15,61,62,.13) 1px, transparent 1.3px) 0 0 / 22px 22px, color-mix(in srgb, var(--dio-petroleo) 5%, transparent); }
  .case__art::before { content: ""; position: absolute; z-index: -1; left: 55%; top: 48%; width: 105%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,201,74,.8) 0%, rgba(255,201,74,.34) 40%, rgba(255,201,74,0) 70%); pointer-events: none; }
  :root[data-theme="dark"] .case__art { background: radial-gradient(rgba(243,246,244,.055) 1px, transparent 1.3px) 0 0 / 22px 22px, rgba(255,255,255,.035); }
  :root[data-theme="dark"] .case__art::before { background: radial-gradient(circle, rgba(255,201,74,.26) 0%, rgba(255,201,74,.1) 38%, rgba(255,201,74,0) 66%); }
}
@media (min-width: 64rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__art { background: radial-gradient(rgba(243,246,244,.055) 1px, transparent 1.3px) 0 0 / 22px 22px, rgba(255,255,255,.035); }
  :root:not([data-theme="light"]) .case__art::before { background: radial-gradient(circle, rgba(255,201,74,.26) 0%, rgba(255,201,74,.1) 38%, rgba(255,201,74,0) 66%); }
}
.case__dev { position: relative; padding-bottom: var(--dio-space-6); }

/* Menú móvil (< 72rem): ver el bloque «Menú móvil (drawer)» al final del archivo */

/* Refinamientos de la auditoría (19/09/2026) */
/* WhatsApp flotante (celular): con JS se esconde hasta pasar los botones del hero, que ya ofrecen WhatsApp (sin JS se ve siempre) */
.wa-float { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.wa-js .wa-float:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: opacity 1ms, visibility 1ms; } }
/* Líneas parejas: la frase de arriba no deja una palabra sola en la segunda línea */
.eyebrow, h1, h2 { text-wrap: balance; }
/* Cifras del hero en celular: etiquetas legibles (13 px) */
@media (max-width: 40rem) { .stats li { font-size: 0.8125rem; } }
/* Zonas táctiles: área de toque más grande sin mover el diseño (WCAG 2.5.8) */
.case__links .svc__link, .fdr__in, .foot-legal a, .foot-col a { position: relative; }
.case__links .svc__link::after, .fdr__in::after { content: ""; position: absolute; inset: -10px -6px; }
.foot-legal a::after, .foot-col a::after { content: ""; position: absolute; inset: -6px -4px; }
.foot-social a { padding: 0.55rem 0.95rem; }
.app__store { padding: 0.65rem 0.95rem; }
/* Chips de «Artigos do Juan»: 12 px */
.fa__chip { font-size: 0.75rem; }
/* Servicios en celular: sin el alto mínimo que alinea las tarjetas en escritorio */
@media (max-width: 63.99rem) { .svc__text { min-height: 0; } }
/* Contraste: etiquetas verdes en oscuro y textos chicos del pie (≥ 4,5:1) */
:root[data-theme="dark"] :is(.step__get span, .case__ch span) { color: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.step__get span, .case__ch span) { color: var(--dio-verde-300); } }
.foot-bottom, .foot-bottom span { color: rgba(243,246,244,.68); }
.site-footer .dd > summary { color: rgba(243,246,244,.9); }
.site-footer .dd li a span { color: rgba(243,246,244,.68); }

/* Caso: escenario (19/09/2026). La compu (con «● No ar desde …» en la barra del navegador) y, montado sobre su esquina
   inferior izquierda, el panel «Migração concluída»: antes → después, una barra de progreso y una fila por dato.
   Sin cajas de más: el amarillo queda solo para la acción principal (guía §5). En celular el panel va debajo, ancho completo. */
/* Encabezado: monograma + cliente a la izquierda, «● No ar desde …» a la derecha; sin caja alrededor */
.case__head { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin-bottom: var(--dio-space-5); }
.case__who { margin: 0; display: grid; gap: 0.1rem; line-height: 1.25; min-width: 0; }
.case__who strong { font-family: var(--dio-font-display); font-size: var(--dio-text-md); color: var(--dio-text); }
.case__who span { font-size: var(--dio-text-xs); color: var(--dio-text-muted); }
.case__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border-radius: var(--dio-radius-pill); background: var(--dio-tint-ok); color: var(--dio-verde-800); font-size: var(--dio-text-xs); font-weight: 700; white-space: nowrap; }
.case__since { font-weight: 600; }
.case__live i { position: relative; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--dio-verde); }
.case__live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dio-verde); opacity: 0; }
@media (max-width: 30rem) { .case__since { display: none; } }

.case__report { position: relative; z-index: 2; margin-top: var(--dio-space-5); padding: 0.3rem 1.1rem 0.45rem; border-radius: var(--r-card); background: var(--dio-surface); box-shadow: 0 24px 48px -20px rgba(15,61,62,.35), 0 2px 8px rgba(15,61,62,.06); }
.case__rhead { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico title ok" "ico sub sub"; row-gap: 0.2rem; column-gap: 0.75rem; align-items: center; padding: 0.8rem 0 0.75rem; }
.case__rhead p { display: contents; }
.case__rico { grid-area: ico; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; background: var(--dio-verde-700); color: var(--dio-amarillo); }
.case__rico svg, .case__ico svg, .case__rchk svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.case__rico svg { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.case__rhead strong { grid-area: title; font-family: var(--dio-font-display); font-size: var(--dio-text-md); line-height: 1.2; color: var(--dio-text); }
.case__rsub { grid-area: sub; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; font-size: var(--dio-text-xs); color: var(--dio-text-muted); }
.case__rsub s { text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.case__rsub :is(b, strong) { font: inherit; font-weight: 800; color: var(--dio-text); }
.case__arrow { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: color-mix(in srgb, var(--dio-text-muted) 16%, transparent); color: var(--dio-text-muted); font-size: 0.68rem; font-weight: 800; line-height: 1; }
.case__rok { grid-area: ok; padding: 0.25rem 0.6rem; border-radius: var(--dio-radius-pill); background: var(--dio-tint-ok); color: var(--dio-verde-800); font-size: var(--dio-text-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Una sola barra de progreso para toda la migración (antes había una por fila, todas al 100 %: ruido) */
.case__rprog { position: relative; display: block; height: 4px; border-radius: 4px; background: var(--dio-border); overflow: hidden; }
.case__rprog::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--dio-verde-700), var(--dio-verde)); transform-origin: left; }
.case__rows { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.case__rows li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.7rem; padding: 0.55rem 0; }
.case__rows li + li { border-top: 1px dashed var(--dio-border); }
.case__ico { display: grid; place-items: center; width: 1.25rem; color: var(--dio-verde-700); }
.case__ico svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.75; }
.case__rname { font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.case__rows strong { font-family: var(--dio-font-display); font-size: 1rem; font-weight: 700; color: var(--dio-text); font-variant-numeric: tabular-nums lining-nums; text-align: right; min-width: 3.2em; }
.case__rchk { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--dio-verde); color: #fff; }
.case__rchk svg { width: 0.7rem; height: 0.7rem; stroke-width: 3; }

@media (min-width: 64rem) {
  /* Grupo compu + panel abajo del escenario: la base del panel queda en la línea de la base de los botones de la izquierda
     (el escenario se extiende su propio padding por debajo de esa línea). */
  .case__art { justify-content: flex-end; align-items: flex-start; margin-bottom: calc(-1 * clamp(1.5rem, 2.2vw, 2.25rem)); }
  .case__art > .case__dev { align-self: stretch; }
  .case__head { margin-bottom: auto; }
  /* Montado de verdad: ~25 % del alto del panel sobre la pantalla, terminando antes del teléfono */
  .case__report { width: min(72%, 24rem); margin: -6.5rem 0 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--dio-surface) 94%, transparent); }
}
@media (max-width: 63.99rem) {
  .case__dev { display: grid; padding-bottom: 0; }
  .case__desk { grid-area: 1 / 1; }
  .case__mob { position: relative; grid-area: 1 / 1; align-self: end; justify-self: end; right: auto; bottom: auto; width: 28%; translate: 0.25rem 18%; }
  .case__report { align-self: stretch; margin-top: calc(11% + 1.25rem); } /* el % sigue al ancho, igual que lo que sobresale el teléfono */
}

:root[data-theme="dark"] .case__report { background: color-mix(in srgb, var(--dio-petroleo-700) 96%, transparent); box-shadow: 0 24px 48px -20px rgba(0,0,0,.7); }
:root[data-theme="dark"] :is(.case__rhead strong, .case__rsub b, .case__rsub strong, .case__rows strong) { color: #fff; }
:root[data-theme="dark"] .case__rows li + li { border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .case__rprog { background: var(--dio-petroleo-600); }
:root[data-theme="dark"] .case__rico { background: var(--dio-verde-700); color: var(--dio-amarillo); }
:root[data-theme="dark"] :is(.case__ico, .case__rok, .case__live) { color: var(--dio-verde-300); }
:root[data-theme="dark"] .case__who strong { color: #fff; }
:root[data-theme="dark"] .case__who span { color: var(--dio-niebla-dark); }
:root[data-theme="dark"] :is(.case__rname, .case__rsub, .case__arrow) { color: var(--dio-niebla-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__report { background: color-mix(in srgb, var(--dio-petroleo-700) 96%, transparent); box-shadow: 0 24px 48px -20px rgba(0,0,0,.7); }
  :root:not([data-theme="light"]) :is(.case__rhead strong, .case__rsub b, .case__rsub strong, .case__rows strong) { color: #fff; }
  :root:not([data-theme="light"]) .case__rows li + li { border-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .case__rprog { background: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .case__rico { background: var(--dio-verde-700); color: var(--dio-amarillo); }
  :root:not([data-theme="light"]) :is(.case__ico, .case__rok, .case__live) { color: var(--dio-verde-300); }
  :root:not([data-theme="light"]) .case__who strong { color: #fff; }
  :root:not([data-theme="light"]) .case__who span { color: var(--dio-niebla-dark); }
  :root:not([data-theme="light"]) :is(.case__rname, .case__rsub, .case__arrow) { color: var(--dio-niebla-dark); }
}

/* Motion del panel: solo con html.motion (JS + sin «reducir movimiento»). La barra se llena en 1,2 s; cada ✓ aparece
   cuando su número termina de contar (140 ms de desfase por fila, igual que el JS); el 100 % al final. */
@media (prefers-reduced-motion: no-preference) {
  .case__live i::after { animation: live-ping 2.4s var(--ease-out) 3; } /* 3 latidos al cargar y queda quieto: sin loops infinitos (guía §5.5) */
  @keyframes live-ping { 0% { opacity: .55; scale: 1; } 80%, 100% { opacity: 0; scale: 2.6; } }
  /* Entrada del panel: «la migración ocurre frente a tus ojos» (Juan, 19/09).
     1) Aterriza sobre la pantalla desde su esquina: +28 px, escala 0,96 → 1 y fundido (--dur-4, expo; 150 ms de espera para
        que llegue después de los dispositivos; ver el JS: espera a la compu). Por transición y con su propio observer: ningún ancestro anima opacidad
        (eso apagaba el vidrio en Chrome con GPU).
     2) La ficha se pinta completa (Juan). 430 ms después (.is-run) los números cuentan 560 ms con 180 ms de cascada (JS)
        y cada ✓ salta con resorte cuando su número termina. La barra dura lo mismo que toda la secuencia (3 × 180 + 560 ms) y llega al 100 % con
        la última fila; entonces aparece «100%». */
  .case__report { transform-origin: 0 100%; }
  /* Entrada: fundido + sube 24 px + escala 0,97 (--dur-4, expo). El recorte con clip-path que había antes se veía como un
     «aparece de golpe» (Juan); ahora que el vidrio es translúcido en reposo, el fundido ya no deja el efecto de «transparente
     al principio y opaco después». El orden lo pone el JS: 120 ms después de la compu. */
  .motion .case__report { transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out-expo), scale var(--dur-4) var(--ease-out-expo); }
  .motion .case__report:not(.in) { opacity: 0; translate: 0 24px; scale: 0.97; }
  .motion .case__rprog::after { scale: 0 1; transition: scale calc(3 * 180ms + 560ms) var(--ease-out); }
  .motion .case__rchk { opacity: 0; scale: 0.4; transition: opacity var(--dur-1) var(--ease-out) calc(var(--i) * 180ms + 560ms), scale var(--dur-2) var(--ease-spring) calc(var(--i) * 180ms + 560ms); }
  .motion .case__rok { opacity: 0; scale: 0.9; transition: opacity var(--dur-2) var(--ease-out) calc(3 * 180ms + 560ms + 120ms), scale var(--dur-2) var(--ease-spring) calc(3 * 180ms + 560ms + 120ms); }
  .motion .case__report.is-run .case__rprog::after { scale: 1 1; }
  .motion .case__report.is-run :is(.case__rchk, .case__rok) { opacity: 1; scale: 1; }
  /* La ficha flota como los chips del hero (mismo ritmo: 6 s, 6 px), también en celular */
  .case__report { animation: report-float 6s ease-in-out -1s infinite; }
  @keyframes report-float { 50% { transform: translateY(-6px); } }
}

/* Botones del caso: aire como en el hero y el link centrado con el botón */
.case__links { margin-top: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); gap: var(--dio-space-4) var(--dio-space-6); }
.case__links .svc__link { margin: 0; }

/* Menos rectángulos con línea (Juan): la ventana del navegador y el panel se separan con sombra, no con borde */
.case__desk { border: 0; box-shadow: 0 30px 60px -28px rgba(15,61,62,.45), 0 4px 14px rgba(15,61,62,.08); }
:root[data-theme="dark"] .case__desk { box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .case__desk { box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); } }
/* Panel de migración con vidrio leve (solo escritorio, donde se monta sobre la captura): deja ver el sitio detrás.
   Mismo recurso que el header y la placa del fundador (fondo translúcido + blur); en celular queda sólido. */
@media (min-width: 64rem) {
  .case__report { background: color-mix(in srgb, var(--dio-surface) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
  :root[data-theme="dark"] .case__report { background: color-mix(in srgb, var(--dio-petroleo-700) 74%, transparent); }
}
@media (min-width: 64rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__report { background: color-mix(in srgb, var(--dio-petroleo-700) 74%, transparent); }
}

/* Vidrio (causa medida por el agente, 19/09): el panel era ~85 % opaco arriba y apenas 32–46 px quedaban sobre la
   captura; el vidrio solo «se veía» mientras la entrada fundía la opacidad. Ahora: más montado, fondo más translúcido,
   blur 18 px sin brightness. La entrada ya no usa opacity (ver bloque de motion: clip-path). */
@media (min-width: 64rem) {
  .case__report { margin-top: -7.5rem; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 40%), color-mix(in srgb, var(--dio-surface) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
  :root[data-theme="dark"] .case__report { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), color-mix(in srgb, var(--dio-petroleo-700) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}
@media (min-width: 64rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__report { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), color-mix(in srgb, var(--dio-petroleo-700) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}

/* Restauración (recarga, atrás/adelante, #ancla): lo visible al cargar se pinta en el acto, sin animación de entrada */
.motion .rv-now.in { animation: none !important; }
.case__report.rv-now, .case__report.rv-now * { transition: none !important; }

/* Header, distribución (Juan, 19/09): logo | menú centrado con aire | idioma + tema + CTA agrupados a la derecha.
   Desplegable de Serviços con el mismo lenguaje que los de idioma y tema (tarjeta, opciones con fondo al pasar). */
@media (min-width: 72rem) {
  .nav { flex: 1; gap: var(--dio-space-3); margin-left: 0; } /* el menú queda con el mismo aire a cada lado */
  .menu { margin-inline: auto; gap: clamp(1.25rem, 0.2rem + 1.6vw, 1.9rem); }
  .hdr-ctl { display: flex; align-items: center; gap: 0.5rem; margin-right: var(--dio-space-2); }
  /* Ítems: subrayado que crece desde la izquierda al pasar (y fijo en la página actual) */
  .menu > li > a, .menu .has-sub > span { position: relative; padding: 0.5rem 0; }
  .menu > li > a::before, .menu .has-sub > span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px; border-radius: 2px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale var(--dur-2) var(--ease-out); }
  .menu > li > a:is(:hover, :focus-visible)::before, .menu .has-sub:is(:hover, :focus-within) > span::before, .menu > li > a[aria-current]::before, .menu .has-sub.is-active > span::before { scale: 1 1; }
  .menu a[aria-current] { text-decoration: none; }
  .menu .has-sub .has-sub > span::before { content: none; }
  /* Flecha de Serviços: chevron dibujado (el carácter ▾ quedaba chico), gira al abrir */
  .menu .has-sub > span::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; vertical-align: middle; rotate: 45deg; translate: 0 -0.2rem; font-size: inherit; transition: rotate var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out); }
  .menu .has-sub:is(:hover, :focus-within) > span::after { rotate: 225deg; translate: 0 0.05rem; }
  /* Desplegable = mismo estilo que .dd (idioma/tema) + puente invisible para no perder el hover en el hueco */
  .menu .has-sub ul { top: calc(100% + 0.4rem); left: -0.7rem; min-width: 16rem; padding: 0.4rem; border-radius: var(--dio-radius-md); box-shadow: var(--dio-shadow-lg); }
  .menu .has-sub ul::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
  .menu .has-sub ul a { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border-radius: var(--dio-radius-sm); font-size: var(--dio-text-sm); font-weight: 500; color: var(--dio-text); text-decoration: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  .menu .has-sub ul a::after { content: "→"; margin-left: auto; opacity: 0; translate: -4px 0; color: var(--dio-text-muted); transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-spring); }
  .menu .has-sub ul a:is(:hover, :focus-visible) { background: var(--dio-surface-2); color: var(--dio-text); }
  .menu .has-sub ul a:is(:hover, :focus-visible)::after { opacity: 1; translate: 0 0; }
  .menu .has-sub ul a[aria-current] { font-weight: 700; }
  .menu .has-sub ul .sep { margin: 0.35rem 0.7rem; }
}
@media (min-width: 72rem) and (prefers-reduced-motion: reduce) {
  .menu > li > a::before, .menu .has-sub > span::before, .menu .has-sub > span::after, .menu .has-sub ul a, .menu .has-sub ul a::after { transition: none; }
}

/* Hero (19/09, investigación de tendencias + categoría Dunford): badge de categoría sobre el H1, dos chips con clientes
   reales sobre las esquinas de la ilustración (llenan el vacío en celular) y la cara del fundador junto al WhatsApp.
   Punto de restauración: git stash «PUNTO DE RESTAURACIÓN: antes del hero A+C y badges (19/09)». */
.hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 var(--dio-space-4); padding: 0.4rem 0.85rem 0.4rem 0.65rem; border-radius: var(--dio-radius-pill); background: color-mix(in srgb, var(--dio-petroleo) 7%, transparent); color: var(--dio-text); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.hero__badge::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; rotate: 45deg; border-radius: 2px; background: var(--dio-amarillo); }
.hero__stage { position: relative; min-width: 0; }
.hchip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.6rem; max-width: calc(100% - 1rem); padding: 0.45rem 0.85rem 0.45rem 0.45rem; border-radius: 14px; background: var(--dio-surface); box-shadow: 0 14px 30px -14px rgba(1,32,33,.45), 0 2px 6px -2px rgba(1,32,33,.12); color: var(--dio-text); text-decoration: none; font-size: 0.75rem; line-height: 1.25; }
.hchip:hover { text-decoration: none; color: var(--dio-text); }
.hchip > span { min-width: 0; }
.hchip img { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 9px; object-fit: cover; }
.hchip strong { display: block; font-family: var(--dio-font-display); font-size: 0.8125rem; font-weight: 700; }
.hchip > span > span { color: var(--dio-text-muted); white-space: nowrap; }
.hchip--loja { top: 2%; left: 0; }
.hchip--app { bottom: 4%; right: 0; }
@media (min-width: 56rem) { .hchip--loja { top: 8%; left: -8%; } .hchip--app { bottom: 10%; right: -4%; } }
.hfounder { display: flex; align-items: center; gap: 0.55rem; margin-top: var(--dio-space-3); font-size: 0.8125rem; line-height: 1.3; color: var(--dio-text-muted); }
.hfounder strong { color: var(--dio-text); }
.hfounder__av { position: relative; flex: none; }
.hfounder__av img { display: block; width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.hfounder__av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dio-verde); box-shadow: 0 0 0 2px var(--dio-surface); }
:root[data-theme="dark"] .hchip { background: var(--dio-petroleo-700); box-shadow: 0 16px 32px -14px rgba(0,0,0,.7); }
:root[data-theme="dark"] :is(.hchip, .hchip:hover, .hfounder strong) { color: #fff; }
:root[data-theme="dark"] .hero__badge { background: rgba(243,246,244,.08); color: #fff; }
:root[data-theme="dark"] .hfounder__av::after { box-shadow: 0 0 0 2px var(--dio-petroleo-900); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hchip { background: var(--dio-petroleo-700); box-shadow: 0 16px 32px -14px rgba(0,0,0,.7); }
  :root:not([data-theme="light"]) :is(.hchip, .hchip:hover, .hfounder strong) { color: #fff; }
  :root:not([data-theme="light"]) .hero__badge { background: rgba(243,246,244,.08); color: #fff; }
  :root:not([data-theme="light"]) .hfounder__av::after { box-shadow: 0 0 0 2px var(--dio-petroleo-900); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Entran después de la ilustración y flotan a destiempo (el celular también: es el detalle «fluctuante» pedido) */
  .hchip { animation: hchip-in var(--dur-4) var(--ease-out-expo) 520ms both, hchip-float 6s ease-in-out 1.1s infinite; }
  .hchip--app { animation-delay: 640ms, -2s; }
  @keyframes hchip-in { from { opacity: 0; scale: 0.94; } }
  @keyframes hchip-float { 50% { translate: 0 -6px; } }
  .hfounder__av::before { content: ""; position: absolute; right: -1px; bottom: -1px; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dio-verde); opacity: 0; animation: hf-ping 2.4s var(--ease-out) 1.2s 3; }
  @keyframes hf-ping { 0% { opacity: 0.6; scale: 1; } 70%, 100% { opacity: 0; scale: 2.6; } }
}
@media (prefers-reduced-motion: reduce) { .hchip, .hfounder__av::before { animation: none !important; } }
/* El texto de Juan no ensancha el bloque del WhatsApp: pasa a 2 líneas si hace falta (en es los botones se apilaban a 1024) */
@media (min-width: 60rem) { .hero .cta:has(.hfounder) { max-width: 16.5rem; } }
/* Hero: dos columnas recién desde 60rem (960 px). Entre 56 y 60rem el texto quedaba en ~495 px y los botones se apilaban.
   En una columna, la imagen baja un poco (Juan): más aire entre las cifras y la ilustración con sus chips. */
@media (max-width: 59.99rem) {
  .hero--art .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero__art { margin-top: 0; }
  .hero__stage { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  .hchip--loja { top: 2%; left: 0; }
  .hchip--app { bottom: 4%; right: 0; }
  .hero__art img { animation: none; } /* sin parallax cuando la imagen va debajo del texto */
}

/* Hero: spot de estudio detrás de la ilustración (Juan, 19/09), como el del caso. Haz: núcleo amarillo más intenso, un poco
   por encima del centro; piso: elipse suave bajo la plataforma. El halo anterior casi no se veía en oscuro ni en celular. */
.hero__art::before { top: 46%; width: 96%; background: radial-gradient(circle, rgba(255,201,74,.58) 0%, rgba(255,201,74,.26) 32%, rgba(255,201,74,.07) 52%, rgba(255,201,74,0) 68%); }
.hero__art::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 4%; width: 86%; height: 16%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(15,61,62,.2) 0%, rgba(15,61,62,.08) 45%, rgba(15,61,62,0) 72%); pointer-events: none; }
:root[data-theme="dark"] .hero__art::before { background: radial-gradient(circle, rgba(255,201,74,.58) 0%, rgba(255,201,74,.26) 32%, rgba(255,201,74,.08) 54%, rgba(255,201,74,0) 70%); }
:root[data-theme="dark"] .hero__art::after { background: radial-gradient(ellipse at center, rgba(255,201,74,.28) 0%, rgba(255,201,74,.09) 45%, rgba(255,201,74,0) 72%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__art::before { background: radial-gradient(circle, rgba(255,201,74,.58) 0%, rgba(255,201,74,.26) 32%, rgba(255,201,74,.08) 54%, rgba(255,201,74,0) 70%); }
  :root:not([data-theme="light"]) .hero__art::after { background: radial-gradient(ellipse at center, rgba(255,201,74,.28) 0%, rgba(255,201,74,.09) 45%, rgba(255,201,74,0) 72%); }
}
/* Safari: <picture> es inline por defecto y el spot (::before/::after absolutos con % de ancho) quedaba con ancho 0 */
.hero__art { display: block; }

/* Cierre en celular (Juan, 20/09): «Planejar meu projeto» entraba justo (246 px de interior para ~245 px de texto)
   y caía a dos líneas con la flecha suelta al costado. Se le da aire a la caja, el botón se queda en una línea
   (nowrap) y el cuerpo baja de forma fluida con el ancho; la flecha acompaña el texto. */
@media (max-width: 40rem) {
  .close__box { padding: var(--dio-space-5); }
  .close__btn { white-space: nowrap; font-size: clamp(1.0625rem, 0.3rem + 3.4vw, 1.25rem); padding: 0.95rem clamp(0.85rem, 3vw, 1.5rem); min-height: 3.25rem; }
  .close__wa { padding: var(--dio-space-3); gap: var(--dio-space-3); }
}

/* Pie: enlaces sociales como íconos redondos, sin texto (Juan, 20/09: en escritorio las pastillas con texto
   caían a dos filas). Marcas en trazo (Tabler outline), como el resto de los íconos; el nombre va en `aria-label`. */
.foot-social { gap: var(--dio-space-3); }
.foot-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); transition: background var(--dio-dur) var(--dio-ease); }
.foot-social a:hover { background: rgba(255,255,255,.16); border: 0; }
.foot-social svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.foot-social a:hover svg { opacity: 1; }
@media (max-width: 71.99rem) { .foot-social a { width: 2.75rem; height: 2.75rem; } }

/* ===== Página de serviço: franja de plataformas, incluídos e planos (20/09) ===== */

/* Franja de plataformas (20/09): no es una lista de marcas, es un movimiento — de donde estás
   hacia una loja tuya. En escritorio las pastillas de origen quedan a la izquierda, la flecha
   amarilla al medio y el destino a la derecha, macizo; en celular la flecha gira y el destino
   baja. Sin logos ajenos: solo texto, por la decisión del 20/09 y por el aviso de marcas. */
.strip { display: grid; gap: var(--dio-space-4); margin-top: var(--dio-space-5); }
/* `fit-content` deja que el bloque de origen ocupe solo lo que necesita (envolviendo en dos
   filas) en vez de estirarse: así la flecha toma la columna del medio y queda centrada entre
   el origen y el destino, en lugar de pegada al destino. */
@media (min-width: 56rem) { .strip { grid-template-columns: fit-content(34rem) 1fr auto; align-items: center; gap: var(--dio-space-5); } }
.strip__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--dio-space-2) var(--dio-space-3); }
.strip__list li { font-family: var(--dio-font-display); font-weight: 600; font-size: var(--dio-text-sm); color: var(--dio-text-muted); background: var(--dio-surface-2); border: 1px dashed var(--dio-border-input); border-radius: var(--dio-radius-pill); padding: 0.4rem 0.95rem; }
/* La flecha apunta hacia abajo en celular y hacia la derecha en escritorio */
.strip__arrow { margin: 0; display: grid; place-items: center; color: var(--dio-amarillo); }
.strip__arrow svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
@media (min-width: 56rem) { .strip__arrow svg { transform: none; width: 2.5rem; height: 2.5rem; } }
.strip__to { margin: 0; display: grid; gap: 0.1rem; background: var(--dio-petroleo); color: #fff; border-radius: var(--r-inner); padding: var(--dio-space-4) var(--dio-space-5); }
.strip__to span { font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-amarillo); }
.strip__to strong { font-family: var(--dio-font-display); font-weight: 700; font-size: var(--dio-text-lg); line-height: var(--dio-leading-snug); }
.strip__note { margin: 0; font-size: var(--dio-text-xs); color: var(--dio-text-muted); max-width: var(--dio-container-text); }
/* Incluídos: entregables con ✓ en dos columnas desde 48rem. Mismo check que el cierre. */
.inc { list-style: none; padding: 0; margin: var(--dio-space-5) 0 0; display: grid; gap: var(--dio-space-4); }
@media (min-width: 48rem) { .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dio-space-4) var(--dio-space-6); } }
.inc li { display: flex; align-items: flex-start; gap: var(--dio-space-3); }
.inc__chk { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; border-radius: 50%; background: var(--dio-verde-100); color: var(--dio-verde-800); }
.inc__chk svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.inc__t { display: grid; gap: 0.15rem; }
.inc__t strong { font-family: var(--dio-font-display); font-weight: 600; line-height: var(--dio-leading-snug); }
.inc__t small { color: var(--dio-text-muted); font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); }

/* Planes: 3 tarjetas de precio; la destacada lleva borde de acento y etiqueta, sin cambiar de tamaño. */
.plans { display: grid; gap: var(--dio-space-5); margin-top: var(--dio-space-6); }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-feature); padding: var(--dio-space-6); box-shadow: var(--dio-shadow-sm); }
.section:nth-of-type(even) .plan { background: var(--dio-bg); }
.plan--hi { border-color: var(--dio-amarillo); box-shadow: var(--sh-hover); }
.plan__tag { position: absolute; top: 0; right: var(--dio-space-5); transform: translateY(-50%); background: var(--dio-amarillo); color: var(--dio-tinta); font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; border-radius: var(--dio-radius-pill); padding: 0.2rem 0.7rem; }
.plan__name { font-size: var(--dio-h4); margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: 0.15rem; margin: var(--dio-space-3) 0 0; }
.plan__price strong { font-family: var(--dio-font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.plan__hours { margin: var(--dio-space-2) 0 0; color: var(--dio-text-muted); font-size: var(--dio-text-sm); }
.plan__list { list-style: none; padding: var(--dio-space-4) 0 0; margin: var(--dio-space-4) 0 0; border-top: 1px dashed var(--dio-border-input); display: grid; gap: var(--dio-space-2); font-size: var(--dio-text-sm); }
.plan__list li { position: relative; padding-left: 1.6rem; }
.plan__list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.6rem; height: 0.6rem; background: var(--dio-verde-marca); transform: rotate(45deg); border-radius: 2px; }
:root[data-theme="dark"] .inc__chk { background: color-mix(in srgb, var(--dio-verde-300) 18%, transparent); color: var(--dio-verde-100); }
:root[data-theme="dark"] .strip__list li { background: var(--dio-petroleo-800); border-color: var(--dio-petroleo-600); color: var(--dio-niebla); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .inc__chk { background: color-mix(in srgb, var(--dio-verde-300) 18%, transparent); color: var(--dio-verde-100); }
  :root:not([data-theme="light"]) .strip__list li { background: var(--dio-petroleo-800); border-color: var(--dio-petroleo-600); color: var(--dio-niebla); }
}

/* Método con 5 pasos (páginas de serviço): la grilla fija de 4 dejaba el quinto solo en una fila.
   Con cinco o más, se reparten en una sola fila y el punteado los sigue conectando. */
@media (min-width: 64rem) {
  /* Cinco etapas en una fila: cada tarjeta queda angosta, así que el texto de cada paso es
     de una frase. El detalle vive en las secciones de abajo, no acá. */
  .process:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dio-space-4); }
  .process:has(> li:nth-child(5)) .step { padding-inline: var(--dio-space-4); }
}

/* Enlaces relacionados al pie de una página de serviço: el hub reparte hacia sus vecinos
   (§3.4 de arquitectura-seo). Anchor descriptivo, una línea de contexto y flecha con resorte. */
.rels { display: grid; gap: var(--dio-space-4); margin-top: var(--dio-space-6); }
@media (min-width: 48rem) { .rels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dio-space-5); } }
.rel { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--dio-space-4); text-decoration: none; color: var(--dio-text) !important; background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-feature); padding: var(--dio-space-5); overflow: hidden; transition: transform var(--dio-dur) var(--dio-ease), box-shadow var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.section:nth-of-type(even) .rel { background: var(--dio-bg); }
/* Filete de acento que entra desde la izquierda al pasar el mouse */
.rel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--dio-amarillo); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--dio-dur) var(--dio-ease); }
.rel:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); border-color: var(--dio-petroleo-300); }
.rel:hover::before { transform: scaleY(1); }
/* Chip de ícono: petróleo con trazo amarillo, igual que «Para quem» (.seg2__ico) y los números
   de paso (.step__n) — decisión 19/09. En claro el chip antes era petroleo-50, que contra la
   tarjeta blanca da 1,07:1 y dejaba el ícono flotando sin caja (21/09). */
.rel__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-inner); background: var(--dio-petroleo); color: var(--dio-amarillo); transition: background var(--dio-dur) var(--dio-ease), color var(--dio-dur) var(--dio-ease); }
.rel__ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* El chip no cambia de color al pasar el mouse (21/09): el hover lo llevan la tarjeta —sube,
   sombra, borde, barra lateral— y la flecha `.rel__go`. Igual que «Para quem» (.seg2__ico). */
.rel__t { display: grid; gap: 0.2rem; min-width: 0; }
.rel__t strong { font-family: var(--dio-font-display); font-weight: 600; font-size: var(--dio-text-lg); line-height: var(--dio-leading-snug); }
.rel__t span { color: var(--dio-text-muted); font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); }
.rel__go { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; border: 1px solid var(--dio-border-input); color: var(--dio-verde-700); transition: transform var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.rel__go svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rel:hover .rel__go { transform: translateX(4px); border-color: var(--dio-amarillo); }
:root[data-theme="dark"] .rel__ico { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
:root[data-theme="dark"] .rel__go { color: var(--dio-amarillo); border-color: var(--dio-petroleo-400); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rel__ico { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
  :root:not([data-theme="light"]) .rel__go { color: var(--dio-amarillo); border-color: var(--dio-petroleo-400); }
}

/* Cualquier sección con un CTA suelto debajo de una grilla necesita aire (antes solo lo tenían
   «services» y «apps»: en «Prova» el botón quedaba pegado a las tarjetas). */
.section > .wrap > p:has(> .btn) { margin-top: var(--dio-space-6); }

/* Hero de página de serviço: três chips de clientes reais en vez de uno (Juan, 20/09).
   Se posicionan por `pos` y no por tipo, para repartirlos sin tapar la ilustración:
   dos a la izquierda (arriba y abajo) y uno abajo a la derecha, fuera del centro del objeto. */
.hero__stage:has(.hchip--tr) { display: grid; align-content: center; gap: var(--dio-space-3); }
/* Hasta 60rem el hero va apilado y la escena ocupa todo el ancho: ahí las tres cards salen
   del modo flotante y se ponen en fila debajo, que es la única forma de que no se pisen ni
   se salgan de la pantalla (Juan, 20/09: «están encimadas»). */
.hchip--tl, .hchip--tr, .hchip--bl, .hchip--ml { position: static; inset: auto; max-width: none; }
.hero__stage:has(.hchip--tr) > .hchip { justify-self: start; }
@media (min-width: 60rem) {
  .hero__stage:has(.hchip--tr) { min-height: 26rem; gap: 0; }
  .hchip--tl, .hchip--tr, .hchip--bl, .hchip--ml { position: absolute; max-width: min(15rem, 100%); }
  /* `ml`: media altura a la izquierda, para cuando tres cards en las esquinas dejan una muy abajo */
  .hchip--ml { top: 63%; bottom: auto; left: -8%; right: auto; }
  .hchip--tl { top: 1%; bottom: auto; left: -8%; right: auto; }
  /* `--chip-top` deja a cada página corregir la altura: una escena muy horizontal deja
     el chip sobre la ilustración, y el valor que sirve para una vertical no sirve ahí. */
  .hchip--tr { top: var(--chip-top, 26%); bottom: auto; left: auto; right: -7%; }
  .hchip--bl { top: auto; bottom: 2%; left: -6%; right: auto; }
}
/* Card más fina: miniatura con anillo, nombre en Sora y el dato duro con punto de «no ar». */
.hchip { gap: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.4rem; border-radius: 13px;
  background: color-mix(in srgb, var(--dio-surface) 88%, transparent);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1);
  border: 1px solid color-mix(in srgb, var(--dio-border) 70%, transparent);
  box-shadow: 0 10px 26px -14px rgba(1,32,33,.4), 0 1px 3px rgba(1,32,33,.08); }
.hchip img { width: 2.1rem; height: 2.1rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(1,32,33,.12); }
.hchip strong { font-size: 0.8125rem; letter-spacing: -0.01em; }
.hchip > span > span { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; }
.hchip > span > span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dio-verde); flex: none; }
:root[data-theme="dark"] .hchip { background: color-mix(in srgb, var(--dio-petroleo-700) 86%, transparent); border-color: color-mix(in srgb, var(--dio-petroleo-400) 60%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hchip { background: color-mix(in srgb, var(--dio-petroleo-700) 86%, transparent); border-color: color-mix(in srgb, var(--dio-petroleo-400) 60%, transparent); }
}
.motion .hchip { animation-delay: calc(520ms + var(--c, 0) * 110ms), calc(-2s * var(--c, 0)); }

/* Línea de precio del hero: solo la cifra pesa; «a partir de» y el prazo bajan de tono,
   y la advertencia entre paréntesis pasa a letra chica debajo (Juan, 20/09: «menos peso»). */
.hero .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0; margin-top: var(--dio-space-4); font-weight: 400; }
.hero .price > span { color: var(--dio-text-muted); font-size: var(--dio-text-sm); }
.hero .price > span + span::before { content: "·"; display: inline-block; margin-inline: 0.6rem; font-family: var(--dio-font-text); font-size: var(--dio-text-sm); font-weight: 400; color: var(--dio-border-input); vertical-align: middle; }
.hero .price > span:nth-child(2) { color: var(--dio-text); font-family: var(--dio-font-display); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); font-variant-numeric: tabular-nums lining-nums; }
.hero .price small { flex-basis: 100%; color: var(--dio-text-muted); font-size: var(--dio-text-xs); }

/* ===== Pasos del cierre: de tres cajas sueltas a un recorrido (20/09) =====
   Antes eran tres pastillas iguales con un círculo amarillo y nada que las uniera: se leían
   como una lista, no como «esto pasa en este orden». Ahora los números van sobre una línea
   punteada que los conecta —horizontal en escritorio, vertical en celular, como una línea de
   tiempo— y el fondo baja de peso para que el protagonista siga siendo el botón amarillo. */
.close__steps { position: relative; gap: var(--dio-space-4); grid-auto-rows: minmax(2.75rem, auto); counter-reset: s; }
.close__steps li { position: relative; flex-direction: column; align-items: flex-start; gap: var(--dio-space-3); background: none; border: 0; padding: 0 0 0 2.9rem; font-weight: 500; color: rgba(255,255,255,.88); }
.close__steps li span { position: absolute; left: 0; top: -0.1rem; width: 2rem; height: 2rem; background: none; border: 1.5px solid var(--dio-amarillo); color: var(--dio-amarillo); font-size: 0.8125rem; transition: background var(--dio-dur) var(--dio-ease), color var(--dio-dur) var(--dio-ease); }
/* Celular: línea de tiempo vertical, del primer número al último */
.close__steps::before { content: ""; position: absolute; left: 1rem; top: 1.6rem; bottom: 1.4rem; border-left: 2px dashed rgba(255,255,255,.22); }
.close__steps li:last-child { padding-bottom: 0; }
@media (min-width: 48rem) {
  .close__steps { grid-template-columns: repeat(3, 1fr); gap: var(--dio-space-5); }
  .close__steps li { padding: 2.9rem 0 0; }
  .close__steps li span { top: 0; }
  /* La línea pasa a horizontal y arranca y termina en los números de los extremos */
  /* Empieza en el número 1 y termina en el 3: no sigue de largo hasta el borde */
  .close__steps::before { left: 1rem; right: calc(33.333% - 1rem); top: 1rem; bottom: auto; border-left: 0; border-top: 2px dashed rgba(255,255,255,.22); }
}
/* El número del cierre no se rellena al pasar el mouse (21/09, mismo criterio que los chips):
   sobre el petróleo del cierre, el contorno amarillo ya es el acento. */
:root[data-theme="light"] .close__steps li { color: rgba(255,255,255,.88); }

/* Celular, solo en las páginas con cards posicionadas (serviço): ahí las tres salen del modo
   flotante y se apilan en lista debajo da escena — una lista que flota queda mal, así que
   quedan quietas. La home mantiene su animación (Juan, 20/09). */
@media (max-width: 59.99rem) {
  .motion .hero__stage:has(.hchip--tr) .hchip { animation: none; }
}

/* ===== Comparativo de plataformas (20/09) =====
   Una fila por plataforma. En escritorio parece una tabla, con encabezado propio; en celular
   cada fila se convierte en tarjeta y cada dato lleva su etiqueta al lado, porque una tabla de
   verdad se corta en pantalla chica (pendiente conocido de la bitácora). */
.cmp { margin-top: var(--dio-space-6); display: grid; gap: var(--dio-space-3); }
.cmp__head { display: none; }
.cmp__row { display: grid; gap: var(--dio-space-3); background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-inner); padding: var(--dio-space-4) var(--dio-space-5); }
.section:nth-of-type(even) .cmp__row { background: var(--dio-bg); }
.cmp--hi { border-color: var(--dio-amarillo); box-shadow: var(--sh-hover); }
.cmp__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--dio-space-3); }
@media (min-width: 60rem) { .cmp__name { flex-direction: column; align-items: flex-start; gap: 0.45rem; } }
.cmp__name strong { font-family: var(--dio-font-display); font-size: var(--dio-text-lg); }
.cmp__tag { white-space: nowrap; font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; background: var(--dio-amarillo); color: var(--dio-tinta); border-radius: var(--dio-radius-pill); padding: 0.15rem 0.6rem; }
.cmp__c { display: grid; gap: 0.1rem; }
.cmp__k { font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-text-muted); }
.cmp__v { font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); }
.cmp--hi .cmp__v { font-weight: 600; }
@media (min-width: 60rem) {
  .cmp { gap: 0.5rem; }
  .cmp__head, .cmp__row { grid-template-columns: var(--cmp-cols, 1.1fr 1fr 1.2fr 1.5fr); align-items: center; gap: var(--dio-space-5); }
  .cmp__head { display: grid; padding: 0 var(--dio-space-5) var(--dio-space-2); font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-text-muted); }
  .cmp__k { display: none; }
  .cmp__row { padding: var(--dio-space-4) var(--dio-space-5); }
}
:root[data-theme="dark"] .cmp__row { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .cmp--hi { border-color: var(--dio-amarillo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cmp__row { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .cmp--hi { border-color: var(--dio-amarillo); }
}

/* Migas en oscuro: mismo contraste que el resto del texto secundario del hero. */
:root[data-theme="dark"] .crumbs a { color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .crumbs a:hover, :root[data-theme="dark"] .crumbs [aria-current="page"] { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crumbs a { color: var(--dio-niebla-dark); }
  :root:not([data-theme="light"]) .crumbs a:hover, :root:not([data-theme="light"]) .crumbs [aria-current="page"] { color: #fff; }
}
/* Celular: una sola línea. Los niveles intermedios siguen en el DOM para el lector de pantalla
   (NN/g guía 9: la miga nunca debe envolver; guía 11: en celular alcanza con un nivel). */
@media (max-width: 47.99rem) {
  .crumbs ol { flex-wrap: nowrap; }
  .crumbs li:not(:nth-last-child(-n+2)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* el primer nivel visible no lleva separador delante (el de antes está oculto) */
  .crumbs li:nth-last-child(2)::before { content: none; }
  .crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

:root[data-theme="dark"] .crumbs a:hover { background: var(--dio-petroleo-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .crumbs a:hover { background: var(--dio-petroleo-700); } }

/* Escopo: la lista de entregas se leía como texto corrido. Se le da ritmo con un filete
   punteado entre filas (no una tarjeta: la sección ya vive dentro de un panel y anidar bordes
   está prohibido) y el check gana presencia, que es lo que ancla la lectura en diagonal. */
.inc { gap: 0; }
@media (min-width: 48rem) { .inc { column-gap: var(--dio-space-7); row-gap: 0; } }
.inc li { padding: var(--dio-space-4) 0; border-bottom: 1px dashed var(--dio-border); align-items: flex-start; }
.inc li:last-child { border-bottom: 0; }
@media (min-width: 48rem) {
  /* en dos columnas, la última fila de cada una no lleva filete */
  .inc li:nth-last-child(-n+2) { border-bottom: 0; }
}
.inc__chk { width: 1.75rem; height: 1.75rem; margin-top: 0; background: var(--dio-verde-700); color: #fff; box-shadow: 0 2px 6px -2px rgba(43,150,112,.5); }
.inc__chk svg { width: 0.95rem; height: 0.95rem; stroke-width: 3.2; }
.inc__t strong { font-size: var(--dio-text-lg); }
.inc__t small { margin-top: 0.1rem; }
:root[data-theme="dark"] .inc li { border-bottom-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .inc__chk { background: var(--dio-verde); color: var(--dio-tinta); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .inc li { border-bottom-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .inc__chk { background: var(--dio-verde); color: var(--dio-tinta); box-shadow: none; }
}

/* Código de error como pieza gráfica (Juan, 20/09): el número en amarillo, estirado en altura.
   El estirado va en un <span> propio con scaleY, porque `transform` no ocupa espacio en el flujo:
   la altura la reserva el line-height del <p>, y así el H1 no se le monta encima. */
.hero__code { margin: 0 0 var(--dio-space-3); line-height: 1; }
.hero__code span { display: inline-block; font-family: var(--dio-font-display); font-weight: 800; font-size: clamp(3.5rem, 2.2rem + 6vw, 7rem); line-height: 0.78; letter-spacing: -0.03em; color: var(--dio-amarillo); transform: scaleY(1.45); transform-origin: top left; font-variant-numeric: tabular-nums lining-nums; }
.hero__code + h1, .hero__code + .hero__badge, .hero__code + .eyebrow { margin-top: clamp(1.75rem, 1rem + 3vw, 3.25rem); }

/* Las páginas internas llevan migas dentro del hero y las de primer nivel no. Si la miga queda en
   el flujo, empuja todo 33 px y el badge de categoría arranca más abajo que en la home (medido a
   1280 y a 390). Se la saca del flujo y se la ancla sobre el contenido del hero: así sube hacia el
   encabezado, el badge queda a la misma altura en todo el sitio y el orden de lectura no cambia. */
.hero:has(.crumbs) > .wrap { position: relative; }
.hero .crumbs { position: absolute; left: 0; bottom: calc(100% + var(--dio-space-5)); margin: 0; }
@media (max-width: 47.99rem) { .hero .crumbs { bottom: calc(100% + var(--dio-space-3)); max-width: 100%; } }

/* Franja en oscuro: el origen queda hueco (solo el punteado) y el destino sube de tono, porque
   sobre el petróleo del fondo los dos se veían iguales y se perdía el «de aquí para allá». */
:root[data-theme="dark"] .strip__list li { background: transparent; border-color: var(--dio-petroleo-400); color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .strip__to { background: var(--dio-petroleo-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .strip__list li { background: transparent; border-color: var(--dio-petroleo-400); color: var(--dio-niebla-dark); }
  :root:not([data-theme="light"]) .strip__to { background: var(--dio-petroleo-600); }
}

/* Escopo, segunda vuelta (20/09): los textos ahora son de una línea, así que el bloque respira
   con menos alto. La fila se ilumina al pasar el mouse —no para decorar: marca dónde está el
   ojo en una lista de seis— y el filete se acorta al ancho del texto, para que no corte de
   punta a punta y separe sin gritar. */
.inc li { padding: var(--dio-space-3) 0; gap: var(--dio-space-3); border-bottom: 0; position: relative; transition: background var(--dio-dur) var(--dio-ease); border-radius: var(--r-inner); }
.inc li::after { content: ""; position: absolute; left: 2.75rem; right: 0; bottom: 0; border-bottom: 1px dashed var(--dio-border); }
.inc li:last-child::after { content: none; }
@media (min-width: 48rem) { .inc li:nth-last-child(-n+2)::after { content: none; } }
.inc li:hover { background: color-mix(in srgb, var(--dio-surface-2) 60%, transparent); }
.inc li:hover::after { border-bottom-color: transparent; }
.inc__chk { transition: transform var(--dio-dur) var(--dio-ease); }
.inc li:hover .inc__chk { transform: scale(1.08); }
.inc__t strong { font-size: var(--dio-text-md); }
.inc__t small { color: var(--dio-text-muted); }
:root[data-theme="dark"] .inc li::after { border-bottom-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .inc li:hover { background: color-mix(in srgb, var(--dio-petroleo-700) 55%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .inc li::after { border-bottom-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .inc li:hover { background: color-mix(in srgb, var(--dio-petroleo-700) 55%, transparent); }
}

/* «A conta», segunda vuelta (20/09): la tasa por venta es el número que el lojista vino a buscar,
   así que deja de ser una celda más y pasa a cuerpo grande, tabular, alineada entre filas — el ojo
   baja por esa columna y compara 0,99 · 2 · 1,25 · 0 sin leer nada más. La fila nuestra lo pinta
   de verde: es el único cero de la tabla y es el argumento entero de la sección. */
.cmp__c--key .cmp__v { font-family: var(--dio-font-display); font-weight: 800; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.05; color: var(--dio-text); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
.cmp--hi .cmp__c--key .cmp__v { color: var(--dio-verde-700); }
/* En escritorio, más aire para la columna de la tasa y el límite en cuerpo chico */
@media (min-width: 60rem) {
  .cmp__row .cmp__c:last-child .cmp__v { font-size: var(--dio-text-xs); }
}
.cmp__name strong { line-height: var(--dio-leading-snug); }
:root[data-theme="dark"] .cmp__c--key .cmp__v { color: #fff; }
:root[data-theme="dark"] .cmp--hi .cmp__c--key .cmp__v { color: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cmp__c--key .cmp__v { color: #fff; }
  :root:not([data-theme="light"]) .cmp--hi .cmp__c--key .cmp__v { color: var(--dio-verde-300); }
}

/* Método, segunda vuelta (20/09): el bloque «Você recebe» era la parte más importante de cada
   paso —es lo único que el cliente se lleva— y se distinguía solo por un filete punteado. Ahora
   se apoya en un fondo verde muy leve, que lo separa del relato sin encerrarlo en otra caja.
   La tarjeta responde al mouse y el número se invierte, para que se vea que la fila es un
   recorrido y no cinco bloques sueltos. */
.step { transition: transform var(--dio-dur) var(--dio-ease), box-shadow var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.step:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); border-color: var(--dio-petroleo-300); }
.step__n { transition: background var(--dio-dur) var(--dio-ease), color var(--dio-dur) var(--dio-ease); }
/* El número tampoco se da vuelta en hover (21/09, mismo criterio que los chips de ícono). */
.step__get { border-top: 0; background: var(--dio-tint); border-radius: var(--r-inner); padding: var(--dio-space-3) var(--dio-space-4); margin-top: var(--dio-space-4); font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); }
@media (min-width: 64rem) { .step__get { margin-top: var(--dio-space-4); } }
.step__get span { margin-bottom: 0.2rem; }  /* el color lo pone la regla de eyebrow (verde-700/300), igual que .seg2__how y .case__ch */


@media (prefers-color-scheme: dark) {
}

/* Planes, segunda vuelta (20/09). Tres arreglos chicos que cambian la lectura:
   1. Las horas eran un renglón gris más; ahora son una pastilla, porque es lo que de verdad
      separa un plan del otro — el resto se hereda.
   2. «Tudo do Plano 1, e mais:» sale de la lista y se convierte en el escalón de partida, así
      los puntos de abajo son solo lo que este plan suma.
   3. La tarjeta destacada se apoya en un fondo apenas cálido además del borde amarillo, y todas
      responden al mouse. */
.plan { transition: transform var(--dio-dur) var(--dio-ease), box-shadow var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); border-color: var(--dio-petroleo-300); }
.plan--hi { background: color-mix(in srgb, var(--dio-amarillo) 5%, var(--dio-surface)); }
.section:nth-of-type(even) .plan--hi { background: color-mix(in srgb, var(--dio-amarillo) 5%, var(--dio-bg)); }
.plan__price span { font-size: var(--dio-text-xs); color: var(--dio-text-muted); }
.plan__hours { display: inline-block; margin: var(--dio-space-3) 0 0; background: var(--dio-surface-2); border-radius: var(--dio-radius-pill); padding: 0.3rem 0.8rem; font-size: var(--dio-text-xs); font-weight: 700; color: var(--dio-text); }
.plan__from { margin: var(--dio-space-4) 0 0; padding-top: var(--dio-space-4); border-top: 1px dashed var(--dio-border-input); font-size: var(--dio-text-sm); font-weight: 600; color: var(--dio-text-muted); }
.plan__from + .plan__list { padding-top: var(--dio-space-3); margin-top: 0; border-top: 0; }
:root[data-theme="dark"] .plan--hi { background: color-mix(in srgb, var(--dio-amarillo) 7%, var(--dio-petroleo-900)); }
:root[data-theme="dark"] .plan__hours { background: var(--dio-petroleo-700); color: var(--dio-niebla); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan--hi { background: color-mix(in srgb, var(--dio-amarillo) 7%, var(--dio-petroleo-900)); }
  :root:not([data-theme="light"]) .plan__hours { background: var(--dio-petroleo-700); color: var(--dio-niebla); }
}

/* ===== Conversão: tarjetas con ícono (20/09) =====
   La sección usaba los mismos ✓ en dos columnas que «O que você recebe», y dos listas iguales
   en la misma página se leían como una sola, larguísima. Acá no son entregas de un paquete
   cerrado: son cuatro frentes que se contratan sueltos, así que cada uno va en su tarjeta con
   su ícono. El ícono no decora: en una grilla de cuatro es lo que deja distinguirlas de un
   vistazo, sin leer los títulos. */
.decks { display: grid; gap: var(--dio-space-4); margin-top: var(--dio-space-6); }
@media (min-width: 40rem) { .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .decks { grid-template-columns: repeat(var(--decks-cols, 4), minmax(0, 1fr)); gap: var(--dio-space-5); } }
.deck { display: flex; flex-direction: column; gap: var(--dio-space-3); background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--r-feature); padding: var(--dio-space-5); transition: transform var(--dio-dur) var(--dio-ease), box-shadow var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.section:nth-of-type(even) .deck { background: var(--dio-bg); }
.deck:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); border-color: var(--dio-petroleo-300); }
/* Mismo chip que .rel__ico / .seg2__ico: petróleo con trazo amarillo en los dos temas. */
.deck__ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-inner); background: var(--dio-petroleo); color: var(--dio-amarillo); transition: background var(--dio-dur) var(--dio-ease), color var(--dio-dur) var(--dio-ease); }
.deck__ico svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Sin cambio de color en hover: lo lleva la tarjeta (sube, sombra, borde). Ver .rel__ico. */
.deck h3 { font-size: var(--dio-text-lg); line-height: var(--dio-leading-snug); margin: 0; }
.deck p { margin: 0; color: var(--dio-text-muted); font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); }
:root[data-theme="dark"] .deck { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .deck__ico { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .deck { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .deck__ico { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
}

/* «Para quem é», ahora que abre la página (20/09). Es la primera decisión del visitante: en cuál
   de las tres me reconozco. Tres ajustes para que eso se resuelva de un vistazo:
   1. El badge —«Vou começar a vender»— es lo que hace elegir, y competía con el ícono en un gris
      chico. Pasa a pastilla, que es lo primero que se lee de cada tarjeta.
   2. El filete de color del borde superior estaba al 25% y solo se completaba al pasar el mouse:
      en celular, donde no hay mouse, no se veía nunca. Ahora entra completo.
   3. La prueba de cliente se apoya en el fondo de la tarjeta en vez de llevar caja propia con
      borde, que era un borde dentro de otro borde. */
.seg2__head { gap: var(--dio-space-3); margin-bottom: var(--dio-space-4); }
.seg2__who { background: var(--dio-tint); color: var(--dio-tint-text); border-radius: var(--dio-radius-pill); padding: 0.3rem 0.75rem; letter-spacing: var(--dio-tracking-caps); }
.seg2::before { transform: scaleX(1); height: 3px; }
.seg2:hover::before { transform: scaleX(1); }
.seg2__proof { background: var(--dio-surface-2); border: 0; }
main > .section:nth-of-type(even) .seg2__proof { background: var(--dio-bg); }
.seg2__link { font-weight: 600; }
:root[data-theme="dark"] .seg2__who { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
:root[data-theme="dark"] .seg2__proof { background: var(--dio-petroleo-800); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg2__who { background: var(--dio-petroleo-700); color: var(--dio-amarillo); }
  :root:not([data-theme="light"]) .seg2__proof { background: var(--dio-petroleo-800); }
}

/* Comparativo cuya columna clave es una frase, no una cifra (Apps): el cuerpo grande de «A conta»
   descuadraría la fila. Se distingue por peso y color, y la fila nuestra pinta el texto de verde. */
.section--compare:has(.cmp__c--key .cmp__v:not(:empty)) .cmp__c--key .cmp__v { font-size: var(--dio-text-md); font-weight: 600; line-height: var(--dio-leading-snug); letter-spacing: 0; }
@media (min-width: 60rem) {
}

/* ===== Promesa y límite, lado a lado (20/09) =====
   El CDC art. 54 §4 manda que la cláusula que limita un derecho del consumidor vaya «com
   destaque… permitindo sua imediata e fácil compreensão». Por eso lo que no depende de nosotros
   ocupa una columna entera al lado de la garantía, con el mismo cuerpo de letra, en vez de una
   nota al pie. El color los distingue sin esconder ninguno: verde lo que prometemos, petróleo
   lo que decide la tienda. */
.duo { display: grid; gap: var(--dio-space-4); margin-top: var(--dio-space-6); }
@media (min-width: 56rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dio-space-5); } }
.duo__c { border-radius: var(--r-feature); padding: var(--dio-space-6); border: 1px solid var(--dio-border); }
.duo--si { background: var(--dio-tint); border-color: var(--dio-tint-line); }
.duo--no { background: var(--dio-surface); }
.section:nth-of-type(even) .duo--no { background: var(--dio-bg); }
.duo__c h3 { font-size: var(--dio-h4); margin: 0 0 var(--dio-space-3); line-height: var(--dio-leading-snug); }
.duo--si h3 { color: var(--dio-verde-800); }
.duo__c p { margin: 0 0 var(--dio-space-3); color: var(--dio-text); line-height: var(--dio-leading-body); }
.duo__c p:last-child { margin-bottom: 0; }
.duo__list { list-style: none; padding: var(--dio-space-4) 0 0; margin: var(--dio-space-4) 0 0; border-top: 1px dashed var(--dio-border-input); display: grid; gap: var(--dio-space-2); font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.duo__list li { position: relative; padding-left: 1.5rem; }
.duo__list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.55rem; height: 0.55rem; border-radius: 2px; transform: rotate(45deg); background: var(--dio-verde-marca); }
.duo--no .duo__list li::before { background: var(--dio-border-input); }
:root[data-theme="dark"] .duo--si { background: var(--dio-tint); border-color: var(--dio-tint-line); }
:root[data-theme="dark"] .duo--si h3 { color: var(--dio-verde-300); }
:root[data-theme="dark"] .duo--no { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .duo--si { background: var(--dio-tint); border-color: var(--dio-tint-line); }
  :root:not([data-theme="light"]) .duo--si h3 { color: var(--dio-verde-300); }
  :root:not([data-theme="light"]) .duo--no { background: var(--dio-petroleo-900); border-color: var(--dio-petroleo-600); }
}

/* La letra chica de una sección de precio no es un descargo escondido: dice qué no entra y qué
   sube el presupuesto, que es lo que el cliente necesita antes de pedir la propuesta. Se le da
   el mismo tratamiento que ya tiene la nota del método — fondo cálido y filete a la izquierda —
   para que se lea como parte de la oferta y no como un pie de página. */

/* Tarjeta de prueba: quién es y, cuando hay algo público, el enlace para abrirlo */
.deck__meta { margin: 0; font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: var(--dio-tracking-caps); text-transform: uppercase; color: var(--dio-text-muted); }
.deck .svc__link { margin-top: var(--dio-space-3); }

/* Vista previa del sistema dentro de la tarjeta de prueba */
.deck__shot { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top center; border-radius: var(--r-inner); border: 1px solid var(--dio-border); margin-bottom: var(--dio-space-4); background: var(--dio-surface-2); }
:root[data-theme="dark"] .deck__shot { border-color: var(--dio-petroleo-600); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deck__shot { border-color: var(--dio-petroleo-600); } }

/* ===== Telas: explicación + captura del sistema real (portal do cliente, DIO Timer) =====
   Dos formas, según lo que se muestra:
   · captura de pantalla entera (el portal) → texto arriba, captura ancha debajo. A media
     columna el texto de una interfaz queda en 7 px y no se lee: la prueba tiene que ser legible.
   · ventana de app (DIO Timer, 776 px) → texto y ventana lado a lado, alternando el lado.
   La captura es del producto real, con su fondo petróleo: por eso lleva marco y sombra en vez
   de fondo de tarjeta, y se lee igual en los dos temas. */
.telas { display: grid; gap: var(--dio-space-8); margin-top: var(--dio-space-6); }
.tela { display: grid; gap: var(--dio-space-5); }
/* La fila «texto | captura» que el componente promete: sin columnas, la captura se estiraba
   a todo el ancho del contenedor y aplastaba el texto contra el borde superior. */
@media (min-width: 60rem) {
  .tela { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--dio-space-7); align-items: center; }
  .tela--flip .tela__txt { order: 2; }
}
.tela__txt h3 { font-size: var(--dio-text-lg); line-height: var(--dio-leading-snug); margin: 0 0 var(--dio-space-3); }
.tela__txt p { margin: 0 0 var(--dio-space-3); color: var(--dio-text-muted); line-height: var(--dio-leading-normal); }
.tela__txt p:last-child { margin-bottom: 0; }
.tela__list { list-style: none; padding: 0; margin: var(--dio-space-4) 0 0; display: grid; gap: var(--dio-space-2); }
.tela__list li { position: relative; padding-left: var(--dio-space-5); font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); }
.tela__list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.5em; width: 0.5rem; height: 0.5rem; background: var(--dio-amarillo); transform: rotate(45deg); border-radius: 1px; }
.tela__shot { margin: 0; }
.tela__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid color-mix(in srgb, var(--dio-petroleo) 12%, transparent); box-shadow: 0 1px 2px rgba(1,32,33,.05), 0 10px 24px -10px rgba(1,32,33,.14), 0 36px 64px -28px rgba(1,32,33,.22); background: var(--dio-petroleo-900); }
.tela__shot figcaption { margin: var(--dio-space-3) 0 0; font-size: var(--dio-text-xs); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); }
:root[data-theme="dark"] .tela__shot img { border-color: var(--dio-petroleo-600); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tela__shot img { border-color: var(--dio-petroleo-600); } }
/* Captura de pantalla entera: el texto no pasa del ancho de lectura y la lista se abre en
   dos columnas cuando hay sitio, para que el bloque no sea una tira larga. */
.tela--wide .tela__txt { max-width: 68ch; }
@media (min-width: 48rem) { .tela--wide .tela__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dio-space-6); } }
/* Ventana de app: al lado del texto, sin estirarla (776 px nativos). */
@media (min-width: 64rem) {
  .tela--app { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dio-space-7); align-items: center; }
  .tela--app.tela--flip .tela__txt { order: 2; }
}
.tela--app .tela__shot { max-width: 21rem; margin-inline: auto; }
.tela--app .tela__shot img { max-width: 100%; }
/* La cifra de prueba al pie de la sección, con el mismo tratamiento que las otras pruebas. */
.section--tela .note { font-weight: 600; color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .section--tela .note { color: var(--dio-niebla); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section--tela .note { color: var(--dio-niebla); } }

/* Fecha de vigencia de las páginas legales, bajo el subtítulo del hero. */
.hero__updated { margin: var(--dio-space-4) 0 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); }

/* Estados del portal, como pastillas: el componente real pesa más que una lista de viñetas */
.tela__states { list-style: none; padding: 0; margin: var(--dio-space-5) 0 0; display: grid; gap: var(--dio-space-3); }
.tela__states li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; font-size: var(--dio-text-sm); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); }
.tela__states li > span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: var(--dio-radius-pill); font-size: var(--dio-text-xs); font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; }
.tela__states li > span::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; flex: none; }
.st--neutro > span { background: var(--dio-surface-2); color: var(--dio-text-muted); }
.st--curso  > span { background: var(--dio-tint-ok); color: var(--dio-verde-800); }
.st--espera > span { background: var(--dio-amarillo-100); color: var(--dio-amarillo-800); }
.st--ok     > span { background: var(--dio-verde-800); color: var(--dio-blanco); }
:root[data-theme="dark"] .st--neutro > span { background: var(--dio-petroleo-700); color: var(--dio-niebla-dark); }
:root[data-theme="dark"] .st--curso > span { color: var(--dio-verde-300); }
:root[data-theme="dark"] .st--espera > span { background: color-mix(in srgb, var(--dio-amarillo) 18%, transparent); color: var(--dio-amarillo-300); }
:root[data-theme="dark"] .st--ok > span { background: var(--dio-verde); color: var(--dio-tinta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st--neutro > span { background: var(--dio-petroleo-700); color: var(--dio-niebla-dark); }
  :root:not([data-theme="light"]) .st--curso > span { color: var(--dio-verde-300); }
  :root:not([data-theme="light"]) .st--espera > span { background: color-mix(in srgb, var(--dio-amarillo) 18%, transparent); color: var(--dio-amarillo-300); }
  :root:not([data-theme="light"]) .st--ok > span { background: var(--dio-verde); color: var(--dio-tinta); }
}
/* La cifra que prueba la sección, en cuerpo grande y no como nota al pie */
.tela__txt p.tela__stat { margin: var(--dio-space-7) 0 0; display: flex; align-items: baseline; gap: var(--dio-space-3); border-top: 1px solid var(--dio-border); padding-top: var(--dio-space-5); }
.tela__stat strong { font-family: var(--dio-font-display); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); line-height: 1; color: var(--dio-text); font-variant-numeric: tabular-nums lining-nums; }
.tela__stat span { font-size: var(--dio-text-sm); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); }

/* Escenas de servicio: la pila de servidores es la más ancha del set y con la misma altura
   que las demás pesa de más en la fila; se le baja un punto justo (9rem → 8.25rem) */
.svc__art[data-scene="01-servidores"] img { height: 8.25rem; }

/* La captura queda sola en su columna y el blanco alrededor la dejaba flotando. Detrás de una
   pantalla rectangular un círculo amarillo se lee como esfera pegada (Juan, 22/09): es una luz
   ancha y baja, más el reflejo del piso, que es lo que apoya la captura sin competir con ella */
.tela__shot { position: relative; z-index: 1; }
.tela__shot::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 118%; aspect-ratio: 3.2; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,201,74,.2) 0%, rgba(255,201,74,.08) 45%, rgba(255,201,74,0) 74%); pointer-events: none; }
.tela__shot::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -7%; width: 82%; height: 15%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,201,74,.24) 0%, rgba(255,201,74,.1) 45%, rgba(255,201,74,0) 74%); pointer-events: none; }
:root[data-theme="dark"] .tela__shot::before { background: radial-gradient(ellipse at center, rgba(255,201,74,.14) 0%, rgba(255,201,74,.05) 45%, rgba(255,201,74,0) 74%); }
:root[data-theme="dark"] .tela__shot::after { background: radial-gradient(ellipse at center, rgba(255,201,74,.2) 0%, rgba(255,201,74,.07) 45%, rgba(255,201,74,0) 72%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__shot::before { background: radial-gradient(ellipse at center, rgba(255,201,74,.14) 0%, rgba(255,201,74,.05) 45%, rgba(255,201,74,0) 74%); }
  :root:not([data-theme="light"]) .tela__shot::after { background: radial-gradient(ellipse at center, rgba(255,201,74,.2) 0%, rgba(255,201,74,.07) 45%, rgba(255,201,74,0) 72%); }
}

/* Luz de ambiente detrás de la captura. La copia desenfocada de la propia imagen es lo que usan
   hoy los sitios de producto (y el «ambient mode» de YouTube): el resplandor sale de los colores
   de la pantalla, así que no tiene forma reconocible —el problema de todo spot dibujado a mano— y
   acompaña a cada captura sin que haya que calibrarla una por una. La máscara radial apaga el
   canto de la copia; el blur se mide en vw para que no quede corto en pantallas grandes. */
/* sin `isolation`: el multiply tiene que mezclarse con el fondo de la sección, no con el set.
   Por eso el resplandor va en z-index 0 y la captura en 1, en vez del -1 de siempre: con -1 se
   pintaría por detrás del fondo de la sección y no se vería nada. */
.tela__set { position: relative; }
.tela__glow { position: absolute; z-index: 0; left: 50%; top: 46%; width: 100%; max-width: none; height: auto; transform: translate(-50%, -44%); filter: blur(clamp(36px, 5.2vw, 88px)) grayscale(1) contrast(0.35) brightness(0.55) sepia(1) saturate(3) hue-rotate(6deg) brightness(1.9); opacity: .42; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, transparent 68%); mask-image: radial-gradient(ellipse at center, #000 18%, transparent 68%); }
:root[data-theme="dark"] .tela__glow { opacity: .75; mix-blend-mode: screen; filter: blur(clamp(34px, 5vw, 84px)) saturate(2) brightness(1.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__glow { opacity: .75; mix-blend-mode: screen; filter: blur(clamp(34px, 5vw, 84px)) saturate(2) brightness(1.3); }
}
/* con la luz de ambiente puesta, el amarillo de abajo solo tiene que dar el calor de la marca */
/* En claro el fondo es el amarillo de la marca —el mismo spot del hero y del caso—: la luz de
   ambiente aporta el peso y el color de la captura, y el amarillo pone el calor detrás */
.tela__shot::before { width: 152%; aspect-ratio: 1.8; top: 46%; opacity: 1; background: radial-gradient(ellipse at center, rgba(255,201,74,.38) 0%, rgba(255,201,74,.2) 32%, rgba(255,201,74,.07) 58%, rgba(255,201,74,0) 82%); }
.tela--app .tela__set { max-width: 26rem; margin-inline: auto; }
.tela--app .tela__shot { max-width: 100%; }
@media (prefers-reduced-motion: no-preference) { .tela__glow { transition: opacity var(--dio-dur) var(--dio-ease); } }
/* En oscuro manda la luz de ambiente: el amarillo de abajo se apagaba en un manchón bajo el pie
   de foto, así que ahí queda solo el resplandor de la propia captura, más brillante */
:root[data-theme="dark"] .tela__glow { opacity: .85; filter: blur(clamp(34px, 5vw, 84px)) saturate(2.1) brightness(1.5); }
:root[data-theme="dark"] .tela__shot::before, :root[data-theme="dark"] .tela__shot::after { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__glow { opacity: .85; filter: blur(clamp(34px, 5vw, 84px)) saturate(2.1) brightness(1.5); }
  :root:not([data-theme="light"]) .tela__shot::before, :root:not([data-theme="light"]) .tela__shot::after { opacity: 0; }
}
/* La cifra y su explicación iban alineadas por la línea base: con el texto en una línea quedaba
   bien, pero en dos la segunda caía por debajo y la cifra quedaba colgada arriba. Centradas, el
   par se lee como un bloque en los dos casos; el ancho máximo evita que parta en tres */
.tela__txt p.tela__stat { align-items: center; gap: var(--dio-space-4); }
.tela__stat span { max-width: 30ch; }
/* Con `flip` cambiaba el orden pero no los anchos: la captura caía en la columna angosta (0,82fr)
   y un documento ahí queda ilegible. La fila invertida invierte también las medidas, así la
   captura conserva su tamaño esté del lado que esté */
@media (min-width: 48rem) { .tela--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); } }

/* El resplandor sale de la captura, y en una coluna estreita isso empurrava a página para o lado
   (scroll horizontal a 390 px). Só cresce quando há espaço ao redor: de 48rem para cima */
@media (min-width: 48rem) { .tela__glow { width: 150%; } }
/* El resplandor é maior que a captura de propósito: a seção o recorta para que ele nunca empurre
   a página para o lado. `clip` e não `hidden`: não cria contexto de rolagem nem quebra o sticky */
.section--tela { overflow: clip; }

/* Captura dentro de una ventana de navegador, la misma del caso Musical Riff: la barra y la imagen
   comparten un contenedor con el radio y la sombra, para que no queden dos rectángulos anidados */
.tela__shot--nav .tela__win { border-radius: var(--r-card); overflow: hidden; box-shadow: 0 1px 2px rgba(1,32,33,.05), 0 10px 24px -10px rgba(1,32,33,.14), 0 36px 64px -28px rgba(1,32,33,.22); }
.tela__shot--nav img { border-radius: 0; box-shadow: none; border: 0; display: block; }
:root[data-theme="dark"] .tela__shot--nav .tela__win { box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tela__shot--nav .tela__win { box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); } }

/* Barra de la ventana: en claro el gris-100 quedaba casi blanco contra la captura y el marco se
   perdía. Ahora es un degradado corto de gris-200 a gris-300 con una línea de luz arriba, que es
   como se ve una barra de ventana real */
.case__bar { background: linear-gradient(180deg, var(--dio-gris-200), var(--dio-gris-300)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); border-bottom-color: var(--dio-gris-400); }
.case__url { background: color-mix(in srgb, var(--dio-blanco) 92%, transparent); box-shadow: inset 0 0 0 1px rgba(1,32,33,.06); color: var(--dio-text-muted); }
/* Semáforo de macOS: los tres colores del sistema, con el borde más oscuro y el brillo de arriba
   que tienen los botones reales de una ventana */
.case__bar i { background: var(--dio-petroleo-300); box-shadow: inset 0 0 0 .5px rgba(1,32,33,.18); }
.case__bar i:nth-child(2) { background: var(--dio-petroleo-400); }
.case__bar i:nth-child(3) { background: var(--dio-petroleo-500); }
:root[data-theme="dark"] .case__bar { background: linear-gradient(180deg, var(--dio-petroleo-600), var(--dio-petroleo-700)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); border-bottom-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .case__url { background: var(--dio-petroleo-900); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__bar { background: linear-gradient(180deg, var(--dio-petroleo-600), var(--dio-petroleo-700)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); border-bottom-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .case__url { background: var(--dio-petroleo-900); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
}

/* Controles de la ventana: atrás, adelante y recargar. Van entre el semáforo y la dirección, con
   el mismo trazo de los íconos del sitio; el adelante va apagado, como en un navegador recién abierto */
.case__bar { gap: 0.3rem; }
.case__nav { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: var(--dio-space-4); }
.case__nav svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--dio-gris-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.case__nav svg:nth-child(2) { opacity: .38; }
.case__url { display: inline-flex; align-items: center; gap: 0.35rem; flex: 1 1 auto; max-width: 22rem; }
.case__lock { width: 0.72rem; height: 0.72rem; flex: none; fill: none; stroke: var(--dio-verde-800); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .case__nav svg { stroke: var(--dio-petroleo-300); }
:root[data-theme="dark"] .case__lock { stroke: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__nav svg { stroke: var(--dio-petroleo-300); }
  :root:not([data-theme="light"]) .case__lock { stroke: var(--dio-verde-300); }
}
@media (max-width: 40rem) { .case__nav { display: none; } }

/* ─────────────────────────────────────────────────────────────────────────────
   Carrusel de depoimentos — tres capas, de menos a más navegador:

   1. Base que funciona en todos: fila con encaje (`scroll-snap`), tarjeta centrada,
      desvanecido en los bordes para que se vea que la fila sigue, flechas y barra de
      progreso propias, y arrastre con el mouse.
   2. Chrome 135+: se usan los controles NATIVOS de CSS Overflow 5 —`::scroll-button()` y
      `::scroll-marker`—, que el navegador crea como `<button>` y `<a>` reales: teclado,
      foco y lector de pantalla salen gratis y bien. Ahí se ocultan los propios.
   3. Movimiento: con `animation-timeline: view()` la tarjeta que entra se acomoda sola.
      Todo se apaga con «reducir movimiento». Nunca hay autoplay.
   ───────────────────────────────────────────────────────────────────────────── */
.cli__rail { position: relative; margin-top: var(--dio-space-6); }
.clients--fila {
  display: flex; gap: var(--dio-space-5); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 0.25rem;
  padding: 0.5rem 0.25rem var(--dio-space-4); margin: 0 calc(-1 * var(--dio-space-2));
  scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.clients--fila::-webkit-scrollbar { display: none; }
.clients--fila.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.clients--fila.is-dragging a { pointer-events: none; }
.clients--fila > .cli { flex: 0 0 clamp(15.5rem, 23vw, 19.5rem); scroll-snap-align: center; scroll-snap-stop: always; }
.clients--fila:focus-visible { outline: 2px solid var(--dio-amarillo); outline-offset: 6px; border-radius: var(--r-card); }

/* controles propios: barra de progreso a la izquierda, flechas a la derecha */
.cli__ctrl { display: flex; align-items: center; gap: var(--dio-space-5); margin-top: var(--dio-space-2); }
.cli__bar { flex: 1 1 auto; height: 3px; border-radius: 99px; background: var(--dio-gris-200); overflow: hidden; }
.cli__bar span { display: block; height: 100%; width: 30%; border-radius: 99px; background: var(--dio-petroleo); transition: transform var(--dio-dur) var(--dio-ease); transform-origin: left; }
.cli__go { display: flex; gap: var(--dio-space-2); }
.cli__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--dio-border); background: var(--dio-surface); color: var(--dio-text); cursor: pointer;
  transition: background var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease), opacity var(--dio-dur) var(--dio-ease), transform var(--dio-dur) var(--dio-ease); }
.cli__arrow svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cli__arrow:hover { border-color: var(--dio-petroleo-300); background: var(--dio-surface-2); transform: translateY(-1px); }
.cli__arrow[disabled] { opacity: .3; cursor: default; transform: none; }
:root[data-theme="dark"] .cli__bar { background: var(--dio-petroleo-700); }
:root[data-theme="dark"] .cli__bar span { background: var(--dio-amarillo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cli__bar { background: var(--dio-petroleo-700); }
  :root:not([data-theme="light"]) .cli__bar span { background: var(--dio-amarillo); }
}

/* 2. controles nativos donde existen (Chrome 135+): los propios se van */
@supports selector(::scroll-marker-group) {
  .clients--fila { scroll-marker-group: after; anchor-name: --fila-cli; }
  .cli__ctrl { display: none; }
  .clients--fila::scroll-marker-group { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--dio-space-4); }
  .clients--fila > .cli::scroll-marker { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dio-gris-300); cursor: pointer; transition: background var(--dio-dur) var(--dio-ease), width var(--dio-dur) var(--dio-ease); }
  .clients--fila > .cli::scroll-marker:hover { background: var(--dio-petroleo-300); }
  .clients--fila > .cli::scroll-marker:target-current { width: 1.4rem; border-radius: 99px; background: var(--dio-petroleo); }
  :root[data-theme="dark"] .clients--fila > .cli::scroll-marker { background: var(--dio-petroleo-600); }
  :root[data-theme="dark"] .clients--fila > .cli::scroll-marker:target-current { background: var(--dio-amarillo); }
}
@supports selector(::scroll-button(right)) {
  .clients--fila::scroll-button(*) { position: fixed; position-anchor: --fila-cli; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 1px solid var(--dio-border); background: var(--dio-surface); color: var(--dio-text); font-size: 1rem; line-height: 1; cursor: pointer; z-index: 2;
    box-shadow: 0 6px 18px -8px rgba(1,32,33,.35); transition: background var(--dio-dur) var(--dio-ease), opacity var(--dio-dur) var(--dio-ease); }
  .clients--fila::scroll-button(*):hover { background: var(--dio-surface-2); }
  .clients--fila::scroll-button(*):disabled { opacity: 0; pointer-events: none; }
  .clients--fila::scroll-button(*):focus-visible { outline: 2px solid var(--dio-amarillo); outline-offset: 3px; }
  .clients--fila::scroll-button(left) { content: "‹" / "Anterior"; position-area: center left; margin-right: 0.5rem; }
  .clients--fila::scroll-button(right) { content: "›" / "Seguinte"; position-area: center right; margin-left: 0.5rem; }
}

/* 3. la tarjeta que entra se acomoda sola; con «reducir movimiento» no se mueve nada */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes cli-foco { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
    .clients--fila > .cli { animation: cli-foco linear both; animation-timeline: view(inline); animation-range: entry 8% cover 22%, exit 78% exit 100%; }
  }
}

/* Aplicativos: tres columnas cuando hay lugar (≥ 64rem) y, por debajo, la misma fila deslizable
   de los depoimentos en vez de una pila de tarjetas altísima. Los puntos los pone el navegador
   donde existen (Chrome 135+); en el resto, el encaje y los bordes desvanecidos ya dicen que hay más */
@media (max-width: 63.99rem) {
  .apps {
    display: flex; gap: var(--dio-space-5); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; scrollbar-width: none;
    padding: 0.5rem 0.25rem var(--dio-space-3); margin-inline: calc(-1 * var(--dio-space-2));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  }
  .apps::-webkit-scrollbar { display: none; }
  .apps > .app { flex: 0 0 min(19rem, 82vw); scroll-snap-align: center; scroll-snap-stop: always; }
  @supports selector(::scroll-marker-group) {
    .apps { scroll-marker-group: after; }
    .apps::scroll-marker-group { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--dio-space-4); }
    .apps > .app::scroll-marker { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dio-gris-300); cursor: pointer; transition: background var(--dio-dur) var(--dio-ease), width var(--dio-dur) var(--dio-ease); }
    .apps > .app::scroll-marker:target-current { width: 1.4rem; border-radius: 99px; background: var(--dio-petroleo); }
    :root[data-theme="dark"] .apps > .app::scroll-marker { background: var(--dio-petroleo-600); }
    :root[data-theme="dark"] .apps > .app::scroll-marker:target-current { background: var(--dio-amarillo); }
  }
}

/* Hero de «Sobre»: la foto recortada del fundador en lugar de la ilustración. Se apoya en el mismo
   spot del hero, un poco más abajo, y no flota: una persona quieta se lee como una persona */
.hero__art--foto img { max-width: min(100%, 16rem); filter: drop-shadow(0 24px 40px rgba(1,32,33,.22)); animation: none !important; }
.hero__art--foto::before { top: 54%; width: 86%; }
@media (min-width: 60rem) { .hero__art--foto img { max-width: 17.5rem; } }  /* a más de eso el recorte pierde definición en pantallas 2x */
/* Pie de la foto del fundador: la credencial verificable va junto a la cara, que es donde el
   visitante la busca (Fogg 2001: credenciales del autor suman credibilidad) */
.hero__art--foto { display: flex; flex-direction: column; align-items: center; gap: var(--dio-space-4); }
.hero__cap { max-width: 26rem; font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); color: var(--dio-text-muted); text-align: center; }
@media (min-width: 60rem) { .hero__cap { max-width: 24rem; } }

/* Trayectoria: línea de tiempo con el año a la izquierda y el hito a la derecha. La línea es un
   borde del `li`, no un adorno aparte, así nunca se desalinea; en celular pasa a dos filas */
.timeline { list-style: none; padding: 0; margin: var(--dio-space-6) 0 0; --tl-col: 7rem; }
.tl { display: grid; grid-template-columns: var(--tl-col) 1fr; gap: var(--dio-space-5); padding: 0 0 var(--dio-space-6); position: relative; }
.tl:not(:last-child) .tl__when::after { content: ""; position: absolute; left: calc(var(--tl-col) + var(--dio-space-5) / 2 - 1px); top: 1.9rem; bottom: 0; width: 2px; background: var(--dio-border); }
.tl__when { position: relative; display: flex; align-items: flex-start; padding-top: 0.15rem; gap: var(--dio-space-3); }
.tl__year { font-family: var(--dio-font-display); font-weight: 800; font-size: var(--dio-text-lg); color: var(--dio-text); font-variant-numeric: tabular-nums lining-nums; }
.tl__when::before { content: ""; position: absolute; left: calc(var(--tl-col) + var(--dio-space-5) / 2 - 0.4rem); top: 0.55rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--dio-amarillo); box-shadow: 0 0 0 4px var(--dio-bg); }
.tl__what { min-width: 0; padding-left: var(--dio-space-5); }
.tl__what h3 { font-size: var(--dio-h4); margin: 0 0 var(--dio-space-2); }
.tl__what p { margin: 0; color: var(--dio-text-muted); line-height: var(--dio-leading-normal); }
.tl__ver { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: var(--dio-space-3); font-size: var(--dio-text-sm); font-weight: 700; color: var(--dio-verde-800); text-decoration: none; }
.tl__ver:hover { text-decoration: underline; }
:root[data-theme="dark"] .tl__ver { color: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tl__ver { color: var(--dio-verde-300); } }
@media (max-width: 40rem) {
  .tl { grid-template-columns: 1fr; gap: var(--dio-space-2); padding-left: var(--dio-space-5); padding-bottom: var(--dio-space-5); }
  .tl:not(:last-child) .tl__when::after { left: -1.15rem; top: 1.6rem; }
  .tl__when::before { left: -1.55rem; top: 0.5rem; }
  .tl__what { padding-left: 0; }
}
/* Tramo de años sin un hito puntual (2006–2020, los años en empresas): punto hueco y línea
   punteada, para que se lea como período y no como fecha */
.tl--gap .tl__when::before { background: transparent; box-shadow: 0 0 0 4px var(--dio-bg); border: 2px solid var(--dio-amarillo); }
.tl--gap .tl__when::after { background: none !important; border-left: 2px dashed var(--dio-border); width: 0 !important; }
.tl--gap .tl__year { font-size: var(--dio-text-base); color: var(--dio-text-muted); letter-spacing: -0.01em; }
.tl__vers { display: flex; flex-wrap: wrap; gap: var(--dio-space-2) var(--dio-space-5); margin: var(--dio-space-3) 0 0; }
.tl__vers .tl__ver { margin-top: 0; }

/* Texto corrido de una sección que cuenta algo (la historia de la agencia) y la frase del
   fundador que la remata: cuerpo cómodo de leer, medida corta y la cita con el filete amarillo */
.prose { max-width: 62ch; margin-top: var(--dio-space-5); line-height: var(--dio-leading-normal); }
.prose p { margin: 0 0 var(--dio-space-4); }
.prose p:last-child { margin-bottom: 0; }
.say { max-width: 62ch; margin: var(--dio-space-7) 0 0; padding: 0 0 0 var(--dio-space-5); border-left: 3px solid var(--dio-amarillo); }
.say p { font-family: var(--dio-font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); line-height: var(--dio-leading-snug); letter-spacing: -0.01em; margin: 0 0 var(--dio-space-3); }
.say footer { font-size: var(--dio-text-sm); color: var(--dio-text-muted); }

/* La historia, a dos columnas: el relato a la izquierda y a la derecha la foto o el panel de lo
   que no cambió. El lateral se queda pegado mientras se lee el texto (sticky), que es lo que hace
   que una columna corta no deje medio blanco al costado */
.story { display: grid; gap: var(--dio-space-6); margin-top: var(--dio-space-5); }
@media (min-width: 64rem) {
  .story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .story__aside { position: sticky; top: 7rem; }
}
.story__text { min-width: 0; }
.story .prose, .story .say { max-width: none; }
.story__side { background: var(--dio-surface); border-radius: var(--r-card); padding: var(--dio-space-6); box-shadow: var(--dio-shadow-sm); }
.section:nth-of-type(even) .story__side { background: var(--dio-bg); }
.story__side + .story__media { margin-top: var(--dio-space-6); }
.story__side h3 { font-size: var(--dio-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--dio-text-muted); margin: 0 0 var(--dio-space-4); }
.story__side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--dio-space-4); }
.story__side li { position: relative; padding-left: var(--dio-space-5); font-size: var(--dio-text-base); font-weight: 600; line-height: var(--dio-leading-snug); color: var(--dio-text); }
.story__side li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.55rem; height: 0.55rem; background: var(--dio-amarillo); transform: rotate(45deg); border-radius: 1px; }
.story__side p { margin: var(--dio-space-5) 0 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); line-height: var(--dio-leading-snug); }
:root[data-theme="dark"] .story__side { background: var(--dio-petroleo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .story__side { background: var(--dio-petroleo); } }
.story__media--video video { width: 100%; height: auto; display: block; border-radius: var(--r-card); box-shadow: var(--dio-shadow-lg); background: var(--dio-petroleo-950); }

/* Depoimentos sobre la persona: cita, monograma y el sitio del cliente cuando existe. Sin foto,
   porque no las tenemos: una foto de stock resta credibilidad (NN/g) */
.says { display: grid; gap: var(--dio-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: var(--dio-space-6); }
.say2 { display: flex; flex-direction: column; gap: var(--dio-space-5); margin: 0; background: var(--dio-surface); border-radius: var(--r-card); padding: var(--dio-space-6); box-shadow: var(--dio-shadow-sm); }
.section:nth-of-type(even) .say2 { background: var(--dio-bg); }
.say2 blockquote { margin: 0; flex: 1 1 auto; font-size: var(--dio-text-base); line-height: var(--dio-leading-normal); color: var(--dio-text); }
.say2 blockquote p { margin: 0 0 var(--dio-space-3); }
.say2 blockquote p:last-child { margin-bottom: 0; }
.say2 blockquote p::before { content: "“"; }
.say2 blockquote p:last-child::after { content: "”"; }
.say2 figcaption { display: flex; align-items: center; gap: var(--dio-space-3); border-top: 1px dashed var(--dio-border); padding-top: var(--dio-space-4); }
.say2__av { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--dio-petroleo); color: var(--dio-amarillo); font-family: var(--dio-font-display); font-weight: 700; font-size: var(--dio-text-sm); flex: none; }
.say2__who { display: grid; gap: 0.1rem; min-width: 0; }
.say2__who strong { font-size: var(--dio-text-base); }
.say2__who span, .say2__who a { font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.say2__who a { text-decoration: none; }
.say2__who a:hover { text-decoration: underline; }
:root[data-theme="dark"] .say2 { background: var(--dio-petroleo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .say2 { background: var(--dio-petroleo); } }
/* Las citas en fila usan el mismo carrusel de los depoimentos de «Casos» */
.says--fila { display: flex; }
.says--fila > .say2 { flex: 0 0 clamp(16rem, 24vw, 20rem); scroll-snap-align: center; scroll-snap-stop: always; }
@supports selector(::scroll-marker-group) {
  .says--fila > .say2::scroll-marker { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dio-gris-300); cursor: pointer; transition: background var(--dio-dur) var(--dio-ease), width var(--dio-dur) var(--dio-ease); }
  .says--fila > .say2::scroll-marker:target-current { width: 1.4rem; border-radius: 99px; background: var(--dio-petroleo); }
  :root[data-theme="dark"] .says--fila > .say2::scroll-marker { background: var(--dio-petroleo-600); }
  :root[data-theme="dark"] .says--fila > .say2::scroll-marker:target-current { background: var(--dio-amarillo); }
}

/* Foto del fundador: el reflejo del piso era petróleo y se leía como una mancha verde debajo de
   la cara. Va cálido, del mismo amarillo que el haz */
.hero__art--foto::after { background: radial-gradient(ellipse at center, rgba(255,201,74,.42) 0%, rgba(255,201,74,.16) 45%, rgba(255,201,74,0) 72%) !important; }

/* Tarjetas en modo claro: el panel de la historia y las citas compartían fondo exacto con la
   sección (1,00:1) y solo se separaban por una sombra muy suave. Ahora usan la superficie
   alterna, como el resto de las tarjetas del sitio, y el borde de tarjeta sube de 1,26:1 a
   ~1,9:1 contra el fondo, que es donde una tarjeta deja de «desaparecer» */
:root { --dio-border-card: color-mix(in srgb, var(--dio-petroleo) 22%, var(--dio-niebla)); }
.story__side, .say2 { background: var(--dio-surface); border: 1px solid var(--dio-border-card); }
.section:nth-of-type(even) .story__side, .section:nth-of-type(even) .say2 { background: var(--dio-bg); }
.svc, .card, .app, .cli, .deck, .plan, .seg, .seg2, .step, .acard, .prod, .fd3__card, .cmp__row, .close__box { border-color: var(--dio-border-card); }
.close__box { border: 1px solid var(--dio-border-card); }
/* el monograma de las citas: en oscuro, petróleo sobre petróleo desaparecía */
:root[data-theme="dark"] .say2 { border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .say2__av { background: var(--dio-amarillo); color: var(--dio-petroleo-950); }
:root[data-theme="dark"] .story__side { border-color: var(--dio-petroleo-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .say2 { border-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .say2__av { background: var(--dio-amarillo); color: var(--dio-petroleo-950); }
  :root:not([data-theme="light"]) .story__side { border-color: var(--dio-petroleo-600); }
}
/* la flecha que sale del sitio va en diagonal, y al pasar el mouse se mueve en ese mismo
   sentido; el círculo la centra solo, como en la flecha recta */
.rel:hover .rel__go--ext { transform: translate(3px, -3px); }

/* Vitto: foto redonda y primero, con la ficha debajo. El círculo resuelve el fondo de la foto
   sin recortar al perro: el tapete deja de competir y queda solo la cara */
.story__aside { display: flex; flex-direction: column; gap: var(--dio-space-6); }
.story__aside--media { flex-direction: column-reverse; }
.story__media--round img { border-radius: 50%; box-shadow: 0 24px 48px -24px rgba(1,32,33,.45); max-width: 20rem; margin-inline: auto; display: block; }
.story__media--round figcaption { text-align: center; }
:root[data-theme="dark"] .story__media--round img { box-shadow: 0 24px 48px -22px rgba(0,0,0,.7); }
/* cuando el panel va dentro de la columna de texto, respira del párrafo anterior */
.story__text .story__side { margin-top: var(--dio-space-6); }
/* la historia: el vídeo manda en la columna, así que ahí la derecha pesa un poco más */
@media (min-width: 64rem) { #historia .story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
/* la foto de Vitto ya trae su propio círculo claro: nada de sombra dura alrededor */
.story__media--round img { box-shadow: 0 18px 40px -26px rgba(1,32,33,.35); }
/* el `figure` traía el margen lateral del navegador (40 px) y el vídeo quedaba más angosto que
   la card de al lado: ahora los dos ocupan el ancho de la coluna */
.story__media { margin: 0; }
/* Pies de foto: el del bloque «story» quedaba en 17 px, mientras los del resto del sitio
   (`.tela__shot`) están en 13. Todos iguales */
.story__media figcaption { font-size: var(--dio-text-xs); line-height: var(--dio-leading-snug); color: var(--dio-text-muted); }

/* Vitto: aro de marca y el selo de «estagiário do mês», apoyado sobre el círculo */
.round__wrap { position: relative; display: block; max-width: 20rem; margin-inline: auto; }
.story__media--round img { border: 4px solid var(--dio-amarillo); }
.round__selo { position: absolute; left: 50%; bottom: -0.9rem; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 0.55rem; white-space: nowrap;
  background: var(--dio-petroleo); color: var(--dio-blanco); border-radius: var(--dio-radius-pill);
  padding: 0.5rem 1rem; box-shadow: 0 10px 24px -12px rgba(1,32,33,.6); }
.round__selo strong { font-family: var(--dio-font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--dio-amarillo); }
.round__selo span { font-size: 0.74rem; line-height: 1.1; color: var(--dio-petroleo-200); }
:root[data-theme="dark"] .round__selo { background: var(--dio-amarillo); box-shadow: 0 10px 26px -12px rgba(0,0,0,.8); }
:root[data-theme="dark"] .round__selo strong { color: var(--dio-petroleo-950); }
:root[data-theme="dark"] .round__selo span { color: color-mix(in srgb, var(--dio-petroleo-950) 78%, transparent); }
:root[data-theme="dark"] .round__copa { stroke: var(--dio-petroleo-950); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .round__selo { background: var(--dio-amarillo); box-shadow: 0 10px 26px -12px rgba(0,0,0,.8); }
  :root:not([data-theme="light"]) .round__selo strong { color: var(--dio-petroleo-950); }
  :root:not([data-theme="light"]) .round__selo span { color: color-mix(in srgb, var(--dio-petroleo-950) 78%, transparent); }
  :root:not([data-theme="light"]) .round__copa { stroke: var(--dio-petroleo-950); }
}
/* el selo se apoya por fuera del círculo: el pie de foto baja para no quedar debajo de él */
.round__wrap { margin-bottom: 1.4rem; }

/* Canales directos del cierre de «Sobre»: el contacto a la vista, sin pasar por el formulario */
.close__canais { list-style: none; padding: 0; margin: var(--dio-space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--dio-space-2) var(--dio-space-3); }
.close__canais a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--dio-radius-pill); border: 1px solid color-mix(in srgb, var(--dio-blanco) 22%, transparent); color: var(--dio-blanco); font-size: var(--dio-text-sm); font-weight: 600; text-decoration: none; transition: background var(--dio-dur) var(--dio-ease), border-color var(--dio-dur) var(--dio-ease); }
.close__canais a:hover { background: color-mix(in srgb, var(--dio-blanco) 10%, transparent); border-color: var(--dio-amarillo); }

.round__selo-t { display: grid; justify-items: start; gap: 0.1rem; }
.round__copa { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: var(--dio-amarillo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* pie de la foto redonda: más aire respecto del círculo y del sello */
.story__media--round figcaption { margin-top: var(--dio-space-5); max-width: 22rem; margin-inline: auto; }
/* corrección óptica: con el selo arriba, el conjunto se leía caído respecto del texto de la izquierda */
@media (min-width: 64rem) { #vitto .story__aside { margin-top: -2.5rem; } }
/* la escena de contacto es más compacta que las otras (68 % del lienzo): se compensa con tamaño */
/* la escena de contacto es la más apaisada del set: la columna de la imagen se ensancha para
   que se lea el teléfono, en vez de quedar en miniatura contra el texto */
@media (min-width: 60rem) {
  .hero--art:has(img[src*="22-contato"]) .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .hero--art:has(img[src*="22-contato"]) .hero__art img { max-width: min(100%, 40rem); }
}

/* Canales de contacto: tres tarjetas iguales en una fila, con el ícono arriba y la flecha al pie,
   para que ninguna quede huérfana en una segunda línea (el `related` normal va a dos columnas) */
@media (min-width: 60rem) { .rels--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rels--tres .rel { grid-template-columns: 1fr; align-items: start; align-content: start; gap: var(--dio-space-4); padding: var(--pad-card); }
.rels--tres .rel__t { display: grid; gap: var(--dio-space-2); }
.rels--tres .rel__go { justify-self: start; margin-top: auto; }

/* Flecha de los enlaces: al pasar el mouse el círculo solo cambiaba el borde a amarillo, que
   sobre la tarjeta blanca da 1,4:1 — el círculo desaparecía; y en oscuro la regla del tema pisaba
   el hover y no pasaba nada. Ahora el círculo se llena de amarillo con el trazo en petróleo, que
   funciona igual en los dos temas */
.rel:hover .rel__go, .rel:focus-visible .rel__go { background: var(--dio-amarillo); border-color: var(--dio-amarillo-700); color: var(--dio-petroleo-950); }
:root[data-theme="dark"] .rel:hover .rel__go, :root[data-theme="dark"] .rel:focus-visible .rel__go { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-petroleo-950); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rel:hover .rel__go, :root:not([data-theme="light"]) .rel:focus-visible .rel__go { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-petroleo-950); }
}

/* ── Estandarización de tintes: las tarjetas «Para quem é» y las cajas internas ───────────────
   La pastilla de público era petroleo-50 (#EAFBFB, un cian) y la prova de cliente usaba el gris
   del fondo: tres verdes/grises distintos conviviendo en la misma tarjeta. Todas pasan a la
   receta única `--dio-tint`. La etiqueta «como ajudamos» sigue en verde: el verde es tipografía
   de etiqueta en todo el sitio (.seg__who, .case__ch, .founder__role), no relleno. */
.seg2__who { background: var(--dio-tint); color: var(--dio-tint-text); }
.seg2__proof, main > .section:nth-of-type(odd) .seg2__proof, main > .section:nth-of-type(even) .seg2__proof { background: var(--dio-tint); border-color: var(--dio-tint-line); }
.seg__proof, .section:nth-of-type(even) .seg__proof { background: var(--dio-tint); border-color: var(--dio-tint-line); }
.badge { background: var(--dio-tint); color: var(--dio-tint-text); }
:root[data-theme="dark"] .seg2__who { background: var(--dio-tint); color: var(--dio-tint-text); }
:root[data-theme="dark"] .seg2__proof { background: var(--dio-tint) !important; border-color: var(--dio-tint-line); }
:root[data-theme="dark"] .seg__proof { background: var(--dio-tint); border-color: var(--dio-tint-line); }
:root[data-theme="dark"] .seg2__how span { color: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg2__who { background: var(--dio-tint); color: var(--dio-tint-text); }
  :root:not([data-theme="light"]) .seg2__proof { background: var(--dio-tint) !important; border-color: var(--dio-tint-line); }
  :root:not([data-theme="light"]) .seg__proof { background: var(--dio-tint); border-color: var(--dio-tint-line); }
  :root:not([data-theme="light"]) .seg2__how span { color: var(--dio-verde-300); }
}

/* ── Tarjetas dentro de una sección oscura ──────────────────────────────────────────────────
   `.section--dark` pinta el fondo de petróleo en los DOS temas, pero la `.card` seguía tomando
   la superficie del tema: en modo claro quedaban tarjetas blancas dentro del bloque petróleo, y
   el título heredaba `.section--dark a { color: verde-300 }` → menta sobre blanco, 1,72:1.
   Ilegible en /agencias/, /blog/ y /casos/musical-riff/ (8 páginas con los idiomas).
   La tarjeta se alinea ahora con la sección, que es como ya se veía en oscuro. */
.section--dark .card, .section--dark .svc, .section--dark .step, .section--dark .cli {
  background: var(--dio-petroleo-900) !important;
  border-color: var(--dio-petroleo-600);
  color: var(--dio-niebla);
}
.section--dark .card h3, .section--dark .card strong { color: var(--dio-blanco); }
.section--dark .card p, .section--dark .card__text, .section--dark .card small { color: var(--dio-niebla-dark); }
.section--dark .card h3 a { color: var(--dio-verde-300); text-decoration: none; }
.section--dark .card h3 a:hover { color: var(--dio-amarillo); text-decoration: underline; text-underline-offset: 0.2em; }

/* Etiqueta dentro de una caja tintada: sobre el tinte verde, `verde-700` daba 4,25:1 — justo por
   debajo del mínimo. Las que van sobre tinte usan `--dio-tint-text` (verde-800, ~7:1); las que van
   sobre la tarjeta lisa siguen en verde-700. */
.step__get span { color: var(--dio-tint-text); }

/* ── Cierre de la auditoría visual (22/09): la misma pieza, la misma forma ──────────────────
   La escala de radios ya estaba declarada (`--r-inner` 12 · `--r-card` 20 · `--r-feature` 28,
   «piezas protagonistas»), pero la asignación se había ido soltando: `deck` y `rel` —tarjetas
   de contenido del mismo porte que `svc`, `seg2` y `step`— llevaban 28 px y convivían con ellas
   en la misma página. Vuelven a `--r-card`. Los 28 px quedan para lo que sí es protagonista:
   `prod`, `plan`, `duo__c`, `fdr__plate` y `close__box`. */
.deck, .rel { border-radius: var(--r-card); }

/* Sombra en reposo: `svc`, `seg2`, `step`, `cli`, `app` y las del fundador usaban `--sh-rest`
   (dos capas, con el contorno de 1 px que hace que la tarjeta no «flote» sobre el fondo) y
   `card`, `plan`, `say2` y `story__side` seguían con la sombra plana de una capa. Una sola. */
.card, .plan, .say2, .story__side, .deck, .rel { box-shadow: var(--sh-rest); }

/* Pie de foto: 13 px en todo el sitio (`.story__media`, `.tela__shot`); el del hero era el único
   a 15 px. */
.hero__cap { font-size: var(--dio-text-xs); }

/* El chip «in» conserva el azul oficial de LinkedIn (#0A66C2): es el logo de LinkedIn, no un
   color del sitio — decisión de Juan, 22/09. El texto del enlace sí es nuestro (petróleo/niebla). */

/* ── Chips e íconos circulares: que se despeguen del fondo en los DOS temas ─────────────────
   Medido con `tools/qa/circulos.mjs`: en oscuro el número del paso quedaba en **1,00:1** —
   petróleo sobre una tarjeta que también es petróleo, o sea invisible (37 casos en 9 páginas,
   señalado por Juan en «Como trabalhamos»). Los demás chips de la familia estaban entre 1,18 y
   1,44, que es igual de poco.

   Una sola receta para todos: el chip va un escalón **más oscuro** que la tarjeta y lleva un aro
   interior de 1 px. En claro el aro define el borde contra el blanco; en oscuro es lo que hace
   que el chip exista. El trazo amarillo del ícono no cambia (GUIA §5.1). */
.step__n, .rel__ico, .seg2__ico, .deck__ico, .case__ico2 {
  background: var(--dio-petroleo);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dio-blanco) 14%, transparent),
              0 1px 2px color-mix(in srgb, var(--dio-petroleo-950) 22%, transparent);
}
:root[data-theme="dark"] :is(.step__n, .rel__ico, .seg2__ico, .deck__ico, .case__ico2),
.section--dark :is(.step__n, .rel__ico, .seg2__ico, .deck__ico) {
  background: var(--dio-petroleo-950);
  box-shadow: inset 0 0 0 1px var(--dio-petroleo-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.step__n, .rel__ico, .seg2__ico, .deck__ico, .case__ico2) {
    background: var(--dio-petroleo-950);
    box-shadow: inset 0 0 0 1px var(--dio-petroleo-400);
  }
}

/* El ícono de «Migração concluída» va en verde con el trazo amarillo (pedido de Juan, 22/09):
   es el único sello de resultado del caso y con el petróleo se perdía dentro del panel claro. */

/* ── Fotos redondas de Juan y de Vitto: la misma moldura que la tarjeta del fundador ─────────
   Pedido de Juan (22/09). `.fd3__photo` no usa `border`: usa dos anillos de `box-shadow` — uno
   del color de la superficie y, afuera, el filete amarillo. Se lee más fino y más caro que un
   borde de 4 px, y funciona igual en los dos temas porque el primer anillo toma el fondo.
   Acá va escalado al tamaño de la foto (320 px en vez de 120): anillo de 6 px + filete de 3. */
.story__media--round img {
  border: 0;
  box-shadow: 0 0 0 6px var(--dio-petroleo-100), 0 0 0 9px var(--dio-amarillo),
              0 22px 44px -26px color-mix(in srgb, var(--dio-petroleo-950) 42%, transparent);
}
:root[data-theme="dark"] .story__media--round img {
  box-shadow: 0 0 0 6px var(--dio-petroleo), 0 0 0 9px var(--dio-amarillo),
              0 22px 44px -24px color-mix(in srgb, #000 62%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .story__media--round img {
    box-shadow: 0 0 0 6px var(--dio-petroleo), 0 0 0 9px var(--dio-amarillo),
                0 22px 44px -24px color-mix(in srgb, #000 62%, transparent);
  }
}
/* el filete queda fuera de la caja: el contenedor le deja aire para no recortarlo */
.story__media--round { overflow: visible; }

/* ── Notas y salvedades ─────────────────────────────────────────────────────────────────────
   Estaban como «letra chica»: un bloque amarillo pálido con barra lateral, que se lee como un
   aviso de error de documentación, y dentro tres o cuatro salvedades distintas apelotonadas en
   un solo párrafo de 500 caracteres.

   Lo que dice la práctica 2026 para precios de SaaS es lo contrario: lo que el cliente necesita
   saber antes de decidir no se esconde en el pie de página — se muestra y se hace escaneable,
   porque es lo que construye confianza (Notion y Airtable como referencia; fuentes en
   `docs/bitacora/fuentes/2026-09-22-notas-y-salvedades.md`).

   Dos formas, un mismo lenguaje: filete arriba, rótulo en versalita, texto en el gris de lectura.
   Nada de cajas de color. */
.note {
  max-width: 68rem;
  margin-top: var(--dio-space-6);
  padding-top: var(--dio-space-4);
  border-top: 1px solid var(--dio-border-card);
  font-size: var(--dio-text-sm);
  line-height: var(--dio-leading-snug);
  color: var(--dio-text-muted);
}
.note__t {
  display: block;
  margin-bottom: var(--dio-space-2);
  font-size: var(--dio-text-xs);
  font-weight: 800;
  letter-spacing: var(--dio-tracking-caps);
  text-transform: uppercase;
  color: var(--dio-verde-700);
}
/* la variante de «As cinco etapas» pierde la caja amarilla y adopta la misma nota */
.section--process .note {
  background: none;
  border: 0;
  border-top: 1px solid var(--dio-border-card);
  border-radius: 0;
  padding: var(--dio-space-4) 0 0;
  font-weight: 400;
  color: var(--dio-text-muted);
  max-width: 68rem;
}

/* Tira de salvedades: una celda por tema, del mismo ancho, con el filete arriba */
.notas {
  display: grid;
  gap: var(--dio-space-5) var(--dio-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--dio-space-6);
}
.nota { padding-top: var(--dio-space-4); border-top: 2px solid var(--dio-tint-line); }
.nota > span {
  display: block;
  margin-bottom: var(--dio-space-2);
  font-family: var(--dio-font-display);
  font-size: var(--dio-text-xs);
  font-weight: 800;
  letter-spacing: var(--dio-tracking-caps);
  text-transform: uppercase;
  color: var(--dio-verde-700);
}
.nota > p { margin: 0; font-size: var(--dio-text-sm); line-height: var(--dio-leading-snug); color: var(--dio-text-muted); }
:root[data-theme="dark"] :is(.note__t, .nota > span) { color: var(--dio-verde-300); }
:root[data-theme="dark"] :is(.note, .section--process .note) { border-top-color: var(--dio-petroleo-600); background: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.note__t, .nota > span) { color: var(--dio-verde-300); }
  :root:not([data-theme="light"]) :is(.note, .section--process .note) { border-top-color: var(--dio-petroleo-600); background: none; }
}

/* ── Marco del teléfono: de un borde de 7 px a un aparato ────────────────────────────────────
   Antes era un rectángulo con `border: 7px solid` y nada más: la captura flotaba pegada al
   borde y no se leía como un teléfono. Ahora es la anatomía estándar de un mockup en CSS puro
   (sin imágenes ni dependencias; referencia en `fuentes/2026-09-22-mockup-telefono.md`):

   · **bisel** de titanio, con gradiente en diagonal y dos filetes — uno claro arriba y otro
     oscuro abajo — que es lo que da el canto metálico;
   · **pantalla hundida**: aro interior oscuro por encima de la imagen, para que no quede a ras;
   · **isla** centrada arriba;
   · **cuatro botones**: acción, volumen + y volumen − a la izquierda, encendido a la derecha,
     apoyados sobre el canto y con su propio sombreado;
   · **reflejo** diagonal muy leve sobre el vidrio.

   Todo son pseudo-elementos y dos `<span>` vacíos: ni una imagen más que descargar. */
.app__phone {
  --biselw: 0.42rem;
  position: relative;
  align-self: center;
  width: 11.5rem;
  aspect-ratio: 9 / 18.5;
  border: 0;
  padding: var(--biselw);
  overflow: visible;
  border-radius: 2.3rem;
  background:
    linear-gradient(145deg, var(--dio-gris-600) 0%, var(--dio-gris-800) 18%, var(--dio-gris-900) 42%, var(--dio-gris-700) 68%, var(--dio-gris-900) 88%, var(--dio-gris-600) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -1px 0 1px rgba(0,0,0,.55),
    0 1px 1px rgba(1,32,33,.35),
    0 26px 44px -22px rgba(1,32,33,.55);
  margin-bottom: var(--dio-space-5);
}
.app__phone > img, .app__phone > .app__soon {
  width: 100%; height: 100%;
  display: block;
  border-radius: 1.95rem;
  object-fit: cover; object-position: top;
  background: var(--dio-petroleo-950);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.85), inset 0 0 12px rgba(0,0,0,.45);
}
/* isla */
.app__island {
  position: absolute; z-index: 3;
  top: calc(var(--biselw) + 0.42rem); left: 50%; transform: translateX(-50%);
  width: 32%; height: 1.05rem;
  border-radius: 99px;
  background: #05090A;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12);
}
/* reflejo del vidrio */
.app__glare {
  position: absolute; z-index: 2; inset: var(--biselw);
  border-radius: 1.95rem; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.14) 0 22%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 46%);
}
/* botones: tres a la izquierda (acción, volumen + y −), encendido a la derecha */
.app__phone::before, .app__phone::after {
  content: ""; position: absolute; z-index: -1;
  width: 0.17rem; border-radius: 1.5px;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18);
}
.app__phone::before {
  left: -0.14rem; top: 16%; height: 30%;
  background: linear-gradient(180deg,
    var(--dio-gris-600) 0 17%, transparent 17% 30%,
    var(--dio-gris-600) 30% 62%, transparent 62% 68%,
    var(--dio-gris-600) 68% 100%);
}
.app__phone::after {
  right: -0.14rem; top: 27%; height: 16%;
  background: var(--dio-gris-600);
}
.app__soon { display: grid; place-items: center; align-content: center; gap: var(--dio-space-3);
  background: linear-gradient(180deg, var(--dio-petroleo-100), var(--dio-niebla)); }
:root[data-theme="dark"] .app__phone {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -1px 0 1px rgba(0,0,0,.7),
    0 1px 1px rgba(0,0,0,.5),
    0 26px 44px -20px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app__phone {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 -1px 0 1px rgba(0,0,0,.7),
      0 1px 1px rgba(0,0,0,.5),
      0 26px 44px -20px rgba(0,0,0,.7);
  }
}

/* La isla se retira: las capturas de las apps ya vienen con su propia barra superior y en
   algunas (Baileando) el logo cae justo ahí, así que una isla dibujada encima tapaba contenido
   real. Con el bisel, la pantalla hundida, los botones y el reflejo ya se lee como un aparato. */
.app__island { display: none; }

/* El teléfono chico del caso destacado (`.case__mob`) usa el mismo bisel que `.app__phone`:
   era el último marco del sitio que seguía siendo un borde plano de 6 px. */
.case__mob {
  border: 0;
  padding: 0.3rem;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, var(--dio-gris-600) 0%, var(--dio-gris-800) 18%, var(--dio-gris-900) 42%, var(--dio-gris-700) 68%, var(--dio-gris-900) 88%, var(--dio-gris-600) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 -1px 0 1px rgba(0,0,0,.5),
    0 18px 34px -18px rgba(1,32,33,.55);
}
.case__mob img {
  border-radius: 1.22rem;
  display: block;
  background: var(--dio-petroleo-950);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.85);
}

/* El primer anillo va en petróleo-100, el mismo color con el que está pintado el disco de las
   fotos (`assets/fotos/*-redondo-*.webp` y el avatar de la tarjeta del fundador): así el anillo
   y el fondo de la foto son una sola pieza que termina en el filete amarillo, igual que en
   «Quem faz o trabalho». Con `--dio-surface` el anillo caía sobre la niebla de la sección y no
   se veía (Juan, 22/09). */

/* ── Una sola nota, sin excepciones ──────────────────────────────────────────────────────────
   Convivían TRES tratamientos: la `.note` general (sin fondo), la de `.section--process` y la de
   `.section--services`, estas dos con caja amarilla y barra lateral. Como las secciones de
   servicios y de método están en casi todas las páginas, la misma nota salía amarilla en unos
   lados y limpia en otros (Juan, 22/09). Gana la limpia: filete arriba y texto fino, en todas.
   El amarillo queda para `.todo`, que es la marca de trabajo del esqueleto, no contenido. */
.section--process .note, .section--services .note,
:root[data-theme="dark"] :is(.section--process, .section--services) .note {
  background: none;
  border: 0;
  border-top: 1px solid var(--dio-border-card);
  border-radius: 0;
  padding: var(--dio-space-4) 0 0;
  font-weight: 400;
  color: var(--dio-text-muted);
  max-width: 68rem;
  text-align: start;
}
:root[data-theme="dark"] :is(.note, .section--process .note, .section--services .note) {
  border-top-color: var(--dio-petroleo-600);
  color: var(--dio-niebla-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.section--process, .section--services) .note {
    background: none; border: 0; border-top: 1px solid var(--dio-petroleo-600);
    border-radius: 0; padding: var(--dio-space-4) 0 0; color: var(--dio-niebla-dark);
  }
}

/* Los cuatro botones son parte del marco, así que van en los dos teléfonos del sitio: el de las
   tarjetas de app y el del caso destacado (Juan, 22/09). Tres a la izquierda —acción, volumen +
   y volumen −, dibujados con un solo degradado por tramos— y el de encendido a la derecha. */
.case__mob { overflow: visible; }
.case__mob::before, .case__mob::after {
  content: ""; position: absolute; z-index: -1;
  width: 0.19rem; border-radius: 1.5px;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18);
}
.case__mob::before {
  left: -0.12rem; top: 17%; height: 29%;
  background: linear-gradient(180deg,
    var(--dio-gris-600) 0 17%, transparent 17% 30%,
    var(--dio-gris-600) 30% 62%, transparent 62% 68%,
    var(--dio-gris-600) 68% 100%);
}
.case__mob::after { right: -0.12rem; top: 28%; height: 15%; background: var(--dio-gris-600); }

/* ── Una sola moldura para todas las fotos de persona del proyecto ───────────────────────────
   Pedido de Juan (22/09): «todas las fotos quedan con esas mismas líneas de Juan y Vitto».
   La receta es la de `.fd3__photo`: disco en petróleo-100 (el mismo color con el que están
   pintadas las fotos), anillo del mismo petróleo-100 y, afuera, el filete amarillo. Se dibuja
   con `box-shadow`, no con `border`, para que no coma tamaño ni corra la maquetación, y el
   grosor escala con la foto: dos pares de valores según sea retrato, avatar o miniatura. */
.fd3__photo,
.story__media--round img,
.close__wa img,
.hfounder__av img,
.card__img[src*="avatar"], .card__img[src*="vitto"] {
  border: 0;
  border-radius: 50%;
  background: var(--dio-petroleo-100);
  /* receta unificada más abajo */
}
/* La referencia es `.fd3__photo`: 120 px de foto, 4 px de anillo y 2 px de filete — o sea 3,3 %
   y 1,7 % del diámetro. Los demás tamaños usan esa misma proporción, para que la moldura se vea
   igual de gruesa en una foto de 320 px que en un avatar de 28. Con 6/3 la de Vitto quedaba a la
   mitad de lo que le tocaba y por eso «no parecía haber cambiado» (Juan, 22/09). */
/* el filete vive fuera de la caja: hay que dejarle aire para que nada lo tape ni lo recorte */
.close__wa img { margin: 4px 4px 4px 2px; }
.hfounder__av { margin: 3px 3px 3px 1px; }
.card__img[src*="avatar"], .card__img[src*="vitto"] { margin: 6px 6px 6px 0 !important; }
.close__wa, .card:has(.card__img[src*="avatar"]), .card:has(.card__img[src*="vitto"]) { overflow: visible; }
/* en oscuro el anillo toma el fondo de la tarjeta, como ya hacía la del fundador */
:root[data-theme="dark"] :is(.fd3__photo, .story__media--round img, .close__wa img, .hfounder__av img,
                             .card__img[src*="avatar"], .card__img[src*="vitto"]) {
  /* receta unificada más abajo */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.fd3__photo, .story__media--round img, .close__wa img, .hfounder__av img,
                                      .card__img[src*="avatar"], .card__img[src*="vitto"]) {
  /* receta unificada más abajo */
  }
}
/* el punto verde de «en línea» se apoya sobre el filete, no debajo */
.hfounder__av::after, .hfounder__av::before { right: -3px; bottom: -3px; }

/* La flecha de la tarjeta «Para quem é» era el carácter «→»: su caja de texto incluye
   ascendentes y descendentes, así que el glifo quedaba 0,6 px por encima del centro del círculo
   (medido con `tools/qa/flechas.mjs`). Ahora es el mismo SVG que `.rel__go`, que da 0,00. */
.seg2__go svg { width: 1.05rem; height: 1.05rem; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* misma corrección para la flecha del panel del caso */
.case__arrow { font-size: 0; }
.case__arrow::after { content: ""; display: block; width: 0.5rem; height: 0.5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translate(-1px, 1px); border-radius: 1px; }

/* El retrato del hero de «Quem está por trás» pasa a la foto redonda con la misma moldura que
   el resto (Juan, 22/09): era el único recorte suelto del sitio y quedaba fuera del sistema.
   El halo amarillo del hero se mantiene detrás. */
.hero__art--foto img {
  max-width: min(100%, 17rem);
  border-radius: 50%;
  background: var(--dio-petroleo-100);
  filter: none !important;
  /* receta unificada más abajo */
}
@media (min-width: 60rem) { .hero__art--foto img { max-width: 19rem; } }
:root[data-theme="dark"] .hero__art--foto img {
  /* receta unificada más abajo */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__art--foto img {
  /* receta unificada más abajo */
  }
}
.hero__art--foto { padding-top: 15px; }

/* El sello de Vitto cruzaba el filete y cortaba la moldura por abajo: ahora se apoya justo
   fuera del aro, tangente al círculo. */
.round__selo { bottom: -2.05rem; }
.round__wrap { padding-bottom: 1.1rem; }

/* La flecha de «Loja Integrada → WooCommerce» es lo que cuenta la migración: era un carácter
   gris del tamaño del texto y pasaba desapercibido. Ahora es una pastilla amarilla con el trazo
   en petróleo — el mismo par de colores del botón principal — y un SVG que sí queda centrado
   (el glifo «→» quedaba 0,4 px alto; medido con `tools/qa/flechas.mjs`). */
.case__arrow {
  display: inline-grid; place-items: center;
  width: 1.35rem; height: 1.35rem; flex: none;
  border-radius: 50%;
  background: var(--dio-amarillo) !important;
  color: var(--dio-petroleo-950) !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--dio-amarillo-800) 45%, transparent);
  font-size: 0;
}
.case__arrow::after { content: none; }
.case__arrow svg { width: 0.85rem; height: 0.85rem; display: block; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .case__arrow { background: var(--dio-amarillo) !important; color: var(--dio-petroleo-950) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case__arrow { background: var(--dio-amarillo) !important; color: var(--dio-petroleo-950) !important; }
}

/* La moldura son DOS líneas, no una: aro de petróleo pegado a la foto y, afuera, el filete
   amarillo. Con el primer anillo en petróleo-100 se fundía con el disco de la foto y parecía
   que solo había amarillo (Juan, 22/09: «falta el círculo interno verde»). Del mismo grosor
   cada una, ~1,6 % del diámetro, para que se lean igual en una foto de 320 px y en un avatar
   de 28. El disco de la foto sigue en petróleo-100 y hace de tercer nivel. */

/* El hueco entre los dos aros: el aro de petróleo va pegado a la foto, después respira con el
   color de la superficie y recién ahí entra el filete amarillo — que es como está en la tarjeta
   del fundador y lo que Juan pidió respetar (22/09). Tres medidas por foto: `--aro`, `--hueco`
   y `--filete`, todas proporcionales al diámetro. */
:root[data-theme="dark"] :is(.fd3__photo, .story__media--round img, .close__wa img, .hfounder__av img,
                             .hero__art--foto img, .card__img[src*="avatar"], .card__img[src*="vitto"]) {
  /* receta unificada más abajo */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.fd3__photo, .story__media--round img, .close__wa img, .hfounder__av img,
                                      .hero__art--foto img, .card__img[src*="avatar"], .card__img[src*="vitto"]) {
  /* receta unificada más abajo */
  }
}
/* el filete quedó más afuera: el contenedor y el pie de foto le dejan el aire que necesita, y el
   selo de Vitto vuelve a apoyarse sobre el borde exterior sin pisar el texto de abajo */
.round__selo { bottom: -1.5rem; }
.story__media--round figcaption { margin-top: calc(var(--dio-space-5) + 1.4rem); }
.hero__art--foto { padding-top: 20px; }

/* ═══ La moldura de las fotos, versión final (Juan, 22/09) ════════════════════════════════════
   Dos preguntas suyas, las dos con respuesta de diseño:

   1. **«¿La amarilla es más fina?»** Sí, y ahora lo es en todos los tamaños. El aro interior de
      petróleo es la estructura; el amarillo es un **filete de remate**, y un remate se lee mejor
      más fino que lo que remata. Proporción fija: petróleo 1 · hueco 1 · amarillo 0,65. Antes los
      tres iban parejos y en las miniaturas se caía a mínimos distintos, de ahí que unas parecieran
      más finas que otras.

   2. **«¿Es transparente entre los dos círculos? ¿Qué es mejor?»** Transparente, y por eso el
      filete pasa de `box-shadow` a `outline` + `outline-offset`: con `box-shadow` el hueco tiene
      que pintarse de un color concreto, y estas fotos caen sobre fondos distintos —tarjeta blanca,
      sección niebla, sección petróleo, hero con trama de puntos—, así que cualquier color acertaba
      en un lado y fallaba en otro. Con `outline-offset` el hueco es **hueco de verdad** y deja ver
      lo que haya detrás, incluida la trama del hero. Un valor menos que mantener, y correcto en
      los dos temas sin reglas aparte. */
.fd3__photo,
.story__media--round img,
.hero__art--foto img,
.close__wa img,
.hfounder__av img,
.card__img[src*="avatar"], .card__img[src*="vitto"] {
  border: 0;
  border-radius: 50%;
  background: var(--dio-petroleo-100);
  box-shadow: 0 0 0 var(--aro) var(--dio-petroleo);
  outline: var(--filete) solid var(--dio-amarillo);
  outline-offset: calc(var(--aro) + var(--hueco));
}
/* Cada foto declara SOLO su diámetro; los tres grosores salen de una fórmula única, así las
   proporciones son idénticas en las seis y no hay tres valores por selector que se desincronicen.
   Medido antes con `tools/qa/aros.mjs`: el aro relativo iba de 1,64 % a 3,57 % y el ratio
   filete/aro de 0,40 a 1,00 — en el avatar de 28 px el aro externo era tan grueso como el
   interno, justo lo contrario de lo que tiene que pasar (Juan, 22/09). */
/* Las dos grandes bajan de 4 a 3 px de filete (y el aro, por la fórmula, de 6 a 4,5). A ese
   diámetro un aro de 6 px se suma a las zonas oscuras de la propia foto —el cuello de la campera
   de Juan es casi el mismo petróleo— y abajo se leía un solo bloque grueso en vez de una moldura
   (Juan, 22/09). En las miniaturas no pasa porque no hay superficie oscura que lo alimente. */
.story__media--round img { --filete: 3px; }   /* Ø 320 */
.hero__art--foto img     { --filete: 3px; }   /* Ø 304 */
.card__img[src*="avatar"], .card__img[src*="vitto"] { --filete: 2px; }  /* Ø 144 */
.fd3__photo              { --filete: 2px; }   /* Ø 120 */
.close__wa img           { --filete: 1px; }   /* Ø  48 */
.hfounder__av img        { --filete: 1px; }   /* Ø  28 */
/* en oscuro el aro interior se aclara para no fundirse con la tarjeta, que también es petróleo */
:root[data-theme="dark"] :is(.fd3__photo, .story__media--round img, .hero__art--foto img,
                             .close__wa img, .hfounder__av img,
                             .card__img[src*="avatar"], .card__img[src*="vitto"]) {
  box-shadow: 0 0 0 var(--aro) var(--dio-petroleo-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.fd3__photo, .story__media--round img, .hero__art--foto img,
                                      .close__wa img, .hfounder__av img,
                                      .card__img[src*="avatar"], .card__img[src*="vitto"]) {
    box-shadow: 0 0 0 var(--aro) var(--dio-petroleo-300);
  }
}
/* aire para el filete, que ahora vive fuera de la caja del elemento */
.hero__art--foto { padding-top: 14px; }
.close__wa img { margin: 4px 4px 4px 2px; }
.hfounder__av { margin: 3px 3px 3px 1px; }
/* el pie de foto del hero quedaba pegado al círculo */
.hero__cap { margin-top: var(--dio-space-5); }
.story__media--round figcaption { margin-top: calc(var(--dio-space-5) + 1.2rem); }
.round__selo { bottom: -1.35rem; }

/* ── Pie de foto: la misma distancia en todo el sitio ────────────────────────────────────────
   Medido con `tools/qa/pies.mjs`: el hueco entre la imagen y su pie iba de **0 px** (el vídeo de
   `/sobre/`, que Juan señaló) a 12 en las capturas y 40 en el hero. Cuatro distancias distintas
   para el mismo elemento.

   Ahora hay un solo valor visual, `--pie` (20 px), y las fotos con moldura le suman lo que el
   filete sobresale de la caja, para que el hueco **que se ve** sea el mismo en todas. La ficha
   de los testimonios (`.say2 figcaption`) no entra: no es un pie de foto, es la firma de quien
   habla, y tiene su propia separación con línea punteada. */
:root { --pie: var(--dio-space-4); }   /* 24 → 16 px: Juan lo pidió más ajustado (22/09) */
.story__media figcaption,
.tela__shot figcaption { margin-top: var(--pie); }
/* Las que llevan moldura compensan solo la mitad de lo que el filete sale del borde: el ojo lee
   la distancia desde el círculo, no desde la caja, y compensando el desborde entero quedaba
   demasiado aire (Juan, 22/09). En la de Vitto se cuenta además el selo, que se apoya por fuera. */
.hero__cap { margin-top: calc(var(--pie) + 6px); }
.story__media--round figcaption { margin-top: calc(var(--pie) + 1.2rem); }

/* ── Carruseles: el borde difuso solo del lado donde realmente hay más ───────────────────────
   Pedido de Juan (22/09): al abrir, la izquierda tiene que estar pintada entera; el difuminado
   es lo que avisa «hay contenido escondido para ese lado», así que al principio solo corresponde
   a la derecha, y recién aparece a la izquierda cuando ya avanzaste.

   Se resuelve **sin JavaScript**: dos variables registradas con `@property` (para que sean
   animables) y una animación atada al propio scroll con `animation-timeline: scroll(self inline)`.
   Donde no está soportado queda la máscara fija de siempre, que no molesta. */
@property --fade-izq { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-der { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes dio-bordes {
  0%   { --fade-izq: 0rem;   --fade-der: 2.5rem; }
  9%   { --fade-izq: 2.5rem; --fade-der: 2.5rem; }
  91%  { --fade-izq: 2.5rem; --fade-der: 2.5rem; }
  100% { --fade-izq: 2.5rem; --fade-der: 0rem; }
}

@supports (animation-timeline: scroll()) {
  /* El borde desvanecido dice «hay más de este lado», así que sólo vale donde de verdad hay
     una fila que se desliza. `.clients--fila` lo es a cualquier ancho; `.apps` **sólo por
     debajo de 64rem** — de ahí para arriba son tres columnas fijas sin scroll, la animación
     se queda congelada en el 0 % (`--fade-der: 2.5rem`) y el degradado le comía el borde
     derecho a la tercera tarjeta de forma permanente, como si estuviera cortada. El centro
     de la fila no pierde intensidad en ningún caso: la máscara es opaca salvo en los bordes. */
  .clients--fila {
    --fade-izq: 0rem; --fade-der: 2.5rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-izq),
                        #000 calc(100% - var(--fade-der)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-izq),
                #000 calc(100% - var(--fade-der)), transparent 100%);
    animation: dio-bordes linear both;
    animation-timeline: scroll(self inline);
  }
  @media (max-width: 63.99rem) {
    .apps {
      --fade-izq: 0rem; --fade-der: 2.5rem;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-izq),
                          #000 calc(100% - var(--fade-der)), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-izq),
                  #000 calc(100% - var(--fade-der)), transparent 100%);
      animation: dio-bordes linear both;
      animation-timeline: scroll(self inline);
    }
  }
  /* con «reducir movimiento» la máscara sigue funcionando: no es movimiento, es información */
}

/* ── Lista numerada (`steps`): el mismo chip que los pasos del método ────────────────────────
   Las «4 perguntas» de `/contato/` numeraban con un `counter` suelto en verde, mientras el resto
   del sitio numera con el chip de petróleo y el número amarillo (`.step__n`, GUIA §5.1). Ahora
   usan el mismo, con el aro interior que los despega del fondo en los dos temas. */
.steps li { padding-left: 4.9rem; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: grid; place-items: center;
  left: var(--dio-space-5); top: var(--dio-space-4);
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--dio-petroleo);
  color: var(--dio-amarillo);
  font-size: var(--dio-text-md);
  font-variant-numeric: tabular-nums lining-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dio-blanco) 14%, transparent),
              0 1px 2px color-mix(in srgb, var(--dio-petroleo-950) 22%, transparent);
}
:root[data-theme="dark"] .steps li::before,
.section--dark .steps li::before {
  background: var(--dio-petroleo-950);
  box-shadow: inset 0 0 0 1px var(--dio-petroleo-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .steps li::before {
    background: var(--dio-petroleo-950);
    box-shadow: inset 0 0 0 1px var(--dio-petroleo-400);
  }
}
@media (max-width: 30rem) { .steps li { padding-left: 4.4rem; } .steps li::before { width: 2.3rem; height: 2.3rem; } }

/* ── La luz de ambiente detrás de las capturas, en el amarillo de la marca ───────────────────
   `.tela__glow` teñía la copia borrosa con `sepia(1) saturate(5.5) hue-rotate(-6deg)`, y esa
   combinación da **matiz 35,8° con 95 % de saturación**: un naranja, no el amarillo del kit
   (#FFC94A es matiz 42,1° con 71 %). Al lado del halo radial —que sí usa el token— convivían
   dos amarillos distintos en la misma imagen, y se notaba (Juan, 22/09).

   Se calibró midiendo el color que produce cada combinación contra el token (`tools/qa/halo.mjs`):
   `saturate(3) hue-rotate(6deg)` cae en matiz 43,8° con 78 %, a 1,7° del amarillo de marca.
   Es el error más chico de las 98 combinaciones probadas. */

/* ── Las proporciones de la moldura, con una sola fórmula ────────────────────────────────────
   **El aro interior es siempre 1,5 veces el filete exterior.** El externo más fino que el interno
   es lo que hace que la moldura se lea como un remate y no como dos bordes sueltos.

   La cuenta va al revés de lo que parece natural: manda el **filete**, y el aro se deriva de él.
   Es por el motor: `outline-width` se redondea al píxel entero, así que si el filete sale de un
   porcentaje da valores como 1,67 px, que el navegador convierte en 1 px y ahí se rompe la
   proporción — medido, el ratio se iba de 0,40 a 1,00 y en el avatar de 28 px el aro externo
   llegaba a ser tan grueso como el interno. Con el filete fijado en enteros (4 · 2 · 1) el
   `box-shadow` del aro sí acepta el decimal y el ratio queda en **0,667 exacto en las seis**. */
.fd3__photo,
.story__media--round img,
.hero__art--foto img,
.close__wa img,
.hfounder__av img,
.card__img[src*="avatar"], .card__img[src*="vitto"] {
  --aro:   calc(var(--filete) * 1.5);
  /* El hueco no baja de 2,5 px: por debajo, los dos aros se tocan y en los avatares chicos
     parecía un solo borde grueso (Juan, 22/09). El 2,5 no es arbitrario — `outline-offset`
     también se redondea al píxel entero, y con aro 1,5 es el valor que hace que la suma caiga
     justo en 4 px en vez de perder medio píxel por el camino. */
  --hueco: max(2.5px, calc(var(--filete) * 1.5));
}

/* El contenedor de la foto redonda no lleva relleno lateral: el filete es un `outline`, que no
   ocupa sitio en la maquetación, y ese relleno corría el `left: 50 %` del selo 18 px a la
   izquierda del centro del círculo — medido en las cinco combinaciones de página y ancho con
   `tools/qa/selo.mjs` (Juan, 22/09). Sin él, el centro del selo y el de la foto coinciden. */
.round__wrap { padding: 0; }

/* ── Puntero y foco: que se note qué es clickeable y qué está bajo el mouse ──────────────────
   Medido con `tools/qa/cursores.mjs`: 36 tarjetas del sitio son clickeables enteras —llevan un
   `<a>` con un `::after` que cubre toda la caja— pero el cursor seguía siendo la flecha fuera
   del texto del enlace. Quien pasa por encima no sabía que podía hacer clic en cualquier parte. */
.svc:has(.svc__link), .seg2:has(.seg2__link), .cli:has(.svc__link),
.rel, .deck:has(a[href]), .app:has(.app__link) { cursor: pointer; }
/* dentro del carrusel manda el `grab`, que sí describe lo que se puede hacer ahí */
.clients--fila .cli { cursor: pointer; }
.clients--fila.is-dragging .cli { cursor: grabbing; }

/* Filas de tabla: al pasar el mouse, la línea se ilumina entera. Antes no pasaba nada y la
   tabla se sentía un bloque muerto (Juan, 22/09). El resaltado usa el tinte de marca y cubre
   toda la fila, padding de las celdas incluido. */
tbody tr { transition: background-image var(--dur-1, 160ms) var(--ease-out, ease-out); }
/* el tinte se pinta ENCIMA del fondo que ya tenga la fila, no lo reemplaza: así funciona igual
   sobre una fila transparente, sobre la alterna y sobre el petróleo del modo oscuro */
tbody tr:hover { background-image: linear-gradient(var(--dio-tint), var(--dio-tint)); }
tbody tr:hover td { color: var(--dio-text); }
/* la última fila no debe perder el radio inferior del marco */
tbody tr:last-child:hover td:first-child { border-bottom-left-radius: var(--dio-radius-lg); }
tbody tr:last-child:hover td:last-child { border-bottom-right-radius: var(--dio-radius-lg); }

/* Las filas de la comparativa son una tabla en grid: mismo comportamiento */
.cmp__row { transition: background-image var(--dur-1, 160ms) var(--ease-out, ease-out),
                        border-color var(--dur-1, 160ms) var(--ease-out, ease-out); }
/* la especificidad tiene que ganarle a `.section:nth-of-type(even) .cmp__row` y a la regla del
   tema oscuro, que usan el atajo `background` y borrarían la capa del hover */
:root .cmp__row:hover, :root[data-theme="dark"] .cmp__row:hover {
  background-image: linear-gradient(var(--dio-tint), var(--dio-tint));
  border-color: var(--dio-tint-line);
}
@media (prefers-reduced-motion: reduce) { tbody tr, .cmp__row { transition: none; } }

/* El botón del cierre subía 2 px al pasar el mouse, y ese `transform` que aparece y desaparece
   hace que el compositor cree y destruya una capa: el texto de al lado se vuelve a rasterizar y
   «baila», aunque no se mueva ni un píxel (medido: 0 px de desplazamiento en toda la caja).
   Declarando el transform en reposo, la capa existe desde el principio y el temblor desaparece. */
.close__btn { transform: translateY(0); backface-visibility: hidden; }

/* ── Pasada final: el relleno de las tarjetas ────────────────────────────────────────────────
   Medido con `tools/qa/espacios.mjs`: convivían **cinco** rellenos para el mismo tipo de pieza
   —24, 28 y 32 px, más `.cli` en 0 y dos familias con dos valores distintos entre sí— aunque el
   token `--pad-card` existe desde el principio y ya lo usaban `svc`, `seg2`, `step`, `app`,
   `acard` y las del fundador. Las que faltaban se suman: la misma tarjeta, el mismo aire.

   `--pad-card` es fluido (20 px en celular, 28 en escritorio), así que esto además arregla que
   `deck`, `rel` y `card` tuvieran un relleno fijo que no se achicaba en pantallas chicas. */
.deck, .rel, .card { padding: var(--pad-card); }
/* Las piezas protagonistas —las que ya llevan el radio de 28— mantienen un escalón más de aire,
   pero también derivado del token, no un valor suelto */
.plan, .say2, .story__side, .close__box { padding: calc(var(--pad-card) + var(--dio-space-1)); }

/* Objetivos táctiles: los enlaces del pie, el logo y el banner medían 20–22 px de alto, por
   debajo de los 24 que pide la WCAG 2.2 (SC 2.5.8). Se resuelve con relleno vertical, que agranda
   el área de clic sin mover la maquetación ni cambiar el tamaño de la letra. */
.foot-col ul li a, .foot-legal a, .site-header .brand, .promo-bar__link, .foot-brand > a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.foot-col ul li a, .foot-legal a { padding-block: 0.1rem; }

/* Ancho de línea de las notas: 145 caracteres por renglón, casi el doble de lo que se lee
   cómodo. El límite pasa a estar en caracteres, no en rem, que es lo que importa para leer. */
.note, .section--process .note, .section--services .note { max-width: 86ch; }
.nota > p { max-width: 46ch; }
/* los enlaces al sitio del cliente en las tarjetas de depoimento son el último objetivo por
   debajo de 24 px: mismo tratamiento */
.say2__who a { display: inline-flex; align-items: center; min-height: 24px; }

/* La flecha de enlace externo separa con `margin`, no con un espacio de texto: ese espacio se
   subrayaba al pasar el mouse y dejaba un «_» suelto debajo de la flecha (Juan, 22/09). De paso
   el aire sube de un espacio normal a 0,4 em, que a este tamaño se lee mejor. */
/* El aire va como `padding` del propio `.ext`, no como `margin`: el margen sigue formando parte
   de la línea del padre, así que el subrayado del enlace lo cruzaba y quedaba un «_» suelto
   debajo de la flecha. Como `.ext` es `inline-block`, su caja —padding incluido— no recibe la
   decoración heredada, y el subrayado se detiene donde termina el texto (Juan, 22/09). */
a span.ext { padding-left: 0.4em; text-decoration: none; }

/* ── La chapa de Vitto, como la placa del logo ───────────────────────────────────────────────
   Pedido de Juan (22/09): que parezca una placa, con dos tornillos, uno de cada lado. El motivo
   ya existe en la marca — `brand-kit/logo/svg/placa.svg` es un marco de esquinas redondeadas con
   dos rombos amarillos a un costado— así que la chapa lo reusa en vez de inventar otro objeto:
   mismo marco, mismo radio, mismo rombo, y el texto centrado entre los dos «tornillos». */
.round__selo {
  gap: var(--dio-space-4);
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--dio-amarillo);
  border-radius: 0.7rem;
  background: var(--dio-petroleo);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--dio-petroleo-950) 65%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--dio-blanco) 10%, transparent);
}
.round__tor {
  flex: none; width: 0.62rem; height: 0.62rem;
  background: var(--dio-amarillo);
  transform: rotate(45deg);
  border-radius: 1.5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dio-amarillo-800) 45%, transparent);
}
.round__selo-t { justify-items: center; text-align: center; }
:root[data-theme="dark"] .round__selo {
  background: var(--dio-petroleo-950);
  border-color: var(--dio-amarillo);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
:root[data-theme="dark"] .round__selo strong { color: var(--dio-amarillo); }
:root[data-theme="dark"] .round__selo span { color: var(--dio-petroleo-200); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .round__selo {
    background: var(--dio-petroleo-950); border-color: var(--dio-amarillo);
    box-shadow: 0 10px 26px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
  }
  :root:not([data-theme="light"]) .round__selo strong { color: var(--dio-amarillo); }
  :root:not([data-theme="light"]) .round__selo span { color: var(--dio-petroleo-200); }
}

/* Hero de /precos/: la escena venía un punto más grande que el resto y pesaba sobre el titular */
.hero--art:has(img[src*="20-precos"]) .hero__art img { max-width: min(100%, 31rem); }

/* ── Una sola escala de motion ───────────────────────────────────────────────────────────────
   Convivían dos: la del kit (`--dio-dur` 200 ms, `--dio-ease`) con 37 usos, y la de la guía
   (`--dur-1..4`, `--ease-out`) con 33. Peor: `--dio-ease` y `--ease-out` son **exactamente el
   mismo cubic-bezier** con dos nombres, y 200 ms no es ninguno de los cuatro escalones.

   `--dio-dur` pasa a ser un alias de `--dur-2` (260 ms), que es el escalón que la guía define
   justo para lo que lo usa: tarjetas, flechas e iconos. No se toca `brand.css`, que es generado;
   el alias vive acá. Así hay una sola escala y cualquier ajuste futuro se hace en un solo lugar. */
:root { --dio-dur: var(--dur-2); --dio-ease: var(--ease-out); }

/* Los literales que duplicaban un token: 260ms era --dur-2, 200ms era --dio-dur, 400ms ≈ --dur-3 */
.svc, .seg, .cli, .acard, .prod, .art { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.seg2 { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.seg2::before { transition: transform var(--dur-3) var(--ease-out); }
.seg2__go { transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.btn { transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }

/* ── Carruseles: sus piezas nunca se ocultan a la espera del observer ────────────────────────
   Un `IntersectionObserver` mira la intersección con el **viewport**, no con el scroller. Las
   tarjetas que están fuera del área visible de un carrusel horizontal nunca «entran», así que
   nunca reciben `.in` y se quedaban en `opacity: 0`: en `/sobre/` los depoimentos 5 a 9 estaban
   invisibles, y en celular la tercera tarjeta de apps también (medido con `tools/qa/invis.mjs`).
   Quien arrastraba el carrusel se encontraba con tarjetas en blanco.

   La entrada la hace el contenedor, que sí intersecta; las piezas de adentro se pintan siempre. */
.motion :is(.says--fila, .clients--fila, .apps, .prods) > * { opacity: 1 !important; animation: none !important; }

/* ── Índice de las páginas legales (`kind: toc`) ────────────────────────────────────────────
   Privacidade, Termos e Cookies pasaron de 5 a ~20 secciones: nadie las lee de corrido, se
   entra a buscar una cosa. El índice se arma solo con los H2 de la propia página (render_page),
   y se apoya en la tarjeta estándar para no inventar terminación nueva. En pantalla ancha va a
   dos columnas: 20 líneas en una sola columna empujaban el texto fuera del pliegue. */
.toc { margin: var(--dio-space-6) 0 0; padding: var(--pad-card); list-style: none; counter-reset: toc;
  border: 1px solid var(--dio-border); border-radius: var(--r-card); background: var(--dio-surface);
  columns: 1; column-gap: var(--dio-space-6); max-width: 60rem; }
.toc li { counter-increment: toc; break-inside: avoid; margin: 0 0 var(--dio-space-2); }
.toc li::before { content: counter(toc) ". "; font-family: var(--dio-font-display); font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.toc a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-1) var(--ease-out); }
.toc a:hover { border-bottom-color: currentColor; }
@media (min-width: 48rem) { .toc { columns: 2; } }

/* ── El halo de las capturas: el mismo amarillo en los dos temas ─────────────────────────────
   En claro el glow pasa por `grayscale(1) sepia(1) …`, que lo lleva al amarillo de marca sin
   importar qué muestre la captura. En oscuro no: llevaba solo `saturate(2.1) brightness(1.5)`,
   o sea **conservaba los colores originales de cada imagen y los saturaba al doble**. Por eso
   en fondo oscuro cada captura daba un spot de un color distinto — verde el del portal, naranja
   el de Musical Riff, crema el del plano (Juan, 22/09).

   Ahora oscuro usa el mismo teñido calibrado que claro (matiz 43,8°, a 1,7° del token; ver la
   entrada de la luz de ambiente). Solo cambian el brillo y la mezcla, que es lo que tiene que
   cambiar entre un fondo claro y uno oscuro: `multiply` contra `screen`. */
:root[data-theme="dark"] .tela__glow,
:root[data-theme="dark"] .case__glow {
  filter: blur(clamp(34px, 5vw, 84px)) grayscale(1) sepia(1) saturate(3) hue-rotate(6deg) brightness(1.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__glow,
  :root:not([data-theme="light"]) .case__glow {
    filter: blur(clamp(34px, 5vw, 84px)) grayscale(1) sepia(1) saturate(3) hue-rotate(6deg) brightness(1.5);
  }
}

/* ── Regla: no animar la opacidad de algo que contiene un `mix-blend-mode` ───────────────────
   `.tela__set` se había sumado a la lista de entradas, pero adentro lleva `.tela__glow` con
   `multiply` (claro) / `screen` (oscuro). Mientras dura el fundido, la mezcla se resuelve contra
   una capa semitransparente y el halo se ve de otro color, que salta al valor bueno al terminar:
   justo el «primero aparece un color y luego cambia» que reportó Juan (22/09).

   El bloque `tela` entra por su columna de texto (`.tela__txt`), que no tiene mezcla. La captura
   y su luz se pintan directamente. Vale para cualquier pieza futura con `mix-blend-mode`. */
.motion .tela__set { opacity: 1 !important; animation: none !important; }

/* La escena de /precos/ es la única **cuadrada** del set —las demás son apaisadas— así que con
   el mismo ancho ocupaba un 40 % más de alto y se leía mucho más grande. Se limita por altura,
   que es lo que iguala la percepción, y no por ancho (Juan, 22/09). */
.hero--art:has(img[src*="20-precos"]) .hero__art img { max-width: min(100%, 27rem); max-height: 20rem; width: auto; object-fit: contain; }

/* ── El halo, independiente de lo que muestre la captura ─────────────────────────────────────
   `sepia()` tiñe bien los tonos medios pero deja el blanco casi blanco, así que el matiz del
   halo dependía de lo clara que fuera la imagen. Medido con `tools/qa/tint.mjs`:

   | tono de la captura | matiz que daba |
   |---|---|
   | blanco (el plano, que es un documento) | **60,0°** — limón lavado |
   | claro | 60,0° |
   | medio | 43,8° |
   | oscuro | 43,6° |

   De ahí que el spot del plano se viera de otro color que el del portal, en los dos temas
   (Juan, 22/09). Un `contrast(0.35) brightness(0.55)` **antes** del sepia comprime todos los
   tonos al rango medio, donde el teñido es parejo: los cuatro quedan en 43,3–44,0° con la misma
   saturación. La intensidad se controla con la opacidad, no con el brillo, para no volver a
   meter la luminosidad de la imagen en la ecuación. */
:root[data-theme="dark"] .tela__glow,
:root[data-theme="dark"] .case__glow {
  filter: blur(clamp(34px, 5vw, 84px)) grayscale(1) contrast(0.35) brightness(0.55) sepia(1) saturate(3) hue-rotate(6deg) brightness(1.5);
  opacity: .5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__glow,
  :root:not([data-theme="light"]) .case__glow {
    filter: blur(clamp(34px, 5vw, 84px)) grayscale(1) contrast(0.35) brightness(0.55) sepia(1) saturate(3) hue-rotate(6deg) brightness(1.5);
    opacity: .5;
  }
}

/* ── En oscuro el halo lo hace el token, no la imagen ────────────────────────────────────────
   El «ambient glow» —la copia borrosa de la propia captura— funciona sobre fondo claro: medido,
   los tres bloques de `/como-trabalhamos/` dan 44,6° · 46,7° · 48,3°, todos amarillo de marca.

   Sobre fondo oscuro no hay forma de que funcione. `screen` suma el halo al petróleo del fondo,
   que tiene el canal azul alto (#0A2E2F), y el matiz resultante se va al verde en una medida que
   depende de lo clara que sea cada captura: **140,0° · 111,8° · 145,7°**, tres verdes distintos.
   Por eso el spot del plano se veía de otro color que el del portal (Juan, 22/09). Subir la
   opacidad o cambiar el modo de mezcla no lo arregla: el azul del fondo siempre entra.

   Así que en oscuro manda el halo radial, que es `rgba(255,201,74,…)` puro —el token— y no se
   mezcla con nada: el mismo amarillo en las cinco capturas, mida lo que mida la imagen. */
:root[data-theme="dark"] .tela__glow { opacity: 0; }
:root[data-theme="dark"] .tela__shot::before { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,201,74,.22) 0%, rgba(255,201,74,.09) 42%, rgba(255,201,74,0) 74%); }
:root[data-theme="dark"] .tela__shot::after  { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,201,74,.26) 0%, rgba(255,201,74,.1) 45%, rgba(255,201,74,0) 74%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__glow { opacity: 0; }
  :root:not([data-theme="light"]) .tela__shot::before { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,201,74,.22) 0%, rgba(255,201,74,.09) 42%, rgba(255,201,74,0) 74%); }
  :root:not([data-theme="light"]) .tela__shot::after  { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,201,74,.26) 0%, rgba(255,201,74,.1) 45%, rgba(255,201,74,0) 74%); }
}

/* ── El halo del hero: más abierto y menos concentrado ───────────────────────────────────────
   Pedido de Juan (22/09): «que el spot se difumine más, bien al claro; no concentrar tanto el
   color». El centro estaba en 58 % de alpha y se apagaba al 68 % del radio, así que era una
   mancha compacta con un borde perceptible. Ahora arranca en 26 %, reparte la caída en cinco
   paradas y llega hasta el 96 % del radio: la misma luz, pero abierta y sin borde.
   Vale para las LP y para la home, que comparten `.hero__art`. */
.hero__art::before {
  width: 165%;
  /* Sin `border-radius`: la forma la da el propio degradado. Un círculo recortado siempre deja
     ver su contorno; con el degradado libre y un desenfoque encima no hay borde que ver. */
  border-radius: 0;
  background: radial-gradient(circle,
    rgba(255,201,74,.58) 0%,
    rgba(255,201,74,.52) 10%,
    rgba(255,201,74,.40) 20%,
    rgba(255,201,74,.27) 31%,
    rgba(255,201,74,.16) 43%,
    rgba(255,201,74,.085) 55%,
    rgba(255,201,74,.04) 67%,
    rgba(255,201,74,.015) 79%,
    rgba(255,201,74,0)   92%);
  filter: blur(34px);
}
:root[data-theme="dark"] .hero__art::before {
  border-radius: 0; filter: blur(34px);
  background: radial-gradient(circle,
    rgba(255,201,74,.50) 0%,
    rgba(255,201,74,.44) 10%,
    rgba(255,201,74,.34) 20%,
    rgba(255,201,74,.23) 31%,
    rgba(255,201,74,.14) 43%,
    rgba(255,201,74,.07) 55%,
    rgba(255,201,74,.032) 67%,
    rgba(255,201,74,.012) 79%,
    rgba(255,201,74,0)   92%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__art::before {
    border-radius: 0; filter: blur(34px);
    background: radial-gradient(circle,
      rgba(255,201,74,.50) 0%,
      rgba(255,201,74,.44) 10%,
      rgba(255,201,74,.34) 20%,
      rgba(255,201,74,.23) 31%,
      rgba(255,201,74,.14) 43%,
      rgba(255,201,74,.07) 55%,
      rgba(255,201,74,.032) 67%,
      rgba(255,201,74,.012) 79%,
      rgba(255,201,74,0)   92%);
  }
}
/* la foto del fundador ya tenía su propio haz cálido: se abre igual */
.hero__art--foto::after { background: radial-gradient(ellipse at center, rgba(255,201,74,.42) 0%, rgba(255,201,74,.26) 24%, rgba(255,201,74,.13) 44%, rgba(255,201,74,.05) 66%, rgba(255,201,74,0) 92%) !important; }

/* el halo de las capturas en oscuro sube un punto, para acercar el matiz al token */
:root[data-theme="dark"] .tela__shot::before { background: radial-gradient(ellipse at center, rgba(255,201,74,.32) 0%, rgba(255,201,74,.13) 42%, rgba(255,201,74,0) 76%); }
:root[data-theme="dark"] .tela__shot::after  { background: radial-gradient(ellipse at center, rgba(255,201,74,.36) 0%, rgba(255,201,74,.14) 45%, rgba(255,201,74,0) 76%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tela__shot::before { background: radial-gradient(ellipse at center, rgba(255,201,74,.32) 0%, rgba(255,201,74,.13) 42%, rgba(255,201,74,0) 76%); }
  :root:not([data-theme="light"]) .tela__shot::after  { background: radial-gradient(ellipse at center, rgba(255,201,74,.36) 0%, rgba(255,201,74,.14) 45%, rgba(255,201,74,0) 76%); }
}

/* ── Aviso de cookies ───────────────────────────────────────────────────────────────────
   Los dos botones son IDÉNTICOS: mismo tamaño, mismo borde, mismo fondo, misma letra. Sólo
   cambia lo que dicen. Acá el amarillo de marca NO se usa para «Aceitar»: un botón relleno
   contra uno vacío es el empujón que el aviso viene a evitar, y la CNIL multó en 2025 por
   eso mismo (Google 325 M€, Shein 150 M€) — por cómo estaba hecho el banner, no por medir.
   El foco sí va en amarillo, como en todo el sitio. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--dio-space-4); padding: var(--dio-space-4) var(--dio-space-5);
  background: var(--dio-surface); color: var(--dio-text);
  border-top: 2px solid var(--dio-border); box-shadow: 0 -6px 24px rgba(15,61,62,.16); }
.consent__text { margin: 0; flex: 1 1 22rem; max-width: 62ch; font-size: var(--dio-text-sm); line-height: var(--dio-leading-body); }
.consent__text a { color: var(--dio-text); font-weight: 700; text-underline-offset: 0.2em; }
.consent__acts { display: flex; flex-wrap: wrap; gap: var(--dio-space-3); flex: 0 1 auto; }
.consent__btn { flex: 1 1 auto; min-width: 8.5rem; min-height: 44px; padding: 0.6rem 1.2rem;
  font-family: var(--dio-font-display); font-size: var(--dio-text-sm); font-weight: 600; line-height: 1.2;
  color: var(--dio-text); background: transparent; border: 2px solid var(--dio-petroleo);
  border-radius: var(--r-inner); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.consent__btn:hover { background: var(--dio-tint); transform: translateY(-1px); }
.consent__btn:focus-visible { outline: 3px solid var(--dio-amarillo); outline-offset: 2px; }
/* El aviso se apoya abajo, donde también viven WhatsApp y «volver arriba»: mientras está
   abierto se los sube su propia altura (`--consent-h`, medida en el navegador) en vez de
   taparlos. */
.has-consent .wa-float { bottom: calc(1rem + var(--consent-h, 0px)); }
.has-consent .to-top { bottom: calc(1.25rem + var(--consent-h, 0px)); }
@media (max-width: 71.99rem) { .has-consent .to-top { bottom: calc(1rem + 3rem + 0.75rem + var(--consent-h, 0px)); } }
/* El enlace que reabre el aviso, en el pie: es un <button>, así que hay que devolverle el
   aspecto de los otros tres enlaces legales (incluido el objetivo táctil de 24 px). */
.foot-consent { display: inline-flex; align-items: center; min-height: 24px; padding: 0.1rem 0;
  font-family: inherit; font-size: inherit; color: rgba(243,246,244,.86);
  background: none; border: 0; cursor: pointer; transition: color var(--dio-dur) var(--dio-ease); }
.foot-consent:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.foot-consent:focus-visible { outline: 3px solid var(--dio-amarillo); outline-offset: 2px; }

:root[data-theme="dark"] .consent { border-top-color: var(--dio-petroleo-600); box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
:root[data-theme="dark"] .consent__btn { border-color: var(--dio-amarillo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .consent { border-top-color: var(--dio-petroleo-600); box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
  :root:not([data-theme="light"]) .consent__btn { border-color: var(--dio-amarillo); }
}

/* ── Los botones del teléfono, visibles de verdad ────────────────────────────────────────────
   Estaban con `z-index: -1` para pasar por detrás del bisel y que se viera solo el saliente.
   Pero `.app__phone` no crea contexto de apilamiento, así que ese `-1` los mandaba detrás del
   **fondo de la tarjeta**, que es opaco: quedaban tapados por completo. Y aunque no lo estuvieran,
   sobresalían 2,2 px de un ancho de 2,7: casi nada.

   Ahora van pegados al canto, enteramente por fuera del marco, con apilamiento normal y el radio
   solo del lado que se ve. Se leen sin taparse con el bisel y sin depender de ningún z-index. */
.app__phone::before, .app__phone::after,
.case__mob::before, .case__mob::after {
  z-index: 1;
  border-radius: 1.5px 0 0 1.5px;
  /* sin sombra proyectada: dejaba una línea suelta por fuera del canto */
  box-shadow: none;
}
.app__phone::before { left: -0.15rem; width: 0.15rem; }
.app__phone::after  { right: -0.15rem; width: 0.15rem; border-radius: 0 1.5px 1.5px 0; }
.case__mob::before { left: -0.13rem; width: 0.13rem; }
.case__mob::after  { right: -0.13rem; width: 0.13rem; border-radius: 0 1.5px 1.5px 0; }

/* ── El subrayado del pie se detiene donde termina el texto ──────────────────────────────────
   `text-decoration: none` en el `.ext` no alcanza: Chrome dibuja la decoración del `<a>` a lo
   largo de toda su caja de línea, también por debajo de los hijos atómicos, así que quedaba un
   «_» suelto bajo la flecha (Juan, 22/09).

   La flecha sale del flujo con `position: absolute`: deja de formar parte de la línea del enlace
   y el subrayado no la alcanza. Sigue siendo descendiente del `<a>`, así que sigue siendo
   clickeable y hereda el color y el hover. */
.foot-col a, .foot-legal a { position: relative; }
.foot-col a span.ext, .foot-legal a span.ext {
  position: absolute; left: 100%; top: 50%;
  translate: 0 -50%;
  padding-left: 0.4em;
}
/* el enlace reserva el hueco de la flecha para que no se monte sobre lo de al lado */
.foot-col a:has(span.ext), .foot-legal a:has(span.ext) { margin-right: 1.2em; }

/* ── Páginas legales: una sola columna, y el texto la ocupa entera ──────────────────────
   Medido el 22/09 en `/termos/` a 1440: la tabla salía a 1152 px, la lista a 832, el H2 a 768
   y el párrafo a 672 —el texto era lo más angosto de la página, con todo lo demás pasándolo de
   largo por la derecha—. Eso no se lee como «columna de lectura cómoda», se lee como algo roto.

   Acá la columna es UNA, de 48rem, y todo mide lo mismo: párrafo, título, lista, tabla, nota e
   índice de punta a punta. 48rem no es un número al azar: es el ancho que los H2 ya tenían, deja
   la línea en unos 80 caracteres —largo pero legible— y no obliga a la tabla de tres columnas a
   hacer scroll lateral en escritorio. El resto del sitio no se toca: ahí el texto convive con
   ilustraciones y tarjetas, y la medida angosta tiene sentido. */
main.legal .wrap { width: min(100% - 2rem, 48rem); }
/* (el `max-width: none` de esta línea ya no incluye h2, .intro, .note ni .prose: la medida de
   lectura se fija más abajo, en la regla que realinea las legales con el resto del sitio) */
main.legal :is(.lead, .list, .toc) { max-width: none; }
main.legal .toc { columns: 1; }
@media (min-width: 40rem) { main.legal .toc { columns: 2; } }

/* ── Las legales, alineadas con el resto del sitio ───────────────────────────────────────────
   La pasada anterior les dio una columna propia de 48 rem, centrada, y el argumento era bueno:
   en un documento largo todo debe medir lo mismo, sin elementos que se pasen de largo. Pero eso
   los dejaba arrancando en x=336 mientras el header, el banner y el pie arrancan en x=144: al
   bajar desde el pie, el contenido «saltaba» hacia adentro. Medido en las tres.

   Se conservan las dos cosas: el `.wrap` vuelve al del sitio —misma alineación que todo lo
   demás— y la medida de lectura se limita **dentro** de él, alineada a la izquierda. El texto
   sigue en su columna cómoda, y el documento deja de sentirse una isla. */
main.legal .wrap { width: min(100% - 2rem, var(--dio-container)); }
/* El contenido ocupa el ancho entero: en un documento de consulta, la columna a media página
   dejaba la mitad derecha vacía y alargaba el scroll sin ganar nada (Juan, 22/09). Los H2
   conservan su medida corta —la misma que en el resto del sitio— para que quiebren bien. */
main.legal :is(.intro, .lead, .prose, .note, .list, .toc, .table-wrap, p, ul, ol) { max-width: none; }
/* Los títulos de las legales van en una línea: son enunciados de sección, no titulares de
   campaña, y quebrados en dos se leen como si fueran dos cosas (Juan, 22/09). Ocupan el ancho
   del wrap; `balance` reparte si alguno igual no entra. El H2 del bloque de dudas no entra acá:
   vive en la columna lateral del `faq2` y sigue el patrón de las LP. */
main.legal .wrap > h2, main.legal section > .wrap > h2 { max-width: none; text-wrap: balance; }

/* ── El aviso de cookies, dentro del sistema ─────────────────────────────────────────────────
   Lo que NO se toca: los dos botones siguen siendo idénticos entre sí. Esa paridad es la
   decisión legal del bloque de arriba y no es un detalle de estilo.

   Lo que sí, porque estaba fuera del sistema (medido el 22/09):
   · los botones tenían radio de 12 px cuando **todos** los del sitio son pastilla;
   · el aviso aparecía de golpe, sin la entrada que tiene cualquier otra pieza;
   · se apoyaba a ras del borde, sin las esquinas de «hoja» con las que el sitio separa capas;
   · el enlace «Saiba o que guardamos» medía 20 px de alto, por debajo de los 24 del criterio
     táctil que se aplicó al resto. */
.consent {
  border-radius: var(--sheet, 24px) var(--sheet, 24px) 0 0;
  border-top: 1px solid var(--dio-border-card);
}
.consent__btn { border-radius: var(--dio-radius-pill); }
.consent__text a { display: inline-flex; align-items: center; min-height: 24px; }

@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in var(--dur-4) var(--ease-out-expo) both; }
  @keyframes consent-in { from { opacity: 0; translate: 0 100%; } }
}
:root[data-theme="dark"] .consent { border-top-color: var(--dio-petroleo-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .consent { border-top-color: var(--dio-petroleo-600); }
}

/* ── Tablas de las legales: un reparto de columnas, no uno por tabla ─────────────────────────
   Con `table-layout: auto` cada tabla repartía según su contenido: medidas las cinco de
   `/privacidade/`, las mismas tres columnas salían 177/717/256, 427/546/177 y 220/276/654. Al
   bajar de una a otra, las columnas bailaban.

   Ahora el reparto es fijo y el mismo en todas: la columna del medio —la descripción— es la
   ancha, y las de los lados (qué dato, cuánto tiempo) van parejas. El scroll lateral en celular
   se mantiene: es la forma correcta de mostrar una tabla de tres columnas a 390 px, y el
   `.table-wrap` ya la hace alcanzable con el teclado. */
main.legal table { table-layout: fixed; }
main.legal table :is(th, td) { overflow-wrap: anywhere; }
/* tres columnas */
main.legal table:has(thead th:nth-child(3):last-child) :is(th, td):nth-child(1) { width: 26%; }
main.legal table:has(thead th:nth-child(3):last-child) :is(th, td):nth-child(2) { width: 48%; }
main.legal table:has(thead th:nth-child(3):last-child) :is(th, td):nth-child(3) { width: 26%; }
/* cuatro columnas (la de cookies) */
main.legal table:has(thead th:nth-child(4):last-child) :is(th, td):nth-child(1) { width: 24%; }
main.legal table:has(thead th:nth-child(4):last-child) :is(th, td):nth-child(2) { width: 34%; }
main.legal table:has(thead th:nth-child(4):last-child) :is(th, td):nth-child(3) { width: 22%; }
main.legal table:has(thead th:nth-child(4):last-child) :is(th, td):nth-child(4) { width: 20%; }

/* El índice se alinea con el resto de las tarjetas del sitio: mismo borde, misma sombra. Los
   números pasan al verde de etiqueta, que es como el sitio numera en texto. */
.toc { border-color: var(--dio-border-card); box-shadow: var(--sh-rest); max-width: none; }
.toc li::before { color: var(--dio-verde-700); font-weight: 800; }
:root[data-theme="dark"] .toc li::before { color: var(--dio-verde-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toc li::before { color: var(--dio-verde-300); } }

/* El número de sección de las legales ocupa el lugar del eyebrow: mismo tamaño, mismo peso,
   mismo verde y el mismo rombo amarillo delante. En un documento de veinte secciones, inventar
   veinte etiquetas sería ruido; el número, además, es como se cita un texto legal. */
.eyebrow--num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.08em; }

/* Un correo dentro del panel de dudas caía en el verde de enlace del tema claro sobre el fondo
   petróleo del panel: 2,27:1. Dentro del panel, los enlaces toman el color del propio panel. */
.faq2__ask a { color: var(--dio-amarillo); text-underline-offset: 0.2em; }
.faq2__ask a.btn { color: var(--dio-tinta); }

/* ===== Menú móvil (drawer) =====
   < 72rem, como el cajón de NimboCDN (GUIA §5.3): panel a la derecha de min(330px, 86vw) —deja un respiro a la
   izquierda donde se ve la página detrás de un velo—, alto completo, sin radio, logo + ✕ arriba, ítems en Sora 20 px
   con filete, idioma y tema como fichas y el CTA amarillo al pie. Funciona sin JS (checkbox #nav-open + <label>:
   botón, ✕ y velo); THEME_JS suma teclado, inert, foco atrapado, Escape y cierre al tocar un enlace.
   Abre/cierra con translate + opacity (--dur-3, --ease-out-expo); la visibilidad espera al final al cerrar. */
.nav-veil, .nav__top, .nav__prefs { display: none; }
@media (max-width: 71.99rem) {
  .brand { display: flex; align-items: center; min-height: 4rem; }
  /* Por encima del aviso de cookies (8) para que el cajón lo tape entero */
  .site-header { z-index: 9; }
  /* El blur del header oscuro lo hace «bloque contenedor» de los fixed: el cajón quedaba encerrado en 4rem.
     Se pasa el blur a un pseudo-elemento, que no afecta a los hijos. */
  :root[data-theme="dark"] .site-header { backdrop-filter: none; }
  :root[data-theme="dark"] .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); pointer-events: none; }

  .nav-btn, .nav-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--dio-border); border-radius: var(--dio-radius-md); background: transparent; color: var(--dio-text); cursor: pointer; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
  .nav-btn:hover, .nav-close:hover { background: var(--dio-surface-2); border-color: var(--dio-border-input); }
  .nav-btn svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav-close svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .nav-veil { display: block; position: fixed; inset: 0; background: color-mix(in srgb, var(--dio-petroleo-950) 50%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
  .nav, .nav-open:checked ~ .nav { position: fixed; inset: 0 0 0 auto; z-index: 1; width: min(20.625rem, 86vw); height: 100dvh; max-height: none; display: flex; flex-direction: column; gap: 1.75rem; margin: 0; padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--dio-surface); color: var(--dio-text); border: 0; border-radius: 0; box-shadow: var(--dio-shadow-lg); translate: 100% 0; visibility: hidden; transition: translate var(--dur-3) var(--ease-out-expo), visibility 0s linear var(--dur-3); }
  .nav > * { flex: none; }
  .nav-open:checked ~ .nav-veil { opacity: 1; visibility: visible; transition: opacity var(--dur-3) var(--ease-out), visibility 0s; }
  .nav-open:checked ~ .nav { translate: 0 0; visibility: visible; transition: translate var(--dur-3) var(--ease-out-expo), visibility 0s; }
  /* Bloquea el scroll del fondo (con o sin JS) y esconde los flotantes */
  html:has(.nav-open:checked) { overflow: hidden; }
  body:has(.nav-open:checked) :is(.wa-float, .to-top) { opacity: 0; visibility: hidden; pointer-events: none; }

  .nav__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .nav__top img { width: 160px; height: auto; }
  .nav .hdr-ctl { display: none; }

  /* Ítems: como NimboCDN (display 20 px, 600, 14 px de aire, filete abajo) */
  .nav .menu { display: flex; flex-direction: column; gap: 0; font-size: inherit; }
  .nav .menu > li { border-bottom: 1px solid var(--dio-border); }
  .nav .menu > li > a, .nav .menu .has-sub > span { display: block; padding: 0.875rem 0; font-family: var(--dio-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: var(--dio-tracking-display); color: var(--dio-text); text-decoration: none; }
  .nav .menu > li > a:hover { color: var(--dio-link); }
  .nav .menu a[aria-current] { color: var(--dio-link); text-decoration: none; }
  /* Submenú de Serviços: siempre abierto, debajo del título, con una guía a la izquierda */
  .nav .menu .has-sub > span { padding-bottom: 0.5rem; }
  .nav .menu .has-sub ul { display: block; margin: 0 0 0.875rem; padding: 0 0 0 0.875rem; border-left: 2px solid var(--dio-border); }
  .nav .menu .has-sub ul a { display: block; padding: 0.375rem 0; font-size: var(--dio-text-md); font-weight: 500; color: var(--dio-text); text-decoration: none; }
  .nav .menu .has-sub ul a:hover { color: var(--dio-link); }
  .nav .menu .sep { margin: 0.35rem 0; }

  /* Idioma y tema: fichas a la vista (no desplegables), con su etiqueta */
  .nav__prefs { display: block; }
  .nav__over { margin: 0 0 0.625rem; font-size: var(--dio-text-xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dio-petroleo-600); }
  .nav__prefs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .nav__prefs ul + .nav__over { margin-top: 1.25rem; }
  .nav__prefs a, .nav__prefs button { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--dio-border); border-radius: var(--dio-radius-pill); background: transparent; font: inherit; font-size: var(--dio-text-sm); font-weight: 500; color: var(--dio-text); text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  .nav__prefs a:hover, .nav__prefs button:hover { border-color: var(--dio-border-input); color: var(--dio-text); }
  .nav__prefs svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav__prefs a[aria-current], .nav__prefs button[aria-pressed="true"] { background: var(--dio-petroleo); border-color: var(--dio-petroleo); color: var(--dio-blanco); }

  /* CTA al pie, a lo ancho */
  .nav .nav__cta { margin-top: auto; display: flex; justify-content: center; text-align: center; padding: 0.9rem 1.4rem; font-size: var(--dio-text-md); }

  :root[data-theme="dark"] .nav { background: var(--dio-petroleo-900); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
  :root[data-theme="dark"] .nav__over { color: var(--dio-verde-300); }
  :root[data-theme="dark"] .nav .menu > li > a, :root[data-theme="dark"] .nav .menu .has-sub > span, :root[data-theme="dark"] .nav .menu .has-sub ul a { color: var(--dio-niebla); }
  :root[data-theme="dark"] .nav .menu a[aria-current], :root[data-theme="dark"] .nav .menu a:hover { color: var(--dio-link); }
  :root[data-theme="dark"] .nav__prefs a, :root[data-theme="dark"] .nav__prefs button { color: var(--dio-niebla); }
  :root[data-theme="dark"] .nav__prefs a[aria-current], :root[data-theme="dark"] .nav__prefs button[aria-pressed="true"] { background: var(--dio-niebla); border-color: var(--dio-niebla); color: var(--dio-petroleo-950); }
  :root[data-theme="dark"] .nav-veil { background: color-mix(in srgb, var(--dio-petroleo-950) 65%, transparent); }
}
@media (max-width: 71.99rem) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { backdrop-filter: none; }
  :root:not([data-theme="light"]) .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); pointer-events: none; }
  :root:not([data-theme="light"]) .nav { background: var(--dio-petroleo-900); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
  :root:not([data-theme="light"]) .nav__over { color: var(--dio-verde-300); }
  :root:not([data-theme="light"]) .nav .menu > li > a, :root:not([data-theme="light"]) .nav .menu .has-sub > span, :root:not([data-theme="light"]) .nav .menu .has-sub ul a { color: var(--dio-niebla); }
  :root:not([data-theme="light"]) .nav .menu a[aria-current], :root:not([data-theme="light"]) .nav .menu a:hover { color: var(--dio-link); }
  :root:not([data-theme="light"]) .nav__prefs a, :root:not([data-theme="light"]) .nav__prefs button { color: var(--dio-niebla); }
  :root:not([data-theme="light"]) .nav__prefs a[aria-current], :root:not([data-theme="light"]) .nav__prefs button[aria-pressed="true"] { background: var(--dio-niebla); border-color: var(--dio-niebla); color: var(--dio-petroleo-950); }
  :root:not([data-theme="light"]) .nav-veil { background: color-mix(in srgb, var(--dio-petroleo-950) 65%, transparent); }
}
@media (max-width: 71.99rem) and (prefers-reduced-motion: reduce) {
  .nav, .nav-open:checked ~ .nav, .nav-veil, .nav-open:checked ~ .nav-veil { transition: none; }
}

/* ===== Card flotante arriba y al centro (`pos: "tc"`) =====
   Una sola card sobre la escena (caso Musical Riff, Juan 22/09): arriba y centrada en todos los
   anchos. Se centra con márgenes y no con `translate`, que ya lo usa la flotación (hchip-float). */
.hchip--tc { position: absolute; top: 0; bottom: auto; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 1rem); }
/* Un poco más arriba (Juan 22/09): sale del borde de la escena. En celular, menos, para no
   acercarse a las cifras del hero que quedan justo encima. */
.hchip--tc { top: -1.5rem; }
@media (min-width: 60rem) { .hchip--tc { top: -3.5rem; } }

/* ===== Formulario de contacto ===== (ficha 43 · src/leadform.js · functions/api/lead.js)
   Un <form> que funciona sin JS (los cuatro pasos seguidos, POST a /api/lead) y que con JS
   muestra un paso por vez. La señal de «hay JS» antes de que corra el script es el
   `data-theme-pref` que `THEME_HEAD` pone en <html> antes del primer pintado: así los pasos
   2–4 ya nacen ocultos y no hay salto de maquetación cuando el script arranca.

   Colores: amarillo solo en la acción principal («Continuar», «Enviar») y en el foco; la
   opción elegida y el progreso van en el verde de la marca, que es el verde del ✓ del sitio;
   el error, en `--dio-error` con ícono + texto (nunca solo el color). */
.lf { --lf-box: var(--dio-surface); --lf-field: var(--dio-surface); --lf-card: var(--dio-surface); max-width: 52rem; margin-top: var(--dio-space-6); }
.section:nth-of-type(even) .lf { --lf-box: var(--dio-bg); }
.lf [hidden] { display: none !important; }
.lf__box { background: var(--lf-box); border: 1px solid var(--dio-border-card); border-radius: var(--r-feature); box-shadow: var(--sh-rest); padding: calc(var(--pad-card) + 0.25rem); }
.lf__form { scroll-margin-top: 6rem; }

/* Cabecera: «Passo X de 4» + barra de cuatro tramos */
.lf__head { display: grid; gap: var(--dio-space-2); margin-bottom: var(--dio-space-5); }
.lf__count { margin: 0; font-family: var(--dio-font-display); font-size: var(--dio-text-sm); font-weight: 700; color: var(--dio-text-muted); font-variant-numeric: tabular-nums; }
.lf__bar { display: flex; gap: 6px; }
.lf__bar i { flex: 1; height: 6px; border-radius: var(--dio-radius-pill); background: var(--dio-border); transition: background var(--dur-2) var(--ease-out); }
.lf__bar i.on { background: var(--dio-verde-marca); }
.lf__draft { margin: 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--dio-space-2); }
.lf__link { background: none; border: 0; padding: 0; min-height: 24px; font: inherit; font-weight: 700; color: var(--dio-link); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.lf__live, .lf.is-js .lf__n { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Pasos */
.lf__step, .lf__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.lf__step + .lf__step { margin-top: var(--dio-space-8); }
.lf.is-js .lf__step + .lf__step { margin-top: 0; }
.lf__legend { padding: 0; margin: 0; }
.lf__q { margin: 0; font-family: var(--dio-font-display); font-size: var(--dio-h3); line-height: var(--dio-leading-snug); letter-spacing: -0.01em; }
.lf__q:focus:not(:focus-visible) { outline: none; }
.lf__n { color: var(--dio-text-muted); font-size: var(--dio-text-md); display: block; font-weight: 700; margin-bottom: var(--dio-space-1); }
.lf__why { margin: var(--dio-space-2) 0 var(--dio-space-5); color: var(--dio-text-muted); font-size: var(--dio-text-sm); max-width: 40rem; }
.lf__group { margin-top: var(--dio-space-5); }
.lf__group > legend { padding: 0; margin-bottom: var(--dio-space-3); font-weight: 700; }
.lf__nojs { font-weight: 400; color: var(--dio-text-muted); }
.lf.is-js .lf__nojs { display: none; }

/* Opciones como tarjetas: el radio real queda debajo (accesible y con validación nativa sin JS) */
.lf__cards { display: grid; gap: var(--dio-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.lf__cards--chips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--dio-space-2); }
@media (min-width: 40rem) { .lf__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lf__card { position: relative; display: grid; align-content: center; gap: 0.15rem; min-height: 4.5rem; padding: var(--dio-space-3) 3.25rem var(--dio-space-3) var(--dio-space-4); background: var(--lf-card); border: 1.5px solid var(--dio-border-input); border-radius: var(--r-inner); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.lf__cards--chips .lf__card { min-height: 3.25rem; padding-block: var(--dio-space-2); }
.lf__card input { position: absolute; opacity: 0; width: 1px; height: 1px; left: var(--dio-space-4); bottom: var(--dio-space-2); margin: 0; }
.lf__cardt { font-family: var(--dio-font-display); font-weight: 600; line-height: 1.25; color: var(--dio-text); }
.lf__sub { font-size: var(--dio-text-sm); color: var(--dio-text-muted); line-height: 1.35; }
.lf__tick { position: absolute; right: var(--dio-space-4); top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -0.7rem; border-radius: 50%; border: 1.5px solid var(--dio-border-input); fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; padding: 3px; box-sizing: border-box; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.lf__card:hover { border-color: var(--dio-petroleo); box-shadow: var(--sh-hover); transform: translateY(-2px); }
.lf__card:has(input:checked) { border-color: var(--dio-verde-marca); background: var(--dio-tint); }
.lf__card:has(input:checked) .lf__tick { background: var(--dio-verde-marca); border-color: var(--dio-verde-marca); stroke: var(--dio-blanco); }
.lf__card:has(input:focus-visible) { outline: 3px solid var(--dio-focus); outline-offset: 2px; }
.lf__card:has(input[aria-invalid="true"]) { border-color: var(--dio-error); }
@media (prefers-reduced-motion: reduce) { .lf__card:hover { transform: none; } }

/* Campos de texto */
.lf__row { display: grid; gap: 0 var(--dio-space-4); }
@media (min-width: 40rem) { .lf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lf__field { display: grid; gap: var(--dio-space-2); margin-bottom: var(--dio-space-4); align-content: start; }
.lf__field label { font-weight: 700; cursor: pointer; }
.lf__opt { font-weight: 400; color: var(--dio-text-muted); }
.lf__field input, .lf__field textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; font: inherit; color: var(--dio-text); background: var(--lf-field); border: 1.5px solid var(--dio-border-input); border-radius: var(--r-inner); transition: border-color var(--dur-1) var(--ease-out); }
.lf__field textarea { resize: vertical; min-height: 7rem; }
.lf__field input:focus-visible, .lf__field textarea:focus-visible { outline: 3px solid var(--dio-focus); outline-offset: 1px; border-color: var(--dio-petroleo-400); }
.lf__field [aria-invalid="true"] { border-color: var(--dio-error); }
.lf__hint { margin: 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.lf__url { margin-top: var(--dio-space-5); max-width: 32rem; }
.lf__sugbox { margin: 0; }
.lf__sugbtn { background: none; border: 0; padding: 0; min-height: 24px; font: inherit; font-size: var(--dio-text-sm); font-weight: 700; color: var(--dio-link); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; text-align: left; }

/* Error: ícono + texto, en el rojo de estado de la marca */
.lf__err { display: flex; align-items: flex-start; gap: 0.4rem; margin: var(--dio-space-2) 0 0; font-size: var(--dio-text-sm); font-weight: 700; color: var(--dio-error); }
.lf__field .lf__err { margin-top: 0; }
.lf__err svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Urgente: el atajo a WhatsApp, en el verde del canal */
.lf__urgent { margin-top: var(--dio-space-4); padding: var(--dio-space-3) var(--dio-space-4); border-radius: var(--r-inner); background: var(--dio-tint); border: 1px solid var(--dio-tint-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dio-space-2) var(--dio-space-4); }
.lf__urgent p { margin: 0; font-weight: 600; }
.lf__wa { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 700; color: var(--dio-tint-text); text-decoration: none; }
.lf__wa:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.lf__wa svg, .lf__alt svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Navegación entre pasos */
.lf__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dio-space-3); margin-top: var(--dio-space-6); }
.lf__nav .btn { margin-left: auto; }
.lf .btn { background: var(--dio-amarillo); border-color: var(--dio-amarillo); color: var(--dio-tinta); cursor: pointer; font: inherit; font-weight: 700; }
.lf .btn:hover { background: var(--dio-amarillo-300); border-color: var(--dio-amarillo-300); color: var(--dio-tinta); }
.lf .btn:disabled { opacity: 0.7; cursor: progress; }
.lf__submit svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-2) var(--ease-spring, var(--ease-out)); }
.lf__submit:hover svg { transform: translateX(3px); }
.lf__back { background: none; border: 0; min-height: 44px; padding: 0 var(--dio-space-2) 0 0; font: inherit; font-weight: 700; color: var(--dio-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.lf__back::before { content: "←"; }
.lf__back:hover { color: var(--dio-text); text-decoration: underline; text-underline-offset: 0.2em; }
.lf__fail-acts .lf__back::before { content: "↻"; }
.lf__human, .lf__privacy { margin: var(--dio-space-4) 0 0; font-size: var(--dio-text-sm); color: var(--dio-text-muted); }
.lf__human { font-weight: 700; color: var(--dio-text); }
.lf__privacy { margin-top: var(--dio-space-1); }
.lf__privacy a { color: var(--dio-link); }

/* Trampa para robots: fuera de la vista y del orden de tabulación */
.lf__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lf__hp label { cursor: pointer; }
.lf__ts:not(:empty) { margin-top: var(--dio-space-4); }

/* El envío falló: la salida por WhatsApp con las respuestas ya escritas */
.lf__fail { margin-top: var(--dio-space-5); padding: var(--dio-space-4) var(--dio-space-5); border-radius: var(--r-inner); background: color-mix(in srgb, var(--dio-error) 8%, transparent); border: 1px solid color-mix(in srgb, var(--dio-error) 35%, transparent); }
.lf__fail:focus { outline: none; }
.lf__fail p { margin: var(--dio-space-2) 0 0; }
.lf__fail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-space-3); margin-top: var(--dio-space-3) !important; }

.lf__alt { margin: var(--dio-space-4) 0 0; }
.lf__alt a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 700; color: var(--dio-link); text-decoration: none; }
.lf__alt a:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

/* Sin JS no hay «Continuar» ni contador (se ven los cuatro pasos); con JS, antes de que el
   script corra, solo el primer paso. */
:root:not([data-theme-pref]) .lf__head, :root:not([data-theme-pref]) .lf__nav:not(.lf__nav--send) { display: none; }
:root:not([data-theme-pref]) .lf__nav--send .lf__back { display: none; }
:root[data-theme-pref] .lf:not(.is-js) .lf__step:not([data-step="1"]) { display: none; }
:root[data-theme-pref] .lf:not(.is-js) :is(.lf__url, .lf__nojs) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .lf.is-ready .lf__step:not([hidden]) { animation: lf-in var(--dur-2) var(--ease-out) both; }
  @keyframes lf-in { from { opacity: 0; translate: 0 8px; } }
}

/* Oscuro: la caja y los campos como el resto de las tarjetas (petróleo sobre el fondo),
   los campos un escalón más hondo para que se lean como algo donde se escribe. */
:root[data-theme="dark"] .lf { --lf-box: var(--dio-petroleo); --lf-field: var(--dio-petroleo-900); --lf-card: var(--dio-petroleo-900); }
:root[data-theme="dark"] .lf__box { border-color: var(--dio-petroleo-600); }
:root[data-theme="dark"] .lf__card:hover { border-color: var(--dio-niebla-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lf { --lf-box: var(--dio-petroleo); --lf-field: var(--dio-petroleo-900); --lf-card: var(--dio-petroleo-900); }
  :root:not([data-theme="light"]) .lf__box { border-color: var(--dio-petroleo-600); }
  :root:not([data-theme="light"]) .lf__card:hover { border-color: var(--dio-niebla-dark); }
}

/* Micro del fundador junto al CTA de WhatsApp en dos líneas (Juan 22/09):
   «Juan, o fundador,» arriba y «responde em até 1 hora.» abajo, al lado del avatar. */
.hfounder > span:last-child > strong:first-child { display: block; }