/* =========================================================================
   TITÁN MEZCLADORAS — Hoja de estilos principal
   -------------------------------------------------------------------------
   Desarrollado por Just2Web (www.just2web.com)
   Proyecto: Sitio corporativo — alquiler, venta, reparación y fabricación
              de mezcladoras de concreto.
   Concepto: "Plano de taller". La paleta y las texturas están inspiradas
              en los planos técnicos de fabricación (azul plano) y en la
              señalética de un taller industrial (franjas de riesgo,
              placas remachadas, tipografía de máquina).
   Estructura: este archivo cubre variables, reset, tipografía, layout
              general y componentes compartidos por las 5 páginas.
              Cada página además trae un bloque de estilos específicos
              al final, señalado con su propio encabezado.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS DE MARCA
   ------------------------------------------------------------------------- */
:root{
  /* Azules — "azul plano" (blueprint), de más oscuro a más claro */
  --azul-950:#04121F;
  --azul-900:#0A2A4A;
  --azul-850:#0E3557;
  --azul-800:#123A5E;
  --azul-700:#184B78;
  --azul-600:#1F5D93;
  --azul-500:#2E77B4;
  --azul-line:#5B9BD1;      /* líneas de plano sobre fondo oscuro */

  /* Neutros de obra */
  --acero-300:#AEBAC4;      /* texto secundario sobre azul oscuro */
  --acero-200:#CBD3D9;
  --concreto-100:#EFEDE6;   /* fondo claro, tono "concreto crudo" */
  --concreto-200:#E1DDD1;
  --concreto-300:#C9C3B2;
  --tinta:#0E1418;          /* texto sobre fondo claro */
  --blanco:#F7F7F5;

  /* Acentos de señalética de taller */
  --naranja:#E07B0F;
  --naranja-dark:#B4620C;
  --amarillo:#F0B429;

  /* Tipografía */
  --f-display:'Oswald', 'Arial Narrow', sans-serif;
  --f-body:'Barlow', 'Segoe UI', sans-serif;
  --f-mono:'JetBrains Mono', 'Consolas', monospace;

  /* Ritmo */
  --radio:2px;
  --borde:1px solid rgba(255,255,255,0.12);
  --borde-claro:1px solid rgba(14,20,24,0.14);
  --sombra-placa: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(4,18,31,0.35);
  --franja-h:12px;
  --max:1240px;
}

/* -------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; }
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
table{ border-collapse:collapse; width:100%; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
body{
  font-family:var(--f-body);
  background:var(--concreto-100);
  color:var(--tinta);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-weight:600;
  line-height:1.08;
}

.envoltura{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

.ojo-de-texto{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--naranja-dark);
}
.ojo-de-texto::before{
  content:"";
  width:22px; height:2px;
  background:var(--naranja);
  display:inline-block;
}
.claro .ojo-de-texto{ color:var(--amarillo); }
.claro .ojo-de-texto::before{ background:var(--amarillo); }

.enfoque:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--amarillo);
  outline-offset:2px;
}

/* -------------------------------------------------------------------------
   4. FONDO DE PLANO (grilla de plano técnico) — elemento de firma
   ------------------------------------------------------------------------- */
