/**
* HOJA DE ESTILO PARA SITIO WEB DE ADOLFO'S BAKERY
* DESARROLLADA POR ALFREDO RAUL GOMEZ VALERIO PARA ARROW WEB
* MÉXICO, MARZO DE 2025
* ILÁN V5
**/

/* Reset & Variables
---------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, input, textarea, button { display: block; font-family: var(--font-family-principal); }
body { line-height: 1; box-sizing: border-box; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
*, *::before, *::after { box-sizing: border-box; }
textarea:focus, input:focus, button { outline: none; }
a { text-decoration: none; }

body {
	font-family: var(--font-family-principal);
	background: var(--color-arena) url(../images/bg_main.jpg);
	color: var(--color-principal);
}

:root {
	--font-family-principal: 'urbana', sans-serif;
	--font-family-auxiliar: 'chill-script', sans-serif;
    --font-size-128: 4rem;
    --font-size-112: 3.5rem;
    --font-size-96: 3rem;
	--font-size-80: 2.5rem;
	--font-size-72: 2rem;
	--font-size-64: 1.9rem;
	--font-size-56: 1.8rem;
	--font-size-48: 1.6rem;
	--font-size-40: 1.4rem;
	--font-size-36: 1.3rem;
	--font-size-32: 1.2rem;
	--font-size-28: 1.1rem;
	--font-size-24: 1rem;
	--font-size-20: .9rem;
	--font-size-18: .8rem;
	--font-size-14: 13px;
	--color-principal: #111;
	--color-blanco: #fff;
	--color-arena: #fce67f;
	--color-amarillo: #ffd400;
	--color-verde: #67d449;
	--color-azul-oscuro: #2b67a0;
	--color-azul-ceruleo: #349ce2;
	--color-rosado: #ff7878;
	--color-rosado-oscuro: #bb5b5b;
	--color-azul-claro: #99dddc;
}

/* Font-Size-Sys
---------------------------------------------------------------- */
.font-size-14 { font-size: var(--font-size-14); line-height: 110%; }
@media (min-width: 576px) { .font-size-14 { font-size: calc(var(--font-size-14)*1.02); } }
@media (min-width: 768px) { .font-size-14 { font-size: calc(var(--font-size-14)*1.05); } }
@media (min-width: 992px) { .font-size-14 { font-size: calc(var(--font-size-14)*1.07); } }
@media (min-width: 1200px) { .font-size-14 { font-size: calc(var(--font-size-14)*1.1); } }

.font-size-18 { font-size: var(--font-size-18); line-height: 110%; }
@media (min-width: 576px) { .font-size-18 { font-size: calc(var(--font-size-18)*1.05); } }
@media (min-width: 768px) { .font-size-18 { font-size: calc(var(--font-size-18)*1.1); } }
@media (min-width: 992px) { .font-size-18 { font-size: calc(var(--font-size-18)*1.2); } }
@media (min-width: 1200px) { .font-size-18 { font-size: calc(var(--font-size-18)*1.3); } }

.font-size-20 { font-size: var(--font-size-20); line-height: 110%; }
@media (min-width: 576px) { .font-size-20 { font-size: calc(var(--font-size-20)*1.05); } }
@media (min-width: 768px) { .font-size-20 { font-size: calc(var(--font-size-20)*1.1); } }
@media (min-width: 992px) { .font-size-20 { font-size: calc(var(--font-size-20)*1.2); } }
@media (min-width: 1200px) { .font-size-20 { font-size: calc(var(--font-size-20)*1.3); } }

.font-size-24 { font-size: var(--font-size-24); line-height: 110%; }
@media (min-width: 576px) { .font-size-24 { font-size: calc(var(--font-size-24)*1.05); } }
@media (min-width: 768px) { .font-size-24 { font-size: calc(var(--font-size-24)*1.1); } }
@media (min-width: 992px) { .font-size-24 { font-size: calc(var(--font-size-24)*1.2); } }
@media (min-width: 1200px) { .font-size-24 { font-size: calc(var(--font-size-24)*1.3); } }

.font-size-28 { font-size: var(--font-size-28); line-height: 110%; }
@media (min-width: 576px) { .font-size-28 { font-size: calc(var(--font-size-28)*1.05); } }
@media (min-width: 768px) { .font-size-28 { font-size: calc(var(--font-size-28)*1.1); } }
@media (min-width: 992px) { .font-size-28 { font-size: calc(var(--font-size-28)*1.2); } }
@media (min-width: 1200px) { .font-size-28 { font-size: calc(var(--font-size-28)*1.3); } }

.font-size-32 { font-size: var(--font-size-32); line-height: 110%; }
@media (min-width: 576px) { .font-size-32 { font-size: calc(var(--font-size-32)*1.05); } }
@media (min-width: 768px) { .font-size-32 { font-size: calc(var(--font-size-32)*1.1); } }
@media (min-width: 992px) { .font-size-32 { font-size: calc(var(--font-size-32)*1.2); } }
@media (min-width: 1200px) { .font-size-32 { font-size: calc(var(--font-size-32)*1.3); } }

