/* 
  -----------------------------------------------
  Archivo: css2025.css
  Descripcion: Version mejorada y responsive del CSS original.
  Incluye soporte para moviles, boton de menu y media queries.
  -----------------------------------------------
*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Capriola&family=Open+Sans:wght@300;400;600&family=Roboto:wght@400;500&family=Ubuntu:wght@300;400;500;700&display=swap');

/* Let's import the lovely google font, please keep this line at the top of your stylesheet */

body {background-image: url(../imagenes/fondo.png); margin: 0px;}
html, body {width: 100%; overflow-x: hidden;}

/* BLOQUEAR SCROLL cuando aparece el overlay */
body.overlay-abierto {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
}

/* CONTENEDOR GENERAL */
#contenedor {
width: 100%;
max-width: 1366px;
margin: 0 auto;
background: #FFF;
-moz-box-shadow: 0 0 10px 5px #c3c3c3;
-webkit-box-shadow: 0 0 10px 5px #c3c3c3;
box-shadow: 0 0 10px 5px #c3c3c3;
}

/* Facebook en OFERTAS */
.fb-page-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center; /* opcional: centrado */
}

.fb-page {
  width: 100% !important;
}

/* CONTENEDOR FLEXIBLE */
#encabezado {
  display: flex;
  background-color: #333;
  justify-content: space-between; /* logo + textos alineados de izquierda a derecha */
  align-items: center; /* 🔑 centra logo y textos en la misma línea */
  flex-wrap: wrap;
  gap: 20px;
  padding: 5px;
}

/* LOGO */
#logo {
  max-width: 260px;
  margin: 3px 0 3px 47px;
  flex-shrink: 0;
}

#logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* CONTENEDOR DE TEXTOS EN FILA */
#encabezado-textos {
  display: flex;
  padding: 10px;
  flex-direction: row; /* texto en línea */
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* TÍTULO */
#encabezado1 {
  text-transform: uppercase;
  font-weight: bold;
  color: #e94f31;
  border-right: 3px solid #00828C;
}

#encabezado1 h1 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  color: #e94f31;
  line-height: 1.5;
  margin: 0;
  padding: 0 10px 0 0;
  text-align: right;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* DESCRIPCIÓN */
#encabezado2 {
  max-width: 500px;
	

}
#encabezado2 p {
  font-family: 'Ubuntu', sans-serif;
  line-height: 1.3;
  font-size: 12px;
  color: #C0C0C0;
  text-align: left;
  padding: 0;
  margin: 0;
}
#encabezado2 p:before {content: '» '; position:  relative; color: #e94f31;}



/* =====================================
   1. BLOQUES DE TEXTO + DESTACADAS + CARROUSEL NOVEDADES- INDEX.PHP
===================================== */


.carrusel-viewport {
  overflow: hidden;
  width: 100%;
}

.carrusel-items {
  display: flex;
  transition: transform 0.4s ease;
}

.producto-card {
  min-width: 25%; /* 4 productos por fila */
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}

.producto-card img {
  width: 100%;
  border-radius: 8px;
}

.btn-prev, .btn-next {
  cursor: pointer;
  background: #333;
  color: white;
  border: none;
  font-size: 20px;
  padding: 5px 10px;
  margin: 0 5px;
}


/* CONTENEDOR DE IMAGENES DENTRO DEL CARRUSEL */
.producto-carrusel {
  position: relative;
  width: 100%;
  padding-top: 66.66%; /* proporción 3:2, mantiene espacio para la imagen */
  overflow: hidden;
  background-color: #fff;
}

.producto-carrusel img.default-img,
.producto-carrusel img.hover-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.producto-carrusel img.hover-img {
  opacity: 0;
  z-index: 2;
}

.producto-carrusel img.default-img {
  z-index: 1;
}

.producto-carrusel:hover img.hover-img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.producto-carrusel:hover img.default-img {
  opacity: 0;
}

/* === VERSIÓN RESPONSIVE === */
@media (max-width: 768px) {
  .producto-card {
    flex: 0 0 50%; /* 2 por fila en pantallas chicas */
  }

  .btn-prev, .btn-next {
    font-size: 22px;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .producto-card {
    flex: 0 0 100%; /* opcional: 1 por fila en pantallas muy chicas */
  }
}


.productos-derecha {
  width: 100%;
  margin: 60px 0; /*  solo arriba y abajo */
  padding: 0 50px; /*  pequeño espacio interno lateral opcional */
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box; /* asegura que el padding no sume ancho */
}

/* BLOQUES HOME: grid responsive para 2 o 3 por fila */
.bloques-home-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
}

/* Bloques internos */
.bloque-home-horizontal {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: 100%;     /*  evita desbordes horizontales */
  flex-wrap: wrap;     /*  permite que el texto baje si no entra */
}

/* Icono y texto dentro del bloque */
.bloque-home-horizontal .icono img {
  width: 65px;
  height: auto;
}

.icono img {
  filter: grayscale(50%);
  transition: filter 0.3s ease; /* transición suave */
}

.icono img:hover {
  filter: grayscale(0%);
}

.bloque-home-horizontal .texto-bloque {
  flex: 1;
  min-width: 0;        /*  necesario para que el texto no empuje el contenedor */
}

/* Texto */
.bloque-home-horizontal .texto-bloque h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.7px;
  font-size: 1.4rem;
  margin: 0;
  text-transform: uppercase;
  color: #312C2C;
}

.bloque-home-horizontal .texto-bloque p {
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  margin:  0;
  text-transform: uppercase;
  color: #555;
  text-align: left;
}


