/*
Theme Name: Marcela Rodas Portfolio
Theme URI: https://marcelarodasart.com
Author: Estudio de Marcela Rodas
Description: Tema a medida para el portafolio de la artista visual Marcela Rodas. Incluye tipo de contenido "Obras" y formulario de contacto integrado.
Version: 1.0
Text Domain: marcela-rodas
*/

/* ============ TOKENS ============ */
:root{
  --bg:#FFFFFF;
  --paper:#FAFAF8;
  --ink:#33312C;
  --ink-soft:#6B675F;
  --line:#D8D5CC;
  --line-soft:#EAE8E1;
  --placeholder:#E6E3DB;
  --accent:#33509C;
  --serif:"Fraunces","Iowan Old Style",serif;
  --sans:"Inter",-apple-system,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ max-width:1220px; margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

.eyebrow{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}

h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--ink); }

/* ============ GRID LINES (signature element) ============ */
.grid-frame{
  display:grid;
  grid-template-columns: 1fr 1.6fr 1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.grid-frame > *{ border-left:1px solid var(--line); padding:18px 26px; }
.grid-frame > *:first-child{ border-left:none; }
@media (max-width:900px){
  .grid-frame{ grid-template-columns:1fr; }
  .grid-frame > *{ border-left:none; border-top:1px solid var(--line); }
  .grid-frame > *:first-child{ border-top:none; }
  /* las columnas vacías solo existen para alinear la cuadrícula en escritorio */
  .grid-frame > div:empty{ display:none; }
}

/* ============ NAV ============ */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}
.site-nav .grid-frame > *{ padding:20px 26px; display:flex; align-items:center; }
.nav-item{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }
.nav-item .arrow{ margin-left:6px; transition:transform .25s ease; display:inline-block; }
.nav-item:hover .arrow{ transform:translateX(4px); }
.nav-mid{ flex:1; }

/* barra superior mobile: marca + botón hamburguesa */
.nav-top-row{ display:none; }
.nav-brand{ font-family:var(--serif); font-size:17px; }

.menu-btn{
  display:none;
  background:none; border:none; cursor:pointer;
  width:28px; height:20px; position:relative; padding:0; flex-shrink:0;
}
.menu-btn span{
  position:absolute; left:0; right:0; height:2px; background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.menu-btn span:nth-child(1){ top:0; }
.menu-btn span:nth-child(2){ top:9px; }
.menu-btn span:nth-child(3){ top:18px; }
.menu-btn.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width:900px){
  .nav-top-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 0;
  }
  .menu-btn{ display:block; }

  /* el menú de enlaces se oculta y se abre como panel al tocar el botón */
  #navLinks.grid-frame{
    display:none;
    flex-direction:column;
    border-top:1px solid var(--line);
  }
  #navLinks.grid-frame.open{ display:flex; }
  #navLinks.grid-frame > *{ border:none !important; padding:14px 0; width:100%; }
  #navLinks .nav-mid{ display:none; }
}
@media (max-width:480px){
  .site-nav .wrap{ padding:0 18px; }
  .nav-item{ font-size:13px; }
  .nav-brand{ font-size:15.5px; }
}

/* ============ HERO ============ */
.hero-media{ padding-top:60px !important; padding-bottom:20px !important; display:flex; justify-content:center; }
.hero-media .pill{
  width:100%; max-width:520px; aspect-ratio:16/11;
  border-radius:280px;
  overflow:hidden;
  background:var(--placeholder);
}
.hero-media .pill img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){
  .hero-media{ padding-top:36px !important; padding-bottom:8px !important; }
  .hero-media .pill{ max-width:300px; aspect-ratio:1/1; border-radius:200px; }
  .hero-title{ padding-top:20px !important; padding-bottom:26px !important; }
  .hero-welcome, .hero-quote, .hero-social{ padding-top:22px !important; padding-bottom:22px !important; }
}

.hero-title{ padding-top:34px !important; padding-bottom:40px !important; }
.hero-title h1{
  font-size:clamp(46px,8vw,104px);
  line-height:.94;
  letter-spacing:-.01em;
}
.hero-title h1 span{ display:block; }
.hero-title h1 .line-2{ text-align:right; }
@media (max-width:640px){
  .hero-title h1 .line-2{ text-align:left; }
}

.hero-social{ display:flex; flex-direction:column; gap:6px; justify-content:flex-start; padding-top:34px !important; }
.hero-social a{ font-size:14px; color:var(--ink-soft); transition:color .2s ease; }
.hero-social a:hover{ color:var(--accent); }

.hero-welcome{ grid-column:2 / span 1; }
.hero-welcome p{
  font-family:var(--serif);
  font-size:19px; line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.01em;
}
@media (max-width:900px){ .hero-welcome{ grid-column:auto; } }

.hero-quote{ padding-top:0 !important; }
.hero-quote blockquote{
  font-size:13.5px; color:var(--ink-soft); line-height:1.7; max-width:340px;
  position:relative; padding-left:6px;
}

