:root{

    --verde:#2f3f2f;
    --verde-oscuro:#1d281d;

    --crema:#f7f2e9;
    --papel:#efe1c7;
    --papel2:#ead9bb;

    --dorado:#b99a5f;

    --violeta:#7b4f8f;

    --texto:#443d36;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:#e8ddc8;

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

color:var(--texto);

overflow-x:hidden;

}



/*========================

FONDO GENERAL

=========================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

url("https://www.transparenttextures.com/patterns/old-paper.png"),

radial-gradient(circle at top,#fff8ec,#e8ddc8);

opacity:.45;

pointer-events:none;

z-index:-2;

}



/*========================

HERO

=========================*/

.filo-hero{

padding:180px 0 120px;

position:relative;

}



.filo-container{

width:min(980px,92%);

margin:auto;

position:relative;

}



/*========================

PAPIRO

=========================*/

.filo-paper{

position:relative;

background:

linear-gradient(

180deg,

#f6ecd7,

#ecdfc4,

#e8d8b7

);

padding:90px;

border-radius:8px;

box-shadow:

0 40px 90px rgba(0,0,0,.20),

0 0 0 1px rgba(90,60,20,.08);

overflow:hidden;

}



/* textura */

.filo-paper::before{

content:"";

position:absolute;

inset:0;

background:

url("https://www.transparenttextures.com/patterns/paper-fibers.png");

opacity:.28;

mix-blend-mode:multiply;

pointer-events:none;

}



/* bordes */

.filo-paper::after{

content:"";

position:absolute;

inset:20px;

border:1px solid rgba(90,60,20,.16);

pointer-events:none;

}



/*========================

COMILLAS

=========================*/

.filo-comillas{

font-family:'Cormorant Garamond',serif;

font-size:180px;

color:rgba(185,154,95,.55);

text-align:center;

margin-top:-70px;

margin-bottom:-70px;

line-height:1;

}



/*========================

SUBTITULO

=========================*/

.filo-small{

text-align:center;

letter-spacing:6px;

text-transform:uppercase;

font-size:.8rem;

font-weight:700;

color:var(--violeta);

margin-bottom:25px;

}



/*========================

TITULO

=========================*/

.filo-paper h1{

font-family:'Cormorant Garamond',serif;

font-size:72px;

font-weight:600;

text-align:center;

color:var(--verde);

margin-bottom:35px;

}



/*========================

DIVIDER

=========================*/

.filo-divider{

text-align:center;

font-size:30px;

color:var(--dorado);

margin-bottom:45px;

}



/*========================

TEXTO

=========================*/

.filo-content{

max-width:760px;

margin:auto;

}



.filo-content p{

font-size:22px;

line-height:2.15;

text-align:center;

margin-bottom:30px;

font-weight:300;

color:#51483f;

}



/*========================

MANIFIESTO

=========================*/

.filo-manifiesto{

padding:120px 0;

}



.filo-paper h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

text-align:center;

line-height:1.1;

margin-bottom:50px;

color:var(--verde);

}
/*====================================

TEXTO MANIFIESTO

====================================*/

.filo-manifiesto-text{

max-width:720px;

margin:0 auto 70px;

text-align:center;

}

.filo-manifiesto-text p{

font-size:24px;

line-height:2;

margin-bottom:18px;

color:#564d43;

font-weight:300;

}



/*====================================

CREEMOS

====================================*/

.filo-creemos{

margin-top:70px;

}

.filo-creemos h3{

font-family:'Cormorant Garamond',serif;

font-size:52px;

text-align:center;

color:var(--verde);

margin-bottom:45px;

}

.filo-lista{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.filo-lista div{

background:rgba(255,255,255,.35);

padding:26px;

border-radius:18px;

font-size:18px;

line-height:1.8;

box-shadow:0 12px 30px rgba(0,0,0,.06);

transition:.35s;

}

.filo-lista div:hover{

transform:translateY(-5px);

}



/*====================================

SEPARADOR

====================================*/

.filo-separador{

margin:70px 0;

text-align:center;

letter-spacing:15px;

font-size:22px;

color:var(--dorado);

}



/*====================================

FINAL TEXTO

====================================*/

.filo-texto-final{

text-align:center;

max-width:700px;

margin:auto;

}

.filo-texto-final p{

font-size:26px;

line-height:2;

margin-bottom:16px;

}



/*====================================

ULTIMA FRASE

====================================*/

.filo-gran-frase{

padding:180px 0;

text-align:center;

background:

linear-gradient(

180deg,

transparent,

rgba(255,255,255,.45)

);

}

.filo-final-box{

max-width:1100px;

margin:auto;

}

.filo-comillas-final{

font-family:'Cormorant Garamond',serif;

font-size:220px;

line-height:.6;

color:rgba(185,154,95,.25);

}

.filo-final-box h2{

font-family:'Cormorant Garamond',serif;

font-size:clamp(4rem,8vw,7rem);

line-height:.95;

color:var(--verde);

font-weight:500;

margin-top:-70px;

}

.filo-final-box h3{

font-family:'Cormorant Garamond',serif;

font-size:clamp(5rem,9vw,8rem);

line-height:1;

margin-top:25px;

color:var(--violeta);

font-weight:700;

}

.filo-firma{

margin-top:90px;

}

.firma-linea{

width:180px;

height:1px;

background:rgba(0,0,0,.2);

margin:0 auto 30px;

}

.firma-nombre{

font-family:'Caveat',cursive;

font-size:52px;

color:var(--verde);

}

.firma-frase{

margin-top:8px;

letter-spacing:4px;

text-transform:uppercase;

font-size:.8rem;

color:#8d7d69;

}