@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
    --coda-navy: #0b1645;
    --coda-blue: #2457f5;
    --coda-purple: #8429e8;
    --coda-ink: #111827;
    --coda-muted: #667085;
    --coda-surface: #fff;
    --coda-surface-soft: #f5f7ff;
    --coda-line: #dfe4f2;
    --coda-gradient: linear-gradient(135deg, var(--coda-blue), var(--coda-purple));
    --font-display: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 30px;
    --shadow-soft: 0 20px 60px rgb(11 22 69 / 12%);
    --shadow-card: 0 12px 34px rgb(36 87 245 / 9%);
    --content-max: 1180px;
}

html { scroll-padding-top: 6.5rem; }
body, .human-theme {
    --ink: var(--coda-surface); --ink-soft: var(--coda-surface-soft); --panel: #fff; --panel-2: #eef2ff;
    --white: var(--coda-ink); --muted: var(--coda-muted); --dim: #7c8599;
    --green: var(--coda-blue); --green-bright: var(--coda-purple); --green-dark: var(--coda-navy);
    --line: var(--coda-line); --line-soft: rgb(11 22 69 / 10%); --display: var(--font-display); --body: var(--font-body);
    background: var(--coda-surface); color: var(--coda-ink); font-family: var(--font-body);
}
h1, h2, h3, .main-nav, .sh-header nav { font-family: var(--font-display); }
a, button, input, select, textarea { border-radius: var(--radius-sm); }
:focus-visible { outline: 3px solid var(--coda-purple); outline-offset: 4px; }
em { color: var(--coda-blue); }
a:visited { color: inherit; }
.skip-link { position: fixed; z-index: 300; top: .75rem; left: .75rem; padding: .7rem 1rem; transform: translateY(-160%); background: #fff; color: var(--coda-navy); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-soft); }
.skip-link:focus { transform: none; }

/* Cabecera compartida */
.site-header, .human-theme .site-header, .human-theme .site-header.is-scrolled,
.sh-header { border-bottom: 1px solid rgb(255 255 255 / 12%); background: var(--coda-navy); box-shadow: 0 7px 22px rgb(11 22 69 / 12%); backdrop-filter: none; }
.header-inner, .sh-header { min-height: 92px; }
.brand-lockup { display: inline-grid; width: max-content; color: #fff; line-height: 1; text-decoration: none; }
.brand picture, .sh-header picture { display: block; height: 58px; }
.brand .site-logo, .sh-header .site-logo { display: block; width: auto; max-width: 360px; height: 58px; }
.brand-descriptor { margin-top: -1px; padding-left: 4.6rem; color: #fff; font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.main-nav a, .main-nav a:link, .main-nav a:visited,
.human-theme .main-nav a, .human-theme .main-nav a:link, .human-theme .main-nav a:visited,
.sh-header nav a, .sh-header nav a:link, .sh-header nav a:visited { color: #fff; opacity: 1; font-weight: 600; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a:active,
.human-theme .main-nav a:hover, .human-theme .main-nav a:focus-visible, .human-theme .main-nav a:active,
.sh-header nav a:hover, .sh-header nav a:focus-visible, .sh-header nav a:active { color: #fff; opacity: 1; }
.main-nav a:not(.nav-cta)::after { height: 2px; background: var(--coda-gradient); }
.main-nav a[aria-current="page"]:not(.nav-cta)::after, .sh-header nav a[aria-current="page"]:not(.sh-nav-cta)::after { transform: scaleX(1); }
.main-nav a[aria-current="page"], .sh-header nav a[aria-current="page"] { font-weight: 700; }
.main-nav .nav-cta, .sh-nav-cta { border: 0; border-radius: 999px; background: var(--coda-gradient); color: #fff; box-shadow: 0 8px 24px rgb(36 87 245 / 22%); }
.main-nav .nav-cta:visited, .sh-nav-cta:visited { color: #fff; }
.main-nav .nav-cta:hover, .main-nav .nav-cta:focus-visible, .main-nav .nav-cta:active, .sh-nav-cta:hover, .sh-nav-cta:focus-visible, .sh-nav-cta:active { background: #fff; color: var(--coda-navy); }
.menu-toggle, .human-theme .menu-toggle, .sh-menu-toggle { color: #fff; }
.menu-toggle i, .menu-toggle i::after, .human-theme .menu-toggle i, .human-theme .menu-toggle i::after, .sh-menu-toggle i { background: #fff; }
.sh-menu-toggle i { position: relative; }
.sh-menu-toggle i::before, .sh-menu-toggle i::after { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; content: ""; }
.sh-menu-toggle i::before { transform: translateY(-.42rem); }.sh-menu-toggle i::after { transform: translateY(.42rem); }
.menu-toggle:hover, .sh-menu-toggle:hover { background: rgb(255 255 255 / 10%); }
.menu-is-open { overflow: hidden; }

/* Portada */
.sh-header { position: fixed; z-index: 100; top: 0; width: 100%; }
.sh-hero { min-height: min(940px, 100vh); padding-top: clamp(8.5rem, 12vw, 11rem); background: radial-gradient(circle at 84% 18%, rgb(122 50 244 / 14%), transparent 30%), radial-gradient(circle at 62% 72%, rgb(18 107 255 / 13%), transparent 36%), linear-gradient(145deg, #fff 0%, #f7f9ff 58%, #f2efff 100%); }
.sh-copy > p:first-child, .sh-heading > p, .sh-services header > p, .sh-company > div > p:first-child, .sh-contact p { color: var(--coda-blue); }
.sh-copy h1 { max-width: 11.5ch; color: var(--coda-navy); font-size: clamp(3.7rem, 6.5vw, 6.8rem); line-height: .96; letter-spacing: -.055em; }
.sh-copy h1 em { background: var(--coda-gradient); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sh-lead { max-width: 39rem; color: var(--coda-muted); font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.68; }
.sh-button { border-radius: 999px; background: var(--coda-gradient); box-shadow: 0 12px 32px rgb(36 87 245 / 20%); }
.sh-link { color: var(--coda-navy); }
.sh-illustration { position: relative; display: block; min-height: 0; padding: 0; aspect-ratio: 1; overflow: visible; isolation: isolate; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 17%, rgb(18 107 255 / 8%) 18% 39%, rgb(122 50 244 / 7%) 40% 56%, transparent 57%); }
.sh-illustration::before { position: absolute; z-index: -1; inset: 3%; border: 1px solid rgb(18 107 255 / 14%); border-radius: 50%; background: radial-gradient(circle at 62% 38%, rgb(122 50 244 / 12%), transparent 44%); box-shadow: 0 0 0 2rem rgb(18 107 255 / 3%), 0 35px 90px rgb(11 22 69 / 12%); content: ""; }
.sh-orbit { position: absolute !important; display: block; min-height: 0; padding: 0; border: 2px solid rgb(18 107 255 / 28%) !important; border-radius: 50% !important; background: transparent !important; transform-origin: center !important; }
.sh-orbit.orbit-a { inset: 5%; transform: none !important; }
.sh-orbit.orbit-b { inset: 18%; border-color: rgb(122 50 244 / 34%) !important; transform: rotate(35deg) !important; }
.sh-orbit.orbit-c { inset: 31%; border-color: rgb(11 22 69 / 24%) !important; transform: rotate(-22deg) !important; }
.sh-orbit span { position: absolute !important; padding: .52rem .85rem; border: 1px solid var(--coda-line); border-radius: 999px; background: rgb(255 255 255 / 94%); color: var(--coda-navy); box-shadow: var(--shadow-card); font-size: .76rem; transform: none; }
.orbit-a span { top: 5%; left: 16%; }.orbit-b span { right: -2%; bottom: 22%; transform: rotate(-35deg) !important; }.orbit-c span { bottom: -3%; left: 18%; transform: rotate(22deg) !important; }
.sh-center { position: absolute; top: 50%; left: 50%; display: grid; width: 9.5rem; min-height: 0; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 80%); border-radius: 50%; place-content: center; transform: translate(-50%, -50%); background: linear-gradient(145deg, #fff, #f4f2ff); box-shadow: 0 24px 70px rgb(11 22 69 / 18%); }
.sh-center img { display: block; width: 4rem; max-width: 46%; height: auto; margin: 0; object-fit: contain; }
.sh-center small { max-width: 5.8rem; color: var(--coda-muted); line-height: 1.2; text-align: left; }
.sh-illustration > i { display: block; width: .85rem; height: .85rem; box-shadow: 0 0 0 .45rem rgb(255 255 255 / 72%), 0 0 1.4rem currentColor; }
.dot-a { background: var(--coda-blue); color: var(--coda-blue); }.dot-b { background: var(--coda-purple); color: var(--coda-purple); }.dot-c { background: var(--coda-navy); color: var(--coda-navy); }
.sh-trust { background: var(--coda-navy); color: #fff; }
.sh-trust span::before { display: inline-block; width: .45rem; height: .45rem; margin-right: .65rem; border-radius: 50%; background: var(--coda-gradient); content: ""; }
.sh-how { background: radial-gradient(circle at 12% 18%, rgb(18 107 255 / 8%), transparent 25%), linear-gradient(135deg, #f8faff, #f3f0ff); }
.sh-heading h2, .sh-services header h2, .sh-company h2, .sh-contact h2 { color: var(--coda-navy); }
.sh-heading h2, .sh-services header h2, .sh-company h2, .sh-contact h2 { font-size: clamp(2.8rem, 5vw, 5.1rem); line-height: 1.01; letter-spacing: -.05em; }
.sh-steps { position: relative; }
.sh-steps::before { position: absolute; top: 2rem; bottom: 2rem; left: 2.5rem; width: 2px; background: var(--coda-gradient); content: ""; }
.sh-steps article { position: relative; border: 1px solid var(--coda-line); border-radius: var(--radius-md); background: linear-gradient(145deg, #fff, #f8f9ff); box-shadow: var(--shadow-card); }
.sh-steps article > span { z-index: 1; background: var(--coda-gradient); color: #fff; }
.sh-steps p { color: var(--coda-muted); }
.sh-services { background: linear-gradient(180deg, #fff, #f7f8ff); }
.sh-card-grid article, .sh-card-grid .lavender, .sh-card-grid .coral, .sh-card-grid .blue { min-height: 23rem; border: 1px solid var(--coda-line); border-radius: var(--radius-md); color: var(--coda-ink); box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sh-card-grid article:nth-child(1) { background: linear-gradient(145deg, #fff, #eef5ff); }
.sh-card-grid article:nth-child(2) { background: linear-gradient(145deg, #fff, #f3edff); }
.sh-card-grid article:nth-child(3) { background: linear-gradient(145deg, #f7f8ff, #edf0ff); }
.sh-card-grid article:hover { border-color: rgb(36 87 245 / 45%); box-shadow: var(--shadow-soft); transform: translateY(-5px); }
.sh-card-grid svg { color: var(--coda-blue); }
.sh-card-grid article:nth-child(2) svg { color: var(--coda-purple); }
.sh-card-grid article:nth-child(3) svg { color: var(--coda-navy); }
.sh-card-grid a { border-color: var(--coda-line); color: var(--coda-blue); }
.sh-company { background: radial-gradient(circle at 85% 22%, rgb(122 50 244 / 9%), transparent 30%), var(--coda-surface-soft); }
.sh-quote { border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--coda-navy), #172c78 65%, #3d257e); color: #fff; box-shadow: 0 24px 65px rgb(11 22 69 / 20%); }
.sh-company > div:last-child > p:not(:first-child) { color: var(--coda-muted); }
.sh-contact { background: var(--coda-gradient); color: #fff; }
.sh-contact p, .sh-contact h2 { color: #fff; }
.sh-contact .sh-button { background: #fff; color: var(--coda-navy); box-shadow: none; }

/* Interiores */
.human-theme .inner-main, .human-theme .editorial-block, .human-theme .detail-process, .human-theme .outcomes, .human-theme .principles, .human-theme .case-flow, .human-theme .article-body, .human-theme .legal-content { background: #fff; }
.human-theme .inner-hero { position: relative; overflow: hidden; border-color: var(--coda-line); background: radial-gradient(circle at 88% 30%, rgb(122 50 244 / 12%), transparent 25%), linear-gradient(135deg, #f8faff, #f2efff); }
.human-theme .inner-hero::before { position: absolute; right: 5%; bottom: -7rem; width: 23rem; height: 23rem; border: 1px solid rgb(36 87 245 / 22%); border-radius: 50%; box-shadow: 0 0 0 3rem rgb(132 41 232 / 5%), 0 0 0 6rem rgb(36 87 245 / 4%); content: ""; }
.human-theme .inner-hero::after { display: none; }
.human-theme .inner-hero > * { position: relative; z-index: 1; }
.human-theme .inner-hero h1, .human-theme .prose-large h2, .human-theme .section-heading h2, .human-theme .detail-process h3, .human-theme .case-flow h2, .human-theme .article-prose h2, .human-theme .legal-content h2 { color: var(--coda-navy); }
.human-theme .eyebrow, .human-theme .section-index { color: var(--coda-blue); }
.human-theme .section-index::before { background: var(--coda-gradient); }
.human-theme .inner-lead, .human-theme .prose-large p, .human-theme .section-heading > p, .human-theme .article-prose p { color: var(--coda-muted); }
.human-theme .inner-band, .human-theme .company-numbers, .human-theme .technology-band, .human-theme .contact-page { background: var(--coda-surface-soft); }
.human-theme .topic-grid article, .human-theme .principle-list article, .human-theme .listing-card, .human-theme .outcome-grid article, .human-theme .knowledge-listing article, .human-theme .article-grid article, .human-theme .method-steps li { border-color: var(--coda-line); background: linear-gradient(145deg, #fff, #f8f9ff); }
.human-theme .topic-grid article:nth-child(3n+2), .human-theme .principle-list article:nth-child(3n+2) { background: linear-gradient(145deg, #fff, #f3efff); }
.human-theme .topic-icon {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 2.1rem;
    overflow: visible;
    background: transparent;
    fill: none;
    stroke: var(--coda-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.human-theme .topic-grid h3 { margin-top: 1.35rem; }
.human-theme .listing-card, .human-theme .knowledge-listing article { transition: transform .2s, box-shadow .2s, border-color .2s; }
.human-theme .listing-card:hover, .human-theme .knowledge-listing article:hover { border-color: rgb(36 87 245 / 40%); box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.human-theme .button-primary, .human-theme .contact-form .button-primary { border: 0; border-radius: 999px; background: var(--coda-gradient); color: #fff; }
.human-theme .button-primary:hover { background: var(--coda-navy); color: #fff; }
.human-theme .cta-panel { border-radius: var(--radius-lg); background: var(--coda-gradient); color: #fff; box-shadow: var(--shadow-soft); }
.human-theme .cta-panel h2, .human-theme .cta-panel .section-index { color: #fff; }
.human-theme .cta-panel .button { background: #fff; color: var(--coda-navy); }
.human-theme .contact-form { border: 1px solid var(--coda-line); border-radius: var(--radius-md); background: #fff; color: var(--coda-ink); box-shadow: var(--shadow-soft); }
.human-theme .contact-form label { color: var(--coda-ink); }
.human-theme .contact-form label > span { color: var(--coda-blue); }
.human-theme .contact-form input, .human-theme .contact-form select, .human-theme .contact-form textarea { border-color: #b9c2d8; color: var(--coda-ink); }
.human-theme .contact-form input:focus, .human-theme .contact-form select:focus, .human-theme .contact-form textarea:focus { border-color: var(--coda-blue); }
.contact-email-panel { display: flex; min-width: 0; padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid var(--coda-line); border-radius: var(--radius-lg); flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg, #fff, #f2efff); color: var(--coda-ink); box-shadow: var(--shadow-soft); }
.contact-email-panel h2, .contact-email-panel h3 { margin: .8rem 0 1rem; color: var(--coda-navy); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; }
.contact-email-panel > p:not(.section-index) { max-width: 31rem; margin: 0 0 2rem; color: var(--coda-muted); font-size: 1.05rem; line-height: 1.6; }
.contact-email-panel .button { max-width: 100%; overflow-wrap: anywhere; }
.human-theme .field-group { display: grid; min-width: 0; gap: .45rem; }
.human-theme .field-error { display: block; margin-top: .4rem; color: #b42318; font-weight: 600; }
.human-theme [aria-invalid="true"] { border-color: #b42318 !important; }
.human-theme .form-errors { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #f0aaa4; border-radius: var(--radius-sm); background: #fff2f0; color: #7a271a; }
.human-theme .form-errors ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.human-theme .article-header { border-color: var(--coda-line); background: var(--coda-surface-soft); }
.human-theme .article-conclusion { border-radius: var(--radius-md); background: var(--coda-surface-soft); }
.human-theme .site-footer { background: var(--coda-navy); color: #fff; }
.human-theme .site-footer img { padding: 0; background: transparent; }
.human-theme .footer-legal, .human-theme .footer-main { border-color: rgb(255 255 255 / 15%); }
.human-theme .footer-main a, .human-theme .footer-main a:visited, .human-theme .footer-legal a, .human-theme .footer-legal a:visited { color: rgb(255 255 255 / 82%); }
.human-theme .footer-main a:hover, .human-theme .footer-main a:focus-visible, .human-theme .footer-legal a:hover, .human-theme .footer-legal a:focus-visible { color: #fff; text-decoration-thickness: 2px; }

/* Mantiene la composición gráfica de la portada publicada en demo.codasi.es. */
.sh-illustration { position: relative; display: grid; width: 100%; max-width: 100%; min-width: 0; min-height: 25rem; padding: 2rem; aspect-ratio: auto; overflow: hidden; border: 1px solid var(--coda-line); border-radius: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 1rem; background: linear-gradient(145deg, #f0f4ff, #f4efff); isolation: isolate; }
.sh-illustration::before { z-index: -1; inset: auto -20% -35% auto; width: 80%; height: auto; aspect-ratio: 1; border: 1px solid rgb(122 50 244 / 24%); border-radius: 50%; background: radial-gradient(circle, rgb(122 50 244 / 12%), transparent 62%); box-shadow: 0 0 0 3.5rem rgb(18 107 255 / 5%), 0 0 0 7rem rgb(122 50 244 / 3%); }
.sh-orbit, .sh-orbit.orbit-a, .sh-orbit.orbit-b, .sh-orbit.orbit-c { position: static !important; display: grid; min-height: 7rem; padding: 1rem; border: 1px solid rgb(18 107 255 / 18%) !important; border-radius: 1.2rem !important; place-items: center; transform: none !important; background: rgb(255 255 255 / 88%) !important; }
.sh-orbit span, .orbit-a span, .orbit-b span, .orbit-c span { position: static !important; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none !important; color: var(--coda-navy); font-size: .85rem; }
.sh-center { position: static; display: flex; width: auto; min-width: 0; min-height: 8.5rem; padding: .9rem; aspect-ratio: auto; border: 0; border-radius: 1.2rem; align-items: center; justify-content: center; gap: .65rem; transform: none; background: linear-gradient(145deg, #fff, #f2efff); box-shadow: var(--shadow-card); }
.sh-illustration > i { display: none; }

@media (max-width: 52rem) {
    html { scroll-padding-top: 5.25rem; }
    .header-inner, .sh-header { min-height: 70px; }
    .brand picture, .sh-header picture { height: 42px; }
    .brand .site-logo, .sh-header .site-logo { width: auto; max-width: 235px; height: 42px; }
    .brand-descriptor { display: none; }
    .main-nav, .human-theme .main-nav, .sh-header nav { border-top: 1px solid rgb(255 255 255 / 12%); background: var(--coda-navy); }
    .main-nav a, .main-nav a:visited, .human-theme .main-nav a, .human-theme .main-nav a:visited, .sh-header nav a, .sh-header nav a:visited { color: rgb(255 255 255 / 92%); }
    .sh-steps::before { left: 2.5rem; }
    .sh-copy h1 { font-size: clamp(3.1rem, 12vw, 5.2rem); }
    .sh-hero { grid-template-columns: minmax(0, 1fr); }
    .sh-copy, .sh-illustration { min-width: 0; }
    .sh-heading h2, .sh-services header h2, .sh-company h2, .sh-contact h2 { font-size: clamp(2.55rem, 9vw, 4rem); }
}

@media (max-width: 30rem) {
    .sh-copy h1 { font-size: clamp(2.9rem, 14vw, 4rem); }
    .sh-illustration { width: min(100%, 25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; gap: .75rem; }
    .sh-orbit, .sh-orbit.orbit-a, .sh-orbit.orbit-b, .sh-orbit.orbit-c { min-height: 5.75rem; }
    .sh-center { min-height: 7.25rem; }
    .sh-center img { width: 3.25rem; }
    .sh-center small { max-width: 4.6rem; font-size: .67rem; }
    .sh-orbit span { font-size: .68rem; }
}

@media (min-width: 40rem) and (max-width: 64rem) {
    .brand picture, .sh-header picture { height: 50px; }
    .brand .site-logo, .sh-header .site-logo { height: 50px; }
    .brand-descriptor { padding-left: 4rem; font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}