/* =======================================================
1. RESET GLOBAL
======================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  padding-top: 110px;
  margin: 0;
  height: 100vh;
  background-image: url("fondo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* =======================================================
   TIPOGRAFÍA GLOBAL
======================================================= */
h1 { font-size: 2.5em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { 
    font-size: 1.5em;
    margin-top: 1em;       /* margen superior cómodo */
    margin-bottom: 1em;    /* margen inferior cómodo */
}
p  { font-size: 1.25em; line-height: 1.2; }
ul { list-style: none; }
li { font-size: 1.2em; }

@media (max-width: 600px) {
  h4 {
    font-size: 1.1em;   /* más pequeño y cómodo en móviles */
    margin-top: 0.8em;  /* margen un poco más corto */
    margin-bottom: 0.8em;
  }
}

/* =======================================================
   CONTENEDORES GENERALES
======================================================= */
.container {
  max-width: 960px;

}
.titulo {
  text-align: center;
  margin: 10px 1px 10px 1px;
  font-size: 1.8rem;
}
.subtitulo {
  text-align: center;
  margin: 0px 1px 0px 1px;
  font-size: 1.4rem;
}

/* =======================================================
   HEADER
======================================================= */
header {
  width: 100%;
  background-image: url(Images/Header_background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  padding: 15px 300px 5px 300px; /* 👈 este valor es el que controla la separación lateral */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.logo img {
  height: 80px;
  width: auto;
}
.menu {
  list-style: none;
  display: flex;
  gap: 25px;
}
.menu li { position: relative; }
.menu a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.menu a:hover {
  background: #056b1b;
  color: white;
}

/* Submenú */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 200px;
  padding: 5px 0;
  z-index: 2000;
}
.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  font-size: 1rem;
  color: #000;
}
.dropdown-menu li a:hover {
  background: #21be48;
  color: #fff;
}
/* Hover en PC */
@media (min-width: 769px) {
  .dropdown:hover .dropdown-menu { display: block; }
}
/* Activo en móvil */
.dropdown-menu.active { display: block; }

/* =======================================================
   PORTADA
======================================================= */
#portada {
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: filter 0.4s ease, transform 0.4s ease;
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
              url("Images/001-Main-index.png") center/cover no-repeat;
  color: white;
}
#portada h1 {
  font-size: 2.5rem;
  font-weight: bold;
  padding: 100px 12px;
}
#portada button {
  font-size: 1.2rem;
  padding: 12px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, #4814c0, #21be48, #f30674);
  color: white;
  transition: all 0.3s ease;
}
#portada button:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #076d25, #21be48, #e07f00);
}

#portada:hover {
  filter: brightness(1.32) contrast(1.18) saturate(1.16);
}

/* =======================================================
   VIDEO
======================================================= */
.video-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 320px;
}

/* =======================================================
   REDES SOCIALES
======================================================= */
.social-section {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 30px 0;
}
.social-section img {
  width: 60px;
  height: auto;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.social-section img:hover {
  transform: scale(1.3);
}

/* =======================================================
   PRODUCTOS
======================================================= */
.productos {
  text-align: center;
  margin: 3px auto;
  max-width: 1200px;
  padding: 0px;
}
.cards-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 20px;
  padding: 0px 15px 0px 15px
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  color: inherit;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  padding: 0px 10px 0px 10px;
}

.card:hover {
  background: rgba(131, 202, 250, 0.2); /* azul translúcido */
  transform: translateY(-8px);         /* se levanta */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* sombra más fuerte */
}

/* fuerza a que NADA dentro del link se subraye ni cambie de color */
.product-card h2,
.product-card p {
  text-decoration: none;
  color: inherit;
}

.card:hover { transform: translateY(-10px); }
.card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.card p {
  padding: 22px 30px;
  font-size: 1.2rem;
  text-align: justify;
}

/* Ajuste de títulos de tarjetas en móviles */
@media (max-width: 600px) {
  .card h3 {
    font-size: 1.2rem; /* más pequeño que el 2em actual */
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Grilla de productos con tabla */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.producto {
  border: 1px solid #2ecc71;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

/* 1. Centrar h1 dentro de cada tarjeta */
.producto h1 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  text-align: center;   /* vuelve a centrar */
}

/* 2. Subtítulos h2 alineados a la derecha */
.producto h2 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-align: right;    /* vuelve a la derecha */
}

/* 3. Otro subtítulo para precios */
.producto h3 {
  margin-bottom: 0px;
  font-size: 1rem;
  text-align: center;  
}
.producto p {
  margin-bottom: 5px;
  font-size: 1rem;
  text-align: left;    /* vuelve a la derecha */
}

/* Tablets y móviles */
@media (max-width: 480px) {
  body {
    padding-top: 130px; /* header más chico en pantallas medianas */
  }
}

.producto:hover { transform: scale(1.05); }
.producto img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  border-radius: 8px;
}
/* Tablas */
table {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}
/* Negrita solo en la última columna */
table td:last-child {
  font-weight: bold;
}
thead th {
  border-bottom: 1px solid green;
  padding: 2px;
  text-transform: uppercase;
}
tbody td {
  border-bottom: 1px solid green;
  padding: 6px 8px;
  text-align: center;
  overflow: hidden;
}
/* ===== Tabla de 4 columnas (estilo no referenciado, solo por si acaso) ===== */
table.tabla4 tbody td:first-child,
table.tabla4 thead th:first-child { width: 20%; }

table.tabla4 tbody td:nth-child(2),
table.tabla4 thead th:nth-child(2) { width: 25%; }

table.tabla4 tbody td:nth-child(3),
table.tabla4 thead th:nth-child(3) { width: 30%; }

table.tabla4 tbody td:nth-child(4),
table.tabla4 thead th:nth-child(4) { width: 25%; }

/* ===== Tabla de 5 columnas ===== */
table.tabla5 tbody td:first-child,
table.tabla5 thead th:first-child { width: 8%; }

table.tabla5 tbody td:nth-child(2),
table.tabla5 thead th:nth-child(2) { width: 25%; }

table.tabla5 tbody td:nth-child(3),
table.tabla5 thead th:nth-child(3) { width: 27%; }

table.tabla5 tbody td:nth-child(4),
table.tabla5 thead th:nth-child(4) { width: 16%; }

table.tabla5 tbody td:nth-child(5),
table.tabla5 thead th:nth-child(5) { width: 24%; }
/* =======================================================
FOOTER
======================================================= */
footer {
  background-color: rgba(0,0,0,0.15);
  color: #000;
  padding: 0px 20px 20px;
  font-family: 'Verdana', sans-serif;
}
.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto 20px;
  gap: 40px;
}
.footer-column {
  flex: 1;
  text-align: center;
  padding: 10px;
}
.footer-column h3 {
  margin-bottom: 0px;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
}
.footer-column p {
  margin: 6px 0;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
}
footer hr {
  border: none;
  border-top: 1px solid #000;
  max-width: 1200px;
  margin: 20px auto;
}
.footer-bottom {
  font-family: 'Verdana';
  text-align: center;
  font-size: 13px;
  color: #000;
}

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

/* Grillas */
@media (min-width: 1024px) {
  .cards-container { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .cards-container { grid-template-columns: repeat(2, 1fr); }
  .grid-container  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards-container { grid-template-columns: 1fr; gap: 30px; }
  .grid-container  { grid-template-columns: 1fr; }
  .card img        { height: 240px; }
  .card p          { font-size: 1rem; padding: 15px; }
  .card button     { font-size: 1rem; padding: 8px 16px; }
}

/* Header & menú */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  .logo { display: flex; justify-content: center; }
  .logo img { width: 66%; height: auto; margin-bottom: 15px; }
  .menu { flex-wrap: wrap; justify-content: center; gap: 15px; }
  .menu a { font-size: 1.3rem; padding: 10px 16px; }
}
@media (max-width: 600px) {
  .menu a { font-size: 1rem; padding: 8px 12px; }
  .dropdown-menu li a { font-size: 0.9rem; }
}

