/* ===== Cristina Martínez — Portfolio · Elegant Light Theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --pink-pale:   #FDEEF8;
  --pink-light:  #F7C9E9;
  --pink-mid:    #F285D5;
  --magenta:     #EA1FC4;
  --plum:        #521C59;
  --plum-deep:   #33113A;
  --ink:         #2A1830;
  --ink-soft:    #6B5A70;
  --paper:       #FFFFFF;
  --paper-soft:  #FDF6FB;
  --line:        rgba(82,28,89,0.12);
  --shadow:      0 12px 40px rgba(82,28,89,0.10);
  --radius:      1.1rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;margin:0;color:var(--plum-deep);}
p{line-height:1.7;color:var(--ink-soft);}
a{color:inherit;}
img{max-width:100%;display:block;}
.section-inner{max-width:1120px;margin:0 auto;padding:0 1.75rem;}
section{padding:5.5rem 0;}
section:nth-of-type(even){background:var(--paper-soft);}

/* ---- pill / eyebrow labels (inspired by reference CV) ---- */
.pill-label{
  display:inline-block;
  padding:.45rem 1.3rem;
  border-radius:99px;
  background:var(--pink-mid);
  color:#fff;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.section-title{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;margin-bottom:.85rem;}
.section-desc{max-width:640px;font-size:1rem;margin-bottom:2.5rem;}

/* ---- NAV ---- */
nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
  padding:.95rem 2.25rem;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-logo{font-family:'Poppins',sans-serif;font-weight:700;color:var(--plum-deep);font-size:1.05rem;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:1.45rem;flex-wrap:nowrap;}
.nav-links a{
  text-decoration:none;color:var(--ink-soft);
  font-size:.88rem;font-weight:500;letter-spacing:.01em;
  white-space:nowrap;transition:color .2s;
}
.nav-links a:hover{color:var(--magenta);}

/* hamburger — hidden on wide screens */
.nav-toggle{
  display:none;
  border:1px solid var(--line);background:transparent;
  color:var(--plum-deep);font-size:1.15rem;line-height:1;
  padding:.45rem .7rem;border-radius:.6rem;cursor:pointer;transition:.2s;
}
.nav-toggle:hover{background:var(--pink-pale);border-color:var(--pink-mid);}

@media(max-width:1100px){
  nav{padding:.9rem 1.4rem;}
  .nav-toggle{display:block;}
  .nav-links{
    display:none;
    position:absolute;top:calc(100% + .5rem);right:1.4rem;left:1.4rem;
    flex-direction:column;align-items:stretch;gap:.25rem;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 18px 45px rgba(82,28,89,.16);
    padding:.8rem;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.65rem .8rem;border-radius:.55rem;font-size:.95rem;}
  .nav-links a:hover{background:var(--pink-pale);}
  .nav-links .lang-btn{margin-top:.45rem;align-self:flex-start;}
}
.lang-btn{
  border:1.5px solid var(--pink-mid);background:transparent;color:var(--plum);
  padding:.4rem 1rem;border-radius:99px;font-weight:700;font-size:.8rem;cursor:pointer;transition:.2s;
}
.lang-btn:hover{background:var(--pink-mid);color:#fff;}

/* ---- HERO / INTRO ---- */
.hero{
  background:linear-gradient(160deg,var(--pink-pale) 0%,var(--pink-light) 55%,#fff 100%);
  padding:5rem 1.75rem 5.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-blob{
  position:absolute;border-radius:50%;
  background:var(--magenta);opacity:.12;filter:blur(10px);
}
.hero-inner{max-width:760px;margin:0 auto;position:relative;}
.hero-photo{
  width:150px;height:150px;border-radius:50%;object-fit:cover;
  margin:0 auto 1.5rem;
  border:5px solid #fff;
  box-shadow:0 0 0 3px var(--pink-mid), var(--shadow);
}
.hero h1{font-size:clamp(2.1rem,4.5vw,3rem);font-weight:800;margin-bottom:.6rem;}
.hero-role{
  display:inline-block;background:var(--plum-deep);color:#fff;
  padding:.5rem 1.3rem;border-radius:99px;font-size:.82rem;letter-spacing:.05em;
  font-weight:600;margin-bottom:1.4rem;
}
.hero-intro{font-size:1.05rem;max-width:600px;margin:0 auto 1.6rem;color:var(--ink-soft);}
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem;}
.tag{
  padding:.35rem .85rem;border-radius:99px;font-size:.75rem;font-weight:600;
  background:#fff;border:1px solid var(--pink-mid);color:var(--plum);
}
.tag.solid{background:var(--pink-mid);color:#fff;border-color:var(--pink-mid);}
.hero-cta{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;}
.btn-primary{
  background:var(--magenta);color:#fff;padding:.8rem 1.7rem;border-radius:99px;
  text-decoration:none;font-weight:600;font-size:.92rem;box-shadow:0 8px 22px rgba(234,31,196,.32);
  transition:.2s;display:inline-block;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(234,31,196,.4);}
.btn-outline{
  border:1.5px solid var(--plum);color:var(--plum);padding:.8rem 1.7rem;border-radius:99px;
  text-decoration:none;font-weight:600;font-size:.92rem;transition:.2s;display:inline-block;
}
.btn-outline:hover{background:var(--plum);color:#fff;}
.hero-social{display:flex;justify-content:center;gap:1rem;margin-top:2rem;}
.hero-social a{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--pink-mid);
  display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--plum);
  font-size:.95rem;transition:.2s;
}
.hero-social a:hover{background:var(--pink-mid);color:#fff;}

/* ---- ABOUT ---- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start;}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;}}
.edu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.edu-list li{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--pink-mid);
  border-radius:.7rem;padding:1rem 1.2rem;box-shadow:var(--shadow);
}
.edu-list strong{display:block;color:var(--plum-deep);font-size:.95rem;margin-bottom:.25rem;}
.edu-list span{font-size:.83rem;color:var(--ink-soft);}

/* ---- WORK / project section labels ---- */
.project-section-label{display:flex;align-items:center;gap:1rem;margin:3.2rem 0 1.6rem;}
.project-section-label:first-of-type{margin-top:0;}
.psl-line{flex:1;height:1px;background:var(--line);}
.psl-text{font-size:.78rem;letter-spacing:.1em;font-weight:700;color:var(--magenta);white-space:nowrap;}

/* Althea video cover */
.althea-cover{max-width:640px;margin:0 auto 2rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#000;}
.althea-cover video{width:100%;display:block;}
.althea-cover-caption{text-align:center;font-size:.8rem;color:var(--ink-soft);margin-top:.6rem;}

.althea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.8rem;}
.althea-img{border-radius:.85rem;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:1/1;background:var(--paper-soft);}
.althea-img img{width:100%;height:100%;object-fit:cover;}

.althea-cta{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem;text-align:center;box-shadow:var(--shadow);
}
.card-tool{
  display:inline-block;padding:.3rem .8rem;border-radius:99px;font-size:.72rem;font-weight:700;
  background:var(--pink-pale);color:var(--plum);border:1px solid var(--pink-mid);margin-bottom:.9rem;
}

/* cards grid (videos) */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-bottom:1rem;}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(82,28,89,.16);}
.card-thumb{position:relative;height:150px;background:linear-gradient(135deg,var(--plum-deep),var(--plum));}
.video-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;}
.video-platform{font-size:.68rem;letter-spacing:.08em;color:rgba(255,255,255,.75);font-weight:700;}
.play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.play-circle{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--plum);
  display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.card-body{padding:1.2rem 1.3rem 1.4rem;}
.card-title{font-family:'Poppins',sans-serif;font-weight:700;color:var(--plum-deep);font-size:1rem;margin:.6rem 0 .4rem;}
.card-desc{font-size:.86rem;color:var(--ink-soft);margin-bottom:.8rem;}
.card-link{font-size:.85rem;font-weight:700;color:var(--magenta);text-decoration:none;}

/* ---- WEB PROJECTS ---- */
.webproj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.webproj-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;
}
.webproj-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(82,28,89,.16);}
.webproj-bar{height:8px;background:linear-gradient(90deg,var(--magenta),var(--pink-mid));}
.webproj-shot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;border-bottom:1px solid var(--line);background:var(--paper-soft);}
.webproj-body{padding:1.6rem;}
.webproj-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem;}
.webproj-logo{width:42px;height:42px;border-radius:.6rem;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.webproj-logo img{width:100%;height:100%;object-fit:contain;padding:3px;}
.webproj-name{font-weight:700;color:var(--plum-deep);font-size:1rem;}
.webproj-sub{font-size:.76rem;color:var(--ink-soft);}
.webproj-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.2rem;}
.webproj-tag{padding:.22rem .65rem;border-radius:99px;font-size:.68rem;font-weight:600;background:var(--pink-pale);color:var(--plum);border:1px solid var(--pink-light);}
.webproj-link{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:.6rem;
  background:var(--plum-deep);color:#fff;font-size:.83rem;font-weight:600;text-decoration:none;transition:.2s;
}
.webproj-link:hover{background:var(--magenta);}
.tecnosocial-cta{
  margin-top:2.5rem;text-align:center;padding:2.2rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.tecnosocial-cta img{height:52px;margin:0 auto 1rem;object-fit:contain;}

/* ---- SKILLS ---- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;}
.skill-cat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:var(--shadow);}
.skill-cat h4{font-size:.92rem;color:var(--plum-deep);margin-bottom:.9rem;}
.skill-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
.skill-tag{padding:.3rem .8rem;border-radius:99px;font-size:.75rem;font-weight:600;background:var(--pink-pale);color:var(--plum);border:1px solid var(--pink-light);}

/* ---- CREDENTIALS ---- */
.certs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.1rem;}
.cert-card{cursor:pointer;text-align:center;}
.cert-card img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.7rem;border:1px solid var(--line);
  box-shadow:var(--shadow);margin-bottom:.55rem;transition:transform .2s;
}
.cert-card:hover img{transform:scale(1.03);}
.cert-name{font-size:.76rem;color:var(--ink-soft);font-weight:500;}

