/*  
Theme Name: Kosmos
Theme URI: http://www.factorn.com
Version: 1.0.0
Author: factor ñ
Author URI: http://www.factorn.com
*/



@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
:root {
	--margendelectura: calc(50% - 900px);
	--azul: #003a70;
	--amarillo: #ffd200;
	--gris: #f0f0f0;
	--fuente: "Plus Jakarta Sans", sans-serif;
	--fuentedisplay: "Plus Jakarta Sans", sans-serif;
	--interlineado: 1.4em;
	--margen: 30px;
	--radio: 8px;
	--curva: 24px;
	--borde: 2px solid var(--azul);
	--opacidadhover: .75;
}




/************************************ RESET ************************************************/
* {padding: 0; margin: 0; box-sizing: border-box; text-decoration: none;}
a, img, label, input.button, .wpcf7-acceptance input {transition: .1s ease-out;}
html {scrollbar-color: var(--amarillo) var(--azul);}
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: var(--azul);}
::-webkit-scrollbar-thumb {background: var(--amarillo); transition: .2s;}
::-webkit-scrollbar-thumb:hover {background: white;}




/************************************ TEXTO ************************************************/
html {max-width: 100vw; margin: 0; font-family: var(--fuente); font-size: max(16px, .8vw); color: var(--azul); scroll-behavior: smooth; overscroll-behavior: none; background: var(--azul);}
body {overflow-x: hidden; padding: 20px; margin: 50px; color: var(--azul); background: var(--gris);}




/************************************ MENU ************************************************/
header {}

.menu_top {display: grid; grid-template-columns: 1fr auto; gap: 8px; justify-content: stretch; align-items: center; width: 100%; margin: 0 0 10px;}

.menu {display: grid; grid-auto-flow: column; padding: 0; margin: 0; border: var(--borde); border-radius: var(--curva); overflow: hidden;}
.menu li {position: relative; list-style: none; margin: 0; padding: 0; border-right: var(--borde);}
.menu li:last-child {border: 0 !important;}
.menu li a {display: block; padding: 0 25px; line-height: 40px; height: 40px; color: currentColor; text-align: center; text-transform: uppercase; font-weight: bold; white-space: nowrap;}
.menu li.current-menu-item a {color: var(--gris); background: var(--azul); pointer-events: none;}
.menu li a:hover {color: var(--azul); background: var(--amarillo);}

.menu_boton {display: none;}
.menu_boton a {display: block; width: 100%; padding: 0 25px; border: var(--borde); border-radius: var(--curva); line-height: 40px; height: 40px; color: currentColor; background: none; text-align: center; text-transform: uppercase; font-weight: bold; white-space: nowrap; cursor: pointer;}
.menu_boton a:hover {color: currentColor; background: var(--amarillo);}

.menu_movil {display: none;}
.menu_movil .menu {grid-auto-flow: row; margin-bottom: 10px;}
.menu_movil .menu li {border-right: 0; border-bottom: var(--borde);}

.menu_iconos {display: grid; grid-auto-flow: column; justify-content: center; gap: 8px;}
.menu_iconos a {border: var(--borde); border-radius: var(--curva); overflow: hidden; }
.menu_iconos img {display: block; width: 60px; height: 40px; cursor: pointer;}
.menu_iconos img:hover {background: var(--amarillo);}
.menu_iconos a:last-child img {border: 0;}

.menu_logo {padding: 10px; border-radius: var(--curva) var(--curva) 0 0; border: var(--borde);}
.menu_logo a {display: block; max-width: 600px; margin: auto;}
.menu_logo img {display: block;}




/************************************ MAIN ************************************************/
main {}

h1, .encabezado {font-family: var(--fuentedisplay); font-size: 3.5rem; line-height: 1.1em; font-weight: 1000; margin-bottom: 50px; text-wrap: balance; text-transform: uppercase;}
h2 {font-family: var(--fuentedisplay); font-size: 2.0rem; line-height: 1.2em; font-weight: 1000; margin-bottom: var(--margen); text-wrap: balance;}
h3 {font-family: var(--fuentedisplay); font-size: 1.5rem; line-height: 1em;}
h4 {font-family: var(--fuente); font-size: 1.5rem; margin: 0 0 10px;}

a {color: var(--azul);}
a:hover {color: var(--amarillo);}