/* Portada móvil */
@media (max-width: 768px) {
  #portada h1 { font-size: 2.5rem; line-height: 1.3; }
  #portada button { font-size: 1rem; padding: 8px 16px; }
}
@media (max-width: 480px) {
  #portada h1 { font-size: 1.5rem; }
}

/* Social móvil */
@media (max-width: 768px) {
  .social-section img { width: 40px; }
}

/* Productos título */
@media (max-width: 768px) {
  .productos h2 { font-size: 2rem; }
}
@media (max-width: 480px) {
  .productos h2 { font-size: 1.5rem; }
}

/* Footer móvil */
@media (max-width: 768px) {
  .footer-container { flex-direction: column; text-align: center; gap: 20px; }
  .footer-column h3 { font-size: 1rem; }
  .footer-column p  { font-size: 0.85rem; }
  .footer-bottom    { font-size: 0.8rem; }
}
.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(102, 255, 153, 0.4); /* verde con transparencia */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

/* efecto hover */
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  background: rgba(51, 153, 255, 0.4); /* azul con transparencia */
}

.product-card h2,
.product-card p {
  text-decoration: none;
  color: inherit;
}

/* 📱 Ajustes específicos para móviles */
@media (max-width: 768px) {
  /* Centrar las tarjetas en móviles */
  .grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .producto {
    width: 95%;        /* que no ocupe todo el ancho */
    margin: 10px 0;    /* espacio vertical entre tarjetas */
  }

  /* Ajustar tamaños de texto */
  .producto h1 {
    font-size: 1.2rem; /* más pequeño */
    text-align: center;
  }

  .producto h2 {
    font-size: 1rem;
    text-align: center;
  }

  .producto table {
    font-size: 0.8rem; /* achicar el texto de las tablas */
  }

  .producto table th,
  .producto table td {
    padding: 4px; /* compactar celdas */
  }
}
@media (max-width: 768px) {
  /* Warning más pequeño en móviles */
  h3 {
    font-size: 0.8rem;
    text-align: center; /* opcional, queda más bonito centrado */
  }
}

/* ====== CONTACTO ====== */
.contacto-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-align: center;
}

.contacto-container h1 {
  margin-bottom: 10px;
  font-size: 2rem;
}

.contacto-container p {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.contacto-container form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
}

.contacto-container label {
  font-weight: bold;
  margin-bottom: 5px;
}