/* Responsive: en pantallas pequeñas los bloques pasan a columna */
@media (max-width: 600px) {
  .bloque-home-horizontal {
    flex-direction: row;   /* Mantiene imagen y texto de costado */
    align-items: center;   /* Centra verticalmente */
    text-align: left;      /* Evita que quede todo centrado */
  }

  .bloque-home-horizontal .icono img {
    width: 40px;           /* Ajustá según tu diseño */
    height: auto;
    margin-right: 10px;
    margin-bottom: 0;      /* Saco el espacio debajo */
  }

  .bloque-home-horizontal .texto-bloque p {
    text-align: left;      /* Texto alineado al costado */
    font-size: 12px;       /* Más chico en pantallas chicas */
  }

  .productos-derecha {
    margin: 20px 0;       /* margen solo arriba y abajo */
    padding: 0 10px;      /* espacio interno lateral */
    box-sizing: border-box;
}
    
  .icono img {
  filter: grayscale(0%);
}
}





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

.categorias-destacadas {
  background-color: #333;
  border-radius: 15px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* evita desbordes */
  box-sizing: border-box;
  margin: 0 auto; /* centra si hay contenedor más ancho */
  padding: 0 10px; /* un pequeño margen interno lateral */
}

.categorias-destacadas h2 {
  font-family: 'Ubuntu', sans-serif;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 20px 0;
}

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  padding: 15px 0 25px 0; /* padding vertical, sin horizontal */
  box-sizing: border-box;
  justify-items: center; /* centra los ítems si hay espacio */
}

.categoria {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
  max-width: 220px; /* evita que crezca demasiado */
}

.categoria-img-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
}

.categoria-img-container img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.categoria-img-container .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.categoria-img-container:hover .hover-img {
  opacity: 1;
  transform: scale(1);
}

.categoria-img-container:hover .default-img {
  transform: scale(1.05);
}

.categoria-texto {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  transition: background 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
}

.categoria:hover .categoria-texto {
  color: #ddd;
  transform: scale(1.05);
}

/* === Ajuste responsive === */
@media (max-width: 600px) {
  .grid-categorias {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 10px 0 20px 0;
  }

  .categoria-texto {
    font-size: 12px;
  }
}





/* =====================================
   2. ESTILOS GENERALES
===================================== */

.linea-turquesa {height: 2px; background-color: #00828c; width: 100%; margin: 0;}
.linea-negra {height: 4px; background-color: #000000; width: 100%; margin: 0;}
.linea-gris {height: 4px; background-color: #ccc; width: 100%; margin: 0;}
.linea-separadora {height: 10px; background-color: #00828c; width: 100%; margin: 0;}
.clear {clear:both;}
.descripcion p:before, .txtarticulo p:before, .preguntas p:before, .txtproducto h4:before, .margenempresa h3:before {content: '» '; position:  relative; color: #e94f31;}



/* =====================================
   3. MENU HORIZONTAL CON BUSCADOR Y REDES
===================================== */
#menu_horizontal {		/* Contenedor general */
width: 100%;
max-width: 1366px;
margin: 0 auto;
padding: 5px 0;
background: #666;
}

.top-bar {		/* Barra superior */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
 
}


#buscador form {
  display: flex;
  align-items: center; /* centra el campo y el botón */
  gap: 5px;
  margin: 0 0 0 30px;
}

.search-field {
  padding: 0 10px;
  border-radius: 20px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 14px;
  width: 300px;
  font-family: 'Ubuntu', sans-serif;
  color: #333;
  height: 26px; /* igualá la altura con el botón */
  box-sizing: border-box;
}

.search-go {
  width: 26px; /* mismo alto y ancho para quedar centrado */
  height: 26px;
  background: url('../imagenes/redes/lupa.svg') no-repeat center;
  background-size: 26px 26px; /* tamaño interno del ícono */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-image 0.3s ease;
  background-color: transparent;
}

/* Cambio de ícono al pasar el mouse */
.search-go:hover {
  background-image: url('../imagenes/redes/lupac.svg');
}

/* Centrado vertical de las redes */
#redessocialesm {
  display: flex;
  align-items: center;   /* centra los íconos dentro del contenedor */
  gap: 10px;
  margin-right: 20px;
  height: 100%;          /* ocupa la altura completa de .top-bar */
}

#redessocialesm img {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  transition: transform 0.2s;
}

#redessocialesm img:hover {
  transform: scale(1.1);
}

.menu-horizontal {		
  display: flex;
  justify-content: center;   /* Centra horizontalmente */
  align-items: center;       /* Centra verticalmente */
}

.menu-horizontal ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;           /* Permite pasar a la siguiente línea si es necesario */
  gap: 2vw;                  /* Espacio proporcional entre items */
}

.menu-horizontal li {
  margin: 0;                 /* Eliminamos margen fijo */
}

.menu-horizontal a {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.2s ease;
  white-space: nowrap;       /* Evita que los textos se rompan en varias líneas */
}

