/*
 1)Paleta de colores
 2)Fuentes y texto
 3)Títulos
 4)backgrounds
 5)generales
 6)btn load
 7)EFECTOS DE APARICIÓN 
*/



/* 1)paleta de colores */
:root{
    --c1:#261206;
    --c2:#E4CDBB;
    --c3:#EFE3D9;
    --c4:#FFFFFF;
    --c5:#f58128;
    --c6:#333;

    --rad: 15px;
    --rad2: 25px;
    --s: 0 3px 6px rgba(0, 0, 0, 0.3);
    --s2: 0 8px 20px rgba(0, 0, 0, 0.4);
    --pad: 10px 12px;
}
* , body{
    margin: 0;
    padding: 0;
}
*{
    box-sizing: border-box;
}
.corp{
  padding-top:65px; max-width:100%; overflow-x:hidden;
}
button{
    cursor: pointer;
}





/* 2)fuentes y texto */
.carta {
    font-family: 'Tangerine', cursive;
}
.mulish{
    font-family: 'Mulish', sans-serif;
}

.txt-center{
    text-align: center;
}
.f-big{
    font-size:2.8rem;
}
.f-med-1{
    font-size:1.1rem;
}
.f-med{
    font-size:2rem;
}
.f-peq{
    font-size: 0.9rem;
}


/* 3) titulos */
.solo-titulo{
    text-align: center;
    font-size: 3rem;
    padding-top:35px;
    padding-bottom:20px;
}
.t-portada{
    font-size:4rem;
}
.sub{
    font-size: 2.2rem;
    color:var(--c1);
}
@media (max-width: 768px) {
    .t-portada{
        font-size:3.2rem;
        margin-top:10px;
    }
}




/* 4)bacgrounds */
.b1{
   background:var(--c1);
}
.b2{
    background:var(--c2);
}
.b3{
    background:var(--c3);
}
.b4{
    background:var(--c4);
}
.b5{
    background:var(--c5);
}

/* 5)grales */
.aut{
    display:flex;
    margin:auto;
}
.pad-left{
    padding-left:45px;
}
.centrar{
    display:flex;
    justify-content: center;
    align-items: center;
}
.column2{
    display:flex;
    flex-direction:column;
}
.pad-20{
    padding:20px;
}
.no-decoration{
    text-decoration:none;
    color:black;
}
.fotografia{
    width:450px;
    border-radius:var(--rad2);
    box-shadow:var(--s);
}

@media (max-width: 768px) {
    .fotografia{
        max-width:90%;
    }
    .pad-left{
        padding-left:25px;
    }
}
.no-shadow{ /*siempre debajo de fotografia*/
    box-shadow:none;
}






/*6) botones load*/
.btn{
    padding: 7px 15px;
    font-size: 1rem;
    border-radius: var(--rad);
    border:none;
    box-shadow: var(--s);
    margin:15px 0;
}

.btn-load {
    outline: none;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease, border-color 0.4s ease;
    z-index: 1;
    width:190px;
    justify-content: center;
    border: 2px solid  var(--c3);
}
.btn-load::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: width 0.5s ease;
    border-radius: var(--rad);
    z-index: 0;
}
.btn-load:hover::before {
    width: 100%;
}
.btn-load > span {
    position: relative;
    z-index: 2;
}
.btn-load:hover {
    border-color: var(--c4);
    color:var(--c1);
    font-weight: bold;
    text-shadow: 1px 1px 5px var(--c2);
}
/* btn colores */
.rosa{
    background: linear-gradient(120deg, var(--c2),var(--c3));
}
.rosa::before{
     background: linear-gradient(120deg, var(--c5), var(--c3), var(--c5));
}








/*7) EFECTOS DE APARICIÓN */
/*Efecto de aparición de escala*/
.efect{
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.efect.mostrar {
    opacity: 1;
    transform: scale(1);
}
/*Efecto de aparición lateral de una sola vez*/
.efect2 {
    opacity: 0;
    transform: translateX(20%);
    transition: all 0.5s ease-in-out;
}
  
.efect2.in-view {
    opacity: 1;
    transform: translateX(0);
}
/*Efecto de aparición central de una sola vez*/
.efect3 {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
  
.efect3.in-view2 {
    opacity: 1;
    transform: scale(1);
}