/*
 * ============================================================
 *  EL CHINO SPORTS — home.css
 *  Estilos específicos del Home (index.html)
 *  Depende de: css/global.css  css/nav.css
 * ============================================================
 */

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(135deg, #0a2e0d 0%, var(--color-verde) 55%, #2E7D32 100%);
  min-height: 520px;
  display:    flex;
  align-items: center;
}

/* Textura sutil sobre el fondo */
.hero::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(76,175,80,.15) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Patrón decorativo — líneas diagonales */
.hero::after {
  content:  '';
  position: absolute;
  inset:    0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255,255,255,.025) 40px,
    rgba(255,255,255,.025) 41px
  );
  pointer-events: none;
}

.hero__inner {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--espacio-lg);
  padding-top:    var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
  width:          100%;
}

/* ── Texto ── */
.hero__contenido {
  text-align: center;
  order:      2;
}

.hero__pretitulo {
  font-family:    var(--fuente-titulo);
  font-size:      clamp(.8rem, 2.5vw, 1rem);
  letter-spacing: .25em;
  color:          rgba(255,255,255,.7);
  text-transform: uppercase;
  margin-bottom:  var(--espacio-sm);
  display:        block;
}

.hero__titulo {
  font-family:    var(--fuente-titulo);
  font-size:      clamp(2.8rem, 10vw, 5.5rem);
  color:          var(--color-blanco);
  line-height:    1;
  letter-spacing: .04em;
  margin-bottom:  var(--espacio-md);
  /* Highlight "2026" en rojo */
}

.hero__titulo span {
  color: #EF5350; /* rojo vibrante sobre fondo verde */
}

.hero__subtitulo {
  font-family:   var(--fuente-cuerpo);
  font-size:     clamp(1rem, 2.5vw, 1.2rem);
  color:         rgba(255,255,255,.85);
  font-weight:   600;
  margin-bottom: var(--espacio-xl);
  line-height:   1.5;
}

.hero__acciones {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--espacio-md);
  justify-content: center;
}

/* Botón secundario blanco para el hero */
.hero__btn-secundario {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--espacio-sm);
  background-color: rgba(255,255,255,.12);
  color:           var(--color-blanco);
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       1rem;
  padding:         11px 23px;
  border-radius:   var(--radio-pill);
  border:          2px solid rgba(255,255,255,.4);
  text-decoration: none;
  cursor:          pointer;
  transition:      background-color var(--transicion), transform var(--transicion);
  white-space:     nowrap;
}

.hero__btn-secundario:hover {
  background-color: rgba(255,255,255,.22);
  color:            var(--color-blanco);
  transform:        translateY(-2px);
}

/* ── Mascota ── */
.hero__mascota-wrap {
  order:        1;
  width:        min(260px, 65vw);
  flex-shrink:  0;
  position:     relative;
  /* Resplandor detrás */
  filter: drop-shadow(0 0 40px rgba(76,175,80,.5));
}

.hero__mascota {
  width:   100%;
  height:  auto;
  display: block;
  /* Pequeña animación flotante */
  animation: flotar 4s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-10px); }
}

/* Insignia "Nuevo" sobre la mascota */
.hero__badge-mascota {
  position:         absolute;
  top:              12px;
  right:            -8px;
  background-color: #EF5350;
  color:            var(--color-blanco);
  font-family:      var(--fuente-titulo);
  font-size:        .8rem;
  letter-spacing:   .1em;
  padding:          4px 10px;
  border-radius:    var(--radio-pill);
  box-shadow:       var(--sombra-media);
  white-space:      nowrap;
}

/* ── DESKTOP: lado a lado ── */
@media (min-width: 768px) {
  .hero {
    min-height: 600px;
  }

  .hero__inner {
    flex-direction: row;
    justify-content:space-between;
    align-items:    center;
    gap:            var(--espacio-xxl);
    padding-top:    var(--espacio-xxl);
    padding-bottom: var(--espacio-xxl);
  }

  .hero__contenido {
    text-align: left;
    order:      1;
    flex:       1;
  }

  .hero__acciones {
    justify-content: flex-start;
  }

  .hero__mascota-wrap {
    order: 2;
    width: min(340px, 38vw);
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 680px;
  }

  .hero__mascota-wrap {
    width: 380px;
  }
}


/* ============================================================
   CATEGORÍAS
   ============================================================ */

.categorias {
  background-color: var(--color-blanco);
  padding: var(--espacio-xl) 0;
}

.categorias__titulo-seccion {
  text-align:    center;
  margin-bottom: var(--espacio-xl);
  color:         var(--color-texto);
}

.categorias__titulo-seccion span {
  color: var(--color-verde);
}

.categorias__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--espacio-md);
}

