/* ============================================================
   REFINADO  -  capa final de limpieza visual (2026-10-09)

   Se carga AL FINAL en todas las paginas (tools/refinado.py la inserta).
   Objetivo: que el sitio deje de verse "hecho con IA". Quita los adornos
   que delatan generacion automatica y unifica tipografia y superficies.

   QUE QUITA
   - la linea-circuito animada debajo de cada h1/h2 (corporate.css ~3895)
   - fondos de puntos/grilla y halos radiales detras de secciones
   - antetitulos en monoespaciada mayuscula con chip ("kicker", "eyebrow")
   - el foco que sigue al cursor, los bordes giratorios y el ripple
   - sombras pesadas en tarjetas

   QUE UNIFICA
   - una sola familia: Barlow (styles.css la carga en todas las paginas),
     variando peso y tamano
   - titulares con tamano maximo razonable (antes un h1 partia una palabra
     por linea)
   - botones sin mayusculas forzadas ni monoespaciada
   - tarjetas con borde de 1px, sin sombra

   Para revertir: python tools/refinado.py --quitar
   Selectores con "html body" + !important porque corporate.css,
   visual-upgrade.css y blanco-negro.css usan !important masivo.
   ============================================================ */

/* ---- 1. adornos de titulares ---- */
html body h1::before, html body h1::after,
html body h2::before, html body h2::after,
html body h3::before, html body h3::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* ---- 2. efectos de cursor y pixeles ---- */
html body .ux-spotlight,
html body .ux-ripple,
html body .dtw-fx-capa,
html body .dtw-fx-luz,
html body .dtw-fx-borde,
html body .hero-pixeles,
html body .hero-pixeles__capa {
  display: none !important;
}

/* ---- 3. fondos con patron ---- */
html body section,
html body .service-landing,
html body .service-landing-hero,
html body [class*="hero"] {
  background-image: none !important;
}
html body section::before,
html body section::after,
html body [class*="hero"]::before,
html body [class*="hero"]::after {
  background-image: none !important;
}

