body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: #fff;
    color: #222
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 24px 48px;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px)
}

.logo {
    height: 48px
}

.hero {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem
}

h1 {
    font-size: 4rem;
    max-width: 900px
}

p {
    color: #666
}

.rings:before {
    content: '';
    position: absolute;
    inset: -20%;
    background: repeating-radial-gradient(circle, #ff8a0020 0 2px, transparent 2px 22px)
}

.glow {
    box-shadow: 0 20px 50px rgba(249, 115, 22, .25)
}
.solution-rings{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.solution-rings::before{
    content:"";
    position:absolute;
    right:-220px;
    top:-140px;
    width:700px;
    height:700px;
    border-radius:50%;
    background:
    repeating-radial-gradient(
        circle,
        rgba(255,107,0,.08) 0 2px,
        transparent 2px 22px
    );
    opacity:.8;
}

.solution-card{
    transition:.35s ease;
}

.solution-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 70px rgba(15,23,42,.15);
}

.solution-icon{
    color:#ff6b00;
}
/*==================================================
MOBILE
==================================================*/

/* El header es fijo: las anclas no quedan tapadas */
section[id] {
    scroll-margin-top: 6rem;
}

@media (max-width: 639px) {

    /* Palabras largas en títulos no desbordan la pantalla */
    h1, h2, h3 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Evita scroll horizontal por elementos decorativos (también en iOS) */
html, body {
    overflow-x: clip;
}
/*==================================================
FONDOS OSCUROS → GRIS GRAFITO (degradado)
Reemplaza los azul marino (slate-900/950, dark) de
todo el sitio. Gris neutro, sin tinte azul, para que
el naranjo no "vibre".
==================================================*/

:root {
    --ph-gray-light: #333333;
    --ph-gray-dark: #1f1f1f;
    --ph-gray-gradient: linear-gradient(160deg, var(--ph-gray-light) 0%, var(--ph-gray-dark) 100%);
}

/* Secciones, tarjetas y footer */
.bg-slate-950,
.bg-slate-900,
.bg-dark {
    background-color: var(--ph-gray-dark) !important;
    background-image: var(--ph-gray-gradient) !important;
}

/* Tarjetas translúcidas dentro de fondos oscuros (Metodología) */
.bg-slate-950 .bg-white\/5 {
    background-color: rgba(255, 255, 255, .04) !important;
}

/* Velo sobre fotos (Quiénes Somos / Financiamiento) */
html .from-slate-950\/80 {
    --tw-gradient-from: rgb(31 31 31 / .85) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(31 31 31 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html .via-slate-900\/20 {
    --tw-gradient-to: rgb(51 51 51 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgb(51 51 51 / .2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}