/* JGV Studio · tokens compartidos por la web, la galería y el panel.
   Colores de su web; los nombres de variable se mantienen porque panel, galería y web dependen de ellos. */
@font-face{font-family:"Caprasimo";src:url(/assets/fonts/caprasimo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(/assets/fonts/familjen-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --sal:#F7F1E7;      /* fondo crema */
  --cant:#3F3A33;     /* tinta: marrón oscuro */
  --concha:#F6E7B4;   /* amarillo suave */
  --arena:#EAD8C4;    /* arena */
  --verdin:#7A6650;   /* marrón de los botones */
  --papel:#FCF9F3;
  --beige:#EFE4D0;
  --cant-70:rgba(63,58,51,.72);
  --cant-50:rgba(63,58,51,.52);
  --cant-12:rgba(63,58,51,.12);
  --cant-06:rgba(63,58,51,.06);
  --serif:"Caprasimo",Georgia,serif;
  --sans:"Familjen Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{background:var(--sal);color:var(--cant);font:400 17px/1.6 var(--sans)}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cant);outline-offset:3px;border-radius:4px}
::selection{background:var(--concha)}
.serif{font-family:var(--serif);font-weight:400}

/* La marca: medio sol con rayos sobre un horizonte, JGV y "studio" */
.marca{display:inline-flex;align-items:flex-end;gap:.32em;position:relative;padding-bottom:.22em;font-size:26px;line-height:1;color:inherit;text-decoration:none;white-space:nowrap}
.marca::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
.marca .sol{width:1.55em;height:.85em;flex:none;background:var(--verdin);-webkit-mask:url(/assets/sol.svg) no-repeat center bottom/contain;mask:url(/assets/sol.svg) no-repeat center bottom/contain}
.marca b{font-family:var(--serif);font-weight:400;font-size:1em;line-height:.8;letter-spacing:.02em}
.marca i{font-style:normal;font-family:var(--sans);font-size:.5em;line-height:1;opacity:.75;margin-left:-.12em}
.marca.clara .sol{background:var(--concha)}

.btn{display:inline-block;padding:15px 30px;border-radius:999px;border:0;background:var(--verdin);color:var(--sal);text-decoration:none;font-weight:500;font-size:16px;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--cant)}
.btn.claro{background:transparent;color:var(--cant);box-shadow:inset 0 0 0 1.5px var(--cant)}
.btn.claro:hover{background:var(--cant);color:var(--sal)}
.btn:disabled{opacity:.55;cursor:default}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}