.font-size-36 { font-size: var(--font-size-36); line-height: 110%; }
@media (min-width: 576px) { .font-size-36 { font-size: calc(var(--font-size-36)*1.05); } }
@media (min-width: 768px) { .font-size-36 { font-size: calc(var(--font-size-36)*1.1); } }
@media (min-width: 992px) { .font-size-36 { font-size: calc(var(--font-size-36)*1.2); } }
@media (min-width: 1200px) { .font-size-36 { font-size: calc(var(--font-size-36)*1.3); } }

.font-size-40 { font-size: var(--font-size-40); line-height: 110%; }
@media (min-width: 576px) { .font-size-40 { font-size: calc(var(--font-size-40)*1.05); } }
@media (min-width: 768px) { .font-size-40 { font-size: calc(var(--font-size-40)*1.1); } }
@media (min-width: 992px) { .font-size-40 { font-size: calc(var(--font-size-40)*1.2); } }
@media (min-width: 1200px) { .font-size-40 { font-size: calc(var(--font-size-40)*1.3); } }

.font-size-48 { font-size: var(--font-size-48); line-height: 110%; }
@media (min-width: 576px) { .font-size-48 { font-size: calc(var(--font-size-48)*1.05); } }
@media (min-width: 768px) { .font-size-48 { font-size: calc(var(--font-size-48)*1.1); } }
@media (min-width: 992px) { .font-size-48 { font-size: calc(var(--font-size-48)*1.2); } }
@media (min-width: 1200px) { .font-size-48 { font-size: calc(var(--font-size-48)*1.3); } }

.font-size-56 { font-size: var(--font-size-48); line-height: 110%; }
@media (min-width: 576px) { .font-size-56 { font-size: calc(var(--font-size-56)*1.05); } }
@media (min-width: 768px) { .font-size-56 { font-size: calc(var(--font-size-56)*1.1); } }
@media (min-width: 992px) { .font-size-56 { font-size: calc(var(--font-size-56)*1.2); } }
@media (min-width: 1200px) { .font-size-56 { font-size: calc(var(--font-size-56)*1.3); } }

.font-size-64 { font-size: var(--font-size-64); line-height: 110%; }
@media (min-width: 576px) { .font-size-64 { font-size: calc(var(--font-size-64)*1.1); } }
@media (min-width: 768px) { .font-size-64 { font-size: calc(var(--font-size-64)*1.2); } }
@media (min-width: 992px) { .font-size-64 { font-size: calc(var(--font-size-64)*1.3); } }
@media (min-width: 1200px) { .font-size-64 { font-size: calc(var(--font-size-64)*1.4); } }

.font-size-72 { font-size: var(--font-size-72); line-height: 110%; }
@media (min-width: 576px) { .font-size-72 { font-size: calc(var(--font-size-72)*1.1); } }
@media (min-width: 768px) { .font-size-72 { font-size: calc(var(--font-size-72)*1.2); } }
@media (min-width: 992px) { .font-size-72 { font-size: calc(var(--font-size-72)*1.3); } }
@media (min-width: 1200px) { .font-size-72 { font-size: calc(var(--font-size-72)*1.4); } }

.font-size-80 { font-size: var(--font-size-80); line-height: 110%; }
@media (min-width: 576px) { .font-size-80 { font-size: calc(var(--font-size-80)*1.1); } }
@media (min-width: 768px) { .font-size-80 { font-size: calc(var(--font-size-80)*1.2); } }
@media (min-width: 992px) { .font-size-80 { font-size: calc(var(--font-size-80)*1.3); } }
@media (min-width: 1200px) { .font-size-80 { font-size: calc(var(--font-size-80)*1.4); } }

.font-size-96 { font-size: var(--font-size-96); line-height: 110%; }
@media (min-width: 576px) { .font-size-96 { font-size: calc(var(--font-size-96)*1.1); } }
@media (min-width: 768px) { .font-size-96 { font-size: calc(var(--font-size-96)*1.2); } }
@media (min-width: 992px) { .font-size-96 { font-size: calc(var(--font-size-96)*1.3); } }
@media (min-width: 1200px) { .font-size-96 { font-size: calc(var(--font-size-96)*1.4); } }

.font-size-112 { font-size: var(--font-size-112); line-height: 110%; }
@media (min-width: 576px) { .font-size-112 { font-size: calc(var(--font-size-112)*1.1); } }
@media (min-width: 768px) { .font-size-112 { font-size: calc(var(--font-size-112)*1.2); } }
@media (min-width: 992px) { .font-size-112 { font-size: calc(var(--font-size-112)*1.3); } }
@media (min-width: 1200px) { .font-size-112 { font-size: calc(var(--font-size-112)*1.4); } }

.font-size-128 { font-size: var(--font-size-128); line-height: 110%; }
@media (min-width: 576px) { .font-size-128 { font-size: calc(var(--font-size-128)*1.1); } }
@media (min-width: 768px) { .font-size-128 { font-size: calc(var(--font-size-128)*1.2); } }
@media (min-width: 992px) { .font-size-128 { font-size: calc(var(--font-size-128)*1.3); } }
@media (min-width: 1200px) { .font-size-128 { font-size: calc(var(--font-size-128)*1.4); } }

