html{
scroll-behavior: smooth;
height: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
background-size: 100%;
height: 100%;
overflow-x: hidden;
font-size: 16px;
}
nav{
background-color: black;
position:fixed;
z-index: 9999;
width: 100%;
height: 90px;
}
/* animacion imagen */
@keyframes flotar{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
a{
text-decoration: none;
}
.link{
position: absolute;
padding: 20px 50px;
margin-top: -0.5%;
}
nav ul{
float: right;
z-index: 9999;
margin-right: 25%;
margin-top: 5px;
}
nav ul li{
display: inline-block;
line-height: 80px;
z-index: 9999;
margin: 0 12px;
}
nav ul li a{
z-index: 9999;
color: #FFFF;
font-size: 15px;
font-family: "Quicksand", sans-serif;
border-radius: 3px;
padding: 2px 9px;
text-transform: uppercase;
}
.button-div{
display: flex;
min-height: auto;
padding: 40px 0;
justify-content: center;
align-items: center;
font-family: "Bebas Neue", sans-serif;
flex-direction: column;
}
.btn{
width: auto;
position: relative;
font-size: 50px;
padding: 70px 100px;
border-radius: 15px;
}
.ppr{
display: inline-block;
background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
color: #FFFF;
transition: transform 0.3s ease-in-out;
}
.ppr::after, .ppr::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #da0707, #d6e406);
z-index: -1;
opacity: 0.3;
transition: transform 0.3s ease-in-out;
border-radius: inherit;
}
.ppr:hover{
background: linear-gradient(135deg, #da0707, #d6e406);
color: #FFFF;
transform: translate(-12px, -12px);
}
.ppr:hover::after{
transform: translate(6px, 6px);
}
.ppr:hover::before{
transform: translate(12px, 12px);
}
.liyf{
transition: 0.5s;
object-fit: cover;
margin-top: -11.6%;
margin-left: 98%;
}
.liyf:hover{
transform: scale(1.1);
}
.cal-camp{
object-fit: cover;
margin-top: -8.7%;
margin-left: 134%;
}
.cal-camp img {
transition: transform 0.3s ease, filter 0.3s ease;
cursor: pointer;
}
.cal-camp img:hover {
transform: scale(1.15) rotate(5deg);
filter: drop-shadow(0 0 8px #ffd700);
}
.cal-camp-resp{
object-fit: cover;
margin-top: -8.7%;
margin-left: 134%;
display: none;
}
.cal-camp-resp img {
transition: transform 0.3s ease, filter 0.3s ease;
cursor: pointer;
}
.cal-camp-resp img:hover {
transform: scale(1.15) rotate(5deg);
filter: drop-shadow(0 0 8px #ffd700);
}
#zoom{
transition: 0.5s;
object-fit: cover;
}
#zoom:hover{
transform: scale(1.2);
}
.checkbtm{
margin-top: 2%;
position: absolute;
display: none;
cursor: pointer;
border-radius: none;
}
#check{
display: none;
}
.vid{
width: 100%;
border-radius: 15px;
padding-left: -12%;
}
.vid2 {
width: 100%;
max-width: 900px;
margin: 40px auto;
padding: 0 15px;
box-sizing: border-box;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
background-color: #000;
}
.vid2 video {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
}
.vid4 {
width: 100%;
max-width: 900px;
margin: 40px auto;
padding: 0 15px;
box-sizing: border-box;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
background-color: #000;
}
.vid4 video {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
}
.custom-video {
position: relative;
width: 100%;
max-width: 1025px;
margin: 20px auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
border-radius: 20px;
overflow: hidden;
background-color: #000;
}
.custom-video video {
width: 100%;
display: block;
border-radius: 20px;
}
.custom-video {
position: relative;
width: 100%;
margin: 40px auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
border-radius: 20px;
overflow: hidden;
background-color: #000;
}
.custom-video video {
width: 100%;
display: block;
border-radius: 20px;
}
.custom-video .play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
font-size: 50px;
padding: 20px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: 0.3s ease;
}
.custom-video .play-button:hover {
background: rgba(0, 0, 0, 0.8);
}
/* VIDEO DE NOTICIAS */
.custom-video-nt {
position: relative;
width: 100%;
max-width: 1025px;
margin: 40px auto;
border-radius: 20px;
overflow: hidden;
background-color: #000;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.custom-video-nt video {
width: 100%;
display: block;
border-radius: 20px;
}
/* BOTÓN PLAY */
.play-button-nt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
background: rgba(0, 0, 0, 0.6);
border: none;
color: white;
font-size: 60px;
padding: 25px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
/* Hover tipo Netflix */
.custom-video-nt:hover .play-button-nt {
transform: translate(-50%, -50%) scale(1.1);
background: rgba(0, 0, 0, 0.8);
}
/* Fade out */
.play-button-nt.hide {
opacity: 0;
pointer-events: none;
}
/* =========================
SECCIÓN PRINCIPAL
========================= */
.mms {
width: 100%;
height: 555px;
background-image: url('img/img camp.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
/* Efecto de desvanecido hacia negro */
.mms::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.15) 15%,
rgba(0,0,0,0.65) 55%,
#000 100%
);
z-index: 1;
}
.mms .capa {
height: 79.7%;
width: 96.1%;
position: absolute;
padding: 24px;
margin-top: 0%;
z-index: 2;
}
.mms .capa h1 {
font-size: 64px;
font-family: "Bebas Neue", sans-serif;
color: #fff;
margin-top: 7%;
width: 17%;
position: relative;
z-index: 3;
}
.h3mcms{
color: #FFFF;
font-family: "Bebas Neue", Sans-Serif;
margin-top: 3%;
font-size: 61px;
padding-left: -3%;
}
details{
color: #ffd700;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(20px, 3vw, 30px);
padding-left: 6%;
margin-top: 3%;
}
summary{
cursor: pointer;
}
details p{
width: 70%;
margin: auto;
margin-top: 3%;
color: #fafafaf6;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(16px, 2.5vw, 22px);
line-height: 1.6;
word-wrap: break-word;
hyphens: auto;
}
.h1ca{
color: #FFFF;
font-family: "Bebas Neue", Sans-Serif;
font-size: 57px;
padding-left: -3%;
margin-top: -0.7%;
}
.cmc {
display: flex;
justify-content: center;
gap: 20px; /* Espacio entre cajas */
flex-wrap: wrap; /* Permite que bajen a otra línea en pantallas pequeñas */
padding: 20px;
}
.cannac,
.mcms_etrv,
.campañas_mcms {
width: 26%;
min-width: 280px;
height: 450px;
border: 2px solid rgb(231, 231, 10);
border-radius: 12px;
background-color: black;
text-align: center;
}
.cannac img,
.mcms_etrv img,
.campañas_mcms img {
width: 100%;
height: 200px;
border-radius: 15px;
object-fit: cover;
}
.cannac .h3{ font-family: "Bebas Neue", sans-serif; color: rgb(199, 199, 9); font-size: 22px; margin-top: -2%; } .cannac .h4{ font-family: "Bebas Neue", sans-serif; color: #FFFF; font-size: 17px; margin-top: -1%; }
.mcms_etrv .h3{ font-family: "Bebas Neue", sans-serif; color: rgb(199, 199, 9); font-size: 22px; margin-top: -2%; } .mcms_etrv .h4{ font-family: "Bebas Neue", sans-serif; color: #FFFF; font-size: 17px; }
.campañas_mcms .h3{
font-family: "Bebas Neue", sans-serif;
color: rgb(199, 199, 9);
font-size: 22px; margin-top: -2%;
}
.campañas_mcms .h4{
font-family: "Bebas Neue", sans-serif;
color: #FFFF;
font-size: 17px;
margin-top: -1%; }
.boton a{
font-family: "Bebas Neue", sans-serif; background-color: white; color: rgb(0, 0, 0); font-size: 20px; padding: 15px 43px; border-radius: 7px; transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .boton a:hover{ background-color: rgb(199, 199, 9); color: #FFFF; }
.yflog img{
width: 100%;
max-width: 60%;
}
/* =========================
NOTICIAS
========================= */
.noticias-titulo {
width: 100%;
background: #000;
text-align: center;
margin-top: 0px;
padding-top: 0;
padding-bottom: 35px;
position: relative;
z-index: 4;
}
.h1not {
margin: 0;
font-family: "Bebas Neue", sans-serif;
font-size: 60px;
color: white;
position: relative;
z-index: 5;
}
.noticias {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 20px;
}
/* Tarjetas */
.act1,
.act2,
.act3,
.act4,
.act5 {
width: 30%;
min-width: 300px;
aspect-ratio: 13 / 17;
border: 1px solid rgb(231, 231, 10);
border-radius: 15px;
background-color: black;
overflow: hidden; /* Importante para que el zoom no se salga */
transition: all 0.4s ease;
cursor: pointer;
}
/* Imagen */
.act1 a img,
.act2 a img,
.act3 a img,
.act4 a img,
.act5 a img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
.act1:hover,
.act2:hover,
.act3:hover,
.act4:hover,
.act5:hover {
transform: rotateY(8deg) scale(1.05);
}
.noticias-text {
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding: 0 15px;
font-size: clamp(22px, 2.5vw, 29px);
box-sizing: border-box;
color: #fafafaf6;
font-family: "Bebas Neue", sans-serif;
}
.moreno-grid{
display: grid;
grid-template-columns: 1.5fr 1.5fr;
grid-template-rows: 320px 320px;
gap: 20px;
max-width: 1000px;
margin: auto;
padding: 20px;
}
/* TODAS LAS CARDS */
.card{
overflow: hidden;
border-radius: 30px;
position: relative;
}
/* TODAS LAS IMÁGENES */
.card img{
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.4s ease;
display: block;
}
/* EFECTO HOVER */
.card:hover img{
transform: scale(1.05);
}
/* CARD IZQUIERDA GRANDE */
.card1{
grid-column: 1;
}
/* CARD ARRIBA DERECHA */
.card2{
grid-column: 2;
}
/* ABAJO IZQUIERDA */
.card3{
grid-column: 1;
margin-top: 12px;
}
/* ABAJO DERECHA */
.card4{
grid-column: 2;
margin-left: auto;
margin-top: 12px;
}
.titulo-vivos{
font-size: clamp(2rem, 3vw, 4rem);
font-family: 'Montserrat', sans-serif;
font-weight: 900;
text-transform: uppercase;
text-align: center;
background: linear-gradient(90deg, #ffd700, #ffb300, #fff2a8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 4px;
margin: 40px 0;
text-shadow:
0 0 10px rgba(255,215,0,0.4),
0 0 25px rgba(255,180,0,0.4);
animation: glow 2s infinite alternate;
}
@keyframes glow{
from{
transform: scale(1);
filter: brightness(1);
}
to{
transform: scale(1.03);
filter: brightness(1.2);
}
}
.descripcion-vivo{
max-width: 950px;
margin: 20px auto 40px auto;
text-align: center;
padding: 0 20px;
}
.descripcion-vivo p{
color: white;
font-size: clamp(1rem, 2vw, 1.3rem);
line-height: 1.8;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
padding: 25px;
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(255,215,0,0.15);
}
.descripcion-vivo strong{
color: #ffd700;
}
.redes-stream{
display: flex;
justify-content: center;
align-items: center;
gap: 35px;
margin-top: 30px;
margin-bottom: 60px;
}
.redes-stream .red{
width: 85px;
height: 85px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.08);
transition: 0.3s ease;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.redes-stream .red:hover{
transform: translateY(-8px) scale(1.08);
box-shadow: 0 0 25px rgba(255,215,0,0.4);
}
.redes-stream img{
width: 75px;
height: 45px;
object-fit: contain;
}
/* =====================================================
CLASES MCMS
===================================================== */
.mcms-clases-section {
width: min(1100px, calc(100% - 40px));
margin: 100px auto;
position: relative;
}
/* =====================================================
ENCABEZADO
===================================================== */
.mcms-clases-header {
text-align: center;
max-width: 700px;
margin: 0 auto 45px;
}
.mcms-clases-label {
display: inline-block;
color: #d4af37;
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
margin-bottom: 15px;
}
.mcms-clases-header h2 {
margin: 0;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(45px, 6vw, 70px);
font-weight: 400;
line-height: .95;
letter-spacing: 1px;
color: #dedede;
}
.mcms-clases-header h2 span {
color: #d4af37;
}
.mcms-clases-header p {
max-width: 600px;
margin: 20px auto 0;
color: #777;
font-family: "Montserrat", sans-serif;
font-size: 14px;
line-height: 1.8;
}
/* =====================================================
TARJETA
===================================================== */
.mcms-clases-card {
position: relative;
background:
radial-gradient(
circle at 85% 20%,
rgba(212,175,55,.08),
transparent 30%
),
linear-gradient(
135deg,
#151515,
#080808
);
border:
1px solid
rgba(255,255,255,.09);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 25px 70px rgba(0,0,0,.45);
}
.mcms-clases-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background:
linear-gradient(
90deg,
transparent,
#d4af37,
transparent
);
}
/* =====================================================
CONTENIDO
===================================================== */
.mcms-clases-content {
min-height: 420px;
display: grid;
grid-template-columns:
1fr
400px;
align-items: center;
gap: 60px;
padding:
55px
65px;
}
/* =====================================================
INFORMACIÓN
===================================================== */
.mcms-clases-info {
position: relative;
}
.mcms-number {
display: block;
color: rgba(212,175,55,.25);
font-family:
"Bebas Neue",
sans-serif;
font-size: 90px;
line-height: .7;
margin-bottom: 30px;
}
.mcms-clases-info h3 {
max-width: 450px;
margin: 0;
font-family:
"Bebas Neue",
sans-serif;
font-size:
clamp(
42px,
5vw,
65px
);
font-weight: 400;
line-height: .95;
text-transform: uppercase;
color: #dedede;
}
.mcms-clases-info h3 strong {
color: #d4af37;
font-weight: 400;
}
.mcms-clases-info p {
max-width: 430px;
margin-top: 25px;
color: #777;
font-family: "Montserrat", sans-serif;
font-size: 13px;
line-height: 1.8;
}
/* =====================================================
INDICADOR
===================================================== */
.mcms-scan {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
color: #d4af37;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}
.scan-icon {
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(212,175,55,.5);
border-radius: 50%;
font-size: 14px;
}
/* =====================================================
QR
===================================================== */
.mcms-qr-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
text-decoration: none;
}
.mcms-qr-frame {
position: relative;
width: 350px;
height: 350px;
padding: 18px;
background: white;
border-radius: 15px;
box-shadow:
0 20px 50px
rgba(0,0,0,.5);
transition:
transform .4s ease,
box-shadow .4s ease;
}
.mcms-qr {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 5px;
}
/* =====================================================
ESQUINAS DORADAS
===================================================== */
.qr-corner {
position: absolute;
width: 25px;
height: 25px;
border-color: #d4af37;
border-style: solid;
z-index: 2;
}
.qr-top-left {
top: -5px;
left: -5px;
border-width: 3px 0 0 3px;
border-radius: 8px 0 0 0;
}
.qr-top-right {
top: -5px;
right: -5px;
border-width: 3px 3px 0 0;
border-radius: 0 8px 0 0;
}
.qr-bottom-left {
bottom: -5px;
left: -5px;
border-width: 0 0 3px 3px;
border-radius: 0 0 0 8px;
}
.qr-bottom-right {
bottom: -5px;
right: -5px;
border-width: 0 3px 3px 0;
border-radius: 0 0 8px 0;
}
/* =====================================================
HOVER QR
===================================================== */
.mcms-qr-link:hover .mcms-qr-frame {
transform:
translateY(-8px)
scale(1.025);
box-shadow:
0 25px 65px
rgba(212,175,55,.16);
}
.qr-hover-text {
margin-top: 17px;
color: #777;
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
transition:
color .3s ease;
}
.qr-hover-text-celu{
display: none;
margin-top: 17px;
color: #777;
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
transition:
color .3s ease;
}
.mcms-qr-link:hover .qr-hover-text {
color: #d4af37;
}
/* =====================================================
FOOTER DE LA TARJETA
===================================================== */
.mcms-clases-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding:
18px
25px;
border-top:
1px solid
rgba(255,255,255,.07);
color: #555;
font-size: 8px;
font-weight: 600;
letter-spacing: 2px;
}
.mcms-line {
width: 35px;
height: 1px;
background: #d4af37;
opacity: .6;
}
/* =====================================================
BOTÓN
===================================================== */
.mcms-clases-button {
display: none;
}
/* =========================
FOOTER GENERAL
========================= */
.footer {
background: radial-gradient(circle at top, #111 0%, #000 70%);
padding: 80px 30px 70px;
color: white;
font-family: "Bebas Neue", sans-serif;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* =========================
GRID LAYOUT (AREAS)
========================= */
.footer-container {
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"logo logo logo"
"menu young social";
gap: 60px;
align-items: start;
text-align: center;
}
/* =========================
GRID AREAS
========================= */
.footer-logo {
grid-area: logo;
}
.footer-menu {
grid-area: menu;
}
.footer-youngfest {
grid-area: young;
}
.footer-social {
grid-area: social;
}
/* =========================
ANIMACIÓN DE ENTRADA
========================= */
.footer-container > div {
opacity: 0;
transform: translateY(35px);
animation: fadeUp 0.9s ease forwards;
}
.footer-logo { animation-delay: 0.15s; }
.footer-menu { animation-delay: 0.30s; padding-bottom: 10%; }
.footer-youngfest { animation-delay: 0.45s; }
.footer-social { animation-delay: 0.60s; }
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================
LOGO PRINCIPAL
========================= */
.footer-logo img {
width: 200px;
margin-bottom: 40px;
border-radius: 17px;
filter: drop-shadow(0 0 12px rgba(255,255,255,0.25));
}
/* =========================
MENÚ
========================= */
.footer-menu h2,
.footer-social h2 {
margin-bottom: 16px;
font-size: 20px;
letter-spacing: 2px;
text-decoration: underline;
}
.footer-menu a {
display: block;
color: #eaeaea;
font-size: 15px;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.footer-menu a:hover {
color: white;
transform: translateX(6px);
}
/* =========================
YOUNGFEST
========================= */
.footer-youngfest img {
width: 170px;
margin-bottom: 12px;
}
.instagram {
display: flex;
justify-content: center;
align-items: center;
}
.instagram a {
color: #eaeaea;
font-size: 15px;
transition: 0.3s;
}
.instagram a:hover {
color: white;
}
/* =========================
REDES SOCIALES
========================= */
.icons {
display: flex;
justify-content: center;
gap: 22px;
}
.icons img {
width: 34px;
filter: brightness(0) invert(1);
opacity: 0.7;
transition: all 0.3s ease;
}
.icons img:hover {
opacity: 1;
transform: scale(1.2);
}
.gridyf {
display: grid;
grid-template-areas:
"aviv video"
"eventos video"
"jovenes jovenes";
gap: 10px;
padding: 10px;
max-width: 950px;
margin: auto;
}
.item {
position: relative;
}
.item img,
.item video {
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
opacity: 0.8;
}
.item h1 {
position: absolute;
bottom: 20px;
left: 20px;
font-family: "Bebas Neue", sans-serif;
font-size: 2.5rem;
color: #fff;
text-shadow: 2px 2px rgb(167, 168, 144);
}
.aviv { grid-area: aviv; }
.eventos { grid-area: eventos; }
.video { grid-area: video; }
.jovenes { grid-area: jovenes; }
.eventos h1 {
font-size: 4rem;
text-align: center;
width: 100%;
}
.aviv h1 {
font-size: 4rem;
text-align: center;
width: 100%;
}
.jovenes h1 {
top: 40%;
font-size: 6rem;
text-align: center;
width: 100%;
left: 0;
bottom: 40%;
transition: 0.5s;
}
.jovenes h1:hover {
transform: scale(1.2);
color: rgb(165, 165, 1);
text-shadow: 2px 2px rgb(205, 207, 133);
}
.contw{
position: fixed;
z-index: 999;
border-radius: 40%;
bottom: 1.25em;
right: 0;
padding: 0.525em;
margin-top: 55%;
margin-left: 12%;
transition: ease 0.3s;
}
.contw:hover{
transform: scale(1.1);
transition: 0.3s;
}
.botonw{
width: 8.7em;
transition: ease 1s;
}
.ytimg{
border-radius: 15px;
}
.redmms {
max-width: 900px; /* ancho máximo */
margin: auto;
}
.redmms h1 {
font-family: "Bebas Neue", sans-serif;
color: #fff;
font-size: 57px;
}
.redmms .red {
font-size: 40px;
}
/* === GRID === */
.grid-redes {
display: grid;
grid-template-columns: 1fr 2fr; /* YT grande a la izq, IG a la derecha */
grid-template-areas:
"ig yt"
"wp fb";
gap: 20px;
}
.mcms-yt { grid-area: yt; }
.mcms-ig { grid-area: ig; }
.mcms-wp { grid-area: wp; }
.mcms-fb { grid-area: fb; }
.grid-redes img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
display: block;
}
.white {
background-color: rgba(0, 0, 0, 0.808);
background-image: url("img actb.png");
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
width: 100%;
padding: 30px 0;
}
.white h1 {
font-family: "Bebas Neue", sans-serif;
font-size: 60px;
color: white;
}
.grid-campañas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
margin: 0 auto;
justify-content: center;
align-items: start;
padding: 40px 20px;
max-width: 1150px;
}
.itemC {
border: 3px solid rgb(197, 197, 6);
border-radius: 15px;
}
.atzr{
text-align: center;
}
.atzr h2, .atzr2 h2 {
font-family: "Bebas Neue", sans-serif;
font-size: 45px;
color: white;
text-align: center;
}
.atzr2 h2 a{
color: #FFFF;
text-decoration-line: none;
}
.atzr2 h2 a:hover{
color: rgba(244, 252, 144, 0.527);
text-decoration-line: underline;
}
.atzr h3 {
text-align: center;
font-size: 28px;
font-family: "Bebas Neue", sans-serif;
color: white;
}
#info2 p{
color: #FFFF;
}
#info3 p{
color: #FFFF;
}
#info4 p{
color: #FFFF;
}
#info5 p{
color: #FFFF;
}
#info6 p{
color: #FFFF;
}
#info7 p{
color: #FFFF;
}
#info8 p{
color: #FFFF;
}
#info9 p{
color: #FFFF;
}
#info10 p{
color: #FFFF;
}
#info11 p{
color: #FFFF;
}
#info12 p{
color: #FFFF;
}
#info13 p{
color: #FFFF;
}
#info14 p{
color: #FFFF;
}
#info15 p{
color: #FFFF;
}
#info16 p{
color: #FFFF;
}
.hract {
height: 1.5px;
background-color: black;
margin: 10px 0;
}
.atzr2 h3 {
font-family: "Bebas Neue", sans-serif;
font-size: 33px;
padding-left: 6%;
color: #FFFF;
}
.atzr2 h4, .atzr2 h5 {
width: 50%;
padding-left: 6%;
font-family: "Bebas Neue", sans-serif;
font-size: 20px;
color: rgb(184, 181, 181);
}
.atzr2 h3:hover {
color: rgba(244, 252, 144, 0.527);
text-decoration-line: underline;
}
.camp {
margin-bottom: 54px;
position: relative;
}
.imgcamp {
position: absolute;
width: 165px;
border-radius: 15px;
right: 10px;
top: 10px;
}
.btn-testimonios {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(45deg, #c6a700, #dec801);
color: #000;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 8px 20px rgba(255, 217, 0, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-testimonios h2 {
font-family: "Bebas Neue", sans-serif;
font-size: 40px;
color: rgb(54, 54, 54);
margin: 0;
text-decoration-line: none;
}
.btn-testimonios:hover {
transform: scale(1.1);
text-decoration-line:none;
box-shadow: 0 12px 25px rgba(255, 217, 0, 0.6);
background: linear-gradient(45deg, #dbbe1c, #e6cf03);
}
#info1, #info2, #info3, #info4, #info5, #info6, #info7, #info8, #info9, #info10, #info11, #info12, #info13, #info14, #info15, #info16 {
transition: all 0.3s ease;
}
.buton1 a, .buton2 a, .buton3 a, .buton4 a, .buton5 a, .buton6 a, .buton7 a, .buton8 a, .buton9 a, .buton10 a,.buton11 a, .buton12 a, .buton13 a, .buton14 a, .buton15 a, .buton16 a {
color: white;
}
.buton1{
padding: 7px 35px;
border-radius: 15px;
border: 1px solid rgb(202, 200, 200);
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 103px;
}
.buton2{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton3{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton4{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton5{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton6{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton7{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton8{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton9{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton10{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton11{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton12{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton13{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton14{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton15{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton16{
padding: 7px 35px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid rgb(206, 203, 203);
width: 103px;
}
.buton2:hover{
background-color: #f1fac07a;
}
.buton1:hover{
background-color: #f1fac07a;
}
.buton3:hover{
background-color: #f1fac07a;
}
.buton4:hover{
background-color: #f1fac07a;
}
.buton5:hover{
background-color: #f1fac07a;
}
.buton6:hover{
background-color: #f1fac07a;
}
.buton7:hover{
background-color: #f1fac07a;
}
.buton8:hover{
background-color: #f1fac07a;
}
.buton9:hover{
background-color: #f1fac07a;
}
.buton10:hover{
background-color: #f1fac07a;
}
.buton11:hover{
background-color: #f1fac07a;
}
.buton12:hover{
background-color: #f1fac07a;
}
.buton13:hover{
background-color: #f1fac07a;
}
.buton14:hover{
background-color: #f1fac07a;
}
.buton15:hover{
background-color: #f1fac07a;
}
.buton16:hover{
background-color: #f1fac07a;
}
.br-resp{
display: none;
}
.title-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.title-wrap h1 {
font-family: "Bebas Neue", sans-serif;
font-size: 60px;
color: white;
margin: 0;
}
.dot {
width: 26px;
height: 26px;
background-color: rgb(174, 3, 3);
border-radius: 50%;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.video-wrap {
position: relative;
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 0 20px rgba(255,0,0,0.3);
}
.video-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-wrap {
position: relative;
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 0 20px rgba(255,0,0,0.3);
}
/* IFRAME */
.video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* POSTER */
.live-poster {
position: absolute;
inset: 0;
z-index: 2;
background: black;
display: flex;
align-items: center;
justify-content: center;
}
.live-poster img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.poster-text {
font-family: "Bebas Neue", sans-serif;
position: absolute;
text-align: center;
color: white;
}
.poster-text h2 {
font-size: 36px;
margin-bottom: 10px;
}
.poster-text p {
font-size: 18px;
opacity: 0.8;
}
.carousel-container {
width: 100%;
font-family: "Montserrat", sans-serif;
overflow: hidden;
position: relative;
margin: 80px 0;
padding: 20px 0;
}
.carousel-track {
display: flex;
align-items: center;
gap: 30px;
transition: transform 0.5s ease;
padding: 20px;
}
.cardi {
width: 280px;
height: 320px;
border-radius: 18px;
flex-shrink: 0;
position: relative;
overflow: hidden;
transform: scale(0.82);
opacity: 0.6;
transition:
transform 0.4s ease,
opacity 0.4s ease;
}
.cardi.active {
transform: scale(1);
opacity: 1;
z-index: 5;
}
.cardi a {
color: #000;
text-decoration: none;
}
.cardi img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}
/* OVERLAY */
.overlay {
position: absolute;
inset: 0;
display: flex;
align-items: end;
padding: 25px;
color: white;
}
.overlay h3{
font-size: 1.6rem;
font-weight: 700;
}
/* FLECHAS */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
border: none;
color: white;
font-size: 28px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 20;
border-radius: 50%;
transition: 0.3s;
}
.arrow:hover {
background: rgba(0,150,150,0.8);
}
.left {
left: 10px;
}
.right {
right: 10px;
}
/* ✅ Fondo fijo detrás */
.bg-fixed {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
.msl {
width: 80%;
}
.lr {
color: #fff;
font-size: 28px;
font-family: "Poppins Bold", sans-serif;
opacity: 0.8;
text-align: center;
}
main {
margin-top: 0;
}
section {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 50px 0;}
section:nth-of-type(2) {
height: 140vh;
padding: 40px 0;
}
h1 span {
display: inline-block;
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
color: antiquewhite;
font-family: "Bebas Neue", sans-serif;
font-size: 2.5rem;
}
.animate span {
opacity: 1;
transform: translateY(0);
}
.animate-out span {
opacity: 0;
transform: translateY(30px);
}
.txt-span {
width: 67%;
}
.txt-span25 {
width: 90%;
}
h1 span .txt-span25{
font-size: 1rem;
max-width: 70%;
}
span .video-post {
max-width: 40%;
width: 100%;
border-radius: 12px;
}
span video {
max-width: 99%;
width: 100%;
border-radius: 12px;
}
@keyframes cambiarColor {
0% {
border-color: rgb(124, 4, 4);
}
25% {
border-color: rgb(2, 2, 105);
}
50% {
border-color: rgb(59, 26, 71);
}
75% {
border-color: rgb(95, 95, 3);
}
100% {
border-color: rgb(97, 2, 2);
}
}
@media (max-width: 900px) {
main{
display: none;
}
.cumple-box{
width:85%;
padding:20px;
}
.cumple-img{
width:210px;
}
.globos{
font-size:28px;
}
.cal-camp{
display: none;
width: 100%;
margin-left: -1%;
margin-top: 5%;
}
.cal-camp-resp{
display: block;
width: 100%;
margin-left: -1%;
margin-top: 5%;
}
.link{
padding-left: 300px;
top: -2%;
}
.link img{
width: 200px;
}
nav ul li a{
font-size: 16px;
}
nav{
height: 94px;
}
.liyf{
margin-left: 0%;
}
.mms{
background-attachment: scroll;
}
.checkbtm{
display: block;
z-index: 9999;
margin-top: 25px;
margin-left: 22px;
}
.link{
margin-top: -2%;
}
.h1ca{
font-size: 40px;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: black;
top: 70px;
left: -150%;
text-align: center;
transition: all .3s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
#check:checked ~ ul{
left: -7%;
}
.mms .capa{
margin-top: 12%;
margin-left: 0%;
width: 50%;
}
.mms .capa h1{
font-size: 60px;
}
.mcms-clases-content {
grid-template-columns:
1fr
330px;
gap: 35px;
padding:
45px;
}
.mcms-qr-frame {
width: 290px;
height: 290px;
}
.mcms-clases-info h3 {
font-size: 48px;
}
.custom-video .play-button {
top: 45%;
font-size: 40px;
padding: 10px;
border-radius: 70px;
}
.gridyf {
grid-template-areas:
"aviv video"
"eventos video"
"jovenes jovenes";
max-width: 500px;
gap: 10px;
}
.aviv h1 {
text-align: center;
font-size: 1.9rem;
left: 0;
bottom: 20px;
}
.eventos h1 {
text-align: center;
font-size: 1.9rem;
left: 0;
bottom: 20px;
}
.jovenes h1 {
font-size: 2.5rem;
bottom: 20px;
}
.grid-redes {
grid-template-columns: 1fr 2fr;
grid-template-areas:
"ig yt"
"wp fb";
max-width: 600px;
}
.grid-campañas {
grid-template-columns: 1fr;
gap: 30px;
padding: 20px;
text-align: center;
}
.white h1 {
font-size: 35px;
}
.atzr h2, .atzr2 h2 {
font-size: 35px;
}
.atzr h3 {
font-size: 29px;
}
.atzr2 h3 {
font-size: 25px;
}
.atzr2 h4, .atzr2 h5 {
width: 100%;
font-size: 19px;
}
.imgcamp {
position: static;
width: 60%;
margin-top: 10px;
}
.camp {
text-align: center;
}
.btn-testimonios {
padding: 25px 45px;
}
.btn-testimonios h2 {
font-size: 44px;
}
.btn{
font-size: 33px;
padding: 70px 90px;
}
.button-div {
padding: 40px 0;
}
.video-wrap{
max-width: 600px;
}
.title-wrap h1 {
font-size: 35px;
}
.liyf{
margin-top: 4%;
}
.language-selector{
right:15px;
top:12px;
}
.lang-btn{
font-size:13px;
padding:5px 10px;
}
.lang-dropdown{
min-width:130px;
}
.moreno-grid{
grid-template-columns: 1fr;
grid-template-rows: auto;
max-width: 100%;
padding: 15px;
gap: 15px;
}
.card1,
.card2,
.card3,
.card4{
grid-column: auto;
width: 100%;
margin: 0;
height: 280px;
}
}
@media (max-width: 820px) {
.link{
padding-left: 250px;
top: -2%;
}
.link img{
width: 180px;
}
.mms{
background-attachment: scroll;
}
.cannac{
width: 100%;
margin-left: -1%;
}
.mcms_etrv{
width: 100%;
}
.campañas_mcms{
width: 100%;
}
.checkbtm{
display: block;
z-index: 9999;
margin-top: 25px;
margin-left: 22px;
}
.link{
margin-top: -2%;
}
.h1ca{
font-size: 40px;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: black;
top: 70px;
left: -150%;
text-align: center;
transition: all .3s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
#check:checked ~ ul{
left: -7%;
}
.mms .capa{
margin-top: 12%;
margin-left: 0%;
width: 50%;
}
.mms .capa h1{
font-size: 60px;
}
.mms img{
height: 153px;
}
section {
min-height: auto;
padding: 100px 0;
}
section:nth-of-type(2) {
height: auto;
padding: 100px 0;
}
span video {
max-width: 100%;
width: 100%;
}
.footer-container {
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"menu"
"young"
"social";
gap: 40px;
}
.footer-logo img {
width: 180px;
margin-bottom: 25px;
}
.liyf{
margin-top: 4%;
}
.moreno-grid{
padding: 10px;
gap: 15px;
}
.card1,
.card2,
.card3,
.card4{
height: 420px;
border-radius: 20px;
}
.card{
border-radius: 20px;
}
.carousel-container{
margin: 40px 0;
}
.carousel-track{
gap: 15px;
padding: 10px;
}
.cardi{
width: 75vw;
max-width: 260px;
height: 320px;
transform: scale(0.9);
}
.cardi.active{
transform: scale(1);
}
.overlay{
padding: 18px;
}
.overlay h3{
font-size: 1rem;
}
.arrow{
width: 42px;
height: 42px;
font-size: 22px;
}
.left{
left: 5px;
}
.right{
right: 5px;
}
}
@media (max-width: 600px) {
.act1,
.act2,
.act3,.act4,.act5 {
width: 90%;
}
.act1:hover,
.act2:hover,
.act3:hover,
.act4:hover,
.act5:hover {
transform: none;
}
.carousel-container {
max-width: 70%;
}
.cardi{
max-width: 90%;
}
.link{
padding-left: 200px;
top: -2%;
}
.link img{
width: 200px;
}
.mms{
background-attachment: scroll;
}
.mms .capa{
margin-top: 12%;
margin-left: 0%;
width: 50%;
}
.mms .capa h1{
font-size: 60px;
}
.contw{
margin-left: 77%;
}
h1 span {
font-size: 2rem;
padding: 0 1.1rem;
}
.mcms-clases-section {
width:
calc(100% - 25px);
margin:
70px auto;
}
.mcms-clases-header {
margin-bottom: 30px;
}
.mcms-clases-label {
font-size: 8px;
letter-spacing: 2.5px;
}
.mcms-clases-header h2 {
font-size: 48px;
}
.mcms-clases-header p {
font-size: 12px;
}
.mcms-clases-content {
display: flex;
flex-direction: column;
text-align: center;
gap: 35px;
padding:
40px 20px 35px;
}
.mcms-clases-info {
display: flex;
flex-direction: column;
align-items: center;
}
.mcms-number {
font-size: 65px;
margin-bottom: 20px;
}
.mcms-clases-info h3 {
font-size: 45px;
}
.mcms-clases-info p {
max-width: 320px;
font-size: 12px;
}
.mcms-scan {
margin-top: 20px;
}
.mcms-qr-frame {
width: min(
300px,
75vw
);
height: min(
300px,
75vw
);
padding: 14px;
}
.qr-hover-text {
display: none;
margin-top: 17px;
color: #777;
font-size: 17px;
font-weight: 700;
letter-spacing: 3px;
transition:
color .3s ease;
}
.qr-hover-text-celu{
display: block;
margin-top: 17px;
color: #777;
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
transition:
color .3s ease;
}
.mcms-clases-footer {
flex-direction: column;
gap: 8px;
padding:
18px 10px;
font-size: 7px;
}
.mcms-line {
width: 25px;
}
.mcms-clases-button {
display: flex;
width: 100%;
margin-top: 18px;
padding: 16px 20px;
align-items: center;
justify-content: center;
gap: 15px;
background: #d4af37;
color: #000;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
transition:
transform .3s ease,
background .3s ease;
}
.mcms-clases-button span {
font-size: 20px;
}
.mcms-clases-button:hover {
transform:
translateY(-3px);
background: #e4c45b;
}
.btn{
font-size: 33px;
padding: 40px 60px;
}
.liyf{
margin-top: 4%;
}
.moreno-grid{
padding: 10px;
gap: 12px;
}
.card1,
.card2,
.card3,
.card4{
height: 220px;
border-radius: 20px;
}
.card{
border-radius: 20px;
}
.cannac{
margin-left: 9%;
margin-top: 0%;
width: 55%;
height: auto;
}
.cannac img{
width: 100%;
height: auto;
}
.mcms_etrv{
margin-left: 9%;
margin-top: 5%;
width: 55%;
height: auto;
}
.mcms_etrv img{
width: 100%;
height: auto;
}
.campañas_mcms{
margin-left: 9%;
margin-top: 5%;
width: 55%;
height: auto;
}
.campañas_mcms img{
width: 100%;
height: auto;
}
}
@media (max-width: 455px) {
.link{
padding-left: 150px;
margin-top: -1%;
}
.mms{
background-attachment: scroll;
}
.imyf{
margin-left: 7%;
}
.vdyf{
margin-top: -28%;
}
.vdyf video{
width: 150px;
}
.divimg{
margin-top: -29%;
}
.imyf1{
margin-left: 7%;
}
.imyf1 img{
width: 190px;
}
.vdyf1{
margin-left: 7%;
}
.vdyf1 video{
width: 350px;
}
.capyf{
margin-top: -19%;
margin-left: 12%;
}
.capyf1{
margin-top: -21%;
margin-left: 15%;
}
.capyf h1{
font-size: 28px;
}
.capyf1 h1{
font-size: 33px;
}
.capyf2{
margin-top: 0%;
margin-left: -7%;
}
.capyf2 a h1{
font-size: 45px;
}
.yflog img{
width: 400px;
}
.mms .capa{
margin-left: 0%;
margin-top: 12%;
width: 50%;
}
.mms .capa h1{
font-size: 60px;
}
.mms img{
height: 153px;
}
.liyf{
margin-top: 4%;
}
.h3mcms{
font-size: 30px;
}
.mms img{
height: 163px;
}
.vdyf{
margin-left: 56%;
margin-top: -31%;
}
.capyf h1{
font-size: 35px;
}
.capyf{
margin-top: -23%;
margin-left: 9%;
}
.redmms h1{
font-size: 44px;
}
.redmms .red{
font-size: 32px;
}
.cannac{
margin-left: 9%;
margin-top: 0%;
width: 80%;
height: 450px;
}
.cannac img{
width: 100%;
height: auto;
}
.mcms_etrv{
margin-left: 9%;
margin-top: 5%;
width: 80%;
height: 450px;
}
.mcms_etrv img{
width: 100%;
height: 190px;
}
.campañas_mcms{
margin-left: 9%;
margin-top: 5%;
width: 80%;
height: 450px;
}
.campañas_mcms img{
width: 100%;
height: 190px;
}
.contw{
margin-top: 55%;
}
.atzr{
width: 315px;
margin-left: 0%;
}
.atzr h2{
font-size: 28px;
}
.atzr h3{
font-size: 24px;
}
.atzr div #info1{
font-size: 19px;
}
.atzr2{
margin-top: 12%;
width: 315px;
margin-left: 0%;
}
.atzr2 h2{
font-size: 29px;
}
.atzr2 .camconst a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .camconst a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.camconst .contcamp {
margin-top: -59%
}
.camconst .contcamp img{
width: 90%;
}
.atzr2 .campilar a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campilar a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campilar .pilcamp {
margin-top: -59%
}
.campilar .pilcamp img{
width: 85%;
}
.atzr2 .campsj a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campsj a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campsj .sjcamp {
margin-top: -46%
}
.campsj .sjcamp img{
width: 95%;
}
.atzr2 .campur a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campur a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campur .urcamp {
margin-top: -50%
}
.campur .urcamp img{
width: 90%;
height: 97px;
}
.video-wrap{
max-width: 393px;
}
.title-wrap h1 {
font-size: 30px;
}
.cardi{
width: 82vw;
height: 280px;
}
.overlay h3{
font-size: 0.95rem;
}
.arrow{
width: 36px;
height: 36px;
font-size: 18px;
}
}
@media (max-width: 430px) {
.link img{
width: 200px;
margin-left: -3%;
}
.mms{
background-attachment: scroll;
}
.mms .capa{
margin-top: 12%;
margin-left: 0%;
width: 50%;
}
.capa h1{
font-size: 60px;
}
.btn{
font-size: 25px;
padding: 30px 50px;
}
}
@media (max-width: 415px) {
.mms{
background-attachment: scroll;
}
.link{
margin-left: 1% ;
}
.link img{
width: 190px;
margin-left: -23%;
}
.liyf{
margin-top: 7%;
}
.mms .capa{
margin-left: 0%;
margin-top: 12%;
width: 50%;
}
.capa h1{
font-size: 60px;
}
.h3mcms{
font-size: 30px;
}
.mms img{
height: 163px;
}
.vdyf{
margin-left: 56%;
margin-top: -31%;
}
.capyf h1{
font-size: 35px;
}
.capyf{
margin-top: -23%;
margin-left: 9%;
}
.redmms h1{
font-size: 44px;
}
.redmms .red{
font-size: 32px;
}
.cannac{
margin-left: 9%;
margin-top: 0%;
width: 80%;
height: 450px;
}
.cannac img{
width: 100%;
height: 190px;
}
.mcms_etrv{
margin-left: 9%;
margin-top: 5%;
width: 80%;
height: 450px;
}
.mcms_etrv img{
width: 100%;
height: 190px;
}
.campañas_mcms{
margin-left: 9%;
margin-top: 5%;
width: 80%;
height: 450px;
}
.campañas_mcms img{
width: 100%;
height: 190px;
}
.contw{
margin-top: 55%;
}
.atzr{
width: 315px;
margin-left: 0%;
}
.atzr h2{
font-size: 28px;
}
.atzr h3{
font-size: 24px;
}
.atzr div #info1{
font-size: 19px;
}
.atzr2{
margin-top: 12%;
width: 315px;
margin-left: 0%;
}
.atzr2 h2{
font-size: 29px;
}
.atzr2 .camconst a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .camconst a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.camconst .contcamp {
margin-top: -59%
}
.camconst .contcamp img{
width: 90%;
}
.atzr2 .campilar a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campilar a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campilar .pilcamp {
margin-top: -59%
}
.campilar .pilcamp img{
width: 85%;
}
.atzr2 .campsj a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campsj a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campsj .sjcamp {
margin-top: -46%
}
.campsj .sjcamp img{
width: 95%;
}
.atzr2 .campur a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campur a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campur .urcamp {
margin-top: -50%
}
.campur .urcamp img{
width: 90%;
height: 97px;
}
}
@media (max-width: 400px) {
.mms{
background-attachment: scroll;
}
.mms .capa{
margin-top: 12%;
margin-left: 0%;
width: 50%;
}
.mms .capa h1{
font-size: 60px;
}
.link{
padding-left: 140px;
}
}
@media (max-width: 390px) {
.mms{
background-attachment: scroll;
}
.cannac img{
width: 100%;
height: 180px;
}
.mcms_etrv img{
width: 100%;
height: 180px;
}
.campañas_mcms img{
width: 100%;
height: 180px;
}
.imyf1{
margin-top: -37%;
}
.capyf{
position: absolute;
font-family: "Bebas Neue", sans-serif;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-top: -25%;
font-size: 36px;
color:#fdfdfd;
}
.capyf1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-top: -23%;
font-size: 36px;
color:#fdfdfd;
}
.vdyf{
margin-left: 60%;
width: 100%;
}
}
@media (max-width: 383px) {
.mms{
background-attachment: scroll;
}
.link{
padding-left: 130px;
}
.mms .capa h1{
font-size: 60px;
margin-left: -25%;
}
.mms .capa{
margin-left: -12%;
margin-top: 12%;
width: 50%;
}
.capyf{
margin-top: -26%;
}
.vdyf{
margin-left: 59%;
margin-top: -35%;
}
.capyf1{
margin-top: -24%;
}
.vdyf1{
margin-top: -3%;
}
.imyf1{
margin-top: -36%;
}
.contw{
margin-top: 55%;
}
.atzr{
width: 315px;
margin-left: 0%;
}
.atzr h2{
font-size: 28px;
}
.atzr h3{
font-size: 24px;
}
.atzr div #info1{
font-size: 19px;
}
.atzr2{
margin-top: 12%;
width: 315px;
margin-left: 0%;
}
.atzr2 h2{
font-size: 29px;
}
.atzr2 .camconst a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .camconst a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.camconst .contcamp {
margin-top: -59%
}
.camconst .contcamp img{
width: 90%;
}
.atzr2 .campilar a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campilar a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campilar .pilcamp {
margin-top: -59%
}
.campilar .pilcamp img{
width: 85%;
}
.atzr2 .campsj a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campsj a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campsj .sjcamp {
margin-top: -46%
}
.campsj .sjcamp img{
width: 95%;
}
.atzr2 .campur a h4{
font-size: 19px;
width: 150px;
margin-left: -50%;
}
.atzr2 .campur a h5{
font-size: 19px;
width: 150px;
margin-left: -30%;
}
.campur .urcamp {
margin-top: -50%
}
.campur .urcamp img{
width: 90%;
height: 97px;
}
}
@media (max-width: 375px) {
.link{
padding-left: 140px;
margin-top: -2%;
}
.mms{
background-attachment: scroll;
}
.cannac img{
width: 100%;
height: 180px;
}
.mcms_etrv img{
width: 100%;
height: 180px;
}
.campañas_mcms img{
width: 100%;
height: 180px;
}
}
@media (max-width: 360px) {
.link{
padding-left: 120px;
top: 2%;
}
.mms{
background-attachment: scroll;
}
.cannac img{
width: 100%;
height: 180px;
}
.mcms_etrv img{
width: 100%;
height: 180px;
}
.campañas_mcms img{
width: 100%;
height: 180px;
}
}
@media (max-width: 311px) {
.mms{
background-attachment: scroll;
}
.link{
padding-left: 80px;
margin-top: -2%;
}
.mms .capa{
margin-left: -12%;
margin-top: 12%;
width: 50%;
}
.mms .capa h1{
font-size: 60px;
}
.h3mcms{
font-size: 12px;
}
.h1ca{
font-size: 33px;
}
}
@media (min-width: 2560px) {
/* ----------PARTE CAJAS DE PRESENTACIONES---------- */
.cannac,
.mcms_etrv,
.campañas_mcms {
height: 640px;
width: 23%;
}
.cannac img,
.mcms_etrv img,
.campañas_mcms img {
height: 303px;
}
.cannac .h3{ font-family: "Bebas Neue", sans-serif; color: rgb(199, 199, 9); font-size: 40px; margin-top: -2%; } .cannac .h4{ font-family: "Bebas Neue", sans-serif; color: #FFFF; font-size: 25px; margin-top: -1%; }
.mcms_etrv .h3{ font-family: "Bebas Neue", sans-serif; color: rgb(199, 199, 9); font-size: 40px; margin-top: -2%; } .mcms_etrv .h4{ font-family: "Bebas Neue", sans-serif; color: #FFFF; font-size: 25px; }
.campañas_mcms .h3{
font-size: 40px; margin-top: -2%;
}
.campañas_mcms .h4{
font-family: "Bebas Neue", sans-serif;
color: #FFFF;
font-size: 25px;
margin-top: -1%;
}
/* ----------PARTE YOUNG FEST---------- */
.prinyf .imyf{
margin-left: 29%;
margin-top: 4%;
}
.imyf img{
border-radius: 12px;
width: 470px;
opacity: 0.7;
}
.prinyf .capyf{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 32%;
margin-top: -10%;
font-size: 36px;
color:#fdfdfd;
}
.prinyf .vdyf{
margin-left: 49%;
margin-top: -12.5%;
}
.vdyf video{
border-radius: 10px;
width: 367px;
opacity: 0.8;
}
.prinyf .divimg{
margin-top: -13.5%;
margin-left: 18%;
}
.imyf1 img{
border-radius: 12px;
opacity: 0.7;
}
.divimg .capyf1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 15.5%;
margin-top: -10%;
font-size: 40px;
color:#fdfdfd;
}
.prinyf .vdyf1{
margin-left: 29%;
margin-top: 1%;
}
.vdyf1 video {
border-radius: 10px;
width: 85px;
height: 3%;
opacity: 0.8;
}
.prinyf .capyf2 a h1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 39%;
margin-top: -12%;
font-size: 123px;
color:#fdfdfd;
transition: 0.5s;
object-fit: cover;
}
.capyf2 a h1:hover{
transform: scale(1.2);
color: rgb(165, 165, 1);
text-shadow: 2px 2px rgb(205, 207, 133);
}
.yflog{
margin-left: -2%;
}
.yflog img{
width: 650px;
}
/* ----------PARTE DE REDES SOCIALES---------- */
/* ----------PARTE CAMPAÑAS---------- */
.video-wrap {
max-width: 2000px;
height: 70%;
}
.title-wrap h1 {
font-size: 5em;
}
.dot {
width: 46px;
height: 46px;
}
}
@media (min-width: 2000px){
/* ----------PARTE CAJAS DE PRESENTACIONES---------- */
.cannac,
.mcms_etrv,
.campañas_mcms {
height: 640px;
width: 23%;
}
.cannac img,
.mcms_etrv img,
.campañas_mcms img {
height: 303px;
}
.cannac .h3{ font-family: "Bebas Neue", sans-serif; color: rgb(199, 199, 9); font-size: 40px; margin-top: -2%; } .cannac .h4{ font-family: "Bebas Neue", sans-serif; color: #FFFF; font-size: 25px; margin-top: -1%; }
.mcms_etrv .h3{ font-family: "Bebas Neue", sans-serif; color: rgb(199, 199, 9); font-size: 40px; margin-top: -2%; } .mcms_etrv .h4{ font-family: "Bebas Neue", sans-serif; color: #FFFF; font-size: 25px; }
.campañas_mcms .h3{
font-size: 40px; margin-top: -2%;
}
.campañas_mcms .h4{
font-family: "Bebas Neue", sans-serif;
color: #FFFF;
font-size: 25px;
margin-top: -1%;
}
/* ----------PARTE YOUNG FEST---------- */
.prinyf .imyf{
margin-left: 23%;
margin-top: 4%;
}
.imyf img{
border-radius: 12px;
width: 470px;
opacity: 0.7;
}
.prinyf .capyf{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 27%;
margin-top: -10%;
font-size: 36px;
color:#fdfdfd;
}
.prinyf .vdyf{
margin-left: 50%;
margin-top: -16.5%;
}
.vdyf video{
border-radius: 10px;
width: 367px;
opacity: 0.8;
}
.prinyf .divimg{
margin-top: -17.5%;
margin-left: 10%;
}
.imyf1 img{
border-radius: 12px;
opacity: 0.7;
}
.divimg .capyf1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 18%;
margin-top: -12%;
font-size: 40px;
color:#fdfdfd;
}
.prinyf .vdyf1{
margin-left: 22.5%;
margin-top: 1%;
}
.vdyf1 video {
border-radius: 10px;
width: 85px;
height: 3%;
opacity: 0.8;
}
.prinyf .capyf2 a h1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 37.5%;
margin-top: -15%;
font-size: 123px;
color:#fdfdfd;
transition: 0.5s;
object-fit: cover;
}
.capyf2 a h1:hover{
transform: scale(1.2);
color: rgb(165, 165, 1);
text-shadow: 2px 2px rgb(205, 207, 133);
}
.yflog{
margin-left: -2%;
}
.yflog img{
width: 650px;
}
/* ----------PARTE DE REDES SOCIALES---------- */
}
@media (min-width: 1440px) {
.imyf{
margin-left: 14%;
margin-top: 4%;
}
.imyf img{
border-radius: 12px;
width: 470px;
opacity: 0.7;
}
.capyf{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 20%;
margin-top: -13%;
font-size: 36px;
color:#fdfdfd;
}
.vdyf{
margin-left: 50%;
margin-top: -22%;
}
.vdyf video{
border-radius: 10px;
width: 378px;
opacity: 0.8;
}
.divimg{
margin-top: -22%;
}
.imyf1{
margin-left: 14%;
}
.imyf1 img{
border-radius: 12px;
opacity: 0.7;
}
.capyf1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 23%;
margin-top: -15%;
font-size: 40px;
color:#fdfdfd;
}
.vdyf1{
margin-left: 14%;
margin-top: 0%;
}
.vdyf1 video {
border-radius: 10px;
width: 888px;
height: 3%;
opacity: 0.8;
}
.capyf2 a h1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 33%;
margin-top: -23%;
font-size: 123px;
color:#fdfdfd;
transition: 0.5s;
object-fit: cover;
}
.capyf2 a h1:hover{
transform: scale(1.2);
color: rgb(165, 165, 1);
text-shadow: 2px 2px rgb(205, 207, 133);
}
.camconst img{
width: 150px;
border-radius: 15px;
}
}
@media(min-width: 1366px){
.grid-campañas{
max-width: 1250px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.cannac,
.mcms_etrv,
.campañas_mcms {
width: 69%;
margin: 0 auto;
margin-bottom: 2rem;
height: auto;
}
.cannac img,
.mcms_etrv img,
.campañas_mcms img{
width: 100%;
height: 350px;
}
.cannac .h3,
.mcms_etrv .h3,
.campañas_mcms .h3 {
font-size: 43px;
margin-top: .7rem;
text-align: center;
}
.cannac .h4,
.mcms_etrv .h4,
.campañas_mcms .h4 {
font-size: 34px;
margin-top: -1rem;
text-align: center;
}
.boton {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: -2rem;
}
.boton a {
font-size: 30px;
padding: 20px 55px;
}
.mms .capa h1 {
font-size: 80px;
margin-top: 5%;
width: 30%;
}
.imyf{
margin-left: 2%;
margin-top: 4%;
}
.imyf img{
border-radius: 12px;
width: 470px;
opacity: 0.7;
}
.capyf{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 11%;
margin-top: -23%;
font-size: 36px;
color:#fdfdfd;
}
.vdyf{
margin-left: 52%;
margin-top: -31%;
}
.vdyf video{
border-radius: 10px;
width: 600px;
height: 700px;
opacity: 0.8;
}
.divimg{
margin-top: -32%;
}
.imyf1{
margin-left: 3%;
}
.imyf1 img{
border-radius: 12px;
opacity: 0.7;
}
.capyf1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 11%;
margin-top: -19%;
font-size: 40px;
color:#fdfdfd;
}
.vdyf1{
margin-left: 2%;
margin-top: 5%;
}
.vdyf1 video {
border-radius: 10px;
width: 867px;
height: 3%;
opacity: 0.8;
}
.capyf2 a h1{
position: absolute;
font-family: "Bebas Neue", sans-serif;
padding: 24px;
text-shadow: 2px 2px rgb(167, 168, 144);
margin-left: 32%;
margin-top: -25%;
font-size: 123px;
color:#fdfdfd;
transition: 0.5s;
object-fit: cover;
}
.atzr {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.btn-testimonios {
width: 300px;
padding: 20px 40px;
font-size: 24px;
margin-top: 2rem;
}
.btn-testimonios h2 {
font-size: 44px;
}
.atzr2{
margin-top: 2rem;
width: 90%;
margin-left: auto;
margin-right: auto;
height: auto;
}
.atzr2 .camconst a h3 {
font-size: 37px;
}
.atzr2 .camconst a h4{
font-size: 37px;
width: 40%;
margin-left: -50%;
}
.atzr2 .camconst a h5{
font-size: 37px;
width: 40%;
margin-left: -30%;
}
.camconst .contcamp {
margin-top: -33%
}
.camconst .contcamp img{
width: 59%;
height: auto;
}
.atzr2 .campilar a h3 {
font-size: 37px;
}
.atzr2 .campilar a h4{
font-size: 37px;
width: 40%;
margin-left: -50%;
}
.atzr2 .campilar a h5{
font-size: 37px;
width: 40%;
margin-left: -30%;
}
.campilar .pilcamp {
margin-top: -33%
}
.campilar .pilcamp img{
width: 58%;
height: auto;
}
.atzr2 .campsj a h3 {
font-size: 37px;
}
.atzr2 .campsj a h4{
font-size: 37px;
width: 40%;
margin-left: -50%;
}
.atzr2 .campsj a h5{
font-size: 37px;
width: 40%;
margin-left: -30%;
}
.campsj .sjcamp {
margin-top: -31%
}
.campsj .sjcamp img{
width: 75%;
height: auto;
}
.atzr2 .campur a h3 {
font-size: 37px;
}
.atzr2 .campur a h4{
font-size: 37px;
width: 40%;
margin-left: -50%;
}
.atzr2 .campur a h5{
font-size: 37px;
width: 40%;
margin-left: -30%;
}
.campur .urcamp {
margin-top: -26%
}
.campur .urcamp img{
width: 69%;
height: auto;
}
.vdyf video,
.vdyf1 video {
width: 100%;
}
.white {
background-color: rgba(0, 0, 0, 0.808);
background-image: url(img\ actb.png);
background-size: cover;
background-position: center;
background-attachment: fixed; /* ESTA ES LA CLAVE PARA EL PARALLAX */
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.botonw{
width: 222px;
}
.carousel-track{
gap: 20px;
}
.cardi{
width: 240px;
height: 280px;
}
.overlay h3{
font-size: 1.1rem;
}
}
/* =========================================================
REDISEÑO MODERNO DE LA PORTADA MCMS
Importante: no modifica los estilos de nav ni footer.
Tampoco cambia el archivo ni la reproducción del video inicial.
========================================================= */
:root {
--mcms-gold: #d4af37;
--mcms-gold-light: #f4d978;
--mcms-black: #070707;
--mcms-panel: #111111;
--mcms-muted: #b6b6b6;
--mcms-border: rgba(212, 175, 55, .25);
}
body {
color: #f7f7f7;
background: radial-gradient(ellipse at 50% 0%, #191919 0%, #080808 46%, #000 100%);
font-family: "Montserrat", sans-serif;
}
body > center { display: block; }
/* VIDEO DE PRESENTACIÓN: misma fuente, autoplay, loop y mute */
body > center > .vid:first-of-type {
width: 100%;
max-height: min(78vh, 760px);
padding: 0;
margin: 0 auto;
overflow: hidden;
background: #000;
border-radius: 0;
box-shadow: 0 22px 60px rgba(0,0,0,.32);
}
body > center > .vid:first-of-type video {
display: block;
width: 100%;
max-height: min(78vh, 760px);
object-fit: cover;
object-position: center;
}
/* Carrusel de secciones */
.carousel-container {
width: min(1440px, calc(100% - 48px));
margin: 54px auto 64px;
padding: 20px 0;
overflow: hidden;
isolation: isolate;
}
.carousel-track {
align-items: stretch;
gap: 22px;
padding: 24px 12px;
}
.cardi {
width: clamp(230px, 23vw, 310px);
height: clamp(285px, 28vw, 365px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
background: #111;
box-shadow: 0 16px 36px rgba(0,0,0,.32);
transform: scale(.92);
opacity: .72;
}
.cardi.active { transform: scale(1); opacity: 1; }
.cardi img {
clip-path: none;
transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.cardi:hover img { transform: scale(1.06); }
.cardi a { display: block; width: 100%; height: 100%; color: #fff; }
.cardi .overlay {
align-items: flex-end;
padding: 26px 22px;
background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.9) 100%);
}
.overlay h3 {
max-width: 100%;
font-size: clamp(1.15rem, 1.8vw, 1.55rem);
line-height: 1.15;
letter-spacing: .02em;
text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.arrow {
width: 48px;
height: 48px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(8,8,8,.78);
backdrop-filter: blur(10px);
}
.arrow:hover { background: var(--mcms-gold); color: #111; }
/* Videos secundarios */
.vid2, .vid3, .vid4, .custom-video {
width: min(100% - 40px, 1040px);
margin: 56px auto;
padding: 0;
border: 1px solid rgba(255,255,255,.1);
border-radius: 22px;
box-shadow: 0 22px 55px rgba(0,0,0,.42);
background: #000;
}
.vid2 video, .vid3 video, .vid4 video, .custom-video video {
width: 100%;
height: auto;
display: block;
border-radius: inherit;
}
.custom-video .play-button {
width: 76px;
height: 76px;
display: grid;
place-items: center;
padding: 0 0 0 5px;
border: 1px solid rgba(255,255,255,.4);
background: rgba(0,0,0,.65);
backdrop-filter: blur(8px);
font-size: 30px;
}
.custom-video .play-button:hover { background: var(--mcms-gold); color: #111; transform: translate(-50%,-50%) scale(1.06); }
/* Banner “Los campos están listos” */
.mms {
min-height: 440px;
height: clamp(360px, 43vw, 560px);
margin-top: 70px;
background-position: center 42%;
background-attachment: scroll;
}
.mms::after {
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.28) 65%, rgba(0,0,0,.58)), linear-gradient(0deg, #000 0%, transparent 38%);
}
.mms .capa {
width: min(1200px, calc(100% - 48px));
height: 100%;
left: 50%;
top: 0;
margin: 0;
padding: 0 12px;
transform: translateX(-50%);
display: flex;
align-items: center;
text-align: left;
}
.mms .capa h1 {
width: min(760px, 100%);
margin: 0;
font-size: clamp(2.8rem, 7vw, 6.3rem);
line-height: .98;
letter-spacing: .025em;
text-wrap: balance;
text-shadow: 0 8px 32px rgba(0,0,0,.6);
}
/* Titulares de secciones */
.noticias-titulo {
padding: 76px 20px 28px;
background: transparent;
}
.h1not, .h3mcms, .h1ca {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
line-height: 1;
letter-spacing: .035em;
text-wrap: balance;
}
.h1not { font-size: clamp(2.8rem, 5.5vw, 4.5rem); }
.h3mcms { max-width: 1100px; margin: 72px auto 24px; padding: 0 22px; font-size: clamp(2.3rem, 5vw, 4.5rem); }
.h1ca { margin: 72px 20px 28px; padding: 0; font-size: clamp(2.4rem, 5vw, 4.2rem); }
/* Noticias: tarjetas uniformes y actuales */
.noticias {
width: min(1320px, calc(100% - 36px));
margin: 0 auto 42px;
padding: 12px 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.act1, .act2, .act3, .act4, .act5 {
width: 100%;
min-width: 0;
aspect-ratio: 4 / 5;
border: 1px solid var(--mcms-border);
border-radius: 18px;
box-shadow: 0 16px 35px rgba(0,0,0,.3);
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.act1 a, .act2 a, .act3 a, .act4 a, .act5 a { display: block; width: 100%; height: 100%; }
.act1 a img, .act2 a img, .act3 a img, .act4 a img, .act5 a img {
display: block;
object-fit: cover;
object-position: center;
}
.act1:hover, .act2:hover, .act3:hover, .act4:hover, .act5:hover {
transform: translateY(-6px);
border-color: rgba(212,175,55,.7);
box-shadow: 0 22px 42px rgba(0,0,0,.42);
}
/* Descripción del ministerio y acordeones */
.h3mcms { color: #f7f7f7; }
details {
width: min(1100px, calc(100% - 40px));
margin: 22px auto 50px;
padding: 22px 26px;
color: var(--mcms-gold-light);
font-family: "Montserrat", sans-serif;
font-size: 1rem;
line-height: 1.7;
background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
border: 1px solid rgba(212,175,55,.2);
border-radius: 16px;
}
details summary {
font-size: 1rem;
font-weight: 700;
letter-spacing: .04em;
list-style-position: inside;
}
details[open] summary { margin-bottom: 16px; }
details p {
width: min(900px, 100%);
margin: 12px auto;
color: #d1d1d1;
font-family: "Montserrat", sans-serif;
font-size: clamp(.95rem, 1.4vw, 1.08rem);
line-height: 1.9;
}
/* Tarjetas de contenido ministerial */
.cmc {
width: min(1320px, calc(100% - 36px));
margin: 30px auto 70px;
gap: 24px;
padding: 0;
align-items: stretch;
}
.cannac, .mcms_etrv, .campañas_mcms {
flex: 1 1 280px;
width: auto;
min-width: 0;
height: auto;
min-height: 440px;
padding: 0 0 30px;
overflow: hidden;
border: 1px solid rgba(212,175,55,.38);
border-radius: 20px;
background: linear-gradient(160deg, #171717, #080808 78%);
box-shadow: 0 18px 42px rgba(0,0,0,.28);
transition: transform .3s ease, border-color .3s ease;
}
.cannac:hover, .mcms_etrv:hover, .campañas_mcms:hover { transform: translateY(-5px); border-color: var(--mcms-gold); }
.cannac img, .mcms_etrv img, .campañas_mcms img { height: 220px; border-radius: 0; object-fit: cover; }
.cannac .h3, .mcms_etrv .h3, .campañas_mcms .h3 { margin: 18px 12px 12px; color: var(--mcms-gold-light); font-size: 1.55rem; }
.cannac .h4, .mcms_etrv .h4, .campañas_mcms .h4 { margin: 8px 18px; color: #e5e5e5; font-size: 1rem; line-height: 1.5; }
.boton { margin: 28px 0 8px; }
.boton a { display: inline-block; padding: 12px 34px; border: 1px solid var(--mcms-gold); border-radius: 999px; background: var(--mcms-gold); color: #111; font-size: 1rem; font-weight: 700; }
.boton a:hover { background: transparent; color: var(--mcms-gold-light); }
/* YoungFest */
.yflog { margin: 48px auto 20px; }
.yflog img { width: min(620px, 88%); max-width: 100%; }
.gridyf {
width: min(1100px, calc(100% - 36px));
margin: 24px auto 70px;
padding: 0;
gap: 16px;
}
.gridyf .item { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: #111; }
.gridyf .item img, .gridyf .item video { display: block; transition: transform .5s ease; }
.gridyf .item:hover img, .gridyf .item:hover video { transform: scale(1.035); }
.gridyf .item h1 { text-shadow: 0 4px 22px rgba(0,0,0,.85); }
/* Redes */
.redmms { width: min(1000px, calc(100% - 36px)); padding: 50px 0 70px; }
.redmms h1 { font-size: clamp(2.2rem, 4.5vw, 3.7rem); line-height: 1.05; }
.redmms .red { color: var(--mcms-gold); font-size: clamp(1.8rem, 3vw, 2.5rem); }
.grid-redes { gap: 16px; }
.grid-redes > div { min-height: 150px; overflow: hidden; border: 1px solid rgba(212,175,55,.22); border-radius: 16px; background: #111; }
.grid-redes img { transition: transform .4s ease, filter .4s ease; }
.grid-redes a:hover img { transform: scale(1.035); filter: brightness(1.08); }
/* La sección .white y sus campañas conservan los estilos originales. */
/* Botón flotante de WhatsApp: mantiene el enlace y el recurso original */
.contw { right: 16px; bottom: 16px; padding: 0; margin: 0; }
.botonw { width: clamp(54px, 6vw, 76px); filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
/* Accesibilidad: reduce animaciones si el visitante lo prefiere */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Responsive */
@media (max-width: 900px) {
.carousel-container { width: calc(100% - 24px); margin: 32px auto 42px; }
.carousel-track { gap: 14px; }
.cardi { width: clamp(220px, 54vw, 300px); height: clamp(280px, 68vw, 350px); }
.mms { min-height: 330px; height: 48vw; }
.mms .capa { width: calc(100% - 36px); }
.mms .capa h1 { font-size: clamp(2.6rem, 9vw, 4.8rem); }
.noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.act1, .act2, .act3, .act4, .act5 { min-width: 0; }
.gridyf { gap: 10px; }
}
@media (max-width: 600px) {
body > center > .vid:first-of-type, body > center > .vid:first-of-type video { max-height: 55vh; }
.carousel-container { width: 100%; padding: 8px 0; margin: 28px auto 36px; }
.carousel-track { gap: 10px; padding: 16px 8px; }
.cardi { width: 76vw; max-width: 290px; height: 330px; transform: scale(.96); opacity: .9; }
.cardi.active { transform: scale(1); }
.arrow { width: 40px; height: 40px; font-size: 21px; }
.vid2, .vid3, .vid4, .custom-video { width: calc(100% - 24px); margin: 32px auto; border-radius: 14px; }
.custom-video .play-button { width: 60px; height: 60px; font-size: 24px; }
.mms { min-height: 300px; height: 74vw; background-position: 58% center; }
.mms .capa { width: calc(100% - 28px); padding: 0; }
.mms .capa h1 { font-size: clamp(2.25rem, 11vw, 3.6rem); }
.noticias-titulo { padding: 50px 12px 18px; }
.noticias { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 16px; }
.act1, .act2, .act3, .act4, .act5 { width: min(100%, 420px); margin: 0 auto; aspect-ratio: 4 / 4.8; }
.h3mcms { margin-top: 48px; }
details { width: calc(100% - 28px); padding: 18px; margin: 18px auto 36px; }
.cmc { width: calc(100% - 28px); gap: 16px; margin-bottom: 48px; }
.cannac, .mcms_etrv, .campañas_mcms { flex-basis: 100%; min-height: 0; padding-bottom: 26px; }
.cannac img, .mcms_etrv img, .campañas_mcms img { height: 205px; }
.h1ca { margin-top: 48px; }
.gridyf { width: calc(100% - 24px); grid-template-areas: "aviv" "eventos" "video" "jovenes"; grid-template-columns: 1fr; }
.gridyf .item { min-height: 220px; }
.gridyf .item video, .gridyf .item img { min-height: 220px; }
.gridyf .jovenes h1 { font-size: clamp(3rem, 12vw, 5rem); }
.redmms { width: calc(100% - 28px); padding: 34px 0 48px; }
.grid-redes { grid-template-columns: 1fr; grid-template-areas: "yt" "ig" "wp" "fb"; gap: 12px; }
.grid-redes > div { min-height: 0; aspect-ratio: 16 / 9; }
.contw { right: 10px; bottom: 10px; }
.botonw { width: 54px; }
}
/* =====================================================
REDES SOCIALES: RESPONSIVE ORIGINAL EN CELULARES
Mantiene la distribución 2x2 de la referencia:
Instagram | YouTube
WhatsApp | Facebook
===================================================== */
@media (max-width: 600px) {
.redmms {
width: calc(100% - 28px);
max-width: 900px;
padding: 34px 0 48px;
margin-left: auto;
margin-right: auto;
}
.grid-redes {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
grid-template-areas:
"ig yt"
"wp fb";
gap: 12px;
width: 100%;
align-items: stretch;
}
.grid-redes .mcms-ig { grid-area: ig; }
.grid-redes .mcms-yt { grid-area: yt; }
.grid-redes .mcms-wp { grid-area: wp; }
.grid-redes .mcms-fb { grid-area: fb; }
.grid-redes > div {
min-width: 0;
min-height: 0;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.grid-redes > div > a {
display: block;
width: 100%;
height: 100%;
}
.grid-redes img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
}