:root { --papel:#E6EBEE; --renglon:#CFD8DF; --tinta:#1F2A38; --gris:#56616E; --lapiz:#C2412D; --pino:#D2A16A; --pino2:#E6BF8C;
  --hoja:#FBFCFC; --cinta:rgba(236,226,196,.9); --amarillo:#F7F1E1 }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body { font-family: 'Work Sans', system-ui, sans-serif; color: var(--tinta); font-size: 16px; line-height: 1.55;
  background: var(--papel) repeating-linear-gradient(to bottom, transparent 0 31px, var(--renglon) 31px 32px) }
img { display: block; max-width: 100%; height: auto }
h1, h2, h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -.025em; line-height: 1.02 }
h2 { font-size: clamp(32px, 7vw, 50px); margin-bottom: 12px }
h3 { font-size: 19px; letter-spacing: -.01em; line-height: 1.15 }
.mano { font-family: 'Caveat', cursive; font-weight: 600; color: var(--lapiz); letter-spacing: 0 }
.envol { max-width: 1080px; margin: 0 auto; padding: 0 20px }
section { padding: 60px 0 }
.lead { color: var(--gris); font-size: 17px; max-width: 600px }
.proto { background: var(--tinta); color: #E8EDF1; font-size: 12px; text-align: center; padding: 6px 12px }
.hoja { background: var(--hoja); box-shadow: 0 2px 8px rgba(31,42,56,.16); position: relative }
.cinta:before { content: ""; position: absolute; left: 50%; top: -11px; width: 88px; height: 24px; margin-left: -44px; background: var(--cinta);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); transform: rotate(-2deg); z-index: 2 }
.cta { display: flex; justify-content: center; align-items: center; background: var(--tinta); color: #fff; font-family: 'Bricolage Grotesque';
  font-weight: 700; font-size: 19px; padding: 17px 20px; border-radius: 6px; text-decoration: none; box-shadow: 0 3px 0 #0E151E }
.cta:hover { background: #2B3A4D } .cta:focus-visible { outline: 3px solid var(--lapiz); outline-offset: 3px }
.micro { font-size: 13px; color: var(--gris); margin-top: 10px; text-align: center }
/* inicio */
.hero { padding: 18px 0 30px }
.hero .marca { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 15px; letter-spacing: -.01em; margin-bottom: 12px }
.hero h1 { font-size: clamp(31px, 8.4vw, 70px) }
.hero h1 .mano { font-size: .7em; display: block; transform: rotate(-2deg); margin-top: 4px }
.hero .grid { display: grid; gap: 14px }
.polaroid { background: var(--hoja); padding: 8px 8px 30px; margin: 4px 6px 6px; box-shadow: 0 4px 14px rgba(31,42,56,.2); transform: rotate(-1.6deg); position: relative; max-width: 420px }
.polaroid img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 55% }
.polaroid .mano { position: absolute; left: 14px; bottom: 6px; font-size: 21px; color: var(--tinta) }
.hero .baj { color: var(--gris); font-size: 15.5px }
.precio { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap }
.precio s { color: var(--gris); font-size: 17px } .precio b { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1 }
.precio .mano { font-size: 22px }
/* anotada */
.anotada { display: grid; gap: 22px; margin-top: 28px; align-items: start }
.anotada .hoja { padding: 8px; transform: rotate(.6deg) }
.anotada .hoja img { width: 100% }
.notas { display: grid; gap: 14px }
.nota { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start }
.nota .n { font-family: 'Caveat'; font-weight: 600; font-size: 28px; color: var(--lapiz); width: 34px; height: 34px; border: 2px solid var(--lapiz);
  border-radius: 50% 46% 52% 48%; display: flex; align-items: center; justify-content: center; line-height: 1 }
.nota p { color: var(--gris); font-size: 15px; margin-top: 2px }
/* dolores */
.dolores { display: grid; gap: 14px; margin-top: 24px }
.dolor { background: var(--amarillo); padding: 16px 18px 14px; box-shadow: 0 2px 6px rgba(31,42,56,.14) }
.dolor:nth-child(odd) { transform: rotate(-.7deg) } .dolor:nth-child(even) { transform: rotate(.6deg) }
.dolor h3 { font-family: 'Caveat'; font-weight: 600; font-size: 26px; color: var(--lapiz); letter-spacing: 0; line-height: 1.05; margin-bottom: 4px }
.dolor p { font-size: 15px; color: var(--tinta) }
/* catálogo */
.tomo { margin-top: 34px }
.tomo h3 { font-size: 24px; margin-bottom: 4px } .tomo > p { color: var(--gris); font-size: 15px; margin-bottom: 14px }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px }
.foto { background: var(--hoja); padding: 6px 6px 8px; box-shadow: 0 2px 8px rgba(31,42,56,.16) }
.foto:nth-child(3n+1) { transform: rotate(-1.2deg) } .foto:nth-child(3n+2) { transform: rotate(.9deg) } .foto:nth-child(3n) { transform: rotate(-.4deg) }
.foto img { width: 100%; aspect-ratio: 1; object-fit: cover }
.foto b { display: block; font-family: 'Caveat'; font-weight: 600; font-size: 19px; line-height: 1.05; margin-top: 6px }
.foto span { font-size: 12px; color: var(--gris) }
/* pasos */
.pasos { display: grid; gap: 18px; margin-top: 22px }
.paso { display: grid; grid-template-columns: 44px 1fr; gap: 12px }
.paso .n { font-family: 'Caveat'; font-weight: 600; font-size: 34px; color: var(--lapiz); width: 40px; height: 40px; border: 2px solid var(--lapiz);
  border-radius: 50% 46% 52% 48%; display: flex; align-items: center; justify-content: center; line-height: 1 }
