:root{
--cta-espresso:var(--espresso,#2A211A);
--cta-espresso-luz:#3B2F25;
--cta-dorado:#B8792E;
--cta-dorado-luz:#D8B783;
--cta-bronce:#9D5B17;
--cta-bronce-rgb:184,121,46;
--cta-superficie:#FAF7F2;
--cta-superficie-luz:#FFFCF7;
--cta-verde:#159947;
--cta-verde-profundo:#0F7B3D;
}
a.btn.cta-premium{
position:relative;
isolation:isolate;
overflow:hidden;
display:inline-grid;
grid-template-columns:minmax(0,max-content) 19px;
align-items:center;
justify-content:center;
gap:11px;
min-height:52px;
max-width:100%;
padding:6px 17px 6px 22px;
border:1px solid var(--cta-dorado);
border-radius:999px;
background:linear-gradient(115deg,var(--cta-espresso) 0%,var(--cta-espresso-luz) 54%,#24180F 100%);
color:#FFF;
font-family:inherit;
font-size:14px;
font-weight:650;
line-height:1.2;
text-decoration:none;
box-shadow:
0 10px 24px -19px rgba(43,31,22,.82),
inset 0 1px 0 rgba(255,255,255,.11);
transition:
transform 180ms var(--ease),
border-color 180ms var(--ease),
box-shadow 180ms var(--ease);
}
a.btn.cta-premium::before{
content:"";
position:absolute;
z-index:-1;
inset:0;
background:radial-gradient(circle at 82% 50%,rgba(255,244,205,.11),transparent 42%);
opacity:0;
transform:none;
transition:opacity 180ms var(--ease);
pointer-events:none;
}
a.btn.cta-premium--whatsapp{
grid-template-columns:40px minmax(0,max-content) 19px;
gap:11px;
padding-left:5px;
border-color:rgba(var(--cta-bronce-rgb),.42);
background:linear-gradient(135deg,var(--cta-superficie-luz),var(--cta-superficie));
color:var(--cta-espresso);
box-shadow:
0 13px 30px -24px rgba(var(--espresso-rgb),.7),
inset 0 1px 0 rgba(255,255,255,.95);
}
a.btn.cta-premium--whatsapp::before{
background:radial-gradient(circle at 80% 50%,rgba(var(--cta-bronce-rgb),.12),transparent 43%);
}
.cta-premium-etiqueta{
position:relative;
z-index:1;
min-width:0;
white-space:nowrap;
text-align:center;
}
.cta-premium-icono{
position:relative;
z-index:1;
display:grid;
place-items:center;
width:40px;
height:40px;
border:1px solid rgba(255,255,255,.76);
border-radius:50%;
background:linear-gradient(145deg,var(--cta-verde),var(--cta-verde-profundo));
color:#FFF;
box-shadow:
0 0 0 1px rgba(21,153,71,.18),
0 8px 18px -12px rgba(15,123,61,.78),
inset 0 1px 0 rgba(255,255,255,.34);
transition:
transform 180ms var(--ease),
box-shadow 180ms var(--ease);
}
.cta-premium-icono::after{
content:"";
position:absolute;
inset:-4px;
z-index:-1;
border:1px solid rgba(21,153,71,.3);
border-radius:inherit;
opacity:0;
transform:scale(.88);
pointer-events:none;
animation:cta-whatsapp-respiro 5.8s var(--ease) infinite;
}
.cta-premium-icono svg{
width:23px;
height:23px;
fill:currentColor;
stroke:none;
}
.cta-premium-flecha{
position:relative;
z-index:1;
display:grid;
place-items:center;
width:19px;
height:19px;
color:var(--cta-dorado-luz);
transition:transform 180ms var(--ease);
}
.cta-premium--whatsapp .cta-premium-flecha{color:var(--cta-bronce)}
@keyframes cta-whatsapp-respiro{
0%,68%,100%{opacity:0;transform:scale(.88)}
74%{opacity:.24}
90%{opacity:0;transform:scale(1.22)}
}
.cta-premium-flecha svg{
width:19px;
height:19px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
a.btn.cta-premium.cab-cta{
min-height:42px;
padding:5px 14px 5px 18px;
gap:9px;
font-size:12.5px;
box-shadow:0 10px 24px -18px rgba(43,31,22,.86),inset 0 1px 0 rgba(255,255,255,.12);
}
a.btn.cta-premium.cab-cta .cta-premium-flecha,
a.btn.cta-premium.cab-cta .cta-premium-flecha svg{
width:18px;
height:18px;
}
.carillas-cta .cta-premium,
.esp-cta .cta-premium{
min-width:0;
min-height:56px;
padding:7px 19px 7px 24px;
font-size:14px;
}
a.btn.cta-premium:focus-visible{
outline:2px solid var(--cta-dorado-luz);
outline-offset:4px;
box-shadow:
0 0 0 2px var(--cta-espresso),
0 0 0 4px rgba(212,175,55,.34),
0 12px 26px -19px rgba(43,31,22,.9);
}
a.btn.cta-premium--whatsapp:focus-visible{
outline:2px solid var(--cta-superficie-luz);
outline-offset:2px;
box-shadow:
0 0 0 5px var(--cta-espresso),
0 14px 30px -22px rgba(var(--espresso-rgb),.72);
}
@media(hover:hover) and (pointer:fine){
a.btn.cta-premium:hover,
.pagina-carillas a.btn.cta-premium:hover,
.pagina-especialidad a.btn.cta-premium:hover{
transform:translateY(-2px);
border-color:var(--cta-dorado-luz);
background:linear-gradient(115deg,var(--cta-espresso) 0%,var(--cta-espresso-luz) 54%,#24180F 100%);
color:#FFF;
box-shadow:
0 13px 27px -18px rgba(43,31,22,.9),
0 5px 17px -15px rgba(212,175,55,.72),
inset 0 1px 0 rgba(255,255,255,.15);
}
a.btn.cta-premium:hover::before,
.pagina-carillas a.btn.cta-premium:hover::before,
.pagina-especialidad a.btn.cta-premium:hover::before{
opacity:1;
transform:none;
}
a.btn.cta-premium:hover .cta-premium-flecha{
transform:translateX(3px);
}
a.btn.cta-premium:hover .cta-premium-icono{
transform:scale(1.025);
box-shadow:
0 0 0 3px rgba(232,203,107,.16),
0 8px 18px -11px rgba(37,211,102,.82),
inset 0 1px 0 rgba(255,255,255,.5);
}
.cierre .btn-1.cta-premium.rv-visible:hover{
transform:translateY(-2px);
}
a.btn.cta-premium--whatsapp:hover,
.pagina-carillas a.btn.cta-premium--whatsapp:hover,
.pagina-especialidad a.btn.cta-premium--whatsapp:hover{
border-color:var(--cta-dorado);
background:linear-gradient(135deg,#FFF,var(--cta-superficie));
color:var(--cta-espresso);
box-shadow:
0 16px 32px -23px rgba(var(--espresso-rgb),.76),
0 5px 15px -13px rgba(var(--cta-bronce-rgb),.62),
inset 0 1px 0 #FFF;
}
a.btn.cta-premium--whatsapp:hover .cta-premium-icono{
box-shadow:
0 0 0 3px rgba(21,153,71,.12),
0 9px 19px -12px rgba(15,123,61,.78),
inset 0 1px 0 rgba(255,255,255,.42);
}
}
a.btn.cta-premium:active{transform:scale(.985);transition-duration:120ms}
@media(max-width:900px){
a.btn.cta-premium.cab-cta{display:none}
a.btn.cta-premium.menu-cta{width:100%;margin-top:8px}
}
@media(max-width:620px){
a.btn.cta-premium{
min-height:50px;
padding:5px 16px 5px 20px;
gap:11px;
font-size:13px;
}
a.btn.cta-premium--whatsapp{
grid-template-columns:38px minmax(0,max-content) 18px;
padding-left:5px;
}
.cta-premium-icono{width:38px;height:38px}
.cta-premium-icono svg{width:22px;height:22px}
.cta-premium-flecha,
.cta-premium-flecha svg{width:18px;height:18px}
.carillas-btn.cta-premium,
.esp-btn.cta-premium{width:auto}
.carillas-cta .cta-premium,
.esp-cta .cta-premium{
width:100%;
min-width:0;
min-height:52px;
padding:6px 17px 6px 21px;
}
}
.wa-flota{
isolation:isolate;
overflow:visible;
gap:8px;
min-height:48px;
padding:5px 14px 5px 5px;
border:1px solid rgba(var(--cta-bronce-rgb),.42);
border-radius:var(--r-pill);
background:linear-gradient(135deg,rgba(255,252,247,.98),rgba(250,247,242,.98));
color:var(--cta-espresso);
font-size:12.5px;
font-weight:650;
box-shadow:
0 16px 34px -23px rgba(var(--espresso-rgb),.78),
0 4px 12px -10px rgba(var(--espresso-rgb),.58),
inset 0 1px 0 #FFF;
animation:wa-flota-entrada .44s var(--ease) .18s backwards;
transition:
transform 180ms var(--ease),
opacity 180ms var(--ease),
border-color 180ms var(--ease),
box-shadow 180ms var(--ease);
}
@keyframes wa-flota-entrada{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
.wa-flota-icono{
position:relative;
z-index:1;
display:grid;
place-items:center;
width:36px;
height:36px;
flex:none;
border:1px solid rgba(255,255,255,.76);
border-radius:50%;
background:linear-gradient(145deg,var(--cta-verde),var(--cta-verde-profundo));
color:#FFF;
box-shadow:
0 0 0 1px rgba(21,153,71,.18),
0 8px 18px -12px rgba(15,123,61,.78),
inset 0 1px 0 rgba(255,255,255,.34);
transition:transform 180ms var(--ease),box-shadow 180ms var(--ease);
}
.wa-flota-icono::after{
content:"";
position:absolute;
inset:-4px;
z-index:-1;
border:1px solid rgba(21,153,71,.3);
border-radius:inherit;
opacity:0;
transform:scale(.88);
pointer-events:none;
animation:cta-whatsapp-respiro 5.8s var(--ease) -2.9s infinite;
}
.wa-flota-icono svg{width:20px;height:20px}
.wa-flota-etiqueta{line-height:1}
.wa-flota:focus-visible{
outline:2px solid var(--cta-superficie-luz);
outline-offset:2px;
box-shadow:
0 0 0 5px var(--cta-espresso),
0 16px 34px -23px rgba(var(--espresso-rgb),.8);
}
@media(hover:hover) and (pointer:fine){
.wa-flota:hover{
transform:translateY(-2px);
border-color:var(--cta-dorado);
background:linear-gradient(135deg,rgba(255,252,247,.98),rgba(250,247,242,.98));
color:var(--cta-espresso);
box-shadow:
0 18px 36px -23px rgba(var(--espresso-rgb),.82),
0 6px 16px -13px rgba(var(--cta-bronce-rgb),.58);
}
.wa-flota:hover .wa-flota-icono{
transform:scale(1.025);
box-shadow:
0 0 0 3px rgba(21,153,71,.12),
0 9px 19px -12px rgba(15,123,61,.78),
inset 0 1px 0 rgba(255,255,255,.42);
}
}
.wa-flota:active{transform:scale(.97);transition-duration:120ms}
@media(max-width:600px){
.wa-flota{
width:50px;
min-width:50px;
height:50px;
min-height:50px;
padding:5px;
border-radius:50%;
}
.wa-flota-icono{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
a.btn.cta-premium,
a.btn.cta-premium::before,
.cta-premium-icono,
.cta-premium-icono::after,
.cta-premium-flecha,
.wa-flota,
.wa-flota-icono,
.wa-flota-icono::after{
transition-duration:.01ms !important;
}
a.btn.cta-premium::before{display:none}
.wa-flota{animation:none}
.cta-premium-icono::after,
.wa-flota-icono::after{animation:none;display:none}
a.btn.cta-premium:hover,
a.btn.cta-premium:active,
a.btn.cta-premium:hover .cta-premium-icono,
a.btn.cta-premium:hover .cta-premium-flecha,
.wa-flota:hover,
.wa-flota:active,
.wa-flota:hover .wa-flota-icono{
transform:none !important;
}
}