/* ============================================================
   CASO  ·  ficha de proyecto (desarrollatuweb.cl)
   Primera: /proyectos/control-remoto-chile/ (2026-10-06).

   Lenguaje de la capa limpio: esquinas casi rectas, linea de 1px en
   vez de sombras, negro sobre blanco y el azul solo donde se hace clic.
   Lo propio del caso: capturas grandes en marco de navegador, una fila
   de cifras verificables y bloques imagen/texto alternados.
   Todo acotado a body.dtw-limpio .caso-* (gana a styles.css sin tocarlo).
   ============================================================ */

body.dtw-limpio {
  --caso-tinta: #0b1a2b;
  --caso-texto: #16212e;
  --caso-gris: #5a6a7b;
  --caso-linea: #dae2ea;
  --caso-suave: #f4f6f9;
  --caso-azul: #1350d6;
  --caso-azul-osc: #0e3ea8;
  --caso-ancho: 1120px;
}

body.dtw-limpio .caso-wrap { max-width: var(--caso-ancho); margin: 0 auto; padding: 0 24px; }

/* -- Hero -- */
body.dtw-limpio .caso-hero { padding: 64px 0 0; background: #fff; border-bottom: 1px solid var(--caso-linea); overflow: hidden; }
body.dtw-limpio .caso-migas { font: 500 14px/1.4 'Barlow', system-ui, sans-serif; color: var(--caso-gris); margin: 0 0 28px; }
body.dtw-limpio .caso-migas a { color: var(--caso-gris); text-decoration: none; }
body.dtw-limpio .caso-migas a:hover { color: var(--caso-azul); }
body.dtw-limpio .caso-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-bottom: 64px; }
body.dtw-limpio .caso-etiqueta { display: inline-flex; gap: 10px; flex-wrap: wrap; font: 600 14px/1 'Barlow', system-ui, sans-serif; color: var(--caso-gris); margin: 0 0 20px; }
body.dtw-limpio .caso-etiqueta span + span::before { content: '·'; margin-right: 10px; color: var(--caso-linea); }
body.dtw-limpio .caso-hero h1 {
  font-family: 'Archivo', system-ui, sans-serif !important; font-weight: 700 !important; font-stretch: 112%;
  font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important;
  color: var(--caso-tinta) !important; margin: 0 0 22px !important; text-wrap: balance; text-transform: none !important;
}
body.dtw-limpio .caso-hero__bajada { font: 400 19px/1.6 'Barlow', system-ui, sans-serif; color: var(--caso-texto); margin: 0 0 30px; max-width: 34em; }
body.dtw-limpio .caso-acciones { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-bottom: 48px; }
body.dtw-limpio .caso-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 15px 24px; border-radius: 3px;
  background: var(--caso-azul); color: #fff !important; font: 600 16px/1 'Barlow', system-ui, sans-serif; text-decoration: none !important;
  transition: background 0.15s ease;
}
body.dtw-limpio .caso-btn:hover { background: var(--caso-azul-osc); }
body.dtw-limpio .caso-enlace { font: 600 16px/1 'Barlow', system-ui, sans-serif; color: var(--caso-azul) !important; text-decoration: none !important; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
body.dtw-limpio .caso-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--caso-linea); margin: 0 0 56px; }
body.dtw-limpio .caso-ficha div { padding: 14px 0; border-bottom: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-ficha dt { font: 500 13px/1.3 'Barlow', system-ui, sans-serif; color: var(--caso-gris); margin: 0 0 4px; }
body.dtw-limpio .caso-ficha dd { font: 600 16px/1.35 'Barlow', system-ui, sans-serif; color: var(--caso-tinta); margin: 0; }

/* Capturas: marco de navegador + telefono superpuesto */
body.dtw-limpio .caso-escena { position: relative; padding-bottom: 0; }
body.dtw-limpio .caso-nav { border: 1px solid var(--caso-linea); border-bottom: 0; border-radius: 6px 6px 0 0; background: #fff; box-shadow: 0 24px 60px -30px rgba(11, 26, 43, 0.35); overflow: hidden; }
body.dtw-limpio .caso-nav__barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--caso-linea); background: var(--caso-suave); }
body.dtw-limpio .caso-nav__puntos { display: flex; gap: 6px; }
body.dtw-limpio .caso-nav__puntos i { width: 9px; height: 9px; border-radius: 50%; background: #cfd7e0; }
body.dtw-limpio .caso-nav__url { flex: 1; min-width: 0; padding: 5px 12px; border: 1px solid var(--caso-linea); border-radius: 3px; background: #fff; font: 500 12.5px/1.2 'Barlow', system-ui, sans-serif; color: var(--caso-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dtw-limpio .caso-nav img, body.dtw-limpio .caso-movil img { display: block; width: 100%; height: auto; }
body.dtw-limpio .caso-movil { position: absolute; right: -14px; bottom: -40px; width: 30%; max-width: 190px; border: 7px solid #0b1a2b; border-radius: 22px; overflow: hidden; background: #0b1a2b; box-shadow: 0 30px 50px -20px rgba(11, 26, 43, 0.55); }

/* -- Cifras -- */
body.dtw-limpio .caso-cifras { padding: 88px 0 72px; border-bottom: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-cifras__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-cifra { padding: 4px 24px 6px; border-right: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-cifra strong { display: block; font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-stretch: 112%; font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -0.02em; color: var(--caso-tinta); font-variant-numeric: tabular-nums; }
body.dtw-limpio .caso-cifra span { display: block; margin-top: 12px; font: 400 15px/1.45 'Barlow', system-ui, sans-serif; color: var(--caso-texto); }
body.dtw-limpio .caso-cifras__nota { margin: 22px 0 0; font: 400 14px/1.5 'Barlow', system-ui, sans-serif; color: var(--caso-gris); }

/* -- Secciones -- */
body.dtw-limpio .caso-seccion { padding: 88px 0; border-bottom: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-seccion--suave { background: var(--caso-suave); }
body.dtw-limpio .caso-kicker { display: block; font: 600 14px/1 'Barlow', system-ui, sans-serif; color: var(--caso-azul); margin: 0 0 14px; }
body.dtw-limpio .caso-seccion h2 {
  font-family: 'Archivo', system-ui, sans-serif !important; font-weight: 700 !important; font-stretch: 108%;
  font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -0.015em !important;
  color: var(--caso-tinta) !important; margin: 0 0 18px !important; text-wrap: balance; text-transform: none !important; max-width: 22em;
}
body.dtw-limpio .caso-seccion p { font: 400 18px/1.65 'Barlow', system-ui, sans-serif; color: var(--caso-texto); margin: 0 0 16px; max-width: 38em; }
body.dtw-limpio .caso-seccion strong { color: var(--caso-tinta); }

/* Punto de partida: lista de hallazgos */
body.dtw-limpio .caso-hallazgos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-hallazgos li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--caso-linea); font: 400 16.5px/1.55 'Barlow', system-ui, sans-serif; color: var(--caso-texto); }
body.dtw-limpio .caso-hallazgos b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--caso-tinta); font-variant-numeric: tabular-nums; }

/* Bloques alternados */
body.dtw-limpio .caso-bloque { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid var(--caso-linea); }
body.dtw-limpio .caso-bloque:first-of-type { border-top: 0; padding-top: 24px; }
body.dtw-limpio .caso-bloque--inv .caso-bloque__texto { order: 2; }
body.dtw-limpio .caso-bloque h3 {
  font-family: 'Archivo', system-ui, sans-serif !important; font-weight: 700 !important; font-size: clamp(22px, 2.2vw, 28px) !important;
  line-height: 1.15 !important; color: var(--caso-tinta) !important; margin: 6px 0 14px !important; text-transform: none !important;
}
body.dtw-limpio .caso-bloque__num { font: 600 14px/1 'Barlow', system-ui, sans-serif; color: var(--caso-gris); }
body.dtw-limpio .caso-bloque ul { list-style: none; margin: 18px 0 0; padding: 0; }
body.dtw-limpio .caso-bloque li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--caso-linea); font: 400 16px/1.5 'Barlow', system-ui, sans-serif; color: var(--caso-texto); }
body.dtw-limpio .caso-bloque li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 8px; height: 2px; background: var(--caso-azul); }
body.dtw-limpio .caso-captura { border: 1px solid var(--caso-linea); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -32px rgba(11, 26, 43, 0.4); }
body.dtw-limpio .caso-captura img { display: block; width: 100%; height: auto; }
body.dtw-limpio .caso-captura figcaption { padding: 12px 16px; border-top: 1px solid var(--caso-linea); font: 500 14px/1.4 'Barlow', system-ui, sans-serif; color: var(--caso-gris); }

