:root {
  --rojo-tes: #c06969;       /* Rojo institucional */
  --gris-claro: #f0f0f0;
  --gris-medio: #dadada;
  --gris-oscuro: #999999;
  --blanco: #ffffff;
  --negro: #000000;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--gris-claro);
  color: var(--gris-oscuro);
  margin: 0;
  padding: 0;
}

header {
  background-color: var(--rojo-tes);
  color: var(--negro);
  padding: 2rem;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
}

header p {
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

section {
  padding: 2rem;
  background-color: var(--blanco);
  margin: 1rem auto;
  max-width: 900px;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--gris-medio);
}

section h2 {
  color: var(--rojo-tes);
  margin-bottom: 1rem;
  text-align: center;
}

.boton {
  display: inline-block;
  background-color: var(--rojo-tes);
  color: var(--blanco);
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.boton:hover {
  background-color: #a00c24;
}

footer {
  background-color: var(--gris-oscuro);
  color: var(--gris-claro);
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}
.contenedor-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.grupo-servicio {
  flex: 0 0 48%;              
  background-color: var(--gris-claro);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--gris-medio);
}

.grupo-servicio h3 {
  color: var(--negro);
  margin-top: 1rem;
}

.grupo-servicio p {
  margin-bottom: 0.5rem;
}

.boton {
  display: inline-block;
  background-color: var(--rojo-tes);
  color: var(--negro);
  padding: 0.6rem 1.2rem;
  margin-top: 0.5rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

* {
  cursor: none !important;
}

/* Contenedor del cursor */
#cursor-emoji {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
}

/* Emoji engrane sin animación por defecto */
.gear {
  display: inline-block;
  font-size: 24px;
}



@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.contenedor-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
}

.bloque-info {
  flex: 0 0 48%;
  background-color: var(--gris-claro);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--gris-medio);
  text-align: center;
}

.bloque-info h2 {
  color: var(--rojo-tes);
  margin-bottom: 1rem;
}

.bloque-info .boton {
  margin-top: 1rem;
}

.detalle-producto {
  display: block;
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--blanco);
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  box-shadow: 0 0 8px var(--gris-medio);
  text-align: center; 
}

.galeria-producto {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 1rem;
  margin-top: 2rem;
  justify-items: center; /* Centra las imágenes dentro de cada columna */
}

.imagen-producto {
  width: 100%;
  max-width: 300px;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.imagen-producto:hover {
  transform: scale(1.05); /* Efecto al pasar el mouse */
}

@media (max-width: 900px) {
  .galeria-producto {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
  }
}

@media (max-width: 600px) {
  .galeria-producto {
    grid-template-columns: 1fr; /* 1 columna en móviles */
  }
}

.oculto {
  display: none;
}

.producto.contenido-principal {
  padding: 1rem;
  text-align: center;           /* Centra el texto dentro del contenedor */
  display: flex;                /* Permite alinear contenido */
  flex-direction: column;       /* Apila elementos verticalmente */
  align-items: center;          /* Centra horizontalmente los hijos */
  justify-content: center;      /* Centra verticalmente si hay altura definida */
  width: 100%;
  max-width: 800px;             /* Opcional: limita el ancho en pantallas grandes */
  margin: 0 auto;               /* Centra el bloque en la pantalla */
}
.producto.contenido-principal h3,
.producto.contenido-principal p {
  margin-bottom: 0.5rem;
}


.bloque-producto1 {
  display: center;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}


.bloque-producto2 {
  display: center;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}

.bloque-producto3 {
  display: center;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}

.bloque-producto4 {
  display: center;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}
.bloque-producto5 {
  display: center;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
}
.imagen-con-descripcion {
  display: inline-block;
  text-align: center;
}


.imagen-con-descripcion img {
  width: 100px;
  height: 50px;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
  position:relative;
}

.imagen-con-descripcion img:hover {
  transform: scale(8); /* Dobla el tamaño: 600x300 → 1200x600 */
  z-index: 10;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: absolute;
}

.imagen-con-descripcion figcaption {
  margin-top: 0.5rem;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-radius: 4px;
}



.imagen-con-descripcion:hover figcaption {
  opacity: 1;
}
.nosotros-container {
  margin: 2rem;
  text-align: center;
}

.secciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  max-width: 800px; /* Limita el ancho para que quepan 2 columnas */
  margin-left: auto;
  margin-right: auto;
}

.seccion {
  flex: 1 1 calc(50% - 1rem); /* 2 columnas por fila */
  background-color: #f4f4f4;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  min-width: 250px;
}

.oculto {
  display: none;
}
.boton-descarga {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #c06969;;
  color: rgb(1, 1, 1);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.boton-descarga:hover {
  background-color: #a00c24;
}

.galeria-producto h2 {
  grid-column: 1 / -1;   /* el título se extiende a lo ancho de todas las columnas */
  text-align: center;    /* opcional: centrar el texto */
  margin-bottom: 1rem;
}
#boton-scroll {
  position: fixed;   /* siempre visible en la ventana */
  bottom: 20px;      /* distancia desde abajo */
  left: 20px;       /* distancia desde la derecha */
  background-color: var(--rojo-tes);
  color: var(--negro);
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  z-index: 999;      /* asegura que quede encima de otros elementos */
}
#boton-scroll:hover {
  background-color: #464445;
}
.imagen-productoapp {
  max-width: 300px;
  height: auto;
  object-fit: contain; /* asegura que se vea toda */
}

.imagen-con-descripcionapp img {
  width: 100%;        /* ocupa el ancho disponible */
  height: auto;       /* mantiene proporción */
  max-width: 300px;   /* límite opcional */
  object-fit: contain; /* muestra toda la imagen sin recortar */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
  position: relative;
}
.imagen-con-descripcionapp img:hover {
  transform: scale(1.2); /* un zoom ligero, no exagerado */
  z-index: 10;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  position: relative; /* evita que se salga del flujo */
}
.galeria-productos h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 1rem;
  justify-items: center; /* centra cada figura */
}

.imagen-con-descripcions {
  text-align: center;
}

.imagen-con-descripcions img {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagen-con-descripcions img:hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.imagen-con-descripcions figcaption {
  margin-top: 0.5rem;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-radius: 4px;
  text-align: center;
}
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#info-finals {
  text-align: center;       /* centra todo el contenido */
  margin: 2rem auto;        /* centra el bloque en la página */
  max-width: 400px;         /* mismo ancho que los productos */
  padding: 1rem;            /* espacio interno */
  background: #ffffff;      /* fondo opcional */
  border-radius: 8px;       /* opcional: esquinas redondeadas */
}

#info-finals h2 {
  margin-bottom: 1.5rem;    /* igual que los otros títulos */
}



footer {
  margin-top: auto; /* empuja el footer al final */
  text-align: center;
  padding: 1rem;
  background: #222;
  color: #fff;
}
/* Centrar títulos de sección */
#productos h2,
#servicios h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Centrar contenido dentro de cada producto */
.producto {
  text-align: center;          /* centra h3 y p */
  display: flex;               /* usamos flexbox */
  flex-direction: column;      /* apila elementos verticalmente */
  align-items: center;         /* centra horizontalmente */
  justify-content: center;     /* centra verticalmente si hay altura fija */
  margin: 1rem auto;           /* espacio entre productos */
  max-width: 400px;            /* opcional: ancho máximo */
}

/* Botón centrado */
.producto .boton {
  margin-top: 1rem;
  display: inline-block;
}
#info-finals h3 {
  color: #000;        /* negro */
  font-weight: bold;  /* opcional: más marcado */
  margin-bottom: 0.5rem;
}
.modal {
  display: none; /* oculto por defecto */
  position: relative;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
}

.modal-contenido {
  background: #fff;
  margin: 10% auto;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  position: relative;
 top: 0%;

  display: flex;              /* activa flexbox */
  flex-direction: column;     /* organiza en columna */
  gap: 1rem;                  /* espacio entre cada bloque */
}

.modal-contenido form {
  display: flex;
  flex-direction: column;
  gap: 1rem;                  /* espacio entre cada campo del formulario */
}

.modal-contenido label {
  font-weight: bold;
  margin-bottom: 0.3rem;      /* espacio entre label e input */
  text-align: left;           /* opcional: alinear labels a la izquierda */
}

.modal-contenido input,
.modal-contenido textarea,
.modal-contenido button {
  width: 100%;                /* ocupa todo el ancho disponible */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.modal-contenido button {
  background: #222;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.modal-contenido button:hover {
  background: #444;
}

.cerrar {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}