/* Padding-Sys
---------------------------------------------------------------- */
.padding-top-15 { padding-top: 15px; }
@media (min-width: 576px) { .padding-top-15 { padding-top: calc(15px*1.1); } }
@media (min-width: 768px) { .padding-top-15 { padding-top: calc(15px*1.2); } }
@media (min-width: 992px) { .padding-top-15 { padding-top: calc(15px*1.3); } }
@media (min-width: 1200px) { .padding-top-15 { padding-top: calc(15px*1.4); } }

.padding-top-30 { padding-top: 30px; }
@media (min-width: 576px) { .padding-top-30 { padding-top: calc(30px*1.1); } }
@media (min-width: 768px) { .padding-top-30 { padding-top: calc(30px*1.2); } }
@media (min-width: 992px) { .padding-top-30 { padding-top: calc(30px*1.3); } }
@media (min-width: 1200px) { .padding-top-30 { padding-top: calc(30px*1.4); } }

.padding-top-45 { padding-top: 45px; }
@media (min-width: 576px) { .padding-top-45 { padding-top: calc(45px*1.1); } }
@media (min-width: 768px) { .padding-top-45 { padding-top: calc(45px*1.2); } }
@media (min-width: 992px) { .padding-top-45 { padding-top: calc(45px*1.3); } }
@media (min-width: 1200px) { .padding-top-45 { padding-top: calc(45px*1.4); } }

.padding-top-60 { padding-top: 60px; }
@media (min-width: 576px) { .padding-top-60 { padding-top: calc(60px*1.1); } }
@media (min-width: 768px) { .padding-top-60 { padding-top: calc(60px*1.2); } }
@media (min-width: 992px) { .padding-top-60 { padding-top: calc(60px*1.3); } }
@media (min-width: 1200px) { .padding-top-60 { padding-top: calc(60px*1.4); } }

.padding-top-90 { padding-top: 90px; }
@media (min-width: 576px) { .padding-top-90 { padding-top: calc(90px*1.1); } }
@media (min-width: 768px) { .padding-top-90 { padding-top: calc(90px*1.2); } }
@media (min-width: 992px) { .padding-top-90 { padding-top: calc(90px*1.3); } }
@media (min-width: 1200px) { .padding-top-90 { padding-top: calc(90px*1.4); } }

.padding-bottom-15 { padding-bottom: 15px; }
@media (min-width: 576px) { .padding-bottom-15 { padding-bottom: calc(15px*1.1); } }
@media (min-width: 768px) { .padding-bottom-15 { padding-bottom: calc(15px*1.2); } }
@media (min-width: 992px) { .padding-bottom-15 { padding-bottom: calc(15px*1.3); } }
@media (min-width: 1200px) { .padding-bottom-15 { padding-bottom: calc(15px*1.4); } }

.padding-bottom-30 { padding-bottom: 30px; }
@media (min-width: 576px) { .padding-bottom-30 { padding-bottom: calc(30px*1.1); } }
@media (min-width: 768px) { .padding-bottom-30 { padding-bottom: calc(30px*1.2); } }
@media (min-width: 992px) { .padding-bottom-30 { padding-bottom: calc(30px*1.3); } }
@media (min-width: 1200px) { .padding-bottom-30 { padding-bottom: calc(30px*1.4); } }

.padding-bottom-45 { padding-bottom: 45px; }
@media (min-width: 576px) { .padding-bottom-45 { padding-bottom: calc(45px*1.1); } }
@media (min-width: 768px) { .padding-bottom-45 { padding-bottom: calc(45px*1.2); } }
@media (min-width: 992px) { .padding-bottom-45 { padding-bottom: calc(45px*1.3); } }
@media (min-width: 1200px) { .padding-bottom-45 { padding-bottom: calc(45px*1.4); } }

.padding-bottom-60 { padding-bottom: 60px; }
@media (min-width: 576px) { .padding-bottom-60 { padding-bottom: calc(60px*1.1); } }
@media (min-width: 768px) { .padding-bottom-60 { padding-bottom: calc(60px*1.2); } }
@media (min-width: 992px) { .padding-bottom-60 { padding-bottom: calc(60px*1.3); } }
@media (min-width: 1200px) { .padding-bottom-60 { padding-bottom: calc(60px*1.4); } }

.padding-bottom-90 { padding-bottom: 90px; }
@media (min-width: 576px) { .padding-bottom-90 { padding-bottom: calc(90px*1.1); } }
@media (min-width: 768px) { .padding-bottom-90 { padding-bottom: calc(90px*1.2); } }
@media (min-width: 992px) { .padding-bottom-90 { padding-bottom: calc(90px*1.3); } }
@media (min-width: 1200px) { .padding-bottom-90 { padding-bottom: calc(90px*1.4); } }

/* Container-Sys
---------------------------------------------------------------- */
.container-fluid {
	padding-left: 120px;
	padding-right: 120px;
	position: relative;
}

.container {
	position: relative;
	width: 1400px;
	margin: 0 auto;
}

@media (max-width: 1500px) { .container { width: 1140px; } }
@media (max-width: 1199px) { .container { width: 960px; } }
@media (max-width: 991px) { .container { width: 737px; } }
@media (max-width: 767px) { .container { width: 100%; padding-left: 15px; padding-right: 15px; } }

/* Iconos
---------------------------------------------------------------- */
i.icono {
	display: inline-block;
	font-size: inherit;
}