/* ---- 4. tipografia: una familia ---- */
html body,
html body main,
html body p,
html body li,
html body a,
html body button,
html body h1,
html body h2,
html body h3,
html body h4,
html body td,
html body th {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
html body h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem) !important;
  line-height: 1.04 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  color: #0b1a2b !important;
}
html body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: #0b1a2b !important;
}
html body h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: #0b1a2b !important;
}
html body h1 span,
html body h1 em,
html body h1 strong {
  color: inherit !important;
  font-style: normal !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
html body p,
html body li {
  color: #374151;
  line-height: 1.65;
}

/* ---- 5. antetitulos: texto simple, sin chip ni mono ---- */
html body [class*="kicker"],
html body [class*="eyebrow"],
html body [class*="overline"],
html body [class*="tagline"] {
  font-family: 'Barlow', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ---- 6. botones ---- */
html body a[class*="btn"],
html body button[class*="btn"],
html body .btn-primary,
html body .btn-secondary,
html body [class*="actions"] a {
  font-family: 'Barlow', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ---- 7. tarjetas: borde fino, sin sombra ---- */
html body [class*="card"],
html body [class*="panel"],
html body .service-answer,
html body .service-checklist {
  box-shadow: none !important;
}
html body .service-detail-card,
html body .service-proof-card,
html body .service-card,
html body .blog-card {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  transform: none !important;
}
html body [class*="card"]:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* ---- 8. una sola familia en TODO el contenido (habia Courier Prime y
   Barlow Condensed en etiquetas, fechas, chips y botones del blog) ---- */
html body *:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *),
html body header *, html body .nav *, html body nav * {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
html body :is(span, small, a, button, time, label, strong, b, h3, h4, h5, h6, div, li, p),
html body .nav :is(a, button, span) {
  text-transform: none !important;
}
html body :is(span, small, time, label, a, button) {
  letter-spacing: 0 !important;
}
html body code, html body pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important; }

/* ---- 9. menu: limpio, sin mayusculas ---- */
html body .nav-link {
  font-size: .95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body .nav-cta, html body .nav-actions a {
  font-family: 'Barlow', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ---- 10. cinta que corre arriba del blog y fondos de grilla ---- */
html body .ticker { display: none !important; }
html, html body { background-image: none !important; }
html body::before, html body::after { background-image: none !important; }

/* ---- 11. antetitulo: sin resaltado ---- */
html body [class*="kicker"]::before,
html body [class*="kicker"]::after { content: none !important; display: none !important; }
html body [class*="kicker"] { background-image: none !important; }

/* ---- 12. chips y filtros del blog: borde fino, sin sombra ---- */
html body .blog-filter {
  font-weight: 500 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* ---- 13. titulo del inicio: sin verde azulado. La segunda parte del
   titular va en gris tinta, mismo peso: una sola familia y una sola tinta.
   :not(#z) suma especificidad de id para ganarle a
   body.visual-upgrade .hero.hero--white .hero-title em (que usa !important).
   El hero parte el titulo en <span> por palabra para animarlo: heredan. ---- */
html:not(#z) body .hero-title {
  color: #0b1a2b !important;
  -webkit-text-fill-color: #0b1a2b !important;
  font-weight: 600 !important;
}
html:not(#z) body .hero-title em {
  color: #5b6472 !important;
  -webkit-text-fill-color: #5b6472 !important;
  background: none !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
html:not(#z) body .hero-title span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-weight: inherit !important;
  background: none !important;
}

/* ---- 14. diagrama del inicio en la tinta de la marca: sin halo celeste,
   nodos con borde fino y sin sombra ---- */
html:not(#z) body .hero-beam__core {
  background: #0b1a2b !important;
  box-shadow: none !important;
}
html:not(#z) body .hero-beam__halo { display: none !important; }
html:not(#z) body .hero-beam__node {
  background: #ffffff !important;
  border: 1px solid #d9dee5 !important;
  box-shadow: none !important;
  color: #0b1a2b !important;
}
html:not(#z) body .hero-beam__node * { color: #0b1a2b !important; }

/* ---- 15. titulo del inicio: tamano contenido y palabras sin desplazar ---- */
html:not(#z) body .hero-title {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem) !important;
  line-height: 1.06 !important;
}
html:not(#z) body .hero-title em { display: inline !important; margin: 0 !important; }
html:not(#z) body .hero-title span { margin: 0 !important; transform: none !important; }

/* ---- 16. ESCALA DE TEXTO MAS GRANDE (pedido de Daniel 2026-10-09:
   "hazla mas grande en texto"). Referencia: sitios de estudios premiados,
   que usan cuerpo de 18-20 px, titulares grandes y mucho aire, en vez de
   texto de 14-15 px apretado en tarjetas. ---- */
html body { font-size: 18px; }
html body main p,
html body main li,
html body main td,
html body main dd {
  font-size: clamp(1.05rem, .98rem + .3vw, 1.18rem) !important;
  line-height: 1.65 !important;
}
html body main small,
html body main [class*="meta"],
html body main [class*="note"],
html body main [class*="nota"] {
  font-size: .95rem !important;
}
html body main h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.028em !important;
  max-width: 24ch;
}
html body main h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem) !important; }
html body main a[class*="btn"], html body main button[class*="btn"], html body main .btn-primary {
  font-size: 1.05rem !important;
  padding: .95em 1.5em !important;
}
html body .nav-link { font-size: 1rem !important; }

/* ---- 17. el antetitulo va ENCIMA del titulo, no al lado ---- */
html body main .section-kicker,
html body main [class*="kicker"],
html body main [class*="__head"] > span:first-child {
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  margin: 0 0 .8rem !important;
  text-align: left !important;
}
html body main [class*="__head"],
html body main [class*="__inner"] > h2 {
  text-align: left !important;
}
html body main section [class*="__inner"] > h2,
html body main [class*="__head"] > h2 {
  grid-column: 1 / -1 !important;
  width: auto !important;
  max-width: 24ch !important;
}
html body main [class*="__head"] {
  display: block !important;
}

/* ---- 18. hero del inicio: texto grande, botones en fila, sin chips ---- */
html:not(#z) body .hero .hero-badge {
  font-family: 'Barlow', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #4b5563 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html:not(#z) body .hero .hero-sub {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem) !important;
  line-height: 1.5 !important;
  color: #374151 !important;
  max-width: 34ch !important;
}
html:not(#z) body .hero .hero-sub strong { color: #0b1a2b !important; font-weight: 600 !important; }
html:not(#z) body .hero .hero-cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}
html:not(#z) body .hero .hero-cta a {
  font-family: 'Barlow', system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: .95em 1.5em !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html:not(#z) body .hero .btn-outline {
  background: transparent !important;
  color: #0b1a2b !important;
  border: 1px solid #0b1a2b !important;
}
html:not(#z) body .hero .hero-trust,
html:not(#z) body .hero .hero-trust * {
  font-size: .98rem !important;
  box-shadow: none !important;
  background: none !important;
  border-color: transparent !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #4b5563 !important;
}
html:not(#z) body .hero .hero-trust { display: flex !important; flex-wrap: wrap !important; gap: 6px 22px !important; border-top: 1px solid #e5e7eb !important; padding-top: 18px !important; }
html:not(#z) body .hero .hero-trust a:hover { color: #0b1a2b !important; text-decoration: underline !important; }

/* tarjetas de "tres cosas": sin sombra, borde fino */
html:not(#z) body .lobo-stats [class*="card"],
html:not(#z) body .lobo-stats article,
html:not(#z) body .lobo-stats li {
  box-shadow: none !important;
}

/* ---- 19. hero: el texto manda. Antes la red era "segundo protagonista"
   con 1.26fr y el titular quedaba en 8 lineas de 390 px. ---- */
@media (min-width: 1100px) {
  html:not(#z) body.dtw-limpio .hero.hero--white {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) !important;
    column-gap: clamp(2rem, 4vw, 4.5rem) !important;
    min-height: 0 !important;
    align-items: center !important;
  }
  html:not(#z) body.dtw-limpio .hero--white .hero-visual--beam {
    width: 100% !important;
    max-width: 560px !important;
    min-height: 440px !important;
    justify-self: end !important;
  }
  html:not(#z) body.dtw-limpio .hero--white .hero-beam { min-height: 420px !important; }
  html:not(#z) body .hero-title { max-width: 15ch !important; font-size: clamp(2.6rem, 4.3vw, 4.2rem) !important; }
  html:not(#z) body .hero .hero-sub { max-width: 40ch !important; }
}
@media (min-width: 1100px) {
  html:not(#z) body .hero .hero-content { max-width: 680px !important; width: 100% !important; }
  html:not(#z) body .hero-title { max-width: 16ch !important; }
}
html:not(#z) body .btn-liquido,
html:not(#z) body .btn-liquido:hover {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html:not(#z) body .btn-liquido::before,
html:not(#z) body .btn-liquido::after { content: none !important; display: none !important; }
html:not(#z) body .btn-liquido:hover { background: #0b1a2b !important; color: #ffffff !important; }

/* ============================================================
   20. GRILLA UNICA Y TEXTO GRANDE EN PC (Daniel 2026-10-09: "se sigue
   viendo igual... letra tirada a la izquierda, mas grande en PC").
   Antes cada seccion tenia su propio ancho y su propio borde izquierdo
   (170, 183, 195, 210 px a 1920) dentro de una columna de ~1000 px.
   Ahora TODAS las secciones comparten un mismo borde izquierdo:
     ancho util 1360 px, margen lateral fluido (--borde).
   Los contenedores internos se estiran a ese ancho y se alinean a la
   izquierda; el texto corrido mantiene un largo de linea legible.
   ============================================================ */
:root { --borde: max(28px, calc((100vw - 1360px) / 2)); }

@media (min-width: 1024px) {
  html:not(#z) body main section {
    padding-left: var(--borde) !important;
    padding-right: var(--borde) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  html:not(#z) body main section section { padding-left: 0 !important; padding-right: 0 !important; }
  /* contenedores internos: a todo el ancho util, pegados a la izquierda */
  html:not(#z) body main section > div,
  html:not(#z) body main section > header,
  html:not(#z) body main section > h2,
  html:not(#z) body main section > p,
  html:not(#z) body main section > ul,
  html:not(#z) body main section > details {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html:not(#z) body main section > div { width: 100% !important; }
  html:not(#z) body main section [class*="__inner"],
  html:not(#z) body main section [class*="-inner"],
  html:not(#z) body main section [class*="__head"],
  html:not(#z) body main section [class*="__intro"],
  html:not(#z) body main section [class*="-head"],
  html:not(#z) body main section .section-header {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
  }
  /* la tarjeta oscura "a medida" y el bloque del autor tambien al ancho util */
  html:not(#z) body main [class*="card"] > *,
  html:not(#z) body main [class*="intro"] p,
  html:not(#z) body main [class*="__head"] p { text-align: left !important; }

  /* ---- escala de texto para PC ---- */
  html:not(#z) body .hero-title { font-size: clamp(3.4rem, 4.6vw, 5.6rem) !important; max-width: 14ch !important; letter-spacing: -.035em !important; }
  html:not(#z) body .hero .hero-content { max-width: 760px !important; }
  html:not(#z) body .hero .hero-sub { font-size: clamp(1.3rem, 1.1vw + .6rem, 1.6rem) !important; max-width: 36ch !important; }
  html:not(#z) body main h2 { font-size: clamp(2.6rem, 3.3vw, 4.4rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; max-width: 20ch !important; }
  html:not(#z) body main h3 { font-size: clamp(1.35rem, 1.1vw + .5rem, 1.7rem) !important; }
  html:not(#z) body main p, html:not(#z) body main li { font-size: clamp(1.12rem, .5vw + .85rem, 1.3rem) !important; }
  html:not(#z) body main section > div > p:first-of-type,
  html:not(#z) body main [class*="__head"] > p,
  html:not(#z) body main [class*="intro"] > p,
  html:not(#z) body main [class*="__copy"] {
    font-size: clamp(1.25rem, .7vw + .9rem, 1.55rem) !important;
    max-width: 44ch !important;
    color: #374151 !important;
  }
  html:not(#z) body main [class*="kicker"],
  html:not(#z) body main [class*="eyebrow"],
  html:not(#z) body main [class*="__head"] > span:first-child,
  html:not(#z) body .hero .hero-badge {
    font-size: 1.05rem !important;
    color: #0b1a2b !important;
    font-weight: 600 !important;
  }
  /* mas aire entre secciones */
  html:not(#z) body main > section,
  html:not(#z) body main > div > section {
    padding-top: clamp(80px, 8vw, 140px) !important;
    padding-bottom: clamp(80px, 8vw, 140px) !important;
  }
  html:not(#z) body main > section.hero { padding-top: clamp(64px, 6vw, 110px) !important; padding-bottom: clamp(64px, 6vw, 110px) !important; }

  /* menu y barra superior al mismo borde */
  html:not(#z) body .nav,
  html:not(#z) body header .nav-inner,
  html:not(#z) body .topbar-inner,
  html:not(#z) body [class*="topbar"] > div {
    max-width: none !important;
    padding-left: var(--borde) !important;
    padding-right: var(--borde) !important;
  }
  html:not(#z) body .dtwpie-grid,
  html:not(#z) body .dtwpie-alianzas,
  html:not(#z) body .dtwpie-bajo {
    max-width: none !important;
    margin-left: var(--borde) !important;
    margin-right: var(--borde) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 1024px) {
  /* contenedores que sumaban 20-56 px propios: fuera, para un solo borde */
  html:not(#z) body main section [class*="__inner"],
  html:not(#z) body main section [class*="-inner"]:not(.terms-inner),
  html:not(#z) body main section [class*="__head"],
  html:not(#z) body main section .services-header,
  html:not(#z) body main section .section-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 1024px) {
  /* la seccion del autor ES la tarjeta: va dentro del borde comun */
  html:not(#z) body main section.dtw-autor {
    margin-left: var(--borde) !important;
    margin-right: var(--borde) !important;
    padding: 40px !important;
    border-radius: 16px !important;
  }
  /* grillas de tarjetas (planes, portafolio, servicios) pegadas al borde izquierdo */
  html:not(#z) body main section [class*="grid"],
  html:not(#z) body main section [class*="cards"],
  html:not(#z) body main section [class*="plans"],
  html:not(#z) body main section [class*="carousel"],
  html:not(#z) body main section [class*="carrusel"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
}