/* El mapa del evento: una pregunta por pantalla, con la piel de la portada (hueso, Archivo, oro y negro). */
.cot-abierto, .cot-abierto body { overflow: hidden; }
.cot { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr; background: var(--hueso); color: var(--tinta); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.cot::-webkit-scrollbar { display: none; }
.cot[hidden] { display: none; }

.cot-cabeza { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 18px; height: 72px; padding: 0 max(24px, calc((100vw - 1100px) / 2)); background: color-mix(in oklab, var(--hueso) 92%, transparent); backdrop-filter: blur(8px); }
.cot-marca { font-family: Cinzel, serif; font-weight: 600; letter-spacing: .16em; font-size: 19px; }
.cot-avance { flex: 1; height: 4px; border-radius: 4px; background: #e2d9c8; overflow: hidden; }
.cot-avance i { display: block; height: 100%; background: var(--oro); border-radius: 4px; transition: width .5s var(--curva); }
.cot-cuenta { font-size: 14px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cot-cerrar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: var(--tinta); background: var(--papel); box-shadow: inset 0 0 0 1px #ddd3c2; transition: background .2s; }
.cot-cerrar:hover { background: #fff; }

.cot-escena { display: grid; align-items: center; padding: 24px 24px 60px; }
.cot-paso { width: min(760px, 100%); margin: 0 auto; animation: cot-entra .5s var(--curva) both; }
@keyframes cot-entra { from { opacity: 0; transform: translateY(18px); } }
.cot-paso h2 { font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 106; font-weight: 720; font-size: clamp(30px, 4.2vw, 54px); line-height: 1; letter-spacing: -.04em; outline: none; }
.cot-ayuda { margin-top: 12px; color: var(--suave); font-size: 17px; max-width: 56ch; }

.cot-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.cot-opcion { min-height: 62px; padding: 14px 20px; border-radius: 18px; text-align: left; font-size: 17px; font-weight: 500; background: var(--papel); box-shadow: inset 0 0 0 1.5px #ddd3c2; transition: background .2s, box-shadow .2s, transform .2s var(--curva); }
.cot-opcion:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.cot-opcion:active { transform: scale(.985); }
.cot-opcion.elegida { background: var(--tinta); color: var(--papel); box-shadow: none; }

.cot-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cot-fichas.chicas { margin-top: 10px; }
.cot-ficha { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15.5px; font-weight: 500; background: var(--papel); box-shadow: inset 0 0 0 1.5px #ddd3c2; transition: background .2s, box-shadow .2s, color .2s; }
.cot-ficha:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.cot-ficha.elegida { background: var(--tinta); color: var(--papel); box-shadow: none; }
.cot-ficha[disabled] { opacity: .4; cursor: default; }

.cot-campo { display: block; width: 100%; margin-top: 16px; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1.5px #ddd3c2; font: 400 17px/1.5 Geist, system-ui, sans-serif; color: var(--tinta); resize: vertical; transition: box-shadow .2s; }
.cot-campo:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tinta); }
.cot-campo::placeholder { color: #8b8274; }
.cot-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 14px; }
.cot-etiqueta { display: block; margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--suave); }
.cot-acepto { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 14.5px; color: var(--suave); cursor: pointer; }
.cot-acepto input { width: 22px; height: 22px; margin-top: 1px; flex: 0 0 22px; accent-color: var(--tinta); }
.cot-acepto a { color: var(--oro-texto); text-decoration: underline; }
.cot-error { min-height: 24px; margin-top: 12px; color: #9b2c1c; font-weight: 500; font-size: 15px; }

.cot-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.cot-pie-der { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cot-atras, .cot-nose { min-height: 44px; padding: 0 6px; font-size: 15.5px; font-weight: 500; color: var(--suave); }
.cot-atras:hover, .cot-nose:hover { color: var(--tinta); }
.cot-nose { padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #ddd3c2; }

.cot-resumen { min-height: 180px; font-size: 18px; line-height: 1.6; }
.cot-enviar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.cot-nota { margin-top: 14px; font-size: 13.5px; color: var(--suave); max-width: 60ch; }
.cot-gracias { margin-top: 16px; font-size: 17px; font-weight: 500; color: var(--oro-texto); max-width: 56ch; }
.cot-gracias:empty { display: none; }

@media (max-width: 700px) {
  .cot-cabeza { gap: 12px; height: 64px; }
  .cot-marca { font-size: 16px; }
  .cot-escena { align-items: start; padding-top: 20px; }
  .cot-opciones, .cot-dos { grid-template-columns: 1fr; }
  .cot-pie { position: sticky; bottom: 0; margin: 30px -24px 0; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--hueso) 94%, transparent); backdrop-filter: blur(8px); }
  .cot-final .cot-pie { position: static; margin: 30px 0 0; padding: 0; background: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .cot-paso { animation: none; } .cot-avance i { transition: none; } }

/* ---------- LAS DOS PUERTAS (idea A) ---------- */
.cot.en-puertas { background: var(--negro); display: block; overflow: hidden; }
.cot-p-caja { position: fixed; inset: 0; display: flex; transition: opacity .42s; }
.cot-p-caja.sale { opacity: 0; }
.cot-p { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; color: #fff; text-align: left; transition: flex .8s var(--curva); }
.cot-p:hover, .cot-p:focus-visible { flex: 1.45; outline: none; }
.cot-p-izq { background: var(--negro); transform: translateX(-100%); animation: cot-entra-izq 1s .1s var(--curva) forwards; }
.cot-p-der { background: radial-gradient(120% 90% at 70% 30%, #1fb35a 0%, #128c4b 35%, #0b3d2c 100%); transform: translateX(100%); animation: cot-entra-der 1s .2s var(--curva) forwards; }
@keyframes cot-entra-izq { to { transform: none; } }
@keyframes cot-entra-der { to { transform: none; } }
.cot-p-mosaico { position: absolute; inset: -10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-8deg); opacity: .5; }
.cot-p-mosaico div { display: flex; flex-direction: column; gap: 10px; animation: cot-sube 26s linear infinite; }
.cot-p-mosaico div:nth-child(2) { animation-duration: 34s; animation-direction: reverse; }
.cot-p-mosaico img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
@keyframes cot-sube { to { transform: translateY(-50%); } }
.cot-p-izq::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,11,.2), rgba(14,13,11,.92) 70%); }
.cot-p-texto { position: relative; z-index: 2; max-width: 460px; }
.cot-p-texto small { display: block; font-family: Cinzel, serif; font-weight: 600; letter-spacing: .3em; font-size: 12px; color: var(--oro-claro); }
.cot-p-texto strong { display: block; margin-top: 14px; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 106; font-weight: 760; font-size: clamp(40px, 4.6vw, 70px); line-height: .92; letter-spacing: -.045em; }
.cot-p-texto strong em { font-style: normal; color: var(--oro); }
.cot-p-texto p { margin-top: 14px; font-size: 17px; color: rgba(255,255,255,.82); }
.cot-p-ir { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; height: 56px; padding: 0 8px 0 26px; border-radius: 999px; font-weight: 650; font-size: 16px; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.cot-p:hover .cot-p-ir { transform: translateX(6px); }
.cot-p-ir i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-style: normal; }
.cot-p-izq .cot-p-ir { background: var(--oro); color: var(--negro); }
.cot-p-izq .cot-p-ir i { background: var(--negro); color: var(--oro); }
.cot-p-der .cot-p-ir { background: #fff; color: #0b3d2c; }
.cot-p-der .cot-p-ir i { background: #25d366; color: #fff; padding: 9px; }
.cot-p-der .cot-p-ir svg, .cot-p-logo svg { width: 100%; height: 100%; display: block; }
.cot-p-logo { position: absolute; z-index: 1; top: 8%; left: 50%; width: min(240px, 32vh); aspect-ratio: 1; translate: -50% 0; color: #fff; filter: drop-shadow(0 20px 50px rgba(0,0,0,.35)); animation: cot-late 2.2s ease-in-out infinite; }
.cot-p-logo::before, .cot-p-logo::after { content: ''; position: absolute; inset: -18%; border-radius: 50%; border: 2px solid rgba(255,255,255,.32); animation: cot-onda 2.2s ease-out infinite; }
.cot-p-logo::after { animation-delay: 1.1s; }
@keyframes cot-late { 0%, 100% { transform: scale(1) rotate(0); } 12% { transform: scale(1.08) rotate(-6deg); } 24% { transform: scale(1) rotate(0); } }
@keyframes cot-onda { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.cot-p-burbujas { position: absolute; inset: 0; pointer-events: none; }
.cot-p-burbuja { position: absolute; max-width: 250px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: #111; font-size: 14.5px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; animation: cot-burbuja 7s ease-in-out infinite; }
.cot-p-burbuja.mia { border-radius: 16px 16px 4px 16px; background: #d9fdd3; }
.cot-p-burbuja b { display: block; font-size: 12px; color: #128c4b; }
@keyframes cot-burbuja { 0% { opacity: 0; transform: translateY(40px) scale(.9); } 12%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-30px); } }
.cot-p-cerrar { position: absolute; top: 18px; right: 18px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); font-size: 16px; }

/* ---------- avance por puntos ---------- */
.cot-puntos { flex: 1; display: flex; gap: 5px; }
.cot-puntos i { flex: 1; height: 4px; border-radius: 4px; background: #e2d9c8; transition: background .4s; }
.cot-puntos i.hecho { background: var(--oro); }
.cot-puntos i.ahora { background: var(--tinta); }

/* ---------- la primera pregunta: fotos ---------- */
.cot-escena:not(.cot-con-foto) .cot-paso:has(.cot-tejas) { width: min(1100px, 100%); }
.cot-tejas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.cot-teja { position: relative; height: clamp(140px, 21vh, 210px); border-radius: 22px; overflow: hidden; text-align: left; color: #fff; animation: cot-entra .6s var(--curva) both; transition: box-shadow .3s; }
.cot-teja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.cot-teja::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(14,13,11,.8)); }
.cot-teja:hover img { transform: scale(1.06); }
.cot-teja span { position: absolute; z-index: 2; left: 18px; bottom: 16px; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 106; font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.cot-teja.elegida { box-shadow: 0 0 0 4px var(--oro); }
.cot-teja.elegida::before { content: '✓'; position: absolute; z-index: 3; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: var(--negro); font-weight: 800; }

/* ---------- las demás preguntas: con la foto de SU evento al lado ---------- */
.cot-con-foto { grid-template-columns: minmax(280px, 34%) 1fr; gap: 48px; align-items: stretch; padding: 10px max(24px, calc((100vw - 1240px) / 2)) 40px; }
.cot-con-foto .cot-paso { align-self: center; width: min(700px, 100%); margin: 0; }
.cot-foto { position: sticky; top: 92px; height: calc(100dvh - 132px); border-radius: 28px; overflow: hidden; }
.cot-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: cot-foto 1.2s var(--curva) both; }
@keyframes cot-foto { from { transform: scale(1.12); } }
.cot-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(14,13,11,.8)); }
.cot-foto span { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.cot-foto small { font-family: Cinzel, serif; font-weight: 600; letter-spacing: .3em; font-size: 11px; color: var(--oro-claro); }
.cot-foto strong { display: block; margin-top: 6px; font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 106; font-weight: 740; font-size: clamp(28px, 2.6vw, 40px); line-height: .95; letter-spacing: -.04em; }

@media (max-width: 860px) {
  .cot-p-caja { flex-direction: column; }
  .cot-p { padding: 28px 24px; }
  .cot-p-izq { transform: translateY(-100%); }
  .cot-p-der { transform: translateY(100%); }
  .cot-p:hover { flex: 1; }
  .cot-p-texto strong { font-size: 36px; }
  .cot-p-texto p { font-size: 15px; }
  .cot-p-logo { top: 12%; left: auto; right: 22px; translate: none; width: 92px; }
  .cot-p-burbuja { display: none; }
  .cot-p-mosaico { opacity: .35; }
  .cot-tejas { grid-template-columns: 1fr 1fr; }
  .cot-teja { height: 140px; }
  .cot-teja span { font-size: 17px; }
  .cot-con-foto { grid-template-columns: 1fr; gap: 14px; padding: 6px 24px 40px; }
  .cot-con-foto .cot-paso { align-self: start; }
  .cot-foto { position: relative; top: 0; height: 120px; border-radius: 20px; }
  .cot-foto strong { font-size: 24px; }
  .cot-foto span { bottom: 14px; left: 18px; }
}
@media (prefers-reduced-motion: reduce) { .cot-p, .cot-p-mosaico div, .cot-p-logo, .cot-p-logo::before, .cot-p-logo::after, .cot-p-burbuja, .cot-teja, .cot-foto img { animation: none !important; transform: none !important; } .cot-p-burbuja { opacity: 1; } }