/* =====================================================================
   INICIO - Transportes Ceacero
   Versión: 110626  ·  Carga: is_front_page()
   Requiere style.css (variables + componentes compartidos)
   ===================================================================== */

/*---------- HERO ------------*/
body .tc-hero{ position:relative; padding:150px 0 140px; background-color:var(--tc-azul-osc); background-image:linear-gradient(100deg,rgba(8,22,46,.34) 0%,rgba(8,22,46,.10) 42%,rgba(8,22,46,0) 68%),url("/imagenes/inicio/ceacero-hero.webp"); background-size:cover; background-position:center right; color:var(--tc-blanco); }
body .tc-hero-panel{ display:inline-block; max-width:640px; background:rgba(14,37,72,.48); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:40px 42px; box-shadow:0 18px 50px rgba(8,22,46,.28); }
body .tc-hero-titulo{ color:var(--tc-blanco); font-size:50px; font-weight:800; margin:0 0 16px; text-shadow:0 2px 14px rgba(8,22,46,.4); }
body .tc-hero-sub{ color:rgba(255,255,255,.95); font-size:20px; margin:0 0 30px; text-shadow:0 1px 10px rgba(8,22,46,.35); }
body .tc-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/*---------- HERO · responsive ------------*/
@media (max-width:959px){
body .tc-hero{ padding:110px 0 100px; background-position:center; }
body .tc-hero-panel{ padding:34px 34px; }
body .tc-hero-titulo{ font-size:38px; }
body .tc-hero-sub{ font-size:18px; }
}
@media (max-width:767px){
body .tc-hero{ padding:74px 0 66px; text-align:center; }
body .tc-hero-panel{ display:block; max-width:100%; padding:28px 24px; }
body .tc-hero-titulo{ font-size:29px; }
body .tc-hero-sub{ font-size:16px; }
body .tc-hero-cta{ justify-content:center; }
body .tc-hero-cta .tc-btn{ width:100%; max-width:340px; }
}

/*---------- BLOQUE PALETERÍA EXPRÉS (PALIBEX) ------------*/
body .tc-palibex{ background:var(--tc-azul); color:var(--tc-blanco); }
body .tc-palibex .tc-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
body .tc-palibex h2{ color:var(--tc-blanco); font-size:34px; margin:0 0 16px; }
body .tc-palibex p{ color:rgba(255,255,255,.9); font-size:18px; margin:0 0 12px; }
body .tc-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--tc-amarillo); color:var(--tc-azul-osc); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 14px; border-radius:50px; margin:0 0 18px; }
body .tc-palibex-lista{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
body .tc-palibex-lista li{ display:flex; align-items:flex-start; gap:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px 18px; font-size:16px; }
body .tc-palibex-lista li .tc-ico{ color:var(--tc-amarillo); width:26px; height:26px; flex:0 0 auto; }
body .tc-nota{ display:block; margin-top:18px; font-size:13px; color:rgba(255,255,255,.6); }

/*---------- PALIBEX · responsive ------------*/
@media (max-width:959px){
body .tc-palibex .tc-wrap{ grid-template-columns:1fr; gap:30px; }
body .tc-palibex h2{ font-size:29px; }
}
@media (max-width:767px){
body .tc-palibex{ text-align:center; }
body .tc-badge{ margin-left:auto; margin-right:auto; }
body .tc-palibex-lista li{ text-align:left; }
}

/*---------- BLOQUE CÓMO TRABAJAMOS ------------*/
body .tc-pasos-sec{ background:var(--tc-blanco); }
body .tc-pasos{ list-style:none; counter-reset:paso; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
body .tc-pasos li{ counter-increment:paso; position:relative; padding:30px 24px; border:1px solid var(--tc-gris-borde); border-radius:var(--tc-radio); }
body .tc-pasos li::before{ content:counter(paso); display:flex; align-items:center; justify-content:center; width:46px; height:46px; background:var(--tc-azul); color:var(--tc-blanco); font-weight:800; font-size:20px; border-radius:50%; margin-bottom:16px; }
body .tc-pasos li h3{ font-size:19px; margin:0 0 8px; }
body .tc-pasos li p{ color:var(--tc-texto-suave); font-size:15px; margin:0; }

/*---------- CÓMO TRABAJAMOS · responsive ------------*/
@media (max-width:959px){
body .tc-pasos{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
body .tc-pasos{ grid-template-columns:1fr; }
body .tc-pasos li{ text-align:center; }
body .tc-pasos li::before{ margin-left:auto; margin-right:auto; }
}