/* ============================================================
   Can in One: la receta de papel del juego, en CSS.
   Valores: game/lib/src/core/theme/ (colores, radios, duraciones) y
   game/lib/src/shared/widgets/can_hojas.dart (dos hojas de papel, sin contorno).
   ============================================================ */

@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../assets/fonts/Fredoka-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("../assets/fonts/Fredoka-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("../assets/fonts/Nunito-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../assets/fonts/Nunito-Bold.woff2") format("woff2"); }

:root {
  --fondo: #f3ece0;
  --superficie: #fbf7f0;
  --carton: #e4d2b4;
  --tinta: #3a2e28;
  --tinta-suave: #62524a;
  --terracota: #bc4a34;
  --terracota-texto: #a33d29;
  --cielo-arriba: #b4dcdc;
  --cielo-abajo: #e6f2ea;
  --cesped: #7e9f68;
  --sombra: rgba(58, 46, 40, 0.15);
  --grano: url("../assets/img/papel_grano.webp");
  --kraft: url("../assets/img/textura_kraft.webp");
  --rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --titulos: "Fredoka", "Trebuchet MS", sans-serif;
  --cuerpo: "Nunito", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo) var(--grano);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--cuerpo);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-family: var(--titulos); font-weight: 700; line-height: 1.15; text-wrap: balance; }

a { color: var(--terracota-texto); font-weight: 700; text-underline-offset: 0.15em; }
a:hover { color: var(--tinta); }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }

.filtros { position: absolute; width: 0; height: 0; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: 0.5rem 1rem; border-radius: 8px;
  background: var(--superficie); color: var(--tinta);
}
.saltar:focus { top: 1rem; }

.contenedor { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }

/* --- Botón: dos hojas de papel --------------------------------- */

.boton {
  --cara: var(--carton);
  --clara: #e8d9bf;
  --canto: #b1a08d;
  --texto: var(--tinta);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-bottom: 4px;
  padding: 0.65rem 1.6rem;
  color: var(--texto);
  font: 600 1.0625rem/1.2 var(--titulos);
  text-align: center;
  text-decoration: none;
  transition: transform 150ms var(--rebote);
}
.boton::before,
.boton::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 999px;
  filter: url(#recorte);
}
.boton::before { top: 4px; bottom: -4px; background: var(--canto); box-shadow: 0 2px 4px var(--sombra); }
.boton::after {
  background: var(--grano), linear-gradient(162deg, var(--clara) 46%, var(--cara) 46%);
  transition: transform 150ms var(--rebote);
}
.boton:not([aria-disabled="true"]):hover { color: var(--texto); transform: translateY(-1px); }
.boton:not([aria-disabled="true"]):active::after { transform: translateY(3px); transition-duration: 80ms; }