.contacto-container input,
.contacto-container textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.contacto-container button {
  padding: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #078a24, #21be48);
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

.contacto-container button:hover {
  background: linear-gradient(135deg, #056b1b, #1a9a3a);
}

/* Versión móvil */
@media (max-width: 600px) {
  .contacto-container {
    margin: 20px;
    padding: 15px;
  }
  .contacto-container h1 {
    font-size: 1.5rem;
  }
  .contacto-container p {
    font-size: 1rem;
  }
}

.btn-whatsapp {
  color: inherit;      /* hereda el color del texto del contenedor */
  text-decoration: none; /* quita el subrayado */
}

.warning {
  font-size: 14px;   /* cambia el tamaño (ajusta a gusto) */
  font-weight: normal; /* opcional, para que no se vea tan pesado */
  text-align: center; /* opcional, si lo querés centrado */
  color: #444; /* opcional, tono gris suave */
}

@media (max-width: 768px) {
  .warning {
    font-size: 8px;
  }
}

/* =============================
   BOTÓN HAMBURGUESA FLOTANTE
   ============================= */
.hamburger-menu {
  position: fixed;
  top: 60px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 👈 clave */
  width: 22px;
  height: 20px;
  cursor: pointer;
  z-index: 2000;
}

@media (max-width: 768px) {
  .hamburger-menu {
    left: 15px;
    width: 18px;
    height: 18px;
    gap: 4px;
  }
}

.hamburger-menu .bar {
  height: 2px;
  background-color: #05ad0e;
  border-radius: 2px;
}

/* =============================
   CUADRO DESPLEGABLE
   ============================= */
.floating-menu {
  position: fixed;
  top: 65px;              /* justo debajo del header */
  left: 40px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 8px 0;
  width: 200px;
  display: none;
  z-index: 1999;
}

.floating-menu.active {
  display: block;
}

.floating-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.floating-menu ul li {
  margin: 0;
}

.floating-menu ul li a {
  display: block;
  padding: 10px 15px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
  transition: background-color 0.2s;
}

.floating-menu ul li a:hover {
  background-color: #f2f2f2;
}

/* (Opcional) animación para transformar la hamburguesa en X */
.hamburger-menu.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== Ajuste del botón hamburguesa en móviles ===== */
@media (max-width: 768px) {
  .menu-hamburguesa {
    left: 15px !important;   /* 🔹 Lo acerca al borde izquierdo */
  }
}



/* --- Ícono del índice --- */
.indice-link {
  position: absolute;
  right: 250px;         /* separación del borde derecho */
  top: 50%;            /* centrado vertical en el header */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.indice-link img {
  width: 28px;         /* tamaño del ícono */
  height: 28px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.0s, transform 0.5s;
}

.indice-link:hover img {
  opacity: 1;
  transform: scale(1.1);
}

/* En móviles, mantener visible y bien ubicado */
@media (max-width: 768px) {
  .indice-link {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .indice-link img {
    width: 24px;
    height: 24px;
  }
}

.nav-menu {
  margin-left: auto; /* empuja el menú hacia la derecha */
}
.footer-bottom p {
  font-size: 14px;  /* Ajustá el valor según necesites */
}

@media (max-width: 600px) {
  .footer-bottom p {
    font-size: 12px; /* tamaño más pequeño en móviles */
  }
}

/* Tabla principal */
.tabla-indice {
  width: 100%;
  max-width: 768px;
  border-collapse: collapse;
  background: transparent;
}

.tabla-indice td {
  border: none;
  padding: 4px 8px;
  vertical-align: top;
  text-align: left;
}

/* Primera columna (códigos) */
.codigo {
  font-family: "Courier New", Courier, monospace;
  font-size: 17px !important;
  white-space: nowrap;
  width: 8ch;
  text-align: left;
}

/* Segunda columna (descripción) */
.descripcion {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px !important;
  font-weight: normal !important;
  word-break: break-word;
  text-align: left;
}

/* Enlaces */
a {
  text-decoration: none;
  color: inherit;
  display: block;
}

a:visited {
  color: inherit;
}

/* ====== Tamaños de texto ====== */
.texto1 { font-size: 18px; }  /* tamaño base desktop */
.texto2 { font-size: 16px; }  /* tamaño para tablets */
.texto3 { font-size: 14px; }  /* tamaño para móviles */

/* ====== Responsividad ====== */
@media (max-width: 1024px) {
  .codigo { font-size: 8px; }
  .descripcion { font-size: 8px; }
}

@media (max-width: 600px) {
  .codigo { font-size: 8px; }
  .descripcion { font-size: 8px; }
}

/* ==========================
   SECCIÓN SWITCHES
========================== */
.Switches {
  max-width: 1000px;
  margin: 40px auto 0 auto;
  border: none;
  padding: 0px;
}

.Switches h2 {
  font-size: 20px;
  margin-bottom: 15px;
  border-top: 1px solid #000;
  padding-bottom: 5px;
}

/* ==========================
   GRILLA DE IMÁGENES
========================== */
.grid-container2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
  justify-content: center;    /* centra la fila incompleta */
  justify-items: center;      /* centra cada tarjeta dentro de su celda */
  margin: 0 auto;
  width: 100%;
  max-width: 950px;           /* ajustá este número hasta que quepan 5 justas */
}

.switchcard {
  background-color: transparent;
  border: none;
  width: 95%;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  animation: aparecerSuave 0.6s ease-out forwards;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
  transform-origin: center center;
  border-radius: 14px;
}

.switchcard:hover {
  transform: translateY(-4px);
}

.switchcard img {
  width: 100%;
  height: auto;
  display: block;
}

.switchcard p {
  margin-top: 2px;
  font-size: 12px;
  margin-bottom: 10px;
}
.switchcard img {
  transition: transform 0.2s ease;
}

.switchcard:hover img {
  transform: scale(1.03);
}

/* ==========================
   TABLA DE DESCRIPCIONES
========================== */
.tabla-descripciones {
  width: 45%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla-descripciones th,
.tabla-descripciones td {
  border-bottom: 1px solid #0e9e4f;
  padding: 8px;
  text-align: left;
}

.tabla-descripciones th {
  font-weight: bold;
}

.tabla-descripciones td:first-child {
  width: 5%;
  text-align: center;
  color: green;
}

.tabla-descripciones td:nth-child(2) {
  width: 70%;
}

.tabla-descripciones td:last-child {
  width: 7%;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
}

.info-text {
  text-align: center;
  font-size: 14px;
  font-weight: bolder;
  color: #333;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 1.7; /* ← mejora legibilidad en varias líneas */
}
.info-text p {
  line-height: 1.8;
}
/* Tamaño más pequeño en celulares */
@media (max-width: 480px) {
  .info-text {
    font-size: 10px;  /* ← tamaño reducido en móvil */
  }
.tabla-descripciones {
  width: 90%;
  border-collapse: collapse;
  font-size: 14px;
}
}
/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 768px) {
  .grid-container2 {
    grid-template-columns: repeat(4, 1fr);
  }
  .Switches {
    padding-left: 15px;
    padding-right: 15px; /* ← espacio lateral en móviles */
  }
  .Switches h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .grid-container2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .tabla-descripciones {
    font-size: 10px;
  }
}

/* ===== ANIMACIÓN DE ENTRADA PARA LAS TARJETAS ===== */

/* Definición de la animación */
@keyframes aparecerSuave {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pequeño retardo escalonado para que entren una tras otra */
.switchcard:nth-child(1) { animation-delay: 0.05s; }
.switchcard:nth-child(2) { animation-delay: 0.1s; }
.switchcard:nth-child(3) { animation-delay: 0.15s; }
.switchcard:nth-child(4) { animation-delay: 0.2s; }
.switchcard:nth-child(5) { animation-delay: 0.25s; }
.switchcard:nth-child(6) { animation-delay: 0.3s; }
.switchcard:nth-child(7) { animation-delay: 0.35s; }
.switchcard:nth-child(8) { animation-delay: 0.4s; }
.switchcard:nth-child(9) { animation-delay: 0.45s; }
.switchcard:nth-child(10) { animation-delay: 0.5s; }
.switchcard:nth-child(11) { animation-delay: 0.55s; }
.switchcard:nth-child(12) { animation-delay: 0.6s; }
.switchcard:nth-child(13) { animation-delay: 0.65s; }
.switchcard:nth-child(14) { animation-delay: 0.7s; }
.switchcard:nth-child(15) { animation-delay: 0.75s; }
/* podés seguir aumentando si tu grilla tiene más tarjetas */


/* Contenedor del texto con tooltip */
.tooltip {
  position: relative;
  cursor: help;
  color: #333; /* color del texto (opcional) */
}

/* Texto del tooltip oculto */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 260px;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  padding: 6px 8px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* aparece encima del texto */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s;
  font-size: 13px;
  line-height: 1.4;
}

/* Muestra el tooltip al pasar el mouse */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ===== MODAL ===== */
.modal {
  display: none; /* oculto por defecto */
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.modal.show {
  display: flex;
  animation: fadeIn 0.3s ease forwards;
}

.modal-content {
  background: white;
  backdrop-filter: blur(2px); /* opcional */
  padding: 20px;
  border-radius: 12px;
  max-width: 450px;
  width: 90%;
  position: relative;
}

.modal-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.modal-content p {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

.close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popUp {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.button-volver {
  display: inline-block;     /* 👈 solo ocupa el área de la imagen */
  text-decoration: none;     /* sin subrayado */
  margin: 20px auto;         /* separación vertical */
}

/* Imagen dentro del enlace */
.button-volver img {
  display: inline-block;
  width: 40%;                /* ajustá a tu gusto */
  max-width: 400px;
  height: auto;
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* Efecto hover */
.button-volver img:hover {
  transform: scale(1.05);
}

/* 📱 Responsive: tablets */
@media (max-width: 768px) {
  .button-volver img {
    width: 60%;
    max-width: 350px;
  }
}

/* 📱 Responsive: celulares */
@media (max-width: 480px) {
  .button-volver img {
    width: 80%;
    max-width: 300px;
  }
}

/* ==========================
   GRILLA DE IMÁGENES SMART
========================== */
.grid-container_smart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  justify-content: center;    /* centra la fila incompleta */
  justify-items: center;      /* centra cada tarjeta dentro de su celda */
  margin: 0 auto;
  width: auto;
}

.smartcard {
  background-color: transparent;
  border: none;
  width: 95%;
  text-align: center;
  opacity: 0;
  animation: aparecerSuave 0.6s ease-out forwards;
  animation-fill-mode: forwards; /* asegura que el estado final se mantenga */
  will-change: transform, opacity;
  transform-origin: center center;
}

.smartcard img {
  width: 100%;
  height: auto;
  display: block;
}

.smartcard p {
  margin-top: 2px;
  font-size: 12px;
  margin-bottom: 10px;
}


/* ==========================
   TABLA DE DESCRIPCIONES
========================== */
.tabla-descripciones_smart {
  width: 45%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla-descripciones_smart th,
.tabla-descripciones_smart td {
  border-bottom: 1px solid #0e9e4f;
  padding: 8px;
  text-align: left;
}

.tabla-descripciones_smart th {
  font-weight: bold;
}

.tabla-descripciones_smart td:first-child {
  width: 5%;
  text-align: center;
  color: green;
}

.tabla-descripciones_smart td:nth-child(2) {
  width: 70%;
}

.tabla-descripciones_smart td:last-child {
  width: 7%;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
}

.info-text {
  text-align: center;
  font-size: 14px;
  font-weight: bolder;
  color: #333;
  margin-top: 20px;
  margin-bottom: 20;
  line-height: 1.7; /* ← mejora legibilidad en varias líneas */
}
.info-text p {
  line-height: 1.8;
}
/* Tamaño más pequeño en celulares */
@media (max-width: 480px) {
  .info-text {
    font-size: 10px;  /* ← tamaño reducido en móvil */
  }
.tabla-descripciones_smart {
  width: 90%;
  border-collapse: collapse;
  font-size: 14px;
}
}
/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 768px) {
  .grid-container_smart {
    grid-template-columns: repeat(4, 1fr);
  }
  .Switches {
    padding-left: 15px;
    padding-right: 15px; /* ← espacio lateral en móviles */
  }
  .Switches h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .grid-container_smart {
    grid-template-columns: repeat(2, 1fr);
  }

  .tabla-descripciones_smart {
    font-size: 10px;
  }
}

/* ===== ESTILO PARA APLIQUES ===== */
.galeria-apliques {
  text-align: center;
  max-width: 1200px;
  padding: 10px 5%;
  margin: 0 auto;
}

.titulo-galeria {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* --- Grilla --- */
.grid-apliques {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  justify-items: center;
  max-width: 1200px; /* 🔹 límite de ancho */
  margin: 0 auto;    /* centrado */
}

/* --- Tarjeta --- */
.tarjeta {
  background: transparent;
  border-radius: 8px;
  color: black;
  width: 100%;
  padding: 6px;
  cursor: pointer;
  animation: aparecerSuave 0.6s ease-out forwards;
  animation-fill-mode: forwards; /* asegura que el estado final se mantenga */
  will-change: transform, opacity;
  transform-origin: top center;
}
.tarjeta img {
  max-width: 100%; /* 🔹 limita el ancho */
  width: 100%;      /* 🔹 se adapta al contenedor */
  height: auto;     /* 🔹 mantiene proporción */
  display: block;
  margin: 0 auto;   /* 🔹 centra la imagen */
  margin-bottom: 4px;
}

.tarjeta:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.5);
}

/* Texto abajo */
.nombre {
  font-size: 1.2rem;
  font-weight:500;
  margin-bottom: 6px;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto; /* centra horizontalmente */
  text-align: center; 
}

/* Imagen cuadrada */
.imagen {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-weight: bold;
}

/* --- Responsividad --- */
@media (max-width: 1024px) {
  .nombre {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
  }
}

@media (max-width: 600px) {
  .grid-apliques {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Modal --- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  padding-top: 50px; /* 🔹 empuja la ficha hacia abajo */
  box-sizing: border-box;
}
#modal-img {
  max-width: 600px;   /* 🔹 tamaño máximo en PC */
  width: 100%;        /* 🔹 se adapta si el espacio es menor */
  max-height: 60vh;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}
/* contenedor interno */
.modal-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* imagen */
.modal-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 🔹 centra horizontalmente imagen y texto */
  justify-content: center;
  max-width: 600px;      /* 🔹 igual al max-width de la imagen */
  margin: 0 auto;
}

/* Cerrar botón */
.cerrar {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cerrar:hover {
  opacity: 0.7;
}

/* --- Botones de navegación elegantes --- */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.25); /* 🔹 más visible de entrada */
  font-size: 3.5rem;
  font-weight: 200;
  cursor: pointer;
  padding: 0;
  opacity: 0.8; /* 🔹 visible pero suave */
  transition: opacity 0.25s ease-out, color 0.25s ease-out;
  user-select: none;
}

.prev:hover, .next:hover {
  opacity: 1; /* 🔹 fade in al hover */
  color: rgba(255, 255, 255, 0.8);
}

.prev { left: 80px; }
.next { right: 80px; }

@media (max-width: 768px) {
  #modal-img {
    margin-top: 60px;   /* 🔹 empuja la imagen hacia abajo */
    max-width: 90%;
    max-height: 50vh;
  }
}

@media (max-width: 768px) {
  .modal-inner {
    max-width: 100%; /* 🔹 en móvil ocupa todo el ancho */
    padding: 0 10px; /* 🔹 un poquito de aire lateral */
  }

  .prev, .next {
    font-size: 2.5rem;
  }

  .prev { left: 5px; }  /* 🔹 flecha izquierda más cerca del borde */
  .next { right: 5px; } /* 🔹 flecha derecha más cerca del borde */

  .cerrar {
    top: 20px;
    right: 25px;
    font-size: 2.2rem;
  }
}

.ficha-texto {
  text-align: center;
  color: #fff;
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.2;
  max-width: 80%;
}

.ficha-texto h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  .ficha-texto {
    font-size: 0.9rem;      /* un poco más chico */
    line-height: 1.3;       /* más aire en pantallas pequeñas */
    max-width: 90%;         /* aprovecha mejor el ancho del móvil */
  }

  .ficha-texto h3 {
    font-size: 1.1rem;      /* reduce tamaño del título */
    margin-bottom: 8px;     /* ajusta espaciado */
  }
}

/* ===== ANIMACIÓN DE ENTRADA PARA LAS TARJETAS DE APLIQUES===== */

/* Definición de la animación */
@keyframes aparecerSuave {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pequeño retardo escalonado para que entren una tras otra */
.tarjeta:nth-child(1) { animation-delay: 0.05s; }
.tarjeta:nth-child(2) { animation-delay: 0.1s; }
.tarjeta:nth-child(3) { animation-delay: 0.15s; }
.tarjeta:nth-child(4) { animation-delay: 0.2s; }
.tarjeta:nth-child(5) { animation-delay: 0.25s; }
.tarjeta:nth-child(6) { animation-delay: 0.3s; }
.tarjeta:nth-child(7) { animation-delay: 0.35s; }
.tarjeta:nth-child(8) { animation-delay: 0.4s; }
.tarjeta:nth-child(9) { animation-delay: 0.45s; }
.tarjeta:nth-child(10) { animation-delay: 0.5s; }
.tarjeta:nth-child(11) { animation-delay: 0.55s; }
.tarjeta:nth-child(12) { animation-delay: 0.6s; }
.tarjeta:nth-child(13) { animation-delay: 0.65s; }
.tarjeta:nth-child(14) { animation-delay: 0.7s; }
.tarjeta:nth-child(15) { animation-delay: 0.75s; }
/* podés seguir aumentando si tu grilla tiene más tarjetas */

/* Compensar el header fijo en TODAS las anclas */
[id] {
  scroll-margin-top: 120px;  /* Ajustá 10px arriba o abajo si quieres */
}


/* Sección de las cosas solares */
.solares-seccion {
  font-size: 28px;
  margin-bottom: 20px;
}

.neon { 
  text-shadow:
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff;
}


.modal-solar {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-solar-inner {
  width: 90%;
  height: 90%;
  background: none;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
}
/* wrapper that contiene el iframe y la capa captadora */
.modal-solar-iframe-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* iframe al 100% */
#modal-solar-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.modal-solar-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  font-size: 22px;
  line-height: 22px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 9999;
  transition: background 0.2s ease;
}

.modal-solar-close:hover {
  background: rgba(0,0,0,0.9);
}

@media (max-width: 768px) {
  .modal-solar-close {
    width: 20px;       /* más pequeño */
    height: 20px;
    font-size: 14px;   /* la X más chiquita */
    top: 6px;         /* lo acercamos un poquito */
    right: 6px;
    padding: 0;       
  }
}


.limite {
  max-width: 1200px;   /* PC */
  margin: 0 auto;      /* Centrar */
  padding: 20px;       /* Separación interna opcional */
}

@media (max-width: 768px) {
  .limite {
    max-width: 480px;
    padding: 10px, 10px, 30px, 10px;
  }
}

@media (min-width: 769px) {
  .modal-solar-inner {
    width: 800px; /* o el valor que quieras */
  }
}


.hogar-solar {
  background: url(Images/fondo_fichas_hogar.png);
  background-size: cover;        /* Hace que la imagen cubra toda la pantalla */
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

.decorativas {
  background: url(Images/fondo_fichas_decorativas.png);
  background-size: cover;        /* Hace que la imagen cubra toda la pantalla */
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* Contenedor de la portada */
.portada2 {
width: 100%;
padding-top: 10px;
display: flex;
justify-content: center;
}


/* Imagen responsive */
.portada2 img {
width: 100%; 
max-width: 640px; 
height: auto; 
padding: 10px;
}

.portada2 video {
  width: 100%;
  max-width: 400px;
  height: auto;
  padding: 0px;
  display: block;
  margin: 0 auto;
}

.titulo_solar {
  text-align: center;       /* centrado horizontal */
  font-family: Verdana, sans-serif;
  font-size: 2em;           /* tamaño PC, modificable a gusto */
  font-weight: bold;        /* opcional, si querés que resalte */
  margin: 0px 0;           /* margen superior e inferior */
  color: #000;              /* cambiá a tu color si querés */
}

.subtitulo_solar {
  text-align: center;     
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif;
  font-size: 1.1em;      
  font-weight: bold;     
  margin: 0px 0;       
  color: #000;      
}


/* Ajuste para móviles */
@media (max-width: 768px) {
  .titulo_solar {
    font-size: 1em;       /* tamaño reducido en móviles */
    margin: 0px 0;         /* margen más pequeño */
  }
}
@media (max-width: 480px) {
  .subtitulo_solar {
    font-size: 0.8em;       /* tamaño reducido en móviles */
    margin: 0px 0;         /* margen más pequeño */
  }
}

.grilla-ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px; /* espacio entre fotos y características */
  margin-top: 10px;
}


/* imagen dentro de la grilla */
.grilla-ficha__img {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente */
  padding: 20px
}

.grilla-ficha__img img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* --- FORMATO GENERAL PARA AMBOS BLOQUES --- */
.grilla-ficha__caracteristicas ul,
.grilla-ficha__caracteristicas--izq ul {
  padding-left: 0;          /* misma sangría */
  margin: 0;                /* elimina variación entre bloques */
  list-style-position: inside;
}

.grilla-ficha__caracteristicas li,
.grilla-ficha__caracteristicas--izq li {
  margin-bottom: 0px;       /* menos espaciado entre líneas */
  font-size: 1.05em;        /* tamaño bonito */
  line-height: 1.3;         /* interlineado cómodo pero compacto */
  font-family: inherit;     /* garantiza misma fuente heredada */
}

/* --- TITULOS UNIFORMES (solo cambia alineación) --- */
.grilla-ficha__caracteristicas h2,
.grilla-ficha__caracteristicas--izq h2 {
  margin-bottom: 18px;
  font-size: 1.6em;
  font-weight: bold;
}

/* --- BLOQUE DERECHA --- */
.grilla-ficha__caracteristicas {
  text-align: right;
  padding-right: 20px;
}

/* --- BLOQUE IZQUIERDA --- */
.grilla-ficha__caracteristicas--izq {
  text-align: left;
  padding-left: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .grilla-ficha {
    grid-template-columns: 1fr; /* una sola columna en móvil */
    gap: 20px;
  }
}


/*---ACÁ LA GRILLA PARA EL RENDIMIENTO DE LAS POWER STATION---*/
.galeria-electrodomesticos {
  text-align: center;
  padding: 10px 5%;
}

.titulo-galeria-electro {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* --- Grilla --- */
.grid-electrodomesticos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  justify-items: center;
  max-width: 600px; /* 🔹 límite de ancho */
  margin: 0 auto;    /* centrado */
}

/* --- Tarjeta --- */
.tarjeta_electro {
  background: transparent;
  border-radius: 8px;
  color: black;
  width: 100%;
  padding: 6px;
  cursor: pointer;
  animation: aparecerSuave 0.6s ease-out forwards;
  animation-fill-mode: forwards; /* asegura que el estado final se mantenga */
  will-change: transform, opacity;
  transform-origin: top center;
}
.tarjeta_electro img {
  max-width: 100%; /* 🔹 limita el ancho */
  width: 100%;      /* 🔹 se adapta al contenedor */
  height: auto;     /* 🔹 mantiene proporción */
  display: block;
  margin: 0 auto;   /* 🔹 centra la imagen */
  margin-bottom: 4px;
}

.tarjeta_electro:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.5);
}

/* Texto abajo */
.duracion {
  font-size: 1.2rem;
  font-weight:500;
  margin-bottom: 6px;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto; /* centra horizontalmente */
  text-align: center; 
}

/* Imagen cuadrada */
.imagen2 {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-weight: bold;
}

/* --- Responsividad --- */
@media (max-width: 1024px) {
  .duracion {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
  }
}

@media (max-width: 600px) {
  .grid-electrodomesticos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Grilla decorativas --- */
.grilla-decorativas {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 2 columnas en PC y móviles */
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
}
@media (max-width: 768px) {
.grilla-decorativas {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Cada elemento de la grilla */
.decorativa-item {
  text-align: center;
  text-decoration: none;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0;
  padding-right: 0;
}

/* Títulos */
.decorativa-item h3 {
  font-size: 1.4rem;
  color: #000;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.decorativa-item h2 {
  text-align: center;
  margin: 0 auto;
  width: 90%;   /* igual al ancho de la imagen */
}

/* Imagen */
.decorativa-item img {
  width: 100%;
  margin-top: 0px;
  padding: 10px;
  border-radius: 10px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover brillo */
.decorativa-item img:hover {
  filter: brightness(1.25);
  transform: scale(1.03);
}

.decorativa-item img:hover {
  filter: brightness(1.35) drop-shadow(0 0 12px rgba(255,255,255,0.8));
  transform: scale(1.03);
}

/* Títulos más pequeños en móviles */
@media (max-width: 600px) {
  .decorativa-item h3 {
    font-size: 1.1rem;
  }
}

/* Evitar que las tarjetas ocupen todo el ancho en móviles */
@media (max-width: 600px) {
  .decorativa-item {
    max-width: 250px;   
    margin: 0 auto;   
  }

  .decorativa-item img {
    border-radius: 8px;
    max-width: 160px;
  }
}
@media (max-width: 600px) {
  .grilla-decorativas {
    gap: 5px;        /* antes 25px → ahora más compacto */
    padding: 10px;    /* si no tenías padding, este lo limita un poco */
  }

  .decorativa-item {
    padding: 5px;     /* tarjetas más ajustadas */
    max-width: 250px; 
    margin: 0 auto;
  }

  .decorativa-item h3 {
    font-size: 1.05rem;
  }
}

.portada2 video {
  width: 100%;
  max-width: 600px; /* límite en PC */
  height: auto;
  display: block;
  margin: 0 auto; /* centra el video */
}

@media (max-width: 600px) {
  .portada2 video {
    max-width: 380px; /* límite en móviles */
  }
}

.info-decorativas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px; /* espacio entre fotos y características */
  margin-top: 30px;
}

/*Estilo para la info de las lámparas decorativas*/
/* Contenedor general */
.info-deco {
  padding: 10px;
  color: #ffffff;         /* blanco para todo */
}

/* Título */
.titulo-info-deco {
  font-weight: bold;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 10px;
  margin-top: 20px;
  color: #ffffff;
}

/* Párrafos */
.text_info_deco {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.1;
  margin: 6px 0;
  color: #ffffff;
}

/* --- Ajustes para móviles --- */
@media (max-width: 600px) {

  .info-deco {
    padding: 12px;
  }

  .titulo-info-deco {
    font-size: 1.4rem;
    text-align: center;   /* opcional, pero queda fino en móviles */
      margin-top: 10px;
  }

  .text_info_deco {
    font-size: 1rem;
    line-height: 1;
  }
}

@media (max-width: 768px) {
  .salto_línea {
    display: none;
  }
}

/* Contenedor de vídeo*/
.ficha_vertical {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background: none;
  padding: 30px; /* opcional */
}

/* Imagen AGOTADO sobrepuesta */
.ficha_vertical .agotado {
  position: absolute;
  bottom: 10px;        /* ajuste vertical */
  right: 10px;         /* ajuste horizontal */
  width: 200px;         /* tamaño del sello */
  z-index: 20;
  pointer-events: none; /* no bloquea clics */
}

@media (max-width: 480px) {
  .ficha_vertical .agotado {
    width: 160px;   /* más pequeño */
    bottom: 0px;   /* más ajustado */
    right: 0px;
  }
}

/* Ajuste del video */
.ficha_vertical video {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 6px;
}


/* Imagen responsive */
.ficha_vertical img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .ficha_vertical img {
    max-width: 390px;
  }
}


.ficha_vertical video,
.ficha_vertical img {
  width: 100%;
  max-width: 480px;
  height: auto;
  padding: 0px;
  display: block;
  margin: 0 auto;
}

.titulo2 {
  font-size: 1.6rem; /* PC por defecto */
  text-align: center;
}

/* Móviles (ancho <= 640px, por ejemplo) */
@media (max-width: 768px) {
  .titulo2 {
    font-size: 1.2rem;
    text-align: center;
  }
}

.parrafo1 {
  font-size: 1.1rem;     /* PC */
  line-height: 1.55;
  max-width: 720px;      /* límite en PC */
  margin: 0 auto;        /* centrar */
}

/* Móviles */
@media (max-width: 768px) {
  .parrafo1 {
    font-size: 0.8rem;
    max-width: 340px;    /* límite en móvil */
  }
}

.garantia {
  font-size: 1.6rem;
  line-height: 1.25;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .garantia {
    font-size: 1.3rem;
    max-width: 340px;    /* límite en móvil */
  }
}


/* =============================
GRILLA DE LAS LÁMPARAS (TODAS LAS VERSIONES)
============================= */
/* ===== CENTRADO FORZADO Y LIMPIEZA DE HERENCIA ===== */
.grid-lamps {
  /* layout */
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;

  /* tamaño / centrado */
  width: min(1080px, calc(100% - 20px)) !important; /* ocupa casi todo el viewport pero con pequeño margen lateral */
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;

  /* aseguremos que no haya offsets heredados */
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* Forzamos centrado interno de celdas */
.grid-lamps {
  justify-content: center !important;
  justify-items: center !important;
  align-items: start !important;
}

/* Si algo dentro aplica márgenes izquierdos, los reseteamos (sólo dentro de la grilla) */
.grid-lamps * {
  margin-left: 0 !important;
  padding-left: 0 !important;
  box-shadow: none !important; /* por si hay sombras que “ilusionan” desbalance */
  transform: none !important;
}

/* ===== Mobile: 3 columnas limitando ancho total para centrar perfectamente ===== */
@media (max-width: 600px) {
  .grid-lamps {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    width: min(420px, calc(100% - 16px)) !important;
    max-width: 420px !important;
        margin: 0 auto !important;
    padding: 0 4px !important;
    justify-content: center !important;
  }

.grid-lamps {
  gap: 4px !important;        /* en vez de 0, un poquito queda más prolijo */
  padding: 0 4px !important;  /* reduce margen lateral total */
}

  .grid-lamps .lamps {
    width: 100% !important;      /* que cada tarjeta use toda la celda */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;    /* si querés menos, baja este valor */
  }

  .grid-lamps img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Forzar que contenedores comunes no añadan padding horizontal en móvil */
@media (max-width: 600px) {
  header, .limite, .container, .productos, .decorativas {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

  }

  body, html {
    overflow-x: hidden !important; /* evita que algo fuera de pantalla desplace visualmente */
  }
}

/* =============================
CLON DE PRODUCTO → LAMPS
============================= */
.lamps {
border: none;
border-radius: 10px;
padding: 5px;
margin-bottom: 10px;
cursor: pointer;
transition: transform 0.3s ease;
overflow: hidden;
}

.lamps:hover {
transform: scale(1.05);
}

/* Imagen */
.lamps img {
  background: rgba(85, 116, 129, 0.3); /* azul translúcido */
width: 100%;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 8px;
}

/* Título h1 */
.lamps h1 {
margin-bottom: 15px;
font-size: 1.5rem;
text-align: center;
}

/* Subtítulo h2 (alineado a la derecha) */
.lamps h2 {
margin-bottom: 10px;
font-size: 1.2rem;
text-align: right;
}

/* Sub-subtítulo h3 */
.lamps h3 {
margin-bottom: 0px;
font-size: 0.8rem;
text-align: center;
}

/* Párrafos */
.lamps p {
margin-bottom: 5px;
font-size: 1rem;
text-align: left;
}

/* Tablas internas */
.lamps table {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-collapse: collapse;
font-size: 0.9rem;
}

.lamps table td:last-child {
font-weight: bold;
}

.lamps table thead th {
border-bottom: 1px solid green;
padding: 2px;
text-transform: uppercase;
}

.lamps table tbody td {
border-bottom: 1px solid green;
padding: 6px 8px;
text-align: center;
overflow: hidden;
}

/* Versión móvil */
@media (max-width: 768px) {
.lamps {
width: 95%;
margin: 10px 0;
}

.lamps h1 {
font-size: 1rem;
text-align: center;
}

.lamps h2 {
font-size: 0.9rem;
text-align: center;
}
.lamps h3 {
font-size: 0.7rem;
text-align: center;
}

.lamps table {
font-size: 0.8rem;
}

.lamps table th,
.lamps table td {
padding: 4px;
}
}
/* MODAL PARA LAS LÁMPARAS DECORATIVAS */
.modal-deco {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-deco-inner {
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-deco-iframe-wrap {
  width: 100%;
  height: 90vh;               
}

/* Iframe full */
#modal-deco-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Botón cerrar */
.modal-deco-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(44, 43, 43, 0.7);
  color: white;
  border: none;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10000;
}

.modal-deco-close:hover {
  background: rgba(0,0,0,0.9);
}

@media (max-width: 768px) {

  .modal-deco-inner {
    width: 94%;
    max-width: 94%;
    height: 94vh;          /* el modal ocupa 94% del alto total */
    padding: 0;
    border-radius: 12px;
    overflow: hidden;      /* evita que algo sobresalga */
    background: transparent; /* quitamos el fondo blanco extra */
  }

  .modal-deco-iframe-wrap {
    width: 100%;
    height: 100%;          /* ocupa TODO el alto */
    position: relative;
    padding: 0;            /* quitamos padding 16:9 */
  }

  #modal-deco-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .modal-deco-close {
    width: 26px;
    height: 26px;
    font-size: 14px;
    padding: 0;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
  }
}
.limite {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}

@media (max-width: 600px) {
   .limite {
    max-width: 100%;
  }
}

.limite2 {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}

@media (max-width: 600px) {
   .limite2 {
    max-width: 100%;
  }
}

.search_ficha {
  text-align: center;
  position: relative;
  max-width: 360px;
  margin: 40px auto;
  padding: 24px 20px;
  border-radius: 14px;

  /* Imagen de fondo */
  background-image: "../Images/code bar fondo.png";
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Sombra elegante */
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}

@media (max-width: 600px) {

  .search_ficha {
    max-width: 92%;
    margin: 20px auto;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .search_ficha input {
    font-size: 18px;
    padding: 14px;
  }

  .search_ficha button {
    width: 100%;
    font-size: 16px;
    padding: 14px;
    margin-top: 6px;
  }

  .search_ficha .resultado {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* CONTENEDOR RESULTADO */
.resultado {
  margin-top: 40px;
  text-align: center;
  color: #000;
}

/* CÓDIGO */
.ficha-codigo {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.ficha-descripcion {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 18px;
  text-transform: uppercase;
}

/* PRECIO (PROTAGONISTA) */
.ficha-precio {
  font-size: 48px;
  font-weight: bold;
  margin: 10px 0 15px;
}

/* STOCK */
.ficha-stock {
  font-size: 14px;
  letter-spacing: 1px;
}

.btn-cerrar {
  margin-top: 25px;
  padding: 8px 22px;
  font-size: 14px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: #2dbf4f;
  color: #fff;
  transition: background 0.3s ease;
}

.btn-cerrar:hover {
  background: #25a845;
}

.decorativa-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  cursor: pointer;
}

/* ==============================
   CINTAS – CONTENEDOR DE VIDEOS
============================== */

.cintas-contenedor {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC: 4 columnas */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;

  /* CLAVE para centrar última fila */
  justify-content: center;
}

/* Videos */
.cintas-contenedor video {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;   /* NO recorta */
  background: none;
  display: block;
  border-radius: 10px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .cintas-contenedor {
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    padding: 12px;
  }

  .cintas-contenedor video {
    border-radius: 8px;
  }
}
.decorativa-item h3 {
  margin: 0px 0 6px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: #222;
  text-align: center;
}

.decorativa-imagen {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  background-color: rgba(0, 0, 0, 0.8);
}
.decorativa-imagen img:hover {
  filter: brightness(1.35) drop-shadow(0 0 12px rgba(255,255,255,0.8));
  transform: scale(1.03);
}



/* --- Grilla Novedades horizontales --- */
.grilla-nov-hor {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 22px 10px;
  max-width: 1080px;
  margin: 0 auto;
  background: transparent;
}
@media (max-width: 600px) {
.grilla-nov-hor {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 10px;
  }
}


/* Elementos de la grilla */
.nov-hor-item {
  text-align: center;
  text-decoration: none;
  border: none;
  background: rgba(107, 92, 92, 0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0;
  padding-right: 0;
}

/* Títulos */
.nov-hor-item h3 {
  font-size: 1.4rem;
  color: #000;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.nov-hor-item h2 {
  text-align: center;
  margin: 0 auto;
  width: 90%;   /* igual al ancho de la imagen */
}

/* Imagen */
.nov-hor-item img {
  width: 100%;
  margin-top: 0px;
  padding: 0px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover brillo */
.nov-hor-item img:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
}

.nov-hor-item img:hover {
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(255,255,255,0.8));
  transform: scale(1.03);
}

/* Títulos más pequeños en móviles */
@media (max-width: 600px) {
  .nov-hor-item h3 {
    font-size: 0.8rem;
  }
}

/* Evitar que las tarjetas ocupen todo el ancho en móviles */
@media (max-width: 600px) {
  .nov-hor-item {
    max-width: 250px;   
    margin: 0 auto;   
  }

  .nov-hor-item img {
    border-radius: 8px;
    max-width: 160px;
  }
}
@media (max-width: 600px) {
  .grilla-nov-hor {
    gap: 5px;        /* antes 25px → ahora más compacto */
    padding: 10px;    /* si no tenías padding, este lo limita un poco */
  }

  .nov-hor-item {
    padding: 5px;     /* tarjetas más ajustadas */
    max-width: 250px; 
    margin: 0 auto;
  }

  .nov-hor-item h3 {
    font-size: 0.8rem;
  }
}

/* --- Grilla Novedades VERTICALES --- */
.grilla-nov-ver {
  display: grid;
  grid-template-columns: repeat(6, 1fr); 
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto;
  background: transparent;
}
@media (max-width: 600px) {
.grilla-nov-ver {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Elementos de la grilla */
.nov-ver-item {
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: rgba(107, 92, 92, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0;
  padding-right: 0;
}

/* Títulos */
.nov-ver-item h3 {
  font-size: 1rem;
  color: #000;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.nov-ver-item h2 {
  text-align: center;
  margin: 0 auto;
  width: 90%;   /* igual al ancho de la imagen */
}

/* Imagen */
.nov-ver-item img {
  width: 100%;
  margin-top: 0px;
  padding: 0px;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover brillo */
.nov-ver-item img:hover {
  filter: brightness(1.10);
  transform: scale(1.03);
}

.nov-ver-item img:hover {
  filter: brightness(1.35) drop-shadow(0 0 12px rgba(255,255,255,0.8));
  transform: scale(1.03);
}

/* Títulos más pequeños en móviles */
@media (max-width: 500px) {
  .nov-ver-item h3 {
    font-size: 0.8rem;
  }
}

/* Evitar que las tarjetas ocupen todo el ancho en móviles */
@media (max-width: 600px) {
  .nov-ver-item {
    max-width: 250px;   
    margin: 0 auto;   
  }

  .nov-ver-item img {
    border-radius: 8px;
    max-width: 160px;
  }
}
@media (max-width: 600px) {
  .grilla-nov-ver {
    gap: 5px;        /* antes 25px → ahora más compacto */
    padding: 10px;    /* si no tenías padding, este lo limita un poco */
  }

  .nov-ver-item {
    padding: 5px;     /* tarjetas más ajustadas */
    max-width: 250px; 
    margin: 0 auto;
  }

  .nov-ver-item h3 {
    font-size: 0.8rem;
  }
}




.scroll-extra {
  scroll-margin-top: 500px;
}


/* clase para las de doble altura*/
.doble_altura {
  width: 100%;
  height: 600px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.doble_altura img {
  max-height: 600px;
  width: auto;
  height: auto;
  display: block;
}

/* 📱 Móviles */
@media (max-width: 768px) {
  .doble_altura {
    height: 300px;       /* más pequeño en móvil */
  }

  .doble_altura img {
    max-height: 300px;
  }
}

#shareBtn {
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 30% 30%, #03be03, #00cc00);
  color: #f85555;
  font-size: 24px;
  cursor: pointer;
  z-index: 9999;

  /* Glow LED */
  box-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    inset 0 0 10px rgba(255,255,255,0.3);

  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* Animación suave tipo pulso */
#shareBtn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0,255,0,0.3);
  animation: pulse 2s infinite;
  z-index: -1;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Hover */
#shareBtn:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 40px #00ff00,
    inset 0 0 12px rgba(255,255,255,0.5);
}

@media (max-width: 768px) {
  #shareBtn {
    bottom: 20px;
    right: 20px;
    width: 25px;
    height: 25px;
    font-size: 12px;
    bottom: 20px;
    right: 15px;

    box-shadow:
      0 0 4px #00ff00,
      0 0 8px #00ff00,
      0 0 16px #00ff00;
  }
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99999;
  overflow: hidden;
}

/* VIDEO */
#preloader-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* BARRA */
.loader-bar {
  position: absolute;
  bottom: 40px;
  width: 60%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  overflow: hidden;
}

.loader-progress {
  height: 100%;
  width: 0%;
  background: #00ff88;
  transition: width 0.3s;
}

/* DESAPARECER */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.decolamp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 1080px;
  margin: 0 auto; /* centrar en pantalla */
  padding: 10px;
}
/*PRELOADER NO SALE EN PC */
@media (min-width: 769px) {
  #preloader {
    display: none !important;
  }
}
/* ===== GRILLA LÁMPARAS DE TECHO ===== */
.grid-techo {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px 16px;

  max-width: 1080px;
  width: 100%;              /* 🔥 evita que crezca más del viewport */
  margin: 0 auto;
  padding: 0 6px;
  box-sizing: border-box;

  overflow: hidden;         /* 🔥 corta cualquier desborde */
}

/* ===== ITEMS ===== */
.lamps-techo {
  min-width: 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;         /* 🔥 nada se sale */
}

/* ===== IMÁGENES ===== */
.lamps-techo img {
  width: 100%;
  cursor: pointer;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* 🔥 hover */
.lamps-techo:hover img {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(144, 238, 144, 0.8));
  transform: scale(1.03);
}
/* ===== TEXTO (MUY IMPORTANTE) ===== */
.lamps-techo h3 {
  font-size: 0.9rem;
  margin: 8px 0 0 0;

  word-break: break-word;   /* 🔥 corta textos largos */
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .grid-techo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lamps-techo h3 {
    font-size: 0.6rem;
  }
}

/* HOME + NOVEDADES DESKTOP */
.novedades-home-desktop {
  width: 1080px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  align-items: start;
}

/* ===============================
   SIDEBAR + SUBMENÚ GALERÍA FINAL
================================= */

/* SIDEBAR */
.home-sidebar {
  position: sticky;
  top: 100px;
  padding: 20px;
  border-radius: 16px;
  z-index: 20;

  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.home-sidebar h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

/* MENÚ PRINCIPAL */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu > li {
  position: relative;
  margin: 6px 0;
}

.sidebar-menu > li > a {
  position: relative;
  display: block;
  padding: 4px 0;
  text-decoration: none;
  color: #111;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.25s ease;
}

.sidebar-menu > li > a:hover {
  padding-left: 8px;
  color: #006633;
}

/* puntico verde */
.sidebar-menu > li > a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #33CC33;
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform .25s ease;
}

.sidebar-menu > li:hover > a::before {
  transform: translateY(-50%) scale(1);
}

/* badge NUEVO */
.sidebar-menu > li:last-child > a::after {
  content: "nuevo";
  font-size: 10px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #33CC33;
  color: white;
  vertical-align: middle;
  font-weight: 600;
}

/* ===============================
   SUBMENÚ GALERÍA HORIZONTAL
================================= */
.floating-submenu {
  position: absolute;
  left: calc(100% + 14px);
  top: 0;
  display: grid;
  grid-template-columns: repeat(4, 120px); /* base por defecto */
  gap: 14px;
  padding: 16px;
  list-style: none;

  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);

  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.25s ease;
  z-index: 50;
}

.has-submenu:hover .floating-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.floating-submenu li {
  margin: 0;
  padding: 0;
}

.floating-submenu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: #222;
  text-align: center;
  transition: all 0.25s ease;
}

.floating-submenu a:hover {
  color: #0e19b8;
}

.floating-submenu a::before {
  content: "";
  width: 110px;
  height: 110px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  transition: transform .25s ease;
}

.floating-submenu a:hover::before {
  transform: scale(1.05);
}

/* ===============================
   COLUMNAS SEGÚN CATEGORÍA
================================= */

/* Balas */
.balas-menu .floating-submenu {
  grid-template-columns: repeat(4, 120px);
}

/* Bombillos */
.bombillos-menu .floating-submenu {
  grid-template-columns: repeat(4, 120px);
}

/* Oficina */
.oficina-menu .floating-submenu {
  grid-template-columns: repeat(4, 120px);
}

/* Swichería */
.switches-menu .floating-submenu {
  grid-template-columns: repeat(5, 110px);
}

/* Swichería WIFIrifí */
.wifi-menu .floating-submenu {
  grid-template-columns: repeat(5, 110px);
}

/* Apliques */
.apliques-menu .floating-submenu {
  grid-template-columns: repeat(3, 120px);
}

/* Decorativas */
.decorativas-menu .floating-submenu {
  grid-template-columns: repeat(3, 120px);
}

/* SOLO DESKTOP */
@media (max-width: 768px) {
  .home-sidebar {
    display: none;
  }
}

/* ===============================
   FOTOS PARA SUBMENÚS
================================= */

/* BALAS LED */
.balas-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/bala_techo.png");
}
.balas-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/bala_kardan.png");
}
.balas-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/bala_piso.png");
}
.balas-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/bala_piscina.png");
}

/* BOMBILLOS LED */
.bombillos-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/bombillo_pinpon.png");
}
.bombillos-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/bombillo_a60bulb.png");
}
.bombillos-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/bombillo_torpedo.png");
}
.bombillos-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/bombillo_aspas.png");
}
.bombillos-menu .floating-submenu li:nth-child(5) a::before {
  background-image: url("Images/bombillo_gu10.png");
}
.bombillos-menu .floating-submenu li:nth-child(6) a::before {
  background-image: url("Images/bombillo_recargable.png");
}
.bombillos-menu .floating-submenu li:nth-child(7) a::before {
  background-image: url("Images/bombillo_vintage.png");
}

