/*
Zerotheme.com | Free Html5 Responsive Templates
Author URI: http://www.zerotheme.com/
*/

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Reset----------------------------------- */
/* ---------------------------------------------------------------------------- */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
blockquote,
big,
body,
center,
canvas,
caption,
cite,
code,
command,
datalist,
dd,
del,
details,
dfn,
dl,
div,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
keygen,
label,
legend,
li,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
s,
samp,
section,
small,
span,
source,
strike,
strong,
sub,
sup,
table,
tbody,
tfoot,
thead,
th,
tr,
tdvideo,
tt,
u,
ul,
var {
  background: transparent;
  border: 0 none;
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: top;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
table,
table td {
  padding: 0;
  border: none;
  border-collapse: collapse;
}
img {
  vertical-align: top;
}
embed {
  vertical-align: top;
}
article,
aside,
audio,
canvas,
command,
datalist,
details,
embed,
figcaption,
figure,
footer,
header,
hgroup,
keygen,
meter,
nav,
output,
progress,
section,
source,
video {
  display: block;
}
mark,
rp,
rt,
ruby,
summary,
time {
  display: inline;
}
input,
textarea {
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
}
iframe {
  border: 0;
  margin: 0;
  padding: 0;
}
input,
textarea,
select {
  margin: 0;
  padding: 0px;
}

/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */

/*Nube tipo Comic experimental en la pelicula jesus de nazareth 19-04-25  */ 
/* .comic-tooltip {
  position: absolute;
  top: -50px;/*-130px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid #000;
  padding: 10px 15px;
  border-radius: 15px;
  font-family: 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #000;
  box-shadow: 2px 2px 0px #000;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* Punta tipo cómic 
.comic-tooltip::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(2px 2px 0px black);
}

.tooltip:hover .comic-tooltip {
  opacity: 1;
} */




.mask2 {
  /* ESTILO DE LA BANDERA DEL IDIOMA QUE APARECE arriba a la izquierda - para que aparesca solo en el centro usar el estilo mask*/
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 3%;
  left: 3%;
}

/*.banderas {     
  max-width: 100%;
  width: 50%;
  height: 40%;
  position: fixed;
  border-radius: 0.6rem;
  margin-left: 1.6em;
}*/


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  /*Cambiar valor para ser visible siempre para pruebas*/
  width: 130px;
  /*original:;
    width: 120px;
    */
  background-color: #248f19;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /*Position the tooltip text*/
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 47%;  /* original left: 50%;*/
  margin-left: -60px;
  /*Fadeintooltip*/
  opacity: 1;
  /*0:;
    */ /*Cambiar valor para ser visible simpre para pruebas*/
  transition: opacity 0.3s;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #248f19cc transparent transparent transparent; /* original color flecha abajo : border-color: #555 transparent transparent transparent;*/
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* stilos para boton volver arriba*/
.ir-arriba {
  position: fixed;
  bottom: 22em; /*2em;*/
  right: 0px;
  text-decoration: none;
  color: #000000;
  /*background-color: rgba(235, 235, 235, 0.80); */
  font-size: 12px;
  padding: 1em;
  display: none;
  width: 6em;
  height: 6em;
  z-index: 1; /*posiciona el circulo y boton arriba sobre todo porque en kla pagina infantiles quedaba atras de las letras*/
}

/* estilo para mostrar la foto cuando se pasa por encima en la busqueda de peliculas
.minifoto{

position: Absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
transition: all 0.5s ease-in-out;
}

.minifoto:hover{
  z-index: 1;
  opacity: 1;
}*/

/*fin estilos boton*/

html {
  -webkit-text-size-adjust: none;
}
.video embed,
.video object,
.video iframe {
  width: 100%;
  height: auto;
}
img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

a {
  color: #fff;
  text-decoration: none;
} /*original: #4C4C4C;text-decoration: none;}30-04-2022 */
a:hover {
  opacity: 0.9;
  text-decoration: none;
}

h1,
h2 {
  font-size: 25px;
  line-height: 30px;
} /* original 12-06-2022 {font-size: 25px;line-height: 25px;}*/
h3,
h4 {
  font-size: 20px;
  line-height: 20px;
}
h5,
h6 {
  font-size: 16px;
  line-height: 16px;
}

p {
  margin: 10px 0;
  font-size: 1.3rem;/*20px;*/
  line-height: 20px;
  text-align: left;
} /*linea original: p{margin: 10px 0;}*/

.post:after,
.post:before,
article:after,
article:before,
section:after,
section:before {
  clear: both;
  content: "\0020";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clear {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix:after,
.clearfix:before {
  clear: both;
  content: "\0020";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Html-Body------------------------------- */
/* ---------------------------------------------------------------------------- */
html,

body {
  width: 100%;
  padding: 0;
  margin: 0;


  min-height: 100dvh;
  background: radial-gradient(
    ellipse at center,
    #7fb0c8 0%,
    #203a4a 35%,
    #0a1a28 80%
  );
  background-attachment: fixed;
  position: relative;

  /* Anti-banding para quitar las líneas */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}





/*funiona mejor v2 30-08-26*/
  min-height: 100dvh;
  background: radial-gradient(ellipse at center,#7fb0c8 0%,#0a1a28 75%);
  background-attachment: fixed;

  /*background: url(../images/bg.jpg); /*fixed; /* Imagen de fondo por defecto 
  background-repeat: no-repeat;
  background-size: cover; /*100%;
  /*agregado el 30-08-26 para que no se repita la imagen en smartphone del fondo
  background-position: center center;
  background-attachment: scroll;
  min-height: 100vh;*/

  color: #fff;
  font: 14px/25px Arial, Helvetica, sans-serif;

  /*  fondo de pagina color gradiente
  background-image: radial-gradient(
    circle at 45.06% -6.42%,
    #ff67c5 0,
    #ff5bcf 10%,
    #ff50d8 20%,
    #f547e2 30%,
    #d840ea 40%,
    #b53cf2 50%,
    #873df9 60%,
    #3c41ff 70%,
    #0047ff 80%,
    #004dff 90%,
    #0051ff 100%
  ); */
  /*
  background: rgb(0, 212, 255);
  background: linear-gradient(
    180deg,
    rgba(0, 212, 255, 1) 6%,
    rgba(9, 9, 121, 1) 100%,
    rgba(2, 0, 36, 1) 100%
  );*/
}

/*reglas para todos los elementos en el modo claro*/
/*
body.modo-claro {
  background-color:  #808b96 ; /* Fondo oscuro 
  background-image: none; /* Elimina la imagen de fondo 
  color: black; /* Color del texto en modo claro 
}

body.modo-claro nav .active a{
  background: #27ae60 !important;
}
body.modo-claro #main-content .post h3{
  color: #fff;
}

body.modo-claro footer{
  background-color:  #566573 ;
}
body.modo-claro figcaption{
  color:  #66FF00 ;
  font-style: italic;
  font-weight: bold;
  font-size: 13px;
}
body.modo-claro .widget{
  background-color: #566573;
}
body.modo-claro #main-content .movie{
  background-color: #566573;
}
body.modo-claro #main-content .serie{
  background-color: #566573;
}*/

/*optimizado navegadores*/

:root {
  /* Variables de colores */
  --bg-color-claro: #808b96;
  --bg-nav-claro: #c0392b ;/* #27ae60;*/
  --bg-footer-claro: #566573;
  --text-color-claro: black;
  --caption-color-claro: #66FF00;
  --content-bg-claro: #566573;
}

body.modo-claro {
  background-color: var(--bg-color-claro); /* Fondo oscuro */
  background-image: none; /* Elimina la imagen de fondo */
  color: var(--text-color-claro); /* Color del texto en modo claro */
}

body.modo-claro nav .active a {
  background: var(--bg-nav-claro) !important; /* Color de fondo de la navegación */
}

body.modo-claro #main-content .post h3,h2 {
  color: #fff; /* Color del título en el contenido principal */
}

body.modo-claro footer {
  background-color: var(--bg-footer-claro); /* Fondo del pie de página */
}

body.modo-claro .imagen-seleccionada{
  border: 5px solid #FF0033;
}

body.modo-claro figcaption {
  color: var(--caption-color-claro); /* Color del pie de foto */
  /*font-style: italic;*/
  font-weight: bold;
  font-size: 13px;
}
body.modo-claro .busqueda dt{ /*color letra busqueda en listado*/
  color: white;
}

body.modo-claro .widget, 
body.modo-claro #main-content .movie, 
body.modo-claro #main-content .serie {
  background-color: var(--content-bg-claro); /* Color de fondo para widgets, películas, y series */
}

/*formato boton cambio tema*/
.theme-switch-wrapper {
  position: fixed; /* Hace que el botón flote en una posición fija */
  bottom: 20px;    /* Se posiciona desde abajo con un margen de 20px */
  right: 20px;     /* Se posiciona desde la derecha con un margen de 20px */
  z-index: 9999;   /* Asegura que esté encima de todos los elementos */
  background:rgba(0, 255, 51,0.8) ;/*background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente para mejor visibilidad */
  padding: 5px;
  border-radius: 30px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar un efecto de elevación */
}

.theme-switch {
  display: inline-block;
  height: 30px;
  position: relative;
  width: 75px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #000000 ;
  border-radius: 34px;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #00FF66;
  border-radius: 50%;
  bottom: 6px;
  content: "";
  height: 18px;
  left: 0px;
  position: absolute;
  transition: .4s;
  width: 18px;
}
.slider i {
  color: yellow;
  font-size: 25px;
  position: absolute;
  top: 46%;
  left: 80%;
  transform: translate(-50%, -50%);
  transition: color 0.3s;
}
input:checked + .slider i {
  color: yellow; /* Cambia el color del ícono al estar activado */
}

input:checked + .slider {
  background-color: #808b96;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

em {
  margin-left: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000;
}

/*fin formato boton cambio tema*/



/*Fin reglas Modo Claro*/

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Header--------------------------------- */
/* ---------------------------------------------------------------------------- */
header .top-bar {
  background-color: #000;
  color: #fff;
}

header .top-bar ul li {
  display: inline;
}
header .top-bar ul p {
  display: inline;
  margin: 0 10px;
  float: left;
}
header .top-bar .mail p {
  background: url(../images/Mail.png) no-repeat 0px 5px;
  color: #fff;
  padding-left: 25px;
  font-size: 14px;
}
header .top-bar .phone p {
  background: url(../images/Phone.png) no-repeat 0px 5px;
  color: #fff;
  padding-left: 25px;
  font-size: 14px;
}

header .login-form {
  margin-top: 10px;
}
header .login-form form {
  display: inline-block;
}
header #login {
  margin: 0 auto;
}

header #login input[type="text"] {
  border: 0 none;
  font: bold 13px Arial, Helvetica, Sans-serif;
  color: #777;
  width: 125px;
  padding: 7px;
  margin-left: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

header #login input[type="submit"] {
  background: #fcab2b;
  padding: 7px;
  margin-left: 5px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

header #login input[type="checkbox"] {
  margin-left: 7px;
}

header {
  margin-bottom: 20px;
}
header .wrap-header ul li {
  display: inline;
}
header .wrap-header ul p {
  display: inline;
  margin: 20px 10px;
  float: left;
}
header .wrap-header select {
  margin: 20px 0px;
}

header #search {
  margin: 25px auto 0 auto;
}

