@font-face{font-family:Grenadine;src:url('assets/fonts/Grenadine_MVB_Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Grenadine;src:url('assets/fonts/Grenadine_MVB_Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Grenadine;src:url('assets/fonts/Grenadine_MVB_Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Grenadine;src:url('assets/fonts/Grenadine_MVB_Extra_Bold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}

:root{--ink:#131919;--cyan:#66ffff;--green:#5df0bd;--purple:#b993df;--orange:#ffad43;--paper:url('assets/bg-papel-seamless.webp')}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Grenadine,Arial,sans-serif;background:#fff}
body::before{content:"";position:fixed;inset:0;z-index:-1;background-image:var(--paper);background-repeat:repeat-y;background-position:center top;background-size:100% auto;pointer-events:none}
a{color:inherit}
.hero{position:relative;min-height:100svh;overflow:hidden;padding:clamp(110px,18vh,205px) 7vw 70px}
.intro{position:relative;z-index:2;width:min(1360px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(390px,500px) minmax(620px,1fr);align-items:center;gap:25px}
.visual{position:relative;height:540px}
.logo{position:absolute;width:420px;height:460px;object-fit:contain;left:78px;top:-60px;z-index:4}
.polaroid{position:absolute;background:#fff;padding:18px 18px 62px;box-shadow:0 3px 4px #0003;z-index:2}
.polaroid>img:first-child{width:100%;height:100%;object-fit:cover;display:block}
.polaroid--avatar{width:205px;height:235px;left:0;bottom:-55px;transform:rotate(0deg)}
.polaroid--photo{width:225px;height:280px;left:150px;bottom:-160px;transform:rotate(-17deg);z-index:3}
.mini{position:absolute!important;object-fit:contain!important;z-index:5}.draggable-sticker{cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}.draggable-sticker.is-dragging{cursor:grabbing;z-index:20;filter:drop-shadow(3px 5px 3px #0004)}
.mini--avatar-star{width:38px!important;height:38px!important;top:6px;left:7px}
.mini--photo-star{width:38px!important;height:38px!important;top:5px;left:5px}
.mini--asterisk{width:39px!important;height:39px!important;bottom:8px;left:6px}
.mini--heart{width:31px!important;height:31px!important;right:6px;bottom:9px}
.copy{padding-top:0;text-align:left}
h1{font-size:clamp(54px,4.2vw,76px);font-weight:500;letter-spacing:.02em;line-height:1;margin:0 0 28px}
.copy p{font-size:clamp(21px,1.65vw,29px);line-height:1.08;letter-spacing:.01em;margin:0 0 28px}
.copy .welcome{font-weight:700;margin-top:2px;margin-bottom:40px}
.nav{display:flex;gap:42px;flex-wrap:wrap}
.nav-btn{display:inline-block;background:var(--ink);border-radius:8px;color:#fff;text-decoration:none;font-size:19px;font-weight:600;line-height:1;padding:15px 18px 14px;box-shadow:0 4px 10px #0002;transition:transform .18s ease,box-shadow .18s ease,color .18s ease}
.nav-btn:hover,.nav-btn:focus-visible{transform:translateY(-3px);box-shadow:0 8px 16px #0003;outline:none}.nav-btn.green:hover,.nav-btn.green:focus-visible{color:var(--green)}.nav-btn.purple:hover,.nav-btn.purple:focus-visible{color:var(--purple)}.nav-btn.orange:hover,.nav-btn.orange:focus-visible{color:var(--orange)}.nav-btn.cyan:hover,.nav-btn.cyan:focus-visible{color:var(--cyan)}
.doodles--top{position:absolute;right:-15px;top:-28px;width:480px;height:270px;z-index:1;pointer-events:none}.doodle{position:absolute;filter:drop-shadow(3px 4px 2px #0004)}.s1{width:64px;left:0;top:25px}.a1{width:100px;left:85px;top:-23px}.s2{width:68px;left:205px;top:58px}.h1{width:52px;left:295px;top:10px}.h2{width:55px;left:260px;top:130px}.a2{width:180px;right:-20px;top:50px}
.bottom-row{position:absolute;right:2.6vw;bottom:24px;display:flex;align-items:center;gap:0;z-index:3}.social-note{position:relative;width:625px;height:88px;z-index:1;margin-right:0;flex:0 0 625px}.note{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}.socials{position:absolute;inset:0 auto 0 120px;display:flex;align-items:center;justify-content:flex-start;gap:42px;z-index:2}.socials a{display:block;width:68px;height:68px;transition:transform .18s}.socials a:hover{transform:rotate(-6deg) scale(1.08)}.socials img{width:100%;height:100%;display:block}
.calendar-widget{position:relative;z-index:2;width:245px;aspect-ratio:2066/1700;background:transparent;filter:drop-shadow(5px 7px 1px #0002);transform:translateX(-2px)}.calendar-widget svg{display:block;width:100%;height:100%}
.placeholder{min-height:70vh;display:grid;place-items:center;border-top:1px solid #0001}.placeholder h2{font-size:clamp(48px,7vw,100px);margin:0}
@media (max-width:1100px){.hero{padding:110px 7vw 80px;min-height:auto}.intro{grid-template-columns:350px 1fr}.visual{height:470px}.logo{width:340px;height:380px;left:45px}.polaroid--avatar{width:175px;height:205px;bottom:-35px}.polaroid--photo{width:190px;height:240px;left:125px;bottom:-100px}.nav{gap:16px}.bottom-row{position:relative;right:auto;bottom:auto;margin:95px 0 0 auto;width:max-content}.doodles--top{transform:scale(.75);transform-origin:top right}}
@media (max-width:780px){.hero{padding:95px 22px 55px}.intro{display:flex;flex-direction:column;align-items:stretch;gap:10px}.copy{order:1;text-align:left}.visual{order:2;height:430px;width:340px;align-self:center;margin-top:15px}.logo{width:300px;height:330px;left:45px;top:-20px}.polaroid--avatar{width:150px;height:180px;left:0;bottom:-20px}.polaroid--photo{width:165px;height:210px;left:115px;bottom:-55px}h1{font-size:48px}.copy p{font-size:20px}.copy .welcome{margin-bottom:28px}.nav{display:grid;grid-template-columns:1fr 1fr;gap:12px}.nav-btn{text-align:center;font-size:17px}.doodles--top{width:280px;height:180px;transform:scale(.55);right:-35px}.bottom-row{width:100%;margin-top:35px;flex-direction:column;align-items:flex-end}.social-note{width:430px;max-width:calc(100% + 20px);margin-right:0;transform:none}.calendar-widget{width:220px;margin-top:-8px;margin-right:8px}.placeholder{min-height:50vh}}
@media (max-width:430px){h1{font-size:41px}.copy p{font-size:18px}.nav{grid-template-columns:1fr}.visual{transform:scale(.9);transform-origin:top center;margin-bottom:-25px}.social-note{height:88px}.socials{left:118px;gap:12px}.socials a{width:58px;height:58px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nav-btn,.socials a{transition:none}}
/* Multi-page desktop: each view occupies one viewport, no vertical scroll. */
@media (min-width: 781px) {
  html, body { height: 100%; overflow: hidden; }
  .hero { height: 100svh; min-height: 0; }
}

/* Home desktop — composición cerrada según ajustes.jpg */
@media (min-width: 1101px) {
  .hero {
    height: 100svh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .intro {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    display: block;
  }

  .visual {
    position: absolute;
    left: 6.2vw;
    top: 17.5vh;
    width: 34vw;
    height: 55vh;
  }

  .logo {
    width: clamp(330px, 22.5vw, 430px);
    height: clamp(390px, 47vh, 470px);
    left: 12.8vw;
    top: 0;
  }

  .polaroid {
    padding: 12px 12px 44px;
  }

  .polaroid--avatar {
    width: clamp(125px, 8.5vw, 160px);
    height: clamp(150px, 18.5vh, 180px);
    left: 0;
    top: 13.5vh;
    bottom: auto;
  }

  .polaroid--photo {
    width: clamp(145px, 9.7vw, 180px);
    height: clamp(190px, 23.5vh, 225px);
    left: 6.9vw;
    top: 17.8vh;
    bottom: auto;
    transform: rotate(-14deg);
  }

  .mini--avatar-star,
  .mini--photo-star { width: 27px!important; height: 27px!important; }
  .mini--asterisk { width: 29px!important; height: 29px!important; }
  .mini--heart { width: 24px!important; height: 24px!important; }

  .copy {
    position: absolute;
    left: 42vw;
    top: 25.5vh;
    width: 48vw;
    padding: 0;
  }

  h1 {
    font-size: clamp(55px, 4.15vw, 78px);
    margin-bottom: 22px;
  }

  .copy p {
    font-size: clamp(20px, 1.55vw, 29px);
    line-height: 1.04;
    margin-bottom: 27px;
  }

  .copy .welcome {
    margin-top: 0;
    margin-bottom: 34px;
  }

  .nav {
    gap: clamp(24px, 2.15vw, 42px);
    flex-wrap: nowrap;
  }

  .nav-btn {
    font-size: clamp(15px, 1vw, 19px);
    padding: 13px 17px 12px;
    white-space: nowrap;
  }

  .doodles--top {
    right: -2.2vw;
    top: -3.5vh;
    width: 31vw;
    height: 28vh;
    transform: scale(1.16);
    transform-origin: top right;
  }

  /* En la home las redes quedan sueltas, sin bullet amarillo. */
  .bottom-row {
    position: static;
    display: block;
  }

  .social-note {
    position: absolute;
    left: 4.4vw;
    bottom: 6.5vh;
    width: auto;
    height: auto;
    margin: 0;
    z-index: 5;
  }

  .note { display: none; }

  .socials {
    position: static;
    display: flex;
    gap: clamp(30px, 2.9vw, 55px);
  }

  .socials a {
    width: clamp(58px, 4.1vw, 76px);
    height: clamp(58px, 4.1vw, 76px);
  }

  .calendar-widget {
    position: absolute;
    right: 50px;
    bottom: 50px;
    width: clamp(215px, 14.2vw, 270px);
    transform: none;
    z-index: 4;
  }
}

/* Home desktop refinements v17 */
@media (min-width: 1101px) {
  /* Redes: mismo anclaje izquierdo, iconos algo mayores y más juntos. */
  .socials { gap: clamp(24px, 2vw, 38px); }
  .socials a { width: clamp(66px, 4.55vw, 84px); height: clamp(66px, 4.55vw, 84px); }

  /* Ambas polaroids comparten exactamente la misma estructura. Las fotos son cuadradas
     y se muestran completas, sin crop; sólo cambia posición/rotación. */
  .polaroid { width: clamp(145px, 9.7vw, 180px); height: auto; padding: 12px 12px 44px; }
  .polaroid > img:first-child { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
  .polaroid--avatar { left: 0; top: 13.5vh; bottom: auto; transform: rotate(0deg); }
  .polaroid--photo { left: 6.9vw; top: 17.8vh; bottom: auto; transform: rotate(-14deg); }

  /* Acerca el grupo de doodles al asterisco verde grande sin mover ese asterisco. */
  .doodles--top .s1 { left: 40px; }
  .doodles--top .a1 { left: 125px; }
  .doodles--top .s2 { left: 245px; }
  .doodles--top .h1 { left: 335px; }
  .doodles--top .h2 { left: 300px; }
  .doodles--top .a2 { right: -20px; }
}

/* Home: el logo grande es puramente visual y no debe bloquear el drag de stickers. */
.logo { pointer-events: none; }
.draggable-sticker { pointer-events: auto; }
.draggable-sticker.is-dragging { z-index: 50; }

/* Shared left edge for the home heading, introduction and menu. */
.copy h1 { text-align: left; margin-left: 0; padding-left: 0; }

@media(max-width:900px){html,body{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}}