/* ---- CONTACT ---- */
#contact .section-inner{text-align:center;}
#contact .section-desc{margin:0 auto 2.2rem;}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;}
.contact-link{
  display:flex;align-items:center;gap:.5rem;padding:.75rem 1.4rem;border-radius:99px;
  background:#fff;border:1.5px solid var(--pink-mid);color:var(--plum);text-decoration:none;
  font-weight:600;font-size:.88rem;transition:.2s;
}
.contact-link:hover{background:var(--pink-mid);color:#fff;}

footer{padding:2.2rem 1.75rem;text-align:center;background:var(--plum-deep);color:#f6d9ef;font-size:.82rem;}
footer a{color:#fff;}

/* ---- MODAL ---- */
.modal{
  position:fixed;inset:0;background:rgba(42,24,48,.88);display:none;align-items:center;justify-content:center;
  z-index:200;padding:2rem;
}
.modal.open{display:flex;}
.modal-img{max-width:90vw;max-height:88vh;border-radius:.6rem;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-close{
  position:absolute;top:1.5rem;right:1.8rem;width:42px;height:42px;border-radius:50%;
  background:#fff;color:var(--plum);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.2rem;
}

/* ---- fade-in ---- */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.fade-in.visible{opacity:1;transform:none;}

@media(max-width:640px){
  section{padding:3.5rem 0;}
  .hero{padding:3.5rem 1.25rem 4rem;}
}

/* ===================== UX & RESEARCH ===================== */
.ux-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.6rem;
  margin-top:2.5rem;
}
.ux-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  text-decoration:none;
}
.ux-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(82,28,89,.17);}
.ux-thumb{
  height:190px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--pink-pale),var(--pink-light));
  position:relative;
}
.ux-thumb img{width:100%;height:100%;object-fit:cover;}
.ux-badge{
  position:absolute;top:.85rem;left:.85rem;
  background:rgba(255,255,255,.94);
  color:var(--plum-deep);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;
  padding:.35rem .8rem;border-radius:2rem;text-transform:uppercase;
}
.ux-body{padding:1.4rem;display:flex;flex-direction:column;flex:1;}
.ux-role{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;
  color:var(--magenta);text-transform:uppercase;margin-bottom:.5rem;
}
.ux-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.06rem;color:var(--plum-deep);margin-bottom:.5rem;line-height:1.35;}
.ux-desc{font-size:.87rem;color:var(--ink-soft);line-height:1.6;flex:1;}
.ux-methods{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 1rem;}
.ux-method{
  font-size:.68rem;font-weight:600;
  background:var(--pink-pale);color:var(--plum);
  padding:.3rem .7rem;border-radius:2rem;border:1px solid var(--line);
}
.ux-link{font-size:.85rem;font-weight:700;color:var(--magenta);}

