/* =====================================================
   HOJA DE ESTILOS - CARTEL INDUSTRIAL TAMPICO
   ===================================================== */

:root {
  /* Definición de paleta de colores corporativa */
  --primary: #D82B2F;        /* Rojo principal */
  --secondary: #FDDC15;      /* Amarillo de acento */
  --dark: #2B1B4A;           /* Morado muy oscuro para textos y fondos */
  --light: #F4EEDF;          /* Crema tipo papel para el fondo */
  --white: #FFFFFF;          /* Blanco puro */
  --morado: #6B3FA0;         /* Morado medio */

  /* Micro-Tramas Halftone: Creación de texturas de puntos estilo cómic/impresión antigua */
  --halftone-purple: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12) 0.8px, transparent 1.6px);
  --halftone-yellow: radial-gradient(circle at 25% 25%, rgba(0,0,0,.10) 1px, transparent 2px);
  --halftone-paper: radial-gradient(circle at 40% 40%, rgba(0,0,0,.04) 0.6px, transparent 1.8px);
}

/* Reset básico para asegurar consistencia entre navegadores */
* { 
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  margin: 0;              /* Elimina márgenes por defecto */
  padding: 0;             /* Elimina paddings por defecto */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Tipografía del sistema */
  line-height: 1.6;               /* Espaciado entre líneas para lectura */
  color: var(--dark);             /* Color de texto principal */
  background-color: var(--light);  /* Color de fondo base */
  background-image: var(--halftone-paper); /* Textura de puntos de papel */
  background-size: 12px 12px;     /* Tamaño del patrón de puntos */
}

/* Clases de utilidad y contenedores */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* Contenedor centrado */
.text-center { text-align: center; }                                 /* Utilidad para centrar texto */
.section-padding { padding: 4rem 0; }                                /* Espaciado vertical de secciones */
.section-title { 
  font-size: 2.5rem; 
  text-transform: uppercase; 
  margin-bottom: 2rem; 
  text-align: center; 
  font-weight: 900; 
}

/* HEADER & LOGO */
.site-header {
  background-color: var(--dark);
  background-image: var(--halftone-purple); /* Trama de puntos sobre el fondo oscuro */
  background-size: 5px 5px;
  padding: 0.8rem 0;
  position: sticky;      /* Se mantiene fijo al hacer scroll */
  top: 0;                /* Posición fija superior */
  z-index: 100;          /* Asegura que esté por encima de otros elementos */
  border-bottom: 4px solid var(--secondary); /* Línea decorativa amarilla */
}

.header-content { 
  display: flex; 
  justify-content: space-between; /* Logo a la izquierda, nav a la derecha */
  align-items: center; 
}

.logo img {
  display: block;
  max-height: 60px;
  width: auto;
  /* Crea una sombra sólida para dar efecto de profundidad tipo pegatina */
  filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.5));
}

.site-header nav ul { 
  list-style: none; /* Quita los puntos de la lista */
  display: flex; 
  gap: 1.5rem;      /* Espacio entre enlaces */
  align-items: center; 
}

.site-header nav a { 
  color: var(--white); 
  text-decoration: none; 
  font-weight: bold; 
  font-size: 0.9rem; 
  text-transform: uppercase; 
}

/* RESPONSIVE: Ajustes para móviles (Tablet hacia abajo) */
@media (max-width: 768px) {
  .header-content { 
    flex-wrap: wrap;       /* Permite que los elementos bajen de fila */
    row-gap: .5rem; 
  }
  .site-header nav ul {
    flex-wrap: wrap;       /* Menú en varias líneas si es necesario */
    justify-content: center; 
    gap: .75rem; 
    margin-top: .5rem;
    max-width: 100%;
  }
  .site-header nav a { font-size: 0.9rem; }
  .btn-nav {
    margin: .25rem 0 0 0;
    white-space: nowrap;   /* Evita que el texto del botón se rompa en dos líneas */
  }
  .logo, .site-header nav { 
    width: 100%;           /* Ocupan todo el ancho para centrarse */
    text-align: center; 
  }
  .logo img { margin-inline: auto; } /* Centrado horizontal del logo */
}

/* Salvaguarda contra desbordamientos */
.site-header, .header-content, .site-header nav ul { overflow: hidden; }

/* Centrado de imagen en tarjeta */
.figure-center { padding: 1rem; text-align: center; }
.product-card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; 
}

/* Ajuste de rotación en móviles muy pequeños para evitar recortes */
@media (max-width: 480px) {
  .price-tag { transform: none; margin-top: .5rem; }
}

/* SECCIÓN HERO (Principal) */
.hero {
  background-color: var(--light);
  background-image: var(--halftone-paper);
  background-size: 12px 12px;
  padding: 5rem 0;
  border-bottom: 8px solid var(--secondary);
}

.hero-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  gap: 3rem; 
  align-items: center; 
}

.hero-text h1 { 
  font-size: 3.5rem; 
  line-height: 1; 
  color: var(--dark); 
  text-transform: uppercase; 
  margin-bottom: 1.5rem; 
}

.hero-text strong { color: var(--primary); } /* Resalta texto importante en rojo */
.subtitle { font-size: 1.2rem; margin-bottom: 2rem; }

.hero-img-container img { 
  width: 100%; 
  height: auto; 
  filter: drop-shadow(8px 8px 0px var(--dark)); /* Sombra sólida estilo industrial */
}

