/**
 * DML HTA - Seccion Proyectos
 * Estilos tomados tal cual de la maqueta proyectos.html.
 * Hero y pestañas: vista 04 (Verticales). Catalogo y ficha: vista 01.
 * Ningun valor fue modificado: solo se prefijan los selectores con .dml-proyectos
 * para que no se filtren al resto del sitio ni choquen con Elementor.
 */

/* ---------- Base (era :root + body de la maqueta) ---------- */
.dml-proyectos{
  --black:#090909;--ink:#171717;--paper:#fff;--fog:#f1f3f4;--line:#d9dcdf;
  --muted:#676c71;--cyan:#8fd6ee;--blue:#143750;--max:1480px;
  color:var(--ink);background:var(--paper);
  font-family:"DM Sans",Arial,sans-serif;font-size:16px;line-height:1.5
}
.dml-proyectos *{box-sizing:border-box}
.dml-proyectos button,.dml-proyectos a{font:inherit}
.dml-proyectos button{cursor:pointer}
.dml-proyectos img{max-width:100%;display:block}

/* ---------- Utilidades compartidas ---------- */
.dml-proyectos .shell{max-width:var(--max);margin:0 auto;padding-left:28px;padding-right:28px}
.dml-proyectos .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:#4e555a}
.dml-proyectos .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.dml-proyectos .section-head h2{font:600 clamp(30px,4vw,54px)/1.02 Manrope,sans-serif;letter-spacing:-.04em;margin:0}
.dml-proyectos .section-head p{max-width:520px;color:var(--muted);margin:0}
/* Animacion de entrada. Antes desplazaba 8px en .28s, y ese recorrido es lo que
   se percibia como demora al cambiar de pestaña. Ahora solo opacidad, en .12s. */
.dml-proyectos .fade{animation:dml-fade .12s ease both}
@keyframes dml-fade{from{opacity:.35}to{opacity:1}}

