/* ============================================================
   TUOI — Home page
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    min-height: calc(100vh - var(--navbar-h));
    background:
        linear-gradient(
            to bottom,
            rgba(42,44,41,0.28) 0%,
            rgba(42,44,41,0.52) 50%,
            rgba(42,44,41,0.78) 100%
        ),
        url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?q=80&w=2053')
        center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 5%;
}

.hero-content { max-width: 820px; }

.hero .hero-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--verde-menta);
    display: block;
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    color: var(--blanco);
    line-height: 1.05;
    margin-bottom: 1.25rem;
    letter-spacing: -2.5px;
    font-weight: 800;
}

.hero p {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(248,245,230,0.82);
    margin-bottom: 2.5rem;
    font-weight: 300;
    line-height: 1.55;
}

/* ── Quiénes somos (preview home) ──────────────────────────── */
.section-quienes {
    padding: 5rem 5%;
    background: var(--fondo-beige);
    border-top: 1px solid rgba(42, 44, 41, 0.08);
}

.section-quienes-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.quienes-text .section-label { color: var(--naranja); }

.quienes-text h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
}

.quienes-text p {
    color: #555;
    line-height: 1.85;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    text-align: justify;
    hyphens: auto;
}

.quienes-text p strong { color: var(--texto-oscuro); }
.quienes-text .link-arrow { margin-top: 0.5rem; }

.quienes-visual {
    width: 100%;
    display: flex;
    justify-content: center;
}

.quienes-visual img {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1rem 3rem 1rem 3rem;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

/* ── Nuestra filosofía ──────────────────────────────────────── */
.section-filosofia {
    background: var(--fondo-oscuro);
    padding: 8rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}


.section-filosofia-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 5rem;
}

.section-filosofia .section-label { color: var(--verde-menta); }

.section-filosofia h2 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--blanco);
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin-top: 0.5rem;
}

/* Grid 4 tarjetas */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 5rem;
}

.feature-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid transparent;
    padding: 1.25rem 1.25rem 1.5rem;
    padding-top: calc(1.25rem - 2px); /* compensa los 2px extra del border-top */
    border-radius: 20px;
    overflow: hidden;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* Acento de color superior por card */
.feature-card:has(.badge-verde)    { border-top-color: var(--verde-menta); }
.feature-card:has(.badge-naranja)  { border-top-color: var(--naranja); }
.feature-card:has(.badge-morado)   { border-top-color: var(--morado); }
.feature-card:has(.badge-amarillo) { border-top-color: var(--amarillo); }

.feature-card:hover {
    background: rgba(255,255,255,0.09);
    transform: translateY(-6px);
}

/* Glow de color en hover según tarjeta */
.feature-card:has(.badge-verde):hover    { box-shadow: 0 24px 40px -20px rgba(149,202,186,0.35), 0 4px 16px rgba(0,0,0,0.25); }
.feature-card:has(.badge-naranja):hover  { box-shadow: 0 24px 40px -20px rgba(227,148,53,0.35),  0 4px 16px rgba(0,0,0,0.25); }
.feature-card:has(.badge-morado):hover   { box-shadow: 0 24px 40px -20px rgba(197,99,210,0.35),  0 4px 16px rgba(0,0,0,0.25); }
.feature-card:has(.badge-amarillo):hover { box-shadow: 0 24px 40px -20px rgba(213,208,52,0.35),  0 4px 16px rgba(0,0,0,0.25); }

.feature-logo {
    display: block;
    width: 100%;
    height: clamp(140px, 15vw, 200px);
    object-fit: contain;
    object-position: center;
    margin-bottom: 0;
}

.feature-logo--balance { transform: scale(1.52); }
.feature-logo--energy  { transform: scale(1.58); }
.feature-logo--focus   { transform: scale(1.58); }
.feature-logo--power   { transform: scale(1.38); }

.feature-card .badge { margin-bottom: 0.75rem; }

.feature-card h3 {
    color: var(--blanco);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.feature-card p {
    color: rgba(255,255,255,0.5);
    font-size: 0.88rem;
    line-height: 1.65;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.28rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-verde    { background: var(--verde-menta); color: var(--texto-oscuro); }
.badge-naranja  { background: var(--naranja);     color: var(--blanco); }
.badge-morado   { background: var(--morado);      color: var(--blanco); }
.badge-amarillo { background: var(--amarillo);    color: var(--texto-oscuro); }

/* Lista de valores */
.values-list {
    border-top: 1px solid rgba(255,255,255,0.09);
    padding-top: 3.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.value-item { display: flex; align-items: flex-start; gap: 0.9rem; }

.value-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.42rem;
    flex-shrink: 0;
}

/* Cada dot con el color de su "categoría" */
.value-item:nth-child(1) .value-dot { background: var(--verde-menta); }
.value-item:nth-child(2) .value-dot { background: var(--naranja); }
.value-item:nth-child(3) .value-dot { background: var(--morado); }
.value-item:nth-child(4) .value-dot { background: var(--amarillo); }

.value-item p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .values-list   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .section-quienes-inner { grid-template-columns: 1fr; gap: 3rem; }
    .quienes-visual { order: -1; }
    .quienes-visual img { aspect-ratio: 16 / 9; max-width: 100%; }
}

@media (max-width: 768px) {
    .hero { min-height: 75vh; }
    .hero h1 { letter-spacing: -1.5px; }
    .section-quienes,
    .section-filosofia { padding: 5rem 5%; }
    .section-header    { margin-bottom: 3rem; }
    .features-grid     { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; }
    .values-list       { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 2.5rem; }
}