@media (min-width: 480px) {
  .categorias__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.categoria-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-sm);
  padding:         var(--espacio-lg) var(--espacio-md);
  border-radius:   var(--radio-lg);
  border:          2px solid var(--color-borde);
  text-decoration: none;
  color:           var(--color-texto);
  background-color: var(--color-fondo);
  transition:
    border-color     var(--transicion),
    background-color var(--transicion),
    transform        var(--transicion),
    box-shadow       var(--transicion);
  text-align: center;
  user-select: none;
}

.categoria-card:hover {
  border-color:     var(--color-verde);
  background-color: rgba(27, 94, 32, .06);
  transform:        translateY(-4px);
  box-shadow:       var(--sombra-media);
  color:            var(--color-verde);
}

.categoria-card__icono {
  font-size:       2rem;
  color:           var(--color-verde);
  transition:      transform var(--transicion);
  line-height:     1;
}

.categoria-card:hover .categoria-card__icono {
  transform: scale(1.15) rotate(-5deg);
}

.categoria-card__label {
  font-family:    var(--fuente-titulo);
  font-size:      1.1rem;
  letter-spacing: .05em;
}


/* ============================================================
   DESTACADOS
   ============================================================ */

.destacados {
  background-color: var(--color-fondo);
  padding: var(--espacio-xl) 0;
}

@media (min-width: 768px) {
  .destacados {
    padding: var(--espacio-xxl) 0;
  }
}

.seccion__encabezado {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--espacio-sm);
  margin-bottom:   var(--espacio-xl);
}

.seccion__titulo {
  color: var(--color-texto);
}

.seccion__titulo span {
  color: var(--color-verde);
}

.seccion__ver-todo {
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       .9rem;
  color:           var(--color-verde);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  transition:      gap var(--transicion), color var(--transicion);
  white-space:     nowrap;
}

.seccion__ver-todo:hover {
  color: var(--color-verde-hover);
  gap:   8px;
}

/* ── Grid de productos ── */
.productos-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--espacio-md);
}

@media (min-width: 768px) {
  .productos-grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--espacio-lg);
  }
}

/* ── Tarjeta de producto ── */
.producto-card {
  background-color: var(--color-fondo-tarjeta);
  border-radius:    var(--radio-lg);
  overflow:         hidden;
  box-shadow:       var(--sombra-suave);
  transition:
    transform  var(--transicion),
    box-shadow var(--transicion);
  display:          flex;
  flex-direction:   column;
  position:         relative;
}

.producto-card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--sombra-media);
}

/* Badge flotante */
.producto-card__badge {
  position: absolute;
  top:      10px;
  left:     10px;
  z-index:  2;
}

/* Imagen */
.producto-card__img-wrap {
  position:         relative;
  background-color: #e8f5e9;
  aspect-ratio:     4/3;
  overflow:         hidden;
}

.producto-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.producto-card:hover .producto-card__img {
  transform: scale(1.06);
}

/* Placeholder cuando no hay imagen */
.producto-card__img-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  color:           rgba(27, 94, 32, .3);
  background:      linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

/* Cuerpo de la tarjeta */
.producto-card__cuerpo {
  padding:        var(--espacio-md);
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-sm);
  flex:           1;
}

.producto-card__nombre {
  font-family:   var(--fuente-cuerpo);
  font-weight:   700;
  font-size:     .9rem;
  color:         var(--color-texto);
  line-height:   1.3;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

.producto-card__precio {
  font-family:    var(--fuente-titulo);
  font-size:      1.4rem;
  color:          var(--color-verde);
  letter-spacing: .02em;
  line-height:    1;
}

/* Chips de tallas */
.producto-card__tallas {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.talla-chip {
  font-size:        .7rem;
  font-weight:      700;
  font-family:      var(--fuente-cuerpo);
  padding:          2px 7px;
  border-radius:    var(--radio-sm);
  border:           1.5px solid var(--color-borde);
  color:            var(--color-texto-secundario);
  background-color: var(--color-fondo);
  line-height:      1.6;
  white-space:      nowrap;
  transition:       border-color var(--transicion), color var(--transicion);
}

/* Talla disponible */
.talla-chip--disponible {
  border-color: var(--color-verde);
  color:        var(--color-verde);
}

/* Talla agotada */
.talla-chip--agotada {
  opacity:           .45;
  text-decoration:   line-through;
}

/* CTA */
.producto-card__footer {
  padding:    0 var(--espacio-md) var(--espacio-md);
  margin-top: auto;
}

.producto-card__cta {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           100%;
  padding:         9px 0;
  background-color: var(--color-verde);
  color:           var(--color-blanco);
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       .875rem;
  border-radius:   var(--radio-md);
  text-decoration: none;
  transition:
    background-color var(--transicion),
    transform        var(--transicion);
}

.producto-card__cta:hover {
  background-color: var(--color-verde-hover);
  color:            var(--color-blanco);
  transform:        translateY(-1px);
}

/* Estado sin productos */
.destacados__vacio {
  text-align: center;
  color:      var(--color-texto-secundario);
  padding:    var(--espacio-xxl) 0;
}


/* ============================================================
   BANDA WHATSAPP
   ============================================================ */

.banda-whatsapp {
  background: linear-gradient(135deg, var(--color-verde) 0%, #2E7D32 100%);
  padding:    var(--espacio-xl) 0;
  position:   relative;
  overflow:   hidden;
}

.banda-whatsapp::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 30px,
    rgba(255,255,255,.03) 30px,
    rgba(255,255,255,.03) 31px
  );
  pointer-events: none;
}

.banda-whatsapp__inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--espacio-lg);
  text-align:      center;
}