.menu-horizontal a:hover {
  color: #70ad2e;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.menu-horizontal li.active a {
  color: #70ad2e;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

/* =====================================
   4. MENU LATERAL PRODUCTOS PARA ESCRITORIO
===================================== */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu {
  flex: 0 0 200px; /* no se achica ni se estira */
  width: 200px;    /* aseguramos ancho */
  border-bottom: 4px solid #656659;
  border-radius: 3px;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu > ul > li:first-child {
  background: #66665e;
  background: -moz-linear-gradient(#66665e 0%, #45463d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d));
  background: -webkit-linear-gradient(#66665e 0%, #45463d 100%);
  background: linear-gradient(#66665e 0%, #45463d 100%);
  border: 1px solid #45463d;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
#cssmenu > ul > li:first-child > a {
  padding: 5px 10px;
  background: url(buscador/pattern.png) top left repeat;
  border: none;
  border-top: 1px solid #818176;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  text-shadow: 0 -1px 1px #000000;
}
#cssmenu > ul > li:first-child > a > span {
  padding: 0;
}
#cssmenu > ul > li:first-child:hover {
  background: #66665e;
  background: -moz-linear-gradient(#66665e 0%, #45463d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d));
  background: -webkit-linear-gradient(#66665e 0%, #45463d 100%);
  background: linear-gradient(#66665e 0%, #45463d 100%);
}
#cssmenu > ul > li {
  background: #e94f31;
  background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
  background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
  background: linear-gradient(#e94f31 0%, #d13516 100%);
}

/* cambia color cuando paso mouse */

#cssmenu > ul > li:hover {
  background: #e84323;
  background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
  background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
  background: linear-gradient(#e84323 0%, #c33115 100%);
}
#cssmenu > ul > li > a {
  font-size: 13px;
  display: block;
  background: url(buscador/pattern.png) top left repeat;
  color: #ffffff;
  border: 1px solid #ba2f14;
  border-top: none;
  text-shadow: 0 -1px 1px #751d0c;
}
#cssmenu > ul > li > a > span {
  display: block;
  padding: 10px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  background: #C00;
  border-bottom: none;
}
#cssmenu > ul > li.has-sub > a span {
  background: url(buscador/icon_plus.png) 96% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
  background: url(buscador/icon_minus.png) 96% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
  background: #fff;
  border-right: 1px solid #a2a194;
  border-left: 1px solid #a2a194;
}
#cssmenu ul ul li {
  padding: 0;
  border-bottom: 1px solid #d4d4d4;
  border-top: none;
  background: #f7f7f7;
  background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
  background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
  background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#cssmenu ul ul li:last-child { border-bottom: none;}
#cssmenu ul ul a {
  padding: 10px 10px 10px 25px;
  display: block;
  color: #676767;
  font-size: 12px;
  font-weight: normal;
}
#cssmenu ul ul a:before{
  content: '»';
  position: absolute;
  left: 10px;
  color: #e94f31;
}
#cssmenu ul ul a:hover { color: #e94f31;}
#cssmenu ul ul li.active a span, ul ul li.active a {
pointer-events: none;
cursor: default;
color: #06F;
}



/* =====================================
   5. LISTADO DE PRODUCTOS - MENSAJE - SOMBRAS
===================================== */
#contenedor-productos {
  display: flex;
  align-items: flex-start;
  gap: 0px; /* espacio entre menú y productos */
  width: 100%;
  padding: 0;
  margin: 0 auto;
  background: #FFF;
}


.productos {
  padding: 5px 0 0 0;
  width: 100%; /* antes: 1166px */
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* espacio entre productos */
}
.productos p {color:#06F; font: 18px 'Ubuntu'; text-align:center; padding:0 0 20px 0;}

.marcoproducto, .txtarticulo {
  width: 260px;
  height: auto;
  margin-bottom: 30px;
  flex: 1 1 240px; /* se adapta al ancho disponible */
  box-sizing: border-box;
}

.mensaje-productos {
  width: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  color: #00828c;
  text-align: center;
  margin: 30px 30px;
}

.mensaje-productos h2{
  width: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-size: 22px;
  color: #00828c;
  text-align: left;
  margin: 20px 30px 0px;
}


.mensaje-vacio {
  width: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  color: #e94f31;
  text-align: center;
  padding: 20px;
  background-color: #fff8f8;
  border: 1px solid #e94f31;
  border-radius: 8px;
  margin: 30px;
  max-width: 600px;
  line-height: 1.5;
}

/* MUESTRA FOTO 2 EN PRODUCTOS*/
.producto-img-container {
  position: relative;
  width: 252px;
  height: 168px;
  background-color: #fff;
  overflow: hidden;
}

.producto-img-container img.default-img,
.producto-img-container img.hover-img{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.5s ease;
  object-fit: contain;
  background-color: #fff;
}

.producto-img-container img.hover-img {
  opacity: 0;
  z-index: 2;
}

.producto-img-container img.default-img {
  z-index: 1;
}

.producto-img-container:hover img.hover-img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1); /* Zoom manteniendo el centro */
}

.producto-img-container:hover img.default-img {
  opacity: 0;
}


/* ICONO DE YOUTUBE CUANDO EL ARTICULO TIENE VIDEO*/
.icono-video {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
}

.icono-video-img {
  width: 80%;
  height: auto;
  position: relative;
  transition: all 0.2s ease;
}

.icono-video-img:hover {
  content: url('../imagenes/Iconos/ver-video-over.png');
}