/* OFICINA Y COMERCIO */
.oficina-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/oficina_antipolvo.png");
}

.oficina-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/oficina_t5.png");
}

.oficina-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/oficina_t8.png");
}

.oficina-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/oficina_lineal.png");
}

/* SWICHERÍA */
.switches-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/blanca_eco.png");
}

.switches-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/blanco_capri.png");
}

.switches-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/blanco_premium.png");
}

.switches-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/blanco_diamante.png");
}

.switches-menu .floating-submenu li:nth-child(5) a::before {
  background-image: url("Images/blanco_lujo.png");
}

.switches-menu .floating-submenu li:nth-child(6) a::before {
  background-image: url("Images/premium_plata.png");
}

.switches-menu .floating-submenu li:nth-child(7) a::before {
  background-image: url("Images/silver_luxury.png");
}

.switches-menu .floating-submenu li:nth-child(8) a::before {
  background-image: url("Images/plata_nordico.png");
}

.switches-menu .floating-submenu li:nth-child(9) a::before {
  background-image: url("Images/black_mirror.png");
}

.switches-menu .floating-submenu li:nth-child(10) a::before {
  background-image: url("Images/urbano_negro.png");
}

.switches-menu .floating-submenu li:nth-child(11) a::before {
  background-image: url("Images/black_luxury.png");
}

