/* =========================
   Kunna – styles.css
   Paleta y tema oscuro
   ========================= */
:root {
    --kunna-navy: #010133;
    /* fondo principal */
    --kunna-navy-2: #0E1430;
    /* secciones */
    --kunna-violet: #344FED;
    /* acento azul eléctrico */
    --kunna-mint: #00ffe0;
    /* aqua brillante */
    --kunna-cream: #FFFFFF;
    /* claro */
    --kunna-text: #EAF1FF;
    /* texto principal */
    --kunna-muted: #AAB6DC;
    /* texto secundario */
}

html,
body {
    background: var(--kunna-navy);
    color: var(--kunna-text);
}

/* Base font family */
body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    /* regular */
}

/* Headings */
h1,
h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    /* semibold */
}

h3,
h4,
h5,
h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    /* regular */
}

/* Default paragraphs: Roboto Regular (400) */
p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/* Bold & emphasized text: Roboto Medium (500) */
p em,
p b,
em,
b {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

/* Light text: Roboto Light (300) */
.light,
.light p,
p.light {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* Tipografía base */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--kunna-cream);
    font-weight: 700;
}

p,
li,
small {
    color: var(--kunna-text);
}

.text-muted {
    color: var(--kunna-muted) !important;
}

div#navMenu {
    font-weight: 600
}

a {
    color: var(--kunna-mint);
    text-decoration: none;
}

a:hover {
    color: #00ffe0;
}

/* Navbar */
.navbar {
    backdrop-filter: saturate(1.1) blur(8px);
    background: rgba(7, 11, 31, .7);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: .5px;
}

.nav-link {
    color: var(--kunna-cream) !important;
    opacity: .9;
}

.nav-link:hover {
    opacity: 1;
}

/* Hero */
.hero {
    position: relative;
    background:
        radial-gradient(1100px 520px at 80% -20%, rgba(61, 75, 255, .35), transparent 60%),
        radial-gradient(900px 500px at 10% 10%, rgba(31, 80, 228, .25), transparent 60%),
        linear-gradient(180deg, var(--kunna-navy) 0%, var(--kunna-navy) 100%);
    padding: 6rem 0 4rem;
}

.hero .lead {
    color: var(--kunna-muted);
}

/* Fade inferior del Hero hacia transparente (para fundirse con lo que venga) */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -48px;
    height: 48px;
    background: linear-gradient(to bottom, var(--kunna-navy) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.btn-accent {
    background: var(--kunna-violet);
    color: #fff;
    border: none;
}

.btn-accent:hover {
    background: #344fed;
    color: #fff;
}

.btn-outline-light {
    border-color: var(--kunna-text);
    color: var(--kunna-text);
}

.btn-outline-light:hover {
    background: var(--kunna-text);
    color: #000;
}

/* Secciones */
.section {
    padding: 4rem 0;
    position: relative;
    overflow: visible;
}

.section.alt {
    background: var(--kunna-navy-2);
    position: relative;
}

/* --- Transiciones entre secciones (solo cuando cambia el tipo) --- */
/* Oculta por defecto los pseudo-elementos de .alt (los activamos solo donde toca) */
.section.alt::before,
.section.alt::after {
    display: none;
}

/* HERO (normal) -> PRIMERA .section.alt */
.hero+.section.alt::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -72px;
    height: 96px;
    background: linear-gradient(to bottom, var(--kunna-navy) 0%, var(--kunna-navy-2) 100%);
    pointer-events: none;
    display: block;
    z-index: 0;
}

/* NORMAL -> ALT (navy -> navy-2) */
.section:not(.alt)+.section.alt::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -72px;
    height: 96px;
    background: linear-gradient(to bottom, var(--kunna-navy) 0%, var(--kunna-navy-2) 100%);
    pointer-events: none;
    display: block;
    z-index: 0;
}

/* ALT -> NORMAL (navy-2 -> navy) */
.section.alt+.section:not(.alt)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -72px;
    height: 96px;
    background: linear-gradient(to bottom, var(--kunna-navy-2) 0%, var(--kunna-navy) 100%);
    pointer-events: none;
    display: block;
    z-index: 0;
}

/* Cards */
.card {
    background: #0C1230;
    border: 1px solid #1b2242;
    color: var(--kunna-text);
    z-index: 2;
}

.card:hover {
    border-color: var(--kunna-violet);
    transition: .2s border-color ease;
}

.icon-badge {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(61, 75, 255, .16);
    color: #fff;
}

.icon-badge.mint {
    background: rgba(1, 212, 196, .16);
}

/* Servicios */
.service-item h5 {
    margin-bottom: .35rem;
}

.service-item p.simple {
    margin-bottom: .5rem;
    color: var(--kunna-text);
}

.service-item details {
    background: #0b1030;
    border: 1px solid #1b2242;
    border-radius: .5rem;
    padding: .75rem 1rem;
}

.service-item details summary {
    cursor: pointer;
    color: var(--kunna-cream);
    list-style: none;
}

.service-item details[open] {
    border-color: var(--kunna-violet);
}

.service-item details p {
    color: var(--kunna-muted);
    margin: .5rem 0 0;
}

/* Stack badges simples */
.tech-badge {
    display: inline-block;
    padding: .5rem .75rem;
    border: 1px solid #1b2242;
    background: #0C1230;
    border-radius: .5rem;
    color: var(--kunna-text);
    margin: .25rem;
}

/* Iconos dentro de tech-badge */
.tech-badge i {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
}

/* Contacto */
.form-control,
.form-select {
    background: #0b1030;
    border-color: #1b2242;
    color: var(--kunna-text);
}

.form-control::placeholder {
    color: #8fa1bf;
}

.form-control:focus,
.form-select:focus {
    background: #0E1430;
    border-color: var(--kunna-violet);
    color: var(--kunna-text);
    box-shadow: 0 0 0 .25rem rgba(61, 75, 255, .15);
}

label.form-label {
    color: var(--kunna-cream);
}

/* Footer */
footer {
    border-top: 1px solid #1b2242;
    color: var(--kunna-muted);
}

.link-light {
    color: #cdd6ea;
}

.link-light:hover {
    color: #fff;
}

/* Utilidades */
.badge-soft {
    background: rgba(244, 244, 244, .08);
    color: var(--kunna-cream);
    border: 1px solid rgba(255, 255, 255, .06);
}

.gradient-underline {
    position: relative;
    display: inline-block;
}

.gradient-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    background: linear-gradient(90deg, var(--kunna-violet), var(--kunna-mint));
    border-radius: 2px;
}

/* Accesibilidad: “Saltar al contenido” */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden-focusable:focus {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 1080;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: #0b122b;
    color: #fff;
    border: 1px solid #1b2242;
}

/* Address sin itálica */
.not-italic {
    font-style: normal;
}

/* Responsive tweaks */
@media (max-width:991px) {
    .hero {
        padding: 5rem 0 3rem;
    }
}