i.icono svg {
	position: relative;
	top: .125em;
	flex-shrink: 0;
	height: 1em;
	width: 1em;
	fill: currentColor;
	transition: fill .3s;
}

/* Imagen cover
---------------------------------------------------------------- */
img.bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Generales
---------------------------------------------------------------- */
.animaciones-activado { transition: all .7s ease; }

.main-title {
	display: block;
	font-family: var(--font-family-auxiliar);
	width: 100%;
	text-align: center;
	position: relative;
	-webkit-text-stroke: 15px var(--color-blanco);
	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
	line-height: 135%;
}

.main-title strong,
.main-title i {
	display: block;
	position: relative;
	width: 100%;
}

.main-title strong::after,
.main-title i::after {
	content: var(--pseudo-content, "");
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-text-stroke: 0px;
	text-shadow: none;
	width: 100%;
}

.subtitle {
	display: block;
	font-family: var(--font-family-auxiliar);
	width: 100%;
	text-align: center;
	position: relative;
	-webkit-text-stroke: 15px var(--color-blanco);
	line-height: 120%;
}

.subtitle strong,
.subtitle i {
	display: inline-block;
	position: relative;
}

.subtitle strong::after,
.subtitle i::after {
	content: var(--pseudo-content, "");
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-text-stroke: 0px;
	text-shadow: none;
	width: 100%;
}

.button {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-rosado);
    color: var(--color-blanco);
    border-radius: 4px;
    position: relative;
    transition: all 0.1s ease-in-out;
	box-shadow: 0 3px 0 0 var(--color-rosado-oscuro);
}

.button:hover {
    transform: translateY(2px);
	box-shadow: 0 0 0 0 var(--color-rosado-oscuro);
}

.rte * { margin-bottom: 1em; }
.rte *:last-child { margin-bottom: 0; }
.rte strong,
.rte bold { font-weight: 600; }


/* Preloader
---------------------------------------------------------------- */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-arena);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#preloader .spinner {
	width: 50px;
	height: 50px;
	border: 5px solid var(--color-blanco);
	border-top: 5px solid var(--color-azul-ceruleo);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Nav
---------------------------------------------------------------- */
nav {
	background: var(--color-blanco) url(../images/overlay.png);
	width: 100vw;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 0 15px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

nav div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr 200px 1fr 1fr;
	text-align: center;
	height: 100%;
}

nav div.pod div.item {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--font-family-auxiliar);
	font-size: 25px;
}

nav div.pod div.item a {
	position: relative;
	display: block;
	padding-left: 50px;
}

nav div.pod div.item a i {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 25px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	color: var(--color-blanco);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

nav div.pod div.item a i svg {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 20px;
}

nav div.pod div.item:nth-of-type(1) a { color: var(--color-azul-ceruleo); }
nav div.pod div.item:nth-of-type(1) a i { background: var(--color-verde); }
nav div.pod div.item:nth-of-type(2) a { color: var(--color-azul-oscuro); }
nav div.pod div.item:nth-of-type(2) a i { background: var(--color-amarillo); }
nav div.pod div.item:nth-of-type(4) a { color: var(--color-azul-oscuro); }
nav div.pod div.item:nth-of-type(4) a i { background: var(--color-azul-ceruleo); }
nav div.pod div.item:nth-of-type(5) a { color: var(--color-azul-ceruleo); }
nav div.pod div.item:nth-of-type(5) a i { background: var(--color-amarillo); }

nav div.pod div.item img {
	display: block;
    width: 200px;
    position: absolute;
    top: 0;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
	animation: nav-logo 2s ease-in-out infinite alternate;
}

@keyframes nav-logo {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

@media (max-width: 1500px) { nav div.pod div.item { font-size: 18px; } }
@media (max-width: 1199px) { nav div.pod { grid-template-columns: 1fr 1fr 150px 1fr 1fr; } }
@media (max-width: 991px) { nav div.pod div.item img { width: 150px; } }

@media (max-width: 767px) {
	nav div.pod div.item a span { display: none; }
	nav div.pod div.item a { padding-left: 40px; }
}

@media (max-width: 550px) {
	nav div.pod { grid-template-columns: 1fr 1fr 100px 1fr 1fr; }
	nav div.pod div.item img { width: 100px; }
}

/* Splash
---------------------------------------------------------------- */
#splash {
	height: 100vh;
	width: 100vw;
	position: relative;
}

#splash svg.outline {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.5));
	position: absolute;
	top: 0;
	left: 0;
}

#splash svg.outline path {
	stroke: none;
	fill-rule: nonzero;
	fill: var(--color-amarillo);
	fill-opacity: 1;
}

#splash div.animated-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: url(#splashClip);
	-webkit-clip-path: url(#splashClip);
	overflow: hidden;
}

#splash div.animated-bg::before {
	content: '';
	position: absolute;
	width: 250%;
	height: 250%;
	top: -75%;
	left: -75%;
	background-image: url('../images/splash_bg.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: rotate-bg 120s linear infinite;
}

@keyframes rotate-bg {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#splash div.animated-bg::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url('../images/overlay.png');
}

#splash div.container {
	position: absolute;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#splash div.container div.pod {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#splash div.container div.pod div.txt {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#splash div.container div.pod div.txt .main-title {
	position: relative;
	animation: heartbeat 6s infinite ease-in-out;
}