/* ---------- 01 - Hero "Especializacion DML" (vista 04) ---------- */
.dml-proyectos .v4{background:#edf0f2}
/* Sin el atajo `padding`: .v4-hero tambien lleva la clase .shell, y el atajo
   le pisaba el padding lateral dejandolo en 0. Mismo fallo que tenia el
   catalogo; solo se ve por debajo de 1480px, donde el max-width ya no
   centra con aire a los lados. */
.dml-proyectos .v4-hero{padding-top:72px;padding-bottom:46px}
.dml-proyectos .v4-hero h1{font:600 clamp(52px,7vw,94px)/.92 Manrope,sans-serif;letter-spacing:-.055em;margin:14px 0 25px;max-width:1080px}
.dml-proyectos .v4-hero p{font-size:19px;max-width:730px;color:#525960}

/* Pestañas de vertical: son el filtro de la seccion. */
/* El borde izquierdo va en el contenedor, no en la primera pestaña: cada tab
   solo lleva borde derecho e inferior, asi que la primera quedaba abierta.
   En el contenedor tambien cierra el lateral cuando en movil pasan a dos
   columnas y la primera de cada fila tendria el mismo hueco. */
.dml-proyectos .sector-nav{display:flex;flex-wrap:wrap;border-top:1px solid #9fa6ab;border-left:1px solid #9fa6ab;margin-top:52px}
.dml-proyectos .sector-tab{flex:1;min-width:180px;border:0;border-right:1px solid #9fa6ab;border-bottom:1px solid #9fa6ab;background:transparent;text-align:left;padding:20px 18px;font-weight:600;color:#535a60;transition:background .1s ease,color .1s ease}
/* Hover en negro: el diseño no lo traia, pero sin el no se sabe que pestaña
   se va a pulsar. Transicion muy corta para que no se sienta perezoso. */
.dml-proyectos .sector-tab:hover{background:#111;color:#fff}
.dml-proyectos .sector-tab.active{background:#111;color:#fff}
.dml-proyectos .sector-tab small{display:block;font-size:11px;opacity:.65;margin-bottom:6px}

/* ---------- 02 - Catalogo: grilla de proyectos ---------- */
.dml-proyectos .catalog{padding-top:68px;padding-bottom:100px}
.dml-proyectos .project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.dml-proyectos .project-card{border:0;background:transparent;text-align:left;padding:0;min-width:0;color:inherit}
.dml-proyectos .project-image{height:280px;overflow:hidden;background:#d8dcdf;position:relative}
.dml-proyectos .project-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(.72)}
.dml-proyectos .project-card:hover img{transform:scale(1.035)}
.dml-proyectos .project-tag{position:absolute;top:14px;left:14px;background:#fff;color:#111;padding:7px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.dml-proyectos .project-copy{padding:17px 2px 3px;border-bottom:1px solid #c8cccf}
.dml-proyectos .project-copy small{color:#6a7075;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.dml-proyectos .project-copy h3{font:600 23px/1.15 Manrope,sans-serif;letter-spacing:-.025em;margin:8px 0 9px}
.dml-proyectos .project-copy p{color:#5f656a;margin:0 0 16px;font-size:14px}

/* ---------- Modal "Ficha de proyecto" ---------- */
.dml-proyectos dialog{width:min(980px,calc(100vw - 32px));border:0;padding:0;box-shadow:0 28px 90px rgba(0,0,0,.36);max-height:92vh;color:#111}
.dml-proyectos dialog::backdrop{background:rgba(5,8,10,.72);backdrop-filter:blur(3px)}
.dml-proyectos .dialog-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid #d8dcdf;background:#f3f4f5}
.dml-proyectos .dialog-head h2{font:600 25px Manrope,sans-serif;margin:0}
.dml-proyectos .close{width:40px;height:40px;border:0;background:#111;color:#fff;font-size:20px}
.dml-proyectos .dialog-body{padding:30px 30px 36px;overflow:auto}
.dml-proyectos .case-top{display:grid;grid-template-columns:1fr .7fr;gap:36px}
.dml-proyectos .case-top h2{font:600 46px/1 Manrope,sans-serif;letter-spacing:-.045em;margin:7px 0 20px}
.dml-proyectos .case-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #bbb}
.dml-proyectos .case-facts div{padding:14px 0;border-bottom:1px solid #ddd}
.dml-proyectos .case-facts small{display:block;color:#747a7e;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.dml-proyectos .case-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.dml-proyectos .case-block{border-top:3px solid #111;padding-top:15px}
.dml-proyectos .case-block h3{font:600 19px Manrope,sans-serif;margin:0 0 9px}
.dml-proyectos .case-block p{font-size:14px;color:#5c6368;margin:0}

/* ---------- Paginador y estados (no existen en la maqueta) ----------
   Se construye reutilizando los valores de las pildoras de filtro originales
   -borde, radio, colores, tipografia- para que pertenezca al mismo lenguaje. */
.dml-proyectos .dml-pager{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:44px 0 0}
.dml-proyectos .dml-page{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;border:1px solid #b8bdc1;border-radius:999px;background:#fff;color:#4e555a;font-size:14px;text-decoration:none;transition:.2s}
.dml-proyectos a.dml-page:hover{border-color:#111;color:#111}
.dml-proyectos .dml-page.is-current{background:#111;color:#fff;border-color:#111}
.dml-proyectos .dml-page-nav{font-size:18px;line-height:1}
.dml-proyectos .dml-page-gap{color:#8b9095;padding:0 2px}
.dml-proyectos .dml-vacio{color:var(--muted);margin:0}

/* Atenuado mientras el JS trae la pagina siguiente. */
.dml-proyectos .dml-resultado{transition:opacity .1s ease}
.dml-proyectos .dml-resultado.is-loading{opacity:.6;pointer-events:none}

/* ---------- Responsive (solo las reglas de nuestras areas) ---------- */
@media(max-width:900px){
  .dml-proyectos .case-top{grid-template-columns:1fr}
  .dml-proyectos .project-grid{grid-template-columns:repeat(2,1fr)}
  .dml-proyectos .case-blocks{grid-template-columns:1fr}
}
@media(max-width:620px){
  .dml-proyectos .shell{padding-left:19px;padding-right:19px}
  .dml-proyectos .v4-hero h1{font-size:50px}
  .dml-proyectos .sector-nav{display:grid;grid-template-columns:1fr 1fr}
  .dml-proyectos .sector-tab{min-width:0}
  .dml-proyectos .project-grid{grid-template-columns:1fr}
  .dml-proyectos .project-image{height:255px}
  .dml-proyectos .section-head{display:block}
  .dml-proyectos .section-head p{margin-top:18px}
  .dml-proyectos .dialog-body{padding:22px 20px}
  .dml-proyectos .case-top h2{font-size:36px}
}