/* ============================================================
   desarrollatuweb.cl - CAPA CORPORATIVA (solo home)
   ------------------------------------------------------------
   Se carga DESPUES de styles.css y visual-upgrade.css.
   Todo va scopeado bajo .dtw-corp para no afectar
   /blog/ ni /servicios/, que comparten styles.css.

   Concepto: la home se lee como una propuesta comercial.
   Etiquetas tipo folio, filetes finos, un solo azul
   institucional y precios presentados como valor neto + IVA.
   ============================================================ */

body.dtw-corp {
  /* --- tinta y papel --- */
  --c-ink: #0b1a2b;
  --c-ink-soft: #12293f;
  --c-ink-line: rgba(255, 255, 255, .14);
  --c-paper: #ffffff;
  --c-paper-alt: #f1f4f8;
  --c-rule: #dae2ea;

  /* --- un solo azul institucional --- */
  --c-blue: #1350d6;
  --c-blue-deep: #0e3ea8;
  --c-blue-wash: #eaf0fd;

  /* --- sello: unico acento calido, solo en el plan recomendado --- */
  --c-seal: #9a3412;
  --c-seal-wash: #fdf3ec;

  /* --- texto --- */
  --c-text: #16212e;
  --c-muted: #5a6a7b;
  --c-muted-dark: #93a6b8;

  /* --- tipografia --- */
  --f-display: 'Archivo', 'Barlow', system-ui, sans-serif;
  --f-body: 'Barlow', system-ui, sans-serif;
  --f-mono: 'Courier Prime', ui-monospace, 'Courier New', monospace;

  /* --- ritmo --- */
  --s-section: clamp(72px, 8vw, 128px);
  --s-gutter: clamp(20px, 4vw, 56px);
  --w-container: 1200px;
  --r-card: 4px;

  background: var(--c-paper);
  color: var(--c-text);
  font-family: var(--f-body);
}

/* ============================================================
   1. TIPOGRAFIA BASE
   ============================================================ */

body.dtw-corp h1,
body.dtw-corp h2,
body.dtw-corp h3,
body.dtw-corp h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -.015em;
  color: var(--c-text);
  text-transform: none;
}

body.dtw-corp h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  margin: 0 0 16px;
}

body.dtw-corp h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.25;
  font-weight: 600;
}

body.dtw-corp p {
  font-family: var(--f-body);
  color: var(--c-muted);
  line-height: 1.65;
}

/* el <em> deja de ser cursiva decorativa: es enfasis en azul */
body.dtw-corp h1 em,
body.dtw-corp h2 em,
body.dtw-corp h3 em {
  font-style: normal;
  color: var(--c-blue);
}

/* etiqueta tipo folio: mono, versalitas, con filete */
body.dtw-corp .section-kicker,
body.dtw-corp .showcase-kicker,
body.dtw-corp .agency-kicker,
body.dtw-corp .blog-kicker,
body.dtw-corp .canva-kicker,
body.dtw-corp .seo-boom-kicker,
body.dtw-corp .market-tag,
body.dtw-corp .services-header__quote > span,
body.dtw-corp .service-custom__tag {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-blue);
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.dtw-corp .section-kicker::before,
body.dtw-corp .showcase-kicker::before,
body.dtw-corp .agency-kicker::before,
body.dtw-corp .blog-kicker::before,
body.dtw-corp .canva-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-blue);
  flex: none;
}

/* ============================================================
   2. BOTONES
   ============================================================ */

body.dtw-corp .btn-primary,
body.dtw-corp .btn-service,
body.dtw-corp .nav-cta,
body.dtw-corp .service-custom__btn,
body.dtw-corp .cart-checkout,
body.dtw-corp .newsletter-form button {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  text-transform: none;
  background: var(--c-blue);
  color: #fff;
  border: 1px solid var(--c-blue);
  border-radius: var(--r-card);
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

body.dtw-corp .btn-primary:hover,
body.dtw-corp .btn-service:hover,
body.dtw-corp .nav-cta:hover,
body.dtw-corp .service-custom__btn:hover,
body.dtw-corp .cart-checkout:hover,
body.dtw-corp .newsletter-form button:hover {
  background: var(--c-blue-deep);
  border-color: var(--c-blue-deep);
  transform: none;
}

body.dtw-corp .btn-outline {
  font-family: var(--f-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, .38);
  background: transparent;
  color: #fff;
}

body.dtw-corp .btn-outline:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
}

/* el boton destacado dejaba de ser azul y se iba a verde azulado */
body.dtw-corp .btn-service--featured {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

body.dtw-corp .btn-service--featured:hover {
  background: var(--c-ink-soft);
  border-color: var(--c-ink-soft);
}

body.dtw-corp .btn-cart {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  transition: border-color .18s ease, background .18s ease;
}

body.dtw-corp .btn-cart:hover {
  border-color: var(--c-blue);
  background: var(--c-blue-wash);
  color: var(--c-blue-deep);
}

body.dtw-corp .btn-cart.is-added {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: #fff;
}

/* foco visible en todo lo interactivo */
body.dtw-corp a:focus-visible,
body.dtw-corp button:focus-visible,
body.dtw-corp input:focus-visible,
body.dtw-corp [tabindex]:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   3. CINTA SUPERIOR Y NAVEGACION
   ============================================================ */

/* --- barra de utilidad: reemplaza la marquesina --------------------
   Un texto corriendo en mayusculas es recurso de tienda promocional.
   Una empresa de servicios pone telefono y correo a la vista. */

body.dtw-corp .utilbar {
  background: var(--c-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

body.dtw-corp .utilbar__inner {
  max-width: var(--w-container);
  margin-inline: auto;
  padding: 0 var(--s-gutter);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

body.dtw-corp .utilbar__claim {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dtw-corp .utilbar__contact {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
}

body.dtw-corp .utilbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .18s ease;
}

body.dtw-corp .utilbar__link:hover {
  color: #fff;
}

body.dtw-corp .utilbar__link svg {
  opacity: .7;
  flex: none;
}

body.dtw-corp .utilbar__hours {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .42);
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

/* --- navegacion --------------------------------------------------- */

body.dtw-corp .nav {
  max-width: none;
  /* el fondo va de borde a borde pero el contenido se alinea con el
     mismo eje que las secciones y la barra de utilidad: el borde del
     contenedor de 1200px mas su gutter interno */
  padding-block: 0 !important;
  padding-inline: max(var(--s-gutter), calc((100% - var(--w-container)) / 2 + var(--s-gutter))) !important;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--c-rule);
  box-shadow: none;
  transition: height .22s ease, box-shadow .22s ease;
}

/* el header queda alineado con la retícula del contenido, no pegado
   al borde de la ventana */
body.dtw-corp .nav > * {
  max-width: none;
}

body.dtw-corp .nav-logo img {
  height: 26px;
  width: auto;
}

body.dtw-corp .nav-links {
  gap: 4px;
}

body.dtw-corp .nav-link {
  position: relative;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .93rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text);
  padding: 10px 12px;
  border-radius: 3px;
  transition: color .18s ease;
}

body.dtw-corp .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1.5px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

body.dtw-corp .nav-link:hover {
  color: var(--c-blue-deep);
  background: none;
}

body.dtw-corp .nav-link:hover::after,
body.dtw-corp .nav-item--drop:hover > .nav-link::after {
  transform: scaleX(1);
}

/* indicador de submenu sin tocar el HTML */
body.dtw-corp .nav-link--drop {
  padding-right: 24px;
}

body.dtw-corp .nav-link--drop::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  transition: transform .22s ease, opacity .18s ease;
}

body.dtw-corp .nav-item--drop:hover > .nav-link--drop::before {
  opacity: 1;
  transform: rotate(-135deg);
  margin-top: -1px;
}

body.dtw-corp .nav-drop {
  min-width: 232px;
  padding: 8px;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  background: var(--c-paper);
  box-shadow: 0 20px 46px rgba(11, 26, 43, .14), 0 2px 6px rgba(11, 26, 43, .06);
}

body.dtw-corp .nav-drop a {
  display: block;
  font-family: var(--f-body);
  font-size: .89rem;
  font-weight: 500;
  color: var(--c-text);
  padding: 9px 12px;
  border-radius: 3px;
  transition: background .16s ease, color .16s ease;
}

body.dtw-corp .nav-drop a:first-child {
  font-weight: 600;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-rule);
  border-radius: 3px 3px 0 0;
}

body.dtw-corp .nav-drop a:hover {
  background: var(--c-blue-wash);
  color: var(--c-blue-deep);
}

/* al hacer scroll la barra de utilidad se recoge y el header se
   compacta con una sombra fina */
body.dtw-corp .nav.scrolled {
  box-shadow: 0 1px 0 var(--c-rule), 0 10px 26px rgba(11, 26, 43, .07);
}

body.dtw-corp .nav.scrolled .nav-logo img {
  height: 23px;
}

body.dtw-corp .nav-cta {
  padding: 11px 18px;
  font-size: .9rem;
  white-space: nowrap;
}

body.dtw-corp .nav-cta__short {
  display: none;
}

body.dtw-corp .nav-actions {
  gap: 10px;
}

/* --- header en pantallas medianas y moviles ----------------------- */

@media (max-width: 1180px) {
  body.dtw-corp .utilbar__claim {
    display: none;
  }

  body.dtw-corp .utilbar__inner {
    justify-content: flex-start;
  }

  body.dtw-corp .nav-link {
    padding: 10px 9px;
    font-size: .89rem;
  }

  body.dtw-corp .nav-link::after {
    left: 9px;
    right: 9px;
  }
}

@media (max-width: 900px) {
  body.dtw-corp .utilbar__hours {
    display: none;
  }
}

@media (max-width: 720px) {
  body.dtw-corp .utilbar__inner {
    height: 34px;
    justify-content: center;
    gap: 16px;
  }

  /* en movil solo queda el telefono: es la accion util */
  body.dtw-corp .utilbar__contact a[href^="mailto"] {
    display: none;
  }

  body.dtw-corp .utilbar__link {
    font-size: .76rem;
  }

  /* el CTA no se oculta: se acorta. Es la unica via de conversion
     del header en telefono. */
  body.dtw-corp .nav-cta {
    padding: 10px 14px;
    font-size: .85rem;
  }

  body.dtw-corp .nav-cta__full {
    display: none;
  }

  body.dtw-corp .nav-cta__short {
    display: inline;
  }

  /* menu movil: filetes en vez de cajas grises, mismo lenguaje
     de documento que el resto de la pagina */
  body.dtw-corp .nav-links {
    padding: 8px;
    border: 1px solid var(--c-rule);
    border-radius: var(--r-card);
    box-shadow: 0 24px 60px rgba(11, 26, 43, .18);
  }

  body.dtw-corp .nav-links .nav-link {
    background: none !important;
    border-radius: 3px;
    border-bottom: 1px solid var(--c-rule) !important;
    padding: 14px 12px;
    font-size: .98rem;
  }

  body.dtw-corp .nav-links > *:last-child .nav-link,
  body.dtw-corp .nav-links > .nav-link:last-child {
    border-bottom: 0 !important;
  }

  body.dtw-corp .nav-link::after {
    display: none;
  }
}

/* nav.js escribe el emoji 🌙 / ☀️ con textContent y ese archivo lo
   comparten las 70 paginas del sitio. Para no tocarlo, en la home
   se anula el glifo y el icono se dibuja por CSS.
   styles.css usa el atajo `background: #fff !important`, que borra
   cualquier background-image, asi que la imagen tambien va forzada. */
body.dtw-corp .nav-theme {
  font-size: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316212e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") !important;
  border: 1px solid var(--c-rule) !important;
  border-radius: var(--r-card);
}

html.dark body.dtw-corp .nav-theme {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   4. HERO
   ============================================================ */

body.dtw-corp .hero {
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-ink-line);
}

body.dtw-corp .hero-badge {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  padding: 14px 0 0;
  display: block;
  max-width: 520px;
}

body.dtw-corp .hero-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-transform: none;
  color: #fff;
  margin: 26px 0 22px;
  max-width: 15ch;
}

body.dtw-corp .hero-title em {
  color: #7ea8ff;
  font-style: normal;
}

body.dtw-corp .hero-sub {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .76);
  max-width: 54ch;
}

body.dtw-corp .hero-sub strong {
  color: #fff;
  font-weight: 600;
}

body.dtw-corp .hero-cta {
  margin-top: 32px;
  gap: 12px;
}

body.dtw-corp .hero-trust {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  gap: 26px;
}

body.dtw-corp .hero-trust a {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  border-bottom: 0;
  text-decoration: none;
}

body.dtw-corp .hero-trust a:hover {
  color: #fff;
}

/* la maqueta del hero deja de flotar con sombras de colores */
body.dtw-corp .growth-board {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-card);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .38);
}

body.dtw-corp .growth-label {
  font-family: var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-blue);
}

/* Ultimos restos de Barlow Condensed en la home: texto decorativo de
   la maqueta del hero y un par de botones. Al pasarlos al sistema
   tipografico propio, la home deja de necesitar esa familia y se
   ahorran ~43 KB de fuentes. */
body.dtw-corp .growth-board strong,
body.dtw-corp .growth-board b,
body.dtw-corp .growth-preview__button,
body.dtw-corp .photo-ui-card b,
body.dtw-corp .cart-checkout,
body.dtw-corp .ux-panel button,
body.dtw-corp .ux-panel a {
  font-family: var(--f-display) !important;
  font-weight: 600;
  font-stretch: 112%;
  text-transform: none;
}

body.dtw-corp .growth-board strong {
  letter-spacing: -.01em;
}

/* ============================================================
   5. BANDA DE CIFRAS
   ============================================================ */

body.dtw-corp .stat-band {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--s-section);
}

body.dtw-corp .stat-band-inner {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
  gap: 0;
}

body.dtw-corp .stat-card {
  background: none;
  border: 0;
  border-left: 1px solid var(--c-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 4px 32px;
}

body.dtw-corp .stat-card:first-child {
  border-left: 0;
  padding-left: 0;
}

body.dtw-corp .stat-number {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--c-blue);
  letter-spacing: -.02em;
}

body.dtw-corp .stat-label {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 12px;
  display: block;
}

body.dtw-corp .stat-desc {
  font-size: .92rem;
  color: var(--c-muted);
  margin-top: 8px;
}

/* ============================================================
   6. SECCION DE SERVICIOS - el documento de cotizacion
   ============================================================ */

body.dtw-corp .services-section {
  background: var(--c-paper-alt);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--s-section);
}

body.dtw-corp .services-header {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
  align-items: start;
  gap: clamp(28px, 5vw, 72px);
  background: none;
  border: 0;
  border-radius: 0;
  padding-block: 0;
}

