/* Definición de colores (Variables para fácil edición) */
:root {
    --amarillo: #ffcc00;
    --verde: #28a745;
    --texto-oscuro: #333;
    --texto-claro: #fff;
}

/* Estilos base para todos los botones */
.boton-amarillo, 
.boton-amarillo-block, 
.boton-verde {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

/* Variantes de Color */
.boton-amarillo, 
.boton-amarillo-block {
    background-color: var(--amarillo);
    color: var(--texto-oscuro);
}

.boton-verde {
    background-color: var(--verde);
    color: var(--texto-claro);
}

/* Variantes de Comportamiento (Display) */
.boton-amarillo, 
.boton-verde {
    display: inline-block;
}

.boton-amarillo-block {
    display: block;
    width: 100%; /* Ocupa todo el ancho */
}

/* Efecto Hover */
.boton-amarillo:hover, 
.boton-amarillo-block:hover, 
.boton-verde:hover {
    opacity: 0.8;
}

@font-face {
    font-family: 'Amours';
    src: url('/fonts/Amours.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra una fuente alternativa mientras carga */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ayuda a que el padding no afecte el tamaño total */
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1{ font-size: 3.5em;}
h2{ font-size: 2.7em;}
h3{ font-size: 2em;
    color:bisque;
}
p{ font-size: 1.25em;}
ul{ list-style: none;}
li{ font-size: 1.25em;}

button{
    font-size: 1.25em;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 5px;
    border: 2px solid rgba(0,0,0,0.3);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    color: white;
    background-color: blueviolet;
}

button:hover{
    background-color: rgb(101, 33, 165);
}


.color-acento{ 
 /* Espaciado elegante (Recomendado para legibilidad) */
        letter-spacing: 2px; 
        margin: 0;
        padding: 10px 10px;
        font-family: "Amours";
        font-weight: bold;
        font-style:oblique;
        color: red;
        font-size: 1.4em;
}

header{
    background-color: rgb(245,245,245);
    z-index: 9999;
    position: relative;
    width: 100%;  
    overflow: hidden;
}


header .logo{

    /* Espaciado elegante (Recomendado para legibilidad) */
    letter-spacing: 2px; 
    margin: 0;
    padding: 10px 10px;
    font-family: "Amours";
    font-weight: bold;
    font-style:oblique;
    color: red;
    font-size: 4em;
}

header .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-top: 1px;
}

header nav{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 25px;
}

header a{
    padding: 5px 12px;
    text-decoration: none;
    font-weight: bold;
    color: black;
}

header a:hover{
    color: blueviolet;
}

#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 65vh;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                      url("/Media/header001.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
#hero-contacto{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 95vh;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                      url("/Media/contacto.png");
    background-repeat: no-repeat;
    background-size: 100% 80%;
    background-position: center center;
}

#hero-servicios{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 50vh;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                      url("/Media/servicio.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    margin-bottom: 2rem;
}

#hero-nosotros{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 65vh;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                      url("/Media/escritorio.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#hero h1, #hero-contacto h1, #hero-servicios h1, #hero-nosotros h1{
    color: white;
    text-align: center;
}

#hero button{
    font-size: 1.75em;
}

.carrusel-visor {
  display: block;
  width: 100%;
  height: 20vw;
  overflow: hidden;
  margin: 0 auto 0 0;
  padding: 0;
}

.carrusel-cinta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 1200vw;
  height: 100%;
  animation: carrusel-movimiento 30s linear infinite;
}

.carrusel-cinta img {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  background-color: white;
}

@keyframes carrusel-movimiento {
  /* 0% a 82%: Tus transiciones normales de las 6 fotos originales */
  0%, 12%   { transform: translateX(0); }
  15%, 27%  { transform: translateX(-100vw); }
  30%, 42%  { transform: translateX(-200vw); }
  45%, 57%  { transform: translateX(-300vw); }
  60%, 72%  { transform: translateX(-400vw); }
  75%, 87%  { transform: translateX(-500vw); }
  
  /* Aquí mostramos la COPIA de la primera foto (la foto 7) */
  90%, 99.99% { transform: translateX(-600vw); } 
  
  /* En el 100% exacto, saltamos al inicio. 
     Como la foto es idéntica, no se ve el movimiento */
  100% { transform: translateX(0); }
}


.carrusel-visor:hover .carrusel-cinta {
  animation-play-state: paused;
}

#somos-quinzco .container{
    text-align: center;
    padding: 200px 12px;
}

