/* Costito · página de venta. El recetario de la cocina: fichas de receta con su renglón rojo,
   tinta de birome azul, cinta de papel para pegar las capturas y la regla de la balanza.
   Letras (OFL, guardadas en probar\ y compartidas con la app): Young Serif para los títulos, como un recetario
   impreso; Figtree para leer y para la plata. Los precios van con doble subrayado, como en las cuentas a mano.
   Esquinas: 10 px en botones, fichas e imágenes; la casilla y la cinta, rectas. */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("probar/cos-young-serif-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("probar/cos-figtree-400-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --papel: #E8EBE7;
  --hoja: #FAFAF7;
  --tinta: #1B2233;
  --tinta2: #535C6D;
  --linea: #CFD4D1;
  --renglon: #D6DCEF;
  --azul: #2743C4;
  --azul-tinta: #FFFFFF;
  --azul-hondo: #1A2E8C;
  --azul-suave: #E3E8FB;
  --margen: #D8434F;
  --rojo: #B3303B;
  --verde: #0C7350;
  --cinta: rgba(236, 222, 160, .78);
  --sombra: 0 1px 2px rgba(27, 34, 51, .07), 0 6px 16px rgba(27, 34, 51, .05);
  --sombra-alta: 0 2px 4px rgba(27, 34, 51, .08), 0 18px 40px rgba(27, 34, 51, .12);
  --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --titulo: "Young Serif", Georgia, "Times New Roman", serif;
  --radio: 10px;
  --ancho: 1080px;
  --suave: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0F1219;
    --hoja: #191D28;
    --tinta: #EEF0F5;
    --tinta2: #A3ABBC;
    --linea: #2C3242;
    --renglon: #293152;
    --azul: #9DB0FF;
    --azul-tinta: #0B1130;
    --azul-hondo: #6F86E8;
    --azul-suave: #222B50;
    --margen: #E5727B;
    --rojo: #FF8C92;
    --verde: #5AD3A6;
    --cinta: rgba(214, 200, 140, .32);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.5 var(--fuente);
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ancho { max-width: var(--ancho); margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }

/* ---------- Arriba ---------- */
.tope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.marca { font: 400 30px/1.1 var(--titulo); color: var(--azul); text-decoration: none; border-bottom: 4px double var(--azul); padding-bottom: 2px; letter-spacing: -.01em; }
.marca sup, .tm { font: 700 .4em/1 var(--fuente); vertical-align: super; letter-spacing: 0; }
.tope nav { display: flex; gap: 2px; }
.tope nav a { font-weight: 700; font-size: 15px; padding: 12px 7px; min-height: 44px; white-space: nowrap; display: inline-flex; align-items: center; }
.tope nav .en-ancho { display: none; }
@media (min-width: 520px) { .tope nav a { padding: 12px 10px; } .tope nav .en-ancho { display: inline-flex; } }
/* la regla de la balanza: una rayita cada 8 px y una más larga cada 40 */
.regla {
  height: 10px;
  opacity: .55;
  background:
    repeating-linear-gradient(90deg, var(--tinta2) 0 1.5px, transparent 1.5px 40px) 0 0 / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta2) 0 1px, transparent 1px 8px) 0 0 / 100% 5px no-repeat;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 13px 22px;
  border-radius: var(--radio);
  border: 2px solid var(--tinta);
  background: var(--hoja);
  color: var(--tinta);
  font: 750 18px/1.2 var(--fuente);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s var(--suave), box-shadow .12s var(--suave), background-color .15s;
}
.btn:hover { background: var(--azul-suave); }
.btn:active { transform: translateY(2px); }
.btn.fuerte { background: var(--azul); color: var(--azul-tinta); border-color: var(--azul); box-shadow: 0 4px 0 var(--azul-hondo); }
.btn.fuerte:hover { background: var(--azul); filter: brightness(1.07); }
.btn.fuerte:active { box-shadow: 0 2px 0 var(--azul-hondo); }
.botones { display: grid; gap: 12px; }
@media (min-width: 520px) { .botones { grid-template-columns: 1fr 1fr; } }

