:root {
	
	/* TENER PRESENTE QUE EN MÓVILES NO SIEMPRE FUNCIONAN LAS VARIABLES CSS. EN ESOS CASOS ES NECESARIO PONER UN LA PSEUDOCLASE :root EXPRESAMENTE EN LAS MEDIAQUERIES GENERALES, O EN LA INDIVIDUAL DE LA RESPECTIVA PÁGINA */
	
/*	PARA LA PRÓXIMA APP, LOS COLORES MEJOR DESIGNARLO COMO: --Azul: #3E92CC; --Azul-2:  #5ea3d4; (QUE ES EL AZUL, PERO DOS PASOS MÁS CLARO) / --Azul+2: #2f7bb1; (QUE ES EL AZUL, PERO DOS PASOS MÁS OSCURO) / etc. PORQUE ASÍ SERÁ MÁS FÁCIL PARA RECORDAR LOS NOMBRES DE LAS VARIABLES, PUES YA SE SABRÁ QUE CUANDO SE QUIERA EL AZUL, SERÁ --Azul; EL AZUL UN POCO MÁS CLARO: --Azul-2, Y ASÍ INDEFINIDAMENTE. */
	
	--txt-4: 8px;
	--txt-3: 10px;
	--txt-2: 12px;
	--txt-1: 14px;
	--txt0: 16px;
	--txt1: 18px;
	--txt2: 20px;
	--txt3: 22px;
	--txt4: 24px;
	--txt5: 25px;
	--txt6: 26px;
	
	--FilaImpar: #899494;
	--FilaPar: #abb2b2;
	
	--FilaImpar: #abb2b2;
	--FilaPar: #ccd1d1;

	--resultadoTrue: #00A6A6;  /* Color para el borde del aviso cuando el resultado de algún proceso es correcto */
	--resultadoFalse: #DB5461;  /* Color para el borde del aviso cuando el resultado de algún proceso es false */
	
/*Formato para utilizar variables:
	var(--color-1A);
*/
}

/*Configuramos el selector para que en las dimensiones de las cajas no se tengan en cuenta los margin, padding y border*/
* {
	box-sizing: border-box;
}

body {
  background-color: #2f54c7; /* No se pudo poner este color sólo para la página 1, porque se desaparece parte de órbita de los satélites */
}

.SeccionCabecera {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
	padding:0px 0;
	padding-top:15px;
	text-align:center;
}

.SeccionCabecera .ArticleImgLogo {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
	height:auto;
}

.SeccionCabecera .ArticleImgLogo .DivLogoParte1 {
	grid-area: 1 / 1 / 2 / 101;
	width:100vw;
	height:12vh;
	background-image:url(/Img/Titulos/Nombre-Empresa.png);
	background-repeat:no-repeat;
	background-size:75vw;
	background-position:center;
}

.SeccionCabecera .ArticleImgLogo .DivLogoParte2 {
	display:none;
	grid-area: 1 / 60 / 2 / 101;
	width:45vw;
	height:12vh;
	background-image:url(Img/Titulos/Nombre-Empresa-Gorriti.png);
	background-repeat:no-repeat;
	background-size:25vw;
	background-position:left;
}

.SeccionCabecera .ArticleImgLogo .DivLogoParte3 {
	grid-area: 2 / 1 / 3 / 101;
	display:none; /* Sólo se muestra en móviles */
	margin:10px;
	width:90vw;
	height:3vh;
}

.SeccionCabecera .ArticleImgLogo .DivLogoParte3 p {
	margin:0px;
	font-family:Philosopher;
	font-size:20px;
	font-weight:bolder;
	color:#aaa;
}

.SeccionCabecera .ArticleMenuCabecera {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  place-items: center; /* Esto centra contenido vertical y horizontalmente */
	width:100%;
	height:5vh;
	color:white;
	text-transform:uppercase;
}

.SeccionCabecera .ArticleMenuCabecera div {
	display:inline-block;
	width:100%;
	height:5vh;

	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}

.ArticleMenuCabecera div:hover {
	box-shadow: 0 0 15px white;	
	cursor:pointer;
}
.ArticleMenuCabecera p {
	margin:12px 0;
	font-family:Raleway;
/*	font-family:Raleway, "Raleway Black", "Raleway ExtraBold", "Raleway ExtraLight", "Raleway Light", "Raleway Medium", "Raleway SemiBold", "Raleway Thin"*/
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	color:white;
}

.DivMenuDireccion {grid-area: 1 / 1 / 2 / 2;}
.DivMenuServicios {grid-area: 1 / 2 / 2 / 3;}
.DivMenuContacto {grid-area: 1 / 3 / 2 / 4;}
.DivMenuLlamar {grid-area: 1 / 4 / 2 / 5;}
.DivMenuWhatsapp {grid-area: 1 / 5 / 2 / 6;}

.SectionCabecera,
.Pagina2 {
	padding:10px 0;
	text-align:center;
}

.SeccionCuerpo {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
	text-align:center;
}

.SeccionCuerpo .ArticlePagina1 .DivLogosEmpresasEnvios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
	height:auto;
}

.SeccionCuerpo .ArticlePagina1 .DivLogosEmpresasEnvios Div {
	height:17vh;
}

.DivWestern {background-image:url(/Img/Logos/Western.jpg);}
.DivRia {background-image:url(/Img/Logos/Ria.jpg);}
.DivFast {background-image:url(/Img/Logos/Trans-Fast.jpg);}
.DivITransfer {background-image:url(/Img/Logos/I-Transfer2.jpg);}

.Pagina2 {
	display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: center; /* Esto centra contenido vertical y horizontalmente */
	
	background-color: white;
	max-width:100%;

}

.Pagina2 div img {
	width:50%;
}

Div[class*="DivTitulo"] {
	background-color:#f3633a;
	padding:20px 0;
	color:#2f54c7;
	width:100%;
	font-family:Philosopher !important;
	font-size:50px;
	font-weight:bold;
	text-align:center;	
}

.ArticlePagina3 .DivContacto .DivTitAgencia1 {
	grid-area: 1 / 1 / 2 / 4;
	text-align:center;
	height:5vh;
  background-color: #141733;
  background-color: #2f54c7;
	font-family:Raleway !important;
	font-size:20px;
	font-weight:bold;
	color:white;
	padding-top:10px;
}

.ArticlePagina3 .DivContacto .DivTitAgencia2 {
	grid-area: 3 / 1 / 4 / 4;
	text-align:center;
	height:5vh;
  background-color: #2f54c7;
	font-family:Raleway !important;
	font-size:20px;
	font-weight:bold;
	color:white;
	padding-top:10px;
}

.ArticlePagina3 .DivContacto .DivImgFachada {
	grid-area: 2 / 1 / 3 / 2;
	text-align:right;
}

.ArticlePagina3 .DivContacto .DivDatosContacto {
	grid-area: 2 / 2 / 3 / 3;
	text-align:center;
}

.ArticlePagina3 .DivContacto .DivMapa {
	grid-area: 2 / 3 / 3 / 4;
	text-align:left;
}

.ArticlePagina3 .DivContacto .DivImgFachadaAgencia2 {
	grid-area: 4 / 1 / 5 / 2;
	text-align:right;
}

.ArticlePagina3 .DivContacto .DivDatosContactoAgencia2 {
	grid-area: 4 / 2 / 5 / 3;
	height:auto !important;
	text-align:center;
}

.ArticlePagina3 .DivContacto .DivMapaAgencia2 {
	grid-area: 4 / 3 / 5 / 4;
	text-align:left;
}

.TxtNegrita {
	font-weight:bold;
	
}

#DivPagPanelNovedades {
	min-width:50vw;
	width:50vw;
}

.DivCamposNovedades {
	margin-top:7vh !important;
}

.DivItemNovedad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
	column-gap:10px;
	margin-bottom:20px;
}

.DivItemNovedad input {
	text-align:center;
}

.DivItemNovedad input[id="TbTextoNovedad"] {
	text-align:left;
}

.DivTextoNovedad {
	grid-area: 1 / 1 / 2 / 7;
}

.DivFechaDesde {
	grid-area: 2 / 1 / 3 / 3;
}

.DivFechaHasta {
	grid-area: 2 / 3 / 3 / 5;
}

.DivFechaCreacion {
	grid-area: 2 / 5 / 3 / 7;
}

.DivBotonesNovedades {
	display:grid;
  grid-template-columns: repeat(18, 1fr);
	width:100%;
}

.DivBotonModificar {
	grid-area: 1 / 1 / 2 / 11;
}

.DivBotonEliminar {
	grid-area: 1 / 11 / 2 / 15;
}

.DivCheckEliminar {
	grid-area: 1 / 15 / 2 / 17;
	text-align:left;
}

hr {
	background-color:#2f54c7;
	margin:2vh auto 4vh;
	height:0.1vh;
	max-width:77vw;
	max-width:100%;
	width:100%;
	border: 0px;
}

.BotonEliminarLista1, .BotonEliminarLista2 {
	width:auto;
}

.BotonEliminarLista1 {
	margin-top:5vh;
}

.DivPagFormNovedades textarea,
.DivPagFormModificarNovedad textarea {
	height:13vh !important;
}

.DivPagPanelNovedades p {
	font-family:Raleway;
	font-size:18px;
	text-align:center;
}
#DivAvisoNota {
	margin:5vh auto;
	max-width:30vw;
	width:30vw;
}