/* Herramientas */
body.dtw-limpio .caso-stack { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
body.dtw-limpio .caso-stack li { padding: 9px 14px; border: 1px solid var(--caso-linea); border-radius: 3px; background: #fff; font: 600 15px/1 'Barlow', system-ui, sans-serif; color: var(--caso-tinta); }

/* Nota de transparencia y cierre */
body.dtw-limpio .caso-nota { border-left: 3px solid var(--caso-azul); padding: 6px 0 6px 22px; margin: 0; }
body.dtw-limpio .caso-cierre { padding: 96px 0; background: var(--caso-tinta); }
body.dtw-limpio .caso-cierre h2 { color: #fff !important; max-width: 20em; }
body.dtw-limpio .caso-cierre p { color: #c9d4e0; }
body.dtw-limpio .caso-cierre .caso-enlace { color: #fff !important; }

/* -- Movil -- */
@media (max-width: 900px) {
  body.dtw-limpio .caso-hero { padding-top: 40px; }
  body.dtw-limpio .caso-hero__grid, body.dtw-limpio .caso-bloque { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.dtw-limpio .caso-bloque--inv .caso-bloque__texto { order: 0; }
  body.dtw-limpio .caso-ficha { margin-bottom: 32px; }
  body.dtw-limpio .caso-escena { margin: 0 -8px 40px; }
  body.dtw-limpio .caso-movil { right: 6px; bottom: -28px; width: 28%; border-width: 5px; border-radius: 16px; }
  body.dtw-limpio .caso-cifras { padding: 64px 0 48px; }
  body.dtw-limpio .caso-cifras__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; gap: 28px 0; }
  body.dtw-limpio .caso-cifra { border-right: 0; border-left: 1px solid var(--caso-linea); padding: 4px 16px; }
  body.dtw-limpio .caso-seccion { padding: 64px 0; }
  body.dtw-limpio .caso-hallazgos { grid-template-columns: minmax(0, 1fr); }
  body.dtw-limpio .caso-hallazgos li { grid-template-columns: 62px minmax(0, 1fr); }
  body.dtw-limpio .caso-bloque { padding: 48px 0; }
  body.dtw-limpio .caso-cierre { padding: 72px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.dtw-limpio .caso-btn { transition: none; }
}

/* Ajustes tras la revision visual (2026-10-06) */
body.dtw-limpio .caso-bloque--inv { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
body.dtw-limpio:has(.caso-cierre) .dtwpie { margin-top: 0 !important; }
body.dtw-limpio .caso-cierre { margin-bottom: 0; }
@media (max-width: 900px) {
  body.dtw-limpio .caso-bloque--inv { grid-template-columns: minmax(0, 1fr); }
}
body.dtw-limpio .caso-cierre .caso-kicker { color: #9db8ff; }