.fondo-plano{
  background-color:var(--azul-900);
  background-image:
    linear-gradient(rgba(91,155,209,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,209,0.14) 1px, transparent 1px),
    linear-gradient(rgba(91,155,209,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,209,0.06) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position:-1px -1px;
}

/* Franja de riesgo (marca de taller) */
.franja-riesgo{
  height:var(--franja-h);
  background-image:repeating-linear-gradient(135deg,
    var(--azul-950) 0 18px,
    var(--amarillo) 18px 36px);
}

/* -------------------------------------------------------------------------
   5. PLACA REMACHADA — componente de firma (badges, marca, cajas de dato)
   ------------------------------------------------------------------------- */
.placa{
  position:relative;
  background:linear-gradient(180deg, var(--azul-800), var(--azul-850));
  border:1px solid rgba(91,155,209,0.35);
  box-shadow:var(--sombra-placa);
  padding:18px 20px;
}
.placa::before, .placa::after,
.placa .remache-tl, .placa .remache-br{
  content:"";
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #DCE6EE, #7C8B96 60%, #47535C 100%);
  box-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.placa::before{ top:7px; left:7px; }
.placa::after{ bottom:7px; right:7px; }
.placa .remache-tl{ top:7px; right:7px; }
.placa .remache-br{ bottom:7px; left:7px; }

.placa-clara{
  background:linear-gradient(180deg, #FFFFFF, var(--concreto-100));
  border:1px solid var(--concreto-300);
  box-shadow:0 10px 24px rgba(14,20,24,0.08);
}

/* Corte de esquina tipo etiqueta de herramienta */
.esquina-cortada{
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.esquina-cortada-inv{
  clip-path:polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}

/* -------------------------------------------------------------------------
   6. BOTONES
   ------------------------------------------------------------------------- */
.boton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.boton:hover{ transform:translateY(-2px); }
.boton:active{ transform:translateY(0); }

.boton-primario{
  background:var(--naranja);
  color:var(--azul-950);
}
.boton-primario:hover{ background:var(--amarillo); }

.boton-secundario{
  background:transparent;
  border-color:rgba(255,255,255,0.4);
  color:var(--blanco);
}
.boton-secundario:hover{ border-color:var(--amarillo); color:var(--amarillo); }

.claro .boton-secundario{
  border-color:rgba(14,20,24,0.35);
  color:var(--tinta);
}
.claro .boton-secundario:hover{ border-color:var(--azul-700); color:var(--azul-700); }

.boton-bloque{ width:100%; justify-content:center; }
.boton-chico{ padding:10px 16px; font-size:11px; }

/* -------------------------------------------------------------------------
   7. ENCABEZADO / NAVEGACIÓN
   ------------------------------------------------------------------------- */
.barra-superior{
  background:var(--azul-950);
  color:var(--acero-300);
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.04em;
}
.barra-superior .envoltura{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:8px;
  padding-bottom:8px;
  overflow-x:auto;
}
.barra-superior a{ color:var(--amarillo); }
.barra-superior .item-tel{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.barra-superior .item-horario{ white-space:nowrap; }

.encabezado{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--azul-900);
  border-bottom:1px solid rgba(91,155,209,0.25);
}
.encabezado .envoltura{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:76px;
}

.marca{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--blanco);
}
.marca img{ width:44px; height:44px; }
.marca .nombre{
  font-family:var(--f-display);
  font-size:20px;
  letter-spacing:0.06em;
  line-height:1;
}
.marca .nombre span{ color:var(--amarillo); }
.marca .lema{
  display:block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--acero-300);
  text-transform:uppercase;
  margin-top:3px;
}

.nav-principal{ display:none; }
.nav-principal ul{ display:flex; gap:2px; }
.nav-principal a{
  display:block;
  padding:10px 16px;
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--acero-300);
  border-bottom:2px solid transparent;
}
.nav-principal a:hover, .nav-principal a[aria-current="page"]{
  color:var(--blanco);
  border-color:var(--naranja);
}

.nav-acciones{ display:flex; align-items:center; gap:14px; }
.nav-acciones .boton{ display:none; }

.boton-menu{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  background:transparent;
  border:1px solid rgba(91,155,209,0.4);
}
.boton-menu span{ height:2px; background:var(--blanco); display:block; }

.menu-movil{
  display:none;
  background:var(--azul-850);
  border-top:1px solid rgba(91,155,209,0.25);
}
.menu-movil.abierto{ display:block; }
.menu-movil ul{ padding:8px 20px 18px; }
.menu-movil a{
  display:block;
  padding:13px 4px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--acero-200);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.menu-movil a[aria-current="page"]{ color:var(--amarillo); }
.menu-movil .boton{ margin-top:14px; }

@media (min-width:960px){
  .nav-principal{ display:block; }
  .nav-acciones .boton{ display:inline-flex; }
  .boton-menu{ display:none; }
  .menu-movil{ display:none !important; }
}

/* -------------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--blanco);
  padding:64px 0 72px;
}
option{
  color: black;
}
.hero .envoltura{
  position:relative;
  z-index:2;
  display:grid;
  gap:40px;
}
.hero-texto{ max-width:640px; }
.hero-texto .ojo-de-texto{ margin-bottom:18px; }
.hero-texto h1{
  font-size:clamp(2.1rem, 6vw, 3.6rem);
  color:var(--blanco);
  margin-bottom:20px;
}
.hero-texto h1 em{
  font-style:normal;
  color:var(--amarillo);
}
.hero-texto p{
  font-size:17px;
  color:var(--acero-300);
  max-width:52ch;
  margin-bottom:30px;
}
.hero-acciones{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-ilustracion{
  position:relative;
  z-index:2;
  justify-self:center;
  width:100%;
  max-width:420px;
}
.hero-ilustracion svg{ width:100%; height:auto; }
.giro-lento{ animation:girar 22s linear infinite; transform-origin:203px 205px; }
@keyframes girar{ to{ transform:rotate(360deg); } }

@media (min-width:960px){
  .hero{ padding:96px 0 110px; }
  .hero .envoltura{ grid-template-columns:1.1fr 0.9fr; align-items:center; }
  .hero-ilustracion{ max-width:none; }
}

/* -------------------------------------------------------------------------
   9. BANDA DE ESTADÍSTICAS (placas)
   ------------------------------------------------------------------------- */
.banda-cifras{ background:var(--azul-950); padding:0 0 46px; margin-top:-46px; position:relative; z-index:3; }
.rejilla-cifras{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cifra{ text-align:left; }
.cifra .num{
  font-family:var(--f-display);
  font-size:clamp(1.9rem, 5vw, 2.6rem);
  color:var(--amarillo);
  line-height:1;
}
.cifra .rot{
  display:block;
  margin-top:8px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--acero-300);
  text-transform:uppercase;
}
@media (min-width:720px){
  .rejilla-cifras{ grid-template-columns:repeat(4,1fr); gap:16px; }
}

/* -------------------------------------------------------------------------
   10. SECCIONES GENERALES
   ------------------------------------------------------------------------- */
.seccion{ padding:70px 0; }
.seccion-oscura{ background:var(--azul-900); color:var(--blanco); }
.seccion-plano{ color:var(--blanco); }
.encab-seccion{ max-width:640px; margin-bottom:44px; }
.encab-seccion h2{ font-size:clamp(1.7rem,4vw,2.3rem); margin-top:14px; }
.seccion-oscura .encab-seccion h2, .seccion-plano .encab-seccion h2{ color:var(--blanco); }
.encab-seccion p{ margin-top:14px; color:#4B5560; max-width:56ch; }
.seccion-oscura .encab-seccion p, .seccion-plano .encab-seccion p{ color:var(--acero-300); }

.encab-seccion.centro{ margin-left:auto; margin-right:auto; text-align:center; }
.encab-seccion.centro p{ margin-left:auto; margin-right:auto; }

/* -------------------------------------------------------------------------
   11. TARJETAS DE SERVICIO
   ------------------------------------------------------------------------- */
.rejilla-servicios{ display:grid; gap:18px; grid-template-columns:1fr; }
.tarjeta-servicio{
  background:var(--blanco);
  border:var(--borde-claro);
  padding:28px 24px;
  position:relative;
}
.tarjeta-servicio .num{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--naranja-dark);
  letter-spacing:0.1em;
}
.tarjeta-servicio .icono{ width:46px; height:46px; margin:16px 0 18px; color:var(--azul-700); }
.tarjeta-servicio h3{ font-size:19px; margin-bottom:10px; color:var(--azul-950); }
.tarjeta-servicio p{ color:#4B5560; font-size:14.5px; }
@media (min-width:640px){ .rejilla-servicios{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .rejilla-servicios{ grid-template-columns:repeat(4,1fr); } }

/* -------------------------------------------------------------------------
   12. LISTA "POR QUÉ ELEGIRNOS"
   ------------------------------------------------------------------------- */
.lista-ventajas{ display:grid; gap:0; }
.lista-ventajas li{
  display:flex;
  gap:16px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.12);
}
.lista-ventajas li:last-child{ border-bottom:1px solid rgba(255,255,255,0.12); }
.lista-ventajas .marcador{
  font-family:var(--f-mono);
  color:var(--amarillo);
  font-size:13px;
  flex:none;
  width:28px;
}
.lista-ventajas h4{ font-size:15.5px; color:var(--blanco); margin-bottom:5px; text-transform:none; letter-spacing:0; }
.lista-ventajas p{ color:var(--acero-300); font-size:14px; }

/* -------------------------------------------------------------------------
   13. CTA FRANJA
   ------------------------------------------------------------------------- */
.cta-franja{
  background:var(--azul-950);
  position:relative;
  padding:52px 0;
  overflow:hidden;
}
.cta-franja .contenido{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:flex-start;
}
.cta-franja h2{ color:var(--blanco); font-size:clamp(1.5rem,4vw,2rem); max-width:16ch; }
.cta-franja p{ color:var(--acero-300); max-width:48ch; }
.cta-franja .acciones{ display:flex; flex-wrap:wrap; gap:14px; }
@media (min-width:860px){
  .cta-franja .contenido{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* -------------------------------------------------------------------------
   14. PIE DE PÁGINA
   ------------------------------------------------------------------------- */
.pie{ background:var(--azul-950); color:var(--acero-300); padding:56px 0 0; }
.pie-rejilla{ display:grid; gap:38px; grid-template-columns:1fr; padding-bottom:44px; }
.pie h5{
  font-family:var(--f-mono);
  color:var(--blanco);
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.pie-marca .marca{ margin-bottom:14px; }
.pie-marca p{ font-size:14px; max-width:38ch; }
.pie-lista li{ margin-bottom:10px; font-size:14px; }
.pie-lista a:hover{ color:var(--amarillo); }
.pie-contacto li{ margin-bottom:12px; font-size:14px; display:flex; gap:10px; }
.pie-contacto svg{ flex:none; width:18px; height:18px; margin-top:2px; color:var(--naranja); }
.pie-social{ display:flex; gap:10px; margin-top:16px; }
.pie-social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(91,155,209,0.35);
}
.pie-social a:hover{ border-color:var(--amarillo); }
.pie-social svg{ width:18px; height:18px; }

.pie-base{
  border-top:1px solid rgba(255,255,255,0.1);
  padding:18px 0 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:12.5px;
  font-family:var(--f-mono);
}
.pie-base .firma{ color:var(--acero-300); }
.pie-base .firma a{ color:var(--amarillo); }
@media (min-width:720px){
  .pie-rejilla{ grid-template-columns:1.3fr 1fr 1fr 1.2fr; }
  .pie-base{ flex-direction:row; justify-content:space-between; }
}

/* -------------------------------------------------------------------------
   15. UTILIDADES
   ------------------------------------------------------------------------- */
.solo-lectura-pantalla{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.migas{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--acero-300);
  display:flex; gap:8px; flex-wrap:wrap;
}
.migas a:hover{ color:var(--amarillo); }
.banda-migas{ background:var(--azul-950); padding:16px 0; }

.encab-pagina{ padding:54px 0 40px; color:var(--blanco); }
.encab-pagina h1{ font-size:clamp(2rem,5.5vw,2.9rem); margin-top:14px; max-width:18ch; }
.encab-pagina p{ margin-top:16px; color:var(--acero-300); max-width:56ch; }

/* =========================================================================
   16. PÁGINA NOSOTROS
   ========================================================================= */
.bloque-historia{ display:grid; gap:36px; }
.bloque-historia .texto p{ margin-bottom:16px; color:#4B5560; }
.bloque-historia .texto p:first-child{
  font-family:var(--f-display);
  font-size:20px;
  color:var(--azul-950);
  text-transform:none;
  letter-spacing:0;
  line-height:1.4;
}
.icono{
  filter: brightness(0) invert(1);
}
@media (min-width:960px){
  .bloque-historia{ grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
}

.linea-tiempo{ position:relative; padding-left:26px; border-left:2px solid rgba(255,255,255,0.18); }
.hito{ position:relative; padding-bottom:36px; }
.hito:last-child{ padding-bottom:0; }
.hito::before{
  content:"";
  position:absolute; left:-32px; top:2px;
  width:12px; height:12px;
  background:var(--amarillo);
  border:3px solid var(--azul-900);
}
.hito .anio{ font-family:var(--f-mono); color:var(--amarillo); font-size:13px; letter-spacing:0.08em; }
.hito h4{ color:var(--negro); font-size:16.5px; margin:6px 0 6px; text-transform:none; letter-spacing:0; }
.hito p{ color:var(--acero-600); font-size:14px; max-width:52ch; }

.rejilla-valores{ display:grid; gap:16px; grid-template-columns:1fr; }
.valor{ padding:26px 22px; }
.valor h4{ color:var(--Blanco); font-size:16px; margin:14px 0 8px; text-transform:none; letter-spacing:0; }
.valor p{ color:#ffffff; font-size:14px; }
.valor .icono{ width:34px; height:34px; color:var(--naranja-dark); }
@media (min-width:720px){ .rejilla-valores{ grid-template-columns:repeat(3,1fr); } }

.rejilla-taller{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.dato-taller .num{ font-family:var(--f-display); font-size:clamp(1.7rem,4vw,2.3rem); color:var(--amarillo); }
.dato-taller .rot{ font-family:var(--f-mono); font-size:11px; color:var(--acero-300); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-top:6px; }
@media (min-width:720px){ .rejilla-taller{ grid-template-columns:repeat(4,1fr); } }

/* =========================================================================
   17. PÁGINA PORTAFOLIO
   ========================================================================= */
.filtros{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.filtro{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:10px 16px;
  background:transparent;
  border:1px solid rgba(14,20,24,0.2);
  color:#4B5560;
}
.filtro[aria-pressed="true"]{
  background:var(--azul-900);
  border-color:var(--azul-900);
  color:var(--blanco);
}
.filtro:hover{ border-color:var(--azul-700); }

.rejilla-portafolio{ display:grid; gap:20px; grid-template-columns:1fr; }
.tarjeta-obra{
  background:var(--blanco);
  border:var(--borde-claro);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.tarjeta-obra .visual{
  position:relative;
  aspect-ratio:4/3;
  background-color:var(--azul-900);
  background-image:
    linear-gradient(rgba(91,155,209,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,209,0.16) 1px, transparent 1px);
  background-size:22px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tarjeta-obra .visual svg{ width:44%; height:44%; color:var(--azul-line); }
.tarjeta-obra .etiqueta{
  position:absolute;
  top:12px; left:12px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--naranja);
  color:var(--azul-950);
  padding:5px 10px;
}
.tarjeta-obra .cuerpo{ padding:22px; flex:1; display:flex; flex-direction:column; }
.tarjeta-obra .lugar{ font-family:var(--f-mono); font-size:11.5px; color:var(--naranja-dark); letter-spacing:0.05em; text-transform:uppercase; }
.tarjeta-obra h3{ font-size:17px; color:var(--azul-950); margin:10px 0 8px; text-transform:none; letter-spacing:0; }
.tarjeta-obra p{ color:#4B5560; font-size:14px; flex:1; }
.tarjeta-obra .meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--concreto-200);
  font-family:var(--f-mono); font-size:11.5px; color:#5A6470;
}
@media (min-width:720px){ .rejilla-portafolio{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .rejilla-portafolio{ grid-template-columns:repeat(3,1fr); } }

/* =========================================================================
   18. PÁGINA PRODUCTOS
   ========================================================================= */
.rejilla-productos{ display:grid; gap:20px; grid-template-columns:1fr; }
.tarjeta-producto{
  background:var(--blanco);
  border:var(--borde-claro);
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.tarjeta-producto:hover{ box-shadow:0 16px 30px rgba(10,42,74,0.14); transform:translateY(-3px); }
.tarjeta-producto .visual{
  position:relative;
  aspect-ratio:4/3;
  background-color:var(--azul-900);
  background-image:
    linear-gradient(rgba(91,155,209,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,209,0.16) 1px, transparent 1px);
  background-size:22px 22px;
  display:flex; align-items:center; justify-content:center;
}
.tarjeta-producto .visual svg{ width:56%; height:56%; color:var(--azul-line); }
.tarjeta-producto .badges{ position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; }
.badge{
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 9px;
  background:rgba(4,18,31,0.75);
  color:var(--amarillo);
  border:1px solid rgba(240,180,41,0.4);
}
.badge.venta{ color:#8FD0A8; border-color:rgba(143,208,168,0.4); }
.badge.fabricacion{ color:#F2A6A6; border-color:rgba(242,166,166,0.4); }
.tarjeta-producto .cuerpo{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tarjeta-producto .cat{ font-family:var(--f-mono); font-size:11px; color:var(--naranja-dark); text-transform:uppercase; letter-spacing:0.06em; }
.tarjeta-producto h3{ font-size:18px; color:var(--azul-950); text-transform:none; letter-spacing:0; }
.tarjeta-producto .specs-mini{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12px; color:#5A6470; }
.tarjeta-producto .pie-tarjeta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; }
.tarjeta-producto .precio{ font-family:var(--f-mono); font-size:13px; color:var(--azul-800); }
.tarjeta-producto .precio strong{ font-size:16px; }

@media (min-width:640px){ .rejilla-productos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .rejilla-productos{ grid-template-columns:repeat(3,1fr); } }

/* =========================================================================
   19. PÁGINA PRODUCTO (detalle)
   ========================================================================= */
.detalle-producto{ display:grid; gap:34px; grid-template-columns:1fr; }
.detalle-visual{
  position:relative;
  background-color:var(--azul-900);
  background-image:
    linear-gradient(rgba(91,155,209,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,209,0.16) 1px, transparent 1px);
  background-size:26px 26px;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(91,155,209,0.3);
}
.detalle-visual svg{ width:62%; height:62%; color:var(--azul-line); }
.detalle-visual .cota{
  position:absolute;
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--acero-300);
  letter-spacing:0.04em;
}
.detalle-visual .cota-a{ bottom:14px; left:14px; }
.detalle-visual .cota-b{ top:14px; right:14px; }

.detalle-info .cat{ font-family:var(--f-mono); font-size:12px; color:var(--naranja-dark); text-transform:uppercase; letter-spacing:0.08em; }
.detalle-info h1{ color:var(--azul-950); font-size:clamp(1.7rem,4.5vw,2.4rem); margin:12px 0 14px; }
.detalle-info .badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.detalle-info .badges .badge{ background:var(--azul-900); }
.detalle-info .descripcion{ color:#4B5560; margin-bottom:24px; }
.detalle-info .acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px; }

.tabla-specs{ margin-top:12px; }
.tabla-specs h2{ font-size:15px; color:var(--azul-950); margin-bottom:14px; }
.tabla-specs table{ font-family:var(--f-mono); font-size:13.5px; }
.tabla-specs tr{ border-bottom:1px solid var(--concreto-200); }
.tabla-specs td{ padding:11px 4px; color:#3D4650; }
.tabla-specs td:first-child{ color:#8A93A0; width:46%; text-transform:uppercase; font-size:11.5px; letter-spacing:0.04em; }
.tabla-specs td:last-child{ text-align:right; color:var(--azul-950); font-weight:600; }

@media (min-width:900px){
  .detalle-producto{ grid-template-columns:1fr 1fr; align-items:start; }
}

.rejilla-relacionados{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:22px; }
@media (min-width:640px){ .rejilla-relacionados{ grid-template-columns:repeat(3,1fr); } }

.aviso-vacio{ padding:40px 24px; text-align:center; }
.aviso-vacio p{ color:var(--acero-300); margin-top:10px; }

/* =========================================================================
   20. FORMULARIO DE COTIZACIÓN
   ========================================================================= */
.panel-cotizar{ display:grid; gap:30px; grid-template-columns:1fr; }
.form-cotizar{ display:grid; gap:14px; }
.campo{ display:grid; gap:6px; }
.campo label{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--acero-300);
}
.campo input, .campo select, .campo textarea{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(91,155,209,0.35);
  color:var(--blanco);
  padding:13px 14px;
  font-family:var(--f-body);
  font-size:14.5px;
}
.campo textarea{ resize:vertical; min-height:96px; }
.campo input::placeholder, .campo textarea::placeholder{ color:#6E7C89; }
.campo .error{ font-family:var(--f-mono); font-size:11.5px; color:var(--amarillo); min-height:14px; }
.fila-campos{ display:grid; gap:14px; }
@media (min-width:600px){ .fila-campos{ grid-template-columns:1fr 1fr; } }
.mensaje-envio{
  display:none;
  padding:14px 16px;
  border:1px solid rgba(143,208,168,0.4);
  color:#8FD0A8;
  font-family:var(--f-mono);
  font-size:13px;
}
.mensaje-envio.visible{ display:block; }

@media (min-width:960px){ .panel-cotizar{ grid-template-columns:0.9fr 1.1fr; align-items:start; } }