.paso p { color: var(--gris); font-size: 15.5px; margin-top: 3px }
/* bonos */
.bonos-g { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; margin-top: 26px }
.bono { padding: 7px; }
.bono:nth-child(odd) { transform: rotate(-1deg) } .bono:nth-child(even) { transform: rotate(1deg) }
.bono img { width: 100%; aspect-ratio: 210/297; object-fit: cover }
.bono h3 { font-size: 15px; margin-top: 10px; letter-spacing: 0 }
.bono p { font-size: 12.5px; color: var(--gris); margin-top: 3px }
/* presupuesto */
.presu { padding: 26px 20px 22px; margin-top: 24px; max-width: 560px }
.presu .cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--tinta); padding-bottom: 8px; margin-bottom: 6px }
.presu .cab b { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 20px } .presu .cab .mano { font-size: 20px }
.presu li { list-style: none; display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed #B9C5CE; font-size: 15px }
.presu li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums }
.presu .tot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; gap: 12px }
.presu .tot s { color: var(--gris); font-size: 16px } .presu .tot b { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 44px; letter-spacing: -.03em; line-height: 1 }
.presu .circulo { position: relative; display: inline-block }
.presu .circulo:after { content: ""; position: absolute; inset: -8px -12px; border: 2.5px solid var(--lapiz); border-radius: 50% 46% 52% 48%; transform: rotate(-3deg) }
.presu .firma { font-size: 22px; margin-top: 12px; text-align: right }
/* garantía y faq */
.garantia { background: var(--amarillo); padding: 22px 20px; box-shadow: 0 3px 10px rgba(31,42,56,.18); transform: rotate(-.8deg); max-width: 580px; margin: 0 auto }
.garantia h2 { font-size: 34px } .garantia p { color: var(--tinta); font-size: 15.5px }
.garantia .mano { font-size: 24px; display: block; margin-bottom: 4px }
details { background: var(--hoja); padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(31,42,56,.12) }
summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px }
summary::-webkit-details-marker { display: none } summary:after { content: "+"; font-family: 'Caveat'; font-size: 30px; line-height: .6; color: var(--lapiz) }
details[open] summary:after { content: "–" } details p { color: var(--gris); margin-top: 8px; font-size: 15px }
summary:focus-visible { outline: 2px solid var(--lapiz); outline-offset: 4px }
.cierre { text-align: center; padding-bottom: 120px }
.cierre h2 { max-width: 640px; margin: 0 auto 18px } .cierre .cta { max-width: 420px; margin: 0 auto }
footer { background: var(--tinta); color: #A9B4BF; font-size: 13px; padding: 26px 20px 100px; text-align: center }
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: rgba(251,252,252,.97); box-shadow: 0 -2px 10px rgba(31,42,56,.14);
  padding: 10px 16px 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center }
.barra .p s { font-size: 12px; color: var(--gris); display: block; line-height: 1 } .barra .p b { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 25px; letter-spacing: -.03em }
.barra .cta { padding: 13px 12px; font-size: 16.5px }
@media (min-width: 860px) {
  section { padding: 90px 0 }
  .hero .grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center }
  .hero .texto .cta { max-width: 420px } .hero .micro { text-align: left }
  .anotada { grid-template-columns: 1.1fr 1fr; gap: 48px }
  .dolores { grid-template-columns: 1fr 1fr; gap: 22px }
  .fotos { grid-template-columns: repeat(5, 1fr) }
  .pasos { grid-template-columns: repeat(3, 1fr) }
  .bonos-g { grid-template-columns: repeat(4, 1fr) }
  .oferta .envol { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
  .barra { display: none } footer { padding-bottom: 26px } .cierre { padding-bottom: 90px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* botón fijo: aparece después del inicio y se esconde cuando la oferta está a la vista */
.barra { transform: translateY(110%); transition: transform .25s ease } .barra.on { transform: none }
@media (prefers-reduced-motion: reduce) { .barra { transition: none } }