html {
scroll-behavior: smooth;
}
.pagina_front {
background: var( --color_blanco );
color: var( --color_texto );
font-family: var( --fuente_principal );
}
.contenedor_front {
margin: 0 auto;
max-width: 1440px;
width: 92%;
}
.seccion_front {
padding: 20px 0 25px;
}
.seccion_front_suave {
background: var( --color_fondo_suave );
}
.etiqueta_front {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 10px;
text-transform: uppercase;
}
.boton_front {
align-items: center;
background: var( --color_principal );
border: 1px solid var( --color_principal );
border-radius: 12px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 10px;
justify-content: center;
min-height: 46px;
padding: 12px 18px;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.boton_front:hover {
background: var( --color_principal_oscuro );
border-color: var( --color_principal_oscuro );
transform: translateY( -2px );
}
.boton_front_secundario {
background: var( --color_blanco );
border-color: rgba( 0 , 0 , 0 , .13 );
color: var( --color_texto );
}
.boton_front_secundario:hover {
background: var( --color_blanco );
border-color: var( --color_principal );
color: var( --color_principal );
}
.encabezado_seccion {
margin-bottom: 36px;
max-width: 850px;
}
@media only screen and ( max-width: 767px ) {
.encabezado_seccion {
text-align: center;
}
}
.encabezado_seccion_centrado {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.encabezado_seccion > span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 10px;
text-transform: uppercase;
}
.encabezado_seccion h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 14px;
}
.encabezado_seccion p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0;
}
/* =========================================================
ENCABEZADO CENTRADO
========================================================= */
.encabezado_centrado {
background: linear-gradient( 135deg , var( --color_fondo_suave ) , var( --color_blanco ) );
padding: 64px 0;
position: relative;
text-align: center;
}
.encabezado_centrado::after {
background: var( --color_principal );
bottom: 0;
content: "";
height: 4px;
left: 50%;
position: absolute;
transform: translateX( -50% );
width: 80px;
}
.encabezado_centrado h1 {
color: var( --color_texto );
font-size: clamp( 2.1rem , 6vw , 4rem );
font-weight: var( --peso_negrita );
line-height: 1.1;
margin: 0 0 18px;
}
.encabezado_centrado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.75;
margin: 0 auto;
max-width: 800px;
}
/* =========================================================
ENCABEZADO CON UN BOTÓN E ICONO
========================================================= */
.encabezado_un_boton_icono, .encabezado_dos_botones_icono {
background: linear-gradient( 135deg , var( --color_fondo_suave ) , var( --color_blanco ) );
overflow: hidden;
padding: 70px 0;
position: relative;
}
.encabezado_un_boton_icono::before, .encabezado_dos_botones_icono::before {
background: var( --color_principal );
border-radius: 50%;
content: "";
height: 360px;
opacity: .07;
position: absolute;
right: -150px;
top: -160px;
width: 360px;
}
.encabezado_un_boton_icono_contenido, .encabezado_dos_botones_icono_contenido {
align-items: center;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
}
.encabezado_un_boton_icono_texto, .encabezado_dos_botones_icono_texto {
position: relative;
z-index: 2;
}
.encabezado_un_boton_icono h1, .encabezado_dos_botones_icono h1 {
color: var( --color_texto );
font-size: clamp( 2.1rem , 6vw , 4rem );
font-weight: var( --peso_negrita );
line-height: 1.08;
margin: 0 0 20px;
}
.encabezado_un_boton_icono p, .encabezado_dos_botones_icono p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.8;
margin: 0 0 28px;
max-width: 730px;
}
.encabezado_dos_botones_icono_botones {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
@media only screen and ( max-width: 767px ) {
.encabezado_dos_botones_icono_tarjetas_botones .boton_front,
.encabezado_dos_botones_icono_tarjetas_botones .boton_front_secundario,
.encabezado_dos_botones_icono_botones .boton_front,
.encabezado_dos_botones_icono_botones .boton_front_secundario {
width: 100%;
}
}
.encabezado_un_boton_icono_visual, .encabezado_dos_botones_icono_visual {
display: none;
justify-content: center;
position: relative;
z-index: 2;
}
.encabezado_un_boton_icono_visual > div, .encabezado_dos_botones_icono_visual > div {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 50%;
box-shadow: 0 20px 60px rgba( 0 , 0 , 0 , .10 );
color: var( --color_principal );
display: flex;
height: 260px;
justify-content: center;
width: 260px;
}
.encabezado_un_boton_icono_visual i, .encabezado_dos_botones_icono_visual i {
font-size: 94px;
}
@media only screen and ( max-width: 767px ) {
.encabezado_un_boton_icono_texto, .encabezado_dos_botones_icono_texto {
text-align: center;
}
}
/* =========================================================
ENCABEZADO CON DOS BOTONES, ICONO Y TARJETAS
========================================================= */
.encabezado_dos_botones_icono_tarjetas {
background: linear-gradient( 135deg , var( --color_fondo_suave ) , var( --color_blanco ) );
overflow: hidden;
padding: 70px 0;
position: relative;
}
.encabezado_dos_botones_icono_tarjetas::before {
background: var( --color_principal );
border-radius: 50%;
content: "";
height: 420px;
opacity: .07;
position: absolute;
right: -170px;
top: -180px;
width: 420px;
}
.encabezado_dos_botones_icono_tarjetas_contenido {
align-items: center;
display: grid;
gap: 45px;
grid-template-columns: 1fr;
}
.encabezado_dos_botones_icono_tarjetas_texto {
position: relative;
z-index: 2;
}
.encabezado_dos_botones_icono_tarjetas h1 {
color: var( --color_texto );
font-size: clamp( 2.1rem , 6vw , 4rem );
font-weight: var( --peso_negrita );
line-height: 1.08;
margin: 0 0 20px;
max-width: 850px;
}
.encabezado_dos_botones_icono_tarjetas_texto > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.8;
margin: 0 0 28px;
max-width: 730px;
}
.encabezado_dos_botones_icono_tarjetas_botones {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.encabezado_dos_botones_icono_tarjetas_visual {
display: none;
height: 350px;
position: relative;
z-index: 2;
}
.encabezado_dos_botones_icono_tarjetas_circulo {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 50%;
box-shadow: 0 20px 60px rgba( 0 , 0 , 0 , .11 );
color: var( --color_principal );
display: flex;
height: 230px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate( -50% , -50% );
width: 230px;
}
.encabezado_dos_botones_icono_tarjetas_circulo i {
font-size: 82px;
}
.encabezado_dos_botones_icono_tarjetas_tarjeta {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 12px;
box-shadow: 0 12px 30px rgba( 0 , 0 , 0 , .10 );
color: var( --color_texto );
display: flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 12px 15px;
position: absolute;
white-space: nowrap;
}
.encabezado_dos_botones_icono_tarjetas_tarjeta i {
color: var( --color_principal );
font-size: 17px;
}
.encabezado_dos_botones_icono_tarjetas_tarjeta_uno {
left: 2%;
top: 17%;
}
.encabezado_dos_botones_icono_tarjetas_tarjeta_dos {
right: 0;
top: 32%;
}
.encabezado_dos_botones_icono_tarjetas_tarjeta_tres {
bottom: 16%;
left: 11%;
}
@media only screen and ( max-width: 767px ) {
.encabezado_dos_botones_icono_tarjetas {
padding: 20px 0 50px;
}
.encabezado_dos_botones_icono_tarjetas h1 {
text-align: center;
}
}
@media only screen and ( min-width: 992px ) {
.encabezado_dos_botones_icono_tarjetas {
padding: 92px 0;
}
.encabezado_dos_botones_icono_tarjetas_contenido {
grid-template-columns: minmax( 0 , 1.3fr ) minmax( 360px , .7fr );
}
.encabezado_dos_botones_icono_tarjetas_visual {
display: block;
}
}
/* =========================================================
TARIFAS DE PLANES
========================================================= */
.tarifas_planes_seccion {
padding: 74px 0;
}
.tarifas_planes {
align-items: stretch;
display: grid;
gap: 22px;
grid-template-columns: 1fr;
}
.tarifa_plan {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 19px;
box-shadow: 0 12px 34px rgba( 0 , 0 , 0 , .06 );
display: flex;
flex-direction: column;
overflow: hidden;
padding: 27px;
position: relative;
transition: box-shadow .2s ease, transform .2s ease;
}
.tarifa_plan:hover {
box-shadow: 0 20px 46px rgba( 0 , 0 , 0 , .11 );
transform: translateY( -4px );
}
.tarifa_plan_destacada {
border: 2px solid var( --color_principal );
padding: 26px;
}
.tarifa_plan_recomendado {
align-items: center;
background: var( --color_principal );
border-radius: 0 0 0 12px;
color: var( --color_blanco );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
gap: 6px;
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
.tarifa_plan_encabezado {
border-bottom: 1px solid rgba( 0 , 0 , 0 , .07 );
padding-bottom: 22px;
}
.tarifa_plan_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 11% , transparent );
border-radius: 14px;
color: var( --color_principal );
display: flex;
height: 58px;
justify-content: center;
margin-bottom: 17px;
width: 58px;
}
.tarifa_plan_icono i {
font-size: 24px;
}
.tarifa_plan_etiqueta {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .06em;
margin-bottom: 6px;
text-transform: uppercase;
}
.tarifa_plan h3 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 10px;
}
.tarifa_plan_encabezado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.7;
margin: 0;
}
.tarifa_precio {
border-bottom: 1px solid rgba( 0 , 0 , 0 , .07 );
display: flex;
flex-direction: column;
gap: 14px;
padding: 23px 0;
}
.tarifa_precio_mensual {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tarifa_precio_moneda {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1.1rem;
font-weight: var( --peso_negrita );
line-height: 1.5;
}
.tarifa_precio_mensual strong {
color: var( --color_texto );
font-size: clamp( 2rem , 5vw , 2.7rem );
line-height: 1;
}
.tarifa_precio_periodo {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
margin-bottom: 3px;
}
.tarifa_precio_anual {
align-items: flex-start;
background: color-mix( in srgb , var( --color_principal ) 8% , transparent );
border-radius: 11px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
}
.tarifa_precio_anual span {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
}
.tarifa_precio_anual strong {
color: var( --color_principal );
font-family: var( --fuente_principal );
font-size: 1.1rem;
}
.tarifa_precio_anual small {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
}
.tarifa_incluye {
flex-grow: 1;
}
.tarifa_incluye > strong {
color: var( --color_texto );
display: block;
font-size: 1rem;
margin-bottom: 13px;
}
.tarifa_incluye ul {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.tarifa_incluye li {
align-items: flex-start;
color: var( --color_texto_secundario );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 9px;
line-height: 1.5;
}
.tarifa_incluye li i {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 50%;
color: var( --color_principal );
display: flex;
flex: 0 0 22px;
font-size: 9px;
height: 22px;
justify-content: center;
margin-top: 1px;
width: 22px;
}
.tarifa_incluye .tarifa_no_incluida {
opacity: .55;
}
.tarifa_incluye .tarifa_no_incluida i {
background: rgba( 0 , 0 , 0 , .07 );
color: var( --color_texto_secundario );
}
.tarifa_plan_boton {
align-items: center;
background: var( --color_texto );
border-radius: 11px;
color: var( --color_blanco );
display: flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 9px;
justify-content: center;
margin-top: 25px;
min-height: 46px;
padding: 12px 16px;
text-decoration: none;
transition: background-color .2s ease, transform .2s ease;
}
.tarifa_plan_destacada .tarifa_plan_boton {
background: var( --color_principal );
}
.tarifa_plan_boton:hover {
background: var( --color_principal_oscuro );
transform: translateY( -2px );
}
.tarifas_planes_nota {
align-items: flex-start;
background: var( --color_fondo_suave );
border-radius: 13px;
display: flex;
gap: 11px;
margin-top: 28px;
padding: 17px;
}
.tarifas_planes_nota i {
color: var( --color_principal );
flex: 0 0 auto;
margin-top: 3px;
}
.tarifas_planes_nota p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
line-height: 1.6;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.tarifa_plan_icono {
margin: 0 auto 17px;
}
.tarifa_plan_icono i {
font-size: 30px;
}
.tarifa_plan_encabezado {
text-align: center;
}
.tarifa_precio_mensual {
justify-content: center;
}
.tarifa_precio_anual {
align-items: center;
}
}
@media only screen and ( min-width: 768px ) {
.tarifas_planes {
grid-template-columns: repeat( 2 , minmax( 0 , 1fr ) );
}
}
@media only screen and ( min-width: 992px ) {
.tarifas_planes {
grid-template-columns: repeat( 3 , minmax( 0 , 1fr ) );
}
.tarifa_plan_destacada {
transform: translateY( -14px );
}
.tarifa_plan_destacada:hover {
transform: translateY( -18px );
}
}
/* =========================================================
COMPARACIÓN DE PLANES
========================================================= */
.comparacion_planes {
background: var( --color_fondo_suave );
padding: 72px 0;
}
.comparacion_planes_tabla_contenedor {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 17px;
box-shadow: 0 12px 34px rgba( 0 , 0 , 0 , .06 );
overflow-x: auto;
}
.comparacion_planes_tabla {
border-collapse: collapse;
min-width: 690px;
width: 100%;
}
.comparacion_planes_tabla th,
.comparacion_planes_tabla td {
border-bottom: 1px solid rgba( 0 , 0 , 0 , .07 );
padding: 17px 18px;
text-align: center;
}
.comparacion_planes_tabla thead th {
color: var( --color_texto );
font-size: .85rem;
font-weight: var( --peso_negrita );
}
.comparacion_planes_tabla thead th:first-child,
.comparacion_planes_tabla tbody th {
text-align: left;
}
.comparacion_planes_tabla tbody th {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_medio );
}
.comparacion_planes_tabla tr:last-child th,
.comparacion_planes_tabla tr:last-child td {
border-bottom: none;
}
.comparacion_planes_tabla_destacada {
background: color-mix( in srgb , var( --color_principal ) 7% , transparent );
}
.comparacion_planes_tabla_si {
color: var( --color_principal );
}
.comparacion_planes_tabla_no {
color: rgba( 0 , 0 , 0 , .24 );
}
@media only screen and ( max-width: 767px ) {
.comparacion_planes {
padding: 20px 0 50px;
}
}
/* =========================================================
FUNCIONES ADICIONALES
========================================================= */
.funciones_adicionales {
background: var( --color_fondo_suave );
padding: 72px 0;
}
.funciones_adicionales_contenido {
align-items: center;
display: grid;
gap: 38px;
grid-template-columns: 1fr;
}
.funciones_adicionales_texto h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.funciones_adicionales_texto > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.75;
margin: 0 0 23px;
}
.funciones_adicionales_lista {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
margin-bottom: 25px;
}
.funciones_adicionales_lista span {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 11px;
color: var( --color_texto );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 10px;
padding: 11px 13px;
}
.funciones_adicionales_lista i {
color: var( --color_principal );
flex: 0 0 22px;
text-align: center;
}
.funciones_adicionales_texto > a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
text-decoration: none;
}
.funciones_adicionales_visual {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 50%;
box-shadow: 0 20px 60px rgba( 0 , 0 , 0 , .08 );
display: none;
height: 340px;
margin: auto;
position: relative;
width: 340px;
}
.funciones_adicionales_visual_centro {
align-items: center;
background: var( --color_principal );
border-radius: 50%;
color: var( --color_blanco );
display: flex;
height: 110px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate( -50% , -50% );
width: 110px;
}
.funciones_adicionales_visual_centro i {
font-size: 42px;
}
.funciones_adicionales_visual_elemento {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 50%;
box-shadow: 0 10px 24px rgba( 0 , 0 , 0 , .10 );
color: var( --color_principal );
display: flex;
height: 60px;
justify-content: center;
position: absolute;
width: 60px;
}
.funciones_adicionales_visual_elemento i {
font-size: 22px;
}
.funciones_adicionales_visual_elemento_uno {
left: 50%;
top: 20px;
transform: translateX( -50% );
}
.funciones_adicionales_visual_elemento_dos {
right: 20px;
top: 50%;
transform: translateY( -50% );
}
.funciones_adicionales_visual_elemento_tres {
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.funciones_adicionales_visual_elemento_cuatro {
left: 20px;
top: 50%;
transform: translateY( -50% );
}
@media only screen and ( max-width: 767px ) {
.funciones_adicionales {
padding: 20px 0 50px;
text-align: center;
}
}
@media only screen and ( min-width: 600px ) {
.funciones_adicionales_lista {
grid-template-columns: repeat( 2 , 1fr );
}
}
@media only screen and ( min-width: 992px ) {
.funciones_adicionales_contenido {
grid-template-columns: minmax( 0 , 1fr ) 420px;
}
.funciones_adicionales_visual {
display: block;
}
}
/* =========================================================
FORMULARIO DE CONTACTO
========================================================= */
.formulario_contacto_seccion {
padding: 70px 0;
}
.formulario_contacto_distribucion {
display: grid;
gap: 36px;
grid-template-columns: 1fr;
}
.opciones_contacto {
display: flex;
flex-direction: column;
gap: 16px;
}
.opcion_contacto {
align-items: flex-start;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 14px;
display: flex;
gap: 16px;
padding: 20px;
}
.opcion_contacto_icono {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 12px;
color: var( --color_principal );
display: flex;
flex: 0 0 48px;
height: 48px;
justify-content: center;
width: 48px;
}
.opcion_contacto_icono i {
font-size: 20px;
}
.opcion_contacto h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 1px 0 7px;
}
.opcion_contacto p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.65;
margin: 0;
}
.opcion_contacto a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
margin-top: 10px;
text-decoration: none;
}
.opcion_contacto a:hover {
color: var( --color_principal_oscuro );
}
.formulario_contacto_contenedor {
min-width: 0;
}
.formulario_contacto {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 18px;
box-shadow: 0 16px 45px rgba( 0 , 0 , 0 , .08 );
padding: 24px;
}
.formulario_contacto_encabezado {
margin-bottom: 26px;
}
.formulario_contacto_encabezado h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 8px;
}
.formulario_contacto_encabezado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
margin: 0;
}
.formulario_contacto_campos {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.formulario_contacto_campo {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 1em;
}
.formulario_contacto_campo > span {
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
}
.formulario_contacto_campo input,
.formulario_contacto_campo select,
.formulario_contacto_campo textarea {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .16 );
border-radius: 11px;
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: 1rem;
outline: none;
padding: 13px 14px;
transition: border-color .2s ease, box-shadow .2s ease;
width: 100%;
}
.formulario_contacto_campo textarea {
min-height: 160px;
resize: vertical;
}
.formulario_contacto_campo input:focus,
.formulario_contacto_campo select:focus,
.formulario_contacto_campo textarea:focus {
border-color: var( --color_principal );
box-shadow: 0 0 0 3px rgba( 225 , 0 , 152 , .10 );
}
.formulario_contacto_campo input::placeholder,
.formulario_contacto_campo textarea::placeholder {
color: var( --color_texto_secundario );
opacity: .72;
}
.formulario_contacto_privacidad {
align-items: flex-start;
color: var( --color_texto_secundario );
cursor: pointer;
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 10px;
line-height: 1.55;
margin: 22px 0;
}
.formulario_contacto_privacidad input {
accent-color: var( --color_principal );
flex: 0 0 auto;
height: 17px;
margin-top: 2px;
width: 17px;
}
.formulario_contacto_privacidad a {
color: var( --color_principal );
font-weight: var( --peso_seminegrita );
text-decoration: none;
}
.formulario_contacto_privacidad a:hover {
color: var( --color_principal_oscuro );
text-decoration: underline;
}
.formulario_contacto_boton {
align-items: center;
background: var( --color_principal );
border: none;
border-radius: 12px;
color: var( --color_blanco );
cursor: pointer;
display: flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 10px;
justify-content: center;
padding: 14px 20px;
transition: background .2s ease, transform .2s ease;
width: 100%;
}
.formulario_contacto_boton:hover {
background: var( --color_principal_oscuro );
transform: translateY( -1px );
}
@media only screen and ( min-width: 768px ) {
.formulario_contacto {
padding: 32px;
}
.formulario_contacto_campos {
grid-template-columns: repeat( 2 , minmax( 0 , 1fr ) );
}
.formulario_contacto_campo_completo {
grid-column: 1 / -1;
}
}
@media only screen and ( min-width: 992px ) {
.formulario_contacto_distribucion {
align-items: start;
gap: 50px;
grid-template-columns: minmax( 300px , .8fr ) minmax( 500px , 1.2fr );
}
.formulario_contacto {
padding: 36px;
}
}
/* =========================================================
AVISO HORIZONTAL INFORMATIVO CON FONDO SUAVE
========================================================= */
.aviso_horizontal_informativo_fondo_suave {
background: var( --color_fondo_suave );
padding: 48px 0;
}
.aviso_horizontal_informativo_fondo_suave_contenido {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 20px;
}
.aviso_horizontal_informativo_fondo_suave_icono {
align-items: center;
background: var( --color_principal );
border-radius: 14px;
color: var( --color_blanco );
display: flex;
flex: 0 0 58px;
height: 58px;
justify-content: center;
width: 58px;
}
.aviso_horizontal_informativo_fondo_suave_icono i {
font-size: 25px;
}
.aviso_horizontal_informativo_fondo_suave h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 8px;
}
.aviso_horizontal_informativo_fondo_suave p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
max-width: 850px;
}
@media only screen and ( max-width: 767px ) {
.aviso_horizontal_informativo_fondo_suave_contenido {
align-items: center;
text-align: center;
}
.aviso_horizontal_informativo_fondo_suave_icono {
margin: auto;
}
}
@media only screen and ( min-width: 768px ) {
.aviso_horizontal_informativo_fondo_suave_contenido {
align-items: center;
flex-direction: row;
}
}
/* =========================================================
TARJETAS VISUALES CON ENLACE
========================================================= */
.tarjetas_visuales_enlace_seccion {
padding: 34px 0;
}
.tarjetas_visuales_enlace {
display: grid;
gap: 18px;
grid-template-columns: repeat( 2 , minmax( 0 , 1fr ) );
}
.tarjetas_visuales_enlace_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 14px;
box-shadow: 0 10px 30px rgba( 0 , 0 , 0 , .08 );
color: inherit;
display: block;
min-width: 0;
overflow: hidden;
text-decoration: none;
}
.tarjetas_visuales_enlace_tarjeta:hover {
text-decoration: none;
}
.tarjetas_visuales_enlace_imagen {
overflow: hidden;
}
.tarjetas_visuales_enlace_imagen img {
display: block;
height: auto;
object-fit: cover;
transition: transform .25s ease;
width: 100%;
}
.tarjetas_visuales_enlace_tarjeta:hover
.tarjetas_visuales_enlace_imagen img {
transform: scale( 1.025 );
}
.tarjetas_visuales_enlace_informacion {
align-items: center;
background: var( --color_blanco );
display: flex;
gap: 12px;
justify-content: space-between;
padding: 14px 16px;
}
.tarjetas_visuales_enlace_titulo {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1rem;
font-weight: var( --peso_negrita );
line-height: 1.25;
}
.tarjetas_visuales_enlace_flecha {
align-items: center;
background: var( --color_fondo_suave );
border-radius: 999px;
color: var( --color_principal );
display: flex;
flex: 0 0 34px;
height: 34px;
justify-content: center;
transition: background .2s ease , color .2s ease;
width: 34px;
}
.tarjetas_visuales_enlace_tarjeta:hover
.tarjetas_visuales_enlace_flecha {
background: var( --color_principal );
color: var( --color_blanco );
}
@media only screen and ( min-width: 992px ) {
.tarjetas_visuales_enlace {
grid-template-columns: repeat( 4 , minmax( 0 , 1fr ) );
}
}
/* =========================================================
CARRUSEL DE PRODUCTOS
========================================================= */
.carrusel_productos_seccion {
padding: 34px 0;
}
.carrusel_productos_encabezado {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
margin-bottom: 28px;
}
.carrusel_productos_encabezado h2 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1.5rem;
font-weight: var( --peso_negrita );
margin: 0;
}
.carrusel_productos_encabezado > a {
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-weight: var( --peso_medio );
text-decoration: none;
}
.carrusel_productos_encabezado > a:hover {
color: var( --color_principal_oscuro );
}
.carrusel_productos_contenedor {
position: relative;
}
.carrusel_productos_carril {
display: grid;
gap: 18px;
grid-auto-columns: calc( 100% - 1px );
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.carrusel_productos_carril::-webkit-scrollbar {
display: none;
}
.carrusel_productos_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 14px;
box-shadow: 0 10px 24px rgba( 0 , 0 , 0 , .06 );
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
padding: 14px;
scroll-snap-align: start;
}
.carrusel_productos_tarjeta a {
color: inherit;
text-decoration: none;
}
.carrusel_productos_tarjeta a:hover {
text-decoration: none;
}
.carrusel_productos_media {
border-radius: 12px;
overflow: hidden;
position: relative;
}
.carrusel_productos_media img {
background: linear-gradient( 135deg , var( --color_fondo_suave ) , var( --color_blanco ) );
border-radius: 12px;
display: block;
height: 210px;
object-fit: cover;
transition: transform .25s ease;
width: 100%;
}
.carrusel_productos_tarjeta:hover
.carrusel_productos_media img {
transform: scale( 1.025 );
}
.carrusel_productos_badge {
border-radius: 999px;
color: var( --color_blanco );
font-family: var( --fuente_principal );
font-size: .85rem;
font-weight: var( --peso_negrita );
left: 10px;
padding: 6px 10px;
position: absolute;
top: 10px;
}
.carrusel_productos_badge_nuevo {
background: var( --color_principal );
}
.carrusel_productos_badge_destacado {
background: #111827;
}
.carrusel_productos_titulo {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
line-height: 1.2;
margin: 0;
min-height: 2.4em;
}
.carrusel_productos_precio {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.carrusel_productos_precio_anterior {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
text-decoration: line-through;
}
.carrusel_productos_precio_actual {
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: 1.1rem;
font-weight: var( --peso_extra_negrita );
}
.carrusel_productos_promocion {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border: 1px solid rgba( 225 , 0 , 152 , .22 );
border-radius: 999px;
color: var( --color_principal_oscuro );
display: inline-flex;
font-size: .85rem;
font-weight: var( --peso_extra_negrita );
line-height: 1;
padding: 6px 10px;
}
.carrusel_productos_boton {
align-items: center;
background: var( --color_principal );
border-radius: 12px;
color: var( --color_blanco ) !important;
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
justify-content: center;
margin-top: auto;
padding: 12px 14px;
transition: background .15s ease;
width: 100%;
}
.carrusel_productos_boton:hover {
background: var( --color_principal_oscuro );
}
.carrusel_productos_control {
align-items: center;
background: rgba( 255 , 255 , 255 , .92 );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 50%;
box-shadow: 0 6px 18px rgba( 0 , 0 , 0 , .12 );
color: var( --color_texto );
cursor: pointer;
display: flex;
height: 42px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY( -50% );
transition: background .15s ease , transform .15s ease;
width: 42px;
z-index: 5;
}
.carrusel_productos_control:hover {
background: var( --color_blanco );
transform: translateY( -50% ) scale( 1.03 );
}
.carrusel_productos_control_anterior {
left: 6px;
}
.carrusel_productos_control_siguiente {
right: 6px;
}
@media only screen and ( min-width: 768px ) {
.carrusel_productos_carril {
grid-auto-columns: calc( ( 100% - 18px ) / 2 );
}
}
@media only screen and ( min-width: 1200px ) {
.carrusel_productos_carril {
grid-auto-columns: calc( ( 100% - 54px ) / 4 );
}
}
/* =========================================================
TARJETAS CATÁLOGOS HORIZONTALES
========================================================= */
.tarjetas_catalogos_horizontales {
padding: 34px 0;
}
.tarjetas_catalogos_horizontales_encabezado {
margin-bottom: 28px;
}
.tarjetas_catalogos_horizontales_encabezado h2 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1.5rem;
font-weight: var( --peso_negrita );
margin: 0;
}
.tarjetas_catalogos_horizontales_area {
position: relative;
}
.tarjetas_catalogos_horizontales_ventana {
overflow: hidden;
}
.tarjetas_catalogos_horizontales_lista {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
.tarjetas_catalogos_horizontales_lista::-webkit-scrollbar {
display: none;
}
.tarjetas_catalogos_horizontales_item {
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 14px;
box-shadow: 0 10px 30px rgba( 0 , 0 , 0 , .08 );
flex: 0 0 calc( 100% - 18px );
overflow: hidden;
}
.tarjetas_catalogos_horizontales_item img {
display: block;
height: 260px;
object-fit: cover;
width: 100%;
}
.tarjetas_catalogos_horizontales_control {
align-items: center;
background: rgba( 255 , 255 , 255 , .85 );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 999px;
box-shadow: 0 6px 18px rgba( 0 , 0 , 0 , .12 );
cursor: pointer;
display: flex;
height: 42px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY( -50% );
transition: transform .15s ease , background .15s ease;
width: 42px;
z-index: 20;
}
.tarjetas_catalogos_horizontales_control:hover {
background: var( --color_blanco );
transform: translateY( -50% ) scale( 1.03 );
}
.tarjetas_catalogos_horizontales_control_anterior {
left: 6px;
}
.tarjetas_catalogos_horizontales_control_siguiente {
right: 6px;
}
.tarjetas_catalogos_horizontales_control i {
color: var( --color_texto );
font-size: 20px;
}
@media only screen and ( max-width: 767px ) {
.tarjetas_catalogos_horizontales_encabezado h2 {
text-align: center;
}
.tarjetas_catalogos_horizontales_item img {
height: 160px;
}
}
@media only screen and ( min-width: 768px ){
.tarjetas_catalogos_horizontales_item {
flex-basis: calc( 50% - 9px );
}
}
/* =========================================================
CARRUSEL DE GALERÍA CENTRADO
========================================================= */
.carrusel_galeria_centrado {
padding: 44px 0;
}
.carrusel_galeria_centrado_encabezado {
margin-bottom: 34px;
text-align: center;
}
.carrusel_galeria_centrado_encabezado h2 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
font-weight: var( --peso_negrita );
margin: 0;
}
.carrusel_galeria_centrado_area {
position: relative;
}
.carrusel_galeria_centrado_ventana {
overflow: hidden;
padding: 24px 0;
}
.carrusel_galeria_centrado_lista {
align-items: center;
display: flex;
gap: 16px;
overflow-x: auto;
padding: 12px 10%;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.carrusel_galeria_centrado_lista::-webkit-scrollbar {
display: none;
}
.carrusel_galeria_centrado_item {
border-radius: 18px;
box-shadow: 0 12px 30px rgba( 15 , 23 , 42 , .10 );
flex: 0 0 80%;
opacity: .78;
overflow: hidden;
scroll-snap-align: center;
transform: scale( .92 );
transition: opacity .28s ease , transform .28s ease , box-shadow .28s ease;
}
.carrusel_galeria_centrado_item_central {
box-shadow: 0 20px 45px rgba( 15 , 23 , 42 , .17 );
opacity: 1;
transform: scale( 1 );
}
.carrusel_galeria_centrado_item img {
aspect-ratio: 4 / 3;
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
.carrusel_galeria_centrado_control {
align-items: center;
background: rgba( 255 , 255 , 255 , .92 );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 999px;
box-shadow: 0 8px 24px rgba( 0 , 0 , 0 , .12 );
cursor: pointer;
display: flex;
height: 44px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY( -50% );
transition: background .2s ease , transform .2s ease;
width: 44px;
z-index: 20;
}
.carrusel_galeria_centrado_control:hover {
background: var( --color_blanco );
transform: translateY( -50% ) scale( 1.05 );
}
.carrusel_galeria_centrado_control_anterior {
left: 4px;
}
.carrusel_galeria_centrado_control_siguiente {
right: 4px;
}
.carrusel_galeria_centrado_control i {
color: var( --color_texto );
font-size: 20px;
}
@media only screen and ( min-width: 768px ) {
.carrusel_galeria_centrado_ventana {
padding: 34px 0;
}
.carrusel_galeria_centrado_lista {
gap: 20px;
padding: 16px 0;
}
.carrusel_galeria_centrado_item {
flex-basis: calc( ( 100% - 40px ) / 3 );
opacity: .72;
transform: scale( .90 );
}
.carrusel_galeria_centrado_item_central {
opacity: 1;
transform: scale( 1 );
}
.carrusel_galeria_centrado_control_anterior {
left: 10px;
}
.carrusel_galeria_centrado_control_siguiente {
right: 10px;
}
}
/* =========================================================
ENLACES CON ICONO
========================================================= */
.enlaces_icono_compactos {
background: var( --color_fondo_suave );
padding: 56px 0;
}
.enlaces_icono_compactos_encabezado {
margin-bottom: 28px;
text-align: center;
}
.enlaces_icono_compactos_encabezado h2 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
font-weight: var( --peso_negrita );
margin: 0;
}
.enlaces_icono_compactos_lista {
display: grid;
gap: 10px;
grid-template-columns: repeat( auto-fit , minmax( 0 , 165px ) );
justify-content: center;
}
.enlaces_icono_compactos_item {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 14px;
box-shadow: 0 10px 30px rgba( 0 , 0 , 0 , .08 );
color: var( --color_texto );
display: flex;
gap: 10px;
min-width: 0;
padding: 12px;
text-decoration: none;
transition: box-shadow .2s ease , transform .2s ease;
}
.enlaces_icono_compactos_item:hover {
box-shadow: 0 14px 34px rgba( 0 , 0 , 0 , .11 );
transform: translateY( -2px );
}
.enlaces_icono_compactos_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 8% , transparent );
border-radius: 999px;
color: var( --color_texto );
display: flex;
flex: 0 0 40px;
height: 40px;
justify-content: center;
width: 40px;
}
.enlaces_icono_compactos_icono i {
font-size: 18px;
line-height: 1;
}
.enlaces_icono_compactos_nombre {
font-family: var( --fuente_principal );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.enlaces_icono_compactos_accion {
color: var( --color_principal );
display: none;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_medio );
margin-left: auto;
white-space: nowrap;
}
@media only screen and ( min-width: 768px ) {
.enlaces_icono_compactos_lista {
grid-template-columns: repeat( auto-fit , 250px );
}
.enlaces_icono_compactos_item {
gap: 12px;
padding: 14px 16px;
}
.enlaces_icono_compactos_icono {
flex-basis: 44px;
height: 44px;
width: 44px;
}
.enlaces_icono_compactos_icono i {
font-size: 20px;
}
.enlaces_icono_compactos_nombre {
font-size: 1rem;
}
.enlaces_icono_compactos_accion {
display: block;
font-size: .85rem;
}
}
/* =========================================================
MAPAS
========================================================= */
.mapas {
background: linear-gradient( 180deg , var( --color_blanco ) 0% , var( --color_fondo_suave ) 100% );
padding: 56px 0;
}
.mapas_encabezado {
align-items: center;
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 30px;
text-align: center;
}
.mapas_encabezado_icono {
align-items: center;
background: linear-gradient( 135deg , var( --color_principal ) , var( --color_principal_oscuro ) );
border-radius: 14px;
box-shadow: 0 8px 22px rgba( 0 , 0 , 0 , .12 );
color: var( --color_blanco );
display: flex;
flex: 0 0 44px;
height: 44px;
justify-content: center;
width: 44px;
}
.mapas_encabezado_icono i {
font-size: 18px;
}
.mapas_encabezado h2 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
font-weight: var( --peso_negrita );
line-height: 1.2;
margin: 0;
}
.mapas_lista {
display: grid;
gap: 20px;
grid-template-columns: repeat( 6 , minmax( 0 , 1fr ) );
}
.mapas_item {
background: var( --color_blanco );
border: 1px solid rgba( 17 , 24 , 39 , .08 );
border-radius: 18px;
box-shadow: 0 12px 32px rgba( 17 , 24 , 39 , .08 );
display: flex;
flex-direction: column;
grid-column: span 6;
min-width: 0;
overflow: hidden;
transition: box-shadow .2s ease , transform .2s ease;
}
.mapas_item:hover {
box-shadow: 0 18px 42px rgba( 17 , 24 , 39 , .12 );
transform: translateY( -2px );
}
.mapas_visual {
background: #e5e7eb;
height: 250px;
overflow: hidden;
position: relative;
width: 100%;
}
.mapas_visual iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
.mapas_informacion {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
gap: 18px;
padding: 20px;
}
.mapas_informacion_texto {
min-width: 0;
}
.mapas_informacion h3 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1.1rem;
font-weight: var( --peso_negrita );
line-height: 1.35;
margin: 0;
}
.mapas_informacion p {
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.65;
margin: 8px 0 0;
opacity: .75;
}
.mapas_enlace {
align-items: center;
background: linear-gradient( 135deg , #111827 , #1f2937 );
border-radius: 10px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_principal );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
margin: auto;
padding: 10px 14px;
text-decoration: none;
transition: opacity .2s ease , transform .2s ease;
}
.mapas_enlace:hover {
color: var( --color_blanco );
opacity: .92;
transform: translateY( -1px );
}
.mapas_enlace i {
color: var( --color_principal );
}
@media only screen and ( max-width: 767px ) {
.mapas {
padding: 30px 0 50px;
}
.mapas_informacion_texto {
text-align: center;
}
}
@media only screen and ( min-width: 768px ) {
.mapas {
padding: 64px 0;
}
.mapas_item {
grid-column: span 3;
}
.mapas_lista_total_1 .mapas_item {
grid-column: span 6;
}
.mapas_lista .mapas_item:last-child:nth-child( odd ) {
grid-column: span 6;
}
.mapas_visual {
height: 280px;
}
}
@media only screen and ( min-width: 992px ) {
.mapas {
padding: 72px 0;
}
.mapas_item {
grid-column: span 2;
}
.mapas_lista_total_1 .mapas_item {
grid-column: span 6;
}
.mapas_lista_total_2 .mapas_item {
grid-column: span 3;
}
.mapas_lista_restante_1:not( .mapas_lista_total_1 ) .mapas_item:last-child {
grid-column: span 6;
}
.mapas_lista_restante_2:not( .mapas_lista_total_2 ) .mapas_item:nth-last-child( 2 ),
.mapas_lista_restante_2:not( .mapas_lista_total_2 ) .mapas_item:last-child {
grid-column: span 3;
}
.mapas_visual {
height: 290px;
}
.mapas_informacion {
padding: 22px;
}
}
/* =========================================================
NAVEGACIÓN POR CATEGORÍAS
========================================================= */
.navegacion_categorias {
padding: 36px 0 0;
}
.navegacion_categorias_lista {
display: grid;
gap: 14px;
grid-template-columns: repeat( 2 , minmax( 0 , 1fr ) );
}
.navegacion_categorias_lista a {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 14px;
color: var( --color_texto );
display: flex;
flex-direction: column;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
gap: 10px;
justify-content: center;
min-height: 110px;
padding: 18px;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}
.navegacion_categorias_lista a:hover {
border-color: var( --color_principal );
box-shadow: 0 12px 28px rgba( 0 , 0 , 0 , .07 );
color: var( --color_principal );
transform: translateY( -2px );
}
.navegacion_categorias_lista i {
color: var( --color_principal );
font-size: 25px;
}
/* =========================================================
TARJETAS CON ICONO
========================================================= */
.tarjetas_icono {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.tarjetas_icono article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 15px;
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .05 );
padding: 24px;
}
.tarjetas_icono_icono, .tarjetas_icono_enlace_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 48px;
justify-content: center;
margin-bottom: 16px;
width: 48px;
}
.tarjetas_icono h3, .tarjeta_icono_enlace h3 {
font-size: 1.1rem;
margin: 0 0 8px;
}
.tarjetas_icono p, .tarjeta_icono_enlace p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.65;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.tarjetas_icono article {
text-align: center;
}
.tarjetas_icono_icono i {
font-size: 30px;
}
}
/* =========================================================
TARJETAS CON ICONO Y ENLACE
========================================================= */
.tarjetas_icono_enlace {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.tarjeta_icono_enlace {
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
display: flex;
flex-direction: column;
padding: 26px;
}
.tarjeta_icono_enlace a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 8px;
margin-top: auto;
padding-top: 18px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.tarjeta_icono_enlace {
text-align: center;
}
.tarjetas_icono_icono, .tarjetas_icono_enlace_icono {
margin: auto auto 16px;
}
.tarjetas_icono_enlace_icono i {
font-size: 24px;
}
.tarjeta_icono_enlace a {
margin: auto;
}
}
/* =========================================================
TARJETAS NUMERADAS
========================================================= */
.tarjetas_numeradas {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.tarjeta_numerada {
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
padding: 28px;
position: relative;
}
.tarjeta_numerada_numero {
color: var( --color_principal );
display: block;
font-size: 1.8rem;
font-weight: var( --peso_negrita );
margin-bottom: 14px;
opacity: .3;
}
.tarjeta_numerada h3 {
margin: 0 0 10px;
}
.tarjeta_numerada p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.tarjeta_numerada {
text-align: center;
}
}
/* =========================================================
PASOS NUMERADOS CON ICONO
========================================================= */
.pasos_numerados_icono {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.paso_numerado {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
padding: 25px;
position: relative;
}
.paso_numerado_numero {
color: var( --color_principal );
font-size: 1.7rem;
font-weight: var( --peso_negrita );
opacity: .22;
position: absolute;
right: 20px;
top: 17px;
}
.paso_numerado_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 50px;
justify-content: center;
margin-bottom: 17px;
width: 50px;
}
.paso_numerado h3 {
font-size: 1.1rem;
margin: 0 0 9px;
}
.paso_numerado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.7;
margin: 0;
}
/* =========================================================
BENEFICIOS CON DESTACADO
========================================================= */
.beneficios_con_destacado_seccion {
padding: 70px 0;
}
.beneficios_con_destacado {
display: grid;
gap: 28px;
grid-template-columns: 1fr;
}
.beneficios_con_destacado_contenido h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 16px;
}
.beneficios_con_destacado_contenido > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 24px;
}
.beneficios_con_destacado_lista {
display: flex;
flex-direction: column;
gap: 13px;
list-style: none;
margin: 0;
padding: 0;
}
.beneficios_con_destacado_lista li {
align-items: flex-start;
color: var( --color_texto );
display: flex;
font-family: var( --fuente_secundaria );
gap: 11px;
line-height: 1.6;
}
.beneficios_con_destacado_lista li i {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 50%;
color: var( --color_principal );
display: flex;
flex: 0 0 26px;
font-size: 11px;
height: 26px;
justify-content: center;
margin-top: 1px;
width: 26px;
}
.beneficios_con_destacado_caja {
background: var( --color_principal );
border-radius: 18px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
justify-content: center;
padding: 34px;
text-align: center;
}
.beneficios_con_destacado_caja > i {
font-size: 48px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.beneficios_con_destacado_caja strong {
display: block;
font-size: 1.5rem;
margin-bottom: 12px;
}
.beneficios_con_destacado_caja p {
font-family: var( --fuente_secundaria );
line-height: 1.75;
margin: 0 0 22px;
opacity: .92;
}
.beneficios_con_destacado_caja a {
align-items: center;
align-self: flex-start;
background: var( --color_blanco );
border-radius: 11px;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 12px 17px;
text-decoration: none;
margin: 0 auto;
}
.beneficios_con_destacado_caja a:hover {
color: var( --color_principal_oscuro );
}
@media only screen and ( max-width: 767px ) {
.beneficios_con_destacado_seccion {
padding: 20px 0 50px;
}
.beneficios_con_destacado {
text-align: center;
}
.beneficios_con_destacado_lista li {
justify-content: center;
}
}
/* =========================================================
ACORDEÓN
========================================================= */
.acordeon {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 1000px;
}
.acordeon details {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 14px;
overflow: hidden;
}
.acordeon details[open] {
border-color: color-mix( in srgb , var( --color_principal ) 30% , transparent );
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .06 );
}
.acordeon summary {
align-items: center;
cursor: pointer;
display: flex;
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 18px;
justify-content: space-between;
list-style: none;
padding: 19px 20px;
}
.acordeon summary::-webkit-details-marker {
display: none;
}
.acordeon details[open] summary i {
transform: rotate( 45deg );
}
.acordeon summary i {
color: var( --color_principal );
transition: transform .2s ease;
}
.acordeon details > div {
padding: 0 20px 20px;
}
.acordeon p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.acordeon summary {
font-size: 1rem;
}
.acordeon p {
font-size: 1rem;
text-align: center;
}
}
/* =========================================================
CTA HORIZONTAL
========================================================= */
.cta_horizontal {
padding: 0 0 70px;
}
.cta_horizontal_contenido {
align-items: flex-start;
background: var( --color_texto );
border-radius: 18px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
gap: 24px;
justify-content: space-between;
padding: 32px;
}
.cta_horizontal_icono {
align-items: center;
background: var( --color_principal );
border-radius: 14px;
display: flex;
flex: 0 0 58px;
height: 58px;
justify-content: center;
width: 58px;
}
.cta_horizontal_contenido h2 {
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 0 0 10px;
}
.cta_horizontal_contenido p {
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
opacity: .82;
}
.cta_horizontal_contenido .etiqueta_front {
margin-bottom: 8px;
}
.cta_horizontal_contenido > .boton_front {
flex-shrink: 0;
}
@media only screen and ( max-width: 767px ) {
.cta_horizontal {
padding: 20px 0 50px;
}
.cta_horizontal_icono {
margin: auto;
}
.cta_horizontal_icono i {
font-size: 30px;
}
.cta_horizontal_contenido {
text-align: center;
}
.cta_horizontal_contenido > .boton_front {
margin: auto;
}
}
@media only screen and ( min-width: 768px ) {
.navegacion_categorias_lista {
grid-template-columns: repeat( 4 , minmax( 0 , 1fr ) );
}
.tarjetas_icono {
grid-template-columns: repeat( 2 , 1fr );
}
.tarjetas_icono_enlace {
grid-template-columns: repeat( 2 , 1fr );
}
.tarjetas_numeradas {
grid-template-columns: repeat( 2 , 1fr );
}
.pasos_numerados_icono {
grid-template-columns: repeat( 2 , 1fr );
}
.cta_horizontal_contenido {
align-items: center;
flex-direction: row;
padding: 42px;
margin-top: 20px;
}}
@media only screen and ( min-width: 992px ) {
.encabezado_un_boton_icono, .encabezado_dos_botones_icono {
padding: 90px 0;
}
.encabezado_un_boton_icono_contenido, .encabezado_dos_botones_icono_contenido {
grid-template-columns: minmax( 0 , 1.35fr ) minmax( 300px , .65fr );
}
.encabezado_un_boton_icono_visual, .encabezado_dos_botones_icono_visual {
display: flex;
}
.tarjetas_icono {
grid-template-columns: repeat( 4 , 1fr );
}
.tarjetas_icono_enlace {
grid-template-columns: repeat( 3 , 1fr );
}
.pasos_numerados_icono {
grid-template-columns: repeat( 4 , 1fr );
}
.beneficios_con_destacado {
grid-template-columns: minmax( 0 , 1.1fr ) minmax( 340px , .9fr );
}}
/* =========================================================
MOSAICO DE GALERÍA
========================================================= */
.mosaico_galeria {
display: grid;
gap: 16px;
grid-auto-rows: 260px;
grid-template-columns: 1fr;
}
.mosaico_galeria_elemento {
background: linear-gradient( 135deg , var( --color_principal ) , var( --color_principal_oscuro ) );
border-radius: 17px;
overflow: hidden;
position: relative;
}
.mosaico_galeria_imagen {
cursor: pointer;
height: 100%;
overflow: hidden;
transition: transform .3s ease;
width: 100%;
}
.mosaico_galeria_imagen img {
cursor: pointer;
display: block;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
.mosaico_galeria_elemento:hover .mosaico_galeria_imagen {
transform: scale( 1.035 );
}
.mosaico_galeria_informacion {
background: linear-gradient( to top , rgba( 0 , 0 , 0 , .82 ) , rgba( 0 , 0 , 0 , 0 ) );
bottom: 0;
color: var( --color_blanco );
left: 0;
padding: 60px 22px 22px;
pointer-events: none;
position: absolute;
right: 0;
}
.mosaico_galeria_informacion span {
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 7px;
opacity: .86;
text-transform: uppercase;
}
.mosaico_galeria_informacion h3 {
font-size: 1.1rem;
line-height: 1.35;
margin: 0;
padding-right: 50px;
}
.mosaico_galeria_cantidad {
align-items: center;
display: flex;
font-size: .85rem;
gap: 6px;
margin-top: 8px;
opacity: .82;
}
.mosaico_galeria_cantidad i {
font-size: .82rem;
}
.mosaico_galeria_cantidad span {
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
letter-spacing: 0;
margin: 0;
opacity: 1;
text-transform: none;
}
.mosaico_galeria_informacion button {
align-items: center;
background: rgba( 255 , 255 , 255 , .94 );
border: none;
border-radius: 50%;
bottom: 20px;
color: var( --color_principal );
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
pointer-events: auto;
position: absolute;
right: 20px;
transition: transform .18s ease, background .18s ease;
width: 40px;
}
.mosaico_galeria_informacion button:hover {
background: var( --color_blanco );
transform: scale( 1.08 );
}
/* =========================================================
VISOR DE GALERÍA
========================================================= */
.mosaico_galeria_lightbox {
align-items: center;
background: rgba( 5 , 10 , 20 , .94 );
display: none;
inset: 0;
justify-content: center;
padding: 18px;
position: fixed;
z-index: 99999;
}
.mosaico_galeria_lightbox_abierto {
display: flex;
}
.mosaico_galeria_lightbox_contenido {
display: flex;
flex-direction: column;
height: 100%;
max-height: 920px;
max-width: 1500px;
min-height: 0;
position: relative;
width: 100%;
}
.mosaico_galeria_lightbox_cerrar {
align-items: center;
background: rgba( 255 , 255 , 255 , .12 );
border: 1px solid rgba( 255 , 255 , 255 , .18 );
border-radius: 50%;
color: #ffffff;
cursor: pointer;
display: flex;
font-size: 20px;
height: 44px;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 44px;
z-index: 4;
}
.mosaico_galeria_lightbox_encabezado {
color: #ffffff;
min-height: 60px;
padding: 6px 58px 12px 4px;
}
.mosaico_galeria_lightbox_titulo {
display: block;
font-size: 1.1rem;
line-height: 1.3;
}
.mosaico_galeria_lightbox_contador {
display: block;
font-size: .85rem;
margin-top: 5px;
opacity: .72;
}
.mosaico_galeria_lightbox_visual {
align-items: center;
display: grid;
flex: 1;
gap: 10px;
grid-template-columns: 42px minmax( 0 , 1fr ) 42px;
min-height: 0;
}
.mosaico_galeria_lightbox_imagen {
align-self: center;
display: block;
height: auto;
justify-self: center;
max-height: calc( 100vh - 120px );
max-width: 100%;
object-fit: contain;
width: auto;
}
.mosaico_galeria_lightbox_anterior,
.mosaico_galeria_lightbox_siguiente {
align-items: center;
align-self: center;
background: rgba( 255 , 255 , 255 , .12 );
border: 1px solid rgba( 255 , 255 , 255 , .16 );
border-radius: 50%;
color: #ffffff;
cursor: pointer;
display: flex;
font-size: 18px;
height: 42px;
justify-content: center;
width: 42px;
}
.mosaico_galeria_lightbox_anterior[hidden],
.mosaico_galeria_lightbox_siguiente[hidden] {
visibility: hidden;
}
@media only screen and ( min-width: 768px ) {
.mosaico_galeria {
grid-template-columns: repeat( 2 , 1fr );
}
.mosaico_galeria_elemento_grande {
grid-row: span 2;
}
.mosaico_galeria_elemento_ancho {
grid-column: 1 / -1;
}
}
@media only screen and ( min-width: 992px ) {
.mosaico_galeria {
grid-template-columns: repeat( 3 , 1fr );
}
.mosaico_galeria_elemento_grande {
grid-column: span 2;
grid-row: span 2;
}
.mosaico_galeria_elemento_ancho {
grid-column: span 2;
}
}
@media only screen and ( max-width: 767px ) {
.mosaico_galeria_lightbox {
padding: 12px;
}
.mosaico_galeria_lightbox_visual {
gap: 4px;
grid-template-columns: 34px minmax( 0 , 1fr ) 34px;
}
.mosaico_galeria_lightbox_anterior,
.mosaico_galeria_lightbox_siguiente {
font-size: 14px;
height: 34px;
width: 34px;
}
.mosaico_galeria_lightbox_imagen {
max-height: calc( 100vh - 105px );
}
}
/* =========================================================
VIDEOS DESTACADOS
========================================================= */
.videos_destacados_mosaico {
display: grid;
gap: 16px;
grid-auto-rows: 260px;
grid-template-columns: 1fr;
}
.videos_destacados_elemento {
background: #111827;
border-radius: 17px;
overflow: hidden;
position: relative;
}
.videos_destacados_video {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.videos_destacados_informacion {
background: linear-gradient(
to top,
rgba( 0 , 0 , 0 , .78 ),
rgba( 0 , 0 , 0 , 0 )
);
bottom: 0;
color: var( --color_blanco );
left: 0;
padding: 60px 70px 22px 22px;
pointer-events: none;
position: absolute;
right: 0;
}
.videos_destacados_informacion span {
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 7px;
opacity: .8;
text-transform: uppercase;
}
.videos_destacados_informacion h3 {
font-size: 1.1rem;
line-height: 1.35;
margin: 0;
}
.videos_destacados_reproducir {
align-items: center;
background: rgba( 255 , 255 , 255 , .94 );
border: none;
border-radius: 50%;
bottom: 20px;
color: var( --color_principal );
cursor: pointer;
display: flex;
height: 42px;
justify-content: center;
position: absolute;
right: 20px;
transition: transform .2s ease;
width: 42px;
z-index: 2;
}
.videos_destacados_reproducir:hover {
transform: scale( 1.08 );
}
.videos_destacados_reproducir i {
font-size: 14px;
}
.videos_destacados_elemento:not( .videos_destacados_elemento_reproduciendo ) .videos_destacados_reproducir i.fa-play {
margin-left: 2px;
}
.videos_destacados_elemento_reproduciendo .videos_destacados_informacion {
opacity: .35;
transition: opacity .2s ease;
}
.videos_destacados_elemento_reproduciendo:hover .videos_destacados_informacion {
opacity: 1;
}
@media only screen and ( min-width: 768px ) {
.videos_destacados_mosaico {
grid-template-columns: repeat( 2 , 1fr );
}
.videos_destacados_elemento_grande {
grid-row: span 2;
}
.videos_destacados_elemento_ancho {
grid-column: 1 / -1;
}
}
@media only screen and ( min-width: 992px ) {
.videos_destacados_mosaico {
grid-template-columns: repeat( 3 , 1fr );
}
.videos_destacados_elemento_grande {
grid-column: span 2;
grid-row: span 2;
}
.videos_destacados_elemento_ancho {
grid-column: span 2;
}
}
/* =========================================================
LISTADO DE VIDEOS
========================================================= */
.listado_videos {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.video_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
overflow: hidden;
}
.video_tarjeta_visual {
aspect-ratio: 16 / 9;
background: linear-gradient( 135deg , var( --color_texto ) , var( --color_principal_oscuro ) );
overflow: hidden;
position: relative;
}
.video_tarjeta_video {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.video_tarjeta_reproducir {
align-items: center;
background: rgba( 255 , 255 , 255 , .94 );
border: none;
border-radius: 50%;
color: var( --color_principal );
cursor: pointer;
display: flex;
height: 46px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate( -50% , -50% );
transition: transform .2s ease;
width: 46px;
z-index: 2;
}
.video_tarjeta_reproducir:hover {
transform: translate( -50% , -50% ) scale( 1.08 );
}
.video_tarjeta_reproducir i {
font-size: 14px;
}
.video_tarjeta:not( .video_tarjeta_reproduciendo ) .video_tarjeta_reproducir i.fa-play {
margin-left: 2px;
}
.video_tarjeta_reproduciendo .video_tarjeta_reproducir {
opacity: .25;
}
.video_tarjeta_reproduciendo:hover .video_tarjeta_reproducir {
opacity: 1;
}
.video_tarjeta_contenido {
padding: 22px;
}
.video_tarjeta_contenido > span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 7px;
text-transform: uppercase;
}
.video_tarjeta_contenido h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 9px;
}
.video_tarjeta_contenido p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.65;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.video_tarjeta_contenido {
text-align: center;
}
}
@media only screen and ( min-width: 768px ) {
.listado_videos {
grid-template-columns: repeat( 2 , 1fr );
}
}
@media only screen and ( min-width: 992px ) {
.listado_videos {
grid-template-columns: repeat( 3 , 1fr );
}
}
/* =========================================================
TUTORIALES EN VIDEO
========================================================= */
.tutoriales_videos {
display: flex;
flex-direction: column;
gap: 14px;
}
.tutoriales_videos article {
align-items: center;
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 15px;
display: grid;
gap: 15px;
grid-template-columns: 48px minmax( 0 , 1fr ) auto;
padding: 18px;
position: relative;
}
.tutorial_video_numero {
color: var( --color_principal );
display: none;
font-size: 1.4rem;
font-weight: var( --peso_negrita );
opacity: .25;
}
.tutorial_video_icono {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 48px;
justify-content: center;
width: 48px;
}
.tutorial_video_icono i {
font-size: 19px;
}
.tutorial_video_contenido {
min-width: 0;
}
.tutoriales_videos h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 5px;
}
.tutoriales_videos p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.55;
margin: 0;
}
.tutorial_video_abrir {
align-items: center;
background: var( --color_principal );
border: none;
border-radius: 50%;
color: var( --color_blanco );
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 42px;
justify-content: center;
transition: transform .2s ease;
width: 42px;
}
.tutorial_video_abrir:hover {
transform: scale( 1.08 );
}
.tutorial_video_abrir i {
font-size: 13px;
margin-left: 2px;
}
.tutoriales_videos_lightbox {
align-items: center;
background: rgba( 3 , 7 , 18 , .92 );
display: flex;
inset: 0;
justify-content: center;
padding: 24px;
position: fixed;
z-index: 9999;
}
.tutoriales_videos_lightbox[hidden] {
display: none;
}
.tutoriales_videos_lightbox_contenido {
max-width: 1000px;
position: relative;
width: 100%;
}
.tutoriales_videos_lightbox_video {
aspect-ratio: 16 / 9;
background: #000;
border-radius: 18px;
overflow: hidden;
width: 100%;
}
.tutoriales_videos_lightbox_reproductor {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
.tutoriales_videos_lightbox_cerrar {
align-items: center;
background: var( --color_blanco );
border: none;
border-radius: 50%;
color: var( --color_texto );
cursor: pointer;
display: flex;
height: 42px;
justify-content: center;
position: absolute;
right: 0;
top: -54px;
width: 42px;
}
.tutoriales_videos_lightbox_cerrar i {
font-size: 17px;
}
.tutoriales_videos_lightbox_titulo {
color: var( --color_blanco );
display: block;
font-size: 1rem;
margin-top: 14px;
text-align: center;
}
body.tutoriales_videos_lightbox_abierto {
overflow: hidden;
}
@media only screen and ( min-width: 768px ) {
.tutorial_video_numero {
display: block;
}
.tutoriales_videos article {
grid-template-columns: 50px 48px minmax( 0 , 1fr ) auto;
}
}
/* =========================================================
VIDEO DE SERVICIOS
========================================================= */
.video_servicios {
align-items: center;
display: grid;
gap: 32px;
grid-template-columns: 1fr;
}
.video_servicios_contenido {
min-width: 0;
}
.video_servicios h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 10px 0 14px;
}
.video_servicios p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0 0 22px;
}
.video_servicios a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_negrita );
gap: 8px;
text-decoration: none;
}
.video_servicios a i {
font-size: .85em;
transition: transform .2s ease;
}
.video_servicios a:hover i {
transform: translateX( 4px );
}
.video_servicios_visual {
aspect-ratio: 16 / 9;
background: linear-gradient( 135deg , var( --color_texto ) , var( --color_principal_oscuro ) );
border-radius: 18px;
overflow: hidden;
position: relative;
}
.video_servicios_video {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.video_servicios_reproducir {
align-items: center;
background: rgba( 255 , 255 , 255 , .94 );
border: none;
border-radius: 50%;
color: var( --color_principal );
cursor: pointer;
display: flex;
height: 54px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate( -50% , -50% );
transition: opacity .2s ease , transform .2s ease;
width: 54px;
z-index: 2;
}
.video_servicios_reproducir:hover {
transform: translate( -50% , -50% ) scale( 1.08 );
}
.video_servicios_reproducir i {
font-size: 16px;
}
.video_servicios_reproducir i.fa-play {
margin-left: 2px;
}
.video_servicios_reproduciendo .video_servicios_reproducir {
opacity: .25;
}
.video_servicios_reproduciendo .video_servicios_visual:hover .video_servicios_reproducir {
opacity: 1;
}
@media only screen and ( max-width: 767px ) {
.video_servicios_contenido {
text-align: center;
}
}
@media only screen and ( min-width: 768px ) {
.video_servicios {
grid-template-columns: minmax( 0 , 1fr ) minmax( 0 , 1fr );
}
}
/* =========================================================
CARRUSEL DE BANNERS
========================================================= */
.carrusel_banners {
margin: 20px auto;
overflow: hidden;
width: 100%;
}
.carrusel_banners_contenedor {
position: relative;
width: 100%;
}
.carrusel_banners_carril {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
width: 100%;
}
.carrusel_banners_carril::-webkit-scrollbar {
display: none;
}
.carrusel_banners_item {
flex: 0 0 100%;
min-width: 0;
scroll-snap-align: start;
width: 100%;
}
.carrusel_banners_item picture {
display: block;
width: 100%;
}
.carrusel_banners_item img {
display: block;
height: auto;
width: 100%;
}
.carrusel_banners_control {
align-items: center;
background: rgba( 255 , 255 , 255 , .94 );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 50%;
box-shadow: 0 8px 24px rgba( 15 , 23 , 42 , .16 );
color: var( --color_texto );
cursor: pointer;
display: flex;
height: 46px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY( -50% );
transition: background .2s ease, transform .2s ease;
width: 46px;
z-index: 3;
}
.carrusel_banners_control:hover {
background: var( --color_blanco );
transform: translateY( -50% ) scale( 1.06 );
}
.carrusel_banners_control_anterior {
left: 18px;
}
.carrusel_banners_control_siguiente {
right: 18px;
}
@media only screen and ( max-width: 767px ) {
.carrusel_banners_control {
display: none;
}
}
/* =========================================================
TARJETAS DE GALERÍA
========================================================= */
.tarjetas_galeria_contenedor {
position: relative;
}
.tarjetas_galeria {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.tarjetas_galeria_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
overflow: hidden;
}
.tarjetas_galeria_imagen {
align-items: center;
aspect-ratio: 16 / 9;
background: linear-gradient(
135deg,
var( --color_principal ),
var( --color_texto )
);
border: 0;
cursor: pointer;
display: flex;
justify-content: center;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.tarjetas_galeria_imagen img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .3s ease;
width: 100%;
}
.tarjetas_galeria_imagen:hover img {
transform: scale( 1.035 );
}
.tarjetas_galeria_imagen_vacia {
cursor: default;
}
.tarjetas_galeria_imagen_vacia > i {
color: rgba( 255 , 255 , 255 , .20 );
font-size: 78px;
}
.tarjetas_galeria_imagen_accion {
align-items: center;
background: rgba( 255 , 255 , 255 , .94 );
border-radius: 50%;
bottom: 16px;
color: var( --color_principal );
display: flex;
height: 38px;
justify-content: center;
position: absolute;
right: 16px;
transition: transform .18s ease;
width: 38px;
}
.tarjetas_galeria_imagen:hover .tarjetas_galeria_imagen_accion {
transform: scale( 1.08 );
}
.tarjetas_galeria_contenido {
padding: 22px;
}
.tarjetas_galeria_etiqueta {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .06em;
margin-bottom: 8px;
text-transform: uppercase;
}
.tarjetas_galeria_contenido h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 9px;
}
.tarjetas_galeria_contenido p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
.tarjetas_galeria_ver {
align-items: center;
background: transparent;
border: 0;
color: var( --color_principal );
cursor: pointer;
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
gap: 7px;
margin-top: 16px;
padding: 0;
}
@media only screen and ( max-width: 767px ) {
.tarjetas_galeria_contenido {
text-align: center;
}
}
/* =========================================================
CARRUSEL DE TARJETAS DE GALERÍA
========================================================= */
.tarjetas_galeria_carrusel {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
.tarjetas_galeria_carrusel::-webkit-scrollbar {
display: none;
}
.tarjetas_galeria_carrusel .tarjetas_galeria_tarjeta {
flex: 0 0 88%;
}
.tarjetas_galeria_control {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 50%;
box-shadow: 0 8px 20px rgba( 0 , 0 , 0 , .10 );
color: var( --color_texto );
cursor: pointer;
display: flex;
height: 42px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY( -50% );
width: 42px;
z-index: 3;
}
.tarjetas_galeria_control_anterior {
left: -18px;
}
.tarjetas_galeria_control_siguiente {
right: -18px;
}
/* =========================================================
VISOR DE TARJETAS DE GALERÍA
========================================================= */
.tarjetas_galeria_lightbox {
align-items: center;
background: rgba( 5 , 10 , 20 , .94 );
display: none;
inset: 0;
justify-content: center;
padding: 18px;
position: fixed;
z-index: 99999;
}
.tarjetas_galeria_lightbox_abierto {
display: flex;
}
.tarjetas_galeria_lightbox_contenido {
display: flex;
flex-direction: column;
height: 100%;
max-height: 920px;
max-width: 1500px;
min-height: 0;
position: relative;
width: 100%;
}
.tarjetas_galeria_lightbox_cerrar {
align-items: center;
background: rgba( 255 , 255 , 255 , .12 );
border: 1px solid rgba( 255 , 255 , 255 , .18 );
border-radius: 50%;
color: #ffffff;
cursor: pointer;
display: flex;
font-size: 20px;
height: 44px;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 44px;
z-index: 4;
}
.tarjetas_galeria_lightbox_encabezado {
color: #ffffff;
min-height: 60px;
padding: 6px 58px 12px 4px;
}
.tarjetas_galeria_lightbox_titulo {
display: block;
font-size: 1.1rem;
line-height: 1.3;
}
.tarjetas_galeria_lightbox_contador {
display: block;
font-size: .85rem;
margin-top: 5px;
opacity: .72;
}
.tarjetas_galeria_lightbox_visual {
align-items: center;
display: grid;
flex: 1;
gap: 10px;
grid-template-columns: 42px minmax( 0 , 1fr ) 42px;
min-height: 0;
}
.tarjetas_galeria_lightbox_imagen {
align-self: center;
display: block;
height: auto;
justify-self: center;
max-height: calc( 100vh - 120px );
max-width: 100%;
object-fit: contain;
width: auto;
}
.tarjetas_galeria_lightbox_anterior,
.tarjetas_galeria_lightbox_siguiente {
align-items: center;
align-self: center;
background: rgba( 255 , 255 , 255 , .12 );
border: 1px solid rgba( 255 , 255 , 255 , .16 );
border-radius: 50%;
color: #ffffff;
cursor: pointer;
display: flex;
font-size: 18px;
height: 42px;
justify-content: center;
width: 42px;
}
.tarjetas_galeria_lightbox_anterior[hidden],
.tarjetas_galeria_lightbox_siguiente[hidden] {
visibility: hidden;
}
@media only screen and ( min-width: 768px ) {
.tarjetas_galeria_tarjetas {
grid-template-columns: repeat( 2 , 1fr );
}
.tarjetas_galeria_carrusel .tarjetas_galeria_tarjeta {
flex-basis: calc( 50% - 10px );
}
}
@media only screen and ( min-width: 992px ) {
.tarjetas_galeria_tarjetas {
grid-template-columns: repeat( 3 , 1fr );
}
.tarjetas_galeria_carrusel .tarjetas_galeria_tarjeta {
flex-basis: calc( 33.333% - 14px );
}
}
@media only screen and ( max-width: 767px ) {
.tarjetas_galeria_control {
display: none;
}
.tarjetas_galeria_lightbox {
padding: 12px;
}
.tarjetas_galeria_lightbox_visual {
gap: 4px;
grid-template-columns: 34px minmax( 0 , 1fr ) 34px;
}
.tarjetas_galeria_lightbox_anterior,
.tarjetas_galeria_lightbox_siguiente {
font-size: 14px;
height: 34px;
width: 34px;
}
.tarjetas_galeria_lightbox_imagen {
max-height: calc( 100vh - 105px );
}
}
/* =========================================================
TARJETAS DE GALERÍA COMPACTAS
========================================================= */
.tarjetas_galeria_compactas {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.tarjetas_galeria_compactas_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
overflow: hidden;
}
.tarjetas_galeria_compactas_imagen {
align-items: center;
aspect-ratio: 4 / 3;
background: linear-gradient(
135deg,
var( --color_texto ),
var( --color_principal_oscuro )
);
border: 0;
display: flex;
justify-content: center;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
button.tarjetas_galeria_compactas_imagen {
cursor: pointer;
}
.tarjetas_galeria_compactas_imagen > img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .25s ease;
width: 100%;
}
.tarjetas_galeria_compactas_imagen_vacia > i {
color: rgba( 255 , 255 , 255 , .20 );
font-size: 62px;
}
.tarjetas_galeria_compactas_imagen_accion {
align-items: center;
background: rgba( 17 , 24 , 39 , .74 );
border-radius: 50%;
color: var( --color_blanco );
display: flex;
height: 40px;
justify-content: center;
opacity: 0;
position: absolute;
right: 12px;
top: 12px;
transform: translateY( -4px );
transition: opacity .2s ease, transform .2s ease;
width: 40px;
}
.tarjetas_galeria_compactas_cantidad {
align-items: center;
background: rgba( 17 , 24 , 39 , .78 );
border-radius: 999px;
bottom: 12px;
color: var( --color_blanco );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
gap: 6px;
left: 12px;
padding: 7px 10px;
position: absolute;
}
.tarjetas_galeria_compactas_contenido {
padding: 19px;
}
.tarjetas_galeria_compactas_contenido > span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .06em;
margin-bottom: 6px;
text-transform: uppercase;
}
.tarjetas_galeria_compactas_contenido h3 {
color: var( --color_texto );
font-size: 1.1rem;
line-height: 1.4;
margin: 0;
}
@media ( hover: hover ) {
button.tarjetas_galeria_compactas_imagen:hover > img {
transform: scale( 1.035 );
}
button.tarjetas_galeria_compactas_imagen:hover
.tarjetas_galeria_compactas_imagen_accion {
opacity: 1;
transform: translateY( 0 );
}
}
@media only screen and ( max-width: 767px ) {
.tarjetas_galeria_compactas_contenido {
text-align: center;
}
}
@media only screen and ( min-width: 768px ) {
.tarjetas_galeria_compactas {
grid-template-columns: repeat( 2 , 1fr );
}
}
@media only screen and ( min-width: 992px ) {
.tarjetas_galeria_compactas {
grid-template-columns: repeat( 4 , 1fr );
}
}
/* =========================================================
CONTENIDO CON LISTA Y VISUAL
========================================================= */
.contenido_lista_visual {
align-items: stretch;
display: grid;
gap: 30px;
grid-template-columns: 1fr;
padding-bottom: 60px;
padding-top: 60px;
}
.contenido_lista_visual_contenido {
display: flex;
flex-direction: column;
justify-content: center;
}
.contenido_lista_visual h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.contenido_lista_visual p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 22px;
}
.contenido_lista_visual ul {
display: flex;
flex-direction: column;
gap: 11px;
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.contenido_lista_visual li {
align-items: center;
color: var( --color_texto );
display: flex;
font-family: var( --fuente_secundaria );
gap: 10px;
}
.contenido_lista_visual li > i {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 50%;
color: var( --color_principal );
display: flex;
flex: 0 0 26px;
font-size: 11px;
height: 26px;
justify-content: center;
width: 26px;
}
.contenido_lista_visual a {
align-items: center;
align-self: flex-start;
background: var( --color_principal );
border-radius: 12px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 13px 18px;
text-decoration: none;
}
.contenido_lista_visual_visual {
align-items: center;
aspect-ratio: 16 / 10;
background: linear-gradient(
135deg,
var( --color_principal ),
var( --color_texto )
);
border-radius: 18px;
display: flex;
justify-content: center;
overflow: hidden;
}
.contenido_lista_visual_visual > i {
color: rgba( 255 , 255 , 255 , .20 );
font-size: 110px;
}
.contenido_lista_visual_visual > img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
@media only screen and ( max-width: 767px ) {
.contenido_lista_visual {
padding-top: 20px;
}
.contenido_lista_visual_contenido {
text-align: center;
}
.contenido_lista_visual li {
justify-content: center;
}
.contenido_lista_visual a {
margin: auto;
}
.contenido_lista_visual_visual {
margin-top: 1em;
}
}
@media only screen and ( min-width: 992px ) {
.contenido_lista_visual {
grid-template-columns: minmax( 0 , .9fr ) minmax( 420px , 1.1fr );
}
}
/* =========================================================
BASE DE COMPONENTES
========================================================= */
.componente_contenedor {
margin: 0 auto;
max-width: 1440px;
width: 92%;
}
.componente_seccion {
padding: 70px 0;
}
.componente_etiqueta {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 10px;
text-transform: uppercase;
}
.componente_titulo {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 14px;
}
.componente_texto {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.componente_seccion {
padding: 20px 0 50px;
}
}
/* =========================================================
ENCABEZADO DE SECCIÓN
========================================================= */
.componente_encabezado_seccion {
margin-bottom: 36px;
max-width: 850px;
}
.componente_encabezado_seccion_centrado {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.componente_encabezado_seccion h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 14px;
}
/* =========================================================
ACORDEONES AGRUPADOS
========================================================= */
.componente_acordeones {
display: flex;
flex-direction: column;
gap: 38px;
margin: 0 auto;
max-width: 1000px;
}
.componente_acordeon_grupo h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 18px;
}
@media only screen and ( max-width: 767px ) {
.componente_acordeon_grupo h2 {
text-align: center;
}
}
.componente_acordeon {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 14px;
margin-bottom: 12px;
overflow: hidden;
}
.componente_acordeon[open] {
border-color: rgba( 225 , 0 , 152 , .30 );
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .06 );
}
.componente_acordeon summary {
align-items: center;
cursor: pointer;
display: flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 18px;
justify-content: space-between;
list-style: none;
padding: 19px 20px;
}
.componente_acordeon summary::-webkit-details-marker {
display: none;
}
.componente_acordeon summary i {
color: var( --color_principal );
transition: transform .2s ease;
}
.componente_acordeon[open] summary i {
transform: rotate( 180deg );
}
.componente_acordeon_contenido {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.75;
padding: 0 20px 20px;
}
/* =========================================================
RESPONSIVE DE COMPONENTES
========================================================= */
.pagina_front {
background: var( --color_blanco );
color: var( --color_texto );
font-family: var( --fuente_principal );
}
.contenedor_front {
margin: 0 auto;
max-width: 1440px;
width: 92%;
}
/* =========================================================
HERO
========================================================= */
.encabezado_centrado {
background: linear-gradient(
135deg,
var( --color_fondo_suave ),
var( --color_blanco )
);
padding: 64px 0;
position: relative;
text-align: center;
}
.encabezado_centrado::after {
background: var( --color_principal );
bottom: 0;
content: "";
height: 4px;
left: 50%;
position: absolute;
transform: translateX( -50% );
width: 80px;
}
.etiqueta_front {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 10px;
text-transform: uppercase;
}
@media only screen and ( max-width: 767px ) {
.etiqueta_front {
text-align: center;
}
.encabezado_centrado {
padding: 20px 0 50px;
}
}
.encabezado_centrado h1 {
color: var( --color_texto );
font-size: clamp( 2.1rem , 6vw , 4rem );
font-weight: var( --peso_negrita );
line-height: 1.1;
margin: 0 0 18px;
}
.encabezado_centrado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.75;
margin: 0 auto;
max-width: 800px;
}
/* =========================================================
BENEFICIOS
========================================================= */
.tarjetas_icono_compactas_seccion {
padding: 42px 0 0;
}
.tarjetas_icono_compactas {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.tarjetas_icono_compactas article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 15px;
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .05 );
padding: 24px;
}
.tarjetas_icono_compactas article > div {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 50px;
justify-content: center;
margin-bottom: 17px;
width: 50px;
}
.tarjetas_icono_compactas article i {
font-size: 21px;
}
.tarjetas_icono_compactas h2 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 9px;
}
.tarjetas_icono_compactas p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.tarjetas_icono_compactas article > div {
margin: auto auto 17px;
}
.tarjetas_icono_compactas article {
text-align: center;
}
}
/* =========================================================
PROMOCIÓN DESTACADA
========================================================= */
.promocion_destacada {
padding: 54px 0 0;
}
.promocion_destacada_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 20px;
box-shadow: 0 18px 46px rgba( 0 , 0 , 0 , .09 );
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
}
.promocion_destacada_imagen {
align-items: center;
background: linear-gradient(
135deg,
var( --color_principal ),
var( --color_principal_oscuro )
);
color: var( --color_blanco );
display: flex;
flex-direction: column;
justify-content: center;
min-height: 290px;
padding: 35px;
position: relative;
text-align: center;
}
.promocion_destacada_imagen > i {
color: rgba( 255 , 255 , 255 , .25 );
font-size: 105px;
margin-bottom: 24px;
}
.promocion_destacada_imagen > strong {
font-size: clamp( 1.7rem , 5vw , 2.7rem );
line-height: 1.2;
}
.promocion_destacada_imagen > span {
background: var( --color_blanco );
border-radius: 999px;
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: .76rem;
font-weight: var( --peso_negrita );
left: 18px;
padding: 7px 11px;
position: absolute;
top: 18px;
}
.promocion_destacada_contenido {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
}
.promocion_categoria {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 9px;
text-transform: uppercase;
}
.promocion_destacada_contenido h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.25;
margin: 0 0 15px;
}
.promocion_destacada_contenido p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 20px;
}
.promocion_vigencia {
align-items: center;
color: var( --color_texto_secundario );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 9px;
margin-bottom: 24px;
}
.promocion_vigencia i {
color: var( --color_principal );
}
.promocion_destacada_contenido > a {
align-items: center;
align-self: flex-start;
background: var( --color_principal );
border-radius: 12px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 13px 18px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.promocion_destacada_contenido {
text-align: center;
}
.promocion_vigencia {
margin: auto auto 24px;
}
.promocion_destacada_contenido > a {
margin: auto;
}
.listado_promociones_encabezado {
text-align: center;
}
.listado_promociones_encabezado > div {
margin: auto;
}
.listado_promociones_filtros {
justify-content: center;
}
.listado_promociones {
text-align: center;
}
.listado_promociones_vigencia {
margin-left: auto;
margin-right: auto;
}
.listado_promociones_contenido > a {
margin: auto;
}
}
/* =========================================================
LISTADO
========================================================= */
.listado_promociones_seccion {
padding: 70px 0;
}
.listado_promociones_encabezado {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 15px;
justify-content: space-between;
margin-bottom: 28px;
}
.listado_promociones_encabezado span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 8px;
text-transform: uppercase;
}
.listado_promociones_encabezado h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 0;
}
.listado_promociones_encabezado > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
max-width: 570px;
}
.listado_promociones_filtros {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 30px;
}
.listado_promociones_filtros button {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .10 );
border-radius: 999px;
color: var( --color_texto_secundario );
cursor: pointer;
font-family: var( --fuente_secundaria );
font-size: .85rem;
padding: 9px 15px;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.listado_promociones_filtros button:hover,
.listado_promociones_filtros .activo {
background: var( --color_principal );
border-color: var( --color_principal );
color: var( --color_blanco );
}
.listado_promociones {
display: grid;
gap: 21px;
grid-template-columns: 1fr;
}
.listado_promociones > article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 17px;
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .05 );
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.listado_promociones > article[hidden] {
display: none;
}
.listado_promociones > article:hover {
box-shadow: 0 17px 38px rgba( 0 , 0 , 0 , .09 );
transform: translateY( -3px );
}
.listado_promociones_superior {
align-items: center;
background: linear-gradient(
135deg,
var( --color_texto ),
var( --color_principal_oscuro )
);
display: flex;
justify-content: space-between;
min-height: 155px;
padding: 24px;
}
.listado_promociones_superior > div {
align-items: center;
background: rgba( 255 , 255 , 255 , .15 );
border-radius: 15px;
color: var( --color_blanco );
display: flex;
height: 66px;
justify-content: center;
width: 66px;
}
.listado_promociones_superior > div i {
font-size: 28px;
}
.listado_promociones_superior > span {
background: var( --color_blanco );
border-radius: 999px;
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
max-width: 150px;
padding: 7px 11px;
text-align: center;
}
.listado_promociones_contenido {
display: flex;
flex: 1;
flex-direction: column;
padding: 24px;
}
.listado_promociones > article h3 {
color: var( --color_texto );
font-size: 1.1rem;
line-height: 1.4;
margin: 0 0 10px;
}
.listado_promociones > article p {
color: var( --color_texto_secundario );
flex-grow: 1;
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0 0 17px;
}
.listado_promociones_vigencia {
align-items: flex-start;
color: var( --color_texto_secundario );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 8px;
line-height: 1.5;
margin-bottom: 19px;
}
.listado_promociones_vigencia i {
color: var( --color_principal );
margin-top: 2px;
}
.listado_promociones_contenido > a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
text-decoration: none;
}
.listado_promociones_contenido > a:hover {
color: var( --color_principal_oscuro );
}
/* =========================================================
CONDICIONES
========================================================= */
.contenido_lista_destacado_seccion {
background: var( --color_fondo_suave );
padding: 70px 0;
}
.contenido_lista_destacado {
display: grid;
gap: 30px;
grid-template-columns: 1fr;
}
.contenido_lista_destacado_texto h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.contenido_lista_destacado_texto > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 24px;
}
.contenido_lista_destacado_texto ul {
display: flex;
flex-direction: column;
gap: 11px;
list-style: none;
margin: 0 0 25px;
padding: 0;
}
.contenido_lista_destacado_texto li {
align-items: center;
color: var( --color_texto );
display: flex;
font-family: var( --fuente_secundaria );
gap: 10px;
}
.contenido_lista_destacado_texto li i {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 50%;
color: var( --color_principal );
display: flex;
flex: 0 0 26px;
font-size: 10px;
height: 26px;
justify-content: center;
width: 26px;
}
.contenido_lista_destacado_texto > a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
text-decoration: none;
}
.contenido_lista_destacado > aside {
background: var( --color_principal );
border-radius: 18px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
justify-content: center;
padding: 34px;
}
.contenido_lista_destacado > aside > i {
font-size: 60px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.contenido_lista_destacado > aside strong {
font-size: 1.5rem;
line-height: 1.35;
margin-bottom: 12px;
text-align: center;
}
.contenido_lista_destacado > aside p {
font-family: var( --fuente_secundaria );
line-height: 1.75;
margin: 0;
opacity: .92;
text-align: center;
}
@media only screen and ( max-width: 767px ) {
.contenido_lista_destacado_seccion {
padding: 20px 0 50px;
}
.contenido_lista_destacado_texto h2 {
text-align: center;
}
.contenido_lista_destacado_texto > p {
text-align: center;
}
.contenido_lista_destacado_texto li {
justify-content: center;
}
.contenido_lista_destacado_texto > a {
display: flex;
justify-content: center;
}
}
/* =========================================================
MAYOREO
========================================================= */
.cta_horizontal_claro_icono_seccion {
padding: 62px 0;
}
.cta_horizontal_claro_icono {
align-items: flex-start;
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 18px;
box-shadow: 0 12px 34px rgba( 0 , 0 , 0 , .06 );
display: grid;
gap: 20px;
grid-template-columns: 1fr;
padding: 28px;
}
.cta_horizontal_claro_icono_icono {
align-items: center;
background: var( --color_principal );
border-radius: 14px;
color: var( --color_blanco );
display: flex;
height: 60px;
justify-content: center;
width: 60px;
}
.cta_horizontal_claro_icono_icono i {
font-size: 26px;
}
.cta_horizontal_claro_icono span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 6px;
text-transform: uppercase;
}
.cta_horizontal_claro_icono h2 {
color: var( --color_texto );
font-size: 1.5rem;
line-height: 1.35;
margin: 0 0 9px;
}
.cta_horizontal_claro_icono p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
.cta_horizontal_claro_icono > a {
align-items: center;
background: var( --color_principal );
border-radius: 11px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
justify-content: center;
padding: 13px 17px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.cta_horizontal_claro_icono {
text-align: center;
}
.cta_horizontal_claro_icono_icono {
margin: auto;
}
}
/* =========================================================
PREGUNTAS
========================================================= */
.acordeon_fondo_suave_seccion {
background: var( --color_fondo_suave );
padding: 70px 0;
}
.acordeon_fondo_suave {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 1000px;
}
.acordeon_fondo_suave details {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 14px;
overflow: hidden;
}
.acordeon_fondo_suave details[open] {
border-color: rgba( 225 , 0 , 152 , .28 );
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .06 );
}
.acordeon_fondo_suave summary {
align-items: center;
color: var( --color_texto );
cursor: pointer;
display: flex;
font-family: var( --fuente_principal );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 18px;
justify-content: space-between;
line-height: 1.45;
list-style: none;
padding: 19px 20px;
}
.acordeon_fondo_suave summary::-webkit-details-marker {
display: none;
}
.acordeon_fondo_suave summary i {
color: var( --color_principal );
flex: 0 0 auto;
font-size: 14px;
transition: transform .2s ease;
}
.acordeon_fondo_suave details[open] summary i {
transform: rotate( 45deg );
}
.acordeon_fondo_suave details > div {
border-top: 1px solid rgba( 0 , 0 , 0 , .06 );
padding: 18px 20px 20px;
}
.acordeon_fondo_suave p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.acordeon_fondo_suave_seccion {
padding: 20px 0 50px;
}
}
/* =========================================================
CTA
========================================================= */
.cta_horizontal_oscuro_seccion {
padding: 70px 0;
}
.cta_horizontal_oscuro {
align-items: flex-start;
background: var( --color_texto );
border-radius: 18px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
gap: 24px;
justify-content: space-between;
padding: 32px;
}
.cta_horizontal_oscuro span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 8px;
text-transform: uppercase;
}
.cta_horizontal_oscuro h2 {
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 0 0 10px;
}
.cta_horizontal_oscuro p {
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
opacity: .82;
}
.cta_horizontal_oscuro > a {
align-items: center;
background: var( --color_principal );
border-radius: 12px;
color: var( --color_blanco );
display: inline-flex;
flex-shrink: 0;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 10px;
padding: 13px 18px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.cta_horizontal_oscuro {
text-align: center;
}
.cta_horizontal_oscuro > a {
margin: auto;
}
}
@media only screen and ( min-width: 768px ){
.tarjetas_icono_compactas {
grid-template-columns: repeat( 3 , 1fr );
}
.promocion_destacada_tarjeta {
grid-template-columns: minmax( 290px , .85fr ) minmax( 0 , 1.15fr );
}
.listado_promociones {
grid-template-columns: repeat( 2 , 1fr );
}
.listado_promociones_encabezado {
align-items: flex-end;
flex-direction: row;
}
.cta_horizontal_claro_icono {
align-items: center;
grid-template-columns: auto minmax( 0 , 1fr ) auto;
padding: 34px;
}
.cta_horizontal_oscuro {
align-items: center;
flex-direction: row;
padding: 42px;
}
}
@media only screen and ( min-width: 992px ){
.promocion_destacada_contenido {
padding: 46px;
}
.listado_promociones {
grid-template-columns: repeat( 3 , 1fr );
}
.contenido_lista_destacado {
align-items: stretch;
grid-template-columns: minmax( 0 , 1.2fr ) minmax( 320px , .8fr );
}
}
/* =========================================================
DESTACADO
========================================================= */
.listado_boletines_destacado {
padding: 54px 0 0;
}
.listado_boletines_destacado_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 19px;
box-shadow: 0 16px 42px rgba( 0 , 0 , 0 , .08 );
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
}
.listado_boletines_destacado_imagen {
align-items: center;
background: linear-gradient(
135deg,
var( --color_principal ),
var( --color_principal_oscuro )
);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 270px;
overflow: hidden;
position: relative;
}
.listado_boletines_destacado_imagen > i {
color: rgba( 255 , 255 , 255 , .23 );
font-size: 105px;
}
.listado_boletines_destacado_imagen > img {
display: block;
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
}
.listado_boletines_destacado_imagen span {
background: var( --color_blanco );
border-radius: 999px;
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
left: 18px;
padding: 7px 11px;
position: absolute;
top: 18px;
z-index: 2;
}
.listado_boletines_destacado_contenido {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
}
.listado_boletines_meta {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
}
.listado_boletines_meta span {
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .06em;
text-transform: uppercase;
}
.listado_boletines_meta time {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
}
.listado_boletines_destacado_contenido h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.25;
margin: 0 0 15px;
}
.listado_boletines_destacado_contenido p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 24px;
}
.listado_boletines_destacado_contenido > a {
align-items: center;
align-self: flex-start;
background: var( --color_principal );
border-radius: 12px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 13px 18px;
text-decoration: none;
transition: background .2s ease, transform .2s ease;
}
.listado_boletines_destacado_contenido > a:hover {
background: var( --color_principal_oscuro );
transform: translateY( -2px );
}
/* =========================================================
LISTADO
========================================================= */
.listado_boletines_seccion {
padding: 70px 0;
}
.listado_boletines_encabezado {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 15px;
justify-content: space-between;
margin-bottom: 28px;
}
.listado_boletines_encabezado span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 8px;
text-transform: uppercase;
}
.listado_boletines_encabezado h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 0;
}
.listado_boletines_encabezado > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
max-width: 570px;
}
.listado_boletines_filtros {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 30px;
}
.listado_boletines_filtros button {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .10 );
border-radius: 999px;
color: var( --color_texto_secundario );
cursor: pointer;
font-family: var( --fuente_secundaria );
font-size: .85rem;
padding: 9px 15px;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.listado_boletines_filtros button:hover,
.listado_boletines_filtros .listado_boletines_filtro_activo {
background: var( --color_principal );
border-color: var( --color_principal );
color: var( --color_blanco );
}
.listado_boletines_grid {
display: grid;
gap: 22px;
grid-template-columns: 1fr;
}
.listado_boletines_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 17px;
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .05 );
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow .2s ease, transform .2s ease;
}
.listado_boletines_tarjeta:hover {
box-shadow: 0 17px 38px rgba( 0 , 0 , 0 , .09 );
transform: translateY( -3px );
}
.listado_boletines_tarjeta_imagen {
align-items: center;
aspect-ratio: 16 / 9;
background: linear-gradient(
135deg,
var( --color_texto ),
var( --color_principal_oscuro )
);
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
}
.listado_boletines_tarjeta_imagen > i {
color: rgba( 255 , 255 , 255 , .20 );
font-size: 75px;
}
.listado_boletines_tarjeta_imagen > img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.listado_boletines_tarjeta_imagen span {
background: rgba( 255 , 255 , 255 , .94 );
border-radius: 999px;
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
left: 14px;
padding: 6px 10px;
position: absolute;
top: 14px;
z-index: 2;
}
.listado_boletines_tarjeta_contenido {
display: flex;
flex: 1;
flex-direction: column;
padding: 23px;
}
.listado_boletines_tarjeta time {
align-items: center;
color: var( --color_texto_secundario );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 7px;
margin-bottom: 12px;
}
.listado_boletines_tarjeta h3 {
color: var( --color_texto );
font-size: 1.1rem;
line-height: 1.4;
margin: 0 0 11px;
}
.listado_boletines_tarjeta h3 a {
color: inherit;
text-decoration: none;
}
.listado_boletines_tarjeta p {
color: var( --color_texto_secundario );
flex-grow: 1;
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0 0 19px;
}
.listado_boletines_tarjeta_enlace {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
text-decoration: none;
}
.listado_boletines_tarjeta_enlace:hover {
color: var( --color_principal_oscuro );
}
.listado_boletines_sin_resultados {
align-items: center;
background: var( --color_fondo_suave );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 17px;
color: var( --color_texto_secundario );
display: flex;
flex-direction: column;
gap: 13px;
justify-content: center;
min-height: 220px;
padding: 35px;
text-align: center;
}
.listado_boletines_sin_resultados[hidden] {
display: none;
}
.listado_boletines_sin_resultados i {
color: var( --color_principal );
font-size: 42px;
}
.listado_boletines_sin_resultados p {
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
.listado_boletines_tarjeta[hidden] {
display: none;
}
@media only screen and ( max-width: 767px ) {
.listado_boletines_destacado_contenido {
text-align: center;
}
.listado_boletines_meta {
justify-content: center;
}
.listado_boletines_destacado_contenido > a {
margin: auto;
}
.listado_boletines_encabezado {
text-align: center;
}
.listado_boletines_encabezado > div {
margin: auto;
text-align: center;
}
.listado_boletines_filtros {
justify-content: center;
}
.listado_boletines_tarjeta_contenido {
text-align: center;
}
.listado_boletines_tarjeta time {
justify-content: center;
}
.listado_boletines_tarjeta_enlace {
justify-content: center;
}
}
/* =========================================================
SUSCRIPCIÓN
========================================================= */
.suscripcion_correo {
background: var( --color_fondo_suave );
padding: 56px 0;
}
.suscripcion_correo_contenido {
align-items: flex-start;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 18px;
box-shadow: 0 12px 34px rgba( 0 , 0 , 0 , .06 );
display: grid;
gap: 20px;
grid-template-columns: 1fr;
padding: 28px;
}
.suscripcion_correo_icono {
align-items: center;
background: var( --color_principal );
border-radius: 14px;
color: var( --color_blanco );
display: flex;
height: 58px;
justify-content: center;
width: 58px;
}
.suscripcion_correo_icono i {
font-size: 25px;
}
.suscripcion_correo_contenido span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 5px;
text-transform: uppercase;
}
.suscripcion_correo_contenido h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 8px;
}
.suscripcion_correo_contenido p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
.suscripcion_correo_contenido form {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.suscripcion_correo_contenido input {
border: 1px solid rgba( 0 , 0 , 0 , .16 );
border-radius: 11px;
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: 1rem;
outline: none;
padding: 13px 14px;
width: 100%;
}
.suscripcion_correo_contenido input:focus {
border-color: var( --color_principal );
box-shadow: 0 0 0 3px rgba( 225 , 0 , 152 , .10 );
}
.suscripcion_correo_contenido button {
align-items: center;
background: var( --color_principal );
border: none;
border-radius: 11px;
color: var( --color_blanco );
cursor: pointer;
display: flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
justify-content: center;
padding: 13px 17px;
white-space: nowrap;
}
.suscripcion_correo_contenido button:hover {
background: var( --color_principal_oscuro );
}
@media only screen and ( max-width: 767px ) {
.suscripcion_correo_icono {
margin: auto;
}
.suscripcion_correo_contenido {
text-align: center;
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media only screen and ( min-width: 768px ){
.listado_boletines_destacado_tarjeta {
grid-template-columns: minmax( 280px , .8fr ) minmax( 0 , 1.2fr );
}
.listado_boletines_grid {
grid-template-columns: repeat( 2 , 1fr );
}
.listado_boletines_encabezado {
align-items: flex-end;
flex-direction: row;
}
.suscripcion_correo_contenido {
align-items: center;
grid-template-columns: auto minmax( 0 , 1fr );
}
.suscripcion_correo_contenido form {
grid-column: 1 / -1;
flex-direction: row;
}
.suscripcion_correo_contenido button {
flex: 0 0 auto;
}
}
@media only screen and ( min-width: 992px ){
.listado_boletines_destacado_contenido {
padding: 46px;
}
.listado_boletines_grid {
grid-template-columns: repeat( 3 , 1fr );
}
.suscripcion_correo_contenido {
grid-template-columns: auto minmax( 0 , 1fr ) minmax( 390px , .8fr );
padding: 36px;
}
.suscripcion_correo_contenido form {
grid-column: auto;
}
}
.articulo_boletin_contenedor_lectura {
max-width: 1040px;
}
/* =========================================================
ENCABEZADO
========================================================= */
.articulo_boletin_encabezado {
background: linear-gradient(
135deg,
var( --color_fondo_suave ),
var( --color_blanco )
);
padding: 38px 0 58px;
text-align: center;
}
.articulo_boletin_migas {
align-items: center;
color: var( --color_texto_secundario );
display: flex;
flex-wrap: wrap;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 8px;
justify-content: center;
margin-bottom: 30px;
}
.articulo_boletin_migas a {
color: var( --color_principal );
text-decoration: none;
}
.articulo_boletin_migas a:hover {
color: var( --color_principal_oscuro );
}
.articulo_boletin_categoria {
background: rgba( 225 , 0 , 152 , .10 );
border: 1px solid rgba( 225 , 0 , 152 , .20 );
border-radius: 999px;
color: var( --color_principal );
display: inline-block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 17px;
padding: 7px 12px;
text-transform: uppercase;
}
.articulo_boletin_encabezado h1 {
color: var( --color_texto );
font-size: clamp( 2.1rem , 6vw , 4rem );
line-height: 1.15;
margin: 0 0 20px;
}
.articulo_boletin_resumen {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1.1rem;
line-height: 1.8;
margin: 0 auto 24px;
max-width: 850px;
}
.articulo_boletin_meta {
align-items: center;
color: var( --color_texto_secundario );
display: flex;
flex-wrap: wrap;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 18px;
justify-content: center;
}
.articulo_boletin_meta span {
align-items: center;
display: flex;
gap: 7px;
}
.articulo_boletin_meta i {
color: var( --color_principal );
}
/* =========================================================
IMAGEN
========================================================= */
.articulo_boletin_imagen_principal {
margin-top: -22px;
position: relative;
z-index: 2;
}
.articulo_boletin_imagen {
align-items: center;
aspect-ratio: 16 / 7;
background: linear-gradient(
135deg,
var( --color_principal ),
var( --color_texto )
);
border-radius: 20px;
box-shadow: 0 18px 48px rgba( 0 , 0 , 0 , .14 );
display: flex;
justify-content: center;
overflow: hidden;
}
.articulo_boletin_imagen i {
color: rgba( 255 , 255 , 255 , .20 );
font-size: clamp( 75px , 14vw , 150px );
}
/* =========================================================
CUERPO
========================================================= */
.articulo_boletin_cuerpo {
padding: 64px 0 76px;
}
.articulo_boletin_layout {
align-items: start;
display: grid;
gap: 45px;
grid-template-columns: 1fr;
}
.articulo_boletin_articulo {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.9;
min-width: 0;
}
.articulo_boletin_articulo .articulo_boletin_entrada {
color: var( --color_texto );
font-size: 1.1rem;
font-weight: var( --peso_medio );
}
.articulo_boletin_articulo h2 {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-size: 1.5rem;
line-height: 1.3;
margin: 38px 0 15px;
}
.articulo_boletin_articulo p {
margin: 0 0 20px;
}
.articulo_boletin_articulo ul {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 25px;
padding-left: 23px;
}
.articulo_boletin_articulo li {
padding-left: 5px;
}
.articulo_boletin_articulo li::marker {
color: var( --color_principal );
}
.articulo_boletin_articulo blockquote {
background: var( --color_fondo_suave );
border-left: 4px solid var( --color_principal );
border-radius: 0 14px 14px 0;
margin: 32px 0;
padding: 25px;
}
.articulo_boletin_articulo blockquote > i {
color: var( --color_principal );
font-size: 25px;
margin-bottom: 12px;
}
.articulo_boletin_articulo blockquote p {
color: var( --color_texto );
font-size: 1.1rem;
font-style: italic;
margin: 0;
}
/* =========================================================
DESTACADO INTERNO
========================================================= */
.articulo_boletin_destacado {
align-items: flex-start;
background: var( --color_principal );
border-radius: 17px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
gap: 18px;
margin: 34px 0;
padding: 28px;
}
.articulo_boletin_destacado > div:first-child {
align-items: center;
background: rgba( 255 , 255 , 255 , .15 );
border-radius: 13px;
display: flex;
flex: 0 0 54px;
height: 54px;
justify-content: center;
width: 54px;
}
.articulo_boletin_destacado > div:first-child i {
font-size: 23px;
}
.articulo_boletin_destacado h3 {
color: var( --color_blanco );
font-family: var( --fuente_principal );
font-size: 1.1rem;
margin: 0 0 8px;
}
.articulo_boletin_destacado p {
color: var( --color_blanco );
line-height: 1.7;
margin: 0 0 16px;
opacity: .92;
}
.articulo_boletin_destacado a {
align-items: center;
background: var( --color_blanco );
border-radius: 10px;
color: var( --color_principal );
display: inline-flex;
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
padding: 10px 14px;
text-decoration: none;
}
/* =========================================================
COMPARTIR
========================================================= */
.articulo_boletin_compartir {
align-items: flex-start;
border-top: 1px solid rgba( 0 , 0 , 0 , .09 );
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 40px;
padding-top: 25px;
}
.articulo_boletin_compartir > span {
color: var( --color_texto );
font-family: var( --fuente_principal );
font-weight: var( --peso_seminegrita );
}
.articulo_boletin_compartir > div {
display: flex;
gap: 9px;
}
.articulo_boletin_compartir a {
align-items: center;
background: var( --color_fondo_suave );
border-radius: 50%;
color: var( --color_texto );
display: flex;
height: 42px;
justify-content: center;
text-decoration: none;
transition: background .2s ease, color .2s ease;
width: 42px;
}
.articulo_boletin_compartir a:hover {
background: var( --color_principal );
color: var( --color_blanco );
}
/* =========================================================
LATERAL
========================================================= */
.articulo_boletin_lateral {
display: flex;
flex-direction: column;
gap: 20px;
}
.articulo_boletin_lateral_caja {
background: var( --color_fondo_suave );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 16px;
padding: 24px;
}
.articulo_boletin_lateral_titulo {
color: var( --color_texto );
display: block;
font-size: 1rem;
font-weight: var( --peso_negrita );
margin-bottom: 15px;
}
.articulo_boletin_lateral_caja nav {
display: flex;
flex-direction: column;
gap: 5px;
}
.articulo_boletin_lateral_caja nav a {
border-radius: 9px;
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.5;
padding: 9px 11px;
text-decoration: none;
}
.articulo_boletin_lateral_caja nav a:hover {
background: var( --color_blanco );
color: var( --color_principal );
}
.articulo_boletin_lateral_contacto {
background: var( --color_texto );
color: var( --color_blanco );
}
.articulo_boletin_lateral_contacto > i {
color: var( --color_principal );
font-size: 34px;
margin-bottom: 16px;
}
.articulo_boletin_lateral_contacto h2 {
font-size: 1.5rem;
margin: 0 0 9px;
}
.articulo_boletin_lateral_contacto p {
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.65;
margin: 0 0 18px;
opacity: .82;
}
.articulo_boletin_lateral_contacto a {
align-items: center;
background: var( --color_principal );
border-radius: 10px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
padding: 10px 14px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.articulo_boletin_lateral_contacto {
text-align: center;
}
.articulo_boletin_compartir > span {
margin: auto;
text-align: center;
}
.articulo_boletin_compartir > div {
margin: auto;
}
}
/* =========================================================
RELACIONADOS
========================================================= */
.articulo_boletin_relacionados {
background: var( --color_fondo_suave );
padding: 68px 0;
}
.articulo_boletin_relacionados_encabezado {
margin-bottom: 30px;
text-align: center;
}
.articulo_boletin_relacionados_encabezado span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 8px;
text-transform: uppercase;
}
.articulo_boletin_relacionados_encabezado h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 0;
}
.articulo_boletin_relacionados_grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.articulo_boletin_relacionados_grid article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 16px;
display: flex;
flex-direction: column;
padding: 25px;
}
.articulo_boletin_relacionados_grid article > div {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 50px;
justify-content: center;
margin-bottom: 17px;
margin-left: auto;
margin-right: auto;
width: 50px;
}
.articulo_boletin_relacionados_grid article > div i {
font-size: 30px;
}
.articulo_boletin_relacionados_grid article > span {
color: var( --color_principal );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .06em;
margin-bottom: 8px;
text-transform: uppercase;
text-align: center;
}
.articulo_boletin_relacionados_grid h3 {
color: var( --color_texto );
flex-grow: 1;
font-size: 1.1rem;
line-height: 1.45;
margin: 0 0 18px;
text-align: center;
}
.articulo_boletin_relacionados_grid a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 8px;
margin: auto;
text-decoration: none;
}
.articulo_boletin_volver {
margin-top: 34px;
text-align: center;
}
.articulo_boletin_volver a {
align-items: center;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
text-decoration: none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media only screen and ( min-width: 768px ){
.articulo_boletin_destacado {
flex-direction: row;
}
.articulo_boletin_compartir {
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.articulo_boletin_relacionados_grid {
grid-template-columns: repeat( 2 , 1fr );
}
}
@media only screen and ( min-width: 992px ){
.articulo_boletin_layout {
grid-template-columns: minmax( 0 , 1fr ) 280px;
}
.articulo_boletin_lateral {
position: sticky;
top: 24px;
}
.articulo_boletin_relacionados_grid {
grid-template-columns: repeat( 3 , 1fr );
}
}
/* =========================================================
LISTADO DE SUCURSALES
========================================================= */
.listado_sucursales_seccion {
padding: 70px 0;
}
.listado_sucursales_encabezado {
margin-bottom: 38px;
max-width: 820px;
}
.listado_sucursales_encabezado > span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 10px;
text-transform: uppercase;
}
.listado_sucursales_encabezado h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.listado_sucursales_encabezado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0;
}
.listado_sucursales_grid {
display: flex;
flex-wrap: wrap;
gap: 22px;
justify-content: center;
}
.listado_sucursales_tarjeta {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 18px;
box-shadow: 0 12px 34px rgba( 0 , 0 , 0 , .06 );
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 26px;
transition: box-shadow .2s ease, transform .2s ease;
width: 100%;
}
.listado_sucursales_tarjeta:hover {
box-shadow: 0 18px 42px rgba( 0 , 0 , 0 , .10 );
transform: translateY( -3px );
}
.listado_sucursales_superior {
align-items: center;
border-bottom: 1px solid rgba( 0 , 0 , 0 , .07 );
display: flex;
gap: 16px;
margin-bottom: 23px;
padding-bottom: 21px;
}
.listado_sucursales_icono {
align-items: center;
background: var( --color_principal );
border-radius: 14px;
color: var( --color_blanco );
display: flex;
flex: 0 0 58px;
height: 58px;
justify-content: center;
width: 58px;
}
.listado_sucursales_icono i {
font-size: 24px;
}
.listado_sucursales_superior span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .06em;
margin-bottom: 4px;
text-transform: uppercase;
}
.listado_sucursales_superior h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0;
}
.listado_sucursales_datos {
display: flex;
flex-direction: column;
gap: 18px;
}
.listado_sucursales_dato {
align-items: flex-start;
display: flex;
gap: 13px;
}
.listado_sucursales_dato > i {
color: var( --color_principal );
flex: 0 0 24px;
font-size: 18px;
margin-top: 3px;
text-align: center;
}
.listado_sucursales_dato strong {
color: var( --color_texto );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
margin-bottom: 4px;
}
.listado_sucursales_dato p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.listado_sucursales_dato small {
color: var( --color_texto_secundario );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
line-height: 1.5;
margin-top: 3px;
opacity: .8;
}
.listado_sucursales_dato a {
color: var( --color_principal );
text-decoration: none;
}
.listado_sucursales_dato a:hover {
color: var( --color_principal_oscuro );
text-decoration: underline;
}
.listado_sucursales_servicios {
background: var( --color_fondo_suave );
border-radius: 13px;
margin-top: 23px;
padding: 18px;
}
.listado_sucursales_servicios > strong {
color: var( --color_texto );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
margin-bottom: 11px;
}
.listado_sucursales_servicios ul {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.listado_sucursales_servicios li {
align-items: center;
color: var( --color_texto_secundario );
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 9px;
}
.listado_sucursales_servicios li i {
align-items: center;
background: rgba( 225 , 0 , 152 , .11 );
border-radius: 50%;
color: var( --color_principal );
display: flex;
flex: 0 0 22px;
font-size: 9px;
height: 22px;
justify-content: center;
width: 22px;
}
.listado_sucursales_acciones {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
margin-top: 22px;
}
.listado_sucursales_boton {
align-items: center;
border-radius: 11px;
display: flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 9px;
justify-content: center;
padding: 12px 15px;
text-decoration: none;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.listado_sucursales_boton_mapa {
background: var( --color_principal );
border: 1px solid var( --color_principal );
color: var( --color_blanco );
}
.listado_sucursales_boton_mapa:hover {
background: var( --color_principal_oscuro );
border-color: var( --color_principal_oscuro );
color: var( --color_blanco );
}
.listado_sucursales_boton_whatsapp {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .12 );
color: var( --color_texto );
}
.listado_sucursales_boton_whatsapp:hover {
border-color: var( --color_principal );
color: var( --color_principal );
}
@media only screen and ( max-width: 767px ) {
.listado_sucursales_seccion {
padding: 20px 0 50px;
}
}
@media only screen and ( min-width: 768px ) {
.listado_sucursales_tarjeta {
flex: 0 0 calc( 50% - 11px );
width: auto;
}
}
@media only screen and ( min-width: 992px ) {
.listado_sucursales_tarjeta {
flex: 0 0 calc( ( 100% - 44px ) / 3 );
width: auto;
}
.listado_sucursales_tarjeta:only-child {
flex: 0 0 100%;
}
}
/* =========================================================
MAPA VISUAL DE SUCURSALES
========================================================= */
.mapa_sucursales_visual_seccion {
background: var( --color_fondo_suave );
padding: 70px 0;
}
.mapa_sucursales_visual_grid {
align-items: stretch;
display: grid;
gap: 34px;
grid-template-columns: 1fr;
}
.mapa_sucursales_visual_contenido {
display: flex;
flex-direction: column;
justify-content: center;
}
.mapa_sucursales_visual_contenido h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.mapa_sucursales_visual_contenido > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 22px;
}
.mapa_sucursales_visual_contenido ul {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
margin: 0 0 25px;
padding: 0;
}
.mapa_sucursales_visual_contenido li {
align-items: center;
color: var( --color_texto );
display: flex;
font-family: var( --fuente_secundaria );
gap: 10px;
}
.mapa_sucursales_visual_contenido li i {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 50%;
color: var( --color_principal );
display: flex;
font-size: 10px;
height: 25px;
justify-content: center;
width: 25px;
}
.mapa_sucursales_visual_contenido > a {
align-items: center;
align-self: flex-start;
background: var( --color_principal );
border-radius: 11px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 12px 17px;
text-decoration: none;
}
.mapa_sucursales_visual_mapa {
align-items: center;
background: linear-gradient( rgba( 255 , 255 , 255 , .75 ) , rgba( 255 , 255 , 255 , .75 ) ),
repeating-linear-gradient( 0deg , transparent , transparent 39px , rgba( 0 , 0 , 0 , .06 ) 40px ),
repeating-linear-gradient( 90deg , transparent , transparent 39px , rgba( 0 , 0 , 0 , .06 ) 40px );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 20px;
box-shadow: 0 14px 38px rgba( 0 , 0 , 0 , .07 );
display: flex;
justify-content: center;
min-height: 420px;
overflow: hidden;
padding: 34px;
position: relative;
}
.mapa_sucursales_visual_centro {
align-items: center;
color: rgba( 0 , 0 , 0 , .08 );
display: flex;
inset: 0;
justify-content: center;
pointer-events: none;
position: absolute;
}
.mapa_sucursales_visual_centro i {
font-size: 150px;
}
.mapa_sucursales_visual_puntos {
align-items: center;
display: grid;
gap: 18px;
grid-template-columns: repeat( auto-fit , minmax( 190px , 1fr ) );
position: relative;
width: 100%;
z-index: 2;
}
.mapa_sucursales_visual_punto {
align-items: center;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 999px;
box-shadow: 0 9px 24px rgba( 0 , 0 , 0 , .12 );
display: flex;
gap: 8px;
min-width: 0;
padding: 10px 14px;
}
.mapa_sucursales_visual_punto i {
color: var( --color_principal );
flex: 0 0 auto;
font-size: 20px;
}
.mapa_sucursales_visual_punto span {
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media only screen and ( max-width: 767px ) {
.mapa_sucursales_visual_seccion {
padding: 20px 0 50px;
}
.mapa_sucursales_visual_contenido {
text-align: center;
}
.mapa_sucursales_visual_contenido li {
margin: auto;
}
.mapa_sucursales_visual_contenido > a {
margin: auto;
}
}
/* =========================================================
TARJETAS CON ICONO CENTRADAS
========================================================= */
.tarjetas_icono_centradas_seccion {
padding: 70px 0;
}
.tarjetas_icono_centradas_grid {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.tarjetas_icono_centradas_grid article {
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 15px;
padding: 26px;
text-align: center;
}
.tarjetas_icono_centradas_grid article > i {
color: var( --color_principal );
font-size: 34px;
margin-bottom: 18px;
}
.tarjetas_icono_centradas_grid h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 10px;
}
.tarjetas_icono_centradas_grid p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.tarjetas_icono_centradas_seccion {
padding: 20px 0 50px;
}
}
@media only screen and ( min-width: 600px ) {
.listado_sucursales_acciones {
grid-template-columns: repeat( 2 , 1fr );
}
}
@media only screen and ( min-width: 768px ) {
.listado_sucursales_grid {
grid-template-columns: repeat( 2 , minmax( 0 , 1fr ) );
}
.tarjetas_icono_centradas_grid {
grid-template-columns: repeat( 3 , 1fr );
}
}
@media only screen and ( min-width: 992px ) {
.listado_sucursales_grid {
grid-template-columns: repeat( 3 , minmax( 0 , 1fr ) );
}
.mapa_sucursales_visual_grid {
grid-template-columns: minmax( 320px , .75fr ) minmax( 500px , 1.25fr );
}
}
/* =========================================================
FORMULARIO DE COTIZACIÓN COMPLETO
========================================================= */
.formulario_cotizacion_completo_seccion {
padding: 70px 0;
}
.formulario_cotizacion_completo_grid {
display: grid;
gap: 36px;
grid-template-columns: 1fr;
}
.formulario_cotizacion_completo_informacion h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.formulario_cotizacion_completo_informacion > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 30px;
}
.formulario_cotizacion_completo_recomendaciones {
display: flex;
flex-direction: column;
gap: 14px;
}
.formulario_cotizacion_completo_recomendaciones article {
align-items: flex-start;
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 14px;
display: flex;
gap: 15px;
padding: 18px;
}
.formulario_cotizacion_completo_recomendaciones article > span {
align-items: center;
background: var( --color_principal );
border-radius: 10px;
color: var( --color_blanco );
display: flex;
flex: 0 0 42px;
font-size: .85rem;
font-weight: var( --peso_negrita );
height: 42px;
justify-content: center;
width: 42px;
}
.formulario_cotizacion_completo_recomendaciones h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 6px;
}
.formulario_cotizacion_completo_recomendaciones p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.formulario_cotizacion_completo {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 18px;
box-shadow: 0 16px 45px rgba( 0 , 0 , 0 , .08 );
padding: 24px;
}
.formulario_cotizacion_completo_encabezado {
margin-bottom: 26px;
}
.formulario_cotizacion_completo_encabezado h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 8px;
}
.formulario_cotizacion_completo_encabezado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
margin: 0;
}
.formulario_cotizacion_completo_campos {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.formulario_cotizacion_completo_campo {
display: flex;
flex-direction: column;
gap: 8px;
}
.formulario_cotizacion_completo_campo > span {
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_seminegrita );
}
.formulario_cotizacion_completo_campo input,
.formulario_cotizacion_completo_campo select,
.formulario_cotizacion_completo_campo textarea {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .16 );
border-radius: 11px;
color: var( --color_texto );
font-family: var( --fuente_secundaria );
font-size: 1rem;
outline: none;
padding: 13px 14px;
transition: border-color .2s ease, box-shadow .2s ease;
width: 100%;
}
.formulario_cotizacion_completo_campo textarea {
min-height: 140px;
resize: vertical;
}
.formulario_cotizacion_completo_campo input:focus,
.formulario_cotizacion_completo_campo select:focus,
.formulario_cotizacion_completo_campo textarea:focus {
border-color: var( --color_principal );
box-shadow: 0 0 0 3px color-mix( in srgb , var( --color_principal ) 10% , transparent );
}
.formulario_cotizacion_completo_privacidad {
align-items: flex-start;
color: var( --color_texto_secundario );
cursor: pointer;
display: flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 10px;
line-height: 1.55;
margin: 22px 0;
}
.formulario_cotizacion_completo_privacidad input {
accent-color: var( --color_principal );
flex: 0 0 auto;
height: 17px;
margin-top: 2px;
width: 17px;
}
.formulario_cotizacion_completo_privacidad a {
color: var( --color_principal );
font-weight: var( --peso_seminegrita );
text-decoration: none;
}
.formulario_cotizacion_completo_boton {
align-items: center;
background: var( --color_principal );
border: none;
border-radius: 12px;
color: var( --color_blanco );
cursor: pointer;
display: flex;
font-family: var( --fuente_secundaria );
font-size: 1rem;
font-weight: var( --peso_seminegrita );
gap: 10px;
justify-content: center;
padding: 14px 20px;
transition: background .2s ease, transform .2s ease;
width: 100%;
}
.formulario_cotizacion_completo_boton:hover {
background: var( --color_principal_oscuro );
transform: translateY( -1px );
}
/* =========================================================
PROCESO DE COTIZACIÓN
========================================================= */
.proceso_cotizacion_seccion {
background: var( --color_fondo_suave );
padding: 70px 0;
}
.proceso_cotizacion_encabezado {
margin-bottom: 36px;
text-align: center;
}
.proceso_cotizacion_encabezado span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 9px;
text-transform: uppercase;
}
.proceso_cotizacion_encabezado h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
margin: 0;
}
.proceso_cotizacion_grid {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.proceso_cotizacion_grid article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 15px;
padding: 25px;
position: relative;
}
.proceso_cotizacion_numero {
color: var( --color_principal );
font-size: 2rem;
font-weight: var( --peso_negrita );
opacity: .2;
position: absolute;
right: 18px;
top: 14px;
}
.proceso_cotizacion_grid article > i {
color: var( --color_principal );
font-size: 30px;
margin-bottom: 18px;
}
.proceso_cotizacion_grid h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 9px;
}
.proceso_cotizacion_grid p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.65;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.proceso_cotizacion_seccion {
padding: 20px 0 50px;
}
}
/* =========================================================
AVISO HORIZONTAL INFORMATIVO
========================================================= */
.aviso_horizontal_informativo_seccion {
padding: 52px 0;
}
.aviso_horizontal_informativo {
align-items: flex-start;
border: 1px solid rgba( 0 , 0 , 0 , .08 );
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 18px;
padding: 28px;
}
.aviso_horizontal_informativo_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 13px;
color: var( --color_principal );
display: flex;
flex: 0 0 54px;
height: 54px;
justify-content: center;
width: 54px;
}
.aviso_horizontal_informativo_icono i {
font-size: 22px;
}
.aviso_horizontal_informativo h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 8px;
}
.aviso_horizontal_informativo p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.aviso_horizontal_informativo {
align-items: center;
text-align: center;
}
}
@media only screen and ( min-width: 768px ) {
.formulario_cotizacion_completo_campos {
grid-template-columns: repeat( 2 , minmax( 0 , 1fr ) );
}
.formulario_cotizacion_completo_campo_completo {
grid-column: 1 / -1;
}
.proceso_cotizacion_grid {
grid-template-columns: repeat( 2 , 1fr );
}
.aviso_horizontal_informativo {
align-items: center;
flex-direction: row;
}
}
@media only screen and ( min-width: 992px ) {
.formulario_cotizacion_completo_grid {
align-items: start;
gap: 50px;
grid-template-columns: minmax( 320px , .8fr ) minmax( 520px , 1.2fr );
}
.formulario_cotizacion_completo {
padding: 36px;
}
.proceso_cotizacion_grid {
grid-template-columns: repeat( 4 , 1fr );
}
}
/* =========================================================
TARJETAS DE CLIENTES DE MAYOREO
========================================================= */
.tarjetas_clientes_mayoreo_seccion {
padding: 70px 0;
}
.tarjetas_clientes_mayoreo {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.tarjetas_clientes_mayoreo article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 16px;
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .05 );
padding: 26px;
text-align: center;
transition: box-shadow .2s ease, transform .2s ease;
}
.tarjetas_clientes_mayoreo article:hover {
box-shadow: 0 16px 36px rgba( 0 , 0 , 0 , .09 );
transform: translateY( -3px );
}
.tarjetas_clientes_mayoreo_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 13px;
color: var( --color_principal );
display: flex;
height: 54px;
justify-content: center;
margin-bottom: 18px;
margin-left: auto;
margin-right: auto;
width: 54px;
}
.tarjetas_clientes_mayoreo_icono i {
font-size: 22px;
}
.tarjetas_clientes_mayoreo h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 10px;
}
.tarjetas_clientes_mayoreo p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.tarjetas_clientes_mayoreo_seccion {
padding: 20px 0 50px;
}
.tarjetas_clientes_mayoreo_icono i {
font-size: 30px;
}
}
/* =========================================================
VENTAJAS DE MAYOREO
========================================================= */
.ventajas_mayoreo_seccion {
background: var( --color_fondo_suave );
padding: 70px 0;
}
.ventajas_mayoreo {
display: grid;
gap: 28px;
grid-template-columns: 1fr;
}
.ventajas_mayoreo_contenido h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.ventajas_mayoreo_contenido > p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0 0 26px;
}
.ventajas_mayoreo_contenido ul {
display: flex;
flex-direction: column;
gap: 15px;
list-style: none;
margin: 0;
padding: 0;
}
.ventajas_mayoreo_contenido li {
align-items: flex-start;
display: flex;
gap: 12px;
}
.ventajas_mayoreo_contenido li > i {
align-items: center;
background: var( --color_principal );
border-radius: 50%;
color: var( --color_blanco );
display: flex;
flex: 0 0 27px;
font-size: 11px;
height: 27px;
justify-content: center;
margin-top: 2px;
width: 27px;
}
.ventajas_mayoreo_contenido strong {
color: var( --color_texto );
display: block;
font-size: 1rem;
margin-bottom: 4px;
}
.ventajas_mayoreo_contenido li span {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.6;
}
.ventajas_mayoreo_destacado {
background: var( --color_principal );
border-radius: 18px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
justify-content: center;
padding: 34px;
}
.ventajas_mayoreo_destacado > span {
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 12px;
opacity: .8;
text-transform: uppercase;
}
.ventajas_mayoreo_destacado > strong {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 14px;
}
.ventajas_mayoreo_destacado p {
font-family: var( --fuente_secundaria );
line-height: 1.75;
margin: 0 0 22px;
opacity: .92;
}
.ventajas_mayoreo_destacado a {
align-items: center;
align-self: flex-start;
background: var( --color_blanco );
border-radius: 11px;
color: var( --color_principal );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 12px 17px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.ventajas_mayoreo_seccion {
padding: 20px 0 50px;
}
.ventajas_mayoreo_destacado {
text-align: center;
}
.ventajas_mayoreo_contenido h2 {
text-align: center;
}
.ventajas_mayoreo_contenido > p {
text-align: center;
}
.ventajas_mayoreo_destacado a {
margin: auto;
}
}
/* =========================================================
PROCESO DE MAYOREO
========================================================= */
.proceso_mayoreo_seccion {
padding: 70px 0;
}
.proceso_mayoreo {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.proceso_mayoreo article {
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 15px;
padding: 25px;
position: relative;
}
.proceso_mayoreo_numero {
color: var( --color_principal );
font-size: 2rem;
font-weight: var( --peso_negrita );
opacity: .2;
position: absolute;
right: 18px;
top: 14px;
}
.proceso_mayoreo_icono {
align-items: center;
background: color-mix( in srgb , var( --color_principal ) 10% , transparent );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 50px;
justify-content: center;
margin-bottom: 18px;
width: 50px;
}
.proceso_mayoreo_icono i {
font-size: 20px;
}
.proceso_mayoreo h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 9px;
}
.proceso_mayoreo p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.65;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.proceso_mayoreo_seccion {
padding: 20px 0 50px;
}
}
/* =========================================================
REQUISITOS DE MAYOREO
========================================================= */
.requisitos_mayoreo_seccion {
background: var( --color_fondo_suave );
padding: 70px 0;
}
.requisitos_mayoreo {
display: grid;
gap: 34px;
grid-template-columns: 1fr;
}
.requisitos_mayoreo > div:first-child h2 {
color: var( --color_texto );
font-size: clamp( 1.7rem , 4vw , 2.5rem );
line-height: 1.2;
margin: 0 0 15px;
}
.requisitos_mayoreo > div:first-child p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.8;
margin: 0;
}
.requisitos_mayoreo_listado {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
}
.requisitos_mayoreo_listado article {
align-items: flex-start;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 14px;
display: flex;
gap: 15px;
padding: 19px;
}
.requisitos_mayoreo_listado article > i {
color: var( --color_principal );
flex: 0 0 28px;
font-size: 23px;
margin-top: 3px;
text-align: center;
}
.requisitos_mayoreo_listado h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 6px;
}
.requisitos_mayoreo_listado p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
@media only screen and ( max-width: 767px ) {
.requisitos_mayoreo_seccion {
padding: 20px 0 50px;
}
.requisitos_mayoreo > div:first-child h2 {
text-align: center;
}
.requisitos_mayoreo > div:first-child p {
text-align: center;
}
}
@media only screen and ( min-width: 768px ) {
.tarjetas_clientes_mayoreo {
grid-template-columns: repeat( 2 , 1fr );
}
.proceso_mayoreo {
grid-template-columns: repeat( 2 , 1fr );
}
.requisitos_mayoreo_listado {
grid-template-columns: repeat( 2 , 1fr );
}
}
@media only screen and ( min-width: 992px ) {
.tarjetas_clientes_mayoreo {
grid-template-columns: repeat( 4 , 1fr );
}
.ventajas_mayoreo {
align-items: stretch;
grid-template-columns: minmax( 0 , 1.25fr ) minmax( 320px , .75fr );
}
.proceso_mayoreo {
grid-template-columns: repeat( 4 , 1fr );
}
.requisitos_mayoreo {
align-items: start;
grid-template-columns: minmax( 280px , .7fr ) minmax( 0 , 1.3fr );
}
}
/* =========================================================
ENCABEZADO DOCUMENTO LEGAL
========================================================= */
.encabezado_documento_legal {
background: linear-gradient(
135deg,
var( --color_fondo_suave ),
var( --color_blanco )
);
padding: 65px 0;
position: relative;
text-align: center;
}
.encabezado_documento_legal::after {
background: var( --color_principal );
bottom: 0;
content: "";
height: 4px;
left: 50%;
position: absolute;
transform: translateX( -50% );
width: 80px;
}
.encabezado_documento_legal_lectura {
max-width: 980px;
}
.encabezado_documento_legal_icono {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 50%;
color: var( --color_principal );
display: flex;
height: 72px;
justify-content: center;
margin: 0 auto 19px;
width: 72px;
}
.encabezado_documento_legal_icono i {
font-size: 30px;
}
.encabezado_documento_legal_etiqueta {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .08em;
margin-bottom: 10px;
text-transform: uppercase;
}
.encabezado_documento_legal h1 {
color: var( --color_texto );
font-size: clamp( 2.1rem , 6vw , 4rem );
line-height: 1.12;
margin: 0 0 18px;
}
.encabezado_documento_legal p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.8;
margin: 0 auto 22px;
max-width: 820px;
}
.encabezado_documento_legal_actualizacion {
align-items: center;
color: var( --color_texto_secundario );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-size: .85rem;
gap: 8px;
}
.encabezado_documento_legal_actualizacion i {
color: var( --color_principal );
}
/* =========================================================
RESUMEN DOCUMENTO LEGAL
========================================================= */
.resumen_documento_legal_seccion {
padding: 42px 0 42px;
}
.resumen_documento_legal {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
.resumen_documento_legal article {
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .07 );
border-radius: 15px;
box-shadow: 0 10px 28px rgba( 0 , 0 , 0 , .05 );
padding: 23px;
text-align: center;
}
.resumen_documento_legal article > div {
align-items: center;
background: rgba( 225 , 0 , 152 , .10 );
border-radius: 12px;
color: var( --color_principal );
display: flex;
height: 48px;
justify-content: center;
margin: auto auto 16px;
width: 48px;
}
.resumen_documento_legal article i {
font-size: 20px;
}
.resumen_documento_legal h2 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 0 0 8px;
}
.resumen_documento_legal p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: 1rem;
line-height: 1.65;
margin: 0;
}
/* =========================================================
DOCUMENTO LEGAL
========================================================= */
.documento_legal_seccion {
padding: 70px 0;
}
.documento_legal_layout {
align-items: start;
display: grid;
gap: 42px;
grid-template-columns: 1fr;
}
.documento_legal_indice {
display: none;
}
.documento_legal_indice_caja {
background: var( --color_fondo_suave );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 16px;
padding: 23px;
position: sticky;
top: 24px;
max-height: calc( 100vh - 48px );
overflow-y: auto;
}
.documento_legal_indice_caja > span {
color: var( --color_texto );
display: block;
font-size: 1rem;
font-weight: var( --peso_negrita );
margin-bottom: 14px;
}
.documento_legal_indice nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.documento_legal_indice a {
border-radius: 8px;
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
font-size: .85rem;
line-height: 1.4;
padding: 8px 10px;
text-decoration: none;
}
.documento_legal_indice a:hover {
background: var( --color_blanco );
color: var( --color_principal );
}
.documento_legal {
min-width: 0;
}
.documento_legal section {
border-bottom: 1px solid rgba( 0 , 0 , 0 , .08 );
padding: 0 0 40px;
scroll-margin-top: 24px;
}
.documento_legal section + section {
padding-top: 40px;
}
.documento_legal section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.documento_legal_numero {
color: var( --color_principal );
display: block;
font-size: 1.8rem;
font-weight: var( --peso_negrita );
margin-bottom: 8px;
opacity: .25;
}
.documento_legal h2 {
color: var( --color_texto );
font-size: 1.5rem;
line-height: 1.3;
margin: 0 0 16px;
}
.documento_legal h3 {
color: var( --color_texto );
font-size: 1.1rem;
margin: 26px 0 11px;
}
.documento_legal p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.85;
margin: 0 0 18px;
}
.documento_legal ul {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 20px;
padding-left: 22px;
}
.documento_legal li {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.65;
padding-left: 4px;
}
.documento_legal li::marker {
color: var( --color_principal );
}
.documento_legal_aviso {
align-items: flex-start;
background: var( --color_fondo_suave );
border-left: 4px solid var( --color_principal );
border-radius: 0 14px 14px 0;
display: flex;
gap: 13px;
margin-bottom: 40px;
padding: 20px;
}
.documento_legal_aviso i {
color: var( --color_principal );
flex: 0 0 auto;
font-size: 21px;
margin-top: 2px;
}
.documento_legal_aviso p {
color: var( --color_texto );
font-size: 1rem;
line-height: 1.65;
margin: 0;
}
.documento_legal_pendientes {
background: var( --color_fondo_suave );
border-radius: 14px;
margin-top: 24px;
padding: 22px;
}
.documento_legal_pendientes > strong {
color: var( --color_texto );
display: block;
margin-bottom: 11px;
}
.documento_legal_pendientes ul {
margin-bottom: 0;
}
.documento_legal_destacado {
align-items: flex-start;
background: var( --color_principal );
border-radius: 16px;
color: var( --color_blanco );
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 28px;
padding: 25px;
}
.documento_legal_destacado > i {
font-size: 35px;
}
.documento_legal_destacado strong {
display: block;
font-size: 1.1rem;
margin-bottom: 6px;
}
.documento_legal_destacado p {
color: var( --color_blanco );
line-height: 1.65;
margin: 0;
opacity: .9;
}
.documento_legal_boton {
align-items: center;
background: var( --color_principal );
border-radius: 11px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
padding: 12px 17px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.documento_legal h2 {
text-align: center;
}
}
/* =========================================================
CTA DOCUMENTO LEGAL
========================================================= */
.cta_documento_legal_seccion {
background: var( --color_fondo_suave );
padding: 55px 0;
}
.cta_documento_legal {
align-items: flex-start;
background: var( --color_blanco );
border: 1px solid rgba( 0 , 0 , 0 , .06 );
border-radius: 18px;
box-shadow: 0 12px 34px rgba( 0 , 0 , 0 , .06 );
display: grid;
gap: 20px;
grid-template-columns: 1fr;
padding: 28px;
}
.cta_documento_legal_icono {
align-items: center;
background: var( --color_principal );
border-radius: 14px;
color: var( --color_blanco );
display: flex;
height: 58px;
justify-content: center;
width: 58px;
}
.cta_documento_legal_icono i {
font-size: 25px;
}
.cta_documento_legal span {
color: var( --color_principal );
display: block;
font-family: var( --fuente_secundaria );
font-size: .85rem;
font-weight: var( --peso_negrita );
letter-spacing: .07em;
margin-bottom: 5px;
text-transform: uppercase;
}
.cta_documento_legal h2 {
color: var( --color_texto );
font-size: 1.5rem;
margin: 0 0 8px;
}
.cta_documento_legal p {
color: var( --color_texto_secundario );
font-family: var( --fuente_secundaria );
line-height: 1.7;
margin: 0;
}
.cta_documento_legal > a {
align-items: center;
background: var( --color_principal );
border-radius: 11px;
color: var( --color_blanco );
display: inline-flex;
font-family: var( --fuente_secundaria );
font-weight: var( --peso_seminegrita );
gap: 9px;
justify-content: center;
padding: 13px 18px;
text-decoration: none;
}
@media only screen and ( max-width: 767px ) {
.cta_documento_legal {
text-align: center;
}
.cta_documento_legal_icono {
margin: auto;
}
}
/* =========================================================
RESPONSIVE DOCUMENTO LEGAL
========================================================= */
@media only screen and ( min-width: 650px ){
.resumen_documento_legal {
grid-template-columns: repeat( 2 , 1fr );
}
.documento_legal_destacado {
flex-direction: row;
}
}
@media only screen and ( min-width: 768px ){
.cta_documento_legal {
align-items: center;
grid-template-columns: auto minmax( 0 , 1fr ) auto;
padding: 34px;
}
}
@media only screen and ( min-width: 992px ){
.resumen_documento_legal {
grid-template-columns: repeat( 4 , 1fr );
}
.documento_legal_layout {
grid-template-columns: 250px minmax( 0 , 1fr );
}
.documento_legal_indice {
display: block;
}
}
/* =========================================================
AJUSTE DE ESPACIADO EN MÓVIL
========================================================= */
@media only screen and ( max-width: 767px ) {
.encabezado_un_boton_icono, .encabezado_dos_botones_icono {
padding: 20px 0 50px;
}
.encabezado_dos_botones_icono_tarjetas {
padding: 20px 0 50px;
}
.formulario_contacto_seccion {
padding: 20px 0 50px;
}
.beneficios_con_destacado_seccion {
padding: 20px 0 50px;
}
.componente_seccion {
padding: 20px 0 50px;
}
.listado_promociones_seccion {
padding: 20px 0 50px;
}
.contenido_lista_destacado_seccion {
padding: 20px 0 50px;
}
.acordeon_fondo_suave_seccion {
padding: 20px 0 50px;
}
.cta_horizontal_oscuro_seccion {
padding: 20px 0 50px;
}
.listado_boletines_seccion {
padding: 20px 0 50px;
}
.listado_sucursales_seccion {
padding: 20px 0 50px;
}
.mapa_sucursales_visual_seccion {
padding: 20px 0 50px;
}
.tarjetas_icono_centradas_seccion {
padding: 20px 0 50px;
}
.formulario_cotizacion_completo_seccion {
padding: 20px 0 50px;
}
.proceso_cotizacion_seccion {
padding: 20px 0 50px;
}
.tarjetas_clientes_mayoreo_seccion {
padding: 20px 0 50px;
}
.ventajas_mayoreo_seccion {
padding: 20px 0 50px;
}
.proceso_mayoreo_seccion {
padding: 20px 0 50px;
}
.requisitos_mayoreo_seccion {
padding: 20px 0 50px;
}
.documento_legal_seccion {
padding: 20px 0 50px;
}
}