/* ===== Paleta ===== */
:root{
  --red:#c61b24;
  --blue:#2f507d;
  --dark:#212427;
  --ink:#0d0f11;
  --text:#e9eaec;
  --muted:#9aa3ad;
  --paper:#ffffff;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:Helios, "Helvetica Neue", Arial, system-ui, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{ width:min(1160px,92%); margin-inline:auto }

.headline,.section__title,.brand__wordmark{ font-family:"Anton"; letter-spacing:.2rem; }

/* ===== Header ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  background:rgba(33,36,39,.7); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
}
.brand__logo {
  height: 50px; /* Adjust as needed */
  width: auto;
  display: block;
}

.nav{ display:flex; align-items:center; gap:20px }
.nav a{ opacity:.9 }
.nav a:hover{ opacity:1 }

.btn{
  display:inline-block; border-radius:999px; padding:10px 16px; font-weight:700;
  border:2px solid transparent; transition:.2s ease;
}
.btn--primary{ background:var(--red); color:var(--paper) }
.btn--primary:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn--ghost{ border-color:var(--paper); color:var(--paper) }
.btn--ghost:hover{ background:var(--paper); color:var(--ink) }

.hide-mobile{ display:inline-block }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer }
.nav-toggle__bar{ display:block; width:24px; height:2px; background:#fff; margin:5px 0 }

@media (max-width:900px){
  .nav{ 
    display:none;
    flex-direction: column;        /* 👈 stack links vertically */
    align-items: flex-start;       /* left-align text */
    gap: 10px;
    position:absolute; 
    right:4%; 
    top:64px; 
    background:#121416; 
    padding:16px 20px; 
    border-radius:12px; 
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    min-width: 180px;              /* optional: give it some width */
  }
  .nav a{ 
    display:block; 
    width: 100%;                   
    padding:10px 0; 
    border-bottom:1px solid rgba(255,255,255,.1);
  }

  /* Reset button alignment in nav */
  .nav .btn {
    width: auto;                    /* shrink to its natural size */
    margin-top: 10px;               /* little spacing above */
    align-self: center;             /* center the button in the dropdown */
    border-bottom: none;            /* remove the line */
    padding: 10px 16px;             /* keep button padding */
  }
  .nav-toggle{ display:block }
}
@media (max-width:600px) {
  .brand__logo {
    height: 36px;
  }
}

/* ===== Hero ===== */

.hero{ position:relative; overflow:hidden; min-height:76vh; display:grid; align-items:center }
.hero__media{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(13,15,17,0.7), rgba(13,15,17,0.7)),  /* dark overlay */
    url('images/llantitec-team.jpg') center/cover no-repeat;       /* replace with your file path */
  z-index: 0; /* stays at the very back */
}
.hero__content {
  position: relative;
  z-index: 2; /* ensures text/buttons are above everything */
  padding: 100px 0 72px; /* add some top space for fixed header */
}
.headline{ font-size:clamp(36px, 5.5vw, 64px); line-height:1; }
.headline span{ color:var(--paper) }
.lead{ max-width:65ch; color:#d1d5db; margin-top:14px }
.cta-group{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap }

.stats{ margin-top:28px; display:flex; gap:20px; flex-wrap:wrap }
.stat{ background:#0f1113; border:1px solid rgba(255,255,255,.08); padding:14px 18px; border-radius:14px; min-width:200px }
.stat__value{ font-family:"Anton"; font-size:40px; line-height:1 }
.stat__label{ color:var(--muted); font-size:14px }

/*Punto que indica si la tienda est谩 abierta*/
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  background: gray; /* default */
}

.status-dot.open {
  background: #22c55e; /* green */
}

.status-dot.closed {
  background: #ef4444; /* red */
}

/* Diagonales */
.hero__ribbon {
  position: absolute;
  top: -10%;
  width: 20vw;
  height: 140%;
  background: linear-gradient(
    to bottom,
    rgba(198,27,36,0) 0%,
    rgba(198,27,36,0.85) 50%,
    rgba(198,27,36,0) 100%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 1; /* above background but below content */
}
.hero__ribbon--left{ left:-8% }
.hero__ribbon--right{ right:-8% }

/* ===== Secciones ===== */
.section{ padding:72px 0; background:var(--ink) }
.section--dark{ background:var(--dark) }
.section__title{ font-size:clamp(28px,4vw,44px); margin:0 0 8px }
.section__intro{ color:#c6ccd3; margin:0 0 24px; max-width:70ch }

.grid{ display:grid; gap:18px }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .grid--3{ grid-template-columns:1fr } }

/* Marcas */
.brand-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  padding-bottom: 6px;
}
.brand-strip::-webkit-scrollbar {
  height: 6px; /* you can hide if you want */
}
.brand-strip::-webkit-scrollbar-thumb{ background:#343840; border-radius:999px }
.brand-pill{
  flex:0 0 auto; background:#101216; border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:12px 18px; font-weight:700;
}
/* Circles with centered logos */
.brand-circle {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: #ffffff; /* frame color */
  border: 0px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* hide image corners so only circle frame is visible */
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.brand-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills circle with the square image, cropped if needed */
}

.brand-circle:hover {
  transform: translateY(-2px);
  border-color: var(--red);
  box-shadow: 0 8px 28px rgba(198, 27, 36, 0.25);
}

.section--dark .brand-circle {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Optional: inverted treatment if a logo is very dark and needs contrast on dark BGs
   Add class "brand-circle--inverted" to that figure */
.brand-circle--inverted{
  background:#0f1113;
  border-color: rgba(255,255,255,.12);
}
.brand-circle--inverted img{
  filter: invert(1) grayscale(0);      /* only for pure black logos; remove if not needed */
}

/* Size tweaks on small screens */
@media (max-width:520px){
  .brand-circle{ width:86px; height:86px }
}

/* Split (servicios) */
.wrap--split{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center }
@media (max-width:1000px){ .wrap--split{ grid-template-columns:1fr } }
.split__media{
  height:360px; border-radius:18px; border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(130deg, rgba(47,80,125,.25), rgba(198,27,36,.15)), url('images/shop.png') center/cover no-repeat;
}
.split__media--service{
  background: linear-gradient(130deg, rgba(198,27,36,.22), rgba(47,80,125,.22)), url('images/shop.png') center/cover no-repeat;
}
.checklist{ padding-left:18px }
.checklist li{ margin:6px 0 }

/* Sobre nosotros */
.about{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items: stretch;           /* ensures both columns match height */
}
@media (max-width: 900px){
  .about{ grid-template-columns: 1fr }
}

/* Text column */
.about__text p + p { margin-top: 12px; text-align: justify;}


/* Accent card (reuses the promo feel: red gradient + subtle border) */
.about__card{
  display:flex;
  flex-direction:column;
  /*justify-content:space-between;  /* vertical rhythm inside the card */
  gap:10px;
  height:100%;                    /* 馃憟 matches the text column height */
  border-radius:18px;
  padding:22px;
  background: linear-gradient(130deg, rgba(47,80,125,.25), rgba(198,27,36,.15)), url('images/old.png') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
}
.about__badge{
  align-self:flex-start;
  background:#000;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
}
.about__title{
  font-family:"Anton";
  font-size:28px;
  letter-spacing:.4px;
  line-height:1.1;
}
.about__hint{
  color:#e9eaec;
  opacity:.9;
  margin:0;
}
/* --- Mobile behavior: card becomes a square block below the text --- */
@media (max-width: 900px){
  .about{
    grid-template-columns:1fr;
  }
  .about__card{
    height:auto;              /* stop forcing full height */
    aspect-ratio: 1 / 1;      /* 馃憟 perfect square */
    /* optional: center contents nicely inside the square */
    justify-content: center;
    text-align: center;
  }
  .about__badge{ align-self:center }
}


/* Ubicaci贸n */
.location{ display:grid; grid-template-columns: 1fr 1.2fr; gap:24px; align-items:stretch }
@media (max-width:900px){ .location{ grid-template-columns:1fr } }
.location__info{ background:#0f1113; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px }
.location__map{ min-height:360px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08) }
.h4{ font-family:"Anton"; margin:.5rem 0 }

/* Contacto r谩pido */
.contact-quick{ margin-top:8px }
.contact-pill{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#0f1113; border:1px solid rgba(255,255,255,.08);
  padding:16px; border-radius:999px; font-weight:700;
}
.contact-pill:hover{ border-color:var(--red) }

/* Footer */
.site-footer{
  background:#0e1012; border-top:1px solid rgba(255,255,255,.06); padding:22px 0; color:#b8c0c8;
}
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer-nav{ display:flex; gap:16px }