/* =========================
   SOBRE MÍ (Plan-Pro style)
   - Header/Nav + Hero iguales al index
   - Contenido con reveal izq/der
========================= */

:root{
  --accent: #38B6FF;
  --bg-top: #0f1a3a;
  --bg-bottom: #0b1020;
  --text: #ffffff;
}

/* Reset básico */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

/* Fondo PRO */
.page-pro{
  background: none;
  position: relative;
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}

.page-pro::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 600px at 35% 25%, rgba(56,182,255,.20), transparent 60%),
    radial-gradient(900px 520px at 70% 35%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to top, var(--bg-bottom), var(--bg-top));
  background-attachment: fixed;
}

/* Container general */
.container{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

/* =========================
   MAIN
========================= */
.pro-main{
  padding: 60px 0;
  flex: 1;
}

/* Layout sobre mí */
.about__grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items:center;
}

/* Card foto */
.photoCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 26px;
}

.photoCard__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Textos */
.kicker{
  margin:0 0 8px;
  color: rgba(255,255,255,.68);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size: 1.1rem;
}

.title{
  margin:0;
  font-size: clamp(3rem, 3.2vw, 4rem);
  line-height: 1.1;
}

.accent{ color: var(--accent); }

.subtitle{
  margin: 14px 0 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}

.text{
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
  line-height: 1.7;
}

.bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.8;
}

/* Botones */
.cta{
  display:flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn:active{ transform: scale(.98); }


.btn--primary:hover{
  background: rgba(56,182,255,.26);
}

.btn--ghost:hover{
  background: rgba(255,255,255,.08);
}

/* Meta */
.meta{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.meta__item{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

.meta__label{
  display:block;
  font-size: 1.1rem;
  color: rgba(255,255,255,.68);
}

.meta__value{
  display:block;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* =========================
   REVEAL (izq/der al centro)
========================= */
.pro-reveal{
  opacity: 0;
  transform: translate3d(var(--x,0), var(--y,16px), 0);
  filter: blur(2px);
  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    opacity  .65s cubic-bezier(.2,.8,.2,1),
    filter   .65s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}

.pro-reveal.from-left{ --x: -70px; --y: 0; }
.pro-reveal.from-right{ --x: 70px; --y: 0; }

.pro-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* En móviles entra de abajo */
@media (max-width: 768px){
  .about__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .about__content{
    text-align: center;
  }

  .bullets{
    list-style-position: inside;
    padding-left: 0;
  }

  .cta, .meta{
    justify-content: center;
  }

  .pro-reveal.from-left,
  .pro-reveal.from-right{
    --x: 0;
    --y: 22px;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .pro-reveal{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* FIX: evitar el text-align:center global del style.css en el about */
.about__content h2.title,
.about__content .kicker,
.about__content .subtitle,
.about__content .text{
  text-align: left;
}

/* En móvil sí centrado (como ya venías manejando) */
@media (max-width: 768px){
  .about__content h2.title,
  .about__content .kicker,
  .about__content .subtitle,
  .about__content .text{
    text-align: center;
  }
}

/* FORZAR reveal horizontal SOLO para este párrafo */
#bio.pro-reveal{
  --x: 70px;
  --y: 0;
}

/* =========================
   FOTO HOVER PREMIUM
========================= */

.photoCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 22px;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

/* efecto hover */
.photoCard:hover{
  transform: translateY(-8px);
  border-color: rgba(56,182,255,.45);

  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(56,182,255,.25),
    0 0 40px rgba(56,182,255,.25);
}

.photoCard__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;

  transition: transform .35s ease;
}

/* zoom suave */
.photoCard:hover .photoCard__img{
  transform: scale(1.04);
}

/* =========================
   FOTO — LIGHT GRADIENT (shine)
========================= */

.photoCard{
  position: relative;
  overflow: hidden; /* necesario para el brillo */
}

/* capa de brillo */
.photoCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;

  background: radial-gradient(
    500px circle at var(--mx,50%) var(--my,50%),
    rgba(56,182,255,.25),
    rgba(56,182,255,.12) 25%,
    transparent 60%
  );

  opacity:0;
  transition: opacity .35s ease;
}

/* aparece al hover */
.photoCard:hover::before{
  opacity:1;
}

/* Botón ghost - texto visible */
.pro-btn--ghost{
  color: #ffffff;
  border: 1px solid rgba(124,92,255,.55);
}

/* hover */
.pro-btn--ghost:hover{
  color: #000000;
}

/* =========================
   BOTÓN VER SERVICIOS FIX
========================= */

.pro-btn--ghost{
  color: #ffffff !important;
  border: 1px solid rgba(124,92,255,.55);
  background: rgba(255,255,255,.03);
}

/* hover */
.pro-btn--ghost:hover{
  color: #000000 !important;
  background: rgba(124,92,255,.65);
  border-color: rgba(124,92,255,.85);
}

/* =========================
   BOTONES PRO — micro-animación (Stripe/Apple vibe)
   Pega AL FINAL de sobre-mi.css
========================= */

/* Base: suaviza la animación */
.cta .boton.pro-btn,
.cta .boton.pro-btn.pro-btn--ghost{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
  will-change: transform, box-shadow, filter;
}

/* Hover: “profundidad” */
.cta .boton.pro-btn:hover,
.cta .boton.pro-btn.pro-btn--ghost:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  filter: brightness(1.03);
}

/* Active: click “hundido” */
.cta .boton.pro-btn:active,
.cta .boton.pro-btn.pro-btn--ghost:active{
  transform: translateY(-1px) scale(.985);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* Focus accesible (teclado) */
.cta .boton.pro-btn:focus-visible,
.cta .boton.pro-btn.pro-btn--ghost:focus-visible{
  outline: 2px solid rgba(56,182,255,.65);
  outline-offset: 3px;
}

/* =========================
   BOTONES — GLOW PREMIUM
========================= */

.cta .boton.pro-btn{
  position: relative;
  overflow: hidden;
}

/* capa glow */
.cta .boton.pro-btn::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;

  background: radial-gradient(
    200px circle at var(--bx,50%) var(--by,50%),
    rgba(56,182,255,.55),
    transparent 60%
  );

  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

/* aparece al hover */
.cta .boton.pro-btn:hover::before{
  opacity: .8;
}

/* =========================
   BOTONES — GLOW PREMIUM
========================= */
.cta .boton.pro-btn{
  position: relative;
  overflow: hidden;
}
.cta .boton.pro-btn::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(
    200px circle at var(--bx,50%) var(--by,50%),
    rgba(56,182,255,.55),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.cta .boton.pro-btn:hover::before{ opacity: .8; }