/* =========================================================
   Marcelo Suárez — Tema artístico profesional
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --bg:#0a0b10;
  --bg-soft:#0f131d;
  --panel:#121828;
  --panel-2:#171e30;
  --text:#f7f8fb;
  --muted:#a8b2c5;
  --line:rgba(255,255,255,.08);

  --accent:#e2b714;    /* dorado */
  --accent-2:#7dd3fc;  /* azul luz */

  --ff-sans:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --ff-serif:"Fraunces","Playfair Display", serif;

  --fs-0:.92rem;
  --fs-1:1rem;
  --fs-2:clamp(1.05rem, .85rem + .6vw, 1.25rem);
  --fs-3:clamp(1.15rem, .9rem + .9vw, 1.5rem);
  --fs-4:clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
  --fs-5:clamp(2.1rem, 1.8rem + 3.5vw, 3.6rem);

  --r:16px;
  --r-lg:22px;
  --shadow:0 12px 35px rgba(0,0,0,.35);
  --g:24px;

  --ease: cubic-bezier(.19,1,.22,1);
  --ease-fast: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0;
  color:var(--text);
  background:radial-gradient(1200px 600px at 12% -8%, #161b2b 0%, #0b0d15 48%, var(--bg) 100%) fixed;
  font-family:var(--ff-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;border-radius:calc(var(--r) - 6px);background:#0a0a0a}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:8px}
::selection{background:rgba(226,183,20,.25)}

.container{width:min(100%,1200px);margin:auto;padding:0 20px}
.section{padding:84px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:28px}
.section-head h1,.section-head h2{margin:0}
.small{font-size:var(--fs-0)}
.muted{color:var(--muted)}

/* ---------- Tipografía ---------- */
h1,h2,h3,.display{font-family:var(--ff-serif); letter-spacing:.2px}
.display{font-size:var(--fs-5); line-height:1.06; margin:0}

/* =========================================================
   NAVBAR
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg, #181c2b 80%, #a85c2a 100%);
  border-bottom:2px solid #e2b714;
  box-shadow:0 2px 16px rgba(203,180,138,.08);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.brand-logo svg {
  width: 44px;
  height: 44px;
  display: block;
  background: none;
}
.brand-text{font-family:var(--ff-serif);font-weight:700;color: #e2b714 !important;font-size: 1.3rem;letter-spacing: 1px}

.main-nav{flex:1;display:flex;justify-content:center}
.nav-inline{
  display:flex;gap:24px;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.nav-inline::-webkit-scrollbar{display:none}
.nav-inline a{
  display:inline-block;padding:12px 10px;border-radius:12px;position:relative;transition:color .2s var(--ease-fast);
  color: #fff !important;
  font-weight: 600;
}
.nav-inline a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  opacity:0;transform:translateY(2px) scaleX(.6);transition:.25s var(--ease-fast)
}
.nav-inline a:hover::after{opacity:1;transform:translateY(0) scaleX(1)}
.nav-inline a[aria-current="page"]{color:#fff}
.nav-inline a[aria-current="page"]::after{opacity:1;transform:none}

.btn{
  display:inline-block;padding:12px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#262c3d,#1a1f2f);color:#fff;
  transition:.25s var(--ease-fast) transform;
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.18)}
.cta{white-space:nowrap}

@media (max-width:760px){
  .brand-text{display:none}
  .header-row{gap:10px}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden}
.hero-content{position:relative;z-index:2;text-align:center;max-width:980px;padding:28px}
.lead{
  font-size:var(--fs-2);
  color:#d2d7e2;
  margin:6px 0 22px;
  text-align: justify;
}
.hero-image{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(92%) contrast(96%) brightness(78%);opacity:.34
}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* =========================================================
   TARJETAS DESTACADAS
   ========================================================= */
.cards{--min:280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));gap:var(--g)}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)
}
.card-media{display:block;overflow:hidden}
.card-media img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .65s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{
  padding:14px 16px;
  text-align: justify;
}
.card-title{margin:0 0 4px;font-family:var(--ff-serif)}

/* =========================================================
   GALERÍA
   ========================================================= */
.grid{--min:300px;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));gap:28px}
.art-card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:10px;cursor:pointer;
  transform-style:preserve-3d;transition:transform .18s var(--ease-fast),box-shadow .25s var(--ease-fast),border-color .25s var(--ease-fast);
  box-shadow:var(--shadow)
}
.art-card:hover{border-color:rgba(255,255,255,.16)}
.art-card .img-wrap{position:relative;overflow:hidden;border-radius:14px}
.art-card img{width:100%;aspect-ratio:1/1;object-fit:cover;transform:translateZ(30px);transition:transform .4s var(--ease-fast)}
.art-card:hover img{transform:translateZ(44px) scale(1.035)}
.art-card .glare{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(600px 300px at 50% 50%,rgba(255,255,255,.28),transparent 60%);
  transition:opacity .2s var(--ease-fast)
}
.art-card:hover .glare{opacity:.35}
.art-card figcaption{
  display:flex;flex-direction:column;gap:6px;padding:10px 4px 0;
  text-align: justify;
}
.art-card strong{font-family:var(--ff-serif)}
.meta{font-size:var(--fs-0);color:var(--muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}
.reveal.in{opacity:1;transform:none;filter:none;transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.reveal-del-1{transition-delay:.06s}
.reveal-del-2{transition-delay:.12s}
.reveal-del-3{transition-delay:.18s}

/* Lightbox */
.modal{border:none;border-radius:22px;background:#0f131d;color:#fff;max-width:min(1080px,94vw);width:100%}
.modal::backdrop{background:rgba(0,0,0,.7)}
.modal-body{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;padding:20px}
.modal-body img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.modal-body p{
  text-align: justify;
}
.modal-close{position:absolute;right:10px;top:10px;border:none;background:#151b2a;color:#fff;border-radius:12px;padding:6px 10px;font-size:20px;cursor:pointer}
@media (max-width:860px){.modal-body{grid-template-columns:1fr}}

/* =========================================================
   SOBRE MÍ
   ========================================================= */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px}
.about-media img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:20px;box-shadow:var(--shadow);
  filter:saturate(105%) contrast(98%);
}
.about .quote{
  font-family:var(--ff-serif);font-size:var(--fs-4);line-height:1.35;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);
  border-left:3px solid var(--accent);padding:14px 16px;border-radius:12px;
  text-align: justify;
}
.timeline{margin:10px 0 0;padding-left:14px;border-left:2px dashed rgba(255,255,255,.2)}
.timeline li{
  margin:8px 0;
  text-align: justify;
}
@media (max-width:980px){.about{grid-template-columns:1fr}}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact-data{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;margin-top:12px
}
.contact-data p{
  margin:10px 0;
  font-size:var(--fs-1);
  text-align: justify;
}
.contact-data a{color:var(--accent-2)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  text-align:center;
  padding:16px;
  font-size:.95rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.02)
}
.site-footer a{color:inherit}

/* =========================================================
   Preferencias / accesibilidad
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .art-card,.card{transition:none}
  .art-card .glare{display:none}
}

/* Logo central en página principal */
.logo-central {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 0 32px 0;
  min-height: 220px;
}
.logo-central img {
  width: 220px;
  max-width: 90vw;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  background: #181c2b;
}

/* MINI SOBRE MI destacado */
.sobre-mi-destacado .about-destacado {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  background: #fff8e6;
  border-radius: 32px;
  box-shadow: 0 8px 32px #cbb48a22;
  padding: 48px 32px;
  margin-bottom: 48px;
}
.sobre-mi-destacado .about-media img {
  width: 340px;
  max-width: 95vw;
  height: auto;
  border-radius: 32px;
  box-shadow: 0 12px 48px rgba(168,92,42,.18);
  background: #f5ecd6;
  border: 4px solid #cbb48a;
  object-fit: cover;
}
.sobre-mi-destacado .about-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 260px;
}
.sobre-mi-destacado .quote {
  font-size: 1.5rem;
  color: #a85c2a;
  font-family: 'Fraunces', serif;
  background: #f5ecd6;
  border-left: 4px solid #e2b714;
  padding: 18px 24px;
  border-radius: 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px #cbb48a22;
  text-align: justify;
}
.sobre-mi-destacado .muted {
  color: #7d6b4a;
  font-size: 1.08rem;
  text-align: justify;
}
@media (max-width: 900px) {
  .sobre-mi-destacado .about-destacado {
    flex-direction: column;
    padding: 32px 12px;
    gap: 24px;
  }
  .sobre-mi-destacado .about-media img {
    width: 220px;
  }
}

/* Logo grande debajo del Hero */
.logo-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 0;
  animation: fadeInLogo 1.2s cubic-bezier(.19,1,.22,1);
}
.logo-hero img {
  width: 340px;
  max-width: 96vw;
  height: auto;
  border-radius: 32px;
  box-shadow: 0 12px 48px rgba(168,92,42,.18), 0 0 0 8px #fff8e6;
  background: #fff8e6;
  border: 6px solid #e2b714;
  margin-bottom: 18px;
  transition: box-shadow .3s cubic-bezier(.19,1,.22,1), transform .3s cubic-bezier(.19,1,.22,1);
}
.logo-hero img:hover {
  box-shadow: 0 20px 64px rgba(168,92,42,.22), 0 0 0 12px #e2b714;
  transform: scale(1.04) rotate(-2deg);
}
.logo-hero h2 {
  margin-top: 0;
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  color: #a85c2a;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px #cbb48a44;
  background: none;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 700;
}
@keyframes fadeInLogo {
  from { opacity: 0; transform: translateY(-40px) scale(.95);}
  to { opacity: 1; transform: none;}
}
@media (max-width: 600px) {
  .logo-hero img {
    width: 180px;
    border-radius: 18px;
    margin-bottom: 12px;
  }
  .logo-hero h2 {
    font-size: 1.3rem;
    padding: 0 4px;
  }
}