:root {

--beige: #f5f1ea;
--cafe-claro: #c8b8a6;
--cafe-medio: #8b735a;
--cafe-oscuro: #3e2f25;

}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {

background: var(--beige);
color: var(--cafe-oscuro);
font-family: 'Inter', sans-serif;
line-height: 1.8;

}

.contenedor {

max-width: 900px;
margin: auto;
padding: 60px 20px;
text-align: center;

}

.estrecho {

max-width: 600px;

}

.portada {

padding-top: 120px;
padding-bottom: 120px;

}

.subtitulo {

font-family: 'Cormorant Garamond', serif;
font-size: 20px;
letter-spacing: 4px;
margin-bottom: 20px;

}

.nombre {

font-family: 'Cormorant Garamond', serif;
font-size: 56px;
font-weight: 400;
margin-bottom: 20px;

}

.frase {

font-size: 18px;
margin-bottom: 30px;

}

.fecha {

font-size: 18px;
letter-spacing: 2px;

}

.seccion {

border-top: 1px solid var(--cafe-claro);

}

.titulo-seccion {

font-family: 'Cormorant Garamond', serif;
font-size: 32px;
margin-bottom: 30px;

}

.divisor {

width: 60px;
height: 1px;
background: var(--cafe-medio);
margin: 30px auto;

}

.bloque-info p {

margin-bottom: 10px;

}

.map-container {

margin-top: 40px;

}

iframe {

width: 100%;
height: 300px;
border: none;

}

.cuenta-regresiva {

display: flex;
justify-content: center;
gap: 40px;

}

.cuenta-regresiva span {

font-family: 'Cormorant Garamond', serif;
font-size: 42px;
display: block;

}

.cuenta-regresiva label {

font-size: 14px;
letter-spacing: 2px;

}

.boton {

display: inline-block;
margin-top: 30px;
padding: 14px 32px;
border: 1px solid var(--cafe-oscuro);
text-decoration: none;
color: var(--cafe-oscuro);
font-size: 14px;
letter-spacing: 2px;

}

.boton:hover {

background: var(--cafe-oscuro);
color: var(--beige);

}

.mensaje {

font-family: 'Cormorant Garamond', serif;
font-size: 20px;

}

.pie {

padding: 40px;
border-top: 1px solid var(--cafe-claro);
text-align: center;

}

.desvanecer {

opacity: 0;
transform: translateY(20px);
transition: opacity 1.2s ease, transform 1.2s ease;

}

.desvanecer.visible {

opacity: 1;
transform: translateY(0);

}

@media(max-width:768px){

.nombre {

font-size: 40px;

}

.cuenta-regresiva {

flex-direction: column;
gap: 20px;

}

}

.cuadricula-evento {

display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;

}

.cuadricula-evento.inverso {

grid-template-columns: 1fr 1fr;

}

.info-evento {

text-align: left;

}

.mapa-evento iframe {

width: 100%;
height: 320px;
border: none;

}

.family-block {

display: flex;
justify-content: center;
gap: 80px;
margin-top: 20px;
margin-bottom: 20px;

}

.family-role {

font-size: 14px;
letter-spacing: 3px;
margin-bottom: 6px;

}

.family-name {

font-family: 'Cormorant Garamond', serif;
font-size: 22px;

}


/* RESPONSIVE */

@media(max-width:768px){

.cuadricula-evento {

grid-template-columns: 1fr;
gap: 30px;

}

.info-evento {

text-align: center;

}

.family-block {

flex-direction: column;
gap: 20px;

}

}

/* CONTENEDOR EDITORIAL */

.contenedor.editorial {

max-width: 1000px;

}


/* EVENTOS ESTILO EDITORIAL */

.cuadricula-evento {

display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;

}

.cuadricula-evento.inverso {

grid-template-columns: 0.9fr 1.1fr;

}

.info-evento {

max-width: 420px;
font-size: 16px;
letter-spacing: 0.3px;

}

.mapa-evento {

width: 100%;

}

.mapa-evento iframe {

width: 100%;
height: 420px;

}


/* FAMILIA EDITORIAL */

.familia-editorial {

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
margin-top: 60px;

}

.miembro-familia {

text-align: center;

}

.miembro-familia .rol {

display: block;
font-size: 12px;
letter-spacing: 4px;
margin-bottom: 10px;
opacity: 0.7;

}

.miembro-familia .nombre {

font-family: 'Cormorant Garamond', serif;
font-size: 24px;
letter-spacing: 1px;

}


/* RESPONSIVE */

@media(max-width:900px){

.cuadricula-evento,
.cuadricula-evento.inverso {

grid-template-columns: 1fr;
gap: 40px;

}

.info-evento {

max-width: 100%;
text-align: center;

}

.mapa-evento iframe {

height: 300px;

}

.familia-editorial {

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

}

}


@media(max-width:500px){

.familia-editorial {

grid-template-columns: 1fr;

}

}


/* INTRO BASE */

.intro {

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--beige);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 1s ease;

}

.intro.oculto {

opacity: 0;
pointer-events: none;

}


/* SOBRE */

.sobre {

position: relative;
width: 100%;
height: 100%;
background: var(--cafe-claro);
cursor: pointer;
overflow: hidden;

}


/* CUERPO */

.cuerpo {

position: absolute;
width: 100%;
height: 100%;
background: var(--cafe-claro);
display: flex;
justify-content: center;
align-items: center;

}


/* SOLAPA TRIANGULAR REAL */

.solapa {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: var(--cafe-medio);

clip-path: polygon(
0 0,
100% 0,
50% 100%
);

transform-origin: top center;

transition: transform 1.6s cubic-bezier(.77,0,.18,1);

z-index: 2;

}


/* LINEAS EDITORIALES */

.solapa::after {

content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--cafe-oscuro);

}

.cuerpo::before {

content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--cafe-oscuro);

}


/* TEXTO */

.contenido-sobre {

position: relative;
z-index: 1;
text-align: center;

}

.texto-sobre {

font-family: 'Cormorant Garamond', serif;
font-size: 18px;
letter-spacing: 6px;
color: var(--cafe-oscuro);

}


/* ANIMACION */

.intro.abierto .solapa {

transform: rotateX(180deg);

}