/* ===== styles ===== */
:root{
  color-scheme:light;
  background:#e7d4af;
}

*{
  box-sizing:border-box;
}

html,
body,
#root{
  margin:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
}

html,
body{
  overflow:hidden;
  background:#e7d4af;
}

body{
  min-height:100vh;
  min-height:100dvh;
}

#root{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
}

.paper-background{
  position:fixed;
  inset:0;
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background-color:#ead9b7;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.30) 0 7%, transparent 22%),
    radial-gradient(circle at 80% 72%, rgba(117,83,45,.08) 0 4%, transparent 24%),
    radial-gradient(circle at 54% 34%, rgba(255,248,224,.24) 0 5%, transparent 19%),
    repeating-linear-gradient(7deg, rgba(95,68,38,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(97deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #e5d0aa 0%, #efe1c4 42%, #ead6b2 72%, #e2c99f 100%);
  background-blend-mode:screen,multiply,screen,multiply,screen,normal;
}

.paper-background::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle, rgba(89,61,31,.23) 0 .55px, transparent .7px),
    radial-gradient(circle, rgba(255,255,255,.34) 0 .55px, transparent .75px),
    radial-gradient(circle, rgba(112,76,39,.16) 0 .4px, transparent .65px);
  background-size:9px 11px, 13px 15px, 17px 19px;
  background-position:0 0, 4px 7px, 9px 3px;
  mix-blend-mode:multiply;
}

.paper-background::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(92,60,28,.055) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 14%, transparent 86%, rgba(93,62,29,.035));
}

@media (prefers-reduced-motion:reduce){
  .paper-background,
  .paper-background::before,
  .paper-background::after{
    animation:none;
  }
}

/* ===== home-fix ===== */
.home-wireframe{
  position:absolute;
  inset:0;
  pointer-events:none;
  color:rgba(83,62,37,.58);
  font-family:Georgia,'Times New Roman',serif;
}

.wire-zone,
.wire-edge{
  position:absolute;
  border:1.5px dashed rgba(91,66,39,.34);
  background:rgba(255,248,230,.08);
  border-radius:12px;
}

.wire-zone span,
.wire-edge span{
  position:absolute;
  left:10px;
  top:8px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(241,226,194,.78);
  font-size:12px;
  font-style:italic;
  letter-spacing:.02em;
}

.wire-quote{
  left:4.3%;
  top:4.2%;
  width:14.5%;
  height:18.5%;
}

.wire-hero{
  left:9.5%;
  top:2.2%;
  width:37.5%;
  height:64.5%;
}

.wire-brand{
  left:12.0%;
  top:66.0%;
  width:35.0%;
  height:27.0%;
}

.wire-levels{
  position:absolute;
  left:48.4%;
  top:10.0%;
  width:47.0%;
  height:77.0%;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:2.2%;
}

.wire-card{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  border-radius:16px;
}

.beginner-card{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:38% 1fr 10%;
  align-items:center;
  overflow:hidden;
  color:#322d25;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.32),transparent 28%),
    repeating-linear-gradient(4deg,rgba(88,62,34,.018) 0 1px,transparent 1px 4px),
    linear-gradient(100deg,rgba(246,235,211,.96),rgba(251,243,225,.94));
  border:1px solid rgba(110,82,49,.22);
  border-radius:10px 15px 12px 18px;
  box-shadow:
    0 10px 19px rgba(88,61,31,.12),
    0 2px 3px rgba(76,53,31,.12);
  transform:rotate(-.18deg);
}

.beginner-card::before,
.beginner-card::after{
  content:"";
  position:absolute;
  left:1.5%;
  right:1.5%;
  height:2px;
  opacity:.26;
  background:linear-gradient(90deg,transparent,rgba(105,78,48,.35) 12%,rgba(105,78,48,.18) 75%,transparent);
}

.beginner-card::before{top:2px}
.beginner-card::after{bottom:2px}

.beginner-illustration{
  position:relative;
  height:92%;
  display:grid;
  place-items:center;
  overflow:hidden;
  align-self:end;
}

.beginner-penguin{
  width:auto;
  height:92%;
  max-width:92%;
  display:block;
  filter:drop-shadow(0 3px 2px rgba(70,51,31,.08));
}