/* SISTEMA DE BOTONES */
.btn {
  display: inline-block;
  padding: 1rem 1.8rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  transition: 0.2s;
  border: 3px solid var(--dark);
}

.btn-primary { 
  background: var(--primary); 
  color: var(--white); 
  box-shadow: 4px 4px 0 var(--dark); /* Sombra rígida */
}

.btn-secondary { 
  background: var(--secondary); 
  color: var(--dark); 
  box-shadow: 4px 4px 0 var(--dark); 
  margin-left: 0.5rem; 
}

.btn:hover { 
  transform: translate(-2px, -2px); /* Efecto de elevación */
  box-shadow: 7px 7px 0 var(--dark); /* Aumenta la sombra al flotar */
}

.btn-nav { 
  background: var(--primary); 
  border: none; 
  padding: 0.5rem 1rem; 
  box-shadow: 3px 3px 0 var(--secondary); 
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 3px solid var(--white);
  box-shadow: 4px 4px 0 var(--dark);
}

.btn-outline-white:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--dark);
}

/* VARIANTES DE FONDO POR SECCIÓN */
.yellow-section { background-color: var(--secondary); background-image: var(--halftone-yellow); background-size: 9px 9px; }
.purple-section { background-color: var(--dark); background-image: var(--halftone-purple); background-size: 5px 5px; color: var(--white); }
.paper-section { background-color: var(--light); background-image: var(--halftone-paper); background-size: 12px 12px; }

/* GRID DE PRODUCTOS Y TARJETAS */
.product-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsivo automático */
  gap: 2rem; 
}

.product-card { 
  background: var(--white); 
  border: 3px solid var(--dark); 
  box-shadow: 6px 6px 0 var(--dark); 
  position: relative; 
}

.card-header { 
  background: var(--dark); 
  color: var(--secondary); 
  padding: 1rem; 
  text-align: center; 
}

.price-tag {
  background: var(--secondary); 
  color: var(--dark); 
  font-weight: 900; 
  font-size: 1.1rem;
  padding: 0.5rem; 
  width: fit-content; 
  margin: -1.0rem auto 1rem; /* Sube la etiqueta para que traslape el header */
  border: 3px solid var(--dark);
  transform: rotate(-2deg);  /* Inclinación tipo cartel pegado */
}

.card-body { padding: 1.5rem; }
.specs-list { list-style: none; margin-bottom: 1rem; font-weight: bold; }
.badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.badge { display: inline-block; padding: .25rem .5rem; border: 2px solid var(--dark); font-weight: 800; }
.badge-yes { background: #d2f8d2; } /* Verde suave para disponibilidad */
.badge-no  { background: #ffe9e9; } /* Rojo suave para agotado */

/* FAQ (Acordeones nativos) */
details { background: var(--white); border: 3px solid var(--dark); margin-bottom: 1rem; padding: 1rem; }
summary { font-weight: 900; cursor: pointer; text-transform: uppercase; }

/* SECCIÓN LLAMADA A LA ACCIÓN */
.cta-section p { margin: .5rem 0 1rem 0; }

/* FOOTER */
footer { 
  background: #1A102B; 
  color: var(--light); 
  padding: 3rem 0; 
  text-align: center; 
  font-size: 0.8rem; 
}
footer a { color: var(--secondary); }

/* ACCESIBILIDAD */
.skip-link {
  position: absolute; 
  left: -9999px; /* Oculto fuera de pantalla */
  top: 0; 
  z-index: 1000;
  background: #FDDC15; 
  color: #2B1B4A; 
  padding: .75rem 1rem; 
  font-weight: 900;
  border: 3px solid #2B1B4A; 
  border-radius: 4px;
}
.skip-link:focus { left: 1rem; top: 1rem; } /* Se muestra al tabular */

/* Resaltado de navegación por teclado */
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

/* Páginas legales y utilidades */
.legal-page { padding: 2rem; max-width: 800px; margin: 0 auto; }
.mt-2rem { margin-top: 2rem; }
.contract-link { color: var(--dark); font-weight: bold; }

/* REGLAS MÓVILES ADICIONALES (Mobile-First tweaks) */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; } /* Una sola columna */
  .hero-text h1 { font-size: 2.5rem; }
  .btn { display: block; width: 100%; margin: 1rem 0; } /* Botones de ancho completo */
  .cta-buttons .btn { display: block; width: 100%; margin: 0.5rem 0; }
}

/* SALVAGUARDAS GLOBALES CONTRA SCROLL LATERAL */
html, body { 
  width: 100%; 
  max-width: 100%; 
  overflow-x: hidden; /* Evita que elementos que sobresalen creen barra horizontal */
}

img, svg, video, canvas { 
  max-width: 100%; 
  height: auto;       /* Imágenes siempre proporcionales */
}

/* REDEFINICIÓN DE ESTRUCTURA DESKTOP (Centrado de Logo) */
@media (min-width: 769px) {
  .header-content {
    display: flex;
    flex-direction: column; /* Apila logo arriba y nav abajo */
    align-items: center;
    row-gap: .5rem;
  }
  .logo { width: 100%; text-align: center; }
  .logo img { margin-inline: auto; }
  .site-header nav { width: 100%; }
  .site-header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: .25rem 0 0;
    padding: 0;
  }
  .site-header nav li { flex: 0 0 auto; }
}