#splash div.container div.pod div.txt .main-title strong { font-size: 2em; }

#splash div.container div.pod div.txt .main-title::before {
	content: '';
	display: block;
	height: 135%;
	position: absolute;
	top: 0;
	left: 50%;
	background: var(--color-azul-claro);
    aspect-ratio: 2 / 1;
    border-radius: 100%;
	transform: skew(-25deg) translateX(-50%);
	border: 8px solid var(--color-blanco);
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

#splash div.container div.pod div.txt .main-title strong::after { color: var(--color-rosado); }
#splash div.container div.pod div.txt .main-title i::after { color: var(--color-azul-ceruleo); }

@keyframes heartbeat {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); }
    50% { transform: scale(1); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#splash div.container div.pod div.img { position: relative; }

#splash div.container div.pod div.img img.cookies {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	display: block;
	width: 450px;
	animation: splash-cookies 2s ease-in-out infinite alternate;
}

@keyframes splash-cookies {
    0% { transform: rotate(0deg) translateY(-50%); }
    30% { transform: rotate(3deg) translateY(-50%); }
    100% { transform: rotate(0deg) translateY(-50%); }
}

#splash div.container div.pod div.img img.adolfo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	display: block;
	width: 550px;
	animation: splash-adolfo 2s ease-in-out infinite alternate;
}

@keyframes splash-adolfo {
    0% { transform: rotate(0deg) translateY(-50%); }
    30% { transform: rotate(-1deg) translateY(-50%); }
    100% { transform: rotate(0deg) translateY(-50%); }
}

@media (max-width: 1500px) {
	#splash div.container div.pod div.img img.adolfo { width: 500px; }
	#splash div.container div.pod div.img img.cookies { width: 400px; }
}

@media (max-width: 1199px) {
	#splash div.container div.pod div.img img.adolfo { width: 450px; }
	#splash div.container div.pod div.img img.cookies { width: 350px; }
}

@media (max-width: 991px) {
	#splash div.container div.pod div.img img.adolfo { width: 350px; }
	#splash div.container div.pod div.img img.cookies { width: 200px; }
	#splash div.container div.pod div.txt { overflow: hidden; }
	#splash div.container div.pod div.txt .main-title { font-size: 3rem; }
}

@media (max-width: 767px) {
	#splash div.container div.pod { grid-template-columns: 1fr; }
	#splash div.container div.pod div.img img.cookies { width: 350px; }
}

@media (max-width: 550px) {
	#splash div.container div.pod div.txt .main-title { font-size: 2.2rem; }
	#splash div.container div.pod div.img img.adolfo { width: 300px; }
	#splash div.container div.pod div.img img.cookies { width: 200px; }
}

/* Intro
---------------------------------------------------------------- */
#intro div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

#intro div.pod div.txt div.rte strong { color: var(--color-azul-ceruleo); }

#intro div.pod div.title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#intro div.pod div.title strong::after { color: var(--color-azul-oscuro); }
#intro div.pod div.title i::after { color: var(--color-amarillo); }

#intro div.pod div.title .subtitle {
	max-width: 500px;
	position: relative;
}

#intro div.pod div.txt { padding: 45px 45px 60px 0; }

#intro div.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-arena) url(../images/overlay.png);
	transform: skew(-2deg,-2deg);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

#intro div.background img {
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: skew(2deg,2deg) scale(2);
	opacity: .1;
}

#intro div.tape {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: skew(-2deg,-2deg);
}

#intro div.tape::after {
	content: '';
	display: block;
	width: 200px;
	height: 30px;
	background: var(--color-azul-ceruleo) url(../images/icono_galleta.svg) repeat-x;
	background-position: center center;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 991px) {
	#intro div.pod { grid-gap: 15px; }
	#intro div.pod div.title { padding-left: 30px; }
}

@media (max-width: 767px) {
	#intro div.pod { grid-template-columns: 1fr; }
	#intro div.pod div.title { padding: 30px 0 0 0; }
	#intro div.pod div.title .subtitle { font-size: 2.5rem; }
	#intro div.pod div.txt { padding: 0 15px 30px 15px; text-align: center; }
	#intro div.background { width: calc(100% - 30px); left: 15px; }
	#intro div.tape { width: calc(100% - 30px); left: 15px; }
}

@media (max-width: 550px) {
	#splash div.container div.pod div.txt .main-title { font-size: 2.2rem; }
	#splash div.container div.pod div.img img.adolfo { width: 300px; }
	#splash div.container div.pod div.img img.cookies { width: 200px; }
}

/* Adolfo
---------------------------------------------------------------- */
#adolfo div.pod {
	width: 50%;
	position: relative;
}

#adolfo div.pod div.txt div.rte strong { color: var(--color-azul-ceruleo); }

#adolfo div.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-blanco) url(../images/overlay.png);
	transform: skew(-2deg,-2deg);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	padding: 30px;
	overflow: hidden;
}

#adolfo div.background div.frame {
	width: 100%;
	height: 100%;
	border: 3px dashed var(--color-azul-oscuro);
	position: relative;
}

#adolfo div.background img.pin {
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
	z-index: 10;
}

#adolfo div.background div.img {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 50%;
}

#adolfo div.background div.img { transform: skew(2deg,2deg); }