.DivModificarEliminar {
	display:none;
	background-color:#C2D4FF;
	margin:0 auto;
	width:90%;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 2px #2f54c7 solid;
}

.DivPagPanelNovedades input[type="button"] {
	width:auto;
}

#BotonFormNovedades {
	margin-top:7vh;
}

.DivPubliTasas {
	position:absolute;
	bottom:3vh;
	bottom:1vh;
	left:2vw;
	display:inline-block;
	padding:10px;
	width:20vw;
	width:30vw;
	height:auto;
	height:10vh;
	overflow:hidden;
	z-index:10;

	background-image:url(/Img/Publis/CambioDivisas-Fragmento.jpg);
	background-repeat:no-repeat;
	background-size:25vw;
	background-position:left;
	
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
}

.SeccionPie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, auto);
	column-gap:3px;
}

.SeccionPie div {
	padding:2vh 0 2vh;
	font-family:Philosopher;
	font-weight:bold;
	color:white;
	text-align:center;
	height:auto;
}

.SeccionPie div a {
	color:#f68465 !important;
	font-style:italic;
	font-stretch:expanded;
	font-weight:bolder;
}

.SeccionPie div p {
	display:inline;
	margin:0 auto;
	padding: 5px 50px;
}

.SeccionPie div p:hover {
	box-shadow: 0 0 5px white;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-ms-border-radius: 10px 10px 10px 10px;
	-o-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;

}

/*/////////////////////////////////////////////////////////////////////////

ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN CIELO */

.DivContenedorCielo {
	position:relative;
	top:0;
	left:0;
	height:auto;
}

.DivCielo {
  display: grid;
  place-items: center; /* Esto centra el planeta vertical y horizontalmente */
	position:relative;
  margin: 0;
  overflow: clip;
}

.DivCielo .planet {
  grid-area: 1 / 1;
  padding: 10px;
  text-align: center;
}

.DivCielo div[class*='moon'] {
  grid-area: 1 / 1;
  padding: 10px;
  text-align: center;
}

.DivCielo img {
  display: block;
}

.DivCielo .planet img {
  width: 100%;
}

.DivCielo div[class*='moon'] img {
  width: 30%;
}

.moon, .moon2, .moon3, .moon4, .moon5,
.moon6, .moon7, .moon8, .moon9, .moon10,
.moon11, .moon12, .moon13, .moon14, .moon15,
.moon16, .moon17, .moon18, .moon19, .moon20 {
	--x-amplitude: 600px; /* Valor corregido para centrar la órbita */
	--y-amplitude: 140px; /* Valor corregido para centrar la órbita */
  --x: calc(cos(var(--angle)) * var(--x-amplitude));
  --y: calc(sin(var(--angle)) * var(--y-amplitude));
	translate: calc(var(--x) + 90px) var(--y); /* Desplazamos 90px a la derecha */
  z-index: calc(var(--z)); /* Luna en el frente o detrás */
  animation: revolve 20s linear infinite;
}

.moon {animation-delay: 1s;}
.moon2 {animation-delay: 2s;}
.moon3 {animation-delay: 3s;}
.moon4 {animation-delay: 4s;}
.moon5 {animation-delay: 5s;}
.moon6 {animation-delay: 6s;}
.moon7 {animation-delay: 7s;}
.moon8 {animation-delay: 8s;}
.moon9 {animation-delay: 9s;}
.moon10 {animation-delay: 10s;}
.moon11 {animation-delay: 11s;}
.moon12 {animation-delay: 12s;}
.moon13 {animation-delay: 13s;}
.moon14 {animation-delay: 14s;}
.moon15 {animation-delay: 15s;}
.moon16 {animation-delay: 16s;}
.moon17 {animation-delay: 17s;}
.moon18 {animation-delay: 18s;}
.moon19 {animation-delay: 19s;}
.moon20 {animation-delay: 20s;}

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --z {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@keyframes revolve {
  0% {
    --angle: 0deg;
    --z: 0;
    transform: scale(0.5);
  }
  25% {
    --angle: 90deg;
    --z: -1;
    transform: scale(0.25);
  }
  40% {
    --angle: 144deg;
    --z: 0;
    transform: scale(0.40); /* Luna mediana cuando está en el extremo izquierdo */
  }
  50% {
    --angle: 180deg;
    --z: 5;
    transform: scale(0.5);
  }
  75% {
    --angle: 270deg;
    --z: 10;
    transform: scale(1);
  }
  100% {
    --angle: 360deg;
    --z: 0;
    transform: scale(0.5);
  }
}


/* FIN DE ESTILOS PARA LOS ELEMENTOS DE LA SECCIÓN CIELO

////////////////////////////////////////////////////////////////////////// */