header #search input[type="text"] {
  border: 0 none;
  font: 14px Arial, Helvetica, Sans-serif;
  color: #777;
  width: 190px;
  margin-bottom: 10px;
  padding: 7px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
header #search input[type="submit"] {
  background: url(../images/search-dark.png) no-repeat 7px 6px #fcab2b;
  padding: 7px 7px 7px 25px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.logo img {
  max-height: 100px;
  display: inline-block;
} /*original : {max-height: 80px;display: inline-block;}*/

nav {
  margin: 0px auto 0px auto;
  display: inline-block;
}
nav .active a {
  background: #fcab2b !important;
} /*naranja*/ /*linea original: {background: #fcab2b!important;}*/ /*azul*/ /*{background: #3317a5!important;}*/

#menu {
  background-color: #000;
  border-bottom: 4px solid #078441;
  text-align: center;
} /*linea original: #menu {background-color:#000;border-bottom: 4px solid #fcab2b;text-align: center;}*/
#menu ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
#menu ul li {
  display: inline;
}
#menu ul form {
  float: left;
  padding: 0px 20px;
}
#menu ul a {
  float: left;
  color: #fff;
  text-transform: uppercase;
  padding: 10px 20px;
  font-size: 15px;
  letter-spacing: 2px;
}
#menu a:hover {
  background: #000;
} /*#03acfb;}/* linea original: #menu a:hover{background: #fcab2b;}*/

