{"id":13,"date":"2026-07-16T23:07:29","date_gmt":"2026-07-16T23:07:29","guid":{"rendered":"https:\/\/trazo.com.mx\/?page_id=13"},"modified":"2026-07-16T23:11:27","modified_gmt":"2026-07-16T23:11:27","slug":"home-page","status":"publish","type":"page","link":"https:\/\/trazo.com.mx\/?page_id=13","title":{"rendered":"Home page"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  :root {\n    --bg: #f7f5f0;\n    --ink: #1c1c1a;\n    --stone: #6b6862;\n    --accent: #fc5340;\n    --line: #dcd8cf;\n\n    --c-arquitectura: #e8552e;\n    --c-data: #3b6ea5;\n    --c-eco: #4c7a4c;\n    --c-proyectos: #7a5a9e;\n    --c-lab: #d4a92a;\n    --c-nosotros: #9a978f;\n    --c-contacto: #1c1c1a;\n  }\n\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  html, body { height: 100%; }\n\n  body {\n    font-family: 'Jost', sans-serif;\n    color: var(--ink);\n    background: var(--bg);\n  }\n\n  #trazo-home {\n    position: fixed;\n    top: 0; left: 0; right: 0; bottom: 0;\n    z-index: 2147483647;\n    width: 100vw;\n    height: 100vh;\n    background: var(--bg);\n    overflow: hidden;\n  }\n\n  \/* ---------- menu ---------- *\/\n  .menu-toggle {\n    position: absolute;\n    top: 40px;\n    right: 40px;\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    border: 1px solid var(--ink);\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    z-index: 20;\n    padding: 0;\n  }\n\n  .menu-toggle svg { width: 20px; height: 20px; }\n\n  .menu-toggle .icon-close { display: none; }\n  #trazo-home.menu-open .menu-toggle .icon-open { display: none; }\n  #trazo-home.menu-open .menu-toggle .icon-close { display: block; }\n\n  .menu-panel {\n    position: absolute;\n    top: 106px;\n    right: 40px;\n    background: var(--bg);\n    border: 1px solid var(--line);\n    padding: 26px 30px;\n    min-width: 210px;\n    z-index: 19;\n    opacity: 0;\n    transform: translateY(-8px);\n    pointer-events: none;\n    transition: opacity 0.25s ease, transform 0.25s ease;\n  }\n\n  #trazo-home.menu-open .menu-panel {\n    opacity: 1;\n    transform: translateY(0);\n    pointer-events: auto;\n  }\n\n  .menu-panel a {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    text-decoration: none;\n    color: var(--ink);\n    font-size: 0.72rem;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    font-weight: 500;\n    padding: 9px 0;\n    transition: opacity 0.15s ease;\n  }\n\n  .menu-panel a:hover { opacity: 0.55; }\n\n  .menu-panel a .dash {\n    width: 18px;\n    height: 2px;\n    flex-shrink: 0;\n  }\n\n  .menu-panel .sep {\n    border: none;\n    border-top: 1px solid var(--line);\n    margin: 8px 0;\n  }\n\n  \/* ---------- hero ---------- *\/\n  .hero {\n    position: relative;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 0 24px;\n  }\n\n  .logo-svg {\n    width: clamp(90px, 12vw, 140px);\n    height: auto;\n    margin-bottom: 44px;\n  }\n\n  .logo-svg polygon {\n    fill: none;\n    stroke: var(--accent);\n    stroke-width: 108;\n    stroke-linejoin: miter;\n    stroke-miterlimit: 4;\n  }\n\n  .tagline {\n    font-size: clamp(0.85rem, 1.6vw, 1.15rem);\n    letter-spacing: 0.28em;\n    text-transform: uppercase;\n    font-weight: 500;\n    opacity: 0;\n    transform: translateY(8px);\n  }\n\n  .tagline .accent { color: var(--accent); }\n\n  .scroll-cue {\n    position: absolute;\n    bottom: 56px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    opacity: 0;\n  }\n\n  .scroll-cue .rule {\n    width: 1px;\n    height: 52px;\n    background: var(--stone);\n  }\n\n  .scroll-cue .label {\n    font-size: 0.65rem;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: var(--stone);\n    line-height: 1.6;\n    text-align: center;\n    font-weight: 500;\n  }\n\n  @keyframes fadeUp {\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  #trazo-home.play .tagline {\n    animation: fadeUp 0.8s ease-out 1.5s forwards;\n  }\n  #trazo-home.play .scroll-cue {\n    animation: fadeUp 0.8s ease-out 1.8s forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #trazo-home.play .tagline,\n    #trazo-home.play .scroll-cue {\n      animation: none !important;\n      opacity: 1 !important;\n      transform: none !important;\n    }\n  }\n\n  @media (max-width: 560px) {\n    .menu-toggle { top: 24px; right: 24px; width: 48px; height: 48px; }\n    .menu-panel { top: 82px; right: 24px; }\n  }\n<\/style>\n\n\n\n<div id=\"trazo-home\">\n\n  <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"Abrir men\u00fa\">\n    <svg class=\"icon-open\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><line x1=\"3\" y1=\"7\" x2=\"21\" y2=\"7\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"17\" x2=\"21\" y2=\"17\"\/><\/svg>\n    <svg class=\"icon-close\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\"\/><line x1=\"19\" y1=\"5\" x2=\"5\" y2=\"19\"\/><\/svg>\n  <\/button>\n\n  <nav class=\"menu-panel\">\n    <a href=\"\/arquitectura\"><span class=\"dash\" style=\"background:var(--c-arquitectura)\"><\/span>Arquitectura<\/a>\n    <a href=\"\/data\"><span class=\"dash\" style=\"background:var(--c-data)\"><\/span>Data<\/a>\n    <a href=\"\/eco\"><span class=\"dash\" style=\"background:var(--c-eco)\"><\/span>Eco<\/a>\n    <a href=\"\/proyectos\"><span class=\"dash\" style=\"background:var(--c-proyectos)\"><\/span>Proyectos<\/a>\n    <a href=\"\/7r420-lab\"><span class=\"dash\" style=\"background:var(--c-lab)\"><\/span>7R420 Lab<\/a>\n    <a href=\"\/nosotros\"><span class=\"dash\" style=\"background:var(--c-nosotros)\"><\/span>Nosotros<\/a>\n    <hr class=\"sep\">\n    <a href=\"\/contacto\"><span class=\"dash\" style=\"background:var(--c-contacto)\"><\/span>Contacto<\/a>\n  <\/nav>\n\n  <div class=\"hero\">\n    <svg class=\"logo-svg\" viewBox=\"0 0 593 942\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <polygon id=\"logoShape\" points=\"296.5,68.5 54,256 54,684 296,872 538,684 538,256\" \/>\n    <\/svg>\n\n    <p class=\"tagline\">Las grandes ideas inician con un <span class=\"accent\">Trazo<\/span><\/p>\n\n    <div class=\"scroll-cue\">\n      <div class=\"rule\"><\/div>\n      <div class=\"label\">Scroll<br>para explorar<\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n(function() {\n  var root = document.getElementById('trazo-home');\n  if (root.parentElement !== document.body) {\n    document.body.appendChild(root);\n  }\n\n  var shape = document.getElementById('logoShape');\n  var length = shape.getTotalLength();\n  shape.style.strokeDasharray = length;\n  shape.style.strokeDashoffset = length;\n  shape.style.transition = 'stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1)';\n\n  requestAnimationFrame(function() {\n    requestAnimationFrame(function() {\n      shape.style.strokeDashoffset = '0';\n      root.classList.add('play');\n    });\n  });\n\n  shape.addEventListener('transitionend', function() {\n    shape.style.transition = 'none';\n    shape.style.strokeDasharray = 'none';\n    shape.style.strokeDashoffset = '0';\n  });\n\n  var toggle = document.getElementById('menuToggle');\n  toggle.addEventListener('click', function() {\n    root.classList.toggle('menu-open');\n  });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Arquitectura Data Eco Proyectos 7R420 Lab Nosotros Contacto Las grandes ideas inician con un Trazo Scrollpara explorar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trazo.com.mx\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trazo.com.mx\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trazo.com.mx\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trazo.com.mx\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trazo.com.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":2,"href":"https:\/\/trazo.com.mx\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/trazo.com.mx\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/trazo.com.mx\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}