/* ==========================================================
VISIO DESIGN SYSTEM v2.1
PERFORMANCE + ACCESSIBILITY
Reemplaza por completo el CSS adicional anterior.
========================================================== */
:root{
--visio-gold:#CF9C5A;
--visio-gold-dark:#8A6238;
--visio-gold-text:#76512D;
--visio-black:#000000;
--visio-dark:#171717;
--visio-text-dark:#242424;
--visio-text:#484848;
--visio-muted:#626262;
--visio-beige:#F8F5F0;
--visio-border:#E8E0D4;
--visio-white:#FFFFFF;
--visio-font:Raleway,sans-serif;
--visio-content:1200px;
--visio-reading:960px;
--visio-section-space:70px;
--visio-section-space-mobile:48px;
--visio-radius:0;
--visio-shadow:
0 8px 22px rgba(0,0,0,.05);
}
/* ==========================================================
BASE
========================================================== */
*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
}
button,
a{
-webkit-tap-highlight-color:transparent;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible){
outline:none;
}
button:focus-visible,
a:focus-visible{
outline:2px solid var(--visio-gold);
outline-offset:3px;
}
img{
max-width:100%;
height:auto;
}
#nuestros-servicios{
scroll-margin-top:120px;
}
/* ==========================================================
SECCIONES Y CONTENEDORES
========================================================== */
.visio-section{
width:100%;
padding-top:var(--visio-section-space);
padding-bottom:var(--visio-section-space);
}
.visio-section-sm{
padding-top:42px;
padding-bottom:42px;
}
.visio-section-lg{
padding-top:90px;
padding-bottom:90px;
}
.visio-container{
width:100%;
max-width:var(--visio-content);
margin:0 auto;
padding-left:24px;
padding-right:24px;
}
.visio-reading{
width:100%;
max-width:var(--visio-reading);
}
.visio-reading-center{
width:100%;
max-width:var(--visio-reading);
margin-left:auto;
margin-right:auto;
text-align:center;
}
.visio-section-intro{
width:100%;
max-width:var(--visio-reading);
margin-bottom:40px;
}
.visio-bg-white{
background:var(--visio-white);
}
.visio-bg-beige{
background:var(--visio-beige);
}
.visio-bg-black{
background:var(--visio-black);
}
.visio-bg-dark{
background:var(--visio-dark);
}
/* ==========================================================
TIPOGRAFÍA GENERAL
========================================================== */
.visio-tag{
margin:0 0 8px;
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-size:10px;
font-weight:600;
line-height:1.4;
letter-spacing:.12em;
text-transform:uppercase;
}
/* Dorado original cuando está sobre fondos oscuros */
.visio-bg-black .visio-tag,
.visio-bg-dark .visio-tag{
color:var(--visio-gold);
}
.visio-tag-light{
color:rgba(255,255,255,.92);
}
.visio-title{
margin:0 0 18px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:24px;
font-weight:600;
line-height:1.3;
}
.visio-title-large{
margin:0 0 18px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:34px;
font-weight:700;
line-height:1.2;
}
.visio-subtitle{
margin:0 0 12px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:17px;
font-weight:600;
line-height:1.5;
}
.visio-intro{
max-width:var(--visio-reading);
margin:0 0 28px;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:14px;
font-weight:400;
line-height:1.8;
}
.visio-text{
margin:0 0 14px;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:14px;
font-weight:400;
line-height:1.8;
}
.visio-small{
margin:0;
color:var(--visio-muted);
font-family:var(--visio-font);
font-size:12px;
line-height:1.7;
}
.visio-strong{
color:var(--visio-black);
font-weight:600;
}
.visio-white-text{
color:var(--visio-white);
}
.visio-muted-text{
color:var(--visio-muted);
}
.visio-gold-text{
color:var(--visio-gold-text);
}
/* ==========================================================
LISTAS Y ENLACES
========================================================== */
.visio-list{
margin:24px 0;
padding-left:20px;
}
.visio-list li{
margin-bottom:5px;
padding-left:3px;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:14px;
line-height:1.9;
}
.visio-list li::marker{
color:var(--visio-gold-text);
}
.visio-list-check{
margin:24px 0;
padding:0;
list-style:none;
}
.visio-list-check li{
position:relative;
margin-bottom:12px;
padding-left:24px;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:14px;
line-height:1.7;
}
.visio-list-check li::before{
content:"✓";
position:absolute;
top:0;
left:0;
color:var(--visio-gold-text);
font-weight:700;
}
.visio-link{
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-weight:600;
text-decoration:none;
}
.visio-link:hover{
text-decoration:underline;
}
/* ==========================================================
GRID
========================================================== */
.visio-grid{
display:grid;
gap:22px;
width:100%;
}
.visio-grid-2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.visio-grid-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.visio-grid-4{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.visio-grid-align-center{
align-items:center;
}
/* ==========================================================
CARDS
========================================================== */
.visio-card{
height:100%;
padding:24px 22px;
background:var(--visio-white);
border:1px solid var(--visio-border);
border-radius:var(--visio-radius);
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
.visio-card-gold{
border-top:3px solid var(--visio-gold);
}
.visio-card-shadow{
box-shadow:var(--visio-shadow);
}
.visio-card-beige{
background:var(--visio-beige);
}
.visio-card-dark{
background:var(--visio-dark);
border-color:rgba(255,255,255,.12);
}
.visio-card-hover{
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
.visio-card:hover{
transform:translateY(-3px);
border-color:var(--visio-gold);
box-shadow:
0 10px 22px rgba(0,0,0,.06);
}
.visio-card-number{
display:block;
margin:0 0 14px;
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-size:11px;
font-weight:700;
line-height:1.4;
letter-spacing:.1em;
}
.visio-card-title{
margin:0 0 8px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:17px;
font-weight:700;
line-height:1.4;
}
.visio-card-subtitle{
margin:0 0 14px;
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-size:12px;
font-weight:600;
line-height:1.5;
}
.visio-card-text{
margin:0;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:13px;
font-weight:400;
line-height:1.75;
}
.visio-card-dark .visio-card-title{
color:var(--visio-white);
}
.visio-card-dark .visio-card-text{
color:rgba(255,255,255,.88);
}
/* ==========================================================
FEATURE CARDS
========================================================== */
.visio-feature-grid{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:24px;
width:100%;
margin-top:36px;
margin-bottom:40px;
}
.visio-feature-card{
height:100%;
padding:30px;
background:var(--visio-white);
border:1px solid var(--visio-border);
}
.visio-feature-number{
display:block;
margin-bottom:18px;
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-size:12px;
font-weight:600;
letter-spacing:.12em;
}
.visio-feature-title{
margin:0 0 12px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:20px;
font-weight:600;
line-height:1.35;
}
.visio-feature-text{
margin:0;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:14px;
line-height:1.8;
}
/* ==========================================================
NOTAS Y CALLOUT
========================================================== */
.visio-note{
margin-top:28px;
padding:18px 20px;
background:var(--visio-beige);
border-left:3px solid var(--visio-gold);
}
.visio-note-white{
background:var(--visio-white);
}
.visio-note p,
.visio-note-text{
margin:0;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:13px;
font-weight:400;
line-height:1.75;
}
.visio-note strong{
color:var(--visio-black);
font-weight:600;
}
.visio-highlight{
padding:22px 24px;
background:var(--visio-white);
border:1px solid var(--visio-border);
border-left:4px solid var(--visio-gold);
box-shadow:
0 6px 18px rgba(0,0,0,.04);
}
.visio-callout-wrap{
display:flex;
justify-content:flex-start;
width:100%;
margin-top:8px;
margin-bottom:40px;
}
.visio-callout{
width:100%;
max-width:760px;
padding:36px;
background:var(--visio-dark);
border:none;
}
.visio-callout-title{
margin:0 0 14px;
color:var(--visio-white);
font-family:var(--visio-font);
font-size:20px;
font-weight:600;
line-height:1.4;
letter-spacing:.02em;
}
.visio-callout-text{
margin:0;
color:rgba(255,255,255,.88);
font-family:var(--visio-font);
font-size:14px;
line-height:1.8;
}
/* ==========================================================
BOTONES
========================================================== */
.visio-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:14px 30px;
background:var(--visio-gold);
border:1px solid var(--visio-gold);
/*
* IMPORTANTE:
* texto oscuro sobre dorado para cumplir contraste WCAG.
*/
color:#171717;
font-family:var(--visio-font);
font-size:12px;
font-weight:700;
line-height:1.2;
letter-spacing:.06em;
text-transform:uppercase;
text-decoration:none;
cursor:pointer;
transition:
background .25s ease,
border-color .25s ease,
color .25s ease,
transform .25s ease;
}
.visio-button:hover{
background:#C18E4D;
border-color:#C18E4D;
color:#111111;
transform:translateY(-1px);
}
.visio-button-white{
background:var(--visio-white);
border-color:var(--visio-white);
color:var(--visio-gold-text);
}
.visio-button-white:hover{
background:var(--visio-beige);
border-color:var(--visio-beige);
color:var(--visio-gold-text);
}
.visio-button-outline{
background:transparent;
border-color:var(--visio-gold-text);
color:var(--visio-gold-text);
}
.visio-button-outline:hover{
background:var(--visio-gold);
border-color:var(--visio-gold);
color:#171717;
}
.visio-button-outline-light{
background:transparent;
border-color:rgba(255,255,255,.85);
color:var(--visio-white);
}
.visio-button-outline-light:hover{
background:var(--visio-white);
border-color:var(--visio-white);
color:var(--visio-dark);
}
.visio-button-dark{
background:var(--visio-black);
border-color:var(--visio-black);
color:var(--visio-white);
}
.visio-button-dark:hover{
background:#292929;
border-color:#292929;
color:var(--visio-white);
}
.visio-button-group{
display:flex;
flex-wrap:wrap;
gap:12px;
}
/* ==========================================================
PROCESO
========================================================== */
.visio-process{
counter-reset:visio-process;
}
.visio-process-card{
position:relative;
height:100%;
padding:24px 22px;
background:var(--visio-white);
border:1px solid var(--visio-border);
}
.visio-process-number{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
margin-bottom:16px;
background:var(--visio-gold);
color:#171717;
font-family:var(--visio-font);
font-size:12px;
font-weight:700;
}
.visio-process-title{
margin:0 0 9px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:17px;
font-weight:700;
line-height:1.4;
}
.visio-process-text{
margin:0;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:13px;
line-height:1.75;
}
/* ==========================================================
FAQ
========================================================== */
.visio-faq{
width:100%;
margin-top:40px;
}
.visio-faq-item{
border-bottom:
1px solid var(--visio-border);
}
.visio-faq-item:first-child{
border-top:
1px solid var(--visio-border);
}
.visio-faq-question{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:22px 0;
background:transparent;
border:0;
color:var(--visio-text-dark);
font-family:var(--visio-font);
font-size:17px;
font-weight:600;
line-height:1.5;
text-align:left;
cursor:pointer;
transition:color .25s ease;
}
.visio-faq-question:hover,
.visio-faq-item.active
.visio-faq-question{
background:transparent;
color:var(--visio-gold-text);
}
.visio-faq-icon{
flex:0 0 auto;
margin-left:20px;
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-size:28px;
font-weight:300;
line-height:1;
transition:
transform .25s ease;
}
.visio-faq-answer{
display:none;
max-width:900px;
padding:
0 50px 24px 0;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:16px;
line-height:1.8;
}
.visio-faq-item.active
.visio-faq-answer{
display:block;
}
.visio-faq-item.active
.visio-faq-icon{
transform:rotate(45deg);
}
.visio-faq-question:focus,
.visio-faq-question:active{
background:transparent;
border:0;
box-shadow:none;
}
.visio-faq-question:focus-visible{
outline:
2px solid var(--visio-gold-text);
outline-offset:4px;
}
/* ==========================================================
HERO GENERAL
========================================================== */
.visio-hero{
position:relative;
width:100%;
min-height:520px;
display:flex;
align-items:center;
padding:90px 0;
overflow:hidden;
background:var(--visio-black);
}
.visio-hero-content{
position:relative;
z-index:2;
width:100%;
max-width:720px;
}
.visio-hero-tag{
margin:0 0 12px;
color:var(--visio-gold);
font-family:var(--visio-font);
font-size:10px;
font-weight:600;
line-height:1.4;
letter-spacing:.14em;
text-transform:uppercase;
}
.visio-hero-title{
margin:0 0 20px;
color:var(--visio-white);
font-family:var(--visio-font);
font-size:46px;
font-weight:700;
line-height:1.12;
}
.visio-hero-text{
max-width:650px;
margin:0 0 30px;
color:rgba(255,255,255,.90);
font-family:var(--visio-font);
font-size:16px;
font-weight:400;
line-height:1.75;
}
.visio-hero-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
}
.visio-hero-meta{
margin-top:20px;
color:rgba(255,255,255,.82);
font-family:var(--visio-font);
font-size:12px;
line-height:1.6;
}
/* ==========================================================
HERO EN WIDGET HTML
========================================================== */
.elementor-widget-html
.visio-hero-content{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
width:100%;
max-width:700px;
}
.elementor-widget-html
.visio-hero-content
.visio-hero-tag,
.elementor-widget-html
.visio-hero-content
.visio-hero-title,
.elementor-widget-html
.visio-hero-content
.visio-hero-text{
margin:0;
}
.elementor-widget-html
.visio-hero-content
.visio-hero-title{
max-width:650px;
font-size:32px;
font-weight:600;
line-height:1.25;
}
.elementor-widget-html
.visio-hero-content
.visio-hero-text{
max-width:560px;
color:#D1D1D1;
font-size:14px;
line-height:1.7;
}
.elementor-widget-html
.visio-hero-content
.visio-button{
width:auto;
min-height:auto;
margin-top:8px;
padding:13px 28px;
}
/* ==========================================================
HERO HOME
========================================================== */
.visio-home-hero{
max-width:900px;
padding:90px 0 80px;
}
.visio-home-tag{
display:inline-block;
margin-bottom:18px;
color:var(--visio-gold);
font-family:var(--visio-font);
font-size:12px;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
}
.visio-home-title{
max-width:900px;
margin:0 0 24px;
color:var(--visio-white);
font-family:var(--visio-font);
font-size:58px;
font-weight:600;
line-height:1.12;
}
.visio-home-title span{
color:var(--visio-gold);
}
.visio-home-text{
max-width:720px;
margin:0 0 40px;
color:rgba(255,255,255,.90);
font-family:var(--visio-font);
font-size:19px;
line-height:1.8;
}
.visio-home-buttons{
display:flex;
flex-wrap:wrap;
gap:18px;
}
/* ==========================================================
INFO BAR
========================================================== */
.visio-info-bar,
.confianza{
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:12px;
padding:22px 0;
border-top:
1px solid #ECE7DF;
border-bottom:
1px solid #ECE7DF;
}
.visio-info-item,
.conf-item{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:13px;
line-height:1.5;
text-align:center;
}
.visio-info-item span,
.conf-item span{
color:var(--visio-gold-text);
font-size:15px;
font-weight:600;
}
.visio-info-item a,
.conf-item a{
color:inherit;
text-decoration:none;
transition:
color .25s ease;
}
.visio-info-item a:hover,
.conf-item a:hover{
color:var(--visio-gold-text);
}
/* ==========================================================
CTA
========================================================== */
.visio-cta{
width:100%;
padding:64px 32px;
/*
* Fondo más oscuro que el dorado principal
* para permitir texto blanco accesible.
*/
background:#805A33;
text-align:center;
}
.visio-cta-inner{
max-width:820px;
margin:0 auto;
}
.visio-cta .visio-tag{
margin-bottom:14px;
color:#FFFFFF;
}
.visio-cta-title{
max-width:820px;
margin:
0 auto 16px;
color:var(--visio-white);
font-family:var(--visio-font);
font-size:34px;
font-weight:700;
line-height:1.2;
}
.visio-cta-text{
max-width:700px;
margin:
0 auto 30px;
color:#FFFFFF;
font-family:var(--visio-font);
font-size:16px;
line-height:1.8;
}
.visio-cta-text strong{
color:var(--visio-white);
font-weight:700;
}
.visio-cta-buttons{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:14px;
}
.visio-cta
.visio-button-white{
background:var(--visio-white);
border-color:var(--visio-white);
color:#65431F;
}
.visio-cta
.visio-button-white:hover{
background:var(--visio-beige);
border-color:var(--visio-beige);
color:#65431F;
transform:
translateY(-2px);
}
.visio-cta-contact{
margin-top:22px;
color:#FFFFFF;
font-family:var(--visio-font);
font-size:14px;
line-height:1.6;
}
.visio-cta-contact a,
.visio-cta-contact strong{
color:var(--visio-white);
font-weight:700;
text-decoration:none;
}
.visio-cta-contact a:hover{
text-decoration:underline;
}
/* ==========================================================
COLUMNAS / SERVICIOS
========================================================== */
.visio-column-block{
height:100%;
padding:28px 26px;
background:var(--visio-white);
border-top:
3px solid var(--visio-gold);
}
.visio-column-label{
margin:0 0 8px;
color:var(--visio-gold-text);
font-family:var(--visio-font);
font-size:10px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
}
.visio-column-title{
margin:0 0 16px;
color:var(--visio-black);
font-family:var(--visio-font);
font-size:20px;
font-weight:600;
line-height:1.4;
}
.visio-column-text{
margin:0;
color:var(--visio-text);
font-family:var(--visio-font);
font-size:14px;
font-weight:400;
line-height:1.75;
}
/* Enlaces "Conocer..." */
.visio-column-block a{
color:var(--visio-gold-text) !important;
font-weight:600;
text-decoration:none;
}
.visio-column-block a:hover{
color:#5F3F21 !important;
text-decoration:underline;
}
/* ==========================================================
DIVISORES
========================================================== */
.visio-divider{
width:100%;
height:1px;
margin:28px 0;
background:var(--visio-border);
border:0;
}
.visio-divider-gold{
width:42px;
height:2px;
margin:18px 0 24px;
background:var(--visio-gold);
border:0;
}
/* ==========================================================
HEADER
========================================================== */
.visio-site-header{
position:relative;
z-index:1000;
width:100%;
background:var(--visio-white);
border-bottom:
1px solid var(--visio-border);
}
.visio-header-inner{
width:100%;
max-width:var(--visio-content);
min-height:96px;
margin:0 auto;
padding:0 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}
.visio-header-logo{
flex:0 0 auto;
}
.visio-header-logo img{
display:block;
width:auto;
max-width:145px;
height:auto;
}
.visio-header-menu{
flex:1 1 auto;
}
.visio-header-menu
.elementor-nav-menu{
display:flex;
align-items:center;
justify-content:center;
gap:28px;
}
.visio-header-menu
.elementor-item{
padding:12px 0;
color:var(--visio-dark);
font-family:var(--visio-font);
font-size:13px;
font-weight:500;
}
.visio-header-menu
.elementor-item:hover,
.visio-header-menu
.elementor-item.elementor-item-active{
color:var(--visio-gold-text);
}
.visio-header-cta{
flex:0 0 auto;
}
.visio-header-cta
.elementor-button{
min-height:42px;
padding:13px 22px;
background:var(--visio-gold);
border:
1px solid var(--visio-gold);
border-radius:0;
color:#171717;
font-family:var(--visio-font);
font-size:11px;
font-weight:700;
line-height:1.2;
letter-spacing:.04em;
text-transform:uppercase;
transition:.2s ease;
}
.visio-header-cta
.elementor-button:hover{
background:#C18E4D;
border-color:#C18E4D;
color:#111111;
}
/* ==========================================================
UTILIDADES
========================================================== */
.visio-center{
text-align:center;
}
.visio-left{
text-align:left;
}
.visio-full-width{
width:100%;
}
.visio-no-margin{
margin:0 !important;
}
.visio-mt-0{
margin-top:0 !important;
}
.visio-mt-16{
margin-top:16px !important;
}
.visio-mt-24{
margin-top:24px !important;
}
.visio-mt-32{
margin-top:32px !important;
}
.visio-mt-40{
margin-top:40px !important;
}
.visio-mb-0{
margin-bottom:0 !important;
}
.visio-mb-16{
margin-bottom:16px !important;
}
.visio-mb-24{
margin-bottom:24px !important;
}
.visio-mb-32{
margin-bottom:32px !important;
}
.visio-mb-40{
margin-bottom:40px !important;
}
/* ==========================================================
TABLET
========================================================== */
@media(max-width:1024px){
.visio-grid-3,
.visio-grid-4,
.visio-feature-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.visio-hero{
min-height:480px;
}
.visio-hero-title{
font-size:40px;
}
.visio-header-inner{
min-height:82px;
padding-left:20px;
padding-right:20px;
}
.visio-header-logo img{
max-width:130px;
}
.visio-header-menu
.elementor-nav-menu{
gap:18px;
}
}
/* ==========================================================
MÓVIL
========================================================== */
@media(max-width:768px){
.visio-section,
.visio-section-sm,
.visio-section-lg{
padding-top:
var(--visio-section-space-mobile);
padding-bottom:
var(--visio-section-space-mobile);
}
.visio-container{
padding-left:20px;
padding-right:20px;
}
.visio-title{
font-size:22px;
}
.visio-title-large{
font-size:27px;
}
.visio-subtitle{
font-size:16px;
}
.visio-grid-2,
.visio-grid-3,
.visio-grid-4,
.visio-feature-grid{
grid-template-columns:1fr;
}
.visio-grid{
gap:16px;
}
.visio-card,
.visio-process-card,
.visio-feature-card{
padding:24px;
}
.visio-feature-grid{
gap:18px;
margin-top:28px;
margin-bottom:28px;
}
.visio-button-group,
.visio-hero-actions,
.visio-home-buttons{
flex-direction:column;
align-items:stretch;
}
.visio-button-group
.visio-button,
.visio-hero-actions
.visio-button,
.visio-home-buttons
.visio-button{
width:100%;
text-align:center;
}
.visio-hero{
min-height:auto;
padding:70px 0;
}
.visio-hero-title{
font-size:34px;
}
.visio-hero-text{
font-size:15px;
}
.elementor-widget-html
.visio-hero-content
.visio-hero-title{
font-size:24px;
}
.elementor-widget-html
.visio-hero-content
.visio-hero-text{
font-size:13px;
}
.elementor-widget-html
.visio-hero-content
.visio-button{
width:auto;
}
.visio-home-hero{
padding:60px 0;
}
.visio-home-title{
font-size:38px;
}
.visio-home-text{
font-size:16px;
line-height:1.7;
}
.visio-info-bar,
.confianza{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:18px;
padding:20px 0;
}
.visio-info-item,
.conf-item{
flex-direction:column;
gap:6px;
font-size:12px;
}
.visio-callout{
max-width:none;
padding:28px 24px;
}
.visio-callout-title{
font-size:18px;
}
.visio-faq-question{
font-size:16px;
}
.visio-faq-answer{
padding-right:0;
font-size:15px;
}
.visio-cta{
padding:46px 22px;
}
.visio-cta-title{
font-size:27px;
}
.visio-cta-text{
font-size:15px;
}
.visio-cta-buttons{
display:block;
}
.visio-cta-buttons
.visio-button{
width:100%;
text-align:center;
}
.visio-column-block{
padding:22px 20px;
}
.visio-header-inner{
min-height:80px;
padding:0 20px;
gap:16px;
}
.visio-header-logo img{
max-width:125px;
}
.visio-header-menu{
flex:0 0 auto;
}
.visio-header-menu
.elementor-menu-toggle{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
padding:0;
background:transparent;
border:0;
border-radius:0;
color:var(--visio-gold-text);
}
.visio-header-menu
.elementor-menu-toggle i,
.visio-header-menu
.elementor-menu-toggle svg{
width:24px;
height:24px;
font-size:24px;
}
.visio-header-menu
.elementor-nav-menu--dropdown{
margin-top:12px;
background:var(--visio-white);
border:1px solid var(--visio-border);
box-shadow:var(--visio-shadow);
}
.visio-header-menu
.elementor-nav-menu--dropdown
.elementor-item{
padding:14px 18px;
}
.visio-header-cta{
display:none;
}
}
/* ==========================================================
MÓVIL PEQUEÑO
========================================================== */
@media(max-width:480px){
.visio-container{
padding-left:18px;
padding-right:18px;
}
.visio-hero-title{
font-size:30px;
}
.visio-home-title{
font-size:34px;
}
.visio-title{
font-size:21px;
}
.visio-card-title{
font-size:16px;
}
.visio-cta{
padding-left:20px;
padding-right:20px;
}
}
/* ==========================================================
CARD LINK
========================================================== */
.visio-card-link{
display:block;
color:inherit;
text-decoration:none;
}
.visio-card-link:hover
.visio-column-block{
border-color:var(--visio-gold);
transition:.25s ease;
}
/* ==========================================================
FAQ - CORRECCIÓN RESPONSIVE
========================================================== */
.visio-faq-question{
width:100%;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
text-align:left;
}
.visio-faq-question > span:first-child,
.visio-faq-question > h3{
flex:1 1 auto;
min-width:0;
white-space:normal;
overflow-wrap:break-word;
word-break:normal;
text-align:left;
margin:0;
}
.visio-faq-icon{
flex:0 0 auto;
margin-left:8px;
}
@media(max-width:768px){
.visio-faq-question{
gap:12px;
padding-right:4px;
}
.visio-faq-question > span:first-child,
.visio-faq-question > h3{
width:auto;
max-width:100%;
line-height:1.4;
}
}
/* ==========================================================
FAQ - TIPOGRAFÍA
========================================================== */
.visio-faq-question,
.visio-faq-question h3,
.visio-faq-question > span:first-child{
color:#222;
font-family:Raleway,sans-serif;
font-weight:500;
}
.visio-faq-question h3{
margin:0 !important;
padding:0 !important;
font-size:inherit !important;
line-height:inherit !important;
}
.visio-faq-question{
font-size:17px;
line-height:1.45;
}
@media(max-width:768px){
.visio-faq-question{
padding-top:20px;
padding-bottom:20px;
font-size:18px !important;
line-height:1.45 !important;
}
.visio-faq-question h3,
.visio-faq-question > span:first-child{
font-size:18px !important;
line-height:1.45 !important;
}
.visio-faq-icon{
margin-top:2px;
font-size:20px;
line-height:1;
}
}
/* ==========================================================
SISTEMA TIPOGRÁFICO GLOBAL
========================================================== */
.visio-title,
.visio-column-title,
.visio-card-title,
.visio-process-title,
.visio-benefit-title{
color:#111 !important;
}
.visio-text,
.visio-intro,
.visio-column-text,
.visio-card-text,
.visio-process-text,
.visio-benefit-text,
.visio-faq-answer,
.visio-list-check li{
color:var(--visio-text) !important;
font-weight:400 !important;
}
.visio-note,
.visio-note p{
color:var(--visio-text) !important;
}
.visio-tag,
.visio-column-label,
.visio-card-number,
.visio-card-subtitle{
color:var(--visio-gold-text) !important;
}
/* Excepciones de fondos oscuros */
.visio-home-tag,
.visio-hero-tag,
.visio-bg-black .visio-tag,
.visio-bg-dark .visio-tag{
color:var(--visio-gold) !important;
}
/* ==========================================================
CORRECCIÓN DE ACCESIBILIDAD HOME
Elementos detectados por Lighthouse
========================================================== */
/*
* Muchos bloques de la Home usan directamente dentro
* de Elementor sin una clase VISIO específica.
* Esto evita el gris demasiado claro detectado por Lighthouse.
*/
body.home
.elementor-widget-html p{
color:#444444;
}
/* Mantener texto claro en Hero */
body.home
.visio-home-text,
body.home
.visio-hero-text,
body.home
.visio-callout-text,
body.home
.visio-card-dark p{
color:rgba(255,255,255,.90) !important;
}
/* ==========================================================
ENLACES HOME
"Conocer cirugía..."
========================================================== */
body.home
.visio-column-block a,
body.home
.visio-card a,
body.home
.visio-feature-card a{
color:var(--visio-gold-text) !important;
font-weight:600;
}
body.home
.visio-column-block a:hover,
body.home
.visio-card a:hover,
body.home
.visio-feature-card a:hover{
color:#5F3F21 !important;
}
/* ==========================================================
MÉTRICAS
+10,000
10+
100%
========================================================== */
body.home .num{
color:#76512D !important;
font-weight:700 !important;
}
body.home .metrica{
color:#333333 !important;
}
body.home .metrica .num{
color:#76512D !important;
}
/* ==========================================================
ETIQUETAS HOME
LO QUE HACEMOS
POR QUÉ ELEGIRNOS
TESTIMONIOS
========================================================== */
body.home
.visio-tag,
body.home
.visio-column-label,
body.home
.visio-card-number,
body.home
.visio-card-subtitle{
color:var(--visio-gold-text) !important;
}
/* Hero conserva dorado claro */
body.home
.visio-home-tag{
color:var(--visio-gold) !important;
}
/* ==========================================================
FOOTER
========================================================== */
/*
* Lighthouse detectó:
* copyright
* Política de privacidad
* Términos y condiciones
*/
footer{
color:#D7D7D7;
}
footer p,
footer span{
color:#D7D7D7 !important;
}
footer a{
color:#FFFFFF !important;
text-decoration:none;
}
footer a:hover{
color:#E5C18F !important;
text-decoration:underline;
}
/* Elementor Footer */
.elementor-location-footer{
color:#D7D7D7;
}
.elementor-location-footer p,
.elementor-location-footer span{
color:#D7D7D7 !important;
}
.elementor-location-footer a{
color:#FFFFFF !important;
}
.elementor-location-footer a:hover{
color:#E5C18F !important;
}
/* ==========================================================
ACCESIBILIDAD MÓVIL
========================================================== */
@media(max-width:768px){
.visio-tag,
.visio-column-label,
.visio-card-number,
.visio-card-subtitle{
font-size:11px !important;
line-height:1.4 !important;
letter-spacing:.10em;
}
.visio-title{
margin-bottom:16px !important;
font-size:26px !important;
line-height:1.2 !important;
}
.visio-column-title,
.visio-card-title,
.visio-process-title,
.visio-benefit-title{
font-size:21px !important;
line-height:1.3 !important;
}
.visio-text,
.visio-intro,
.visio-column-text,
.visio-card-text,
.visio-process-text,
.visio-benefit-text,
.visio-note,
.visio-note p,
.visio-list-check li{
font-size:16px !important;
line-height:1.7 !important;
font-weight:400 !important;
}
.visio-faq-question,
.visio-faq-question h3,
.visio-faq-question > span:first-child{
font-size:18px !important;
line-height:1.4 !important;
}
.visio-faq-answer{
font-size:16px !important;
line-height:1.7 !important;
font-weight:400 !important;
}
}
/* ==========================================================
VĪSIŌ HOME — CORRECCIÓN FINAL DE CONTRASTE LIGHTHOUSE
Agregar AL FINAL del CSS actual
========================================================== */
/* ----------------------------------------------------------
1. TEXTO NORMAL SOBRE FONDOS CLAROS
Lighthouse está encontrando varios
sin clase.
---------------------------------------------------------- */
body.home .elementor p{
color:#333333 !important;
}
/* ----------------------------------------------------------
2. HERO NEGRO
Restauramos los colores claros que sí corresponden
sobre fondo negro.
---------------------------------------------------------- */
body.home .visio-home-text{
color:#E8E8E8 !important;
}
body.home .visio-home-tag{
color:#CF9C5A !important;
}
/* ----------------------------------------------------------
3. BOTÓN "EXPLORAR SERVICIOS"
Está sobre fondo NEGRO, por lo que necesita dorado claro.
---------------------------------------------------------- */
body.home .visio-home-buttons .visio-button-outline{
color:#E2B675 !important;
border-color:#E2B675 !important;
background:transparent !important;
}
body.home .visio-home-buttons .visio-button-outline:hover{
color:#111111 !important;
background:#E2B675 !important;
border-color:#E2B675 !important;
}
/* ----------------------------------------------------------
4. BOTÓN "AGENDAR VALORACIÓN"
Texto oscuro sobre dorado = mejor contraste.
---------------------------------------------------------- */
body.home .visio-home-buttons .visio-button{
color:#171717 !important;
background:#CF9C5A !important;
border-color:#CF9C5A !important;
}
body.home .visio-home-buttons .visio-button:hover{
color:#111111 !important;
background:#C18E4D !important;
border-color:#C18E4D !important;
}
/* ----------------------------------------------------------
5. ENLACES DE SERVICIOS
Selectores exactos de los enlaces que Lighthouse reporta.
---------------------------------------------------------- */
body.home a[href="/cirugia-lasik-laser-en-costa-rica"],
body.home a[href="/cirugia-de-cataratas-en-costa-rica"],
body.home a[href="/tratamiento-de-ojo-seco-en-costa-rica"],
body.home a[href="/queratocono-en-costa-rica-diagnostico-y-tratamiento"],
body.home a[href="/cirugia-estetica-ocular-en-costa-rica"],
body.home a[href="/optometria-general-en-costa-rica"]{
color:#704A25 !important;
font-weight:600 !important;
}
body.home a[href="/cirugia-lasik-laser-en-costa-rica"]:hover,
body.home a[href="/cirugia-de-cataratas-en-costa-rica"]:hover,
body.home a[href="/tratamiento-de-ojo-seco-en-costa-rica"]:hover,
body.home a[href="/queratocono-en-costa-rica-diagnostico-y-tratamiento"]:hover,
body.home a[href="/cirugia-estetica-ocular-en-costa-rica"]:hover,
body.home a[href="/optometria-general-en-costa-rica"]:hover{
color:#533619 !important;
}
/* ----------------------------------------------------------
6. POR QUÉ ELEGIRNOS
Elementor data-id detectado por Lighthouse.
---------------------------------------------------------- */
body.home .elementor-element-fd74ace p{
color:#333333 !important;
}
body.home .elementor-element-fd74ace .num{
color:#704A25 !important;
font-weight:700 !important;
}
body.home .elementor-element-fd74ace .metrica{
color:#333333 !important;
}
/* ----------------------------------------------------------
7. EQUIPO
Las especialidades están sobre tarjetas oscuras.
Lighthouse marcó:
"Oftalmología · Córnea"
"Optometría"
---------------------------------------------------------- */
body.home .elementor-element-e109e86 .visio-card-dark p,
body.home .elementor-element-e109e86 .visio-card-dark span{
color:#F0F0F0 !important;
}
/*
Fallback para las tarjetas del equipo si no llevan
.visio-card-dark.
*/
body.home .elementor-element-e109e86 [style*="background"] p{
color:#F0F0F0 !important;
}
/* ----------------------------------------------------------
8. TESTIMONIOS
---------------------------------------------------------- */
body.home .elementor-element-5160fa0 p{
color:#333333 !important;
}
/* ----------------------------------------------------------
9. FOOTER
Elementor data-id mostrado por Lighthouse.
---------------------------------------------------------- */
body.home .elementor-element-4aebd04 p,
body.home .elementor-element-4aebd04 span{
color:#DADADA !important;
}
body.home .elementor-element-4aebd04 a{
color:#FFFFFF !important;
}
body.home .elementor-element-4aebd04 a:hover{
color:#E6BF83 !important;
}
/* ----------------------------------------------------------
10. ENLACES LEGALES — respaldo exacto
---------------------------------------------------------- */
body.home a[href="/politica-de-privacidad/"],
body.home a[href="/terminos-y-condiciones/"]{
color:#FFFFFF !important;
}
/* ----------------------------------------------------------
11. TEXTO EN CUALQUIER BLOQUE NEGRO VISIO
---------------------------------------------------------- */
body.home .visio-bg-black p,
body.home .visio-bg-dark p,
body.home .visio-callout p{
color:#E8E8E8 !important;
}
/* ----------------------------------------------------------
12. FOCUS ACCESIBLE
---------------------------------------------------------- */
body.home a:focus-visible,
body.home button:focus-visible{
outline:3px solid #E2B675 !important;
outline-offset:3px !important;
}
/* ==========================================================
CORRECCIÓN HERO HOME — TEXTO SOBRE FONDO NEGRO
========================================================== */
body.home .elementor p.visio-home-text{
color:rgba(255,255,255,.90) !important;
}
body.home .elementor .visio-home-hero .visio-home-text{
color:rgba(255,255,255,.90) !important;
}
body.home .elementor .visio-home-hero strong{
color:#FFFFFF !important;
}