.switches-menu .floating-submenu li:nth-child(12) a::before {
  background-image: url("Images/black_plus.png");
}

.switches-menu .floating-submenu li:nth-child(13) a::before {
  background-image: url("Images/michell_negro.png");
}

.switches-menu .floating-submenu li:nth-child(14) a::before {
  background-image: url("Images/golden_luxury.png");
}

.switches-menu .floating-submenu li:nth-child(15) a::before {
  background-image: url("Images/arena.png");
}

/* SWICHERÍA WIFI*/
.wifi-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/interlight.png");
}

.wifi-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/mercury.png");
}

.wifi-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/miletto.png");
}

.wifi-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/steren.png");
}

.wifi-menu .floating-submenu li:nth-child(5) a::before {
  background-image: url("Images/tecnolite.png");
}

.wifi-menu .floating-submenu li:nth-child(6) a::before {
  background-image: url("Images/interlight_negra.png");
}

.wifi-menu .floating-submenu li:nth-child(7) a::before {
  background-image: url("Images/vatio_negra.png");
}

.wifi-menu .floating-submenu li:nth-child(8) a::before {
  background-image: url("Images/mercury_negra.png");
}

.wifi-menu .floating-submenu li:nth-child(9) a::before {
  background-image: url("Images/miletto_negra.png");
}

