/* =====================================================================
   ARDO POR CECILIA · estilos.css
   Bosque seco tropical + arquitectura patrimonial de Santa Fe de Antioquia
   ===================================================================== */

:root {
  --cal: #F4EFE6;
  --tapia: #C9A46A;
  --teja: #A4502F;
  --bosque: #5E6B3A;
  --oro: #C8962E;
  --madera: #4A3423;

  --tinta: #2B1E14;
  --ocre: #8A6212;
  --papel: #FBF7EF;
  --arena: #E3C690;
  --morado: #3B2346;

  /* Marca Ojo de Buey */
  --ojo-naranja: #E9461D;
  --ojo-amarillo: #F2B71F;
  --ojo-negro: #07100F;
  --ojo-crema: #FEF0D8;

  --texto: var(--madera);
  --titulos: var(--madera);
  --fondo: var(--cal);

  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --display: 'Anton', 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif; /* solo títulos cortos y llamados de acción */
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radio: 14px;
  --sombra: 0 2px 0 rgba(74, 52, 35, .12), 0 12px 28px -12px rgba(74, 52, 35, .35);
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.2 0 0 0 0 0.13 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background-color: var(--fondo);
  background-image: var(--ruido), radial-gradient(120% 80% at 10% 0%, rgba(201, 164, 106, .18), transparent 60%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: block; color: var(--texto); }
main:focus { outline: none; }
img, svg, video, iframe { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); color: var(--titulos); line-height: 1.1; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 4vw, 1.75rem); }
p { margin: 0 0 1em; }
/* Títulos cortos con la tipografía de marca (display condensada en mayúsculas) */
.titulo-marca { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.titulo-marca--naranja { color: var(--ojo-naranja); }
a { color: var(--teja); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--madera); }
strong { font-weight: 800; }
ul, ol { padding-left: 1.2em; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px #F2C14E;
  border-radius: 6px;
}

.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ojo-amarillo); color: var(--ojo-negro); padding: .6rem 1rem; border-radius: 8px; font-weight: 800;
}
.saltar:focus { top: .6rem; }
.sin-js {
  background: var(--teja); color: #fff; padding: .8rem 1rem; text-align: center; margin: 0;
}
[hidden] { display: none !important; }

.contenedor { width: min(100% - 2.4rem, 1120px); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 2.4rem, 760px); margin-inline: auto; }
.seccion { padding: clamp(2.5rem, 7vw, 5rem) 0; position: relative; }
.seccion--tapia { background: linear-gradient(rgba(201, 164, 106, .32), rgba(201, 164, 106, .32)), var(--ruido); }
.seccion--papel { background-color: var(--papel); background-image: var(--ruido); border-block: 1px solid rgba(74, 52, 35, .12); }
.seccion--madera { background: var(--madera) var(--ruido); color: var(--cal); --titulos: var(--cal); --texto: var(--cal); }
.seccion--madera a:not(.boton) { color: #F2C14E; }

.antetitulo {
  font-family: var(--display); font-size: 1rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teja); margin-bottom: .6rem; display: inline-flex; align-items: center; gap: .6rem;
}
.antetitulo::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; }
.lead { font-size: clamp(1.1rem, 2.6vw, 1.3rem); max-width: 60ch; }
.cabecera-pagina { padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.cita {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 3.6vw, 1.8rem); line-height: 1.3;
  border-left: 4px solid var(--oro); padding-left: 1rem; margin: 0 0 1.2rem; color: var(--titulos);
}
.rejilla-2 { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 820px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.4rem; }
.centrado { text-align: center; }
.centrado .acciones { justify-content: center; }
.centrado .lead { margin-inline: auto; }

/* ---------- Botones ---------- */
/* Principales (.boton y .boton--teja): paleta y tipografía de marca Ojo de Buey */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.35rem;
  font: 400 1.08rem/1.1 var(--display); text-transform: uppercase; text-decoration: none; letter-spacing: .05em;
  color: var(--ojo-negro); background: var(--ojo-amarillo);
  border: 2px solid var(--ojo-negro); border-radius: 12px;
  box-shadow: 0 4px 0 var(--ojo-negro);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .2s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ojo-negro); color: var(--ojo-negro); background: #f6c443; }
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ojo-negro); }
.boton svg { width: 1.25em; height: 1.25em; flex: none; }
.boton--teja { background: var(--ojo-naranja); color: var(--ojo-negro); }
.boton--teja:hover { color: var(--ojo-negro); background: #f05a33; }
.boton--bosque { background: var(--bosque); color: #fff; }
.boton--bosque:hover { color: #fff; background: #525e31; }
.boton--claro {
  background: var(--cal); color: var(--madera); border-color: var(--madera); box-shadow: 0 3px 0 var(--madera);
  font: 800 1rem/1.1 var(--sans); text-transform: none; letter-spacing: .01em;
}
.boton--claro:hover { color: var(--madera); background: #fff; box-shadow: 0 5px 0 var(--madera); }
.boton--chico { min-height: 44px; padding: .55rem 1rem; font-size: .92rem; }
.boton--grande { font-size: 1.3rem; padding: 1rem 1.8rem; }
.boton--insta {
  background: var(--ojo-negro); color: var(--ojo-amarillo); border-color: var(--ojo-amarillo);
  box-shadow: 0 4px 0 var(--ojo-naranja);
}
.boton--insta:hover { color: var(--ojo-amarillo); background: #16211f; box-shadow: 0 6px 0 var(--ojo-naranja); }
.boton--deshabilitado {
  background: transparent; color: var(--madera); border-color: var(--madera); border-style: dashed; box-shadow: none; cursor: not-allowed; opacity: .85;
  font: 800 1rem/1.1 var(--sans); text-transform: none; letter-spacing: .01em;
}
.boton--deshabilitado:hover { transform: none; box-shadow: none; }

/* ---------- Sellos ---------- */
.sello {
  --c: var(--teja);
  display: inline-block; vertical-align: middle;
  font: 900 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c); background: var(--cal);
  border: 2px solid var(--c); border-radius: 4px; padding: .38rem .55rem .32rem;
  box-shadow: inset 0 0 0 2px var(--cal), inset 0 0 0 3px var(--c);
  transform: rotate(-3deg); white-space: nowrap;
}
.sello--documentado { --c: var(--bosque); }
.sello--leyenda { --c: var(--ocre); }
.sello--juego { --c: var(--teja); }
.sellos-leyenda { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 1.5rem 0 0; }
@media (min-width: 720px) { .sellos-leyenda { grid-template-columns: repeat(3, 1fr); } }
.sello-tarjeta {
  background: var(--papel); border: 1px solid rgba(74, 52, 35, .2); border-radius: var(--radio); padding: 1.2rem; box-shadow: var(--sombra);
}
.sello-tarjeta p { margin: .8rem 0 0; color: var(--madera); }

/* ---------- Menú ---------- */
.menu {
  position: sticky; top: 0; z-index: 50;
  background: var(--madera); color: var(--cal);
  border-bottom: 3px solid var(--ojo-amarillo);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5);
}
.menu :focus-visible { outline-color: var(--cal); }
.menu__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; flex-wrap: wrap; }
.menu__marca {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--cal);
  font-family: var(--serif); font-weight: 700; font-size: 1.45rem; padding: .3rem 0;
}
.menu__marca:hover { color: #F2C14E; }
.menu__logo { width: auto; height: 42px; flex: none; }
.menu__abrir {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .9rem;
  background: transparent; color: var(--cal); border: 2px solid rgba(244, 239, 230, .55); border-radius: 10px;
  font: 800 .95rem var(--sans); cursor: pointer;
}
.menu__abrir svg { width: 22px; height: 22px; }
.menu__nav { display: none; width: 100%; padding-bottom: 1rem; }
.menu--abierto .menu__nav { display: block; }
.menu__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.menu__lista > li > a {
  display: block; padding: .7rem .4rem; color: var(--cal); text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(244, 239, 230, .12);
}
.menu__lista a:hover { color: #F2C14E; }
.menu__lista a[aria-current="page"] { color: #F2C14E; }
.menu__grupo { display: flex; align-items: center; gap: .7rem; padding: .6rem .4rem; border-bottom: 1px solid rgba(244, 239, 230, .12); }
.menu__grupo-titulo { font-weight: 700; }
.menu__niveles { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.menu__nivel {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(244, 239, 230, .6); color: var(--cal); text-decoration: none; font-weight: 800;
}
.menu__nivel:hover { background: rgba(244, 239, 230, .12); color: var(--cal); }
.menu__nivel--hecho { background: var(--oro); color: var(--tinta); border-color: var(--oro); }
.menu__nivel--hecho:hover { background: #d8a53a; color: var(--tinta); }
.menu__nivel[aria-current="page"] { box-shadow: 0 0 0 3px var(--madera), 0 0 0 5px #F2C14E; }

@media (min-width: 1080px) {
  .menu__abrir { display: none; }
  .menu__nav { display: block; width: auto; padding: 0; }
  .menu__lista { display: flex; align-items: center; gap: .1rem; }
  .menu__lista > li > a { border: 0; padding: .5rem .6rem; border-radius: 8px; position: relative; }
  .menu__lista > li > a[aria-current="page"]::after {
    content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .15rem; height: 3px; background: var(--oro); border-radius: 2px;
  }
  .menu__grupo { border: 0; padding: 0 .5rem; gap: .45rem; }
  .menu__grupo-titulo { font-size: .85rem; opacity: .85; }
  .menu__nivel { width: 36px; height: 36px; font-size: .9rem; }
}
@media (max-width: 1079px) {
  .menu__nivel { width: 44px; height: 44px; }
}

/* ---------- Pie (marca Ojo de Buey) ---------- */
.pie { background: var(--ojo-negro) var(--ruido); color: var(--ojo-crema); padding: 2.5rem 0 2rem; margin-top: auto; border-top: 6px solid var(--ojo-naranja); }
.pie :focus-visible { outline-color: var(--ojo-crema); }
.pie a:not(.boton) { color: var(--ojo-amarillo); }
.pie__marca {
  display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.6rem; margin-bottom: 1.8rem;
  border-bottom: 2px solid rgba(242, 183, 31, .35);
}
.pie__logo { width: auto; height: 104px; flex: none; }
.pie__nombre { margin: 0; line-height: 1; }
.pie__nombre strong { display: block; font: 400 clamp(2rem, 6vw, 2.8rem)/1 var(--display); text-transform: uppercase; color: var(--ojo-amarillo); letter-spacing: .02em; }
.pie__nombre span { display: block; font: 400 1rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--ojo-naranja); margin-top: .3rem; }
.pie__rejilla { display: grid; gap: 2rem; }
@media (min-width: 860px) { .pie__rejilla { grid-template-columns: 1.3fr 1fr; } }
.pie__titulo { color: var(--ojo-amarillo); font: 400 1.6rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.pie__sellos ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.pie__sellos li { display: flex; align-items: center; gap: .9rem; }
.pie__sellos .sello { min-width: 7.6rem; text-align: center; }
.pie__creditos { font-size: .95rem; }
.pie__derechos { margin-top: 1.2rem; opacity: .85; font-size: .88rem; }

/* ---------- Fotos con marcador ---------- */
.foto { margin: 0; }
.foto__marco {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(201, 164, 106, .16) 0 10px, transparent 10px 20px),
    var(--ruido), var(--papel);
  border: 2px solid rgba(74, 52, 35, .25);
}
.foto__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.foto__marco--lista img { opacity: 1; }
.foto__marco--lista .foto__marcador { visibility: hidden; }
.foto__marcador {
  position: absolute; inset: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  border: 2px dashed rgba(74, 52, 35, .4); border-radius: 6px; text-align: center; padding: .6rem;
}
.foto__marcador svg { width: min(38%, 90px); height: auto; }
.foto__etiqueta {
  font: 700 .74rem/1.3 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: var(--madera);
  background: var(--cal); padding: .2rem .45rem; border-radius: 4px; word-break: break-all;
}
.foto__pie { font-size: .92rem; margin-top: .55rem; color: var(--madera); }
.foto--polaroid { background: #fff; padding: .7rem .7rem 1rem; box-shadow: var(--sombra); transform: rotate(-1.5deg); border-radius: 4px; }
.foto--polaroid .foto__marco { border-radius: 2px; }
.foto--polaroid .foto__pie { font-family: var(--serif); font-size: 1.15rem; font-style: italic; text-align: center; margin: .6rem 0 0; }
.foto--retrato .foto__marco { aspect-ratio: 3 / 4; }
.foto--ancha .foto__marco { aspect-ratio: 16 / 9; }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--madera); box-shadow: var(--sombra); }
.video video, .video iframe { width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.video__fachada { all: unset; cursor: pointer; position: absolute; inset: 0; display: grid; place-items: center; }
.video__fachada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__fachada svg { position: relative; width: 84px; height: 84px; transition: transform .2s; }
.video__fachada:hover svg { transform: scale(1.08); }
.video__fachada:focus-visible { outline: 4px solid #F2C14E; outline-offset: -6px; }
.video__marcador {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  padding: 1rem; text-align: center; color: var(--cal);
  background: repeating-linear-gradient(-45deg, rgba(200, 150, 46, .14) 0 14px, transparent 14px 28px), var(--madera);
}
.video__marcador svg { width: 64px; height: 64px; }
.video__etiqueta { font: 800 1.1rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; color: #F2C14E; }
.video__nombre { font-family: var(--serif); font-size: 1.3rem; }
.video__marcador small { max-width: 40ch; opacity: .9; font-size: .82rem; }

/* ---------- Galería y visor ---------- */
.galeria__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); }
.galeria__item { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: 10px; transition: transform .2s; }
.galeria__item:hover { transform: translateY(-3px) rotate(-.6deg); }
.galeria__item:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 7px #F2C14E; }
.foto__marco--video { background: var(--madera); }
.foto__marco--video .foto__marcador { border-color: rgba(244, 239, 230, .4); }
.foto__marco--video .foto__etiqueta { background: var(--madera); color: #F2C14E; }
.foto__marco--video > svg { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; }
.foto__marco--video > img { opacity: 1; }

.visor { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); width: 100%; }
.visor::backdrop { background: rgba(28, 19, 12, .88); }
.visor__caja { position: relative; background: var(--tinta); border-radius: var(--radio); padding: 3.2rem .8rem .8rem; }
.visor__media .foto__marco, .visor__media .video { max-height: 72vh; aspect-ratio: 16 / 10; margin: auto; }
.visor__media .foto__marco img { object-fit: contain; background: #000; }
.visor__barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.visor__pie { color: var(--cal); margin: 0; flex: 1; text-align: center; font-size: .95rem; min-width: 12rem; }
.visor__cerrar, .ventana__cerrar {
  position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid currentColor; background: transparent; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.visor__cerrar { color: var(--cal); }
.visor :focus-visible { outline-color: var(--cal); }

/* ---------- Ventana emergente ---------- */
.ventana { border: 0; padding: 0; background: transparent; width: min(92vw, 36rem); max-height: 90vh; }
.ventana::backdrop { background: rgba(43, 30, 20, .6); }
.ventana[open] { animation: aparecer .35s ease; }
.ventana__papel {
  position: relative; background: var(--papel) var(--ruido); color: var(--madera); border-radius: var(--radio);
  padding: 2rem 1.4rem 1.6rem; border: 2px solid var(--madera); box-shadow: 0 0 0 6px var(--cal), 0 24px 60px -18px rgba(0, 0, 0, .6);
}
.ventana__cerrar { color: var(--madera); }
.ventana__kicker { font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teja); margin: 0 0 .3rem; }
.ventana__titulo { padding-right: 2.5rem; font-size: clamp(1.7rem, 5vw, 2.2rem); }
.dato-parte { padding: .9rem 0; border-top: 1px dashed rgba(74, 52, 35, .3); }
.dato-parte .sello { margin-bottom: .6rem; }
.dato-parte p { margin: 0; }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Aviso de insignia ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 1rem; z-index: 80; width: min(92vw, 26rem);
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem;
  background: var(--ojo-negro); color: var(--ojo-crema); border: 2px solid var(--ojo-amarillo); border-radius: 16px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
  transform: translate(-50%, 160%); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.aviso--visible { transform: translate(-50%, 0); }
.aviso .insignia { width: 62px; height: 62px; flex: none; }
.aviso strong { display: block; color: var(--ojo-amarillo); font: 400 .95rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.aviso span { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.aviso small { display: block; font-size: .85rem; opacity: .9; margin-top: .2rem; }

/* ---------- Insignias ---------- */
.insignia { width: 48px; height: 48px; }
.insignia--pendiente { filter: grayscale(1); opacity: .38; }
.insignias__resumen { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; }
.insignias__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.insignias__item {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--papel);
  border: 2px dashed rgba(74, 52, 35, .3); border-radius: var(--radio);
}
.insignias__item--ganada { border-style: solid; border-color: var(--ojo-naranja); box-shadow: var(--sombra); }
.insignias__item .insignia { width: 58px; height: 58px; flex: none; }
.insignias__item strong { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; }
.insignias__item small { color: var(--madera); }

/* ---------- Barra de nivel ---------- */
.barra-nivel { background: rgba(201, 164, 106, .35); border-bottom: 1px solid rgba(74, 52, 35, .18); }
.barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: .7rem 0; }
.barra__progreso ol {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0; position: relative;
}
.barra__progreso ol::before, .barra__progreso ol::after {
  content: ""; position: absolute; top: 50%; left: 22px; height: 4px; transform: translateY(-50%); border-radius: 2px;
}
.barra__progreso ol::before { right: 22px; background: rgba(74, 52, 35, .25); }
.barra__progreso ol::after { width: calc((100% - 44px) * var(--avance, 0)); background: var(--oro); transition: width .6s; }
.barra__paso { position: relative; z-index: 1; margin-right: 1.4rem; }
.barra__paso:last-child { margin-right: 0; }
.barra__paso a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none;
  background: var(--cal); color: var(--madera); border: 2px solid var(--madera); font-weight: 800;
}
.barra__paso--hecho a { background: var(--oro); color: var(--tinta); border-color: var(--tinta); }
.barra__paso--actual a { background: var(--teja); color: #fff; box-shadow: 0 0 0 4px rgba(164, 80, 47, .3); }
.barra__insignias { display: flex; align-items: center; gap: .6rem; }
.barra__rotulo { font-weight: 800; font-size: .85rem; }
.barra__insignias ul { list-style: none; display: flex; gap: .3rem; margin: 0; padding: 0; }
.barra__insignias .insignia { width: 38px; height: 38px; }
@media (max-width: 560px) {
  .barra__volver { order: 3; width: 100%; }
  .barra__rotulo { display: none; }
}

/* ---------- Botones ocultos (datos curiosos) ---------- */
.oculto {
  position: absolute; z-index: 5; width: 48px; height: 48px; padding: 4px; border: 0; background: transparent;
  cursor: help; border-radius: 50%;
}
.oculto svg { width: 100%; height: 100%; }
.oculto::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 150, .85), rgba(255, 230, 150, 0) 70%);
  animation: destello 3.2s ease-in-out infinite; pointer-events: none;
}
.oculto:hover::after { animation-duration: 1s; }
.oculto--visto::after { animation: none; opacity: 0; }
@keyframes destello { 0%, 70%, 100% { opacity: 0; transform: scale(.6); } 82% { opacity: 1; transform: scale(1.15); } }
.pista-ocultos {
  display: flex; gap: .7rem; align-items: flex-start; background: var(--papel); border-left: 4px solid var(--oro);
  padding: .9rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; margin: 1.5rem 0 0;
}

/* ---------- Tarjetas genéricas ---------- */
.tarjeta {
  position: relative; background: var(--papel) var(--ruido); color: var(--madera); border-radius: var(--radio);
  padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid rgba(74, 52, 35, .18); box-shadow: var(--sombra);
}
.tarjeta--revelacion { border: 2px solid var(--oro); box-shadow: 0 0 0 6px rgba(200, 150, 46, .18), var(--sombra); }
.tarjeta--revelacion .sello { margin-bottom: .8rem; }
.tarjeta h2, .tarjeta h3 { color: var(--madera); }
.cuadricula { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* =====================================================================
   INICIO · fachada y portón
   ===================================================================== */
.portada {
  position: relative; overflow: hidden; text-align: center;
  background: #F6D79A;
  padding-top: clamp(1.8rem, 5vw, 3rem);
}
.portada__textos { position: relative; z-index: 3; }
.portada h1 { margin-bottom: .1em; color: var(--madera); text-shadow: 0 2px 0 rgba(255, 255, 255, .35); }
.portada__subtitulo { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 3.6vw, 1.75rem); margin: 0 auto 1.1rem; max-width: 30ch; color: var(--tinta); }
.portada__ayuda { font-size: .95rem; margin: .7rem 0 0; color: var(--tinta); font-weight: 700; min-height: 1.6em; }
.casa { position: relative; width: min(100%, 920px); margin: 1.2rem auto 0; aspect-ratio: 800 / 560; z-index: 2; }
.casa__escena { position: absolute; inset: 0; transform-origin: 50% 80%; transition: transform 1.6s cubic-bezier(.6, 0, .3, 1) .5s; }
.casa__escena > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.casa--abierta .casa__escena { transform: scale(3.2); }
.porton {
  position: absolute; left: 41.5%; top: 59.6%; width: 17%; height: 36.8%;
  perspective: 900px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.porton:focus-visible { border-radius: 4px; }
.porton__interior {
  position: absolute; inset: 0; overflow: hidden;
  background: #F7E2A8;
}
.porton__interior svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.porton__hoja {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px) 0 0 / 25% 100%,
    #5a3f2a;
  box-shadow: inset 0 0 0 3px #2B1E14, inset 0 0 0 9px #5a3f2a, inset 0 0 0 11px #2B1E14;
  transition: transform 1.4s cubic-bezier(.5, 0, .2, 1);
  backface-visibility: hidden;
}
.porton__hoja::after {
  content: ""; position: absolute; top: 52%; width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--oro); background: transparent;
}
.porton__hoja--izq { left: 0; transform-origin: left center; }
.porton__hoja--izq::after { right: 10px; }
.porton__hoja--der { right: 0; transform-origin: right center; }
.porton__hoja--der::after { left: 10px; }
.porton:hover .porton__hoja--izq { transform: rotateY(-12deg); }
.porton:hover .porton__hoja--der { transform: rotateY(12deg); }
.casa--abierta .porton__hoja--izq { transform: rotateY(-105deg); }
.casa--abierta .porton__hoja--der { transform: rotateY(105deg); }
.casa .oculto--teja { left: 22%; top: 13%; }
.casa .oculto--ventana { left: 78%; top: 66%; }

/* Hojas secas que caen */
.hojas { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.hoja {
  position: absolute; top: -40px; width: 26px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 10C10 0 30 0 38 10 30 20 10 20 2 10z' fill='%23C8962E'/%3E%3Cpath d='M2 10h36' stroke='%234A3423' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: caer 11s linear infinite;
  opacity: .9;
}
.hoja:nth-child(2) { left: 18%; animation-delay: -3s; animation-duration: 13s; filter: hue-rotate(-25deg) saturate(.8); }
.hoja:nth-child(3) { left: 36%; animation-delay: -7s; width: 20px; }
.hoja:nth-child(4) { left: 58%; animation-delay: -1s; animation-duration: 15s; filter: hue-rotate(-40deg); }
.hoja:nth-child(5) { left: 74%; animation-delay: -9s; width: 30px; }
.hoja:nth-child(6) { left: 90%; animation-delay: -5s; animation-duration: 12s; filter: saturate(.6) brightness(.9); }
.hoja:nth-child(1) { left: 6%; }
@keyframes caer {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(30px, 25vh) rotate(90deg); }
  50% { transform: translate(-20px, 50vh) rotate(200deg); }
  75% { transform: translate(25px, 75vh) rotate(290deg); }
  100% { transform: translate(-10px, 105vh) rotate(380deg); opacity: 0; }
}

/* Tarjetas de niveles */
.niveles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .niveles { grid-template-columns: repeat(2, 1fr); } }
.nivel-tarjeta {
  position: relative; display: flex; gap: 1rem; background: var(--papel) var(--ruido); border-radius: var(--radio);
  padding: 1.3rem; border: 1px solid rgba(74, 52, 35, .2); box-shadow: var(--sombra); overflow: hidden;
}
.nivel-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(90deg, var(--teja) 0 18px, #b9643f 18px 36px); }
.nivel-tarjeta__num {
  flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--madera); color: var(--cal); font: 700 1.8rem var(--serif);
}
.nivel-tarjeta--hecho .nivel-tarjeta__num { background: var(--oro); color: var(--tinta); }
.nivel-tarjeta__patrimonio { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bosque); margin: 0 0 .3rem; }
.nivel-tarjeta__titulo { margin-bottom: .4rem; }
.nivel-tarjeta__pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; font-weight: 700; }
.nivel-tarjeta__pie .insignia { width: 40px; height: 40px; }
.nivel-tarjeta__pie .boton { margin-left: auto; }