/* ===================== CASE STUDY PAGES ===================== */
.case-hero{
  background:linear-gradient(135deg,var(--pink-pale),var(--paper-soft));
  padding:7rem 0 3.5rem;
  border-bottom:1px solid var(--line);
}
.case-back{
  display:inline-block;font-size:.85rem;font-weight:600;
  color:var(--magenta);text-decoration:none;margin-bottom:1.4rem;
}
.case-back:hover{text-decoration:underline;}
.case-hero h1{font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.18;margin-bottom:.9rem;max-width:850px;}
.case-sub{font-size:1.02rem;color:var(--ink-soft);max-width:760px;line-height:1.7;}
.case-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.4rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line);
}
.case-meta div span{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--magenta);margin-bottom:.35rem;
}
.case-meta div strong{font-size:.92rem;color:var(--plum-deep);font-weight:600;font-family:'Inter',sans-serif;}
.case-body{max-width:820px;margin:0 auto;padding:0 1.75rem;}
.case-body h2{font-size:1.5rem;margin:3rem 0 1rem;}
.case-body h3{font-size:1.1rem;margin:2rem 0 .7rem;color:var(--plum);}
.case-body p{margin:0 0 1.1rem;font-size:.98rem;}
.case-body ul{color:var(--ink-soft);line-height:1.8;font-size:.96rem;padding-left:1.2rem;}
.case-body li{margin-bottom:.5rem;}
.case-figure{margin:2rem 0;}
.case-figure img{
  width:100%;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.case-figure figcaption{
  font-size:.8rem;color:var(--ink-soft);margin-top:.7rem;text-align:center;font-style:italic;
}
.case-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0;}
.case-gallery img{border-radius:.8rem;border:1px solid var(--line);box-shadow:var(--shadow);}
.case-phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.1rem;margin:2rem 0;}
.case-phones img{border-radius:1rem;border:1px solid var(--line);box-shadow:var(--shadow);}
.case-callout{
  background:var(--pink-pale);
  border-left:4px solid var(--magenta);
  border-radius:.6rem;
  padding:1.4rem 1.6rem;
  margin:2rem 0;
}
.case-callout p{margin:0;color:var(--plum-deep);font-size:.95rem;}
.case-callout strong{color:var(--plum-deep);}
.case-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;margin:2rem 0;}
.case-kpi{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.3rem;text-align:center;box-shadow:var(--shadow);
}
.case-kpi b{display:block;font-family:'Poppins',sans-serif;font-size:1.75rem;color:var(--magenta);margin-bottom:.3rem;}
.case-kpi span{font-size:.78rem;color:var(--ink-soft);line-height:1.4;display:block;}
.case-nav{
  max-width:820px;margin:4rem auto 0;padding:2.5rem 1.75rem 0;
  border-top:1px solid var(--line);display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
}
@media(max-width:640px){
  .case-hero{padding:5.5rem 0 2.5rem;}
  .case-body h2{font-size:1.28rem;}
}

/* ---- video embed (Drive / YouTube) ---- */
.case-video{
  position:relative;width:100%;padding-top:56.25%;
  margin:2rem 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:#000;
}
.case-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.slide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:2rem 0;}
.slide-grid img{border-radius:.7rem;border:1px solid var(--line);box-shadow:var(--shadow);}