.boton--terracota { --cara: #b24530; --clara: #b85340; --canto: #7f3b2d; --texto: #fff; }

.boton small { font: 700 0.8125rem/1.2 var(--cuerpo); }

/* «Próximamente»: aún no lleva a ninguna tienda, así que no se hunde al pulsar. */
.boton[aria-disabled="true"] { min-width: 11.5rem; padding-block: 0.6rem 0.7rem; cursor: default; }
.boton[aria-disabled="true"]:hover { color: var(--texto); }

.botones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* --- Hoja de papel para paneles -------------------------------- */

.hoja {
  position: relative;
  isolation: isolate;
  margin-bottom: 5px;
}
.hoja::before,
.hoja::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 24px;
  filter: url(#recorte);
}
.hoja::before { top: 5px; bottom: -5px; background: #c4bbb1; box-shadow: 0 3px 12px var(--sombra); }
.hoja::after { background: var(--grano), linear-gradient(162deg, #fdfaf5 46%, var(--superficie) 46%); }

.hoja--carton::before { background: #b1a08d; }
.hoja--carton::after { background: var(--grano), linear-gradient(162deg, #e8d9bf 46%, var(--carton) 46%); }

/* --- Cabecera --------------------------------------------------- */

.cabecera { position: absolute; inset: 0 0 auto; z-index: 5; padding-block: 1rem; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--tinta); font: 700 1.25rem/1 var(--titulos); text-decoration: none;
}
.marca img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 2px 6px var(--sombra); }
.navegacion { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.1rem; }
.navegacion a { padding: 0.5rem 0.1rem; color: var(--tinta); font: 600 1.0625rem/1.2 var(--titulos); text-decoration: none; }
.navegacion a:hover { text-decoration: underline; }

/* --- Diorama: capas de papel, las mismas piezas que el juego ----- */

.diorama {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--cielo-arriba), var(--cielo-abajo));
}
.diorama__capas { position: absolute; inset: 0; pointer-events: none; }
.diorama__capas img { position: absolute; filter: drop-shadow(0 3px 4px rgba(58, 46, 40, 0.18)); }
.diorama__suelo {
  position: absolute; inset: auto -10px 0; height: var(--alto-suelo);
  background: url("../assets/img/tierra.webp") 0 0 / 320px;
}
.diorama__suelo::before {
  content: "";
  position: absolute; inset: -16px 0 auto; height: 34px;
  background: var(--grano), var(--cesped);
  filter: url(#recorte-ancho);
}

.portada {
  --alto-suelo: clamp(60px, 11vh, 110px);
  display: flex;
  align-items: center;
  min-height: min(100svh, 860px);
  padding: 6rem 0 calc(var(--alto-suelo) + 3rem);
}
.portada__texto { position: relative; z-index: 3; }
.portada__panel { width: min(100%, 31rem); padding: clamp(1.4rem, 3vw, 2.2rem); }
.portada h1 { font-size: clamp(2.9rem, 7vw, 4.6rem); }
.portada__lema { margin: 0.6rem 0 1.4rem; font-size: 1.1875rem; line-height: 1.5; }

/* Colocación de las piezas, de atrás adelante. */
.c-nube1 { width: clamp(90px, 13vw, 190px); left: 50%; top: 12%; animation: deriva 26s ease-in-out infinite alternate; }
.c-nube2 { width: clamp(70px, 9vw, 130px); left: 82%; top: 20%; animation: deriva 34s ease-in-out infinite alternate-reverse; }
.c-nube3 { width: clamp(70px, 9vw, 140px); left: 3%; top: 8%; animation: deriva 30s ease-in-out infinite alternate; }
.c-colina { width: 100%; min-width: 900px; left: 0; bottom: calc(var(--alto-suelo) - 8px); filter: none !important; }
.c-copas { width: clamp(120px, 17vw, 260px); left: -2%; bottom: calc(var(--alto-suelo) - 4px); }
.c-pino1 { height: clamp(120px, 28vh, 250px); left: 47%; bottom: calc(var(--alto-suelo) + 2px); }
.c-pino2 { height: clamp(90px, 19vh, 170px); left: 57%; bottom: calc(var(--alto-suelo) + 2px); }
.c-arbol { height: clamp(140px, 32vh, 290px); right: -2%; bottom: calc(var(--alto-suelo) + 2px); }
.c-papelera { height: clamp(110px, 25vh, 230px); right: 11%; bottom: calc(var(--alto-suelo) - 2px); z-index: 2; }
.c-hierba1 { height: clamp(40px, 7vh, 70px); left: 43%; bottom: calc(var(--alto-suelo) - 2px); z-index: 2; }
.c-hierba2 { height: clamp(40px, 7vh, 70px); right: 5%; bottom: calc(var(--alto-suelo) - 6px); z-index: 2; }

/* La lata del logo: en pleno vuelo hacia la papelera. */
.c-estela { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.c-estela path { fill: none; stroke: var(--superficie); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 16; vector-effect: non-scaling-stroke; }
.c-lata {
  height: clamp(110px, 25vh, 220px);
  right: 22%;
  top: 25%;
  z-index: 2;
  rotate: 52deg;
  animation: vuelo 1100ms cubic-bezier(0.22, 0.8, 0.3, 1) 300ms backwards;
}

@keyframes vuelo {
  from { translate: -34vw 44vh; rotate: -160deg; }
  to { translate: 0 0; rotate: 52deg; }
}
@keyframes deriva {
  from { translate: -14px 0; }
  to { translate: 14px 0; }
}

/* Cabecera de las páginas interiores: una tira del mismo diorama. */
.tira { --alto-suelo: 30px; height: 190px; }
.tira .c-nube1 { left: 62%; top: 22%; width: 120px; }
.tira .c-nube3 { left: 12%; top: 46%; width: 90px; }
.tira .c-pino1 { height: 104px; left: 82%; }
.tira .c-copas { width: 130px; left: -1%; }

/* --- Secciones --------------------------------------------------- */

.seccion { padding-block: clamp(3rem, 7vw, 5rem); }
.seccion--pegada { padding-top: 0; }
.seccion__titulo { margin-bottom: 0.5rem; font-size: clamp(1.9rem, 4vw, 2.6rem); text-align: center; }
.seccion__entrada { max-width: 38rem; margin: 0 auto 2.5rem; color: var(--tinta-suave); text-align: center; }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.paso { display: flex; flex-direction: column; padding: 0.8rem 0.8rem 1.3rem; }
.paso img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.paso h3 { margin: 1rem 0.5rem 0.3rem; font-size: 1.5rem; }
.paso h3 span { color: var(--terracota-texto); }
.paso p { margin: 0 0.5rem; color: var(--tinta-suave); }

.promesas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem; }
.promesa { padding: 1.4rem 1.5rem 1.5rem; }
.promesa h3 { margin-bottom: 0.4rem; font-size: 1.25rem; }
.promesa p { margin: 0; }

.seccion--carton { background: var(--carton) var(--kraft); }

.llega { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 3.5rem); }
.llega__imagen { padding: 0.7rem; rotate: -2.5deg; }
.llega__imagen img { width: 100%; border-radius: 16px; }
.llega h2 { margin-bottom: 0.6rem; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.llega p { margin: 0 0 1.3rem; }

/* --- Páginas interiores: texto largo sobre una hoja ------------- */

.pagina { padding-block: 0 clamp(3rem, 7vw, 5rem); }
.papel {
  position: relative;
  width: min(100% - 2rem, 46rem);
  margin: -2.5rem auto 0;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--superficie) var(--grano);
  border-radius: 24px;
  box-shadow: 0 5px 0 #c4bbb1, 0 8px 16px var(--sombra);
}
.papel h1 { font-size: clamp(2.1rem, 5vw, 2.9rem); }
.papel h2 { margin: 2.2rem 0 0.5rem; font-size: 1.375rem; scroll-margin-top: 1rem; }
.papel h3 { margin: 1.3rem 0 0.25rem; font-size: 1.125rem; font-weight: 600; }
.papel p { margin: 0 0 0.8rem; }
.papel ul, .papel ol { margin: 0 0 0.8rem; padding-left: 1.3rem; }
.papel li { margin-bottom: 0.35rem; }
.papel__fecha { margin: 0.4rem 0 1.5rem !important; color: var(--tinta-suave); font-size: 0.9375rem; }

.resumen { margin: 1.4rem 0; padding: 1.1rem 1.3rem; border-radius: 14px; background: var(--carton) var(--kraft); }
.resumen h2 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.resumen ul { margin-bottom: 0; }
.resumen a { color: var(--tinta); }

.nota { padding: 0.8rem 1.1rem; border-radius: 14px; background: var(--carton) var(--kraft); font-size: 0.9375rem; line-height: 1.5; }
.nota a { color: var(--tinta); }

.tabla { overflow-x: auto; margin: 0 0 1rem; }
.tabla table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.96875rem; line-height: 1.45; }
.tabla th, .tabla td { padding: 0.55rem 0.7rem 0.55rem 0; border-bottom: 1.5px solid var(--carton); text-align: left; vertical-align: top; }
.tabla th { font-family: var(--titulos); font-weight: 600; }

.correo { display: inline-block; margin: 0.3rem 0 0.2rem; font-size: clamp(1rem, 3.6vw, 1.3125rem); overflow-wrap: anywhere; }

.papel .motivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.motivos li { margin: 0; }
.motivo { display: block; height: 100%; padding: 1.05rem 1.2rem 1.15rem; color: var(--tinta); font-weight: 400; text-decoration: none; transition: transform 150ms var(--rebote); }
.motivo:hover { color: var(--tinta); transform: translateY(-2px); }
.motivo strong { display: block; margin-bottom: 0.15rem; font: 600 1.125rem/1.25 var(--titulos); }
.motivo span { display: block; color: var(--tinta-suave); font-size: 0.9375rem; line-height: 1.45; }

/* --- Pie: el suelo del diorama --------------------------------- */

.pie { position: relative; padding-block: 2.4rem 1.6rem; background: var(--carton) var(--kraft); font-size: 0.96875rem; }
.pie::before {
  content: "";
  position: absolute; inset: -16px 0 auto; height: 32px;
  background: var(--grano), var(--cesped);
  filter: url(#recorte-ancho);
}
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem 2.5rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.pie__enlaces a { display: inline-block; padding: 0.3rem 0; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; }
.pie__enlaces a:hover { text-decoration-thickness: 2px; }
.pie p { margin: 0; }
.pie a[href^="mailto"] { color: var(--tinta); overflow-wrap: anywhere; }

.error404 { --alto-suelo: 80px; display: flex; align-items: center; min-height: 100svh; padding: 5rem 0 calc(var(--alto-suelo) + 3rem); }

/* --- Móvil ------------------------------------------------------- */

@media (max-width: 760px) {
  .marca { font-size: 1.125rem; white-space: nowrap; }
  .marca img { width: 38px; height: 38px; }
  .navegacion { flex-wrap: nowrap; gap: 0.8rem; }
  .navegacion a { font-size: 0.9375rem; white-space: nowrap; }
  .portada { --alto-suelo: 56px; display: block; min-height: 0; padding: 5.2rem 0 calc(var(--alto-suelo) + 66vw); }
  .c-estela { display: none; }
  .portada__panel { margin-inline: auto; }
  .c-nube1, .c-nube3, .c-nube2 { top: auto; }
  .c-nube1 { left: 56%; bottom: 66vw; width: 22vw; }
  .c-nube2 { display: none; }
  .c-nube3 { left: 4%; bottom: 52vw; width: 22vw; }
  .c-pino1 { height: 36vw; left: 22%; }
  .c-pino2 { display: none; }
  .c-arbol { height: 40vw; right: -8%; }
  .c-copas { width: 30vw; }
  .c-papelera { height: 28vw; right: 10%; }
  .c-hierba1 { height: 11vw; left: 8%; }
  .c-hierba2 { height: 11vw; }
  .c-lata { top: auto; height: 28vw; right: 28%; bottom: calc(var(--alto-suelo) + 26vw); }
  .llega { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .llega__imagen { width: min(100%, 15rem); }
  .llega .botones { justify-content: center; }
  .boton[aria-disabled="true"] { flex: 1 1 9rem; min-width: 0; padding-inline: 1rem; }
  @keyframes vuelo {
    from { translate: -60vw 30vw; rotate: -160deg; }
    to { translate: 0 0; rotate: 52deg; }
  }
}

/* En móvil no cabe el nombre junto al menú: queda el logo, y el lector de pantalla lo sigue leyendo. */
@media (max-width: 430px) {
  .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

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

@media print {
  .cabecera, .diorama, .pie::before, .filtros { display: none; }
  body, .papel { background: #fff; box-shadow: none; }
  .papel { margin-top: 0; }
}