/* ═══════════════════════════════════════════════════════════════════════
   VICLÍNICA · TEMA VISUAL (aprobado)
   Se carga al final de cada página: redefine tipografía, paleta y
   componentes sin cambiar contenidos ni distribución.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografía alojada en el sitio (sin Google Fonts) ── */
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/opensans-normal.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/opensans-italic.woff2') format('woff2');font-weight:300 800;font-style:italic;font-display:swap}
/* Alias: las familias anteriores ahora se dibujan con la nueva tipografía */
@font-face{font-family:'Fraunces';src:url('fonts/montserrat-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/montserrat-normal.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/montserrat-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/montserrat-normal.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/opensans-normal.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/opensans-italic.woff2') format('woff2');font-weight:300 800;font-style:italic;font-display:swap}

/* ── Paleta: turquesa (logo) · magenta suave (logo) · violeta · coral · sol ── */
:root{
  --gr:#0B7F7D;  --gr-d:#0A6664;  --gr-m:#14A8A5; --gr-l:#7FD3D1; --gr-p:#E7F6F5; --gr-s:#BFE6E4; --gr-dp:#0B4F57;
  --at:#BF4A9E;  --at-d:#9C3A82;  --at-m:#BF4A9E; --at-l:#F08BD4; --at-p:#FCEAF6; --at-s:#F4C4E6; --at-dp:#3E0834;
  --pk:#B9584F;  --pk-d:#96443D;  --pk-l:#E9A399; --pk-p:#FBEDEA; --pk-s:#F2CBC5;
  --ki:#6C4CE0;  --ki-d:#5338B8;  --ki-l:#A99BF0; --ki-p:#EFEBFD; --ki-s:#D5CCF8; --ki-dp:#2A1D63;
  --sol:#FFB627; --sol-p:#FFF6DF; --rosa:#F08BD4; --ciruela:#3E0834; --vio-s:#8A70E6;
  --bg:#FFFFFF; --off:#F7FAFB; --white:#FFFFFF; --dark:#0B4F57;
  --txt:#1F2D3A; --txt-m:#33434F; --txt-s:#4A5A68; --txt-x:#6B7A86;
  --border:#E3EAEE; --border-l:#EEF2F4;
}

