/*
Theme Name:  Espacio108
Author:      MadeWordPress
Author URI:  http://madewordpress.com/
Theme URI:   http://madewordpress.com/
Description:
Template:    vantage
Version:     1.0.0
License:
Tags:
Text Domain: espacio108
*/

/******************************************* SELECTORES ******************************************/

/*

:root -> Para "document"

TAGS:
-----

*       -> Todos los elementos
div p   -> Todos los "p" dentro de un "div"
div > p -> Todos los "p" cuyo padre es un "div"
div + p -> Todos los "p" que van inmediatamente después de un "div"
div ~ p -> Cada "p" que va precedido de un "div"

:not(p) -> Cada elemento que NO es un "p"

:before       -> Antes
:after        -> Después
:empty        -> Vacío
:selection    -> Lo que está seleccionado
:target       -> El elemento en el que se ha hecho click
:first-letter -> La primera letra
:first-line   -> La primera línea
:lang(es)     -> Con atributo "lang" = "es"

ATRIBUTOS:
----------

[title]             -> Elemento/s que tienen "title"
[title  = "flower"] -> Elemento/s cuyo "title"               es igual a "flower"
[title ~= "flower"] -> Elemento/s cuyo "title" contiene      la palabra "flower"
[title |= "flower"] -> Elemento/s cuyo "title" empieza   por la palabra "flower"
[title ^= "flower"] -> Elemento/s cuyo "title" empieza   por la cadena  "flower"
[title $= "flower"] -> Elemento/s cuyo "title" acaba     por la cadena  "flower"
[title *= "flower"] -> Elemento/s cuyo "title" contiene      la cadena  "flower"

ENLACES:
--------

:active  -> Activo
:hover   -> Enfoque
:visited -> Visitado
:link    -> No visitado

INPUTS:
-------

:checked    -> Checked
:disabled   -> Disabled
:enabled    -> NO disabled
:focus      -> Con foco
:in-range   -> Con valor dentro de un rango
:out-range  -> Con valor fuera  de un rango
:invalid    -> Con valor    válido
:invalid    -> Con valor no válido
:required   -> Con "required" (sólo para "input")
:optional   -> Sin "required" (sólo para "input")
:read-only  -> Con "readonly" (sólo para "input")
:read-write -> Sin "readonly" (sólo para "input")

NODES:
------

p:first-of-type     -> Cada "p" que es el primer "p" de su padre
p:last-of-type      -> Cada "p" que es el último "p" de su padre
p:nth-of-type(n)    -> Cada "p" que es el "n" "p" de su padre
p:nth-last-child(n) -> Cada "p" que es el "n" "p" de su padre, contanto desde el final

p:first-child       -> Cada "p" que es el primer hijo de su padre
p:last-child        -> Cada "p" que es el último hijo de su padre
p:nth-child(n)      -> Cada "p" que es el "n" hijo de su padre
p:nth-last-child(n) -> Cada "p" que es el "n" hijo de su padre, contanto desde el final

p:only-child        -> Cada "p" que es el único hijo de su padre
p:only-of-type      -> Cada "p" que es el único "p" de su padre

*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Rojo Oscuro: E11F1D rgb(225, 31, 29) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Rojo Medio: F08F8E rgb(240,143,142) */
/*     Rojo Claro: F7C7C6 rgb(247,199,198) */
/* Rojo Muy Claro: FBE3E2 rgb(251,227,226) */

/*           Gris: B0B0B0 rgb(176,176,176) */

/******************************************** Z-INDEX ********************************************/

/*
   9999 -> .main-navigation
    998 -> <nav>
*/

/******************************************* INCLUDES ********************************************/

 @import url("../vantage/style.css?q=20241105");
     @import url("style-header.css?q=20241105");
       @import url("style-home.css?q=20241105");
     @import url("style-footer.css?q=20241105");
      @import url("style-pages.css?q=20241105");
       @import url("style-blog.css?q=20241105");
    @import url("style-animate.css?q=20241105");
@import url("style-mwp-tooltip.css?q=20241105");

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');