#adolfo div.background div.img img.galletas {
	position: absolute;
	height: 75%;
    top: 45px;
    right: 45px;
	animation: adolfo-galletas 15s linear infinite;
}

@keyframes adolfo-galletas {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#adolfo div.background div.img img.adolfo {
	position: absolute;
	height: 100%;
    top: 45px;
    left: 0;
	animation: adolfo-adolfo 2s ease-in-out infinite alternate;
}

@keyframes adolfo-adolfo {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

#adolfo div.background div.img img.sello {
	position: absolute;
	height: 50%;
    top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
}

#adolfo div.pod div.txt { padding: 75px 0 75px 75px; }
#adolfo div.pod div.txt .subtitle strong::after { color: var(--color-azul-oscuro); }
#adolfo div.pod div.txt .subtitle i::after { color: var(--color-amarillo); }

@media (max-width: 1199px) {
	#adolfo div.background div.img img.galletas { height: 50%; }
	#adolfo div.background div.img img.adolfo { height: 75%; top: unset; bottom: -30px; }
	#adolfo div.background div.img img.sello { height: 35%; }
}

@media (max-width: 991px) {
	#adolfo div.background div.img img.galletas { height: 50%; }
	#adolfo div.background div.img img.adolfo { height: 75%; top: unset; bottom: -30px; }
	#adolfo div.background div.img img.sello { height: 25%; top: 60px; right: 60px; left: unset; transform: none; }
}

@media (max-width: 767px) {
	#adolfo div.background { width: calc(100% - 30px); left: 15px; padding: 15px; }
	#adolfo div.pod { width: 100%; }
	#adolfo div.pod div.txt { padding: 60px 45px 30px 30px; text-align: center; }
	#adolfo div.pod div.txt div.rte { padding-left: 140px; }
	#adolfo div.background div.img { width: 100%; left: 0; }
	#adolfo div.background div.img img.galletas { height: 150px; top: 0; right: 0; }
	#adolfo div.background div.img img.adolfo { height: auto; width: 150px; left: 15px; }
	#adolfo div.background div.img img.sello { height: 100px; right: unset; left: 30px; top: unset; bottom: 30px; }
}

@media (max-width: 550px) {
	#adolfo div.background div.img { display: none; }
	#adolfo div.pod div.txt { padding: 60px 30px 30px 30px; }
	#adolfo div.pod div.txt div.rte { padding: 0 0 15px 0; }
}

/* Menú
---------------------------------------------------------------- */
#menu .subtitle { -webkit-text-stroke: 15px var(--color-arena); }
#menu .subtitle strong::after { color: var(--color-azul-oscuro); }
#menu .subtitle i::after { color: var(--color-azul-ceruleo); }

#menu .subtitle::before {
	content: '';
	display: block;
	width: 100%;
	height: 50%;
	background: var(--color-arena) url(../images/overlay.png);
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 25px 25px 0 0;
}

#menu div.pod {
	background: var(--color-arena) url(../images/overlay.png);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	border-radius: 0 0 25px 25px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 30px;
	padding: 30px;
}

#menu div.pod div.item {
	background: var(--color-azul-oscuro) url(../images/overlay.png);
	border-radius: 15px;
	padding: 15px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

#menu div.pod div.item div.inner {
	border-radius: 15px;
	border: 3px dashed var(--color-blanco);
	position: relative;
}

#menu div.pod div.item div.inner div.img {
	position: relative;
	padding-top: 75%;
	animation: spin 60s linear infinite;
}

#menu div.pod div.item div.inner div.img img {
	display: block;
	width: 80%;
	height: 80%;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#menu div.pod div.item div.inner div.misma-altura-item {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#menu div.pod div.item div.inner .tag {
	font-family: var(--font-family-auxiliar);
	color: var(--color-blanco);
	padding: 0 15px 15px 15px;
}

@media (max-width: 991px) { #menu div.pod { grid-template-columns: 1fr 1fr; } }
@media (max-width: 550px) { #menu div.pod { grid-template-columns: 1fr; } }

/* Order
---------------------------------------------------------------- */
#order div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

#order div.pod div.txt div.rte strong { color: var(--color-amarillo); }

#order div.pod div.title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#order div.pod div.title strong::after { color: var(--color-amarillo); }
#order div.pod div.title i::after { color: var(--color-azul-oscuro); }

#order div.pod div.title .subtitle {
	max-width: 500px;
	position: relative;
}

#order div.pod div.txt {
	padding: 45px 45px 60px 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;
	position: relative;
}

#order div.pod div.txt div.item { 
	display: grid;
	grid-template-columns: 100px 1fr;
}

#order div.pod div.txt div.item div.number {
	display: flex;
	align-items: center;
}

#order div.pod div.txt div.item div.number .subtitle {
	display: inline-block;
	width: min-content;
	top: -5px;
}

#order div.pod div.txt div.item div.number i::after { color: var(--color-azul-oscuro); }

#order div.pod div.txt div.item div.number i.icono {
	font-size: 25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--color-verde);
	position: relative;
	color: var(--color-blanco);
	left: 15px;
}

#order div.pod div.txt div.item:nth-of-type(2) div.number i.icono { background: var(--color-amarillo); }
#order div.pod div.txt div.item:nth-of-type(3) div.number i.icono { background: var(--color-azul-oscuro); }
#order div.pod div.txt div.item:nth-of-type(4) div.number i.icono { background: var(--color-amarillo); }

