/* =========================
   Base & Theme
========================= */
html{
  scroll-behavior:smooth;
}

/* Para que el header no tape las secciones al hacer scroll */
#home,
#nosotros,
#catalogos,
#contacto,
#ubicacion{
  scroll-margin-top:80px;
}

:root{
    --brand-red:#d21414;
    --black:#0e0e0f;
    --gray-900:#1a1b1e;
    --gray-800:#222327;
    --gray-700:#2a2c31;
    --gray-300:#cfcfcf;
    --gray-200:#eeeeee;
    --white:#ffffff;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    background:var(--black);
    color:var(--white);
    line-height:1.55;
  }
  
  /* Helpers */
  .container{width:min(1200px,92%);margin-inline:auto}
  img{max-width:100%;height:auto;display:block}
  a{color:var(--brand-red);text-decoration:none}
  a:hover{text-decoration:underline}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  
  /* Focus visible */
  :where(a,button,input,select,textarea){outline-color:var(--brand-red);outline-offset:2px}
  
  /* =========================
     Header / Navbar
  ========================= */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(14,14,15,.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom:1px solid var(--gray-800);
  }
  .nav__inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
  .nav__brand img{height:40px}
  
  .nav__toggle{
    display:none;background:none;border:0;color:var(--white);
    font-size:1.6rem;cursor:pointer
  }
  
  .nav__menu{display:flex;gap:1.1rem;align-items:center}
  .nav__menu a{color:#ddd}
  .nav__menu a:hover{color:#fff}
  
  /* Dropdown */
  .dropdown{position:relative}
  .dropdown__btn{
    background:none;border:0;color:#ddd;cursor:pointer;font:inherit
  }
  .dropdown__menu{
    display:none; position:absolute; top:120%; left:0; min-width:220px;
    background:var(--gray-900); border:1px solid var(--gray-800); border-radius:.6rem;
    padding:.35rem; box-shadow:0 10px 30px rgba(0,0,0,.25)
  }
  .dropdown:hover .dropdown__menu{display:block}
  .dropdown__menu a{
    display:block; padding:.55rem .8rem; border-radius:.4rem; color:#ddd
  }
  .dropdown__menu a:hover{background:#1b1c20; color:#fff}
  
  /* =========================
     Hero
  ========================= */
  .hero {
    min-height:100vh;
    position: relative;
    border-bottom: 1px solid var(--gray-800);
    overflow: hidden;
    }

    .hero__image{
      position:relative;
      width:100%;
      height:100%;
    }

    .hero__image img{
      width:100%;
      height:100%;
      min-height:100vh;
      object-fit:cover;
      display:block;
    }


    /* Degradado de izquierda (se ve la imagen) a derecha (negro) */
    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,     /* izquierda: transparente, se ve bien la imagen */
            rgba(0, 0, 0, 0.4) 45%,  /* mitad: empieza a oscurecer */
            rgba(0, 0, 0, 0.85) 100% /* derecha: casi negro */
        );
        z-index: 1;
        pointer-events: none;
    }

    /* Contenido sobre la derecha */
    .hero__inner{
      position:absolute;
      top:0;
      right:0;
      height:100%;
      width:min(560px, 52vw);
      display:flex;
      align-items:center;
      padding:2.5rem;
      z-index:2;
    }


    .hero__content {
        position: relative;
        z-index: 2;
        color: white;
    }

    .hero__content h1 {
        margin: 0 0 .6rem;
        font-size: clamp(1.6rem, 1.5rem + 1.2vw, 2.4rem);
        letter-spacing: .2px;
    }

    .hero__content p {
        color: var(--gray-300);
        margin: .2rem 0 1rem;
    }

    /* Search */
    .search {
        display: flex;
        gap: .55rem;
    }

    .search input {
        flex: 1;
        padding: .9rem .9rem;
        background: #151517;
        color: #ddd;
        border: 1px solid var(--gray-800);
        border-radius: .6rem;
    }

    .search button {
        object-fit: cover;
        display: block;
        padding: .9rem 1.1rem;
        background: var(--brand-red);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }

    .search button:hover {
        filter: brightness(1.05);
    }

  
  /* =========================
     Sections
  ========================= */
  .section{padding:3.2rem 0}
  .section--alt{
    background:#111114;
    border-top:1px solid var(--gray-800);
    border-bottom:1px solid var(--gray-800);
  }
  .section h2{margin:0 0 1rem; font-size:1.8rem}
  
  /* Bulleted list */
  .bullets{display:grid; gap:.35rem; padding-left:1.1rem}
  .bullets li::marker{color:var(--brand-red)}
  
  /* Cards (catálogos) */
  .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.card{
  background:#141417;
  border:1px solid var(--gray-800);
  border-radius:1rem;
  overflow:hidden;
  padding:0; /* las product-card ya manejan padding interno */
}

/* Imagen de la llanta */
.card__image img{
  width:100%;
  height:100%;
  max-height:300px;
  object-fit:cover;
}

/* Contenido de la tarjeta */
.card__body{
  padding:.9rem 1rem 1rem;
}
.card__model{
  margin:.2rem 0 .4rem;
  font-size:1.3rem;
}
.card__desc{
  margin:0;
  color:var(--gray-300);
  font-size:.95rem;
}

.card__features{
  margin:.4rem 0 0;
  padding-left:1.2rem;
  color:var(--gray-300);
  font-size:.95rem;
  display:grid;
  gap:.25rem;
  list-style:disc;
}

.card__features li::marker{
  color:var(--brand-red);
}
  
  /* =========================
     Formulario
  ========================= */
  .form .grid{
    display:grid; 
    margin-bottom: 15px;
    grid-template-columns:repeat(3,1fr); 
    gap:.7rem}
  .form input,.form textarea{
    width:100%; background:#151517; border:1px solid var(--gray-800);
    color:#ddd; border-radius:.6rem; padding:.9rem
  }
  .form textarea{resize:vertical}
  .form__msg{margin-top:.6rem;color:#a9f5a9;font-size:.95rem}

  .form__msg{
  margin-top:.6rem;
  font-size:.95rem;
  color:#a9f5a9; /* el JS lo va cambiando según el estado */
}


  /* Botones genéricos */
.btn{
  display:inline-block;
  padding:.9rem 1.3rem;
  border-radius:.6rem;
  border:0;
  background:var(--brand-red);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  margin-top: .6rem;
}
.btn:hover{
  filter:brightness(1.05);
}

  
  /* =========================
     Mapa
  ========================= */
  .map{border-radius:1rem; overflow:hidden; border:1px solid var(--gray-800)}
  .map iframe{width:100%; height:360px; border:0}

  .ubicacion-info{
    margin-top:1.2rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    color:var(--gray-300);
  }
  
  /* =========================
     Footer
  ========================= */
  .footer{
    background:#0c0c0d; border-top:1px solid var(--gray-800); margin-top:2rem;
    padding:1.8rem 0
  }
  .footer__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
  .footer__nav{display:flex; gap:1rem}
  
  .footer__nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#141417;
    border:1px solid var(--gray-800);
    transition:.25s ease;
  }

  .footer__nav img{
    width:22px;
    height:22px;
    transition:.25s ease;
  }
  
  .footer__nav a:hover{
    background:var(--brand-red);
    transform:translateY(-3px);
  }

  .footer__nav a:hover img{
    filter:brightness(200%);
  }

  /* ---------- Modal de imagen (lightbox) ---------- */
.card__image{
  cursor:pointer;
}

.img-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  display:none;               /* oculto por defecto */
  align-items:center;
  justify-content:center;
  z-index:200;
}