.beginner-copy{
  position:relative;
  z-index:1;
  align-self:center;
  padding:3% 0;
}

.beginner-brush{
  position:absolute;
  z-index:-1;
  left:-4%;
  top:7%;
  width:96%;
  height:30%;
  transform:rotate(-1.2deg);
  border-radius:48% 36% 44% 32%;
  opacity:.30;
  background:
    linear-gradient(90deg,rgba(189,169,108,.08),rgba(182,156,93,.44) 18%,rgba(192,169,108,.34) 72%,rgba(186,158,94,.08));
  clip-path:polygon(0 17%,10% 5%,24% 14%,37% 2%,51% 12%,65% 3%,82% 14%,100% 8%,96% 72%,80% 82%,65% 73%,46% 90%,27% 76%,10% 86%,2% 68%);
}

.beginner-card h2{
  margin:0 0 .10em;
  font-size:clamp(28px,3.35vw,54px);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.025em;
}

.beginner-subtitle{
  margin:0 0 .75em;
  font-size:clamp(18px,1.65vw,29px);
  line-height:1;
  font-style:italic;
}

.beginner-description{
  max-width:92%;
  margin:0;
  font-size:clamp(14px,1.25vw,21px);
  line-height:1.24;
  color:#554a3c;
}

.beginner-arrow{
  justify-self:center;
  align-self:center;
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  color:#3c352a;
  transform:translateY(-3%);
}

.intermediate-card{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:38% 1fr 10%;
  align-items:center;
  overflow:hidden;
  color:#322d25;
  background:
    radial-gradient(circle at 26% 25%,rgba(255,255,255,.30),transparent 30%),
    repeating-linear-gradient(-3deg,rgba(88,62,34,.017) 0 1px,transparent 1px 4px),
    linear-gradient(96deg,rgba(246,235,211,.96),rgba(250,242,224,.94));
  border:1px solid rgba(110,82,49,.22);
  border-radius:15px 10px 17px 12px;
  box-shadow:
    0 10px 19px rgba(88,61,31,.11),
    0 2px 3px rgba(76,53,31,.11);
  transform:rotate(.13deg);
}

.intermediate-card::before,
.intermediate-card::after{
  content:"";
  position:absolute;
  left:1.5%;
  right:1.5%;
  height:2px;
  opacity:.24;
  background:linear-gradient(90deg,transparent,rgba(105,78,48,.32) 12%,rgba(105,78,48,.16) 75%,transparent);
}

.intermediate-card::before{top:2px}
.intermediate-card::after{bottom:2px}

.intermediate-illustration-space{
  height:100%;
}

.intermediate-copy{
  position:relative;
  z-index:1;
  align-self:center;
  padding:3% 0;
}

.intermediate-brush{
  position:absolute;
  z-index:-1;
  left:-5%;
  top:8%;
  width:94%;
  height:30%;
  transform:rotate(.8deg);
  border-radius:42% 35% 46% 30%;
  opacity:.28;
  background:linear-gradient(90deg,rgba(130,150,157,.06),rgba(127,151,163,.40) 18%,rgba(137,158,169,.34) 70%,rgba(130,150,157,.06));
  clip-path:polygon(0 20%,11% 8%,24% 16%,38% 5%,53% 12%,67% 4%,82% 15%,100% 10%,96% 72%,80% 83%,64% 74%,46% 89%,29% 77%,11% 87%,2% 68%);
}

.intermediate-card h2{
  margin:0 0 .10em;
  font-size:clamp(28px,3.05vw,50px);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.025em;
}

.intermediate-subtitle{
  margin:0 0 .75em;
  font-size:clamp(18px,1.65vw,29px);
  line-height:1;
  font-style:italic;
}

.intermediate-description{
  max-width:92%;
  margin:0;
  font-size:clamp(14px,1.25vw,21px);
  line-height:1.24;
  color:#554a3c;
}

.intermediate-arrow{
  justify-self:center;
  align-self:center;
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  color:#3c352a;
  transform:translateY(-2%);
}