@font-face {
	font-family: "The Philadelphia Story MWP";
	src: url("/wp-content/themes/espacio108/fonts/The-Philadelphia-Story.otf")        format("opentype");          /* Genérica */
	src: url("/wp-content/themes/espacio108/fonts/The-Philadelphia-Story.eot");                                    /* IE9 Compat Modes */
	src: url("/wp-content/themes/espacio108/fonts/The-Philadelphia-Story.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
			 url("/wp-content/themes/espacio108/fonts/The-Philadelphia-Story.woff")       format("woff"),              /* Modern Browsers */
			 url("/wp-content/themes/espacio108/fonts/The-Philadelphia-Story.ttf")        format("truetype");          /* Safari, Android, iOS */
}

:root {
	--color1-hex: #E11F1D;
  --color2-hex: #999999;
  --color3-hex: #F08F8E;
  --color4-hex: #F7C7C6;
	--color5-hex: #FBE3E2;

	--color-gris-hex: #B0B0B0;

  --color1-rgb: 225, 31, 29;
  --color2-rgb: 153,153,153;
  --color3-rgb: 240,143,142;
  --color4-rgb: 247,199,198;
  --color5-rgb: 251,227,226;

	--color-gris-rgb: 176,176,176;

	--font-family-normal: "Josefin Sans", sans-serif;
	--font-family-narrow: "Josefin Sans", sans-serif;

	--font-family-philladelphia: "The Philadelphia Story MWP", serif;
}

html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td { font-family: var(--font-family-normal); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-normal); }

/******************************************** GENERAL ********************************************/

#main                  { padding: 20px;          } /* No afecta a header ni a footer porque no son "main" */
#main div[id^="row"] * { box-sizing: border-box; } /* No afecta a header ni a footer porque no son "main" */

a, a:active, a:hover, a:focus, a:visited { outline: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0px !important; line-height: 120%; }

*   { line-height: 140%; }
br  { line-height: inherit; }
img { line-height: 0px; }

MWP-COMMENT { display: none; }

/************************************ FONDOS, FILTROS, ICONOS ************************************/

:root {
	           --logo-108: url("/wp-content/uploads/108_300.png");
	        --fondo-picos: url("/wp-content/themes/espacio108/images/miscelanea/fondo_picos.png");
		  --fondo-dos-picos: url("/wp-content/themes/espacio108/images/miscelanea/fondo_dos_picos.png");
	       --fondo-huella: url("/wp-content/themes/espacio108/images/miscelanea/fondo_huella.png");
	--fondo-huella-blanco: url("/wp-content/themes/espacio108/images/miscelanea/fondo_huella_blanco.png");
	  --fondo-huella-gris: url("/wp-content/themes/espacio108/images/miscelanea/fondo_huella_gris.png");
	  --fondo-huella-rojo: url("/wp-content/themes/espacio108/images/miscelanea/fondo_huella_rojo.png");
		    --fondo-rodadas: url("/wp-content/themes/espacio108/images/miscelanea/fondo_rodadas.png");
				     --fondo-gd: url("/wp-content/themes/espacio108/images/miscelanea/fondo_gd.jpg");

	  --filter-blanco: invert(1);
	    --filter-gris: invert(76%) sepia(1%) saturate(0%) hue-rotate(246deg) brightness(92%) contrast(92%);
	    --filter-rojo: invert(28%) sepia(52%) saturate(5229%) hue-rotate(349deg) brightness(88%) contrast(100%);
	--filter-disabled: brightness(1.5) grayscale(1);
}

.mwp               { width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; }
.mwp-duracion      { background-image: url("/wp-content/themes/espacio108/images/iconos/icono_duracion.png"); }
.mwp-distancia     { background-image: url("/wp-content/themes/espacio108/images/iconos/icono_distancia.png"); }
.mwp-desnivel      { background-image: url("/wp-content/themes/espacio108/images/iconos/icono_desnivel.png"); }
.mwp-dificultad-si { background-image: url("/wp-content/themes/espacio108/images/iconos/icono_dificultad_si.png"); }
.mwp-dificultad-no { background-image: url("/wp-content/themes/espacio108/images/iconos/icono_dificultad_no.png"); }
.mwp-dificultad    { width: 20px; height: 20px }

/******************************************** SAFARI *********************************************/

div#ui-datepicker-div { z-index: 1000 !important; } /* CF7 - input type date */

/*************************************** ASESOR DE COOKIES ***************************************/