/*EFECTOS DE SOMBRA EN IMAGEN PRODUCTO - TEXTO Y CODIGO*/
.sombra1 {box-shadow:0 0 10px 5px #c3c3c3;}
.sombra1:hover {box-shadow:0 0 10px 5px #666;}
.codigo {padding-top:10px; } /* espacio entre codigo e imagen */
.txtarticulo p {font: 14px 'Ubuntu'; text-align:center; color: #66665e; padding:5px 0 0 0; margin:0;}
.txtarticulo a {font: 14px 'Ubuntu'; color: #06F;}
.codigo {font: bold 18px  'Ubuntu'; text-align:center; color:#e94f31;}

/*PAGINA PRODUCTOS ESPECIALES - DOMES - CINTAS - CARTELERIA*/
.contiene {padding:20px 0 50px 30px; width:1100px; float:left;}
.marco-domes {float:left; width:174px; height:118px;}
.domes-cintas {padding:10px 0 0 0; width:1166px; float:left;}
.domes-cintas h2 { text-transform: uppercase; font: bold 32px 'Montserrat'; text-align:center; color: #09C; border-bottom: 2px solid #09C; margin: 0 0 0px; padding: 10px 0 5px 10px;}
.domes-cintas p {color:#666666; font: italic 18px 'Roboto'; line-height:1.5; text-align:center; padding:0 0 10px 0;}
.domes-cintas h3 {color:#666666; text-transform: uppercase; font: italic 16px 'Roboto'; line-height:1.5; text-align:center; padding:0 0 10px 0;}



/* =====================================
   6. TEXTOS DEBAJO DE PRODUCTOS - DESCRIPCION Y DETALLES
===================================== */

/* CONTENEDOR PRINCIPAL */
.pie_articulo {
  margin: 30px auto;
  max-width: 1300px;
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  overflow: hidden;
}

/* IMAGEN IZQUIERDA */
.pie_art_img {
  flex-shrink: 0;
  padding-top: 22px;
  max-width: 100px;
}

/* TEXTO DESCRIPTIVO */
.txt_pie_art {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

/* TÍTULO PRINCIPAL */
.pie_articulo h1, .productos-derecha h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #00828c;
  text-align: left;
  margin: 0;
}

.productos-derecha h2 {
  margin-top: 20px;  
  text-transform: uppercase;
}

.pie_articulo h1:before {content: '» '; position:  relative; color: #e94f31;}

/* TÍTULOS INTERNOS */
.txt_pie_art h3 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #00828c;
  margin: 40px 0 15px 0;
}

/* PÁRRAFOS */
.txt_pie_art p {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  text-align: justify;
  margin: 15px 0;
}

/* ENLACES */
.txt_pie_art a {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-style: italic;
  color: #039;
  text-decoration: none;
}

/* LISTAS */
.txt_pie_art ul {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  padding-left: 20px;
  margin: 10px 0;
}

.txt_pie_art ul li {
  margin-bottom: 8px;
}

/* PIE FINAL - AFIP y TEXTO */

#pie2 {background: #FFF; overflow: hidden;}
#pie2 p {font: 12px 'Ubuntu'; text-align:center; color: #666;}



/* =====================================
   7. PAGINAS DEL MENU HORIZONTAL - NOVEDADES-CLIENTES-TRABAJOS-ETC

===================================== */

.clientes-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centra los logos */
  gap: 10px; /* espacio entre logos */
  margin: 20px 0;
}

.cliente {
  flex: 0 1 150px; /* ancho base de cada logo, ajustable */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-shadow: 0 0 5px 3px #c3c3c3;
  background: #fff; /* opcional, si querés un fondo */
}

.cliente img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* === MENÚ PANEL DESLIZABLE (BASADO EN POSICIÓN) === */
.menu-panel {
  position: fixed;
  top: 0;
  width: 80%;
  height: 100vh;
  background: #fff;
  z-index: 999;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 20px;
}

/* Panel que entra desde la derecha */
.menu-derecha {
  right: 0;
}

/* Panel que entra desde la izquierda */
.menu-izquierda {
  left: 0;
  transform: translateX(-100%);
}

/* Al activarse: se muestra */
.menu-panel.activo.menu-derecha {
  transform: translateX(0%);
}

.menu-panel.activo.menu-izquierda {
  transform: translateX(0%);
}




/* === MOVIL INFO RESUMIDA Y  === */
/* Transición suave para mostrar/ocultar */
.bloque-descriptivo {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.bloque-descriptivo.activo {
  max-height: 5000px; /* lo suficientemente alto para el contenido */
}




.ver-mas-btn {
  background-color: #e94f31;
  color: white;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  padding: 10px 20px;
  margin: 20px auto;
  display: block;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

.destacados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

.destacados .tag {
  background-color: #70ad2e;
  color: white;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 30px;
  text-align: center;
}




#pie-contacto {
  background-color: #333;
  padding: 30px 60px;
  font-family: 'Ubuntu', sans-serif;
}

.contenedor-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  max-width: 1366px;
  margin: auto;
}

.columna {
  flex: 1 1 100%;
  max-width: 100%;
}

.columna-formulario form {
  display: flex;
  flex-direction: column;
  }

/* Campos del formulario con bordes redondeados estilo buscador */
.columna-formulario input,
.columna-formulario textarea {
  margin-bottom: 12px; /* <-- este es el espaciado entre campos */
  padding: 8px 20px;
  font-size: 14px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 25px; /* igual que el buscador */
  outline: none;
  font-family: 'Ubuntu', sans-serif;
  box-sizing: border-box;
  resize: vertical;
}

.columna-formulario textarea {
  resize: none; /* evita que el usuario cambie el tamaño manualmente */
  overflow-y: hidden; /* oculta scroll si no hace falta */
  min-height: 50px;
  box-sizing: border-box;
}

/* Botón de envío con estilo consistente */
.columna-formulario button[type="submit"] {
  display: block;
  width: 50%;
  margin: 10px auto 0 auto;  /* centrado horizontal, margen superior de 10px */
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 25px;
  background-color: #e94f31;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.columna-formulario button[type="submit"]:hover {
  background-color: #c93e25;
}

.contenedor-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.form-row-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 500px;
  width: 100%;
  padding: 0 20px;
  gap: 20px;
}

.newsletter {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 16px;
  gap: 10px;
}

.newsletter input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.captcha {
  transform: scale(0.80);
  transform-origin: left center;
  display: flex;
  align-items: center;
}


/* Info lateral */
.columna-info {
  text-align: center;
}

.logo-pie img {
  max-width: 150px;
  margin-bottom: 10px;
}

.info-contacto h4, .columna-formulario h4 {
  font-family: 'Ubuntu', sans-serif;
  color: #00828c;
  text-align: center;
  font-size: 20px;
  margin: 0 0 15px;
}

.info-contacto {
	background: #333;
	width: 100%;
	padding: 0;
	
}
.redes-sociales {
  margin: 18px 0;
  padding-top: 5px;
  border-radius: 10px; /* Redondea las esquinas */
  background: #222222;
  width: 50%;
  display: flex;            /* Activa Flexbox */
  gap: 15px;                /* Espacio entre los bloques de iconos */
  justify-content: center;  /* Centrado horizontal (opcional) */
  flex-wrap: wrap;          /* Para que se acomoden en columnas en pantallas chicas */
}

.iconos-redes {
  display: flex;            /* Acomoda los íconos uno al lado del otro */
  gap: 15px;                /* Espacio entre los íconos */
}

.info-contacto p, .info-contacto a {
  margin: 18px 0;
  font-size: 18px;
  color: #999;
  text-decoration: none;
}

.info-contacto a:hover {
  color: #00828c; /* Nuevo color al pasar el mouse */
  text-decoration: none; /* Asegura que no aparezca subrayado */
}

.redes-sociales img {
  width: 35px;
  height: 35px;

}

#pie2 {
  background-color: #ddd;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  justify-content: center; /* centra todo en horizontal */
  gap: 10px; /* espacio entre la imagen y el texto */
}

#pie2 p {
  margin: 0;
      font-size: 14px;
}





/* === MENSAJES ENVIO o ERROR EN FORMULARIO === */
.overlay-confirmacion {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.mensaje-confirmacion {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 450px;
  font-family: 'Ubuntu', sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.mensaje-confirmacion p {
  font-size: 16px;
  margin-bottom: 20px;
}

.mensaje-confirmacion button {
  background-color: #e94f31;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
}


/* =====================================
   8. CARROUSEL IMAGENES TRABAJOS (Protegido)
===================================== */

.bloque-clientes {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

.texto-clientes {
  text-align: center;
  margin-bottom: 20px;
}

.texto-clientes h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #00828c;
  margin-bottom: 10px;
}

.texto-clientes h3 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #00828c;
  text-align: left;
  margin-top: 50px;
}

.texto-clientes p {
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #666;
  text-align: justify;
}

.carrusel-clientes {
  position: relative;
  width: 100%;
  max-width: 700px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.carrusel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.carrusel-item {
  position: relative;
  min-width: 100%;
  box-sizing: border-box;
}

/* Imagen protegida */
.carrusel-item img {
  width: 100%;
  display: block;
  border-radius: 10px;
  user-select: none;       /* Evita selecci�n de imagen */
  pointer-events: none;    /* Bloquea clic derecho y arrastre */
}

/* Marca de agua discreta */
.carrusel-item::before {
  font-family: 'Ubuntu', sans-serif;
  content: "WWW.REYCAR.COM.AR";
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: rgba(255,255,255,0.80);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}

.carrusel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
}

.carrusel-btn.prev { left: 10px; }
.carrusel-btn.next { right: 10px; }

.carrusel-btn:hover {
  background: rgba(0,0,0,0.8);
}

/* Responsive */
@media (max-width: 768px) {
  .texto-clientes h2 { font-size: 20px; }
  .texto-clientes p { font-size: 14px; }
  .carrusel-item::before {
  font-size: 12px;
}
}






/* ---------------------- CONFIGURACION PARA MOVILES (max-width: 768px) ---------------------------*/

@media (max-width: 768px) {
    
/* MENU FIJO PARA MOVILES */   
#menu-movil-fijo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
}

#menu-movil-fijo.oculto {
  transform: translateY(-100%);
}
    
body {
 padding-top: 92px; /* espacio para que no tape el contenido */
}
    

/* PRIMERA LINEA DE MENU PARA MOVILES */   
#linea1-movil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background-color: #333;
    z-index: 9999;
  }

  .logo-movil {
    flex-shrink: 0;
  }

  .logo-movil img {
    max-height: 40px;
    width: auto;
  }
	
/* Agrupación derecha */
.grupo-derecho {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botón hamburguesa */
.hamburguesa {
  background-color: #e94f31;
  color: white;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botón WhatsApp con SVG */
.btn-whatsapp {
  width: 40px;
  height: 40px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-whatsapp img {
  width: 25px;
  height: 25px;
  display: block;
}
    
/* SEGUNDA LINEA DE MENU PARA MOVILES */

#linea2-movil {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background-color: #666;
  gap: 10px;
  flex-wrap: nowrap; /* evita salto de línea */
  overflow: hidden;
  z-index: 9999;
}

.btn-productos {
  background-color: #e94f31;
  color: white;
  font-size: 12px;
  padding: 8px 10px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  flex-shrink: 0;
  height: 25px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

#busqueda-movil {
  display: flex;
  flex: 1 1 auto;
  min-width: 0; /* permite flexionar */
  gap: 5px;
  overflow: hidden;
}

.campo-busqueda {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 25px;
  outline: none;
  height: 8px;
  font-family: 'Ubuntu', sans-serif;
  color: #333;
}

.btn-buscar {
  background-color: #e94f31;
  color: white;
  border: none;
  font-size: 12px;
  border-radius: 25px;
  cursor: pointer;
  height: 25px;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
 

  #menu-vert {
    display: none;
    background: #fff;
    border-top: 1px solid #ccc;
  }

  #menu-vert ul {
    list-style: none;
    padding: 10px;
    margin: 0;
  }

  #menu-vert li {
    padding: 5px 0;
  }

  #menu-vert a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
  }

  #menu-vert a:hover {
    color: #e94f31;
  }
	
  /* Ocultar encabezado tradicional y menú horizontal */
  #encabezado,
  #menu_horizontal,
  #encabezado1,
  #encabezado2,
  #cssmenu,
  .bloque-descriptivo .pie_art_img, 
  .pie_art_img, 
  .solo-monitor {
    display: none;
  }

  /* Menú clonado */
  .menu-movil-clonado {
    display: none;
    background-color: #f9f9f9;
    border-top: 1px solid #ccc;
  }

  .menu-movil-clonado ul {
    list-style: none;
    margin: 0;
    padding: 10px;
  }

  .menu-movil-clonado li {
    padding: 8px 0;
  }

  .menu-movil-clonado a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
  }

  .menu-movil-clonado a:hover {
    color: #e94f31;
  }

    
  /* ------------------VISUAL DE MENUS LATERALES PARA MOVILES---------------- */

 /* MENÚS MÓVILES - Visual renovada */
    
