/* En la web las fuentes vienen de Google Fonts (20 KB en vez de 400 KB).
   El ZIP que descarga el cliente las lleva incrustadas. */
/* ==========================================================================
   PORTFOLIO CREATIVE — PORTAFOLIO DE DISEÑADOR/A FREELANCE
   Leuname Software · leunamesoftware.com
   ========================================================================== */

:root{
  --negro:#0d0d0f; --negro2:#18181c; --gris-osc:#232329;
  --coral:#ff4d5e; --coral-osc:#e0374a; --violeta:#7b5cff;
  --crema:#faf9f7; --blanco:#fff; --gris-cl:#f1f0ee;
  --tinta:#0d0d0f; --apagado:#8a8a92; --linea:#e7e6e3; --linea-osc:rgba(255,255,255,.1);
  --ok:#2e8b57; --error:#ff4d5e;
  --disp:'Sora',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ancho:1320px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

.env{max-width:var(--ancho);margin:0 auto;padding:0 26px}
section{padding:90px 0}

h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:19px}

.rotulo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:16px}
.rotulo::before{content:"";width:26px;height:2px;background:var(--coral)}
.cab-sec{margin-bottom:44px}
.cab-sec p{color:var(--apagado);margin-top:14px;font-size:16px;max-width:520px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:2px solid transparent;border-radius:99px;
  font-family:var(--sans);font-size:14.5px;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:var(--coral-osc);transform:translateY(-2px)}