.img-modal.open{
  display:flex;
}

.img-modal__dialog{
  position:relative;
  max-width:90vw;
  max-height:90vh;
}

.img-modal__dialog img{
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:contain;
  border-radius:1rem;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
}

/* Botón de cerrar */
.img-modal__close{
  position:absolute;
  top:-12px;
  right:-12px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:#222;
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.img-modal__close:hover{
  background:var(--brand-red);
}

  
  /* =========================
     Responsive
  ========================= */
  @media (max-width:1024px){
    .hero__inner{grid-template-columns:1fr}
  }
  
  @media (max-width:900px){
    /* Nav to drawer */
    .nav__toggle{display:block}
    .nav__menu{
      position:fixed; inset:56px 0 auto 0;
      background:#0f0f11; border-bottom:1px solid var(--gray-800);
      display:none; flex-direction:column; gap:0; padding:.6rem 1rem;
    }
    .nav__menu.open{display:flex}
    .nav__menu a, .dropdown__btn{padding:.75rem .3rem; color:#e6e6e6}
    .dropdown{width:100%}
    .dropdown__menu{position:static; display:block; border:0; background:transparent; padding:0; box-shadow:none}
    .dropdown__menu a{padding:.55rem 1.2rem; border-radius:.4rem}
    .dropdown__menu a:hover{background:#17181b}
    .form .grid{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}

    .hero{
      min-height:auto;
    }

    .hero__inner{
      position:relative;
      width:100%;
      height:auto;
      padding:1.4rem 0 2rem;
    }

      .hero__image img{
      min-height:60vh;  
    }

    .hero::after{
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2) 0%,
        rgba(0,0,0,0.7) 60%,
        rgba(0,0,0,0.95) 100%
      );
    }

    .search{
      flex-direction:column;
    }

    .search button{
      width:100%;
      border-radius:.6rem;
    }
  }
  
  @media (max-width:520px){
    .nav__brand img{height:34px}
    .hero{padding:3.2rem 0 2.2rem}
    .search input,.search button{padding:.8rem}
    .footer__inner{flex-direction:column}
  }