#nuestros-servicios{
    background-color: rgb(30,30,30);
    color: white;
    text-align: center;
}

#nuestros-servicios .container{
    padding: 150px 20px;
}

#nuestros-servicios h2{
    margin-top: 100;
    font-size: 3.2em;
}

#nuestros-servicios p{
    display: none;
    padding: 25px 12px;
    text-align: justify;
}

#nuestros-servicios .carta{
    background-position: center center;
    background-size:cover;
    padding: 500px 0px;
    margin: 30px;
    border-radius: 15px;
}

.carta {
    
    background-size: cover;    /* Hace que la imagen cubra todo el div */
    background-position: center; /* Centra la imagen */
    color: white;              /* Cambia el texto a blanco para que resalte */
}
.carta:first-child{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                      url("Media/cámara_vista_interior.jpg");
}

/* Para las otras dos cartas: */
.carta:nth-child(2) {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                      url("Media/ANUNCIO003.jpeg");
}

.carta:last-child {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                      url("Media/ANUNCIO005.jpg");
}
#caracteristicas h2{
    text-align: left;
    color:black;
}
#caracteristicas .container{
    text-align: left;
    padding: 130px 1px;

}

#caracteristicas li{
    margin: 2px 0px;
    font-weight: bold;
}

@media (min-width: 1200px){
    header{
        position: fixed;
        width: 100%;
    }

    header .container{
        flex-direction: row;
        justify-content: space-between;
    }

    header nav{
        flex-direction: row;
        padding-bottom: 0;
        padding-right: 20px;
    }

    #hero h1{
        font-size: 5em;
    }

    #somos-quinzco .container{
        display: flex;
        justify-content: space-evenly;
    }

    #somos-quinzco .texto{
       
        width: 50%;
        max-width: 600px;
        text-align: initial;
        padding-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #somos-quinzco h2{
        margin-top: 0px;
    }

    #somos-quinzco .img-container{
        background-image: url("Media/escritorio.jpg");
        background-size: cover;
        background-position: center center;
        height: 300px;
        width: 600px; 
    }

    #nuestros-servicios .servicios{
        display: flex;
        justify-content: center;
    }

    #nuestros-servicios p{
        display: block;
        margin-bottom: 30px;
    }

    #nuestros-servicios h2{
        padding: 60px 0px;
        margin-top: 20;
        font-size: 4em;
    }

    #nuestros-servicios .carta{
        padding: 10% 0;
        background-size: 90% 40%;
        background-repeat: no-repeat;
        background-position-y: 0;
        background-color: rgba(50, 50, 50, 1);
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    }

    .carta:first-child{
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("Media/cámara_vista_interior.jpg");
    }

    .carta:nth-child(2){
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("Media/ANUNCIO003.jpeg");
    }

    .carta:nth-child(3){
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("Media/sitrad02.jpeg");

    }

    #caracteristicas{
       
        background-image: url("Media/logo_quinzco.png");
        background-repeat: no-repeat;
        background-size: 500px 600px;
        background-position-x:1000px;
    }

    #caracteristicas .container{
        display: flex;
        text-align:left;
    }

    #caracteristicas ul{
        margin: 20px 20px;
    }
    #caracteristicas h2{
        margin: 40px 120px;
    }

    #final h2{
        font-size: 5em;
    }

    #final button{
        font-size: 2em;
    }

    footer .container{
        justify-content: flex-end;
    }
}
.formulario {
    p {
        font-size: 1.4rem;
        color: grey;
        margin: 2rem 0 0 0;
    }

    legend {
        font-size: 2rem;
        color: grey;
    }

    label {
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        color: beige;
    }
    input:not([type="submit"]), 
    textarea,
    select {
        padding: 1rem;
        display: block;
        width: 100%;
        background-color: whitesmoke;
        border: 1px solid gray;
        border-radius: 1rem;
        margin-bottom: 2rem;
    }

    textarea {
        height: 20rem;
    }

    .forma-contacto {
        max-width: 30rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    input[type="radio"] {
        margin: 0;
        width: auto;
    }
}
#final{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgb(30,30,30);
    color: white;
    height: 70vh;
    background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("Media/cadena-frio.jpg");

    background-size: 50vw;
    background-repeat: no-repeat;
    background-position: center center;
}


#final h2{
    font-size: 9vw;
}

#final button{
    font-size: 2vw;
}

footer{
    background-color: rgb(230,230,230);
}

footer p{
    margin: 0;
    padding: 12px;
    color: rgb(100,100,100);
}

