html, body {
/* Esto es VITAL cuando usas elementos de ancho completo (100vw) */
overflow-x: hidden !important;
/* Aseguramos que el cuerpo no tenga márgenes extraños */
width: 100%;
min-width: 375px;
margin: 0;
padding: 0;
position: relative;
}
.inicio-mvil.div {
display: flex;
flex-direction: column;
max-width: 743px;
min-width: 375px;
align-items: flex-start;
justify-content: center;
gap: 10px;
padding: 56px 0px 0px;
position: relative;
background-color: #ffffff;
}
.inicio-mvil .div-2 {
display: flex;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
gap: 32px;
}
.inicio-mvil .marco-seccin {
height: 408px;
gap: 40px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .marco-imagen-header {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 408px;
background-image: url(./img/rectangle-1.png);
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .rectangle {
height: 100%;
background-color: #000000;
opacity: 0.4;
}
.inicio-mvil .div-3 {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .encabezado {
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--t-tulos-01-s-black-font-family);
font-weight: var(--t-tulos-01-s-black-font-weight);
color: var(--neutro-50);
font-size: var(--t-tulos-01-s-black-font-size);
text-align: center;
letter-spacing: var(--t-tulos-01-s-black-letter-spacing);
line-height: var(--t-tulos-01-s-black-line-height);
font-style: var(--t-tulos-01-s-black-font-style);
}
.inicio-mvil .descripci-n {
position: relative;
width: 295px;
font-family: "Montserrat", Helvetica;
font-weight: 500;
color: var(--neutro-50);
font-size: 12px;
text-align: center;
letter-spacing: 0;
line-height: 16px;
}
.inicio-mvil .botones-web {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 16px;
position: relative;
flex: 0 0 auto;
background-color: var(--terciario-500);
border-radius: 16px;
}
.inicio-mvil .bot-n-primario {
font-weight: var(--bot-n-01-s-semibold-font-weight);
color: var(--neutro-50);
font-size: var(--bot-n-01-s-semibold-font-size);
line-height: var(--bot-n-01-s-semibold-line-height);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-01-s-semibold-font-family);
letter-spacing: var(--bot-n-01-s-semibold-letter-spacing);
white-space: nowrap;
font-style: var(--bot-n-01-s-semibold-font-style);
}
.inicio-mvil .marco-seccin-2 {
gap: 32px;
padding: 0px 16px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .autolayout {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0px 16px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .titulo-nuestros {
position: relative;
align-self: stretch;
height: 40px;
margin-top: -1.00px;
font-family: var(--subt-tulos-02-s-black-font-family);
font-weight: var(--subt-tulos-02-s-black-font-weight);
color: var(--primario-500);
font-size: var(--subt-tulos-02-s-black-font-size);
text-align: center;
letter-spacing: var(--subt-tulos-02-s-black-letter-spacing);
line-height: var(--subt-tulos-02-s-black-line-height);
font-style: var(--subt-tulos-02-s-black-font-style);
}
.inicio-mvil .descripci-n-nuestros {
position: relative;
align-self: stretch;
font-family: var(--parrafo01-s-regular-font-family);
font-weight: var(--parrafo01-s-regular-font-weight);
color: #3e015b;
font-size: var(--parrafo01-s-regular-font-size);
text-align: center;
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
line-height: var(--parrafo01-s-regular-line-height);
font-style: var(--parrafo01-s-regular-font-style);
}
.inicio-mvil .moleculas-tarjetas {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 440px;
gap: 10px;
position: relative;
flex: 0 0 auto;
background-color: var(--neutro-50);
border-radius: 24px;
box-shadow: 0px 4px 5px #00000040;
}
.inicio-mvil .autolayout-contenido {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .imagen-tarjetas {
position: relative;
width: 296px;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-image: url(./img/imagen-tarjetas-28.png);
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .autolayout-texto {
display: flex;
flex-direction: column;
width: 296px;
align-items: center;
gap: 16px;
padding: 32px 24px 24px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .titulo-tarjetas {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
flex: 0 0 auto;
position: relative;
align-self: stretch;
}
.inicio-mvil .titulo-de-muestra {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-s-bold-font-family);
font-weight: var(--subt-tulos-01-s-bold-font-weight);
color: var(--secundario-500);
font-size: var(--subt-tulos-01-s-bold-font-size);
text-align: center;
letter-spacing: var(--subt-tulos-01-s-bold-letter-spacing);
line-height: var(--subt-tulos-01-s-bold-line-height);
font-style: var(--subt-tulos-01-s-bold-font-style);
}
.inicio-mvil .descripcin-tarjetas {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .lorem-ipsum-dolor {
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--parrafo01-s-regular-font-family);
font-weight: var(--parrafo01-s-regular-font-weight);
color: var(--secundario-800);
font-size: var(--parrafo01-s-regular-font-size);
text-align: center;
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
line-height: var(--parrafo01-s-regular-line-height);
font-style: var(--parrafo01-s-regular-font-style);
}
.inicio-mvil .imagen-tarjetas-2 {
background-image: url(./img/imagen-tarjetas-29.png);
position: relative;
width: 296px;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .text-wrapper {
margin-left: -7.00px;
margin-right: -7.00px;
color: var(--primario-500);
font-size: var(--subt-tulos-01-bold-font-size);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-bold-font-family);
font-weight: var(--subt-tulos-01-bold-font-weight);
text-align: center;
letter-spacing: var(--subt-tulos-01-bold-letter-spacing);
line-height: var(--subt-tulos-01-bold-line-height);
font-style: var(--subt-tulos-01-bold-font-style);
}
.inicio-mvil .p {
color: #3e015b;
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--parrafo01-s-regular-font-family);
font-weight: var(--parrafo01-s-regular-font-weight);
font-size: var(--parrafo01-s-regular-font-size);
text-align: center;
line-height: var(--parrafo01-s-regular-line-height);
font-style: var(--parrafo01-s-regular-font-style);
}
.inicio-mvil .imagen-tarjetas-3 {
background-image: url(./img/imagen-tarjetas-30.png);
position: relative;
width: 296px;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .titulo-de-muestra-2 {
color: var(--terciario-500);
font-size: var(--subt-tulos-01-s-bold-font-size);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-s-bold-font-family);
font-weight: var(--subt-tulos-01-s-bold-font-weight);
text-align: center;
letter-spacing: var(--subt-tulos-01-s-bold-letter-spacing);
line-height: var(--subt-tulos-01-s-bold-line-height);
font-style: var(--subt-tulos-01-s-bold-font-style);
}
.inicio-mvil .lorem-ipsum-dolor-2 {
color: var(--terciario-800);
letter-spacing: 0.14px;
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 400;
font-size: 14px;
text-align: center;
line-height: 20px;
}
.inicio-mvil .imagen-tarjetas-4 {
background-image: url(./img/imagen-tarjetas-31.png);
position: relative;
width: 296px;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .imagen-tarjetas-5 {
background-image: url(./img/imagen-tarjetas-32.png);
position: relative;
width: 296px;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .titulo-de-muestra-3 {
color: var(--primario-500);
font-size: var(--subt-tulos-01-s-bold-font-size);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-s-bold-font-family);
font-weight: var(--subt-tulos-01-s-bold-font-weight);
text-align: center;
letter-spacing: var(--subt-tulos-01-s-bold-letter-spacing);
line-height: var(--subt-tulos-01-s-bold-line-height);
font-style: var(--subt-tulos-01-s-bold-font-style);
}
.inicio-mvil .lorem-ipsum-dolor-3 {
color: #3e015b;
letter-spacing: 0.14px;
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 400;
font-size: 14px;
text-align: center;
line-height: 20px;
}
.inicio-mvil .imagen-tarjetas-6 {
background-image: url(./img/imagen-tarjetas-33.png);
position: relative;
width: 296px;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .lorem-ipsum-dolor-4 {
color: var(--terciario-800);
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--parrafo01-s-regular-font-family);
font-weight: var(--parrafo01-s-regular-font-weight);
font-size: var(--parrafo01-s-regular-font-size);
text-align: center;
line-height: var(--parrafo01-s-regular-line-height);
font-style: var(--parrafo01-s-regular-font-style);
}
.inicio-mvil .bot-n-primario-wrapper {
justify-content: center;
gap: 10px;
padding: 8px 16px;
background-color: var(--primario-500);
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
}
.inicio-mvil .componente-slide {
display: flex;
flex-direction: column;
height: auto;
align-items: center;
justify-content: flex-end;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .marco-slides {
width: 100%;
height: 60vh;
min-height: 264px;
position: relative;
overflow: hidden;
}
.inicio-mvil .marco-slide {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.inicio-mvil .marco-slide::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4); /* Un poco más oscuro en móvil */
z-index: 1;
}
.inicio-mvil .autolayout-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0px 40px 24px;
padding-bottom: 8px;
position: absolute;
align-self: stretch;
width: 100%;
bottom: 0;
flex: 0 0 auto;
pointer-events: none;
z-index: 20;
}
.inicio-mvil .autolayout-2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 32px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
pointer-events: auto;
cursor: pointer;
}
.inicio-mvil .div-4 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .img {
position: relative;
width: 40px;
height: 40px;
aspect-ratio: 1;
pointer-events: auto;
cursor: pointer;
}
.inicio-mvil .indicadores-slide {
display: inline-flex;
height: 8px;
align-items: flex-start;
gap: 8px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .ellipse {
background-color: var(--neutro-50);
position: relative;
align-self: stretch;
border-radius: 4px;
aspect-ratio: 1;
}
.inicio-mvil .ellipse-2 {
background-color: var(--neutro-600);
position: relative;
align-self: stretch;
border-radius: 4px;
aspect-ratio: 1;
}
.inicio-mvil .dot{
width: 12px;
height: 12px;
background-color: var(--neutro-600); /* Color gris (inactivo) por defecto */
border-radius: 50%;
transition: background-color 0.3s ease;
}
.inicio-mvil .dot.active {
background-color: var(--neutro-50); /* Color blanco/activo */
}
.inicio-mvil .div-wrapper {
justify-content: center;
gap: 10px;
padding: 8px 16px;
background-color: var(--secundario-500);
box-shadow: 0px 4px 4px #00000040;
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
transition: 0.2s ease;
bottom: 16px;
border-radius: 16px;
}
.inicio-mvil .div-wrapper:hover {
transform: scale(1.05);
}
.inicio-mvil .div-wrapper:active {
transform: scale(1.1);
}
.inicio-mvil .marco-seccin-3 {
gap: 16px;
padding: 0px 32px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .titulo-l-neas-de {
position: relative;
width: 165px;
font-family: var(--subt-tulos-02-s-bold-font-family);
font-weight: var(--subt-tulos-02-s-bold-font-weight);
color: var(--primario-500);
font-size: var(--subt-tulos-02-s-bold-font-size);
letter-spacing: var(--subt-tulos-02-s-bold-letter-spacing);
line-height: var(--subt-tulos-02-s-bold-line-height);
font-style: var(--subt-tulos-02-s-bold-font-style);
}
.inicio-mvil .icono-contactanos {
position: relative;
width: 141px;
height: 126px;
aspect-ratio: 1.12;
}
.inicio-mvil .vector {
position: absolute;
width: 49.25%;
height: 56.76%;
top: 43.27%;
left: 50.73%;
}
.inicio-mvil .vector-2 {
position: absolute;
width: 80.59%;
height: 90.23%;
top: 0;
left: 0;
}
.inicio-mvil .frame {
display: flex;
align-items: center;
justify-content: space-around;
gap: 48px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-descripcin {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(1, fit-content(100%));
height: 80px;
gap: 8px;
position: relative;
width: 311px;
}
.inicio-mvil .descripci-n-lineas {
position: relative;
grid-row: 1 / 2;
grid-column: 1 / 2;
width: 100%;
height: 80px;
font-family: var(--parrafo01-s-regular-font-family);
font-weight: var(--parrafo01-s-regular-font-weight);
color: var(--primario-800);
font-size: var(--parrafo01-s-regular-font-size);
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
line-height: var(--parrafo01-s-regular-line-height);
font-style: var(--parrafo01-s-regular-font-style);
}
.inicio-mvil .autolayout-lineas-de {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-lineas-de {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding: 32px 24px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
background-color: var(--neutro-400);
border-radius: 24px;
}
.inicio-mvil .marco-lnea-de {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .text-wrapper-2 {
margin-top: -1.00px;
font-family: var(--subt-tulos-02-s-bold-font-family);
font-weight: var(--subt-tulos-02-s-bold-font-weight);
color: var(--primario-500);
font-size: var(--subt-tulos-02-s-bold-font-size);
letter-spacing: var(--subt-tulos-02-s-bold-letter-spacing);
line-height: var(--subt-tulos-02-s-bold-line-height);
position: relative;
align-self: stretch;
font-style: var(--subt-tulos-02-s-bold-font-style);
}
.inicio-mvil .text-wrapper-3 {
position: relative;
align-self: stretch;
font-family: var(--parrafo01-s-regular-font-family);
font-weight: var(--parrafo01-s-regular-font-weight);
color: #3e015b;
font-size: var(--parrafo01-s-regular-font-size);
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
line-height: var(--parrafo01-s-regular-line-height);
font-style: var(--parrafo01-s-regular-font-style);
}
.inicio-mvil .marco-formulario {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 28px;
padding: 40px 32px 32px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
background-color: var(--neutro-500);
border-radius: 24px;
}
.inicio-mvil .div-5 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .input-molculas {
height: 40px;
align-items: flex-start;
justify-content: center;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .frame-2 {
display: block;
flex-direction: column;
height: auto;
align-items: flex-start;
justify-content: center;
gap: 10px;
padding: 0;
position: relative;
align-self: stretch;
width: 100%;
max-width: 100%;
}
.inicio-mvil .input-contenedor {
height: 40px;
justify-content: center;
margin-top: -10.00px;
margin-bottom: -10.00px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .frame-3 {
position: relative;
align-self: stretch;
width: 100%;
height: 40px;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid;
border-color: var(--neutro-500);
padding: 0 16px; /* Espacio para que el texto no pegue al borde */
font-family: var(--parrafo01-regular-font-family, sans-serif);
font-size: 14px; /* O usa tu variable de tamaño de fuente */
color: var(--neutro-800);
outline: none; /* Quita el borde azul feo al hacer click */
transition: border-color 0.3s ease;
}
/* Efecto al hacer click */
.inicio-mvil .frame-3:focus,
.inicio-mvil .frame-11:focus {
border-color: var(--primario-500); /* Se pone del color de tu marca al escribir */
}
.inicio-mvil .input-placeholder {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0px 16px;
position: absolute;
top: 10px;
left: 0;
}
.inicio-mvil .frame-4 {
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .text-wrapper-4 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin-top: -1.00px;
font-family: var(--parrafo01-regular-font-family);
font-weight: var(--parrafo01-regular-font-weight);
color: var(--neutro-800);
font-size: var(--parrafo01-regular-font-size);
letter-spacing: var(--parrafo01-regular-letter-spacing);
line-height: var(--parrafo01-regular-line-height);
white-space: nowrap;
font-style: var(--parrafo01-regular-font-style);
}
.inicio-mvil .frame-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 4px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .input-contenedor-2 {
display: flex;
flex-direction: column;
height: 40px;
align-items: flex-start;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
margin-top: -10.00px;
margin-bottom: -10.00px;
}
.inicio-mvil .input-molculas-2 {
height: 120px;
align-items: flex-end;
justify-content: flex-end;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .div-6 {
display: flex;
flex-direction: column;
height: 120px;
align-items: flex-start;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .frame-5 {
position: relative;
align-self: stretch;
width: 100%;
height: 120px;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid;
border-color: var(--neutro-500);
}
.inicio-mvil .input-placeholder-2 {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
position: absolute;
top: 0;
left: 0;
}
.inicio-mvil .bot-n-secundario-wrapper {
justify-content: flex-end;
gap: 30px;
padding: 8px 24px;
border: 1px solid;
border-color: var(--primario-500);
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
}
.inicio-mvil .text-wrapper-5 {
font-weight: var(--bot-n-01-s-semibold-font-weight);
color: var(--primario-500);
font-size: var(--bot-n-01-s-semibold-font-size);
line-height: var(--bot-n-01-s-semibold-line-height);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-01-s-semibold-font-family);
letter-spacing: var(--bot-n-01-s-semibold-letter-spacing);
white-space: nowrap;
font-style: var(--bot-n-01-s-semibold-font-style);
}
.inicio-mvil .molecula-footer {
align-self: stretch;
height: 800px;
position: relative;
width: 100%;
}
.inicio-mvil .marco-curva-inferior {
position: absolute;
width: 100%;
height: 328px;
bottom: 0;
left: 0;
display: flex;
background-image: url(./img/franja-footer.svg);
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .marco-contactos-y {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 80px;
padding: 0px 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-nmeros-de {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .marco-contacto {
display: flex;
align-items: center;
gap: 8px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .img-2 {
position: relative;
width: 24px;
height: 24px;
aspect-ratio: 1;
}
.inicio-mvil .text-wrapper-6 {
position: relative;
width: fit-content;
font-family: var(--bot-n-01-s-semibold-font-family);
font-weight: var(--bot-n-01-s-semibold-font-weight);
color: var(--neutro-50);
font-size: var(--bot-n-01-s-semibold-font-size);
text-align: center;
letter-spacing: var(--bot-n-01-s-semibold-letter-spacing);
line-height: var(--bot-n-01-s-semibold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-s-semibold-font-style);
}
.inicio-mvil .marco-ubicacin {
display: inline-flex;
height: 38px;
align-items: center;
gap: 8px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .icono-ubicacin {
position: relative;
width: 24px;
height: 38px;
aspect-ratio: 0.63;
background-image: url(./img/vector-114.svg);
background-size: 100% 100%;
}
.inicio-mvil .ubicaci-n {
position: relative;
width: fit-content;
margin-top: -7.00px;
margin-bottom: -5.00px;
font-family: "Montserrat", Helvetica;
font-weight: 400;
color: var(--neutro-50);
font-size: 14px;
letter-spacing: 0;
line-height: 14px;
}
.inicio-mvil .span {
line-height: var(--parrafo01-s-regular-line-height);
font-family: var(--parrafo01-s-regular-font-family);
font-style: var(--parrafo01-s-regular-font-style);
font-weight: var(--parrafo01-s-regular-font-weight);
letter-spacing: var(--parrafo01-s-regular-letter-spacing);
font-size: var(--parrafo01-s-regular-font-size);
}
.inicio-mvil .text-wrapper-7 {
font-weight: var(--bot-n-01-s-semibold-font-weight);
line-height: var(--bot-n-01-s-semibold-line-height);
font-family: var(--bot-n-01-s-semibold-font-family);
font-style: var(--bot-n-01-s-semibold-font-style);
letter-spacing: var(--bot-n-01-s-semibold-letter-spacing);
font-size: var(--bot-n-01-s-semibold-font-size);
}
.inicio-mvil .autolayout-footer {
display: inline-flex;
position: absolute;
top: calc(50.00% - 268px);
left: calc(50.00% - 162px);
flex-direction: column;
align-items: center;
gap: 32px;
}
.inicio-mvil .logo-vertical {
width: 312px;
height: 118px;
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.inicio-mvil .logo-principal {
position: relative;
width: 220px;
height: 220px;
margin-top: -51.00px;
margin-bottom: -51.00px;
aspect-ratio: 1;
object-fit: cover;
}
.inicio-mvil .marco-redes {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 16px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .autolayout-redes {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .autolayout-navegacin {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .bot-n-terciario-wrapper {
justify-content: center;
gap: 10px;
padding: 6px 14px;
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
}
.inicio-mvil .bot-n-terciario {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-01-s-semibold-font-family);
font-weight: var(--bot-n-01-s-semibold-font-weight);
color: var(--secundario-500);
font-size: var(--bot-n-01-s-semibold-font-size);
letter-spacing: var(--bot-n-01-s-semibold-letter-spacing);
line-height: var(--bot-n-01-s-semibold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-s-semibold-font-style);
}
.inicio-mvil .marco-correo {
position: relative;
width: 207px;
height: 34px;
}
.inicio-mvil .correo-electr-nico {
position: absolute;
top: 0;
left: calc(50.00% - 90px);
font-family: "Montserrat", Helvetica;
font-weight: 400;
color: var(--terciario-500);
font-size: 14px;
text-align: center;
letter-spacing: 0;
line-height: 14px;
}
.inicio-mvil .text-wrapper-8 {
font-weight: var(--parrafo01-s-semibold-font-weight);
line-height: var(--parrafo01-s-semibold-line-height);
font-family: var(--parrafo01-s-semibold-font-family);
font-style: var(--parrafo01-s-semibold-font-style);
letter-spacing: var(--parrafo01-s-semibold-letter-spacing);
font-size: var(--parrafo01-s-semibold-font-size);
}
.inicio-mvil .text-wrapper-9 {
font-weight: var(--bot-n-01-s-bold-font-weight);
line-height: var(--bot-n-01-s-bold-line-height);
font-family: var(--bot-n-01-s-bold-font-family);
font-style: var(--bot-n-01-s-bold-font-style);
letter-spacing: var(--bot-n-01-s-bold-letter-spacing);
font-size: var(--bot-n-01-s-bold-font-size);
}
.inicio-mvil .barra-de-navegacin {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
gap: 10px;
position: fixed;
top: 0;
left: 0;
}
.inicio-mvil .molecula-header {
display: flex;
min-width: 320px;
max-width: 1440px;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
flex: 0 0 auto;
background-color: var(--neutro-50);
overflow: hidden;
position: fixed;
width: 100%;
z-index: 1002;
top: 0;
left: 0;
}
.inicio-mvil .molecula-header.menu-abierto{
overflow: visible;
}
.inicio-mvil .logo-horizontal {
flex-direction: column;
max-width: 185.81px;
width: 116px;
max-height: 64px;
height: 40px;
align-items: flex-start;
display: flex;
justify-content: center;
position: relative;
z-index: 1000;
}
.inicio-mvil .logo-principal-2 {
position: relative;
align-self: stretch;
width: 100%;
aspect-ratio: 2.9;
object-fit: cover;
}
.inicio-mvil .grupo-botones {
display: inline-flex;
align-items: center;
gap: 24px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .menu-hamburguesa {
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .menu {
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
transition: transform 0.2s ease-in-out, background-color 0.3 ease;
will-change: transform;
}
.inicio-mvil .menu:active {
transform: scale(1.1);
}
.inicio-mvil .men-navegacin {
display: flex;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
flex-direction: column;
width: 232px;
align-items: stretch;
gap: 16px;
padding: 24px;
position: fixed;
top: 56px;
right: 0;
background-color: var(--neutro-50);
border-radius: 0px 0px 0px 24px;
box-shadow: -4px 4px 4px #00000040;
z-index: 1003;
}
.inicio-mvil .men-navegacin.active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.inicio-mvil .frame-6 {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
justify-content: center;
gap: 4px;
position: relative;
}
.inicio-mvil .botones-web-2 {
justify-content: center;
gap: 10px;
padding: 8px 18px;
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
transition: transform 0.1s ease, background-color 0.2s ease;
cursor: pointer;
}
.inicio-mvil .botones-web-2:active {
transform: scale(1.05);
background-color: rgba(0, 0, 0, 0.05);
}
.inicio-mvil .bot-n-terciario-2 {
font-weight: var(--bot-n-02-s-bold-font-weight);
color: var(--primario-500);
font-size: var(--bot-n-02-s-bold-font-size);
line-height: var(--bot-n-02-s-bold-line-height);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-02-s-bold-font-family);
letter-spacing: var(--bot-n-02-s-bold-letter-spacing);
white-space: nowrap;
font-style: var(--bot-n-02-s-bold-font-style);
}
.inicio-mvil .line {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
object-fit: cover;
}
.inicio-mvil .line-2 {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
object-fit: cover;
}
.inicio-mvil .line-3 {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
object-fit: cover;
}
.inicio-mvil .line-4 {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
object-fit: cover;
}
.inicio-mvil .line-5 {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
object-fit: cover;
}
.inicio-mvil .autolayout-redes-2 {
display: inline-flex;
align-items: center;
gap: 16px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .icono-facebook {
position: relative;
width: 24px;
height: 24px;
aspect-ratio: 1;
}
.inicio-mvil .icono-instagram {
position: relative;
width: 24px;
height: 24px;
aspect-ratio: 1;
}
.inicio-mvil .icono-whatsapp {
position: relative;
width: 24px;
height: 24px;
aspect-ratio: 1;
}
.inicio-mvil.inicio-tablet {
display: flex;
flex-direction: column;
max-width: 1280px;
min-width: 744px;
align-items: center;
padding: 56px 0px 0px;
position: relative;
background-color: var(--neutro-50);
}
.inicio-mvil .autolayout-contenido-2 {
align-items: center;
gap: 120px;
align-self: stretch;
flex: 0 0 auto;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
.inicio-mvil .marco-seccin-4 {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .capa-oscuridad-wrapper {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 336px;
background-image: url(./img/imagen-header.png);
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .capa-oscuridad {
height: 336px;
background-color: #000000;
opacity: 0.4;
}
.inicio-mvil .marco-presentacin {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .encabezado-2 {
position: relative;
align-self: stretch;
height: 96px;
margin-top: -1.00px;
font-family: var(--t-tulos-02-s-black-font-family);
font-weight: var(--t-tulos-02-s-black-font-weight);
color: var(--neutro-50);
font-size: var(--t-tulos-02-s-black-font-size);
text-align: center;
letter-spacing: var(--t-tulos-02-s-black-letter-spacing);
line-height: var(--t-tulos-02-s-black-line-height);
font-style: var(--t-tulos-02-s-black-font-style);
}
.inicio-mvil .descripci-n-2 {
position: relative;
width: 524px;
font-family: "Montserrat", Helvetica;
font-weight: 500;
color: var(--neutro-50);
font-size: 14px;
text-align: center;
letter-spacing: -0.28px;
line-height: 16px;
}
.inicio-mvil .botones-web-3 {
padding: 8px 22px;
background-color: var(--terciario-500);
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
}
.inicio-mvil .botones-web-3:hover {
transform: scale(1.1);
}
.inicio-mvil .bot-n-primario-2 {
font-weight: var(--bot-n-02-s-bold-font-weight);
font-size: var(--bot-n-02-s-bold-font-size);
line-height: var(--bot-n-02-s-bold-line-height);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-02-s-bold-font-family);
color: var(--neutro-50);
letter-spacing: var(--bot-n-02-s-bold-letter-spacing);
white-space: nowrap;
font-style: var(--bot-n-02-s-bold-font-style);
}
.inicio-mvil .marco-seccin-5 {
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
padding: 0px 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .autolayout-3 {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .titulo-nuestros-2 {
position: relative;
align-self: stretch;
height: 40px;
margin-top: -1.00px;
font-family: var(--t-tulos-01-s-black-font-family);
font-weight: var(--t-tulos-01-s-black-font-weight);
color: var(--primario-500);
font-size: var(--t-tulos-01-s-black-font-size);
text-align: center;
letter-spacing: var(--t-tulos-01-s-black-letter-spacing);
line-height: var(--t-tulos-01-s-black-line-height);
font-style: var(--t-tulos-01-s-black-font-style);
}
.inicio-mvil .descripci-n-nuestros-2 {
position: relative;
width: 656px;
height: 64px;
font-family: var(--p-rrafo-02-s-regular-font-family);
font-weight: var(--p-rrafo-02-s-regular-font-weight);
color: #3e015b;
font-size: var(--p-rrafo-02-s-regular-font-size);
text-align: center;
letter-spacing: var(--p-rrafo-02-s-regular-letter-spacing);
line-height: var(--p-rrafo-02-s-regular-line-height);
font-style: var(--p-rrafo-02-s-regular-font-style);
}
.inicio-mvil .autolayout-tarjetas {
max-width: 740px;
height: 1464px;
align-items: flex-start;
justify-content: space-between;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
.inicio-mvil .tarjetas-programas {
display: flex;
height: 440px;
align-items: center;
justify-content: space-between;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .botones-web-4 {
padding: 8px 22px;
background-color: var(--primario-500);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
}
.inicio-mvil .componente-slide-2 {
display: flex;
flex-direction: column;
height: auto;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 0px 0px 32px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .marco-descricin-wrapper {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 48px 40px;
background-size: cover;
background-position: center;
opacity: 0;
pointer-events: none;
z-index: 1;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
/* POSICIÓN 1: A la Izquierda (Ya pasó) */
.inicio-mvil .marco-descricin-wrapper.pos-left {
transform: translateX(-100%);
opacity: 0;
}
/* POSICIÓN 2: Al Centro (Activo/Visible) */
.inicio-mvil .marco-descricin-wrapper.pos-center {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
z-index: 2;
}
/* POSICIÓN 3: A la Derecha (Esperando) */
.inicio-mvil .marco-descricin-wrapper.pos-right {
transform: translateX(100%);
opacity: 0;
}
/* CLASE UTILITARIA: Teletransportación (Sin animación) */
.no-transition {
transition: none !important;
}
.inicio-mvil .marco-descricin-wrapper.is-active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
z-index: 2;
}
.inicio-mvil .marco-descricin-wrapper.enter-rigth {
transform: translateX(100%);
}
.inicio-mvil .marco-descricin-wrapper.enter-left {
transform: translateX(-100%);
}
.inicio-mvil .marco-descricin-wrapper.exit-lef{
transform: translateX(-100%);
opacity: 0;
}
.inicio-mvil .marco-descricin-wrapper.exit-rigth{
transform: translateX(100%);
opacity: 0;
}
.inicio-mvil .marco-descricin-wrapper::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
pointer-events: none;
}
.inicio-mvil .slide-1 {
background-image: url("./img/marco-slide-1-2.png");
}
.inicio-mvil .slide-2 {
background-image: url("./img/marco-slide-2.png");
}
.inicio-mvil .slide-3 {
background-image: url("./img/marco-slide-3.jpg");
}
.inicio-mvil .slide-4 {
background-image: url("./img/marco-slide-4.png");
background-position: center 20%;
}
.inicio-mvil .marco-descricin {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
z-index: 2;
}
.inicio-mvil .marco-descricin-movil {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
z-index: 2;
}
.inicio-mvil .slide-titulo {
position: relative;
align-self: stretch;
height: 113px;
margin-top: 1.00px;
font-family: var(--encabezado-01-black-font-family);
font-weight: var(--encabezado-01-black-font-weight);
color: var(--neutro-50);
font-size: var(--encabezado-01-black-font-size);
text-align: center;
letter-spacing: var(--encabezado-01-black-letter-spacing);
line-height: var(--encabezado-01-black-line-height);
font-style: var(--encabezado-01-black-font-style);
}
.inicio-mvil .slide-titulo-tablet{
position: relative;
align-self: stretch;
height: auto;
margin-top: -1.00px;
font-family: var(--t-tulos-02-s-black-font-family);
font-weight: var(--t-tulos-02-s-black-font-weight);
color: var(--neutro-50);
font-size: var(--t-tulos-02-s-black-font-size);
text-align: center;
letter-spacing: var(--t-tulos-02-s-black-letter-spacing);
line-height: var(--t-tulos-02-s-black-line-height);
font-style: var(--t-tulos-02-s-black-font-style);
max-width: 90%;
margin: 0 auto;
z-index: 2;
}
.inicio-mvil .slide-titulo-movil{
position: relative;
align-self: stretch;
height: auto;
margin-top: -1.00px;
font-family: var(--t-tulos-01-s-black-font-family);
font-weight: var(--t-tulos-01-s-black-font-weight);
color: var(--neutro-50);
font-size: var(--t-tulos-01-s-black-font-size);
text-align: center;
letter-spacing: var(--t-tulos-01-s-black-letter-spacing);
line-height: var(--t-tulos-01-s-black-line-height);
font-style: var(--t-tulos-01-s-black-font-style);
max-width: 90%;
margin: 0 auto;
z-index: 2;
}
.inicio-mvil .slide-descripcion {
position: relative;
align-self: stretch;
font-family: var(--subt-tulos-01-s-bold-font-family);
font-weight: var(--subt-tulos-01-s-bold-font-weight);
color: var(--neutro-50);
font-size: var(--subt-tulos-01-s-bold-font-size);
text-align: center;
letter-spacing: var(--subt-tulos-01-s-bold-letter-spacing);
line-height: var(--subt-tulos-01-s-bold-line-height);
font-style: var(--subt-tulos-01-s-bold-font-style);
}
.inicio-mvil .slide-descripcion-tablet {
position: relative;
align-self: stretch;
font-family: var(--parrafo01-semibold-font-family);
font-weight: var(--parrafo01-semibold-font-weight);
color: var(--neutro-50);
font-size: var(--parrafo01-regular-font-size);
text-align: center;
letter-spacing: var(--parrafo01-semibold-letter-spacing);
line-height: var(--parrafo01-semibold-line-height);
font-style: var(--parrafo01-semibold-font-style);
}
.inicio-mvil .slide-descripcion-movil {
position: relative;
align-self: stretch;
font-family: var(--parrafo01-s-semibold-font-family);
font-weight: var(--parrafo01-s-semibold-font-weight);
color: var(--neutro-50);
font-size: var(--parrafo01-s-regular-font-size);
text-align: center;
letter-spacing: var(--parrafo01-s-semibold-letter-spacing);
line-height: var(--parrafo01-s-semibold-line-height);
font-style: var(--parrafo01-s-semibold-font-style);
}
.inicio-mvil .autolayout-4 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 20px 40px;
position: absolute;
bottom: 20px;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
z-index: 2;
}
.inicio-mvil .autolayout-5 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .img-3 {
position: relative;
width: 48px;
height: 48px;
pointer-events: auto;
cursor: pointer;
z-index: 20;
transition: 0.2s ease;
}
.inicio-mvil .img-3:hover {
transform: scale(1.1);
}
.inicio-mvil .img-3:active {
transform: scale(1.2);
}
.inicio-mvil .indicadores-slide-2 {
display: inline-flex;
align-items: flex-start;
gap: 10px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .ellipse-3 {
position: relative;
width: 12px;
height: 12px;
background-color: var(--neutro-50);
border-radius: 6px;
aspect-ratio: 1;
}
.inicio-mvil .ellipse-4 {
position: relative;
width: 12px;
height: 12px;
background-color: var(--neutro-600);
border-radius: 6px;
aspect-ratio: 1;
}
.inicio-mvil .marco-seccin-6 {
display: flex;
flex-direction: column;
max-width: 864px;
align-items: center;
gap: 44px;
position: relative;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-contactanos {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 80px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-descripcin-2 {
display: flex;
flex-direction: column;
width: 408px;
align-items: flex-start;
gap: 8px;
position: relative;
}
.inicio-mvil .titulo-l-neas-de-2 {
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--t-tulos-01-s-bold-font-family);
font-weight: var(--t-tulos-01-s-bold-font-weight);
color: var(--primario-500);
font-size: var(--t-tulos-01-s-bold-font-size);
letter-spacing: var(--t-tulos-01-s-bold-letter-spacing);
line-height: var(--t-tulos-01-s-bold-line-height);
font-style: var(--t-tulos-01-s-bold-font-style);
}
.inicio-mvil .descripci-n-lineas-2 {
position: relative;
align-self: stretch;
font-family: var(--p-rrafo-02-s-regular-font-family);
font-weight: var(--p-rrafo-02-s-regular-font-weight);
color: var(--primario-800);
font-size: var(--p-rrafo-02-s-regular-font-size);
letter-spacing: var(--p-rrafo-02-s-regular-letter-spacing);
line-height: var(--p-rrafo-02-s-regular-line-height);
font-style: var(--p-rrafo-02-s-regular-font-style);
}
.inicio-mvil .icono-contactanos-2 {
position: relative;
width: 100px;
height: 90px;
overflow: hidden;
aspect-ratio: 1.12;
}
.inicio-mvil .autolayout-lineas-de-2 {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding: 0px 80px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-formulario-2 {
display: flex;
flex-direction: column;
height: auto;
align-items: flex-end;
gap: 28px;
padding: 40px 32px 32px;
position: relative;
align-self: stretch;
width: 100%;
background-color: var(--neutro-500);
border-radius: 24px;
}
.inicio-mvil .marco-inputs {
display: flex;
align-items: flex-start;
gap: 20px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .input-molculas-3 {
align-items: flex-end;
justify-content: flex-end;
flex: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.inicio-mvil .botones-web-5 {
padding: 8px 24px;
border: 1px solid;
border-color: var(--primario-500);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
background-color: transparent; /* O el color que desees */
cursor: pointer; /* Manito al pasar el mouse */
transition: all 0.3s ease;
/* Estilos de texto heredados directamente aquí */
font-family: var(--bot-n-01-semibold-font-family, sans-serif);
font-weight: 700;
color: var(--primario-500);
font-size: 16px;
}
.inicio-mvil .botones-web-5:hover {
background-color: var(--primario-500);
color: #FFFFFF; /* Cambio de color al pasar el mouse */
}
.inicio-mvil .text-wrapper-11 {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-01-semibold-font-family);
font-weight: var(--bot-n-01-semibold-font-weight);
color: var(--primario-500);
font-size: var(--bot-n-01-semibold-font-size);
letter-spacing: var(--bot-n-01-semibold-letter-spacing);
line-height: var(--bot-n-01-semibold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-semibold-font-style);
}
.inicio-mvil .molecula-footer-2 {
display: flex;
flex-direction: column;
align-items: center;
gap: 128px;
padding: 0px 0px 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .franja-footer {
display: flex;
width: 105vw;
height: 328px;
align-items: flex-end;
gap: 10px;
position: absolute;
bottom: 0;
top: auto;
left: 50%;
z-index: 0;
transform: translateX(-50%);
}
.inicio-mvil .group {
position: relative;
display: block;
flex: 1;
flex-grow: 1;
height: 100%;
width: 100%;
}
.inicio-mvil .vector-3 {
position: absolute;
width: 100%;
height: 99.05%;
top: 0;
left: 0;
}
.inicio-mvil .vector-4 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.inicio-mvil .molecula-footer-2 .vector-3,
.inicio-mvil .molecula-footer-2 .vector-4 {
position: absolute;
width: 100% !important;
height: 100% !important;
bottom: 0 !important;
left: 0 !important;
top: auto !important; /* Por seguridad */
min-width: 105vw !important;
object-fit: cover !important; /* Para que se estiren sin dejar huecos */
}
.inicio-mvil .autolayout-footer-2 {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 40px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .logo-principal-wrapper {
display: inline-flex;
height: 165px;
align-items: center;
justify-content: center;
position: relative;
}
.inicio-mvil .logo-principal-3 {
position: relative;
width: 312px;
height: 312px;
margin-top: -73.50px;
margin-bottom: -73.50px;
aspect-ratio: 1;
object-fit: cover;
}
.inicio-mvil .marco-redes-2 {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 24px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .marco-contactos-y-2 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 40px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .text-wrapper-12 {
position: relative;
width: fit-content;
font-family: var(--bot-n-01-s-bold-font-family);
font-weight: var(--bot-n-01-s-bold-font-weight);
color: var(--neutro-50);
font-size: var(--bot-n-01-s-bold-font-size);
text-align: center;
letter-spacing: var(--bot-n-01-s-bold-letter-spacing);
line-height: var(--bot-n-01-s-bold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-s-bold-font-style);
}
.inicio-mvil .marco-ubicacin-2 {
display: inline-flex;
height: 38px;
align-items: center;
gap: 16px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .ubicaci-n-2 {
position: relative;
width: fit-content;
font-family: "Montserrat", Helvetica;
font-weight: 400;
color: var(--neutro-50);
font-size: 14px;
letter-spacing: 0;
line-height: 16px;
}
.inicio-mvil .text-wrapper-13 {
font-weight: var(--bot-n-01-s-medium-font-weight);
font-family: var(--bot-n-01-s-medium-font-family);
font-style: var(--bot-n-01-s-medium-font-style);
letter-spacing: var(--bot-n-01-s-medium-letter-spacing);
line-height: var(--bot-n-01-s-medium-line-height);
font-size: var(--bot-n-01-s-medium-font-size);
}
.inicio-mvil .molecula-header-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 56px;
align-items: flex-start;
gap: 10px;
top: 0;
left: 0;
}
.inicio-mvil .molecula-header-2 {
display: flex;
min-width: 320px;
max-width: 1440px;
height: 56px;
align-items: center;
justify-content: space-between;
padding: 8px 40px;
position: fixed;
width: 100%;
background-color: var(--neutro-50);
overflow: hidden;
z-index: 1002;
top: 0;
left: 0;
}
.inicio-mvil .molecula-header-2.menu-abierto{
overflow: visible;
}
.inicio-mvil .menu-wrapper {
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
flex: 0 0 auto;
transition: all 0.2s ease;
}
.inicio-mvil .menu-wrapper:hover {
transform: scale(1.1);
}
.inicio-mvil .men-navegacin-2 {
display: flex;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
flex-direction: column;
width: 320px;
align-items: flex-end;
gap: 16px;
padding: 24px;
position: fixed;
top: 56px;
right: 0;
background-color: var(--neutro-50);
border-radius: 0px 0px 0px 24px;
box-shadow: -4px 4px 4px #00000040;
z-index: 1003;
}
.inicio-mvil .men-navegacin-2.active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.inicio-mvil .overlay {
opacity: 0;
visibility: hidden;
position: fixed;
top: 56px;
left: 0;
right: 0;
bottom: 0;
transition: all 0.3s ease-in-out;
background: rgba(0,0,0,0.5);
z-index: 1000; /* debajo del menú (1003) y del header (1002) */
}
/* Se muestra cuando el header tiene menú abierto */
.inicio-mvil .molecula-header.menu-abierto + .overlay,
.inicio-mvil .molecula-header-2.menu-abierto + .overlay {
opacity: 1;
visibility: visible;
}
.inicio-mvil .frame-7 {
display: flex;
flex-direction: column;
height: 256px;
align-items: flex-start;
justify-content: center;
gap: 4px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .botones-web-6 {
padding: 10px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
transition: transform 0.1s ease, background-color 0.2s ease;
cursor: pointer;
}
.inicio-mvil .botones-web-6:active {
transform: scale(1.05); /* agranda un poco */
background-color: rgba(0, 0, 0, 0.05); /* cambio sutil de color */
}
.inicio-mvil .bot-n-terciario-3 {
font-weight: var(--bot-n-02-bold-font-weight);
color: var(--primario-500);
font-size: var(--bot-n-02-bold-font-size);
line-height: var(--bot-n-02-bold-line-height);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-02-bold-font-family);
letter-spacing: var(--bot-n-02-bold-letter-spacing);
white-space: nowrap;
font-style: var(--bot-n-02-bold-font-style);
}
.inicio-mvil .line-6 {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
object-fit: cover;
}
.inicio-mvil .line-7 {
position: relative;
align-self: stretch;
width: 100%;
height: 1px;
margin-bottom: -1.00px;
object-fit: cover;
}
.inicio-mvil .img-4 {
width: 32px;
height: 32px;
position: relative;
}
.inicio-mvil.inicio-desktop {
display: flex;
flex-direction: column;
min-width: 1280px;
max-width: 1920px;
align-items: center;
gap: 120px;
position: relative;
background-color: var(--neutro-50);
}
.inicio-mvil .marco-contenido {
align-items: flex-start;
gap: 120px;
display: flex;
flex-direction: column;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-imagen-header-2 {
display: flex;
flex-direction: column;
min-width: 1280px;
align-items: flex-start;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .rectangle-wrapper {
position: relative;
align-self: stretch;
width: 100%;
height: 648px;
background-image: url(./img/rectangle-1-14.png);
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .rectangle-2 {
width: 100%;
height: 648px;
background-color: #000000;
aspect-ratio: 2.22;
opacity: 0.4;
}
.inicio-mvil .marco-seccin-7 {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 48px;
position: absolute;
top: 264px;
left: calc(50.00% - 394px);
}
.inicio-mvil .encabezado-3 {
position: relative;
align-self: stretch;
height: 96px;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 900;
color: var(--neutro-50);
font-size: 40px;
text-align: center;
letter-spacing: -1.20px;
line-height: 48px;
}
.inicio-mvil .descripci-n-3 {
position: relative;
width: 787px;
height: 88px;
font-family: var(--p-rrafo-02-medium-font-family);
font-weight: var(--p-rrafo-02-medium-font-weight);
color: var(--neutro-50);
font-size: var(--p-rrafo-02-medium-font-size);
text-align: center;
letter-spacing: var(--p-rrafo-02-medium-letter-spacing);
line-height: var(--p-rrafo-02-medium-line-height);
font-style: var(--p-rrafo-02-medium-font-style);
}
.inicio-mvil .botones-web-7 {
display: inline-flex;
padding: 8px 24px;
flex: 0 0 auto;
background-color: var(--terciario-500);
transition: all 0.2s ease;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
border-radius: 16px;
cursor: pointer;
}
.inicio-mvil .botones-web-7:hover {
transform: scale(1.05);
box-shadow: 0px 4px 4px #00000040;
}
.inicio-mvil .botones-web-7:active {
transform: scale(1.1);
box-shadow: 0px 4px 4px #00000040;
}
.inicio-mvil .bot-n-primario-3 {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-02-bold-font-family);
font-weight: var(--bot-n-02-bold-font-weight);
color: var(--neutro-50);
font-size: var(--bot-n-02-bold-font-size);
letter-spacing: var(--bot-n-02-bold-letter-spacing);
line-height: var(--bot-n-02-bold-line-height);
white-space: nowrap;
font-style: var(--bot-n-02-bold-font-style);
}
.inicio-mvil .marco-seccin-8 {
display: flex;
flex-direction: column;
min-width: 1000px;
max-width: 1500px;
align-items: center;
gap: 72px;
position: relative;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .autolayout-6 {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .titulo-nuestros-3 {
position: relative;
align-self: stretch;
height: 40px;
margin-top: -1.00px;
font-family: var(--t-tulos-01-black-font-family);
font-weight: var(--t-tulos-01-black-font-weight);
color: var(--primario-500);
font-size: var(--t-tulos-01-black-font-size);
text-align: center;
letter-spacing: var(--t-tulos-01-black-letter-spacing);
line-height: var(--t-tulos-01-black-line-height);
white-space: nowrap;
font-style: var(--t-tulos-01-black-font-style);
}
.inicio-mvil .descripci-n-nuestros-3 {
position: relative;
width: 656px;
height: 64px;
font-family: var(--p-rrafo-02-regular-font-family);
font-weight: var(--p-rrafo-02-regular-font-weight);
color: #3e015b;
font-size: var(--p-rrafo-02-regular-font-size);
text-align: center;
letter-spacing: var(--p-rrafo-02-regular-letter-spacing);
line-height: var(--p-rrafo-02-regular-line-height);
font-style: var(--p-rrafo-02-regular-font-style);
}
.inicio-mvil .tarjetas-programas-2 {
display: flex;
flex-wrap: wrap;
min-width: 1000px;
align-items: flex-start;
justify-content: space-between;
row-gap: 72px;
padding: 0px 104px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .autolayout-contenido-3 {
display: flex;
flex-direction: column;
width: 336px;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .imagen-tarjetas-7 {
background-image: url(./img/imagen-tarjetas-22.png);
position: relative;
align-self: stretch;
width: 100%;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .autolayout-texto-2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 32px 24px 24px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .titulo-de-muestra-4 {
color: var(--secundario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-bold-font-family);
font-weight: var(--subt-tulos-01-bold-font-weight);
font-size: var(--subt-tulos-01-bold-font-size);
text-align: center;
letter-spacing: var(--subt-tulos-01-bold-letter-spacing);
line-height: var(--subt-tulos-01-bold-line-height);
font-style: var(--subt-tulos-01-bold-font-style);
}
.inicio-mvil .lorem-ipsum-dolor-5 {
color: var(--secundario-800);
letter-spacing: var(--parrafo01-regular-letter-spacing);
line-height: var(--parrafo01-regular-line-height);
position: relative;
width: 288px;
margin-top: -1.00px;
font-family: var(--parrafo01-regular-font-family);
font-weight: var(--parrafo01-regular-font-weight);
font-size: var(--parrafo01-regular-font-size);
text-align: center;
font-style: var(--parrafo01-regular-font-style);
}
.inicio-mvil .imagen-tarjetas-8 {
background-image: url(./img/imagen-tarjetas-23.png);
position: relative;
align-self: stretch;
width: 100%;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .titulo-de-muestra-5 {
color: var(--primario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-bold-font-family);
font-weight: var(--subt-tulos-01-bold-font-weight);
font-size: var(--subt-tulos-01-bold-font-size);
text-align: center;
letter-spacing: var(--subt-tulos-01-bold-letter-spacing);
line-height: var(--subt-tulos-01-bold-line-height);
font-style: var(--subt-tulos-01-bold-font-style);
}
.inicio-mvil .lorem-ipsum-dolor-6 {
color: #3e015b;
letter-spacing: var(--parrafo01-regular-letter-spacing);
line-height: var(--parrafo01-regular-line-height);
position: relative;
width: 288px;
margin-top: -1.00px;
font-family: var(--parrafo01-regular-font-family);
font-weight: var(--parrafo01-regular-font-weight);
font-size: var(--parrafo01-regular-font-size);
text-align: center;
font-style: var(--parrafo01-regular-font-style);
}
.inicio-mvil .imagen-tarjetas-9 {
background-image: url(./img/imagen-tarjetas-24.png);
position: relative;
align-self: stretch;
width: 100%;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .titulo-de-muestra-6 {
color: var(--terciario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--subt-tulos-01-bold-font-family);
font-weight: var(--subt-tulos-01-bold-font-weight);
font-size: var(--subt-tulos-01-bold-font-size);
text-align: center;
letter-spacing: var(--subt-tulos-01-bold-letter-spacing);
line-height: var(--subt-tulos-01-bold-line-height);
font-style: var(--subt-tulos-01-bold-font-style);
}
.inicio-mvil .lorem-ipsum-dolor-7 {
color: var(--terciario-800);
letter-spacing: 0.32px;
line-height: normal;
position: relative;
width: 288px;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 400;
font-size: 16px;
text-align: center;
}
.inicio-mvil .imagen-tarjetas-10 {
background-image: url(./img/imagen-tarjetas-25.png);
position: relative;
align-self: stretch;
width: 100%;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .imagen-tarjetas-11 {
background-image: url(./img/imagen-tarjetas-26.png);
position: relative;
align-self: stretch;
width: 100%;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .lorem-ipsum-dolor-8 {
color: #3e015b;
letter-spacing: 0.32px;
line-height: normal;
position: relative;
width: 288px;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 400;
font-size: 16px;
text-align: center;
}
.inicio-mvil .imagen-tarjetas-12 {
background-image: url(./img/imagen-tarjetas-27.png);
position: relative;
align-self: stretch;
width: 100%;
height: 160px;
border-radius: 24px 24px 0px 0px;
background-size: cover;
background-position: 50% 50%;
}
.inicio-mvil .lorem-ipsum-dolor-9 {
color: var(--terciario-800);
letter-spacing: 0.16px;
line-height: normal;
position: relative;
width: 288px;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 400;
font-size: 16px;
text-align: center;
}
.inicio-mvil .botones-web-8 {
display: inline-flex;
padding: 8px 24px;
flex: 0 0 auto;
background-color: var(--primario-500);
transition: all 0.2s ease;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
border-radius: 16px;
cursor: pointer;
}
.inicio-mvil .botones-web-8:hover {
transform: scale(1.05);
box-shadow: 0px 4px 4px #00000040;
}
.inicio-mvil .botones-web-8:active {
transform: scale(1.1);
box-shadow: 0px 4px 4px #00000040;
}
.inicio-mvil .componente-slide-3 {
display: flex;
flex-direction: column;
height: 60vh;
min-height: 328px;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 0px;
position: relative;
align-self: stretch;
width: 100%;
overflow: hidden;
}
.inicio-mvil .marco-slide-wrapper {
display: flex;
width: 100%;
height: 100%;
align-items: center;
position: static;
overflow: visible;
}
.inicio-mvil .marco-slide-2 {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
gap: 24px;
padding: 48px 40px;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
opacity: 0;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
z-index: 1
}
.inicio-mvil .marco-slide-2::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5); /* Oscuridad al 50% */
z-index: 1;
}
.inicio-mvil .autolayout-7 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
position: absolute;
bottom: 24px;
left: 0;
width: 100%;
z-index: 10;
pointer-events: none;
}
.inicio-mvil .indicadores-slide-3 {
position: relative;
flex: 1;
flex-grow: 1;
}
.inicio-mvil .botones-web-9 {
justify-content: center;
gap: 10px;
padding: 8px 16px;
background-color: var(--secundario-500);
box-shadow: 0px 4px 4px #00000040;
display: inline-flex;
align-items: center;
position: relative;
flex: 0 0 auto;
border-radius: 16px;
cursor: pointer;
pointer-events: auto;
z-index: 20;
transition: all 0.2s ease;
}
.inicio-mvil .marco-seccin-9 {
display: flex;
flex-direction: column;
min-width: 840px;
max-width: 1720px;
align-items: center;
gap: 48px;
padding: 0px 104px;
position: relative;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .frame-8 {
display: flex;
flex-wrap: wrap;
align-content: space-between;
min-width: 840px;
max-width: 1600px;
align-items: flex-start;
justify-content: space-between;
position: relative;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-descripcin-3 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
position: relative;
flex: 1;
flex-grow: 1;
}
.inicio-mvil .titulo-l-neas-de-3 {
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--t-tulos-01-bold-font-family);
font-weight: var(--t-tulos-01-bold-font-weight);
color: var(--primario-500);
font-size: var(--t-tulos-01-bold-font-size);
letter-spacing: var(--t-tulos-01-bold-letter-spacing);
line-height: var(--t-tulos-01-bold-line-height);
font-style: var(--t-tulos-01-bold-font-style);
}
.inicio-mvil .descripci-n-lineas-3 {
position: relative;
align-self: stretch;
height: 40px;
font-family: var(--p-rrafo-02-regular-font-family);
font-weight: var(--p-rrafo-02-regular-font-weight);
color: var(--primario-800);
font-size: var(--p-rrafo-02-regular-font-size);
letter-spacing: var(--p-rrafo-02-regular-letter-spacing);
line-height: var(--p-rrafo-02-regular-line-height);
font-style: var(--p-rrafo-02-regular-font-style);
}
.inicio-mvil .icono-contactanos-wrapper {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 0px 0px 0px 24px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .icono-contactanos-3 {
position: relative;
width: 134px;
height: 120px;
overflow: hidden;
aspect-ratio: 1.12;
}
.inicio-mvil .autolayout-lineas-de-3 {
display: flex;
min-width: 840px;
max-width: 1600px;
align-items: center;
gap: 64px;
position: relative;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-lineas-de-2 {
display: flex;
flex-direction: column;
min-width: 456px;
align-items: flex-start;
gap: 24px;
padding: 32px 24px;
position: relative;
flex: 1;
flex-grow: 1;
background-color: var(--neutro-400);
border-radius: 24px;
}
.inicio-mvil .text-wrapper-15 {
position: relative;
align-self: stretch;
margin-top: -1.00px;
font-family: var(--subt-tulos-02-bold-font-family);
font-weight: var(--subt-tulos-02-bold-font-weight);
color: var(--primario-500);
font-size: var(--subt-tulos-02-bold-font-size);
letter-spacing: var(--subt-tulos-02-bold-letter-spacing);
line-height: var(--subt-tulos-02-bold-line-height);
font-style: var(--subt-tulos-02-bold-font-style);
}
.inicio-mvil .text-wrapper-16 {
position: relative;
align-self: stretch;
font-family: var(--parrafo01-regular-font-family);
font-weight: var(--parrafo01-regular-font-weight);
color: #3e015b;
font-size: var(--parrafo01-regular-font-size);
letter-spacing: var(--parrafo01-regular-letter-spacing);
line-height: var(--parrafo01-regular-line-height);
font-style: var(--parrafo01-regular-font-style);
}
.inicio-mvil .marco-formulario-3 {
display: flex;
flex-direction: column;
min-width: 456px;
align-items: flex-end;
gap: 28px;
padding: 40px 32px 32px;
position: relative;
flex: 1;
align-self: stretch;
flex-grow: 1;
background-color: var(--neutro-500);
border-radius: 24px;
}
.inicio-mvil .frame-9 {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
position: relative;
flex: 1;
align-self: stretch;
width: 100%;
flex-grow: 1;
}
.inicio-mvil .input-placeholder-3 {
height: 20px;
padding: 0px 16px;
top: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
position: absolute;
left: 0;
}
.inicio-mvil .frame-10 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 20px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .input-molculas-4 {
height: 40px;
align-items: flex-end;
justify-content: flex-end;
flex: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.inicio-mvil .input-molculas-5 {
min-height: 80px;
align-items: flex-start;
flex: 1;
align-self: stretch;
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.inicio-mvil .div-7 {
flex: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .frame-11 {
flex: 1;
flex-grow: 1;
position: relative;
align-self: stretch;
width: 100%;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid;
border-color: var(--neutro-500);
padding: 12px 16px; /* Padding interno */
font-family: var(--parrafo01-regular-font-family, sans-serif);
font-size: 14px;
color: var(--neutro-800);
outline: none;
resize: none; /* Evita que el usuario deforme el diseño estirando la caja */
min-height: 100%; /* Asegura que llene el espacio */
}
.inicio-mvil .molecula-footer-3 {
display: flex;
flex-direction: column;
align-items: center;
gap: 328px;
padding: 0px 0px 96px;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .group-wrapper {
display: flex;
width: 100%;
height: 600px;
align-items: flex-end;
gap: 10px;
bottom: 0;
position: absolute;
top: auto;
left: 50%;
z-index: 0;
transform: translateX(-50%);
}
.inicio-mvil .molecula-footer-3 .vector-3,
.inicio-mvil .molecula-footer-3 .vector-4{
position: absolute;
width: 100% !important;
height: 100% !important;
bottom: 0 !important;
left: 0 !important;
top: auto !important; /* Por seguridad */
min-width: 105vw !important;
object-fit: cover !important;
}
.inicio-mvil .group-2 {
position: relative;
display: block;
flex: 1;
flex-grow: 1;
height: 100%;
width: 100%;
}
.inicio-mvil .autolayout-footer-3 {
display: flex;
flex-direction: column;
width: 843px;
height: 407px;
align-items: center;
gap: 64px;
position: relative;
}
.inicio-mvil .frame-12 {
gap: 16px;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
position: relative;
}
.inicio-mvil .botones-web-10 {
display: inline-flex;
padding: 8px 16px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
border-radius: 16px;
transition: 0.1s ease;
}
.inicio-mvil .botones-web-10:hover {
transform: scale(1.05);
text-shadow: 0px 2px 2px #00000040;
}
.inicio-mvil .botones-web-10:active {
transform: scale(1.1);
}
.inicio-mvil .bot-n-terciario-4 {
color: var(--secundario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: var(--bot-n-01-semibold-font-family);
font-weight: var(--bot-n-01-semibold-font-weight);
font-size: var(--bot-n-01-semibold-font-size);
letter-spacing: var(--bot-n-01-semibold-letter-spacing);
line-height: var(--bot-n-01-semibold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-semibold-font-style);
}
.inicio-mvil .correo-electr-nico-wrapper {
position: relative;
width: 207px;
height: 46px;
}
.inicio-mvil .correo-electr-nico-2 {
position: absolute;
top: 0;
left: calc(50.00% - 104px);
font-family: "Montserrat", Helvetica;
font-weight: 400;
color: var(--terciario-500);
font-size: 16px;
text-align: center;
letter-spacing: 0;
line-height: 20px;
}
.inicio-mvil .text-wrapper-17 {
font-weight: var(--parrafo01-semibold-font-weight);
font-family: var(--parrafo01-semibold-font-family);
font-style: var(--parrafo01-semibold-font-style);
letter-spacing: var(--parrafo01-semibold-letter-spacing);
line-height: var(--parrafo01-semibold-line-height);
font-size: var(--parrafo01-semibold-font-size);
}
.inicio-mvil .text-wrapper-18 {
font-weight: var(--bot-n-01-bold-font-weight);
font-family: var(--bot-n-01-bold-font-family);
font-style: var(--bot-n-01-bold-font-style);
letter-spacing: var(--bot-n-01-bold-letter-spacing);
line-height: var(--bot-n-01-bold-line-height);
font-size: var(--bot-n-01-bold-font-size);
}
.inicio-mvil .marco-contactos-y-3 {
display: flex;
height: 56px;
align-items: flex-start;
justify-content: space-between;
padding: 0px 104px;
position: relative;
align-self: stretch;
width: 100%;
}
.inicio-mvil .marco-nmeros-de-2 {
display: flex;
flex-direction: column;
width: 136px;
align-items: flex-start;
gap: 8px;
position: relative;
}
.inicio-mvil .numero-whatsapp {
position: relative;
width: fit-content;
font-family: var(--bot-n-01-bold-font-family);
font-weight: var(--bot-n-01-bold-font-weight);
color: var(--neutro-50);
font-size: var(--bot-n-01-bold-font-size);
text-align: center;
letter-spacing: var(--bot-n-01-bold-letter-spacing);
line-height: var(--bot-n-01-bold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-bold-font-style);
}
.inicio-mvil .num-ro-tel-fono {
position: relative;
width: fit-content;
margin-right: -2.00px;
font-family: var(--bot-n-01-bold-font-family);
font-weight: var(--bot-n-01-bold-font-weight);
color: var(--neutro-50);
font-size: var(--bot-n-01-bold-font-size);
text-align: center;
letter-spacing: var(--bot-n-01-bold-letter-spacing);
line-height: var(--bot-n-01-bold-line-height);
white-space: nowrap;
font-style: var(--bot-n-01-bold-font-style);
}
.inicio-mvil .marco-ubicacin-3 {
display: flex;
width: 206px;
height: 51px;
align-items: center;
gap: 16px;
position: relative;
}
.inicio-mvil .icono-ubicacin-2 {
position: relative;
width: 32px;
height: 51px;
aspect-ratio: 0.63;
background-image: url(./img/vector-117.svg);
background-size: 100% 100%;
}
.inicio-mvil .ubicaci-n-3 {
position: relative;
width: fit-content;
font-family: "Montserrat", Helvetica;
font-weight: 400;
color: var(--neutro-50);
font-size: 16px;
letter-spacing: 0;
line-height: 16px;
}
.inicio-mvil .text-wrapper-19 {
font-weight: var(--bot-n-01-medium-font-weight);
line-height: var(--bot-n-01-medium-line-height);
font-family: var(--bot-n-01-medium-font-family);
font-style: var(--bot-n-01-medium-font-style);
letter-spacing: var(--bot-n-01-medium-letter-spacing);
font-size: var(--bot-n-01-medium-font-size);
}
.inicio-mvil .text-wrapper-20 {
font-weight: 800;
line-height: 24px;
}
.inicio-mvil .barra-navegacin {
display: flex;
flex-direction: column;
width: 100%;
height: 120px;
align-items: flex-start;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.inicio-mvil .marco-redes-sociales-wrapper {
flex-direction: column;
align-items: flex-end;
gap: 10px;
padding: 8px 104px;
background-color: var(--primario-500);
display: flex;
position: relative;
align-self: stretch;
width: 100%;
flex: 0 0 auto;
}
.inicio-mvil .marco-redes-sociales {
display: flex;
flex-wrap: wrap;
width: 104px;
align-items: flex-start;
gap: 0px 16px;
position: relative;
flex: 0 0 auto;
}
.inicio-mvil .molecula-header-3 {
display: flex;
min-width: 1280px;
max-width: 1920px;
max-height: 80px;
height: 80px;
gap: 32px;
align-items: center;
justify-content: space-between;
padding: 8px 104px;
position: relative;
width: 100%;
background-color: var(--neutro-50);
}
.inicio-mvil .img-wrapper {
display: flex;
flex-direction: column;
min-width: 80px;
max-width: 185.81px;
min-height: 27.56px;
max-height: 64px;
align-items: flex-start;
justify-content: center;
position: relative;
flex: 1;
flex-grow: 1;
aspect-ratio: 2.9;
}
.inicio-mvil .frame-13 {
align-items: center;
justify-content: space-between;
width: fit-content;
flex: 1;
flex-grow: 1;
display: flex;
position: relative;
}
.inicio-mvil .frame-14 {
max-width: 900px;
justify-content: space-between;
flex: 1;
flex-grow: 0 0 auto;
display: flex;
align-items: center;
position: relative;
width: fit-content;
padding: 16px;
}
.inicio-mvil .botones-web-11 {
display: flex;
padding: 8px 8px;
flex: 0 0 auto;
transition: all 0.1s ease;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
border-radius: 16px;
width: fit-content;
}
.inicio-mvil .botones-web-11:hover {
transform: scale(1.05);
text-shadow: 0px 2px 2px #00000040;
}
.inicio-mvil .botones-web-11:active {
transform: scale(1.1);
}
.inicio-mvil .bot-n-terciario-5 {
color: var(--primario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 600;
font-size: 16px;
letter-spacing: 0;
line-height: 20px;
white-space: nowrap;
}
.inicio-mvil .bot-n-terciario-6 {
color: var(--primario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 600;
font-size: 16px;
letter-spacing: 0;
line-height: 20px;
white-space: nowrap;
}
.inicio-mvil .botones-web-12 {
display: flex;
padding: 8px 16px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
border-radius: 16px;
transition: all 0.1s ease;
width: fit-content;
}
.inicio-mvil .botones-web-12:hover {
transform: scale(1.05);
text-shadow: 0px 2px 2px #00000040;
}
.inicio-mvil .botones-web-12:active {
transform: scale(1.1);
}
.inicio-mvil .bot-n-terciario-7 {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 600;
color: var(--primario-500);
font-size: 16px;
letter-spacing: 0;
line-height: 20px;
white-space: nowrap;
}
.inicio-mvil .bot-n-terciario-8 {
color: var(--primario-500);
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 600;
font-size: 16px;
letter-spacing: 0;
line-height: 20px;
white-space: nowrap;
}
.inicio-mvil .bot-n-primario-4 {
position: relative;
width: fit-content;
margin-top: -1.00px;
font-family: "Montserrat", Helvetica;
font-weight: 700;
color: var(--neutro-50);
font-size: 22px;
letter-spacing: 0;
line-height: 24px;
white-space: nowrap;
}
@media (max-width: 743px) {
.inicio-mvil.inicio-tablet {
display: none !important;
}
.inicio-mvil.inicio-desktop {
display: none !important;
}
}
@media (max-width: 374px) {
html, body {
overflow-x: auto !important; /* 'auto' muestra barra solo si es necesario */
}
}
@media (min-width: 744px) and (max-width: 1279px) {
.inicio-mvil.div {
display: none !important;
}
.inicio-mvil.inicio-desktop {
display: none !important;
}
}
@media (min-width: 1280px) {
.inicio-mvil.div {
display: none !important;
}
.inicio-mvil.inicio-tablet {
display: none !important;
}
}
/* ================================================================
SISTEMA DE COORDENADAS PARA SLIDES
Regla de Oro:
1. El padre (.slide-X) controla la altura (Eje Y).
2. El hijo (.marco-descricin) controla el lado (Eje X).
================================================================ */
.inicio-mvil .slide-1 {
justify-content: flex-start;
align-items: center;
padding-bottom: 100px;
}
.inicio-mvil .slide-1 .marco-descricin {
align-items: center;
text-align: center;
max-width: 80%;
width: auto !important;
align-self: auto !important;
}
.inicio-mvil .slide-2 {
justify-content: flex-start;
align-items: flex-start;
padding-right: 80px;
padding-top: 80px;
}
.inicio-mvil .slide-2 .marco-descricin {
align-items: flex-end;
text-align: right;
margin-left: auto;
gap: 32px !important;
max-width: 60%;
}
.inicio-mvil .slide-2 .slide-titulo{
text-align: right !important;
line-height: 1 !important;
height: auto !important;
min-height: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.inicio-mvil .slide-2 .slide-descripcion {
text-align: right !important;
max-width: 45ch !important;
margin-left: auto !important;
margin-right: 0 !important;
}
.inicio-mvil .slide-3 {
justify-content: center;
}
.inicio-mvil .slide-3 .marco-descricin {
align-items: center;
text-align: center;
}
.inicio-mvil .slide-4 {
justify-content: flex-start;
align-items: flex-end;
padding-right: 80px;
padding-top: 80px;
}
.inicio-mvil .slide-4 .marco-descricin {
align-items: flex-end;
text-align: right;
margin-left: auto;
gap: 16px !important;
max-width: 60%;
}
.inicio-mvil .slide-4 .slide-descripcion {
text-align: right !important;
max-width: 46ch !important;
margin-left: auto !important;
margin-right: 0 !important;
}
.inicio-mvil .slide-4 .slide-titulo {
text-align: right !important;
max-width: 12ch !important;
margin-left: auto !important;
margin-right: 0 !important;
}
/* TABLET
/* --- SLIDE 1: Regalos / Kits Escolares --- */
/* Queremos: Arriba y Centrado (según tu código desktop) */
.inicio-mvil .marco-slide-2.slide-1 {
justify-content: flex-start !important; /* Manda todo ARRIBA */
align-items: center !important; /* Centrado horizontalmente */
padding-top: 60px !important; /* Espacio desde el techo */
}
.inicio-mvil .slide-1 .marco-descricin {
align-items: center !important;
text-align: center !important;
max-width: 90% !important; /* En tablet damos más ancho que en desktop */
}
.inicio-mvil .marco-slide-2.slide-2 {
justify-content: flex-start !important; /* Arriba */
align-items: flex-end !important; /* Derecha */
padding-top: 60px !important;
padding-right: 40px !important;
text-align: right !important; /* Refuerzo */
}
/* 2. Ajuste del envoltorio de texto (marco-descricin) */
.inicio-mvil .slide-2 .marco-descricin {
width: 100% !important; /* Ocupa todo el ancho */
align-items: flex-end !important; /* Alinea los hijos a la derecha */
margin-right: 0 !important; /* Pega la caja a la derecha */
margin-left: auto !important; /* Empuja todo desde la izquierda */
padding: 0 !important;
}
/* 3. EL AJUSTE FINAL: Título y Descripción */
.inicio-mvil .slide-2 .slide-titulo-tablet,
.inicio-mvil .slide-2 .slide-descripcion-tablet {
text-align: right !important; /* Alineación del texto */
/* TRUCO: Anular el centrado automático */
margin: 0 !important; /* Quita el 'auto' que lo centraba */
margin-left: auto !important; /* Si sobra espacio, que sobre a la izquierda */
width: 100% !important; /* Asegura que el texto tenga espacio para moverse */
max-width: 100% !important; /* Quita restricciones de ancho */
}
/* 1. El Contenedor Principal (La Caja del Slide) */
.inicio-mvil .marco-slide-2.slide-3 {
/* Forzamos el centro absoluto en los dos ejes */
display: flex !important;
justify-content: center !important; /* Centrado Vertical */
align-items: center !important; /* Centrado Horizontal */
text-align: center !important; /* Alineación de texto heredada */
background-position: center 20% !important;
padding: 0 20px !important;
}
/* 2. El Envoltorio del Texto (.marco-descricin) */
.inicio-mvil .slide-3 .marco-descricin {
width: 100% !important;
max-width: 100% !important;
/* Aseguramos que la caja flex interna también centre todo */
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centra los hijos horizontalmente */
justify-content: center !important;
/* Quitamos cualquier margen extraño */
margin: 0 auto !important;
padding: 0 !important;
gap: 0 !important;
}
/* 3. El Título (.slide-titulo-tablet) */
.inicio-mvil .slide-3 .slide-titulo-tablet {
text-align: center !important;
/* Esto es clave: El margen auto a los lados lo centra en su caja */
margin: 0 auto !important;
/* Le damos ancho para respirar, pero controlado */
width: 100% !important;
max-width: 90% !important;
/* Opcional: Esto ayuda a que las líneas de texto queden equilibradas */
text-wrap: balance;
}
/* --- SLIDE 4: Monitoras --- */
.inicio-mvil .marco-slide-2.slide-4 {
justify-content: flex-start !important;
align-items: flex-end !important;
padding-top: 60px !important;
padding-right: 40px !important;
background-position: center top !important;
}
.inicio-mvil .slide-4 .marco-descricin {
align-items: flex-end !important;
text-align: right !important;
justify-content: flex-start !important;
max-width: 65% !important;
gap: 10px !important;
}
/* Ajuste específico para título corto a la derecha */
.inicio-mvil .slide-4 .slide-titulo-tablet {
text-align: right !important;
margin-left: auto !important; /* Empuja el texto a la derecha */
margin-right: 0 !important;
max-width: 12ch !important;
}
.inicio-mvil .slide-4 .slide-descripcion-tablet {
text-align: right !important;
}
.inicio-mvil .marco-slide.slide-1 {
background-position: center top !important;
/* Alineación */
justify-content: flex-start !important; /* Arriba */
align-items: center !important; /* Centro */
padding-top: 40px !important;
}
.inicio-mvil .slide-1 .slide-titulo-movil {
max-width: 80% !important;
}
/* --- SLIDE 2: Mujeres al volante (Móvil) --- */
.inicio-mvil .marco-slide.slide-2 {
background-position: right center !important;
/* Alineación Derecha */
justify-content: flex-start !important;
align-items: flex-end !important;
padding-top: 40px !important;
padding-right: 20px !important;
}
.inicio-mvil .slide-2 .slide-titulo-movil,
.inicio-mvil .slide-2 .slide-descripcion-movil {
text-align: right !important;
margin-left: auto !important;
margin-right: 0 !important;
}
.inicio-mvil .slide-2 .slide-titulo-movil { max-width: 80% !important; }
.inicio-mvil .slide-2 .slide-descripcion-movil { max-width: 60% !important; }
/* --- SLIDE 3: Violencia Laboral (Móvil) --- */
.inicio-mvil .marco-slide.slide-3 {
background-position: left center !important;
/* Centro total */
justify-content: center !important;
align-items: center !important;
padding: 0 20px !important;
}
.inicio-mvil .slide-3 .slide-titulo-movil {
max-width: 100% !important;
}
/* --- SLIDE 4: Monitoras (Móvil) --- */
.inicio-mvil .marco-slide.slide-4 {
background-position: center center !important;
/* Derecha Abajo */
justify-content: flex-end !important;
align-items: center !important;
padding-right: 8px !important;
padding-left: 8px;
padding-bottom: 112px;
}
.inicio-mvil .slide-4 .marco-descricin-movil {
gap: 8px !important;
}
.inicio-mvil .slide-4 .slide-titulo-movil,
.inicio-mvil .slide-4 .slide-descripcion-movil {
margin-top: 0 !important;
margin-left: 16px !important;
margin-right: auto !important;
text-align: left !important;
}
/* Salto de línea forzado específico para Móvil */
.inicio-mvil .slide-4 .slide-titulo-movil {
max-width: 14ch !important;
width: 100% !important;
}
.inicio-mvil .slide-4 .slide-descripcion-movil {
max-width: 95% !important;
}
/* Cuando el slide está ACTIVO (Centro) */
.inicio-mvil .js-slide-item.pos-center {
transform: translateX(0) !important;
opacity: 1 !important;
z-index: 2 !important;
}
/* Cuando el slide sale a la IZQUIERDA */
.inicio-mvil .js-slide-item.pos-left {
transform: translateX(-100%) !important;
opacity: 0 !important;
z-index: 1 !important;
}
/* Cuando el slide espera a la DERECHA */
.inicio-mvil .js-slide-item.pos-right {
transform: translateX(100%) !important;
opacity: 0 !important;
z-index: 1 !important;
}
.inicio-mvil .slide-1 {
opacity: 1;
z-index: 5;
}
.componente-slide-2 .marco-slides {
/* Forzamos una altura fija o relativa a la pantalla */
height: 60vh !important; /* O prueba con 800px si tenías una medida fija */
min-height: 450px !important; /* Para que no se encoja en pantallas chatas */
position: relative !important; /* Necesario para contener los absolutos */
overflow: hidden !important;
}
/* Opcional: Si el contenedor general también se encogió */
.componente-slide-2 {
height: auto !important;
min-height: 60vh !important;
}
.inicio-mvil .input-molculas,
.inicio-mvil .input-molculas-4 {
width: 100% !important;
align-items: stretch !important; /* Clave: estirar hijos en lugar de alinearlos */
}
.inicio-mvil .marco-formulario .div-5 {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
position: relative;
width: 100% !important;
padding: 0 !important;
}
.inicio-mvil .marco-formulario .input-molculas,
.inicio-mvil .marco-formulario .input-molculas-2,
.inicio-mvil .marco-formulario .frame-2,
.inicio-mvil .marco-formulario .div-6 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
border: none !important;
flex: 0 0 auto !important;
}
.inicio-mvil .marco-formulario .frame-3 {
width: 100% !important;
height: 40px !important;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid var(--neutro-500);
padding: 0 16px !important;
font-family: var(--parrafo01-regular-font-family, sans-serif);
font-size: 14px;
color: var(--neutro-800);
outline: none;
}
.inicio-mvil .marco-formulario .frame-5 {
width: 100% !important;
height: 120px !important;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid var(--neutro-500);
padding: 12px 16px !important;
font-family: var(--parrafo01-regular-font-family, sans-serif);
font-size: 14px;
color: var(--neutro-800);
outline: none;
resize: none;
}
/* Efectos Focus */
.inicio-mvil .marco-formulario .frame-3:focus,
.inicio-mvil .marco-formulario .frame-5:focus {
border-color: var(--primario-500) !important;
}
/* 5. BOTÓN (Solo móvil) */
.inicio-mvil .marco-formulario .bot-n-secundario-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 24px;
border-radius: 16px;
background-color: transparent;
border: 1px solid var(--primario-500);
font-family: var(--bot-n-01-s-semibold-font-family, sans-serif);
color: var(--primario-500);
font-weight: 700;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.inicio-mvil .marco-formulario .bot-n-secundario-wrapper:hover {
background-color: var(--primario-500);
color: #FFFFFF;
}
/* 6. MARCO EXTERNO */
/* Este es seguro porque la clase .marco-formulario solo existe en el html móvil */
.inicio-mvil .marco-formulario {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 28px;
padding: 40px 32px 32px;
background-color: var(--neutro-500);
border-radius: 24px;
}
.inicio-mvil .marco-formulario-2 .div-5 {
display: flex !important;
flex-direction: column !important;
/* Separación vertical uniforme de 20px */
gap: 20px !important;
width: 100% !important;
padding: 0 !important;
}
/* 3. LIMPIEZA DE CONTENEDORES (Padding y márgenes a cero) */
/* Esto elimina los espacios fantasma dentro de la Tablet */
.inicio-mvil .marco-formulario-2 .input-molculas,
.inicio-mvil .marco-formulario-2 .input-molculas-2,
.inicio-mvil .marco-formulario-2 .input-molculas-3,
.inicio-mvil .marco-formulario-2 .frame-2,
.inicio-mvil .marco-formulario-2 .div-6 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
border: none !important;
flex: 0 0 auto !important;
}
/* 4. CONFIGURACIÓN DE LA FILA DOBLE (.marco-inputs) */
/* Esto hace que Teléfono y Correo se pongan uno al lado del otro */
.inicio-mvil .marco-formulario-2 .marco-inputs {
display: flex !important;
flex-direction: row !important; /* Lado a lado */
gap: 20px !important; /* Espacio horizontal entre ellos */
width: 100% !important;
align-items: flex-start !important;
margin: 0 !important;
}
/* Hacemos que cada columna ocupe el 50% (flex: 1) */
.inicio-mvil .marco-formulario-2 .input-molculas-3 {
flex: 1 !important;
width: auto !important; /* Dejar que flex decida el ancho */
}
/* 5. ESTILOS DE LOS INPUTS (.frame-3) */
.inicio-mvil .marco-formulario-2 .frame-3 {
width: 100% !important;
height: 40px !important;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid var(--neutro-500);
padding: 0 16px !important;
font-family: var(--parrafo01-regular-font-family, sans-serif);
font-size: 14px;
color: var(--neutro-800);
outline: none;
}
/* 6. ESTILOS DEL TEXTAREA (.frame-5) */
.inicio-mvil .marco-formulario-2 .frame-5 {
width: 100% !important;
height: 120px !important;
background-color: var(--neutro-100);
border-radius: 16px;
border: 1px solid var(--neutro-500);
padding: 12px 16px !important;
font-family: var(--parrafo01-regular-font-family, sans-serif);
font-size: 14px;
color: var(--neutro-800);
outline: none;
resize: none;
}
/* Focus activo */
.inicio-mvil .marco-formulario-2 .frame-3:focus,
.inicio-mvil .marco-formulario-2 .frame-5:focus {
border-color: var(--primario-500) !important;
}
/* 7. BOTÓN (Específico de Tablet) */
.inicio-mvil .marco-formulario-2 .botones-web-5 {
padding: 8px 24px;
border: 1px solid var(--primario-500);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background-color: transparent;
cursor: pointer;
font-family: var(--bot-n-01-semibold-font-family, sans-serif);
font-weight: 700;
color: var(--primario-500);
font-size: 16px;
transition: all 0.3s ease;
}
.inicio-mvil .marco-formulario-2 .botones-web-5:hover {
background-color: var(--primario-500);
color: #FFFFFF;
}
/* El fondo oscuro que cubre toda la pantalla */
.overlay-fondo {
display: none; /* Oculto por defecto */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Negro semitransparente */
z-index: 9999; /* Asegura que esté encima de todo */
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
/* La clase que activa la visibilidad */
.overlay-fondo.activo {
display: flex;
opacity: 1;
}
/* La cajita blanca del mensaje */
.overlay-caja {
background: white;
padding: 30px;
border-radius: 24px; /* Mismo radio que tus formularios */
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
max-width: 90%;
width: 320px;
transform: scale(0.8);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.overlay-fondo.activo .overlay-caja {
transform: scale(1); /* Efecto pop al abrirse */
}
/* Tipografía del overlay */
.overlay-caja h3 {
margin: 0 0 10px 0;
color: var(--neutro-800, #333);
font-family: sans-serif;
font-size: 20px;
}
.overlay-caja p {
color: var(--neutro-500, #666);
margin-bottom: 20px;
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
}
/* Botón de cerrar */
.btn-cerrar {
background-color: var(--primario-500, #6200EE); /* Usa tu color morado si la variable funciona, si no pon el código hex */
color: white;
border: none;
padding: 10px 24px;
border-radius: 16px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.btn-cerrar:hover {
background-color: #3700b3; /* Un morado un poco más oscuro */
}