/* ---------- La entrada ---------- */
.entrada { padding-top: 16px; padding-bottom: 44px; display: grid; gap: 18px; }
/* el «para quién», como la pestaña de una ficha de recetas */
.sello {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--tinta2);
  background: var(--hoja);
  border: 1.5px solid var(--linea);
  border-top: 3px solid var(--margen);
  border-radius: 0 0 6px 6px;
  padding: 3px 10px 4px;
}
.entrada h1 { font: 400 clamp(34px, 9.2vw, 60px)/1.04 var(--titulo); letter-spacing: -.02em; text-wrap: balance; margin-top: 12px; }
.entrada .bajada { font-size: 17.5px; line-height: 1.45; margin-top: 10px; max-width: 34em; }
.entrada .chica { color: var(--tinta2); font-size: 14.5px; margin-top: 12px; }
.momento { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.momento img { border-radius: var(--radio); box-shadow: var(--sombra-alta); width: 100%; }
/* la cinta de papel que lo tiene pegado */
.bloque figure::before, .compra::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 92px;
  height: 24px;
  background: var(--cinta);
  box-shadow: 0 1px 1px rgba(27, 34, 51, .08);
  pointer-events: none;
}

figcaption { color: var(--tinta2); font-size: 13.5px; line-height: 1.4; margin-top: 10px; text-align: center; }
@media (min-width: 900px) {
  .entrada { grid-template-columns: 1.15fr .85fr; grid-template-areas: "texto momento" "accion momento"; column-gap: 64px; row-gap: 30px; align-items: start; padding-top: 52px; padding-bottom: 80px; }
  .entrada .texto { grid-area: texto; align-self: end; }
  .entrada .accion { grid-area: accion; }
  .entrada .bajada { font-size: 20px; }
  .momento { grid-area: momento; align-self: center; transform: rotate(1.2deg); }
}

/* ---------- Secciones ---------- */
.seccion { padding-top: 52px; padding-bottom: 52px; }
.seccion.hoja { background: var(--hoja); border-top: 1.5px solid var(--linea); border-bottom: 1.5px solid var(--linea); }
.seccion > .ancho > h2, .titulo { font: 400 clamp(28px, 6.8vw, 42px)/1.12 var(--titulo); letter-spacing: -.015em; text-wrap: balance; max-width: 22em; }
.entradilla { margin-top: 14px; max-width: 40em; font-size: 17.5px; }
.entradilla + .entradilla { margin-top: 10px; }
.aclara { color: var(--tinta2); font-size: 14.5px; margin-top: 12px; max-width: 44em; }
@media (min-width: 900px) { .seccion { padding-top: 84px; padding-bottom: 84px; } }

/* ---------- Qué hace: cuatro pasos de la receta ---------- */
.bloques { list-style: none; padding: 0; margin-top: 36px; display: grid; gap: 52px; }
.bloque { display: grid; gap: 22px; }
.bloque .num {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--margen);
  border-radius: 50%;
  font: 400 24px/1 var(--titulo);
  color: var(--rojo);
}
.bloque h3 { font: 400 25px/1.16 var(--titulo); letter-spacing: -.01em; margin-top: 14px; text-wrap: balance; }
.bloque p { margin-top: 10px; max-width: 32em; }
.bloque .aclara { margin-top: 8px; }
.bloque figure { position: relative; justify-self: center; width: 100%; max-width: 380px; }
.bloque figure::before { top: -10px; left: 18px; transform: rotate(-6deg); width: 78px; }
.bloque:nth-child(even) figure::before { left: auto; right: 18px; transform: rotate(5deg); }
.bloque img { width: 100%; border-radius: var(--radio); border: 1.5px solid var(--linea); box-shadow: var(--sombra); }
@media (min-width: 800px) {
  .bloques { gap: 80px; margin-top: 56px; }
  .bloque { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .bloque:nth-child(even) .dice { order: 2; }
  .bloque h3 { font-size: 31px; }
  .bloque figure { transform: rotate(-.8deg); }
  .bloque:nth-child(even) figure { transform: rotate(.8deg); }
}

/* ---------- Para quién: dos fichas de receta ---------- */
.dos { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 800px) { .dos { grid-template-columns: 1fr 1fr; gap: 26px; } }
.tarjeta { background: var(--hoja); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 20px 22px; border-top: 4px solid var(--margen); }
.seccion.hoja .tarjeta { background: var(--papel); box-shadow: none; }
.tarjeta h3 { font: 400 22px/1.2 var(--titulo); padding-bottom: 10px; border-bottom: 1.5px solid var(--renglon); }
.puntos { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 12px; }
.puntos li { position: relative; padding-left: 32px; }
.puntos li::before { content: ""; position: absolute; }
/* el tilde y la cruz, hechos a mano con dos trazos */
.puntos.si li::before { left: 6px; top: 4px; width: 8px; height: 15px; border: solid var(--verde); border-width: 0 3px 3px 0; transform: rotate(40deg); border-radius: 1px; }
.puntos.no li::before {
  left: 2px; top: 6px; width: 15px; height: 15px;
  background:
    linear-gradient(45deg, transparent 43%, var(--rojo) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--rojo) 43% 57%, transparent 57%);
}

