/* ui.css — Componentes propios añadidos (no forman parte del export original) */

/* Scroll suave para anclas */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Entrada escalonada del contenido del hero al cargar la página */
@media (prefers-reduced-motion: no-preference) {
    @keyframes vsRise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
    .vs-courses-hero > .vs-wrap > *,
    .vs-lp-hero > .vs-wrap > *,
    .vs-about-hero > .vs-wrap > *,
    .vs-cd-hero > .wrap > * {
        animation: vsRise .8s cubic-bezier(.16,.84,.44,1) both;
    }
    .vs-courses-hero > .vs-wrap > *:nth-child(1), .vs-lp-hero > .vs-wrap > *:nth-child(1), .vs-about-hero > .vs-wrap > *:nth-child(1), .vs-cd-hero > .wrap > *:nth-child(1) { animation-delay:.05s; }
    .vs-courses-hero > .vs-wrap > *:nth-child(2), .vs-lp-hero > .vs-wrap > *:nth-child(2), .vs-about-hero > .vs-wrap > *:nth-child(2), .vs-cd-hero > .wrap > *:nth-child(2) { animation-delay:.16s; }
    .vs-courses-hero > .vs-wrap > *:nth-child(3), .vs-lp-hero > .vs-wrap > *:nth-child(3), .vs-about-hero > .vs-wrap > *:nth-child(3), .vs-cd-hero > .wrap > *:nth-child(3) { animation-delay:.27s; }
    .vs-courses-hero > .vs-wrap > *:nth-child(4), .vs-lp-hero > .vs-wrap > *:nth-child(4), .vs-about-hero > .vs-wrap > *:nth-child(4), .vs-cd-hero > .wrap > *:nth-child(4) { animation-delay:.38s; }
}

/* Reveal al hacer scroll (solo si hay JS: nunca esconde contenido sin JS) */
html.vs-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); will-change: opacity, transform; }
html.vs-js .reveal.in { opacity: 1; transform: none; }

/* ============================================
   SISTEMA DE FILTROS REUTILIZABLE (global) + cards subvencionats
   ============================================ */
