@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');

/* ══════════ BASE ══════════ */
:root{
  --cream: #fdf8f2;
  --cream-deep: #f6ead9;
  --paper: #fffaf3;
  --ink: #3d2b1f;
  --ink-soft: #7a6553;
  --rose: #e39a9a;
  --rose-deep: #d97f7f;
  --gold: #d9a441;
  --gold-deep: #c1872c;
  --brown: #a9744f;
  --paw: #f0a8b2;
  --border: rgba(61,43,31,.14);
  --shadow-soft: 0 10px 26px rgba(120,72,45,.13);
  --shadow-card: 0 14px 32px rgba(120,72,45,.18);
  --radius: 18px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Quicksand', 'Segoe UI', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

section{
  position:relative;
  padding:110px 8vw;
  max-width:1200px;
  margin:0 auto;
}

.sec-label{
  font-family:'Caveat', cursive;
  font-size:1.5rem;
  color:var(--rose-deep);
  margin-bottom:6px;
}

.sec-title-big{
  font-size:clamp(1.9rem, 4vw, 3.1rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:56px;
  color:var(--ink);
}
.sec-title-big em{
  font-style:normal;
  font-family:'Caveat', cursive;
  font-weight:700;
  color:var(--rose-deep);
}

/* ══════════ CURSOR PATITA DE GATO ══════════ */
@media (hover:hover) and (pointer:fine){
  body.cat-cursor, body.cat-cursor a, body.cat-cursor button, body.cat-cursor summary{ cursor:none; }
}

#cursor, #cursor-trail{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  will-change:transform;
  opacity:0;
}

#cursor{
  width:26px; height:26px;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease, transform .05s linear;
}
#cursor::before{
  /* almohadilla principal */
  content:'';
  position:absolute;
  left:5px; top:9px;
  width:16px; height:14px;
  background:var(--paw);
  border-radius:50% 50% 45% 45%;
  box-shadow:0 1px 3px rgba(120,72,45,.25);
}
#cursor .toe{
  position:absolute;
  width:7px; height:8px;
  background:var(--paw);
  border-radius:50%;
  box-shadow:0 1px 2px rgba(120,72,45,.2);
}
#cursor .toe:nth-child(1){ left:1px; top:0px; transform:rotate(-10deg); }
#cursor .toe:nth-child(2){ left:9px; top:-3px; }
#cursor .toe:nth-child(3){ left:17px; top:0px; transform:rotate(10deg); }

#cursor-trail{
  width:14px; height:14px;
  background:var(--paw);
  border-radius:50% 50% 45% 45%;
  transform:translate(-50%,-50%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
  opacity:0;
}

/* ══════════ CANVAS DE FONDO ══════════ */
#bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 10%, rgba(227,154,154,.16), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(217,164,65,.14), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(169,116,79,.10), transparent 55%),
    var(--cream);
}