@media (min-width: 768px) {
  .banda-whatsapp__inner {
    flex-direction:  row;
    justify-content: space-between;
    text-align:      left;
  }
}

.banda-whatsapp__texto {
  color: var(--color-blanco);
}

.banda-whatsapp__titulo {
  font-family:   var(--fuente-titulo);
  font-size:     clamp(1.5rem, 4vw, 2.2rem);
  color:         var(--color-blanco);
  line-height:   1.1;
  margin-bottom: var(--espacio-xs);
  letter-spacing: .03em;
}

.banda-whatsapp__subtitulo {
  font-size:     .95rem;
  color:         rgba(255,255,255,.8);
  font-weight:   600;
  margin-bottom: 0;
}

/* Botón blanco para banda verde */
.btn-whatsapp--blanco {
  background-color: var(--color-blanco);
  color:            var(--color-verde);
  flex-shrink:      0;
}

.btn-whatsapp--blanco:hover,
.btn-whatsapp--blanco:focus-visible {
  background-color: rgba(255,255,255,.9);
  color:            var(--color-verde-hover);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: #0a1f0b;
  color:            rgba(255,255,255,.75);
  padding:          var(--espacio-xxl) 0 var(--espacio-lg);
}

.footer__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--espacio-xl);
  margin-bottom:         var(--espacio-xl);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

/* Columna logo */
.footer__logo {
  text-decoration: none;
  display:         inline-flex;
  flex-direction:  column;
  line-height:     1;
  margin-bottom:   var(--espacio-md);
}

.footer__logo-linea1 {
  font-family:    var(--fuente-titulo);
  font-size:      .95rem;
  letter-spacing: .1em;
  color:          rgba(255,255,255,.6);
}

.footer__logo-linea2 {
  font-family:    var(--fuente-titulo);
  font-size:      1.5rem;
  letter-spacing: .06em;
  color:          var(--color-blanco);
  margin-top:     -3px;
}

.footer__logo:hover .footer__logo-linea2 {
  color: var(--color-verde-claro);
}

.footer__desc {
  font-size:     .875rem;
  line-height:   1.6;
  color:         rgba(255,255,255,.55);
  margin-bottom: var(--espacio-md);
}

/* Íconos redes sociales */
.footer__sociales {
  display:     flex;
  gap:         var(--espacio-sm);
  margin-top:  var(--espacio-sm);
  flex-wrap:   wrap;
}

.footer__social-link {
  width:            38px;
  height:           38px;
  border-radius:    50%;
  border:           1.5px solid rgba(255,255,255,.2);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        1rem;
  color:            rgba(255,255,255,.65);
  text-decoration:  none;
  transition:
    border-color     var(--transicion),
    color            var(--transicion),
    background-color var(--transicion);
}

.footer__social-link:hover {
  border-color:     var(--color-verde-claro);
  color:            var(--color-blanco);
  background-color: rgba(76,175,80,.15);
}

/* Columnas de navegación */
.footer__col-titulo {
  font-family:    var(--fuente-titulo);
  font-size:      .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.4);
  margin-bottom:  var(--espacio-md);
}

.footer__nav {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-sm);
}

.footer__nav-link {
  font-size:       .875rem;
  color:           rgba(255,255,255,.6);
  text-decoration: none;
  transition:      color var(--transicion);
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
}

.footer__nav-link:hover {
  color: var(--color-verde-claro);
}

/* Línea final / copyright */
.footer__bottom {
  border-top:     1px solid rgba(255,255,255,.08);
  padding-top:    var(--espacio-lg);
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  justify-content: space-between;
  gap:            var(--espacio-sm);
}

.footer__copyright {
  font-size:  .8rem;
  color:      rgba(255,255,255,.35);
  margin:     0;
}

.footer__hecho-con {
  font-size:  .8rem;
  color:      rgba(255,255,255,.25);
}

.footer__hecho-con span {
  color: #EF5350;
}