#menu-hor ul,
#menu-hor li,
#menu-v ul,
#menu-v li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-hor,
#menu-v {
  background-color: rgba(0, 130, 140, 0.95); /* #00828c con opacidad */
  width: 85vw;
  height: 100vh;
  padding: 1rem;
  overflow-y: auto;
  font-family: 'Ubuntu', sans-serif;
  color: white;
}

#menu-hor * ,
#menu-v * {
  font-family: 'Ubuntu', sans-serif;
}

/* Ítems del menú */
#menu-hor li,
#menu-v li {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

#menu-hor li a,
#menu-v li a {
  display: block;
  padding: 8px;
  color: white;
  font-size: 15px;
  text-decoration: none;
}

#menu-hor li a:hover,
#menu-v li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

#menu-hor li.active > a,
#menu-v li.active > a {
  background-color: #e94f31;
  color: #fff;
  font-weight: bold;
}

/* Submenús con sangría y línea */
#menu-hor ul ul,
#menu-v ul ul {
  background-color: rgba(0, 150, 160, 0.95); /* tono más claro de #00828c */
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
#menu-v ul ul li a,
#menu-hor ul ul li a {
  font-size: 14px;
  }

/* Boton cerrar - ubicacion y tamaño */
.btn-cerrar {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  padding: 10px;
  cursor: pointer;
}

