/*
Theme Name: Juan Balenciaga Marín
Theme URI: https://lightgoldenrodyellow-armadillo-548710.hostingersite.com/
Author: Juan Balenciaga Marín
Description: Tema personal de una sola página para portfolio de periodista. Se edita desde Apariencia, Personalizar, Datos de la home.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: juan-balenciaga
*/

html{scroll-behavior:smooth}
body{margin:0}

#jb-home{
  --jb-verde:#174D43; --jb-verde-oscuro:#103A32; --jb-verde-niebla:#EDF3F0;
  --jb-cobre:#A65F46; --jb-cobre-oscuro:#884B35; --jb-cobre-suave:#F6ECE6;
  --jb-blanco:#FFFFFF; --jb-tinta:#171717; --jb-gris:#666666; --jb-linea:#E6E6E6;
  --jb-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --jb-sans:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --jb-h1:clamp(2.25rem,1.2rem + 3.6vw,4.25rem);
  --jb-h2:clamp(1.75rem,1.2rem + 1.8vw,2.625rem);
  --jb-p:clamp(1rem,.95rem + .2vw,1.125rem);
  --jb-ancho:1160px;
  --jb-hero-pos-escritorio:62% 30%;
  --jb-hero-pos-movil:70% 20%;
  font-family:var(--jb-sans);font-size:var(--jb-p);line-height:1.6;color:var(--jb-tinta);background:var(--jb-blanco);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#jb-home *,#jb-home *::before,#jb-home *::after{box-sizing:border-box}
#jb-home img{max-width:100%;display:block}
#jb-home h1,#jb-home h2,#jb-home h3,#jb-home p,#jb-home ul{margin:0}
#jb-home a{color:var(--jb-verde)}
#jb-home :focus-visible{outline:3px solid var(--jb-cobre);outline-offset:3px;border-radius:2px}

.jb-wrap{width:100%;max-width:var(--jb-ancho);margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
.jb-seccion{padding-block:clamp(56px,8vw,104px)}
.jb-seccion--niebla{background:var(--jb-verde-niebla)}
.jb-seccion--cobre{background:var(--jb-cobre-suave)}
.jb-h2{font-family:var(--jb-serif);font-weight:500;font-size:var(--jb-h2);line-height:1.18;letter-spacing:-.01em;max-width:20ch}
.jb-etiqueta{font-size:.875rem;font-weight:500;color:var(--jb-cobre-oscuro);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.jb-etiqueta::before{content:"";width:32px;height:1px;background:var(--jb-cobre)}
.jb-texto{max-width:62ch}

.jb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;font:500 1rem/1.2 var(--jb-sans);text-decoration:none;border:1px solid var(--jb-verde);background:var(--jb-verde);color:var(--jb-blanco)!important;border-radius:2px;transition:background .2s}
.jb-btn:hover{background:var(--jb-verde-oscuro)}
.jb-btn--linea{background:transparent;color:var(--jb-verde)!important}
.jb-btn--linea:hover{background:var(--jb-verde);color:var(--jb-blanco)!important}
.jb-enlace{font-weight:500;font-size:1rem;text-decoration:none;border-bottom:1px solid var(--jb-cobre);padding-bottom:2px;display:inline-block}
.jb-enlace:hover{color:var(--jb-verde-oscuro);border-bottom-width:2px}

.jb-hero{position:relative;width:100%;aspect-ratio:2000/800;min-height:520px;max-height:760px;display:flex;align-items:center;background:var(--jb-verde-oscuro);color:var(--jb-blanco);overflow:hidden}
.jb-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--jb-hero-pos-escritorio)}
.jb-hero .jb-wrap{position:relative;z-index:2;padding-block:48px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.jb-hero-perfil{font-weight:500;font-size:.9375rem;margin-bottom:18px}
.jb-hero h1{font-family:var(--jb-serif);font-weight:500;font-size:var(--jb-h1);line-height:1.1;letter-spacing:-.015em;max-width:15ch;text-wrap:balance}
.jb-hero-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.jb-hero .jb-btn{border-color:var(--jb-blanco);text-shadow:none}
@media (max-width:760px){
  .jb-hero{aspect-ratio:auto;min-height:560px;align-items:flex-end}
  .jb-hero-img{object-position:var(--jb-hero-pos-movil)}
  .jb-hero-botones .jb-btn{width:100%}
}

.jb-mirada{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:start}
.jb-mirada .jb-texto{border-left:1px solid var(--jb-cobre);padding-left:clamp(20px,3vw,36px)}
@media (max-width:860px){.jb-mirada{grid-template-columns:1fr}}

.jb-proyectos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);margin-top:48px}
.jb-proyecto{display:flex;flex-direction:column;gap:18px}
.jb-portada{position:relative;aspect-ratio:16/10;background:var(--jb-verde);color:var(--jb-blanco);display:flex;align-items:flex-end;padding:24px;overflow:hidden;margin:0}
.jb-portada--cobre{background:var(--jb-cobre)}
.jb-portada span{font-family:var(--jb-serif);font-weight:500;font-size:1.75rem;line-height:1.15}
.jb-portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jb-proyecto h3{font-family:var(--jb-sans);font-weight:500;font-size:1.4rem;line-height:1.25}
.jb-proyecto p{font-size:1rem}
.jb-nota{font-size:.875rem;color:var(--jb-cobre-oscuro);font-weight:500;border-top:1px solid var(--jb-linea);padding-top:12px}
.jb-proyecto .jb-enlace{align-self:flex-start;margin-top:auto}
@media (max-width:760px){.jb-proyectos{grid-template-columns:1fr}}

.jb-muestras{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,80px);margin-top:36px}
.jb-muestra{padding-block:24px;border-top:1px solid var(--jb-cobre);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.jb-muestra .jb-meta{font-size:.875rem;font-weight:500;color:var(--jb-cobre-oscuro)}
.jb-muestra h3{font-family:var(--jb-serif);font-weight:500;font-size:1.375rem;line-height:1.25;color:var(--jb-tinta)}
.jb-muestra p{font-size:1rem}
@media (max-width:760px){.jb-muestras{grid-template-columns:1fr}}

.jb-orgs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.jb-orgs li{font-size:.9375rem;font-weight:500;padding:8px 16px;border:1px solid var(--jb-verde);color:var(--jb-verde-oscuro);background:var(--jb-blanco);border-radius:2px}
.jb-empleo{margin-top:40px;padding:28px clamp(20px,3vw,36px);background:var(--jb-blanco);border-left:3px solid var(--jb-cobre);max-width:760px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.jb-empleo .jb-meta{font-size:.875rem;font-weight:500;color:var(--jb-cobre-oscuro)}
.jb-empleo h3{font-family:var(--jb-serif);font-weight:500;font-size:1.5rem;line-height:1.25}
.jb-empleo p{font-size:1rem;max-width:56ch}
.jb-cv{margin-top:28px}

.jb-cierre{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px)}
.jb-cierre h2{margin-bottom:20px}
.jb-estado{display:inline-block;margin-top:20px;font-size:.875rem;font-weight:700;color:var(--jb-cobre-oscuro);background:var(--jb-cobre-suave);padding:6px 14px;border-radius:2px}
.jb-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
@media (max-width:860px){.jb-cierre{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #jb-home *{transition:none!important;animation:none!important}
}