/* Página de Hacer Cerveza Casera: estilo C «Del pajizo al negro» de la propia web
   (stout #1B130D, espuma #F3ECDF, ámbar #F39C00, cobre #BB5100, porter #2A1E15;
   Big Shoulders Display + Public Sans). Colores en temas.css (--t-*). */

.tema-hacer-cerveza-casera { background: radial-gradient(1200px 700px at 85% -10%, #4A1A12 0%, transparent 60%), var(--t-fondo); }
.cz-ante { font: 700 .82rem/1.3 var(--t-fuente); letter-spacing: .14em; text-transform: uppercase; color: var(--t-acento); margin-bottom: 14px; }
.cz-h1, .cz-h2, .cz-h3 { font-family: var(--t-titulos); text-transform: uppercase; letter-spacing: .01em; line-height: .92; font-weight: 800; }
.cz-h1 { font-size: clamp(3.2rem, 12vw, 7rem); }
.cz-h1 span, .cz-juego-titulo span {
  background: linear-gradient(90deg, #F8C25A, #F39C00 35%, #E36A1F 70%, #D9472B);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cz-h2 { font-size: clamp(2.4rem, 7vw, 4rem); margin-bottom: 18px; }
.cz-h3 { font-size: 1.8rem; margin: 40px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.cz-h3 small { font: 500 .85rem var(--t-fuente); text-transform: none; color: var(--t-texto-2); letter-spacing: 0; }
.cz-lead { font-size: 1.15rem; color: var(--t-texto-2); max-width: 34em; margin: 22px 0 30px; line-height: 1.6; }

.cz-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px;
  background: var(--t-acento); color: var(--t-acento-texto); border: 2px solid var(--t-acento); border-radius: 4px;
  font: 800 .95rem/1 var(--t-fuente); text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  box-shadow: 0 4px 0 #8A4A00; transition: transform .12s, box-shadow .12s, background .15s;
}
.cz-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #8A4A00; }
.cz-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8A4A00; }
.cz-btn-sec { background: transparent; color: var(--t-texto); border-color: #5A4433; box-shadow: none; }
.cz-btn-sec:hover { border-color: var(--t-acento); color: var(--t-acento); box-shadow: none; }
.cz-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----- Hero con Levi ----- */
.cz-hero { position: relative; display: grid; gap: 28px; padding-top: 24px; padding-bottom: 64px; align-items: center; }
@media (min-width: 900px) { .cz-hero { grid-template-columns: 1.4fr 1fr; padding-top: 48px; padding-bottom: 96px; } }
.cz-hero-texto { position: relative; z-index: 2; }
.cz-levi { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cz-bocadillo {
  position: relative; background: #FFF6E6; color: #1B130D; font: 600 1rem/1.4 var(--t-fuente);
  padding: 14px 18px; border-radius: 14px; max-width: 300px; min-height: 3.6em; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 60%);
}
.cz-bocadillo::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 20px; height: 20px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.cz-levi-boton { background: none; border: 0; padding: 6px; cursor: pointer; border-radius: 50%; }
.cz-levi-boton img { width: 150px; height: 150px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 50%)); animation: cz-flotar 3.4s ease-in-out infinite; }
.cz-levi-boton.salta img { animation: cz-salto .5s ease, cz-flotar 3.4s ease-in-out .5s infinite; }
@keyframes cz-flotar { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes cz-salto { 30% { transform: translateY(-26px) scale(1.06, .94); } 60% { transform: translateY(0) scale(.94, 1.06); } }
.cz-contador { font: 700 .8rem var(--t-fuente); letter-spacing: .1em; text-transform: uppercase; color: var(--t-acento); min-height: 1.2em; }

.cz-burbujas-campo { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.cz-burbuja-viva {
  position: absolute; bottom: -40px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / 55%), rgb(243 156 0 / 18%) 45%, rgb(243 156 0 / 6%));
  border: 1px solid rgb(255 220 160 / 35%); pointer-events: auto; cursor: pointer;
  animation: cz-subir var(--d) linear forwards;
}
.cz-burbuja-viva.pop { animation: cz-pop .3s ease-out forwards; }
@keyframes cz-subir { to { transform: translate(14px, calc(-1 * (100% + 900px))); opacity: .2; } }
@keyframes cz-pop { to { transform: scale(1.8); opacity: 0; } }

/* ----- EBC ----- */
.cz-ebc { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 48px; border-top: 1px solid var(--t-borde); }
@media (min-width: 900px) { .cz-ebc { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.cz-ebc-texto p:last-child { color: var(--t-texto-2); font-size: 1.05rem; }
.cz-ebc-caja { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: center; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 12px; padding: 24px; }
@media (min-width: 560px) { .cz-ebc-caja { grid-template-columns: 150px 1fr; } }
.cz-vaso { width: 100%; height: auto; }
#vaso-liquido { transition: fill .35s ease; }
.cz-espuma { fill: #FFF6E6; }
.cz-brillo { fill: rgb(255 255 255 / 18%); }
.cz-vaso-borde { fill: none; stroke: rgb(255 246 230 / 55%); stroke-width: 3; stroke-linejoin: round; }
.cz-label { font: 800 1.6rem var(--t-titulos); letter-spacing: .04em; display: flex; align-items: baseline; gap: 10px; }
.cz-label output { font-size: 3rem; color: var(--t-acento); }
.cz-ebc-control input[type="range"] { width: 100%; accent-color: var(--t-acento); height: 32px; margin: 8px 0 4px; cursor: pointer; }
.cz-escala { height: 12px; border-radius: 6px; }
.cz-estilo { margin: 14px 0 12px; font: 800 1.5rem var(--t-titulos); text-transform: uppercase; letter-spacing: .03em; }
.cz-estilos { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-estilos button { font: 600 .82rem var(--t-fuente); color: var(--t-texto); background: var(--t-fondo); border: 1px solid var(--t-borde); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.cz-estilos button:hover { border-color: var(--t-acento); color: var(--t-acento); }
.cz-estilos small { color: var(--t-texto-2); }

/* ----- Captura y datos ----- */
.cz-captura { padding-top: 48px; padding-bottom: 32px; }
.vis-navegador.grande { display: block; max-width: none; border-radius: 12px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 80%); }
.cz-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; }
@media (min-width: 800px) { .cz-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cz-datos div { border-top: 4px solid var(--t-acento); padding-top: 12px; }
.cz-datos div:nth-child(2) { border-color: #E36A1F; }
.cz-datos div:nth-child(3) { border-color: var(--t-extra); }
.cz-datos div:nth-child(4) { border-color: #6A2A10; }
.cz-datos dt { font: 800 clamp(2.2rem, 6vw, 3.2rem)/1 var(--t-titulos); }
.cz-datos dd { margin: 6px 0 0; color: var(--t-texto-2); }

/* ----- Montaje ----- */
.cz-montaje { padding-top: 56px; padding-bottom: 56px; }
.cz-capas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 640px; }
.cz-capas li { position: relative; display: grid; gap: 2px; padding: 16px 20px; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 8px; margin-bottom: 26px; }
.cz-capas li:not(:last-child)::after {
  content: ""; position: absolute; left: 32px; bottom: -27px; width: 2px; height: 26px;
  background: repeating-linear-gradient(to bottom, var(--t-acento) 0 4px, transparent 4px 8px);
  background-size: 2px 16px; animation: cz-flujo .8s linear infinite;
}
@keyframes cz-flujo { to { background-position: 0 16px; } }
.cz-capas b { font: 800 1.35rem var(--t-titulos); text-transform: uppercase; letter-spacing: .03em; }
.cz-capas span { color: var(--t-texto-2); font-size: .95rem; }
.cz-capas .cf { border-left: 4px solid #F8C25A; }
.cz-capas .ng { border-left: 4px solid var(--t-acento); }
.cz-capas .php { border-left: 4px solid #E36A1F; }
.cz-capas .doble { grid-template-columns: 1fr 1fr; gap: 14px; border-left: 4px solid var(--t-extra); }
.cz-capas .doble div { display: grid; gap: 2px; }
.cz-lateral { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; max-width: 640px; color: var(--t-texto-2); }
.cz-lateral b { color: var(--t-acento); font-family: var(--t-titulos); text-transform: uppercase; font-size: 1.1rem; margin-right: 6px; letter-spacing: .04em; }

/* ----- Levadura Survivor ----- */
.cz-juego {
  padding: 64px 0; margin-top: 24px;
  background:
    linear-gradient(rgb(20 14 9 / 92%), rgb(20 14 9 / 92%)),
    repeating-conic-gradient(#2A1E15 0 25%, #1B130D 0 50%) 0 0 / 16px 16px;
  border-top: 4px solid #000; border-bottom: 4px solid #000;
}
.cz-juego-cabeza { display: grid; gap: 22px; align-items: center; }
@media (min-width: 700px) { .cz-juego-cabeza { grid-template-columns: auto 1fr; } }
.cz-juego-cabeza p:last-child { color: var(--t-texto-2); font-size: 1.08rem; max-width: 40em; }
.cz-cepa { width: 116px; height: 128px; image-rendering: pixelated; animation: cz-flotar 2.6s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgb(0 0 0 / 45%)); }
.cz-juego-titulo { font-size: clamp(2.6rem, 9vw, 5rem); margin-bottom: 12px; }
.cz-juego-datos { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .cz-juego-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cz-juego-datos li { background: #241912; border: 3px solid #000; box-shadow: inset 0 0 0 2px #4A3524; padding: 16px; color: var(--t-texto-2); font-size: .95rem; }
.cz-juego-datos b { display: block; font: 800 2.4rem/1 var(--t-titulos); color: var(--t-acento); margin-bottom: 6px; }
.cz-capturas { display: grid; gap: 16px; }
@media (min-width: 800px) { .cz-capturas { grid-template-columns: 1fr 1fr; } }
.cz-capturas figure { margin: 0; }
.cz-capturas img { width: 100%; border: 3px solid #000; box-shadow: 0 0 0 2px #4A3524, 0 20px 40px -20px #000; image-rendering: pixelated; }
.cz-capturas figcaption { color: var(--t-texto-2); font-size: .88rem; margin-top: 8px; }
.cz-inventario { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-width: 760px; }
.cz-slot { aspect-ratio: 1; display: grid; place-items: center; background: #241912; border: 3px solid #000; box-shadow: inset 0 0 0 2px #4A3524; cursor: pointer; padding: 8px; }
.cz-slot:hover, .cz-slot:focus-visible { box-shadow: inset 0 0 0 2px var(--t-acento); }
.cz-slot canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cz-slot.salta canvas { animation: cz-salto .45s ease; }
.cz-sprite-nombre { min-height: 1.6em; margin: 12px 0 22px; font: 800 1.3rem var(--t-titulos); text-transform: uppercase; color: var(--t-acento); letter-spacing: .05em; }

@media (prefers-reduced-motion: reduce) {
  .cz-levi-boton img, .cz-cepa { animation: none; }
}