/* ================================================================
   CAPA GRÁFICA — editar SOLO esto para re-tematizar por modelo
   ================================================================ */
:root{
  --bg:        #faf8f5;   /* fondo general */
  --surface:   #ffffff;   /* superficies / tarjetas */
  --text:      #181818;   /* texto principal */
  --muted:     #585249;   /* texto secundario (contraste AA) */
  --accent:    #b08d57;   /* dorado / bronce (líneas y acentos) */
  --accent-2:  #8a6d3b;   /* dorado oscuro (texto sobre claro) */
  --border:    #e7e0d6;   /* divisores */
  --chip-bg:   #f3eee6;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius: 3px;
  --maxw: 1080px;
}
/* Variante oscura de ejemplo: descomentar para invertir el tema
:root{
  --bg:#111010; --surface:#191817; --text:#f3efe8; --muted:#b3a99a;
  --accent:#c9a86a; --accent-2:#d9bd84; --border:#2a2825; --chip-bg:#211f1c;
}
*/

/* ================================================================
   BASE
   ================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

.brand-bar{
  position:sticky; top:0; z-index:50;
  width:100%; box-sizing:border-box; text-align:center;
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.34em; text-indent:.34em;   /* compensa el tracking para centrar óptico */
  font-size:1rem; line-height:1; color:var(--text);
  padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--border);
}
.brand-bar a{ color:inherit; text-decoration:none; display:inline-block; }
.brand-bar a:hover{ color:var(--accent-2); }

.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2); font-weight:600; margin:0 0 18px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--border); }

section{ padding:54px 0; border-top:1px solid var(--border); scroll-margin-top:64px; }
section:first-of-type{ border-top:none; }

/* ================================================================
   HERO
   ================================================================ */
.hero{ padding-top:34px; padding-bottom:54px; }
.hero-grid{ display:grid; gap:30px; }
/* La foto se ve completa, en su proporción: recortarla a 4/5 con `cover`
   dejaba un primerísimo plano en móvil, donde ocupa todo el ancho. */
img.hero-photo{
  display:block; width:auto; height:auto; max-width:min(100%, var(--w, 100%)); max-height:62svh;
  margin:0 auto; border-radius:var(--radius); background:var(--chip-bg);
}
div.hero-photo{  /* marcador cuando el perfil aún no tiene foto principal */
  width:100%; aspect-ratio:4/5; border-radius:var(--radius); background:var(--chip-bg);
}
.hero-body{ display:flex; flex-direction:column; justify-content:center; }
.hero-name{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,8vw,4rem); line-height:1.02; margin:0;
  letter-spacing:-.01em;
}
.hero-tagline{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.05rem,3.4vw,1.4rem); color:var(--muted);
  margin:14px 0 0;
}
.hero-city{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.hero-city svg{ width:13px; height:13px; stroke:var(--accent-2); }
.cta{
  align-self:flex-start; margin-top:30px;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--text); color:var(--bg);
  text-decoration:none; font-weight:500; font-size:.92rem;
  letter-spacing:.04em; padding:15px 28px; border-radius:var(--radius);
  border:1px solid var(--text); transition:.2s ease;
}
.cta:hover{ background:transparent; color:var(--text); }
.cta svg{ width:16px; height:16px; }

/* ================================================================
   FICHA TÉCNICA
   ================================================================ */
/* Cada celda dibuja su propio recuadro completo, en vez de que las líneas
   salgan del fondo de la rejilla: así toda caja queda cerrada por sus cuatro
   lados —incluida la última de una fila incompleta— y el hueco sobrante se ve
   limpio en lugar de mostrar un bloque del color del divisor. Entre celdas
   contiguas los recuadros se superponen y la línea sigue siendo de 1px. */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.stat{ background:var(--surface); padding:18px 20px; box-shadow:0 0 0 1px var(--border); }
.stat .k{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.stat .v{ font-family:var(--font-display); font-size:1.32rem; margin-top:5px; }

/* ================================================================
   GALERÍA (masonry)
   ================================================================ */
.gallery{ column-count:1; column-gap:14px; }
.gallery figure{ margin:0 0 14px; break-inside:avoid; overflow:hidden; border-radius:var(--radius); background:var(--chip-bg); }
.gallery a{ display:block; cursor:zoom-in; }
.gallery img{ width:100%; height:auto; transition:transform .5s ease; }
.gallery figure:hover img{ transform:scale(1.035); }

/* ================================================================
   VISOR DE FOTOS
   ================================================================ */
.lb[hidden]{ display:none; }
.lb{
  position:fixed; inset:0; z-index:100; background:rgba(18,17,16,.95);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:clamp(14px,4vw,44px);
}
/* Ajustada a la pantalla; en modo "tamaño real" la foto se muestra a 1:1
   y el escenario se desplaza (rueda, arrastre o dedo). */
.lb-stage{ flex:1 1 auto; min-height:0; display:flex; max-width:100%; overflow:auto; }
.lb-img{
  margin:auto; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:var(--radius); background:#211f1c; cursor:zoom-in;
}
.lb.is-zoom .lb-stage{ width:100%; cursor:grab; }
.lb.is-zoom .lb-stage.is-drag{ cursor:grabbing; }
.lb.is-zoom .lb-img{ max-width:none; max-height:none; border-radius:0; cursor:zoom-out; }
.lb-btn{
  position:absolute; z-index:2; display:grid; place-items:center; width:46px; height:46px;
  padding:0; border:1px solid rgba(243,239,232,.28); background:rgba(18,17,16,.55);
  color:#f3efe8; border-radius:50%; cursor:pointer; font:400 1.5rem/1 var(--font-body);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.lb-btn:hover{ background:#f3efe8; color:#181818; border-color:#f3efe8; }
.lb-x{ top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); font-size:1.35rem; }
.lb-prev, .lb-next{ top:50%; margin-top:-23px; }
.lb-prev{ left:clamp(8px,2vw,26px); }
.lb-next{ right:clamp(8px,2vw,26px); }
.lb-single .lb-prev, .lb-single .lb-next{ display:none; }
.lb-bar{
  flex:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 18px; max-width:100%;
}
.lb-count{ margin:0; color:rgba(243,239,232,.72); font-size:.76rem; letter-spacing:.18em; }
.lb-zoom, .lb-raw{
  border:1px solid rgba(243,239,232,.3); background:transparent; color:#f3efe8;
  padding:9px 16px; border-radius:999px; cursor:pointer; text-decoration:none;
  font:400 .74rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.lb-zoom:hover, .lb-raw:hover{ background:#f3efe8; color:#181818; border-color:#f3efe8; }
.lb-zoom[aria-pressed="true"]{ background:rgba(243,239,232,.16); border-color:rgba(243,239,232,.5); }
@media (max-width:560px){
  .lb-dim{ display:none; }            /* en pantalla chica el botón va sin medidas */
  .lb-bar{ gap:8px 12px; }
  .lb-zoom, .lb-raw{ padding:8px 13px; font-size:.68rem; letter-spacing:.1em; }
}
/* El visor aparece sin animación de entrada a propósito: una animación de
   opacidad sobre el contenedor puede dejarlo invisible si el navegador la
   difiere, y el visor es justo lo que el visitante quiere ver de inmediato. */

/* ================================================================
   BIO
   ================================================================ */
.bio p{
  font-family:var(--font-display); font-size:clamp(1.15rem,3.5vw,1.5rem);
  line-height:1.55; max-width:60ch; margin:0;
}

/* ================================================================
   PERFIL PROFESIONAL
   ================================================================ */
.profile-grid{ display:grid; gap:30px; }
.profile-block .k{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ border:1px solid var(--border); background:var(--chip-bg); padding:8px 15px; border-radius:999px; font-size:.86rem; }
.plain-list{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 20px; }
.plain-list li{ font-size:.96rem; position:relative; padding-left:16px; }
.plain-list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.travel{ display:inline-flex; align-items:center; gap:9px; font-size:.96rem; }
.travel svg{ width:17px; height:17px; stroke:var(--accent-2); }

/* ================================================================
   VIDEO
   ================================================================ */
.reel{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; }
.reel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ================================================================
   CONTACTO
   ================================================================ */
.contact-grid{ display:grid; gap:14px; }
.wa{
  display:flex; align-items:center; justify-content:center; gap:11px;
  background:var(--accent); color:#fff; text-decoration:none;
  padding:18px; border-radius:var(--radius); font-weight:600; font-size:1rem;
  letter-spacing:.02em; transition:.2s ease;
}
.wa:hover{ background:var(--accent-2); }
.wa svg{ width:21px; height:21px; fill:currentColor; }
.links{ display:flex; flex-wrap:wrap; gap:12px; }
.link{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--border); background:var(--surface);
  padding:12px 18px; border-radius:var(--radius); font-size:.92rem; transition:.2s ease;
}
.link:hover{ border-color:var(--accent); }
.link svg{ width:17px; height:17px; }
.rep{ margin-top:6px; font-size:.92rem; color:var(--muted); }
.rep strong{ color:var(--text); font-weight:600; }

/* ================================================================
   PIE LEGAL
   ================================================================ */
footer{ border-top:1px solid var(--border); padding:34px 0; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between; }
footer p, footer a{ font-size:.78rem; color:var(--muted); margin:0; }
footer a{ text-decoration:underline; text-underline-offset:3px; }
footer a:hover{ color:var(--text); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (min-width:640px){
  .stats{ grid-template-columns:repeat(3,1fr); }
  .gallery{ column-count:2; }
}
@media (min-width:960px){
  section{ padding:72px 0; }
  .hero-grid{ grid-template-columns:auto minmax(320px, 1fr); gap:54px; align-items:center; }
  img.hero-photo{ margin:0; max-height:min(80svh, 820px); }
  .stats{ grid-template-columns:repeat(4,1fr); }
  .gallery{ column-count:3; }
  .profile-grid{ grid-template-columns:repeat(2,1fr); column-gap:54px; }
  .contact-grid{ grid-template-columns:1fr; max-width:560px; }
}

/* ================================================================
   AÑADIDOS PLATAFORMA — actuación
   ================================================================ */
.prose{ margin:0; font-size:.96rem; max-width:60ch; }
.credits{ margin:0; padding:0; list-style:none; }
.credits li{ padding:9px 0; border-bottom:1px solid var(--border); font-size:.96rem; }
.credits li:last-child{ border-bottom:none; }
.hero-job{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-2); font-weight:600; margin:0 0 14px; }