/* Michi Cake · libreta del michi.
   Layout: hoja punteada; portada con titular a la izquierda y polaroid recostada a la derecha,
   la carta como tres polaroids palomeables, pasos a mano y un ticket de pedido fijo abajo. */
@font-face { font-family: "Fraunces"; font-weight: 800; font-display: swap; src: url(/fonts/fraunces-800.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url(/fonts/caveat-700.woff2) format("woff2"); }

:root {
  /* Paleta de marca (ficha MichiCake_Identidad_Marca). Una sola hoja de papel: sin modo oscuro a propósito. */
  --papel: #FBF1E7;
  --hoja: #FFFDF8;
  --tinta: #3B2418;
  --cafe: #5A3A2E;
  --terra: #D97B5E;
  --terra-texto: #A8553B;
  --rosa: #F2C9C2;
  --dorado: #E8A23D;
  --menta: #BFD8B8;
  --ciruela: #8C5B6E;
  --wa: #1E7D48;
  --wa-hover: #17673A;
  --punto: rgba(90, 58, 46, 0.13);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Poppins", "Segoe UI", system-ui, sans-serif;
  --mano: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --ancho: 1120px;
  --radio: 6px;
  --sombra: 0 18px 40px rgba(59, 36, 24, 0.22);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background-color: var(--papel);
  background-image: radial-gradient(var(--punto) 1.8px, transparent 2.3px);
  background-size: 30px 30px;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  padding-bottom: 120px; /* espacio para el ticket fijo */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.015em; line-height: 1.04; margin: 0; text-wrap: balance; }
p { margin: 0; }
.nota-mano { font-family: var(--mano); font-weight: 700; color: var(--terra-texto); font-size: 1.6rem; line-height: 1.1; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--papel); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: max(18px, env(safe-area-inset-left, 0px)); }
:focus-visible { outline: 3px solid var(--terra-texto); outline-offset: 3px; border-radius: 4px; }

