/*
Theme Name: Jose Riquelme
Theme URI: https://joseriquelmecastillo.cl
Author: Alonso Bascuñán
Description: Tema a medida para José Riquelme Castillo — Conservador-Restaurador, fotógrafo de registro patrimonial y profesor de Bellas Artes. Incluye tipos de contenido propios "Registro de obra" y "Restauraciones" (con categorías, fichas técnicas y galería), formulario de contacto funcional y panel de personalización — 100% autoadministrable, sin plugins de pago.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: jose-riquelme
*/

/* ==========================================================
   TOKENS — Jose Riquelme
   Paleta inspirada en materiales de restauración: hollín/madera
   quemada (ink), papel envejecido (parchment), pátina de cobre
   oxidado (verdigris) y óxido de metal antiguo (oxide).
   ========================================================== */
:root{
  --ink:#1B1812;
  --ink-soft:#332C22;
  --parchment:#F1E8D6;
  --paper:#FBF7EE;
  --verdigris:#5C7A6B;
  --verdigris-dark:#41594C;
  --oxide:#9C4E30;
  --stone:#ABA08D;
  --stone-text:#6E6555;
  --line:rgba(27,24,18,.14);
  --line-light:rgba(241,232,214,.22);

  --font-display:'Fraunces',serif;
  --font-body:'Work Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --section-py:clamp(4rem,8vw,7rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
section{scroll-margin-top:5.2rem;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

::selection{background:var(--verdigris); color:var(--parchment);}
:focus-visible{outline:2px solid var(--oxide); outline-offset:3px;}

body::before{
  content:"";
  position:fixed; inset:0;
  z-index:2000; pointer-events:none;
  opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verdigris-dark);
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1rem;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--oxide);}
.eyebrow.on-dark{color:var(--parchment);}
.eyebrow.on-dark::before{background:var(--parchment);}

.jr-section-alt{background:var(--paper);}
.jr-py{padding-block:var(--section-py);}

/* ---------- botones ---------- */
.btn-jr{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.9rem 1.7rem; border-radius:2px;
  border:1px solid var(--ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
}
.btn-jr-solid{background:var(--ink); color:var(--parchment);}
.btn-jr-solid:hover{background:var(--verdigris-dark); border-color:var(--verdigris-dark); color:var(--parchment); transform:translateY(-2px);}
.btn-jr-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-jr-outline:hover{background:var(--ink); color:var(--parchment); transform:translateY(-2px);}
.btn-jr-outline.on-dark{color:var(--parchment); border-color:var(--line-light);}
.btn-jr-outline.on-dark:hover{background:var(--parchment); color:var(--ink);}
.btn-jr::after{content:"→"; display:inline-block; transition:transform .25s ease;}
.btn-jr:hover::after{transform:translateX(4px);}
.btn-jr.small{padding:.6rem 1.2rem; font-size:.72rem;}

/* ---------- navbar ---------- */
.jr-navbar{
  position:fixed; inset-inline:0; top:0; z-index:1030; padding-block:1.15rem;
  background:transparent;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.jr-navbar.is-scrolled{
  background:rgba(241,232,214,.94); backdrop-filter:blur(6px);
  padding-block:.7rem; border-color:var(--line);
}
.jr-brand{font-family:var(--font-display); font-size:1.35rem; font-weight:500; letter-spacing:.01em;}
.jr-brand em{font-style:italic; color:var(--oxide); font-weight:400;}
.jr-nav-link{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.5rem 1rem !important; position:relative;
}
.jr-nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.25rem; height:1px;
  background:var(--oxide); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.jr-nav-link:hover::after,
.jr-nav-link:focus-visible::after,
.jr-nav-link.active::after{transform:scaleX(1);}
.jr-nav-link.active{color:var(--oxide);}
.jr-navbar .dropdown-menu{border-radius:2px; border:1px solid var(--line); background:var(--paper); padding:.4rem;}
.jr-navbar .dropdown-item{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; padding:.55rem .8rem; border-radius:1px;}
.jr-navbar .dropdown-item:hover{background:var(--parchment); color:var(--ink);}
.navbar-toggler{border:1px solid var(--ink) !important; border-radius:2px !important; padding:.4rem .55rem !important;}
.navbar-toggler:focus{box-shadow:none;}

/* ---------- marco esquinas (motivo firma) ---------- */
.frame{position:relative; padding:16px;}
.frame .frame-media{position:relative; overflow:hidden; background:var(--stone);}
.frame .frame-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.frame:hover .frame-media img{transform:scale(1.045);}
.corner{position:absolute; width:22px; height:22px; border-color:var(--verdigris); opacity:0; z-index:2;}
.frame.on-dark .corner{border-color:var(--parchment);}
.corner.tl{top:0; left:0; border-top:2px solid; border-left:2px solid;}
.corner.tr{top:0; right:0; border-top:2px solid; border-right:2px solid;}
.corner.bl{bottom:0; left:0; border-bottom:2px solid; border-left:2px solid;}
.corner.br{bottom:0; right:0; border-bottom:2px solid; border-right:2px solid;}
.frame.is-visible .corner{animation:cornerIn .6s ease forwards;}
.frame.is-visible .corner.tl{animation-delay:.05s;}
.frame.is-visible .corner.tr{animation-delay:.15s;}
.frame.is-visible .corner.bl{animation-delay:.25s;}
.frame.is-visible .corner.br{animation-delay:.35s;}
@keyframes cornerIn{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:scale(1);}}

/* ---------- ficha (etiqueta tipo catálogo) ---------- */
.ficha{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--ink-soft);
  border-left:2px solid var(--oxide); padding:.15rem 0 .15rem .7rem; margin-top:.9rem;
  display:flex; justify-content:space-between; gap:1rem;
}
.ficha .reg{color:var(--stone-text); white-space:nowrap;}
.ficha.on-dark{color:var(--parchment); border-color:var(--parchment);}
.ficha.on-dark .reg{color:var(--stone);}

/* ---------- hero ---------- */
.jr-hero{min-height:100svh; display:flex; align-items:center; padding-top:6.5rem; padding-bottom:3rem; position:relative;}
.jr-hero h1{font-size:clamp(2.35rem,3.6vw + 1rem,4.1rem); font-weight:400;}
.jr-hero h1 em{font-style:italic; color:var(--oxide); font-weight:400;}
.jr-hero p.lead-text{font-size:1.05rem; color:var(--ink-soft); max-width:42ch; margin-top:1.4rem;}
.jr-hero-roles{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--verdigris-dark); margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem;
}
.jr-hero-roles span:not(:last-child)::after{content:"/"; margin-left:1rem; color:var(--stone);}
.jr-hero-actions{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem;}
.jr-hero-vertical-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--stone-text); writing-mode:vertical-rl; transform:rotate(180deg);
  position:absolute; right:-1.6rem; top:16px; bottom:16px; display:flex; align-items:center; justify-content:center;
}
.jr-hero-image-wrap{position:relative;}
.jr-blueprint{
  position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, rgba(27,24,18,.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(27,24,18,.06) 0 1px, transparent 1px 22px),
    var(--paper);
  z-index:0;
}
.jr-hero-image-wrap .frame{position:relative; z-index:1; background:var(--paper);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- sobre mi ---------- */
.jr-bio-portrait{max-width:360px;}

/* ---------- oficios ---------- */
.jr-oficio{
  padding:2.2rem 1.6rem 2rem; background:var(--paper); border:1px solid var(--line);
  height:100%; scroll-margin-top:6.5rem;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.jr-oficio:hover{border-color:var(--verdigris); transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(27,24,18,.35);}
.jr-oficio .icon{color:var(--verdigris-dark); margin-bottom:1.1rem; display:block;}
.jr-oficio .tag{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oxide); display:block; margin-bottom:1rem;}
.jr-oficio h3{font-size:1.35rem; font-weight:500; margin-bottom:.8rem;}
.jr-oficio p{color:var(--ink-soft); font-size:.95rem; margin-bottom:0;}

/* ---------- cita ---------- */
.jr-quote-band{background:var(--ink); color:var(--parchment); position:relative;}
.jr-quote-band blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.4vw + .8rem,2.5rem); line-height:1.35; max-width:22ch; margin:0 auto;
}
.jr-quote-band cite{display:block; font-family:var(--font-mono); font-style:normal; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-top:1.6rem;}

/* ---------- portafolio ---------- */
.jr-port-item{cursor:pointer; display:block;}
.jr-port-item .frame-media{aspect-ratio:4/5;}
.jr-port-item .frame-media::after{
  content:"Ver ficha ↗"; position:absolute; right:10px; bottom:10px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--parchment); background:rgba(27,24,18,.8); padding:.35rem .6rem;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.jr-port-item:hover .frame-media::after,
.jr-port-item:focus-visible .frame-media::after{opacity:1; transform:translateY(0);}
.jr-port-kind{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--oxide); display:block; margin-top:.9rem;
}

/* ---------- CTA banda ---------- */
.jr-cta-band{background:var(--verdigris-dark); color:var(--parchment);}
.jr-cta-band h2{color:var(--parchment); font-weight:400;}

/* ---------- contacto ---------- */
.jr-field{margin-bottom:1.6rem;}
.jr-field label{display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem;}
.jr-field .form-control{background:transparent; border:none; border-bottom:1px solid var(--stone); border-radius:0; padding:.6rem .1rem; font-family:var(--font-body); color:var(--ink);}
.jr-field .form-control:focus{box-shadow:none; border-color:var(--oxide);}
.jr-field textarea.form-control{resize:vertical; min-height:110px;}
.jr-contact-info dt{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-text); margin-top:1.3rem;}
.jr-contact-info dt:first-child{margin-top:0;}
.jr-contact-info dd{font-family:var(--font-display); font-size:1.15rem; margin:.25rem 0 0;}
.jr-hp-field{position:absolute; left:-9999px; top:-9999px;}

/* ---------- footer ---------- */
.jr-footer{background:var(--ink); color:var(--parchment);}
.jr-footer a:hover{color:var(--stone);}
.jr-footer .jr-brand{color:var(--parchment);}
.jr-social-link{width:38px; height:38px; border:1px solid var(--line-light); display:inline-flex; align-items:center; justify-content:center; border-radius:2px; transition:border-color .2s ease, background .2s ease; font-family:var(--font-mono); font-size:.7rem;}
.jr-social-link:hover{border-color:var(--parchment); background:rgba(241,232,214,.06);}

/* ---------- páginas internas: archivo / single ---------- */
.jr-page-header{padding-top:8.5rem; padding-bottom:2.5rem;}
.jr-taxo-pills{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem;}
.jr-taxo-pill{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); padding:.45rem .9rem; border-radius:20px; color:var(--ink-soft);
  transition:border-color .2s ease, color .2s ease;
}
.jr-taxo-pill:hover, .jr-taxo-pill.is-active{border-color:var(--oxide); color:var(--oxide);}
.jr-single-meta{margin-top:1.6rem;}
.jr-single-meta dt{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-text); margin-top:1rem;}
.jr-single-meta dt:first-child{margin-top:0;}
.jr-single-meta dd{font-family:var(--font-display); font-size:1.05rem; margin:.2rem 0 0;}
.jr-single-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:1.2rem;}
.jr-single-content{font-size:1rem; color:var(--ink-soft); margin-top:2rem;}
.jr-single-content p{margin-bottom:1.1rem;}
.jr-back-link{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; color:var(--verdigris-dark); margin-bottom:2rem;}
.jr-back-link:hover{color:var(--oxide);}

/* paginación WP */
.jr-pagination{margin-top:3rem; display:flex; justify-content:center; gap:.6rem; font-family:var(--font-mono); font-size:.8rem;}
.jr-pagination .page-numbers{border:1px solid var(--line); padding:.5rem .9rem; border-radius:2px;}
.jr-pagination .page-numbers.current{background:var(--ink); color:var(--parchment); border-color:var(--ink);}
.jr-pagination .page-numbers:hover{border-color:var(--oxide); color:var(--oxide);}

/* modal lightbox */
.modal-content.jr-lightbox{background:var(--ink); color:var(--parchment); border-radius:2px; border:1px solid var(--line-light);}
.jr-lightbox .btn-close{filter:invert(1) grayscale(1) brightness(2);}

/* formulario: mensajes de estado */
.jr-form-msg{font-family:var(--font-mono); font-size:.85rem; margin-top:1rem; padding:.9rem 1rem; border-left:2px solid var(--verdigris-dark);}
.jr-form-msg.is-error{border-color:var(--oxide);}

@media (max-width:991.98px){
  .jr-hero-vertical-label{display:none;}
  .jr-single-gallery{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .corner{opacity:1; animation:none;}
  .frame .frame-media img{transition:none;}
}

/* ---------- admin: metabox de galería (pantalla de edición) ---------- */
.jr-admin-gallery{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.jr-admin-gallery img{width:80px; height:80px; object-fit:cover; border:1px solid #ccc;}
.jr-admin-gallery-item{position:relative;}
.jr-admin-gallery-item button{position:absolute; top:-6px; right:-6px; background:#a00; color:#fff; border:none; border-radius:50%; width:18px; height:18px; line-height:1; cursor:pointer; font-size:11px;}