/* ==========================================================
   CHARROFEST - SISTEMA TIPOGRÁFICO Y ESTILOS GLOBALES
   Tipografías:
   Títulos  : Cormorant Garamond
   Texto    : Montserrat
========================================================== */


/* ==========================================================
   VARIABLES DE COLOR
========================================================== */

:root{

    --charro-white:#F5F1EB;
    --charro-gold:#C69C4E;
    --charro-gold-light:#D9AE5E;
    --charro-gold-dark:#A97822;
    --charro-black:#111111;
    --charro-gray:#8E8E8E;

}



/* ==========================================================
   TIPOGRAFÍA CORMORANT
   Uso exclusivo para títulos y elementos elegantes
========================================================== */


.cormorant,
.cormorant h1,
.cormorant h2,
.cormorant h3,
.cormorant h4,
.cormorant h5,
.cormorant h6{

    font-family:"Cormorant Garamond", serif !important;

}



/* Evita que los párrafos hereden Cormorant */

.cormorant p{

    font-family:"Montserrat", sans-serif !important;

}



/* ==========================================================
   HERO PRINCIPAL
========================================================== */


.hero-title{

    font-family:"Cormorant Garamond", serif;
    font-size:72px;
    font-weight:600;
    line-height:1.05;
    letter-spacing:.02em;
    color:var(--charro-white);
    margin-bottom:20px;

}


.hero-title span{

    color:var(--charro-gold);
    font-style:italic;
    font-weight:400;

}



/* ==========================================================
   ENCABEZADOS
========================================================== */


h1,
.charro-h1{

    font-family:"Cormorant Garamond", serif;
    font-size:56px;
    font-weight:600;
    line-height:1.1;
    color:var(--charro-black);

}



h2,
.charro-h2{

    font-family:"Cormorant Garamond", serif;
    font-size:42px;
    font-weight:500;
    line-height:1.2;
    color:var(--charro-black);

}



h3,
.charro-h3{

    font-family:"Cormorant Garamond", serif;
    font-size:32px;
    font-weight:500;
    line-height:1.3;
    color:var(--charro-black);

}



/* Títulos sobre fondos oscuros */

.charro-title-light,
.charro-title-light h1,
.charro-title-light h2,
.charro-title-light h3{

    color:var(--charro-white);

}



/* ==========================================================
   FRASES DESTACADAS
========================================================== */


.charro-quote{

    font-family:"Cormorant Garamond", serif;
    font-size:30px;
    font-style:italic;
    font-weight:400;
    color:var(--charro-gold);

}



/* ==========================================================
   TEXTO GENERAL
========================================================== */


body,
.charro-text{

    font-family:"Montserrat", sans-serif;
    font-size:18px;
    line-height:1.8;
    font-weight:400;
    color:var(--charro-black);

}



/* Texto claro sobre fondos oscuros */

.charro-light{

    color:var(--charro-white);

}



.charro-small{

    font-family:"Montserrat", sans-serif;
    font-size:15px;
    line-height:1.6;
    color:var(--charro-gray);

}



/* ==========================================================
   SUBTÍTULOS PREMIUM
========================================================== */


.charro-subtitle{

    font-family:"Montserrat", sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--charro-gold);

}



/* ==========================================================
   MENÚ
========================================================== */


.charro-menu{

    font-family:"Montserrat", sans-serif;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;

}



/* ==========================================================
   BOTONES
========================================================== */


.charro-button{

    display:inline-block;
    background:var(--charro-gold);
    color:var(--charro-black);

    padding:14px 34px;

    border-radius:4px;

    text-decoration:none;

    font-family:"Montserrat", sans-serif;
    font-size:15px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1px;

    transition:.3s ease;

}



.charro-button:hover{

    background:var(--charro-gold-light);
    color:var(--charro-black);

}



/* ==========================================================
   COLORES DE TEXTO
========================================================== */


.gold{

    color:var(--charro-gold) !important;

}



.white{

    color:var(--charro-white) !important;

}



.black{

    color:var(--charro-black) !important;

}



/* ==========================================================
   EFECTO DORADO METÁLICO
========================================================== */


.gold-gradient{

    background:linear-gradient(
        180deg,
        #F3D37A 0%,
        #D8AF4A 40%,
        #A97822 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

}



/* ==========================================================
   SOMBRAS
========================================================== */


.charro-shadow{

    text-shadow:
    0 2px 8px rgba(0,0,0,.45);

}



.gold-shadow{

    text-shadow:
    0 0 12px rgba(198,156,78,.35);

}



/* ==========================================================
   REVOLUTION SLIDER
========================================================== */


.tp-caption,
.rs-layer{

    font-family:"Montserrat", sans-serif;

}



.tp-caption h1,
.tp-caption h2,
.tp-caption h3,
.rs-layer h1,
.rs-layer h2,
.rs-layer h3{

    font-family:"Cormorant Garamond", serif !important;

}



/* ==========================================================
   FORMULARIOS
========================================================== */


input,
textarea,
select{

    font-family:"Montserrat", sans-serif;

}



/* ==========================================================
   RESPONSIVE
========================================================== */


@media(max-width:768px){


    .hero-title{

        font-size:46px;

    }


    h1,
    .charro-h1{

        font-size:40px;

    }


    h2,
    .charro-h2{

        font-size:32px;

    }


    h3,
    .charro-h3{

        font-size:26px;

    }


    .charro-text,
    body{

        font-size:17px;

    }


    .charro-subtitle{

        font-size:12px;
        letter-spacing:3px;

    }

.charro-programa{

    background:#ffffff;
    padding:90px 20px;

}


.charro-programa-container{

    max-width:1100px;
    margin:auto;

}


.charro-programa-header{

    text-align:center;
    margin-bottom:50px;

}


.charro-programa-header p{

    color:#666;

}



.charro-table{

    width:100%;
    border-collapse:collapse;

    font-family:"Montserrat",sans-serif;

    font-size:15px;

}



.charro-table td{

    padding:22px 20px;

    border-bottom:1px solid rgba(198,156,78,.25);

    vertical-align:top;

    color:#333;

}


.charro-table td:first-child{

    width:220px;

    font-weight:700;

    color:var(--charro-gold);

}



.charro-highlight td:last-child{

    color:#111;

}



.charro-highlight strong{

    font-weight:700;

}



.charro-note{

    margin-top:40px;

    font-size:13px;

    font-style:italic;

    color:#777;

}



@media(max-width:768px){


.charro-table,
.charro-table tbody,
.charro-table tr,
.charro-table td{

    display:block;

}


.charro-table tr{

    margin-bottom:25px;

    border:1px solid rgba(198,156,78,.25);

    padding:15px;

}



.charro-table td{

    border:none;

    padding:8px 5px;

}



.charro-table td:first-child{

    width:auto;

    font-size:18px;

}


}




}