* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
body {
font-family: 'Arial', sans-serif;
overflow-x: hidden;
min-width: 1440px;
margin: 2px;
}
/* Contenedor principal fijo */
.fixed-container {
width: 1440px;
margin: 0 auto;
position: relative;
}
/* ####################################### aqui empieza el navbar ######################################### */
header {
display: flex;
align-items: center;
padding: 10px 20px;
background: white;
width: 1440px;
margin: 0 auto;
position: sticky;
top: 0;
z-index: 10;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo img {
height: 60px;
}
nav {
flex-grow: 1;
display: flex;
justify-content: center;
}
.nav-links {
display: flex;
gap: 30px;
background: white;
border-radius: 25px;
padding: 15px 30px;
box-shadow: 0 10px 25px rgb(193, 193, 193);
}
.nav-links a {
text-decoration: none;
color: black;
font-weight: bold;
white-space: nowrap;
}
.menu-toggle {
display: none;
font-size: 28px;
background: none;
border: none;
cursor: pointer;
}
/* #####################################################aqui empieza el cuadro principal ############################################################# */
section {
padding: 4rem 0;
}
.padding-container {
padding: 4rem 15%;
}
/* encabezado */
.ruta-section {
position: relative;
width: 1440px;
height: 556px;
overflow: hidden;
background: white;
margin: 0 auto;
z-index: 0;
}
/* Posiciones exactas de los círculos */
.c1 {
top: 100px;
left: 50px;
position: absolute;
width: 170px;
height: 170px;
background-image: url('../imagenes_principio/landingpage/carrusel_Introduccion/imagen.png');
background-size: cover;
border-radius: 50%;
border: 7px solid rgb(237, 50, 55);
z-index: 2;
cursor: pointer;
pointer-events: auto;
background-position: -65px;
}
.c1:hover {
transform: scale(1.7);
}
.c2 {
top: 165px;
left: 420px;
position: absolute;
width: 100px;
height: 100px;
background-image: url('../imagenes_principio/PCMAXICA/2.png');
background-size: cover;
border-radius: 50%;
border: 6px solid rgb(74, 172, 182);
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
.c2:hover {
transform: scale(1.7);
}
.c3 {
top: 260px;
left: 1230px;
position: absolute;
width: 120px;
height: 120px;
background-image: url('../imagenes_principio/quienes somos/quienes_somos.jpg');
background-size: cover;
border-radius: 50%;
border: 6px solid rgb(74, 172, 182);
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
.c3:hover {
transform: scale(1.7);
}
.c4 {
top: 255px;
left: 720px;
position: absolute;
width: 110px;
height: 110px;
background-image: url('../imagenes_principio/ENDLESSOS/endlessOs.png');
background-size: cover;
border-radius: 50%;
border: 7px solid rgb(237, 50, 55);
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
.c4:hover {
transform: scale(1.7);
}
.c5 {
top: 95px;
left: 930px;
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border: 7px solid rgb(237, 50, 55);
overflow: hidden;
/* Importante para recortar el video dentro del círculo */
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
/* Estilo para el video */
.c5 video {
width: 100%;
height: 100%;
object-fit: cover;
/* Hace que el video se recorte pero llene el círculo */
object-position: center;
display: block;
}
.c5:hover {
transform: scale(1.7);
}
.c6 {
top: 425px;
left: 15px;
position: absolute;
width: 145px;
height: 145px;
border-radius: 50%;
border: 10px solid rgb(74, 172, 182);
overflow: hidden;
/* Importante para recortar el video dentro del círculo */
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
/* Estilo para el video */
.c6 video {
width: 105%;
object-fit: cover;
/* Hace que el video se recorte pero llene el círculo */
object-position: center;
display: block;
}
.c6:hover {
transform: scale(1.7);
}
.c7 {
top: 480px;
left: 1105px;
position: absolute;
width: 125px;
height: 125px;
background-image: url('../imagenes_principio/TESTIMONIOS Y ANTECEDENTES/aniversario.jpg');
background-size: cover;
border-radius: 50%;
border: 7px solid rgb(237, 50, 55);
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
.c7:hover {
transform: scale(1.7);
}
.c8 {
top: 500px;
left: 876px;
position: absolute;
width: 95px;
height: 95px;
background-image: url('../imagenes_principio/RecursosDocentes/tutorMaxi.PNG');
background-size: cover;
border-radius: 50%;
border: 7px solid rgb(74, 172, 182);
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
.c8:hover {
transform: scale(1.7);
}
/* ####################### primer linea animada #################### */
/* SVG */
.ruta-svg {
position: relative;
top: -145px;
left: 0;
width: 100%;
height: auto;
z-index: 2;
background-image: radial-gradient(#000 3px, transparent 3px);
background-size: 150px 150px;
}
#line {
stroke-dasharray: 4000;
stroke-dashoffset: 4000;
animation: draw 8s linear forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 10;
}
}
/* Iconos de parada */
.icono-parada {
position: absolute;
width: 60px;
height: 60px;
background: rgb(237, 50, 55);
;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.icono-parada img {
width: 20px;
}
/* Texto - posición exacta */
.texto {
position: absolute;
top: 300px;
left: 250px;
z-index: 2;
cursor: pointer;
pointer-events: auto;
}
.texto h1 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 10px;
}
.texto p {
font-size: 2rem;
color: #333;
margin-bottom: 20px;
font: sans-serif;
z-index: 2;
}
.boton {
position: absolute;
padding: 12px 30px;
background: linear-gradient(to right, rgb(72, 172, 182), rgb(237, 50, 55));
color: white;
border: none;
border-radius: 30px;
font-size: 2rem;
z-index: 2;
cursor: pointer;
pointer-events: auto;
width: 310px;
}
/* ccs de iconos */
.material-symbols-outlined {
color: white;
}
/* ######################## Textos que aparecen al hacer scroll ########################## */
/* Da aire antes del bloque completo */
.scroll-text {
margin-top: 20px auto !important;;
}
/* Espacio entre párrafos */
.scroll-text p {
margin-bottom: 18px;
line-height: 1.6;
}
/* Espacio extra antes del primer párrafo */
.scroll-text p:first-of-type {
margin-top: 9px;
}
/* ########################primer carrusle########################## */
/* Estilos del carrusel fade */
.carrusel-fade {
top: 100px;
width: 70%;
max-width: 70%;
height: 520px;
margin: 80px auto;
position: relative;
overflow: hidden;
border-radius: 40px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.slide-fade {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.slide-fade.active {
position: relative;
opacity: 1;
}
.slide-fade img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.indicadores {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 2;
}
.indicador {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: 0.3s ease;
}
.indicador.active {
background: white;
}
/* ####################### Línea animada con scroll ####################### */
.scroll-line-container {
position: absolute;
width: 100%;
height: 10000px;
margin: 17px 0;
}
#ruta {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
#ruta-fondo {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -2;
filter: drop-shadow(0 8px 30px rgba(90, 90, 90, 0.35));
}
#linea-scroll,
#linea-scroll-2 {
stroke-width: 38;
fill: none;
}
#linea-fondo,
#linea-fondo-2 {
stroke-width: 38;
fill: none;
}
.scroll-text {
position: absolute;
right: 199px;
width: 619px;
padding: 60px;
opacity: 0;
transform: translateY(50px);
transition: opacity 0.5s ease, transform 0.5s ease;
z-index: 2;
top: -92px;
}
.scroll-text.visible {
opacity: 1;
transform: translateY(0);
}
.text-section {
margin-bottom: 5px;
}
/* ############################### esto es para la grafica ###########################*/
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(1deg);
}
}
.container {
max-width: 1300px;
margin: 0 auto;
width: 100%;
position: relative;
}
.header-section {
text-align: center;
margin-bottom: clamp(30px, 5vw, 50px);
padding: clamp(20px, 4vw, 40px);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 25px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: slideDown 1s ease-out;
}
.header-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, rgb(255, 0, 234), rgb(128, 0, 255), rgb(245, 25, 54), rgb(0, 204, 255));
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
@keyframes slideDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.chart-section {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(25px);
border-radius: 30px;
padding: clamp(5px, 4vw, 40px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
animation: slideUp 1s ease-out 0.3s both;
position: relative;
overflow: hidden;
}
.chart-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes gradientShift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.chart-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(15px, 3vw, 25px);
width: 100%;
margin: 0 auto;
max-width: 1100px;
}
.labels {
display: flex;
flex-direction: column;
justify-content: space-around;
width: clamp(140px, 18vw, 180px);
flex-shrink: 0;
padding-top: clamp(10px, 7vw, 70px);
height: clamp(320px, 45vw, 400px);
}
.labels div {
display: flex;
align-items: center;
font-size: clamp(8px, 2vw, 16px);
margin-bottom: clamp(10px, 3.5vw, 30px);
gap: clamp(8px, 1.5vw, 12px);
white-space: nowrap;
padding: clamp(8px, 1.5vw, 12px) clamp(8px, 2vw, 16px);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 15px;
border: 1px solid rgba(102, 126, 234, 0.2);
transition: all 0.3s ease;
font-weight: 500;
animation: fadeInLeft 0.8s ease-out;
animation-delay: calc(var(--delay) * 0.1s);
}
.labels div:nth-child(1) {
--delay: 1;
}
.labels div:nth-child(2) {
--delay: 2;
}
.labels div:nth-child(3) {
--delay: 3;
}
.labels div:nth-child(4) {
--delay: 4;
}
@keyframes fadeInLeft {
from {
transform: translateX(-30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.labels div:hover {
transform: translateX(5px) scale(1.02);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.labels i {
width: clamp(15px, 3vw, 18px);
height: clamp(15px, 3vw, 18px);
text-align: center;
color: #667eea;
font-size: clamp(10px, 2vw, 12px);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.labels div:hover i {
transform: scale(1.2) rotate(5deg);
}
.chart-container {
position: relative;
width: 100%;
max-width: clamp(450px, 65vw, 850px);
height: clamp(320px, 45vw, 400px);
flex-grow: 1;
background: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: clamp(15px, 2.5vw, 20px);
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.6);
animation: zoomIn 1s ease-out 0.6s both;
}
@keyframes zoomIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
canvas {
width: 100% !important;
height: 110% !important;
border-radius: 15px;
}
/* Floating stats */
.stats-overlay {
position: absolute;
top: clamp(5px, 2vw, 10px);
right: clamp(5px, 2vw, 10px);
background: linear-gradient(135deg, #D700DA, #006AdA);
color: white;
padding: clamp(5px, 1.5vw, 8px) clamp(8px, 2vw, 10px);
border-radius: 12px;
font-size: clamp(10px, 1.5vw, 12px);
font-weight: 600;
backdrop-filter: blur(5px);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* ############################ este es para la card a lado de la grafica ################################# */
.floating-card1 {
width: 480px;
height: 665px;
padding: 1px;
content: '';
border-radius: 24px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 5px 15px rgba(0, 0, 0, 0.07);
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
.floating-card1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
background: linear-gradient(90deg, rgb(255, 0, 234), rgb(128, 0, 255), rgb(245, 25, 54), rgb(0, 204, 255));
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
.floating-card1:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 10px 30px rgba(0, 0, 0, 0.1);
animation: gradientShift 3s ease infinite;
}
.floating-card1::after {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: -8px;
bottom: -8px;
background: #ffffff;
border-radius: 24px;
z-index: -1;
transition: all 0.3s ease;
}
.floating-card1:hover::after {
transform: translateY(2px);
opacity: 0.8;
}
.striped-element-bottom1 {
position: absolute;
bottom: 50px;
left: -25px;
width: 90px;
height: 90px;
background: repeating-linear-gradient(45deg,
#ed323875,
#ed323875 3px,
transparent 3px,
transparent 8px);
border-radius: 50%;
opacity: 0.8;
}
@keyframes gradientShift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.card-subtitle1 {
color: rgb(0, 0, 0);
font-size: 15px;
line-height: 1.6;
}
.card-content1 {
position: relative;
z-index: 2;
padding: 80px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
/* ################################################################# */
.parent-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
align-items: start;
padding: 20px;
}
.div1,
.div2 {
width: 100%;
}
/* Solo una tarjeta del lado derecho */
.datos-column {
display: flex;
justify-content: center;
align-items: center;
}
.content-box.resumen {
background-color: #fdfdfd;
padding: 30px 25px;
font-size: clamp(16px, 2vw, 18px);
font-weight: 500;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
text-align: center;
color: #333;
max-width: 100%;
width: 100%;
}
.content-box.resumen p {
margin: 0 0 15px;
line-height: 1.6;
}
.content-box.resumen p:last-child {
margin-bottom: 0;
}
/* ########################################### este es para las citas ######################################## */
.citas {
padding: 40px 20px;
font-family: 'Arial', sans-serif;
}
.diagram-grid {
max-width: 900px;
margin: 0 auto;
position: relative;
display: grid;
grid-template-columns: 1fr 100px 1fr;
grid-template-rows: repeat(3, 150px);
gap: 50px;
align-items: center;
}
.content-box.animate {
opacity: 1;
transform: translateY(0);
}
.circle.animate {
opacity: 1;
transform: scale(1);
}
@keyframes float {
0%,
100% {
transform: scale(1) translateY(0px);
}
50% {
transform: scale(1) translateY(-8px);
}
}
/* Fila 1: Computadoras (izquierda) + círculo */
.box1 {
grid-column: 1;
grid-row: 1;
justify-self: end;
max-width: 330px;
text-align: justify;
}
.circle1 {
width: 120px;
height: 120px;
background-image: url('../img/citas/cita2.png');
object-fit: cover;
background-repeat: no-repeat;
position: center;
border-radius: 50%;
justify-self: center;
opacity: 0;
transform: scale(0.5);
transition: all 0.6s ease;
animation: float 3s ease-in-out infinite;
grid-column: 2;
grid-row: 1;
animation-delay: 0s;
}
/* Fila 2: círculo + Internet (derecha) */
.circle2 {
width: 120px;
height: 120px;
background-image: url('../img/citas/steve.png');
object-fit: cover;
background-repeat: no-repeat;
position: center;
border-radius: 50%;
justify-self: center;
opacity: 0;
transform: scale(0.5);
transition: all 0.6s ease;
animation: float 3s ease-in-out infinite;
grid-column: 2;
grid-row: 2;
animation-delay: 0.3s;
}
.box2 {
grid-column: 3;
grid-row: 2;
justify-self: start;
max-width: 330px;
text-align: justify;
}
/* Fila 3: Cita Samuel (izquierda) + círculo */
.box3 {
grid-column: 1;
grid-row: 3;
justify-self: end;
max-width: 330px;
font-size: 11px;
text-align: justify;
}
.circle3 {
width: 120px;
height: 120px;
background-image: url('../img/citas/ford.png');
object-fit: cover;
background-repeat: no-repeat;
position: center;
border-radius: 50%;
justify-self: center;
opacity: 0;
transform: scale(0.5);
transition: all 0.6s ease;
animation: float 3s ease-in-out infinite;
grid-column: 2;
grid-row: 3;
animation-delay: 0.6s;
}
/* Fila 4: círculo + Cita Jobs (derecha) */
.circle4 {
grid-column: 2;
grid-row: 4;
animation-delay: 0.9s;
}
.box4 {
grid-column: 3;
grid-row: 4;
justify-self: start;
max-width: 320px;
font-size: 11px;
text-align: justify;
}
/* Fila 5: Cita Ford (izquierda) + círculo */
.box5 {
grid-column: 1;
grid-row: 5;
justify-self: end;
max-width: 300px;
font-size: 12px;
}
.circle5 {
grid-column: 2;
grid-row: 5;
animation-delay: 1.2s;
}
.author {
font-size: 9px;
margin-top: 8px;
opacity: 0.8;
}
.burbuja {
position: relative;
background-color: #e52521;
color: white;
display: inline-block;
padding: 5px 30px;
border-radius: 40px;
max-width: 500px;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.burbuja::after {
content: '';
position: absolute;
bottom: 80px;
left: 90%;
transform: translateX(-100%);
border-width: 75px 20px 0;
border-style: solid;
border-color: #e52521 transparent transparent transparent;
transform: rotate(-45deg);
z-index: -2;
}
.burbuja1 {
position: relative;
background-color: #4aacb6;
color: white;
display: inline-block;
padding: 5px 30px;
border-radius: 40px;
max-width: 500px;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.burbuja1::after {
content: '';
position: absolute;
bottom: 80px;
left: -1%;
transform: translateX(-100%);
border-width: 65px 22px 0;
border-style: solid;
border-color: #4aacb6 transparent transparent transparent;
transform: rotate(-50deg);
z-index: -2;
}
.burbuja2 {
position: relative;
background-color: rgb(129, 63, 187);
color: white;
display: inline-block;
padding: 5px 30px;
border-radius: 40px;
max-width: 500px;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.burbuja2::after {
content: '';
position: absolute;
bottom: 35px;
left: 92%;
transform: translateX(-100%);
border-width: 55px 20px 0;
border-style: solid;
border-color: rgb(129, 63, 187) transparent transparent transparent;
transform: rotate(-45deg);
z-index: -2;
}
.texto-frase {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.comillas {
font-size: 20px;
margin: 0;
}
.comillas.cierre {
margin-top: 10px;
}
.autor {
font-size: 14px;
color: #333;
text-align: center;
}
.autor strong {
font-size: 14px;
font-weight: bold;
}
.autor span {
display: block;
margin-top: 5px;
color: #777;
}
/* ################################## titulo quienes somos ########################################## */
.flotante-quienes-somos {
font-family: Arial, sans-serif;
background-color: #fff;
font-size: 28px;
font-weight: 700;
color: #ed3237;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
margin: 0 auto;
padding: 35px 400px;
line-height: 1.3;
position: relative;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
animation: flotar 3s ease-in-out infinite alternate;
}
@keyframes flotar {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15px);
}
}
.flotante-quienes-somos::after {
content: "";
display: block;
width: 80px;
height: 3px;
background-color: #ed3237;
margin: 15px auto 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
animation: escalar 3s ease-in-out infinite alternate;
}
@keyframes escalar {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
/* Animaciones */
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
/* Contenedor del carrusel */
.contenedorCarrusel {
position: relative;
width: 70%;
max-width: 70%;
margin: 0px auto;
overflow: hidden;
background-color: white;
}
/* Contenedor de las cards */
.carruselCard {
display: flex;
transition: transform 0.5s ease-in-out;
height: 500px;
/* Ajustado para incluir espacio de los indicatorsCard */
}
/* Estilos comunes para las cards */
.card {
min-width: 100%;
height: 500px;
position: relative;
overflow: hidden;
border-radius: 40px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin-right: 5px;
}
.card-title {
color: #1f2937;
font-size: 24px;
font-weight: bold;
margin-bottom: 16px;
}
.card-text {
font-size: 15px;
line-height: 1.7;
text-align: justify;
margin-bottom: 15px;
flex-grow: 1;
}
/* Elementos decorativos comunes */
.dona {
position: absolute;
top: 290px;
right: -20px;
width: 285px;
height: 285px;
transform: rotate(160deg);
}
.circulo-rayas {
position: absolute;
top: -65px;
left: -85px;
width: 200px;
height: 200px;
background: repeating-linear-gradient(45deg,
rgb(237, 50, 56),
rgb(237, 50, 56) 3px,
transparent 3px,
transparent 8px);
border-radius: 50%;
}
.circulo-rayas1 {
position: absolute;
bottom: -70px;
left: 250px;
width: 155px;
height: 155px;
background: repeating-linear-gradient(45deg,
#4aacb6,
#4aacb6 3px,
transparent 3px,
transparent 8px);
border-radius: 50%;
}
.circulos {
position: absolute;
top: -120px;
right: 155px;
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
z-index: -1;
background:
radial-gradient(circle, transparent 15px, #4aacb6 15px, #4aacb6 17px, transparent 17px),
radial-gradient(circle, transparent 35px, #4aacb6 35px, #4aacb6 37px, transparent 37px),
radial-gradient(circle, transparent 55px, #4aacb6 55px, #4aacb6 57px, transparent 57px),
radial-gradient(circle, transparent 75px, #4aacb6 75px, #4aacb6 77px, transparent 77px),
radial-gradient(circle, transparent 95px, #4aacb6 95px, #4aacb6 97px, transparent 97px),
radial-gradient(circle, transparent 115px, #4aacb6 115px, #4aacb6 117px, transparent 117px),
radial-gradient(circle, transparent 135px, #4aacb6 135px, #4aacb6 137px, transparent 137px);
}
.grid-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
align-items: center;
}
.imagen-grid {
width: 100%;
height: 350px;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.imagen-grid img {
height: auto;
width: auto;
object-fit: cover;
z-index: 2;
}
.text-grid {
padding: 55px;
}
.text-grid h2 {
margin: 0 0 16px 0;
font-size: 2rem;
color: #333;
font-weight: 600;
}
.text-grid p {
margin: 0;
font-size: 1.1rem;
line-height: 1.6;
color: #000000;
text-align: justify;
z-index: 2;
}
/* Estilos específicos para la segunda card */
.card .dona2 {
position: absolute;
top: 305px;
left: -30px;
width: 250px;
height: 250px;
transform: rotate(230deg);
}
.card .triangulo2 {
position: absolute;
top: 310px;
right: -20px;
width: 210px;
height: 210px;
transform: rotate(-90deg);
z-index: -1;
}
.card .circulo-rayas2 {
position: absolute;
top: -95px;
left: 185px;
width: 200px;
height: 200px;
background: repeating-linear-gradient(45deg,
rgb(237, 50, 56),
rgb(237, 50, 56) 3px,
transparent 3px,
transparent 8px);
border-radius: 50%;
}
.card .circulo-rayas12 {
position: absolute;
bottom: -50px;
left: -65px;
width: 160px;
height: 160px;
background: repeating-linear-gradient(45deg,
#4aacb6,
#4aacb6 3px,
transparent 3px,
transparent 8px);
border-radius: 50%;
}
.card .circulos2 {
position: absolute;
top: -120px;
right: -45px;
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
z-index: -2;
background:
radial-gradient(circle, transparent 15px, #4aacb6 15px, #4aacb6 17px, transparent 17px),
radial-gradient(circle, transparent 35px, #4aacb6 35px, #4aacb6 37px, transparent 37px),
radial-gradient(circle, transparent 55px, #4aacb6 55px, #4aacb6 57px, transparent 57px),
radial-gradient(circle, transparent 75px, #4aacb6 75px, #4aacb6 77px, transparent 77px),
radial-gradient(circle, transparent 95px, #4aacb6 95px, #4aacb6 97px, transparent 97px),
radial-gradient(circle, transparent 115px, #4aacb6 115px, #4aacb6 117px, transparent 117px),
radial-gradient(circle, transparent 135px, #4aacb6 135px, #4aacb6 137px, transparent 137px);
}
/* indicatorsCard del carrusel */
.indicatorsCard {
display: flex;
justify-content: center;
margin-top: 20px;
gap: 10px;
}
.indicadorCard {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transition: background-color 0.3s;
}
.indicadorCard.activo {
background-color: #e1372a;
}
/* Flechas de navegación */
.flecha-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
}
.flecha-nav button {
pointer-events: all;
background: rgba(255, 255, 255, 0.7);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background 0.3s;
}
.flecha-nav button:hover {
background: rgba(255, 255, 255, 0.9);
}
.flecha-nav button svg {
width: 20px;
height: 20px;
}
/* ############################## este es para el pc maxica ##################################*/
.pc {
font-family: 'Arial', sans-serif;
background-color: #f8fafc;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
box-sizing: border-box;
width: 70%;
max-width: 70%;
margin: 0 auto;
position: relative;
border-radius: 55px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 80px 0;
overflow: hidden;
z-index: 0;
}
.containerPC {
width: 100%;
max-width: 1200px;
display: flex;
flex-direction: column;
gap: 40px;
}
.donaPC {
position: absolute;
bottom: -45px;
right: -20px;
width: 285px;
height: 285px;
transform: rotate(160deg);
z-index: -1;
}
/* Layout horizontal */
.horizontal-section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
gap: 60px;
flex-wrap: wrap;
}
/* Contenedor de texto */
.text-content {
flex: 1;
min-width: 300px;
max-width: 486px;
}
.text-content h2 {
color: #e1372a;
font-size: 2.2rem;
margin-bottom: 25px;
font-weight: 600;
}
.text-content p {
text-align: justify;
color: #333;
line-height: 1.7;
margin-bottom: 20px;
font-size: 1.1rem;
}
/* Círculo de imagen */
.image-circle {
width: 100%;
height: 100%;
width: 320px;
height: 320px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 15px 30px rgba(237, 50, 55, 0.3);
transition: all 0.3s ease;
}
.image-click-fullscreen{
position: relative;
}
.image-circle img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s ease;
}
.modal-on-hover {
top: 20%;
background-color: rgba(74, 172, 182, 0.95);
padding: 0px;
border-radius: 2px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
z-index: 99;
width: 700px;
max-width: 90vw;
opacity: 0;
position: fixed;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 30;
}
.modal-on-hover img {
width: 100%;
height: auto;
border-radius: 5px;
transform: scale(0.95);
}
/* CÍRCULO */
.image-circle {
position: relative;
z-index: 10;
}
.image-click-fullscreen {
position: relative; /* referencia para absolute */
overflow: visible !important; /* CLAVE */
}
.image-click-fullscreen:hover .modal-on-hover {
opacity: 1;
pointer-events: auto;
}
.image-click-fullscreen:hover .image-circle {
opacity: 0;
}
/* ############################################ este es para el widget de whatsapp ########################################### */
/* Estilos base del widget */
.whatsapp-widget {
position: fixed;
bottom: 30px;
right: 30px;
width: 70px;
height: 70px;
background: linear-gradient(135deg, #25D366, #128C7E);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 34px;
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.3);
cursor: pointer;
z-index: 9999;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
user-select: none;
border: 2px solid white;
overflow: hidden;
}
/* Efecto hover */
.whatsapp-widget:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
background: linear-gradient(135deg, #128C7E, #25D366);
}
/* Efecto al hacer clic */
.whatsapp-widget:active {
cursor: grabbing;
transform: scale(0.95);
}
/* Tooltip flotante */
.whatsapp-widget .tooltip {
position: absolute;
right: 85px;
background: white;
color: #075E54;
padding: 10px 15px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
white-space: nowrap;
transform: translateX(10px);
}
.whatsapp-widget:hover .tooltip {
opacity: 1;
transform: translateX(0);
}
/* Efecto de onda al hacer clic */
.whatsapp-widget::after {
content: '';
position: absolute;
width: 70%;
height: 70%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
z-index: -1;
transform: scale(0);
opacity: 0;
transition: all 0.6s ease;
}
.whatsapp-widget.clicked::after {
transform: scale(2.5);
opacity: 0.7;
}
/* Efecto de partículas */
.whatsapp-widget .particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
/* Burbuja decorativa */
.whatsapp-widget::before {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 25px;
height: 25px;
background-color: white;
border-radius: 50%;
opacity: 0.3;
}
/* ######################################################################### este es para endless os ################################################################### */
.contenedor-cards-verticales {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
padding: 10px;
}
.card-vertical {
display: flex;
flex-direction: column;
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 325px;
min-height: 600px;
padding: 20px;
box-sizing: border-box;
}
.card-vertical-recu {
display: flex;
flex-direction: column;
border-radius: 16px;
width: 360px;
min-height: 620px;
padding: 20px;
box-sizing: border-box;
}
/*###################################################################################################################################################*/
.endless-content {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
gap: 53px;
width: 100%;
flex-wrap: wrap;
}
.endless img {
width: 200px;
max-width: 100%;
border-radius: 20px;
object-fit: cover;
z-index: 2;
}
.imgend:hover {
transform: scale(1.3);
}
.texto-Endless {
position: relative;
text-align: justify;
}
.textoEndless {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.textoEndless.activeEndless {
opacity: 1;
position: relative;
}
.textoEndless h2 {
font-size: 1.8rem;
margin: 0 0 10px;
color: #1f2937;
}
.textoEndless p {
font-family: 'Arial', sans-serif;
color: #000000;
margin: 0;
}
/*##################################################################################################################################################################*/
.beneficios-content {
display: grid;
align-items: center;
justify-content: center;
gap: 100px;
width: 100%;
flex-wrap: wrap;
margin-top: 10px;
}
.beneficios img {
width: 20%;
max-width: 20%;
border-radius: 20px;
object-fit: cover;
}
.texto-Beneficios {
position: relative;
text-align: justify;
height: 180px;
overflow: hidden;
}
.textoBeneficios-wrapper {
position: absolute;
top: 0;
left: 0;
transition: transform 1s ease-in-out;
will-change: transform;
}
.textoBeneficios {
width: 100%;
padding: 10px 0;
}
.textoBeneficios h2 {
font-size: 1.8rem;
margin: 0 0 10px;
color: #1f2937;
}
.textoBeneficios p {
font-family: 'Arial', sans-serif;
color: #000000;
margin: 0;
}
.viñeta-texto {
display: flex;
align-items: start;
gap: 12px;
}
.viñeta {
width: 12px;
height: 12px;
margin-top: 6px;
background-color: #4aacb6;
border-radius: 50%;
flex-shrink: 0;
}
/*###########################################################################################################################################################*/
.apps-content {
display: flex;
align-items: center;
justify-content: center;
gap: 70px;
width: 100%;
flex-wrap: wrap;
position: relative;
}
.imagenApps {
position: absolute;
top: 0;
left: 0;
width: 200px;
border-radius: 20px;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.imagenApps.active {
opacity: 1;
position: relative;
}
.texto-apps {
text-align: justify;
z-index: 1;
}
.texto-apps h2 {
font-size: 1.5rem;
margin: 0 0 10px;
color: #1f2937;
}
.texto-apps p {
font-family: 'Arial', sans-serif;
color: #000000;
margin: 0;
}
/*##################################################################################################################################################################*/
:root {
--cardRecur-perspective: 700px;
--cardRecur-z-offset: 12px;
--cardRecur-y-offset: 7px;
--cardRecur-max-z-index: 100;
--cardRecur-swap-duration: 0.3s;
--swipe-x: 0px;
--swipe-rotate: 0deg;
}
.cardRecur-stack {
display: grid;
grid-auto-flow: column;
place-content: center;
user-select: none;
touch-action: none;
transform-style: preserve-3d;
right: 7px;
}
.cardRecur {
cursor: grab;
background-color: #ffffff;
display: flex;
place-self: flex-start;
position: absolute;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
border: 1px solid #fff;
border-radius: 0.75rem;
z-index: calc(var(--cardRecur-max-z-index) - var(--i));
transform: perspective(var(--cardRecur-perspective)) translateZ(calc(-1 * var(--cardRecur-z-offset) * var(--i))) translateY(calc(var(--cardRecur-y-offset) * var(--i))) translateX(var(--swipe-x, 0px)) rotateY(var(--swipe-rotate, 0deg));
transition: transform var(--cardRecur-swap-duration) ease;
will-change: transform;
backface-visibility: hidden;
box-shadow: 0 2px 2px #00000061;
flex-direction: column;
gap: 2rem;
padding: 1rem;
}
.cardRecur:active {
cursor: grabbing;
}
.cardRecur-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.cardRecur-content img {
border-radius: 0.75rem;
pointer-events: none;
user-select: none;
top: 10px;
}
.cardRecur-content .cardRecur-title {
font-size: 1.6rem;
letter-spacing: -1px;
color: #293457;
text-align: justify;
}
.cardRecur-content p {
font-family: 'Arial', sans-serif;
color: #000000;
text-align: justify;
}
.imgcard {
width: 250px;
/* antes era 150px */
max-width: 100%;
/* para que no se salga de la tarjeta */
margin: 0 auto;
/* centrarlas */
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
color: #293457;
margin-bottom: 10px;
text-align: center;
}
.card-title-recur {
font-size: 1.5rem;
font-weight: bold;
color: #293457;
margin-bottom: 2px;
text-align: center;
position: relative;
}
/* ############################################ aqui es para el video #########3####################################### */
.video {
width: 70%;
max-width: 70%;
height: 520px;
margin: 80px auto;
position: relative;
overflow: hidden;
border-radius: 40px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* ######################################### este es para la parte de contenido ######################################### */
.scrollContenido {
position: relative;
max-width: 1300px;
margin: 0 auto;
padding: 100px 20px;
z-index: -1;
top: -34px;
}
#lineaSvgContenido {
stroke-dasharray: 2200;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 100%;
z-index: -2;
}
#lineaFondoContenido {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 100%;
z-index: -2;
/* Para que quede detrás de la línea roja */
}
.itemContenido {
display: flex;
align-items: center;
gap: 20px;
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease, transform 1s ease;
margin: 70px 0;
position: relative;
z-index: 1;
}
.itemContenido.visibleContenido {
opacity: 1;
transform: translateY(0);
}
.itemContenido.izquierda {
flex-direction: row-reverse;
text-align: right;
}
#iconoContenido {
width: 80px;
height: 80px;
background-color: #4aacb6;
border-radius: 50%;
}
.itemContenido p {
max-width: 420px;
font-size: 1.1rem;
font-weight: bold;
}
/* ########################################### esta es para la seccion de Servicios Exclusivos ######################################### */
.exclusivo {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
box-sizing: border-box;
width: 70%;
max-width: 70%;
margin: 0 auto;
position: relative;
border-radius: 55px;
overflow: hidden;
gap: 80px;
z-index: 0;
}
.exclusivo-content {
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
width: 100%;
flex-wrap: wrap;
}
.texto-exclusivo {
width: 40%;
max-width: 500px;
}
.item-exclusivo {
margin-bottom: 15px;
border-radius: 10px;
overflow: hidden;
box-shadow: 8px 5px 9px rgba(0, 0, 0, 0.5);
}
.header-acordeon-exlusivo {
background-color: #e1372a;
color: white;
cursor: pointer;
padding: 15px 20px;
border: none;
width: 100%;
text-align: left;
font-size: 1rem;
font-weight: bold;
transition: background-color 0.3s;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-acordeon-exlusivo:hover {
background-color: #c72f23;
}
.accordion-icon {
width: 20px;
height: 20px;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
font-family: serif;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.item-exclusivo.active .accordion-icon {
transform: rotate(180deg);
background-color: rgba(255, 255, 255, 0.2);
}
.contenindo-acordeon-exclusivo {
max-height: 0;
overflow: hidden;
background-color: #f1f1f1;
transition: max-height 0.4s ease, padding 0.3s ease;
padding: 0 20px;
}
.contenindo-acordeon-exclusivo p {
margin: 15px 0;
color: #333;
}
.item-exclusivo.active .contenindo-acordeon-exclusivo {
max-height: 500px;
padding: 15px 20px;
text-align: justify;
}
/* ###### esta es la decoracion #####*/
.trianguloExclusivo {
position: absolute;
top: -7px;
right: -7px;
width: 190px;
height: 190px;
transform: rotate(-180deg);
z-index: -1;
}
.circulo-rayasExclusivo {
position: absolute;
bottom: -10px;
left: -55px;
width: 255px;
height: 255px;
background: repeating-linear-gradient(45deg,
#4aacb6,
#4aacb6 3px,
transparent 3px,
transparent 8px);
border-radius: 50%;
z-index: -1;
}
.donaExclusivo {
position: absolute;
bottom: -55px;
right: -10px;
width: 280px;
height: 280px;
transform: rotate(180deg);
z-index: -2;
}
.circulosExclusivos {
position: absolute;
top: -60px;
left: 40px;
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
z-index: -2;
background:
radial-gradient(circle, transparent 15px, #ed3237 15px, #ed3237 17px, transparent 17px),
radial-gradient(circle, transparent 35px, #ed3237 35px, #ed3237 37px, transparent 37px),
radial-gradient(circle, transparent 55px, #ed3237 55px, #ed3237 57px, transparent 57px),
radial-gradient(circle, transparent 75px, #ed3237 75px, #ed3237 77px, transparent 77px),
radial-gradient(circle, transparent 95px, #ed3237 95px, #ed3237 97px, transparent 97px),
radial-gradient(circle, transparent 115px, #ed3237 115px, #ed3237 117px, transparent 117px),
radial-gradient(circle, transparent 135px, #ed3237 135px, #ed3237 137px, transparent 137px);
}
/* ############################################ este es para el apartado de antecedentes ############################################### */
.centro {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 30px 0;
overflow: hidden;
}
.contenedorAntecedentes {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 30px;
width: 100%;
max-width: 1200px;
padding: 0 20px;
}
.card-antecedentes {
background: white;
border-radius: 50px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
height: 320px;
transition: all 0.3s ease;
overflow: hidden;
}
.card-antecedentes:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.card-antecedentes-left {
grid-column: 1;
grid-row: 2;
align-self: center;
}
.card-antecedentes-top {
grid-column: 2;
grid-row: 1;
}
.card-antecedentes-right {
grid-column: 3;
grid-row: 2;
align-self: center;
}
.card-antecedentes-bottom {
grid-column: 2;
grid-row: 3;
}
.icon-contenedorAntecedentes {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 32px;
color: white;
transition: all 0.3s ease;
}
.icono-verdeAntecedentes {
background: #4aacb6;
}
.number-antecedentes {
font-size: 40px;
font-weight: bold;
color: #000000;
margin-bottom: 15px;
line-height: 1;
}
.text-antececentes {
font-size: 16px;
color: #212f3d;
line-height: 1.5;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
}
.text-large-antecedentes {
font-size: 18px;
text-align: center;
}
/* FLOTANTE ANTECEDENTES - Completamente responsivo */
.flotante-antecedentes {
font-family: Arial, sans-serif;
font-size: clamp(24px, 4vw, 32px);
/* Tamaño responsivo */
font-weight: 700;
color: #ed3237;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
margin: 0 auto;
padding: clamp(40px, 8vw, 100px) clamp(10px, 2vw, 20px);
/* Padding responsivo */
line-height: 1.3;
position: relative;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
animation: flotar 3s ease-in-out infinite alternate;
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
@keyframes flotar {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15px);
}
}
.flotante-antecedentes::after {
content: "";
display: block;
width: clamp(60px, 10vw, 80px);
/* Ancho responsivo */
height: 3px;
background-color: #ed3237;
margin: 15px auto 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
animation: escalar 3s ease-in-out infinite alternate;
}
@keyframes escalar {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
/* Decoración de las tarjetas de antecedentes */
.ciruclo-card-antecedentes {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
left: 45px;
bottom: -30px;
background-color: #ed3237;
}
.ciruclo-card-antecedentes1 {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
right: -15px;
top: 85px;
background-color: #ed3237;
}
.ciruclo-card-antecedentes1-1 {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
left: -25px;
top: 20px;
background-color: #ed3237;
}
.ciruclo-card-antecedentes2 {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
right: 85px;
bottom: -30px;
background-color: #ed3237;
}
.ciruclo-card-antecedentes2-1 {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
right: -5px;
top: -5px;
background-color: #ed3237;
}
.ciruclo-card-antecedentes2-2 {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
left: -25px;
top: 90px;
background-color: #ed3237;
}
/* ######################################################### este es para el carrusel de Testimonios ####################################### */
.carruseltestimonios {
position: relative;
width: 70%;
max-width: 70%;
height: 520px;
margin: 10px auto;
overflow: hidden;
border-radius: 55px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.slideTestimonios {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease;
display: flex;
align-items: center;
justify-content: center;
}
.slideTestimonios.activotest {
opacity: 1;
position: relative;
}
.slideTestimonios video,
.slideTestimonios img {
width: 100%;
height: 100%;
object-fit: contain;
/* Cambiado de cover a contain */
border-radius: 20px;
/* Fondo negro para mejor visual de videos */
}
.slideTestimonios img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.indicadoresTest {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 3;
}
.indicadortest {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background 0.3s ease;
}
.indicadortest.activotest {
background: white;
}
/* FlechaTestimonioss */
.flechaTestimonios {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: none;
font-size: 15px;
cursor: pointer;
padding: 10px;
z-index: 3;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.flechaTestimonios:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.flechaTestimonios.izquierdaTestimonios {
left: 15px;
}
.flechaTestimonios.derechaTestimonios {
right: 15px;
}
/* ################################################################################################### ESTE ES PARA LA SECCION DE CONTACTO ######################################################################### */
/* Contenedor del carrusel */
.carousel-container-sucursal {
position: relative;
width: 78%;
max-width: 78%;
margin: 0 auto;
overflow: hidden;
}
.carousel-wrapperSucursal {
display: flex;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-slideSucursal {
min-width: 100%;
flex-shrink: 0;
}
.carousel-container-sucursal {
width: 96% !important; /* antes implícito */
max-width: 460px !important; /* más cómoda */
margin-left: auto !important;
margin-right: auto !important;
}
.card-dir {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1.5px solid rgba(0, 0, 0, 0.5);
width: 90%;
max-width: 90%;
display: flex;
flex-direction: column;
box-sizing: border-box;
margin: 0 auto;
position: relative;
border-radius: 55px;
}
.card-dir:hover {
transform: translateY(-5px);
}
.card-dir-header {
background: linear-gradient(135deg, #4aacb6 0%, #2d7d87 100%);
color: white;
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.card-dir-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
.card-dir-header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.card-dir-header p {
font-size: 16px;
opacity: 0.9;
position: relative;
z-index: 1;
}
.card-dir-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 40px;
}
.map-dir1 {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.map-dir1:hover {
transform: scale(1.05);
}
.map-dir1 iframe {
width: 100%;
height: 450px;
border: 0;
}
.info-dir {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: center;
}
.info-dir-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: linear-gradient(135deg, #fefefe 0%, #f1f5f9 100%);
border-radius: 16px;
transition: all 0.3s ease;
border: 1px solid rgba(148, 163, 184, 0.5);
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.info-dir-item:hover {
background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
transform: translateX(8px);
}
.info-dir-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ed3237 0%, #7c3aed 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.info-dir-item:hover .info-dir-icon {
transform: rotate(15deg) scale(1.1);
}
.info-dir-label {
font-weight: 600;
color: #1f2937;
margin-bottom: 5px;
}
.info-dir-value {
color: #6b7280;
line-height: 1.5;
}
.info-dir-value a {
color: #4f46e5;
text-decoration: none;
transition: color 0.3s ease;
}
.info-dir-value a:hover {
color: #3730a3;
}
.schedule-highlight-dir {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #166534;
padding: 5px 10px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
margin-top: 5px;
display: inline-block;
}
/* Controles del carrusel */
.carousel-controlsSucursal {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.carousel-dotSucursal {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-dotSucursal.activeSucursal {
background: white;
transform: scale(1.2);
}
.carousel-navSucursal {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: #4f46e5;
transition: all 0.3s ease;
z-index: 10;
}
.carousel-navSucursal:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.carousel-navSucursal.prevSucursal {
left: 20px;
}
.carousel-navSucursal.nextSucursal {
right: 20px;
}
/* Animación de entrada */
.carousel-slideSucursal {
opacity: 0;
animation: fadeInSlide 0.8s ease-out forwards;
}
.carousel-slideSucursal.activeSucursal {
opacity: 1;
}
@keyframes fadeInSlide {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ###################################################### este es para la parte de formulario ############################################################### */
.formulario-contacto {
background: white;
border-radius: 20px;
overflow: hidden;
max-width: 70%;
width: 70%;
display: flex;
min-height: 500px;
animation: float 6s ease-in-out infinite;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
margin: 0 auto;
z-index: 0;
position: relative;
}
.contact-info-contacto {
background: #4aacb6;
color: white;
padding: 40px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.contact-info-contacto::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.contact-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 20px;
}
.contact-text h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-text p {
font-size: 16px;
opacity: 0.9;
}
.whatsapp-btn-formulario {
background: #25D366;
color: white;
padding: 12px 20px;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin: 0px auto;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-decoration: none;
justify-content: center;
}
.whatsapp-btn-formulario:hover {
background: #20b358;
transform: translateY(-2px);
}
.social-links {
display: flex;
gap: 25px;
margin-top: 20px;
margin: 20px 70px;
display: flex;
padding: 12px 20px;
align-items: center;
justify-content: center;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-link.facebook {
background: #1877F2;
}
.social-link.instagram {
background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.form-section {
background: #ed3237;
padding: 40px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-group-contaco {
margin-bottom: 25px;
}
.form-group-contaco label {
display: block;
color: white;
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.form-group-contaco input,
.form-group-contaco textarea {
width: 100%;
padding: 15px;
border: none;
border-radius: 25px;
font-size: 16px;
background: white;
transition: all 0.3s ease;
outline: none;
}
.form-group-contaco input:focus,
.form-group-contaco textarea:focus {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.form-group-contaco textarea {
height: 120px;
resize: vertical;
border-radius: 15px;
}
.submit-btn-formulario {
background: #2d3748;
color: white;
padding: 15px 90px;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.submit-btn-formulario:hover {
background: #1a202c;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.submit-btn-formulario:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@keyframes float {
0%,
100% {
transform: scale(1) translateY(5px);
}
50% {
transform: scale(1) translateY(-20px);
}
}
/* ###################################################################### este es para el formulario ############################################################3 */
.modal {
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow-y: auto;
}
.modal-content {
background: white;
margin: 2rem auto;
padding: 2rem;
border-radius: 12px;
width: 90%;
max-width: 800px;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.close {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 2rem;
color: #666;
cursor: pointer;
transition: color 0.2s;
}
.close:hover {
color: #333;
}
.hidden {
display: none;
}
/* Estilos del formulario */
#formRegistro {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#formRegistro h2 {
margin: 0;
color: #2c3e50;
font-size: 1.8rem;
text-align: center;
}
#formRegistro h3 {
margin: 1rem 0 0.5rem;
color: #2c3e50;
font-size: 1.2rem;
}
#formRegistro h4 {
margin: 1rem 0 0.5rem;
color: #2c3e50;
font-size: 1rem;
}
.radio-group {
display: flex;
gap: 1.5rem;
margin-bottom: 1rem;
}
.radio-group label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.input-group {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.input-row {
display: flex;
gap: 1rem;
}
input,
select {
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
transition: border 0.2s;
}
input:focus,
select:focus {
outline: none;
border-color: #3498db;
}
.botonform {
background-color: #3498db;
color: white;
padding: 1rem;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
margin-top: 1rem;
}
.botonform:hover {
background-color: #2980b9;
}
.botonform:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
.number-inputs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.number-inputs label {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.error-message {
color: #e74c3c;
font-size: 0.9rem;
margin-top: 0.3rem;
display: none;
}
input:invalid,
select:invalid {
border-color: #e74c3c;
}
.logos-container {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10px;
}
.logo {
max-width: 200px;
height: auto;
}
/* Estilos para el modal de éxito */
.modal-exito {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-contenido-exito {
background-color: #fefefe;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 500px;
text-align: center;
position: relative;
}
.modal-contenido-exito h2 {
color: #4CAF50;
margin-bottom: 15px;
}
.modal-contenido-exito p {
margin-bottom: 20px;
line-height: 1.5;
}
.cerrar-modal-exito {
color: #aaa;
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.cerrar-modal-exito:hover {
color: #000;
}
.boton-aceptar {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.boton-aceptar:hover {
background-color: #45a049;
}
/* Quitar el estilo de validación por defecto */
input:invalid,
select:invalid {
box-shadow: none;
border-color: #ccc;
}
input:focus:invalid,
select:focus:invalid {
box-shadow: none;
border-color: #4d90fe;
}
.pc-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.9);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
}
.pc-lightbox.active {
display: flex;
}
.pc-lightbox img {
max-width: 95%;
max-height: 90%;
object-fit: contain;
}
.pc-lightbox-close {
position: absolute;
top: 20px;
right: 25px;
font-size: 32px;
color: #fff;
cursor: pointer;
}
@media (max-width: 768px) {
.flotante-quienes-somos{
width: 100%;
padding: 10% 10%;
font-size: 2rem;
}
/* 1️⃣ matar reservas de altura */
.containerPC,
.horizontal-section {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
}
/* 2️⃣ imagen fuera del flujo */
.image-circle {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
top: 0;
}
.image-hover-container{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
top: 0;
}
.circulo-rayas1{
z-index: -39;
}
.text-content {
margin-top: 8px !important;
padding: 0 !important;
}
.text-content p {
margin-top: 0 !important;
margin-right: 15px;
font-size: 1rem;
margin-bottom: 0 !important;
line-height: 1.55;
padding-left: 14px;
padding-right: 14px;
margin-bottom: 16px;
z-index: 40;
text-align: justify;
}
.pc{
padding-top: 12px !important;
padding-bottom: 16px !important;
width: 100%;
max-width: 90%;
}
.card-vertical-recu,
.card-vertical {
width: 100%;
max-width: 100%;
}
.cardRecur{
width: 100%;
}
.cardRecur-stack {
right: 0px;
pointer-events: none;
}
.exclusivo {
padding: 2% 2%;
width: 90%;
max-width: 100%;
}
.texto-exclusivo {
width: 90%;
max-width: 95%;
}
.accordion-icon {
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 1rem;
}
.tituloacordeon{
width: 215px;
}
body {
min-width: 0;
width: 100%;
overflow-x: hidden;
}
header,
.fixed-container,
.ruta-section,
.formulario-contacto,
.carruseltestimonios,
.video {
width: 100%;
max-width: 100%;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8, .modal-on-hover {
display: none !important;
}
.pc *,
.containerPC *,
.horizontal-section * {
max-width: 100%;
box-sizing: border-box;
word-break: break-word;
}
.horizontal-section {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.containerPC {
width: 90%;
padding-top: 0 !important;
margin-top: 0 !important;
}
nav {
display: none;
}
.menu-toggle {
display: block;
}
.texto {
position: static;
text-align: justify;
padding: 20px;
}
.boton {
position: static;
margin: 20px auto;
}
.donaPC {
display: none !important;
}
}
/* ############################### MEDIA QUERIES PARA ANTECEDENTES ######################################################################### */
@media (max-width: 768px) {
/* CONTENEDOR PRINCIPAL */
.contenedorAntecedentes {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 20px;
width: 100%;
max-width: 95%;
margin: 0 auto;
padding: 0 10px;
}
/* TÍTULO ANTECEDENTES */
.flotante-antecedentes {
grid-column: 1;
grid-row: 1;
font-size: 2rem;
padding: 20px 10px;
margin-bottom: 15px;
}
/* TARJETAS – MISMO DISEÑO, MÁS ANCHAS */
.card-antecedentes {
width: 100%;
max-width: 100%;
padding: 25px;
border-radius: 30px;
height: auto;
min-height: 220px;
}
/* REORDENAR SOLO EN MÓVIL */
.card-antecedentes-left {
grid-column: 1;
grid-row: 2;
}
.card-antecedentes-top {
grid-column: 1;
grid-row: 3;
}
.card-antecedentes-right {
grid-column: 1;
grid-row: 4;
}
.card-antecedentes-bottom {
grid-column: 1;
grid-row: 5;
}
/* ICONOS */
.icon-contenedorAntecedentes {
width: 65px;
height: 65px;
margin-bottom: 15px;
}
/* NÚMEROS */
.number-antecedentes {
font-size: 34px;
}
/* TEXTO */
.text-antececentes {
font-size: 14px;
line-height: 1.4;
}
/* CÍRCULOS DECORATIVOS – NO ESTORBAN */
.ciruclo-card-antecedentes,
.ciruclo-card-antecedentes1,
.ciruclo-card-antecedentes1-1,
.ciruclo-card-antecedentes2,
.ciruclo-card-antecedentes2-1,
.ciruclo-card-antecedentes2-2 {
width: 40px;
height: 40px;
}
}
/* ################################################################################################### MEDIA QUERIES PARA TESTIMONIOS ######################################################################### */
@media (max-width: 768px) {
.carruseltestimonios {
width: 92%;
aspect-ratio: 4 / 5; /* CLAVE para verticales */
border-radius: 30px;
}
.slideTestimonios img,
.slideTestimonios video {
object-fit: contain;
background-color: #FFF; /* para que no se vea feo el espacio */
border-radius: 20px;
}
.flechaTestimonios {
font-size: 13px;
padding: 8px;
}
.indicadoresTest {
bottom: 10px;
}
#testimonios {
font-size: 32px;
margin: 30px auto 15px;
padding: 0 10px;
}
}
/* ################################################################################################### MEDIA QUERIES PARA SECCION DAVID DA VINCI ######################################################################### */
@media (max-width: 768px) {
/* ===== TÍTULO DAVID DA VINCI ===== */
#video {
width: 100%;
max-width: 100%;
margin: 25px auto 15px;
padding: 0 15px;
text-align: center;
font-size: 32px;
font-weight: 700;
position: relative;
left: 0;
top: 0;
transform: none;
}
/* Línea roja debajo del título */
#video::after {
content: "";
display: block;
width: 70px;
height: 3px;
background-color: #ed3237;
margin: 10px auto 0;
}
/* ===== VIDEO ===== */
.video {
width: 100%;
max-width: 100%;
height: 330px; /* más grande en móvil */
margin: 0 auto 35px;
border-radius: 25px;
overflow: hidden;
}
.video video,
.video iframe {
width: 100%;
height: 100%;
object-fit: cover; /* se ve grande aunque corte */
}
/* ================= RESETEO TOTAL DE ALINEACIÓN ================= */
.itemContenido,
.itemContenido.izquierda {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* ================= ICONOS SIEMPRE CENTRADOS ================= */
#iconoContenido {
margin: 0 auto 12px;
flex-shrink: 0;
}
/* ================= TEXTO BIEN CENTRADO ================= */
.itemContenido p {
margin: 0 auto;
text-align: center;
}
/* ================= QUITAR CUALQUIER OFFSET HEREDADO ================= */
.itemContenido.izquierda,
.itemContenido.derecha {
transform: none !important;
left: auto !important;
right: auto !important;
}
.itemContenido:first-of-type {
margin-top: -120px;
}
.itemContenido:last-of-type {
margin-bottom: -130px !important;
}
}
/* ############################### MEDIA QUERIES PARA SECCION DE LETRAS QUE APARECEN AL HACER SCROLL ######################################################################### */
@media (max-width: 768px) {
.scroll-text {
position: relative !important;
z-index: 2;
display: flex !important;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
padding: 0 16px;
text-align: center;
background: transparent;
}
/* eliminar saltos raros de PHP */
.scroll-text br {
display: none !important;
}
/* CARDS */
.scroll-text > p,
.scroll-text > h1,
.scroll-text > h2,
.scroll-text > h3 {
width: 100%;
max-width: 420px;
padding: 18px 20px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 28px rgba(0,0,0,0.10);
text-align: justify;
box-sizing: border-box;
}
.scroll-text p {
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.scroll-text,
.scroll-text > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
}
/* ################################## MEDIA QUERIES PARA QUITAR LINEAS ######################################################################### */
@media (max-width: 768px) {
/* 1️⃣ El contenedor deja de ser layout */
.scroll-line-container {
all: unset; /* 🔥 clave */
display: contents; /* 🔥 clave */
}
/* 2️⃣ El SVG deja de existir visual y estructuralmente */
.scroll-line-container > svg {
position: fixed;
inset: 0;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
/* 3️⃣ El texto vuelve a ser flujo normal */
.scroll-text {
position: static !important;
z-index: auto;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
padding: 0 16px;
background: transparent;
text-align: center;
}
/* eliminar
del PHP */
.scroll-text br {
display: none !important;
}
/* 4️⃣ Cards */
.scroll-text > p,
.scroll-text > h1,
.scroll-text > h2,
.scroll-text > h3 {
width: 100%;
max-width: 420px;
padding: 18px 20px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 28px rgba(0,0,0,0.10);
text-align: justify;
box-sizing: border-box;
}
.scroll-text p {
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
}
/* =====================================================
AJUSTE FINO – CARDS DE TEXTO BAJO CARRUSEL (MÓVIL)
Reduce espacios y deja separación pequeña entre cards
===================================================== */
@media (max-width: 768px) {
/* Contenedor */
.scroll-text {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* Cards */
.scroll-text > p {
margin-bottom: 16px !important; /* espacio pequeño */
padding: 14px 16px !important; /* menos aire interno */
}
.scroll-text > p:first-child {
margin-top: -30px;
}
}
/* ################################################################################################### MEDIA QUERIES PARA SECCION DE ENCABEZADO ######################################################################### */
/* Oculta versión desktop */
.ruta-mobile {
display: none ;
}
/* ================================================= */
/* ================= RUTA MOBILE =================== */
/* ================================================= */
@media (max-width: 768px) {
/* Oculta versión desktop */
.ruta-section {
display: none !important;
}
/* ============================= */
/* CONTENEDOR GENERAL */
/* ============================= */
.ruta-mobile {
position: relative;
width: 100%;
background: white;
overflow: hidden;
display: block;
padding-top: 0px;
padding-bottom: 50px;
}
/* ============================= */
/* BLOQUES SVG */
/* ============================= */
.ruta-top,
.ruta-bottom {
position: relative;
width: 100%;
}
.ruta-svg {
display: block;
width: 100%;
max-width: 360px;
height: auto;
margin: 0 auto;
}
/* ============================= */
/* TEXTO */
/* ============================= */
.ruta-texto {
position: relative;
padding: 10px 20px;
background: white;
z-index: 3;
}
.ruta-texto h1 {
font-size: 2.3rem;
line-height: 1.1;
}
.ruta-texto p {
font-size: 1rem;
margin: 12px 0 20px;
max-width: 85%;
}
.ruta-texto .boton {
font-size: 1rem;
padding: 14px 28px;
border-radius: 999px;
}
/* ============================= */
/* PINES / VIDEOS */
/* ============================= */
.pin-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* posiciones de ejemplo */
.pin-1 {
top: 230px;
left: 40px;
/* estado inicial */
opacity: 0;
transform: scale(0.2);
/* animación */
animation: pinPop 1.8s cubic-bezier(.2,1.4,.4,1) forwards;
animation-delay: 0.6s; /* ⏱ AJUSTA según el trazo */
}
.pin-2 {
top: 100px;
right: 65px;
/* estado inicial */
opacity: 0;
transform: scale(0.2);
/* animación */
animation: pinPop 1.8s cubic-bezier(.2,1.4,.4,1) forwards;
animation-delay: 1.2s; /* ⏱ AJUSTA según el trazo */
}
.pin-3 {
top: 10px;
left: 30px;
/* estado inicial */
opacity: 0;
transform: scale(0.2);
/* animación */
animation: pinPop 1.8s cubic-bezier(.2,1.4,.4,1) forwards;
animation-delay: 1s; /* ⏱ AJUSTA según el trazo */
}
.ruta-svg-horizontal-mobile {
width: auto;
max-width: none;
height: 100%;
display: block;
margin-left: -20%;
}
.pin-video,.pin-imagen {
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
background: #fff;
z-index: 20;
}
.pin-video2{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: #fff;
z-index: 20;
}
.pin-video2 video {
width: 100%;
height: 100%;
object-fit: cover;
}
.img-pin {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@keyframes pinPop {
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 768px) {
/* ---------- TÍTULO ---------- */
/* 🎯 carrusel centrado y recortado */
.carousel-container-sucursal {
overflow: hidden !important;
padding: 0 !important;
margin-bottom: 30px !important;
}
.carousel-wrapperSucursal {
display: flex;
width: 100% !important;
}
/* 🧱 solo una card visible */
.carousel-slideSucursal {
min-width: 100% !important;
max-width: 100% !important;
display: flex;
justify-content: center;
}
/* 🪪 tarjeta alineada al bloque azul */
.card-dir {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
}
/* 🗺️ MAPA ARRIBA */
.map-dir1 {
order: 1;
width: 100% !important;
height: auto !important;
overflow: hidden;
}
.map-dir1 iframe {
display: block;
width: 100% !important;
height: 200px !important;
border-radius: 16px;
}
/* 📍 INFO ABAJO */
.info-dir {
order: 2;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
gap: 14px;
padding-bottom: 10px;
}
.info-dir-item {
height: auto !important;
overflow: visible !important;
}
.card-dir-content {
display: flex !important;
flex-direction: column !important;
align-items: stretch;
}
/* ---------- FORMULARIO ---------- */
.formulario-contacto {
flex-direction: column !important;
width: 100% !important;
max-width: 95% !important;
margin: 30px auto !important;
min-height: auto;
/* 🔥 elimina marco blanco en móvil */
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
.contact-info-contacto,
.form-section {
width: 100%;
padding: 30px 20px;
}
.social-links {
margin: 20px auto;
gap: 15px;
}
.submit-btn-formulario {
width: 100%;
padding: 14px;
}
/* ============================= */
/* TARJETA DE FONDO */
/* ============================= */
.contenedorCarrusel,
.carousel-container,
.card {
width: 100% !important;
max-width: 387px !important;
margin: 0 auto !important;
}
/* ============================= */
/* TÍTULO */
/* ============================= */
.card-title,
.card h3 {
text-align: center !important;
font-size: 16px !important; /* ✅ pedido */
line-height: 1.2 !important;
margin-bottom: 8px !important;
}
.card h2 {
text-align: center !important;
font-size: 18px !important; /* ✅ pedido */
line-height: 1.2 !important;
margin-bottom: 8px !important;
}
/* ============================= */
/* TEXTO */
/* ============================= */
.card p,
.card-text,
.text-grid p {
font-size: 15px !important; /* ✅ pedido */
line-height: 1.3 !important;
margin-bottom: 6px !important;
}
/* ============================= */
/* TEXTO ARRIBA */
/* ============================= */
.grid-card {
display: flex !important;
flex-direction: column !important;
}
.text-grid {
order: 1;
padding-top: 20;
padding: 12px 18px !important;
}
.circulo-rayas {
width: 150px !important; /* antes ~200px */
height: 150px !important;
opacity: 0.65; /* más suaves */
}
/* ============================= */
/* IMAGEN ABAJO (CONTROLADA) */
/* ============================= */
.imagen-grid {
order: 2;
height: 120px !important; /* un poco más chica */
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
}
.imagen-grid img {
height: 120px !important;
width: auto !important;
max-width: 100%;
object-fit: contain !important;
}
/* ============================= */
/* SIN DONA ROJA */
/* ============================= */
.dona,
.dona2,
.triangulo2,
.arco-rojo,
.decoracion-roja {
display: none !important;
}
/*Parte de la sección de internet y esas cosas*/
/* contenedor general */
.parent-grid {
display: flex !important;
flex-direction: column !important;
gap: 24px;
padding: 0 !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 387px !important; /* 👈 referencia */
}
/* columnas */
.div1,
.div2 {
width: 100% !important;
max-width: 100% !important;
}
/* ----------------------------- */
/* 📦 CONTENEDOR GRÁFICA */
/* ----------------------------- */
.container {
width: 100% !important;
max-width: 387px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.header-section {
padding: 16px !important;
margin-bottom: 16px !important;
}
.header-section h2 {
font-size: 18px !important;
line-height: 1.3 !important;
}
.header-section p {
font-size: 14px !important;
line-height: 1.4 !important;
}
/* ----------------------------- */
/* 📊 GRÁFICA */
/* ----------------------------- */
.chart-section {
padding: 12px !important;
}
.chart-wrapper {
flex-direction: row !important;
gap: 10px !important;
align-items: flex-start !important;
}
.labels {
width: 110px !important;
padding-top: 0 !important;
height: auto !important;
}
.labels div {
font-size: 11px !important;
margin-bottom: 8px !important;
padding: 6px 8px !important;
}
.chart-container {
max-width: 100% !important;
height: 240px !important;
padding: 8px !important;
}
canvas {
height: 100% !important;
}
/* ----------------------------- */
/* 📘 CARD ESCUELAS (ABAJO) */
/* ----------------------------- */
.datos-column {
width: 100% !important;
max-width: 387px !important;
margin: 0 auto !important;
justify-content: center !important;
}
.floating-card1 {
width: 100% !important;
max-width: 387px !important;
height: auto !important; /* 🔥 clave */
animation: none !important; /* opcional, evita saltos */
}
.card-content1 {
padding: 24px 18px !important;
height: auto !important;
}
.card-title {
font-size: 15px !important;
line-height: 1.4 !important;
margin-bottom: 12px !important;
}
.card-subtitle1 {
font-size: 14px !important;
line-height: 1.4 !important;
}
/* iconos SVG centrados */
.card-content1 svg {
width: 60px !important;
height: 60px !important;
}
/* números */
.card-content1 p[style*="font-weight: bold"] {
font-size: 16px !important;
}
/* botón fuente */
.stats-overlay {
position: relative !important;
top: auto !important;
right: auto !important;
margin-top: 12px !important;
display: inline-block;
}
/* ============================= */
/* ❓ TÍTULO QUIÉNES SOMOS */
/* ============================= */
.flotante-quienes-somos {
width: 100% !important;
max-width: 387px !important;
margin: 30px auto 20px !important;
padding: 20px 18px !important;
font-size: 1.6rem !important;
line-height: 1.2 !important;
text-align: center !important;
}
/* ################################################################################################### MEDIA QUERIES PARA SECCION DE CARRUSEL ######################################################################### */
.carrusel-fade {
width: 92%;
max-width: 92%;
height: auto; /* deja crecer */
aspect-ratio: 14/9; /* CLAVE para horizontales */
margin: 40px auto;
top: 0;
border-radius: 28px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
margin-top: -50px;
margin-bottom: 0;
}
#carrusel1 {
margin-bottom: -35px;
margin-top: -35px;
}
/* ============================= */
/* 🍔 MENÚ HAMBURGUESA – MÓVIL */
/* ============================= */
/* botón hamburguesa */
/* botón visible en móvil */
.menu-toggle{
display: block !important;
position: relative;
z-index: 10002;
font-size: 45px;
background: none;
border: none;
cursor: pointer;
line-height: 1;
color: #111;
}
/* ☰ -> ✕ (sin cambiar HTML) */
.menu-toggle.active{
position: fixed; /* sale del header */
top: 12px;
right: 20px;
z-index: 10003; /* arriba del drawer */
color: transparent; /* oculta el ☰ */
font-size: 40px;
}
.menu-toggle.active::before{
content: "✕";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-82%, -20%);
color: #E52521;
}
/* NAV no debe estorbar, el drawer lo hará navLinks */
nav{
display: block !important;
position: static !important;
width: auto !important;
z-index: auto !important;
}
/* ---------- OVERLAY ---------- */
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
z-index: 10001; /* 🔽 */
}
.menu-overlay.active{
opacity: 1;
pointer-events: all;
}
/* ---------- DRAWER ---------- */
#navLinks {
display: flex !important;
position: fixed;
top: 0;
left: -100%;
right: auto;
height: 100vh;
width: 82%;
max-width: 330px;
flex-direction: column;
gap: 16px;
padding: 90px 20px 20px;
background: #ffffff;
box-shadow: 10px 0 30px rgba(0,0,0,0.25); /* sombra ahora hacia la derecha */
transition: left .35s ease;
z-index: 10002;
}
#navLinks.open{
left: 0;
}
#navLinks::before{
content: "MEXIcomp";
font-size: 2.2rem;
font-weight: 900;
margin-bottom: 18px;
background: linear-gradient(90deg, #4FAFB6, #E52521);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ---------- LINKS ---------- */
#navLinks a{
font-size: 1.05rem;
font-weight: 700;
text-decoration: none;
color: #1f2937 !important;
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(
90deg,
rgba(79,175,182,0.69),
rgba(229,37,33,0.69)
);
transition: transform .2s ease, background .2s ease, color .2s ease;
}
#navLinks a:hover{
transform: translateX(6px);
background: linear-gradient(90deg, #4FAFB6, #E52521);
color: #fff !important;
}
/* (opcional) que el span no tenga estilos raros */
#navLinks a span{
background: none !important;
color: inherit !important;
}
header{
position: sticky;
top: 0;
z-index: 10000;
background: #ffffff;
}
.menu-toggle{
position: absolute;
right: 20px; /* 👉 esquina derecha */
left: auto;
top: 50%;
transform: translateY(-50%);
}
/* Tu header/menu ya está en 10000-10003
Entonces subimos el modal arriba de eso
*/
.modal{
z-index: 20000 !important;
}
.modal-backdrop{
z-index: 19999 !important;
}
/* (Opcional) si tu modal usa otro wrapper tipo .modal-dialog / .modal-content */
.modal-dialog,
.modal-content{
position: relative;
z-index: 20001 !important;
}
}
@media (max-width: 768px) {
body {
position: relative;
}
body::before {
content: "";
position: fixed;
top: 8%;
left: 50vw; /* centro real del viewport */
transform: translateX(-50%);
width: 15px; /* 👈 MÁS GRUESA */
height: 50vh; /* 👈 NO SE PASA DEL FINAL */
background-color: rgba(237, 50, 55, 0.35); /* 👈 ROJO SUAVE */
border-radius: 10px;
z-index: -1; /* fondo */
pointer-events: none;
}
}
}
/* ===================================== */
/* FIX DESKTOP – SECCIÓN CONTACTO */
/* ===================================== */
@media (min-width: 769px) {
/* Grid correcto en desktop */
.parent-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
align-items: start;
}
/* Carrusel / contenedor de sucursal */
.carousel-container-sucursal {
width: 78% !important;
max-width: 78% !important;
margin: 0 auto !important;
overflow: hidden;
}
/* Card principal de dirección */
.card-dir {
width: 90% !important;
max-width: 90% !important;
margin: 0 auto !important;
}
/* Contenido interno vuelve a grid */
.card-dir-content {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: stretch;
}
/* Mapa NO recortado */
.map-dir1 iframe {
height: 450px !important;
border-radius: 20px;
}
/* Info alineada normal */
.info-dir {
padding: 0;
gap: 25px;
}
}
/* ========================= */
/* VISIBILIDAD DESKTOP / MÓVIL */
/* ========================= */
/* ========================= */
/* VISIBILIDAD DESKTOP / MÓVIL */
/* ========================= */
.citas-mobile {
display: none;
}
@media (max-width: 768px) {
.citas {
display: none; /* ocultar desktop */
}
.citas-mobile {
display: block; /* mostrar móvil */
}
}
@media (max-width: 768px) {
/* ========================= */
/* VISIBILIDAD */
/* ========================= */
.citas { display: none; }
.citas-mobile { display: block; }
/* ========================= */
/* CONTENEDOR DE CITA */
/* ========================= */
.cita-mobile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
margin-bottom: 60px;
/* ORDEN NUEVO */
.burbuja-mobile { order: 1; }
.cara-mobile { order: 2; }
.autor-mobile { order: 3; }
}
/* ========================= */
/* AUTOR */
/* ========================= */
.autor-mobile strong {
font-size: 15px;
}
.autor-mobile span {
display: block;
font-size: 13px;
opacity: 0.8;
margin-top: 4px;
}
/* ========================= */
/* CARA */
/* ========================= */
.cara-mobile {
width: 90px;
height: 90px;
border-radius: 50%;
background-size: cover;
background-position: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
/* ========================= */
/* BURBUJA */
/* ========================= */
.burbuja-mobile {
padding: 16px 20px;
border-radius: 28px;
color: #fff;
font-size: 14px;
line-height: 1.5;
max-width: 340px;
}
.burbuja-mobile.roja { background: #E52521; }
.burbuja-mobile.azul { background: #4FAFB6; }
.burbuja-mobile.morada { background: #7B3FB8; }
.cara-mobile {
opacity: 1 !important;
transform: none !important;
}
.autor-mobile span {
color: #777; /* gris */
font-size: 13px;
line-height: 1.4;
}
.burbuja-mobile .texto-frase {
margin: 6px 0;
font-size: 14px;
line-height: 1.5;
text-align: center;
color: #fff;
}
.burbuja-mobile .comillas {
font-size: 20px;
opacity: 0.9;
line-height: 1;
}
.burbuja-mobile .comillas.cierre {
margin-top: 6px;
}
.burbuja-mobile {
position: relative;
}
.burbuja-mobile::after {
content: "";
position: absolute;
bottom: -12px; /* piquito abajo */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid; /* apunta hacia abajo */
}
.burbuja-mobile.roja::after {
border-top-color: #E52521;
}
.burbuja-mobile.azul::after {
border-top-color: #4FAFB6;
}
.burbuja-mobile.morada::after {
border-top-color: #7B3FB8;
}
}
@media (max-width: 768px) {
/* 🔒 Desactivar comportamiento hover de desktop */
.image-click-fullscreen:hover .image-circle {
opacity: 1 !important;
}
.image-click-fullscreen:hover .modal-on-hover {
opacity: 0 !important;
pointer-events: none !important;
}
/* 🔒 Desactivar cualquier transformación */
.image-circle,
.image-circle img {
transform: none !important;
transition: none !important;
}
/* 🔒 Evitar estados raros al tocar */
.image-circle img:active,
.image-circle img:focus {
opacity: 1 !important;
transform: none !important;
}
}