.advanced-card{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:38% 1fr 10%;
  align-items:center;
  overflow:hidden;
  color:#322d25;
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.30),transparent 30%),
    repeating-linear-gradient(2deg,rgba(88,62,34,.017) 0 1px,transparent 1px 4px),
    linear-gradient(98deg,rgba(246,235,211,.96),rgba(250,242,224,.94));
  border:1px solid rgba(110,82,49,.22);
  border-radius:12px 17px 10px 15px;
  box-shadow:
    0 10px 19px rgba(88,61,31,.11),
    0 2px 3px rgba(76,53,31,.11);
  transform:rotate(-.08deg);
}

.advanced-card::before,
.advanced-card::after{
  content:"";
  position:absolute;
  left:1.5%;
  right:1.5%;
  height:2px;
  opacity:.24;
  background:linear-gradient(90deg,transparent,rgba(105,78,48,.32) 12%,rgba(105,78,48,.16) 75%,transparent);
}

.advanced-card::before{top:2px}
.advanced-card::after{bottom:2px}

.advanced-illustration-space{
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.advanced-landscape-svg{
  width:94%;
  height:88%;
  display:block;
  filter:drop-shadow(0 2px 1px rgba(70,51,31,.06));
}

.advanced-copy{
  position:relative;
  z-index:1;
  align-self:center;
  padding:3% 0;
}

.advanced-brush{
  position:absolute;
  z-index:-1;
  left:-5%;
  top:8%;
  width:94%;
  height:30%;
  transform:rotate(-.6deg);
  border-radius:44% 32% 45% 34%;
  opacity:.28;
  background:linear-gradient(90deg,rgba(181,132,109,.06),rgba(185,128,103,.38) 18%,rgba(190,139,114,.32) 70%,rgba(181,132,109,.06));
  clip-path:polygon(0 19%,10% 7%,25% 15%,39% 4%,53% 13%,68% 4%,83% 15%,100% 9%,97% 72%,81% 82%,65% 74%,47% 90%,29% 77%,11% 86%,2% 68%);
}

.advanced-card h2{
  margin:0 0 .10em;
  font-size:clamp(28px,3.05vw,50px);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.025em;
}

.advanced-subtitle{
  margin:0 0 .75em;
  font-size:clamp(18px,1.65vw,29px);
  line-height:1;
  font-style:italic;
}

.advanced-description{
  max-width:92%;
  margin:0;
  font-size:clamp(14px,1.25vw,21px);
  line-height:1.24;
  color:#554a3c;
}

.advanced-arrow{
  justify-self:center;
  align-self:center;
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  color:#3c352a;
  transform:translateY(-2%);
}

.wire-note{
  left:85.2%;
  top:84.0%;
  width:12.8%;
  height:14.0%;
}

.wire-edge-left{
  left:.6%;
  top:1.2%;
  width:6.2%;
  height:96.5%;
  border-radius:0 18px 18px 0;
}

.wire-edge-right{
  right:.6%;
  top:1.2%;
  width:5.2%;
  height:96.5%;
  border-radius:18px 0 0 18px;
}

@media (orientation:portrait){
  .home-wireframe{
    display:none;
  }
}

/* ===== home-card-brushes ===== */
.beginner-brush{
  opacity:.42;
  background:linear-gradient(90deg,rgba(202,165,104,.08),rgba(208,169,105,.58) 18%,rgba(216,180,116,.50) 72%,rgba(202,165,104,.08));
}

.intermediate-brush{
  opacity:.42;
  background:linear-gradient(90deg,rgba(132,150,108,.07),rgba(142,158,116,.56) 18%,rgba(151,166,125,.48) 70%,rgba(132,150,108,.07));
}

.advanced-brush{
  opacity:.42;
  background:linear-gradient(90deg,rgba(112,141,164,.07),rgba(124,151,174,.56) 18%,rgba(138,164,185,.48) 70%,rgba(112,141,164,.07));
}

/* Papel rasgado de las tarjetas de niveles */
.beginner-card,
.intermediate-card,
.advanced-card{
  border-radius:0;
  border:1px solid rgba(112,82,46,.20);
  box-shadow:none;
  filter:
    drop-shadow(0 9px 8px rgba(78,54,28,.13))
    drop-shadow(0 2px 1px rgba(70,48,25,.10));
  background:
    radial-gradient(ellipse at 11% 13%,rgba(255,255,255,.34) 0 8%,transparent 28%),
    radial-gradient(ellipse at 82% 72%,rgba(181,139,84,.08) 0 5%,transparent 25%),
    radial-gradient(circle at 92% 16%,rgba(145,104,55,.05) 0 2%,transparent 16%),
    repeating-linear-gradient(7deg,rgba(96,70,42,.020) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(96deg,rgba(117,84,48,.012) 0 1px,transparent 1px 5px),
    linear-gradient(100deg,rgba(246,233,205,.98),rgba(250,241,220,.97) 54%,rgba(244,229,200,.98));
}

.beginner-card{
  clip-path:polygon(
    0.8% 3.0%,3.0% 1.0%,6.2% 2.2%,9.4% .5%,12.6% 1.6%,16.0% .7%,19.4% 1.9%,23.2% .8%,27.4% 1.7%,31.5% .6%,35.7% 1.6%,40.2% .7%,44.8% 1.7%,49.2% .5%,53.9% 1.5%,58.6% .6%,63.0% 1.8%,67.4% .7%,71.9% 1.7%,76.4% .6%,81.1% 1.5%,85.6% .7%,90.0% 1.7%,94.5% .8%,98.2% 2.1%,99.2% 5.1%,98.8% 9.2%,99.4% 13.5%,98.9% 18.1%,99.5% 23.0%,98.9% 28.0%,99.4% 33.1%,98.8% 38.2%,99.4% 43.4%,98.9% 48.7%,99.5% 54.1%,98.8% 59.8%,99.4% 65.0%,98.9% 70.4%,99.4% 75.9%,98.8% 81.0%,99.3% 86.2%,98.6% 91.1%,97.7% 97.1%,94.1% 98.7%,89.7% 97.8%,85.0% 99.1%,80.5% 98.0%,75.7% 99.2%,70.8% 98.1%,66.0% 99.0%,61.0% 98.0%,56.0% 99.2%,51.0% 98.0%,45.9% 99.1%,41.0% 97.9%,35.9% 99.0%,31.0% 98.1%,26.0% 99.2%,21.0% 98.0%,16.3% 99.1%,11.6% 97.8%,7.1% 98.9%,2.6% 97.6%,.7% 94.2%,1.2% 89.3%,.5% 84.1%,1.1% 79.1%,.5% 73.8%,1.1% 68.6%,.5% 63.2%,1.1% 57.8%,.5% 52.2%,1.1% 46.8%,.4% 41.5%,1.0% 36.1%,.5% 30.8%,1.0% 25.4%,.4% 20.1%,1.0% 14.8%,.4% 9.5%
  );
}

.intermediate-card{
  clip-path:polygon(
    1.1% 2.5%,4.0% .8%,7.6% 1.8%,11.2% .6%,15.0% 1.6%,18.9% .7%,23.0% 1.8%,27.1% .6%,31.4% 1.5%,35.8% .7%,40.1% 1.8%,44.7% .6%,49.1% 1.6%,53.9% .7%,58.4% 1.7%,63.1% .5%,67.8% 1.8%,72.3% .7%,77.0% 1.6%,81.6% .6%,86.1% 1.8%,90.5% .8%,94.6% 1.7%,98.3% 2.4%,99.1% 6.1%,98.6% 11.0%,99.3% 16.0%,98.7% 21.0%,99.4% 26.0%,98.8% 31.0%,99.3% 36.2%,98.8% 41.5%,99.4% 46.7%,98.8% 52.1%,99.4% 57.4%,98.9% 62.7%,99.3% 68.0%,98.7% 73.4%,99.4% 78.9%,98.8% 84.3%,99.2% 89.5%,98.4% 94.4%,96.9% 97.8%,93.0% 99.0%,88.7% 98.0%,84.1% 99.2%,79.5% 98.0%,74.7% 99.0%,69.8% 98.1%,64.9% 99.2%,59.9% 98.0%,54.9% 99.0%,49.9% 98.1%,44.8% 99.1%,39.8% 98.0%,34.7% 99.2%,29.8% 98.0%,24.8% 99.0%,19.8% 98.1%,14.9% 99.2%,10.1% 98.0%,5.6% 99.0%,2.0% 97.3%,.8% 93.4%,1.3% 88.1%,.6% 82.9%,1.2% 77.7%,.6% 72.5%,1.2% 67.2%,.5% 61.9%,1.1% 56.6%,.5% 51.2%,1.1% 45.8%,.5% 40.5%,1.1% 35.0%,.5% 29.7%,1.1% 24.4%,.5% 19.0%,1.1% 13.7%,.5% 8.4%
  );
}

.advanced-card{
  clip-path:polygon(
    .9% 3.2%,3.6% 1.0%,7.0% 2.0%,10.7% .7%,14.6% 1.7%,18.5% .6%,22.6% 1.8%,26.8% .7%,31.0% 1.7%,35.4% .6%,39.9% 1.8%,44.4% .7%,48.9% 1.6%,53.6% .6%,58.2% 1.8%,62.9% .7%,67.6% 1.6%,72.2% .6%,76.9% 1.8%,81.5% .7%,86.0% 1.6%,90.4% .8%,94.4% 1.9%,98.1% 2.7%,99.0% 6.6%,98.5% 11.8%,99.2% 17.0%,98.6% 22.3%,99.3% 27.5%,98.7% 32.8%,99.2% 38.2%,98.6% 43.5%,99.3% 48.9%,98.7% 54.3%,99.2% 59.7%,98.6% 65.1%,99.3% 70.5%,98.7% 75.9%,99.2% 81.3%,98.6% 86.5%,99.0% 91.5%,98.1% 95.7%,95.2% 98.2%,91.1% 99.0%,86.8% 98.0%,82.2% 99.2%,77.5% 98.1%,72.7% 99.0%,67.8% 98.0%,62.9% 99.2%,58.0% 98.0%,53.0% 99.1%,48.0% 98.0%,43.0% 99.2%,38.0% 98.0%,33.0% 99.0%,28.0% 98.1%,23.0% 99.2%,18.0% 98.0%,13.0% 99.0%,8.3% 98.0%,4.1% 98.7%,1.4% 96.0%,.7% 91.7%,1.2% 86.5%,.6% 81.2%,1.2% 75.9%,.5% 70.6%,1.1% 65.2%,.5% 59.8%,1.1% 54.4%,.5% 49.0%,1.1% 43.6%,.5% 38.2%,1.1% 32.8%,.5% 27.4%,1.1% 22.0%,.5% 16.6%,1.0% 11.2%,.4% 6.6%
  );
}

.beginner-card::before,
.beginner-card::after,
.intermediate-card::before,
.intermediate-card::after,
.advanced-card::before,
.advanced-card::after{
  display:none;
}

/* ===== home-card-parchment ===== */
/* Acabado final de pergamino envejecido para las tarjetas de niveles */
.wire-levels{
  filter:
    drop-shadow(5px 18px 12px rgba(65,42,20,.31))
    drop-shadow(2px 6px 3px rgba(58,38,19,.22));
}

.beginner-card,
.intermediate-card,
.advanced-card{
  border:1px solid rgba(96,62,32,.44);
  box-shadow:
    inset 0 0 0 1px rgba(255,250,236,.14),
    inset 0 0 30px rgba(116,77,39,.10);
  filter:none;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(255,250,235,.34) 0 9%,transparent 29%),
    radial-gradient(ellipse at 72% 20%,rgba(151,105,55,.070) 0 3%,transparent 20%),
    radial-gradient(ellipse at 85% 76%,rgba(138,91,44,.060) 0 4%,transparent 24%),
    radial-gradient(circle at 12% 82%,rgba(126,83,41,.055) 0 2.5%,transparent 15%),
    repeating-linear-gradient(7deg,rgba(92,62,35,.028) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(96deg,rgba(116,79,42,.020) 0 1px,transparent 1px 6px),
    linear-gradient(101deg,rgba(239,220,185,.99),rgba(249,236,211,.99) 49%,rgba(239,218,181,.99));
  background-color:#f3dfbd;
}

/* Variaciones mínimas entre hojas para evitar un acabado demasiado uniforme */
.beginner-card{
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0;
}

.intermediate-card{
  background-position:0 0,8px -3px,-6px 4px,5px 2px,0 0,0 0,0 0;
}

.advanced-card{
  background-position:0 0,-5px 4px,7px -2px,-4px 3px,0 0,0 0,0 0;
}

/* ===== home-quote ===== */
.home-quote{
  position:absolute;
  left:4.8%;
  top:7.0%;
  width:17.2%;
  min-height:19.5%;
  display:flex;
  align-items:flex-start;
  color:#41362d;
  font-family:'Noteworthy','Bradley Hand','Segoe Print','Apple Chancery',cursive;
  font-size:clamp(27px,2.32vw,38px);
  font-style:normal;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.012em;
  transform:rotate(-18.8deg);
  transform-origin:left top;
  text-shadow:
    0 .35px .45px rgba(54,40,28,.20),
    0 1px 0 rgba(255,255,255,.13);
}

.home-quote p{
  margin:0;
}

.home-quote .quote-line{
  display:block;
  white-space:nowrap;
}

.home-quote .quote-line-2{
  margin-left:.30em;
}

.home-quote .quote-line-3{
  margin-left:.60em;
}

.home-quote .quote-line-4{
  margin-left:.90em;
}

.home-quote .quote-heart{
  display:inline-block;
  margin-left:.18em;
  color:#41362d;
  font-family:Georgia,'Times New Roman',serif;
  font-size:.78em;
  font-style:normal;
  transform:translateY(-.04em) rotate(10deg);
}

/* ===== home-hero ===== */
.home-hero{
  position:absolute;
  left:8.0%;
  top:1.8%;
  width:39.0%;
  height:63.7%;
  display:grid;
  place-items:end center;
  pointer-events:none;
  overflow:visible;
  z-index:2;
}

.home-hero img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 5px 4px rgba(72,52,32,.08));
}

/* ===== home-brand ===== */
.home-brand{
  position:absolute;
  left:10.3%;
  top:70.2%;
  width:38.8%;
  height:22.0%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  color:#3e342a;
  pointer-events:none;
  transform:rotate(-.35deg);
  text-align:center;
  overflow:visible;
  z-index:1;
}

.home-brand-wordmark{
  display:block;
  width:96%;
  height:auto;
  max-height:72%;
  object-fit:contain;
  margin:0;
  overflow:visible;
}

.home-brand-subtitle{
  position:relative;
  top:6px;
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(21px,1.9vw,32px);
  font-style:italic;
  line-height:1.05;
  letter-spacing:.005em;
}

.home-brand::after{
  content:"Pequeños pasos, grandes dibujos";
  display:block;
  width:66%;
  box-sizing:border-box;
  margin-top:15px;
  padding-top:30px;
  color:#504438;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(15px,1.18vw,20px);
  font-style:italic;
  line-height:1;
  letter-spacing:.004em;
  white-space:nowrap;
  opacity:.92;
  background:
    linear-gradient(to right,
      transparent 0 4%,
      rgba(72,59,48,.72) 4% 39%,
      transparent 39% 61%,
      rgba(72,59,48,.72) 61% 96%,
      transparent 96% 100%
    ) center 13px / 100% 1px no-repeat,
    url('/assets/home/home-brand-mini-dragon.webp?v=af77c43902') center top / 27px 27px no-repeat;
}