#order div.pod div.txt div.item div.number i.icono svg {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 20px;
}

#order div.pod div.txt div.item div.number i.icono::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	border: 5px solid var(--color-blanco);
}

#order div.pod div.txt div.item div.line {
	display: flex;
	align-items: center;
}

#order div.pod div.txt .button {
	position: absolute;
	bottom: 30px;
	right: 30px;
}

#order div.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-azul-ceruleo) url(../images/overlay.png);
	transform: skew(2deg,2deg);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

#order div.background img {
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: skew(-2deg,-2deg) scale(2);
	opacity: .1;
}

#order div.tape {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: skew(2deg,2deg);
}

#order div.tape::after {
	content: '';
	display: block;
	width: 200px;
	height: 30px;
	background: var(--color-rosado) url(../images/icono_galleta.svg) repeat-x;
	background-position: center center;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 1199px) {
	#order div.pod { grid-gap: 15px; }
	#order div.pod div.title { padding-left: 30px; }
}

@media (max-width: 767px) {
	#order div.background,
	#order div.tape { width: calc(100% - 30px); left: 15px; }
	#order div.pod { grid-template-columns: 1fr; }
	#order div.pod div.title { padding: 45px 0 0 0; }
	#order div.pod div.txt { padding: 0 30px 60px 30px; }
	#order div.pod div.txt .button { bottom: 15px; right: 15px; }
}

@media (max-width: 550px) {
	#adolfo div.background div.img { display: none; }
	#adolfo div.pod div.txt { padding: 60px 30px 30px 30px; }
	#adolfo div.pod div.txt div.rte { padding: 0 0 15px 0; }
}

/* Pictures
---------------------------------------------------------------- */
#pictures {
	background: var(--color-rosado-oscuro) url(../images/pictures_bg.jpg);
	box-shadow:0 0 20px 5px rgba(0, 0, 0, 0.5)
}

#pictures div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 45px;
	max-width: 1200px;
	margin: 0 auto;
}

#pictures div.pod div.item {
	padding-top: 125%;
	position: relative;
    transition: transform 0.2s ease-out;
    transform-origin: top center;
}

#pictures div.pod div.item div.img {
	position: absolute;
	top: 5%;
	left: 5%;
	height: 75%;
	width: 90%;
}

#pictures div.pod div.item div.overlay {
	background: url(../images/pictures_overlay.png);
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#pictures div.pod div.item div.overlay::after {
	display: block;
	content: '';
	width: 100px;
	height: 70px;
	background: url(../images/pin_rojo.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
}

#pictures div.pod div.item div.txt {
	height: 15%;
	position: absolute;
	bottom: 5%;
	width: 90%;
	left: 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'adorn-condensed-sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
}

@media (max-width: 1199px) { #pictures div.pod div.item div.txt div.rte { font-size: 1rem; } }
@media (max-width: 991px) { #pictures div.pod { grid-template-columns: 1fr 1fr; grid-gap: 30px; } }

@media (max-width: 767px) {
	#pictures div.pod { grid-gap: 15px; }
	#pictures div.pod div.item div.txt div.rte { font-size: .8rem; }
}

@media (max-width: 550px) {
	#pictures div.pod { grid-template-columns: 1fr; }
	#pictures div.pod div.item div.txt div.rte { font-size: 1.2rem; }
}

/* Cards
---------------------------------------------------------------- */
#cards div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 30px;
}

#cards div.pod div.item {
	position: relative;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	border-radius: 25px;
	padding: 30px;
}

#cards div.pod div.item::after {
	content: '';
	display: block;
	width: calc(100% - 30px);
	height: calc(100% - 30px);
	border: 3px dashed;
	position: absolute;
	top: 15px;
	left: 15px;
	border-radius: 15px;
	z-index: 0;
}

#cards div.pod div.testimonials { background: var(--color-blanco) url(../images/overlay.png); }
#cards div.pod div.testimonials .subtitle { -webkit-text-stroke-color: var(--color-arena); }
#cards div.pod div.testimonials .subtitle i::after { color: var(--color-azul-ceruleo); }
#cards div.pod div.testimonials::after { border-color: var(--color-azul-ceruleo); }

#cards div.pod div.testimonials i.quote {
	font-size: 60px;
	color: var(--color-arena);
	display: block;
	position: absolute;
	top: 30px;
	left: 30px;
	transform: rotate(180deg);
}

#cards div.pod div.testimonials div.scroller {
	text-align: center;
	z-index: 2;
	position: relative;
    overflow: hidden;
    transition: height 0.5s ease;
}

#cards div.pod div.testimonials div.scroller div.item-testimonial {
    display: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

#cards div.pod div.testimonials div.scroller div.item-testimonial.active {
	display: block;
    opacity: 1;
	position: relative;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s;
}

#cards div.pod div.testimonials div.scroller .item-testimonial.slide-left { animation: slideFromRight 0.5s forwards; }
#cards div.pod div.testimonials div.scroller .item-testimonial.slide-right { animation: slideFromLeft 0.5s forwards; }