.wifi-menu .floating-submenu li:nth-child(10) a::before {
  background-image: url("Images/mileto_plata.png");
}

.wifi-menu .floating-submenu li:nth-child(11) a::before {
  background-image: url("Images/miletto_golden.png");
}

.wifi-menu .floating-submenu li:nth-child(12) a::before {
  background-image: url("Images/mercuryg2.png");
}

.wifi-menu .floating-submenu li:nth-child(13) a::before {
  background-image: url("Images/mercuryg2_negra.png");
}


/* APLIQUES */
.apliques-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/ap_modern.png");
}

.apliques-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/ap_vintage.png");
}

.apliques-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/ap_faroles.png");
}

.apliques-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/ap_ext_deco.png");
}

.apliques-menu .floating-submenu li:nth-child(5) a::before {
  background-image: url("Images/ap_guiadores.png");
}


/* LÁMPRARAS DECORATIVAS */
.decorativas-menu .floating-submenu li:nth-child(1) a::before {
  background-image: url("Images/deco_colgantes.png");
}

.decorativas-menu .floating-submenu li:nth-child(2) a::before {
  background-image: url("Images/deco_techo.png");
}

.decorativas-menu .floating-submenu li:nth-child(3) a::before {
  background-image: url("Images/deco_mesa.png");
}