/* ===== home-note ===== */
.home-note{
  position:absolute;
  left:86.15%;
  top:81.55%;
  width:12.25%;
  height:17.55%;
  box-sizing:border-box;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25% 1.20% 1.05%;
  color:#473b30;
  filter:
    drop-shadow(7px 13px 9px rgba(61,39,20,.34))
    drop-shadow(2px 4px 2px rgba(57,37,19,.22));
  transform:rotate(-6.2deg);
  transform-origin:50% 50%;
  pointer-events:none;
}

.home-note::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  box-sizing:border-box;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 1%,rgba(92,55,26,.16),transparent 34%),
    radial-gradient(ellipse at 98% 50%,rgba(92,55,26,.14),transparent 30%),
    radial-gradient(ellipse at 48% 99%,rgba(92,55,26,.15),transparent 33%),
    radial-gradient(ellipse at 1% 48%,rgba(92,55,26,.13),transparent 29%),
    radial-gradient(ellipse at 24% 15%,rgba(255,255,255,.30) 0 9%,transparent 31%),
    radial-gradient(ellipse at 82% 76%,rgba(120,73,33,.14) 0 5%,transparent 28%),
    radial-gradient(circle at 12% 72%,rgba(102,61,29,.10) 0 2%,transparent 18%),
    repeating-linear-gradient(3deg,rgba(82,56,30,.030) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(93deg,rgba(112,76,40,.022) 0 1px,transparent 1px 6px),
    linear-gradient(108deg,rgba(222,193,148,.99),rgba(239,216,177,.99) 52%,rgba(218,185,137,.99));
  border:1px solid rgba(92,61,31,.38);
  box-shadow:
    inset 0 0 0 1px rgba(255,248,230,.13),
    inset 0 0 18px rgba(105,65,31,.14);
  clip-path:polygon(
    2.2% 8.0%,7.2% 4.0%,13.6% 5.4%,20.5% 2.4%,27.7% 5.0%,35.1% 2.0%,42.7% 4.8%,50.6% 2.3%,58.3% 5.1%,66.1% 2.7%,73.8% 5.4%,81.1% 2.8%,88.4% 5.8%,96.6% 4.6%,98.1% 12.2%,95.7% 20.7%,98.4% 29.5%,95.9% 38.6%,98.1% 47.8%,95.8% 57.1%,98.2% 66.3%,95.6% 75.3%,97.2% 84.9%,93.8% 95.7%,86.7% 94.0%,79.4% 97.7%,71.9% 95.0%,64.2% 98.0%,56.2% 95.2%,48.1% 98.2%,40.0% 95.0%,31.9% 97.8%,24.3% 94.9%,16.6% 97.1%,8.6% 93.8%,3.4% 95.3%,1.6% 86.3%,4.0% 77.0%,1.4% 67.7%,3.8% 58.3%,1.4% 48.9%,3.9% 39.4%,1.5% 30.0%,4.0% 20.8%,1.7% 12.9%
  );
}

.home-note::after{
  content:"";
  position:absolute;
  inset:4% 5%;
  z-index:1;
  opacity:.22;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%,rgba(82,53,27,.32) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 68%,rgba(82,53,27,.26) 0 1px,transparent 1.5px),
    radial-gradient(circle at 46% 82%,rgba(82,53,27,.20) 0 .8px,transparent 1.3px);
  background-size:31px 27px,37px 33px,29px 35px;
}

.home-note p{
  position:relative;
  z-index:2;
  width:80%;
  margin:0;
  font-family:'Bradley Hand','Segoe Print','Apple Chancery','Snell Roundhand',cursive;
  font-size:clamp(16px,1.32vw,24px);
  font-style:italic;
  font-weight:500;
  line-height:1.01;
  letter-spacing:-.018em;
  text-shadow:0 1px 0 rgba(255,255,255,.16);
}

.home-note-line{
  display:block;
  white-space:nowrap;
}

.home-note-line:nth-child(1){transform:translateX(0%)}
.home-note-line:nth-child(2){transform:translateX(7%)}
.home-note-line:nth-child(3){transform:translateX(1%)}
.home-note-line:nth-child(4){transform:translateX(8%)}

.home-note-heart{
  display:block;
  margin-top:.18em;
  margin-left:60%;
  font-family:Georgia,'Times New Roman',serif;
  font-size:.88em;
  font-style:normal;
  line-height:1;
  transform:rotate(-7deg);
}

/* ===== home-ivy ===== */
.home-wireframe{
  background:none;
  isolation:isolate;
}

.home-wireframe::after{
  content:"";
  position:absolute;
  top:-1%;
  right:-.5%;
  width:27%;
  height:102%;
  pointer-events:none;
  z-index:-1;
  background:url('/assets/home/home-right-composition.webp?v=af77c43902') right center / auto 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.32) 12%,#000 30%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.32) 12%,#000 30%,#000 100%);
}

.wire-edge-right{
  display:none;
}

/* ===== home-left-notebook ===== */
.home-wireframe::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:40vh;
  height:100%;
  pointer-events:none;
  z-index:3;
  background:url('/assets/home/home-left-composition.webp?v=af77c43902') left center / 100% 100% no-repeat;
}

.wire-edge-left{
  display:none;
}