/* =====================================================================
   SOBRE MÍ — página con scroll normal, mismo lenguaje visual que
   index.html (header fijo, .section-pad, .container, .reveal, blobs,
   .porque-grid para el layout de dos columnas). Acá solo lo específico
   de esta página: el placeholder de foto, el bloque de texto de
   filosofía, los grupos de stack y la tira de logos de marcas reales.

   ÍNDICE
   1. Presentación (placeholder de foto + intro)
   2. Bloque de texto (filosofía)
   3. Formación & stack
   4. Tira de logos (alcance / marcas reales)
   5. CTA final
   ===================================================================== */

/* =====================================================================
   1. PRESENTACIÓN
   ===================================================================== */
/* Primera sección de la página: sin header fijo propio (usa el header
   fijo global), así que necesita el mismo padding-top que .hero para
   no quedar tapada. */
.sm-intro{padding-top:calc(68px + 56px);}
/* La columna de la foto en ".porque-grid" (compartida con index.html) es
   fluida y en desktop queda bastante más ancha que la propia tarjeta
   (".pa-media-frame", tope 280px) — sin centrar, la foto quedaba pegada
   al borde izquierdo con un hueco enorme antes del texto, dando la
   sensación de estar lejos del contenido y descentrada. Se centra en
   todos los anchos (no solo mobile) para que se acerque al texto. */
.sm-intro .pa-media-frame{margin:0 auto;}
.sm-title{font-size:clamp(2.1rem,6.5vw,3.4rem);margin-bottom:8px;}
.sm-role{
    font-family:var(--font-mono);
    font-size:.9rem;
    color:var(--accent-hot);
    margin-bottom:16px;
}
/* Texto de presentación un poco más grande que el cuerpo normal del
   sitio: es lo primero que se lee de la página, se lo pidió más
   presente que un párrafo de sección cualquiera. */
.sm-lead{font-size:1.05rem;line-height:1.7;}
.sm-lead + .sm-lead{margin-top:16px;}

/* El combo ".eyebrow" (inline-flex) + "h2" (inline-block) de styles.css
   solo queda apilado "por accidente" cuando el texto del h2 es lo
   bastante largo como para no entrar al lado del eyebrow en la misma
   línea — con títulos cortos como los de esta página (a ciertos anchos)
   los dos quedan pegados en una sola línea. Se fuerza el apilado acá. */
.section-header .eyebrow{display:flex;}

/* =====================================================================
   2. BLOQUE DE TEXTO (filosofía)
   ===================================================================== */
.sm-text-block{max-width:65ch;}
.sm-text-block p{margin-bottom:16px;}
.sm-text-block p:last-child{margin-bottom:0;}
/* Layout de dos columnas: texto + tarjeta del logo (".pa-media-frame",
   ver más abajo). En mobile la tarjeta queda debajo del texto, en
   desktop pasa a la derecha. */
.sm-filosofia-grid{display:grid;grid-template-columns:1fr;gap:36px;}
@media (min-width:768px){
    .sm-filosofia-grid{grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
}

/* Tarjeta 3D del logo — copia exacta de ".pa-media"/".pa-media-frame" de
   portfolio-animado.css (mismo halo pulsante, brillo especular y tilt
   vía custom properties que mueve sobre-mi.js). Se duplica acá en vez de
   enlazar portfolio-animado.css entero para no arrastrar sus estilos de
   paneles/scroll-jack, que esta página no usa. */
.pa-media{display:flex;align-items:center;justify-content:center;}
.pa-media-frame{
    --rx:0deg;
    --ry:0deg;
    --glow-x:50%;
    --glow-y:50%;
    --card-glow: var(--accent-glow);
    --card-glow-soft:color-mix(in srgb, var(--card-glow) 45%, transparent);
    --glow-blur-a:26px;
    --glow-spread-a:-14px;
    --glow-blur-b:60px;
    --glow-spread-b:-30px;
    position:relative;
    width:100%;
    max-width:230px;
    aspect-ratio:1/1;
    border-radius:var(--radius-lg);
    background:linear-gradient(160deg,#1a1a20 0%,#0c0c0f 100%);
    border:1px solid var(--border-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16%;
    box-shadow:
        0 40px 80px -30px rgba(0,0,0,.55),
        0 0 var(--glow-blur-a) var(--glow-spread-a) var(--card-glow-soft),
        0 0 var(--glow-blur-b) var(--glow-spread-b) var(--card-glow-soft);
    transform-style:preserve-3d;
    transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
    will-change:transform;
    animation:cardGlowPulse 5s ease-in-out infinite;
}
@keyframes cardGlowPulse{
    0%,100%{
        box-shadow:
            0 40px 80px -30px rgba(0,0,0,.55),
            0 0 var(--glow-blur-a) var(--glow-spread-a) var(--card-glow-soft),
            0 0 var(--glow-blur-b) var(--glow-spread-b) var(--card-glow-soft);
    }
    50%{
        box-shadow:
            0 40px 80px -30px rgba(0,0,0,.55),
            0 0 calc(var(--glow-blur-a) + 8px) calc(var(--glow-spread-a) + 3px) var(--card-glow-soft),
            0 0 calc(var(--glow-blur-b) + 16px) calc(var(--glow-spread-b) + 4px) var(--card-glow-soft);
    }
}
.pa-media-frame::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(160deg, rgba(47,111,237,.4), rgba(31,201,195,.3));
    transform:translateZ(-22px);
}
.pa-media-frame::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.18), transparent 55%);
    mix-blend-mode:screen;
    pointer-events:none;
}
.pa-media-frame > img{
    position:relative;
    transform:translateZ(34px);
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));
}
.pa-media-frame.pa-media-own img{filter:drop-shadow(0 0 20px rgba(47,111,237,.45));}
@media (prefers-reduced-motion: reduce){
    .pa-media-frame{transform:none;animation:none;}
}
@media (max-width:679px){
    .pa-media-frame{
        max-width:206px;
        padding:12%;
        --glow-blur-a:12px;
        --glow-spread-a:-8px;
        --glow-blur-b:24px;
        --glow-spread-b:-15px;
    }
}
@media (min-width:680px){
    .pa-media-frame{max-width:320px;}
}
@media (min-width:768px){
    .pa-media-frame{max-width:280px;}
}

/* Variante foto de la tarjeta 3D (usada en la foto de la intro, no en el
   logo de Filosofía): sin el padding pensado para centrar un ícono, y con
   object-fit:cover en vez de contain para que la foto llene el marco de
   punta a punta en vez de quedar chica en el medio. */
.pa-media-frame.sm-avatar-frame--photo{padding:0;overflow:hidden;}
.pa-media-frame.sm-avatar-frame--photo > img{
    object-fit:cover;
    object-position:top center;
    transform:translateZ(20px);
}
/* Un poco más grande que el resto de las tarjetas ".pa-media-frame" en
   mobile (206px): es la primera imagen de la página (la foto de Axel) y
   se pidió agrandarla levemente respecto al tamaño compartido. */
@media (max-width:679px){
    .pa-media-frame.sm-avatar-frame--photo{max-width:230px;}
}

/* =====================================================================
   3. FORMACIÓN & STACK
   ===================================================================== */
.sm-stack-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    margin-bottom:28px;
}
.sm-stack-group{--group-color:var(--accent-hot);}
.sm-stack-label{
    display:block;
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--group-color);
    margin-bottom:12px;
}
.sm-stack-group .pf-tags{margin-bottom:0;}
/* Chips con color por categoría (--group-color, ver inline style en el
   HTML de cada grupo) en vez del gris parejo de ".pf-tag" genérico: un
   punto luminoso + borde/fondo tintados y un pequeño lift al hover, para
   que la sección no se sienta una lista plana de texto. */
