/* ============================================================================
   NATALIA DÍAZ — portfolio profesional
   ----------------------------------------------------------------------------
   Misma paleta y tipografías que peakwavecreators.com, pero más sobrio:
   acá el protagonista es el contenido, no la marca.
   ========================================================================== */

:root{
  --verde:      #1B4D3E;
  --verde-osc:  #123529;
  --ciruela:    #7E4E8C;   /* acento del portfolio: mismo aire que el lila, con contraste */
  --ciruela-osc:#653D72;
  --lila:       #D9B8E0;
  --crema:      #EDE8E0;
  --crema-claro:#F7F4EF;
  --negro:      #0D0D0D;
  --gris:       #5C5C58;
  --gris-claro: #DCD8D1;
  --blanco:     #FFFFFF;

  --font-titulo: "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ancho:      980px;
  --radio:      14px;
  --radio-sm:   9px;
  --sombra:     0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.06);
  --trans:      .25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-texto);
  font-size:16.5px;
  line-height:1.65;
  color:var(--negro);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-titulo);
  font-weight:600; line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}

.container{
  width:100%; max-width:var(--ancho);
  margin-inline:auto; padding-inline:24px;
}

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--verde); color:#fff; padding:12px 20px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }
:focus-visible{ outline:3px solid var(--ciruela); outline-offset:3px; border-radius:4px; }

/* ============================ BOTONES =================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  font-size:15.5px; font-weight:600; line-height:1;
  text-decoration:none;
  border:2px solid transparent; border-radius:999px;
  cursor:pointer;
  transition:transform var(--trans), background var(--trans), color var(--trans), border-color var(--trans);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--ciruela); color:#fff; box-shadow:0 6px 18px rgba(126,78,140,.28); }
.btn-primary:hover{ background:var(--ciruela-osc); }
.btn-ghost{ background:transparent; color:var(--verde); border-color:var(--verde); }
.btn-ghost:hover{ background:var(--verde); color:#fff; }
.btn-sm{ padding:10px 18px; font-size:14.5px; }

/* ============================ HEADER ==================================== */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--trans);
}
.site-header.is-scrolled{ border-bottom-color:var(--gris-claro); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:70px;
}

.marca{ text-decoration:none; display:flex; flex-direction:column; gap:1px; }
.marca strong{
  font-family:var(--font-titulo); font-size:17px; font-weight:700;
  color:var(--verde); letter-spacing:-.02em;
}
.marca span{
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}

.nav{ display:flex; align-items:center; gap:24px; }
.nav ul{ display:flex; gap:22px; }
.nav a{ text-decoration:none; font-size:14.5px; font-weight:500; position:relative; padding-block:4px; }
.nav ul a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ciruela); transform:scaleX(0); transform-origin:left;
  transition:transform var(--trans);
}
.nav ul a:hover::after, .nav ul a.is-active::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; width:42px; height:42px; padding:10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--negro); border-radius:2px; transition:transform var(--trans), opacity var(--trans); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ============================ HERO ====================================== */

.hero{
  background:linear-gradient(180deg, var(--crema-claro), var(--crema));
  padding:clamp(44px,6vw,80px) 0 clamp(48px,7vw,84px);
}
.hero-inner{
  display:grid; grid-template-columns:1fr 240px;
  gap:48px; align-items:center;
}
.hero .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ciruela); margin:0 0 14px;
}
.hero h1{
  font-size:clamp(34px,5.2vw,54px);
  color:var(--verde); margin:0 0 16px;
}
.hero h1 em{ font-style:italic; color:var(--ciruela); }
.hero-lead{ font-size:clamp(16.5px,2vw,19px); color:var(--gris); max-width:560px; margin:0 0 26px; }

.hero-foto{
  width:220px; height:220px; border-radius:50%;
  overflow:hidden; background:var(--lila);
  box-shadow:0 12px 34px rgba(13,13,13,.14);
  justify-self:center;
}
.hero-foto img{ width:100%; height:100%; object-fit:cover; }

.hero-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }

.hero-datos{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  font-size:13.5px;
}
.hero-datos li{
  padding:6px 14px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(27,77,62,.14);
  border-radius:999px;
  color:var(--verde);
}

/* ============================ SECCIONES ================================= */

.section{ padding:clamp(42px,5.5vw,68px) 0; }
.section-cream{ background:var(--crema-claro); }
.section-green{ background:var(--verde); color:var(--crema-claro); }
.section-green h2{ color:#fff; }
.section-green .eyebrow{ color:var(--lila); }

.section-head{ max-width:660px; margin:0 0 clamp(24px,3vw,36px); }
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ciruela); margin:0 0 10px;
}
.section h2{ font-size:clamp(25px,3.6vw,34px); color:var(--verde); margin:0 0 12px; }
.section-lead{ font-size:16.5px; color:var(--gris); margin:0; }

/* ============================ SOBRE MÍ ================================== */

.sobre p{ font-size:17px; color:var(--gris); max-width:720px; }
.sobre p strong{ color:var(--negro); }

/* ============================ QUÉ HAGO ================================== */

.hago{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.hago article{
  padding:24px 22px;
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio);
  transition:transform var(--trans), box-shadow var(--trans);
}
.hago article:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.hago h3{ font-size:18px; color:var(--verde); margin-bottom:8px; }
.hago p{ font-size:15px; color:var(--gris); margin:0; }

/* ============================ EXPERIENCIA =============================== */