.vs-tools { margin:34px 0 0; }
.vs-filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.vs-filter { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:1.5px solid #e6e2e7; background:#fff; color:#4b4b5a; font-weight:600; font-size:.92rem; padding:9px 18px; border-radius:50px; cursor:pointer; transition:all .22s cubic-bezier(.4,0,.2,1); font-family:inherit; }
.vs-filter svg { width:16px; height:16px; fill:currentColor; opacity:.85; }
.vs-filter .cnt { font-size:.78rem; opacity:.6; font-weight:700; }
.vs-filter:hover { border-color:#c4365a; color:#c4365a; transform:translateY(-2px); box-shadow:0 6px 16px rgba(196,54,90,.12); }
.vs-filter.active { background:linear-gradient(135deg,#c4365a,#9e2b48); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(196,54,90,.32); }
.vs-filter.active .cnt { opacity:.85; }
.vs-tools-row { display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.vs-free-toggle { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; border:1.5px solid #e6e2e7; background:#fff; color:#4b4b5a; font-weight:700; font-size:.9rem; padding:11px 18px; border-radius:50px; transition:all .2s ease; white-space:nowrap; font-family:inherit; }
.vs-free-toggle .dot { width:34px; height:20px; border-radius:50px; background:#dcd8de; position:relative; transition:background .25s ease; flex-shrink:0; }
.vs-free-toggle .dot::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .25s ease; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.vs-free-toggle.on { border-color:transparent; background:linear-gradient(135deg,#c4365a,#9e2b48); color:#fff; box-shadow:0 6px 18px rgba(196,54,90,.32); }
.vs-free-toggle.on .dot { background:rgba(255,255,255,.45); }
.vs-free-toggle.on .dot::after { transform:translateX(14px); }
.vs-results { text-align:center; color:#8a8a96; font-size:.92rem; margin-top:22px; }
.vs-results strong { color:#9e2b48; }

/* ============================================
   COMPONENTES INTERACTIVOS GLOBALES (flip cards + acordeón)
   ============================================ */
.vs-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .vs-grid-3{grid-template-columns:1fr;} }

.vs-flips { perspective:1600px; }
.vs-flip { position:relative; cursor:pointer; outline:none; }
.vs-flip-inner { position:relative; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1); min-height:230px; }
.vs-flip.flipped .vs-flip-inner { transform:rotateY(180deg); }
@media (hover:hover){ .vs-flip:hover .vs-flip-inner { transform:rotateY(180deg); } }
.vs-flip:focus-visible .vs-flip-inner { transform:rotateY(180deg); }
.vs-flip-face { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; display:flex; flex-direction:column; border-radius:18px; padding:30px 28px; }
.vs-flip-front { background:#fff; border:1px solid #eceaf0; box-shadow:0 6px 24px rgba(0,0,0,.05); align-items:flex-start; }
.vs-flip-front .mark { width:54px; height:54px; border-radius:14px; background:#fdf2f4; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.vs-flip-front .mark svg { width:27px; height:27px; fill:#c4365a; }
.vs-flip-front h3 { font-size:1.2rem; font-weight:700; color:#14141f; margin:0; }
.vs-flip-hint { margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:#c4365a; font-weight:700; font-size:.85rem; padding-top:16px; }
.vs-flip-back { background:linear-gradient(150deg,#1a1a2e,#3a2230); color:#fff; transform:rotateY(180deg); justify-content:center; border:1px solid transparent; }
.vs-flip-back p { color:rgba(255,255,255,.92); line-height:1.6; margin:0; font-size:.96rem; }
.vs-flip-back .back-t { font-weight:700; color:#fff; margin:0 0 8px; font-size:1.05rem; }

.vs-acc { background:#fff; border:1px solid #eceaf0; border-radius:14px; margin-bottom:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.04); transition:box-shadow .2s ease; }
.vs-acc.open { box-shadow:0 10px 30px rgba(196,54,90,.10); }
.vs-acc-head { width:100%; display:flex; align-items:center; gap:16px; padding:18px 22px; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; }
.vs-acc-head:hover { background:#fdf2f4; }
.vs-acc-titles { flex:1; display:flex; flex-direction:column; }
.vs-acc-titles .t { font-weight:700; color:#14141f; font-size:1.02rem; line-height:1.3; }
.vs-acc-chev { width:11px; height:11px; min-width:11px; border-right:2.5px solid #c4365a; border-bottom:2.5px solid #c4365a; transform:rotate(45deg); transition:transform .3s ease; }
.vs-acc.open .vs-acc-chev { transform:rotate(-135deg); }
.vs-acc-body { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); }
.vs-acc-inner { padding:0 22px 22px; color:#555; line-height:1.7; }

/* Crédito de diseño (footer) — sutil i elegant */
.vs-footer-credit { margin-left:10px; padding-left:14px; border-left:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.38); font-size:.82rem; letter-spacing:.2px; }
.vs-footer-credit a { color:rgba(255,255,255,.6); font-weight:600; text-decoration:none; transition:color .25s ease; }
.vs-footer-credit a:hover { color:#f3aebf; }
@media (max-width:768px){ .vs-footer-credit { display:block; margin:8px 0 0; padding:0; border-left:none; } }

/* Buscador (global) */
.vs-search { max-width:520px; width:100%; position:relative; }
.vs-search input { width:100%; padding:14px 18px 14px 48px; font-size:1rem; font-family:inherit; color:#1a1a2e; background:#fff; border:1.5px solid #e0dde4; border-radius:50px; transition:border-color .2s ease, box-shadow .2s ease; }
.vs-search input:focus { outline:none; border-color:#c4365a; box-shadow:0 0 0 4px rgba(196,54,90,.12); }
.vs-search svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; fill:#9aa0aa; }

/* Cards de cursos subvencionats (sense imatge) */
.vs-soc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0 0; }
@media (max-width:900px){ .vs-soc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .vs-soc-grid{grid-template-columns:1fr;} }
.vs-soc-card { display:flex; flex-direction:column; background:#fff; border:1px solid #ece8ee; border-left:4px solid #c4365a; border-radius:14px; padding:22px; box-shadow:0 4px 16px rgba(20,20,31,.05); transition:transform .25s ease, box-shadow .25s ease; text-decoration:none; color:inherit; }
.vs-soc-card:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(196,54,90,.14); }
.vs-soc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.vs-soc-ico { width:44px; height:44px; min-width:44px; border-radius:12px; background:#fdf2f4; display:flex; align-items:center; justify-content:center; }
.vs-soc-ico svg { width:22px; height:22px; fill:#c4365a; }
.vs-soc-grup { font-size:.64rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:5px 11px; border-radius:50px; white-space:nowrap; }
.vs-grup-atur { background:#fdf2f4; color:#9e2b48; }
.vs-grup-treballadors { background:#eef4ff; color:#1d4ed8; }
.vs-soc-card h3 { font-size:1.02rem; font-weight:700; color:#14141f; line-height:1.38; margin:0 0 14px; }
.vs-soc-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #f2ecef; padding-top:14px; margin-top:auto; }
/* Badges (colectiu + inscripció oberta) */
.vs-soc-badges { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.vs-soc-open { display:inline-flex; align-items:center; gap:5px; font-size:.6rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#16a34a,#15803d); padding:5px 10px; border-radius:50px; white-space:nowrap; box-shadow:0 3px 10px rgba(21,128,61,.35); }
.vs-soc-open svg { width:12px; height:12px; fill:#fff; }
.vs-soc-card.is-open { border-left-color:#16a34a; box-shadow:0 8px 26px rgba(21,128,61,.10); }
.vs-soc-card.is-open:hover { box-shadow:0 18px 40px rgba(21,128,61,.16); }
/* Dades reals del curs (hores, dates, horari) */
.vs-soc-data { list-style:none; margin:0 0 16px; padding:14px 0 0; border-top:1px solid #f2ecef; display:grid; gap:9px; }
.vs-soc-data li { display:flex; align-items:flex-start; gap:10px; color:#2b2b38; font-size:.85rem; line-height:1.4; }
.vs-soc-data svg { width:16px; height:16px; fill:#c4365a; flex-shrink:0; margin-top:1px; }
.vs-soc-data strong { color:#14141f; }
/* Filtro "Inscripció oberta" en verde cuando activo */
.vs-filter-open.active { background:linear-gradient(135deg,#16a34a,#15803d); box-shadow:0 6px 18px rgba(21,128,61,.32); }
.vs-soc-area { font-size:.74rem; font-weight:700; color:#9aa0aa; text-transform:uppercase; letter-spacing:.5px; }
.vs-soc-req { display:inline-flex; align-items:center; gap:6px; color:#c4365a; font-weight:700; font-size:.88rem; text-decoration:none; }
.vs-soc-req svg { width:15px; height:15px; fill:currentColor; transition:transform .2s ease; }
.vs-soc-req:hover svg { transform:translateX(4px); }
.vs-courses-empty { text-align:center; color:#8a8a96; padding:50px 0; }

/* ============================================
   HEADER ÚNICO — IDÉNTICO EN TODAS LAS PÁGINAS (elemento común de unión)
   Sólido (fondo blanco, texto oscuro), mismos estilos/medidas en todas las URL.
   Anula el estado "transparente" y "scrolled" del export para garantizar coherencia.
   ============================================ */
.vs-header {
    background: rgba(255,255,255,.9) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 24px rgba(20,20,31,.08) !important;
    padding-top: 0 !important;
}
/* Fallback si no hay soporte de backdrop-filter: fondo casi opaco (sigue legible) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .vs-header { background: rgba(255,255,255,.96) !important; }
}
.vs-header .vs-header-inner { height: var(--vs-header-height, 80px) !important; }
.vs-logo-name { color: var(--vs-dark, #1a1a2e) !important; text-shadow: none !important; }
.vs-logo-tagline { color: var(--vs-gray, #6b7280) !important; text-shadow: none !important; }
.vs-nav-link { color: var(--vs-dark, #1a1a2e) !important; text-shadow: none !important; }
.vs-nav-link:hover { color: var(--vs-magenta, #c4365a) !important; background: var(--vs-rose, #fdf2f4) !important; }
.vs-nav-link.active { color: var(--vs-magenta, #c4365a) !important; background: var(--vs-rose, #fdf2f4) !important; }
.vs-header-phone { color: var(--vs-dark, #1a1a2e) !important; background: var(--vs-gray-light, #f3f4f6) !important; }
.vs-header-phone:hover { background: var(--vs-rose, #fdf2f4) !important; color: var(--vs-magenta, #c4365a) !important; }
.vs-hamburger-line { background: var(--vs-dark, #1a1a2e) !important; box-shadow: none !important; }


/* ============================================
   BLOQUE FINAL DE FICHA DE CURSO (coherencia + enlazado)
   ============================================ */
.vs-course-foot { background:#faf7f8; border-top:1px solid #efe7ea; padding:64px 0; }
.vs-course-foot .wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

.vs-course-cta2 {
    background:var(--vs-gradient,linear-gradient(135deg,#c4365a,#9e2b48)); color:#fff;
    border-radius:22px; padding:44px 40px; text-align:center; box-shadow:0 16px 44px rgba(196,54,90,.26);
}
.vs-course-cta2 h2 { color:#fff; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; margin:0 0 10px; }
.vs-course-cta2 p { color:rgba(255,255,255,.92); max-width:620px; margin:0 auto 24px; line-height:1.6; }
.vs-course-cta2 .btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.vs-course-cta2 a { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:50px; font-weight:700; text-decoration:none; transition:transform .2s ease; }
.vs-course-cta2 .solid { background:#fff; color:#9e2b48; }
.vs-course-cta2 .ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.65); }
.vs-course-cta2 a:hover { transform:translateY(-3px); }

.vs-related { margin-top:54px; }
.vs-related h3 { font-size:1.3rem; font-weight:800; color:#14141f; margin:0 0 6px; }
.vs-related .sub { color:#8a8a96; font-size:.95rem; margin:0 0 24px; }
.vs-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .vs-related-grid{grid-template-columns:1fr;} }
.vs-related-card {
    display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid #eceaf0; border-radius:14px;
    padding:22px; text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease;
}
.vs-related-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(196,54,90,.12); }
.vs-related-card .area { align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#9e2b48; background:#fdf2f4; padding:4px 11px; border-radius:50px; }
.vs-related-card h4 { font-size:1.02rem; font-weight:700; color:#14141f; margin:0; line-height:1.4; flex:1; }
.vs-related-card .go { color:#c4365a; font-weight:700; font-size:.9rem; }

/* ============================================
   BREADCRUMBS (migas) — paginas interiores
   ============================================ */
.vs-crumbs {
    margin-top: var(--vs-header-height, 80px);
    background: #faf7f8;
    border-bottom: 1px solid #efe7ea;
}
.vs-crumbs-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; }
.vs-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 0.85rem; }
.vs-crumbs a { color: #6b7280; text-decoration: none; }
.vs-crumbs a:hover { color: #c4365a; }
.vs-crumbs li + li::before { content: "›"; margin-right: 8px; color: #c4365a; }
.vs-crumbs [aria-current] { color: #1a1a2e; font-weight: 600; }


/* ============================================
   BOTÓN WHATSAPP FLOTANTE
   ============================================ */
.vs-wa { position:fixed; left:22px; bottom:24px; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; z-index:9990; box-shadow:0 6px 20px rgba(37,211,102,.5); transition:transform .2s ease, box-shadow .2s ease; }
.vs-wa svg { width:32px; height:32px; fill:#fff; }
.vs-wa:hover { transform:scale(1.08); box-shadow:0 10px 28px rgba(37,211,102,.6); }
.vs-wa::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:vs-wa-pulse 2.4s infinite; }
@keyframes vs-wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (prefers-reduced-motion: reduce){ .vs-wa::after{ animation:none; } }
@media (max-width:768px){ .vs-wa{ left:18px; bottom:18px; width:52px; height:52px; } .vs-wa svg{ width:29px; height:29px; } }

/* ============================================
   AVÍS DE COOKIES (RGPD)
   ============================================ */
.vs-cookies { position:fixed; left:0; right:0; bottom:0; z-index:9995; padding:16px; display:flex; justify-content:center; transform:translateY(130%); transition:transform .4s cubic-bezier(.4,0,.2,1); }
.vs-cookies.show { transform:translateY(0); }
.vs-cookies-inner { max-width:940px; width:100%; background:#15151f; color:rgba(255,255,255,.85); border-radius:16px; box-shadow:0 16px 44px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); padding:18px 24px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.vs-cookies-inner p { margin:0; font-size:.9rem; line-height:1.55; flex:1; min-width:240px; }
.vs-cookies-inner a { color:#f3aebf; }
.vs-cookies-btns { display:flex; gap:10px; }
.vs-ck-rej, .vs-ck-acc { padding:11px 24px; border-radius:50px; font-weight:700; font-size:.9rem; cursor:pointer; border:none; font-family:inherit; transition:transform .15s ease, background .2s ease; }
.vs-ck-rej { background:rgba(255,255,255,.12); color:#fff; }
.vs-ck-rej:hover { background:rgba(255,255,255,.2); }
.vs-ck-acc { background:linear-gradient(135deg,#c4365a,#9e2b48); color:#fff; box-shadow:0 4px 14px rgba(196,54,90,.4); }
.vs-ck-acc:hover { transform:translateY(-2px); }
@media (max-width:600px){ .vs-cookies-inner{ flex-direction:column; align-items:stretch; text-align:center; } .vs-cookies-btns{ justify-content:center; } }

/* ============================================
   BOTÓN VOLVER ARRIBA
   ============================================ */
.vs-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vs-gradient, linear-gradient(135deg, #c4365a 0%, #9e2b48 100%));
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(196, 54, 90, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9990;
}

.vs-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vs-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(196, 54, 90, 0.55);
}

.vs-to-top:focus-visible {
    outline: 3px solid #1a1a2e;
    outline-offset: 3px;
}

.vs-to-top:active {
    transform: translateY(-1px) scale(0.96);
}

.vs-to-top svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

@media (max-width: 768px) {
    .vs-to-top {
        right: 18px;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }
    .vs-to-top svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-to-top { transition: opacity 0.2s ease; }
    .vs-to-top:hover { transform: none; }
}

/* Skip link (accessibilitat WCAG) */
.vs-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#9e2b48;color:#fff;padding:12px 22px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.vs-skip:focus{left:0;outline:3px solid #fff;outline-offset:-3px}
.vs-anchor{position:absolute;width:1px;height:1px;overflow:hidden}