.icono-cerrar {
  width: 30px;
  height: 30px;
  stroke: #fff;
}

/* CONTROLA ICONOS +/- DEL SUBMENU EN MOVILES*/	    
/* Íconos + y − en opciones con submenú (solo menú móvil) */
#menu-v li.has-sub > a,
#menu-hor li.has-sub > a {
  position: relative;
  padding-right: 30px; /* espacio para el icono */
}

#menu-v li.has-sub > a::after,
#menu-hor li.has-sub > a::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url('buscador/icon_plus.png') no-repeat center center;
  background-size: contain;
  transform: translateY(-50%);
}

#menu-v li.has-sub.active > a::after,
#menu-hor li.has-sub.active > a::after {
  background-image: url('buscador/icon_minus.png');
}

#menu-v li a,
#menu-hor li a {
  text-transform: uppercase;
  letter-spacing: 0.5px; /* o probá con 1px para más separación */
    display: block;
  white-space: nowrap;       /* Fuerza una sola línea */
  overflow: hidden;          /* Oculta el texto que no entra */
  text-overflow: ellipsis;   /* Muestra "..." al final si no entra */
  font-size: 16px;           /* Tamaño uniforme */
  
  
}
    
#menu-v ul ul li a,
#menu-hor ul ul li a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}   

/* MENSAJES AL ENCONTRAR O NO PRODUCTOS */	
.mensaje-movil {
  text-transform: uppercase;
  width: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #00828c;
  text-align: center;
  margin: 20px 10px 35px ;
}

.mensaje-vacio-movil {
  width: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  color: #e94f31;
  text-align: center;
  padding: 20px;
  background-color: #fff8f8;
  border: 1px solid #e94f31;
  border-radius: 8px;
  margin: 20px;
  max-width: 600px;
  line-height: 1.5;
}


  /* Ocultar todos los submenús anidados en móviles */
  .menu-movil-clonado ul ul {
    display: none !important;
  }

  /* Cuando el padre tiene la clase .activo, se muestra */
  .menu-movil-clonado li.activo > ul {
    display: block !important;
  }
	
  .menu-movil-clonado li.has-sub > a {
  cursor: pointer;
}


 /* ajusta espacio en _pie para moviles*/   
#pie-contacto { 
  padding: 30px 10px;
  }
    
.form-row-horizontal {
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  }
    
/* Botón de envío formulario */
.columna-formulario button[type="submit"] {
  width: 60%;
  padding: 10px 15px;
}

.redes-sociales {
  width: 100%;
  gap: 10px; 
  }
	
  .newsletter,
  .captcha,
  .formulario-pie button[type="submit"] {
    width: auto;
    align-self: center;
    text-align: center;
  }

  .captcha {
    transform: scale(0.80);
    transform-origin: center;
  }

    
/* VERSIÓN MÓVIL - DESCRIPCIONES DE PRODUCTOS*/
  .pie_articulo {
	margin:0;
    flex-direction: column;
    align-items: center;
    
  }

  .pie_art_img {
    max-width: 80px;
    padding-top: 10px;
  }

  .txt_pie_art {
    width: 100%;
    padding: 10px 15px;
  }

  .txt_pie_art p,
  .txt_pie_art ul,
  .txt_pie_art h3 {
    padding: 5px 20px 0;
    text-align: justify;
  }
	
  .pie_articulo h1:before {content: '';}
	
  .txt_pie_art h1,
  .txt_pie_art h3 {
   text-align: center;
   padding: 10px 20px 10px;
  }	
	
  .txt_pie_art h1 { font-size: 20px; }		