.decorativas-menu .floating-submenu li:nth-child(4) a::before {
  background-image: url("Images/deco_chandelier.png");
}

.decorativas-menu .floating-submenu li:nth-child(5) a::before {
  background-image: url("Images/deco_doble_altura.png");
}

/* ===============================
   VIDEO PROMO SIDEBAR
================================= */
.sidebar-promo {
  margin-top: 25px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  transition: transform .25s ease;
}

.sidebar-promo:hover {
  transform: translateY(-3px);
}

.sidebar-promo img,
.sidebar-promo video {
  width: 100%;
  display: block;
  border-radius: 14px;
}


/* ===============================
   SUPER PROMO SEMANAL
================================= */

.superpromo {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 20px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background-image: url("Images/fondo_superpromo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.superpromo:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}

.superpromo a {
  display: block;
  width: 100%;
  height: 100%;
}

.superpromo video,
.superpromo img {
  width: 96%;
  height: 96%;
  object-fit: cover; /* llena sin deformar */
  display: block;
  margin: 2%;
  border-radius: 14px;
}

/* efecto brillo sutil */
.superpromo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.02) 45%,
    rgba(0,0,0,0.05) 100%
  );
  pointer-events: none;
}

/* Vídeos zona promocional */
.sidebar-promo {
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
}

.sidebar-promo video {
  width: 100%;
  display: block;
  border-radius: 14px;
  transition: opacity 0.25s ease;
}

.sidebar-promo {
  position: relative;
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
}

.sidebar-promo video {
  width: 100%;
  display: block;
  border-radius: 14px;
}

.promo-audio-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
  z-index: 10;
}

.promo-audio-btn:hover {
  transform: scale(1.08);
  background: rgba(0,0,0,0.75);
}

@media (max-width: 768px) {

  /* CONTENEDOR PRINCIPAL */
  .novedades-home-desktop {
    width: 94%;
    margin: 0 auto; /* 👈 centra todo */
    display: block; /* 🔥 eliminamos grid */
  }

  /* COLUMNA DERECHA (ahora única) */
  .home-novedades {
    width: 100%;
  }

  /* TÍTULOS */
  .titulo2 {
    font-size: 16px;
    text-align: center;
  }

  /* ===== GRILLAS ===== */

  /* antes 6 → ahora 3 */
  .grilla-nov-ver {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* antes 4 → ahora 2 */
  .grilla-nov-hor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* ITEMS */
  .nov-ver-item img,
  .nov-hor-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  /* SUPERPROMO */
  .superpromo {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  /* PORTADA centrada */
  #portada {
    background-position: center;
    background-size: cover;
    text-align: center;
  }

}