/* ==========================================================================
   Rodrigo Videla Campos — sitio personal
   ========================================================================== */

:root{
  --ink:        #0e1b2c;
  --ink-soft:   #1b2c42;
  --slate:      #4a5b70;
  --slate-soft: #6b7c92;
  --line:       #dfe4ea;
  --line-soft:  #edf0f4;
  --paper:      #ffffff;
  --paper-warm: #f7f5f1;
  --accent:     #b07d33;
  --accent-lt:  #c9963f;
  --accent-bg:  #f4ece0;

  --wrap: 1140px;
  --r: 14px;
  --shadow-sm: 0 1px 2px rgba(14,27,44,.05), 0 4px 14px rgba(14,27,44,.05);
  --shadow-md: 0 6px 28px rgba(14,27,44,.10);
  --shadow-lg: 0 24px 60px rgba(14,27,44,.16);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  color:var(--slate);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{ color:var(--ink); font-family:var(--serif); font-weight:600; line-height:1.18; margin:0; letter-spacing:-.015em; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in{ opacity:1; transform:none; }

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

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,0);
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 2px 20px rgba(14,27,44,.06);
}
.nav__inner{ display:flex; align-items:center; gap:24px; height:74px; }

.nav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.nav__mark{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  background:var(--ink); color:var(--accent-lt);
  font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:.02em;
  border-radius:9px;
}
.nav__name{ font-family:var(--serif); font-weight:600; color:var(--ink); font-size:16.5px; white-space:nowrap; }

.nav__links{ display:flex; gap:30px; }
.nav__links a{
  position:relative; text-decoration:none; font-size:14.5px; font-weight:500;
  color:var(--slate); padding:6px 0; transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--accent); transition:right .3s cubic-bezier(.22,.61,.36,1);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }
.nav__links a.is-active{ color:var(--ink); font-weight:600; }
.nav__links a.is-active::after{ right:0; }

.nav__toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line); background:#fff;
  border-radius:10px; cursor:pointer; padding:0; place-items:center; gap:4.5px;
}
.nav__toggle span{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column;
  background:#fff; border-bottom:1px solid var(--line);
  padding:8px clamp(20px,5vw,40px) 20px;
  box-shadow:var(--shadow-md);
}
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{
  text-decoration:none; color:var(--ink); font-weight:500; font-size:16px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.nav__mobile a:last-child{ border-bottom:0; color:var(--accent); font-weight:600; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 27px; border-radius:999px; text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:.005em;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn--sm{ padding:10px 20px; font-size:14px; }
.btn--solid{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn--solid:hover{ background:var(--ink-soft); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ border:1.5px solid var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; padding:150px 0 90px; overflow:hidden; background:var(--paper-warm); }
.hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 88% 8%, rgba(176,125,51,.13), transparent 62%),
    radial-gradient(760px 560px at 4% 92%, rgba(14,27,44,.07), transparent 60%);
}
.hero__inner{
  position:relative;
  display:grid; grid-template-columns:1.28fr .82fr; gap:clamp(36px,6vw,76px); align-items:center;
}

.eyebrow{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;
}
.eyebrow--light{ color:var(--accent-lt); }

.hero__title{
  font-size:clamp(2.5rem,6.2vw,4.15rem);
  font-weight:700; letter-spacing:-.03em; margin-bottom:14px;
}
.hero__role{
  font-family:var(--sans); font-size:clamp(15px,2vw,18px); font-weight:600;
  color:var(--ink-soft); letter-spacing:.005em; margin-bottom:22px;
}
.hero__role .sep{ color:var(--accent); margin:0 6px; }
.hero__lede{
  font-size:clamp(16.5px,1.9vw,19px); max-width:56ch; color:var(--slate); margin-bottom:34px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }

.hero__stats{
  list-style:none; margin:0; padding:30px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.hero__stats li{ display:flex; flex-direction:column; gap:5px; }
.hero__stats strong{
  font-family:var(--serif); font-size:clamp(1.85rem,3.4vw,2.5rem);
  font-weight:700; color:var(--ink); line-height:1;
}
.hero__stats span{ font-size:13.5px; line-height:1.45; color:var(--slate-soft); }

.hero__photo{ margin:0; position:relative; }
.hero__photo::before{
  content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1.5px solid var(--accent); border-radius:calc(var(--r) + 6px); opacity:.5;
}
.hero__photo img{
  position:relative; width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 18%;
  border-radius:calc(var(--r) + 6px); box-shadow:var(--shadow-lg);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ padding:clamp(70px,9vw,110px) 0; }
.section--light{ background:var(--paper-warm); }
.section--dark{ background:var(--ink); color:#b9c5d4; }
.section--contacto{ background:var(--paper); border-top:1px solid var(--line); }

.section__title{
  font-size:clamp(1.95rem,4.2vw,2.85rem); margin-bottom:46px; letter-spacing:-.025em;
}
.section__title--light{ color:#fff; }

.subsection{
  font-size:clamp(1.25rem,2.4vw,1.55rem);
  margin:66px 0 26px; padding-bottom:14px; border-bottom:1px solid var(--line);
}

.lead{ font-size:clamp(17.5px,2vw,20px); color:var(--ink-soft); font-weight:400; }
.muted{ color:var(--slate-soft); font-size:14.5px; }

/* ---------- Perfil ---------- */
.perfil{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.perfil__aside{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; box-shadow:var(--shadow-sm); position:sticky; top:100px;
}
.perfil__aside h3{ font-size:1.05rem; margin-bottom:18px; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--accent-bg); border:1px solid #e6d7c1;
  padding:6px 13px; border-radius:999px; line-height:1.35;
}

/* ---------- Timeline / Jobs ---------- */
.timeline{ display:flex; flex-direction:column; gap:30px; }

.job{
  display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,48px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px,3.4vw,40px);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.job:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#cfd6df; }

.job__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.job__period{
  font-size:13.5px; font-weight:600; color:var(--accent);
  letter-spacing:.05em; text-transform:uppercase;
}
.job__badge{
  font-size:12.5px; font-weight:600; color:var(--slate-soft);
  background:var(--paper-warm); border:1px solid var(--line);
  padding:3px 11px; border-radius:999px;
}

.job__title{ font-size:clamp(1.22rem,2.4vw,1.5rem); margin-bottom:6px; }
.job__org{
  font-family:var(--sans); font-size:15px; font-weight:600;
  color:var(--ink-soft); margin-bottom:16px;
}
.job__desc{ font-size:16px; }
.job__sub{
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft);
  margin:24px 0 14px;
}
.job__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.job__list li{ position:relative; padding-left:26px; font-size:15.7px; line-height:1.62; }
.job__list li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.85;
}
.job__list strong{ color:var(--ink); font-weight:600; }

/* ---------- Experiencia previa ---------- */
.prev{ border-top:1px solid var(--line); }
.prev__row{
  display:grid; grid-template-columns:1.55fr .85fr auto; gap:18px; align-items:baseline;
  padding:17px 4px; border-bottom:1px solid var(--line);
  transition:background .25s, padding-left .25s;
}
.prev__row:hover{ background:#fff; padding-left:14px; }
.prev__role{ color:var(--ink); font-weight:600; font-size:15.5px; }
.prev__role em{ color:var(--slate-soft); font-weight:400; font-style:italic; }
.prev__org{ font-size:14.5px; color:var(--slate); }
.prev__date{ font-size:13.5px; color:var(--slate-soft); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Educación ---------- */
.grid-edu{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-edu--sm{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }

.edu{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-top:3px solid var(--line);
}
.edu:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#cfd6df; border-top-color:var(--accent); }
.edu--hl{ border-top-color:var(--accent); }
.edu__year{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  color:var(--accent); margin-bottom:11px; font-variant-numeric:tabular-nums;
}
.edu h3{ font-size:1.1rem; margin-bottom:7px; line-height:1.3; }
.edu p{ font-size:14.5px; color:var(--slate-soft); margin:0; }

.extras{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.extra{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; box-shadow:var(--shadow-sm);
}
.extra h3{ font-size:1.05rem; margin-bottom:13px; }
.extra p{ font-size:15px; margin:0; }
.extra strong{ color:var(--ink); font-weight:600; }

/* ---------- Sobre mí ---------- */

.valores{
  list-style:none; margin:34px 0 0; padding:30px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:16px;
}
.valores li{ font-size:15.5px; padding-left:22px; position:relative; line-height:1.6; }
.valores li::before{
  content:""; position:absolute; left:0; top:10px; width:9px; height:1.5px; background:var(--accent-lt);
}
.valores strong{ color:#fff; display:inline; }

/* ---------- Contacto ---------- */
.contacto__lede{ font-size:clamp(16.5px,1.9vw,18.5px); max-width:64ch; margin-bottom:40px; }
.contacto__cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }

.ccard{
  display:flex; flex-direction:column; gap:5px;
  padding:28px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}
a.ccard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.ccard--static{ background:var(--paper-warm); box-shadow:none; }
.ccard__icon{ width:34px; height:34px; color:var(--accent); margin-bottom:12px; }
.ccard__icon svg{ width:100%; height:100%; stroke-linecap:round; stroke-linejoin:round; }
.ccard__label{ font-size:12.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--slate-soft); }
.ccard__value{ font-size:15.5px; font-weight:600; color:var(--ink); word-break:break-word; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#7e8ea3; padding:30px 0; font-size:14px; }
.footer__inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer__top{ text-decoration:none; transition:color .2s; }
.footer__top:hover{ color:var(--accent-lt); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:grid; }
  .nav{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom-color:var(--line); }

  .hero{ padding:120px 0 70px; }
  .hero__inner{ grid-template-columns:1fr; gap:42px; }
  .hero__photo{ order:-1; max-width:280px; }
  .hero__photo::before{ inset:12px -12px -12px 12px; }

  .perfil{ grid-template-columns:1fr; }
  .perfil__aside{ position:static; }

  .job{ grid-template-columns:1fr; gap:18px; }
  .job__meta{ flex-direction:row; align-items:center; gap:12px; }

  .grid-edu,.extras{ grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .hero__stats{ grid-template-columns:1fr; gap:18px; }
  .hero__actions .btn{ flex:1 1 auto; }
  .prev__row{ grid-template-columns:1fr; gap:3px; padding:15px 4px; }
  .prev__date{ text-align:left; }
  .grid-edu,.extras{ grid-template-columns:1fr; }
  .nav__name{ font-size:15px; }
}

@media (max-width:380px){
  .nav__name{ display:none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .nav,.footer,.hero__actions,.hero__photo,.mosaico,.skip-link{ display:none !important; }
  body{ font-size:11pt; color:#000; }
  .section,.hero{ padding:14pt 0; background:#fff !important; }
  .job,.edu,.extra,.ccard,.perfil__aside{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__inner,.perfil{ grid-template-columns:1fr; }
}

/* ==========================================================================
   CERTIFICADOS — tarjetas clicables y visor de documentos
   ========================================================================== */

[hidden]{ display:none !important; }

/* ---------- Tarjeta con respaldo ---------- */
.tiene-cert{ cursor:pointer; position:relative; padding-bottom:58px; }
.edu.tiene-cert:hover{ border-top-color:var(--accent); }
.extra.tiene-cert{ padding-bottom:62px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.extra.tiene-cert:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#cfd6df; }

.ver-cert{
  position:absolute; left:24px; bottom:20px;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); transition:color .25s, gap .25s;
}
.extra .ver-cert{ left:26px; bottom:22px; }
.ver-cert svg{ width:15px; height:15px; flex:none; stroke-linecap:round; stroke-linejoin:round; }
.tiene-cert:hover .ver-cert{ color:var(--ink); gap:10px; }

/* ---------- Sección de cursos ---------- */
.cursos__lede{ max-width:64ch; margin:-30px 0 36px; font-size:clamp(16px,1.8vw,17.5px); }
.curso .edu__year{ color:var(--slate-soft); }
.curso.tiene-cert:hover .edu__year{ color:var(--accent); }

/* ---------- Visor ---------- */
body.sin-scroll{ overflow:hidden; }

.visor{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,3vw,40px);
  opacity:0; transition:opacity .2s ease;
}
.visor.is-abierto{ opacity:1; }

.visor__fondo{
  position:absolute; inset:0;
  background:rgba(14,27,44,.74);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

.visor__panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:min(960px,100%); height:min(88vh,100%);
  background:#fff; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.99);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.visor.is-abierto .visor__panel{ transform:none; }

.visor__head{ display:flex; align-items:flex-start; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line); }
.visor__head-txt{ min-width:0; }
.visor__titulo{ font-size:clamp(1.02rem,2.2vw,1.18rem); line-height:1.32; }
.visor__sub{ margin:5px 0 0; font-size:12.5px; color:var(--slate-soft); word-break:break-word; }

.visor__cerrar{
  margin-left:auto; flex:none; width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line); background:#fff; border-radius:10px;
  color:var(--ink); cursor:pointer; transition:background .2s, border-color .2s;
}
.visor__cerrar:hover{ background:var(--paper-warm); border-color:var(--ink); }
.visor__cerrar svg{ width:18px; height:18px; stroke-linecap:round; }

.visor__tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px 0; }
.visor__tabs button{
  font:inherit; font-size:13px; font-weight:600;
  padding:7px 15px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--slate);
  cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
.visor__tabs button:hover{ border-color:var(--ink); color:var(--ink); }
.visor__tabs button.is-activa{ background:var(--ink); border-color:var(--ink); color:#fff; }

.visor__cuerpo{ flex:1; min-height:0; display:flex; padding:18px 22px; background:var(--paper-warm); }
.visor__marco{ flex:1; width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; }
.visor__imagen{ margin:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; background:#fff; box-shadow:var(--shadow-sm); }

.visor__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }
.visor__nota{ margin:0; font-size:12.5px; color:var(--slate-soft); flex:1 1 200px; }
.visor__pie .btn{ flex:none; }

@media (max-width:640px){
  .visor{ padding:0; }
  .visor__panel{ width:100%; height:100%; border-radius:0; }
  .visor__cuerpo{ padding:12px; }
  .visor__pie{ justify-content:stretch; }
  .visor__pie .btn{ flex:1 1 auto; }
}

@media print{
  .visor{ display:none !important; }
  .ver-cert{ display:none !important; }
  .tiene-cert{ padding-bottom:26px; }
}

/* ==========================================================================
   SOBRE MÍ — momentos (foto pequeña + texto al lado)
   ========================================================================== */

.section--vida{
  background:
    radial-gradient(780px 540px at 90% 0%, rgba(176,125,51,.11), transparent 62%),
    linear-gradient(180deg, #faf7f2 0%, #f1e9de 100%);
}

.vida__intro{ max-width:72ch; margin-bottom:clamp(38px,5vw,58px); }
.vida__intro .lead{
  font-family:var(--serif); color:var(--ink);
  font-size:clamp(1.22rem,2.7vw,1.66rem); line-height:1.4;
  letter-spacing:-.015em; margin-bottom:20px;
}

.vida__cierre{ max-width:72ch; margin-top:clamp(38px,5vw,58px); }

/* ---------- Momentos ---------- */
.momentos{ display:flex; flex-direction:column; gap:clamp(30px,4vw,46px); }

.momento{ display:flex; align-items:center; gap:clamp(22px,3.6vw,46px); }
.momento:nth-child(even){ flex-direction:row-reverse; }

.momento__foto{
  position:relative; flex:0 0 clamp(150px,19vw,225px);
  margin:0; overflow:hidden;
  aspect-ratio:4/5; border-radius:var(--r);
  background:#e6ded2; box-shadow:var(--shadow-md);
}
.momento--paisaje .momento__foto{ aspect-ratio:4/3; }

.momento__foto img,
.momento__foto video{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.momento__foto:hover img,
.momento__foto:hover video{ transform:scale(1.05); }

/* encuadres afinados */
.momento--paisaje .momento__foto img{ object-position:center 45%; }
.momento--perro .momento__foto img{ object-position:center 15%; }

.momento__texto{ flex:1; min-width:0; max-width:56ch; }
.momento__kicker{
  display:block; margin-bottom:9px;
  font-size:12px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent);
}
.momento__texto p{ margin:0; font-size:clamp(15.5px,1.7vw,16.8px); }

/* ---------- Momento con video ---------- */
.momento--video .momento__foto{ cursor:pointer; }
.momento__play{
  position:absolute; top:10px; right:10px; z-index:1;
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; color:#fff;
  background:rgba(14,27,44,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:opacity .35s ease;
}
.momento__play svg{ width:14px; height:14px; margin-left:1.5px; }
.momento__foto.is-playing .momento__play{ opacity:0; }

/* ---------- Valores sobre fondo claro ---------- */
.section--vida .valores{ border-top-color:var(--line); }
.section--vida .valores li{ color:var(--slate); }
.section--vida .valores li::before{ background:var(--accent); }
.section--vida .valores strong{ color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .momento,
  .momento:nth-child(even){ flex-direction:column; align-items:flex-start; gap:16px; }
  .momento__foto{ flex:none; width:min(180px,50%); }
  .momento--paisaje .momento__foto{ width:min(290px,78%); }
}

@media print{
  .momento__foto{ display:none !important; }
  .momento{ display:block; break-inside:avoid; }
}

/* ---------- Contacto: línea secundaria ---------- */
.contacto__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  margin:24px 0 0; padding-top:20px;
  border-top:1px solid var(--line);
}
.meta__item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--slate-soft); text-decoration:none;
}
.meta__item svg{ width:16px; height:16px; flex:none; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.meta__item--link{ font-weight:600; color:var(--slate); transition:color .2s; }
.meta__item--link:hover{ color:var(--accent); }
.meta__item--link:hover svg{ opacity:1; }

/* ---------- Nota descriptiva dentro de Experiencia previa ---------- */
.prev__nota{
  grid-column:1 / -1;
  margin:7px 0 0; max-width:78ch;
  font-size:14.5px; line-height:1.55; color:var(--slate-soft);
}

/* ==========================================================================
   JUSTIFICADO — solo en párrafos largos y columnas anchas
   ========================================================================== */

.perfil__texto p,
.job__desc,
.job__list li,
.prev__nota,
.cursos__lede,
.vida__intro p,
.momento__texto p,
.vida__cierre p,
.contacto__lede{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* La bajada de "Sobre mí" es tipografía de display: se lee mejor en bandera. */
.vida__intro .lead{ text-align:left; hyphens:manual; -webkit-hyphens:manual; }

/* En columnas angostas el justificado abre huecos: vuelve a bandera. */
@media (max-width:640px){
  .perfil__texto p,
  .job__desc,
  .job__list li,
  .prev__nota,
  .cursos__lede,
  .vida__intro p,
  .momento__texto p,
  .vida__cierre p,
  .contacto__lede{ text-align:left; hyphens:manual; -webkit-hyphens:manual; }
}