/* efecto boton menu prueba  14-04-2022

.efectobotonmenu{
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    outline: 2px solid #fff;
    padding: 30px 60px;
    position: relative;
    overflow: hidden;
    transition: color 1s;
}

.efectobotonmenu:hover{
color: #833ab4;

}

.efectobotonmenu::before{
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 100%;
background-color: #03acfb;
transform: skewX(35deg);
z-index: -1;
transition: width 1s;    
}

.efectobotonmenu:hover::before{
width: 150%;    
}

fin efecto boton menu*/

/*efecto botones abecedario probado el 14-04-2022
.efectobotonabece{
display: inline-block;
color: #fff;
text-decoration: none;
padding: 20px 50px;
border: 3px solid #248f19cc;
border-radius: 10px;
    }
.efectobotonabece:hover{
animation: pulsate 1s ease-in-out;
}

@keyframes pulsate{
    0%{
        box-shadow:
         0 0 25px #5ddcff,
         0 0 50px #4e00c2;
    }
}

fin prueba botones abecedario*/

/*prueba efecto movimiento simbolo de letra 14-04-2022*/
.movimientoletra {
  /*background: #5ce1e6; */
  font-family: arial;
  font-size: 50px;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center; /*box-shadow: 0 4px 7px 0 rgb(211,247,248),0 6px 15px 0 rgb(189,243,245); */
  animation: rotate 5s cubic-bezier(0.54, 0.13, 0.3, 0.87);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
@keyframes rotate {
  0% {
    transform: rotateY(0turn);
  }
  100% {
    transform: rotateY(5turn);
  }
}

/* fin prueba efecto movimiento simbolo de letra*/

/* estilo titulos estaticos letras del listado de peliculas*/

/*.listadopeliculas {
    position: relative;
}*/
.busqueda dt {
  z-index: 1;
  position: sticky;
  top: 0;
  margin-top: 20px;
  background-color: #000;
  border-bottom: 4px solid #078441;
  margin-bottom: 10px;
}

/*#datos {
  z-index: 3;
  position: sticky;
  top: 0;
  margin-top: 20px;
  background-color: #000;
  border-bottom: 4px solid #078441;
  margin-bottom: 10px;
}*/

#datos a {
  color: #95fb05; /*para el link del listado*/
}
#datos b {
  color: #95fb05; /*para los que aun no son link*/
  font-size: 1.3rem; /*tamaño letra normal*/
}