/* ══════════ NAV ══════════ */
nav{
  position:sticky;
  top:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 6vw;
  background:rgba(253,248,242,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

.nav-logo{
  font-family:'Caveat', cursive;
  font-size:1.6rem;
  font-weight:700;
  color:var(--rose-deep);
}

.nav-links{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.nav-links a{
  font-size:.88rem;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  color:var(--ink-soft);
  transition:background .2s ease, color .2s ease;
}
.nav-links a:hover{
  background:var(--cream-deep);
  color:var(--rose-deep);
}

/* ══════════ INICIO ══════════ */
#inicio{
  min-height:92vh;
  display:flex;
  align-items:center;
  padding-top:60px;
}

.deco{
  position:absolute;
  opacity:.85;
  pointer-events:none;
}

.sticky{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px 18px;
  font-family:'Caveat', cursive;
  font-size:1.15rem;
  color:var(--ink-soft);
  box-shadow:var(--shadow-soft);
  max-width:180px;
}
.sticky::before{
  content:'';
  position:absolute;
  top:-8px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:34px; height:14px;
  background:rgba(240,168,178,.55);
  border-radius:2px;
}
.sticky-gold{ background:#fdf3de; }
.sticky-gold::before{ background:rgba(217,164,65,.5); }

.hero-wrap{
  max-width:720px;
  position:relative;
  z-index:2;
}

.eyebrow{
  font-family:'Caveat', cursive;
  font-size:1.4rem;
  color:var(--gold-deep);
  margin-bottom:10px;
}

.hero-name{
  font-size:clamp(2.8rem, 8vw, 5.5rem);
  font-weight:700;
  line-height:1;
  color:var(--ink);
  margin-bottom:18px;
}

.hero-lines{
  font-size:1.15rem;
  color:var(--ink-soft);
  margin-bottom:34px;
}
.hero-lines span{ display:block; }

.btn-cta{
  display:inline-block;
  padding:14px 32px;
  background:var(--rose);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  box-shadow:var(--shadow-card);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease;
}
.btn-cta:hover{
  transform:translateY(-3px);
  background:var(--rose-deep);
  box-shadow:0 18px 34px rgba(120,72,45,.22);
}

/* ══════════ SOBRE MI ══════════ */
.sobre-layout{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:center;
}

.polaroid{
  background:var(--paper);
  padding:14px 14px 44px 14px;
  border-radius:8px;
  box-shadow:var(--shadow-card);
  display:inline-block;
  width:100%;
  max-width:340px;
}
.polaroid img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:2px;
  background:var(--cream-deep);
}
.polaroid-caption{
  font-family:'Caveat', cursive;
  font-size:1.1rem;
  text-align:center;
  color:var(--ink-soft);
  margin-top:8px;
  min-height:1.4rem;
}

.tilt-left{ transform:rotate(var(--r, -3deg)); }
.tilt-right{ transform:rotate(var(--r, 3deg)); }
.tilt-left:hover, .tilt-right:hover{ transform:rotate(0deg) scale(1.03); }
.polaroid, .pcard, .av-item, .foto-item{ transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }

.sobre-titulo{
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin-bottom:20px;
  color:var(--ink);
}
.sobre-titulo br{ line-height:1.1; }

.sobre-texto p{
  color:var(--ink-soft);
  font-size:1.08rem;
  margin-bottom:16px;
  max-width:560px;
}

.tags-wrap{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.tags-wrap span{
  padding:8px 18px;
  border-radius:999px;
  background:var(--cream-deep);
  border:1px solid var(--border);
  font-weight:600;
  font-size:.9rem;
  color:var(--brown);
}

/* ══════════ REVOLUTION HACK ══════════ */
#revolution{ padding-top:0; padding-bottom:0; }

.rev-card{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:0;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}

.rev-img{
  aspect-ratio:4/3;
  background:var(--cream-deep);
  overflow:hidden;
}
.rev-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.rev-info{
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rev-tag{
  font-family:'Caveat', cursive;
  font-size:1.2rem;
  color:var(--gold-deep);
  margin-bottom:8px;
}

.rev-titulo{
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom:14px;
}

.rev-desc{
  color:var(--ink-soft);
  margin-bottom:18px;
}

.rev-link{
  font-weight:700;
  color:var(--rose-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.rev-card:hover .rev-link{ text-decoration:underline; }
.rev-card:hover{ box-shadow:0 20px 40px rgba(120,72,45,.22); }

/* ══════════ HABILIDADES ══════════ */
.skills-rows{
  display:grid;
  gap:26px;
}

.skill-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:24px;
  align-items:start;
  padding:26px 0;
  border-top:1px solid var(--border);
}
.skill-row:first-child{ border-top:none; }

.skill-number{
  font-family:'Caveat', cursive;
  font-size:2.2rem;
  color:var(--rose);
  font-weight:700;
}

.skill-body h3{
  font-size:1.4rem;
  margin-bottom:8px;
  color:var(--ink);
}
.skill-body p{
  color:var(--ink-soft);
}

/* mini-galeria de PCB / vision insertada entre skills */
.skills-rows > .pcard{
  width:200px;
  justify-self:start;
  margin-left:104px;
}
@media (max-width:640px){
  .skills-rows > .pcard{ margin-left:0; width:170px; }
}

/* ══════════ PCARD / POLAROID WALL (logros + proyectos) ══════════ */
.polaroids-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:38px;
}

.pcard{
  background:var(--paper);
  padding:12px 12px 20px 12px;
  border-radius:8px;
  box-shadow:var(--shadow-soft);
  display:block;
}
.pcard:hover{
  box-shadow:var(--shadow-card);
}

.pcard-img{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:2px;
  background:var(--cream-deep);
}
.pcard-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pcard-caption{
  font-size:.95rem;
  font-weight:600;
  text-align:center;
  margin-top:12px;
  color:var(--ink);
}
.pcard-caption small{
  display:block;
  font-weight:500;
  color:var(--ink-soft);
  margin-top:2px;
}

.pcard-empty{
  position:relative;
  aspect-ratio:4/5;
}
.pcard-empty::after{
  content:'🐾 foto pendiente';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:.85rem;
  color:var(--ink-soft);
  background:repeating-linear-gradient(135deg, var(--cream-deep), var(--cream-deep) 10px, var(--paper) 10px, var(--paper) 20px);
  border-radius:2px;
}

/* ══════════ AVENTURAS ══════════ */
.aventuras-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:28px;
}

.av-item{
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border);
}
.av-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card);
}