footer .container{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.texto-nosotros h1 {
    font-size: 2.2rem;
    padding-left: 1rem 0 3rem 0;
    text-align: center;
}
.texto-nosotros p {
    font-size: 1.2rem;
    font-weight: normal;
    text-align: left;
    
    /* Limitamos el ancho */
    max-width: 60ch; /* 'ch' limita por cantidad de caracteres, ideal para lectura */
    width: 90%;      /* Para que sea responsivo en móviles */
    
    /* Centramos el bloque del párrafo si lo deseas */
    margin: 0 auto; 
    
    /* Corregimos el padding (Arriba, Derecha, Abajo, Izquierda) */
    padding: 1rem 0 3rem 0; 
}

.contenedor {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  background-color: rgb(30,30,30);
  color: bisque;
}
.contenedor h1{
    text-align: center;
}

 .iconos-nosotros {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
  }
.iconos-caracteristicas {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    display: flex;    /* Si quieres los 3 grupos en una fila, quita esto si quieres uno bajo otro */
    gap: 20px;        /* Espacio entre cada grupo (frio, estac., dorm.) */
}

.iconos-caracteristicas li {
    display: flex;      /* Alinea icono y texto en línea */
    align-items: center; /* Centra verticalmente el texto con el icono */
    gap: 10px;          /* Espacio horizontal entre el icono y el texto */
}
.icono {
    text-align: justify;
    img {
        height: 10rem;
    }
    h3 {
        text-transform: uppercase;
    }
}

.icono img {
  height: 10rem;
  display: block;   /* Bloque para que el margin funcione */
  margin: 0 auto;   /* Centra la imagen horizontalmente */
}

.icono h3 {
  text-transform: uppercase;
  text-align: center; /* Título centrado */
  margin-top: 1rem;
}

.icono p {
  text-align: left;   /* El texto descriptivo a la izquierda */
  margin-top: 0.5rem;
}


.contenedor-anuncios {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Espaciado entre anuncios */
    justify-content: flex-start; /* Alinea al inicio para mantener el orden */
}

.anuncio {
    background-color: grey;
    border: 1px solid #555; /* Reemplazo de darken(grey, 10) */
    margin-bottom: 2rem;
    
    /* 
       CÁLCULO PARA 1/4:
       Usamos calc(25% - gap) para descontar el espacio del 'gap' 
       y que los 4 anuncios quepan perfectamente en una fila.
    */
    flex: 0 1 calc(25% - 1.5rem); 
    box-sizing: border-box; /* Asegura que el border no sume ancho extra */
}

/* Estilos de contenido (sin anidamiento de Sass) */
.anuncio .contenido-anuncio {
    padding: 2rem;
}

.anuncio h3, 
.anuncio p {
    margin: 0;
}


/* Media Query que actúa como el @include tablet */
@media (min-width: 768px) { 
    
    .iconos-nosotros {
        display: grid;              /* Activa el modo grid */
        grid-template-columns: repeat(3, 1fr); /* El "3" del mixin (3 columnas iguales) */
        gap: 2rem;                  /* El "2rem" del mixin (espaciado) */
    }

}
@media (max-width: 768px) {
    .anuncio {
        flex: 0 1 100%; /* 1 anuncio por fila en móvil */
    }
}
.centrar-titulo
{
        text-align: center;
        padding: 20px;
}
.centrar-titulo h3 {
    font-size: 2.5rem;
    color: #1a3a5a; /* Azul profesional */
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.centrar-titulo p {
    color: beige;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.iconos-caracteristicas li p {
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;    /* Centrado interno */
    text-align: center;
}
/* Imagen de fondo en el contenedor-parrafo */
.contenedor-parrafo {
    background-image:linear-gradient(
            0deg,
            rgba(0,0,0,0.6),
            rgba(0,0,0,0.6)
        )
    ,url('Media/cadena_frio.png');
    display: flex;
    font-size: bold;
    color: bisque
}
.contenedor-parrafo p {
    margin-left: 50px;
    margin-right: 50px;
}
/* Estilos para pantallas grandes (Escritorio) */
@media (min-width: 1200px) {
    .container-forma,
    .contenedor-forma {
        max-width: 1200px; /* El ancho máximo que quieres que ocupe */
        margin-left: auto; /* Centra el contenido */
        margin-right: auto;
        background-color: #333;
    }
}
/* Este color solo se verá donde uses la clase .body-contacto */
.body-contacto {
    background-color:#333; /* Un verde agua suave, por ejemplo */
}