.accordion-row{ padding:0 !important; }
.accordion-row summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  font-family:var(--serif); font-size:17px;
}
@media (max-width:640px){
  .accordion-row summary{ padding:18px 20px; font-size:15px; }
  .accordion-body{ padding:0 20px 26px; }
  .accordion-row summary .circle{ width:28px; height:28px; }
}
.accordion-row summary::-webkit-details-marker{ display:none; }
.accordion-row summary .circle{
  width:34px; height:34px; border:1px solid var(--line);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .3s ease;
  flex-shrink:0;
}
.accordion-row[open] summary .circle{ transform:rotate(90deg); }
.accordion-row:hover summary .circle{ background:var(--paper); }
.accordion-body{ padding:0 26px 30px; color:var(--ink-soft); font-size:15px; max-width:560px; }
.accordion-body p{ margin-bottom:14px; }
.accordion-body .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.accordion-body .tags li{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ink); padding:7px 14px; border-radius:100px;
}

/* ============ OBRAS ============ */
.obras-section{ padding:110px 0 90px; }
@media (max-width:700px){ .obras-section{ padding:70px 0 50px; } }
.obras-heading{
  font-size:clamp(40px,7vw,72px);
  padding-bottom:26px; margin-bottom:0;
  border-bottom:1px solid var(--line);
}
.obras-grid{
  display:grid; grid-template-columns:1fr 1fr; 
  border-top:0;
}
.obra-card{ border-right:1px solid var(--line); padding:44px 40px 0 0; }
.obra-card:nth-child(2n){ border-right:none; padding-left:40px; padding-right:0; }
.obra-frame{ aspect-ratio:4/3; overflow:hidden; background:var(--placeholder); margin-bottom:18px; }
.obra-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.obra-card a:hover .obra-frame img{ transform:scale(1.04); }
.obra-meta{ font-size:12.5px; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:6px; }
.obra-title-row{ display:flex; align-items:center; justify-content:space-between; padding-bottom:44px; }
.obra-title{ font-family:var(--serif); font-size:21px; }

@media (max-width:700px){
  .obras-section{ padding:60px 0 40px; }
  .obras-heading{ padding-bottom:18px; }
  .obras-grid{ grid-template-columns:1fr; gap:0; }
  .obra-card, .obra-card:nth-child(2n){ border-right:none; padding:0 0 40px !important; }
  .obra-title{ font-size:18px; }
  .medium-banner{ margin-top:50px; }
  .medium-banner p{ font-size:26px; padding:14px 0; }
}

.obras-more{ text-align:center; margin-top:20px; }
.obras-more a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--ink); padding-bottom:4px;
}

/* medium statement banner */
.medium-banner{ margin-top:90px; }
.medium-banner p{
  font-family:var(--serif);
  font-size:clamp(28px,5.4vw,54px);
  text-align:center;
  text-transform:uppercase;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.medium-banner p:last-child{ border-bottom:1px solid var(--line); }

/* ============ CONTACTO ============ */
.contact-section{ padding:110px 0 90px; position:relative; }
.contact-section::before{
  content:""; position:absolute; left:40px; top:0; bottom:0; width:2px; background:var(--accent);
}
.contact-heading{
  font-style:italic; font-weight:400;
  font-size:clamp(44px,8vw,88px);
  border-bottom:1px solid var(--line);
  padding-bottom:30px; margin-bottom:50px;
}
@media (max-width:640px){
  .contact-section{ padding:64px 0 60px; }
  .contact-section::before{ left:18px; }
  .contact-heading{ padding-bottom:20px; margin-bottom:32px; }
}
@media (max-width:480px){
  .contact-form input, .contact-form textarea, .contact-form button{ padding:14px 18px; font-size:14px; }
}
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

.contact-info p{ font-size:14px; color:var(--ink-soft); margin-bottom:6px; }
.contact-info .email-link{ display:inline-flex; gap:6px; font-size:15px; color:var(--ink); margin-bottom:30px; }
.contact-info .email-link:hover{ color:var(--accent); }
.contact-info .social-list{ display:flex; flex-direction:column; gap:6px; }
.contact-info .social-list a{ font-size:14px; color:var(--ink-soft); }
.contact-info .social-list a:hover{ color:var(--accent); }

.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-form input, .contact-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:100px;
  padding:16px 22px;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--ink);
  background:transparent;
}
.contact-form textarea{ border-radius:22px; resize:vertical; min-height:120px; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--accent); }
.contact-form button{
  border:1px solid var(--ink);
  border-radius:100px;
  padding:16px 22px;
  background:transparent;
  font-style:italic;
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.contact-form button:hover{ background:var(--ink); color:#fff; }
.form-notice{
  padding:14px 20px; border-radius:12px; font-size:14px; margin-bottom:8px;
}
.form-notice.ok{ background:#EAF1E8; color:#33502F; }
.form-notice.err{ background:#F4E7E4; color:#7A3B2F; }

/* ============ FOOTER ============ */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--ink-soft);
}
@media (max-width:560px){ .site-footer{ flex-direction:column; gap:8px; text-align:center; } }
.site-footer .made-with{ color:var(--bg); }

/* ============ AJUSTES FINOS < 480px ============ */
@media (max-width:480px){
  .wrap{ padding:0 18px; }
  .hero-welcome p{ font-size:16.5px; }
  .hero-quote blockquote{ font-size:13px; }
  .obras-heading{ font-size:38px; }
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }