:root {
      --cream:    #F4EEE2;
      --cream2:   #EDE6D6;
      --terra:    #8A3830;
      --terra-lt: #B85C52;
      --sage:     #9BAF98;
      --yellow:   #E8C96A;
      --blue-el:  #7B8FB5;
      --warm-gray:#C4BAB0;
      --dark:     #2B2420;
      --mid:      #6B5E56;
      --grid-line: rgba(139,56,48,0.07);
      --grid-size: 32px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      max-width: 100%;
      overscroll-behavior-x: none;
    }

    body {
      background-color: var(--cream);
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: var(--grid-size) var(--grid-size);
      color: var(--dark);
      font-family: 'Outfit', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
      max-width: 100%;
      overscroll-behavior-x: none;
      position: relative;
    }

    img { display: block; max-width: 100%; }
    a   { color: inherit; text-decoration: none; }

    /*
      SPRITE de elementos_visuales.png — grilla 3 columnas × 2 filas:
      Fila 0: [espiral-sage] [loop-yellow] [estrellas]
      Fila 1: [squiggle-blue] [silla] [personaje]
      background-size: 300% 200% → background-position por celda:
        col0=0%  col1=50%  col2=100%
        row0=0%  row1=100%
    */
    .el {
      position: absolute;
      pointer-events: none;
      background-image: url('a573c5b08cad4f02.png');
      background-size: 300% 200%;
      mix-blend-mode: multiply;
    }
    .el-spiral { background-position: 0%   0%;   }
    .el-loop   { background-position: 50%  0%;   }
    .el-stars  { background-position: 100% 0%;   }
    .el-squig  { background-position: 0%   100%; }
    .el-chair  { background-position: 50%  100%; }
    .el-person { background-position: 100% 100%; }

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

    /* NAV */
    nav {
      position: fixed; top:0; left:0; right:0; z-index:100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 52px;
      background: linear-gradient(var(--cream) 65%, transparent);
    }
    .nav-logo img { height: 68px; width: auto; mix-blend-mode: multiply; }
    .nav-links { display:flex; gap:36px; list-style:none; }
    .nav-links a {
      font-size:.76rem; font-weight:400; letter-spacing:.14em;
      text-transform:uppercase; color:var(--mid);
      position:relative; transition:color .2s;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:-3px; left:0;
      width:0; height:1px; background:var(--terra); transition:width .3s;
    }
    .nav-links a:hover { color:var(--terra); }
    .nav-links a:hover::after { width:100%; }
    .nav-links a.active { color:var(--terra); }
    .nav-links a.active::after { width:100%; }

    /* HERO */
    #hero {
      min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
      align-items:center; padding:0 52px; position:relative; overflow:hidden;
    }
    .hero-left { display:flex; flex-direction:column; align-items:flex-start; padding:120px 0 80px; }
    .hero-label {
      font-family:'Cormorant Garamond',serif; font-style:italic;
      font-size:1.1rem; color:var(--mid); letter-spacing:.06em;
      margin-bottom:clamp(46px,8vh,90px); display:flex; align-items:center; gap:12px;
    }
    .hero-label::before { content:''; width:32px; height:1px; background:var(--terra); }
    .hero-logo-img { width:min(460px,84%); height:auto; mix-blend-mode:multiply; margin-bottom:clamp(50px,9vh,100px); }
    .hero-name { font-weight:300; font-size:.95rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mid); margin-bottom:14px; }
    .hero-tagline { font-family:'Caveat',cursive; font-size:1.35rem; color:var(--terra-lt); margin-bottom:clamp(50px,9vh,100px); }
    .hero-cta {
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid var(--terra); padding:12px 28px;
      font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
      color:var(--terra); transition:background .25s, color .25s;
    }
    .hero-cta:hover { background:var(--terra); color:var(--cream); }

    .hero-right { position:relative; padding:120px 0 80px; }
    .hero-render-wrap { position:relative; margin-top:40px; display:inline-block; width:100%; }
    .hero-render-link { display:block; position:relative; cursor:pointer; }
    .hero-render-img { width:100%; height:auto; box-shadow:4px 8px 28px rgba(43,36,32,.22); transform:rotate(1.5deg); transition:transform .7s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; will-change:transform; }
    .hero-render-link:hover .hero-render-img { transform:rotate(0deg) translateY(-8px) scale(1.025); box-shadow:8px 18px 44px rgba(43,36,32,.28); }
    .hero-render-tip {
      position:absolute; top:14px; left:50%;
      transform:translate(-50%,-6px) scale(.92);
      background:rgba(43,36,32,0.82);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      color:var(--cream);
      font-family:'Caveat',cursive; font-size:1.05rem; letter-spacing:.02em;
      padding:8px 18px; border-radius:30px;
      opacity:0; visibility:hidden; pointer-events:none;
      box-shadow:0 6px 22px rgba(43,36,32,.28), 0 1px 3px rgba(43,36,32,.18);
      border:1px solid rgba(255,255,255,.10);
      transition:opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s;
      white-space:nowrap; z-index:10;
    }
    .hero-render-tip::after {
      content:""; position:absolute; bottom:-5px; left:50%;
      width:10px; height:10px; background:inherit;
      transform:translateX(-50%) rotate(45deg);
      border-right:1px solid rgba(255,255,255,.10);
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .hero-render-link:hover .hero-render-tip {
      opacity:1; visibility:visible;
      transform:translate(-50%,0) scale(1);
      transition:opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
    }
    /* En touch devices: desactivar todo el comportamiento hover (cartel +
       transform de la imagen) Y bloquear toda interacción del link.
       El render queda como imagen 100% decorativa. */
    @media (hover: none), (pointer: coarse) {
      .hero-render-tip { display: none !important; }
      .hero-render-link:hover .hero-render-img {
        transform: rotate(1.5deg) !important;
        box-shadow: 4px 8px 28px rgba(43,36,32,.22) !important;
      }
      .hero-render-link {
        cursor: default !important;
        pointer-events: none !important;
      }
    }
    .hero-render-phrase {
      font-family:'Caveat',cursive; font-size:1.55rem; font-weight:600;
      color:var(--terra); margin-top:14px; text-align:right; letter-spacing:.01em; opacity:.9;
    }
    /* stub para no romper referencias */
    .hero-card { display:none; }
    .hero-card-1 { width:230px; top:70px; right:70px; transform:rotate(2.5deg); }
    .hero-card-2 { width:185px; bottom:80px; right:210px; transform:rotate(-3deg); }
    .img-placeholder {
      width:100%; background:var(--cream2);
      display:flex; align-items:center; justify-content:center;
    }
    .img-placeholder span { font-family:'Caveat',cursive; font-size:.82rem; color:var(--warm-gray); text-align:center; padding:8px; }
    .hero-card-label { font-family:'Caveat',cursive; font-size:.82rem; color:var(--mid); text-align:center; margin-top:10px; }

    .scroll-hint {
      position:absolute; bottom:36px; left:52px;
      display:flex; align-items:center; gap:10px;
      font-family:'Cormorant Garamond',serif; font-style:italic;
      font-size:.76rem; color:var(--warm-gray); letter-spacing:.06em;
    }
    .scroll-line { width:1px; height:40px; background:var(--warm-gray); animation:scrollDrop 1.9s ease-in-out infinite; }
    @keyframes scrollDrop {
      0%  { transform:scaleY(0); transform-origin:top; }
      50% { transform:scaleY(1); transform-origin:top; }
      51% { transform:scaleY(1); transform-origin:bottom; }
      100%{ transform:scaleY(0); transform-origin:bottom; }
    }

    /* DIVIDER */
    .divider { max-width:1100px; margin:0 auto; padding:0 44px; line-height:0; }

    /* SECTION */
    section { padding:100px 52px; max-width:1200px; margin:0 auto; }
    .section-label {
      font-family:'Cormorant Garamond',serif; font-style:italic;
      font-size:1rem; letter-spacing:.1em; color:var(--terra);
      margin-bottom:12px; display:flex; align-items:center; gap:10px;
    }
    .section-label::after { content:''; max-width:60px; height:1px; flex:1; background:var(--terra); opacity:.45; }
    .section-title {
      font-family:'Cormorant Garamond',serif; font-weight:600;
      font-size:clamp(2.4rem,4vw,3.4rem); line-height:1.1;
      color:var(--dark); margin-bottom:48px;
    }

    /* SOBRE */
    #sobre { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start; position:relative; }
    .sobre-photo-wrap { position:relative; }
    .polaroid { background:white; padding:12px 12px 52px; box-shadow:4px 8px 28px rgba(43,36,32,.12); transform:rotate(-2deg); transition:transform .3s ease; }
    .polaroid:hover { transform:rotate(0deg) scale(1.02); }
    .polaroid-caption { font-family:'Caveat',cursive; font-size:1.2rem; color:var(--mid); text-align:center; margin-top:14px; }
    .tape { position:absolute; width:58px; height:20px; background:rgba(232,201,106,.55); top:-8px; left:50%; transform:translateX(-50%) rotate(-1deg); }
    .sobre-bio { font-size:1.02rem; line-height:1.82; color:var(--mid); margin-bottom:28px; }
    .sobre-bio strong { color:var(--dark); font-family:"Caveat",cursive; font-size:1.18em; font-weight:600; }
    .atributos { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
    .tag { font-family:'Caveat',cursive; font-size:1rem; padding:5px 14px; border-radius:100px; border:1px solid currentColor; }
    .tag-terra  { color:var(--terra); }
    .tag-sage   { color:#5a7a57; }
    .tag-yellow { color:#9a7a20; }
    .tag-gray   { color:var(--mid); border-color:var(--warm-gray); }
    .tag-blue   { color:var(--blue-el); }
    .sobre-skills { font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin-top:18px; }
    .sobre-skills span { display:inline-flex; align-items:center; gap:9px; margin:0; opacity:.88; transition:opacity .3s ease, color .3s ease; }
    .sobre-skills span:hover { opacity:1; color:var(--terra); }
    .skill-icon { width:18px; height:18px; flex-shrink:0; opacity:.78; filter:grayscale(100%); transition:opacity .3s ease, filter .3s ease, transform .3s ease; display:block; }
    .sobre-skills span:hover .skill-icon { opacity:1; transform:translateY(-1px); }
    .sobre-skills .skill-divider { width:1px; height:16px; background:rgba(107,94,86,.28); padding:0; margin:0; opacity:1; flex-shrink:0; align-self:center; }
    .sobre-skills .skill-divider:hover { opacity:1; }

    /* HABITAR */
    #habitar {
      height: 100vh;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: none;
      margin: 0;
      padding: clamp(70px,10vh,110px) 52px clamp(40px,6vh,70px);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }
    .habitar-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(4rem, 11vh, 9rem);
      color: var(--dark);
      line-height: 1;
      letter-spacing: -0.02em;
      margin-bottom: clamp(64px, 11vh, 140px);
      opacity: 0;
      position: relative;
      z-index: 1;
      text-align: center;
    }
    .habitar-title.typing { opacity: 1; }
    .habitar-title.typing::after {
      content: '|';
      display: inline-block;
      color: var(--terra);
      animation: blink .75s step-end infinite;
      margin-left: 2px;
    }
    .habitar-title.done::after { display: none; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .habitar-phrases {
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 5vh, 80px);
      width: 100%;
      max-width: 880px;
      position: relative;
      z-index: 1;
    }
    .habitar-frase {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.6rem, 3.6vh, 2.5rem);
      color: var(--dark);
      line-height: 1.3;
      margin: 0;
      opacity: 0;
      transform: translateY(22px) rotate(var(--frase-rot, 0deg));
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .habitar-frase.visible {
      opacity: 1;
      transform: translateY(0) rotate(var(--frase-rot, 0deg));
    }
    .habitar-hl { position: relative; display: inline; }
    .habitar-hl::before {
      content: '';
      position: absolute;
      top: 5px; bottom: -3px;
      left: -10px; right: -10px;
      background: linear-gradient(
        176deg,
        rgba(232,201,106,0.00) 0%,
        rgba(232,201,106,0.54) 9%,
        rgba(232,201,106,0.43) 35%,
        rgba(232,201,106,0.58) 62%,
        rgba(232,201,106,0.39) 88%,
        rgba(232,201,106,0.00) 100%
      );
      border-radius: 2px;
      z-index: -1;
      transform: scaleX(0) rotate(-0.4deg);
      transform-origin: left center;
      transition: transform 0.78s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .habitar-frase.visible .habitar-hl::before {
      transform: scaleX(1) rotate(-0.4deg);
      transition-delay: 0.44s;
    }
    .hab-ghost { position: absolute; pointer-events: none; user-select: none; }
    /* HABITAR PAPELES */
    .hab-papel { position:absolute; pointer-events:none; user-select:none; z-index:0; }
    .hab-papel-left  { left:0;  top:0; bottom:0; width:clamp(120px,16vw,210px); }
    .hab-papel-right { right:0; top:55%; bottom:0; width:clamp(120px,16vw,210px); }
    .hab-polaroid { position:absolute; background:#f4ece0; padding:7px 7px 30px; box-shadow:1px 3px 10px rgba(0,0,0,0.13); opacity:0.92; cursor:zoom-in; z-index:2; transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, opacity .4s ease; will-change:transform; }
    .hab-polaroid img { display:block; width:100%; height:clamp(165px,25vh,260px); object-fit:cover; object-position:center; cursor:zoom-in; }
    .pol-top-left    { left:clamp(20px,4vw,80px);  top:38%;     width:clamp(215px,21vw,310px); transform:rotate(3.5deg); }
    .pol-bottom-right{ right:clamp(20px,4vw,80px); bottom:clamp(24px,5vh,58px); width:clamp(215px,21vw,320px); transform:rotate(-2.8deg); }
    .pol-top-left:hover    { transform:rotate(0deg) translateY(-8px) scale(1.05); box-shadow:6px 14px 32px rgba(43,36,32,.22); opacity:1; z-index:5; }
    .pol-bottom-right:hover{ transform:rotate(0deg) translateY(-8px) scale(1.05); box-shadow:6px 14px 32px rgba(43,36,32,.22); opacity:1; z-index:5; }
    .hab-deco { position:absolute; pointer-events:none; }

/* PROYECTOS */
    #proyectos { padding-top:60px; position:relative; }
    #proyectos .section-title { margin-bottom:60px; }
    .projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
    .project-card { cursor:pointer; }
    .project-polaroid { background:white; padding:10px 10px 48px; box-shadow:3px 6px 20px rgba(43,36,32,.1); transition:transform .35s ease, box-shadow .35s ease; }
    .project-card:nth-child(1) .project-polaroid { transform:rotate(-1.5deg); }
    .project-card:nth-child(2) .project-polaroid { transform:rotate(1.2deg); }
    .project-card:nth-child(3) .project-polaroid { transform:rotate(-0.7deg); }
    .project-card:nth-child(4) .project-polaroid { transform:rotate(1.8deg); }
    .project-card:nth-child(5) .project-polaroid { transform:rotate(-1.1deg); }
    .project-card:hover .project-polaroid { transform:rotate(0deg) translateY(-6px) !important; box-shadow:6px 14px 36px rgba(43,36,32,.18); }
    .project-img { width:100%; aspect-ratio:4/3; object-fit:cover; }
    .project-img-ph { width:100%; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
    .ph-terra  { background:#EDD5D3; }
    .ph-sage   { background:#D6E4D5; }
    .ph-yellow { background:#F0E6C0; }
    .ph-gray   { background:var(--cream2); }
    .project-img-ph .ph-icon { font-size:1.7rem; opacity:.4; }
    .project-img-ph .ph-text { font-family:'Caveat',cursive; font-size:.82rem; color:var(--mid); opacity:.7; text-align:center; padding:0 8px; }
    .project-caption { font-family:'Caveat',cursive; font-size:.92rem; color:var(--mid); text-align:center; padding-top:10px; }
    .project-meta { margin-top:16px; }
    .project-meta h3 { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.15rem; color:var(--dark); margin-bottom:4px; }
    .project-meta p { font-size:.78rem; color:var(--warm-gray); letter-spacing:.05em; }
    .proj-cat { display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terra); margin-top:8px; }
    .proj-number { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:300; color:var(--terra); opacity:.28; margin-bottom:-6px; }

    /* CONTACTO */
    #contacto { text-align:center; padding:120px 52px; max-width:680px; margin:0 auto; position:relative; }
    .contact-eyebrow { font-family:'Caveat',cursive; font-size:1.3rem; color:var(--terra-lt); margin-bottom:12px; }
    #contacto .section-title { font-size:clamp(2rem,4vw,3rem); margin-bottom:20px; }
    .contact-sub { font-size:1rem; color:var(--mid); line-height:1.7; margin-bottom:48px; }
    .contact-email { display:inline-block; font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-style:italic; color:var(--terra); border-bottom:1px solid var(--terra); padding-bottom:3px; margin-bottom:48px; transition:opacity .2s; }
    .contact-email:hover { opacity:.65; }
    .social-links { display:flex; justify-content:center; gap:28px; }
    .social-link { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); position:relative; transition:color .2s; }
    .social-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--terra); transition:width .3s; }
    .social-link:hover { color:var(--terra); }
    .social-link:hover::after { width:100%; }

    /* FOOTER */
    footer { text-align:center; padding:30px 52px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--warm-gray); border-top:1px solid rgba(196,186,176,.35); }
    .footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin-bottom:14px; }
    .footer-nav a { color:var(--warm-gray); transition:color .2s; }
    .footer-nav a:hover { color:var(--terra); }
    .footer-bottom { line-height:1.9; }
    .footer-brand { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--terra); font-size:.88rem; text-transform:none; letter-spacing:0; }
    .footer-social { color:var(--warm-gray); transition:color .2s; }
    .footer-social:hover { color:var(--terra); }

    /* RESPONSIVE */
    @media(max-width:900px){
      nav { padding:14px 24px; } .nav-links { gap:20px; }
      #hero { grid-template-columns:1fr; padding:120px 24px 60px; }
      .hero-right { display:none; }
      section { padding:70px 24px; }
      #sobre { grid-template-columns:1fr; gap:40px; }
      .projects-grid { grid-template-columns:1fr 1fr; gap:28px; }
      .divider { padding:0 24px; }
    }
    @media(max-width:600px){
      .projects-grid { grid-template-columns:1fr; }
      .nav-links { display:none; }
    }

    /* ============================================
       RESPONSIVE — ETAPA 1 (mobile/tablet)
       Solo overrides dentro de @media. Desktop intacto.
       NO toca: animaciones, habitar, position:absolute.
       ============================================ */

    /* Elementos del menú mobile: ocultos por default,
       solo se muestran dentro de @media. No afectan desktop. */
    .nav-toggle { display: none; }
    .nav-mobile-panel { display: none; }
    .nav-backdrop { display: none; }

    /* Touch devices: desactivar cursor custom */
    @media (hover: none), (pointer: coarse) {
      body { cursor: auto !important; }
      a, button, .project-card, .hero-cta, .nav-links a,
      .social-link, .back-btn, .contact-email, .nav-back,
      .nav-mobile-panel a, .nav-toggle {
        cursor: auto !important;
      }
      .nav-toggle { cursor: pointer !important; }
      #custom-cursor { display: none !important; }
    }

    /* ─── TABLET (≤1024px) ─── */
    @media (max-width: 1024px) {
      nav { padding: 16px 32px; }
      .nav-links { gap: 24px; }
      #hero { padding: 0 32px; gap: 28px; }
      .hero-left  { padding: 110px 0 60px; }
      .hero-right { padding: 110px 0 60px; }
      .hero-logo-img { width: min(380px, 80%); }
      .scroll-hint { left: 32px; }
    }

    /* ─── MOBILE GRANDE / TABLET VERTICAL (≤768px) ─── */
    @media (max-width: 768px) {
      /* Nav: ocultar links desktop, mostrar hamburger */
      .nav-links { display: none !important; }

      nav { padding: 12px 20px; z-index: 1500; }
      .nav-logo img { height: 52px; }

      .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 38px; height: 38px;
        background: transparent; border: 0; padding: 0;
        cursor: pointer;
        position: relative; z-index: 1001;
      }
      .nav-toggle span {
        display: block; width: 26px; height: 1.5px;
        background: var(--dark);
        transition: transform .3s ease, opacity .3s ease;
        transform-origin: center;
      }
      .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
      .nav-toggle.open span:nth-child(2) { opacity: 0; }
      .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

      .nav-mobile-panel {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0;
        width: min(320px, 84vw);
        height: 100vh; height: 100dvh;
        background: var(--cream);
        padding: 100px 36px 40px;
        box-shadow: -6px 0 28px rgba(43,36,32,.18);
        transform: translateX(100%);
        transition: transform .45s cubic-bezier(.22,1,.36,1);
        z-index: 999;
        gap: 22px;
      }
      .nav-mobile-panel.open { transform: translateX(0); }
      .nav-mobile-panel a {
        display: block;
        width: 100%;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.45rem; color: var(--dark);
        padding: 14px 8px;
        margin: 0;
        border-bottom: 1px solid rgba(139,56,48,0.12);
        transition: color .2s ease, padding-left .25s ease;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(139,56,48,0.15);
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
      }
      .nav-mobile-panel a:hover,
      .nav-mobile-panel a:active { color: var(--terra); padding-left: 8px; }
      /* Sección actual: link en bordo/terra (mismo comportamiento que desktop) */
      .nav-mobile-panel a.active {
        color: var(--terra) !important;
        border-bottom-color: rgba(139,56,48,0.32);
      }

      /* === GRUPO PROYECTOS EXPANDIBLE === */
      .nav-project-group {
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .nav-project-row {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        border-bottom: 1px solid rgba(139,56,48,0.12);
      }
      .nav-project-row .nav-project-main {
        border-bottom: none !important;
        flex: 1;
      }
      .nav-project-toggle {
        background: transparent;
        border: none;
        color: var(--terra);
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-size: 1.6rem;
        line-height: 1;
        width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        margin-left: 4px;
        transition: transform .35s cubic-bezier(.22,1,.36,1), color .2s ease;
        -webkit-tap-highlight-color: rgba(139,56,48,0.15);
      }
      .nav-project-toggle:active { color: var(--terra-lt); }
      .nav-project-toggle.open {
        transform: rotate(45deg);
      }
      .nav-project-submenu {
        display: flex;
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .45s cubic-bezier(.22,1,.36,1),
                    opacity .35s ease,
                    margin .35s ease,
                    padding .35s ease;
        padding: 0 0 0 18px;
        margin: 0;
      }
      .nav-project-submenu.open {
        max-height: 340px;
        opacity: 1;
        margin: 6px 0 12px;
      }
      .nav-project-submenu a {
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.78rem !important;
        font-weight: 300 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        color: var(--mid) !important;
        padding: 12px 4px !important;
        border-bottom: 1px solid rgba(196,186,176,.25) !important;
      }
      .nav-project-submenu a:last-child {
        border-bottom: none !important;
      }
      .nav-project-submenu a.current {
        color: var(--terra) !important;
        font-weight: 400 !important;
      }

      .nav-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(43,36,32,0.35);
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
        z-index: 998;
      }
      .nav-backdrop.open {
        opacity: 1; visibility: visible;
        transition: opacity .3s ease;
      }
      body.nav-open { overflow: hidden; }

      /* HERO: en mobile mostrar render abajo (no ocultarlo) */
      #hero {
        grid-template-columns: 1fr;
        padding: 100px 20px 50px;
        min-height: auto;
        gap: 24px;
      }
      .hero-left  { padding: 20px 0 10px; }
      .hero-right { display: block; padding: 0 0 20px; }
      .hero-logo-img {
        width: min(320px, 78%);
        margin-bottom: clamp(28px, 5vh, 50px);
      }
      .hero-label   { margin-bottom: clamp(24px, 4vh, 50px); }
      .hero-tagline { font-size: 1.2rem; margin-bottom: clamp(28px, 5vh, 50px); }
      .hero-name    { font-size: .88rem; }
      .hero-cta     { padding: 11px 22px; font-size: .72rem; }
      .hero-render-img    { transform: rotate(1deg); }
      .hero-render-phrase { font-size: 1.3rem; }
      .scroll-hint { display: none; }
    }

    /* Burbujas de atributos en mobile: position:fixed para garantizar
       que NUNCA se corten, sin importar el overflow del padre.
       Aparecen como "toast" en la parte inferior del viewport. */
    @media (max-width: 768px) {
      .attr-bubble {
        position: fixed !important;
        top: auto !important;
        bottom: 28px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 380px !important;
        transform: translate(-50%, 20px) scale(.96) !important;
        transform-origin: bottom center !important;
        padding: 12px 20px !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        box-shadow: 0 10px 30px rgba(43,36,32,.28) !important;
        z-index: 9000 !important;
      }
      .attr-tag.open .attr-bubble {
        transform: translate(-50%, 0) scale(1) !important;
      }
    }

    /* ─── MOBILE PEQUEÑO (≤480px) ─── */
    @media (max-width: 480px) {
      nav { padding: 10px 16px; }
      .nav-logo img { height: 46px; }
      #hero { padding: 90px 16px 40px; }
      .hero-logo-img { width: min(280px, 85%); }
      .hero-label   { font-size: 1rem; }
      .hero-tagline { font-size: 1.1rem; }
      .hero-name    { font-size: .82rem; letter-spacing: .18em; }
      .hero-cta     { padding: 10px 20px; font-size: .7rem; }
      .hero-render-phrase { font-size: 1.15rem; }
    }

    /* ============================================
       CONTACTO · MOBILE polish
       (estrellitas más chicas, personaje más abajo,
        touch targets de social links, footer no break)
       ============================================ */
    @media (max-width: 768px) {
      /* Padding inferior reducido para acercar el footer a las redes */
      #contacto { padding-bottom: 50px !important; padding-top: 80px !important; }
      /* Estrellitas decorativas: chicas pero cerca del título */
      #contacto .el-stars {
        width: 110px !important;
        height: 117px !important;
        top: 10px !important;
        right: 8px !important;
        opacity: .32 !important;
      }
      /* Personaje: asoma un poco abajo izquierda, no tan exagerado */
      #contacto .el-person {
        width: 140px !important;
        height: 148px !important;
        bottom: -10px !important;
        left: -25px !important;
        opacity: .28 !important;
      }
      /* Touch targets más generosos para los links sociales */
      .social-links {
        gap: 6px !important;
        flex-wrap: wrap;
      }
      .social-link {
        padding: 12px 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      /* Footer: no romper "Buenos Aires" entre líneas */
      footer { padding: 26px 20px 28px; line-height: 1.7; }
      .footer-nav { gap: 2px 10px; margin-bottom: 16px; font-size: .68rem; letter-spacing: .12em; }
      .footer-nav a { padding: 6px 2px; display: inline-block; }
      .footer-nav span { opacity: .55; }
      .footer-bottom { font-size: .62rem; letter-spacing: .08em; line-height: 2; }
      .footer-brand { font-size: .82rem; }
      .footer-social { padding: 4px 2px; display: inline-block; }
    }

    /* Safe-area en iPhone con notch */
    @supports (padding: max(0px)) {
      @media (max-width: 768px) {
        nav   { padding-left: max(20px, env(safe-area-inset-left));
                padding-right: max(20px, env(safe-area-inset-right)); }
        #hero { padding-left: max(20px, env(safe-area-inset-left));
                padding-right: max(20px, env(safe-area-inset-right)); }
      }
    }

    /* ============================================
       HABITAR · MOBILE TIMELINE (etapa 3)
       Storytelling vertical con línea + dots
       Desktop intacto: todo va dentro de @media
       ============================================ */
    @media (max-width: 768px) {
      /* Ocultar TODAS las decoraciones laterales en mobile */
      #habitar .hab-papel,
      #habitar .hab-deco,
      #habitar .hab-ghost {
        display: none !important;
      }

      /* Layout vertical, flexbox para reordenar.
         CRÍTICO: override de height:100vh y justify-content:center del desktop,
         que estaban centrando verticalmente el contenido y haciendo que
         desborde por arriba del divider cuando el contenido era más alto
         que el viewport. */
      #habitar {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: auto !important;
        padding: 70px 24px 160px 60px !important;
        position: relative !important;
        overflow: visible !important;
      }

      /* Divider en mobile: ocultar el star/estrella del centro (que se
         deforma por preserveAspectRatio="none" y queda como aguja vertical) */
      .divider svg > g {
        display: none !important;
      }

      /* Línea vertical (timeline) sutil con gradiente */
      #habitar::before {
        content: '';
        position: absolute;
        left: 28px;
        top: 90px;
        bottom: 70px;
        width: 1px;
        background: linear-gradient(to bottom,
          transparent 0%,
          rgba(139,56,48,0.28) 6%,
          rgba(139,56,48,0.28) 94%,
          transparent 100%);
        pointer-events: none;
      }

      /* TÍTULO: orden 1, dot círculo abierto. Reservamos espacio (min-height)
         para que el observer detecte el elemento aunque empiece vacío. */
      #habitar .habitar-title {
        order: 1 !important;
        position: relative !important;
        margin: 0 0 36px !important;
        padding: 0 !important;
        text-align: left !important;
        font-size: clamp(2.7rem, 11.5vw, 3.6rem) !important;
        line-height: 1.05 !important;
        min-height: 1.1em !important;
        opacity: 1 !important;
      }
      #habitar .habitar-title::before {
        content: '';
        position: absolute;
        left: -39px;
        top: 16px;
        width: 14px; height: 14px;
        border: 2px solid var(--terra);
        border-radius: 50%;
        background: var(--cream);
        box-sizing: border-box;
        z-index: 2;
      }

      /* POLAROID 1 (top-left en desktop → orden 2 en mobile)
         Arranca invisible; aparece con .appear vía JS de reveal cronológico */
      #habitar .hab-polaroid.pol-top-left {
        order: 2 !important;
        position: relative !important;
        width: clamp(190px, 56vw, 250px) !important;
        margin: 0 0 40px 8px !important;
        padding: 8px 8px 32px !important;
        transform: rotate(-2.5deg) translateY(24px) !important;
        opacity: 0 !important;
        transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1) !important;
        left: auto !important; top: auto !important;
        right: auto !important; bottom: auto !important;
        align-self: flex-start;
      }
      #habitar .hab-polaroid.pol-top-left.appear {
        opacity: 1 !important;
        transform: rotate(-2.5deg) translateY(0) !important;
      }
      #habitar .hab-polaroid.pol-top-left img {
        height: clamp(150px, 26vh, 200px) !important;
      }
      #habitar .hab-polaroid.pol-top-left::before {
        content: '';
        position: absolute;
        left: -42px;
        top: 30px;
        width: 12px; height: 12px;
        background: var(--terra);
        border-radius: 50%;
        z-index: 2;
      }

      /* CONTENEDOR de frases: orden 3 */
      #habitar .habitar-phrases {
        order: 3 !important;
        width: 100% !important;
        margin: 0 0 36px !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 28px;
      }

      /* FRASES: limpiar rotación, padding y alineación inline */
      #habitar .habitar-frase {
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        rotate: 0deg !important;
        position: relative !important;
        font-size: 1.15rem !important;
        line-height: 1.55 !important;
      }
      #habitar .habitar-frase::before {
        content: '';
        position: absolute;
        left: -39px;
        top: 11px;
        width: 10px; height: 10px;
        background: var(--terra);
        border-radius: 50%;
        z-index: 2;
        transition: transform .5s ease, background .3s ease;
      }
      /* Cuando la frase se hace visible (reveal), el dot también se "enciende" */
      #habitar .habitar-frase.visible::before {
        transform: scale(1.2);
      }

      /* POLAROID 2 (orden 4): también left-aligned para que el dot del
         timeline calce perfecto, con rotación opuesta para variedad.
         Arranca invisible; aparece con .appear vía JS de reveal cronológico */
      #habitar .hab-polaroid.pol-bottom-right {
        order: 4 !important;
        position: relative !important;
        width: clamp(190px, 56vw, 250px) !important;
        margin: 8px 0 0 8px !important;
        padding: 8px 8px 32px !important;
        transform: rotate(2.2deg) translateY(24px) !important;
        opacity: 0 !important;
        transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1) !important;
        left: auto !important; top: auto !important;
        right: auto !important; bottom: auto !important;
        align-self: flex-start !important;
      }
      #habitar .hab-polaroid.pol-bottom-right.appear {
        opacity: 1 !important;
        transform: rotate(1.4deg) translateY(0) !important;
      }
      /* Reducir también el estado inicial (oculto) para consistencia */
      #habitar .hab-polaroid.pol-bottom-right {
        transform: rotate(1.4deg) translateY(24px) !important;
        transform-origin: top left !important;
      }
      #habitar .hab-polaroid.pol-top-left {
        transform-origin: top left !important;
      }
      /* Dot del polaroid 2: ajustamos para que quede alineado con la línea
         (compensa la pequeña rotación) */
      #habitar .hab-polaroid.pol-bottom-right::before {
        left: -42px !important;
        top: 26px !important;
      }
      #habitar .hab-polaroid.pol-top-left::before {
        left: -42px !important;
        top: 26px !important;
      }
      #habitar .hab-polaroid.pol-bottom-right img {
        height: clamp(150px, 26vh, 200px) !important;
      }
      #habitar .hab-polaroid.pol-bottom-right::before {
        content: '';
        position: absolute;
        left: -42px;
        top: 30px;
        width: 12px; height: 12px;
        background: var(--terra);
        border-radius: 50%;
        z-index: 2;
      }

      /* Desactivar hover-zoom en polaroids (estética touch) */
      #habitar .hab-polaroid.pol-top-left:hover {
        transform: rotate(-2.5deg) !important;
        box-shadow: 1px 3px 10px rgba(0,0,0,0.13) !important;
        opacity: 1 !important;
        z-index: 2 !important;
      }
      #habitar .hab-polaroid.pol-bottom-right:hover {
        transform: rotate(2.2deg) !important;
        box-shadow: 1px 3px 10px rgba(0,0,0,0.13) !important;
        opacity: 1 !important;
        z-index: 2 !important;
      }
    }

    /* ── CURSOR PERSONALIZADO ─── */
    body { cursor: none !important; }
    #custom-cursor { width:38px;height:38px;position:fixed;top:0;left:0;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform .18s ease;background:url('a18b6630e5f7b492.png') center/contain no-repeat;mix-blend-mode:multiply; opacity:.9; }
    #custom-cursor.hover { transform:translate(-50%,-50%) scale(1.5) rotate(-8deg); }
    a, button, .project-card, .hero-cta, .nav-links a, .social-link, .back-btn, .contact-email, .nav-back {
      cursor: none !important;
    }

  
    /* LUZ AMBIENTAL */
    #luz-global {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      animation: luz-drift 28s ease-in-out infinite;
      background:
        /* sol principal — esquina superior derecha */
        radial-gradient(ellipse 58vw 68vh at 90% 10%,
          rgba(255,208,70,0.10) 0%,
          rgba(255,190,55,0.04) 42%,
          transparent 70%),
        /* reflejo difuso — izquierda media */
        radial-gradient(ellipse 42vw 58vh at 5% 62%,
          rgba(255,182,50,0.06) 0%,
          transparent 66%),
        /* calidez de suelo — inferior centro */
        radial-gradient(ellipse 60vw 38vh at 52% 96%,
          rgba(248,215,110,0.05) 0%,
          transparent 72%),
        /* mancha pequeña — superior izquierda */
        radial-gradient(ellipse 24vw 30vh at 12% 6%,
          rgba(255,212,85,0.065) 0%,
          transparent 62%);
    }
    @keyframes luz-drift {
      0%,100% { transform: translate(0,0) scale(1); }
      30%     { transform: translate(1.8vw,-1vh) scale(1.016); }
      65%     { transform: translate(-1.2vw,1.4vh) scale(0.986); }
    }
    
  /* LIGHTBOX */
  #lb-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.88); cursor:zoom-out;
    align-items:center; justify-content:center;
    padding:24px;
  }
  #lb-overlay.open { display:flex; }
  #lb-overlay img {
    max-width:92vw; max-height:92vh;
    object-fit:contain; border-radius:4px;
    box-shadow:0 8px 48px rgba(0,0,0,.6);
    cursor:default; user-select:none;
  }
  #lb-close {
    position:fixed; top:18px; right:24px;
    font-size:2rem; line-height:1; color:#fff;
    background:none; border:none; cursor:pointer;
    opacity:.75; transition:opacity .2s;
  }
  #lb-close:hover { opacity:1; }
  .lb-trigger { cursor:zoom-in; }
  
    /* ── Atributos clic ── */
    .attr-tag { position:relative; display:inline-block; cursor:pointer; }
    .attr-bubble {
      position:absolute;
      top:50%; left:0;
      transform:translate(-6px,-50%) scale(.94);
      transform-origin:left center;
      border-radius:100px;
      padding:6px 20px;
      white-space:normal;width:400px;
      opacity:0;
      visibility:hidden;
      z-index:500;
      transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1), visibility 0s linear .55s;
      font-family:'Caveat',cursive;
      font-size:1rem;
      line-height:1.6;
      color:#fff;
      pointer-events:none;
      will-change:opacity,transform;
    }
    .attr-bubble.bubble-right { left:auto; right:0; transform-origin:right center; transform:translate(6px,-50%) scale(.94); }
    .attr-tag.open .attr-bubble {
      opacity:1;
      visibility:visible;
      transform:translate(0,-50%) scale(1);
      transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
    }
    .tag-terra  .attr-bubble { background:#8A3830; }
    .tag-sage   .attr-bubble { background:#5a7a57; }
    .tag-yellow .attr-bubble { background:#9a7a20; }
    .tag-gray   .attr-bubble { background:#6B5E56; }
    .tag-blue   .attr-bubble { background:#7B8FB5; }