/* ---------- La compra: una hoja de libreta pegada con cinta ---------- */
.compra {
  position: relative;
  max-width: 620px;
  margin: 34px auto 0;
  background:
    linear-gradient(90deg, transparent 21px, var(--margen) 21px, var(--margen) 23px, transparent 23px),
    var(--hoja);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: 28px 20px 26px 42px;
}
.compra::before { top: -12px; right: 28px; transform: rotate(4deg); }
.compra h3 { font: 400 23px/1.2 var(--titulo); }
.precio-linea { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-bottom: 18px; border-bottom: 1.5px solid var(--renglon); }
.precio { font: 800 clamp(46px, 14vw, 62px)/1.05 var(--fuente); color: var(--azul); border-bottom: 6px double var(--azul); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.precio-linea span { font-weight: 700; color: var(--tinta2); padding-bottom: 8px; }
.incluye { list-style: none; padding: 0; margin: 4px 0 0; }
.incluye li { padding: 12px 0; border-bottom: 1.5px solid var(--renglon); }
.incluye b { display: block; font-weight: 750; }
.incluye span { color: var(--tinta2); font-size: 15px; }
.acepto { display: flex; gap: 14px; align-items: center; margin-top: 22px; font-weight: 650; cursor: pointer; min-height: 44px; }
.acepto input { width: 28px; height: 28px; flex: none; margin: 0; accent-color: var(--azul); }
.compra .pagar { width: 100%; margin-top: 16px; }
/* El botón de pago queda apagado hasta tildar la casilla (también sin JavaScript). */
.pagar[aria-disabled="true"] { opacity: .42; box-shadow: none; cursor: not-allowed; filter: none; transform: none; }
/* Con JavaScript, tocarlo apagado explica qué falta. Sin JavaScript, directamente no se puede tocar. */
html:not(.con-js) .acepto:has(input:not(:checked)) ~ .pagar { pointer-events: none; }
html:not(.con-js) .acepto:has(input:checked) ~ .pagar { opacity: 1; box-shadow: 0 4px 0 var(--azul-hondo); cursor: pointer; }
.falta { color: var(--rojo); font-weight: 700; font-size: 15px; margin-top: 10px; }
.compra .arre-compra { font-size: 15px; margin-top: 16px; padding: 12px 14px; border: 1.5px dashed var(--tinta2); border-radius: var(--radio); }
.compra .arre-compra a { font-weight: 700; }
.compra .como { color: var(--tinta2); font-size: 15px; margin-top: 16px; }
.compra .como + .como { margin-top: 8px; }
.o-proba { text-align: center; margin-top: 24px; }

/* ---------- Preguntas ---------- */
.preguntas { margin-top: 26px; max-width: 760px; background: var(--hoja); border-radius: var(--radio); box-shadow: var(--sombra); }
.seccion.hoja .preguntas { background: var(--papel); box-shadow: none; }
.preguntas details + details { border-top: 1.5px solid var(--renglon); }
.preguntas summary { cursor: pointer; padding: 18px 54px 18px 18px; font-weight: 700; font-size: 18px; list-style: none; position: relative; min-height: 60px; }
.preguntas summary::-webkit-details-marker { display: none; }
/* el más y el menos, dibujados: el palito vertical se va al abrir */
.preguntas summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background:
    linear-gradient(var(--azul), var(--azul)) center / 18px 2.5px no-repeat,
    linear-gradient(var(--azul), var(--azul)) center / 2.5px 18px no-repeat;
  transition: transform .2s var(--suave), background-size .2s var(--suave);
}
.preguntas details[open] summary::after {
  transform: rotate(180deg);
  background-size: 18px 2.5px, 2.5px 0;
}
.preguntas details > div { padding: 0 18px 20px; display: grid; gap: 10px; }

/* ---------- Pie ---------- */
.pie { padding-top: 40px; padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
.pie .columnas { display: grid; gap: 28px; }
@media (min-width: 800px) { .pie .columnas { grid-template-columns: 1.1fr 1fr 1.1fr; gap: 40px; } }
.pie h2 { font: 400 19px/1.2 var(--titulo); margin-bottom: 10px; }
.pie ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.pie ul a { display: inline-block; padding: 9px 0; }
.pie p + p { margin-top: 6px; }
.btn.arrepentimiento { border-color: var(--rojo); color: var(--rojo); width: 100%; max-width: 360px; min-height: 54px; font-size: 17px; }
.btn.arrepentimiento:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--rojo); }
.pie .arre p { color: var(--tinta2); margin-top: 10px; }
.avisos { margin-top: 30px; padding-top: 20px; border-top: 1.5px solid var(--linea); color: var(--tinta2); font-size: 13.5px; display: grid; gap: 8px; }

/* ---------- Páginas de texto: condiciones, privacidad, arrepentimiento, gracias ---------- */
.papel-texto { max-width: 760px; margin: 22px auto 0; background: linear-gradient(90deg, transparent 21px, var(--margen) 21px, var(--margen) 23px, transparent 23px), var(--hoja); border-radius: var(--radio); box-shadow: var(--sombra); padding: 30px 20px 34px 42px; }
@media (min-width: 700px) { .papel-texto { padding: 44px 44px 48px 64px; background: linear-gradient(90deg, transparent 35px, var(--margen) 35px, var(--margen) 37px, transparent 37px), var(--hoja); } }
.papel-texto h1 { font: 400 clamp(30px, 7.4vw, 42px)/1.1 var(--titulo); letter-spacing: -.015em; text-wrap: balance; }
.papel-texto .fecha { color: var(--tinta2); font-size: 14.5px; margin-top: 8px; }
.papel-texto h2 { font: 400 22px/1.2 var(--titulo); margin-top: 32px; }
.papel-texto p, .papel-texto ul, .papel-texto ol { margin-top: 10px; }
.papel-texto ul, .papel-texto ol { padding-left: 22px; }
.papel-texto li + li { margin-top: 6px; }
.papel-texto .destacado { background: var(--azul-suave); border: 2px solid var(--azul); border-radius: var(--radio); padding: 16px; margin-top: 18px; }
.papel-texto .destacado p:first-child { margin-top: 0; }
.papel-texto .btn { margin-top: 18px; width: 100%; }
.pasos { list-style: none; padding: 0 !important; counter-reset: paso; display: grid; gap: 16px; }
.pasos li { counter-increment: paso; position: relative; padding-left: 50px; margin: 0 !important; min-height: 36px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: -4px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--margen); color: var(--rojo); font: 400 19px/32px var(--titulo); text-align: center; }
.papel-texto .leyenda { font-size: 14.5px; color: var(--tinta2); border-left: 3px solid var(--linea); padding-left: 12px; }
.volver-inicio { display: inline-block; margin-top: 26px; font-weight: 700; padding: 10px 0; }
.pie-corto { max-width: 760px; margin: 0 auto; padding-top: 22px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--tinta2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-corto a { display: inline-block; padding: 10px 0; }

/* ---------- Movimiento: las capturas se asientan al llegar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .momento img { animation: asienta .6s var(--suave) both .1s; }
  @supports (animation-timeline: view()) {
    .bloque figure img { animation: asienta linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  @keyframes asienta { from { opacity: 0; transform: translateY(18px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }