/* ===== Páginas (v1) ===== */
.pag-hero { padding: clamp(28px, 4vw, 72px) 0 clamp(36px, 4vw, 72px); background: radial-gradient(circle at 88% 30%, var(--pastel-azul) 0 30%, transparent 30.2%), var(--fondo); overflow: hidden; }
.pag-hero--corto { background: radial-gradient(circle at 92% 20%, var(--pastel-rosa) 0 18%, transparent 18.2%), var(--fondo); }
.pag-hero__fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.pag-titulo { margin: 8px 0 16px; display: inline-block; transform-origin: 20% 90%; animation: balanceo 2.6s ease-in-out infinite alternate; }
.pag-entrada { font-size: clamp(20px, 0.9vw + 14px, 28px); font-weight: 700; line-height: 1.35; margin: 0 0 12px; max-width: 34ch; }
.pag-hero p:not(.pag-entrada) { max-width: 52ch; }
.pag-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pag-mano { position: relative; min-height: 340px; max-width: 520px; justify-self: center; width: 100%; }
.pag-mano img { position: absolute; width: clamp(130px, 13vw, 200px); height: auto; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, .2)); animation: balancea 3.4s ease-in-out infinite alternate; }
.pag-mano img:nth-child(1) { left: 6%; top: 4%; rotate: -10deg; }
.pag-mano img:nth-child(2) { right: 2%; top: 18%; rotate: 12deg; animation-delay: -1.2s; }
.pag-mano img:nth-child(3) { left: 28%; bottom: 2%; rotate: -4deg; animation-delay: -2.1s; }
.pag-foto { width: 100%; height: auto; border-radius: 28px; border: 3px solid var(--tinta); box-shadow: 8px 10px 0 var(--tinta); }
.pag-hero__foto { position: relative; max-width: 420px; justify-self: center; width: 100%; }
.pag-foto { max-height: 460px; object-fit: cover; }
.pag-sello { position: absolute; left: -18px; bottom: -18px; display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--tinta); border-radius: 999px; padding: 6px 16px 6px 6px; box-shadow: 4px 5px 0 var(--tinta); rotate: -3deg; }
.pag-sello img { width: 48px; height: 48px; border-radius: 50%; }
.pag-sello strong { display: block; }
.pag-sello span span { font-size: 14px; color: var(--texto-2); }
.pag-foto-aviso { display: block; margin-top: 6px; font-size: .9em; color: var(--texto-2); }
.pag-foto-aviso:empty { display: none; }
.pag-foto-aviso--mal { color: var(--error, #b42318); font-weight: 700; }
.pag-cinta { padding: 14px 0; }
.pag-datos { list-style: none; margin: 0 auto; padding: 0 16px; max-width: 1100px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pag-datos li { display: grid; justify-items: center; text-align: center; gap: 2px; }
.pag-datos strong { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1.2vw + 12px, 30px); font-weight: 400; }
.pag-datos span { font-size: 15px; }
.pag-seccion { padding: clamp(40px, 5vw, 96px) 0; }
.pag-seccion--suave { background: var(--figuras-fondo, #FFF4E4); }
.pag-seccion--final { background: radial-gradient(circle at 10% 80%, var(--pastel-verde) 0 20%, transparent 20.2%), var(--fondo); }
.pag-h2 { margin: 0 0 16px; }
.pag-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.pag-estrecho { max-width: 780px; }
.pag-centro { text-align: center; }
.pag-seccion .contenedor > .pag-h2, .pag-seccion .contenedor > .pag-centro { text-align: center; }
.pag-seccion .contenedor > .pag-h2 { display: block; }
.pag-esquema { margin: 0; color: var(--tinta); background: #fff; border: 3px solid var(--tinta); border-radius: 28px; padding: 20px; box-shadow: 6px 8px 0 var(--tinta); }
.pag-esquema svg { width: 100%; height: auto; }
.pag-esquema figcaption { font-size: 15px; color: var(--texto-2); text-align: center; margin-top: 8px; }
.pag-rejilla { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.pag-rejilla li { display: flex; }
.pag-rejilla a { flex: 1; display: grid; grid-template-rows: 96px auto; align-items: center; justify-items: center; text-align: center; gap: 4px; padding: 12px 8px; border-radius: 22px; background: #fff; border: 2px solid var(--tinta); text-decoration: none; color: var(--tinta); font-weight: 800; transition: transform 150ms, box-shadow 150ms; }
.pag-rejilla a:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 4px 5px 0 var(--tinta); }
.pag-rejilla img { width: 100%; max-width: 110px; height: 96px; object-fit: contain; }
.pag-tarjetas { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pag-tarjetas li { position: relative; background: #fff; border: 3px solid var(--tinta); border-radius: 24px; padding: 22px 18px 18px; box-shadow: 5px 6px 0 var(--tinta); }
.pag-tarjetas li:nth-child(odd) { rotate: -1deg; } .pag-tarjetas li:nth-child(even) { rotate: 1deg; }
.pag-tarjetas strong { font-size: 19px; display: block; margin: 8px 0 4px; }
.pag-tarjetas p { margin: 0; color: var(--texto-2); }
.pag-tarjetas__n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--c-coral); border: 2px solid var(--tinta); }
.pag-tarjetas li:nth-child(2) .pag-tarjetas__n { background: var(--c-turquesa); } .pag-tarjetas li:nth-child(3) .pag-tarjetas__n { background: var(--c-morado); } .pag-tarjetas li:nth-child(4) .pag-tarjetas__n { background: var(--c-verde); }
.pag-duda { background: #fff; border: 2px solid var(--tinta); border-radius: 18px; margin: 0 0 10px; overflow: hidden; }
.pag-duda summary { cursor: pointer; list-style: none; padding: 14px 52px 14px 18px; font-weight: 800; position: relative; }
.pag-duda summary::-webkit-details-marker { display: none; }
.pag-duda summary::after { content: "+"; position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pastel-azul); font-size: 20px; transition: rotate 200ms; }
.pag-duda[open] summary::after { rotate: 45deg; background: var(--pastel-rosa); }
.pag-duda[open] { box-shadow: 4px 5px 0 var(--tinta); }
.pag-duda p { margin: 0; padding: 0 18px 16px; }
.pag-duda a, .pag-seccion a:not(.pildora):not(.pag-pack):not(.pag-rejilla a) { color: var(--tinta); text-underline-offset: 3px; }
.pag-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 760px; margin: 22px auto 0; }
.pag-pack { display: grid; gap: 4px; padding: 20px 22px; border-radius: 26px; border: 3px solid var(--tinta); background: #fff; text-decoration: none; color: var(--tinta); box-shadow: 6px 8px 0 var(--tinta); transition: transform 150ms; }
.pag-pack:hover { transform: translateY(-3px) rotate(-1deg); }
.pag-pack strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, 1vw + 12px, 26px); color: var(--c-azul); }
.pag-pack--bolsa { background: var(--bolsa, #D9E5DB); } .pag-pack--bolsa strong { color: var(--c-morado); }
.pag-pack__eti { width: max-content; font-size: 13px; font-weight: 800; background: var(--c-amarillo); border-radius: 999px; padding: 2px 10px; }
.pag-proceso { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.pag-proceso li { position: relative; background: #fff; border: 3px solid var(--tinta); border-radius: 28px; padding: 16px 18px 20px; box-shadow: 6px 8px 0 var(--tinta); }
.pag-proceso__foto img { width: 100%; height: 220px; object-fit: cover; border-radius: 18px; }
.pag-proceso__n { position: absolute; top: -16px; left: -12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 24px; color: #fff; background: var(--c-coral); border: 3px solid var(--tinta); }
.pag-proceso li:nth-child(2) .pag-proceso__n { background: var(--c-turquesa); } .pag-proceso li:nth-child(3) .pag-proceso__n { background: var(--c-verde); }
.pag-proceso h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 24px; margin: 14px 0 6px; color: var(--c-morado); }
.pag-proceso p { margin: 0; }
.pag-bolsas { position: relative; min-height: 300px; }
.pag-bolsas img { position: absolute; width: clamp(120px, 12vw, 190px); height: auto; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, .2)); }
.pag-bolsas img:nth-child(1) { left: 0; top: 0; rotate: -8deg; } .pag-bolsas img:nth-child(2) { right: 8%; top: 6%; rotate: 10deg; }
.pag-bolsas img:nth-child(3) { left: 16%; bottom: 0; rotate: 6deg; } .pag-bolsas img:nth-child(4) { right: 0; bottom: 8%; rotate: -12deg; }
.pag-lista { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.pag-lista li { background: #fff; border: 2px solid var(--tinta); border-radius: 18px; padding: 14px 18px 14px 56px; position: relative; }
.pag-lista li::before { content: "✓"; position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-verde); color: #fff; font-weight: 800; }
.pag-buscar { max-width: 620px; margin: 18px 0 0; }
.pag-buscar .input-text { font: inherit; width: 100%; min-height: 56px; border: 3px solid var(--tinta); border-radius: 999px; padding: 8px 22px; background: #fff; box-shadow: 4px 5px 0 var(--tinta); }
.pag-buscar .input-text:focus { outline: 3px solid var(--c-amarillo); outline-offset: 3px; }
.pag-buscar__nada { margin: 12px 0 0; font-weight: 700; }
.pag-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pag-indice a { display: inline-flex; min-height: 40px; align-items: center; padding: 4px 16px; border-radius: 999px; background: #fff; border: 2px solid var(--tinta); text-decoration: none; color: var(--tinta); font-weight: 700; }
.pag-grupo { margin: 0 0 30px; scroll-margin-top: 120px; }
.pag-grupo__titulo { font-family: var(--display); text-transform: uppercase; font-weight: 400; color: var(--c-morado); font-size: clamp(24px, 1.4vw + 12px, 34px); margin: 0 0 12px; scroll-margin-top: 120px; }
.pag-otra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; font-weight: 700; }
.pag-contacto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
.pag-form { background: #fff; border: 3px solid var(--tinta); border-radius: 28px; padding: clamp(18px, 2vw, 30px); box-shadow: 8px 10px 0 var(--tinta); }
.pag-form .form-row { margin: 0 0 16px; }
.pag-form label { display: block; font-weight: 700; margin-bottom: 4px; }
.pag-form .input-text { font: inherit; width: 100%; min-height: 48px; border: 2px solid var(--tinta); border-radius: 14px; padding: 8px 14px; background: #fff; color: var(--tinta); }
.pag-form textarea.input-text { min-height: 150px; resize: vertical; }
.pag-form .input-text:focus { outline: 3px solid var(--c-amarillo); outline-offset: 2px; }
.pag-opcional, .pag-ayuda { font-weight: 400; color: var(--texto-2); font-size: 14px; }
.pag-ayuda { display: block; margin-top: 4px; }
.pag-temas { border: 0; padding: 0; margin: 0 0 16px; }
.pag-temas legend { font-weight: 700; margin-bottom: 6px; }
.pag-temas label { display: inline-block; margin: 0 6px 8px 0; font-weight: 700; }
.pag-temas input { position: absolute; opacity: 0; }
.pag-temas span { display: inline-flex; min-height: 44px; align-items: center; padding: 4px 16px; border-radius: 999px; border: 2px solid var(--tinta); background: #fff; cursor: pointer; }
.pag-temas input:checked + span { background: var(--c-morado); color: #fff; box-shadow: 3px 4px 0 var(--tinta); }
.pag-temas input:focus-visible + span { outline: 3px solid var(--c-amarillo); outline-offset: 2px; }
.pag-privacidad label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.pag-privacidad input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--c-morado); }
.pag-form .pildora { width: 100%; justify-content: center; }
.pag-canales { position: relative; display: grid; gap: 14px; }
.pag-canal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: #fff; border: 3px solid var(--tinta); border-radius: 22px; padding: 14px 16px; box-shadow: 5px 6px 0 var(--tinta); }
.pag-canal strong { display: block; }
.pag-canal a { color: var(--tinta); font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 3px; }
.pag-canal--nota { background: var(--pastel-amarillo, #FBE7A6); }
.pag-canal__icono { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--tinta); position: relative; background: var(--pastel-azul); }
.pag-canal__icono::before { content: ""; position: absolute; inset: 11px; background: var(--tinta); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pag-i-correo { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
.pag-i-insta { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%226.5%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); background: var(--pastel-rosa); }
.pag-i-reloj { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); background: #fff; }
.pag-asoma { position: absolute; right: 6px; top: -78px; width: 110px; rotate: 8deg; animation: balancea 3s ease-in-out infinite alternate; }
.pag-asoma img { width: 100%; height: auto; }
.pag-canal__faq { margin: 4px 0 0; font-weight: 700; }
@media (max-width: 1023px) {
.pag-tarjetas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pag-contacto { grid-template-columns: minmax(0, 1fr); }
.pag-asoma { top: auto; bottom: -30px; }
}
@media (max-width: 767px) {
.pag-hero__fila, .pag-dos { grid-template-columns: minmax(0, 1fr); }
.pag-mano { min-height: 220px; } .pag-mano img { width: 130px; }
.pag-bolsas { min-height: 220px; } .pag-bolsas img { width: 110px; }
.pag-datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pag-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pag-rejilla a { grid-template-rows: 70px auto; font-size: 14px; padding: 8px 4px; } .pag-rejilla img { height: 70px; }
.pag-proceso { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pag-packs { grid-template-columns: minmax(0, 1fr); }
.pag-titulo.display--40 { font-size: min(40px, 9vw); }
.pag-h2.display--24 { font-size: min(36px, 8vw); }
.pag-sello { left: 8px; }
.pag-asoma { display: none; }
}
@media (max-width: 479px) { .pag-tarjetas { grid-template-columns: minmax(0, 1fr); } .pag-tarjetas li { rotate: 0deg !important; } }
@media (prefers-reduced-motion: reduce) { .pag-titulo, .pag-mano img, .pag-asoma { animation: none; } }
/* ===== v8.2 · revisión visual (V# = /tmp/revision/visual-propuesta.md) ===== */
/* V4: la columna estrecha cuenta con el margen lateral (antes se quedaba en 588 px) */
.contenedor.pag-estrecho { max-width: calc(820px + 2 * var(--gutter)); }
/* V2 + norma de fondos: dos secciones seguidas nunca del mismo fondo, y una ola al cambiar */
.pag-seccion--suave, .pag-seccion--final { position: relative; margin-top: -36px; border-top: 36px solid transparent;
-webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 240px 36px repeat-x, linear-gradient(#000 0 0) 0 36px / 100% calc(100% - 36px) no-repeat;
mask: url("data:image/svg+xml;utf8,") 0 0 / 240px 36px repeat-x, linear-gradient(#000 0 0) 0 36px / 100% calc(100% - 36px) no-repeat; }
.pag-seccion--suave { background: #fff; background-clip: border-box; }
.pag-seccion--final { background: radial-gradient(circle at 10% 80%, var(--pastel-verde) 0 20%, transparent 20.2%), var(--pastel-morado); }
/* V5: títulos sin palabra huérfana; escala de h2 de sección común (~48 px en grande) */
.pag-titulo, .pag-h2 { text-wrap: balance; }
@media (min-width: 768px) { .pag-h2.display--24 { font-size: clamp(36px, 1.67vw + 16px, 48px); line-height: 1.1; } }
/* V29: migas a la misma escala en todas las páginas */
.migas { font-size: .85em; }
/* Letra pequeña en em (V: consentimiento de 15 px sobre un cuerpo de 21,6) */
.pag-privacidad label { font-size: .9em; }
.pag-opcional, .pag-ayuda { font-size: .8em; }
.pag-datos span, .pag-esquema figcaption { font-size: .8em; }
/* V10: 11 Minimals + «Ver los 23», dos filas de 6 sin huérfano */
@media (min-width: 1024px) { .pag-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1200px; margin-inline: auto; } }
.pag-rejilla__todos a { background: var(--c-amarillo); box-shadow: 4px 5px 0 var(--tinta); }
.pag-rejilla__23 { font-family: var(--display); font-size: 64px; line-height: 96px; color: var(--tinta); }
/* V35: los huecos de las fotos se ven intencionados mientras cargan */
.pag-proceso__foto { background: var(--pastel-azul); border-radius: 18px; }
.pag-rejilla img { background: transparent; }
/* V26: la foto del héroe del taller, más grande y girada, con otra tarjeta detrás (mesa con polaroids) */
.pag-hero__foto--mesa { max-width: 520px; }
.pag-hero__foto--mesa::before { content: ""; position: absolute; inset: 6% -4% -2% 8%; border-radius: 28px; background: var(--pastel-verde); border: 3px solid var(--tinta); rotate: 5deg; }
.pag-hero__foto--mesa .pag-foto { position: relative; rotate: -2deg; aspect-ratio: 1; }
/* V27: cómo se llena cada pack, los Minimals más juntos */
.pag-bolsas { min-height: 360px; max-width: 520px; width: 100%; justify-self: center; }
.pag-bolsas { min-height: 420px; }
.pag-bolsas img { width: clamp(140px, 11vw, 200px); }
.pag-bolsas img:nth-child(1) { left: 2%; top: 0; } .pag-bolsas img:nth-child(2) { right: 2%; top: 4%; }
.pag-bolsas img:nth-child(3) { left: 8%; bottom: 0; } .pag-bolsas img:nth-child(4) { right: 6%; bottom: 2%; }
/* V13: Palabra de taller en tres columnas, como la fila de «Envío y garantía» */
@media (min-width: 1024px) { .pag-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; margin-inline: auto; } }
/* V14: packs de cierre más presentes, con miniatura y precio */
.pag-packs { max-width: 1000px; }
.pag-pack { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 22px 26px; }
.pag-pack > :not(.pag-pack__mini) { grid-column: 2; }
.pag-pack__mini { grid-column: 1; grid-row: 1 / span 3; width: 96px; height: 96px; object-fit: contain; }
.pag-pack--bolsa .pag-pack__mini { object-fit: cover; border-radius: 50%; border: 2px solid var(--tinta); }
.pag-dos .pag-packs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: 0; }
.pag-pack b { font-family: var(--display); font-weight: 400; font-size: 1.25em; }
/* V3 + idea 1: Preguntas en dos columnas, índice fijo a la izquierda con un Minimal que pregunta */
.pag-faq__lado { display: grid; gap: 22px; align-content: start; }
.pag-faq__lado .pag-indice { margin-top: 0; }
.pag-pregunton { display: none; }
@media (max-width: 1023px) { .pag-faq__lado { margin-bottom: 28px; } }
@media (min-width: 1024px) {
.pag-faq { display: grid; grid-template-columns: 280px minmax(0, 760px); gap: 56px; justify-content: center; }
.pag-faq__lado { position: sticky; top: 120px; align-self: start; }
.pag-faq__lado .pag-indice { flex-direction: column; align-items: flex-start; }
.pag-pregunton { display: grid; justify-items: center; }
.pag-pregunton img { width: 150px; height: auto; rotate: -6deg; animation: balancea 3.2s ease-in-out infinite alternate; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, .2)); }
.pag-pregunton__dice { position: relative; margin: 0 0 14px; background: #fff; border: 3px solid var(--tinta); border-radius: 22px; padding: 10px 16px; font-weight: 800; text-align: center; box-shadow: 4px 5px 0 var(--tinta); }
.pag-pregunton__dice::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 20px; height: 20px; background: #fff; border-right: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); rotate: 45deg; translate: -50% 0; }
}
.contenedor.pag-faq-ancho { max-width: calc(1096px + 2 * var(--gutter)); }
.pag-junto { display: inline-flex; flex-wrap: nowrap; align-items: flex-end; gap: inherit; }
/* móvil estrecho (Borja 29/09): un título nunca se sale; la palabra (o la pareja) que no cabe encoge un poco */
.display, .cara, .pag-junto { max-width: 100%; }
.cara .svgt { max-width: calc(100% - 0.3em); min-width: 0; } /* el contorno y la sombra pintan fuera de la caja */
@media (min-width: 1280px) { .contenedor.pag-estrecho > .pag-h2 { margin-inline: -140px; } }
/* V28: sin hueco muerto entre la cabecera corta y la primera sección */
.pag-hero--corto + .pag-seccion { padding-top: 16px; }
/* V11: contacto con compañía a la derecha del título */
.pag-hola { position: relative; min-height: 220px; max-width: 420px; width: 100%; justify-self: center; }
.pag-hola img { position: absolute; bottom: 0; width: clamp(120px, 11vw, 180px); height: auto; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, .2)); animation: balancea 3.4s ease-in-out infinite alternate; }
.pag-hola img:nth-of-type(1) { left: 2%; rotate: -8deg; } .pag-hola img:nth-of-type(2) { right: 2%; rotate: 8deg; animation-delay: -1.4s; }
/* el caracol que asomaba por los canales sobra: el héroe ya tiene compañía */
.pag-asoma { display: none; }
.pag-hola__bocadillo { position: absolute; left: 50%; top: 0; translate: -50% 0; font-family: var(--display); text-transform: uppercase; font-size: 30px; background: #fff; border: 3px solid var(--tinta); border-radius: 22px; padding: 4px 18px; box-shadow: 4px 5px 0 var(--tinta); rotate: -4deg; z-index: 5; }
/* V12: nombre y correo en una fila; formulario y canales centrados */
.pag-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 1024px) { .pag-contacto { grid-template-columns: minmax(0, 780px) minmax(0, 420px); justify-content: center; } }
@media (max-width: 767px) {
.pag-par { grid-template-columns: minmax(0, 1fr); }
.pag-hola { min-height: 150px; max-width: 300px; } .pag-hola img { width: 110px; } .pag-hola__bocadillo { font-size: 24px; }
.pag-bolsas { min-height: 240px; } .pag-bolsas img { width: 120px; }
.pag-pack { grid-template-columns: 72px minmax(0, 1fr); } .pag-pack__mini { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .pag-pregunton img, .pag-hola img { animation: none; } }
/* ===== Guías (v1) ===== */
.gui-tarjetas { list-style: none; padding: 0; margin: 24px auto 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1200px; }
.gui-tarjetas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
.gui-tarjetas--uno { grid-template-columns: minmax(0, 1fr); max-width: 470px; }
.gui-tarjetas li { display: flex; }
.gui-tarjeta { flex: 1; display: grid; align-content: start; gap: 8px; padding: 18px 20px 20px; border-radius: 28px; border: 3px solid var(--tinta); background: #fff; color: var(--tinta); text-decoration: none; box-shadow: 6px 8px 0 var(--tinta); transition: transform 150ms; }
.gui-tarjeta:hover { transform: translateY(-3px) rotate(-1deg); }
.gui-tarjeta__foto { display: grid; place-items: center; height: 150px; border-radius: 20px; background: var(--pastel-azul); overflow: hidden; }
.gui-tarjetas li:nth-child(2) .gui-tarjeta__foto { background: var(--pastel-rosa); } .gui-tarjetas li:nth-child(3) .gui-tarjeta__foto { background: var(--pastel-verde); }
.gui-tarjeta__foto img { width: 150px; height: 150px; object-fit: contain; rotate: -6deg; filter: drop-shadow(3px 4px 0 rgba(30, 58, 95, .2)); }
.gui-tarjeta__t { margin: 0; font-family: var(--display); text-transform: uppercase; font-weight: 400; color: var(--c-morado); font-size: clamp(20px, 0.8vw + 14px, 26px); line-height: 1.15; }
.gui-tarjeta__d { color: var(--texto-2); }
.gui-tarjeta__ir { font-weight: 800; margin-top: 4px; }
.gui-rejilla a { grid-template-rows: 96px auto auto; }
.gui-rejilla small { font-weight: 400; font-size: .8em; line-height: 1.3; color: var(--texto-2); }
@media (min-width: 1024px) { .gui-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1200px; margin-inline: auto; } }
.pag-tarjetas.gui-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; margin-inline: auto; }
.pag-tarjetas li:nth-child(4) .pag-tarjetas__n { background: var(--c-verde); }
.gui-par { min-height: 260px; }
.gui .pag-cinta + .pag-seccion { padding-top: clamp(56px, 6vw, 110px); }
/* el texto que sigue a una fila de tarjetas respira y no se estira de lado a lado */
.gui .pag-tarjetas + .pag-centro, .gui .gui-tarjetas + .pag-centro, .gui .gui-rejilla + .pag-centro { max-width: 68ch; margin: 30px auto 0; }
.gui-siono { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 22px auto 0; }
.gui-siono > div { background: #fff; border: 3px solid var(--tinta); border-radius: 24px; padding: 18px 22px; box-shadow: 5px 6px 0 var(--tinta); }
.gui-siono__si { background: var(--pastel-verde) !important; } .gui-siono__no { background: var(--pastel-rosa) !important; }
.gui-siono__t { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; font-size: 24px; color: var(--c-morado); }
.gui-siono ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.gui-aviso { max-width: 760px; margin: 22px auto 0; background: var(--pastel-amarillo, #FBE7A6); border: 2px solid var(--tinta); border-radius: 18px; padding: 12px 18px; }
@media (max-width: 1023px) {
.gui-tarjetas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pag-tarjetas.gui-tres { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 767px) {
.gui-tarjetas, .gui-tarjetas--dos, .gui-siono { grid-template-columns: minmax(0, 1fr); }
.gui-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gui-rejilla a { grid-template-rows: 80px auto auto; } .gui-rejilla img { height: 80px; }
.gui-par { min-height: 170px; }
.gui-tarjeta__foto { height: 120px; } .gui-tarjeta__foto img { width: 120px; height: 120px; }
}
@media (max-width: 767px) { .gui .pag-titulo.display--40 { font-size: min(40px, 8.4vw); } }
/* ===== Kit (v1) ===== */
:root { --pastel-amarillo: #FBE7A6; }
/* Cortes de sección */
.k-corte-zigzag { position: relative; margin-top: -18px; border-top: 18px solid transparent; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 28px 18px repeat-x, linear-gradient(#000 0 0) 0 17px / 100% calc(100% - 17px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 28px 18px repeat-x, linear-gradient(#000 0 0) 0 17px / 100% calc(100% - 17px) no-repeat; }
.k-corte-feston { position: relative; margin-top: -32px; border-top: 32px solid transparent; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 64px 32px repeat-x, linear-gradient(#000 0 0) 0 31px / 100% calc(100% - 31px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 64px 32px repeat-x, linear-gradient(#000 0 0) 0 31px / 100% calc(100% - 31px) no-repeat; }
.k-corte-loma { position: relative; margin-top: -72px; border-top: 72px solid transparent; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 72px repeat-x, linear-gradient(#000 0 0) 0 71px / 100% calc(100% - 71px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 72px repeat-x, linear-gradient(#000 0 0) 0 71px / 100% calc(100% - 71px) no-repeat; }
.k-corte-inclinado { position: relative; margin-top: -60px; border-top: 60px solid transparent; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 60px repeat-x, linear-gradient(#000 0 0) 0 59px / 100% calc(100% - 59px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 60px repeat-x, linear-gradient(#000 0 0) 0 59px / 100% calc(100% - 59px) no-repeat; }
.k-corte-ola { position: relative; margin-top: -48px; border-top: 48px solid transparent; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 520px 48px repeat-x, linear-gradient(#000 0 0) 0 47px / 100% calc(100% - 47px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 520px 48px repeat-x, linear-gradient(#000 0 0) 0 47px / 100% calc(100% - 47px) no-repeat; }
.k-corte-burbujas { position: relative; margin-top: -40px; border-top: 40px solid transparent; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 90px 40px repeat-x, linear-gradient(#000 0 0) 0 39px / 100% calc(100% - 39px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 90px 40px repeat-x, linear-gradient(#000 0 0) 0 39px / 100% calc(100% - 39px) no-repeat; }
/* el corte se monta sobre el final de la sección anterior: esa sección guarda el sitio (su padding lo cuenta) */
.pag-seccion:has(+ .k-corte-loma), .pag-seccion:has(+ .k-corte-inclinado), .k-hero:has(+ .k-corte-loma), .k-hero:has(+ .k-corte-inclinado) { padding-bottom: calc(clamp(40px, 5vw, 96px) + 64px); }
.pag-seccion:has(+ .k-corte-ola), .pag-seccion:has(+ .k-corte-burbujas), .pag-seccion:has(+ .k-corte-feston), .pag-seccion:has(+ .pag-seccion--final), .pag-seccion:has(+ .k-corte-zigzag), .k-anatomia-sec:has(+ .k-corte-zigzag) { padding-bottom: calc(clamp(40px, 5vw, 96px) + 40px); }
.k-blanco { background: #fff; } .k-crema { background: var(--fondo); }
.k-pastel { background: var(--k-fondo, var(--pastel-verde)); }
.k-plano-fondo { background: linear-gradient(rgba(1, 138, 220, .16) 1.5px, transparent 1.5px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(1, 138, 220, .16) 1.5px, transparent 1.5px) 0 0 / 26px 26px, #F6FAFE; }
/* Cabeceras: lo común */
.k-hero { position: relative; padding: clamp(28px, 4vw, 72px) 0 clamp(40px, 4.5vw, 80px); overflow: hidden; }
.k-hero .pag-titulo { margin: 8px 0 16px; }
.k-hero p:not(.pag-entrada) { max-width: 56ch; }
/* 1. Centrada con pegatinas */
.k-hero--centrado { background: radial-gradient(circle at 50% 118%, var(--pastel-amarillo, #FBE7A6) 0 34%, transparent 34.2%), var(--fondo); padding-bottom: clamp(56px, 6vw, 110px); }
.k-hero__centro { text-align: center; max-width: calc(820px + 2 * var(--gutter)); }
.k-hero__centro .migas, .k-hero__centro .pag-botones { justify-content: center; }
.k-hero__centro .pag-entrada, .k-hero__centro p { margin-inline: auto; }
.k-hero__centro .pag-titulo { transform-origin: 50% 90%; }
.k-pegatinas { position: absolute; inset: 0; pointer-events: none; }
.k-pegatina { position: absolute; width: clamp(140px, 11vw, 230px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid var(--tinta); box-shadow: 6px 8px 0 var(--tinta); display: grid; place-items: center; rotate: var(--g, -8deg); animation: k-flota 4.6s ease-in-out infinite alternate; }
.k-pegatina::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--k-p); border: 2px dashed rgba(30, 58, 95, .35); }
.k-pegatina img { position: relative; width: 84%; height: auto; }
.k-pegatina:nth-child(1) { left: 3%; top: 16%; --g: -10deg; }
.k-pegatina:nth-child(2) { right: 4%; top: 10%; --g: 9deg; animation-delay: -1.5s; }
.k-pegatina:nth-child(3) { right: 9%; bottom: 10%; --g: -5deg; animation-delay: -2.4s; width: clamp(110px, 8.5vw, 180px); }
.k-pegatina:nth-child(4) { left: 8%; bottom: 8%; --g: 7deg; animation-delay: -.8s; width: clamp(110px, 8.5vw, 180px); }
@keyframes k-flota { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (max-width: 1199px) {
.k-hero--centrado { display: flex; flex-direction: column; }
.k-pegatinas { position: relative; inset: auto; order: -1; display: flex; justify-content: center; gap: 14px; padding: 0 16px 14px; }
.k-pegatina { position: relative; inset: auto !important; width: clamp(76px, 18vw, 120px) !important; box-shadow: 4px 5px 0 var(--tinta); }
.k-pegatina::before { inset: 6px; }
}
@media (max-width: 379px) { .k-pegatina:nth-child(4) { display: none; } }
/* 2. Partida: marco con cinta adhesiva */
.k-hero--partido { background: radial-gradient(ellipse 48% 70% at 100% 100%, var(--k-hero-pastel, var(--pastel-verde)) 0 99%, transparent 100%), var(--fondo); }
.k-hero__fila { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.k-hero__media { position: relative; justify-self: center; width: 100%; max-width: 540px; }
.k-marco { position: relative; margin: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 10px; padding: 14px 14px 56px; box-shadow: 8px 10px 0 var(--tinta); rotate: 2.5deg; }
.k-marco img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--pastel-azul); }
.k-marco figcaption { position: absolute; left: 18px; right: 18px; bottom: 14px; font-weight: 800; text-align: center; }
.k-cinta-adhesiva { position: absolute; width: 130px; height: 34px; background: rgba(231, 187, 27, .55); border-inline: 2px dashed rgba(30, 58, 95, .25); z-index: 2; }
.k-cinta-adhesiva--a { top: -16px; left: 22%; rotate: -8deg; } .k-cinta-adhesiva--b { top: -14px; right: 12%; rotate: 10deg; background: rgba(1, 182, 180, .35); }
/* 3. Banda con dibujo de fondo y borde recortado */
.k-banda { background-color: var(--k-banda); z-index: 2; margin-bottom: -26px; padding-bottom: calc(clamp(40px, 4.5vw, 80px) + 26px); }
.k-banda--cuadricula { background: linear-gradient(rgba(30, 58, 95, .12) 1.5px, transparent 1.5px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(30, 58, 95, .12) 1.5px, transparent 1.5px) 0 0 / 28px 28px, var(--k-banda); }
.k-banda--mantel { background: linear-gradient(90deg, rgba(242, 91, 79, .26) 50%, transparent 50%) 0 0 / 56px 56px, linear-gradient(rgba(242, 91, 79, .26) 50%, transparent 50%) 0 0 / 56px 56px, #fff; }
.k-banda--rayas { background: repeating-linear-gradient(-45deg, var(--k-banda) 0 22px, color-mix(in srgb, var(--k-banda) 55%, #fff) 22px 44px); }
.k-banda--lunares { background: radial-gradient(circle, color-mix(in srgb, var(--k-banda) 40%, var(--tinta) 8%) 0 5px, transparent 5.5px) 0 0 / 38px 38px, radial-gradient(circle, color-mix(in srgb, var(--k-banda) 40%, var(--tinta) 8%) 0 5px, transparent 5.5px) 19px 19px / 38px 38px, var(--k-banda); }
.k-banda--zigzag { -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 17px) no-repeat, url("data:image/svg+xml;utf8,") 0 100% / 28px 18px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 17px) no-repeat, url("data:image/svg+xml;utf8,") 0 100% / 28px 18px repeat-x; }
.k-banda--feston { -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 31px) no-repeat, url("data:image/svg+xml;utf8,") 0 100% / 64px 32px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 31px) no-repeat, url("data:image/svg+xml;utf8,") 0 100% / 64px 32px repeat-x; }
.k-banda--ola { -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 35px) no-repeat, url("data:image/svg+xml;utf8,") 0 100% / 240px 36px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 35px) no-repeat, url("data:image/svg+xml;utf8,") 0 100% / 240px 36px repeat-x; }
.k-banda__fila { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.k-banda__fila--sola { grid-template-columns: minmax(0, 1fr); max-width: calc(900px + 2 * var(--gutter)); }
.k-banda__tarjeta { background: #fff; border: 3px solid var(--tinta); border-radius: 26px; padding: clamp(18px, 2.4vw, 40px); box-shadow: 8px 10px 0 var(--tinta); }
.k-banda__lado { position: relative; justify-self: center; width: 100%; max-width: 520px; }
.k-banda + .pag-seccion, .k-banda + section { position: relative; z-index: 1; padding-top: calc(clamp(40px, 5vw, 96px) + 26px); }
@media (max-width: 767px) {
.k-hero__fila, .k-banda__fila { grid-template-columns: minmax(0, 1fr); }
.k-hero__media, .k-banda__lado { max-width: 360px; }
.k-marco { padding-bottom: 20px; }
}
/* 4. Minimals asomando detrás de la loma */
.k-hero--asoma { background: radial-gradient(circle at 96% 8%, var(--k-hero-pastel, var(--pastel-morado)) 0 26%, transparent 26.2%), var(--fondo); padding-bottom: 0; }
.k-hero__asoma { max-width: calc(980px + 2 * var(--gutter)); }
.k-loma { position: relative; height: clamp(150px, 13vw, 240px); margin-top: clamp(10px, 2vw, 30px); overflow-x: clip; }
.k-loma::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 55%; background: var(--k-loma, #fff); border-top: 3px solid var(--tinta); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 40; }
.k-loma img { position: absolute; bottom: 30%; width: clamp(110px, 10vw, 200px); height: auto; translate: -50% 0; rotate: var(--g); filter: drop-shadow(3px 5px 0 rgba(30, 58, 95, .2)); animation: k-asoma 2.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes k-asoma { from { transform: translateY(8px); } to { transform: translateY(-6px); } }
.k-hero--asoma + section { background: var(--k-loma, #fff); }
.k-loma img { height: 60%; width: auto; max-width: 24%; object-fit: contain; }
/* 5. Portada de revista */
.k-hero--revista { background: radial-gradient(circle at 6% 90%, var(--pastel-verde) 0 22%, transparent 22.2%), var(--fondo); }
.k-revista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "cab portada" "lineas portada"; gap: clamp(18px, 2.4vw, 40px) clamp(24px, 3.5vw, 64px); background: #fff; border: 3px solid var(--tinta); border-radius: 30px; padding: clamp(20px, 3vw, 52px); box-shadow: 10px 12px 0 var(--tinta); }
.k-revista__cabecera { grid-area: cab; }
.k-revista__portada { grid-area: portada; position: relative; display: grid; align-content: end; gap: 6px; min-height: clamp(420px, 34vw, 640px); padding: clamp(18px, 2vw, 32px); border-radius: 22px; border: 3px solid var(--tinta); background: radial-gradient(circle at 70% 30%, #fff 0 18%, transparent 18.2%), var(--pastel-turquesa); color: var(--tinta); text-decoration: none; overflow: hidden; transition: transform 160ms var(--ease-out); }
.k-revista__portada:hover { transform: rotate(-.6deg) translateY(-3px); }
.k-revista__minis { position: relative; display: block; height: clamp(200px, 22vw, 380px); margin-bottom: 6px; }
.k-revista__minis img { position: absolute; width: auto; height: 70%; max-width: 46%; object-fit: contain; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, .22)); }
.k-revista__minis img:nth-child(1) { left: 4%; top: 22%; rotate: -8deg; } .k-revista__minis img:nth-child(2) { right: 6%; top: 0; rotate: 8deg; height: 72%; } .k-revista__minis img:nth-child(3) { left: 32%; top: 36%; rotate: -2deg; height: 60%; }
.k-revista__sello { position: relative; justify-self: start; background: var(--c-amarillo); color: var(--tinta); font-weight: 800; border: 2px solid var(--tinta); border-radius: 999px; padding: 2px 14px; rotate: -3deg; }
.k-revista__titular { position: relative; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 2.4vw + 8px, 64px); line-height: 1.02; color: var(--tinta); }
.k-revista__desc { position: relative; max-width: 40ch; }
.k-revista__ir { position: relative; font-weight: 800; }
.k-revista__lineas { grid-area: lineas; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-self: end; border-top: 3px solid var(--tinta); }
.k-revista__lineas a { display: grid; gap: 0; padding: 12px 0; border-bottom: 2px dashed rgba(30, 58, 95, .3); color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 1.1em; line-height: 1.2; }
.k-revista__lineas a span { font-weight: 700; font-size: .72em; color: var(--texto-2); }
.k-revista__lineas a:hover { color: var(--c-morado); }
@media (max-width: 899px) {
.k-revista { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "portada" "lineas"; box-shadow: 6px 8px 0 var(--tinta); }
.k-revista__portada { min-height: 0; }
}
/* Guías como objetos */
.k-objetos { list-style: none; padding: 0; margin: 30px auto 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(28px, 3vw, 48px); max-width: 1200px; align-items: start; }
.k-objetos--dos { max-width: 900px; } .k-objetos--uno { max-width: 460px; grid-template-columns: minmax(0, 1fr); }
.k-obj-li { display: flex; position: relative; filter: drop-shadow(6px 8px 0 var(--tinta)); }
.k-obj { position: relative; flex: 1; display: grid; align-content: start; gap: 8px; padding: 20px 22px 22px; border: 3px solid var(--tinta); background: #fff; color: var(--tinta); text-decoration: none; transition: transform 160ms var(--ease-out); }
.k-obj:hover { transform: translateY(-3px) rotate(-1deg); }
.k-obj__foto { display: grid; place-items: center; height: 140px; }
.k-obj__foto img { width: 150px; height: 140px; object-fit: contain; rotate: -6deg; }
.k-obj__escena { justify-self: start; font-size: .8em; font-weight: 800; background: #fff; border: 2px solid var(--tinta); border-radius: 999px; padding: 1px 10px; }
.k-obj__t { margin: 0; font-family: var(--display); text-transform: uppercase; font-weight: 400; color: var(--c-morado); font-size: clamp(20px, .8vw + 14px, 28px); line-height: 1.15; }
.k-obj__d { color: var(--texto-2); }
.k-obj__ir { font-weight: 800; margin-top: 4px; }
/* maleta: etiqueta de equipaje con ojal y cuerda */
.k-obj--maleta { background: var(--pastel-turquesa); border-radius: 16px 16px 26px 26px; padding-top: 44px; }
.k-obj--maleta::before { content: ""; position: absolute; top: 12px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--fondo); border: 3px solid var(--tinta); box-shadow: 0 0 0 5px var(--c-amarillo); }
.k-obj__cuerda { position: absolute; top: -44px; left: 50%; width: 60px; margin-left: -30px; color: var(--tinta); }
/* ticket: muescas a los lados y línea de corte */
.k-obj--ticket { border-radius: 14px; --y: 184px; -webkit-mask: radial-gradient(circle 15px at 0 var(--y), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 15px at 100% var(--y), #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 15px at 0 var(--y), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 15px at 100% var(--y), #0000 97%, #000) right / 51% 100% no-repeat; }
.k-obj--ticket .k-obj__foto { border-bottom: 3px dashed var(--tinta); padding-bottom: 14px; height: 162px; margin-bottom: 6px; }
/* regalo: etiqueta con cinta y lazo */
.k-obj--regalo { background: linear-gradient(90deg, transparent 22px, var(--c-coral) 22px 36px, transparent 36px), var(--pastel-rosa); border-radius: 20px; padding-left: 52px; margin-top: 26px; }
.k-obj__lazo { position: absolute; top: -34px; left: 0; width: 60px; color: var(--tinta); }
/* plano: papel cuadriculado con cinta adhesiva */
.k-obj--plano { background: linear-gradient(rgba(1, 138, 220, .2) 1.5px, transparent 1.5px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(1, 138, 220, .2) 1.5px, transparent 1.5px) 0 0 / 20px 20px, #fff; border-radius: 6px; }
.k-obj--plano::before { content: ""; position: absolute; top: -16px; left: 50%; width: 120px; height: 30px; margin-left: -60px; rotate: -4deg; background: rgba(231, 187, 27, .55); border-inline: 2px dashed rgba(30, 58, 95, .25); }
/* nota adhesiva con la esquina doblada */
.k-obj--nota { background: linear-gradient(135deg, var(--pastel-amarillo, #FBE7A6) calc(100% - 38px), #fff calc(100% - 38px) calc(100% - 36px), #E9CF76 calc(100% - 36px)); border-radius: 4px 4px 4px 4px; rotate: -1.5deg; }
.k-obj-li--nota .k-obj__foto img { rotate: 4deg; }
/* Anatomía de un Minimal */
.k-anatomia-sec { position: relative; z-index: 3; padding: clamp(32px, 4vw, 70px) 0 clamp(10px, 2vw, 30px); }
.k-anatomia__titulo { text-align: center; margin: 0 0 6px; font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1vw + 12px, 34px); color: var(--c-coral); rotate: -2deg; }
.k-anatomia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; max-width: 1240px; margin: 0 auto; }
.k-anatomia__foto { position: relative; grid-column: 2; grid-row: 1; }
.k-anatomia__foto img { width: 100%; height: auto; aspect-ratio: 400 / 235; object-fit: contain; filter: drop-shadow(6px 10px 0 rgba(30, 58, 95, .16)); }
.k-anatomia__punto { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 4px solid var(--tinta); box-shadow: 0 0 0 5px rgba(255, 255, 255, .7); }
.k-anatomia__llamadas { display: contents; list-style: none; }
.k-llamada { grid-row: 1; align-self: start; position: relative; display: grid; gap: 2px; background: #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 12px 16px; box-shadow: 5px 6px 0 var(--tinta); margin-top: calc(var(--k-y) * 1.6px); }
.k-llamada strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, 1vw + 12px, 32px); line-height: 1.05; }
.k-llamada span { color: var(--texto-2); font-size: .9em; }
.k-llamada--izq { grid-column: 1; justify-self: end; text-align: right; }
.k-llamada--der { grid-column: 3; justify-self: start; }
.k-llamada:nth-child(3) { align-self: end; margin-top: 0; margin-bottom: 10px; }
.k-llamada::after { content: ""; position: absolute; top: 50%; width: clamp(30px, 6vw, 120px); border-top: 3px dashed var(--tinta); }
.k-llamada--izq::after { left: 100%; } .k-llamada--der::after { right: 100%; }
.k-llamada::before { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: #fff; border: 4px solid var(--tinta); z-index: 2; }
.k-llamada--izq::before { left: calc(100% + clamp(30px, 6vw, 120px) - 4px); } .k-llamada--der::before { right: calc(100% + clamp(30px, 6vw, 120px) - 4px); }
.k-llamada:nth-child(1) strong { color: var(--c-morado); } .k-llamada:nth-child(2) strong { color: var(--t-verde); } .k-llamada:nth-child(3) strong { color: var(--c-azul); }
.k-anatomia__regla { grid-column: 2; grid-row: 2; justify-self: stretch; display: grid; justify-items: center; gap: 0; margin: 6px 6% 0; padding-top: 16px; border-top: 3px solid var(--tinta); position: relative; }
.k-anatomia__regla::before, .k-anatomia__regla::after { content: ""; position: absolute; top: -12px; width: 3px; height: 21px; background: var(--tinta); }
.k-anatomia__regla::before { left: 0; } .k-anatomia__regla::after { right: 0; }
.k-anatomia__regla strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(26px, 1.4vw + 14px, 46px); color: var(--c-coral); line-height: 1; margin-top: -40px; background: var(--k-fondo-regla, var(--fondo)); padding: 0 14px; }
.k-anatomia__regla span { font-size: .9em; }
@media (max-width: 899px) {
.k-anatomia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.k-anatomia__foto { grid-column: 1 / -1; grid-row: 1; }
.k-anatomia__punto { display: none; }
.k-anatomia__regla { grid-column: 1 / -1; grid-row: 2; margin-bottom: 8px; }
.k-llamada { grid-row: auto !important; grid-column: auto !important; justify-self: stretch !important; text-align: left !important; margin: 0 !important; align-self: stretch !important; }
.k-llamada::after, .k-llamada::before { display: none; }
.k-llamada:nth-child(3) { grid-column: 1 / -1 !important; }
}
/* móvil muy estrecho (29/09): una llamada por fila, que «ARTICULADOS» no se salga */
@media (max-width: 420px) { .k-anatomia { grid-template-columns: minmax(0, 1fr); } .k-llamada strong { overflow-wrap: anywhere; } }
/* Álbum de cromos */
.k-album { list-style: none; margin: 30px auto 0; padding: clamp(18px, 2.4vw, 40px); max-width: 1240px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 30px); background: linear-gradient(rgba(74, 159, 33, .13) 1.5px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(74, 159, 33, .13) 1.5px, transparent 1.5px) 0 0 / 22px 22px, #fff; border: 3px solid var(--tinta); border-radius: 12px 30px 30px 12px; box-shadow: inset 18px 0 0 -12px rgba(30, 58, 95, .12), 8px 10px 0 var(--tinta); }
.k-cromo { display: flex; rotate: var(--g); }
.k-cromo a { position: relative; flex: 1; display: grid; grid-template-rows: auto auto; background: #fff; border: 2px solid var(--tinta); border-radius: 8px; padding: 8px 8px 0; text-decoration: none; color: var(--tinta); box-shadow: 3px 4px 0 rgba(30, 58, 95, .25); transition: rotate 160ms var(--ease-out), translate 160ms var(--ease-out); }
.k-cromo a::before, .k-cromo a::after { content: ""; position: absolute; width: 26px; height: 26px; background: linear-gradient(135deg, var(--tinta) 50%, transparent 50%); opacity: .85; }
.k-cromo a::before { top: -4px; left: -4px; } .k-cromo a::after { bottom: -4px; right: -4px; rotate: 180deg; }
.k-cromo a:hover { rotate: calc(var(--g) * -1.6); translate: 0 -3px; }
.k-cromo__foto { display: grid; place-items: center; height: clamp(76px, 8vw, 150px); background: var(--k-p); border-radius: 4px; overflow: hidden; }
.k-cromo__foto img { width: 86%; height: 86%; object-fit: contain; }
.k-cromo__nombre { text-align: center; font-weight: 800; padding: 6px 2px 8px; }
.k-cromo--todos a { background: var(--c-amarillo); place-items: center; }
.k-cromo__23 { font-family: var(--display); font-size: clamp(56px, 4vw, 110px); line-height: 1; }
@media (max-width: 1023px) { .k-album { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .k-album { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 14px 12px; } .k-cromo__nombre { font-size: .8em; } .k-cromo a::before, .k-cromo a::after { width: 18px; height: 18px; } }
/* Tira de viñetas */
.k-tira { list-style: none; padding: 0; margin: 28px auto 0; max-width: 1240px; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.25fr; gap: 0; border: 4px solid var(--tinta); border-radius: 10px; background: var(--tinta); box-shadow: 8px 10px 0 var(--sombra, #12263F); overflow: hidden; }
.k-vineta { position: relative; display: grid; grid-template-rows: auto auto 1fr; margin: 0; background: radial-gradient(circle, rgba(30, 58, 95, .09) 1.6px, transparent 2px) 0 0 / 12px 12px, var(--k-p); padding: 16px 18px 20px; }
.k-vineta + .k-vineta { border-left: 4px solid var(--tinta); }
.k-vineta__arte { position: relative; height: clamp(130px, 11vw, 200px); display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.k-vineta__arte > img { width: auto; height: 78%; max-width: 48%; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(30, 58, 95, .2)); }
.k-vineta__arte--fila > img { height: 58%; max-width: 32%; }
.k-vineta__arte--grupo { display: block; } .k-vineta__arte--grupo img { position: absolute; bottom: 0; height: 70%; width: auto; max-width: 52%; object-fit: contain; }
.k-vineta__cartucho { justify-self: start; margin: 12px 0 8px; background: var(--c-amarillo); border: 3px solid var(--tinta); padding: 2px 12px; font-weight: 800; box-shadow: 3px 3px 0 var(--tinta); rotate: -1.5deg; }
.k-vineta p { margin: 0; }
.k-bolsillo { position: relative; display: block; width: min(180px, 80%); height: 100%; }
.k-bolsillo img { position: absolute; left: 50%; bottom: 46%; width: 64%; translate: -50% 0; rotate: -8deg; }
.k-bolsillo svg { position: absolute; left: 0; bottom: 0; width: 100%; color: var(--tinta); }
@media (max-width: 1023px) { .k-tira { grid-template-columns: 1fr 1fr; } .k-vineta:nth-child(3) { border-left: 0; } .k-vineta:nth-child(n+3) { border-top: 4px solid var(--tinta); } }
@media (max-width: 599px) { .k-tira { grid-template-columns: minmax(0, 1fr); } .k-vineta + .k-vineta { border-left: 0; border-top: 4px solid var(--tinta); } }
/* Bocadillo grande con un Minimal que habla */
.k-habla { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 14vw, 240px); align-items: end; gap: 10px; max-width: 980px; margin: 22px auto 0; }
.k-habla--der { grid-template-columns: clamp(120px, 14vw, 240px) minmax(0, 1fr); }
.k-habla--der .k-habla__mini { order: -1; }
.k-habla__globo { position: relative; background: #fff; border: 3px solid var(--tinta); border-radius: 36px; padding: clamp(20px, 2.6vw, 40px); box-shadow: 8px 10px 0 var(--tinta); margin-bottom: 40px; }
.k-habla__globo::after { content: ""; position: absolute; bottom: -26px; right: 60px; width: 46px; height: 34px; background: #fff; border-right: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); clip-path: polygon(0 0, 100% 0, 100% 100%); transform: skewX(-24deg); }
.k-habla--der .k-habla__globo::after { right: auto; left: 60px; transform: skewX(24deg) scaleX(-1); }
.k-habla__globo > :first-child { margin-top: 0; }
.k-habla__mini img { width: 100%; height: auto; rotate: -6deg; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, .2)); animation: balancea 3.2s ease-in-out infinite alternate; }
@media (max-width: 599px) { .k-habla, .k-habla--der { grid-template-columns: minmax(0, 1fr) 96px; } .k-habla--der .k-habla__mini { order: 2; } .k-habla--der .k-habla__globo::after { left: auto; right: 40px; transform: skewX(-24deg); } }
/* Corcho con polaroids */
.k-corcho { margin: 30px auto 0; max-width: 1240px; padding: clamp(28px, 3.4vw, 60px) clamp(16px, 3vw, 56px) clamp(34px, 3.4vw, 60px); border-radius: 18px; border: 10px solid #fff; outline: 3px solid var(--tinta); box-shadow: 10px 12px 0 var(--tinta); background: radial-gradient(circle at 20% 30%, rgba(30, 58, 95, .08) 0 1.5px, transparent 2px) 0 0 / 17px 19px, radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .5) 0 1.5px, transparent 2px) 0 0 / 23px 13px, #EFD9BE; }
.k-corcho__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 56px); }
.k-polaroid { position: relative; background: #fff; padding: 12px 12px 20px; border: 2px solid rgba(30, 58, 95, .35); box-shadow: 4px 8px 0 rgba(30, 58, 95, .28); rotate: var(--g); }
.k-polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 22%), var(--k-chincheta); border: 3px solid var(--tinta); box-shadow: 2px 3px 0 rgba(30, 58, 95, .4); z-index: 2; }
.k-polaroid__foto { display: block; background: var(--pastel-azul); }
.k-polaroid__foto img { width: 100%; height: clamp(200px, 17vw, 330px); object-fit: cover; }
.k-polaroid__n { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--k-chincheta); color: #fff; font-family: var(--display); font-size: 24px; border: 3px solid var(--tinta); }
.k-polaroid h3 { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(22px, 1vw + 14px, 34px); margin: 14px 4px 4px; color: var(--c-morado); }
.k-polaroid p { margin: 0 4px; }
@media (max-width: 899px) { .k-corcho__lista { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; gap: 36px; } }
/* Sellos de goma */
.k-sellos { list-style: none; padding: 0; margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 60px); max-width: 1200px; }
.k-sello { width: clamp(230px, 18vw, 330px); aspect-ratio: 1; border-radius: 50%; display: grid; align-content: center; justify-items: center; text-align: center; gap: 6px; padding: 40px 34px; rotate: var(--g); background: #fff; border: 6px solid var(--k-tinta); box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 9px var(--k-tinta), 6px 8px 0 var(--tinta); position: relative; }
.k-sello::before { content: "★"; color: var(--k-tinta); font-size: 1.3em; line-height: 1; }
.k-sello strong { font-size: 1.05em; line-height: 1.2; }
.k-sello span { font-size: .9em; color: var(--texto-2); }
/* Preguntas como conversación */
.k-chat { margin: 0 0 14px; }
.k-chat summary { list-style: none; cursor: pointer; display: flex; justify-content: flex-end; padding-left: 12%; }
.k-chat summary::-webkit-details-marker { display: none; }
.k-chat__q { position: relative; background: var(--pastel-azul); border: 2px solid var(--tinta); border-radius: 22px 22px 6px 22px; padding: 12px 52px 12px 18px; font-weight: 800; box-shadow: 3px 4px 0 var(--tinta); }
.k-chat__q::after { content: "+"; position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--tinta); font-size: 18px; transition: rotate 200ms; }
.k-chat[open] .k-chat__q::after { rotate: 45deg; background: var(--pastel-rosa); }
.k-chat summary:focus-visible { outline: none; } .k-chat summary:focus-visible .k-chat__q { outline: 3px solid var(--c-amarillo); outline-offset: 3px; }
.k-chat__r { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: end; margin: 10px 12% 0 0; animation: k-aparece 260ms var(--ease-out) both; }
.k-chat__avatar { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--tinta); display: grid; place-items: center; overflow: hidden; }
.k-chat__avatar img { width: 90%; height: 90%; object-fit: contain; }
.k-chat__r p { margin: 0; background: #fff; border: 2px solid var(--tinta); border-radius: 22px 22px 22px 6px; padding: 12px 18px; }
@keyframes k-aparece { from { opacity: 0; translate: 0 6px; } }
@media (max-width: 599px) { .k-chat summary { padding-left: 4%; } .k-chat__r { margin-right: 0; grid-template-columns: 40px minmax(0, 1fr); } .k-chat__avatar { width: 40px; height: 40px; } }
/* Contacto: la postal y el sobre */
.k-postal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 14px; padding: clamp(18px, 2.4vw, 40px) 0; box-shadow: 10px 12px 0 var(--tinta); }
.k-postal::before { content: ""; position: absolute; inset: 8px; border-radius: 8px; pointer-events: none; background: repeating-linear-gradient(-45deg, var(--c-coral) 0 12px, transparent 12px 24px, var(--c-azul) 24px 36px, transparent 36px 48px); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 6px; opacity: .8; }
.k-postal__izq, .k-postal__der { position: relative; padding: 0 clamp(18px, 2.4vw, 40px); }
.k-postal__der { border-left: 3px solid var(--tinta); }
.k-postal__rayas { background: repeating-linear-gradient(transparent 0 38px, rgba(1, 138, 220, .25) 38px 40px) 0 10px / 100% 40px local, #fff !important; line-height: 40px; }
.k-postal .form-row .input-text:not(textarea):not([type="file"]) { border: 0; border-bottom: 3px dotted var(--tinta); border-radius: 0; padding-inline: 2px; background: transparent; }
.k-postal__sellos { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0 0 8px; }
.k-postal__sello { width: 96px; height: 112px; display: grid; place-items: center; background: var(--pastel-verde); border: 6px solid #fff; outline: 3px dotted var(--tinta); box-shadow: 4px 5px 0 rgba(30, 58, 95, .3); rotate: 4deg; }
.k-postal__sello img { width: 80%; height: auto; }
.k-postal__matasellos { width: 130px; color: rgba(30, 58, 95, .55); rotate: -12deg; margin-right: -40px; order: -1; }
.k-sobre { position: relative; background: var(--pastel-amarillo, #FBE7A6); border: 3px solid var(--tinta); border-radius: 12px; padding: clamp(100px, 8vw, 130px) clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px); box-shadow: 8px 10px 0 var(--tinta); display: grid; gap: 14px; }
.k-sobre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(62px, 5vw, 84px); background: color-mix(in srgb, var(--pastel-amarillo, #FBE7A6) 80%, var(--c-naranja) 20%); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 9px 9px 0 0; }
.k-sobre::after { content: ""; position: absolute; top: clamp(44px, 3.8vw, 64px); left: 50%; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--c-coral); border: 3px solid var(--tinta); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35); }
.k-sobre .pag-canal { box-shadow: 3px 4px 0 var(--tinta); }
@media (max-width: 899px) { .k-postal { grid-template-columns: minmax(0, 1fr); padding: 18px 0; } .k-postal__der { border-left: 0; border-top: 3px dashed var(--tinta); padding-top: 18px; margin-top: 10px; } .k-postal__sellos { position: absolute; top: -40px; right: 10px; } .k-postal__matasellos { display: none; } .k-postal__sello { width: 70px; height: 82px; } }
/* Viajar: carretera con paradas */
.k-carretera { position: relative; margin-top: 10px; }
.k-carretera__via { display: block; width: 100%; height: 120px; }
.k-carretera__paradas { list-style: none; margin: -60px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); position: relative; }
.k-parada__marca { display: flex; gap: 10px; margin: 0 0 18px; }
.k-parada__marca .k-picto { width: 64px; height: 64px; padding: 12px; background: #fff; border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 4px 5px 0 var(--tinta); color: var(--tinta); }
.k-parada:nth-child(1) .k-parada__marca .k-picto { background: var(--pastel-naranja); }
.k-parada:nth-child(2) .k-parada__marca { justify-content: flex-start; padding-left: 8%; }
.k-parada:nth-child(2) .k-parada__marca .k-picto { background: var(--pastel-azul); } .k-parada:nth-child(2) .k-parada__marca .k-picto + .k-picto { background: var(--pastel-verde); }
.k-parada__texto { background: #fff; border: 3px solid var(--tinta); border-radius: 24px; padding: clamp(18px, 2vw, 32px); box-shadow: 6px 8px 0 var(--tinta); }
.k-parada__texto .pag-h2 { text-align: left; }
@media (max-width: 767px) {
.k-carretera__via { display: none; }
.k-carretera__paradas { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 40px; background: linear-gradient(var(--c-amarillo), var(--c-amarillo)) 17px 0 / 5px 100% no-repeat; }
.k-carretera__paradas::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 31px; background: #fff; border-inline: 4px solid var(--tinta); z-index: -1; }
.k-parada { position: relative; padding-bottom: 28px; }
.k-parada__marca { margin: 0 0 12px -50px; padding-left: 0 !important; }
.k-parada__marca .k-picto { width: 52px; height: 52px; padding: 9px; }
}
/* Señales de tráfico */
.k-senales-sec { position: relative; z-index: 3; padding: clamp(26px, 3vw, 50px) 0 clamp(10px, 2vw, 30px); }
.k-senales { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 36px); }
.k-senal { display: grid; justify-items: center; text-align: center; gap: 8px; }
.k-senal strong { display: grid; place-items: center; width: clamp(118px, 9vw, 170px); aspect-ratio: 1; background: #fff; border: clamp(10px, .8vw, 14px) solid var(--c-coral); outline: 3px solid var(--tinta); outline-offset: 0; box-shadow: 0 0 0 3px var(--tinta) inset, 5px 6px 0 3px var(--tinta); border-radius: 50%; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(17px, .7vw + 12px, 26px); line-height: 1.05; padding: 8px; color: var(--tinta); }
.k-senal--cuadrada strong { border-radius: 16px; border-color: var(--c-azul); }
.k-senal--rombo strong { border-color: var(--c-amarillo); border-radius: 18px; rotate: 45deg; width: clamp(100px, 7.6vw, 144px); margin: 12px 0 8px; box-shadow: 0 0 0 3px var(--tinta) inset, 5px -5px 0 3px var(--tinta); }
.k-senal--rombo strong > span { rotate: -45deg; font-size: .78em; }
.k-senal span { font-size: .9em; }
.k-senal::after { content: ""; width: 10px; height: 26px; background: var(--tinta); border-radius: 0 0 4px 4px; order: 1; margin-top: -8px; }
.k-senal strong { order: 0; } .k-senal span { order: 2; }
@media (max-width: 767px) { .k-senales { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }
/* Etiquetas de maleta */
.k-maletas { list-style: none; padding: 0; margin: 40px auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.k-maletas li { display: flex; rotate: var(--g); }
.k-maleta { position: relative; flex: 1; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; padding: 40px 10px 16px; background: var(--k-p); border: 3px solid var(--tinta); border-radius: 12px 12px 22px 22px; clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); color: var(--tinta); text-decoration: none; transition: rotate 160ms var(--ease-out); }
.k-maleta::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--tinta); clip-path: inherit; pointer-events: none; }
.k-maletas li { filter: drop-shadow(4px 5px 0 var(--tinta)); }
.k-maleta:hover { rotate: -3deg; }
.k-maleta__ojal { position: absolute; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--fondo); border: 3px solid var(--tinta); }
.k-maleta img { width: 100%; max-width: 120px; height: 90px; object-fit: contain; }
.k-maleta small { font-size: .8em; line-height: 1.3; color: var(--texto-2); }
@media (max-width: 1023px) { .k-maletas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .k-maletas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Restaurante: mantel, carta y platos */
.k-mantel { background: linear-gradient(90deg, rgba(1, 138, 220, .16) 50%, transparent 50%) 0 0 / 64px 64px, linear-gradient(rgba(1, 138, 220, .16) 50%, transparent 50%) 0 0 / 64px 64px, #fff; }
.k-carta { max-width: 820px; margin: 28px auto 0; background: #fff; border: 3px solid var(--tinta); border-radius: 8px; padding: clamp(24px, 3.4vw, 56px) clamp(20px, 3.4vw, 60px); box-shadow: 10px 12px 0 var(--tinta); outline: 2px solid var(--tinta); outline-offset: -14px; }
.k-carta__titulo { margin: 0 0 18px; text-align: center; font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 1vw + 14px, 34px); color: var(--c-coral); letter-spacing: .06em; }
.k-carta__titulo::before, .k-carta__titulo::after { content: "~"; margin: 0 12px; color: var(--tinta); }
.k-carta__platos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 28px); }
.k-carta__linea { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.k-carta__linea strong { font-size: 1.12em; }
.k-carta__puntos { flex: 1; min-width: 20px; border-bottom: 4px dotted var(--tinta); translate: 0 -5px; }
.k-carta__precio { font-weight: 800; color: var(--c-morado); text-align: right; max-width: 45%; }
.k-carta__desc { margin: 0; color: var(--texto-2); }
.k-carta__pie { margin: 22px 0 0; padding-top: 16px; border-top: 2px dashed var(--tinta); text-align: center; font-size: .92em; }
@media (max-width: 599px) { .k-carta__linea { flex-wrap: wrap; } .k-carta__puntos { display: none; } .k-carta__precio { max-width: none; width: 100%; text-align: left; } .k-carta { outline-offset: -9px; } }
.k-platos { list-style: none; padding: 0; margin: 34px auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.k-platos a { display: grid; justify-items: center; text-align: center; gap: 6px; color: var(--tinta); text-decoration: none; }
.k-plato { display: grid; place-items: center; width: 100%; max-width: 170px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 54%, var(--tinta) 54.5% 56%, #fff 56.5%); border: 3px solid var(--tinta); box-shadow: 5px 7px 0 rgba(30, 58, 95, .3); transition: rotate 200ms var(--ease-out); }
.k-plato img { width: 70%; height: auto; }
.k-platos a:hover .k-plato { rotate: 12deg; }
.k-platos small { font-size: .8em; color: var(--texto-2); line-height: 1.3; }
@media (max-width: 1023px) { .k-platos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .k-platos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Cumpleaños: banderines, globos, cuentas, invitación y etiquetas de regalo */
.k-banderines { position: absolute; top: 0; left: 0; width: 100%; height: clamp(54px, 5vw, 90px); z-index: 2; pointer-events: none; }
.k-hero--centrado .k-banderines + .contenedor { padding-top: clamp(44px, 4vw, 70px); }
.k-globos-sec { position: relative; z-index: 3; padding: clamp(10px, 2vw, 30px) 0 clamp(20px, 3vw, 50px); }
.k-globos { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 40px); justify-items: center; }
.k-globo { position: relative; display: grid; align-content: center; justify-items: center; text-align: center; width: clamp(140px, 11vw, 210px); aspect-ratio: .86; padding: 14px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .8) 0 8%, transparent 9%), var(--k-p); border: 3px solid var(--tinta); box-shadow: 5px 6px 0 var(--tinta); margin-bottom: 70px; animation: k-flota 3.6s ease-in-out infinite alternate; animation-delay: var(--d); }
.k-globo strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(18px, .8vw + 12px, 28px); line-height: 1.05; }
.k-globo span { font-size: .82em; line-height: 1.25; }
.k-globo__cuerda { position: absolute; top: 100%; left: 50%; width: 20px; height: 70px; margin-left: -10px; color: var(--tinta); }
@media (max-width: 767px) { .k-globos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k-cuentas { display: grid; gap: 14px; background: #fff; border: 3px solid var(--tinta); border-radius: 24px; padding: clamp(16px, 2vw, 30px); box-shadow: 8px 10px 0 var(--tinta); }
.k-cuentas__fila { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 4.8em; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 2px dashed rgba(30, 58, 95, .3); }
.k-cuentas__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.k-cuentas b { font-family: var(--display); font-weight: 400; font-size: 1.5em; color: var(--c-morado); }
.k-cuentas__bolsas { display: flex; flex-wrap: wrap; gap: 5px; }
.k-cuentas__bolsas i { width: 18px; height: 22px; border-radius: 4px 4px 7px 7px; background: var(--c-coral); border: 2px solid var(--tinta); }
.k-cuentas__bolsas i:nth-child(6n) { margin-right: 10px; }
.k-cuentas__bolsas i.k-sobra { background: #fff; border-style: dashed; }
.k-cuentas__packs { text-align: right; }
@media (max-width: 599px) { .k-cuentas__fila { grid-template-columns: 4.2em minmax(0, 1fr) 3.9em; gap: 8px; } .k-cuentas__bolsas { gap: 3px; } .k-cuentas__bolsas i { width: 11px; height: 14px; border-width: 1.5px; } .k-cuentas__bolsas i:nth-child(6n) { margin-right: 6px; } }
.k-invitacion { max-width: 1100px; margin: 30px auto 0; padding: clamp(40px, 4vw, 64px) clamp(20px, 3.4vw, 60px); background: radial-gradient(circle at 12px 12px, var(--c-coral) 0 5px, transparent 5.5px) 0 0 / 34px 34px, var(--pastel-morado); border: 3px solid var(--tinta); border-radius: 30px; box-shadow: 10px 12px 0 var(--tinta); position: relative; }
.k-invitacion::before { content: ""; position: absolute; inset: 18px; background: #fff; border: 3px solid var(--tinta); border-radius: 20px; -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 64px 32px repeat-x, linear-gradient(#000 0 0) 0 31px / 100% calc(100% - 31px) no-repeat; mask: url("data:image/svg+xml;utf8,") 0 0 / 64px 32px repeat-x, linear-gradient(#000 0 0) 0 31px / 100% calc(100% - 31px) no-repeat; }
.k-invitacion ul { position: relative; list-style: none; margin: 0; padding: clamp(10px, 2vw, 24px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.k-invitacion li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.k-invitacion li > :not(.k-invitacion__icono) { grid-column: 2; }
.k-invitacion__icono { grid-row: 1 / span 2; width: 56px; height: 56px; padding: 10px; border-radius: 50%; background: var(--pastel-amarillo, #FBE7A6); border: 3px solid var(--tinta); color: var(--tinta); }
.k-invitacion__icono .k-picto { width: 100%; height: 100%; }
.k-invitacion strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; color: var(--c-morado); font-size: clamp(20px, .8vw + 14px, 30px); }
.k-invitacion p { margin: 4px 0 0; }
@media (max-width: 767px) { .k-invitacion ul { grid-template-columns: minmax(0, 1fr); } .k-invitacion { padding: 44px 26px 34px; } .k-invitacion::before { inset: 12px; } }
.k-regalos { list-style: none; padding: 0; margin: 50px auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.k-regalos li { display: flex; rotate: var(--g); filter: drop-shadow(4px 5px 0 var(--tinta)); }
.k-regalo { position: relative; flex: 1; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; padding: 16px 10px 16px 28px; background: linear-gradient(90deg, transparent 8px, var(--c-coral) 8px 18px, transparent 18px), var(--k-p); border: 3px solid var(--tinta); border-radius: 8px 22px 22px 8px; color: var(--tinta); text-decoration: none; }
.k-regalo__para { justify-self: start; font-weight: 800; font-size: .85em; border-bottom: 2px dotted var(--tinta); padding: 0 18px 0 2px; }
.k-regalo img { width: 100%; max-width: 116px; height: 86px; object-fit: contain; }
.k-regalo small { font-size: .8em; line-height: 1.3; color: var(--texto-2); }
@media (max-width: 1023px) { .k-regalos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .k-regalos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Cómo se imprime: capas apiladas y lupas */
.k-capas { list-style: none; margin: 30px auto 0; padding: 0; max-width: 1040px; display: flex; flex-direction: column-reverse; align-items: center; gap: 0; }
.k-capas li { width: calc(100% - var(--k-i) * 8%); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; background: var(--k-c); border: 3px solid var(--tinta); border-radius: 999px; padding: 14px clamp(22px, 3vw, 44px) 14px 14px; margin-top: -3px; box-shadow: 6px 6px 0 var(--tinta); position: relative; z-index: calc(4 - var(--k-i)); animation: k-capa 600ms var(--ease-out) both; animation-delay: calc(var(--k-i) * 140ms); }
.k-capas li:first-child { margin-top: 0; }
.k-capas strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, .8vw + 14px, 30px); color: var(--tinta); }
.k-capas p { margin: 2px 0 0; }
.k-capas__n { width: clamp(48px, 3.6vw, 64px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 3px solid var(--tinta); font-family: var(--display); font-size: clamp(22px, 1.4vw, 32px); }
@keyframes k-capa { from { opacity: 0; translate: 0 -24px; } }
@media (max-width: 767px) { .k-capas li { width: calc(100% - var(--k-i) * 4%); border-radius: 30px; padding: 14px 16px 14px 12px; } }
.k-lupas { list-style: none; padding: 0; margin: 34px auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.k-lupas a { display: grid; justify-items: center; text-align: center; gap: 4px; color: var(--tinta); text-decoration: none; }
.k-lupa { position: relative; display: grid; place-items: center; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9) 0 9%, transparent 10%), var(--k-p); border: 7px solid var(--tinta); box-shadow: inset 0 0 0 5px #fff; margin-bottom: 30px; overflow: visible; }
.k-lupa::after { content: ""; position: absolute; width: 16px; height: 46px; background: var(--c-coral); border: 3px solid var(--tinta); border-radius: 8px; right: 2%; bottom: -34px; rotate: -40deg; }
.k-lupa img { width: 88%; height: auto; transition: scale 200ms var(--ease-out); }
.k-lupas a:hover .k-lupa img { scale: 1.12; }
.k-lupas small { font-size: .8em; color: var(--texto-2); line-height: 1.3; }
@media (max-width: 1023px) { .k-lupas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .k-lupas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* PLA: etiqueta del material, libreta y termómetro */
.k-material { background: #fff; border: 3px solid var(--tinta); border-radius: 6px; padding: 16px 20px 18px; box-shadow: 8px 10px 0 var(--tinta); max-width: 440px; margin: 0 auto; rotate: 1.5deg; }
.k-material__nombre { margin: 0; font-family: var(--display); font-size: clamp(56px, 4vw, 96px); line-height: .95; color: var(--c-morado); }
.k-material__sub { margin: 0 0 8px; font-weight: 800; padding-bottom: 8px; border-bottom: 10px solid var(--tinta); }
.k-material dl { margin: 0; }
.k-material dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 2px solid var(--tinta); }
.k-material dl > div:last-child { border-bottom: 6px solid var(--tinta); }
.k-material dt { font-weight: 800; }
.k-material dd { margin: 0; text-align: right; color: var(--texto-2); }
.k-material__pie { margin: 10px 0 0; font-size: .85em; }
.k-libreta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); max-width: 1060px; margin: 28px auto 0; border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 10px 12px 0 var(--tinta); background: #fff; }
.k-libreta__pag { padding: clamp(20px, 2.6vw, 40px); background: repeating-linear-gradient(transparent 0 36px, rgba(1, 138, 220, .2) 36px 38px) 0 60px; }
.k-libreta__pag--si { border-radius: 13px 0 0 13px; } .k-libreta__pag--no { border-radius: 0 13px 13px 0; background-color: #FFFBF4; }
.k-libreta__anillas { background: radial-gradient(circle at 50% 50%, var(--fondo) 0 6px, var(--tinta) 6.5px 9px, transparent 9.5px) 0 12px / 34px 36px repeat-y, linear-gradient(90deg, transparent 15px, rgba(30, 58, 95, .2) 15px 19px, transparent 19px); }
.k-libreta__t { margin: 0 0 12px; font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 1vw + 14px, 32px); }
.k-libreta__pag--si .k-libreta__t { color: var(--t-verde); } .k-libreta__pag--no .k-libreta__t { color: var(--c-rosa); }
.k-libreta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.k-libreta li { position: relative; padding-left: 40px; }
.k-libreta li::before { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; border: 2px solid var(--tinta); }
.k-libreta__pag--si li::before { content: "✓"; background: var(--t-verde); }
.k-libreta__pag--no li::before { content: "✕"; background: var(--c-rosa); }
@media (max-width: 767px) { .k-libreta { grid-template-columns: minmax(0, 1fr); } .k-libreta__anillas { height: 30px; background: radial-gradient(circle at 50% 50%, var(--fondo) 0 6px, var(--tinta) 6.5px 9px, transparent 9.5px) 12px 0 / 36px 30px repeat-x; } .k-libreta__pag--si, .k-libreta__pag--no { border-radius: 0; } }
.k-termo { position: relative; margin: 0 auto; width: min(100%, 380px); display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; }
.k-termo svg { width: 110px; height: auto; }
.k-termo figcaption { display: grid; gap: 2px; background: #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 12px 16px; box-shadow: 5px 6px 0 var(--tinta); align-self: start; margin-top: 16px; position: relative; z-index: 2; }
.k-termo figcaption strong { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 2vw + 12px, 54px); color: var(--c-coral); line-height: 1; }
.k-termo__mini { position: absolute; right: 0; bottom: -6px; width: 38%; }
.k-termo__mini img { width: 100%; height: auto; rotate: 6deg; filter: drop-shadow(3px 5px 0 rgba(30, 58, 95, .2)); }
.k-termo__nivel { transform-box: fill-box; transform-origin: 50% 100%; animation: k-sube 2.4s var(--ease-out) both; }
@keyframes k-sube { from { transform: scaleY(.3); } }
/* Legales */
.k-carpeta { position: sticky; top: 120px; }
.k-indice-t { margin: 0 0 10px; font-family: var(--display); text-transform: uppercase; color: var(--c-morado); font-size: 20px; }
.k-carpeta ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.k-carpeta li { margin-top: -6px; }
.k-carpeta a { display: block; padding: 10px 16px 14px; background: var(--k-p); border: 2px solid var(--tinta); border-radius: 0 16px 16px 0; color: var(--tinta); font-weight: 700; font-size: .85em; text-decoration: none; line-height: 1.25; transition: translate 140ms var(--ease-out); box-shadow: 3px 3px 0 var(--tinta); }
.k-carpeta a:hover, .k-carpeta a:focus-visible { translate: 10px 0; }
.k-chapas ul { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.k-chapas a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 18px; background: #fff; border: 2px solid var(--tinta); border-radius: 999px; box-shadow: 3px 4px 0 var(--tinta); color: var(--tinta); font-weight: 700; text-decoration: none; }
.k-chapas li:nth-child(odd) a { background: var(--pastel-morado); }
.k-corto { font-weight: 700; margin: 0 0 16px; }
.k-corto__eti { font-size: .72em; font-weight: 800; letter-spacing: .02em; }
.k-corto--nota { position: relative; background: var(--pastel-amarillo, #FBE7A6); padding: 18px 18px 14px; rotate: -1deg; box-shadow: 4px 6px 0 rgba(30, 58, 95, .25); border-radius: 2px; max-width: 560px; }
.k-corto--nota::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(1, 182, 180, .35); rotate: 3deg; }
.k-corto--nota .k-corto__eti { display: block; color: var(--texto-2); }
.k-corto--subrayado { font-size: 1.05em; }
.k-corto--subrayado .k-corto__eti { display: block; color: var(--c-coral); font-family: var(--display); font-weight: 400; font-size: .9em; }
.k-corto--subrayado { background: linear-gradient(transparent 55%, rgba(242, 91, 79, .22) 55%); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; }
.k-corto--subrayado + * { margin-top: 16px; }
.k-corto--etiqueta { position: relative; display: flex; gap: 12px; align-items: baseline; background: var(--pastel-verde); border: 2px solid var(--tinta); border-radius: 8px 30px 30px 8px; padding: 10px 26px 10px 44px; box-shadow: 3px 4px 0 var(--tinta); width: fit-content; max-width: 100%; }
.k-corto--etiqueta::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--tinta); }
.k-corto--bocadillo { position: relative; background: #fff; border: 2px solid var(--tinta); border-radius: 22px; padding: 12px 18px; box-shadow: 3px 4px 0 var(--tinta); margin-bottom: 26px; }
.k-corto--bocadillo::after { content: ""; position: absolute; left: 36px; bottom: -12px; width: 20px; height: 20px; background: #fff; border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); rotate: 45deg; }
.k-corto--bocadillo .k-corto__eti, .k-corto--etiqueta .k-corto__eti { color: var(--c-morado); }
.k-ficha { margin: 6px 0 16px; background: linear-gradient(rgba(135, 85, 203, .1) 1.5px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(135, 85, 203, .1) 1.5px, transparent 1.5px) 0 0 / 18px 18px, #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 8px 20px; box-shadow: 6px 8px 0 var(--tinta); }
.k-ficha > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 2px dashed rgba(30, 58, 95, .3); }
.k-ficha > div:last-child { border-bottom: 0; }
.k-ficha dt { font-weight: 800; color: var(--c-morado); }
.k-ficha dd { margin: 0; }
@media (max-width: 479px) { .k-ficha > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.k-pasos { list-style: none; margin: 8px 0 16px; padding: 0 !important; display: grid; gap: 0 !important; }
.k-pasos li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.k-pasos li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 4px dotted var(--tinta); }
.k-pasos__n { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--c-azul); color: #fff; font-family: var(--display); font-size: 22px; border: 3px solid var(--tinta); }
.k-pasos li:nth-child(2) .k-pasos__n { background: var(--c-morado); } .k-pasos li:nth-child(3) .k-pasos__n { background: var(--t-verde); } .k-pasos li:nth-child(4) .k-pasos__n { background: var(--c-coral); }
.k-pasos li > div { padding-top: 9px; }
.k-ruta { list-style: none; margin: 8px 0 16px; padding: 0 !important; display: grid; gap: 12px !important; }
.k-ruta li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; background: #fff; border: 2px solid var(--tinta); border-radius: 18px; padding: 10px 14px 10px 10px; }
.k-ruta__icono { width: 52px; height: 52px; padding: 11px; border-radius: 14px; background: var(--pastel-verde); border: 2px solid var(--tinta); color: var(--tinta); }
.k-ruta__icono .k-picto { width: 100%; height: 100%; }
.k-recortable { position: relative; margin-top: 18px; border-style: dashed !important; border-width: 3px !important; }
.k-recortable::before { content: "✂"; position: absolute; top: -17px; left: 22px; font-size: 24px; line-height: 1; background: var(--fondo); padding: 0 6px; color: var(--tinta); }
.k-sello-fecha { display: inline-grid; justify-items: center; margin-top: 14px; padding: 8px 18px; border: 3px solid var(--k-tinta, var(--c-morado)); border-radius: 12px; color: var(--tinta); background: rgba(255, 255, 255, .8); rotate: -3deg; font-weight: 800; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--k-tinta, var(--c-morado)); }
.k-sello-fecha span { font-weight: 700; font-size: .8em; color: var(--texto-2); }
/* La ola del pie (.pie: margin-top -48px) se monta 48 px sobre la última sección: su padding lo cuenta
(contenido + sombra ≥ 24 px por encima de la cresta de la ola en cualquier ancho; lo mide la comprobación) */
/* nada se sale de lado (la cinta inclinada mide 106vw): recortado aquí, no solo en body (iOS lo ignora) */
main.pag { overflow-x: clip; }
main.pag > section:last-child { padding-bottom: calc(clamp(40px, 5vw, 96px) + 48px + 34px); }
/* Movimiento: todo quieto con reduced-motion */
@media (prefers-reduced-motion: reduce) {
.k-pegatina, .k-loma img, .k-habla__mini img, .k-globo, .k-capas li, .k-termo__nivel, .k-chat__r { animation: none !important; }
.k-obj, .k-cromo a, .k-maleta, .k-plato, .k-lupa img, .k-carpeta a, .k-revista__portada { transition: none !important; }
}
/* ===== Kit (v1) · guías v2 ===== */
.k-dib { margin: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 28px; padding: clamp(14px, 2vw, 28px); box-shadow: 8px 10px 0 var(--tinta); color: var(--tinta); }
.k-dib svg { display: block; width: 100%; height: auto; overflow: visible; }
.k-dib svg text { font-family: var(--texto); font-weight: 700; fill: var(--tinta); }
.k-dib figcaption { font-size: .85em; color: var(--texto-2); text-align: center; margin-top: 10px; }
.k-dib--plano { background: linear-gradient(rgba(1, 138, 220, .14) 1.5px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(1, 138, 220, .14) 1.5px, transparent 1.5px) 0 0 / 22px 22px, #fff; }
.k-dib--mantel { background: linear-gradient(90deg, rgba(242, 91, 79, .14) 50%, transparent 50%) 0 0 / 40px 40px, linear-gradient(rgba(242, 91, 79, .14) 50%, transparent 50%) 0 0 / 40px 40px, #fff; }
.k-dib--sin { background: transparent; border: 0; box-shadow: none; padding: 0; }
/* en el móvil, el dibujo aprovecha el ancho (las etiquetas van a 20 en el viewBox: ≈ 12 px a 390) */
@media (max-width: 599px) { .k-dib { padding: 8px; border-radius: 20px; } }
/* lista para tachar */
.k-lista { background: #fff; border: 3px solid var(--tinta); border-radius: 22px; padding: clamp(16px, 2vw, 28px); box-shadow: 6px 8px 0 var(--tinta); background: repeating-linear-gradient(transparent 0 46px, rgba(1, 138, 220, .16) 46px 48px) 0 58px, #fff; }
.k-lista__t { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 1vw + 14px, 32px); color: var(--c-coral); }
.k-lista ul { list-style: none; margin: 0; padding: 0; }
.k-lista label { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; cursor: pointer; }
.k-lista input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-lista__caja { width: 30px; height: 30px; border: 3px solid var(--tinta); border-radius: 8px; background: #fff; position: relative; transition: background 150ms; }
.k-lista__caja::after { content: ""; position: absolute; left: 7px; top: 1px; width: 9px; height: 17px; border: solid #fff; border-width: 0 4px 4px 0; rotate: 45deg; scale: 0; transition: scale 180ms var(--rebote); }
.k-lista input:checked + .k-lista__caja { background: var(--t-verde); }
.k-lista input:checked + .k-lista__caja::after { scale: 1; }
.k-lista input:checked ~ .k-lista__txt { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--c-coral); }
.k-lista input:focus-visible + .k-lista__caja { outline: 3px solid var(--c-amarillo); outline-offset: 3px; }
/* tarjeta de juego */
.k-juegos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); max-width: 1100px; margin: 28px auto 0; }
.k-juego { position: relative; background: #fff; border: 3px solid var(--tinta); border-radius: 18px; box-shadow: 6px 8px 0 var(--tinta); overflow: hidden; }
.k-juego__t { margin: 0; padding: 14px 20px; background: var(--k-p); border-bottom: 3px solid var(--tinta); font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, .8vw + 14px, 28px); line-height: 1.1; }
.k-juego__nec { margin: 14px 20px 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.k-juego__nec span { font-size: .8em; font-weight: 800; background: var(--pastel-amarillo); border: 2px solid var(--tinta); border-radius: 999px; padding: 0 10px; }
.k-juego__reglas { margin: 6px 20px 18px; padding: 0; list-style: none; counter-reset: regla; display: grid; gap: 8px; }
.k-juego__reglas li { counter-increment: regla; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.k-juego__reglas li::before { content: counter(regla); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-weight: 800; font-size: .85em; margin-top: 1px; }
@media (max-width: 767px) { .k-juegos { grid-template-columns: minmax(0, 1fr); } }
/* comparativa */
.k-compara { max-width: 1000px; margin: 26px auto 0; }
.k-compara table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 22px; box-shadow: 8px 10px 0 var(--tinta); overflow: hidden; }
.k-compara thead th { background: var(--k-p); padding: 14px 16px; text-align: left; font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, .8vw + 14px, 28px); border-bottom: 3px solid var(--tinta); }
.k-compara thead th .k-picto { width: 40px; height: 40px; vertical-align: middle; margin-right: 10px; padding: 6px; background: #fff; border: 2px solid var(--tinta); border-radius: 50%; }
.k-compara thead td { border-bottom: 3px solid var(--tinta); background: var(--fondo); }
.k-compara th[scope="row"] { text-align: left; font-weight: 800; padding: 14px 16px; width: 22%; background: var(--fondo); vertical-align: top; }
.k-compara td { padding: 14px 16px; vertical-align: top; }
.k-compara tbody tr + tr > * { border-top: 2px dashed rgba(30, 58, 95, .3); }
.k-compara td + td, .k-compara th + td, .k-compara thead th + th { border-left: 3px solid var(--tinta); }
@media (max-width: 599px) {
.k-compara th[scope="row"] { width: auto; }
.k-compara table, .k-compara tbody, .k-compara tr, .k-compara th, .k-compara td { display: block; width: auto; }
.k-compara thead { display: none; }
.k-compara tbody tr + tr > * { border-top: 0; } .k-compara tbody tr + tr { border-top: 3px solid var(--tinta); }
.k-compara th[scope="row"] { border-bottom: 2px dashed rgba(30, 58, 95, .3); }
.k-compara td { border-left: 0 !important; }
.k-compara td::before { content: attr(data-col); display: block; font-weight: 800; font-size: .8em; color: var(--texto-2); }
}
/* línea de tiempo */
.k-tiempo { list-style: none; margin: 30px auto 0; padding: 0; max-width: 1150px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; position: relative; }
.k-tiempo::before { content: ""; position: absolute; left: 4%; right: 4%; top: 21px; border-top: 4px dotted var(--tinta); }
.k-tiempo li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.k-tiempo__punto { width: 44px; height: 44px; border-radius: 50%; background: var(--k-c); border: 3px solid var(--tinta); box-shadow: 3px 4px 0 var(--tinta); margin-bottom: 6px; }
.k-tiempo strong { font-size: 1.05em; }
.k-tiempo li > span:last-child { color: var(--texto-2); font-size: .9em; }
@media (max-width: 767px) {
.k-tiempo { grid-auto-flow: row; gap: 18px; padding-left: 8px; }
.k-tiempo::before { left: 29px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 4px dotted var(--tinta); }
.k-tiempo li { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; }
.k-tiempo__punto { grid-row: 1 / span 2; margin: 0; }
}
/* truco */
.k-truco { position: relative; max-width: 760px; margin: 34px auto 0; background: var(--pastel-amarillo); border: 3px solid var(--tinta); border-radius: 6px 26px 26px 26px; padding: 22px 24px 18px; box-shadow: 6px 8px 0 var(--tinta); rotate: -.6deg; }
.k-truco__t { position: absolute; top: -18px; left: 18px; margin: 0; background: var(--c-coral); color: #fff; font-family: var(--display); text-transform: uppercase; font-size: 22px; line-height: 1; padding: 6px 14px 4px; border: 3px solid var(--tinta); border-radius: 12px; rotate: -3deg; }
.k-truco p:not(.k-truco__t) { margin: 6px 0 0; }
/* sí / no */
.k-sino { list-style: none; margin: 24px auto 0; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.k-sino li { display: grid; justify-items: center; text-align: center; gap: 6px; background: #fff; border: 3px solid var(--tinta); border-radius: 24px; padding: 18px; box-shadow: 6px 8px 0 var(--tinta); position: relative; }
.k-sino li::after { position: absolute; top: -16px; right: -12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; border: 3px solid var(--tinta); }
.k-sino__si { background: var(--pastel-verde) !important; } .k-sino__si::after { content: "✓"; background: var(--t-verde); }
.k-sino__no { background: var(--pastel-rosa) !important; } .k-sino__no::after { content: "✕"; background: var(--c-rosa); }
.k-sino__dib { width: min(180px, 70%); } .k-sino__dib svg { width: 100%; height: auto; display: block; }
.k-sino strong { font-size: 1.1em; }
@media (max-width: 479px) { .k-sino { gap: 14px; } .k-sino li { padding: 12px 10px; } .k-sino__dib { width: 70%; } .k-sino strong { font-size: 1em; } .k-sino li > span:last-child { font-size: .85em; } }
/* flujo */
.k-flujo { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 34px); counter-reset: flujo; }
.k-flujo li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; }
.k-flujo li + li::before { content: ""; position: absolute; top: clamp(34px, 3.4vw, 56px); right: calc(50% + clamp(40px, 4vw, 66px)); width: calc(100% - clamp(80px, 8vw, 132px) + clamp(10px, 2vw, 34px)); border-top: 4px dashed var(--tinta); }
.k-flujo__icono { width: clamp(72px, 7vw, 116px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 3px solid var(--tinta); box-shadow: 4px 5px 0 var(--tinta); margin-bottom: 8px; }
.k-flujo li:nth-child(odd) .k-flujo__icono { background: var(--pastel-verde); } .k-flujo li:nth-child(3n) .k-flujo__icono { background: var(--pastel-naranja); }
.k-flujo__icono svg { width: 64%; height: 64%; }
.k-flujo strong { line-height: 1.2; }
.k-flujo li > span:last-child { font-size: .82em; color: var(--texto-2); }
@media (max-width: 899px) { .k-flujo { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .k-flujo li:nth-child(4)::before { display: none; } }
@media (max-width: 479px) { .k-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-flujo li::before { display: none; } }
/* más guías en corto */
.k-siguientes { list-style: none; margin: 26px auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.k-siguientes a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 18px 10px 10px; background: #fff; border: 3px solid var(--tinta); border-radius: 999px; box-shadow: 4px 5px 0 var(--tinta); color: var(--tinta); text-decoration: none; transition: translate 150ms var(--ease-out); }
.k-siguientes a:hover { translate: 0 -3px; }
.k-siguientes__mini { width: 76px; height: 76px; border-radius: 50%; background: var(--k-p); border: 2px solid var(--tinta); display: grid; place-items: center; }
.k-siguientes__mini img { width: 84%; height: auto; }
.k-siguientes small { display: block; font-size: .78em; color: var(--texto-2); font-weight: 700; }
.k-siguientes strong { line-height: 1.2; }
/* datos junto a un dibujo */
.k-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.k-datos li { display: grid; gap: 0; background: var(--k-p); border: 2px solid var(--tinta); border-radius: 16px; padding: 10px 16px; box-shadow: 3px 4px 0 var(--tinta); }
.k-datos strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(18px, .6vw + 13px, 24px); }
.k-datos span { font-size: .9em; }
/* animaciones de los dibujos (se paran con reduced-motion) */
.k-dib .g-bota { animation: g-bota 3s ease-in-out infinite alternate; transform-box: fill-box; }
.k-dib .g-bota--2 { animation-delay: -1s; } .k-dib .g-bota--3 { animation-delay: -2s; }
@keyframes g-bota { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
.k-dib *, .k-lista__caja, .k-lista__caja::after, .k-siguientes a { animation: none !important; transition: none !important; }
}
/* ===== Kit (v1) · guías v3 ===== */
/* teatrillo */
.k-teatro { position: relative; aspect-ratio: 5 / 4; border: 3px solid var(--tinta); border-radius: 26px 26px 12px 12px; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 50% 34%, #FFF8E0 0 60%, transparent 61%), var(--pastel-amarillo); box-shadow: 10px 12px 0 var(--tinta); }
.k-teatro__bambalina { position: absolute; left: 0; right: 0; top: 0; height: 16%; z-index: 30; background: var(--c-coral); border-bottom: 3px solid var(--tinta); -webkit-mask: radial-gradient(circle 22px at 50% 100%, #0000 97%, #000) 0 0 / 44px 100% repeat-x; mask: radial-gradient(circle 22px at 50% 100%, #0000 97%, #000) 0 0 / 44px 100% repeat-x; }
.k-teatro__telon { position: absolute; top: 0; bottom: 14%; width: 20%; z-index: 25; background: repeating-linear-gradient(90deg, var(--c-coral) 0 14px, #D8463B 14px 22px); border: 3px solid var(--tinta); }
.k-teatro__telon--izq { left: -3px; border-radius: 0 0 60% 0; } .k-teatro__telon--der { right: -3px; border-radius: 0 0 0 60%; }
.k-teatro__suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 20; background: repeating-linear-gradient(90deg, #E9B98A 0 40px, #DDA877 40px 42px); border-top: 3px solid var(--tinta); }
.k-teatro__minis img { position: absolute; bottom: 11%; width: 36%; height: auto; translate: -50% 0; filter: drop-shadow(3px 5px 0 rgba(30, 58, 95, .22)); animation: k-asoma 2.8s ease-in-out infinite alternate; animation-delay: var(--d); }
/* ruleta */
.k-ruleta { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 420px); gap: clamp(20px, 4vw, 60px); align-items: center; justify-content: center; margin: 26px auto 0; }
.k-ruleta__rueda svg { width: 100%; height: auto; display: block; }
.k-ruleta__gira { transform-box: view-box; transform-origin: 100px 100px; }
.k-ruleta__sale { margin: 16px 0 0; font-size: 1.1em; min-height: 3.2em; }
.k-ruleta__sale a { color: var(--tinta); }
@media (max-width: 599px) { .k-ruleta { grid-template-columns: minmax(0, 240px); text-align: center; } }
/* naipes */
.k-naipes { list-style: none; margin: 30px auto 0; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); }
.k-naipe { position: relative; background: #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 16px 18px 34px; box-shadow: 6px 8px 0 var(--tinta); rotate: var(--g); scroll-margin-top: 130px; }
.k-naipe:target { outline: 4px solid var(--c-amarillo); outline-offset: 4px; }
.k-naipe__n { position: absolute; top: 10px; left: 12px; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--c-coral); }
.k-naipe__n--abajo { top: auto; left: auto; bottom: 8px; right: 12px; rotate: 180deg; }
.k-naipe__dib { display: block; margin: 8px 0 10px; background: var(--k-p); border: 2px solid var(--tinta); border-radius: 12px; padding: 8px; }
.k-naipe__dib svg { display: block; width: 100%; height: auto; }
.k-naipe h3 { margin: 0 0 4px; font-family: var(--display); text-transform: uppercase; font-weight: 400; color: var(--c-morado); font-size: clamp(19px, .6vw + 14px, 26px); line-height: 1.1; }
.k-naipe p { margin: 0; }
@media (max-width: 1023px) { .k-naipes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .k-naipes { grid-template-columns: minmax(0, 1fr); } .k-naipe { rotate: 0deg; } }
/* ficha de personaje */
.k-pj { margin: 0; background: linear-gradient(rgba(135, 85, 203, .1) 1.5px, transparent 1.5px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(135, 85, 203, .1) 1.5px, transparent 1.5px) 0 0 / 20px 20px, #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 16px 20px 20px; box-shadow: 8px 10px 0 var(--tinta); rotate: 1.2deg; }
.k-pj__t { margin: 0 0 10px; font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1vw + 12px, 30px); color: var(--c-coral); border-bottom: 3px solid var(--tinta); padding-bottom: 8px; }
.k-pj__cuerpo { display: grid; grid-template-columns: minmax(90px, 36%) minmax(0, 1fr); gap: 18px; align-items: center; }
.k-pj__foto { display: grid; place-items: center; aspect-ratio: 1; background: var(--pastel-amarillo); border: 3px solid var(--tinta); border-radius: 12px; }
.k-pj__foto img { width: 88%; height: auto; }
.k-pj dl { margin: 0; display: grid; gap: 10px; }
.k-pj dt { font-weight: 800; font-size: .85em; color: var(--texto-2); }
.k-pj dd { margin: 0; font-family: var(--display); font-size: clamp(20px, .8vw + 14px, 28px); color: var(--c-azul); border-bottom: 2px dashed var(--tinta); padding-bottom: 2px; rotate: -1deg; }
/* si pasa esto → prueba esto */
.k-sipasa { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1060px; display: grid; gap: 18px; }
.k-sipasa li { display: grid; grid-template-columns: minmax(0, .8fr) 60px minmax(0, 1.2fr); gap: 12px; align-items: center; }
.k-sipasa__si { margin: 0; font-weight: 800; font-size: 1.1em; background: var(--k-p); border: 3px solid var(--tinta); border-radius: 999px; padding: 12px 22px; box-shadow: 4px 5px 0 var(--tinta); text-align: center; }
.k-sipasa__prueba { margin: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 12px 18px; box-shadow: 4px 5px 0 var(--tinta); }
.k-sipasa__flecha { width: 60px; height: auto; }
@media (max-width: 699px) { .k-sipasa li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; } .k-sipasa__flecha { rotate: 90deg; width: 40px; } .k-sipasa__prueba { justify-self: stretch; } }
/* preguntas rápidas */
.k-rapidas { margin: 24px auto 0; max-width: 1060px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.k-rapidas > div { background: #fff; border: 3px solid var(--tinta); border-radius: 20px 20px 20px 6px; padding: 14px 18px; box-shadow: 4px 5px 0 var(--tinta); }
.k-rapidas dt { font-weight: 800; margin-bottom: 4px; color: var(--c-morado); }
.k-rapidas dd { margin: 0; }
@media (max-width: 699px) { .k-rapidas { grid-template-columns: minmax(0, 1fr); } }
/* taco de hojas */
.k-taco { list-style: none; margin: 30px auto 0; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.k-taco li { position: relative; background: var(--k-p); border: 3px solid var(--tinta); border-top-width: 10px; border-radius: 6px 6px 14px 14px; padding: 12px 14px 16px; box-shadow: 5px 6px 0 var(--tinta); rotate: var(--g); }
.k-taco li::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; border-top: 3px dotted var(--tinta); opacity: .5; }
.k-taco__cab { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-weight: 800; font-size: .8em; }
.k-taco__reloj { width: 34px; height: 34px; }
.k-taco p { margin: 0; font-weight: 700; line-height: 1.35; }
@media (max-width: 1100px) { .k-taco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .k-taco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399px) { .k-taco { grid-template-columns: minmax(0, 1fr); } }
/* nevera */
.k-nevera { max-width: 440px; margin: 0 auto; filter: drop-shadow(8px 10px 0 var(--tinta)); }
.k-nevera__puerta, .k-nevera__abajo { position: relative; background: #fff; border: 3px solid var(--tinta); }
.k-nevera__puerta { border-radius: 30px 30px 6px 6px; padding: 48px 30px 36px 46px; min-height: 280px; }
.k-nevera__abajo { border-radius: 6px 6px 22px 22px; height: 90px; margin-top: 6px; }
.k-nevera__asa { position: absolute; left: 14px; top: 40px; width: 10px; height: 90px; border-radius: 6px; background: var(--pastel-azul); border: 3px solid var(--tinta); }
.k-nevera__abajo .k-nevera__asa { top: 14px; height: 50px; }
.k-nevera__nota { position: relative; background: var(--pastel-amarillo); padding: 22px 20px 16px; rotate: -2deg; box-shadow: 3px 5px 0 rgba(30, 58, 95, .25); }
.k-nevera__nota p { margin: 0 0 10px; } .k-nevera__nota p:last-child { margin: 0; }
.k-nevera__iman { position: absolute; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--tinta); }
.k-nevera__iman--a { top: 32px; left: 50%; background: var(--c-coral); } .k-nevera__iman--b { top: 20px; right: 24px; background: var(--c-turquesa); border-radius: 8px; rotate: 12deg; }
/* banda con estrellas (la tarde, en casa) */
.k-banda--estrellas { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 2.5px, transparent 3px) 0 0 / 46px 46px, radial-gradient(circle, rgba(231, 187, 27, .55) 0 3px, transparent 3.5px) 23px 23px / 46px 46px, var(--k-banda); }
/* objetos de guía nuevos: cartel de teatro y hoja de taco */
.k-obj--cartel { background: linear-gradient(90deg, var(--c-coral) 0 14px, transparent 14px calc(100% - 14px), var(--c-coral) calc(100% - 14px)), var(--pastel-amarillo); border-radius: 22px 22px 8px 8px; padding-inline: 34px; }
.k-obj--taco { background: var(--pastel-morado); border-top-width: 12px; border-radius: 6px 6px 18px 18px; }
@media (prefers-reduced-motion: reduce) { .k-teatro__minis img { animation: none; } .k-ruleta__gira { transition: none !important; } }
/* ===== Guías (v1) · con el kit ===== */
.gui .k-objetos + .pag-centro, .gui .k-maletas + .pag-centro, .gui .k-platos + .pag-centro { max-width: 68ch; margin: 34px auto 0; }
/* cama de la impresora */
.g-cama { position: relative; display: grid; justify-items: center; padding-top: 10px; }
.g-cama__boquilla { width: clamp(70px, 6vw, 100px); color: var(--tinta); animation: g-boquilla 3s ease-in-out infinite alternate; }
@keyframes g-boquilla { from { translate: -40px 0; } to { translate: 40px 0; } }
.g-cama__minis { display: flex; align-items: flex-end; justify-content: center; gap: 4%; width: 100%; padding: 10px 6% 0; border-bottom: 14px solid var(--tinta); border-radius: 0 0 6px 6px; box-shadow: 0 6px 0 var(--c-amarillo); }
.g-cama__minis img { width: 30%; height: auto; filter: drop-shadow(3px 5px 0 rgba(30, 58, 95, .2)); }
.g-cama__minis img:nth-child(2) { width: 34%; }
/* la mesa del restaurante: un plato con cubiertos */
.g-mesa { position: relative; display: grid; place-items: center; padding: 10px 50px; }
.g-mesa__plato { max-width: 330px; }
.g-mesa__cubierto { position: absolute; top: 12%; bottom: 12%; width: 16px; border-radius: 10px; background: #fff; border: 3px solid var(--tinta); }
.g-mesa__cubierto--a { left: 8px; } .g-mesa__cubierto--b { right: 8px; border-radius: 10px 10px 10px 10px / 40px 40px 10px 10px; }
/* el trayecto de Viajar: sus paradas llevan su h2 a la izquierda */
.g-trayecto .k-parada__texto .pag-h2 { text-align: left; }
.k-hero--pla { --k-hero-pastel: var(--pastel-morado); }
.k-hero--viajar { --k-hero-pastel: var(--pastel-turquesa); }
.k-hero--viajar + .k-senales-sec { background: #fff; }
.k-banda + .hechos--cinta { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .g-cama__boquilla { animation: none; } }
/* ===== Guías (v2) ===== */
.g-centrado { text-align: left; }
.g-centrado > .pag-h2 { display: block; text-align: center; }
.k-juegos + .pag-centro, .k-siguientes + .pag-centro { max-width: 68ch; margin: 34px auto 0; }
.g-texto-dibujo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.g-texto-dibujo--al-reves > :first-child { order: 2; }
.g-dibujo-lista { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(22px, 3vw, 48px); align-items: center; max-width: 1200px; margin: 30px auto 0; }
.g-ancho { max-width: 980px; margin: 30px auto 0; }
.g-mapa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(22px, 3vw, 56px); align-items: center; max-width: 1200px; margin: 26px auto 0; }
.g-mapa .k-dib svg { filter: drop-shadow(8px 10px 0 var(--tinta)); }
.g-mapa__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: juego; }
.g-mapa__lista li { counter-increment: juego; position: relative; padding-left: 56px; }
.g-mapa__lista li::before { content: counter(juego); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--k-c); color: #fff; font-weight: 800; border: 3px solid var(--tinta); box-shadow: 3px 4px 0 var(--tinta); }
.g-mapa__lista strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(20px, .8vw + 14px, 28px); display: block; }
.g-mapa__nec { display: inline-block; font-size: .8em; font-weight: 800; background: var(--pastel-amarillo); border: 2px solid var(--tinta); border-radius: 999px; padding: 0 10px; margin: 2px 0 4px; }
.g-mapa__lista p { margin: 0; }
.g-sala { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; max-width: 1200px; margin: 26px auto 0; }
.g-sala .k-habla { margin: 0; }
.g-nota { max-width: 62ch; margin: 26px auto 0; }
.g-discreto { padding-top: 40px; }
.g-discreto .pag-centro { font-size: 1.05em; font-weight: 700; }
.k-hero--viajar + .pag-seccion { padding-top: 16px; }
.pag-seccion .k-truco p { text-align: left; }
.k-datos { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-dib .g-aguja { transform-box: view-box; transform-origin: 84px 72px; animation: g-aguja 12s linear infinite; }
@keyframes g-aguja { to { transform: rotate(360deg); } }
.k-dib .g-parpadea { animation: g-parpadea 2.4s steps(1) infinite; }
@keyframes g-parpadea { 50% { opacity: .35; } }
.k-dib .g-gira { transform-box: view-box; transform-origin: 320px 146px; animation: g-gira 3.2s ease-in-out infinite alternate; }
@keyframes g-gira { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.k-dib .g-gotea { transform-box: fill-box; transform-origin: 50% 0; animation: g-gotea 2.6s ease-in-out infinite alternate; }
@keyframes g-gotea { to { transform: scaleY(1.08); } }
/* la boquilla dibuja la capa nueva: va de un lado a otro y la línea crece detrás */
.g-esquema-vivo .g-boquilla { transform: translateX(-27px); }
.g-esquema-vivo .g-traza { stroke-dasharray: 64 200; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
.g-esquema-vivo .g-boquilla { animation: g-boquilla 4.2s linear infinite; }
.g-esquema-vivo .g-traza { animation: g-traza 4.2s linear infinite; }
}
@keyframes g-boquilla { 0% { transform: translateX(-89px); } 70%, 100% { transform: translateX(-27px); } }
@keyframes g-traza { 0% { stroke-dashoffset: 64; } 70%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 1023px) { .g-dibujo-lista, .g-mapa, .g-sala { grid-template-columns: minmax(0, 1fr); } .g-dibujo-lista .k-lista, .g-mapa__lista { max-width: 620px; width: 100%; justify-self: center; } }
@media (max-width: 767px) { .g-texto-dibujo { grid-template-columns: minmax(0, 1fr); } .g-texto-dibujo--al-reves > :first-child { order: 0; } .k-datos { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .k-dib .g-aguja, .k-dib .g-parpadea, .k-dib .g-gira, .k-dib .g-gotea { animation: none; } }
/* ===== Guías (v3) ===== */
.k-hero--ideas { --k-hero-pastel: var(--pastel-rosa); }
.k-hero--ideas .k-hero__media { max-width: 500px; }
.g-tarde svg { max-width: 520px; margin: 0 auto; }
.k-banda--estrellas + .pag-seccion { padding-top: calc(clamp(40px, 5vw, 96px) + 26px); }
@media (max-width: 767px) { .g-tarde { max-width: 320px; margin: 0 auto; } }