/* ---------- Barra ---------- */
.barra { max-width: var(--ancho); margin: 0 auto; padding-block: 18px 6px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca img { height: 62px; width: auto; }
.barra nav { display: flex; gap: 22px; font-size: 0.95rem; font-weight: 600; }
.barra nav a { text-decoration: none; padding-block: 6px; background: linear-gradient(var(--terra), var(--terra)) no-repeat left 92% / 0 3px; transition: background-size .25s ease; }
.barra nav a:hover { background-size: 100% 3px; }
@media (max-width: 640px) { .barra nav a:not(:last-child) { display: none; } .marca img { height: 50px; } }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.boton:active { transform: translateY(1px) scale(.99); }
.boton-wa { background: var(--wa); color: #fff; box-shadow: 0 6px 0 #145C34; }
.boton-wa:hover { background: var(--wa-hover); }
.ico-wa { width: 22px; height: 22px; fill: currentColor; flex: none; }
.boton-papel { background: var(--hoja); color: var(--tinta); border: 2px dashed var(--cafe); }
.boton-papel:hover { background: #fff; }

/* ---------- Polaroid común ---------- */
.polaroid { position: relative; display: block; background: #fff; padding: 14px 14px 0; border-radius: var(--radio); box-shadow: var(--sombra); }
.polaroid .foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--rosa); }
.polaroid .foto img, .polaroid .foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .pie, .polaroid figcaption { display: block; text-align: center; padding: 10px 6px 14px; font-size: 1.55rem; }
.cinta { position: absolute; width: 128px; height: 34px; top: -14px; right: -26px; transform: rotate(32deg);
  background: repeating-linear-gradient(45deg, rgba(242, 201, 194, .95) 0 10px, rgba(255, 255, 255, .6) 10px 20px); opacity: .95; }
.cinta-menta { left: -26px; right: auto; transform: rotate(-30deg); background: repeating-linear-gradient(45deg, rgba(191, 216, 184, .95) 0 10px, rgba(255, 255, 255, .6) 10px 20px); }

/* ---------- Portada ---------- */
main { max-width: var(--ancho); margin: 0 auto; display: grid; gap: clamp(72px, 10vw, 120px); }
.portada { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: clamp(32px, 6vw, 80px); padding-top: clamp(24px, 6vw, 64px); }
.portada-texto { display: grid; gap: 22px; }
.portada .nota-mano { transform: rotate(-2deg); transform-origin: left; font-size: 1.8rem; }
h1 { font-size: clamp(2.9rem, 7.4vw, 5.6rem); }
.entrada { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--cafe); max-width: 34ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* El gatito va detrás de la polaroid (hermanos dentro de .portada-foto) para que se asome por arriba. */
.portada-foto { position: relative; width: min(100%, 440px); justify-self: center; margin-top: 110px; transform: rotate(3deg); }
.portada-foto .gatito { position: absolute; z-index: 0; width: 46%; top: -98px; left: 24%; }
.portada-foto .gatito img { width: 100%; }
.polaroid-portada { position: relative; z-index: 1; margin: 0; }
.polaroid-portada .sello { position: absolute; width: 32%; bottom: 13%; left: -16%; filter: drop-shadow(0 8px 14px rgba(59, 36, 24, .3)); }
.sello-texto { transform-origin: 100px 100px; animation: girar 22s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; }
  .portada-foto { width: min(82%, 380px); margin-top: 96px; }
  .portada-foto .gatito { top: -84px; }
  .polaroid-portada .sello { left: -7%; width: 30%; bottom: 16%; }
}

/* Entrada de la portada */
@media (prefers-reduced-motion: no-preference) {
  .portada-texto > * { animation: subir .7s cubic-bezier(.2, .8, .2, 1) both; }
  .portada-texto > *:nth-child(2) { animation-delay: .08s; }
  .portada-texto > *:nth-child(3) { animation-delay: .16s; }
  .portada-texto > *:nth-child(4) { animation-delay: .24s; }
  .polaroid-portada { animation: caer .9s cubic-bezier(.2, .9, .25, 1.15) .15s both; }
  .portada-foto .gatito { animation: asomar .7s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
  .polaroid-portada .cinta { animation: pegar .45s ease-out .95s both; }
}
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes caer { from { opacity: 0; transform: translateY(-60px) rotate(-6deg); } }
@keyframes asomar { from { transform: translateY(70%); } }
@keyframes pegar { from { opacity: 0; transform: translateY(-20px) rotate(50deg); } }

/* ---------- Encabezados de sección ---------- */
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: clamp(28px, 4vw, 44px); }
.seccion-cabeza h2 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.seccion-cabeza .nota-mano { transform: rotate(-1.5deg); }

/* ---------- La carta ---------- */
.productos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .productos { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.producto { position: relative; }
.producto:nth-child(1) .polaroid { transform: rotate(-2deg); }
.producto:nth-child(2) .polaroid { transform: rotate(1.6deg); margin-top: 28px; }
.producto:nth-child(3) .polaroid { transform: rotate(-1deg); }
@media (max-width: 600px) { .producto:nth-child(2) .polaroid { margin-top: 0; } }

.elegir { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tarjeta { display: grid; gap: 16px; cursor: pointer; }
.tarjeta .polaroid { transition: transform .25s ease, box-shadow .25s ease; }
.tarjeta:hover .polaroid { box-shadow: 0 24px 46px rgba(59, 36, 24, .28); }
.texto { display: grid; gap: 4px; padding-inline: 4px; }
.nombre { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; }
.desc { color: var(--cafe); font-size: 1rem; max-width: 36ch; }


.palomita { display: inline-flex; align-items: center; gap: 10px; padding-inline: 4px; font-weight: 600; color: var(--cafe); }
.palomita svg { width: 40px; height: 40px; }
.palomita .aro { fill: var(--hoja); stroke: var(--cafe); stroke-width: 2.5; stroke-dasharray: 4 5; transition: fill .2s ease, stroke .2s ease; }
.palomita .trazo { fill: none; stroke: var(--hoja); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .35s ease .05s; }
.elegir:checked + .tarjeta .aro { fill: var(--terra-texto); stroke: var(--terra-texto); stroke-dasharray: none; }
.elegir:checked + .tarjeta .trazo { stroke-dashoffset: 0; }
.elegir:checked + .tarjeta .leyenda { color: var(--terra-texto); }
.elegir:checked + .tarjeta .polaroid { box-shadow: 0 0 0 4px var(--terra), var(--sombra); }
.elegir:focus-visible + .tarjeta .palomita svg { outline: 3px solid var(--terra-texto); outline-offset: 3px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .elegir:checked + .tarjeta .polaroid { animation: brinco .35s ease; }
}
@keyframes brinco { 50% { transform: translateY(-8px) rotate(0deg); } }

/* ---------- Cómo pedir ---------- */
.pedir { background: var(--hoja); border-radius: 18px; padding: clamp(28px, 5vw, 56px); box-shadow: 0 2px 0 var(--punto);
  background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(90, 58, 46, .10) 39px 41px); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 4vw, 44px); }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } }
.pasos li { display: grid; gap: 8px; align-content: start; }
.pasos .num { font-family: var(--mano); font-weight: 700; font-size: 3.4rem; line-height: .8; color: var(--terra-texto); }
.pasos h3 { font-size: 1.45rem; }
.pasos p { color: var(--cafe); max-width: 34ch; }

/* ---------- Hecho en casa ---------- */
.casa { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.polaroid-casa { margin: 0; transform: rotate(-2.5deg); width: min(100%, 380px); justify-self: center; }
.casa-texto { display: grid; gap: 16px; }
.casa-texto h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.casa-texto p { color: var(--cafe); max-width: 46ch; font-size: 1.08rem; }
.casa-texto .ig a { color: var(--terra-texto); font-weight: 600; }
@media (max-width: 760px) { .casa { grid-template-columns: 1fr; } .polaroid-casa { width: min(80%, 340px); } }

/* ---------- Pie ---------- */
.pie-pagina { max-width: var(--ancho); margin: clamp(72px, 10vw, 120px) auto 0; padding-block: 28px 20px; border-top: 2px dashed rgba(90, 58, 46, .3);
  display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--cafe); }
.pie-pagina img { height: 64px; width: auto; }
.pie-pagina a { color: var(--tinta); font-weight: 600; }
.chico { font-size: .85rem; }

/* ---------- Ticket fijo ---------- */
.ticket {
  position: fixed; z-index: 20; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(calc(100% - 2 * max(18px, env(safe-area-inset-left, 0px))), 640px);
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px;
  background: var(--hoja); border-radius: 999px; box-shadow: 0 14px 34px rgba(59, 36, 24, .25), 0 0 0 2px rgba(90, 58, 46, .12);
}
.ticket-lista { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; font-size: .92rem; color: var(--cafe); }
.ticket-lista::-webkit-scrollbar { display: none; }
.ticket-vacio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { flex: none; background: var(--rosa); color: var(--tinta); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: .86rem; }
.ticket .boton { min-height: 48px; padding: 0 20px; box-shadow: none; flex: none; }
@media (max-width: 420px) { .ticket { padding-left: 16px; gap: 10px; } .ticket-lista { font-size: .84rem; } .ticket .boton { padding: 0 16px; } }
@media (prefers-reduced-motion: no-preference) { .con-pedido .ticket .boton { animation: latido .5s ease; } }
@keyframes latido { 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sello-texto { animation: none; }
}

/* ---------- 404 ---------- */
.perdido { padding-bottom: 0; }
.perdido-caja { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding-block: 40px; }
.perdido-caja h1 { font-size: clamp(2.4rem, 8vw, 4rem); }
.gatito-404 img { width: 180px; }