@keyframes slideFromRight {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes slideFromLeft {
	from { transform: translateX(-30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

#cards div.pod div.testimonials div.scroller div.rte { padding: 0 30px; }

#cards div.pod div.testimonials div.scroller div.controls {
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	grid-gap: 15px;
}

#cards div.pod div.testimonials div.scroller div.controls div.arrows {
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cards div.pod div.testimonials div.scroller div.controls div.arrows button {
	padding: 8px;
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--color-amarillo);
	display: inline-block;
}

#cards div.pod div.testimonials div.scroller div.controls div.arrows button:hover { color: var(--color-azul-ceruleo); }
#cards div.pod div.testimonials div.scroller div.controls div.arrows button:last-child i { transform: rotate(180deg); }

#cards div.pod div.testimonials div.scroller div.controls div.name {
	color: var(--color-azul-ceruleo);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: right;
}

#cards div.pod div.testimonials div.scroller div.controls div.quote {
	color: var(--color-arena);
	font-size: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cards div.pod div.testimonials div.scroller div.controls div.quote i svg { top: 0; }

#cards div.pod div.cta {
	background: var(--color-azul-ceruleo) url(../images/overlay.png);
	display: flex;
	align-items: center;
	justify-content: center;
}

#cards div.pod div.cta .subtitle {
	-webkit-text-stroke-color: var(--color-arena);
	margin-bottom: 0;
}

#cards div.pod div.cta .subtitle i::after { color: var(--color-azul-ceruleo); }
#cards div.pod div.cta::after { border-color: var(--color-arena); }

#cards div.pod div.cta div.rte {
	text-align: center;
	font-family: var(--font-family-auxiliar);
	color: var(--color-blanco);
	transform: skewY(-5deg);
	padding-bottom: 60px;
}

#cards div.pod div.cta div.rte strong { color: var(--color-arena); }

#cards div.pod div.cta a.button {
	position: absolute;
	bottom: 30px;
	right: 30px;
	z-index: 2;
}

@media (max-width: 991px) { #cards div.pod { grid-template-columns: 1fr; } }

@media (max-width: 550px) {
	#cards div.pod div.testimonials i.quote,
	#cards div.pod div.testimonials div.scroller div.controls div.quote { font-size: 40px; }
}

/* FAQ
---------------------------------------------------------------- */
#faq .subtitle i::after { color: var(--color-azul-ceruleo); }
#faq .subtitle strong::after { color: var(--color-azul-oscuro); }

#faq div.pod {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: min-content;
	grid-gap: 30px;
	row-gap: 15px;
	align-items: start;
}

#faq div.pod div.item {
	background: var(--color-arena) url(../images/overlay.png);
	border-radius: 25px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	position: relative;
	transition: min-height 0.3s ease;
}

#faq div.pod div.item div.question {
	cursor: pointer;
	position: relative;
	transition: color 0.3s ease;
	padding: 15px 50px 15px 15px;
}

#faq div.pod div.item div.question.active { color: var(--color-azul-ceruleo); }

#faq div.pod div.item div.question i {
	font-size: 18px;
	color: var(--color-blanco);
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	background: var(--color-azul-ceruleo) url(../images/overlay.png);
	border-radius: 50%;
	transition: transform 0.3s ease;
}

#faq div.pod div.item div.question i svg {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#faq div.pod div.item div.answer {
	overflow: hidden;
	height: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease;
}

#faq div.pod div.item div.question.active i { transform: translateY(-50%) rotate(180deg); }
#faq div.pod div.item div.answer div.rte { padding: 0 15px 15px 15px; }

@media (max-width: 550px) { #faq div.pod { grid-template-columns: 1fr; } }

/* Footer
---------------------------------------------------------------- */
footer {
	position: relative;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

footer::before {
	width: 100%;
	height: calc(100% - 75px);
	position: absolute;
	top: 75px;
	background: var(--color-blanco) url(../images/overlay.png);
	content: '';
}

footer .logo {
	display: block;
	height: 150px;
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
	position: absolute;
	top: 0;
	left: 0;
}

footer ul {
	display: block;
	padding-top: 110px;
	text-align: right;
	font-size: 0;
}

footer ul li {
	display: inline-block;
	margin-left: 15px;
}

footer ul li a {
	color: var(--color-principal);
	position: relative;
	padding-left: 50px;
	display: block;
	height: 40px;
	line-height: 40px;
}

footer ul li a:hover { color: var(--color-azul-oscuro) }

footer ul li a i {
	width: 40px;
	height: 40px;
	background: var(--color-azul-ceruleo);
	color: var(--color-blanco);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block !important;
}

footer ul li:nth-of-type(2) a i { background: var(--color-rosado); }
footer ul li:nth-of-type(3) a i { background: var(--color-verde); }

footer ul li a i svg {
	display: block;
	position: absolute;
	top: 50% !important;
	left: 50%;
	transform: translate(-50%,-50%);
}

footer div.copy {
	text-align: right;
	padding: 50px 0 15px 0;
}

footer div.copy a {
	color: var(--color-principal);
	text-decoration: underline;
}

footer div.copy a:hover { color: var(--color-rosado); }

@media (max-width: 767px) {
	footer .logo { height: 100px; left: 15px; }
	footer::before { top: 50px; height: calc(100% - 50px); }
	footer ul { padding-top: 65px; }
}