/* =====================================================================
   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);
}

/* =====================================================================
   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);
}
.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;}
}