/* =====================================================================
   OJO DE BUEY · PROYECTO · OBJETIVOS
   ===================================================================== */
/* Secciones de marca Ojo de Buey */
.seccion--ojo { background: var(--ojo-negro) var(--ruido); color: var(--ojo-crema); --titulos: var(--ojo-amarillo); --texto: var(--ojo-crema); }
.seccion--ojo .antetitulo { color: var(--ojo-naranja); }
.seccion--ojo a:not(.boton) { color: var(--ojo-amarillo); }
.seccion--ojo :focus-visible { outline-color: var(--ojo-crema); }
.seccion--ojo-amarillo { background: var(--ojo-amarillo); color: var(--ojo-negro); --titulos: var(--ojo-negro); --texto: var(--ojo-negro); }
.ojo-portada { padding-bottom: clamp(2.5rem, 7vw, 4.5rem); border-bottom: 6px solid var(--ojo-naranja); }
.ojo-portada h1 { font-size: clamp(2.8rem, 8vw, 4.8rem); }
.ojo-portada__logo { width: auto; height: clamp(260px, 52vw, 440px); margin: auto; }
.ojo-insta__logo { width: auto; height: 120px; margin: 0 auto 1.2rem; }
[data-pagina="ojo-de-buey"] .que-hacemos li { border-top-color: var(--ojo-naranja); }
.collage { width: 100%; max-width: 560px; height: auto; margin: auto; }
.que-hacemos { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.que-hacemos li { background: var(--papel); border-radius: var(--radio); padding: 1.1rem; border-top: 5px solid var(--bosque); box-shadow: var(--sombra); }
.que-hacemos h3 { margin-bottom: .3rem; }
.que-hacemos p { margin: 0; }
.equipo { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.equipo__item:nth-child(2n) .foto--polaroid { transform: rotate(1.8deg); }
.equipo__item--persona { text-align: center; }
.equipo__nombre { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; margin: .7rem 0 0; }
.equipo__rol { margin: 0; color: var(--bosque); font-weight: 700; font-size: .95rem; }
.cifras { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(46%, 150px), 1fr)); }
.cifras li { background: var(--ojo-negro); color: var(--ojo-crema); border-radius: var(--radio); padding: 1rem; text-align: center; border-bottom: 5px solid var(--ojo-naranja); }
.cifras strong { display: block; font: 400 3rem/1 var(--display); color: var(--ojo-amarillo); margin-bottom: .3rem; }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; }
.pasos li { counter-increment: paso; display: flex; gap: .9rem; align-items: flex-start; }
.pasos li::before {
  content: counter(paso); flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--teja); color: #fff; font-weight: 800;
}

