/* ════════════════════════════════════════════════════════════════
   AURA EXPERIENCE — NOSOTROS
   ════════════════════════════════════════════════════════════════ */

/* ── Esencia ──────────────────────────────────────────────────── */
.about-essence {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.about-essence-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-9);
    align-items: center;
}

.about-essence-text h2 {
    margin-bottom: var(--sp-5);
}

.about-essence-text p {
    margin-bottom: var(--sp-4);
}

.about-essence-image {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-essence-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .about-essence-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

/* ── Misión / Visión / Propósito ──────────────────────────────── */
.mvp-section {
    background: var(--color-dark);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.mvp-section::before {
    content: '';
    position: absolute;
    top: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: var(--gradient-aura);
    opacity: 0.12;
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
}

.mvp-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-aura);
    opacity: 0.5;
}

.mvp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7);
    position: relative;
}

.mvp-item {
    text-align: center;
    padding: var(--sp-5);
}

.mvp-item .eyebrow {
    color: var(--color-gold);
    margin-bottom: var(--sp-4);
}

.mvp-item h3 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: #F5EFE6;
    margin-bottom: var(--sp-4);
    font-weight: 500;
}

.mvp-item p {
    color: var(--color-text-soft);
    line-height: 1.7;
    font-size: var(--fs-base);
}

.mvp-item-divider {
    width: 1px;
    height: 60px;
    background: var(--color-line-strong);
    margin: var(--sp-4) auto;
}

@media (max-width: 900px) {
    .mvp-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

/* ── Valores ──────────────────────────────────────────────────── */
.values-section {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-7);
}

.value-card {
    background: var(--color-bg-card);
    padding: var(--sp-7) var(--sp-5);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform var(--tr-base), box-shadow var(--tr-base), border-color var(--tr-base);
    border: 1px solid var(--color-line);
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gold);
}

.value-icon {
    width: 64px;
    height: 64px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4);
    color: var(--color-gold);
    transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}

.value-card:hover .value-icon {
    background: var(--color-gold);
    color: var(--color-dark);
    border-color: var(--color-gold);
}

.value-icon svg {
    width: 30px;
    height: 30px;
}

.value-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-3);
}

.value-card p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
}

@media (max-width: 900px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Compromiso (pilares) ─────────────────────────────────────── */
.commitment-section {
    background: var(--color-bg-alt);
    padding-block: clamp(5rem, 10vw, 9rem);
}

.commitment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: center;
}

.commitment-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.commitment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commitment-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.commitment-item {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--color-line);
}

.commitment-item:last-child {
    border-bottom: none;
}

.commitment-num {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--color-text);
    line-height: 1;
    flex-shrink: 0;
    width: 50px;
    font-weight: 500;
}

.commitment-text h4 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-2);
}

.commitment-text p {
    font-size: var(--fs-sm);
    color: var(--color-text-soft);
}

@media (max-width: 900px) {
    .commitment-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

/* ── Aliados ──────────────────────────────────────────────────── */
.allies-section {
    text-align: center;
    padding-block: clamp(4rem, 8vw, 7rem);
    background: var(--color-dark);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.allies-section::before,
.allies-section::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.18;
}

.allies-section::before {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, var(--color-aura-green) 0%, transparent 70%);
}

.allies-section::after {
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, var(--color-aura-magenta) 0%, transparent 70%);
}

.allies-section > .container {
    position: relative;
    z-index: 1;
}

.allies-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-7);
    margin-top: var(--sp-5);
}

.ally {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--color-text);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-full);
    background: rgba(31, 24, 39, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════
   DOS MARCAS — Aura Experience × Casa de los Siete Arcángeles
   ════════════════════════════════════════════════════════════════ */
.brands-section {
    position: relative;
    padding: var(--sp-10) 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(31, 24, 39, 0.9) 0%, transparent 60%),
        var(--color-bg);
    overflow: hidden;
}

.brands-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 50% at 18% 38%, rgba(155, 107, 217, 0.16) 0%, transparent 70%),
        radial-gradient(40% 50% at 82% 62%, rgba(235, 208, 154, 0.14) 0%, transparent 70%);
}

.brands-section .section-header {
    position: relative;
    z-index: 1;
}

.brands-section .section-header strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ── Grid principal: tarjeta · conector · tarjeta ── */
.brands-duo {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--sp-5);
    margin-top: var(--sp-9);
}

