:root{
    --color-primario:#2C3639;
    --color-secundario:#d5cebb;
    --color-terciario:#a27b5c;
    --color-hover:#3b5249;
    --color-blanco:#ffffff;
}

/* GENERALES */

body{
    margin:0;
    padding:0;
    font-family:Arial,sans-serif;
    background-color:#f3f1ec;
    color:var(--color-primario);
}

/* PORTADA */

.portadaCamecuaro{
    position:relative;
    width:100%;
    height:350px;
    overflow:hidden;
}

.portadaCamecuaro img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(65%);
}

.contenidoPortada{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    color:white;
    max-width:600px;
}

.contenidoPortada h1{
    font-size:55px;
    margin-bottom:20px;
}

.contenidoPortada p{
    font-size:20px;
    line-height:1.6;
}

.central {
      width: 260px;
      height: 220px;
      position: absolute;
      left: 305px;
      transition: opacity 1.5s ease; /* transición más suave */
    }
    .izquierda {
      width: 240px;
      height: 200px;
      position: absolute;
      top: 20px;
      opacity: 0.5;
      left: 4.3%;
      transition: opacity 1.5s ease;
    }
    .derecha {
      width: 240px;
      height: 200px;
      position: absolute;
      top: 20px;
      opacity: 0.5;
      left: 565px;
      transition: opacity 1.5s ease;
    }

/* CONTENIDO */

.contenedorCamecuaro{
    padding:60px 20px;
}

.cajaTexto{
    max-width:1000px;
    margin:auto;
    background-color:white;
    border-radius:20px;
    padding:45px;
    box-shadow:0 0 15px rgba(0,0,0,0.08);
}

.cajaTexto h2{
    font-size:38px;
    margin-top:0;
    margin-bottom:25px;
    color:var(--color-terciario);
}

.cajaTexto p{
    font-size:18px;
    line-height:1.9;
    margin-bottom:25px;
}

/* CAJA EXTRA */

.infoExtra{
    margin-top:40px;
    background-color:#f7f5f0;
    border-left:6px solid var(--color-terciario);
    padding:25px;
    border-radius:12px;
}

.infoExtra h3{
    margin-top:0;
    font-size:28px;
    color:var(--color-hover);
}

/* RESPONSIVE */

@media(max-width:900px){

    .contenidoPortada h1{
        font-size:42px;
    }

    .contenidoPortada p{
        font-size:18px;
    }

    .cajaTexto{
        padding:30px;
    }

}

@media(max-width:700px){

    .portadaCamecuaro{
        height:280px;
    }

    .contenidoPortada{
        left:5%;
        max-width:90%;
    }

    .contenidoPortada h1{
        font-size:34px;
    }

    .contenidoPortada p{
        font-size:16px;
    }

    .galeriaCamecuaro{
        padding:30px 20px;
    }

    .galeriaCamecuaro img{
        width:100%;
        height:230px;
    }

    .cajaTexto h2{
        font-size:28px;
    }

    .cajaTexto p{
        font-size:16px;
    }

}