/* ==========================================================================
   catrielpardo.com — hoja de estilos principal
   Orden: 1) variables  2) base  3) layout  4) componentes  5) secciones
          6) utilidades  7) responsive  8) accesibilidad / impresión
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Variables de diseño
   -------------------------------------------------------------------------- */
:root{
  /* Color */
  --bg:#15123a;
  --bg2:#1d1949;
  --bg3:#221a5c;
  --ink:#f4f2ff;
  --ink-soft:#d8d4f5;
  --mute:#a9a4d6;
  --pink:#ff6b9a;
  --cyan:#5ee6ff;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.22);

  /* Forma y ritmo */
  --r:22px;
  --r-lg:30px;
  --r-pill:99px;
  --pad-x:4%;
  --section-y:110px;

  /* Tipografía */
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}

/* --------------------------------------------------------------------------
   2) Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font:400 1.06rem/1.65 var(--font-body);
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display);line-height:1.02;letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* --------------------------------------------------------------------------
   3) Layout
   -------------------------------------------------------------------------- */
.wrap{width:min(1120px,92%);margin:auto}
section{padding:var(--section-y) 0}

/* Barra de navegación */
nav{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--pad-x);
  backdrop-filter:blur(14px);
  background:rgba(21,18,58,.6);
}
nav b{font-family:var(--font-display);font-size:1.2rem}
nav div{display:flex;gap:26px}
nav a{text-decoration:none;color:var(--mute);font-size:.95rem}
nav a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   4) Componentes
   -------------------------------------------------------------------------- */

/* Botones */
.btn{
  display:inline-block;padding:15px 28px;border-radius:var(--r-pill);
  font-weight:500;text-decoration:none;
  border:1.5px solid var(--line);
  transition:transform .2s,background .2s,border-color .2s;
}
.btn:hover{transform:translateY(-3px)}
.btn.p{background:var(--pink);color:#1a0b1c;border-color:var(--pink);font-weight:700}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Tarjeta genérica */
.card{
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg2);
  border:1px solid var(--line);display:flex;flex-direction:column;
  transform-style:preserve-3d;
}

/* Tarjetas de datos cortos (sección "Datos") */
.stat{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  background:rgba(29,25,73,.55);
}
.stat b{
  display:block;
  font:700 1.28rem/1.15 var(--font-display);
  color:var(--cyan);
  letter-spacing:-.01em;
}
.stat small{display:block;margin-top:6px;color:var(--mute);font-size:.85rem;line-height:1.45}

/* --------------------------------------------------------------------------
   5) Secciones
   -------------------------------------------------------------------------- */

/* --- Portada (hero) --- */
#hero{min-height:100vh;display:grid;align-items:center;position:relative;padding-top:120px}
#net{position:absolute;inset:0;width:100%;height:100%}
#hero .wrap{position:relative;pointer-events:none}
#hero a,#hero button{pointer-events:auto}
#hero h1{font-size:clamp(3.6rem,13vw,10.5rem);font-weight:800}
#hero h1 span{
  display:block;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;
}
.role{margin-top:26px;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--mute);min-height:2.2em}
.role em{font-style:normal;color:var(--ink);border-right:3px solid var(--pink);padding-right:4px}

/* --- Sobre mí --- */
.about p{color:var(--ink-soft);max-width:70ch}
.about p+p{margin-top:16px}

/* --- Marquesina de tecnologías --- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:var(--bg2)}
.track{
  display:flex;gap:46px;width:max-content;
  animation:m 38s linear infinite;
  font:700 clamp(1.4rem,3vw,2.2rem) var(--font-display);
}
.track span:nth-child(even){color:var(--pink)}
@keyframes m{to{transform:translateX(-50%)}}

/* --- Proyectos --- */
.lead{color:var(--mute);max-width:56ch}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:40px}
.card .in{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:1.7rem}
.card p{color:#d0ccf0;font-size:1rem}

/* Portada con captura real del sitio */
.cover{
  height:200px;position:relative;overflow:hidden;
  background:var(--bg3);
}
.cover img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
/* Destello tenue que recorre la captura */
.cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.02) 44%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.02) 56%,
    rgba(255,255,255,0) 62%);
  transform:translateX(-130%);
  transition:transform .9s ease;
}
/* Velo inferior para integrar la captura con la tarjeta */
.cover::before{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,18,58,0),rgba(21,18,58,.55));
}
.card:hover .cover::after,
.card:focus-within .cover::after{transform:translateX(130%)}
.card:hover .cover img,
.card:focus-within .cover img{transform:scale(1.035)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.tags i{font-style:normal;font-size:.85rem;padding:4px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.09)}
.card a.go{margin-top:8px;font-weight:700;color:var(--cyan);text-decoration:none}
.card a.go:hover{text-decoration:underline}

/* --- Datos (después de proyectos, en tono discreto) --- */
.section-title-sm{font-size:1.1rem;color:var(--mute);font-weight:400;margin-bottom:18px}
#datos{padding-top:26px;padding-bottom:6px;margin-bottom:-52px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:660px}

/* --- Formación --- */
.edu{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.edu div{border-left:3px solid var(--pink);padding:4px 0 4px 20px}
.edu h3{font-size:1.25rem;margin-bottom:6px}
.edu p{color:var(--mute);font-size:.98rem}

/* --- Contacto --- */
#contacto{background:linear-gradient(180deg,var(--bg),var(--bg3))}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.ct>div>p{color:var(--ink-soft);max-width:44ch}
.links{margin-top:26px;display:grid;gap:12px}
.links a{
  text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:10px;
  transition:color .2s,border-color .2s;
}
.links a:hover{color:var(--pink);border-color:var(--line-strong)}

form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:500;font-size:.95rem}
input,textarea{
  font:inherit;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
}
input:focus,textarea:focus{border-color:var(--cyan);outline:none}
textarea{min-height:130px;resize:vertical}
button{cursor:pointer;font:700 1.05rem var(--font-body);border:0}

/* Alternativas de envío: aparecen si el navegador no abrió ningún cliente de
   correo (pasa seguido en computadoras que solo usan webmail). */
.send-alt{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  background:rgba(29,25,73,.55);
}
.send-alt[hidden]{display:none}
.send-alt-t{font-weight:500;font-size:.95rem;margin:0 0 12px}
.send-alt-actions{display:flex;flex-wrap:wrap;gap:10px}
.send-alt-actions .btn{padding:11px 20px;font-size:.95rem}
.send-alt-mail{margin:12px 0 0;color:var(--mute);font-size:.9rem}
.send-alt-mail a{color:var(--cyan);font-weight:600}

footer{padding:34px 0;text-align:center;color:var(--mute);font-size:.92rem}

/* --------------------------------------------------------------------------
   6) Utilidades
   -------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.on{opacity:1;transform:none}
.vh{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;
}
.skip{
  position:absolute;left:-999px;top:0;z-index:40;
  background:var(--pink);color:#1a0b1c;font-weight:700;
  padding:12px 18px;border-radius:0 0 12px 0;text-decoration:none;
}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   7) Responsive
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .ct{grid-template-columns:1fr;gap:40px}
}
@media(max-width:820px){
  :root{--section-y:80px}
  nav div a:not(:last-child){display:none}
  .grid,.edu{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;max-width:100%}
  #datos{padding-top:14px;padding-bottom:4px;margin-bottom:-40px}
}

/* --------------------------------------------------------------------------
   8) Accesibilidad y estados
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .cover::after{display:none}
}

@media print{
  nav,.marq,#net,.cta,form{display:none}
  body{background:#fff;color:#000}
  .rv{opacity:1;transform:none}
}