p {margin-bottom: var(--margen); line-height: var(--interlineado);}
ul {padding-left: 2em; margin-bottom: var(--margen); line-height: var(--interlineado);}
ul li {list-style: disc;}
ol {padding-left: 2em; margin-bottom: var(--margen); line-height: var(--interlineado);}
ol li {list-style: decimal-leading-zero;}
small {display: block; font-size: smaller; line-height: 1.3em; margin-bottom: var(--margen);}
table {width: 100%; margin-bottom: var(--margen); border-collapse: collapse; border-spacing: 0; font-size: smaller;}
table tr, table td {padding: 10px; border: 1px solid;}
hr {margin: 50px 0; border-top: 2px solid;}

.encabezado {padding: 10px; border: var(--borde); border-top: 0; margin: 0; font-size: 1.5rem; font-weight: 600; text-align: center; background: var(--amarillo);}
.foto_encabezado {height: 60vh !important; border: var(--borde); border-top: 0; object-fit: cover; /*object-position: 0 27%*/;}

.entradas {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; border: var(--borde); border-top: 0;}
.entrada {display: grid; grid-template-rows: auto 1fr; border: var(--borde); border-radius: var(--curva); overflow: hidden;}
.entrada img {display: block; border-bottom: var(--borde); aspect-ratio: 3/2; object-fit: cover;}
.entrada div {display: grid; grid-template-rows: auto 1fr auto; padding: 30px;}
.entrada .boton {margin-bottom: 0;}

.editorial {display: grid; grid-auto-flow: dense; align-items: stretch; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 10px; border: var(--borde); border-top: 0; font-size: 1.25rem;}
.editorial:nth-child(even) .imagen {grid-column: 1 / span 2;}
.editorial:nth-child(odd) .imagen {grid-column: 2 / span 2;}
.editorial > div {position: sticky; top: 10px;}
.editorial .imagen img {display: block; width: 100%; height: 100%; object-fit: cover; border: var(--borde); border-radius: var(--curva); aspect-ratio: 2;}
.editorial .texto {display: flex; flex-direction: column; justify-content: center; padding: 50px;  border: var(--borde); border-radius: var(--curva);}
.editorial ul {padding: 0;}
.editorial ul li {padding: 20px 20px 20px 32px; margin: 0 0 4px 22px; font-weight: bold; border: var(--borde); border-radius: 10px; list-style: none; position: relative; line-height: normal;}
.editorial ul li:before {display: block; position: absolute; left: 0; top: 50%; transform: translate(-22px, -50%); width: 40px; height: 40px; border: var(--borde); border-radius: 50px; overflow: visible; text-align: center; content: ''; background: url('images/ico_check.svg') var(--amarillo);}
.editorial .texto img {border: var(--borde); border-radius: var(--radio);}

.page-id-5 .editorial {grid-template-columns: 1fr 1fr; align-items: start;}
.page-id-5 .editorial .imagen {grid-column: span 1;}
.page-id-5 .editorial .imagen img {aspect-ratio: inherit;}

.single .editorial {grid-template-columns: 1fr 1fr; align-items: start;}
.single .editorial .imagen {grid-column: span 1;}
.single .editorial .imagen img {aspect-ratio: inherit;}

.continuo {padding: 50px; border: var(--borde); border-top: 0;}
.continuo p a {text-decoration: underline;}

.fecha {font-size: smaller; font-style: italic;}

.wp-post-image {display: block; max-width: 100%; height: auto;}

.mapa .texto ul {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--margen);}
.mapa .texto ul li {padding: 15px 20px; margin: 0;}
.mapa .texto ul li:before {display: none;}
.mapa .texto ul a {font-weight: normal; font-size: 1rem;}
.mapa .imagen img {object-fit: contain;}

.otros_servicios .texto ul {display: grid; gap: 0; margin-top: var(--margen); font-size: 1rem;}
.otros_servicios .texto ul li {padding: 10px 15px; margin-left: 35px;}
.otros_servicios .texto ul li:before {width: 28px; height: 28px; transform: translate(-38px, -50%); border: 0; background: url("images/ico_estrella.svg");}

