/* ===========================
Unit Fitness — Base (Premium)
=========================== */
html,body{
background:var(--bg);
color:var(--text);
font-family:var(--font);
}
a{color:inherit;text-decoration:none}
*{box-sizing:border-box}
.uf-container{
width:min(var(--max), calc(100% - (var(--pad) * 2)));
margin-left:auto;
margin-right:auto;
}
.uf-section{padding:64px 0}
@media (max-width:900px){.uf-section{padding:44px 0}}
.uf-kicker{
letter-spacing:.18em;
text-transform:uppercase;
font-size:12px;
color:var(--muted);
margin:0 0 10px;
}
.uf-h1{
font-size:clamp(34px,4vw,56px);
line-height:1.02;
margin:0 0 14px;
}
.uf-lead{
font-size:clamp(16px,1.3vw,18px);
color:var(--muted);
margin:0;
max-width:58ch;
}
/* =========================================================
* Buttons — GLOBAL (web entera)
* ========================================================= */
.uf-btns{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:22px;
}
.uf-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:48px;
padding:0 18px;
border-radius:999px;
border:1px solid rgba(0,0,0,.12);
background:#fff;
color:#111;
font-weight:850;
letter-spacing:.01em;
transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.uf-btn:hover{
transform:translateY(-1px);
border-color:rgba(0,0,0,.22);
}
/* Primario */
.uf-btn-primary{
background:var(--brand);
border-color:transparent;
color:#111;
box-shadow:0 12px 34px rgba(245,196,0,.18);
}
.uf-btn-primary:hover{
background:var(--brand-2);
box-shadow:0 16px 40px rgba(245,196,0,.22);
}
/* Ghost */
.uf-btn-ghost{
background:rgba(255,255,255,.9);
border-color:rgba(0,0,0,.14);
}
.uf-btn-ghost:hover{
border-color:rgba(0,0,0,.22);
}
.uf-btn-sm{
height:42px;
padding:0 14px;
font-size:13px;
}
/* =========================================================
* Buttons — SOLO FOOTER (oscuro premium)
* ========================================================= */
.uf-footer .uf-btn{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.12);
color:#fff;
}
.uf-footer .uf-btn:hover{
border-color:rgba(255,255,255,.22);
}
.uf-footer .uf-btn-primary{
background:linear-gradient(180deg,var(--brand),var(--brand-2));
color:#111;
box-shadow:0 12px 30px rgba(245,196,0,.28);
}
.uf-footer .uf-btn-primary:hover{
box-shadow:0 16px 40px rgba(245,196,0,.35);
}
.uf-footer .uf-btn-ghost{
background:rgba(255,255,255,.02);
border-color:rgba(255,255,255,.14);
}
/* Cards */
.uf-card{
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.10);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
/* ===== Premium Header ===== */
.uf-header{position:sticky;top:0;z-index:80}
.uf-header-bar{
position:relative;
background:rgba(11,13,16,.68);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.10);
}
.uf-header-bar::after{
content:"";
position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg, transparent, rgba(245,196,0,.45), transparent);
opacity:.55;
pointer-events:none;
}
.uf-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.uf-brand{display:flex;align-items:center;gap:12px}
.uf-brand-mark{
width:42px;height:42px;border-radius:14px;
display:grid;place-items:center;
border:1px solid rgba(245,196,0,.25);
background:radial-gradient(70% 70% at 30% 20%, rgba(245,196,0,.22), rgba(245,196,0,.06));
}
.uf-brand-mark-inner{font-weight:950;letter-spacing:.02em;color:var(--brand)}
.uf-brand-text{display:flex;flex-direction:column;line-height:1}
.uf-brand-name{font-weight:950;font-size:15px}
.uf-brand-sub{margin-top:6px;font-size:12px;color:var(--muted)}
.uf-nav{display:block}
.uf-menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.uf-menu a{
position:relative;
color:rgba(244,246,248,.88);
font-weight:850;
font-size:13px;
letter-spacing:.02em;
padding:10px 2px;
}
.uf-menu a::after{
content:"";
position:absolute;left:0;right:0;bottom:6px;height:1px;
background:linear-gradient(90deg, transparent, rgba(245,196,0,.7), transparent);
transform:scaleX(0);
transition:transform .18s ease;
}
.uf-menu a:hover{color:#fff}
.uf-menu a:hover::after{transform:scaleX(1)}
.uf-header-actions{display:flex;align-items:center;gap:10px}
/* Burger */
.uf-burger{
width:44px;height:44px;border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.02);
display:none;align-items:center;justify-content:center;
gap:4px;padding:0;
transition:transform .15s ease,border-color .15s ease;
}
.uf-burger span{
display:block;width:18px;height:2px;
background:rgba(244,246,248,.9);
border-radius:2px;
}
.uf-burger:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
/* Mobile */
.uf-mobile{background:rgba(11,13,16,.92);border-top:1px solid rgba(255,255,255,.10)}
.uf-mobile-inner{padding:14px 0 18px}
.uf-mobile-menu{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.uf-mobile-menu a{
display:flex;padding:12px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
background:rgba(255,255,255,.03);
font-weight:900;
}
.uf-mobile-cta{margin-top:12px;display:grid;gap:10px}
/* WhatsApp Floating */
.uf-wa{
position:fixed;right:16px;bottom:16px;z-index:90;
display:inline-flex;align-items:center;gap:10px;
padding:12px 14px;border-radius:999px;
background:rgba(15,18,23,.70);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(12px);
box-shadow:0 18px 45px rgba(0,0,0,.35);
font-weight:900;
transition:transform .15s ease,border-color .15s ease;
}
.uf-wa:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.uf-wa-dot{
width:10px;height:10px;border-radius:99px;
background:var(--brand);
box-shadow:0 0 0 6px rgba(245,196,0,.14);
}
/* ===== Premium Footer ===== */
.uf-footer{
border-top:1px solid rgba(255,255,255,.10);
background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
padding:30px 0 26px;
}
.uf-footer-inner{
display:grid;
grid-template-columns:1.4fr .9fr .7fr;
gap:18px;
align-items:start;
}
.uf-footer-brand{display:flex;gap:12px;align-items:center}
.uf-footer-note{margin:12px 0 0;color:var(--muted);max-width:56ch}
.uf-footer-links{display:grid;gap:10px}
.uf-footer-links a{color:rgba(244,246,248,.86);font-weight:800}
.uf-footer-links a:hover{color:#fff}
.uf-footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.uf-footer-chip{
display:inline-flex;align-items:center;
padding:8px 12px;border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.03);
color:rgba(244,246,248,.92);
font-weight:900;
}
.uf-footer-legal{color:var(--muted);font-size:13px}
/* Responsive */
@media (max-width:900px){
.uf-nav{display:none}
.uf-burger{display:inline-flex}
.uf-footer-inner{grid-template-columns:1fr;gap:14px}
.uf-footer-right{align-items:flex-start}
.uf-wa{right:12px;bottom:12px}
}
/* Active menu item */
.uf-menu li.current-menu-item > a,
.uf-menu li.current_page_item > a,
.uf-menu a[aria-current="page"]{
position: relative;
color: #fff;
}
.uf-menu li.current-menu-item > a::after,
.uf-menu li.current_page_item > a::after,
.uf-menu a[aria-current="page"]::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
border-radius: 2px;
background: currentColor;
opacity: .9;
}
/* Active states (desktop + mobile) */
.uf-menu .current-menu-item > a,
.uf-mobile-menu .current-menu-item > a,
.uf-menu a[aria-current="page"],
.uf-mobile-menu a[aria-current="page"]{
position: relative;
opacity: 1;
}
.uf-menu .current-menu-item > a::after,
.uf-mobile-menu .current-menu-item > a::after,
.uf-menu a[aria-current="page"]::after,
.uf-mobile-menu a[aria-current="page"]::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-6px;
height:2px;
border-radius:2px;
background: currentColor;
opacity:.95;
}
/* =========================
* Menu active — pill premium
* ========================= */
.uf-menu li > a,
.uf-mobile-menu li > a{
position: relative;
padding: 8px 12px;
border-radius: 999px;
transition: background .2s ease, color .2s ease;
}
/* Hover */
.uf-menu li > a:hover,
.uf-mobile-menu li > a:hover{
background: rgba(255,255,255,.08);
}
/* Active */
.uf-menu .current-menu-item > a,
.uf-mobile-menu .current-menu-item > a,
.uf-menu a[aria-current="page"],
.uf-mobile-menu a[aria-current="page"]{
background: rgba(255,255,255,.14);
color: #fff;
}
/* Mobile: un poco más marcado */
@media (max-width: 860px){
.uf-mobile-menu .current-menu-item > a,
.uf-mobile-menu a[aria-current="page"]{
background: rgba(255,255,255,.18);
}
}
/* Active pill accent by page */
.uf-page-crossfit .uf-menu .current-menu-item > a,
.uf-page-crossfit .uf-menu a[aria-current="page"]{
background: rgba(255,80,80,.16);
}
.uf-page-hyrox .uf-menu .current-menu-item > a,
.uf-page-hyrox .uf-menu a[aria-current="page"]{
background: rgba(90,160,255,.16);
}
/* Mobile too */
.uf-page-crossfit .uf-mobile-menu .current-menu-item > a,
.uf-page-crossfit .uf-mobile-menu a[aria-current="page"]{
background: rgba(255,80,80,.18);
}
.uf-page-hyrox .uf-mobile-menu .current-menu-item > a,
.uf-page-hyrox .uf-mobile-menu a[aria-current="page"]{
background: rgba(90,160,255,.18);
}
/* =========================================================
FULL WIDTH SITE — FORCE (Hello Elementor / Elementor)
- Secciones a 100%
- Quita “boxed” y límites de contenedor
- Mantiene padding interno configurable
========================================================= */
/* 1) Nada de max-width global */
html, body, #page, .site, .site-content, .site-main, .elementor, .elementor-section{
max-width: none !important;
width: 100% !important;
}
/* 2) Elementor (clásico) */
.elementor-section.elementor-section-boxed > .elementor-container{
max-width: none !important;
width: 100% !important;
}
.elementor-section > .elementor-container{
max-width: none !important;
width: 100% !important;
}
/* 3) Elementor (nuevo flexbox containers: e-con) */
.e-con,
.e-con > .e-con-inner,
.elementor .e-con > .e-con-inner{
max-width: none !important;
width: 100% !important;
}
/* 4) Hello Elementor container + cualquier container tuyo */
.uf-container,
.container{
max-width: none !important;
width: 100% !important;
}
/* 5) Padding interno (para que no quede pegado al borde)
Ajusta estos números a tu gusto */
.uf-container,
.container,
.elementor-container,
.e-con-inner{
padding-left: 40px !important;
padding-right: 40px !important;
}
/* Mobile */
@media (max-width: 768px){
.uf-container,
.container,
.elementor-container,
.e-con-inner{
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* =========================================================
HEADER STICKY PREMIUM (siempre visible)
========================================================= */
header,
.uf-header,
.site-header{
position: sticky;
top: 0;
z-index: 9999;
/* look premium */
background: rgba(0,0,0,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* evita que el contenido “salte” debajo del header */
body{
scroll-padding-top: 90px; /* ajusta a la altura real del header */
}
/* Header compacto al hacer scroll */
body.uf-scrolled header,
body.uf-scrolled .uf-header{
background: rgba(0,0,0,.78);
backdrop-filter: blur(18px);
}
/* =========================================================
FOOTER — PREMIUM (Unit Fitness)
========================================================= */
.uf-footer{
margin-top: 56px;
color: rgba(255,255,255,.88);
background:
radial-gradient(900px 520px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,.05), transparent 60%),
rgba(0,0,0,.92);
border-top: 1px solid rgba(255,255,255,.08);
}
.uf-footer-inner.uf-wide{
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
@media (max-width: 980px){
.uf-footer-inner.uf-wide{
width: calc(100% - 28px);
}
}
.uf-footer-top{
padding: 44px 0 28px;
}
.uf-footer-bottom{
border-top: 1px solid rgba(255,255,255,.08);
padding: 16px 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.uf-footer-bottom-inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.uf-footer-copy{
opacity: .78;
font-weight: 600;
font-size: 13px;
}
.uf-footer-legal{
display: flex;
align-items: center;
gap: 10px;
opacity: .85;
font-weight: 700;
font-size: 13px;
}
.uf-dot{ opacity: .55; }
.uf-footer-inner{
display: grid;
grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
gap: 22px;
align-items: start;
}
@media (max-width: 980px){
.uf-footer-inner{
grid-template-columns: 1fr;
gap: 18px;
}
}
.uf-footer-col{
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background: rgba(255,255,255,.03);
box-shadow: 0 18px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 16px 16px;
}
.uf-footer-h{
margin: 0 0 12px;
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 900;
color: rgba(255,255,255,.92);
}
.uf-footer-brand .custom-logo{
max-height: 36px;
width: auto;
height: auto;
}
.uf-footer-sitename{
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.uf-footer-tagline{
margin: 12px 0 14px;
color: rgba(255,255,255,.72);
font-weight: 650;
line-height: 1.4;
}
.uf-footer-cta{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 14px 0 14px;
}
.uf-footer-social{
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
.uf-social{
font-weight: 800;
font-size: 13px;
color: rgba(255,255,255,.86);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.14);
padding-bottom: 2px;
}
.uf-social:hover{
color: rgba(255,255,255,.98);
border-bottom-color: rgba(255,255,255,.35);
}
.uf-footer-list{
display: grid;
gap: 10px;
}
.uf-footer-link{
color: rgba(255,255,255,.90);
text-decoration: none;
font-weight: 800;
}
.uf-footer-link:hover{ color: rgba(255,255,255,1); }
.uf-footer-link-soft{
display: inline-block;
margin-top: 12px;
color: rgba(255,255,255,.74);
text-decoration: none;
font-weight: 800;
}
.uf-footer-link-soft:hover{ color: rgba(255,255,255,.92); }
.uf-footer-mini{
display: grid;
grid-template-columns: 84px 1fr;
gap: 10px;
padding: 8px 0;
border-top: 1px solid rgba(255,255,255,.06);
}
.uf-footer-mini:first-of-type{ border-top: 0; padding-top: 0; }
.uf-footer-mini-k{
opacity: .62;
font-weight: 900;
letter-spacing: .10em;
text-transform: uppercase;
font-size: 11px;
}
.uf-footer-mini-v{
font-weight: 800;
color: rgba(255,255,255,.86);
}
.uf-footer-map{
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.35);
box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
.uf-footer-map iframe{
width: 100%;
height: 190px;
border: 0;
display: block;
}
/* Botones (si no existen ya) */
.uf-btn{
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 10px 14px;
text-decoration: none;
font-weight: 800;
border: 1px solid rgba(255,255,255,.18);
}
.uf-btn-primary{
background: rgba(255,255,255,.92);
color: rgba(0,0,0,.92);
border-color: rgba(255,255,255,.22);
}
.uf-btn-primary:hover{
background: rgba(255,255,255,1);
}
.uf-btn-ghost{
background: rgba(0,0,0,.35);
color: rgba(255,255,255,.92);
}
.uf-btn-ghost:hover{
background: rgba(0,0,0,.50);
}
/* =========================================================
FOOTER — FULL WIDTH + ULTRA PREMIUM
(pegar al final de base.css)
========================================================= */
/* ✅ full ancho real del footer */
.uf-footer,
.uf-footer-top,
.uf-footer-bottom{
width: 100%;
max-width: none;
}
/* ✅ contenedor: más ancho y con gutters elegantes */
.uf-footer-inner.uf-wide{
width: min(1480px, calc(100% - 72px));
margin: 0 auto;
}
@media (max-width: 1200px){
.uf-footer-inner.uf-wide{ width: calc(100% - 44px); }
}
@media (max-width: 980px){
.uf-footer-inner.uf-wide{ width: calc(100% - 24px); }
}
/* Fondo más premium */
.uf-footer{
border-top: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(900px 520px at 12% -10%, rgba(255,255,255,.08), transparent 60%),
radial-gradient(900px 520px at 88% 0%, rgba(255,255,255,.07), transparent 60%),
radial-gradient(700px 420px at 50% 40%, rgba(255,255,255,.04), transparent 70%),
linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.94));
}
/* ✅ 4 columnas “de verdad” y más compactas */
.uf-footer-inner{
display: grid;
grid-template-columns: 1.35fr .95fr .95fr 1.2fr;
gap: 18px;
align-items: stretch;
}
/* Más aire arriba y menos “bloque gigante” */
.uf-footer-top{ padding: 36px 0 22px; }
/* Tarjetas: más pro (borde fino + glow controlado) */
.uf-footer-col{
position: relative;
border-radius: 22px;
padding: 18px 18px;
border: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(520px 220px at 12% 0%, rgba(255,255,255,.06), transparent 55%),
rgba(255,255,255,.03);
box-shadow:
0 18px 60px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* “sheen” premium arriba */
.uf-footer-col::before{
content:"";
position:absolute;
inset: 0;
border-radius: 22px;
pointer-events:none;
background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
opacity: .9;
}
/* Títulos más finos */
.uf-footer-h{
font-size: 12px;
letter-spacing: .22em;
font-weight: 900;
opacity: .95;
margin: 0 0 12px;
}
/* Brand: mejor jerarquía */
.uf-footer-brand{
padding-right: 22px;
}
.uf-footer-tagline{
font-size: 14px;
font-weight: 650;
line-height: 1.45;
color: rgba(255,255,255,.72);
margin: 12px 0 14px;
}
/* ✅ CTA: botones no se montan (lo que te pasa en la captura) */
.uf-footer-cta{
display: flex;
gap: 10px;
flex-wrap: nowrap; /* importante */
align-items: center;
}
@media (max-width: 1100px){
.uf-footer-cta{ flex-wrap: wrap; }
}
/* Botones: más premium */
.uf-footer .uf-btn{
height: 44px;
padding: 0 16px;
font-size: 13px;
border-radius: 999px;
letter-spacing: .02em;
box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.uf-footer .uf-btn-primary{
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
border-color: rgba(255,255,255,.18);
color: rgba(0,0,0,.92);
}
.uf-footer .uf-btn-ghost{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.14);
}
/* Social: estilo “chip” */
.uf-footer-social{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
.uf-social{
display:inline-flex;
align-items:center;
gap: 8px;
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.25);
text-decoration: none;
color: rgba(255,255,255,.88);
}
.uf-social:hover{
background: rgba(0,0,0,.40);
border-color: rgba(255,255,255,.22);
color: rgba(255,255,255,1);
}
/* Listas de contacto: más legibles */
.uf-footer-link{
font-weight: 850;
letter-spacing: .01em;
color: rgba(255,255,255,.92);
}
.uf-footer-link:hover{ color: rgba(255,255,255,1); }
/* Horarios: compact */
.uf-footer-mini{
grid-template-columns: 90px 1fr;
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,.08);
}
.uf-footer-mini-k{
font-size: 10px;
letter-spacing: .18em;
opacity: .62;
}
.uf-footer-mini-v{
font-size: 13px;
font-weight: 850;
color: rgba(255,255,255,.90);
}
/* Mapa más pro */
.uf-footer-map{
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 18px 60px rgba(0,0,0,.50);
overflow: hidden;
}
.uf-footer-map iframe{
height: 210px;
filter: saturate(1.05) contrast(1.05);
}
/* Bottom bar: full width y centrado pro */
.uf-footer-bottom{
background: rgba(0,0,0,.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid rgba(255,255,255,.10);
}
.uf-footer-bottom-inner{
display:flex;
align-items:center;
justify-content: space-between;
gap: 16px;
padding: 0;
}
/* Mobile */
@media (max-width: 980px){
.uf-footer-inner{
grid-template-columns: 1fr;
gap: 14px;
}
.uf-footer-top{ padding: 26px 0 16px; }
.uf-footer-map iframe{ height: 180px; }
}
/* =========================================================
FOOTER v3 — LUXURY / CLEAN / FULL WIDTH
Pegar al final de base.css
========================================================= */
.uf-footer{
position: relative;
width: 100%;
max-width: none;
border-top: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(900px 520px at 18% -10%, rgba(255,255,255,.10), transparent 60%),
radial-gradient(900px 520px at 86% -6%, rgba(255,255,255,.08), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.94));
overflow: hidden;
}
/* glow suave */
.uf-footer::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(700px 300px at 30% 20%, rgba(255,255,255,.06), transparent 55%),
radial-gradient(700px 300px at 75% 10%, rgba(255,255,255,.05), transparent 55%);
opacity: .9;
}
/* contenedor ancho “premium” */
.uf-footer .uf-footer-inner.uf-wide{
width: min(1500px, calc(100% - 88px));
margin: 0 auto;
}
@media (max-width: 1100px){
.uf-footer .uf-footer-inner.uf-wide{ width: calc(100% - 44px); }
}
@media (max-width: 760px){
.uf-footer .uf-footer-inner.uf-wide{ width: calc(100% - 22px); }
}
.uf-footer-top{ padding: 40px 0 24px; }
/* GRID: 4 cols con proporción pro */
.uf-footer-inner{
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.25fr;
gap: 18px;
align-items: stretch;
}
/* CARD — menos “caja”, más lujo */
.uf-footer-col{
position: relative;
border-radius: 24px;
padding: 18px 18px;
border: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(520px 220px at 12% 0%, rgba(255,255,255,.05), transparent 55%),
rgba(255,255,255,.02);
box-shadow:
0 22px 70px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* cabecera card */
.uf-footer-h{
font-size: 11px;
letter-spacing: .26em;
font-weight: 900;
text-transform: uppercase;
color: rgba(255,255,255,.82);
margin: 0 0 12px;
}
/* BRAND: tipografía + layout mejor */
.uf-footer-brand .uf-footer-logo{
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.uf-footer-sitename,
.uf-footer-brand strong{
font-size: 18px;
letter-spacing: .14em;
font-weight: 900;
text-transform: uppercase;
color: rgba(255,255,255,.96);
}
.uf-footer-tagline{
margin: 12px 0 14px;
font-size: 14px;
line-height: 1.5;
font-weight: 650;
color: rgba(255,255,255,.70);
max-width: 34ch;
}
/* ✅ CTA: 2 botones LIMPIOS (sin “pastillas” raras) */
.uf-footer-cta{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
@media (max-width: 1100px){
.uf-footer-cta{ grid-template-columns: 1fr; }
}
.uf-footer .uf-btn{
height: 46px;
border-radius: 14px;
font-weight: 900;
letter-spacing: .02em;
font-size: 13px;
justify-content: center;
box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
.uf-footer .uf-btn-primary{
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
color: rgba(0,0,0,.90);
border: 1px solid rgba(255,255,255,.16);
}
.uf-footer .uf-btn-ghost{
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.92);
}
.uf-footer .uf-btn-ghost:hover{
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.22);
}
/* ✅ CONTACTO: estilo “lista premium” */
.uf-footer-contact{
display: grid;
gap: 10px;
}
.uf-footer-contact a,
.uf-footer-contact div{
color: rgba(255,255,255,.92);
text-decoration: none;
font-weight: 850;
}
.uf-footer-contact small{
display:block;
margin-top: 2px;
font-size: 12px;
font-weight: 650;
color: rgba(255,255,255,.60);
}
/* ✅ HORARIOS: tabla minimal */
.uf-footer-hours{
display: grid;
gap: 10px;
}
.uf-footer-mini{
display: grid;
grid-template-columns: 86px 1fr;
align-items: center;
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,.08);
}
.uf-footer-mini:first-child{ border-top: 0; padding-top: 0; }
.uf-footer-mini-k{
font-size: 10px;
font-weight: 900;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
}
.uf-footer-mini-v{
font-size: 13px;
font-weight: 900;
color: rgba(255,255,255,.92);
display:flex;
justify-content: space-between;
gap: 12px;
}
/* ✅ MAP: más elegante, sin “mazacote” */
.uf-footer-map{
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.uf-footer-map iframe{
display:block;
width:100%;
height: 190px;
filter: saturate(1.05) contrast(1.08);
}
.uf-footer-map-link{
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 900;
color: rgba(255,255,255,.92);
text-decoration: none;
}
.uf-footer-map-link:hover{ color: rgba(255,255,255,1); }
/* ✅ BOTTOM: línea fina + links elegantes */
.uf-footer-bottom{
width:100%;
background: rgba(0,0,0,.50);
border-top: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.uf-footer-bottom-inner{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
padding: 14px 0;
}
.uf-footer-bottom a{
color: rgba(255,255,255,.70);
text-decoration: none;
font-weight: 800;
}
.uf-footer-bottom a:hover{ color: rgba(255,255,255,.95); }
/* MOBILE */
@media (max-width: 980px){
.uf-footer-inner{
grid-template-columns: 1fr;
gap: 14px;
}
.uf-footer-top{ padding: 26px 0 16px; }
.uf-footer-map iframe{ height: 170px; }
}
/* =========================================================
FOOTER v4 — CLEAN / BRIGHT / ULTRA PREMIUM
Pegar al final de base.css
========================================================= */
.uf-footer{
position: relative;
width: 100%;
max-width: none;
padding: 0;
background:
radial-gradient(900px 520px at 20% -10%, rgba(255,255,255,.12), transparent 60%),
radial-gradient(900px 520px at 86% -12%, rgba(255,255,255,.10), transparent 62%),
linear-gradient(180deg, #0b0d10 0%, #07080a 100%);
border-top: 1px solid rgba(255,255,255,.10);
overflow: hidden;
}
.uf-footer::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(700px 260px at 35% 0%, rgba(255,255,255,.08), transparent 55%),
radial-gradient(700px 260px at 80% 0%, rgba(255,255,255,.06), transparent 55%);
opacity: .9;
}
/* contenedor ancho real */
.uf-footer .uf-footer-inner.uf-wide{
width: min(1500px, calc(100% - 96px));
margin: 0 auto;
}
@media (max-width: 1100px){
.uf-footer .uf-footer-inner.uf-wide{ width: calc(100% - 44px); }
}
@media (max-width: 760px){
.uf-footer .uf-footer-inner.uf-wide{ width: calc(100% - 22px); }
}
/* TOP */
.uf-footer-top{ padding: 42px 0 18px; }
/* GRID limpio (sin “mazacote”) */
.uf-footer-inner{
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1.25fr;
gap: 22px;
align-items: start;
}
/* “Columns” sin cajas: separadores suaves */
.uf-footer-col{
padding: 6px 0 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.uf-footer-col + .uf-footer-col{
border-left: 1px solid rgba(255,255,255,.10);
padding-left: 22px;
}
@media (max-width: 980px){
.uf-footer-inner{ grid-template-columns: 1fr; gap: 18px; }
.uf-footer-col + .uf-footer-col{
border-left: 0;
padding-left: 0;
border-top: 1px solid rgba(255,255,255,.10);
padding-top: 18px;
}
.uf-footer-top{ padding: 26px 0 14px; }
}
/* Titulares minimal */
.uf-footer-h{
margin: 0 0 12px;
font-size: 11px;
letter-spacing: .26em;
font-weight: 900;
text-transform: uppercase;
color: rgba(255,255,255,.62);
}
/* Brand */
.uf-footer-brand .uf-footer-logo{
display: inline-flex;
align-items: baseline;
gap: 10px;
text-decoration: none;
}
.uf-footer-sitename,
.uf-footer-brand strong{
font-size: 18px;
letter-spacing: .14em;
font-weight: 950;
text-transform: uppercase;
color: rgba(255,255,255,.96);
}
.uf-footer-tagline{
margin: 10px 0 16px;
font-size: 14px;
line-height: 1.55;
font-weight: 650;
color: rgba(255,255,255,.72);
max-width: 38ch;
}
/* CTAs: 2 botones muy limpios */
.uf-footer-cta{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
@media (max-width: 1100px){ .uf-footer-cta{ grid-template-columns: 1fr; } }
.uf-footer .uf-btn{
height: 46px;
border-radius: 14px;
font-weight: 900;
letter-spacing: .02em;
font-size: 13px;
justify-content: center;
box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
.uf-footer .uf-btn-primary{
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
color: rgba(0,0,0,.92);
border: 1px solid rgba(255,255,255,.18);
}
.uf-footer .uf-btn-ghost{
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.92);
}
.uf-footer .uf-btn-ghost:hover{
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.22);
}
/* Links “premium” */
.uf-footer a{
color: rgba(255,255,255,.86);
text-decoration: none;
}
.uf-footer a:hover{ color: rgba(255,255,255,1); }
/* Contacto (tipografía + jerarquía) */
.uf-footer-contact{
display: grid;
gap: 10px;
}
.uf-footer-contact a,
.uf-footer-contact div{
font-weight: 900;
}
.uf-footer-contact small{
display:block;
margin-top: 2px;
font-size: 12px;
font-weight: 650;
color: rgba(255,255,255,.60);
}
.uf-footer-muted{
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.50);
}
/* Horarios tabla minimal */
.uf-footer-hours{
display: grid;
gap: 10px;
}
.uf-footer-mini{
display:flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,.10);
}
.uf-footer-mini:first-child{ border-top: 0; padding-top: 0; }
.uf-footer-mini-k{
font-size: 11px;
font-weight: 900;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
}
.uf-footer-mini-v{
font-size: 13px;
font-weight: 950;
color: rgba(255,255,255,.92);
}
/* Mapa: limpio, sin “caja gorda” */
.uf-footer-map{
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 22px 80px rgba(0,0,0,.55);
}
.uf-footer-map iframe{
display:block;
width:100%;
height: 180px;
filter: saturate(1.02) contrast(1.06);
}
@media (max-width: 980px){
.uf-footer-map iframe{ height: 170px; }
}
.uf-footer-map-link{
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 950;
}
/* Bottom: ultra limpio */
.uf-footer-bottom{
border-top: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.38);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.uf-footer-bottom-inner{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
padding: 14px 0;
}
.uf-footer-bottom,
.uf-footer-bottom a{
color: rgba(255,255,255,.62);
font-weight: 800;
}
.uf-footer-bottom a:hover{ color: rgba(255,255,255,.92); }
/* Social chips ultra limpios */
.uf-footer-social{
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.uf-footer .uf-social{
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 14px;
border-radius: 999px;
font-weight: 950;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.88);
}
.uf-footer .uf-social:hover{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.22);
color: rgba(255,255,255,1);
}
/* Bottom responsive */
@media (max-width: 760px){
.uf-footer-bottom-inner{
flex-direction: column;
align-items: flex-start;
}
.uf-footer-legal{
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.uf-footer-legal .uf-dot{ display:none; }
}
/* =========================================================
FOOTER · DORADO CORPORATIVO PREMIUM
========================================================= */
.uf-footer{
--uf-gold: #C9A24D;
--uf-gold-soft: rgba(201,162,77,.18);
}
/* títulos */
.uf-footer-h{
color: var(--uf-gold);
letter-spacing: .12em;
}
/* links elegantes */
.uf-footer a{
transition: color .25s ease, border-color .25s ease;
}
.uf-footer a:hover{
color: var(--uf-gold);
}
/* social chips dorados */
.uf-footer .uf-social{
border-color: var(--uf-gold-soft);
}
.uf-footer .uf-social:hover{
border-color: var(--uf-gold);
color: var(--uf-gold);
}
/* líneas finas */
.uf-footer-top,
.uf-footer-bottom{
border-color: rgba(201,162,77,.15);
}
/* puntos separadores */
.uf-footer .uf-dot{
color: var(--uf-gold);
}
/* =========================================================
FOOTER BRAND — CLEAN PREMIUM
========================================================= */
.uf-footer-top{
padding: 56px 0;
}
.uf-footer-inner{
display: grid;
gap: 18px;
align-items: start;
}
.uf-footer-brand{
padding: 26px 26px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: 0 24px 70px rgba(0,0,0,.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.uf-footer-logo{
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.uf-footer-sitename{
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
font-size: 22px;
line-height: 1;
color: #fff;
}
.uf-footer-tagline{
margin: 14px 0 0;
max-width: 40ch;
color: rgba(255,255,255,.74);
font-size: 15px;
line-height: 1.6;
}
/* Quita “neblina” rara en TODAS las cards del footer */
.uf-footer-col{
border-radius: 22px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
box-shadow: 0 24px 70px rgba(0,0,0,.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Si tenías algún overlay/gradiente muy fuerte, lo neutralizamos */
.uf-footer-col::before{
content: none !important;
}
/* =========================================================
SOCIAL BUTTONS — LUXURY MINIMAL
========================================================= */
.uf-footer-social-bottom{
display: flex;
justify-content: center;
gap: 12px;
margin-top: 18px;
}
.uf-footer-social-bottom .uf-social{
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 16px;
border-radius: 999px;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.82);
background: rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.12);
transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.uf-footer-social-bottom .uf-social:hover{
transform: translateY(-1px);
border-color: var(--uf-gold);
color: var(--uf-gold);
background: rgba(0,0,0,.35);
}
/* ✅ Base: colores corporativos globales */
body{
background: radial-gradient(1200px 800px at 50% -200px, rgba(212,175,55,.08), transparent 55%),
radial-gradient(900px 600px at 90% 20%, rgba(212,175,55,.05), transparent 60%),
var(--uf-ink);
color: var(--uf-text);
}
/* Cards / secciones */
.uf-card,
.uf-section .uf-card,
.uf-footer .uf-footer-col,
.uf-pricing-card{
background: var(--uf-card);
border: 1px solid var(--uf-line);
box-shadow: var(--uf-glow);
backdrop-filter: blur(10px);
}
/* Titulares: detalle dorado sutil */
.uf-h1, .uf-h2, .uf-footer-h{
letter-spacing: .06em;
}
.uf-kicker{
color: var(--uf-muted);
}
.uf-kicker::after{
content:"";
display:inline-block;
width:28px;height:2px;
margin-left:10px;
background: var(--uf-gold-grad);
border-radius:999px;
opacity:.9;
vertical-align:middle;
}
/* Botón corporativo */
.uf-btn-primary{
background: var(--uf-gold-grad);
color:#0b0c0f;
border: 0;
box-shadow: 0 10px 30px rgba(212,175,55,.18);
}
.uf-btn-primary:hover{
box-shadow: 0 14px 40px rgba(212,175,55,.26);
transform: translateY(-1px);
}
/* Botón ghost con borde dorado */
.uf-btn-ghost{
background: transparent;
border: 1px solid rgba(212,175,55,.35);
color: var(--uf-text);
}
.uf-btn-ghost:hover{
border-color: rgba(212,175,55,.55);
box-shadow: 0 0 0 1px rgba(212,175,55,.12);
}
/* Links dorados */
a{
color: inherit;
}
a:hover{
color: var(--uf-gold);
}
/* Separadores premium */
.uf-divider{
height:1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,.35), transparent);
opacity:.9;
}
/* ===== Unit Fitness: páginas club/muscle ===== */
.uf-hero.uf-hero-generic{
position: relative;
padding: 90px 0 60px;
background: #0b0f14;
overflow: hidden;
}
.uf-hero.uf-hero-generic::before{
content:"";
position:absolute; inset:0;
background-image: var(--uf-hero-img);
background-size: cover;
background-position: center;
filter: saturate(1.05) contrast(1.05);
transform: scale(1.03);
opacity: .55;
}
.uf-hero.uf-hero-generic::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(90deg, rgba(11,15,20,.92) 0%, rgba(11,15,20,.68) 55%, rgba(11,15,20,.25) 100%);
}
.uf-hero-inner{ position: relative; max-width: 780px; }
.uf-hero-cta{ display:flex; gap:12px; margin-top:18px; flex-wrap: wrap; }
.uf-section{ padding: 48px 0; }
.uf-grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.uf-grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.uf-card{
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 18px;
backdrop-filter: blur(6px);
}
.uf-card-wide{ margin-top: 18px; padding: 22px; }
.uf-inline-cta{ margin-top: 14px; }
@media (max-width: 860px){
.uf-grid-2, .uf-grid-3{ grid-template-columns: 1fr; }
.uf-hero.uf-hero-generic{ padding: 72px 0 48px; }
.uf-hero.uf-hero-generic::after{
background: linear-gradient(180deg, rgba(11,15,20,.92) 0%, rgba(11,15,20,.75) 55%, rgba(11,15,20,.55) 100%);
}
}
/* =========================================================
* HERO — CTAs alineados bonitos (no se van a la derecha)
* ========================================================= */
.uf-hero .uf-hero-ctas,
.uf-hero .uf-ctas,
.uf-hero .uf-buttons{
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
/* Evita que algún botón se “auto-empuje” a la derecha */
.uf-hero .uf-hero-ctas > *,
.uf-hero .uf-ctas > *,
.uf-hero .uf-buttons > *{
margin-left: 0 !important;
}
/* Móvil: centrado y más aire */
@media (max-width: 768px){
.uf-hero .uf-hero-ctas,
.uf-hero .uf-ctas,
.uf-hero .uf-buttons{
justify-content: center;
}
}
.uf-hero a[role="button"],
.uf-hero .uf-btn{
margin-left: 0 !important;
}
/* =========================================================
* TARIFAS — Premium layout (solo página Tarifas)
* ========================================================= */
/* Asegura contexto */
body.page-tarifas #primary,
body.page-tarifas .site-main{
width:100%;
}
/* Contenedor general (evita pegado a bordes) */
body.page-tarifas .entry-content,
body.page-tarifas .wp-block-group,
body.page-tarifas .uf-pricing-page{
max-width:none !important;
width:100% !important;
margin:0 !important;
padding-left:clamp(16px,3vw,56px) !important;
padding-right:clamp(16px,3vw,56px) !important;
}
/* Título de página */
body.page-tarifas h1{
font-size:clamp(34px,4vw,54px);
letter-spacing:-.02em;
margin:18px 0 26px;
}
/* Secciones (Muscle Area / Tarifas HYROX / etc.) */
body.page-tarifas h2{
font-size:clamp(22px,2.4vw,30px);
margin:34px 0 14px;
}
body.page-tarifas h2::after{
content:"";
display:block;
width:46px;
height:2px;
margin-top:10px;
background:rgba(212,175,55,.9);
border-radius:2px;
}
/* “Cards” para cada bloque de contenido */
body.page-tarifas h2 + p,
body.page-tarifas h2 + ul,
body.page-tarifas h2 + ol,
body.page-tarifas h2 + div,
body.page-tarifas h3 + p,
body.page-tarifas h3 + ul,
body.page-tarifas h3 + div{
border:1px solid rgba(212,175,55,.22);
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border-radius:22px;
padding:18px 18px;
box-shadow:0 18px 60px rgba(0,0,0,.45);
}
/* Si el contenido está en párrafos sueltos (como en tu captura), lo ordenamos */
body.page-tarifas .entry-content{
display:block;
}
/* Mejor lectura del texto */
body.page-tarifas p{
color:rgba(255,255,255,.82);
line-height:1.65;
margin:10px 0;
}
/* Listas más limpias */
body.page-tarifas ul,
body.page-tarifas ol{
margin:12px 0;
padding-left:18px;
}
body.page-tarifas li{
margin:8px 0;
}
/* Mini “pills” para precios detectables (si van en strong o empiezan por €) */
body.page-tarifas strong{
color:rgba(255,255,255,.95);
}
/* =========================================================
* OPCIONAL: si tienes tablas o bloques tipo “pricing”
* ========================================================= */
body.page-tarifas table{
width:100%;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
border-radius:18px;
border:1px solid rgba(212,175,55,.22);
background:rgba(255,255,255,.02);
}
body.page-tarifas th,
body.page-tarifas td{
padding:14px 14px;
border-bottom:1px solid rgba(255,255,255,.08);
}
body.page-tarifas th{
text-align:left;
font-weight:800;
}
/* Mobile */
@media (max-width:768px){
body.page-tarifas .entry-content{
padding-left:16px !important;
padding-right:16px !important;
}
}
/* =========================================================
* CrossFit — Testimonios dots (quita cuadrados rojos)
* ========================================================= */
.uf-tm-dots{
display: flex;
gap: 10px;
margin-top: 14px;
}
.uf-tm-dots .uf-dot{
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.28);
background: transparent;
cursor: pointer;
outline: none;
box-shadow: none;
}
.uf-tm-dots .uf-dot.is-active{
background: rgba(255,255,255,.9);
border-color: rgba(255,255,255,.9);
}
.uf-tm-dots .uf-dot:focus,
.uf-tm-dots .uf-dot:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
/* CrossFit gallery grid */
.uf-gallery-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
@media (max-width: 980px){
.uf-gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.uf-gallery-item{
margin:0;
border-radius:16px;
overflow:hidden;
background: rgba(255,255,255,.06);
}
.uf-gallery-item img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}
.uf-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
@media (max-width:980px){.uf-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.uf-gallery-item{margin:0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);}
.uf-gallery-item img{width:100%;height:220px;object-fit:cover;display:block;}
/* CrossFit gallery premium grid */
.uf-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
@media (max-width:980px){.uf-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.uf-gallery-item{margin:0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.25);}
.uf-gallery-item img{width:100%;height:220px;object-fit:cover;display:block;transform:scale(1.02);transition:transform .25s ease, filter .25s ease;}
.uf-gallery-item:hover img{transform:scale(1.06);filter:brightness(1.05);}
/* HYROX/CrossFit: galería desde el editor (bloques Gutenberg) */
.uf-editor-gallery .wp-block-gallery,
.uf-editor-gallery .blocks-gallery-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
@media (max-width:980px){
.uf-editor-gallery .wp-block-gallery,
.uf-editor-gallery .blocks-gallery-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
.uf-editor-gallery figure,
.uf-editor-gallery .wp-block-image{
margin:0 !important;
border-radius:16px;
overflow:hidden;
background:rgba(255,255,255,.06);
box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.uf-editor-gallery img{
width:100%;
height:220px;
object-fit:cover;
display:block;
transform:scale(1.02);
transition:transform .25s ease, filter .25s ease;
}
.uf-editor-gallery figure:hover img,
.uf-editor-gallery .wp-block-image:hover img{
transform:scale(1.06);
filter:brightness(1.05);
}
/* =========================================================
* FOOTER (Premium v2)
* ========================================================= */
.uf-footer{
position: relative;
background: #07090c;
color: rgba(255,255,255,.86);
overflow: clip;
}
.uf-footer a{ color: inherit; text-decoration: none; }
.uf-footer a:hover{ color: #fff; }
.uf-footer-inner.uf-wide{
width: 100%;
margin: 0 auto;
}
/* ---- CTA band ---- */
.uf-footer-cta{
position: relative;
padding: clamp(28px, 4vw, 56px) 0;
border-bottom: 1px solid rgba(255,255,255,.08);
background:
radial-gradient(900px 380px at 15% 30%, rgba(255,206,95,.18), transparent 60%),
radial-gradient(700px 340px at 85% 20%, rgba(255,255,255,.06), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.uf-footer-cta-inner{
display: grid;
grid-template-columns: 1.25fr .95fr;
gap: clamp(18px, 3vw, 36px);
align-items: start;
padding-left: clamp(16px, 4vw, 64px);
padding-right: clamp(16px, 4vw, 64px);
}
.uf-footer-kicker{
margin: 0 0 8px;
letter-spacing: .16em;
font-size: 12px;
text-transform: uppercase;
color: rgba(255,255,255,.65);
}
.uf-footer-cta-title{
margin: 0 0 10px;
font-size: clamp(24px, 3.2vw, 40px);
line-height: 1.05;
color: #fff;
}
.uf-footer-cta-sub{
margin: 0 0 14px;
font-size: 15px;
line-height: 1.5;
color: rgba(255,255,255,.78);
max-width: 52ch;
}
.uf-footer-badges{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.uf-badge{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
font-size: 12px;
color: rgba(255,255,255,.82);
backdrop-filter: blur(8px);
}
/* ---- Buttons ---- */
.uf-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 16px;
border-radius: 14px;
font-weight: 700;
letter-spacing: .02em;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
user-select: none;
}
.uf-btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.18);
}
.uf-btn:active{ transform: translateY(0); }
.uf-btn-gold{
border-color: rgba(255,206,95,.45);
background: linear-gradient(180deg, rgba(255,206,95,.22), rgba(255,206,95,.08));
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.uf-btn-gold:hover{
border-color: rgba(255,206,95,.70);
background: linear-gradient(180deg, rgba(255,206,95,.28), rgba(255,206,95,.10));
}
.uf-btn-arrow{
font-weight: 900;
opacity: .95;
}
/* ---- Quick actions ---- */
.uf-footer-cta-right{
display: grid;
gap: 12px;
}
.uf-footer-quick{
display: grid;
gap: 10px;
}
.uf-quick{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.uf-quick:hover{
transform: translateY(-1px);
border-color: rgba(255,206,95,.28);
background: rgba(255,255,255,.06);
}
.uf-quick-ic{
width: 38px; height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255,206,95,.10);
border: 1px solid rgba(255,206,95,.25);
}
.uf-quick-k{
display: block;
font-weight: 800;
color: #fff;
line-height: 1.1;
}
.uf-quick-s{
display: block;
margin-top: 2px;
font-size: 12px;
color: rgba(255,255,255,.72);
}
.uf-footer-mini-link{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255,255,255,.76);
}
.uf-footer-mini-link:hover{ color: #fff; }
/* ---- Main grid ---- */
.uf-footer-main{
padding: clamp(22px, 3vw, 44px) 0;
}
.uf-footer-grid{
display: grid;
grid-template-columns: 1.25fr .85fr .95fr 1.25fr;
gap: clamp(18px, 3vw, 36px);
padding-left: clamp(16px, 4vw, 64px);
padding-right: clamp(16px, 4vw, 64px);
}
/* Brand */
.uf-footer-logo{
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.uf-footer .custom-logo{
max-height: 42px;
width: auto;
}
.uf-footer-sitename{
font-weight: 900;
letter-spacing: .02em;
font-size: 18px;
color: #fff;
}
.uf-footer-tagline{
margin: 0 0 14px;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,.78);
max-width: 46ch;
}
.uf-footer-micro{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
font-size: 12px;
color: rgba(255,255,255,.62);
}
.uf-dot{
opacity: .5;
margin: 0 2px;
}
.uf-micro{
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Social */
.uf-footer-social{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.uf-social-ic{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.86);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.uf-social-ic:hover{
transform: translateY(-1px);
border-color: rgba(255,206,95,.25);
background: rgba(255,255,255,.06);
color: #fff;
}
.uf-social-txt{
font-size: 13px;
font-weight: 700;
}
/* Headings */
.uf-footer-h{
margin: 0 0 12px;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.70);
}
/* Footer nav */
.uf-footer-nav{
display: grid;
gap: 10px;
}
.uf-footer-nav a{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.82);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.uf-footer-nav a:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.05);
color: #fff;
}
/* Pills */
.uf-footer-pills{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.uf-pill{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(255,206,95,.25);
background: rgba(255,206,95,.08);
font-size: 12px;
font-weight: 800;
color: rgba(255,255,255,.92);
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.uf-pill:hover{
transform: translateY(-1px);
border-color: rgba(255,206,95,.45);
background: rgba(255,206,95,.12);
color: #fff;
}
/* Contact */
.uf-footer-contact{
display: grid;
gap: 10px;
}
.uf-contact-row{
display: grid;
gap: 4px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.uf-contact-row:hover{
transform: translateY(-1px);
border-color: rgba(255,206,95,.22);
background: rgba(255,255,255,.05);
}
.uf-contact-k{
font-size: 12px;
color: rgba(255,255,255,.62);
letter-spacing: .06em;
text-transform: uppercase;
}
.uf-contact-v{
font-weight: 800;
color: rgba(255,255,255,.92);
}
/* Mini split */
.uf-footer-split{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 6px;
}
.uf-mini{
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
}
.uf-mini-k{
font-size: 12px;
color: rgba(255,255,255,.62);
text-transform: uppercase;
letter-spacing: .06em;
}
.uf-mini-v{
margin-top: 3px;
font-weight: 800;
color: rgba(255,255,255,.92);
}
/* Location card */
.uf-footer-loc-card{
padding: 12px 12px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
}
.uf-footer-hours{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.uf-footer-map{
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
}
.uf-footer-map iframe{
width: 100%;
height: 170px;
border: 0;
display: block;
}
.uf-footer-loc-actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
}
.uf-link{
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 13px;
color: rgba(255,255,255,.80);
}
.uf-link:hover{ color: #fff; }
/* Bottom */
.uf-footer-bottom{
border-top: 1px solid rgba(255,255,255,.08);
padding: 16px 0;
background: rgba(255,255,255,.01);
}
.uf-footer-bottom-inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-left: clamp(16px, 4vw, 64px);
padding-right: clamp(16px, 4vw, 64px);
}
.uf-footer-copy{
font-size: 13px;
color: rgba(255,255,255,.66);
}
.uf-footer-legal{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
}
.uf-footer-legal a{
color: rgba(255,255,255,.70);
font-weight: 800;
}
.uf-footer-legal a:hover{ color: #fff; }
/* Responsive */
@media (max-width: 980px){
.uf-footer-cta-inner{
grid-template-columns: 1fr;
}
.uf-footer-grid{
grid-template-columns: 1fr 1fr;
}
.uf-footer-hours{
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px){
.uf-footer-grid{
grid-template-columns: 1fr;
}
.uf-footer-bottom-inner{
flex-direction: column;
align-items: flex-start;
}
.uf-footer-hours{
grid-template-columns: 1fr;
}
.uf-social-txt{ display:none; }
}
/* ===== Footer: menos cajas, más premium ===== */
/* 1) Grid: 4 columnas -> 3 y la marca ocupa 2 */
@media (min-width: 981px){
.uf-footer-grid{
grid-template-columns: 1.3fr .85fr 1.05fr;
align-items: start;
}
.uf-footer-brand{ grid-column: 1 / 2; }
.uf-footer-col:nth-child(2){ grid-column: 2 / 3; } /* Explorar */
.uf-footer-col:nth-child(3){ grid-column: 3 / 4; } /* Contacto */
.uf-footer-loc{ grid-column: 1 / 4; } /* Ubicación & horarios abajo full */
}
/* 2) Menos borde “gordo” y menos brillo */
.uf-footer-nav a,
.uf-contact-row,
.uf-mini,
.uf-footer-loc-card,
.uf-social-ic,
.uf-quick{
border-color: rgba(255,255,255,.07);
background: rgba(255,255,255,.025);
}
/* 3) Radios un poco más contenidos */
.uf-footer-nav a,
.uf-contact-row,
.uf-mini,
.uf-footer-loc-card,
.uf-quick{
border-radius: 14px;
}
/* 4) El bloque de Ubicación: más fino y el mapa más discreto */
.uf-footer-loc-card{
padding: 14px;
}
.uf-footer-map iframe{
height: 140px;
filter: saturate(.9) contrast(1.05);
opacity: .92;
}
/* 5) Horarios como “chips” alineadas */
.uf-footer-hours{
grid-template-columns: repeat(3, minmax(0,1fr));
}
.uf-mini{ min-height: 74px; }
/* 6) Redes: más pequeñas */
.uf-social-ic{
padding: 8px 10px;
}
.uf-social-txt{ font-size: 12px; }
/* 7) CTA: menos alta para no “aplastar” el footer */
.uf-footer-cta{
padding: clamp(22px, 3vw, 44px) 0;
}
/* =========================================================
* FIX FINAL — Botones globales + footer sin pisar la web
* (Pegar al FINAL de base.css)
* ========================================================= */
/* Quita el test si lo dejaste */
.uf-btn{ outline: none !important; }
/* ====== BOTÓN BASE (WEB ENTERA) ====== */
.uf-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height:48px !important;
padding:0 18px !important;
border-radius:999px !important;
font-weight:850 !important;
letter-spacing:.01em !important;
background: rgba(255,255,255,.06) !important;
border:1px solid rgba(255,255,255,.14) !important;
color: var(--text) !important;
transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease !important;
}
.uf-btn:hover{
transform:translateY(-1px) !important;
border-color:rgba(255,255,255,.22) !important;
background: rgba(255,255,255,.09) !important;
}
/* ====== PRIMARIO (AMARILLO) — WEB ENTERA ====== */
.uf-btn-primary{
background: var(--brand) !important;
border-color: transparent !important;
color: #111 !important;
box-shadow: 0 12px 34px rgba(245,196,0,.18) !important;
}
.uf-btn-primary:hover{
background: var(--brand-2) !important;
box-shadow: 0 16px 40px rgba(245,196,0,.22) !important;
}
/* ====== GHOST — WEB ENTERA ====== */
.uf-btn-ghost{
background: rgba(255,255,255,.02) !important;
border-color: rgba(255,255,255,.14) !important;
color: var(--text) !important;
}
.uf-btn-ghost:hover{
border-color: rgba(255,255,255,.22) !important;
}
/* ====== SM ====== */
.uf-btn-sm{
height:42px !important;
padding:0 14px !important;
font-size:13px !important;
}
/* =========================================================
* SOLO FOOTER — estilo premium oscuro (NO afecta fuera)
* ========================================================= */
.uf-footer .uf-btn{
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.12) !important;
color: #fff !important;
box-shadow: none !important;
}
.uf-footer .uf-btn:hover{
border-color: rgba(255,255,255,.22) !important;
background: rgba(255,255,255,.06) !important;
}
.uf-footer .uf-btn-primary{
background: linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
color: #111 !important;
box-shadow: 0 12px 30px rgba(245,196,0,.28) !important;
}
.uf-footer .uf-btn-primary:hover{
box-shadow: 0 16px 40px rgba(245,196,0,.35) !important;
}
.uf-footer .uf-btn-ghost{
background: rgba(255,255,255,.02) !important;
border-color: rgba(255,255,255,.14) !important;
color: #fff !important;
}
/* LOGO HEADER – tamaño correcto */
.uf-brand-logo img,
.uf-brand .custom-logo {
max-height: 44px; /* ajusta si quieres: 36–48px */
width: auto;
height: auto;
display: block;
}
/* ===============================
BOTONES – IDENTIDAD CORPORATIVA
================================ */
/* Botón principal */
.uf-btn-primary{
background-color: #f5c400;
color: #000;
border: none;
font-weight: 600;
}
.uf-btn-primary:hover{
background-color: #ffd84d;
color: #000;
}
/* Botones secundarios */
.uf-btn-ghost{
background: rgba(255,255,255,0.04);
border: 1px solid rgba(245,196,0,0.4);
color: #fff;
}
.uf-btn-ghost:hover{
background: rgba(245,196,0,0.12);
border-color: #f5c400;
}
/* Botones dentro de cards */
.uf-card .uf-btn{
border-radius: 999px;
}
/* =====================================================
CTA amarillo (blindado) – botones Home/Cards
===================================================== */
/* 1) Botón principal (amarillo) */
.uf-header .uf-btn-primary,
.uf-hero .uf-btn-primary,
.uf-card .uf-btn-primary,
a.uf-btn-primary,
button.uf-btn-primary{
background: #f5c400 !important;
color: #000 !important;
border: none !important;
font-weight: 700 !important;
}
.uf-header .uf-btn-primary:hover,
.uf-hero .uf-btn-primary:hover,
.uf-card .uf-btn-primary:hover{
background: #ffd84d !important;
color: #000 !important;
}
/* 2) Botón secundario (oscuro con borde amarillo) */
.uf-header .uf-btn-ghost,
.uf-hero .uf-btn-ghost,
.uf-card .uf-btn-ghost,
a.uf-btn-ghost,
button.uf-btn-ghost{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(245,196,0,0.55) !important;
color: #fff !important;
}
.uf-header .uf-btn-ghost:hover,
.uf-hero .uf-btn-ghost:hover,
.uf-card .uf-btn-ghost:hover{
background: rgba(245,196,0,0.14) !important;
border-color: #f5c400 !important;
color: #fff !important;
}
/* 3) Que TODOS los botones se vean “premium” */
.uf-btn,
.uf-card .uf-btn{
border-radius: 999px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
}
/* =====================================================
CARDS HOME – botones con amarillo corporativo
(2º botón = CTA amarillo)
===================================================== */
/* Base: todos los botones de card */
.uf-card .uf-card-actions a,
.uf-card .uf-actions a,
.uf-card a.uf-btn{
border-radius: 999px !important;
padding: 10px 16px !important;
font-weight: 700 !important;
letter-spacing: .2px;
}
/* 1º botón: secundario (oscuro + borde amarillo suave) */
.uf-card .uf-card-actions a:first-child,
.uf-card .uf-actions a:first-child{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(245,196,0,0.45) !important;
color: #fff !important;
}
.uf-card .uf-card-actions a:first-child:hover,
.uf-card .uf-actions a:first-child:hover{
background: rgba(245,196,0,0.12) !important;
border-color: #f5c400 !important;
}
/* 2º botón: principal (amarillo) */
.uf-card .uf-card-actions a:nth-child(2),
.uf-card .uf-actions a:nth-child(2){
background: #f5c400 !important;
border: 1px solid #f5c400 !important;
color: #000 !important;
box-shadow: 0 12px 26px rgba(0,0,0,0.35) !important;
}
.uf-card .uf-card-actions a:nth-child(2):hover,
.uf-card .uf-actions a:nth-child(2):hover{
background: #ffd84d !important;
border-color: #ffd84d !important;
color: #000 !important;
}
/* =====================================================
CTA AMARILLO – blindado por enlace a WhatsApp
(funciona aunque cambien las clases/estructura)
===================================================== */
/* CTA principal: cualquier link/botón que vaya a wa.me */
a[href*="wa.me"],
a[href*="api.whatsapp.com"],
a[href*="whatsapp.com/send"]{
background: #f5c400 !important;
color: #000 !important;
border: 1px solid #f5c400 !important;
font-weight: 800 !important;
border-radius: 999px !important;
box-shadow: 0 12px 26px rgba(0,0,0,0.35) !important;
}
/* Hover */
a[href*="wa.me"]:hover,
a[href*="api.whatsapp.com"]:hover,
a[href*="whatsapp.com/send"]:hover{
background: #ffd84d !important;
border-color: #ffd84d !important;
color: #000 !important;
}
/* Secundarios (píldoras) dentro de cards/hero: look premium oscuro */
main a.uf-btn,
main .uf-btn,
main a[class*="btn"],
main a.button,
main .button,
main input[type="submit"],
main button{
border-radius: 999px !important;
}
/* =====================================================
HERO – solo 1 CTA amarillo
Los “pills” (CrossFit/HYROX/Muscle Area) pasan a dark
===================================================== */
/* 1) Mantén amarillo SOLO el CTA principal */
.uf-hero .uf-btn-primary{
background: #f5c400 !important;
color: #000 !important;
border-color: #f5c400 !important;
}
/* 2) Los botones/lista del hero (pills) -> dark premium */
.uf-hero .uf-hero-right a,
.uf-hero .uf-hero-aside a,
.uf-hero .uf-hero-stack a,
.uf-hero .uf-hero-pills a,
.uf-hero .uf-hero-list a{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: #fff !important;
border-radius: 18px !important;
}
.uf-hero .uf-hero-right a:hover,
.uf-hero .uf-hero-aside a:hover,
.uf-hero .uf-hero-stack a:hover,
.uf-hero .uf-hero-pills a:hover,
.uf-hero .uf-hero-list a:hover{
border-color: rgba(245,196,0,0.55) !important;
background: rgba(245,196,0,0.10) !important;
}
/* 3) WhatsApp directo puede quedarse como “accent” suave */
.uf-hero a[href*="wa.me"],
.uf-hero a[href*="whatsapp.com"]{
background: rgba(245,196,0,0.14) !important;
border: 1px solid rgba(245,196,0,0.55) !important;
color: #fff !important;
}
/* =====================================================
FOOTER – CTA corporativo amarillo
===================================================== */
/* Botón principal del footer (Clase de prueba / WhatsApp) */
footer .uf-btn-primary,
footer a[href*="wa.me"],
footer a[href*="whatsapp"]{
background: #f5c400 !important;
color: #000 !important;
border: none !important;
font-weight: 700 !important;
border-radius: 999px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}
/* Hover */
footer .uf-btn-primary:hover,
footer a[href*="wa.me"]:hover,
footer a[href*="whatsapp"]:hover{
background: #ffd84d !important;
color: #000 !important;
}
/* Botón secundario del footer (Ver precios, etc.) */
footer .uf-btn-ghost,
footer a.uf-btn-ghost{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(245,196,0,0.45) !important;
color: #fff !important;
border-radius: 999px !important;
}
footer .uf-btn-ghost:hover{
background: rgba(245,196,0,0.12) !important;
border-color: #f5c400 !important;
}
/* =====================================================
FOOTER (uf-footer) – CTA amarillo blindado
===================================================== */
/* 0) Base: cualquier “botón” dentro del footer */
.uf-footer a,
.uf-footer button{
border-radius: 999px !important;
}
/* 1) PRINCIPAL: WhatsApp / Clase de prueba (por enlace a WhatsApp) */
.uf-footer a[href*="wa.me"],
.uf-footer a[href*="api.whatsapp.com"],
.uf-footer a[href*="whatsapp.com/send"]{
background: #f5c400 !important;
color: #000 !important;
border: 1px solid #f5c400 !important;
font-weight: 800 !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important;
}
.uf-footer a[href*="wa.me"]:hover,
.uf-footer a[href*="api.whatsapp.com"]:hover,
.uf-footer a[href*="whatsapp.com/send"]:hover{
background: #ffd84d !important;
border-color: #ffd84d !important;
color: #000 !important;
}
/* 2) SECUNDARIOS: botones del footer (Ver precios / etc.) */
.uf-footer .uf-btn,
.uf-footer a.uf-btn,
.uf-footer a[class*="btn"],
.uf-footer a.button,
.uf-footer .button,
.uf-footer button{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(245,196,0,0.45) !important;
color: #fff !important;
font-weight: 700 !important;
}
.uf-footer .uf-btn:hover,
.uf-footer a[class*="btn"]:hover,
.uf-footer a.button:hover,
.uf-footer button:hover{
background: rgba(245,196,0,0.12) !important;
border-color: #f5c400 !important;
}
/* =====================================================
FOOTER CTA – Jerarquía premium (solo 1 amarillo sólido)
===================================================== */
/* 1) SOLO el CTA grande en amarillo */
.uf-footer-cta .uf-btn.uf-btn-gold{
background: #f5c400 !important;
color: #000 !important;
border: 1px solid #f5c400 !important;
box-shadow: 0 12px 26px rgba(0,0,0,.35) !important;
}
.uf-footer-cta .uf-btn.uf-btn-gold:hover{
background: #ffd84d !important;
border-color: #ffd84d !important;
color: #000 !important;
}
/* 2) Los 3 “quick” (CrossFit/HYROX/Muscle) -> DARK, no amarillo sólido */
.uf-footer-cta .uf-quick{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: #fff !important;
}
.uf-footer-cta .uf-quick:hover{
background: rgba(245,196,0,.10) !important;
border-color: rgba(245,196,0,.45) !important;
}
/* 3) Link fino “Dudas rápidas” -> solo acento */
.uf-footer-cta .uf-footer-mini-link{
color: rgba(255,255,255,.86) !important;
text-decoration: none !important;
}
.uf-footer-cta .uf-footer-mini-link:hover{
color: #f5c400 !important;
}
/* 4) Píldoras del footer (Clase de prueba / Ver precios) -> outline premium */
.uf-footer .uf-pill{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(245,196,0,.35) !important;
color: #fff !important;
}
.uf-footer .uf-pill:hover{
background: rgba(245,196,0,.12) !important;
border-color: #f5c400 !important;
}
/* =====================================================
FOOTER – Quick buttons premium (dark + icon amarillo)
===================================================== */
/* CTA grande sigue amarillo */
.uf-footer-cta .uf-btn.uf-btn-gold{
background:#f5c400 !important;
color:#000 !important;
border:1px solid #f5c400 !important;
box-shadow:0 12px 26px rgba(0,0,0,.35) !important;
}
.uf-footer-cta .uf-btn.uf-btn-gold:hover{
background:#ffd84d !important;
border-color:#ffd84d !important;
}
/* Quick cards: dark */
.uf-footer-cta .uf-quick{
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: #fff !important;
box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
}
/* Icono: amarillo (sin llenar todo de amarillo) */
.uf-footer-cta .uf-quick .uf-quick-ic{
color: #f5c400 !important;
background: rgba(245,196,0,.10) !important;
border: 1px solid rgba(245,196,0,.30) !important;
border-radius: 12px !important;
padding: 8px 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Hover: borde/acento amarillo suave */
.uf-footer-cta .uf-quick:hover{
border-color: rgba(245,196,0,.45) !important;
background: rgba(245,196,0,.08) !important;
}
/* Link fino: solo acento al hover */
.uf-footer-cta .uf-footer-mini-link{
color: rgba(255,255,255,.86) !important;
text-decoration: none !important;
}
.uf-footer-cta .uf-footer-mini-link:hover{
color: #f5c400 !important;
}
/* Pills: outline premium */
.uf-footer .uf-pill{
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(245,196,0,.35) !important;
color: #fff !important;
}
.uf-footer .uf-pill:hover{
background: rgba(245,196,0,.12) !important;
border-color: #f5c400 !important;
}
/* =====================================================
FOOTER – LIMPIEZA TOTAL DE AMARILLO
SOLO 1 CTA PRINCIPAL
===================================================== */
/* 1️⃣ CTA PRINCIPAL (ÚNICO AMARILLO) */
.uf-footer-cta .uf-btn-gold{
background:#f5c400 !important;
color:#000 !important;
border:none !important;
box-shadow:0 12px 26px rgba(0,0,0,.35) !important;
}
.uf-footer-cta .uf-btn-gold:hover{
background:#ffd84d !important;
}
/* 2️⃣ QUICK BUTTONS → OSCUROS (NADA DE AMARILLO) */
.uf-footer-cta .uf-quick{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color:#fff !important;
box-shadow:none !important;
}
.uf-footer-cta .uf-quick *{
color:#fff !important;
}
.uf-footer-cta .uf-quick:hover{
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.25) !important;
}
/* 3️⃣ ICONOS DE QUICK → BLANCOS (NO AMARILLO) */
.uf-footer-cta .uf-quick-ic{
background: transparent !important;
border:none !important;
color:#fff !important;
}
/* 4️⃣ MINI LINK → TEXTO SIMPLE */
.uf-footer-cta .uf-footer-mini-link{
color: rgba(255,255,255,.7) !important;
}
.uf-footer-cta .uf-footer-mini-link:hover{
color:#fff !important;
text-decoration: underline;
}
/* 5️⃣ PILLS DEL FOOTER → DARK */
.uf-footer .uf-pill{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.12) !important;
color:#fff !important;
}
.uf-footer .uf-pill:hover{
background: rgba(255,255,255,.10) !important;
}
/* WhatsApp flotante — SIEMPRE abajo derecha */
#ufWaFloat.uf-wa-float{
left: auto !important;
right: 22px !important;
bottom: 22px !important;
}
/* En móvil un pelín más pegado */
@media (max-width: 640px){
#ufWaFloat.uf-wa-float{
right: 16px !important;
bottom: 16px !important;
}
}
/* WhatsApp flotante — fijar abajo derecha sí o sí */
#ufWaFloat{
position: fixed !important;
inset: auto !important; /* mata top/right/bottom/left en bloque */
left: auto !important;
right: 22px !important;
bottom: 22px !important;
transform: none !important;
margin: 0 !important;
z-index: 999999 !important;
}
@media (max-width: 640px){
#ufWaFloat{
right: 16px !important;
bottom: 16px !important;
}
}
/* FIX: imágenes dentro de cards en home */
.uf-card img,
.uf-card picture,
.uf-card source{
display:block !important;
opacity:1 !important;
visibility:visible !important;
max-width:100% !important;
height:auto !important;
}
/* =========================================================
* FOOTER — Fix Tablet (768–1024)
* ========================================================= */
@media (max-width: 1024px){
/* evita desbordes horizontales típicos */
.uf-footer,
.uf-footer *{
max-width: 100%;
}
.uf-footer{
overflow-x: hidden;
}
/* contenedor: más aire y centrado consistente */
.uf-footer .uf-footer-inner.uf-wide{
padding-left: clamp(16px, 4vw, 28px);
padding-right: clamp(16px, 4vw, 28px);
}
/* grid/columnas: que respiren y no “choquen” */
.uf-footer-top .uf-footer-inner{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 22px;
align-items: start;
}
/* marca ocupa 2 columnas para no aplastar el logo/texto */
.uf-footer-col.uf-footer-brand{
grid-column: 1 / -1;
}
/* títulos y textos: un pelín más compactos en tablet */
.uf-footer-h{
margin: 0 0 10px;
}
.uf-footer-tagline{
margin: 10px 0 0;
max-width: 60ch;
}
/* si tienes listas/links en columnas, que no se “rompan” */
.uf-footer-col ul{
margin: 0;
padding-left: 0;
}
}
/* =========================================================
* FOOTER — Mobile (por si tablet pequeño)
* ========================================================= */
@media (max-width: 820px){
.uf-footer-top .uf-footer-inner{
grid-template-columns: 1fr;
gap: 18px;
}
}
/* =========================================================
* FIX: header desaturado (por filter/grayscale/saturate)
* ========================================================= */
.uf-header,
.uf-header-bar,
.uf-header-inner,
.uf-header-actions{
filter:none !important;
-webkit-filter:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
opacity:1 !important;
mix-blend-mode:normal !important;
}
/* Si el tema mete un overlay con pseudo-elemento encima */
.uf-header-bar::before,
.uf-header-bar::after,
.uf-header-actions::before,
.uf-header-actions::after{
mix-blend-mode:normal !important;
filter:none !important;
opacity:1 !important;
}
/* Asegura que el botón Instagram quede por encima de overlays */
.uf-header-actions{
position:relative;
z-index:50;
}
.uf-header-actions a.uf-btn.uf-btn-instagram{
position:relative !important;
z-index:60 !important;
isolation:isolate !important;
background-image:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
background-color:transparent !important;
border:0 !important;
color:#fff !important;
}
.uf-header-actions a.uf-btn.uf-btn-instagram svg,
.uf-header-actions a.uf-btn.uf-btn-instagram svg path{
fill:#fff !important;
}
/* =========================================
* FOOTER · Instagram con colores oficiales
* ========================================= */
.uf-footer .uf-social-ic[aria-label="Instagram"]{
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Icono siempre blanco */
.uf-footer .uf-social-ic[aria-label="Instagram"] svg,
.uf-footer .uf-social-ic[aria-label="Instagram"] svg path{
fill: #fff !important;
}
/* Hover premium */
.uf-footer .uf-social-ic[aria-label="Instagram"]:hover{
transform: translateY(-2px);
filter: brightness(1.08) saturate(1.15);
}
/* ================================
* STAFF (móvil) — listas alineadas
* ================================ */
@media (max-width: 900px){
/* Título “Titulaciones y Certificados” */
.uf-staff-card h3,
.uf-staff-card h4,
.uf-staff-card .uf-staff-title{
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Listas: quita padding raro y deja bullets normales */
.uf-staff-card ul,
.uf-staff-card ol{
margin-left: 0 !important;
padding-left: 18px !important; /* bullets alineados */
}
.uf-staff-card li{
margin-left: 0 !important;
padding-left: 0 !important;
}
}
/* =====================================
* FOOTER — Instagram oficial (móvil)
* ===================================== */
@media (max-width: 900px){
/* Botón Instagram del footer */
.uf-footer a[href*="instagram.com"],
.uf-footer .uf-instagram{
width:48px;
height:48px;
min-width:48px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:0;
background-image: linear-gradient(45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%);
color:#fff !important;
box-shadow:none;
}
/* Oculta texto si lo hubiera */
.uf-footer a[href*="instagram.com"] span,
.uf-footer .uf-instagram span{
display:none;
}
/* Icono Instagram (SVG por CSS) */
.uf-footer a[href*="instagram.com"]::before,
.uf-footer .uf-instagram::before{
content:'';
width:20px;
height:20px;
background:#fff;
-webkit-mask:url("data:image/svg+xml;utf8,\
") center / contain no-repeat;
mask:url("data:image/svg+xml;utf8,\
") center / contain no-repeat;
}
}
/* =====================================
* FOOTER — Instagram oficial (móvil) FIX
* ===================================== */
@media (max-width: 900px){
/* Caza cualquier enlace a Instagram dentro del footer */
footer a[href*="instagram.com"],
.uf-footer a[href*="instagram.com"]{
width:48px !important;
height:48px !important;
min-width:48px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
border:0 !important;
background-color:transparent !important;
background-image:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
box-shadow:none !important;
/* si había texto */
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
}
/* Oculta cualquier contenido interno (texto/img/iconos antiguos) */
footer a[href*="instagram.com"] > *,
.uf-footer a[href*="instagram.com"] > *{
display:none !important;
}
/* Icono blanco (SVG como imagen, súper compatible) */
footer a[href*="instagram.com"]::after,
.uf-footer a[href*="instagram.com"]::after{
content:"";
width:20px;
height:20px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm10 2a3 3 0 013 3v10a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h10zm-5 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zm0 2a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm4.75-.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z'/%3E%3C/svg%3E");
}
}