/*
Theme Name: VictorRM Landing Page
Theme URI: https://victorrm.com/
Author: Victor Rodriguez
Description: Landing page theme with lightweight blog support (Markdown posts).
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: victorrm
*/


/*Langing page styles*/
:root {
      --bg: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --muted2: #475569;
      --line: #e5e7eb;
      --card: #ffffff;
      --shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 8px 28px rgba(15, 23, 42, .06);
      --radius: 20px;
      --radius2: 14px;
      --max: 980px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px
    }

    header.topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: saturate(160%) blur(10px);
      background: rgba(255, 255, 255, .78);
      border-bottom: 1px solid rgba(229, 231, 235, .9);
    }

    .nav {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      font-weight: 600;
      letter-spacing: -.01em
    }

    nav a {
      color: var(--muted);
      padding: 8px 10px;
      border-radius: 12px;
      font-size: 14px;
    }

    nav a:hover {
      background: #f8fafc;
      color: var(--text)
    }

    @media (max-width:720px) {
      /* IMPORTANTE:
         Antes esto ocultaba TODOS los <nav> en móvil, incluyendo el del header del theme.
         Lo limitamos a la topbar de la landing (si se usa). */
      header.topbar nav {
        display: none
      }
    }

    .hero {
      padding-top: 20px;
      text-align: center;
    }

    .hero-inner {
      max-width: 740px;
      margin: 0 auto
    }

    .avatar-wrap {
      width: 170px;
      height: 170px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #fff;
      box-shadow: 0 0 0 1px var(--line);
      margin: 0 auto;
    }

    .avatar-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(2.25);
      transform-origin: 47% 85%;
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }

    .hero h1 {
      margin: 0;
      font-size: 44px;
      font-weight: 650;
      letter-spacing: -0.03em;
    }

    .role {
      margin: 10px 0 18px;
      font-size: 18px;
      font-weight: 500;
      color: var(--muted);
    }

    .intro {
      margin: 0 auto 26px;
      font-size: 17px;
      color: var(--muted2);
    }

    .actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin: 18px 0 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      font-size: 14px;
      font-weight: 550;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
      transition: transform .14s ease, background .14s ease, border-color .14s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .btn.primary {
      background: var(--text);
      border-color: var(--text);
      color: #fff;
    }

    .btn.primary:hover {
      background: #111c33
    }

    .social {
      display: flex;
      justify-content: center;
      gap: 12px;
    }

    .social a {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
      transition: all .15s ease;
    }

    .social a:hover {
      color: var(--text);
      border-color: #cbd5e1;
      transform: translateY(-2px);
      background: #f8fafc;
    }

    section {
      padding: 86px 0;
      border-top: 1px solid var(--line);
    }

    h2 {
      font-size: 28px;
      margin: 0 0 14px;
      letter-spacing: -0.02em;
    }

    p {
      margin: 0 0 14px;
      color: var(--muted2)
    }

    .lead {
      font-size: 16px;
      color: var(--muted2);
      max-width: 68ch
    }

    .grid {
      display: grid;
      gap: 22px
    }

    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    @media (max-width:900px) {

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr
      }

      .hero h1 {
        font-size: 38px
      }
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      box-shadow: var(--shadow);
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 16px;
      letter-spacing: -.01em;
    }

    .tagwrap {
      margin-top: 10px
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      margin: 0 8px 8px 0;
    }

    /* Forms */
    form {
      display: grid;
      gap: 12px
    }

    label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600
    }

    input,
    textarea {
      width: 100%;
      padding: 14px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color .12s ease, box-shadow .12s ease;
    }

    input:focus,
    textarea:focus {
      border-color: #cbd5e1;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, .25);
    }

    textarea {
      min-height: 130px;
      resize: vertical
    }

    .note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px
    }

    /* Mensajes de Mailchimp con tu estilo */
    .response {
      font-size: 12px;
      margin-top: 8px;
      color: var(--muted2);
    }

    footer {
      padding: 36px 0;
      border-top: 1px solid var(--line);
      text-align: center;
      font-size: 13px;
      color: var(--muted);
    }

    .reveal {
      opacity: 0;
      transform: translateY(10px);
      transition: .55s ease
    }

    .reveal.show {
      opacity: 1;
      transform: none
    }
    
/*Langing page styles END*/

/* Blog base styles (landing keeps its own inline CSS) */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --max:980px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.75 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
a{color:inherit}
.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}
.site-header{
  border-bottom:1px solid var(--line);
  padding:5px 0;
}
.site-header .brand{
  font-weight:700;
  text-decoration:none;
}
.site-nav{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}
.site-nav .links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.site-nav .links a{
  text-decoration:none;
  color:var(--muted);
}
.site-nav .links a:hover{color:var(--text)}
.main{
  padding:28px 0 56px;
}
.post-title{
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.15;
  margin:0 0 10px;
}
.post-meta{
  color:var(--muted);
  margin:0 0 26px;
  font-size:14px;
}
.post-content{
  font-size:18px;
}
.post-content h2{margin-top:1.8em}
.post-content h3{margin-top:1.4em}
.post-content p{margin:0 0 1em}
.post-content pre{
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafafa;
}
.post-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:0.95em;
}
.post-content blockquote{
  margin:1.2em 0;
  padding:0.6em 1em;
  border-left:4px solid var(--line);
  color:var(--muted);
}
.post-content ul, .post-content ol{padding-left:1.25em}
.site-footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  color:var(--muted);
  font-size:14px;
}




/* Blog layout only (minimal) */
.vrm-blog__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .vrm-blog__wrap {
    grid-template-columns: 1fr;
  }
}

.vrm-blog__sidebar ul {
  margin: 0;
  padding-left: 18px;
}

/* Blog base styles (landing keeps its own inline CSS) END */


/* -----------------------------
   Menú hamburguesa (móvil)
------------------------------ */

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:8px 10px;
  font-size:28px;
  line-height:1;
  color: var(--text);
}

.menu-toggle .icon-close{ display:none; }

.menu-backdrop{
  display:none;
}

@media (max-width:768px){
    
  .hero {
    padding-top: 70px;
  }
    
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:1001;
  }
  
  .site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: white;
  }

  /* Panel lateral */
  .site-header .primary-nav{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:min(85vw, 320px);
    background:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.12);
    padding:80px 20px 20px;
    transition:right .25s ease;
    z-index:1000;

    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .site-header .primary-nav a{
    color:var(--text);
    font-size:18px;
  }

  .menu-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:999;
  }

  /* Estado abierto */
  body.menu-open .site-header .primary-nav{
    right:0;
  }

  body.menu-open .menu-backdrop{
    display:block;
    opacity:1;
    pointer-events:auto;
  }

  /* Cambiar iconos ☰ -> ✕ */
  body.menu-open .menu-toggle .icon-burger{ display:none; }
  body.menu-open .menu-toggle .icon-close{ display:inline; }

  /* Bloquear scroll (opcional pero recomendado) */
  body.menu-open{ overflow:hidden; }

  /* En móvil, ocultamos el menú inline del header (lo reemplaza el panel) */
  .site-nav .links{
    gap:16px;
  }
}