/*Theme Name: 
Theme URI: www.pixandlab.com
Author: PIX & LAB 
Description: Tema para 
*/

@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration:none;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, html a{
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

ol, ul {
	list-style: none;
	line-height:1.5em;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong{
	font-weight:bold;
}
em{
	font-style: italic;
}
/* Hasta aquí reseteo */
/* Portada */
.maxf-portada {
	background-image: url('img/maxf-home.jpg');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	position: relative;
	background-attachment: fixed;
}
h1, h2, h3, h4, h5{
	font-family: "Orbitron", sans-serif;
	font-optical-sizing: auto;
}
p, a, ul li{
	font-family: "Exo 2", sans-serif;
}
.titulo-portada {
  display: flex;
  flex-direction: column-reverse; /* Invierte el orden */
}
.maxf-portada h2{
	font-size:40px;
	color:#c1272d;
	text-transform:uppercase;
	font-weight:900;
	animation: revealText 1.5s ease-out both;
    overflow: hidden;
    white-space: nowrap;
	animation: fadeInUp 1s ease-out both;
}
.maxf-portada h1{
	font-size:72px;
	color:#fff;
	text-transform:uppercase;
	max-width:630px;
	margin:0 auto;
	font-weight:900;
	animation: fadeInUp 1s ease-out 0.3s both; /* Retraso de 0.3s */
    opacity: 0;
	margin-bottom:20px;

}

.btn-compra{
	display: flex;           /* Activa Flexbox */
  flex-direction: column;  /* Apila los elementos verticalmente */
  justify-content: center; /* Centra verticalmente */
  align-items: center;     /* Centra horizontalmente */
  gap: 8px;
	text-align:center;
	background-color:#c96125;
	color:#fff;
	font-size:25px;
	font-family: "Orbitron", sans-serif;
	width:325px;
	height:109px;
	border-radius:19px;
	margin:0 auto;
	font-weight:700;
	text-decoration:none;
	animation: fadeIn 1s ease-out 0.6s both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
}
.btn-compra.btn-pdv{
	background-color:#7a9cc6;
}
.maxf-portada .btn-compra{
	background-color:rgba(201,97,37,.8);
}
.btn-compra:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	color:#fff;
	opacity:.7;
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.maxf-sinopsis{
	margin-top:83px;
	margin-left:133px;
	margin-bottom:190px;
}
.maxf-sinopsis h2{
	font-size:50px;
	font-weight:700;
	color:#c96125;
	margin-top:30px;
}
.maxf-sinopsis p{
	font-size:16px;
	line-height;23px;
	color:#1a1a1a;
	font-family: "Exo 2", sans-serif;
	margin-right:100px;
}
.maxf-sinopsis img{
	max-width:100%;
	height:auto;
}
/* Animación solo para imágenes dentro de .greca-sinopsis */
.greca-sinopsis img {
    opacity: 0;
    transform: translateY(-40px);
    transition: none;
    will-change: transform, opacity; /* Optimización para el navegador */
}

.greca-sinopsis img.animate-drop {
    animation: slideDown 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes slideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.greca-sinopsis img.animate-drop {
    animation: slideDown 1.2s ease-out forwards, float 3s ease-in-out 1.2s infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
/* Clase que activará la animación */
.animate-drop {
    animation: slideDown 1s ease-out forwards;
    opacity: 0; /* Inicia invisible */
}
.maxf-elipse{
	height: auto;
  	background: #F2F5F9; /* Color de fondo */
  	clip-path: ellipse(100% 50% at 50% 50%);
    box-sizing: border-box;
	padding:120px 0;
}
.int-fragmentos{
	margin-left:133px;
}
.int-personajes{
	margin-right:133px;
}
.maxf-fragmentos h2, .maxf-personajes h2{
	font-size:50px;
	font-weight:700;
	color:#7a9cc6;
}
.maxf-fragmentos p, .maxf-personajes p{
	font-size:20px;
	color:#7a9cc6;
}
.fragmentos ul, .personajes ul{
	padding-left:0;
}
.fragmentos ul li{
	margin-bottom:24px;
}	
.fragmentos ul li a, .personajes ul li a{
	font-family: "Orbitron", sans-serif;
	font-size:28px;
	font-weight:700;
	color:#fff;
	text-decoration:none;
	
}
.personajes ul li{
	margin-bottom:42px;
}
.personajes ul li a{
	text-transform:uppercase;
}
.fragmentos, .personajes{
	background-repeat:no-repeat;
	background-position:top center;
	padding-top: 64px;
    padding-bottom: 45px;
}
.fragmentos{
	background-image:url('img/greca-fragmentos.svg');
}
.personajes{
	background-image:url('img/greca-personajes.svg');
}
.maxf-autor{
	margin-top:34px;
	margin-bottom:34px;
}
.maxf-autor h2{
	font-size:50px;
	font-weight:700;
	color:#c96125;
	margin-top:21px;
	margin-bottom:40px;
}
.maxf-autor p{
	max-width:700px;
	margin:15px auto 0;
}
.maxf-botones{
	margin-top:45px!important;
}
.maxf-mail{
	display:block;
	color:#c96125;
	font-size:22px;
	font-family: "Orbitron", sans-serif;
	text-decoration:none;
	margin-top:20px;
	margin-bottom:20px;
}
.gallery-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 auto;
}

/* Cada columna/item */
.gallery-col {
    flex: 1 0 25%; /* 4 columnas iguales */
    padding: 0 5px; /* Pequeño espacio entre imágenes */
    box-sizing: border-box;
}

/* Contenedor de imagen con proporción fija */
.image-container {
    position: relative;
    width: 100%;
    padding-top: 53.33%; /* Proporción 1500x800 (800/1500*100) */
    overflow: hidden;
}

/* Estilo para las imágenes */
.gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta las imágenes para ajustarse */
    cursor: pointer;
    transition: transform 0.3s;
	border-radius:19px;
}

.gallery-img:hover {
    transform: scale(1.05);
}

/* Para el modal de vista ampliada */
.modal-img {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
}
.maxf-venta{
	margin-top:60px;
	margin-bottom:60px;
}
.maxf-venta p{
	font-size:22px;
	font-family: "Orbitron", sans-serif;
	font-weight:700;
	color:#7a9cc6;
	max-width:900px;
	text-align:center;
}
p.ampliar{
	text-align:center;
}
/* Responsive: 2 columnas en móviles */
@media (max-width: 768px) {
    .gallery-row {
        flex-wrap: wrap;
    }
    .gallery-col {
        flex: 1 0 50%;
        margin-bottom: 10px;
    }
}
footer ul{
	padding-left:0;
	margin-bottom:50px;
}
footer ul li{
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
}
@media only screen and (max-width: 576px){
	.maxf-portada h2{
		font-size:26px;
	}
	.maxf-portada h1{
		font-size:35px;
	}
	.btn-compra{
		gap:5px;
		font-size:20px;
		width:275px;
		border-radius:19px;
	}
	.maxf-sinopsis h2, .maxf-fragmentos h2, .maxf-personajes h2, .maxf-autor h2{
		font-size:30px;
	}
	.maxf-sinopsis {
    	margin-top: 20px;
    	margin-bottom: 100px;
	}
	.maxf-sinopsis p{
		margin-right:0;
	}
	.int-fragmentos{
		margin-left:0;
		margin-bottom:30px;
	}
	.int-personajes{
		margin-right:0;
	}
}