.productos-derecha h2 {

  font-size: 1.2rem;
  text-align: center;
    padding: 0;
    margin: 0;

}

} 
/* ---------------------- FIN CONFIGURACION PARA MOVILES (max-width: 768px) ---------------------------*/



/* ---------------------- CONFIGURACION PARA MONITOR (min-width: 769px) ---------------------------*/

@media (min-width: 769px) {
  /* Vuelve al Estilo del menú lateral original en monitores */
  #cssmenu ul ul {
    display: none;
  }

  /* Submenú visible si el padre tiene la clase 'abierto' */
  #cssmenu li.abierto > ul {
    display: block;
  }

/* SOLO PARA MÓVILES */

  .solo-movil {
    display: none !important;
  }

  .bloque-descriptivo {
    max-height: none;
    overflow: visible;
  }
  
  .mensaje-movil, .mensaje-vacio-movil {
    display: none;
  }    
    
    
/* RESPONSIVE: Pantallas grandes (2 columnas) */
  .columna {
    flex: 1 1 48%;
    max-width: 48%;
  }

  .columna-info {
    text-align: center;
    display: flex;
	align-items: center; 
    flex-direction: column;
    justify-content: center;
  }
	    
}
/* ---------------------- FIN CONFIGURACION PARA MONITOR (min-width: 769px) ---------------------------*/


/* OCULTA TEXTO ENCABEZADO */
@media (max-width: 1150px) {
  #encabezado2, #redessocialesm {
    display: none;
  }
    .menu-horizontal a {
    font-size: 14px;
  }
    .menu-horizontal {		
  margin-right: 20px;
}
}


/* ---------------------- DETALLE DEL PRODUCTO ---------------------------*/

/* CONTENEDOR PRINCIPAL */
.detalle-producto {
  display: flex;
  flex-wrap: nowrap; /* evita que info baje debajo */
  max-width: 1366px;
  margin: 0 auto;
  padding-left: 20px;
  align-items: flex-start;
}

/* GALERÍA (columna izquierda) */
.galeria {
  margin: 20px 0;
  flex: 0 0 60%; /* ocupa 60% del ancho */
  max-width: 900px; /* límite de imagen principal */
}

/* Imagen principal */
.imagen-principal img {
  width: 100%;
 border: 1px solid #ccc;
  border-radius: 10px;
  
}

/* Miniaturas */
.miniaturas {
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap; /* si hay muchas → bajan de línea */
  gap: 10px;
  width: 100%; /* mismo ancho que la imagen principal */
}

.miniaturas img {
  flex: 0 0 auto;
  width: 100px;
  height: auto;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: border 0.3s;
}

.miniatura-video  {
  flex: 0 0 auto;
  width: 250px;
  height: auto;
  cursor: pointer;
  transition: border 0.3s;
}

.miniaturas img:hover {
  border-color: #00828c;
}



/* INFORMACIÓN DEL PRODUCTO (columna derecha) */
.info-producto {
  margin: 50px 0 0;
  flex: 0 0 40%; /* ocupa 40% fijo */
}

.info-producto h1, .info-producto p {
    font: 16px 'Ubuntu'; text-align:justify; color: #333; line-height: 1.5;
    margin: 10px;
}

.info-producto h2 {font: 18px 'Ubuntu'; color: #00828c; margin: 10px; }


.info-producto .video-producto {
  background: #f9f9f9;
  padding: 10px;
  margin: 30px;
}

.info-producto .grabado {
  background: #f9f9f9;
  border-left: 6px solid #00828c;
  padding: 5px 0;
  margin: 30px 15px 30px 40px;
  border-radius: 6px;
}

.acciones {
  display: flex;
  justify-content: center; /* centra horizontal */
  align-items: center;     /* centra vertical */
  gap: 20px;
  padding-right: 30px;
}


.acciones .btn img {
  width: 40px;
  height: 40px;

}

.imagen-principal iframe {
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.txt-codigo {
  background: #00828c;
  width: fit-content;        /* se ajusta al contenido, no ocupa todo el ancho */
  margin-left: 50px;
  padding: 5px 30px;
  font: bold 24px 'Ubuntu';
  text-align: center;
  color: #FFF;
  border-radius: 999px;      /* redondeo total */
}




/* ==========================
   DETALLE PRODUCTO - MÓVIL
   ========================== */

#menu-ocultos {
  display: none !important;   /* nunca se muestra en pantalla */
}

.detalle-producto-movil {
  display: none; /* Oculto por defecto, se muestra en móviles */
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

/* Galería móvil */
.galeria-movil {
  position: relative;
  width: 90%;
  max-width: 400px; /* ajustá si tu imagen principal tiene otro max */
  margin: 0 auto;
}

.galeria-movil img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: block;
}

/* Flechas móviles */
.galeria-movil {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.galeria-movil img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Estilo de flechas */
.flecha {
  background: rgba(0,0,0,0.25);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  width: 30px;          /* ancho fijo */
  height: 100px;         /* mismo alto que la imagen */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.flecha:hover {
  background: rgba(0,0,0,0.45);
}

.flecha.izq {
  border-radius: 10px 0 0 10px;
  margin-right: 5px;
}

.flecha.der {
  border-radius: 0 10px 10px 0;
  margin-left: 5px;
}


/* Miniaturas: 4 visibles ocupando el ancho de la imagen principal */
.miniaturas-movil {
  display: flex;
  gap: 10px;
  margin: 12px auto;
  overflow-x: auto;
  padding-bottom: 6px;
  width: 100%;
  max-width: 400px;      /* debe coincidir con .galeria-movil max-width */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.miniaturas-movil img {
  flex: 0 0 calc((100% - 30px) / 4); /* 4 miniaturas por vista; (gap*3)=30 */
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  scroll-snap-align: center;
  transition: border 0.18s, opacity 0.18s;
  opacity: 0.9;
}

/* Miniatura activa */
.miniaturas-movil img.activa {
  border-color: #00828c;
  opacity: 1;
}

/* Opcional: estilo scrollbar pequeño (WebKit) */
.miniaturas-movil::-webkit-scrollbar { height: 6px; }
.miniaturas-movil::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

/* Info */

.info-producto-movil { width: 100%; max-width: 400px; margin-top: 30px;}

.info-producto-movil h1, .info-producto-movil p {font: 14px 'Ubuntu'; text-align:justify; color: #333; line-height: 1.5; margin: 10px;}
.info-producto-movil h2 {font: 16px 'Ubuntu'; color: #00828c; margin: 20px 10px 10px; }

/* Contenedor del código + video */
.codigo-video {
  display: flex;
  align-items: center;       /* centra verticalmente */
  gap: 10px;                 /* separación entre código y botón */
  margin-bottom: 15px;
}

.txt-codigo-movil {
  background: #00828c;
  width: fit-content;        /* se ajusta al contenido, no ocupa todo el ancho */
  padding: 5px 30px;
  font: bold 24px 'Ubuntu';
  text-align: center;
  color: #FFF;
  border-radius: 999px;      /* redondeo total */
}

.miniatura-video-movil {
  width: 100px;              /* tamaño del icono del video */
  height: auto;
  margin-left: 10px;
  cursor: pointer;
}


/* Overlay oscuro */
.overlay-video {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Contenedor del video */
.overlay-contenido {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

/* Botón cerrar */
.cerrar-video {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
}

/* Video */
.overlay-contenido iframe {
  width: 100%;
  height: 280px;
  border: none;
}


/* Mostrar sólo en móviles (si usás la convención anterior) */
@media (max-width: 768px) {
  .detalle-producto { display: none; }
  .detalle-producto-movil { display: flex; flex-direction: column; align-items: center; padding: 14px;margin-top: 30px;}
}




/* Contenedor general DOMES - CINTAS - CALCOS */


.contenedor-calcos {
  padding: 5px 0 0 100px;
  width: 100%; /* antes: 1166px */
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px; /* espacio entre productos */
}

/* Bloques titulo/descripcion */
.domes-flex {
  display: flex;
  align-items: center; /* imagen y texto alineados arriba */
  gap: 20px;              /* separacion fija entre imagen y texto */
  margin: 70px 0px 20px;
  padding: 0;
}

.domes-img img {
  max-width: 220px;  /* controlas el tama�o de la imagen */
  height: auto;
  display: block;
}

.domes-texto {
  flex: 1; /* ocupa el resto del espacio */
    
}



.domes-texto h1 {
  font: bold 22px 'Ubuntu';
  letter-spacing: 1.2px;
  margin: 0px 0px 10px 0px; /* sin desplazamiento lateral */
  text-transform: uppercase;
  color: #FFF;
  background: #00828c;
  width: fit-content;        /* se ajusta al contenido, no ocupa todo el ancho */
  padding: 5px 50px;
  text-align: center;
  border-radius: 999px;      /* redondeo total */
}

.domes-texto li {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.7px;
  font-size: 1.2rem;
  margin: 5px 0px;
  text-transform: uppercase;
  color: #444 ;
}

.domes-texto ul li {
  list-style-type: none; /* quitamos el bullet por defecto */
  position: relative;    /* necesario para posicionar ::before */
  padding-left: 20px;    /* espacio para el simbolo */
}

.domes-texto ul li::before {
  content: "✓";         /* el carácter que quieras, por ejemplo una estrella */
  position: absolute;
  left: 0;
  color: #00828c;       /* color del simbolo */
  font-size: 1rem;      /* tamaño del simbolo */
}

/* Bloques imágenes domes */
.contiene {
  display: flex;
  flex-wrap: wrap;          /* permite que los items bajen a la siguiente fila */
  justify-content: center;  /* centra las imagenes en la fila */
  gap: 6px;                 /* separacion horizontal y vertical */
  margin: 0;
  padding: 0;
  max-width: 1200px;        /* opcional: para no estirar demasiado en desktop */
}

/* Tarjeta marco de cada producto */
.marco-domes {
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: relative;       /* importante para que hover-img quede dentro */
}

/* Producto individual */
.producto-dome {
  flex: 0 1 170px;   /* ocupa hasta 170px, se encoge si no entra */
  max-width: 170px;
  position: relative; /* necesario para hover-img */
}

/* Imagenes */
.producto-dome img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
}

/* Hover imagen */
.producto-dome .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 15px;
  transition: opacity 0.3s ease;
}

.producto-dome:hover .hover-img {
  opacity: 1;
}

.producto-dome:hover .default-img {
  opacity: 0;
}




@media (max-width: 768px) {
  .domes-flex {margin: 50px 0px 10px;}
  .producto-dome {flex: 0 1 120px; max-width: 120px; }
  .domes-img {display: none;}
  .domes-texto h1 {font-size: 1.3rem; margin: 0px 30px 10px; text-align:center;}
  .domes-texto li {font-size: 1rem; margin: 5px 0px; text-align:center;}
  .domes-texto ul, .domes-texto ul li {padding-left: 0; }
  .domes-texto ul li::before {content: none;}
  .contenedor-calcos {padding: 5px 0 0 0;}
}