.btn-negro{background:var(--negro);color:#fff}
.btn-negro:hover{background:var(--negro2);transform:translateY(-2px)}
.btn-linea{border-color:var(--negro);color:var(--negro);background:transparent}
.btn-linea:hover{background:var(--negro);color:#fff}
.btn-linea-clara{border-color:rgba(255,255,255,.35);color:#fff}
.btn-linea-clara:hover{background:rgba(255,255,255,.12)}

/* ---------------- Cabecera ---------------- */
.cab{position:sticky;top:0;z-index:80;background:rgba(250,249,247,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab .env{display:flex;align-items:center;gap:22px;padding-top:18px;padding-bottom:18px}
.marca{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em}
.marca span{color:var(--coral)}
.menu{display:flex;gap:32px;margin:0 auto}
.menu a{font-size:14px;font-weight:600;color:var(--tinta);opacity:.65;transition:.2s}
.menu a:hover,.menu a.act{opacity:1;color:var(--coral)}
.abrir-menu{display:none;background:none;border:1px solid var(--linea);border-radius:10px;
  width:44px;height:44px;color:var(--tinta);cursor:pointer;align-items:center;justify-content:center}
.menu-movil{display:none;border-top:1px solid var(--linea);background:#fff}
.menu-movil.ver{display:block}
.menu-movil a{display:block;padding:13px 26px;border-bottom:1px solid var(--linea);font-size:15px}

/* ---------------- Portada ---------------- */
.portada{padding-top:70px;padding-bottom:50px}
.portada-eti{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--apagado);margin-bottom:22px}
.portada-eti span{width:9px;height:9px;border-radius:50%;background:#2ec973;display:inline-block}
.portada h1{font-size:clamp(38px,6vw,74px);margin-bottom:10px}
.portada h1 em{font-style:normal;color:var(--coral)}
.portada-rol{font-size:clamp(18px,2.2vw,24px);color:var(--apagado);font-weight:500;margin-bottom:26px}
.portada p{font-size:17px;color:var(--apagado);max-width:560px;margin-bottom:34px}
.portada-botones{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:50px}
.portada-stats{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:28px}
.portada-stats strong{display:block;font-family:var(--disp);font-size:30px}
.portada-stats span{font-size:12.5px;color:var(--apagado);text-transform:uppercase;letter-spacing:.06em}

/* ---------------- Portafolio ---------------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filtro{padding:9px 18px;border-radius:99px;border:1.5px solid var(--linea);font-size:13.5px;
  font-weight:600;background:#fff;cursor:pointer;transition:.18s}
.filtro.act,.filtro:hover{background:var(--negro);color:#fff;border-color:var(--negro)}
.portafolio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proyecto{border-radius:16px;overflow:hidden;position:relative;cursor:pointer;transition:.25s}
.proyecto:hover{transform:translateY(-6px)}
.proyecto-img{height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff}
.proyecto-cat{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.85;margin-bottom:6px}
.proyecto-img h3{font-size:19px}
.proyecto-img svg{position:absolute;top:18px;right:18px;opacity:0;transition:.2s}
.proyecto:hover .proyecto-img svg{opacity:1}

/* ---------------- Sobre mí ---------------- */
.sobre{background:var(--negro);color:#fff}
.sobre .env{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sobre .rotulo{color:var(--coral)}
.sobre h2{margin-bottom:18px}
.sobre p{color:#b9b9c2;font-size:15.5px;line-height:1.75;margin-bottom:16px}
.skills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.skill{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:600}
.avatar-grande{width:100%;aspect-ratio:1/1;border-radius:24px;background:linear-gradient(150deg,var(--coral),var(--violeta));
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:96px;font-weight:800;color:#fff}

/* ---------------- Servicios ---------------- */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:16px;overflow:hidden}
.servicio{background:#fff;padding:34px 26px}
.servicio-num{font-family:var(--disp);font-size:13px;font-weight:800;color:var(--coral);margin-bottom:14px}
.servicio h3{margin-bottom:8px}
.servicio p{font-size:13.5px;color:var(--apagado)}

/* ---------------- Testimonios ---------------- */
.opiniones{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.opinion{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:28px}
.estrellas{color:var(--coral);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.opinion p{font-size:14.5px;color:var(--tinta);margin-bottom:20px}
.opinion-quien{display:flex;align-items:center;gap:12px}
.opinion-ini{width:40px;height:40px;border-radius:50%;background:var(--negro);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.opinion-quien strong{display:block;font-size:14px}
.opinion-quien span{font-size:12.5px;color:var(--apagado)}

/* ---------------- Contacto ---------------- */
.contacto{background:linear-gradient(150deg,var(--coral),var(--violeta));color:#fff;text-align:center}
.contacto h2{margin-bottom:16px}
.contacto p{max-width:560px;margin:0 auto 32px;color:rgba(255,255,255,.9);font-size:16.5px}
.contacto-form{max-width:640px;margin:0 auto;text-align:left;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:34px}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#fff}
.campo input,.campo textarea{width:100%;padding:13px 15px;border:1px solid rgba(255,255,255,.3);
  border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:14.5px}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.6)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.18)}
.campo textarea{resize:vertical;min-height:90px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}
.aviso-form{margin-top:14px;padding:13px 16px;border-radius:10px;font-size:13.5px;display:none;background:rgba(255,255,255,.9);color:var(--negro)}
.aviso-form.ok,.aviso-form.mal{display:block}

/* ---------------- Pie ---------------- */
.pie{background:var(--negro);color:#8f8f99;padding:44px 0}
.pie .env{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.pie-redes{display:flex;gap:14px}
.pie-redes a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s}
.pie-redes a:hover{background:var(--coral);border-color:var(--coral)}
.aviso-demo{background:#1a1a1e;color:#ffb4bb;text-align:center;padding:9px 20px;font-size:12.5px;font-weight:600}

@media(max-width:1100px){
  .portafolio{grid-template-columns:1fr 1fr}
  .servicios{grid-template-columns:1fr 1fr}
  .opiniones{grid-template-columns:1fr}
  .sobre .env{grid-template-columns:1fr;gap:30px}
  .avatar-grande{max-width:280px;margin:0 auto}
}
@media(max-width:900px){
  .menu{display:none}
  .cab .btn{display:none}
  .abrir-menu{display:flex}
  .menu-movil .btn{display:flex;margin:14px 26px 18px}
}
@media(max-width:640px){
  section{padding:60px 0}
  .env{padding:0 18px}
  .portafolio{grid-template-columns:1fr}
  .servicios{grid-template-columns:1fr}
  .dos{grid-template-columns:1fr}
  .portada-stats{gap:26px}
}
html,body{overflow-x:hidden;max-width:100%}