/*
Theme Name: ArtivaDrops by Artiva Latam
Theme URI: https://loop.artivalatam.com
Author: Artiva Latam
Description: Tema propio para ArtivaDrops — el tablón de lanzamientos de Artiva Latam. Cursos, herramientas, merch y comunidad.
Version: 1.6.9
Text Domain: loop
*/
/* ===========================================================
   LOOP BY ARTIVA LATAM — style.css
   Estilos GLOBALES, usados por todas las páginas.
   Paleta tomada de artivalatam.com (violeta + lima + crema)
   =========================================================== */

:root{
  --paper:#F7F4EE;
  --surface:#FFFFFF;
  --ink:#1B1B1B;
  --ink-soft:#75705F;
  --violet:#5B27FF;
  --violet-soft:#E7DFFF;
  --lime:#C6FF3D;
  --lime-soft:#EEFAC7;
  --line:#E7E1D3;
  --card:#FFFFFF;
  --code-bg:#0F0D22;
  --radius:22px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  font-weight:400;
  line-height:1.45;
  overflow-x:hidden;
}
.mono{ font-family:'Space Mono', monospace; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-0.01em; }

/* grano riso sutil sobre el papel */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: radial-gradient(var(--ink) 0.5px, transparent 0.5px);
  background-size:14px 14px;
  opacity:0.045;
  pointer-events:none;
  z-index:0;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }
@media (max-width:480px){ .wrap{ padding:0 18px; } }

/* ============ header (header.php) ============ */
header{ padding:34px 0 0; }
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-size:20px; }
.brand .logo{ height:28px; width:auto; display:block; }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.15; font-weight:500; }
.brand .brand-text .by{ font-size:11px; color:var(--ink-soft); font-weight:400; letter-spacing:0.01em; }
.topbar nav{ display:flex; gap:20px; font-size:14px; }
@media (max-width:820px){ .topbar nav{ display:none; } }
.topbar nav a{ color:var(--ink-soft); transition:color .15s ease; }
.topbar nav a:hover, .topbar nav a.active{ color:var(--ink); }
.topbar .stamp{
  font-size:12px; color:var(--ink-soft);
  border:1px solid var(--ink-soft); border-radius:100px;
  padding:5px 12px;
}
@media (max-width:640px){ .topbar .stamp{ display:none; } }
.topbar-right{ display:flex; align-items:center; gap:14px; }

/* ============ botón hamburguesa (solo <820px) ============ */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px; height:38px;
  border-radius:10px;
  border:1.5px solid var(--ink);
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}
@media (max-width:820px){ .nav-toggle{ display:flex; } }
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ panel de nav mobile ============ */
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:0 0 20px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .25s ease, opacity .2s ease;
}
@media (max-width:820px){ .mobile-nav{ display:flex; } }
.mobile-nav.is-open{ max-height:520px; opacity:1; }
.mobile-nav a{
  padding:12px 14px;
  border-radius:12px;
  color:var(--ink-soft);
  font-size:15px;
}
.mobile-nav a:hover{ background:var(--surface); }
.mobile-nav a.active{ background:var(--violet-soft); color:var(--ink); }

/* evita que el fondo haga scroll con el menú abierto */
body.nav-open{ overflow:hidden; }

/* ============ hero board ============ */
.board{
  margin-top:16px;
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:20px;
}
@media (max-width:860px){ .board{ grid-template-columns:1fr; } }

.poster{
  color:#fff;
  border-radius:var(--radius);
  padding:44px;
  position:relative;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transform:rotate(-0.6deg);
}
@media (max-width:480px){
  .poster{ padding:28px 22px; min-height:240px; border-radius:18px; }
}
.poster.violet{ background:var(--violet); }
.poster.ink{ background:var(--ink); }
.poster .tape{
  position:absolute; top:-14px; left:36px;
  width:70px; height:26px;
  background:rgba(255,255,255,0.55);
  transform:rotate(-4deg);
  border-radius:2px;
}
@media (max-width:480px){ .poster .tape{ left:24px; } }
.poster h1{
  font-size:clamp(28px, 7vw, 52px);
  max-width:16ch;
}
.poster p{
  margin-top:14px;
  max-width:40ch;
  font-size:15px;
  color:rgba(255,255,255,0.82);
}
@media (max-width:480px){ .poster p{ font-size:14px; } }
.poster .btn.solid-inv{
  align-self:flex-start;
  margin-top:22px;
  background:#fff;
  color:var(--ink);
  border-color:#fff;
}
.poster .btn.solid-inv:hover{ background:var(--lime); border-color:var(--lime); color:var(--ink); }