.sm-stack-group .pf-tag{
    position:relative;
    background:linear-gradient(135deg, color-mix(in srgb, var(--group-color) 20%, transparent), rgba(255,255,255,.05));
    border:1px solid color-mix(in srgb, var(--group-color) 42%, transparent);
    padding:6px 14px 6px 24px;
    font-size:.79rem;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sm-stack-group .pf-tag::before{
    content:'';
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:6px;height:6px;
    border-radius:50%;
    background:var(--group-color);
    box-shadow:0 0 7px var(--group-color);
}
.sm-stack-group .pf-tag:hover{
    transform:translateY(-2px);
    border-color:var(--group-color);
    background:linear-gradient(135deg, color-mix(in srgb, var(--group-color) 32%, transparent), rgba(255,255,255,.06));
    box-shadow:0 8px 18px -8px color-mix(in srgb, var(--group-color) 65%, transparent);
}
/* Los chips de cada grupo "aparecen" uno a uno con un rebote corto cuando
   el grupo termina su reveal (dispara con la clase .show del propio
   grupo, sin observer extra). Mismo lenguaje que los tags de los paneles
   de portfolio-animado. */
/* El keyframe sólo define "from" y el fill es "both": durante el delay el
   chip queda en su estado inicial (invisible) y al terminar vuelve a su
   valor computado normal — así el hover (translateY) sigue funcionando
   después, cosa que un "to{transform:none}" con forwards bloquearía. */
.sm-stack-group.reveal.show .pf-tag{
    animation:smTagIn .55s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:calc(.25s + var(--tag-i,0) * 55ms);
}
.sm-stack-group.reveal.show .pf-tag:nth-child(2){--tag-i:1;}
.sm-stack-group.reveal.show .pf-tag:nth-child(3){--tag-i:2;}
.sm-stack-group.reveal.show .pf-tag:nth-child(4){--tag-i:3;}
.sm-stack-group.reveal.show .pf-tag:nth-child(5){--tag-i:4;}
.sm-stack-group.reveal.show .pf-tag:nth-child(6){--tag-i:5;}
.sm-stack-group.reveal.show .pf-tag:nth-child(7){--tag-i:6;}
.sm-stack-group.reveal.show .pf-tag:nth-child(8){--tag-i:7;}
.sm-stack-group.reveal.show .pf-tag:nth-child(n+9){--tag-i:8;}
@keyframes smTagIn{from{opacity:0;transform:translateY(8px) scale(.9);}}
@media (prefers-reduced-motion: reduce){
    .sm-stack-group.reveal.show .pf-tag{animation:none !important;}
}
.sm-softskills{font-size:.9rem;max-width:70ch;}
.sm-softskills + .sm-softskills{margin-top:10px;}
.sm-softskills strong{color:var(--white);}
/* Deja un poco de aire debajo del contenido para que el fondo de ondas
   (mismo recurso que el Hero, ver #waveCanvasTech en el HTML) tenga su
   propio espacio en vez de superponerse directo a los chips/parrafos. */
.sm-tech{padding-bottom:calc(var(--section-pad) + 40px);}

/* =====================================================================
   4. TIRA DE LOGOS (alcance / marcas reales)
   ===================================================================== */
/* Carrousel infinito y sutil: contenedor con scroll nativo (deslizable a
   dedo en mobile) + una pista que el JS duplica y desplaza sola de a
   poco (assets/js/sobre-mi.js). Sin JS o con "reduced motion" queda un
   scroll horizontal normal con una sola tanda de logos — degrada bien,
   nunca se rompe. */
.sm-logo-carousel{
    position:relative;
    /* padding-top compensa el translateY(-6px) + scale(1.06) del hover (ver
       ".sm-logo-track a:hover" abajo) para que overflow-y:hidden no corte la
       card por arriba al crecer; se descuenta del margin-top para que el
       espacio visual afuera del carrousel quede igual que antes. */
    margin:14px 0 30px;
    padding-top:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.sm-logo-carousel::-webkit-scrollbar{display:none;}
.sm-alcance-btn{display:block;margin:0 auto;width:fit-content;}
.sm-logo-track{
    display:flex;
    align-items:center;
    gap:36px;
    width:max-content;
    padding:8px 4px 0;
}
.sm-logo-track a{
    width:104px;
    height:104px;
    flex:0 0 auto;
    padding:16px;
    border-radius:var(--radius-md);
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color .25s ease, transform .25s ease;
}
.sm-logo-track a:hover{border-color:var(--accent);transform:translateY(-6px) scale(1.06);}
.sm-logo-track img{width:100%;height:100%;object-fit:contain;}

/* =====================================================================
   5. CTA FINAL
   ===================================================================== */
.sm-cta{
    background:linear-gradient(180deg,var(--bg-black) 0%, #060a16 100%);
    overflow:hidden;
    position:relative;
}
.sm-cta h2{font-size:clamp(1.8rem,5.6vw,2.6rem);margin-bottom:14px;}
@media (max-width:767px){
    .sm-cta{padding-top:140px;padding-bottom:140px;}
}

@media (min-width:768px){
    .sm-intro{padding-top:calc(68px + 70px);}
    .sm-logo-track a{width:130px;height:130px;}
    .sm-stack-grid{grid-template-columns:1fr 1fr;}
    /* ".porque-grid" reparte 0.9fr/1.1fr pensado para el ilustración grande
       de "Por qué elegirme" en index.html — con la foto de la intro, capada
       a un ancho fijo bastante menor, esa proporción dejaba una columna
       enorme y un hueco gigante antes del texto. Acá la columna se ajusta
       al contenido real (el tamaño de la tarjeta) en vez de a un fraction
       pensado para otra cosa. */
    .sm-intro .porque-grid{grid-template-columns:auto 1fr;}
}