.av-img{
  aspect-ratio:4/3;
  background:var(--cream-deep);
  overflow:hidden;
}
.av-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.av-img-empty::after{
  content:'🐾';
  font-size:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  color:var(--rose);
}

.av-info{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.av-info strong{ font-size:1.02rem; }
.av-info span{ font-size:.85rem; color:var(--ink-soft); }

/* ══════════ ME GUSTA ══════════ */
.gusta-accordion{
  display:grid;
  gap:12px;
  margin-bottom:56px;
}

.gusta{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
  padding:6px 22px;
  box-shadow:var(--shadow-soft);
}
.gusta summary{
  cursor:pointer;
  list-style:none;
  padding:16px 0;
  font-weight:700;
  font-size:1.08rem;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.gusta summary::-webkit-details-marker{ display:none; }
.gusta summary::after{
  content:'🐾';
  font-size:.95rem;
  transition:transform .3s ease;
}
.gusta[open] summary::after{ transform:rotate(90deg); }
.gusta p{
  color:var(--ink-soft);
  padding-bottom:18px;
}

.muro{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
}

.muro-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px;
  box-shadow:var(--shadow-soft);
}
.ml{
  font-family:'Caveat', cursive;
  font-size:1.2rem;
  color:var(--rose-deep);
  margin-bottom:6px;
}
.mv{ color:var(--ink-soft); font-size:.95rem; }

/* ══════════ FOTOS ══════════ */
.fotos-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:26px;
}

.foto-item{
  background:var(--paper);
  padding:10px 10px 10px;
  border-radius:6px;
  box-shadow:var(--shadow-soft);
}
.foto-item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:2px;
}

/* ══════════ CONTACTO ══════════ */
#contacto{
  display:flex;
  justify-content:center;
}

.contacto-box{
  text-align:center;
  max-width:560px;
}
.contacto-box h2{
  font-size:clamp(2rem, 4vw, 2.7rem);
  margin-bottom:14px;
}
.contacto-box p{ color:var(--ink-soft); margin-bottom:30px; }

.contacto-btns{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.contacto-btns a{
  padding:12px 24px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--border);
  font-weight:600;
  box-shadow:var(--shadow-soft);
  transition:background .2s ease, transform .2s ease;
}
.contacto-btns a:hover{
  background:var(--rose);
  color:#fff;
  transform:translateY(-3px);
}

/* ══════════ FOOTER ══════════ */
footer{
  text-align:center;
  padding:40px 6vw 60px;
  font-family:'Caveat', cursive;
  font-size:1.2rem;
  color:var(--ink-soft);
}
footer em{ color:var(--rose-deep); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:860px){
  section{ padding:80px 6vw; }
  .sobre-layout, .rev-card{ grid-template-columns:1fr; }
  .rev-img{ aspect-ratio:16/9; }
  .skill-row{ grid-template-columns:50px 1fr; gap:16px; }
  nav{ justify-content:center; text-align:center; }
}

@media (max-width:500px){
  .nav-links a{ padding:6px 10px; font-size:.8rem; }
  .sticky{ display:none; }
  .polaroids-wall, .aventuras-grid, .fotos-wall{ gap:20px; }
}