.listadopeliculas dt {
  position: sticky;
  z-index: 1;
  top: 0;
  background-color: #000;
  border-bottom: 4px solid #078441;
  margin-bottom: 10px;
}

.listadoinfantiles dt {
  z-index: 1; /*posiciona el menu sobre la imagen y no al reves*/
  position: sticky;
  top: 0;
  background-color: #000;
  border-bottom: 4px solid #078441;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Container------------------------------ */
/* ---------------------------------------------------------------------------- */

/* ---MainContent-Article--- */

#main-content .wrap-content {
  margin: 20px 0px 20px 0px;
} /*linea original: #main-content .wrap-content{margin:20px 20px 20px 0px;}*/

#main-content .movie,
#main-content .serie {
  margin: 20px 10px 20px 10px;
  background-color: rgba(0, 0, 0, 0.6);
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid #666;
} /*linea original :#main-content .movie , #main-content .serie {background-color: rgba(0,0,0,0.6);margin-bottom: 50px;padding-bottom: 30px;border-bottom: 1px solid #666;}*/

#main-content .type ul li {
  display: inline;
}
#main-content .type ul select {
  display: inline;
  margin: 5px 10px;
  float: left;
}
#main-content .type ul a {
  margin: 5px 10px;
}

#main-content .title {
  border-bottom: 2px solid #078441;
  margin-bottom: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
} /*linea original: #main-content .title {border-bottom:2px solid #fcab2b;margin-bottom: 60px;background-color: rgba(0,0,0,0.7);text-align: center;}*/
#main-content .title h2 {
  font-size: 2.18rem;/*35px;*/
  color: #fff;
  display: inline-block;
  padding: 15px 0;
  letter-spacing: 2px;
}