/* Cartas que se voltean */
.cartas { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.carta { perspective: 1200px; min-height: 22rem; }
.carta--general { grid-column: 1 / -1; }
@media (min-width: 900px) { .carta--general { grid-column: span 3; min-height: 18rem; } .cartas { grid-template-columns: repeat(3, 1fr); } }
.carta__interior { position: relative; width: 100%; height: 100%; min-height: inherit; transition: transform .8s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.carta--volteada .carta__interior { transform: rotateY(180deg); }
.carta__cara {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  text-align: center; padding: 1.5rem; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid var(--madera); box-shadow: inset 0 0 0 6px var(--papel), inset 0 0 0 8px var(--tapia), var(--sombra);
}
.carta__frente { background: var(--papel) var(--ruido); cursor: pointer; }
.carta__reverso { background: var(--bosque) var(--ruido); color: #fff; transform: rotateY(180deg); box-shadow: inset 0 0 0 6px var(--bosque), inset 0 0 0 8px var(--oro), var(--sombra); }
.carta__reverso p { font-size: 1.12rem; margin: 0; max-width: 46ch; }
.carta__reverso .carta__tipo { color: #F2C14E; }
.carta__reverso .boton--claro { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 3px 0 #fff; }
.carta__tipo { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--teja); }
.carta__titulo { margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.carta__icono svg { width: 110px; height: auto; }

/* =====================================================================
   CRÓNICAS · álbum de viaje
   ===================================================================== */
.album { background: #E7D6B6 var(--ruido); }
.cronicas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.cronica {
  position: relative; background: var(--papel) var(--ruido); border-radius: 6px; box-shadow: var(--sombra);
  transform: rotate(-.5deg);
}
.cronica:nth-child(2n) { transform: rotate(.6deg); }
.cronica::before, .cronica::after {
  content: ""; position: absolute; top: -10px; width: 86px; height: 24px; background: rgba(244, 239, 230, .75);
  border: 1px solid rgba(74, 52, 35, .12); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.cronica::before { left: 16px; transform: rotate(-6deg); }
.cronica::after { right: 16px; transform: rotate(5deg); }
.cronica__encabezado { margin: 0; font-size: inherit; }
.cronica__boton {
  all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: .2rem 1rem; align-items: center;
  padding: 1.3rem 1.3rem 1.1rem; cursor: pointer; border-radius: 6px;
}
.cronica__boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 7px #F2C14E; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cronica__portada {
  grid-column: 1; grid-row: 1 / 3; width: clamp(92px, 26vw, 170px); height: auto; aspect-ratio: 300 / 170;
  border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.cronica__fecha { grid-column: 2; font: 800 .8rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--teja); }
.cronica__titulo { grid-column: 2; font: 700 clamp(1.5rem, 4.6vw, 2rem)/1.1 var(--serif); color: var(--madera); }
.cronica__flecha {
  grid-column: 3; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--madera); color: var(--madera); transition: transform .3s;
}
.cronica__flecha svg { width: 22px; }
.cronica--abierta .cronica__flecha { transform: rotate(180deg); }
.cronica__cuerpo { padding: 0 1.3rem 1.4rem; display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .cronica__cuerpo { grid-template-columns: 300px 1fr; align-items: start; } }

/* =====================================================================
   NIVELES · escenas
   ===================================================================== */
.escena { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); }
.escena > svg.escena__fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mensaje-juego {
  min-height: 3em; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; font-weight: 700;
  background: var(--papel); border: 2px dashed rgba(74, 52, 35, .3); text-align: center;
}
.mensaje-juego:empty { visibility: hidden; }

/* ---------- Nivel 1: río y batea ---------- */
.escena--rio { aspect-ratio: 1 / 1; max-width: 640px; margin: 0 auto; background: #6f8d7f; }
@media (min-width: 700px) { .escena--rio { aspect-ratio: 4 / 3; max-width: none; } }
.batea {
  position: absolute; left: 50%; top: 52%; width: min(78%, 420px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, .18) 59%, transparent 61%, rgba(0, 0, 0, .15) 70%, transparent 72%, rgba(0, 0, 0, .12) 84%, transparent 86%),
    radial-gradient(circle at 40% 35%, #8a5f3c, #5a3d26 70%, #3b2717);
  box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .55), inset 0 0 0 4px #2B1E14;
}
.batea__arena {
  position: absolute; inset: 11%; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #F0DBA9, var(--arena) 45%, #C9A46A 80%, #a8834c);
  box-shadow: inset 0 6px 18px rgba(74, 52, 35, .45);
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); padding: 15%; gap: 2%;
}
.arena {
  position: relative; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; min-width: 0; min-height: 0;
}
.arena__monton {
  width: 92%; height: 70%; border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .45) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(74, 52, 35, .35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 30%, rgba(74, 52, 35, .3) 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 35%, #F3E1B4, #D9B678 70%);
  box-shadow: 0 3px 4px rgba(74, 52, 35, .35);
  transform: rotate(var(--giro, 0deg)); transition: transform .2s;
}
.arena:hover .arena__monton { transform: rotate(var(--giro, 0deg)) translateY(-3px) scale(1.06); }
.arena--lavada { cursor: default; }
.arena__agua {
  width: 70%; height: 55%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(94, 130, 130, .55), rgba(94, 130, 130, 0) 70%);
  animation: remolino .7s ease-out;
}
.arena svg { width: 86%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); animation: brillo-oro 1.1s ease-out; }
@keyframes remolino { from { transform: scale(.2) rotate(-180deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes brillo-oro { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
.batea__arena--completa { animation: girar-batea 1.2s ease-in-out; }
@keyframes girar-batea { 50% { transform: rotate(14deg); } }
.escena--rio .oculto--joya { right: 7%; bottom: 7%; width: 56px; height: 56px; }
.escena--rio .oculto--tamarindo { left: 6%; top: 8%; }
.contador {
  display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.2rem auto 0; flex-wrap: wrap;
  font-size: 1.15rem;
}
.contador__barra { width: 160px; height: 14px; border-radius: 99px; background: rgba(74, 52, 35, .18); overflow: hidden; border: 2px solid var(--madera); }
.contador__barra::before { content: ""; display: block; height: 100%; width: calc(var(--valor, 0) * 100%); background: linear-gradient(90deg, #E2B44A, var(--oro)); transition: width .4s; }
.contador svg { width: 34px; }

/* ---------- Nivel 2: casona con balcones ---------- */
.casona { position: relative; max-width: 980px; margin: 0 auto; filter: drop-shadow(0 18px 22px rgba(74, 52, 35, .3)); }
.casona__tejado {
  position: relative; height: clamp(46px, 9vw, 80px); margin: 0 -2%;
  background:
    radial-gradient(circle at 50% 0, #b9643f 0 44%, #7d3a20 45% 52%, transparent 53%) 0 0 / 28px 18px,
    #A4502F;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  border-bottom: 6px solid var(--tinta);
}
.casona__muro {
  background: var(--cal) var(--ruido);
  border-inline: 3px solid rgba(74, 52, 35, .25);
  padding: clamp(.6rem, 2vw, 1rem) clamp(.4rem, 2vw, 1.4rem) 0;
}
.balcones {
  list-style: none; margin: 0; padding: 0 0 .8rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.25rem, 1.2vw, .9rem);
  position: relative;
}
.balcones::after {
  content: ""; position: absolute; left: -1%; right: -1%; bottom: .45rem; height: 10px; background: var(--madera); border-radius: 2px;
}
.balcon {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--madera);
}
.balcon svg { width: 100%; height: auto; transition: transform .25s; }
.balcon:hover svg { transform: translateY(-4px); }
.balcon__nombre {
  font: 800 clamp(.68rem, 2.2vw, .95rem) var(--sans); background: var(--madera); color: var(--cal);
  padding: .15rem .45rem; border-radius: 4px; position: relative; z-index: 1; margin-top: -.4rem;
}
.balcon--visto .balcon__nombre { background: var(--oro); color: var(--tinta); }
.balcon--visto .balcon__silueta { opacity: 1; }
.balcon__silueta { opacity: .85; transition: opacity .3s; }
.casona__planta-baja {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding: 1rem 8% 0;
  background: linear-gradient(transparent 82%, var(--teja) 82%);
}
.casona__ventana { aspect-ratio: 3 / 4; width: min(100%, 110px); justify-self: center; margin-bottom: 18%; }
.casona__porton { width: clamp(128px, 28.8vw, 240px); }
.casona .oculto--teja { left: 70%; top: -2px; }
.casona .oculto--mapa { left: 6%; top: calc(clamp(46px, 9vw, 80px) + 4px); }
.hermanas-cuenta { text-align: center; font-weight: 800; margin: 1rem 0 0; }
.aranzazu { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 640px) { .aranzazu { grid-template-columns: 140px 1fr; } }
.aranzazu svg { width: 120px; margin: auto; }

.fichas-archivo { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ficha-archivo {
  position: relative; width: 100%; height: 100%; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .4rem;
  font: inherit; color: var(--madera); padding: 1.6rem 1.2rem 1.3rem;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(74, 52, 35, .12) 27px 28px) 0 3.2rem / 100% calc(100% - 3.2rem) no-repeat, #FFFBF2;
  border: 1px solid rgba(74, 52, 35, .3); border-top: 5px solid var(--teja); border-radius: 4px; box-shadow: var(--sombra);
  transition: transform .2s;
}
.ficha-archivo:hover { transform: translateY(-4px) rotate(-.8deg); }
.ficha-archivo__num { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teja); }
.ficha-archivo__nombre { font: 700 1.5rem/1.15 var(--serif); }
.ficha-archivo__marca {
  position: absolute; right: .8rem; top: .7rem; font: 900 .8rem var(--sans); letter-spacing: .14em; padding: .3rem .5rem; border: 2px solid; border-radius: 4px; transform: rotate(8deg);
  opacity: 0;
}
.ficha-archivo--acierto { border-top-color: var(--bosque); box-shadow: 0 0 0 4px rgba(94, 107, 58, .35), var(--sombra); }
.ficha-archivo--acierto .ficha-archivo__marca { opacity: 1; color: var(--bosque); }
.ficha-archivo--acierto .ficha-archivo__marca::before { content: "✓ ES ELLA"; }
.ficha-archivo--error { opacity: .7; }
.ficha-archivo--error .ficha-archivo__marca { opacity: 1; color: var(--teja); }
.ficha-archivo--error .ficha-archivo__marca::before { content: "✗ OTRA"; }
.ficha-archivo[aria-disabled="true"] { cursor: default; }
.ficha-archivo[aria-disabled="true"]:hover { transform: none; }
.retro { margin-top: 1.2rem; border-radius: var(--radio); padding: 1.1rem 1.2rem; background: var(--papel); border: 2px solid var(--teja); }
.retro--acierto { border-color: var(--bosque); }
.retro__titulo { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; margin: 0 0 .4rem; }

/* ---------- Nivel 3: puertas y ambientes ---------- */
.puertas { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; max-width: 760px; margin: 1.6rem auto 0; }
.puerta {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5rem;
  min-height: clamp(260px, 52vw, 380px); padding: 1rem .6rem 1.3rem; cursor: pointer;
  font: inherit; border: 4px solid var(--madera); border-radius: 999px 999px 10px 10px / 220px 220px 10px 10px;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .18), var(--sombra); transition: transform .3s;
  overflow: hidden;
}
.puerta:hover { transform: translateY(-5px); }
.puerta svg { width: 72%; max-width: 170px; flex: 1; }
.puerta__titulo { font: 700 clamp(1.25rem, 4vw, 1.8rem)/1.1 var(--serif); }
.puerta__texto { font-size: .9rem; font-weight: 700; }
.puerta .sello { position: absolute; top: 18%; right: 8%; transform: rotate(10deg); }
.puerta--semana { background: linear-gradient(180deg, #5a3570, var(--morado)); color: var(--cal); }
.puerta--diablitos {
  background:
    repeating-conic-gradient(from 0deg at 50% 110%, #F2C14E 0 10deg, #E86A3C 10deg 20deg, #3A9D8F 20deg 30deg, #D93D6B 30deg 40deg);
  color: var(--tinta);
}
.puerta--diablitos .puerta__titulo, .puerta--diablitos .puerta__texto { background: rgba(255, 251, 242, .92); padding: .1rem .5rem; border-radius: 6px; }
.puerta[aria-pressed="true"] { outline: 4px solid var(--oro); outline-offset: 4px; }
.fiesta { margin-top: 2rem; }
.fiesta__audio { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1rem 0; }
.fiesta__audio p { margin: 0; font-size: .92rem; }
.boton[aria-pressed="true"] { background: var(--madera); color: var(--cal); }
.fiesta-escogida { font-weight: 800; text-align: center; margin: 1rem 0 0; min-height: 1.6em; }

body[data-ambiente="semana-santa"] main {
  --texto: var(--cal); --titulos: #F1E6F5;
  background: radial-gradient(80% 60% at 50% 0%, rgba(160, 110, 190, .3), transparent 70%), linear-gradient(#2E1B38, #241430);
  transition: background .8s;
}
body[data-ambiente="semana-santa"] main .antetitulo { color: #E6C1F5; }
body[data-ambiente="semana-santa"] main a:not(.boton) { color: #F2C14E; }
body[data-ambiente="semana-santa"] .mensaje-juego, body[data-ambiente="semana-santa"] .pista-ocultos { color: var(--madera); }
body[data-ambiente="diablitos"] main {
  background:
    radial-gradient(circle at 10% 20%, #F2C14E 0 6px, transparent 7px) 0 0 / 90px 90px,
    radial-gradient(circle at 60% 70%, #D93D6B 0 5px, transparent 6px) 0 0 / 110px 110px,
    radial-gradient(circle at 80% 30%, #3A9D8F 0 5px, transparent 6px) 0 0 / 70px 70px,
    #FCEBCB;
}
.escena--ventana { position: relative; }
.escena--ventana .oculto--ventana { right: 4%; top: -8px; }

/* ---------- Nivel 4: ceiba y fichas ---------- */
.escena--ceiba { aspect-ratio: 16 / 10; background: #F6D79A; }
.escena--ceiba .oculto--tamarindo { left: 12%; bottom: 22%; }
.escena--ceiba .oculto--raiz { left: 54%; bottom: 25%; }
.juego-ceiba { margin-top: 1.5rem; }
.tablero { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.2rem .6rem; border-radius: 18px;
  background: linear-gradient(180deg, #6b4a30, #4A3423); box-shadow: inset 0 0 0 4px #2B1E14, var(--sombra); }
.casillas__palabra { display: flex; gap: clamp(.15rem, 1vw, .35rem); }
.casilla, .banco__hueco, .ficha { width: clamp(1.85rem, 8.6vw, 3.1rem); height: clamp(2.4rem, 11vw, 3.7rem); }
.casilla { position: relative; border-radius: 6px; border: 2px dashed rgba(244, 239, 230, .55); background: rgba(0, 0, 0, .18); }
.casilla--destino { border-style: solid; border-color: #F2C14E; background: rgba(242, 193, 78, .25); }
.casilla__vacia { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; border-radius: 4px; }
.casilla__vacia:focus-visible { box-shadow: 0 0 0 4px #F2C14E; outline-color: var(--cal); }
.casilla .ficha { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
.banco {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.25rem, 1.2vw, .5rem); margin: 1.2rem auto 0; padding: 1rem;
  border-radius: 18px; background: rgba(201, 164, 106, .3); border: 2px dashed rgba(74, 52, 35, .35); max-width: 640px;
}
.banco__hueco { position: relative; border-radius: 6px; background: rgba(74, 52, 35, .08); }
.ficha {
  position: relative; display: grid; place-items: center; padding: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  font: 700 clamp(1.2rem, 5vw, 2rem)/1 var(--serif); color: var(--tinta);
  background:
    repeating-linear-gradient(100deg, rgba(74, 52, 35, .07) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #E9CF9E, var(--tapia));
  border: 2px solid var(--madera); border-radius: 6px; box-shadow: 0 3px 0 var(--madera);
  transform: rotate(var(--giro, 0deg)); transition: box-shadow .15s, background .3s;
}
.casilla .ficha { transform: none; }
.ficha[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cal), 0 0 0 6px var(--oro); transform: translateY(-4px); z-index: 3; }
.ficha--arrastrando { cursor: grabbing; z-index: 60; box-shadow: 0 14px 22px rgba(0, 0, 0, .35); transition: none; }
.ficha--fija { background: linear-gradient(160deg, #9aa874, var(--bosque)); color: #fff; cursor: default; }
.tablero--resuelto .ficha { background: linear-gradient(160deg, #F6D88A, var(--oro)); color: var(--tinta); animation: brillo-ficha 1.2s ease; }
@keyframes brillo-ficha { 50% { box-shadow: 0 0 22px 6px rgba(242, 193, 78, .9); } }
.juego-ceiba__acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.frases { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 720px) { .frases { grid-template-columns: 1fr 1fr; } }
.frase { margin: 0; background: var(--papel); padding: 1.3rem 1.3rem 1rem; border-radius: var(--radio); border-left: 5px solid var(--bosque); box-shadow: var(--sombra); }
.frase p { font: italic 600 1.35rem/1.3 var(--serif); margin: 0 0 .5rem; }
.frase footer { font-size: .92rem; font-weight: 700; color: var(--bosque); }

/* =====================================================================
   FINAL · mapa, formulario y créditos
   ===================================================================== */
.mapa { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); background: #F1E4C4; }
.mapa svg { width: 100%; height: auto; }
.mapa__punto { cursor: pointer; }
.mapa__punto .mapa__circulo { fill: var(--cal); stroke: var(--madera); stroke-width: 4; transition: fill .3s; }
.mapa__punto .mapa__num { fill: var(--madera); font: 700 30px var(--serif); }
.mapa__punto .mapa__halo { fill: none; stroke: var(--ojo-naranja); stroke-width: 4; opacity: 0; }
.mapa__punto--hecho .mapa__circulo { fill: var(--ojo-amarillo); }
.mapa__punto--hecho .mapa__halo { opacity: 1; animation: halo 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mapa__punto:hover .mapa__circulo { fill: #fff; }
.mapa__punto--hecho:hover .mapa__circulo { fill: #f6c443; }
.mapa__punto:focus-visible { outline: none; box-shadow: none; }
.mapa__punto:focus-visible .mapa__circulo { stroke: var(--tinta); stroke-width: 8; }
.mapa__etiqueta { font: 800 17px var(--sans); fill: var(--tinta); paint-order: stroke; stroke: #F1E4C4; stroke-width: 5px; stroke-linejoin: round; }
.mapa .oculto--puente { left: calc(88% - 24px); top: calc(15% - 24px); }
@keyframes halo { 50% { transform: scale(1.25); opacity: .3; } }

.formulario { background: var(--papel) var(--ruido); border-radius: 20px; padding: clamp(1.3rem, 4vw, 2.4rem); border: 2px solid var(--madera); box-shadow: 0 0 0 6px var(--cal), var(--sombra); }
.formulario fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.formulario legend { font-weight: 800; font-size: 1.08rem; margin-bottom: .7rem; padding: 0; }
.formulario legend .letra { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--teja); color: #fff; margin-right: .4rem; font-size: .95rem; }
.escala { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 1rem; border-radius: 999px;
  border: 2px solid var(--madera); background: var(--cal); font-weight: 800; font-size: 1.1rem; transition: background .2s, transform .15s;
}
.opcion input:hover + span { transform: translateY(-2px); }
.opcion input:checked + span { background: var(--teja); color: #fff; border-color: var(--tinta); box-shadow: 0 3px 0 var(--tinta); }
.opcion input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 7px #F2C14E; }
.escala-ayuda { font-size: .88rem; margin: .5rem 0 0; color: var(--madera); }
.campo label { display: block; font-weight: 800; margin-bottom: .4rem; }
.campo input[type="text"] {
  width: 100%; max-width: 26rem; min-height: 50px; padding: .7rem .9rem; font: inherit; color: var(--tinta);
  border: 2px solid var(--madera); border-radius: 10px; background: #fff;
}
.campo small, .casilla-legal small { display: block; font-size: .88rem; margin-top: .3rem; }
.casilla-legal { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0; font-size: .95rem; }
.casilla-legal input { width: 26px; height: 26px; flex: none; margin-top: .15rem; accent-color: var(--teja); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fuentes { padding-left: 1.2rem; }
.fuentes li { margin-bottom: .4rem; }

/* ---------- Gracias ---------- */
.gracias-sello { width: 140px; margin: 0 auto 1rem; }

/* =====================================================================
   MEJORAS · octubre 2026 (intentos, vidas, pistas, vestir, mapa antiguo)
   ===================================================================== */
/* Sellos: nunca se cortan */
.sello { max-width: none; overflow: visible; text-overflow: clip; flex: none; }
.puerta .sello { right: 6%; font-size: .66rem; }

/* Portada: rótulo de la Casa de la Fundición */
.portada__lugar {
  display: inline-block; margin: .2rem auto .9rem; padding: .45rem 1.1rem .4rem;
  font: 700 clamp(.95rem, 2.6vw, 1.2rem)/1.3 var(--serif); color: var(--tinta);
  background: #E9CF9E; border: 2px solid var(--madera); border-radius: 4px;
  box-shadow: inset 0 0 0 3px #E9CF9E, inset 0 0 0 4px rgba(74, 52, 35, .55), 0 3px 0 rgba(74, 52, 35, .35);
}
.portada__lugar strong { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .92em; }

/* Ojo de Buey: historia y personajes */
.historia-ojo .lead p { margin: 0 0 1rem; }
.equipo--personajes, .equipo--cinco { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.equipo__item--personaje { background: var(--papel); border-radius: var(--radio); padding: 1rem .9rem 1.2rem; box-shadow: var(--sombra); border-top: 5px solid var(--ojo-amarillo); }
.equipo__frase { margin: .6rem 0 0; font: italic 600 1.08rem/1.35 var(--serif); color: var(--tinta); }

/* Estado de los juegos: intentos, pistas y vidas */
.estado-juego { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1rem; margin: 1rem 0 .4rem; }
.intentos {
  margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800;
  background: var(--papel); border: 2px solid var(--madera); border-radius: 999px; padding: .35rem .95rem;
}
.intentos strong { font-size: 1.15em; color: var(--teja); }
.intentos--pocos { border-color: var(--teja); background: #FBE3D8; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.04); } }
.ayuda-juego { text-align: center; max-width: 60ch; margin: 1rem auto 0; font-size: .95rem; }
.vidas { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; }
.vidas__hojas { display: inline-flex; gap: .2rem; }
.vidas__hoja { width: 30px; height: 30px; color: var(--bosque); transition: transform .3s, color .3s, opacity .3s; }
.vidas__hoja svg { width: 100%; height: 100%; }
.vidas__hoja--perdida { color: #b9a48a; opacity: .45; transform: rotate(35deg) translateY(4px); }
.tarjeta--perdiste { border: 3px dashed var(--teja); background: #FFF6EE; margin-top: 1rem; }
.tarjeta--perdiste h2, .tarjeta--perdiste h3 { color: var(--teja); }

/* Nivel 1: brillos alrededor */
.arena__brillos { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(.8rem, 2.6vw, 1.1rem)/1 var(--sans); color: #fff6c9; text-shadow: 0 0 6px rgba(226, 180, 74, .9), 0 1px 1px rgba(0, 0, 0, .5); letter-spacing: -.05em; pointer-events: none; }
.arena__brillos--0 { color: rgba(74, 52, 35, .45); text-shadow: none; font-size: 1.4rem; }
.arena--escapada svg { opacity: .55; filter: grayscale(.4); animation: none; }
.batea__arena--perdida { filter: saturate(.7); }

/* Nivel 2: tarjeta de Aranzazu, preguntas y libreta de pistas */
.aranzazu h2 { margin-top: 0; }
.aranzazu__partes .dato-parte { margin-top: .9rem; }
.aranzazu__partes .dato-parte p { margin: .4rem 0 0; }
.preguntas { list-style: none; counter-reset: preg; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.pregunta { counter-increment: preg; background: #FFFBF2; border: 1px solid rgba(74, 52, 35, .25); border-left: 5px solid var(--oro); border-radius: 6px; padding: 1rem 1rem .8rem; box-shadow: var(--sombra); }
.pregunta--bien { border-left-color: var(--bosque); }
.pregunta--mal { border-left-color: var(--teja); }
.pregunta__texto { font: 700 1.2rem/1.25 var(--serif); margin: 0 0 .7rem; }
.pregunta__texto::before { content: counter(preg) ". "; color: var(--teja); }
.pregunta__opciones { display: grid; gap: .45rem; }
.opcion-pregunta {
  font: 700 .95rem/1.25 var(--sans); text-align: left; color: var(--madera); cursor: pointer;
  background: var(--cal); border: 2px solid rgba(74, 52, 35, .35); border-radius: 8px; padding: .55rem .8rem; transition: transform .15s, border-color .15s;
}
.opcion-pregunta:hover:not(:disabled) { border-color: var(--madera); transform: translateX(3px); }
.opcion-pregunta:disabled { cursor: default; opacity: .6; }
.opcion-pregunta--bien:disabled { opacity: 1; background: #E4EBD3; border-color: var(--bosque); }
.opcion-pregunta--mal:disabled { opacity: 1; background: #F7DDD2; border-color: var(--teja); }
.pregunta__retro { margin: .6rem 0 0; font-weight: 800; font-size: .92rem; min-height: 1.2em; }
.pregunta--bien .pregunta__retro { color: var(--bosque); }
.pregunta--mal .pregunta__retro { color: var(--teja); }
.pistas__titulo { margin-top: 2rem; }
.pistas { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.pista { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; border-radius: 6px; background: rgba(74, 52, 35, .07); border: 2px dashed rgba(74, 52, 35, .3); color: rgba(74, 52, 35, .6); }
.pista__num { font: 900 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pista__texto { font-size: .95rem; }
.pista--ganada { background: #FFF4D4; border: 2px solid var(--oro); color: var(--madera); transform: rotate(-.6deg); }
.pista--ganada .pista__num { color: var(--ocre); }
.pista--perdida { text-decoration: line-through; opacity: .6; }
.ficha-archivo__lineas { display: flex; flex-direction: column; gap: .15rem; }
.ficha-archivo__texto { line-height: 28px; }

/* Nivel 3: la reja va encima de la pregunta, nunca sobre el texto */
.escena--ventana { display: flex; flex-direction: column; align-items: center; }
.escena--ventana .oculto--ventana { position: relative; inset: auto; right: auto; top: auto; margin: .2rem auto .2rem; width: 44px; height: 44px; }
.escena--ventana h2 { margin-top: 0; }

/* Nivel 3: minijuegos de vestir */
.vestir { margin: 2rem 0; padding: 1.2rem; border-radius: 18px; background: rgba(255, 251, 242, .94); color: var(--madera); box-shadow: var(--sombra); }
.vestir__cabeza h3 { margin: .6rem 0 .3rem; color: var(--madera); }
.vestir__cabeza p { margin: 0; color: var(--madera); }
.vestir__escena { display: grid; gap: 1.2rem; margin-top: 1rem; align-items: center; }
@media (min-width: 760px) { .vestir__escena { grid-template-columns: minmax(240px, 340px) 1fr; } }
.vestir__figura { position: relative; border-radius: 14px; padding: .6rem; background: radial-gradient(circle at 50% 35%, #fff8e6, #ecd9b4); border: 2px solid rgba(74, 52, 35, .25); transition: box-shadow .2s; }
.vestir__figura--destino { box-shadow: 0 0 0 4px var(--oro); }
.vestir__svg { width: 100%; height: auto; display: block; max-height: 420px; }
.vestir__svg [data-capa] { opacity: 0; transform: translateY(-14px); transition: opacity .45s, transform .45s; transform-box: fill-box; transform-origin: center; }
.vestir__svg [data-capa].capa--puesta { opacity: 1; transform: none; }
.vestir__cuenta { font-weight: 800; margin: 0 0 .6rem; color: var(--madera); }
.vestir__piezas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pieza {
  font: 800 .95rem var(--sans); color: var(--madera); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(160deg, #FFF4D4, #E9CF9E); border: 2px solid var(--madera); border-radius: 999px; padding: .5rem 1rem; box-shadow: 0 3px 0 var(--madera);
  position: relative; transition: transform .15s, opacity .2s;
}
.pieza:hover:not(:disabled) { transform: translateY(-2px); }
.pieza--arrastrando { z-index: 50; cursor: grabbing; box-shadow: 0 12px 20px rgba(0, 0, 0, .3); transition: none; }
.pieza--puesta { opacity: .45; cursor: default; box-shadow: none; text-decoration: line-through; }
.vestir__dato { margin: 1rem 0 .6rem; min-height: 3em; padding: .7rem .9rem; border-radius: 8px; background: var(--cal); border-left: 4px solid var(--oro); color: var(--madera); }
.vestir__dato:empty { visibility: hidden; }
.vestir--listo .vestir__figura { box-shadow: 0 0 0 4px var(--oro), 0 0 30px rgba(242, 193, 78, .6); }
body[data-ambiente="semana-santa"] .vestir .sello { background: var(--cal); }

/* Nivel 3: calle festiva para los Diablitos (banderines y faroles) */
body[data-ambiente="diablitos"] main {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='70' viewBox='0 0 240 70'%3E%3Cpath d='M0 8 Q120 34 240 8' fill='none' stroke='%232B1E14' stroke-width='1.5'/%3E%3Cpath d='M10 10 l12 26 l12 -22z' fill='%23E9461D'/%3E%3Cpath d='M44 18 l12 26 l12 -22z' fill='%23F2B71F'/%3E%3Cpath d='M80 22 l12 26 l12 -24z' fill='%233A9D8F'/%3E%3Cpath d='M116 23 l12 26 l12 -26z' fill='%23D93D6B'/%3E%3Cpath d='M152 22 l12 24 l12 -26z' fill='%23E9461D'/%3E%3Cpath d='M188 18 l12 22 l12 -26z' fill='%23F2B71F'/%3E%3Cpath d='M222 12 l10 20 l8 -24z' fill='%233A9D8F'/%3E%3C/svg%3E") 0 0 / 240px 70px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260' viewBox='0 0 300 260'%3E%3Cg opacity='.18'%3E%3Cpath d='M60 0 v40' stroke='%232B1E14' stroke-width='2'/%3E%3Cpath d='M48 40 h24 l-4 34 h-16z' fill='%23F2C14E' stroke='%232B1E14' stroke-width='2'/%3E%3Cpath d='M46 40 h28 M50 74 h20' stroke='%232B1E14' stroke-width='3'/%3E%3Cpath d='M230 0 v70' stroke='%232B1E14' stroke-width='2'/%3E%3Ccircle cx='230' cy='92' r='22' fill='%23E9461D' stroke='%232B1E14' stroke-width='2'/%3E%3Cpath d='M216 78 q14 14 28 0 M216 106 q14 -14 28 0' stroke='%23F2B71F' stroke-width='3' fill='none'/%3E%3C/g%3E%3Cg fill='%23D93D6B' opacity='.22'%3E%3Ccircle cx='140' cy='160' r='4'/%3E%3Ccircle cx='30' cy='210' r='3'/%3E%3C/g%3E%3Cg fill='%233A9D8F' opacity='.22'%3E%3Ccircle cx='260' cy='200' r='4'/%3E%3Ccircle cx='110' cy='240' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 70px / 300px 260px repeat,
    linear-gradient(180deg, #FDE7C0, #F7D49A 60%, #F2C98A);
}
.puerta--diablitos svg { filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25)); }

/* Nivel 4: el anagrama tallado en el tronco */
.tablero {
  position: relative; overflow: hidden; padding: 1.6rem .8rem 1.4rem; border-radius: 46% 46% 18px 18px / 26% 26% 18px 18px;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 13px, rgba(255, 255, 255, .05) 13px 15px, transparent 15px 24px),
    repeating-linear-gradient(88deg, transparent 0 30px, rgba(0, 0, 0, .1) 30px 33px),
    linear-gradient(90deg, #6a5a48, #8b7a64 30%, #9a8a73 50%, #85745e 70%, #5f503f);
  box-shadow: inset 0 0 0 4px #3b2f24, inset 0 -18px 30px rgba(0, 0, 0, .25), var(--sombra);
}
.tablero::before {
  content: "ARDO POR CECILIA"; display: block; text-align: center; margin: 0 0 .6rem;
  font: 700 clamp(.85rem, 2.6vw, 1.1rem)/1 var(--serif); letter-spacing: .35em; color: rgba(40, 30, 20, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.casilla { border: 2px solid rgba(40, 28, 18, .55); background: rgba(40, 28, 18, .32); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .2); }
.casilla--error { animation: sacudir .45s; border-color: var(--ojo-naranja); background: rgba(233, 70, 29, .35); }
@keyframes sacudir { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.ficha {
  border-radius: var(--forma, 46% 54% 40% 60%) / 18% 22% 20% 16%;
  background:
    repeating-linear-gradient(95deg, rgba(60, 40, 20, .18) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25), transparent 60%),
    linear-gradient(160deg, #b19a7a, #8c7559);
  color: #2a1d12; border: 2px solid #3b2f24; box-shadow: 0 3px 0 #3b2f24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.ficha--error { animation: sacudir .45s; background: linear-gradient(160deg, #f0a58c, var(--ojo-naranja)); }
.ficha--bien, .casilla .ficha--bien {
  border-radius: 6px; color: #2a1d12;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 40%), linear-gradient(160deg, #e8d3a6, #c9ab78);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); border-color: #3b2f24;
}
.ficha--pista, .casilla .ficha--pista { border-radius: 6px; background: linear-gradient(160deg, #9aa874, var(--bosque)); color: #fff; text-shadow: none; }
.tablero--perdido { filter: grayscale(.5) brightness(.9); }
.estado-juego--ceiba { margin-top: 1rem; }
#boton-pista:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.revelacion-partes .dato-parte { margin-top: .9rem; }
.revelacion-partes .dato-parte p { margin: .4rem 0 0; font-size: 1.08rem; }

/* Final: mapa antiguo */
.mapa { background: #EAD7AE; border: 1px solid #6b4a1f; box-shadow: 0 2px 0 rgba(74, 52, 35, .2), 0 18px 34px -14px rgba(60, 40, 15, .6); }
.mapa__svg { filter: sepia(.35) saturate(.85) contrast(1.02); }
.mapa__punto .mapa__circulo { fill: url(#mp-lacre); stroke: #5B160E; stroke-width: 5; stroke-dasharray: 7 2.5; stroke-linecap: round; }
.mapa__punto .mapa__anillo { fill: none; stroke: rgba(255, 220, 200, .45); stroke-width: 1.8; }
.mapa__punto .mapa__num { fill: #FBEFD8; font: italic 700 28px var(--serif); }
.mapa__punto--hecho .mapa__circulo { fill: url(#mp-oro); stroke: #7a5512; }
.mapa__punto--hecho .mapa__num { fill: var(--tinta); }
.mapa__punto--hecho .mapa__anillo { stroke: rgba(122, 85, 18, .55); }
.mapa__punto:hover .mapa__circulo, .mapa__punto--hecho:hover .mapa__circulo { filter: brightness(1.12); }
.mapa__etiqueta { font: italic 700 19px var(--serif); fill: #2B1E14; stroke: #EAD7AE; }
.mapa__punto:hover .mapa__circulo { fill: url(#mp-lacre); }
.mapa__punto--hecho:hover .mapa__circulo { fill: url(#mp-oro); }

/* =====================================================================
   Movimiento reducido
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hojas, .oculto::after { display: none; }
  .casa--abierta .casa__escena { transform: none; }
  .carta__interior { transform-style: flat; }
  .carta--volteada .carta__interior { transform: none; }
  .carta__cara { backface-visibility: visible; transform: none; }
  .carta__reverso { opacity: 0; }
  .carta--volteada .carta__reverso { opacity: 1; }
  .carta--volteada .carta__frente { opacity: 0; }
  .intentos--pocos { animation: none; }
  .vestir__svg [data-capa] { transform: none; }
}

/* Celular: nada se sale del ancho de la pantalla */
.rejilla-2 > * { min-width: 0; }
h1.titulo-marca { overflow-wrap: break-word; hyphens: auto; }
.boton { max-width: 100%; }
@media (max-width: 480px) {
  .ojo-portada h1.titulo-marca { font-size: clamp(1.9rem, 9.6vw, 2.6rem); }
  .equipo--cinco .foto--retrato, .equipo--personajes .foto--retrato { max-width: 210px; margin-inline: auto; }
}

/* Formulario externo (Google Forms) */
.formulario-externo { text-align: center; background: var(--papel); border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); }
.formulario-externo p { margin: 0 0 1rem; font-weight: 700; }