/* El mundo de la página de venta («La mesa de la tarde, con amigos») para el resto del embudo:
   papel cuadriculado, Fraunces + DM Sans, un color por tramo, ondas, amigos que se asoman.
   Donde se decide o se paga (pedido y ofertas) el mundo se calma: nada de decoración sobre el texto ni junto al botón de pago.
   Se carga después de estilo.css (pedido, listo, entrar) o sola (ofertas, legales, 404). Mi biblioteca no la usa. */
:root{
  --tinta:#173F3A;--tinta-2:#435853;--tinta2:#435853;--crema:#FFF6E3;--hoja:#FFFDF8;--marfim:#FFF6E3;--branco:#FFFDF8;--borda:#EADFCB;
  --accion:#15803D;--accion-borde:#0D5A2A;--accion-hover:#116B32;--sol:#FFC93C;--sol-claro:#FFF1C2;--hoja-verde:#16A34A;--verde-texto:#17794A;
  --acento:#15803D;--acento-texto:#1F6F57;--acento-fondo:#17794A;--coral-texto:#9A3B26;--coral-fondo:#A8432C;--ladrillo:#A8432C;
  --mal-fondo:#F3EAE2;--mal-texto:#5E5148;--bien-fondo:#E2F6E7;--foco:#2558B0;
  --sombra:0 14px 34px rgba(92,60,20,.13),0 3px 8px rgba(92,60,20,.07);
  --sombra-baja:0 6px 16px rgba(92,60,20,.09),0 1px 3px rgba(92,60,20,.06);
  --sombra-alta:0 22px 48px rgba(92,60,20,.17),0 6px 14px rgba(92,60,20,.09);
  --sai:cubic-bezier(.16,1,.3,1);--rebote:cubic-bezier(.34,1.56,.64,1);
  --onda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V27C130 6 250 2 380 15s250 31 380 27 240-29 370-31 220 13 310 21V48z'/%3E%3C/svg%3E");
  --cuadricula:linear-gradient(rgba(62,123,219,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(62,123,219,.07) 1px,transparent 1px) 0 0/26px 26px;
  --plumon-sol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23FFD24D' d='M3 6C40 3 90 2 140 3s50 1 56 2c2 3 2 7 0 10-40 3-100 3-150 2-15 0-30 1-42 0C2 13 1 9 3 6z'/%3E%3C/svg%3E");
  --e-sol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFC93C' d='M12 1c.9 5.6 4.4 9.1 11 11-6.6 1.9-10.1 5.4-11 11-.9-5.6-4.4-9.1-11-11 6.6-1.9 10.1-5.4 11-11z'/%3E%3C/svg%3E");
  --e-cielo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233E7BDB' d='M12 1c.9 5.6 4.4 9.1 11 11-6.6 1.9-10.1 5.4-11 11-.9-5.6-4.4-9.1-11-11 6.6-1.9 10.1-5.4 11-11z'/%3E%3C/svg%3E");
  --e-rosa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E9577A' d='M12 1c.9 5.6 4.4 9.1 11 11-6.6 1.9-10.1 5.4-11 11-.9-5.6-4.4-9.1-11-11 6.6-1.9 10.1-5.4 11-11z'/%3E%3C/svg%3E");
  --e-turquesa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2321B8A6' d='M12 1c.9 5.6 4.4 9.1 11 11-6.6 1.9-10.1 5.4-11 11-.9-5.6-4.4-9.1-11-11 6.6-1.9 10.1-5.4 11-11z'/%3E%3C/svg%3E");
  --m-sol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFD04A' d='M146 22c28 16 46 50 44 84s-24 70-58 84-78 8-104-18S-6 104 6 72 50 14 84 8s34-2 62 14z'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --equis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave:24px;
  scrollbar-color:#1F6F57 #FFF6E3;accent-color:#15803D;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--tinta);background:var(--cuadricula),var(--crema) url(/img/papel.png) 0 0/220px;
  font-size:17px;line-height:1.6;overflow-x:clip;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* la tira de colores de la cabecera de la página de venta, arriba de todo */
body::before{content:"";display:block;height:6px;background:repeating-linear-gradient(90deg,#21B8A6 0 56px,#FFC93C 56px 112px,#22B55E 112px 168px,#3E7BDB 168px 224px,#7B5BD6 224px 280px)}
::selection{background:#FFC93C;color:#173F3A}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:6px}
img,video{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
ul{list-style:none}
[hidden]{display:none!important}

h1,h2,h3,summary{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;color:var(--tinta)}
h1{font-size:clamp(32px,5vw,46px)}
h2{font-size:clamp(25px,3.6vw,36px)}
h3{font-size:22px;font-weight:700;line-height:1.2}
p{text-wrap:pretty}
.lead{font-size:19px;color:var(--tinta-2);max-width:62ch}

/* rótulo: la píldora con estrellita de la página de venta */
.rotulo{--ac:var(--acento-texto);display:block;width:fit-content;font-weight:700;font-size:14px;letter-spacing:.01em;text-transform:none;color:var(--ac);
  background:color-mix(in srgb,var(--ac) 11%,#fff);padding:4px 13px 4px 28px;border-radius:999px;transform:rotate(-1.4deg);position:relative;margin-bottom:12px}
.rotulo::before{content:"";position:absolute;left:9px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--e-sol) center/contain no-repeat}

/* cabecera */
.top,.cabecalho{padding:16px 0 4px;display:flex;justify-content:center}
.cabecalho{justify-content:flex-start}
.top img,.cabecalho img{height:36px;width:auto}

/* botón principal: verde, con el canto de abajo como la página de venta */
.boton,.btn{display:inline-block;background:var(--accion);color:#fff;text-decoration:none;text-align:center;font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100;
  font-weight:800;font-size:20px;line-height:1.25;padding:16px 30px;min-height:56px;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 5px 0 var(--accion-borde),0 14px 26px rgba(21,128,61,.26);
  transition:transform .22s var(--rebote),box-shadow .22s var(--sai),background-color .2s}
.btn{display:block;width:100%}
@media (hover:hover){
  .boton:hover,.btn:hover{transform:translateY(-2px);background-color:var(--accion-hover);box-shadow:0 7px 0 var(--accion-borde),0 18px 30px rgba(21,128,61,.3)}
}
.boton:active,.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accion-borde),0 8px 14px rgba(21,128,61,.22);transition-duration:.08s}
.btn:disabled{opacity:1;background:#4D7A5E;box-shadow:0 3px 0 #33563F;cursor:default;transform:none}
.btn.coral{background:var(--accion);color:#fff}

/* amigos que se asoman por el borde superior de una tarjeta (pseudo-elemento: el marcado no cambia) */
.dois > div,.opcion,.card.item,#form{position:relative}
.dois > div::before,.opcion::before,.card.item::before,#form::before{
  content:"";position:absolute;bottom:calc(100% - 1px);right:26px;width:var(--w,80px);height:calc(var(--w,80px) * .9);pointer-events:none;z-index:2;
  background:var(--amigo) 50% calc(var(--w,80px) * .12)/auto calc(var(--w,80px) * 1.2) no-repeat;
  animation:asoma .9s var(--rebote) var(--da,.45s) both}
@keyframes asoma{from{background-position-y:calc(var(--w,80px) * .95)}}
@keyframes sube{from{opacity:0;transform:translateY(18px)}}
@keyframes marca{from{background-size:0 .45em}}
@keyframes pop{from{transform:scale(.4) rotate(-20deg);opacity:0}}

/* ---------- ofertas de 1 clic ---------- */
.envolve{max-width:1080px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.aviso-compra{background:var(--bien-fondo);color:var(--tinta);text-align:center;font-weight:700;font-size:16px;line-height:1.45;padding:12px 20px;margin-top:10px}
.aviso-compra::before{content:"";display:inline-block;vertical-align:-6px;margin-right:9px;width:24px;height:24px;border-radius:50%;background:var(--hoja-verde) var(--check) center/15px no-repeat;box-shadow:0 3px 8px rgba(22,163,74,.3)}
.aviso-compra b{color:var(--verde-texto)}
body > section{--bg:transparent;--ac:var(--acento-texto);padding:64px 0 76px;position:relative;isolation:isolate;background:var(--bg)}
body > section + section::before,.rodape::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--wave));height:var(--wave);background:var(--bg);
  -webkit-mask:var(--onda) 0 0/100% 100% no-repeat;mask:var(--onda) 0 0/100% 100% no-repeat;pointer-events:none}
body > section:nth-of-type(even)::before{transform:scaleX(-1)}
body > section:nth-of-type(1){padding-top:40px}
body > section:nth-of-type(2){--bg:#E2EEFF;--ac:#2558B0}
body > section:nth-of-type(3){--bg:#DDF4E6;--ac:#17794A}
body > section h2{margin-bottom:16px;max-width:880px}
body > section h2 span{color:var(--ac)}
body > section .rotulo{--ac:inherit;color:var(--ac)}
body > section h1 span{background:var(--plumon-sol) no-repeat 0 92%/100% .45em;padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:marca .8s var(--sai) .35s both}
.ok{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--hoja-verde);box-shadow:0 3px 8px rgba(22,163,74,.3)}
.ok svg{width:16px;height:16px;stroke-width:3.2}
body > section li{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
body > section li .ok{margin-top:0}
body > section > .envolve > ul{display:grid;gap:12px;margin-top:20px;max-width:720px}
body > section > .envolve > ul li{font-size:18px}
body > section > .envolve > ul b{color:var(--verde-texto)}

.of-heroi{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.of-heroi h1{font-size:clamp(32px,3.8vw,46px)}
.of-heroi .lead{margin-top:18px;font-size:20px}
.of-heroi > div > p:last-child{max-width:62ch}
.capas-par{display:flex;gap:18px;justify-content:center;align-items:flex-end;position:relative;padding:20px 0 10px}
.capas-par::before{content:"";position:absolute;z-index:-1;left:4%;right:4%;top:0;bottom:0;background:var(--m-sol) center/100% 100% no-repeat;opacity:.85}
.capas-par img{width:44%;border-radius:6px;border:5px solid #fff;box-shadow:0 18px 36px rgba(92,60,20,.24),0 4px 10px rgba(92,60,20,.12);animation:sube .8s var(--sai) both}
.capas-par img:nth-child(1){transform:rotate(-3deg)}
.capas-par img:nth-child(2){transform:rotate(2.5deg) translateY(-12px);animation-delay:.12s}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:84px}
.dois > div{background:var(--hoja);border-radius:28px;padding:26px 26px 28px;box-shadow:var(--sombra)}
.dois > div:nth-child(1){--amigo:url(/img/amigo-coelho.webp)}
.dois > div:nth-child(2){--amigo:url(/img/amigo-elefante.webp);--w:88px;--da:.65s}
.dois > div:nth-child(2)::before{right:auto;left:26px}
.dois .rotulo{margin-bottom:8px}
.dois > div:nth-child(1) .rotulo{--ac:#2558B0;color:#2558B0}
.dois > div:nth-child(2) .rotulo{--ac:#17794A;color:#17794A}
.dois img{border-radius:6px;border:4px solid #fff;box-shadow:0 10px 24px rgba(92,60,20,.18);margin:16px auto 14px;max-width:72%;transform:rotate(-1.5deg)}
.dois > div:nth-child(2) img{transform:rotate(1.5deg)}
.dois ul{display:grid;gap:10px}
.dois li{font-size:17px}
.preco-of{text-align:center;margin:36px auto 0;max-width:560px;background:var(--hoja);border-radius:30px;padding:28px 24px 18px;box-shadow:var(--sombra-alta)}
.preco-of .valor{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100;font-weight:800;font-size:52px;line-height:1;color:var(--tinta);letter-spacing:-.03em}
.preco-of .valor small{display:block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;color:var(--tinta-2);margin-top:8px;letter-spacing:0;line-height:1.4}
.preco-of .boton{margin-top:20px}
.pago-linea{max-width:440px;margin:12px auto 0;font-size:14.5px;line-height:1.45;color:var(--tinta-2);text-align:center}
.recusa{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 16px;margin-top:8px;color:var(--tinta-2);font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.recusa:hover{color:var(--tinta)}
.curta{max-width:760px;margin:0 auto;text-align:center}
.curta .rotulo,.curta h1{margin-left:auto;margin-right:auto}
.curta .capas-par{margin:30px auto 0;max-width:500px}
.lista-of{max-width:560px;margin:26px auto 0;text-align:left;display:grid;gap:12px;background:var(--hoja);border-radius:24px;padding:20px 22px;box-shadow:var(--sombra-baja)}
.lista-of li{font-size:17px;line-height:1.45}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:96px auto 0;text-align:center}
.opcion{background:var(--hoja);border-radius:30px;padding:26px 22px 22px;display:flex;flex-direction:column;align-items:center;box-shadow:var(--sombra)}
.opcion:nth-child(1){--amigo:url(/img/amigo-coelho.webp)}
.opcion:nth-child(2){--amigo:url(/img/amigo-tartaruga.webp);--w:84px;--da:.65s}
.opcion:nth-child(2)::before{right:auto;left:26px}
.opcion img{width:52%;max-width:180px;border-radius:6px;border:4px solid #fff;box-shadow:0 14px 28px rgba(92,60,20,.22);transform:rotate(-2deg)}
.opcion:nth-child(2) img{transform:rotate(2deg)}
.opcion .rotulo{margin:20px auto 6px}
.opcion:nth-child(1) .rotulo{--ac:#2558B0;color:#2558B0}
.opcion:nth-child(2) .rotulo{--ac:#17794A;color:#17794A}
.opcion h3{margin-bottom:6px}
.opcion p{font-size:17px;line-height:1.45;color:var(--tinta-2)}
.opcion .txt{margin-bottom:20px}
.opcion .boton{align-self:stretch;margin-top:auto;padding-left:16px;padding-right:16px;font-size:19px}
.opciones + .preco-of{background:none;box-shadow:none;padding:0}
.rodape{--bg:var(--crema);padding:34px 0 30px;font-size:14px;color:var(--tinta-2);text-align:center;background:var(--crema);position:relative}
.rodape img{height:32px;margin:0 auto 10px}

/* aparecer al bajar, solo con CSS donde el navegador lo soporta; el estado normal ya es visible */
@supports (animation-timeline:view()){
  .dois > div,.preco-of,body > section > .envolve > ul,.lista-of{animation:sube linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}

@media (min-width:821px){:root{--wave:42px}}
@media (max-width:820px){
  body > section{padding:44px 0 60px}
  body > section:nth-of-type(1){padding-top:22px}
  .of-heroi,.dois,.opciones{grid-template-columns:minmax(0,1fr)}
  .of-heroi{gap:18px}
  .of-heroi .capas-par{order:-1}
  .dois{gap:84px;margin-top:80px}
  .opciones{gap:84px;margin-top:88px}
  .opcion img{width:44%;max-width:150px}
  .boton{display:block;width:100%;font-size:19px;padding:16px 18px}
  .preco-of .valor{font-size:46px}
  .aviso-compra{font-size:15px}
}
@media (max-width:480px){
  h1,.of-heroi h1{font-size:31px}
  .lead,.of-heroi .lead{font-size:18px}
  .dois > div{padding:22px 18px 24px}
  .preco-of{padding:24px 16px 14px;border-radius:26px}
}

/* ---------- páginas cortas (pedido, listo, entrar) sobre estilo.css ---------- */
.wrap{max-width:600px;margin:0 auto;padding:0 18px}
.muted{color:var(--tinta-2)}
.small{font-size:14px}
.card{background:var(--hoja);border:0;border-radius:22px;padding:18px;box-shadow:var(--sombra-baja)}
.pie{margin:40px 0 30px;text-align:center;font-size:14px;color:var(--tinta-2)}
.pie a{color:var(--tinta);font-weight:700;display:inline-block;padding:10px 4px;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* «aprox. $190 MXN» (js/moneda.js): una etiqueta de papel amarillo, discreta, que no compite con el precio en US$. */
.mxn{display:inline-block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:13.5px;line-height:1.2;letter-spacing:0;color:var(--tinta);background:var(--sol-claro);border:1px solid rgba(23,63,58,.10);border-radius:999px;padding:3px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mxn[hidden]{display:none!important}
.mxn-frase{margin:8px 2px 0;font-size:13.5px;line-height:1.45;color:var(--tinta-2);text-align:right}
.mxn-frase[hidden]{display:none}
.mxn-frase b{color:var(--tinta);font-weight:700}
.preco-of .mxn{margin-top:12px}
.preco-of .valor .mxn{display:table;margin:12px auto 0}
.opcion .mxn{margin:14px 0 12px}