body.dtw-corp .services-header__copy h2 {
  color: var(--c-text);
  max-width: 18ch;
}

body.dtw-corp .services-header__copy h2 em {
  color: var(--c-text);
}

body.dtw-corp .services-header__copy p {
  max-width: 56ch;
}

body.dtw-corp .services-header__copy p strong {
  color: var(--c-text);
  font-weight: 600;
}

/* recuadro de cotizacion rapida: cabecera de documento */
body.dtw-corp .services-header__quote {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--c-blue);
  border-radius: var(--r-card);
  padding: 26px 28px 28px;
  box-shadow: none;
}

body.dtw-corp .services-header__quote > span {
  display: block;
  margin-bottom: 14px;
}

body.dtw-corp .services-header__quote strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 1.05rem;
  color: var(--c-text);
  display: block;
  line-height: 1.3;
}

body.dtw-corp .services-header__quote strong .price-value {
  font-size: 1.9rem;
  display: inline-block;
  vertical-align: -2px;
}

body.dtw-corp .services-header__quote p {
  font-size: .92rem;
  margin: 12px 0 20px;
}

body.dtw-corp .services-header__quote button {
  font-family: var(--f-body);
  font-weight: 600;
  width: 100%;
  padding: 12px 18px;
  background: var(--c-ink);
  color: #fff;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-card);
  cursor: pointer;
}

body.dtw-corp .services-header__quote button:hover {
  background: var(--c-ink-soft);
}

/* selector de moneda */
body.dtw-corp .currency-toggle {
  max-width: var(--w-container);
  margin: 44px auto 28px;
  padding-inline: var(--s-gutter);
  justify-content: flex-start;
  gap: 14px;
}

body.dtw-corp .currency-toggle-label {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

body.dtw-corp .currency-seg {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  padding: 3px;
  gap: 2px;
}

body.dtw-corp .currency-btn {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-muted);
  border-radius: 2px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
}

body.dtw-corp .currency-btn.is-active {
  background: var(--c-ink);
  color: #fff;
}

body.dtw-corp .cur-flag {
  display: none;
}

/* grilla de planes */
body.dtw-corp .services-grid {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
  gap: 20px;
}

body.dtw-corp .service-card {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 30px 28px 28px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.dtw-corp .service-card:hover {
  border-color: #b9c7d6;
  box-shadow: 0 14px 34px rgba(11, 26, 43, .07);
  transform: none;
}

/* el icono emoji se reemplaza por un folio de plan */
body.dtw-corp .service-icon {
  display: none;
}

body.dtw-corp .service-folio {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--c-rule);
}

body.dtw-corp .service-card h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--c-text);
  margin: 0 0 8px;
}

body.dtw-corp .service-tagline {
  font-size: .92rem;
  color: var(--c-muted);
  min-height: 3.1em;
  margin: 0 0 22px;
}

/* bloque de precio: valor neto + IVA */
body.dtw-corp .service-price {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 6px;
}

body.dtw-corp .service-price .price-k {
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

/* la etiqueta de IVA no puede contener digitos:
   cart.js calcula el monto con price.replace(/\D/g,"") */
body.dtw-corp .price-iva {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-blue);
  white-space: nowrap;
}

/* --- giro de digitos al cambiar de moneda -------------------------
   Cada caracter que cambia se convierte en una columna con el valor
   viejo arriba y el nuevo abajo; la columna sube 50% y queda el nuevo.
   currency.js restaura el HTML final al terminar, para no perder
   .price-k ni .cur-suffix. */

body.dtw-corp .nf-cell {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  position: relative;
  /* Medido en el navegador: sin este valor la caja de linea crece de
     30.7 a 36.8px durante el giro y empuja el contenido de la tarjeta.
     Con -.2em queda en 30.8px, igual que el texto plano. */
  vertical-align: -.2em;
  /* y con la caja ya estable, el glifo todavia cae 2px (0.065em) mas
     abajo que el texto que lo rodea */
  top: -.065em;
}

body.dtw-corp .nf-roll {
  display: block;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

body.dtw-corp .nf-roll.is-rolled {
  transform: translateY(-50%);
}

body.dtw-corp .nf-roll i {
  display: block;
  height: 1em;
  line-height: 1;
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  body.dtw-corp .nf-roll {
    transition: none;
  }
}

/* currency.js pone .cur-no-iva cuando la moneda no es CLP */
body.dtw-corp.cur-no-iva .price-iva,
body.dtw-corp.cur-no-iva .service-price-note,
body.dtw-corp.cur-no-iva .footer-legal {
  display: none;
}

body.dtw-corp .service-price-note {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--c-muted);
  display: block;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-rule);
}

body.dtw-corp .service-features {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body.dtw-corp .service-features li {
  font-family: var(--f-body);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--c-text);
  padding-left: 22px;
  position: relative;
}

/* palito corto + largo rotados = check real, no un chevron */
body.dtw-corp .service-features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .38em;
  width: 5px;
  height: 10px;
  border: 1.6px solid var(--c-blue);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

body.dtw-corp .service-gift {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-paper-alt);
  border: 0;
  border-left: 2px solid var(--c-blue);
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 18px;
}

body.dtw-corp .service-card .btn-service {
  display: block;
  text-align: center;
  padding: 13px 18px;
  margin-bottom: 10px;
  text-transform: none;
}

body.dtw-corp .service-card .btn-cart {
  display: block;
  width: 100%;
  padding: 11px 18px;
}

/* sello del plan recomendado: unico acento calido de la pagina */
body.dtw-corp .service-badge {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 5px 10px;
  background: var(--c-paper-alt);
  color: var(--c-muted);
  border: 1px solid var(--c-rule);
  box-shadow: none;
}

body.dtw-corp .service-badge--reco {
  background: var(--c-seal-wash);
  color: var(--c-seal);
  border: 1px solid rgba(154, 52, 18, .3);
}

body.dtw-corp .service-card--featured,
body.dtw-corp .service-card--reco {
  border-color: var(--c-ink);
  border-width: 1px;
  box-shadow: 0 0 0 1px var(--c-ink);
}

body.dtw-corp .service-card--featured h3 {
  color: var(--c-text);
}

body.dtw-corp .services-note {
  max-width: var(--w-container);
  margin: 26px auto 0;
  padding-inline: var(--s-gutter);
  font-family: var(--f-mono);
  font-size: .76rem;
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--c-muted);
  text-align: left;
}

/* bloque de proyecto a medida */
body.dtw-corp .service-custom {
  max-width: var(--w-container);
  margin: 48px auto 0;
  padding-inline: var(--s-gutter);
}

body.dtw-corp .service-custom__inner {
  background: var(--c-ink);
  border: 0;
  border-radius: var(--r-card);
  padding: clamp(32px, 4vw, 52px);
  gap: clamp(28px, 4vw, 56px);
}

body.dtw-corp .service-custom__tag {
  color: #7ea8ff;
}

body.dtw-corp .service-custom__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  color: #fff;
  margin: 16px 0 14px;
}

body.dtw-corp .service-custom__desc {
  color: rgba(255, 255, 255, .74);
  max-width: 52ch;
}

body.dtw-corp .service-custom__list li {
  color: rgba(255, 255, 255, .86);
  font-size: .93rem;
}

body.dtw-corp .service-custom__cta {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-card);
  padding: 26px;
}

