:root {
  --color-bg: #f8f8f8;
  --color-primary: #d4af37;
  --color-secondary: #007bff;
  
  --color-primary-catalogo:#d7c3a3;/*#cfc9b4;*/
  --color-primary-vermas: #cfd9b4;
  
  --color-text: #333333;
  --color-heading: #222222;
  --color-border: #cccccc;
  --radius: 8px;
  --spacing: 1rem;
  --font-body: 'Segoe UI', sans-serif;
  --max-width:70rem;
  
  /*--puzzle-container-height:118vh;*/
  --puzzle-container-height:110%;
  --puzzle-container-max-height:70em;
  
  --item-height:30vh;
  --second-img-height:18vh;
  
  --swiper-color-background: rgba(var(--Fondo-Antiguo-dec), 0.5); // #ecf5f5; #d8fffe;
  --swiper-theme-color: #76121e!important;
  --swiper-navigation-color: #76121e;
  --swiper-navigation-size: 2em!important;;
	 
  --Fondo-Antiguo:#f6f0e3;
  --Fondo-Antiguo-dec:246,240,227;
  --btn-Fondo-Antiguo:#d7c3a3;
  --fondo-antiguo-text: #3a2d1f;
}

.swiper-button-next, .swiper-button-prev {
    svg {
        height: 50%;
        object-fit: contain;
        transform-origin: center;
        width: 100%;
        fill: currentColor;
        pointer-events: none;
        filter: drop-shadow(0px 0px 2px white);
    }
}

.fondo-antiguo {
    color: var(--fondo-antiguo-text);    	
    #padding: 24px;
    max-width: 800px;
    margin: 20px auto;	
	text-align:center;
}
.fa-intro, .fa-intro-button {
    text-align: center;
	background: var(--Fondo-Antiguo)!important;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    #font-weight: 700;
    #display: inline-block;
}

.fa-intro-button {
    text-align: center;
	background: var(--btn-Fondo-Antiguo)!important;
    padding: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
}

.btn-principal {
    #padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
}

#openModal > div.puzzle-buttons{
	text-align:right;
	#margin-top:1rem;
	display: inline-block;
}


.entrada{
	#border:1px solid;	
	text-align:center;
    width: 65%;
    display: block;
    margin: 0 auto;	
}


/* Modal a pantalla completa */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8); /* Fondo oscuro */
}

/* Contenedor del contenido */
.modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff; /* Fondo del modal */
  padding: 20px;
  box-sizing: border-box;
}

/* Botón de cierre arriba izquierda */
.close-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
}


a {
	text-decoration: blink;
    color: black;
    font-size: medium;
    font-weight: 400;
}

header{
    margin: 0 auto;
    text-align: center;
}


.cFirtPart{
    display: flex;
    width: 100%;
}

.cIntro{
	width: 100%;
}

.cImgMain{
	width: 100%;
	text-align: center;
	#padding: 3em;
	margin-left: 10px;
	#background-color:rgba(var(--Fondo-Antiguo-dec),0.5);
	display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

.eimgMan{
    background-color: rgba(var(--Fondo-Antiguo-dec), 0.5);
    padding: 10px;
}

.cCuriosidad {
	display: flow-root;
}

.cLinkFama a{
	text-decoration: blink;
}

.imgHead{
	width:100%;
	max-width: calc(var(--max-width) + 2*var(--spacing));
}

.imgMain {
  #float: right;
  max-width: 20em;
  max-height: 15em;
  height: auto;
  cursor: zoom-in;
  #border: 3px solid #000;

}

.imgSecond {
	max-width:100%;
	height:var(--second-img-height);
	padding: 2px;
}

.puzzle-container {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  # border-radius: var(--radius);
  padding: var(--spacing);
  font-family: var(--font-body);
  max-width: var(--max-width);
  margin: auto;
  height: calc(var(--puzzle-container-height) - 2vh);
  #max-height:calc(var(--puzzle-container-max-height) - 10em);
}

@media (max-width: 768px) {
	.puzzle-container {
		height:var(--puzzle-container-height);
		max-height:var(--puzzle-container-max-height);
	}
}

.puzzle-container h2 {
  color: var(--color-heading);
}

.puzzle-container p {
  color: var(--color-text);
  text-align: justify;
}

.puzzle-buttons, .puzzle-buttons-vermas, .puzzle-buttons-catalogo{
  margin: 0.25rem;
  #text-align:center;
  height:5vh;
}

.puzzle-buttons a {
  display: inline-block;
  margin: 0.20rem;
  padding: 0.2rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: white;
  background: var(--color-primary);
}

.puzzle-buttons-catalogo a {
  display: inline-block;
  margin: 0.20rem;
  padding: 0.2rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: white;
  background: var(--color-primary-catalogo);
}

.puzzle-buttons-vermas a {
  display: inline-block;
  margin: 0.20rem;
  padding: 0.2rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: white;
  background: var(--color-primary-vermas);
  height: 3vh;
}



@media (min-width: 768px) {
	.puzzle-buttons-vermas a {
	  vertical-align: bottom;
	  bottom: 2px;
	  position: absolute;
	  display: inline-block;
	  margin: 0.3rem;
	  padding: 0.2rem 1rem;
	  border-radius: var(--radius);
	  text-decoration: none;
	  color: white;
	  background: var(--color-primary-vermas);
	  height: 3vh;
	}
}

.mas-puzzles .swiper .swiper-wrapper .swiper-slide {
  display: grid;
  gap: var(--spacing);
  position: relative;
  bottom: 0rem;
}

@media (min-width: 768px) {
	.mas-puzzles .swiper .swiper-wrapper .swiper-slide {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		position: relative;
		#bottom: -6rem;		
	}
}

.mas-puzzles .swiper .swiper-wrapper .swiper-slide .item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.2rem;
  text-align: center;
  background: var(--swiper-color-background);  
  height:var(--item-height);
}


.swiper {
  width: 100%;
  #height: 200px;
}	

.item p {
	text-align: center;
}