/* DOFA Grupo Industrial · capa propia sobre estilos.css (heredado de Tregón)
   Aquí va solo lo que Tregón no tenía: el botón ámbar, el catálogo con su lista de
   solicitud, las tarjetas de proyecto y el filtro. Sin retículas de fondo y sin
   rótulos en píldora: los rótulos de sección son texto simple en ámbar. */

/* ── Logotipo: el de DOFA es horizontal (2.7:1), el de Tregón era casi cuadrado ── */
.lockup .marca{height:52px}
.lockup .marca.inv{filter:none}
.nav.pegada .marca.inv{filter:none}
.pie .lockup .marca{height:58px}

/* ── Botón ámbar: la acción principal (cotizar) ── */
.btn-ambar{background:var(--ambar);color:#10263C;border-color:var(--ambar)}
.btn-ambar:hover{background:#F4B526}
.nav.pegada .btn-ambar{background:var(--ambar);color:#10263C}
.btn.chico{padding:11px 16px;font-size:13.5px}

/* El rótulo de sección: texto simple en ámbar oscuro (fondo claro) */
.eyebrow{font-weight:400}
.hero .eyebrow.ruta{color:var(--claro);margin-bottom:12px}

/* ── Hero del inicio ── */
.hero.portada{min-height:min(92vh,760px)}
.hero.portada .fondo img{object-position:center 58%}
.hero.portada .caja{max-width:780px}
.hero h1 em{background:linear-gradient(to top,rgba(235,167,14,.92) 0%,rgba(235,167,14,.92) 30%,transparent 30%);
  color:#fff;font-size:1em;padding:0 .08em}
.hero .velo{
  background:
    linear-gradient(90deg, rgba(14,40,64,.78) 0%, rgba(14,40,64,.58) 42%, rgba(14,40,64,.14) 78%, rgba(14,40,64,.18) 100%),
    linear-gradient(180deg, rgba(14,40,64,.45) 0%, rgba(14,40,64,.02) 45%, rgba(14,40,64,.55) 100%);
}
.hero.corta{min-height:min(52vh,430px)}

.hero.corta .fondo img{width:100%;height:100%;object-fit:cover}

/* Las cifras: la franja va sin borde superior extra, pegada a la frase */
.datos-sec{padding:58px 0}
.dato{border-top-color:var(--ambar)}

/* ── Líneas de producto (las «unidades» de Tregón, en 3 x 2) ── */
.unidades .cab.cab-fila{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:end}
.unidades .cab.cab-fila .lead{margin:0;font-size:16.5px;font-weight:500;color:var(--gris)}
.uu.seis{grid-template-columns:repeat(3,1fr)}
.uu.seis .u{min-height:330px}
.uu.seis .u img{object-position:center 30%}
.u .velo{background:linear-gradient(180deg,rgba(14,40,64,0) 40%,rgba(14,40,64,.65) 70%,rgba(14,40,64,.95) 100%)}

/* ── Tarjetas de proyecto ── */
.pjs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.pjs.tres{margin-top:0}
.pj{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);
  padding:24px 24px 22px;display:flex;flex-direction:column;
  transition:box-shadow .25s ease,transform .25s ease}
.pj:hover{transform:translateY(-4px);box-shadow:0 24px 48px -34px rgba(16,46,74,.7)}
.pj[hidden]{display:none}
.pj-cab{display:flex;justify-content:space-between;gap:12px;font-family:var(--display);
  font-size:10.5px;}
.pj-cab .sector{color:var(--medio)}
.pj-cab .pais{color:var(--gris)}
.pj .cifra{display:block;font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(26px,2.4vw,34px);line-height:1.05;margin:18px 0 16px}
.pj h3{font-size:15.5px;margin:0 0 4px;letter-spacing:.04em}
.pj .pr{font-weight:700;color:#3d4753;font-size:14.5px;margin:0 0 10px}
.pj p{font-size:14.4px;color:var(--gris);line-height:1.55;margin:0 0 12px}
.pj-pie{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--navy);}

/* ── Filtro (chips) ── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.chip{font-family:var(--texto);font-weight:700;font-size:13.5px;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:10px 15px;cursor:pointer;
  display:inline-flex;gap:8px;align-items:center}
.chip i{font-style:normal;font-weight:600;font-size:12px;color:var(--gris)}
.chip:hover{border-color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.on i{color:var(--claro)}

/* ── Catálogo ── */
.catalogo{padding-top:52px}
.catalogo .chips{position:sticky;top:92px;z-index:5;background:#fff;padding:14px 0;
  margin-bottom:10px;border-bottom:1px solid var(--line)}
.bloque-cat{padding-top:44px;scroll-margin-top:170px}
.bloque-cat[hidden]{display:none}
.cab-cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px;align-items:end;
  margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cab-cat h2{margin:0}
.cab-cat p{margin:0;color:var(--gris);font-size:15.5px}
.producto .im{height:170px}
.producto .et{background:var(--ambar);color:#10263C}
.producto h3{font-size:17px}
.producto p{margin-bottom:12px}
.pide{background:var(--bg);padding:12px 14px;margin:0 0 18px}
.pide .t{display:block;font-family:var(--display);font-size:10px;
  color:var(--medio);margin-bottom:8px}
.pide ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.pide li{font-size:13px;font-weight:600;color:#3d4753;position:relative;padding-left:11px}
.pide li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;background:var(--navy)}
.acc-ficha{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.acc-ficha .solo{font-size:13px;font-weight:700;color:var(--navy)}
.acc-ficha .solo:hover{color:var(--medio)}
[data-agregar].dentro{background:#fff;color:var(--navy);border-color:var(--navy)}

/* ── Lista corrida de servicios / sectores (sin píldoras: texto con separador) ── */
.lista-servicios{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.lista-servicios span{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);
  font-weight:700;color:var(--navy);font-size:15px;position:relative;padding-left:20px}
.lista-servicios span::before{content:"";position:absolute;left:0;top:26px;width:8px;height:2px;background:var(--ambar)}

/* ── Clientes en texto ── */
.clientes-sec{border-top:1px solid var(--line)}
.clientes{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.cliente{display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;padding:14px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:16px;color:#4a5866}

/* ── Franja de cierre en azul de marca ── */
.cta-final{background:var(--navy)}

/* ── Cifras de texto largo (países) ── */
.cifras .g.seis .n{font-size:clamp(22px,2vw,28px)}

/* ── Pie ── */
.pie a.min{text-transform:none}
.pie .dir{display:block;padding:8px 0 0;font-size:13px;line-height:1.55}

/* ── Cotizar ── */
.contacto.cotizar{padding:72px 0 80px}
.contacto .eyebrow{font-weight:400}
.rfq{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);margin:28px 0 26px}
.rfq-cab{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.rfq-cab b{font-family:var(--display);font-weight:400;font-size:13px;color:#fff}
.rfq-cab span{font-size:13px;color:#c6d4e6}
.rfq-cab i{font-style:normal;color:var(--claro);font-weight:700}
#rfq-lista .vacia{padding:16px 18px;margin:0;font-size:14.5px}
#rfq-lista .vacia a{color:var(--claro);text-decoration:underline}
.renglon{display:grid;grid-template-columns:1fr 150px auto;gap:14px;align-items:center;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.renglon .qn b{display:block;color:#fff;font-size:14.5px;line-height:1.3}
.renglon .qn span{font-size:12px;color:#adbdd2}
.renglon .cant{font-family:var(--display);font-size:9.5px;color:#adbdd2}
.renglon .cant input{display:block;width:100%;margin-top:4px;background:#fff;border:0;padding:8px 10px;
  font:600 14px var(--texto);color:var(--navy);border-radius:2px}
.renglon .quitar{background:none;border:0;color:#c6d4e6;font:600 12.5px var(--texto);cursor:pointer;text-decoration:underline}
.rfq .mas{display:block;padding:13px 18px;font-weight:700;font-size:14px;color:var(--claro)}
.datos-contacto{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.datos-contacto a,.datos-contacto p{margin:0;color:#fff;font-weight:600;font-size:15px;line-height:1.45}
.datos-contacto span{display:block;font-family:var(--display);font-size:10px;
  color:var(--claro);margin-bottom:4px;font-weight:400}
.form .campo label{color:var(--navy)}

/* ── Botón flotante «Mi solicitud» y aviso ── */
.rfq-flotante{position:fixed;right:22px;bottom:22px;z-index:60}
.rfq-flotante a{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;
  padding:14px 20px;font-weight:700;font-size:14px;border-radius:3px;
  box-shadow:0 18px 40px -16px rgba(10,30,50,.7)}
.rfq-flotante b{background:var(--ambar);color:#10263C;min-width:24px;height:24px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;padding:0 7px}
.rfq-flotante .ico{width:14px;height:16px;border:2px solid #fff;border-top-width:4px;display:inline-block}
.aviso-rfq{position:fixed;left:50%;bottom:26px;z-index:61;transform:translate(-50%,20px);opacity:0;
  pointer-events:none;background:#10263C;color:#fff;padding:12px 20px;font-weight:600;font-size:14px;
  border-left:3px solid var(--ambar);transition:opacity .2s ease,transform .2s ease}
.aviso-rfq.ver{opacity:1;transform:translate(-50%,0)}

/* ── Megamenú: el renglón final «ver todo» ── */
.mega .lista a.todo{margin-top:6px}
.mega .lista a.todo b{color:var(--medio)}

/* ══ Responsivo ══ */
@media (max-width:1100px){
  .unidades .cab.cab-fila{grid-template-columns:1fr;gap:14px}
  .uu.seis{grid-template-columns:repeat(2,1fr)}
  .pjs{grid-template-columns:repeat(2,1fr)}
  .clientes{grid-template-columns:repeat(4,1fr)}
  .lista-servicios{grid-template-columns:repeat(2,1fr)}
  .catalogo .chips{top:80px}
}
@media (max-width:700px){
  .lockup .marca{height:40px}
  .uu.seis{grid-template-columns:1fr}
  .uu.seis .u{min-height:240px}
  .pjs{grid-template-columns:1fr}
  .clientes{grid-template-columns:repeat(2,1fr)}
  .cliente{min-height:72px;font-size:14px}
  .lista-servicios{grid-template-columns:1fr}
  .cab-cat{grid-template-columns:1fr;gap:8px}
  .catalogo .chips{position:static;flex-wrap:nowrap;overflow-x:auto;padding-bottom:12px}
  .chip{white-space:nowrap}
  .renglon{grid-template-columns:1fr auto}
  .renglon .cant{grid-column:1 / -1;grid-row:2}
  .datos-contacto{grid-template-columns:1fr}
  .contacto.cotizar{padding:48px 0 60px}
  .rfq-flotante{right:12px;bottom:12px}
  .hero.portada{min-height:auto}

}

/* El dibujo de la línea ocupa la parte de arriba de la tarjeta y el texto la de abajo:
   centrado, el dibujo se encimaba con el título (sobre todo en celular). */
.uu.seis .u{min-height:360px;background:#143857}
.uu.seis .u img{height:64%;bottom:auto;object-fit:cover;object-position:center 40%}
.uu.seis .u .velo{background:linear-gradient(180deg,rgba(20,56,87,0) 46%,#143857 66%)}
@media (max-width:700px){
  .uu.seis .u{min-height:330px}
  .datos{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  .dato b{font-size:24px}
}