.stack{ display:flex; flex-direction:column; gap:20px; }
.mini{
  border-radius:var(--radius);
  padding:26px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
@media (max-width:480px){ .mini{ padding:20px; border-radius:18px; } }
.mini.lime{ background:var(--lime); transform:rotate(0.8deg); }
.mini.violet-soft{ background:var(--violet-soft); transform:rotate(-0.5deg); }
.mini .k{ font-size:12px; }
.mini .v{ font-family:'Space Mono', monospace; font-size:28px; margin-top:10px; overflow-wrap:anywhere; }
@media (max-width:480px){ .mini .v{ font-size:22px; } }

/* ============ section head ============ */
.section-head{
  margin-top:64px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:26px; }
@media (max-width:480px){
  .section-head{ flex-direction:column; align-items:flex-start; gap:6px; }
}
.section-head span{ font-size:12px; color:var(--ink-soft); }

/* ============ pinboard grid (tarjetas genéricas) ============ */
.pinboard{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media (max-width:900px){ .pinboard{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pinboard{ grid-template-columns:1fr; } }
.pinboard.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .pinboard.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pinboard.cols-3{ grid-template-columns:1fr; } }

/* Layout tipo bento para "Todo" en Explorar — cada card usa solo el
   alto que necesita (columnas independientes) en vez de estirarse
   todas a la altura de la más alta de su fila. Se quita con JS al
   filtrar por una categoría puntual, donde el grid parejo de siempre
   tiene más sentido (todas las cards visibles son del mismo tipo). */
.pinboard.masonry{
  display:block;
  column-count:4;
  column-gap:20px;
}
.pinboard.masonry > *{
  break-inside:avoid;
  margin-bottom:20px;
}
@media (max-width:900px){ .pinboard.masonry{ column-count:2; } }
@media (max-width:520px){ .pinboard.masonry{ column-count:1; } }

.note{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  border:1.5px solid var(--ink);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .18s ease;
}
.note:hover{ transform:translateY(-4px); }
.note.span2{ grid-column:span 2; }
@media (max-width:520px){ .note.span2{ grid-column:span 1; } }

.note .thumb{
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--ink-soft);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.c-spark{ background:var(--violet-soft); }
.thumb.c-sparky{ background:var(--lime-soft); }
.thumb.c-merch{ background:#FFE1EC; }
.thumb.c-comunidad{ background:#DFF3E4; }

.badge{
  align-self:flex-start;
  font-size:11px;
  padding:4px 10px;
  border-radius:100px;
  border:1px solid var(--ink);
}
.badge.on-violet{ border-color:#fff; color:#fff; }
.badge.discount{ background:var(--lime); border-color:var(--lime); color:var(--ink); font-weight:500; margin-left:8px; }
.note h3{ font-size:18px; }
.note p{ font-size:13px; color:var(--ink-soft); margin:0; }

.note-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:auto;
}
.btn{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  padding:9px 16px;
  border-radius:100px;
  border:1.5px solid var(--ink);
  background:transparent;
  cursor:pointer;
  color:var(--ink);
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.solid{ background:var(--violet); border-color:var(--violet); color:#fff; }
.btn.solid:hover{ background:var(--ink); border-color:var(--ink); }
.btn:disabled, .btn[disabled]{ opacity:0.45; cursor:not-allowed; }
.price{ font-family:'Space Mono', monospace; font-size:14px; }

/* ============ filter chips ============ */
.chips{ display:flex; flex-wrap:wrap; gap:10px; row-gap:24px; margin-top:22px; }
.chip{
  font-size:13px;
  padding:10px 18px;
  border-radius:100px;
  border:1.5px solid var(--ink);
  cursor:pointer;
  color:var(--ink-soft);
}
.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
/* Los chips de Explorar ahora son <button> (filtran por JS, ya no son
   links que sacan de la página) — sin este reset heredarían el fondo
   y la tipografía por defecto del navegador para botones. */
.chips button.chip{ background:none; font-family:inherit; appearance:none; -webkit-appearance:none; }
/* El reset de arriba (button.chip) tiene más especificidad que .chip.active
   (una clase más: .chips + button + .chip vence a .chip.active) y le estaba
   ganando el fondo — el chip activo quedaba con texto claro sobre fondo
   claro (invisible, no "vacío"). Esta regla es más específica que ambas. */
.chips button.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ============ strip banner ============ */
.strip{
  margin-top:64px;
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--radius);
  padding:40px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
}
@media (max-width:760px){ .strip{ grid-template-columns:1fr; } }
@media (max-width:480px){ .strip{ padding:24px; border-radius:18px; margin-top:48px; } }
.strip h3{ font-size:clamp(20px, 5vw, 26px); color:#fff; max-width:22ch; }
.strip p{ color:#B7B7D6; font-size:14px; margin-top:8px; }
.strip .btn{ border-color:#fff; color:#fff; white-space:nowrap; }
.strip .btn:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }

/* ============ contenido de páginas producto / curso / proyecto ============ */
.prose{ max-width:64ch; color:var(--ink-soft); font-size:15px; margin-top:14px; }

.changelog{ margin-top:24px; display:flex; flex-direction:column; }
.changelog li{
  list-style:none;
  display:flex;
  gap:18px;
  padding:16px 0;
  border-top:1px solid var(--line);
  font-size:14px;
}
.changelog li:first-child{ border-top:none; }
.changelog .cv{ font-family:'Space Mono',monospace; color:var(--ink-soft); min-width:64px; }

.terminal{
  background:var(--ink);
  color:#DCE8DD;
  border-radius:var(--radius);
  padding:24px;
  font-family:'Space Mono', monospace;
  font-size:13px;
  margin-top:24px;
}
.terminal .dots{ display:flex; gap:6px; margin-bottom:14px; }
.terminal .dots span{ width:9px; height:9px; border-radius:50%; background:#4B4870; }

.gallery-item{
  border-radius:var(--radius);
  border:1.5px solid var(--ink);
  overflow:hidden;
  background:var(--card);
}
.gallery-item .thumb{ border-radius:0; aspect-ratio:4/3; }
.gallery-item .meta{ padding:16px 18px; }
.gallery-item .meta .who{ font-size:12px; color:var(--ink-soft); margin-top:4px; }

.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:30px; }
@media (max-width:820px){ .pdp{ grid-template-columns:1fr; } }
.pdp .thumb{ aspect-ratio:1/1; border-radius:var(--radius); border:1.5px solid var(--ink); overflow:hidden; }
.pdp .price-lg{ font-family:'Space Mono',monospace; font-size:26px; margin-top:6px; }
.swatches{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.swatch{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--ink); cursor:pointer;
  padding:0; margin:0; appearance:none; -webkit-appearance:none;
  box-shadow:0 0 0 2px transparent;
  transition:box-shadow .15s ease, transform .15s ease;
}
.swatch:hover{ transform:translateY(-2px); }
.swatch.active{ box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--violet); }

.talla-chip{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  padding:9px 16px;
  border-radius:100px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.talla-chip:hover{ border-color:var(--violet); }
.talla-chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.btn.ghost-lime{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn.ghost-lime:hover{ background:var(--ink); color:var(--paper); }

/* ============ formularios ============ */
.form-card{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-input, .form-textarea, .form-select{
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  padding:12px 16px;
  border-radius:14px;
  border:1.5px solid var(--ink);
  background:var(--surface);
  color:var(--ink);
  width:100%;
}
.form-textarea{ min-height:100px; resize:vertical; }
.form-input:focus, .form-textarea:focus, .form-select:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.form-note{ font-size:12px; color:var(--ink-soft); }
.form-actions{ display:flex; justify-content:flex-end; }

.cta-group{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
@media (max-width:480px){
  .cta-group{ flex-direction:column; }
  .cta-group .btn{ width:100%; text-align:center; }
}

.newsletter{
  margin-top:26px;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-input{
  font-family:'Space Grotesk', sans-serif;
  padding:11px 16px;
  border-radius:100px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  min-width:220px;
  flex:1 1 220px;
}
@media (max-width:480px){
  .newsletter-form{ flex-direction:column; width:100%; }
  .newsletter-input{ min-width:0; width:100%; flex:none; }
  .newsletter-form .btn{ width:100%; text-align:center; }
}

/* apps de software: bloque con dos columnas (info + capturas) */
.app-block{ margin-top:26px; flex-direction:column; }
.app-block .app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:760px){ .app-block .app-grid{ grid-template-columns:1fr; } }
.app-block .app-info{ display:flex; flex-direction:column; gap:14px; }
.app-block .app-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.app-block .app-shots{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.app-block .app-shots .wide{ grid-column:span 2; }

footer{
  margin-top:70px;
  padding:30px 0 50px;
  font-size:12px;
  color:var(--ink-soft);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid var(--line);
  width:100%;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid .k{ font-size:12px; margin-bottom:12px; color:var(--ink-soft); }
.footer-grid .links{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.footer-grid p{ max-width:32ch; color:var(--ink-soft); font-size:13px; }
.footer-bottom{
  display:flex; justify-content:space-between;
  width:100%; padding-top:20px; font-size:12px; color:var(--ink-soft);
}
@media (max-width:520px){ .footer-bottom{ flex-direction:column; gap:8px; } }

:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

/* ===========================================================
   Ajustes para el markup real de wp_nav_menu()
   (WordPress envuelve cada link en <li> dentro de un <ul>,
   partials.js generaba <a> sueltos — el flex ahora va en el <ul>)
   =========================================================== */
.topbar nav ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:4px; list-style:none; margin:0; padding:0; width:100%; }
.topbar nav li, .mobile-nav li{ display:flex; }
.topbar nav li.current-menu-item a, .mobile-nav li.current-menu-item a{ color:var(--ink); }
.mobile-nav li.current-menu-item a{ background:var(--violet-soft); }