/* =========================================================
   AJUSTES DE TELÉFONO
   ========================================================= */
.about>*,.stat,.sec-head>*{min-width:0}
.h-big{font-size:clamp(44px,12.5vw,128px)}
@media (max-width:599px){
  /* la tarjeta del paso deja de ser cuadrada: crece hacia abajo con todo el contenido y se puede desplazar */
  .sp-card{aspect-ratio:auto;height:auto;max-height:calc(100svh - 32px);padding:22px 18px}
  .sp-top .sn{font-size:52px}
  .sp-card h3{font-size:44px}
  .sp-cols{grid-template-columns:1fr}
  /* los pasos en la página quedan en una sola columna, en filas compactas */
  .steps{grid-template-columns:1fr}
  .step-btn{grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;padding:20px 16px 16px}
  .step-btn .st-top{grid-row:span 3;flex-direction:column;justify-content:flex-start;gap:8px}
  .step-btn strong{font-size:23px}
  .stats .stat{padding:12px 10px}
  .stat b{font-size:34px}
}

/* =========================================================
   EFECTOS DEL INICIO
   ========================================================= */
/* aurora: un anillo de luz azul que gira lento detrás de la foto (solo transform, liviano) */
.hero-aurora{position:absolute;z-index:0;left:60%;top:42%;width:min(95vmin,900px);height:min(95vmin,900px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  /* tres luces que giran juntas; sin máscara para que el navegador solo tenga que rotar la capa */
  background:radial-gradient(circle at 30% 30%,rgba(var(--p2-rgb),.45),transparent 34%),radial-gradient(circle at 72% 68%,rgba(var(--p1-rgb),.32),transparent 34%),
             radial-gradient(circle at 74% 26%,rgba(var(--p2-rgb),.38),transparent 30%);
  animation:aur 26s linear infinite;opacity:.9;will-change:transform}
@keyframes aur{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* brillo azul al pasar el mouse por proyectos, pasos y skills */
.pcard:hover .mock{box-shadow:0 0 0 1px rgba(var(--p2-rgb),.6),0 26px 60px rgba(var(--p1-rgb),.35)}
.step-btn:hover{box-shadow:0 0 0 1px rgba(var(--p2-rgb),.45),0 22px 50px rgba(var(--p1-rgb),.28)}
.skill:hover{box-shadow:0 0 0 1px rgba(var(--p2-rgb),.5),0 18px 44px rgba(var(--p1-rgb),.3)}
.sheet{transition:box-shadow .5s}
.sheet.lit{box-shadow:var(--sh-2),0 0 0 1px rgba(var(--p2-rgb),.14)}
@media (max-width:759px){
  .hero-aurora{left:50%;top:34%;width:130vw;height:130vw}
}
@media (prefers-reduced-motion:reduce){.hero-aurora{animation:none}}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:760px){
  .pad{padding:44px}
  .sec-head{grid-template-columns:1.2fr .8fr;gap:30px}
  .about{grid-template-columns:1.15fr .85fr}
  .pgrid.top3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgrid.all{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .pg-grid{grid-template-columns:1.25fr 1fr;gap:24px}
  .pg-stage{min-height:480px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cta{grid-template-columns:1.3fr .7fr}
  .skill-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .ct-grid{grid-template-columns:1.1fr .9fr;gap:22px}
  .ct-form{padding:30px 28px}
  .modal-card{padding:28px}
  .sp-cols{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){.steps{grid-template-columns:repeat(5,minmax(0,1fr))}.skill-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:759px){
  /* en teléfono el selector muestra solo el texto de la sección activa */
  .dock button{padding:0 14px}
  .dock button .lb{display:none}
  .dock button[aria-current="page"] .lb{display:inline}
  .hero{height:auto;min-height:0;padding:0 0 18px;border-radius:28px 28px 48px 48px}
  .hero-word{position:relative;top:auto;padding-top:calc(150px + env(safe-area-inset-top,0px))}
  .hero-word.hw-line{position:absolute;top:0;left:0;right:0}
  .hero-word .w{font-size:19vw}
  .hero-glow{left:50%;top:26%}
  .hero-photo{position:relative;right:auto;height:min(54svh,460px);width:calc(min(54svh,460px) * .7);max-width:86%;margin:-40vw auto 0}
  .hero-left{position:relative;left:auto;bottom:auto;width:auto;margin:-60px 18px 0}
  .tools{flex-direction:column;align-items:stretch;gap:12px}
  .tools-lbl{width:auto}
  .about-photo{min-height:380px}
}
@media (min-width:760px) and (max-height:760px){.hero-left{bottom:calc(var(--dock-h) + 26px)}.name{font-size:clamp(60px,7vw,110px)}}
.fb-nofont .hero-word .w{font-size:min(14vw,240px)}
.fb-nofont .h-big{font-size:clamp(48px,8vw,104px)}
.fb-nofont .name{font-size:clamp(54px,6vw,100px)}
.fb-nofont .ld-name{font-size:clamp(56px,14vw,200px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:759px){
  /* inicio sin foto en teléfono: no hay lugar al lado del nombre, así que la tarjeta va centrada debajo de la palabra y el nombre baja */
  .ha-code{left:50%;font-size:12.5px;margin-top:16px}
  .hero.sin-foto .hero-word.hw-fill{padding-bottom:150px}
  .hero.sin-foto .hero-left{margin-top:14px}
}