.timeline{ display:grid; gap:22px; max-width:800px; }
.trabajo{
  position:relative;
  padding:24px 26px 24px 30px;
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio);
}
.trabajo::before{
  content:""; position:absolute; left:0; top:24px; bottom:24px;
  width:3px; background:var(--ciruela);
  border-radius:0 3px 3px 0;
}
.trabajo-cab{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:8px 16px; margin-bottom:4px;
}
.trabajo h3{ font-size:19px; color:var(--verde); margin:0; }
.trabajo .fecha{
  font-size:13px; font-weight:600; letter-spacing:.06em;
  color:var(--ciruela); white-space:nowrap;
}
.trabajo .lugar{
  font-size:14px; color:var(--gris); margin:0 0 14px;
}
.trabajo ul{ display:grid; gap:8px; }
.trabajo li{
  position:relative; padding-left:20px;
  font-size:15.5px; color:var(--gris); line-height:1.55;
}
.trabajo li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--lila);
}
.trabajo li strong{ color:var(--negro); }

/* ============================ RESULTADOS ================================ */

.cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;
}
.cifra{
  padding:26px 24px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radio);
}
.cifra strong{
  display:block;
  font-family:var(--font-titulo);
  font-size:clamp(30px,4.4vw,40px); font-weight:700; line-height:1;
  color:var(--ciruela); margin-bottom:8px;
}
.cifra span{ display:block; font-size:14.5px; color:rgba(255,255,255,.82); line-height:1.5; }
.cifra em{ display:block; font-style:normal; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lila); margin-top:10px; }

/* ============================ HERRAMIENTAS ============================== */

.herramientas{ display:grid; gap:22px; }
.grupo h3{
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ciruela); margin-bottom:10px;
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  padding:8px 16px;
  font-size:14.5px; font-weight:500; color:var(--verde);
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:999px;
}

/* ============================ CERTIFICACIONES =========================== */

.certis{ display:grid; gap:10px; max-width:780px; }
.certi{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:6px 18px;
  padding:15px 20px;
  background:var(--blanco);
  border:1px solid var(--gris-claro);
  border-radius:var(--radio-sm);
}
.certi b{ font-family:var(--font-titulo); font-size:16px; font-weight:600; color:var(--verde); }
.certi span{ font-size:14px; color:var(--gris); }
.certi.cursando b::after{
  content:"En curso";
  display:inline-block; margin-left:10px;
  padding:2px 9px;
  font-family:var(--font-texto); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--verde); background:var(--lila);
  border-radius:999px; vertical-align:middle;
}

/* ============================ CONTACTO ================================== */

.contacto{ text-align:center; }
.contacto h2{ color:#fff; }
.contacto p{ color:rgba(255,255,255,.82); max-width:520px; margin:0 auto 26px; font-size:17px; }
.contacto-acciones{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:30px; }
.contacto .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.contacto .btn-ghost:hover{ background:#fff; color:var(--verde); }
.contacto-datos{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center;
  font-size:15px; color:rgba(255,255,255,.72);
}
.contacto-datos a{ text-decoration:none; }
.contacto-datos a:hover{ color:var(--ciruela); }

/* ============================ FOOTER ==================================== */

.site-footer{
  background:var(--verde-osc); color:rgba(255,255,255,.5);
  padding:22px 0; font-size:13.5px;
}
.footer-inner{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:var(--ciruela); }

/* ============================ ANIMACIÓN ================================= */

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================ RESPONSIVE ================================ */

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:70px 0 auto;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--blanco);
    border-bottom:1px solid var(--gris-claro);
    padding:6px 24px 24px;
    box-shadow:0 16px 30px rgba(13,13,13,.08);
    max-height:calc(100dvh - 70px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity var(--trans), transform var(--trans), visibility var(--trans);
  }
  .nav.is-open{ opacity:1; transform:none; visibility:visible; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav ul li{ border-bottom:1px solid var(--gris-claro); }
  .nav ul a{ display:block; padding:14px 0; font-size:16px; }
  .nav ul a::after{ display:none; }

  .hero-inner{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .hero-foto{ order:-1; width:170px; height:170px; }
  .hero-lead{ margin-inline:auto; }
  .hero-acciones, .hero-datos{ justify-content:center; }
}

@media (max-width:520px){
  .container{ padding-inline:20px; }
  .hero-acciones .btn{ width:100%; }
  .trabajo{ padding:20px 20px 20px 24px; }
}

/* ============================ TRABAJOS ================================== */
/* Grilla pareja: todas las fotos al mismo alto para que se lea ordenado.
   Para cambiar una imagen basta con reemplazar el archivo pf-N.jpg. */

.galeria{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.galeria figure{
  position:relative; margin:0;
  aspect-ratio:1/1;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--crema);
}
.galeria img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.galeria figure:hover img{ transform:scale(1.05); }
.galeria figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 11px;
  font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(13,13,13,.78));
}

.galeria-nota{
  margin:20px 0 0;
  font-size:15px; color:var(--gris);
}
.galeria-nota a{ color:var(--ciruela); font-weight:600; }

@media (max-width:820px){ .galeria{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .galeria{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ============ EL ACENTO SOBRE FONDO VERDE ==============================
   El violeta tiene buen contraste sobre blanco y crema, pero sobre el verde
   oscuro queda apagado. En esos bloques el acento pasa a ser el lila, que
   es su versión clara y sí se despega del fondo. */

.cifra strong{ color:var(--lila); }

.contacto .btn-primary{
  background:var(--lila);
  color:var(--verde-osc);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.contacto .btn-primary:hover{ background:#E7D0EC; color:var(--verde-osc); }

.contacto-datos a:hover{ color:var(--lila); }
.site-footer a:hover{ color:var(--lila); }