/* =====================================================
   RIEMANNPRECAST.CL - INDEX.CSS
   CSS COMPLETO PARA INDEX.HTML
   Incluye: Cabecera fija, video fondo, tarjetas de solución
   ===================================================== */

/* ========================== RESET GENERAL ========================== */
* {
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina relleno por defecto */
  box-sizing: border-box; /* Incluye borde y padding en el tamaño total */
}
/* ========================== ENLACES PERSONALIZADOS ========================== */

/* Enlaces normales */
a {
  color: #FFD700;         /* Amarillo corporativo */
  text-decoration: none;  /* Sin subrayado */
}

/* Enlaces visitados (evita el morado) */
a:visited {
  color: #FFD700;         /* Se mantiene amarillo */
}

/* Enlaces al pasar el mouse */
a:hover {
  color: #f36b04;            /* Cambia a blanco en hover */
}

/* Enlace activo (clic presionado) */
a:active {
  color: #FFD700;         /* Se mantiene amarillo */
}

html, body {
  width: 100%; /* Ocupa todo el ancho del viewport */
  height: 100%; /* Ocupa todo el alto del viewport */
  background-color: #000; /* Fondo negro corporativo */
  color: #fff; /* Texto blanco por defecto */
  font-family: Arial, sans-serif;
  overflow-x: hidden; /* Evita desbordamiento horizontal */
}

/* ========================== CABECERA FIJA ========================== */
.cabecera {
  width: 100%; /* Ocupa todo el ancho */
  background-color: #000; /* Fondo negro */
  position: fixed; /* Se mantiene visible al hacer scroll */
  top: 0; /* Fijado arriba */
  left: 0;
  z-index: 999; /* Sobre todo el contenido */
}

/* Contenedor interior de cabecera (logo + menú) */
.fila-cabecera {
  width: 100%;
  display: flex;
  justify-content: space-between; /* Distribuye logo y menú */
  align-items: center;
}

/* Logo a la izquierda */
.cabecera-logo img {
  height: 60px;
  display: block;
  margin-left: 20px;
}

/* Botón hamburguesa (oculto por defecto) */
.cabecera-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 20px;
}

/* Líneas del ícono hamburguesa */
.cabecera-toggle .linea {
  width: 25px;
  height: 3px;
  background-color: #FFD700; /* Amarillo corporativo */
  border-radius: 2px;
}

/* Menú de navegación principal (escritorio) */
.cabecera-menu {
  display: flex;
}

/* Lista de enlaces */
.cabecera-enlaces {
  display: flex;
  list-style: none;
  gap: 12px;
  margin-right: 20px;
}

/* Botones del menú */
.boton-menu {
  background-color: transparent;
  border: 1px solid #FFD700;
  color: #FFD700;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Estado activo o hover */
.boton-menu:hover,
.boton-menu.activo {
  background-color: #FFD700;
  color: #000;
}

/* ========================== ESPACIADOR MENU FIJO ========================== */
.espacio-cabecera {
  margin-top: 80px; /* Compensa altura del menú fijo */
}

/* ========================== SECCIÓN VIDEO DE FONDO ========================== */
.seccion-video {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

/* Video ocupa todo el fondo */
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Capa negra oscura sobre el video */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 1;
}

/* Contenido sobre el video */
.contenido-video {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

/* Título principal sobre el video */
.contenido-video h2 {
  font-size: 2rem;
  color: #FFD700;
  margin-bottom: 1rem;
}

/* Párrafo descriptivo */
.contenido-video p {
  font-size: 1.1rem;
  color: #fff;
}

/* ========================== SECCIÓN SOLUCIONES ========================== */
.seccion-soluciones {
  background-color: #000;
  padding: 4rem 2rem;
  text-align: center;
}

/* Título principal de la sección */
.titulo-soluciones {
  color: #FFD700;
  font-size: 2.5rem;
  margin-bottom: 3rem;
}

/* Contenedor de tarjetas */
.contenedor-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Tarjeta individual */
.tarjeta-solucion {
  background-color: #111;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el cursor */
.tarjeta-solucion:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Título de la tarjeta */
.tarjeta-solucion h3 {
  color: #FFD700;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Descripción de la tarjeta */
.tarjeta-solucion p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
}

/* ========================== RESPONSIVE ========================== */
@media (max-width: 768px) {
  .cabecera-toggle {
    display: flex;
  }

  .cabecera-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: #000;
    flex-direction: column;
    display: none;
  }

  .cabecera-menu.activo {
    display: flex;
  }

  .cabecera-enlaces {
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem;
    gap: 10px;
    margin: 0;
  }

  .boton-menu {
    width: 100%;
    text-align: right;
  }

  .seccion-video {
    height: 50vh;
  }

  .contenido-video h2 {
    font-size: 1.5rem;
  }

  .contenido-video p {
    font-size: 1rem;
  }

  .titulo-soluciones {
    font-size: 2rem;
  }

  .tarjeta-solucion {
    padding: 1.5rem;
  }

  .tarjeta-solucion h3 {
    font-size: 1.2rem;
  }

  .tarjeta-solucion p {
    font-size: 0.95rem;
  }
}
.boton-contacto {
  display: inline-block;              /* Se comporta como botón */
  padding: 0.75rem 1.5rem;            /* Espaciado interno */
  background-color: #000000;          /* Fondo amarillo corporativo */
  color: #000000;                        /* Texto negro */
  font-weight: bold;                  /* Negrita */
  border: none;                       /* Sin borde adicional */
  border-radius: 5px;                 /* Bordes redondeados */
  text-decoration: none;             /* Quita subrayado */
  font-size: 1rem;                    /* Tamaño estándar */
  transition: background 0.3s ease, color 0.3s ease; /* Suaviza hover */
}

/* Estado hover: fondo negro, texto blanco */
.boton-contacto:hover {
  background-color: #000;
  color: #fff;
}
.footer {
  background-color: #141617; /* Gris muy oscuro */
  color: #eaeaea; /* Texto gris claro */
  padding: 3rem 1rem 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  z-index: 10;
}

/* Contenedor de las columnas */
.footer-contenido {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

/* Columnas individuales */
.footer-columna {
  flex: 1 1 250px;
  min-width: 240px;
}

/* Logo + descripción */
.footer-logo img {
  max-width: 160px;
  margin-bottom: 1rem;
}

.footer-logo p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.footer-logo h3 {
  color: #FFD700;
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 0;
}

/* Títulos de secciones */
.footer-columna h4 {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

/* Texto general */
.footer-columna p {
  margin: 0.3rem 0;
  font-size: 0.92rem;
}

/* Línea de créditos inferiores */
.footer-copy {
  text-align: center;
  border-top: 1px solid #2a2c2d;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #aaa;
}

.footer-copy a {
  color: #FFD700;
  text-decoration: none;
}

.footer-copy a:hover {
  text-decoration: underline;
}

/* ========================== RESPONSIVO ========================== */
@media (max-width: 768px) {
  .footer-contenido {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

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

  .footer-logo img {
    margin: 0 auto 1rem;
    display: block;
  }
}
.boton-ver-servicios {
  display: inline-block;              /* Comportamiento de botón */
  padding: 0.75rem 1.5rem;            /* Espaciado interno */
  background-color: #000000;          /* Fondo amarillo */
  color: #000;                        /* Texto negro */
  font-weight: bold;                  /* Negrita */
  border: none;                       /* Sin borde adicional */
  border-radius: 5px;                 /* Bordes redondeados */
  text-decoration: none;              /* Quita subrayado */
  font-size: 1rem;                    /* Tamaño de texto */
  transition: background 0.3s ease, color 0.3s ease; /* Suaviza hover */
}

/* Estado hover: fondo negro, texto blanco */
.boton-ver-servicios:hover {
  background-color: #ff9900;
  color: #fff;
}