/* ============================================
   TAC - Tubos y Aditamentos del Centro
   Hoja de estilos compartida (Fase 2)
   Identidad: negro #0a0a0a / naranja #FF530C
   ============================================ */

:root{
  --tac-orange: #FF530C;
  --tac-orange-dark: #d94500;
  --tac-black: #0a0a0a;
  --tac-black-soft: #141414;
  --tac-gray-900: #1c1c1c;
  --tac-gray-100: #f4f4f4;
  --tac-gray-300: #d8d8d8;
  --tac-white: #ffffff;
  --radius: 6px;
  --maxw: 1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  color:var(--tac-black);
  background:var(--tac-white);
  line-height:1.5;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0 0 .5em 0; font-weight:800; letter-spacing:.2px;}
p{margin:0 0 1em 0;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.orange{color:var(--tac-orange);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:4px; font-weight:700;
  font-size:.95rem; cursor:pointer; border:2px solid transparent;
  transition:all .15s ease;
}
.btn-primary{background:var(--tac-orange); color:#fff;}
.btn-primary:hover{background:var(--tac-orange-dark);}
.btn-outline{background:transparent; color:#fff; border-color:#fff;}
.btn-outline:hover{background:#fff; color:var(--tac-black);}
.btn-outline-dark{background:transparent; color:var(--tac-black); border-color:var(--tac-black);}
.btn-outline-dark:hover{background:var(--tac-black); color:#fff;}

/* ---------- HEADER ---------- */
.site-header{
  background:var(--tac-black);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid #262626;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:24px;
}
.logo-wrap{display:flex; align-items:center; gap:12px; color:#fff;}
.logo-badge{
  width:46px; height:46px; border-radius:50%;
  border:3px solid var(--tac-orange);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.95rem; letter-spacing:1px;
  flex:none;
}
.logo-text{line-height:1.15;}
.logo-text strong{display:block; font-size:1rem; font-weight:800;}
.logo-text span{display:block; font-size:.68rem; letter-spacing:.5px; color:#c9c9c9;}
.main-nav{display:flex; align-items:center; gap:28px; flex:1; justify-content:center;}
.main-nav a{
  color:#e6e6e6; font-weight:700; font-size:.85rem; letter-spacing:.3px;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a.active, .dd-trigger.active{color:#fff; border-color:var(--tac-orange);}

/* ---------- Dropdowns (Productos / Soluciones) ---------- */
.has-dropdown{position:relative;}
.has-dropdown > .dd-trigger{
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  color:#e6e6e6; font-weight:700; font-size:.85rem; letter-spacing:.3px; font-family:inherit;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.has-dropdown > .dd-trigger .chev{font-size:.65rem; transition:transform .15s ease;}
.has-dropdown:hover > .dd-trigger, .has-dropdown.open > .dd-trigger{color:#fff; border-color:var(--tac-orange);}
.has-dropdown.open > .dd-trigger .chev{transform:rotate(180deg);}
.dropdown-menu{
  display:none; position:absolute; top:100%; left:0; margin-top:14px;
  background:#151515; border:1px solid #2a2a2a; border-radius:6px; padding:10px;
  min-width:230px; box-shadow:0 12px 28px rgba(0,0,0,.4); z-index:200;
}
.has-dropdown:hover .dropdown-menu, .has-dropdown.open .dropdown-menu{display:block;}
.dropdown-menu a{
  display:block; padding:9px 12px; border-radius:4px; font-size:.82rem; font-weight:600;
  color:#d8d8d8; border-bottom:none;
}
.dropdown-menu a:hover{background:#252525; color:#fff;}
.dropdown-menu .dd-divider{border-top:1px solid #2a2a2a; margin:8px 4px;}
.dropdown-menu .dd-all{color:var(--tac-orange); font-weight:800;}

@media (max-width:900px){
  .dropdown-menu{
    position:static; display:block; box-shadow:none; border:none; background:transparent;
    margin-top:4px; padding:0 0 0 14px; min-width:0;
  }
  .has-dropdown .dropdown-menu{display:none;}
  .has-dropdown.open .dropdown-menu{display:block;}
}
.header-cta{flex:none;}
.nav-toggle{display:none;}

@media (max-width: 900px){
  .main-nav{display:none;}
  .nav-toggle{
    display:flex; background:none; border:1px solid #444; color:#fff;
    padding:8px 12px; border-radius:4px; font-weight:700; font-size:.8rem;
  }
}

/* Fix: desbordamiento horizontal en móvil (header no cabía en <=480px) */
@media (max-width: 480px){
  .site-header .container{gap:8px; padding-left:14px; padding-right:14px;}
  .logo-badge{width:38px; height:38px; font-size:.8rem; border-width:2px;}
  .logo-text{display:none;}
  .nav-toggle{padding:7px 10px; font-size:.72rem;}
  .header-cta.btn{padding:9px 12px; font-size:.72rem;}
}

/* ---------- HERO GENERIC ---------- */
.hero-section{
  background:var(--tac-black); color:#fff; padding:64px 0;
}
.eyebrow{
  color:var(--tac-orange); font-weight:800; letter-spacing:1.5px;
  font-size:.78rem; text-transform:uppercase; margin-bottom:10px; display:block;
}
.hero-section h1{font-size:2.4rem; max-width:760px;}
.hero-section .lead{color:#cfcfcf; max-width:640px; font-size:1.02rem;}

/* ---------- LINE / CATEGORY HERO (photo bg) ---------- */
.line-hero{
  position:relative; color:#fff; min-height:340px;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.line-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.92) 15%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%);
}
.line-hero .container{position:relative; padding-top:60px; padding-bottom:40px;}
.line-hero h1{font-size:2.2rem; margin-bottom:12px;}
.line-hero .lead{max-width:600px; color:#e6e6e6;}
.breadcrumb{font-size:.8rem; color:#c9c9c9; margin-bottom:18px;}
.breadcrumb a{color:#c9c9c9;}
.breadcrumb a:hover{color:var(--tac-orange);}

/* ---------- SECTIONS ---------- */
.section{padding:56px 0;}
.section-dark{background:var(--tac-black); color:#fff;}
.section-gray{background:var(--tac-gray-100);}
.section-title{font-size:1.7rem; margin-bottom:6px;}
.section-sub{color:#666; max-width:640px;}
.section-dark .section-sub{color:#c9c9c9;}
.underline{
  width:56px; height:3px; background:var(--tac-orange); margin:14px 0 22px 0; border:none;
}

/* ---------- CATALOG GRID (productos.html) ---------- */
.catalog-toolbar{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin-bottom:30px;
}
.search-box{
  flex:1; min-width:240px; position:relative;
}
.search-box input{
  width:100%; padding:13px 16px 13px 42px; border-radius:4px;
  border:1px solid #ccc; font-size:.95rem; background:#fff;
}
.search-box input:focus{outline:2px solid var(--tac-orange); border-color:var(--tac-orange);}
.search-box::before{
  content:"\1F50D"; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  opacity:.55; font-size:.9rem;
}
.result-count{font-size:.82rem; color:#666; margin-bottom:16px;}

.lines-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media(max-width:1000px){.lines-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.lines-grid{grid-template-columns:1fr;}}

.line-card{
  background:#fff; border:1px solid #e4e4e4; border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s ease, transform .15s ease;
}
.line-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-2px);}
.line-card .thumb{
  height:130px; background-size:cover; background-position:center; position:relative;
}
.line-card .thumb::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.28);}
.line-card .body{padding:16px 18px; flex:1; display:flex; flex-direction:column;}
.line-card h3{font-size:1.02rem; margin-bottom:6px;}
.line-card p{font-size:.83rem; color:#666; flex:1;}
.line-card .go{
  font-size:.8rem; font-weight:800; color:var(--tac-orange); margin-top:8px;
}
.line-card.hidden{display:none;}

/* product match chips when searching */
.match-hits{font-size:.75rem; color:#888; margin-top:6px;}
.match-hits strong{color:var(--tac-orange);}

/* ---------- SUBCATEGORY BLOCKS (linea.html) ---------- */
.subcat{
  border:1px solid #e6e6e6; border-radius:var(--radius); padding:22px 24px; margin-bottom:18px;
  background:#fff;
}
.subcat h3{font-size:1.08rem; margin-bottom:6px;}
.subcat .desc{color:#555; font-size:.92rem; margin-bottom:14px;}
.chip-list{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  background:var(--tac-gray-100); border:1px solid #e2e2e2; border-radius:20px;
  padding:7px 14px; font-size:.82rem; color:#333;
}
.chip.has-ficha{background:#fff3ec; border-color:var(--tac-orange); color:var(--tac-orange-dark); font-weight:700; cursor:pointer;}

/* ---------- CTA STRIP ---------- */
.cta-strip{
  background:var(--tac-orange); color:#fff; padding:34px 0; text-align:center;
}
.cta-strip h3{font-size:1.3rem; margin-bottom:6px;}
.cta-strip .btn-outline{border-color:#fff;}

/* ---------- FORM (cotizacion.html) ---------- */
.form-card{
  background:#fff; border:1px solid #e6e6e6; border-radius:var(--radius);
  padding:32px; max-width:720px; margin:0 auto;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:.82rem; font-weight:700; color:#333;}
.field input, .field select, .field textarea{
  padding:11px 13px; border:1px solid #ccc; border-radius:4px; font-size:.92rem;
  font-family:inherit;
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--tac-orange); border-color:var(--tac-orange);
}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}
.contact-alt{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid #eee;
  font-size:.85rem; color:#555;
}
.contact-alt a{color:var(--tac-orange); font-weight:700;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--tac-black); color:#c9c9c9; padding:40px 0 20px 0; font-size:.85rem;}
.footer-grid{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; margin-bottom:26px;}
.footer-col h4{color:#fff; font-size:.9rem; margin-bottom:10px;}
.footer-col a{display:block; color:#c9c9c9; margin-bottom:6px;}
.footer-col a:hover{color:var(--tac-orange);}
.footer-bottom{
  border-top:1px solid #262626; padding-top:16px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:8px; color:#8a8a8a; font-size:.78rem;
}

/* utility */
.flex-between{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.mt-0{margin-top:0;}
.hidden-future{display:none !important;} /* usado para elementos de fichas técnicas aún no habilitados */