@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Playfair+Display:ital,wght@0,700;0,800;1,600&family=Source+Sans+3:wght@400;600;700&family=IBM+Plex+Mono:wght@500&display=swap");

/* Paleta tomada del propio libro: crema, cacao, terracota, miel y oliva (los nombres de variables son de la versión anterior) */
:root{
  --cacao:#2a1c14; --cacao2:#3a281d; --crema:#faf5ee; --crema2:#f1e7d9;
  --frambuesa:#b5602a; --frambuesa2:#934a1c; --rosa:#f3e0cf;
  --pistacho:#7d9152; --pistacho2:#eceedf; --mantequilla:#e2b260; --mante2:#f7ecd6;
  --caramelo:#a0612e; --texto:#3f2d22; --suave:#7d6757; --borde:#e8dccb;
  --radio:20px; --sombra:0 14px 40px rgba(42,28,20,.10);
  --serif:"Playfair Display",Georgia,serif; --sans:"Source Sans 3",system-ui,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--crema);color:var(--texto);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{color:var(--cacao);font-family:var(--serif);line-height:1.08;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(30px,4vw,48px);margin-bottom:34px;max-width:20ch}
h3{font-size:24px;margin:6px 0 10px}
a{color:inherit}
.contenedor{max-width:1160px;margin:0 auto;padding:0 20px}
.angosto{max-width:780px}
section{padding:96px 0;position:relative}
.etiqueta{display:inline-block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--frambuesa2);font-weight:700;margin-bottom:14px}
:focus-visible{outline:3px solid var(--frambuesa);outline-offset:3px}

/* Barra */
.barra{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:rgba(42,28,20,.97);color:var(--crema)}
.marca{display:flex;align-items:center;gap:10px;font:700 18px var(--serif);text-decoration:none;color:var(--crema)}
.marca-g{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--frambuesa);color:#fff;font:italic 600 20px var(--serif);padding-bottom:3px}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--frambuesa);color:#fff;text-decoration:none;font-weight:700;padding:16px 28px;border-radius:999px;box-shadow:0 8px 0 var(--frambuesa2),0 14px 24px rgba(147,74,28,.25);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 0 var(--frambuesa2),0 18px 28px rgba(147,74,28,.3)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--frambuesa2),0 6px 12px rgba(147,74,28,.2)}
.flecha{display:inline-block;transition:transform .2s}
.btn:hover .flecha{transform:translateX(4px)}
.btn-chico{white-space:nowrap;padding:9px 18px;font-size:14px;box-shadow:0 4px 0 var(--frambuesa2)}
.btn-chico:active{transform:translateY(3px);box-shadow:0 1px 0 var(--frambuesa2)}
.btn-grande{font-size:20px;padding:20px 40px}
.enlace{font-weight:700;color:var(--cacao);text-decoration:none;background:linear-gradient(var(--mantequilla),var(--mantequilla)) 0 92%/100% 8px no-repeat;padding:0 2px;transition:background-size .2s}
.enlace:hover{background-size:100% 40%}

/* Goteo de chocolate entre secciones */
.goteo{position:absolute;left:0;bottom:-1px;width:100%;height:70px;fill:var(--cacao);transform:scaleY(-1)}
.goteo-arriba{top:-1px;bottom:auto;transform:none;fill:var(--cacao)}

/* Cinta de recetas */
.cinta{background:var(--cacao);color:var(--mantequilla);overflow:hidden;padding:16px 0 30px;margin-top:-1px}
.cinta-pista{display:flex;gap:44px;width:max-content;animation:cinta 60s linear infinite;font:italic 600 22px var(--serif)}
.cinta-pista span::before{content:"✦";color:var(--frambuesa);margin-right:44px;font-style:normal}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}

/* 2. Problema */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tarjeta{border-radius:var(--radio);padding:32px 28px;transition:transform .25s ease}
.tarjeta:hover{transform:translateY(-6px) rotate(-.6deg)}
.t-rosa{background:var(--rosa)} .t-pista{background:var(--pistacho2)} .t-mante{background:var(--mante2)}
.num{font:800 46px/1 var(--serif);color:var(--cacao);opacity:.18;display:block;margin-bottom:8px}

/* 3. Solución */
.solucion{background:#fff}
.subrayado{background:linear-gradient(var(--rosa),var(--rosa)) 0 88%/100% 30% no-repeat}
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:84px}
.invertido > :first-child{order:2}
.paso{display:inline-block;font-family:var(--mono);letter-spacing:.04em;background:var(--cacao);color:var(--mantequilla);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.foto-marco{position:relative;margin:0}
.foto-marco img{border-radius:var(--radio);aspect-ratio:1;object-fit:cover;width:100%;position:relative;z-index:1;transition:transform .35s ease}
.foto-marco::before{content:"";position:absolute;inset:0;border-radius:var(--radio);transform:translate(18px,18px) rotate(2deg);transition:transform .35s ease}
.foto-marco:hover img{transform:translate(-4px,-4px)}
.foto-marco:hover::before{transform:translate(24px,24px) rotate(3deg)}
.m-rosa::before{background:var(--frambuesa)} .m-pista::before{background:var(--pistacho)}
.familias{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.familia{background:var(--crema);border:1.5px solid var(--borde);border-radius:12px;padding:8px 14px;font-size:15px}
.familia b{color:var(--frambuesa2);font-family:var(--serif);font-size:18px}

.panel-molde{background:var(--crema2);border-radius:var(--radio);padding:30px;text-align:center}
.molde-visual{height:170px;display:grid;place-items:center;position:relative}
.molde{width:120px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--mantequilla) 0 55%,var(--caramelo) 56% 62%,#b8bcc2 63%);box-shadow:0 10px 20px rgba(43,23,16,.15);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.molde-cm{position:absolute;font:800 22px var(--serif);color:var(--cacao)}
.moldes{display:inline-flex;background:#fff;border-radius:999px;padding:5px;margin:14px 0 18px;box-shadow:0 2px 8px rgba(43,23,16,.06)}
.moldes button{border:0;background:none;font:700 15px var(--sans);padding:9px 20px;border-radius:999px;cursor:pointer;color:var(--texto);transition:background .2s,color .2s}
.moldes button[aria-pressed=true]{background:var(--frambuesa);color:#fff}
.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;text-align:left}
.tabla td{padding:11px 18px;border-bottom:1px solid var(--borde)}
.tabla td:last-child{text-align:right;font:700 18px var(--serif);color:var(--cacao);font-variant-numeric:tabular-nums}
.tabla tr:last-child td{border:0}
.pulso{animation:pulso .4s ease}
@keyframes pulso{40%{color:var(--frambuesa);transform:scale(1.12)}}
.tabla td{transform-origin:right center}
.nota{font-size:14px;color:var(--suave);margin-top:12px}

.recibo{background:#fff;border:2px dashed var(--borde);border-radius:6px;padding:28px 30px;font-variant-numeric:tabular-nums;box-shadow:var(--sombra);transform:rotate(-1.5deg)}
.recibo-tit{font:700 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin-bottom:12px}
.fila{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dotted var(--borde)}
.fila b{font-family:var(--serif)}
.fila b::after{content:" u."}
.total{border:0;border-top:2px solid var(--cacao);margin-top:6px;font-size:20px;color:var(--cacao)}
.total b{color:var(--frambuesa2);font-size:26px}

/* 4. Beneficios */
.beneficios{background:var(--cacao);color:#ecd9c8;padding-top:150px}
.beneficios h2{color:#fff}
.beneficios .etiqueta{color:var(--mantequilla)}
.lista-beneficios{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lista-beneficios li{background:var(--cacao2);border-radius:var(--radio);padding:28px 24px;transition:transform .25s ease,background .25s}
.lista-beneficios li:hover{transform:translateY(-6px);background:#55301f}
.lista-beneficios strong{display:block;color:#fff;font:700 20px/1.2 var(--serif);margin:14px 0 8px}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--mantequilla);color:var(--cacao);font-size:22px;font-weight:700}
.lista-beneficios li:nth-child(2) .ico{background:var(--pistacho)}
.lista-beneficios li:nth-child(3) .ico{background:var(--frambuesa);color:#fff}
.lista-beneficios li:nth-child(4) .ico{background:var(--rosa)}

/* 5. Por dentro */
.confianza{background:var(--crema)}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.polaroid{background:#fff;padding:12px 12px 16px;border-radius:6px;box-shadow:var(--sombra);transform:rotate(var(--r));transition:transform .3s ease}
.polaroid:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
.polaroid img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:3px}
.polaroid figcaption{text-align:center;font:italic 600 18px var(--serif);color:var(--cacao);margin-top:10px}

/* 6. Preguntas */
.preguntas{background:var(--pistacho2)}
details{background:#fff;border-radius:16px;margin-bottom:12px;transition:box-shadow .2s}
details[open]{box-shadow:0 6px 20px rgba(43,23,16,.08)}
summary{cursor:pointer;list-style:none;padding:20px 58px 20px 24px;font-weight:700;color:var(--cacao);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:20px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--crema2);display:grid;place-items:center;font-size:20px;color:var(--frambuesa2);transition:transform .25s,background .25s}
details[open] summary::after{transform:rotate(45deg);background:var(--rosa)}
details p{padding:0 24px 22px}

/* 7. Cierre */
.cierre{background:radial-gradient(circle at 50% 0,var(--rosa) 0,transparent 55%),var(--crema)}
.ticket{background:#fff;border-radius:28px;padding:52px 40px;text-align:center;box-shadow:0 30px 60px rgba(43,23,16,.14);position:relative;overflow:hidden}
.ticket::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:repeating-linear-gradient(90deg,var(--frambuesa) 0 30px,var(--mantequilla) 30px 60px,var(--pistacho) 60px 90px)}
.ticket h2{margin:0 auto 26px}
.check{list-style:none;padding:0;text-align:left;display:inline-block;margin-bottom:28px}
.check li{padding-left:34px;position:relative;margin:12px 0}
.check li::before{content:"✓";position:absolute;left:0;top:3px;color:#fff;background:var(--pistacho);width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700;display:grid;place-items:center}
.precio{font:800 72px/1 var(--serif);color:var(--cacao);margin-bottom:28px}
.precio small{font-size:28px;letter-spacing:.04em}
.precio span{display:block;font:500 15px var(--sans);color:var(--suave);margin-top:8px}
.aviso{margin-top:18px;color:var(--frambuesa2);font-weight:700}
.mini{margin-top:22px;font-size:14px;color:var(--suave)}
.pie{text-align:center;padding:30px 20px;font-size:14px;background:var(--cacao);color:#cbb3a3}

/* Entradas: solo opacidad y movimiento (baratas para el navegador) */
.entra{opacity:0;animation:entra .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d) * 110ms)}
@keyframes entra{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.aparece{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.aparece.visto{opacity:1;transform:none}
.tarjetas .aparece:nth-child(2),.lista-beneficios .aparece:nth-child(2),.galeria .aparece:nth-child(2){transition-delay:.08s}
.tarjetas .aparece:nth-child(3),.lista-beneficios .aparece:nth-child(3),.galeria .aparece:nth-child(3){transition-delay:.16s}
.lista-beneficios .aparece:nth-child(4){transition-delay:.24s}
.polaroid.aparece.visto{transform:rotate(var(--r))}
.polaroid.aparece.visto:hover{transform:rotate(0) translateY(-8px) scale(1.03)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .entra,.aparece{opacity:1;transform:none}
  .gramos::after{transform:none}
}

/* Tablet */
@media (max-width:980px){ .lista-beneficios{grid-template-columns:1fr 1fr} }
/* Celular */
@media (max-width:820px){
  section{padding:68px 0}
  .portada-grid,.bloque{grid-template-columns:1fr;gap:34px}
  .invertido > :first-child{order:0}
  .tarjetas,.galeria{grid-template-columns:1fr}
  .galeria{max-width:340px;margin:0 auto}
  .lista-beneficios{grid-template-columns:1fr}
  .bloque{margin-top:60px}
  .foto-marco{margin-right:18px}
  .beneficios{padding-top:110px}
  .ticket{padding:44px 22px}
  .precio{font-size:60px}
  .btn-grande{font-size:18px;padding:18px 28px;white-space:nowrap}
  .marca{font-size:16px}
}
@media (max-width:440px){ .marca{font-size:0;gap:0} .marca-g{font-size:20px} }

/* Páginas A4 */
.intro-hojas{margin:-14px 0 40px;color:var(--suave);font-size:18px}
.hojas{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:start}
.hoja{margin:0;background:#fff;padding:10px;border-radius:6px;box-shadow:0 2px 0 var(--borde),0 18px 40px rgba(42,28,20,.14);transform:rotate(var(--r));transition:transform .3s ease,box-shadow .3s ease}
.hoja img{width:100%;border-radius:2px}
.hoja figcaption{text-align:center;font:italic 600 17px var(--serif);color:var(--cacao);margin-top:12px}
.hoja-centro{margin-top:-18px}
.hoja.aparece.visto{transform:rotate(var(--r))}
.hoja:hover,.hoja.aparece.visto:hover{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:0 2px 0 var(--borde),0 28px 50px rgba(42,28,20,.2)}

/* Regalo: versión celular */
.regalo{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:center;margin-top:80px;background:var(--crema2);border-radius:28px;padding:36px 44px;border:2px dashed var(--mantequilla)}
.telefono{background:var(--cacao);padding:10px;border-radius:30px;box-shadow:var(--sombra);transform:rotate(-4deg);transition:transform .3s ease}
.regalo:hover .telefono{transform:rotate(0) translateY(-6px)}
.telefono img{border-radius:22px;width:100%}
.lazo{display:inline-block;background:var(--pistacho);color:#fff;font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.lazo::before{content:"🎁 "}
@media (max-width:820px){
  .hojas{grid-template-columns:1fr;max-width:360px;margin:0 auto;gap:40px}
  .hoja-centro{margin-top:0}
  .regalo{grid-template-columns:1fr;padding:30px 24px;text-align:center}
  .telefono{max-width:170px;margin:0 auto}
}

/* ===== Momento firma: la torta que se arma ===== */
.armado{background:var(--crema2);padding:110px 0}
.armado-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.armado-escena{position:sticky;top:110px;height:calc(100vh - 150px);max-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.torta{position:relative;width:min(340px,80%);aspect-ratio:1/.9;cursor:pointer;-webkit-tap-highlight-color:transparent}
.capa{position:absolute;left:50%;translate:-50% 0;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
/* estado inicial: capas arriba e invisibles */
.etiqueta-precio{position:absolute;right:-6%;top:6%;background:#fff;border:2px solid var(--frambuesa);border-radius:10px;padding:8px 14px 8px 22px;text-align:left;box-shadow:var(--sombra);transform-origin:12% 50%;transform:rotate(-70deg) scale(.6);opacity:0;transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.etiqueta-precio::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--crema2);border:1.5px solid var(--frambuesa)}
.etiqueta-precio span{display:block;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.etiqueta-precio b{font:700 18px var(--serif);color:var(--frambuesa2)}
.torta[data-paso="5"] .etiqueta-precio{opacity:1;transform:rotate(8deg);animation:columpio 3s 1s ease-in-out infinite}
@keyframes columpio{50%{transform:rotate(2deg)}}
.torta:active{transform:scale(.97)}
.torta{transition:transform .15s}

.bascula{margin-top:26px;background:var(--cacao);color:var(--crema);border-radius:16px;padding:12px 22px;min-width:240px;display:flex;justify-content:space-between;gap:18px;align-items:baseline;box-shadow:0 6px 0 #160e0a}
.bascula-que{font:500 13px var(--mono);color:#cdb8a6}
.bascula-num{font:500 26px var(--mono);color:#ffd27a;text-shadow:0 0 12px rgba(255,210,122,.45);font-variant-numeric:tabular-nums}
.bascula-num.cambia{animation:parpadeo .45s ease}
@keyframes parpadeo{30%{opacity:.2}}
.toca{margin-top:14px;font:italic 600 15px var(--serif);color:var(--suave)}

.armado-pasos h2{margin-bottom:20px}
.paso-armado{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .4s ease}
.paso-armado.activo{opacity:1}
.paso-armado:last-child{min-height:150vh;justify-content:flex-start;padding-top:30vh}
.paso-n{font:600 14px var(--mono);color:var(--frambuesa2);letter-spacing:.05em;text-transform:uppercase}
.paso-armado h3{font-size:clamp(26px,3vw,34px);margin:8px 0 12px}
.paso-armado p{font-size:19px;max-width:38ch}

/* Chispitas al tocar */
.chispas{position:absolute;inset:0;pointer-events:none}
.chispa{position:absolute;left:50%;top:30%;width:9px;height:4px;border-radius:3px;animation:chispa 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes chispa{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}
}

@media (max-width:820px){
  .armado{padding:70px 0}
  .armado-grid{grid-template-columns:1fr;gap:0}
  .armado-escena{top:64px;height:auto;padding:14px 0 10px;background:var(--crema2);z-index:5}
  .torta{width:190px}
  .bascula{margin-top:12px;min-width:220px;padding:8px 16px}
  .bascula-num{font-size:20px}
  .toca{display:none}
  .torta{width:170px}
  /* En celular la escena ocupa la mitad de arriba: el paso activo se lee debajo (ver rootMargin en app.js) */
  .paso-armado{min-height:62vh;justify-content:flex-end;padding-bottom:12vh}
  .paso-armado:last-child{min-height:70vh;padding-top:0;justify-content:flex-end}
  .etiqueta-precio{right:-26px;top:-2%;padding:5px 10px 5px 18px} .etiqueta-precio b{font-size:14px} .etiqueta-precio span{font-size:9px}
  .armado-escena{padding-top:34px;box-shadow:0 14px 18px -14px rgba(42,28,20,.22);margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);z-index:8}
}
@media (prefers-reduced-motion:reduce){ .torta .capa::before{animation:none!important;opacity:1!important;transform:none!important} .paso-armado{opacity:1} }

/* ===== Portada: el libro sobre la balanza ===== */
.portada2{position:relative;overflow:hidden;background:radial-gradient(ellipse at 72% 38%,#5a3725 0,#3a2419 38%,var(--cacao) 72%);color:#e9d8c6;padding:70px 0 150px}
.portada2::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 30%,rgba(255,214,150,.18),transparent 45%);pointer-events:none}
.portada2-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:min(640px,78vh)}
.portada2 .etiqueta{color:var(--mantequilla)}
.titulo2{font-size:clamp(56px,8.6vw,118px);line-height:.92;letter-spacing:-.03em;color:#fff7ec;margin-bottom:26px}
.titulo2 .gramos{color:var(--mantequilla)}
.titulo2 .gramos::after{background:var(--frambuesa);height:.1em;z-index:0;bottom:-.02em}
.sub2{font-size:21px;max-width:30ch;margin-bottom:34px;color:#e9d8c6}
.sub2 strong{color:#fff}
.enlace-claro{color:#fff7ec}
.precio-mini{margin-top:28px;font-size:15px;color:#c8b29f}
.precio-mini b{color:#fff;font-family:var(--mono);font-weight:500;background:rgba(255,255,255,.08);padding:3px 10px;border-radius:8px;margin-right:4px}

/* Mesa: libro, celular y balanza */
.mesa{position:relative;height:560px;display:flex;justify-content:center;align-items:flex-end;perspective:1400px}
.libro3d{position:absolute;bottom:118px;left:50%;width:250px;aspect-ratio:993/1404;margin-left:-125px;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(6deg);animation:libro-flota 7s ease-in-out infinite;z-index:3}
.libro3d:hover{animation-play-state:paused}
@keyframes libro-flota{50%{transform:rotateY(-16deg) rotateX(4deg) translateY(-12px)}}
.libro-tapa{position:absolute;inset:0;border-radius:3px 8px 8px 3px;overflow:hidden;transform:translateZ(14px);box-shadow:0 30px 50px rgba(0,0,0,.5)}
.libro-tapa img{width:100%;height:100%;object-fit:cover}
.libro-tapa::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.3) 0,transparent 30%,transparent 70%,rgba(0,0,0,.14)),linear-gradient(90deg,rgba(0,0,0,.28) 0,transparent 4%)}
.libro3d::after{content:"";position:absolute;top:3px;bottom:3px;right:-10px;width:13px;border-radius:0 4px 4px 0;background:repeating-linear-gradient(180deg,#fbf4e8 0 2px,#e2d6c3 2px 3px);transform:translateZ(6px)}

.celu{position:absolute;bottom:150px;left:calc(50% + 70px);width:118px;padding:6px;background:#1a110c;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.45);transform:rotate(12deg);z-index:2;animation:celu-asoma 7s ease-in-out infinite}
.celu img{border-radius:15px}
@keyframes celu-asoma{50%{transform:rotate(9deg) translate(8px,-6px)}}

.bascula2{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center}
.bascula2-plato{width:330px;height:16px;border-radius:50%;background:linear-gradient(#f3f0eb,#c9c4bd);box-shadow:0 4px 0 #a9a39b}
.bascula2-cuerpo{margin-top:8px;width:360px;height:96px;border-radius:22px 22px 30px 30px;background:linear-gradient(#f7efe4,#e4d6c3);box-shadow:inset 0 -8px 0 rgba(0,0,0,.08),0 24px 40px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;gap:22px}
.pantalla{background:#1d2a1f;color:#b9f27c;font:500 24px var(--mono);padding:8px 16px;border-radius:10px;min-width:200px;text-align:center;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);text-shadow:0 0 10px rgba(185,242,124,.55);white-space:nowrap}
.pantalla.cambia{animation:parpadeo .4s ease}
.botones{display:flex;flex-direction:column;gap:8px}
.botones i{width:16px;height:16px;border-radius:50%;background:var(--frambuesa);box-shadow:0 3px 0 var(--frambuesa2)}
.botones i+i{background:#cfc3b3;box-shadow:0 3px 0 #a99c8b}

/* Notas escritas a mano */
.nota-mano{position:absolute;font:600 27px/1.05 "Caveat",cursive;color:var(--mantequilla);z-index:5;transform:rotate(-6deg)}
.nota-mano svg{display:block;width:80px;height:54px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:trazo-flecha 1s 1.4s ease forwards}
@keyframes trazo-flecha{to{stroke-dashoffset:0}}
.n1{left:0;top:10%}
.n1 svg{margin:4px 0 0 60px}
.n2{right:0;top:16%;transform:rotate(5deg);text-align:right}
.n2 svg{margin:4px 0 0 auto}

/* Harina flotando en la luz */
.harina{position:absolute;inset:0;pointer-events:none}
.harina i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:rgba(255,244,228,.55);animation:harina 14s linear infinite}
.harina i:nth-child(1){left:52%}.harina i:nth-child(2){left:60%;animation-delay:-2s;width:3px;height:3px}
.harina i:nth-child(3){left:68%;animation-delay:-4s}.harina i:nth-child(4){left:75%;animation-delay:-6s;width:7px;height:7px}
.harina i:nth-child(5){left:82%;animation-delay:-8s}.harina i:nth-child(6){left:88%;animation-delay:-10s;width:3px;height:3px}
.harina i:nth-child(7){left:56%;animation-delay:-12s}.harina i:nth-child(8){left:64%;animation-delay:-5s;width:4px;height:4px}
.harina i:nth-child(9){left:10%;animation-delay:-3s;width:3px;height:3px}.harina i:nth-child(10){left:22%;animation-delay:-9s}
.harina i:nth-child(11){left:35%;animation-delay:-7s;width:4px;height:4px}.harina i:nth-child(12){left:94%;animation-delay:-1s}
@keyframes harina{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(-40px,-720px);opacity:0}}

@media (max-width:820px){
  .portada2{padding:40px 0 120px}
  .portada2-grid{grid-template-columns:1fr;min-height:0}
  .mesa{height:440px;margin-top:10px}
  .libro3d{width:185px;margin-left:-92px;bottom:96px}
  .celu{width:88px;left:calc(50% + 46px);bottom:118px}
  .bascula2-cuerpo{width:290px;height:78px}.bascula2-plato{width:262px}
  .pantalla{font-size:19px;min-width:165px}
  .nota-mano{font-size:21px}
  .nota-mano svg{width:56px;height:38px}
  .n1{top:0}.n2{top:4%}
}
.linea{display:block}
.gramos{font-style:italic;font-weight:600;position:relative;white-space:nowrap}
.gramos::after{content:"";position:absolute;left:0;right:0;border-radius:9px;transform-origin:left;transform:scaleX(0);animation:trazo .7s .9s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes trazo{to{transform:scaleX(1)}}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:26px}

/* ===== Detalles compartidos: cinta adhesiva y apuntes a mano ===== */
.cinta-adh{position:absolute;top:-14px;left:50%;width:110px;height:30px;margin-left:-55px;background:rgba(226,178,96,.55);transform:rotate(-4deg);z-index:3;clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,4% 96%,0 50%)}
.cinta-adh.c2{background:rgba(125,145,82,.45);transform:rotate(5deg)}
.apunte{font:600 24px/1.1 "Caveat",cursive;color:var(--frambuesa2);margin-top:14px;transform:rotate(-2deg)}

/* ===== 2. Problema: fichas de receta corregidas ===== */
.problema2{background:var(--crema);padding:110px 0}
.problema2 h2{max-width:none}
.fichas-receta{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:10px}
.ficha-receta{position:relative;background:#fffdf8;border-radius:4px;padding:26px 26px 22px;box-shadow:0 2px 0 #eadfce,0 16px 30px rgba(42,28,20,.10);background-image:linear-gradient(transparent 0 46px,#e7b9a6 46px 47px,transparent 47px),repeating-linear-gradient(transparent 0 33px,#dbe4ee 33px 34px);background-position:0 0,0 14px;transform:rotate(var(--r));transition:transform .3s ease}
.ficha-receta.aparece.visto{transform:rotate(var(--r))}
.ficha-receta:hover,.ficha-receta.aparece.visto:hover{transform:rotate(0) translateY(-6px)}
.ficha-tit{font:700 20px/1.2 var(--serif);color:var(--cacao);margin-bottom:22px}
.vago{font:600 25px/1.3 "Caveat",cursive;color:#7a6a5f;margin-bottom:4px}
.vago s{text-decoration:none;background:linear-gradient(var(--frambuesa),var(--frambuesa)) 0 55%/0 3px no-repeat;transition:background-size .5s .5s ease}
.visto .vago s{background-size:100% 3px}
.corrige{font:600 27px/1.2 "Caveat",cursive;color:var(--frambuesa2);opacity:0;transform:translateY(6px) rotate(-2deg);transition:opacity .4s 1s,transform .4s 1s}
.visto .corrige{opacity:1;transform:rotate(-2deg)}
.ficha-pie{margin-top:18px;padding-top:12px;border-top:1px dashed var(--borde);font-size:15px;color:var(--suave)}
.mancha{position:absolute;right:16px;top:12px;width:70px;height:70px;border-radius:50%;border:5px solid rgba(160,97,46,.13);box-shadow:inset 0 0 0 3px rgba(160,97,46,.06)}
.mancha.m2{right:auto;left:62%;top:auto;bottom:18px;width:52px;height:52px}
.remate{margin-top:52px;text-align:center;font:600 34px/1.2 "Caveat",cursive;color:var(--cacao)}
.remate em{font:italic 700 30px var(--serif);color:var(--frambuesa2)}

/* ===== 3. Solución: mesa de trabajo con cuadrícula de cuaderno ===== */
.solucion2{background-color:#fffaf3;background-image:radial-gradient(#e9dccb 1.2px,transparent 1.3px);background-size:22px 22px;padding:110px 0}
.foto-cinta{position:relative;margin:0;background:#fff;padding:12px 12px 14px;box-shadow:0 18px 40px rgba(42,28,20,.14);transform:rotate(var(--r));transition:transform .35s ease}
.foto-cinta img{aspect-ratio:1;object-fit:cover;width:100%}
.foto-cinta figcaption{font:600 24px "Caveat",cursive;color:var(--cacao);text-align:center;margin-top:8px}
.foto-cinta:hover{transform:rotate(0) scale(1.02)}
.panel-molde{position:relative;background:#fff;box-shadow:0 18px 40px rgba(42,28,20,.12)}
.recibo{position:relative;background:#fff;border:0;border-radius:0;font-family:var(--mono);padding:30px 30px 34px;box-shadow:0 18px 40px rgba(42,28,20,.14);transform:rotate(-1.5deg);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;padding-bottom:40px}
.recibo .fila{font-size:15px}
.recibo .fila b{font-family:var(--mono);font-weight:500}
.recibo .fila b::after{content:""}
.recibo .total{font-family:var(--serif)}
.recibo .total b{font:500 24px var(--mono)}
.recibo-envoltura{position:relative}
.apunte-recibo{position:absolute;right:-6px;bottom:-22px;z-index:2;transform:rotate(-6deg);font-size:24px;background:var(--mante2);padding:2px 10px;border-radius:6px}

/* ===== 4. Beneficios: pizarra de pastelería ===== */
.beneficios2{background:var(--cacao);padding:130px 0 110px;position:relative}
.beneficios2::before{content:"";position:absolute;inset:-1px 0 auto;height:70px;background:#fffaf3;-webkit-mask:radial-gradient(30px at 50% 0,#000 98%,#0000) 0 0/60px 70px;mask:radial-gradient(30px at 50% 0,#000 98%,#0000) 0 0/60px 70px}
.pizarra{position:relative;max-width:880px;margin:0 auto;background:radial-gradient(ellipse at 30% 20%,#3d4a3f,#263028 70%);border:16px solid #8a5a34;border-radius:10px;box-shadow:inset 0 0 60px rgba(0,0,0,.45),0 30px 60px rgba(0,0,0,.4);padding:44px 54px 50px;color:#f3efe6}
.pizarra::before{content:"";position:absolute;inset:-16px;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);pointer-events:none}
.pizarra-tit{font:700 46px/1 "Caveat",cursive;text-align:center;margin-bottom:28px;color:#ffe9b8}
.pizarra-tit::after{content:"";display:block;width:180px;height:3px;margin:10px auto 0;background:rgba(255,233,184,.6);border-radius:3px;transform:rotate(-1deg)}
.pizarra ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.pizarra li{font-family:"Caveat",cursive;line-height:1.1}
.pizarra li b{display:block;font-size:31px;font-weight:700;color:#fff}
.pizarra li b::before{content:"✓ ";color:#b9d68e}
.pizarra li span{font-size:23px;color:#d5d9cf}
.pizarra-firma{text-align:right;margin-top:26px;font:600 24px "Caveat",cursive;color:#e9c98f}
.tiza{position:absolute;bottom:-26px;left:12%;width:70px;height:12px;border-radius:4px;background:#f6f2ea;box-shadow:90px 2px 0 -1px #f2c6c6}
.pizarra li{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.pizarra.visto li{opacity:1;transform:none}
.pizarra.visto li:nth-child(2){transition-delay:.15s}.pizarra.visto li:nth-child(3){transition-delay:.3s}.pizarra.visto li:nth-child(4){transition-delay:.45s}

/* ===== 5. Por dentro: hojas pegadas y caja de regalo ===== */
.confianza2{background:var(--crema2);padding:110px 0}
.confianza2 .hoja{position:relative}
.confianza2 .hoja figcaption{font:600 25px "Caveat",cursive}
.regalo2{display:grid;grid-template-columns:230px 1fr;gap:50px;align-items:center;margin-top:90px;background:#fff;border-radius:26px;padding:40px 48px;box-shadow:var(--sombra)}
.caja-regalo{position:relative;padding:26px 30px 0;background:linear-gradient(90deg,transparent 44%,var(--frambuesa) 44% 56%,transparent 56%),var(--mante2);border-radius:14px}
.moño{position:absolute;top:-22px;left:50%;width:70px;height:36px;margin-left:-35px;z-index:3}
.moño::before,.moño::after{content:"";position:absolute;top:0;width:34px;height:30px;border:7px solid var(--frambuesa);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.moño::before{left:0;transform:rotate(-20deg)}.moño::after{right:0;transform:rotate(20deg)}
.caja-regalo .telefono{position:relative;transform:rotate(-3deg) translateY(10px);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.regalo2:hover .telefono{transform:rotate(0) translateY(-18px)}

/* ===== 6. Preguntas como chat ===== */
.preguntas2{background:var(--crema);padding:110px 0}
.chat{background:#efe6d8;border-radius:24px;overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--borde)}
.chat-cabecera{display:flex;align-items:center;gap:12px;background:var(--cacao);color:#fff;padding:14px 20px}
.chat-cabecera small{display:block;color:#b9d68e;font-size:13px}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--frambuesa);font:italic 600 22px var(--serif);padding-bottom:3px}
.chat-cuerpo{padding:24px 18px 28px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(rgba(160,97,46,.08) 1px,transparent 1.5px);background-size:16px 16px}
.msg{max-width:78%;padding:10px 14px;border-radius:16px;font-size:16px;line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,.08);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .35s,transform .35s}
.msg.visto{opacity:1;transform:none}
.ellos{align-self:flex-start;background:#fff;border-top-left-radius:4px;font-weight:600;color:var(--cacao)}
.yo{align-self:flex-end;background:#f4dfc9;border-top-right-radius:4px}

/* ===== 7. Cierre: boleta con sello ===== */
.cierre2{background:radial-gradient(circle at 50% 0,var(--rosa) 0,transparent 60%),var(--crema);padding:110px 0 130px}
.boleta{position:relative;max-width:520px;margin:0 auto;background:#fffdf8;padding:40px 36px 50px;font-family:var(--mono);color:var(--cacao);box-shadow:0 30px 60px rgba(42,28,20,.16);transform:rotate(-1deg);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%}
.boleta.aparece.visto{transform:rotate(-1deg)}
.boleta-tienda{font:800 30px var(--serif);text-align:center}
.boleta-sub{text-align:center;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:22px;padding-bottom:16px;border-bottom:2px dashed var(--borde)}
.boleta-linea{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:15px}
.boleta-linea span:last-child{color:var(--pistacho);font-weight:700}
.regalo-linea span:last-child{color:var(--frambuesa2);text-transform:uppercase;font-size:13px}
.boleta-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:2px dashed var(--borde)}
.boleta-total>span:first-child{font-size:15px;text-transform:uppercase;letter-spacing:.1em}
.boleta .precio{font:800 58px/1 var(--serif);margin:0}
.boleta .precio small{font:500 22px var(--mono)}
.boleta-nota{text-align:right;font-size:13px;color:var(--suave);margin:4px 0 28px}
.boleta .btn{width:100%;justify-content:center;font-family:var(--sans)}
.boleta .aviso{text-align:center}
.boleta-gracias{text-align:center;margin-top:24px;font:600 24px "Caveat",cursive;color:var(--suave)}
.sello{position:absolute;right:14px;top:16px;width:92px;height:92px;font-size:11px!important;border-radius:50%;border:4px double var(--frambuesa);color:var(--frambuesa);display:grid;place-content:center;text-align:center;font:600 13px/1.2 var(--mono);text-transform:uppercase;transform:rotate(-16deg) scale(1.5);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1) .7s,opacity .2s .7s}
.sello b{font-size:12px}
.boleta.visto .sello{opacity:.85;transform:rotate(-16deg) scale(1)}

@media (max-width:820px){
  .fichas-receta{grid-template-columns:1fr;max-width:380px;margin:0 auto;gap:34px}
  .remate{font-size:28px}.remate em{font-size:25px}
  .pizarra{padding:32px 22px 38px;border-width:12px}
  .pizarra ul{grid-template-columns:1fr;gap:18px}
  .pizarra-tit{font-size:38px}
  .regalo2{grid-template-columns:1fr;text-align:center;padding:40px 24px 30px}
  .caja-regalo{max-width:200px;margin:0 auto}
  .msg{max-width:88%;font-size:15px}
  .boleta{padding:36px 22px 46px}
  .boleta .precio{font-size:48px}
  .sello{width:74px;height:74px;top:8px;right:4px;font-size:9px!important}
  .boleta-tienda{font-size:24px;padding-right:84px;text-align:left}
  .boleta-sub{text-align:left;padding-right:84px}
  .apunte-recibo{right:0}
}

/* Problema: solo lo que salió mal */
.vago{font:600 26px/1.25 "Caveat",cursive;color:#5d4a3e;margin-bottom:10px}
.paso-mal{font-size:16px;line-height:1.5;color:var(--texto);padding-top:12px;border-top:1px dashed var(--borde)}
.remate em{font:italic 700 28px var(--serif);color:var(--frambuesa2)}


/* ===== Torta en SVG: volumen, pedestal, goteo y decoración ===== */
.torta{width:min(400px,92%);aspect-ratio:400/420}
.torta-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.ventana{position:absolute;left:8%;right:8%;top:-4%;bottom:1%;border-radius:999px 999px 24px 24px;background:
  radial-gradient(circle at 50% 30%,rgba(255,236,200,.85),transparent 60%),
  repeating-linear-gradient(0deg,transparent 0 27px,rgba(42,28,20,.06) 27px 28px),
  repeating-linear-gradient(90deg,transparent 0 27px,rgba(42,28,20,.06) 27px 28px),#f7ead8;
  box-shadow:inset 0 0 0 6px #fffaf3,inset 0 0 0 7px var(--borde)}
.piso,.piso *{transition:opacity .3s}
/* plano punteado mientras no le toca */
.piso:not(.lleno) :is(path,ellipse,circle){fill:none!important;stroke:rgba(42,28,20,.3)!important;stroke-width:1.6!important;stroke-dasharray:6 5}
.piso:not(.lleno) :is(.textura,.puff,.gotas,.deco circle,.deco ellipse){display:none}
.piso.lleno{animation:cae2 .75s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--retraso,0s)}
@keyframes cae2{0%{transform:translateY(-140px);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
.puff{transform-box:fill-box;transform-origin:center;opacity:0}
.piso.lleno .puff{animation:puff .7s ease-out both;animation-delay:calc(var(--retraso,0s) + .5s)}
@keyframes puff{0%{opacity:.75;transform:scale(.7)}100%{opacity:0;transform:scale(1.35,1.8)}}
.gota{transform-box:fill-box;transform-origin:top}
.piso.lleno .gota{animation:gotea 1.1s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.55s + var(--gd,0s))}
@keyframes gotea{from{transform:scaleY(.05)}to{transform:none}}
.brillos path{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0)}
.torta[data-paso="5"] .brillos path{animation:brilla 2.4s ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes brilla{0%,100%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
.etiqueta-precio{z-index:3}
.chispas{z-index:4}

/* Fichita de pasos bajo la balanza */
.ficha-paso{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.ficha-paso span{font:500 12px var(--mono);padding:4px 10px;border-radius:999px;border:1.5px dashed rgba(42,28,20,.25);color:var(--suave);transition:background .3s,color .3s,border-color .3s}
.ficha-paso span.hecho{background:var(--pistacho);border:1.5px solid var(--pistacho);color:#fff}
.ficha-paso span.hecho::before{content:"✓ "}
.ficha-paso span.ahora{background:var(--cacao);border:1.5px solid var(--cacao);color:#ffd27a}

@media (prefers-reduced-motion:reduce){ .piso.lleno,.piso.lleno .gota{animation:none} .puff{display:none} }
@media (max-width:820px){
  .torta{width:230px}
  .ficha-paso{display:none}
}

/* ===== Ambientación de cocina para la torta ===== */
.armado{overflow:clip;background:
  linear-gradient(180deg,rgba(241,231,217,0) 0,rgba(241,231,217,.7) 100%),
  repeating-linear-gradient(0deg,transparent 0 47px,rgba(160,97,46,.09) 47px 49px),
  repeating-linear-gradient(90deg,transparent 0 47px,rgba(160,97,46,.09) 47px 49px),
  #f5ebdd}
.utensilios{position:absolute;top:-46px;left:50%;width:min(380px,90%);margin-left:max(-190px,-45%);z-index:1;overflow:visible}
.cuelga{transform-box:fill-box;transform-origin:50% 0;animation:balanceo 5s ease-in-out infinite;animation-delay:var(--cd)}
@keyframes balanceo{0%,100%{transform:rotate(2.5deg)}50%{transform:rotate(-2.5deg)}}
.armado-escena{justify-content:flex-end;padding-bottom:10px}
.torta{margin-top:70px}
/* mesón de madera bajo el pedestal */
.torta::after{content:"";position:absolute;z-index:0;left:-60vw;right:-10%;top:92%;height:215px;
  background:linear-gradient(180deg,#c99561 0 10px,#a8723f 10px 14px,transparent 14px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 90px),
  linear-gradient(180deg,#9a6534,#7d4e27);
  box-shadow:0 -2px 0 rgba(0,0,0,.08),0 20px 40px rgba(42,28,20,.15);border-radius:0 6px 6px 0}
.ventana{z-index:0}
.torta-svg{z-index:2}
.bascula,.ficha-paso,.toca{position:relative;z-index:2}
.ficha-paso span{background:rgba(255,250,243,.9)}
.toca{color:#f3e2cc;margin-top:8px}
/* paños de cocina: una servilleta a cuadros sobre el mesón */
.armado-escena::after{content:"";position:absolute;z-index:1;left:-9%;bottom:12px;width:110px;height:70px;border-radius:6px;transform:rotate(-8deg);
  background:repeating-linear-gradient(0deg,rgba(181,96,42,.55) 0 8px,transparent 8px 16px),repeating-linear-gradient(90deg,rgba(181,96,42,.55) 0 8px,transparent 8px 16px),#fff8ee;
  box-shadow:0 8px 16px rgba(42,28,20,.2)}

/* Línea de avance de los pasos, con números grandes */
.armado-pasos{position:relative;padding-left:46px}
.armado-pasos::before{content:"";position:absolute;left:12px;top:260px;bottom:40vh;width:2px;background:repeating-linear-gradient(180deg,rgba(160,97,46,.45) 0 8px,transparent 8px 16px)}
.paso-armado{position:relative}
.paso-armado::before{content:"";position:absolute;left:-42px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#f5ebdd;border:3px solid rgba(160,97,46,.45);transition:background .3s,border-color .3s,transform .3s}
.paso-armado:last-child::before{top:calc(30vh + 30px)}
.paso-armado.activo::before{background:var(--frambuesa);border-color:var(--frambuesa);transform:scale(1.25);box-shadow:0 0 0 6px rgba(181,96,42,.15)}
.paso-armado::after{content:attr(data-paso);position:absolute;right:0;top:50%;transform:translateY(-58%);font:800 220px/1 var(--serif);color:var(--frambuesa);opacity:.1;pointer-events:none;z-index:0}
.paso-armado>*{position:relative;z-index:1}
.paso-armado:last-child::after{top:calc(30vh + 60px)}
.paso-armado .paso-n{display:inline-block;background:#fffaf3;border:1.5px solid var(--borde);padding:3px 12px;border-radius:999px}
.paso-armado p{background:rgba(255,250,243,.6);border-radius:10px}

@media (max-width:820px){
  .utensilios{display:none}
  .torta{margin-top:0}
  .torta::after{left:-20vw;right:-20vw;height:90px}
  .armado-escena::after{display:none}
  .armado-pasos{padding-left:34px}
  .armado-pasos::before{left:8px;top:200px}
  .paso-armado::before{left:-34px}
  .paso-armado::after{font-size:150px}
}

/* Nada puede ensanchar la página en el celular (el sello y las animaciones salen de fuera). clip no rompe position:sticky */
@supports (overflow-x:clip){ html,body{overflow-x:clip} }