/* ── Tarjeta de marca ── */
.brand-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-6) var(--sp-7);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(42, 34, 53, 0.65) 0%, rgba(31, 24, 39, 0.55) 100%);
    border: 1px solid var(--color-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base);
}

/* Línea de acento superior degradada por marca */
.brand-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.brand-card--aura::before {
    background: linear-gradient(90deg, transparent, var(--color-aura-purple), transparent);
}
.brand-card--arc::before {
    background: linear-gradient(90deg, transparent, var(--color-gold-soft), transparent);
}

.brand-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-line-strong);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
}

/* Etiqueta de jerarquía */
.brand-card-rank {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-6);
}
.brand-card--aura .brand-card-rank { color: var(--color-aura-purple); }
.brand-card--arc .brand-card-rank { color: var(--color-gold-soft); }

/* Emblema: logo dentro de anillo con glow */
.brand-card-emblem {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    margin-bottom: var(--sp-5);
}

.brand-card-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--color-line-strong);
    background: radial-gradient(circle at 50% 45%, rgba(245, 239, 230, 0.06), transparent 70%);
}
.brand-card-ring::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    opacity: 0.55;
    filter: blur(14px);
}
.brand-card--aura .brand-card-ring::after {
    background: radial-gradient(circle, rgba(155, 107, 217, 0.35), transparent 65%);
}
.brand-card--arc .brand-card-ring::after {
    background: radial-gradient(circle, rgba(235, 208, 154, 0.32), transparent 65%);
}

.brand-card-emblem img {
    position: relative;
    z-index: 1;
    max-width: 78px;
    max-height: 78px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    transition: transform var(--tr-base);
}
.brand-card:hover .brand-card-emblem img {
    transform: scale(1.06);
}

.brand-card-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-text);
    margin-bottom: var(--sp-2);
}

.brand-card-role {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin-bottom: var(--sp-4);
}

.brand-card-rule {
    width: 44px;
    height: 2px;
    border-radius: 2px;
    margin-bottom: var(--sp-4);
}
.brand-card--aura .brand-card-rule {
    background: linear-gradient(90deg, var(--color-aura-purple), var(--color-aura-blue));
}
.brand-card--arc .brand-card-rule {
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-soft));
}

.brand-card-desc {
    color: var(--color-text-soft);
    max-width: 34ch;
    margin-bottom: var(--sp-6);
}

.brand-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 100%;
    max-width: 260px;
    text-align: left;
}

.brand-card-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.92rem;
    color: var(--color-text);
}

.brand-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.brand-card--aura .brand-card-list li::before {
    background: var(--color-aura-purple);
    box-shadow: 0 0 8px rgba(155, 107, 217, 0.7);
}
.brand-card--arc .brand-card-list li::before {
    background: var(--color-gold-soft);
    box-shadow: 0 0 8px rgba(235, 208, 154, 0.7);
}

/* ── Conector central ── */
.brands-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-2);
}

.brands-connector-line {
    flex: 1;
    width: 1px;
    min-height: 40px;
    background: linear-gradient(180deg, transparent, var(--color-line-strong), transparent);
}

.brands-connector-gem {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--color-gold-soft);
    background: rgba(11, 7, 9, 0.6);
    border: 1px solid var(--color-line-strong);
    box-shadow: 0 0 24px -6px rgba(235, 208, 154, 0.5);
}
.brands-connector-gem svg {
    width: 20px;
    height: 20px;
}

/* ── Pie de nota con sellos en línea ── */
.brands-footnote {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 620px;
    margin: var(--sp-8) auto 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 2.2;
}

.brand-mark.brands-footnote-mark {
    --bm-size: 26px;
    vertical-align: middle;
    margin: 0 0.15rem;
}

/* ── Responsive ── */
@media (max-width: 920px) {
    .brands-duo {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
        max-width: 460px;
        margin-inline: auto;
    }
    .brands-connector {
        flex-direction: row;
        width: 100%;
        padding: var(--sp-2) 0;
    }
    .brands-connector-line {
        width: auto;
        height: 1px;
        min-height: 0;
        flex: 1;
        background: linear-gradient(90deg, transparent, var(--color-line-strong), transparent);
    }
}

@media (max-width: 520px) {
    .brand-card {
        padding: var(--sp-7) var(--sp-5) var(--sp-6);
    }
    .brands-section {
        padding: var(--sp-9) 0;
    }
}