/* ===========================
   ESTILOS GENERALES
=========================== */

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: #f7f7f7;
  color: #333;
  padding-top: 105px; /* evita que el header fijo tape el contenido */
}

/* ===========================
   HEADER MODERADO PLUS
=========================== */
header.header {
  background-color: #ffffff;
 /* border-bottom: 3px solid #1a73e8;*/
  height: 105px;
  padding: 0 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.10);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  background-image: none !important;
  overflow: hidden;

  position: fixed;   /* 🔵 FIJO */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

.header-left {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-left .logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* ===========================
   MENÚ PREMIUM (ESCRITORIO)
=========================== */

.header-center,
.header-right {
  display: flex;
  align-items: center;
}

.header-center {
  flex: 1;
  justify-content: center;
  gap: 25px;
}

.header-center a {
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
  padding: 4px 0;
  transition: color 0.25s ease;
}

.header-center a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: #1a73e8;
  transition: width 0.25s ease;
}

.header-center a:hover {
  color: #1a73e8;
}

.header-center a:hover::after {
  width: 100%;
}

/* ===========================
   IDIOMAS
=========================== */

.header-right {
  gap: 8px;
  margin-right: 10px;
}

.header-right .idioma {
  color: #777;
  text-decoration: none;
  font-weight: 600;
}

.header-right .idioma:hover {
  color: #1a73e8;
}

/* ===========================
   RESPONSIVE HEADER
=========================== */

@media (max-width: 768px) {
  .header-center {
    display: none !important;
  }
  .header-right {
    display: none !important;
  }
}

/* ===========================
   CONTENEDORES GENERALES
=========================== */

.intro, .productos, .guias {
  width: 95%;
  max-width: 1000px;
  margin: 30px auto;
}

/* ===========================
   TITULOS
=========================== */

/* Oculta los títulos de categoría pero mantiene los IDs para SEO y navegación */
h2 {
  font-size: 0;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 180px; /* mantiene el salto perfecto al hacer clic en el carrusel */
}


.titulo-principal {
  font-size: 24px;
  color: #1a73e8;
  margin: 0 0 10px 0;
  font-weight: bold;
  text-align: center;
}

/* ===========================
   GRID MODERNO
=========================== */

.grid-contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* ← línea ganadora */
  gap: 18px;
  justify-items: center;
  width: 100%;
  margin: 25px auto;
}


/* ===========================
   TARJETAS
=========================== */

.producto {
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: 200px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;

  display: flex;             /* ← CLAVE */
  flex-direction: column;    /* ← CLAVE */
  gap: 10px;                 /* ← SEPARA TODO */
}


/* ===========================
   IMÁGENES EN PC / LAPTOP
=========================== */

.producto img {
    width: 100%;
    height: 200px;        /* más grande que móvil */
    object-fit: contain;  /* muestra la imagen completa */
    background: #fff;     /* fondo limpio */
    border-radius: 6px;
}



.producto h3 {
  font-size: 15px;       /* tamaño estándar premium */
  margin: 8px 0 5px 0;
  font-weight: 600;      /* más presencia */
}

.producto p {
  font-size: 12.5px;     /* legible pero compacto */
  margin: 0 0 12px 0;    /* AQUI está el espaciado perfecto */
  line-height: 1.35;
}