#main-content .post {
  padding: 0;
  margin-top: 40px;
  text-align: center;
}
#main-content .post img.thumb {
  height: 230px;
  width: 100%;
}
#main-content .post h3 {
  color: #95fb05;
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 19px;
} /*#main-content .post h3{color:#95fb05;font-weight: 500; margin-bottom:5px;font-size: 19px;}*/ /*linea original: #main-content .post h3{color:#fcab2b;font-weight: 500; margin-bottom:5px;font-size: 19px;}*/
#main-content .post h3:hover {
  text-decoration: underline;
}
#main-content .post span {
  color: #fff;
  font-size: 14px;
}

/*lineas agregadas para listado de peliculas*/
#main-content .pos {
  padding: 0;
  text-align: center;
} /*linea agregada para listado de peliculas*/
#main-content .pos img.thumb {
  height: 230px;
  width: 100%;
}
#main-content .pos h3 {
  color: #95fb05;
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 15px;
} /*#main-content .pos h3{color:#95fb05;font-weight: 500; margin-bottom:5px;font-size: 19px;}*/
#main-content .pos h3:hover {
  text-decoration: underline;
}
#main-content .pos span {
  color: #fff;
  font-size: 14px;
}

/*estilo carta que voltea
.card{
  width: 200px;
  height: 250px;
  perspective: 800px;
}
.card_inner{
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.card:hover .card_inner{
  transform: rotateY(-180deg);
}
.card_side{
  position: absolute;
  inset: 0;
  background-color: #0000ff;
  display: grid;
  grid-template-rows: 180px 1fr;
  backface-visibility: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.card_side--back{
  transform: rotate(180deg);
} 

/*fin de agregado*/

/* volteo carta de codepen.io*

.carta-box{
  position: relative;
  perspective: 1000px;
}
.carta-box:hover .carta{
  transform: rotateY(180deg);
}
.carta-box:hover .tooltip{
  transform: rotateY(-180deg);
}
.carta {
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}
.cara{
  position: absolute;
  backface-visibility: hidden;
}
.cara.detras{
  transform: rotateY(180deg);
}

fin css prueba volteo carta*/


/*Estilos estrellas de valoracion*/

/* Contenedor de estrellas V1*/
.rating-stars {
    margin-top: 10px;
    font-size: 14px; /* Agregué 'px', es importante */
}

/* Color para estrellas llenas y media estrella */
.rating-stars .fas {
    color: #f1c40f; /* Dorado */
}

/* Color para estrellas vacías (Regular) */
.rating-stars .far {
    color: #ccc; /* Gris claro */
}

/* Ajuste específico para la media estrella si se ve rara */
.fa-star-half-alt {
    color: #f1c40f !important;
}



/* ---------------------------------------------------------------------------- */
/* -------------------------------------Article-------------------------------- */
/* ---------------------------------------------------------------------------- */
article {
  margin-bottom: 30px;
}
article:after,
article:before {
  clear: both;
  content: "\0020";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
}

article .art-header {
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
}
article .art-header ul li.star {
  padding: 15px 5px;
}
article .art-header p {
  font-size: 20px;
  font-weight: bold;
  color: #222;
}
article .art-header p a {
  font-size: 18px;
  font-weight: 500;
  color: #ffefff;
}
article .art-header p a:hover {
  color: #fcab2b;
}

article .art-content {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6);
}
article .art-content img {
  width: 380px;
  max-height: 200px;
  display: inline-block;
  margin: 10px;
} /*original: article .art-content img{float:left; width: 380px ;max-height: 200px;display: inline-block;margin:10px;} */
article .art-content blockquote {
  border-left: 3px solid #1c7791;
  font-size: 18px;
  margin: 0 50px;
  font-style: italic;
  color: #666;
  padding-left: 20px;
}
article .art-content ol {
  float: left;
  text-align: justify;
  margin: 10px 50px;
  font-size: 16px;
  list-style-type: circle;
}

/* ---Sidebar-Widget--- */

#sidebar .wrap-sidebar {
  margin: 20px 20px 20px 10px;
} /*linea original: #sidebar .wrap-sidebar{margin:20px 0px 20px 20px;}*/

.widget {
  margin-bottom: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  padding-bottom: 10px;
  border-bottom: 1px solid #666;
} /*linea original: .widget {margin-bottom: 50px;color: #fff;background-color: rgba(0,0,0,0.6);padding-bottom:30px;border-bottom: 1px solid #666;}*/
.widget:after,
.widget:before {
  clear: both;
  content: "\0020";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
}

.widget .wid-header {
  border-bottom: 1px solid #078441;
  margin-bottom: 1px;
  background-color: #000;
} /*linea original: .widget .wid-header {border-bottom:1px solid #fcab2b;margin-bottom: 30px ;background-color: #000;}*/
.widget .wid-header h5 {
  font-size: 22px;
  display: inline-block;
  padding: 15px 0;
  letter-spacing: 2px;
  padding-left: 10px;
}
.widget .wid-content {
  padding: 10px;
}

.widget.wid-new-updates ul a {
  margin: 5px;
  display: inline-block;
  color: #fcab2b;
  font-size: 16px;
}
.widget.wid-new-updates ul span img {
  margin: 10px 0 0 5px;
}

.widget.wid-tag ul li {
  display: inline;
}
.widget.wid-tag ul a {
  display: inline;
  margin: 5px;
  float: left;
  background: #248f19cc;
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
} /*agregado el 04-04-2022*/ /*linea original: .widget.wid-tag ul a{display:inline;margin: 5px;float:left;background:#fcab2b; color:#fff;padding:5px 10px;}*/
.widget.wid-tag a:hover {
  background: #000;
  color: #fff;
} /*linea original: .widget.wid-tag a:hover{background:#fff;color: #fcab2b;}*/

.widget.wid-post img {
  float: left;
  margin: 15px 5px;
  max-width: 130px;
}
.widget.wid-post h6 {
  color: #fcab2b;
}
.widget.wid-post .wrapper {
  vertical-align: middle;
  text-align: left;
  line-height: 1.4em;
  padding-bottom: 7px;
  margin-top: 22px;
  display: inline-block;
}

.widget.wid-last-updates img {
  float: left;
  margin: 15px 10px;
  max-width: 130px;
}
.widget.wid-last-updates h6 {
  color: #fcab2b;
}
.widget.wid-last-updates .wrapper {
  vertical-align: middle;
  text-align: left;
  line-height: 1.4em;
  padding-bottom: 7px;
  margin-top: 22px;
  display: inline-block;
}

.widget.wid-gallery img {
  margin: 0 10px 10px 0;
  max-width: 150px;
}