.cdp-cookies-alerta .cdp-cookies-texto    { left: 10px !important; padding: 10px !important; width: 340px !important; }
.cdp-cookies-alerta .cdp-cookies-texto    { background-color: var(--color1-hex) !important; }
.cdp-cookies-alerta .cdp-cookies-texto    { border: solid 1px #FFFFFF !important; border-radius: 10px; text-align: center; }
.cdp-cookies-alerta .cdp-cookies-texto h4 { color: #CCCCCC !important; text-align: center !important; }
.cdp-cookies-alerta .cdp-cookies-texto p  { font-size: 12px; color: #CCCCCC !important; line-height: 120%; text-align: justify !important; }
.cdp-cookies-alerta .cdp-cookies-texto a  { font-size: 12px; color: #AAAAAA !important; }
.cdp-cookies-alerta.cdp-cookies-tema-gris .cdp-cookies-texto a { color: #AAAAAA !important; }
.cdp-cookies-boton-cerrar                 { margin-top: 10px; background-color: #666666 !important; border-radius: 5px; }

/******************************************** TEXTOS *********************************************/

.textColor1       { color: var(--color1-hex); }
.textColor2       { color: var(--color2-hex); }
.textColor3       { color: var(--color3-hex); }
.textColor4       { color: var(--color4-hex); }
.textColor5       { color: var(--color5-hex); }

.backgroundColor1 { background-color: var(--color1-hex); }
.backgroundColor2 { background-color: var(--color2-hex); }
.backgroundColor3 { background-color: var(--color3-hex); }
.backgroundColor4 { background-color: var(--color4-hex); }
.backgroundColor5 { background-color: var(--color5-hex); }

.pJustify                  { text-align: justify; }
.pFirstLetter:first-letter { float: left; margin-right: 10px; color: var(--color3-hex); font-size: 74px; font-weight: 600; line-height: 90%; }

.Ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.Narrow   { font-family: var(--font-family-narrow) !important; }

.two-columns   { column-count: 2; column-gap: 60px; column-rule: solid 1px var(--color4-hex); } /* Texto a 2 columnas */
.three-columns { column-count: 3; column-gap: 40px; column-rule: solid 1px var(--color4-hex); } /* Texto a 3 columnas */
.four-columns  { column-count: 4; column-gap: 35px; column-rule: solid 1px var(--color4-hex); } /* Texto a 4 columnas */
.five-columns  { column-count: 5; column-gap: 30px; column-rule: solid 1px var(--color4-hex); } /* Texto a 5 columnas */

@media (max-width: 780px) {
	.two-columns   { column-count: 1; column-gap: 0px; column-rule: none; }
	.three-columns { column-count: 1; column-gap: 0px; column-rule: none; }
	.four-columns  { column-count: 1; column-gap: 0px; column-rule: none; }
	.five-columns  { column-count: 1; column-gap: 0px; column-rule: none; }
}

br380, br480, br580, br680, br780, br880, br980, br1080, br1180, br1280, br1380, br1480, br1580, br1680, br1780, br1880, br1980, br5080 { line-height: inherit; }

 br380:before { content: " "; } @media (max-width:  380px) {  br380:before { content: "\A"; white-space: pre-line; } }
 br480:before { content: " "; } @media (max-width:  480px) {  br480:before { content: "\A"; white-space: pre-line; } }
 br580:before { content: " "; } @media (max-width:  580px) {  br580:before { content: "\A"; white-space: pre-line; } }
 br680:before { content: " "; } @media (max-width:  680px) {  br680:before { content: "\A"; white-space: pre-line; } }
 br780:before { content: " "; } @media (max-width:  780px) {  br780:before { content: "\A"; white-space: pre-line; } }
 br880:before { content: " "; } @media (max-width:  880px) {  br880:before { content: "\A"; white-space: pre-line; } }
 br980:before { content: " "; } @media (max-width:  980px) {  br980:before { content: "\A"; white-space: pre-line; } }
br1080:before { content: " "; } @media (max-width: 1080px) { br1080:before { content: "\A"; white-space: pre-line; } }
br1180:before { content: " "; } @media (max-width: 1180px) { br1180:before { content: "\A"; white-space: pre-line; } }
br1280:before { content: " "; } @media (max-width: 1280px) { br1280:before { content: "\A"; white-space: pre-line; } }
br1380:before { content: " "; } @media (max-width: 1380px) { br1380:before { content: "\A"; white-space: pre-line; } }
br1480:before { content: " "; } @media (max-width: 1480px) { br1480:before { content: "\A"; white-space: pre-line; } }
br1580:before { content: " "; } @media (max-width: 1580px) { br1580:before { content: "\A"; white-space: pre-line; } }
br1680:before { content: " "; } @media (max-width: 1680px) { br1680:before { content: "\A"; white-space: pre-line; } }
br1780:before { content: " "; } @media (max-width: 1780px) { br1780:before { content: "\A"; white-space: pre-line; } }
br1880:before { content: " "; } @media (max-width: 1880px) { br1880:before { content: "\A"; white-space: pre-line; } }
br1980:before { content: " "; } @media (max-width: 1980px) { br1980:before { content: "\A"; white-space: pre-line; } }
br5080:before { content: " "; } @media (max-width: 5080px) { br5080:before { content: "\A"; white-space: pre-line; } }

.blink { -webkit-animation: blink-animation 1s steps(5, start) infinite; animation: blink-animation 1s steps(5, start) infinite; } /* Parpadeo */
@-webkit-keyframes blink-animation { to { visibility: hidden; } }
@keyframes blink-animation         { to { visibility: hidden; } }

.blink-alpha { -webkit-animation: blink-alpha-animation 2s infinite; animation: blink-alpha-animation 2s infinite; } /* Parpadeo */
@-webkit-keyframes blink-alpha-animation { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }
@keyframes blink-alpha-animation         { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }

/***************************************** EFECTOS HOVER *****************************************/

.hoverCursorZoom:hover { cursor: zoom-in; }

.hoverScale105,
.hoverScale110,
.hoverScale120,
.hoverScale130,
.hoverScale140,
.hoverScale150       { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.hoverScale105:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }
.hoverScale110:hover { -webkit-transform: scale(1.10); transform: scale(1.10); }
.hoverScale120:hover { -webkit-transform: scale(1.20); transform: scale(1.20); }
.hoverScale130:hover { -webkit-transform: scale(1.30); transform: scale(1.30); }
.hoverScale140:hover { -webkit-transform: scale(1.40); transform: scale(1.40); }
.hoverScale150:hover { -webkit-transform: scale(1.50); transform: scale(1.50); }

/****************************************** SEPARADORES ******************************************/

.divSeparadorV10 { clear: both; width: 100%; height: 10px; }
.divSeparadorV15 { clear: both; width: 100%; height: 15px; }
.divSeparadorV20 { clear: both; width: 100%; height: 20px; }
.divSeparadorV30 { clear: both; width: 100%; height: 30px; }
.divSeparadorV40 { clear: both; width: 100%; height: 40px; }

.divSeparadorH10 { width: 10px; }
.divSeparadorH15 { width: 15px; }
.divSeparadorH20 { width: 20px; }
.divSeparadorH30 { width: 30px; }
.divSeparadorH40 { width: 40px; }

/******************************************* BOTONES  ********************************************/

.aButtonRojo,.aButtonBlanco,.aButtonNegro { padding: 10px 30px 5px 30px; -webkit-transition: all 0.3s ease !important; transition: all 0.3s ease !important; }
.aButtonRojo,.aButtonBlanco,.aButtonNegro { font-size: 16px; font-weight: 600; border-radius: 20px; text-decoration: none !important; line-height: 120%; cursor: pointer; }
.aButtonRojo                              { color: #FFFFFF !important; background: var(--color1-hex); border: solid 1px var(--color1-hex); }
.aButtonBlanco                            { color: #000000 !important; background: #FFFFFF;           border: solid 1px var(--color1-hex); }
.aButtonNegro                             { color: #FFFFFF !important; background: #000000;           border: solid 1px var(--color1-hex); }
.aButtonRojo:hover                        { transform: scale(1.1); color: #000000 !important; background: #FFFFFF;  }
.aButtonBlanco:hover                      { transform: scale(1.1); color: #FFFFFF !important; background: var(--color1-hex); }
.aButtonNegro:hover                       { transform: scale(1.1); color: #000000 !important; background: #FFFFFF; }

@media (max-width:  980px) { .aButtonRojo,.aButtonBlanco,.aButtonNegro { padding: 10px 25px 5px 25px; border-radius: 15px; } }
@media (max-width:  780px) { .aButtonRojo,.aButtonBlanco,.aButtonNegro { padding: 10px 20px 5px 20px; } }
@media (max-width:  580px) { .aButtonRojo,.aButtonBlanco,.aButtonNegro { font-size: 14px; border-radius: 10px; } }