/* ===========================
   BOTONES
=========================== */
.boton {
    margin-top: 6px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: #4a90e2;
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(110,110,110,0.4);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.boton:hover {
    background-color: #3b7ac2;
    box-shadow: 0 3px 8px rgba(110,110,110,0.5);
}






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

footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 15px;
  margin-top: 40px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Ocultar menu móvil en escritorio */
.hm-menu {
  display: none;
}


/* ===========================
   MENÚ DESLIZABLE (MÓVIL)
=========================== */

.menu-scroll-movil {
  display: none;
}

@media (max-width: 768px) {

  .menu-scroll-movil {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 15px;
    padding: 12px 15px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .menu-scroll-movil a {
    display: inline-block;
    text-decoration: none;
    color: #1a73e8;
    font-weight: bold;
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #eaf3ff;
    flex-shrink: 0;
  }

  .menu-scroll-movil a:hover {
    background: #d6e8ff;
  }
}

/* ===========================
   SELECTOR DE IDIOMA (MÓVIL)
=========================== */

@media (max-width: 768px) {

  /* Selector de idiomas móvil elegante */
  .idiomas-movil {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    padding: 6px 12px;
    background: #ffffff;
    gap: 6px;
    z-index: 99999;
    border-bottom-left-radius: 8px;
    font-size: 14px;
    color: #777; /* gris elegante */
    font-weight: 500;
  }

  .idiomas-movil a {
    color: #777 !important;        /* gris elegante */
    text-decoration: none;
    font-weight: 500;
    padding: 0 !important;          /* sin botones */
    background: none !important;    /* sin fondo azul */
    border: none !important;        /* sin bordes */
  }

  .idiomas-movil span {
    color: #999; /* separador | más suave */
  }

  .idiomas-movil a:hover,
  .idiomas-movil a:active {
    color: #555 !important; /* gris un poquito más oscuro */
  }
}




/* ===========================
   CARRUSEL DE CATEGORÍAS (CORPORATIVO AZUL)
=========================== */

.carrusel-categorias {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  gap: 12px;
  padding: 10px 15px;
  background: #f3f3f3;
  scroll-behavior: smooth;

  position: sticky;   /* 🔵 FIJO DEBAJO DEL HEADER */
  top: 105px;
  z-index: 9000;
}

.carrusel-categorias a {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #d9d9d9;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.carrusel-categorias a:hover {
  background: #e8f0fe;
  border-color: #1a73e8;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
}

.carrusel-categorias a:active,
.carrusel-categorias a:focus {
  background: #e8f0fe;
  border-color: #1a73e8;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
  outline: none;
}

.titulo-principal {
  visibility: hidden;
  height: 40px;
}


#categories {
    scroll-margin-top: 120px;
}

/* ============================
   CONTENIDO PREMIUM (CUADROS BLANCOS)
   ============================ */

/* Contenedor de lectura */
.contenido {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

/* Caja blanca principal */
.caja-blanca {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    margin-top: 1rem;
}

/* Títulos internos */
.contenido h1 {
    font-size: 1.4rem !important;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: #555;
}



.contenido h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.contenido p {
    margin: 0.4rem 0;
}

/* Listas premium */
.contenido ol {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    margin-top: 1.5rem;
}

.contenido li {
    margin-bottom: 1.1rem;
}

/* Enlaces dentro del contenido */
.contenido a {
    color: #234b9b;
    text-decoration: none;
}

.contenido a:hover {
    text-decoration: underline;
}

.h2-visible {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1rem 0;
    color: #555;
    height: auto;
    overflow: visible;
}

/* ===========================
   OPTIMIZACIÓN COMPLETA PARA MÓVIL
=========================== */

@media (max-width: 768px) {

  /* Ajuste del espacio superior (header fijo) */
  body {
    padding-top: 80px;
  }

  /* Grid: 2 columnas estilo Amazon */
  .grid-contenedor {
   /* grid-template-columns: repeat(2, 1fr); */
    grid-template-columns: 1fr;
    gap: 12px; /* más compacto */
  }

  /* Tarjetas más pequeñas y premium */
  .producto {
    width: 100%;        /* ocupa su columna */
    max-width: none;    /* elimina límite de 350px */
    padding: 10px;      /* más compacto */
    box-sizing: border-box;
  }

/*  .producto img {
    width: 100%;
    border-radius: 6px;
  } */
  
   .producto img {
    width: 100%;
    height: 260px;      /* ← AGRANDA LA IMAGEN */
    object-fit: contain;
    border-radius: 6px;
  }



  /* Tipografías más compactas */
 
 .producto h3 {
  font-size: 15px;
  margin: 8px 0 4px 0;
  font-weight: 600;
}

.producto p {
  font-size: 12.5px;
  line-height: 1.35;
  margin-bottom: 8px;
}

 
  /* Botón compacto */
  .boton {
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 6px;
  }

  /* Carrusel premium */
  .carrusel-categorias {
    background: #e0e7f1;
    padding: 10px 15px;
    gap: 12px;
  }

  .carrusel-categorias a {
    padding: 8px 16px;
    font-size: 15px;
    border-radius: 20px;
  }

}


/* ===========================
   HEADER MÓVIL PREMIUM FINAL
=========================== */

.header-movil {
  display: none;
}

@media (max-width: 768px) {

  header.header {
    display: none !important;
  }

  .header-movil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 95px;              /* ← ALTURA REAL, NO EXAGERADA */
    padding: 0 14px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  /* LOGO GRANDE SIN ROMPER EL HEADER */
  .hm-logo {
    height: 35px;              /* ← TU TAMAÑO IDEAL */
    width: auto;
    object-fit: contain;       /* ← NO EXPLOTA EL HEADER */
  }

  /* DERECHA: EN / ES + HAMBURGUESA */
  .hm-right {
    display: flex;
    align-items: center;
    gap: 14px;                 /* ← SEPARACIÓN NORMAL */
  }

  /* EN / ES NORMAL, NO GIGANTE */
  
  .hm-lang {
    font-size: 15px;
    font-weight: 600;
    color: #777 !important;
    text-decoration: none;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 6px;   /* ← ESPACIADO PERFECTO */
}


.hm-lang a {
    color: #777 !important;   /* gris elegante */
    text-decoration: none;
}

.hm-lang span {
    color: #999;              /* separador suave */
}


  /* HAMBURGUESA NORMAL */
  .hm-menu-btn {
    background: none;
    border: none;
    font-size: 24px;           /* ← PROPORCIONAL */
    cursor: pointer;
    color: #333;
    line-height: 1;            /* ← NO EXPANDE EL HEADER */
  }

 /* MENÚ DESPLEGABLE */
.hm-menu {
  display: none;
  flex-direction: column;
  background: #ffffff;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: fixed;
  top: 95px;                 /* ← COINCIDE CON EL HEADER */
  left: 0;
  right: 0;
  z-index: 9998;
}

.hm-menu a {
  padding: 12px 0;
  font-size: 16px;           /* ← NORMAL */
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.hm-menu a:last-child {
  border-bottom: none;
}

/* ⭐ EFECTO PREMIUM DEFINITIVO (SIN PARPADEO) */
.hm-menu a {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  pointer-events: auto;
  background: none !important;
  transition: opacity 0.15s ease;
}

/* ⭐ EFECTO A — SUBRAYADO ANIMADO PREMIUM */
.hm-menu a {
  position: relative;
  overflow: hidden;
}

.hm-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #1a73e8; /* azul elegante premium */
  transition: width 0.25s ease;
}

.hm-menu a:active::after {
  width: 100%;
}

/* EFECTO DE TOQUE (OPACIDAD SUAVE) */
.hm-menu a:active {
  opacity: 0.55 !important;
  background: none !important;
}

body {
  padding-top: 95px;         /* ← AJUSTE PERFECTO */
}

.producto p,
.producto p * {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.producto.highlight {
    position: relative;
    animation: glowPulse 1.6s ease-out;
}

@keyframes glowPulse {
    0%   { box-shadow: 0 0 0px 0 rgba(255, 230, 0, 0.7); }
    50%  { box-shadow: 0 0 18px 6px rgba(255, 230, 0, 0.5); }
    100% { box-shadow: 0 0 0px 0 rgba(255, 230, 0, 0); }
}


.producto.highlight {
    background-color: yellow !important;
}

.producto.highlight {
    outline: 4px solid red !important;
}