body.dtw-corp .service-custom__from {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

body.dtw-corp .service-custom__price {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 2.1rem;
  letter-spacing: -.03em;
  color: #fff;
}

body.dtw-corp .service-custom__btn {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}

body.dtw-corp .service-custom__btn:hover {
  background: #e6edf6;
  border-color: #e6edf6;
  color: var(--c-ink);
}

body.dtw-corp .service-custom__note {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
}

body.dtw-corp .service-custom__cta .price-iva {
  color: #7ea8ff;
}

/* ============================================================
   7. CONDICIONES COMERCIALES (seccion nueva)
   Las condiciones que un dueno de negocio pregunta antes
   de firmar: alcance, pago, documento, garantia, plazo.
   ============================================================ */

body.dtw-corp .terms {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--s-section);
}

body.dtw-corp .terms-inner {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

body.dtw-corp .terms-head {
  max-width: 62ch;
  margin-bottom: 48px;
}

body.dtw-corp .terms-head h2 {
  margin-top: 18px;
}

body.dtw-corp .terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--c-rule);
  border-left: 1px solid var(--c-rule);
}

body.dtw-corp .terms-item {
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding: 28px 26px 30px;
}

body.dtw-corp .terms-term {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-blue);
  display: block;
  margin-bottom: 14px;
}

body.dtw-corp .terms-item h3 {
  font-size: 1.08rem;
  margin: 0 0 8px;
}

body.dtw-corp .terms-item p {
  font-size: .92rem;
  margin: 0;
}

body.dtw-corp .terms-foot {
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--c-paper-alt);
  border-left: 3px solid var(--c-blue);
}

body.dtw-corp .terms-foot p {
  font-family: var(--f-mono);
  font-size: .8rem;
  line-height: 1.8;
  color: var(--c-text);
  margin: 0;
}

/* ============================================================
   8. LOGOS DE CLIENTES
   ============================================================ */

body.dtw-corp .tech-strip {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule);
  padding-block: clamp(48px, 6vw, 72px);
}

body.dtw-corp .lobo-logos-label {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}

body.dtw-corp .tech-logo-card {
  background: none;
  border: 0;
  box-shadow: none;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .2s ease, opacity .2s ease;
}

body.dtw-corp .tech-logo-card:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ============================================================
   9. SECCIONES DE CONTENIDO (showcase, destacados, mercados,
      resultados, blog, quien soy) - armonizacion
   ============================================================ */

body.dtw-corp .showcase,
body.dtw-corp .featured-services,
body.dtw-corp .market-section,
body.dtw-corp .results,
body.dtw-corp .blog-home,
body.dtw-corp .agency-process,
body.dtw-corp .canva-design {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--s-section);
}

body.dtw-corp .market-section,
body.dtw-corp .results {
  background: var(--c-paper-alt);
}

body.dtw-corp .showcase-title,
body.dtw-corp .results-title,
body.dtw-corp .blog-title,
body.dtw-corp .agency-title,
body.dtw-corp .canva-title,
body.dtw-corp .featured-services-head h2,
body.dtw-corp .market-head h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--c-text);
  max-width: 20ch;
}

body.dtw-corp .agency-title {
  max-width: 24ch;
}

body.dtw-corp .canva-title em,
body.dtw-corp .showcase-title em {
  color: var(--c-blue);
  font-style: normal;
}

body.dtw-corp .conversion-shot,
body.dtw-corp .result-card,
body.dtw-corp .blog-card,
body.dtw-corp .market-card,
body.dtw-corp .process-step,
body.dtw-corp .services-list-item {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-card);
  box-shadow: none;
}

body.dtw-corp .conversion-shot:hover,
body.dtw-corp .result-card:hover,
body.dtw-corp .blog-card:hover,
body.dtw-corp .market-card:hover {
  border-color: #b9c7d6;
  box-shadow: 0 14px 34px rgba(11, 26, 43, .07);
  transform: none;
}

body.dtw-corp .conversion-shot__caption span,
body.dtw-corp .blog-card__meta,
body.dtw-corp .blog-tag,
body.dtw-corp .result-card figcaption span {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

body.dtw-corp .blog-tag {
  background: var(--c-blue-wash);
  color: var(--c-blue-deep);
  border-radius: 2px;
  border: 0;
}

body.dtw-corp .blog-card--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

body.dtw-corp .blog-card--dark h3 {
  color: #fff;
}

body.dtw-corp .blog-card--dark p {
  color: rgba(255, 255, 255, .72);
}

body.dtw-corp .blog-card--dark .blog-card__meta,
body.dtw-corp .blog-card--dark .blog-card__link {
  color: rgba(255, 255, 255, .8);
}

body.dtw-corp .blog-card__link {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--c-blue);
  text-transform: none;
  letter-spacing: 0;
}

body.dtw-corp .market-card--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

body.dtw-corp .market-card--dark h3 {
  color: #fff;
}

body.dtw-corp .market-card--dark p {
  color: rgba(255, 255, 255, .74);
}

body.dtw-corp .market-card--dark a {
  color: #7ea8ff;
}

body.dtw-corp .market-card a {
  font-family: var(--f-body);
  font-weight: 600;
  color: var(--c-blue);
  text-transform: none;
  letter-spacing: 0;
}

body.dtw-corp .market-tag {
  color: var(--c-blue);
}

body.dtw-corp .market-card--dark .market-tag {
  color: #7ea8ff;
}

/* numeracion: aqui si es una secuencia real de trabajo */
body.dtw-corp .process-step b,
body.dtw-corp .services-list-number {
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-blue);
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  display: block;
  padding: 0 0 12px;
  line-height: 1;
}

body.dtw-corp .process-grid {
  border-top: 1px solid var(--c-rule);
}

body.dtw-corp .process-step {
  border: 0;
  border-right: 1px solid var(--c-rule);
  border-radius: 0;
  padding: 26px 24px 28px 0;
  background: none;
}

body.dtw-corp .process-step:last-child {
  border-right: 0;
}

body.dtw-corp .services-list-item {
  border: 0;
  border-top: 1px solid var(--c-rule);
  border-radius: 0;
  padding: 26px 0;
}

body.dtw-corp .service-visual-card,
body.dtw-corp .canva-spark {
  display: none;
}

/* ============================================================
   10. SEO BOOM - se calma
   ============================================================ */

body.dtw-corp .seo-boom {
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-ink-line);
}

body.dtw-corp .seo-boom-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-transform: none;
  color: #fff;
}

body.dtw-corp .seo-boom-title em {
  color: #7ea8ff;
  font-style: normal;
}

body.dtw-corp .seo-boom-kicker {
  color: #7ea8ff;
}

body.dtw-corp .seo-boom-copy {
  color: rgba(255, 255, 255, .74);
}

body.dtw-corp .seo-metric {
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 22px;
  background: none;
  border-radius: 0;
}

body.dtw-corp .seo-metric-num,
body.dtw-corp .seo-metric strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  color: #fff;
  letter-spacing: -.02em;
}

body.dtw-corp .seo-metric em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* las particulas flotantes no aportan a un sitio comercial */
body.dtw-corp .seo-particle,
body.dtw-corp .seo-glow {
  display: none;
}

/* ============================================================
   11. COMPROMISOS (ex "por que trabajar conmigo")
   ============================================================ */

body.dtw-corp .porque-yo {
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-ink-line);
  padding-block: var(--s-section);
}

body.dtw-corp .porque-yo-inner {
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

body.dtw-corp .porque-yo h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  text-align: left;
  max-width: 20ch;
}