.widget.wid-archive select {
  margin: 5px 0;
  height: 40px;
  width: 100%;
  padding-left: 10px;
  font-family: "Noto Serif", serif;
  font-size: 16px;
  background-color: #e9e9e9;
  color: #777777;
  border: none;
}

.widget.wid-meta ul li {
  line-height: 2;/*2.8;*/
  border-bottom: 2px solid #078441;
} /*linea original: .widget.wid-meta ul li { line-height: 2.8;border-bottom: 2px solid #fcab2b;}*/
.widget.wid-meta ul a {
  font-size: 20px;
  color: #fff;
} /*{ font-size: 16px; color:#fff;} editada 01-05-2022*/

.widget.wid-related img {
  max-height: 240px;
  border: 1px solid #ddd;
}
.widget.wid-related h4 {
  margin-top: 10px;
  color: #fff;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Footer--------------------------------- */
/* ---------------------------------------------------------------------------- */
footer {
  background-color: rgba(0, 0, 0, 0.8);
} /* original : footer {;background-color: rgba(0,0,0,0.8);} */
footer .widget {
  border: none;
  background-color: transparent;
}
footer .wrap-footer {
  padding: 10px 0;
}

footer .copyright .copyright-info {
  font-style: italic;
}
footer .bottom-footer {
  background-color: #000;
  padding: 10px;
}
footer .bottom-footer p {
  text-align: center;
  color: #fff;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Img-Effect------------------------------ */
/* ---------------------------------------------------------------------------- */
.imgestrella {
  width: 10%;
  height: 10%;
}

.view {
  max-width: 160px;
  max-height: 270px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 0px 0px 5px #aaa;
  cursor: default;
  display: inline-block;
  border-radius: 20px; /* Agregado el 04-04-2022 para redondear fotos de peliculas*/

}
/*
.view::after {clase para aplicar la palabra nuevo a todas las foto que este dentro de la clase view (creado el 03-09-24)
  content: "Nuevo";
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 20px;
} */

.view.nuevo::after { /*clase para aplicar palabra nuevo a cada foto individual que este dentro de la clase nuevo o view nuevo (creado el 03-09-24)*/
  content: "Nueva";
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: red;
  color: white;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 20px;
}
.view.actualizada::after { /*clase para aplicar palabra actualizada a cada foto individual que este dentro de la clase nuevo o view nuevo para cuando se actualizan los datos de las peliculas en si (creado el 03-09-24)*/
  content: "Calidad Final";
  position: absolute;
  bottom: 10px;
  left: 5px;
  background-color: blue;
  color: white;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 20px;
}

.view .mask,
.view .content {
  width: 160px;
  height: 270px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.view img {
  display: block;
  position: relative;
}

.view a.info {
  /*background: url(../img/link.png) center no-repeat;*/
  display: inline-block;
  text-decoration: none;
  padding: 0;
  text-indent: -9999px;
  width: 50px;
  height: 50px;
}
.effect .mask {
  opacity: 0;
  overflow: visible;
  border: 0px solid rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}

.effect a.info {
  position: relative;
  top: 0px;
  right: 45px; /*original: 50px;*/
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}

.effect:hover .mask {
  opacity: 1;
  border: 100px solid rgba(0, 0, 0, 0.7);
}

.effect:hover a.info {
  opacity: 1;
  transform: scale(1, 1);
  transition-delay: 0.3s;
}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Pagination------------------------------ */
/* ---------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 10px;
  border-radius: 5px; /*optional*/
  color: #aaa;
  font-size: 13px;
}

.pagination {
  padding: 50px;
  text-align: center;
} /*linea original: .pagination { padding: 20px;text-align: center;}*/

.page {
  display: inline-block;
  padding: 0px 9px;
  border-radius: 3px;
  border: solid 1px #c0c0c0;
  background: #e9e9e9;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1),
    0px 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 18px; /*linea original: font-size: 13px;*/
  font-weight: bold;
  text-decoration: none;
  color: #717171;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
}

.page:hover,
.page.gradient:hover {
  background: #fcab2b;
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#fefefe),
    to(#f0f0f0)
  );
  background: -moz-linear-gradient(0% 0% 270deg, #fefefe, #f0f0f0);
}

.page.active {
  border: none;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5),
    0px 1px 0px rgba(255, 255, 255, 0.8);
  color: #f0f0f0;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

.page.gradient {
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#f8f8f8),
    to(#e9e9e9)
  );
  background: -moz-linear-gradient(0% 0% 270deg, #f8f8f8, #e9e9e9);
}

.pagination {
  color: #feffff;
}

.page {
  border: solid 1px #32373b;
  background: #fcab2b;
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.1),
    0px 1px 3px rgba(0, 0, 0, 0.1);
  color: #feffff;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}

.page:hover,
.page.gradient:hover {
  background: #fcab2b;
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#547085),
    to(#3d4f5d)
  );
  background: -moz-linear-gradient(0% 0% 270deg, #547085, #3d4f5d);
}

.page.active {
  border: none;
  background: #2f3237;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5),
    0px 1px 0px rgba(255, 255, 255, 0.1);
}

.page.gradient {
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#565b5f),
    to(#3e4347)
  );
  background: -moz-linear-gradient(0% 0% 270deg, #565b5f, #3e4347);
}
/* ---------------------------------------------------------------------------- */
/* -------------------------------------Select------------------------------ */
/* ---------------------------------------------------------------------------- */
select {
  border-bottom: 2px solid #fcab2b;
  font: bold 13px Arial, Helvetica, Sans-serif;
  color: #777;
  width: 125px;
  padding: 7px;
  margin-left: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Button--------------------------------- */
/* ---------------------------------------------------------------------------- */
a.button {
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  display: inline-block;
  background: #fcab2b;
  padding: 5px 10px;
  text-transform: uppercase;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  margin-right: 0px;
}
a.button:hover {
  opacity: 0.9;
}

a.button.bt1 {
  background: #f8881b;
  border: 1px solid #eee;
  font-size: 22px;
  padding: 10px 15px;
  margin-right: 10px;
}
a.button.bt2 {
  background: #0000ff;
  color: #ffffff;
}

/* ---------------------------------------------------------------------------- */
/* -------------------------------------Contact-------------------------------- */
/* ---------------------------------------------------------------------------- */

.correo-image {/*estilo imagen carta de contacto*/
  max-width:20%; /* 100%; (30-11-23)*/ 
  height: auto;
  margin-left: 40%; /* 30%; (30-11-23)*/
}

.contact {
  background-color: rgba(0, 0, 0, 0.6);
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
.contact h2 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 3px;
  padding-top: 70px;
  text-align: center;
}

#contact_form {
  padding: 25px;
}

#ff label {
  cursor: pointer;
  margin: 5px 0;
  display: block;
  font-weight: bold;
}

#ff input {
  display: block;
  width: 90%;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  color: #000;
  border: 1px solid #5f5f5f;
  padding: 10px;
  margin: 5px 0 25px 0;
}

textarea {
  display: block;
  width: 90%;
  height: 200px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: #fff;
  color: #000;
  border: 1px solid #5f5f5f;
  padding: 10px;
  margin: 5px 0 25px 0;
}

#ff .sendButton {
  border: none;
  cursor: pointer;
  background-color: #f8881b;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 100px;
  color: #ffffff;
}
#ff .sendButton:hover {
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------- */
/* ------------------------------------Subcribe-------------------------------- */
/* ---------------------------------------------------------------------------- */
#subcribe {
  margin: 10px;
}

#subcribe input[type="text"] {
  background: #fff;
  color: #867b6e;
  width: 200px;
  padding: 16px;
}

#subcribe input[type="submit"] {
  background: #303030;
  padding: 16px;
  color: #ffffff;
  cursor: pointer;
  width: 110px;
  outline: none;
}