.responsive-video {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.responsive-video iframe, .responsive-video object, .responsive-video embed, .responsive-video video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.boton {display: inline-block; width: max-content; padding: 12px 24px; border: var(--borde); border-radius: 30px; margin: 0 0 var(--margen); align-self: flex-start; font-size: 1rem; font-weight: bold; color: var(--azul); background: var(--amarillo); cursor: pointer;}
.boton:hover {color: var(--gris); background: var(--azul);}

.pagination {display: flex; justify-content: center; gap: 4px; padding: 30px; border: var(--borde); border-top: 0; text-align: center;}
.pagination * {min-width: 2em; display: block; padding: 5px 10px; border: var(--borde); border-radius: 50px;}
.pagination .page-numbers.current {font-weight: bold; color: var(--gris); background: var(--azul);}
.pagination a:hover{color: var(--azul); background: var(--amarillo);}




/************************************ CONTACTO ************************************************/
.campo {display: block; max-width: 100%; padding: 5px 10px; border: var(--borde); border-radius: var(--radio); margin: 0 0 -15px 0; color: var(--azul); font-size: small;}
.campo:focus-within {background: white;}
.campo input {padding: 0; font-weight: bold;}

.wpcf7-text, .wpcf7-textarea {width: 100%; padding: 5px 10px; border: 0; outline: 0; font-family: var(--fuente); font-size: 1rem; font-style: italic; background: none;}
.wpcf7-textarea {height: 120px; resize: none;}
.wpcf7-not-valid-tip {font-size: small;}

.wpcf7-acceptance {display: block; padding: 10px 0;}
.wpcf7-acceptance input {display: inline-block; appearance: none; width: 30px; height: 30px !important; border: var(--borde); border-radius: var(--radio); background: no-repeat center center; background-size: 80% auto; vertical-align: middle; cursor: pointer;}
.wpcf7-acceptance input:focus {background-color: white;}
.wpcf7-acceptance input:checked {background-image: url("images/ico_check.svg");}




/************************************ FOOTER ************************************************/
footer {}
footer a {color: currentColor; font-weight: bold;}
footer a:hover {color: var(--amarillo);}

.footer_superior {padding: 60px 30px; border: var(--borde); border-top: 0; text-align: center; background: var(--amarillo);}
.footer_superior div {display: flex; gap: 10px; justify-content: center; margin-top: 20px;}
.footer_superior p {margin: 0 auto; font-size: larger;}
.footer_superior .boton {margin: 0; color: white; background: var(--azul);}
.footer_superior .boton:hover {color: var(--azul); background: white;}

.footer_centro {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; gap: 30px; padding: 50px 30px; border: var(--borde); border-top: 0; border-radius: 0 0 var(--curva) var(--curva);}
.footer_centro h4 {padding-bottom: 15px; margin-bottom: 15px; border-bottom: var(--borde);}
.footer_centro a {font-weight: normal;}
.footer_centro .menu_iconos {width: max-content; justify-content: start;}
.footer_centro .menu_iconos a:first-child img {border: 0;}

#sello_prodat {display: block; width: auto !important;; padding: 15px; border: var(--borde); border-radius: var(--radio); background: white;}
#sello_prodat img {display: block; width: 100%;}

.footer_inferior {margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 10px;}
.footer_inferior p {padding: 0 30px; border: var(--borde); border-radius: var(--curva); margin: 0; text-align: center; line-height: 40px;}

#CybotCookiebotDialog, #CookiebotWidget {filter: grayscale(1);}




/************************************ MEDIA QUERIES ************************************************/
@media all and (max-width: 1400px) {
	:root {--margendelectura: 20px;}
	body {padding: 10px; margin: 0;}
	header {grid-template-columns: 1fr 1fr;}
	.menu_escritorio {display: none;}
	.menu_boton {display: block;}
	h1 {font-size: 2.0rem;}
	h2 {font-size: 1.5rem;}
	h2 {font-size: 1.25rem;}
	.entradas {grid-template-columns: 1fr 1fr;}
	.entrada div {padding: 20px;}
	.editorial {grid-template-columns: 1fr !important; font-size: 1rem;}
	.editorial > div {position: inherit;}
	.editorial .imagen {grid-column: auto !important;}
	.editorial .texto {padding: 20px;}
	.otros_servicios .texto ul {margin-top: 0;}
	.mapa .texto ul {margin-top: 0;}
	.footer_centro {grid-template-columns: 1fr 1fr 1fr;}
	.footer_inferior {align-items: start;}
	.footer_inferior p {padding: 20px; text-align: left; line-height: normal;}
}
@media (max-width: 782px) {
	.entradas {grid-template-columns: 1fr;}
	.mapa .texto ul {grid-template-columns: 1fr;}
	.footer_superior {padding: 50px 20px;}
	.footer_centro {grid-template-columns: 1fr; gap: 30px; padding: 20px;}
	.footer_inferior {grid-template-columns: 1fr; text-align: inherit;}
}