body.dtw-corp .porque-yo h2 em {
  color: #7ea8ff;
  font-style: normal;
}

body.dtw-corp .porque-yo .subtitle {
  color: rgba(255, 255, 255, .68);
  text-align: left;
  max-width: 58ch;
  margin-bottom: 48px;
}

body.dtw-corp .porque-grid {
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-left: 1px solid rgba(255, 255, 255, .16);
  gap: 0;
}

body.dtw-corp .porque-card {
  background: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 26px 30px;
}

body.dtw-corp .porque-card:hover {
  background: rgba(255, 255, 255, .03);
  transform: none;
}

/* fuera los emojis: queda una etiqueta mono */
body.dtw-corp .porque-card .icon {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7ea8ff;
  background: none;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 16px;
  line-height: 1;
}

body.dtw-corp .porque-card h3 {
  color: #fff;
  font-size: 1.08rem;
  margin-bottom: 8px;
}

body.dtw-corp .porque-card p {
  color: rgba(255, 255, 255, .7);
  font-size: .92rem;
}

/* ============================================================
   12. QUIEN SOY
   ============================================================ */

body.dtw-corp #quien-soy {
  background: var(--c-paper) !important;
  border-bottom: 1px solid var(--c-rule);
}

body.dtw-corp .quien-soy {
  max-width: 780px;
  padding-block: var(--s-section);
}

body.dtw-corp .quien-soy-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--c-text);
}

body.dtw-corp .quien-soy-title em {
  color: var(--c-blue);
  font-style: normal;
}

body.dtw-corp .quien-soy-photo::before {
  display: none;
}

body.dtw-corp .quien-soy-img {
  border-radius: var(--r-card);
  box-shadow: 0 22px 48px rgba(11, 26, 43, .14);
}

body.dtw-corp .quien-soy-cap {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

body.dtw-corp .quien-soy-content p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-text);
}

body.dtw-corp .quien-badge {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  color: var(--c-muted);
  border: 1px solid var(--c-rule);
  border-radius: 2px;
  padding: 7px 12px;
}

/* ============================================================
   13. FAQ
   ============================================================ */

body.dtw-corp .faq-section {
  background: var(--c-paper-alt);
  border-bottom: 1px solid var(--c-rule);
  padding-block: var(--s-section);
  max-width: none;
}

body.dtw-corp .faq-section > h2,
body.dtw-corp .faq-subtitle,
body.dtw-corp .faq-item,
body.dtw-corp .faq-mas,
body.dtw-corp .faq-section > div {
  max-width: 860px;
  margin-inline: auto;
}

body.dtw-corp .faq-section > h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  text-align: left;
  color: var(--c-text);
}

body.dtw-corp .faq-section > h2 em {
  color: var(--c-blue);
  font-style: normal;
}

body.dtw-corp .faq-subtitle {
  text-align: left;
  color: var(--c-muted);
  margin-bottom: 36px;
}

body.dtw-corp .faq-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--c-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0;
}

body.dtw-corp .faq-item:last-of-type {
  border-bottom: 1px solid var(--c-rule);
}

/* la pregunta pasó de <div> a <button> para que el acordeon se pueda
   abrir con teclado; hay que neutralizar el aspecto de boton */
body.dtw-corp .faq-question {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 1.05rem;
  color: var(--c-text);
  padding: 22px 0;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

body.dtw-corp .faq-question:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: -2px;
}

body.dtw-corp .faq-question::after {
  color: var(--c-blue);
  font-family: var(--f-body);
  font-weight: 400;
}

body.dtw-corp .faq-answer {
  font-size: .96rem;
  line-height: 1.75;
  color: var(--c-muted);
  padding-right: 40px;
}

body.dtw-corp .faq-item.open .faq-answer {
  padding-bottom: 22px;
}

/* ============================================================
   14. CTA FINAL
   ============================================================ */

body.dtw-corp .split-cta {
  background: var(--c-paper);
  padding-block: var(--s-section);
}

body.dtw-corp .split-cta-card {
  background: var(--c-ink);
  border: 0;
  border-radius: var(--r-card);
  max-width: var(--w-container);
  margin-inline: auto;
}

body.dtw-corp .split-cta-copy h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  color: #fff;
  text-transform: none;
}

body.dtw-corp .split-cta-copy p {
  color: rgba(255, 255, 255, .74);
}

body.dtw-corp .split-cta-copy .showcase-kicker {
  color: #7ea8ff;
}

body.dtw-corp .split-cta-copy .showcase-kicker::before {
  background: #7ea8ff;
}

body.dtw-corp .split-cta .btn-primary {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}

body.dtw-corp .split-cta .btn-primary:hover {
  background: #e6edf6;
  border-color: #e6edf6;
  color: var(--c-ink);
}

/* ============================================================
   15. FOOTER
   ============================================================ */

body.dtw-corp .footer {
  background: var(--c-ink);
  border-top: 0;
}

body.dtw-corp .footer-desc,
body.dtw-corp .footer-hours,
body.dtw-corp .newsletter p {
  color: rgba(255, 255, 255, .64);
}

body.dtw-corp .footer-col-title,
body.dtw-corp .newsletter h3 {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7ea8ff;
}

body.dtw-corp .footer-link {
  font-family: var(--f-body);
  font-size: .93rem;
  color: rgba(255, 255, 255, .74);
  text-transform: none;
  letter-spacing: 0;
}

body.dtw-corp .footer-link:hover {
  color: #fff;
}

body.dtw-corp .footer-mail,
body.dtw-corp .footer-phone {
  font-family: var(--f-mono);
  font-size: .88rem;
  letter-spacing: .02em;
  color: #fff;
}

body.dtw-corp .newsletter-form input {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-card);
  color: #fff;
  font-family: var(--f-body);
}

body.dtw-corp .newsletter-form input::placeholder {
  color: rgba(255, 255, 255, .45);
}

body.dtw-corp .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
}

body.dtw-corp .footer-legal {
  color: rgba(255, 255, 255, .45);
  line-height: 1.7;
}

/* ============================================================
   16. COTIZACION FLOTANTE
   ============================================================ */

/* El drawer quedaba en z-index 139 y el header fijo en 1000, asi que
   el header tapaba el boton de cerrar y no se podia clickear.
   La cotizacion tiene que quedar por encima de la navegacion.
   Va con !important porque styles.css:10977 tambien lo usa. */
body.dtw-corp .cart-drawer {
  z-index: 1200 !important;
  border-left: 1px solid var(--c-rule);
  border-radius: 0;
}

body.dtw-corp .cart-overlay {
  z-index: 1150 !important;
}

body.dtw-corp .cart-kicker {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-blue);
}

/* el encabezado traia un degradado oscuro con texto oscuro encima:
   se leia negro sobre negro */
body.dtw-corp .cart-header {
  background: var(--c-paper) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--c-rule) !important;
}

body.dtw-corp .cart-header h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  color: var(--c-text) !important;
}

body.dtw-corp .cart-close {
  background: var(--c-paper-alt) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-rule) !important;
}

body.dtw-corp .cart-close:hover {
  background: var(--c-rule) !important;
}

body.dtw-corp .cart-item {
  border-bottom: 1px solid var(--c-rule);
  border-radius: 0;
  background: none;
}

body.dtw-corp .cart-item-icon {
  font-family: var(--f-mono);
  font-weight: 700;
  background: var(--c-paper-alt);
  color: var(--c-text);
  border-radius: 2px;
}

body.dtw-corp .cart-item-price {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--c-muted);
}

/* desglose neto / IVA / total */
body.dtw-corp .cart-breakdown {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-rule);
}

body.dtw-corp .cart-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--c-muted);
}

body.dtw-corp .cart-line b {
  font-weight: 700;
  color: var(--c-text);
}

body.dtw-corp .cart-total-label {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

body.dtw-corp .cart-total-amount {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 1.7rem;
  letter-spacing: -.02em;
  color: var(--c-text);
}

body.dtw-corp .cart-note {
  font-family: var(--f-mono);
  font-size: .74rem;
  line-height: 1.7;
  color: var(--c-muted);
}

body.dtw-corp .quote-float {
  font-family: var(--f-body);
  font-weight: 600;
  background: var(--c-ink);
  border: 0;
  border-radius: var(--r-card);
}

body.dtw-corp .whatsapp-float {
  border-radius: 50%;
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  body.dtw-corp .process-step {
    border-right: 0;
    border-bottom: 1px solid var(--c-rule);
    padding-right: 0;
  }

  body.dtw-corp .process-step:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  body.dtw-corp .stat-card {
    border-left: 0;
    border-top: 1px solid var(--c-rule);
    padding: 22px 0;
  }

  body.dtw-corp .stat-card:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  body.dtw-corp {
    --s-section: 64px;
  }

  body.dtw-corp .hero-title {
    max-width: none;
  }

  body.dtw-corp .service-tagline {
    min-height: 0;
  }

  /* el sello va absoluto arriba a la derecha: en pantalla angosta
     se montaba encima de la etiqueta de folio */
  body.dtw-corp .service-badge {
    position: static !important;
    display: inline-block;
    margin: 0 0 14px !important;
  }

  body.dtw-corp .services-header__quote {
    padding: 22px;
  }

  body.dtw-corp .terms-grid,
  body.dtw-corp .porque-grid {
    border-left: 0;
  }

  body.dtw-corp .terms-item {
    border-right: 0;
    padding: 24px 0 26px;
  }

  body.dtw-corp .porque-card {
    border-right: 0;
    padding: 24px 0 26px;
  }

  body.dtw-corp .currency-toggle {
    flex-wrap: wrap;
  }

  body.dtw-corp .faq-answer {
    padding-right: 0;
  }

  /* objetivos tactiles: todo lo clickeable llega a 40px de alto */
  body.dtw-corp .currency-btn {
    min-height: 40px;
    padding: 10px 16px;
  }

  body.dtw-corp .market-card a,
  body.dtw-corp .blog-card__link,
  body.dtw-corp .footer-link,
  body.dtw-corp .hero-trust a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* nada debe desbordar horizontalmente */
body.dtw-corp {
  overflow-x: hidden;
}

/* ============================================================
   18. CORRECCIONES SOBRE styles.css
   ------------------------------------------------------------
   styles.css usa !important en su bloque "visual upgrade"
   (~linea 10900 en adelante), asi que estas propiedades solo se
   pueden ganar con !important. Se aplica unicamente a las
   propiedades que se verificaron perdiendo en el navegador,
   no como regla general.
   ============================================================ */

/* el CTA del plan recomendado se iba a verde azulado */
body.dtw-corp .btn-service--featured {
  background: var(--c-ink) !important;
  border-color: var(--c-ink) !important;
  color: #fff !important;
}

body.dtw-corp .btn-service--featured:hover {
  background: var(--c-ink-soft) !important;
  border-color: var(--c-ink-soft) !important;
}

/* el sello del plan recomendado: unico acento calido */
body.dtw-corp .service-badge--reco {
  background: var(--c-seal-wash) !important;
  color: var(--c-seal) !important;
  border-color: rgba(154, 52, 18, .34) !important;
}

body.dtw-corp .service-badge--start,
body.dtw-corp .service-badge--premium {
  background: var(--c-paper) !important;
  color: var(--c-muted) !important;
  border-color: var(--c-rule) !important;
}

/* esquinas: el sistema nuevo es de 4px, no de 10px */
body.dtw-corp .service-card,
body.dtw-corp .conversion-shot,
body.dtw-corp .result-card,
body.dtw-corp .blog-card,
body.dtw-corp .market-card {
  border-radius: var(--r-card) !important;
}

body.dtw-corp .service-card {
  box-shadow: none !important;
}

body.dtw-corp .service-card:hover {
  box-shadow: 0 14px 34px rgba(11, 26, 43, .07) !important;
}

body.dtw-corp .service-gift {
  border: 0 !important;
  border-left: 2px solid var(--c-blue) !important;
  border-radius: 0 !important;
}

body.dtw-corp .service-price {
  font-family: var(--f-display) !important;
}

body.dtw-corp .stat-number {
  color: var(--c-blue) !important;
}

/* el FAQ se quedaba en tarjetas de 10px con sombra por un
   !important de styles.css; el resto de la pagina usa filetes */
body.dtw-corp .faq-item {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--c-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

body.dtw-corp .faq-item:last-of-type {
  border-bottom: 1px solid var(--c-rule) !important;
}

body.dtw-corp .faq-item:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* la numeracion del metodo tambien venia en verde azulado */
body.dtw-corp .process-step b,
body.dtw-corp .services-list-number {
  background: none !important;
  color: var(--c-blue) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  font-size: .8rem !important;
  display: block !important;
}

/* styles.css:6993 pintaba un circulo verde azulado numerado con
   counter(reason) sobre cada tarjeta. Numerar capacidades no dice
   nada (no son una secuencia) y ese teal rompe la paleta. */
body.dtw-corp .porque-card::before {
  content: none !important;
  display: none !important;
}

/* cuadrito lima/cyan que acompanaba al emoji */
body.dtw-corp .porque-card .icon::after {
  content: none !important;
  display: none !important;
}

/* styles.css dejaba .icon en font-size 0 para esconder el emoji:
   con etiquetas de texto eso las volvia invisibles */
body.dtw-corp .porque-card .icon {
  font-size: .7rem !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #7ea8ff !important;
  display: block !important;
}

/* la cabecera de servicios va sobre papel claro: texto en tinta */
body.dtw-corp .services-header__copy h2,
body.dtw-corp .services-header__copy h2 em {
  color: var(--c-text) !important;
}

body.dtw-corp .services-header__copy p {
  color: var(--c-muted) !important;
}

body.dtw-corp .services-header__copy p strong {
  color: var(--c-text) !important;
}

body.dtw-corp .services-header__quote strong,
body.dtw-corp .services-header__quote strong .price-value {
  color: var(--c-text) !important;
}

body.dtw-corp .services-header__quote p {
  color: var(--c-muted) !important;
}

body.dtw-corp .services-header__quote .price-iva {
  color: var(--c-blue) !important;
}

body.dtw-corp .services-header__quote button {
  background: var(--c-ink) !important;
  color: #fff !important;
  border-color: var(--c-ink) !important;
}

body.dtw-corp .services-header__quote button:hover {
  background: var(--c-ink-soft) !important;
  border-color: var(--c-ink-soft) !important;
}

/* "Desde $284.000 + IVA" no cabe en una linea a 2.3rem
   y tiraba el "+ IVA" abajo en dos de las seis tarjetas */
body.dtw-corp .service-price {
  font-size: 1.95rem !important;
}

body.dtw-corp .service-price .price-k {
  font-size: 1.3rem;
}

/* ------------------------------------------------------------
   Restos del acento verde azulado / cyan (#26768d, #38bdf8).
   La home usa un solo azul; estos son los ultimos focos que
   quedaban vivos segun el barrido de color en el navegador.
   ------------------------------------------------------------ */

body.dtw-corp em {
  color: inherit !important;
}

body.dtw-corp h1 em,
body.dtw-corp h2 em,
body.dtw-corp h3 em,
body.dtw-corp .quien-soy-title em,
body.dtw-corp .showcase-title em,
body.dtw-corp .canva-title em,
body.dtw-corp .faq-section > h2 em {
  color: var(--c-blue) !important;
}

body.dtw-corp .hero-title em,
body.dtw-corp .seo-boom-title em,
body.dtw-corp .porque-yo h2 em,
body.dtw-corp .service-custom__title em {
  color: #7ea8ff !important;
}

body.dtw-corp .seo-metric em {
  color: rgba(255, 255, 255, .6) !important;
}

body.dtw-corp .agency-kicker,
body.dtw-corp .agency-kicker::before {
  color: var(--c-blue) !important;
}

body.dtw-corp .agency-kicker::before {
  background: var(--c-blue) !important;
}

body.dtw-corp .btn-cart {
  color: var(--c-text) !important;
}

body.dtw-corp .btn-cart:hover {
  color: var(--c-blue-deep) !important;
}

body.dtw-corp .btn-cart.is-added {
  color: #fff !important;
}

body.dtw-corp .service-custom__list li::before {
  color: #7ea8ff !important;
  border-color: #7ea8ff !important;
  background: none !important;
}

body.dtw-corp .cart-count {
  background: var(--c-blue) !important;
  color: #fff !important;
}

body.dtw-corp .cart-checkout,
body.dtw-corp .btn-primary.is-hot,
body.dtw-corp button.is-hot {
  background-image: none !important;
  background-color: var(--c-blue) !important;
}

/* ============================================================
   19. MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body.dtw-corp *,
  body.dtw-corp *::before,
  body.dtw-corp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  body.dtw-corp .ticker-inner {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   SECCION VIDEOS · carrusel del canal
   ------------------------------------------------------------
   El HTML lo genera tools/sync_videos.py desde el RSS del canal.
   Mezcla Shorts (9:16) y videos normales (16:9), asi que la
   tarjeta define su proporcion segun la clase del slide.
   El desplazamiento es scroll-snap: sin JS igual se arrastra.
   ============================================================ */

body.dtw-corp #videos {
  background: var(--c-paper-alt);
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}

body.dtw-corp .videos-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem);
}

body.dtw-corp .videos-kicker {
  display: inline-block;
  font-family: "Courier Prime", monospace;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: .75rem;
}

body.dtw-corp .videos-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0 0 .75rem;
  text-wrap: balance;
}

body.dtw-corp .videos-copy {
  max-width: 62ch;
  color: #46586b;
  margin: 0;
}

body.dtw-corp .videos-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  body.dtw-corp .videos-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }
}

/* ---------- carrusel ---------- */

body.dtw-corp .videos-carousel {
  position: relative;
  min-width: 0;
}

body.dtw-corp .videos-track {
  display: flex;
  gap: 1.15rem;
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

body.dtw-corp .videos-track:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 4px;
  border-radius: 14px;
}

body.dtw-corp .video-slide {
  flex: 0 0 auto;
  width: min(78vw, 340px);
  scroll-snap-align: start;
}

body.dtw-corp .video-slide--short {
  width: min(58vw, 230px);
}

body.dtw-corp .videos-controls {
  position: absolute;
  top: -3.1rem;
  right: 0;
  display: flex;
  gap: .5rem;
}

body.dtw-corp .videos-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

body.dtw-corp .videos-arrow svg {
  width: 18px;
  height: 18px;
}

body.dtw-corp .videos-arrow:hover:not(:disabled) {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

body.dtw-corp .videos-arrow:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
}

body.dtw-corp .videos-arrow:disabled {
  opacity: .35;
  cursor: default;
}

/* Un solo video: no hay hacia donde avanzar, sobran las flechas. */
body.dtw-corp .videos-carousel.is-static .videos-controls {
  display: none;
}

/* ---------- tarjeta ---------- */

body.dtw-corp .video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  overflow: hidden;
  background: #0b1a2b;
  cursor: pointer;
}

body.dtw-corp .video-slide--short .video-facade {
  aspect-ratio: 9 / 16;
}

body.dtw-corp .video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, opacity .35s ease;
}

body.dtw-corp .video-facade:hover img,
body.dtw-corp .video-facade:focus-visible img {
  transform: scale(1.04);
  opacity: .85;
}

body.dtw-corp .video-facade:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}

body.dtw-corp .video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--c-blue);
  box-shadow: 0 8px 26px rgba(11, 26, 43, .35);
  transition: transform .25s ease;
}

body.dtw-corp .video-facade:hover .video-play {
  transform: scale(1.08);
}

body.dtw-corp .video-play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

body.dtw-corp .video-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  font-family: "Courier Prime", monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 26, 43, .82);
  border-radius: 999px;
  padding: .22rem .6rem;
}

body.dtw-corp .video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  display: block;
}

body.dtw-corp .video-frame--short {
  aspect-ratio: 9 / 16;
}

body.dtw-corp .video-title {
  font-size: .98rem;
  line-height: 1.32;
  margin: .85rem 0 .3rem;
}

body.dtw-corp .video-title a {
  color: var(--c-ink);
  text-decoration: none;
}

body.dtw-corp .video-title a:hover {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.dtw-corp .video-date {
  font-family: "Courier Prime", monospace;
  font-size: .76rem;
  color: #6b7c8f;
  margin: 0;
}

body.dtw-corp .videos-fallback {
  margin: 0;
  padding-left: 1.1rem;
}

/* ---------- tarjeta de suscripcion ---------- */

body.dtw-corp .videos-cta {
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  padding: clamp(1.35rem, 3vw, 1.9rem);
}

body.dtw-corp .videos-cta h3 {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  color: var(--c-ink);
}

body.dtw-corp .videos-cta p {
  color: #46586b;
  font-size: .95rem;
  margin: 0 0 1.15rem;
}

body.dtw-corp .videos-btn {
  display: inline-block;
  background: var(--c-blue);
  color: #fff;
  font-weight: 600;
  padding: .8rem 1.35rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease;
}

body.dtw-corp .videos-btn:hover {
  background: var(--c-blue-deep);
}

body.dtw-corp .videos-link {
  display: block;
  margin-top: .85rem;
  font-size: .9rem;
  color: var(--c-blue);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.dtw-corp .videos-track {
    scroll-behavior: auto;
  }

  body.dtw-corp .video-facade img,
  body.dtw-corp .video-play,
  body.dtw-corp .videos-arrow {
    transition: none;
  }
}

/* ============================================================
   CONDICIONES · resumen en la home y pagina propia
   ------------------------------------------------------------
   El detalle vive en /condiciones/. En la home queda el titular,
   tres lineas y un enlace: la seccion bajo de 309 a 39 palabras.
   La pagina reusa las clases .terms-* y por eso carga esta hoja.
   ============================================================ */

body.dtw-corp .terms--resumen .terms-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
}

body.dtw-corp .terms--resumen .terms-head {
  flex: 1 1 32ch;
  margin: 0;
}

body.dtw-corp .terms-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--c-blue);
  border: 1px solid var(--c-blue);
  border-radius: 10px;
  padding: .75rem 1.3rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

body.dtw-corp .terms-more::after {
  content: "→";
}

body.dtw-corp .terms-more:hover,
body.dtw-corp .terms-more:focus-visible {
  background: var(--c-blue);
  color: #fff;
}

body.dtw-corp .terms-more:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}

/* --- pagina /condiciones/ --- */

body.dtw-corp .condiciones-main {
  padding-top: clamp(1rem, 3vw, 2rem);
}

body.dtw-corp .condiciones-main .terms h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  color: var(--c-ink);
  margin: 0 0 .9rem;
  text-wrap: balance;
}

body.dtw-corp .terms--cierre {
  background: var(--c-paper-alt);
  border-top: 1px solid var(--c-rule);
}

body.dtw-corp .terms--cierre .terms-head {
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  body.dtw-corp .terms--resumen .terms-inner {
    align-items: stretch;
  }

  body.dtw-corp .terms-more {
    justify-content: center;
  }
}

/* ============================================================
   PAGINAS EXTRAIDAS DE LA HOME
   ------------------------------------------------------------
   Las genera tools/extraer_seccion.py reusando el bloque tal
   como estaba en la portada. Solo hace falta darle el marco:
   ancho de contenedor, el H1 que antes era H2, y las secciones
   de intro, enlaces y cierre que se agregan alrededor.
   ============================================================ */

body.dtw-corp .pagina-extraida {
  padding-top: clamp(1rem, 3vw, 2rem);
}

body.dtw-corp .pagina-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2.5rem);
}

body.dtw-corp .pagina-extraida h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  color: var(--c-ink);
  margin: 0 0 .9rem;
  text-wrap: balance;
}

body.dtw-corp .pagina-intro .pagina-inner {
  padding-bottom: 0;
}

body.dtw-corp .pagina-intro p {
  max-width: 68ch;
  color: #46586b;
  margin: 0 0 .85rem;
}

body.dtw-corp .pagina-enlaces {
  background: var(--c-paper-alt);
  border-top: 1px solid var(--c-rule);
}

body.dtw-corp .pagina-enlaces h2,
body.dtw-corp .pagina-cierre h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--c-ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}

body.dtw-corp .pagina-enlaces .service-link-list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  body.dtw-corp .pagina-enlaces .service-link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.dtw-corp .pagina-enlaces .service-link-list a {
  display: block;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

body.dtw-corp .pagina-enlaces .service-link-list a:hover,
body.dtw-corp .pagina-enlaces .service-link-list a:focus-visible {
  border-color: var(--c-blue);
  color: var(--c-blue);
}

body.dtw-corp .pagina-cierre p {
  max-width: 62ch;
  color: #46586b;
  margin: 0 0 1.4rem;
}

/* La seccion venia con su propio fondo de portada; en pagina propia
   el borde superior sobra porque ya no la separa de nada. */
body.dtw-corp .pagina-extraida .porque-yo {
  border-top: 0;
}


/* ------------------------------------------------------------
   Bloque "Que puedo construir": venia del <style> inline de la
   home, que por ir despues de los <link> le ganaba a esta hoja.
   Scopeado a la pagina para que se vea igual que antes.
   ------------------------------------------------------------ */

body.dtw-corp .pagina-capacidades .porque-yo {
      background: #0d0d0d;
      color: #fff;
      padding: 80px 24px;
    }
body.dtw-corp .pagina-capacidades .porque-yo-inner {
      max-width: 1100px;
      margin: 0 auto;
    }
body.dtw-corp .pagina-capacidades .porque-yo h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 3rem);
      text-align: center;
      margin-bottom: 8px;
    }
body.dtw-corp .pagina-capacidades .porque-yo h2 em { color: #1295f0; font-style: italic; }
body.dtw-corp .pagina-capacidades .porque-yo .subtitle {
      text-align: center;
      color: #aaa;
      font-family: 'Barlow', sans-serif;
      margin-bottom: 48px;
    }
body.dtw-corp .pagina-capacidades .porque-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
    }
body.dtw-corp .pagina-capacidades .porque-card {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 16px;
      padding: 28px 24px;
      transition: border-color 0.2s;
    }
body.dtw-corp .pagina-capacidades .porque-card:hover { border-color: #1295f0; }
body.dtw-corp .pagina-capacidades .porque-card .icon { font-size: 2rem; margin-bottom: 12px; }
body.dtw-corp .pagina-capacidades .porque-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.2rem;
      color: #fff;
      margin-bottom: 8px;
    }
body.dtw-corp .pagina-capacidades .porque-card p {
      font-family: 'Barlow', sans-serif;
      font-size: 0.95rem;
      color: #888;
      line-height: 1.6;
    }


/* ------------------------------------------------------------
   Bloque "Hola, soy Daniel": venia del <style> inline de la home,
   que por ir despues de los <link> le ganaba a esta hoja.
   Scopeado a la pagina para que se vea igual que antes.
   ------------------------------------------------------------ */

body.dtw-corp .pagina-sobre-mi #quien-soy {
      background: #F7F5F0;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy {
      padding: 80px 24px;
      max-width: 720px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      text-align: center;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1;
      margin: 0;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-title em {
      color: #1295f0;
      font-style: italic;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-photo {
      position: relative;
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-photo::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: -16% -12% -8% -16%;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, rgba(18,149,240,.32), transparent 66%);
      filter: blur(34px);
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-img {
      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 22px;
      box-shadow: 0 34px 70px rgba(6,16,28,.22);
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-cap {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      text-align: center;
      font-family: 'Barlow', sans-serif;
      font-size: .9rem;
      color: #6b7684;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-cap strong { color: #17181a; }
body.dtw-corp .pagina-sobre-mi .quien-soy-img-placeholder {
      width: 100%;
      max-width: 380px;
      aspect-ratio: 1;
      border-radius: 24px;
      border: 4px solid #1295f0;
      background: linear-gradient(135deg, #e8f4ff 0%, #cce7ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 120px;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-content {
      text-align: left;
      max-width: 560px;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy-content p {
      font-family: 'Barlow', sans-serif;
      font-size: 1.1rem;
      line-height: 1.7;
      color: #444;
      margin-bottom: 16px;
    }
body.dtw-corp .pagina-sobre-mi .quien-soy { gap: 32px; }
body.dtw-corp .pagina-sobre-mi .quien-soy-img-placeholder { max-width: 220px; margin: 0 auto; font-size: 80px; }
body.dtw-corp .pagina-sobre-mi .quien-soy-photo { max-width: 300px; margin: 0 auto; }
body.dtw-corp .pagina-sobre-mi .quien-soy-content { text-align: left; }
body.dtw-corp .pagina-sobre-mi .quien-soy {
        max-width: 1240px;
        display: grid;
        grid-template-columns: minmax(320px, 0.85fr) 1fr;
        grid-template-areas:
          "title text"
          "photo text";
        align-items: start;
        gap: 16px 80px;
        text-align: left;
        padding: 100px 40px;
      }
body.dtw-corp .pagina-sobre-mi .quien-soy-title { grid-area: title; }
body.dtw-corp .pagina-sobre-mi .quien-soy-photo { grid-area: photo; align-self: start; margin: 8px 0 0; }
body.dtw-corp .pagina-sobre-mi .quien-soy-content { grid-area: text; align-self: center; max-width: 620px; }