body{font-family:'Open Sans',system-ui,sans-serif;background:#fff;color:var(--txt)}

/* Títulos: Montserrat, sin cursivas; la palabra destacada va en color */
h1,h2,h3,h4,h5{letter-spacing:-.005em}
h1 em,h2 em,h3 em,h4 em,.sp-h1 em,.sp-h2 em{font-style:normal}
h2 em,.sp-h2 em,.inst-h2 em,.cats-title em,.h2 em{color:var(--gr-m)}
.sp-h1{font-size:clamp(30px,3.6vw,46px);line-height:1.12}
.sp-h2,.inst-h2,.h2{font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:var(--dark)}
.inst-h1,.store-h1{font-size:clamp(30px,3.6vw,46px);line-height:1.12}
.cats-title{color:var(--dark)}
.cta-h{font-size:clamp(28px,3.2vw,42px)}
.hero-manifesto-quote{font-weight:500!important;font-size:clamp(20px,2.3vw,30px)!important;line-height:1.45!important}
.inst-manifesto p{font-weight:500}
[style*="Fraunces"]{letter-spacing:-.005em}

/* Etiquetas tipo píldora */
.tag,.sp-eyebrow,.inst-eyebrow,.inst-tag{font-family:'Montserrat',sans-serif;letter-spacing:.12em}

/* ── Botones: píldora, Montserrat, mayúsculas ── */
.btn-at,.btn-gr,.btn-pk,.btn-ki,.btn-nav-cta,.btn-ss-at,.price-cta,.float-cta,.empresa-cta,.mob-cta{
  border-radius:100px!important;font-family:'Montserrat',sans-serif!important;font-weight:700!important;letter-spacing:.05em;text-transform:uppercase;font-size:13.5px}
.btn-ghost-wh,.btn-ghost-ss,.btn-ghost,.modal-btn{border-radius:100px!important;font-family:'Montserrat',sans-serif!important;font-weight:600!important}
.btn-at,.btn-nav-cta,.btn-ss-at,.float-cta,.mob-cta{background:var(--at)!important;color:#fff!important;box-shadow:0 8px 22px rgba(191,74,158,.28)}
.btn-at:hover,.btn-nav-cta:hover,.btn-ss-at:hover,.float-cta:hover{background:var(--at-d)!important}
.btn-gr{background:var(--gr)!important;color:#fff!important}
.btn-pk{background:var(--pk)!important;color:#fff!important}
.btn-ki{background:var(--ki)!important;color:#fff!important}
/* En los hero, el botón principal siempre es magenta suave */
.sp-hero .btn-gr,.sp-hero .btn-pk,.sp-hero .btn-ki,.store-hero .btn-gr,.inst-hero .btn-gr{background:var(--at)!important}

/* ── Barra superior de contacto: violeta suave ── */
.topbar{background:linear-gradient(90deg,#6C4CE0 0%,#8A70E6 60%,#A08AEC 100%)!important;border-bottom:0!important}
.tc-item,.tc-item strong,.ts-a{color:#fff!important}
.tc-sep{background:rgba(255,255,255,.35)!important}

/* ── Menú ── */
.nav-a.active{color:var(--at-d)!important;background:var(--at-p)!important}
.nav-a:hover{color:var(--at-d)!important;background:var(--at-p)!important}

/* ── Iconografía armónica: recuadros redondeados con tinte de color ── */
.sp-icard-ico,.inst-pillar-ico,.store-card-ico,.pro-item-ico,.help-section-ico,.cat-group-ico,.doc-ico,.include-ico,.empresa-ico,.di-ico,.fcard-ico,.sp-fcard-n{border-radius:14px!important}
.di-ico{background:var(--at-p)!important;color:var(--at)!important}
.sp-icard-ico{background:var(--gr-p)!important;color:var(--gr)!important}
.include-ico{background:var(--ki-p)!important;color:var(--ki)!important}

/* ── Bloques de cierre (CTA): degradado ciruela → violeta → magenta suave ── */
.sp-cta-sec,.cta-sec,.store-cta,.inst-cta{background:linear-gradient(105deg,#3E0834 0%,#6C4CE0 58%,#BF4A9E 100%)!important}
.sp-cta-sec .btn-gr,.cta-sec .btn-gr,.store-cta .btn-at,.inst-cta .btn-gr{background:var(--sol)!important;color:var(--txt)!important;box-shadow:0 8px 22px rgba(255,182,39,.35)}
.sp-cta-trust-item strong{color:#fff!important}
.sp-cta-trust-item span{color:rgba(255,255,255,.75)!important}

/* ── Portada: las cuatro tarjetas de servicio con color ── */
.units-grid .ucard{border:0!important;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.units-grid .ucard:nth-child(1){background:var(--gr)}
.units-grid .ucard:nth-child(2){background:var(--ki)}
.units-grid .ucard:nth-child(3){background:var(--pk)}
.units-grid .ucard:nth-child(4){background:var(--at)}
.units-grid .ucard .h2,.units-grid .ucard .ucard-num,.units-grid .ucard .unit-intro,.units-grid .ucard .ucard-link,.units-grid .ucard .ucard-stat span{color:#fff!important}
.units-grid .ucard .unit-intro{opacity:.94}
.units-grid .ucard .ucard-stat span:last-child{opacity:.85}
.units-grid .ucard .ucard-stats{border-top-color:rgba(255,255,255,.22)!important}
.units-grid .ucard .ucard-stat+.ucard-stat{border-left-color:rgba(255,255,255,.22)!important}
.units-grid .ucard .tag{background:rgba(255,255,255,.18)!important;color:#fff!important}
.units-grid .ucard .h2{font-size:clamp(20px,1.7vw,24px)!important}

/* Pasos del proceso: número en color */
.paso:nth-child(1) .paso-n{color:var(--gr)}.paso:nth-child(2) .paso-n{color:var(--ki)}
.paso:nth-child(3) .paso-n{color:var(--pk)}.paso:nth-child(4) .paso-n{color:var(--at)}
.paso-n{opacity:1!important}
.sp-step:nth-child(1) .sp-step-n{background:var(--gr)!important;color:#fff!important}
.sp-step:nth-child(2) .sp-step-n{background:var(--ki)!important;color:#fff!important}
.sp-step:nth-child(3) .sp-step-n{background:var(--pk)!important;color:#fff!important}
.sp-step:nth-child(4) .sp-step-n{background:var(--at)!important;color:#fff!important}

/* Somos: tarjetas del equipo con panel de color */
.inst-pillar:has(> img){color:#fff;border:0!important}
.inst-pillar.at:has(> img){background:var(--gr)!important}
.inst-pillar.ki:has(> img){background:var(--ki)!important}
.inst-pillar:has(> img) h4,.inst-pillar:has(> img) p{color:#fff!important}
.inst-pillar:has(> img) p[style*="font-weight:600"]{color:var(--sol)!important}

/* Fondos alternos claros (antes crema) */
.bg-ln,.bg-of,.store-sec,.family-sec{background:var(--off)!important}

/* Pie de página */
.footer{background:var(--dark)!important}

/* ── Ajustes tras revisión visual ── */
/* Pasos de las páginas de servicio: círculo de color sólido con número legible */
.sp-step-n{opacity:1!important;width:44px!important;height:44px!important;min-width:44px;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif!important;font-size:16px!important;font-weight:700!important;line-height:1!important;color:#fff!important;background:var(--gr)!important}
/* Etiqueta dentro de las tarjetas de la portada en una sola línea */
.units-grid .ucard .tag{font-size:9.5px!important;letter-spacing:.08em!important;white-space:nowrap;padding:5px 11px!important}

/* ═══ Unificación final del diseño ═══════════════════════════════════════ */

/* Títulos en zonas de contenido (fondo blanco): violeta, con la palabra destacada en magenta */
.sp-h2,.inst-h2,.h2,.intro-h,.cats-title,.notify-left h2,.help-section-head h2,.pp-wrap h2,
.cat-group-head h3,.docs-teaser h3,.doc-empty h3,.cta-form-h,.otras-box h3,.cond-row h3{color:var(--ki-d)!important}
.sp-h2 em,.inst-h2 em,.h2 em,.intro-h em,.cats-title em,.notify-left h2 em,.pp-wrap h2 em{color:var(--at)!important}
/* Títulos de tarjetas */
.sp-fcard h4,.sp-step-body h4,.paso-body h4,.inst-pillar h4,.sp-icard h4,.fcard h4,.store-card h4,.pro-item strong,
.include-item h4,.ficha-card h4,.ficha-block h2,.price-name,.empresa-card h3,.cat-card h3,.doc-text h3{color:var(--ki-d)!important}
/* Textos de contenido en gris */
.sp-body p,.inst-body p,.lead,.sp-fcard p,.sp-icard p,.inst-pillar p,.paso-body p,.sp-step-body p,.store-card p,.cat-card p{color:var(--txt-s)}
/* Excepciones: títulos sobre fondos de color se mantienen blancos */
.units-grid .ucard .h2,.units-grid .ucard .h2 em,.inst-pillar:has(> img) h4,.sp-cta-sec h2,.cta-sec h2,.cta-h,.store-cta h2,.inst-cta h2,.inst-manifesto p{color:#fff!important}

/* Números de tarjetas "Lo que incluye": visibles y en color, como "Así trabajamos" */
.sp-fcard-n{opacity:1!important;font-family:'Montserrat',sans-serif!important;font-weight:700!important;font-size:40px!important}
.sp-fcard:nth-child(4n+1) .sp-fcard-n{color:var(--gr)!important}
.sp-fcard:nth-child(4n+2) .sp-fcard-n{color:var(--ki)!important}
.sp-fcard:nth-child(4n+3) .sp-fcard-n{color:var(--pk)!important}
.sp-fcard:nth-child(4n+4) .sp-fcard-n{color:var(--at)!important}

/* Íconos y números en recuadro: color sólido en secuencia, trazo blanco */
.sp-icard-ico,.inst-pillar-ico{color:#fff!important;font-family:'Montserrat',sans-serif!important;font-weight:700!important}
.sp-icard:nth-child(4n+1) .sp-icard-ico,.inst-pillar:nth-child(4n+1) .inst-pillar-ico{background:var(--gr)!important}
.sp-icard:nth-child(4n+2) .sp-icard-ico,.inst-pillar:nth-child(4n+2) .inst-pillar-ico{background:var(--ki)!important}
.sp-icard:nth-child(4n+3) .sp-icard-ico,.inst-pillar:nth-child(4n+3) .inst-pillar-ico{background:var(--pk)!important}
.sp-icard:nth-child(4n+4) .sp-icard-ico,.inst-pillar:nth-child(4n+4) .inst-pillar-ico{background:var(--at)!important}

/* Botones de sesión: el mismo magenta suave de "Reservar sesión" en todo el sitio */
.btn-gr,.btn-pk,.btn-ki,.price-cta.gr-filled,
.sp-cta-sec .btn-gr,.cta-sec .btn-gr,.store-cta .btn-at,.inst-cta .btn-gr{background:var(--at)!important;color:#fff!important;box-shadow:0 8px 22px rgba(191,74,158,.3)!important}
.sp-cta-sec .btn-gr,.cta-sec .btn-gr,.store-cta .btn-at,.inst-cta .btn-gr{border:2px solid rgba(255,255,255,.6)!important}
.btn-gr:hover,.btn-pk:hover,.btn-ki:hover,.price-cta.gr-filled:hover{background:var(--at-d)!important}

/* ═══ Página de Ayuda: iconografía con el estándar del sitio ════════════ */
/* Íconos de sección: recuadro de color sólido, trazo blanco, color según la sección */
.help-section-ico{background:var(--ki)!important;color:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.help-section[data-cat="precios"] .help-section-ico{background:var(--at)!important}
.help-section[data-cat="trabajo"] .help-section-ico{background:var(--gr)!important}
.help-section[data-cat="autonomia"] .help-section-ico{background:var(--ki)!important}
/* Encabezados de sección con el tinte del mismo color */
.help-section[data-cat="precios"] .help-section-head{background:var(--at-p)!important;border-color:var(--at-s)!important}
.help-section[data-cat="trabajo"] .help-section-head{background:var(--gr-p)!important;border-color:var(--gr-s)!important}
.help-section[data-cat="autonomia"] .help-section-head{background:var(--ki-p)!important;border-color:var(--ki-s)!important}
.help-section-head p{color:var(--txt-s)!important}
.help-section-head p a,.help-sub a{color:var(--at)!important}
/* Filtros tipo píldora con los mismos colores */
.htab{font-family:'Montserrat',sans-serif!important}
.htab:hover{border-color:var(--ki-s)!important;color:var(--ki-d)!important;background:var(--ki-p)!important}
.htab.active{background:var(--ki-d)!important;border-color:var(--ki-d)!important;color:#fff!important}
.htab.active[data-cat="precios"]{background:var(--at)!important;border-color:var(--at)!important}
.htab.active[data-cat="trabajo"]{background:var(--gr)!important;border-color:var(--gr)!important}
.htab.active[data-cat="autonomia"]{background:var(--ki)!important;border-color:var(--ki)!important}
/* Signo "+" de las preguntas (todo el sitio) */
.sp-faq-ico{border-color:var(--ki-s)!important;color:var(--ki)!important}
.sp-faq-item.open .sp-faq-ico{background:var(--at)!important;border-color:var(--at)!important;color:#fff!important}
.sp-faq-q{font-family:'Montserrat',sans-serif}