/* ═══════════════════════════════════════════════
           SOBRE NOSOTROS — ASDRUBAL SEO
           Diseño: Editorial Oscuro × Cartaginés
        ═══════════════════════════════════════════════ */

        :root {
            --as-purple:  #8d096b;
            --as-cyan:    #71c8d9;
            --as-gold:    #f4b61c;
            --as-dark:    #0b080f;
            --as-panel:   #120d18;
            --as-border:  rgba(244,182,28,.18);
            --as-text:    #e8e0f0;
            --as-muted:   rgba(232,224,240,.5);
        }

        /* ── Reset page context ── */
        body { background: var(--as-dark); color: var(--as-text); font-family: 'Raleway', sans-serif; }
        header#header {
            font-family: "Open Sans", sans-serif;
        }
        /* ══════════════════════════
           1. HERO
        ══════════════════════════ */
        .sn-hero {
            position: relative;
            height: 100vh;
            max-height: 1000px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--as-dark);
        }

        /* Malla de puntos cartaginesa */
        .sn-hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                radial-gradient(circle at 20% 30%, rgba(141,9,107,.35) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(113,200,217,.15) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 50%, rgba(244,182,28,.06) 0%, transparent 60%);
        }

        /* Grid geométrico */
        .sn-hero__grid {
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(244,182,28,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(244,182,28,.04) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
        }

        /* Línea diagonal decorativa */
        .sn-hero__line {
            position: absolute;
            top: 0; right: 15%;
            width: 1px; height: 100%;
            background: linear-gradient(to bottom, transparent, var(--as-gold), transparent);
            opacity: .25;
        }

        .sn-hero__inner {
            position: relative;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 4rem;
            align-items: center;
        }

        .sn-hero__label {
            font-family: 'Cinzel', serif;
            font-size: .72rem;
            letter-spacing: .35em;
            color: var(--as-gold);
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: .75rem;
        }
        .sn-hero__label::before {
            content: '';
            display: block;
            width: 40px; height: 1px;
            background: var(--as-gold);
        }

            .sn-hero__title {
                font-family: 'Cinzel', serif;
                font-size: 4em;
                font-weight: 900;
                line-height: 1.3;
                margin: 0 0 2rem;
                color: #fff;
            }
        .sn-hero__title em {
            font-style: normal;
            color: var(--as-purple);
            -webkit-text-stroke: 1px var(--as-purple);
        }
        .sn-hero__title span {
            display: block;
            color: var(--as-gold);
        }

        .sn-hero__lead {
            font-size: 1.15rem;
            font-weight: 300;
            line-height: 1.8;
            color: var(--as-muted);
            max-width: 560px;
            margin-bottom: 2.5rem;
        }

        .sn-hero__stats {
            display: flex;
            gap: 2.5rem;
        }
        .sn-hero__stat-num {
            font-family: 'Cinzel', serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--as-gold);
            display: block;
            line-height: 1;
        }
        .sn-hero__stat-label {
            font-size: .8rem;
            letter-spacing: .1em;
            color: var(--as-muted);
            text-transform: uppercase;
            font-family: 'Cinzel', serif;
        }

        /* Tarjeta visual derecha */
        .sn-hero__visual {
            position: relative;
        }
        .sn-hero__img-wrap {
            position: relative;
            border-radius: 2px;
            overflow: hidden;
        }
        .sn-hero__img-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid var(--as-gold);
            border-radius: 2px;
            opacity: .35;
            z-index: 2;
            pointer-events: none;
        }
        .sn-hero__img-placeholder {
            width: 100%;
            aspect-ratio: 4/5;
            background: linear-gradient(135deg, rgba(141,9,107,.3), rgba(18,13,24,.9));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            color: var(--as-muted);
            font-family: 'Cinzel', serif;
            font-size: .85rem;
            letter-spacing: .1em;
        }
        /* ← Sustituir por: <img src="img/logo-tanit.jpg" alt="Logo Asdrubal SEO × Tanit"> */

        .sn-hero__img-corner {
            position: absolute;
            width: 24px; height: 24px;
            border-color: var(--as-gold);
            border-style: solid;
            opacity: .7;
        }
        .sn-hero__img-corner--tl { top: -8px; left: -8px; border-width: 2px 0 0 2px; }
        .sn-hero__img-corner--br { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }

        /* ══════════════════════════
           2. SECCIÓN GENÉRICA
        ══════════════════════════ */
        .sn-section {
            padding: 6rem 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        .sn-section--full {
            max-width: 100%;
            padding-left: 0; padding-right: 0;
        }

        .sn-section-label {
            font-family: 'Cinzel', serif;
            font-size: .7rem;
            letter-spacing: .4em;
            color: var(--as-gold);
            text-transform: uppercase;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .75rem;
        }
        .sn-section-label::before {
            content: '';
            display: block;
            width: 30px; height: 1px;
            background: var(--as-gold);
        }

        .sn-section-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(2rem, 4vw, 3.5rem);
            font-weight: 700;
            line-height: 1.1;
            color: #fff;
            margin: 0 0 1.5rem;
        }
        .sn-section-title strong { color: var(--as-purple); }

        .sn-divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--as-gold), transparent);
            opacity: .2;
            margin: 0;
        }

        /* ══════════════════════════
           3. CÍRCULO DE SINEK
        ══════════════════════════ */
        .sn-sinek {
            background: var(--as-panel);
            border-top: 1px solid var(--as-border);
            border-bottom: 1px solid var(--as-border);
            padding: 6rem 2rem;
        }
        .sn-sinek__inner {
            max-width: 1300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        /* Anillos concéntricos */
        .sn-circles {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 460px;
        }
        .sn-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: sn-pulse 4s ease-in-out infinite;
        }
        .sn-ring--what {
            width: 420px; height: 420px;
            border-color: rgba(113,200,217,.25);
            background: rgba(113,200,217,.03);
            animation-delay: 0s;
        }
        .sn-ring--how {
            width: 290px; height: 290px;
            border-color: rgba(141,9,107,.4);
            background: rgba(141,9,107,.06);
            animation-delay: .5s;
        }
        .sn-ring--why {
            width: 160px; height: 160px;
            border-color: rgba(244,182,28,.6);
            background: rgba(244,182,28,.08);
            animation-delay: 1s;
        }

        @keyframes sn-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50%       { transform: scale(1.025); opacity: .8; }
        }

        .sn-ring__label {
            position: absolute;
            font-family: 'Cinzel', serif;
            font-weight: 700;
            text-align: center;
            z-index: 2;
        }
        .sn-ring--why .sn-ring__label  { font-size: 1rem; color: var(--as-gold); }
        .sn-ring--how .sn-ring__label  { bottom: -2rem; font-size: .8rem; color: var(--as-purple); }
        .sn-ring--what .sn-ring__label { bottom: -2.5rem; font-size: .75rem; color: var(--as-cyan); }

        /* Etiquetas flotantes de los anillos */
        .sn-ring-tag {
            position: absolute;
            background: var(--as-dark);
            border: 1px solid var(--as-border);
            padding: .5rem 1rem;
            font-family: 'Cinzel', serif;
            font-size: .65rem;
            letter-spacing: .15em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .sn-ring-tag--why  { top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--as-gold); background: rgba(244,182,28,.1); border-color: rgba(244,182,28,.3); }
        .sn-ring-tag--what  {     bottom: 19%;
    left: 10%; color: var(--white); border-color: rgba(141,9,107,.3); }
        .sn-ring-tag--how {     top: 5%;
    left: -5%;  color: var(--as-cyan);   border-color: rgba(113,200,217,.3); }

        /* Cards del Sinek */
        .sn-sinek__cards { display: flex; flex-direction: column; gap: 1.5rem; }

        .sn-sinek-card {
            border-left: 3px solid;
            padding: 1.5rem 1.75rem;
            background: rgba(255,255,255,.02);
            border-radius: 0 4px 4px 0;
            transition: background .3s;
        }
        .sn-sinek-card:hover { background: rgba(255,255,255,.05); }
        .sn-sinek-card--why  { border-color: var(--as-gold); }
        .sn-sinek-card--what { border-color: var(--as-purple); }
        .sn-sinek-card--how { border-color: var(--as-cyan); }

        .sn-sinek-card__badge {
            font-family: 'Cinzel', serif;
            font-size: .65rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            margin-bottom: .6rem;
            display: block;
        }
        .sn-sinek-card--why  .sn-sinek-card__badge { color: var(--as-gold); }
        .sn-sinek-card--what .sn-sinek-card__badge { color: var(--as-purple); }
        .sn-sinek-card--how .sn-sinek-card__badge { color: var(--as-cyan); }

        .sn-sinek-card__title {
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 .6rem;
        }
        .sn-sinek-card__text {
            font-size: .9rem;
            font-weight: 300;
            line-height: 1.75;
            color: var(--as-muted);
            margin: 0;
        }
        .sn-sinek-card p:not(:first-of-type) {
            margin-top: 0.5em;
        }
        ul.sp-checklist a {
            display: contents;
        }

        /* ══════════════════════════
           4. HISTORIA
        ══════════════════════════ */
        .sn-historia {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: start;
        }
        .sn-historia__text p {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.9;
            color: var(--as-muted);
            margin: 0 0 1.25rem;
        }
        .sn-historia__text p strong { color: var(--as-text); font-weight: 600; }

        .sn-historia__visual {
            position: sticky;
            top: 6rem;
        }
        .sn-historia__img-frame {
            position: relative;
            border-radius: 2px;
            overflow: hidden;
        }
        .sn-historia__img-frame::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(to top, var(--as-dark) 0%, transparent 40%);
            pointer-events: none;
        }
        .sn-historia__img-placeholder {
            width: 100%;
            aspect-ratio: 3/4;
            background: linear-gradient(145deg, rgba(141,9,107,.2), rgba(11,8,15,.95));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            font-family: 'Cinzel', serif;
            color: var(--as-muted);
            font-size: .85rem;
            letter-spacing: .1em;
            text-align: center;
            padding: 2rem;
        }
        /* ← Sustituir con: <img src="img/logo-asdrubal-tanit.jpg" alt="Logo Asdrubal el Bello y Tanit"> */

        .sn-historia__quote {
            margin: 2rem 0 0;
            padding: 1.5rem 2rem;
            border-left: 2px solid var(--as-gold);
            background: rgba(244,182,28,.04);
        }
        .sn-historia__quote p {
            font-family: 'Cinzel', serif;
            font-style: italic;
            font-size: 1rem;
            color: var(--as-gold) !important;
            line-height: 1.7;
            margin: 0 !important;
        }
        .sn-historia__quote cite {
            display: block;
            margin-top: .75rem;
            font-size: .75rem;
            letter-spacing: .15em;
            color: var(--as-muted) !important;
            font-style: normal;
            text-transform: uppercase;
        }

        
        /* ══════════════════════════
           6. ANDALU-SEO
        ══════════════════════════ */
        .sn-andalu {
            padding: 6rem 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        .sn-andalu__inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        .sn-andalu__img-frame {
            position: relative;
            border-radius: 2px;
            overflow: hidden;
        }
        .sn-andalu__img-frame::before {
            content: 'ANDALU-SEO';
            position: absolute;
            top: 1.5rem; left: 1.5rem;
            font-family: 'Cinzel', serif;
            font-size: .65rem;
            letter-spacing: .3em;
            color: var(--as-gold);
            z-index: 3;
            background: rgba(11,8,15,.7);
            padding: .4rem .8rem;
        }
        .sn-andalu__img-placeholder {
            width: 100%;
            aspect-ratio: 4/3;
            background: linear-gradient(135deg, rgba(113,200,217,.1), rgba(11,8,15,.9));
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cinzel', serif;
            color: var(--as-muted);
            font-size: .85rem;
            letter-spacing: .1em;
            text-align: center;
            padding: 2rem;
        }
        /* ← Sustituir con: <img src="img/andalu-seo-evento.jpg" alt="Andalu-SEO Conference"> */

        .sn-andalu__img-frame::after {
            content: '';
            position: absolute; inset: 0;
            border: 1px solid rgba(113,200,217,.2);
            pointer-events: none;
            z-index: 2;
        }

        .sn-andalu__kpis {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 2rem;
        }
        .sn-andalu__kpi {
            padding: 1.25rem;
            border: 1px solid var(--as-border);
            background: rgba(113,200,217,.03);
        }
        .sn-andalu__kpi-num {
            font-family: 'Cinzel', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--as-cyan);
            display: block;
        }
        .sn-andalu__kpi-label {
            font-size: .78rem;
            color: var(--as-muted);
            letter-spacing: .05em;
            margin-top: .2rem;
            font-family: 'Cinzel', serif;
        }

        .sn-andalu__text p {
            font-size: .95rem;
            font-weight: 300;
            line-height: 1.85;
            color: var(--as-muted);
            margin: 0 0 1.25rem;
        }
        .sn-andalu__text p strong { color: var(--as-text); font-weight: 600; }

        .sn-btn {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: .85rem 2rem;
            font-family: 'Cinzel', serif;
            font-size: .75rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all .3s;
            cursor: pointer;
        }
        .sn-btn--primary {
            background: var(--as-purple);
            color: #fff;
            border: 1px solid var(--as-purple);
        }
        .sn-btn--primary:hover {
            background: transparent;
            color: var(--as-purple);
        }
        .sn-btn--outline {
            background: transparent;
            color: var(--as-cyan);
            border: 1px solid var(--as-cyan);
        }
        .sn-btn--outline:hover {
            background: rgba(113,200,217,.1);
        }

        /* ══════════════════════════
           Wrappers para módulos
        ══════════════════════════ */
        .sn-mod-wrapper {
            border-top: 1px solid var(--as-border);
        }

        /* ══════════════════════════
           RESPONSIVE
        ══════════════════════════ */
        @media (max-width: 1024px) {
            .sn-hero__inner,
            .sn-sinek__inner,
            .sn-historia,
            .sn-andalu__inner { grid-template-columns: 1fr; }
            .sn-hero__visual { display: none; }
            .sn-presencia__header { grid-template-columns: 1fr; }
            .sn-talks-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 640px) {
            .sn-talks-grid { grid-template-columns: 1fr; }
            .sn-hero__stats { flex-wrap: wrap; gap: 1.5rem; }
            .sn-andalu__kpis { grid-template-columns: 1fr 1fr; }
            .sn-circles { height: 300px; transform: scale(.7); }
            body {
                margin-top: 56px;
            }
        }
        /* ══════════════════════════
   METODOLOGÍA
══════════════════════════ */
.sn-metodologia {
    padding: 6rem 2rem;
    background: var(--as-dark);
}
.sn-metodologia__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 5rem;
    align-items: start;
}
 
/* Cabecera lateral */
.sn-metodologia__header {
    position: sticky;
    top: 6rem;
}
.sn-metodologia__intro {
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--as-muted);
    margin: 0 0 2rem;
}
 
/* Links de servicios */
.sn-metodologia__servicios {
    border-top: 1px solid var(--as-border);
    padding-top: 1.5rem;
}
.sn-metodologia__servicios-label {
    font-family: 'Cinzel', serif;
    font-size: .6rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--as-muted);
    display: block;
    margin-bottom: .85rem;
}
.sn-metodologia__servicios-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sn-metserv-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Cinzel', serif;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-gold);
    text-decoration: none;
    padding: .6rem .75rem;
    border: 1px solid transparent;
    transition: all .25s;
}
.sn-metserv-link:hover {
    border-color: var(--as-border);
    background: rgba(244,182,28,.04);
    color: #fff;
}
.sn-metserv-link__icon {
    color: var(--as-purple);
    font-size: .65rem;
    flex-shrink: 0;
}
 
/* Pilares */
.sn-metodologia__pilares {
    display: flex;
    flex-direction: column;
    gap: 0;
}
 
.sn-pilar {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.5rem;
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--as-border);
    transition: background .3s;
    position: relative;
}
.sn-pilar:first-child {
    border-top: 1px solid var(--as-border);
}
.sn-pilar::before {
    content: '';
    position: absolute;
    left: -2rem; top: 0; bottom: 0;
    width: 3px;
    background: var(--as-purple);
    opacity: 0;
    transition: opacity .3s;
}
.sn-pilar:hover::before { opacity: 1; }
.sn-pilar:hover { background: rgba(141,9,107,.04); }
 
.sn-pilar__num {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--as-border);
    line-height: 1;
    padding-top: .2rem;
    transition: color .3s;
}
.sn-pilar:hover .sn-pilar__num { color: var(--as-purple); }
 
.sn-pilar__title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .75rem;
    line-height: 1.3;
}
.sn-pilar__text {
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--as-muted);
    margin: 0 0 1rem;
}
.sn-pilar__text strong { color: var(--as-text); font-weight: 600; }
 
.sn-pilar__tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Cinzel', serif;
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--as-cyan);
    border: 1px solid rgba(113,200,217,.25);
    padding: .35rem .75rem;
    background: rgba(113,200,217,.04);
}
 
/* Responsive */
@media (max-width: 1024px) {
    .sn-metodologia__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .sn-metodologia__header { position: static; }
}
@media (max-width: 640px) {
    .sn-pilar { grid-template-columns: 40px 1fr; gap: 1rem; }
    .sn-pilar__num { font-size: 1.1rem; }
}