/* Palio App · piezas interactivas de las páginas interiores: la rueda del año cofrade (Quiénes somos),
   la app de prueba de tu hermandad (Lo que hacemos) y el relieve de las tarjetas al pasar el ratón. */
.manifiesto { font-family: var(--cursiva); font-style: italic; }
.manifiesto em { color: var(--oro); }

/* Relieve en 3D de tarjetas */
.inclina { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; transform-style: preserve-3d; will-change: transform; }
.inclina.activa { transition: transform .08s linear, box-shadow .35s; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(242, 199, 107, .35); }

/* Rueda del año cofrade */
.rueda-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 30px; }
.rueda { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1; justify-self: center; touch-action: none; cursor: grab; user-select: none; }
.rueda:active { cursor: grabbing; }
.rueda svg { width: 100%; height: 100%; overflow: visible; }
.rueda .seg { cursor: pointer; transition: opacity .25s, fill .25s; stroke: var(--terciopelo); stroke-width: 2; }
.rueda .seg:hover { opacity: .85; }
.rueda .mt { font: 700 12px var(--texto); letter-spacing: .08em; text-transform: uppercase; fill: var(--tinta-2); pointer-events: none; }
.rueda .mt.on { fill: #10070B; }
.rueda .centro { fill: var(--papel); stroke: rgba(242, 199, 107, .3); }
#rueda-aguja path { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
#rueda-aguja path { fill: var(--oro); }
.rueda-mes { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rueda-mes b { font: 900 30px/1 var(--display); text-transform: uppercase; }
.rueda-mes span { font-size: 12px; color: var(--oro); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.rueda-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.rueda-info h3 { font-size: clamp(40px, 5vw, 64px); }
.rueda-info p { color: var(--sobre-osc-2); font-size: 18px; max-width: 46ch; min-height: 5.2em; }
.rueda-nav { display: flex; gap: 10px; }
.rueda-nav .btn { min-height: 46px; padding: 0 20px; color: var(--sobre-osc); }
@media (max-width: 860px) { .rueda-g { grid-template-columns: 1fr; gap: 28px; } }

/* App de prueba */
.prueba-g { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: start; margin-top: 30px; }
.prueba-ctl { display: grid; gap: 14px; min-width: 0; }
.prueba-ctl input { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid var(--linea); padding: 0 16px; font: 500 16px var(--texto); background: var(--papel); color: var(--sobre-osc); }
.p-escudos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; border-radius: 16px; background: rgba(16, 7, 11, .5); border: 1px solid var(--linea); }
.p-escudos button { all: unset; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; padding: 6px; transition: background .2s, transform .2s; }
.p-escudos button:hover { background: rgba(242, 199, 107, .1); transform: scale(1.06); }
.p-escudos button[aria-selected="true"] { background: rgba(242, 199, 107, .2); box-shadow: inset 0 0 0 2px var(--oro); }
.p-escudos button:focus-visible { outline: 2px solid var(--oro); }
.p-escudos img { width: 100%; height: 100%; object-fit: contain; }
.p-colores { display: flex; flex-wrap: wrap; gap: 10px; }
.p-colores button { all: unset; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); transition: transform .2s; }
.p-colores button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--terciopelo), 0 0 0 5px var(--oro); transform: scale(1.08); }
.p-colores button:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.p-movil { --hc: #6B1A2E; --ht: #F6EEE3; width: 300px; max-width: 78vw; aspect-ratio: 9 / 19.3; border-radius: 46px; padding: 11px; background: linear-gradient(145deg, #3a2a2c, #120a0c 40%, #2a1d1f); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(242, 199, 107, .25); transition: transform .25s ease-out; justify-self: center; }
.p-pant { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #F4EFE7; display: flex; flex-direction: column; gap: 10px; padding-bottom: 54px; color: #1C0D12; }
.p-cab { background: var(--hc); color: var(--ht); padding: 52px 18px 20px; display: grid; justify-items: center; gap: 6px; text-align: center; transition: background .4s; }
.p-cab img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.p-cab img.salta { transform: scale(.6) rotate(-8deg); }
.p-cab b { font: 900 21px/1.05 var(--display); text-transform: uppercase; text-wrap: balance; }
.p-cab span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; font-weight: 700; }
.p-aviso { margin: 0 12px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .3); font-size: 11px; line-height: 1.3; transform: translateY(-34px); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.p-aviso.ver { transform: none; opacity: 1; }
.p-aviso i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--hc); }
.p-aviso b { display: block; font-size: 11px; } .p-aviso span { color: #5E4C51; }
.p-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 12px; }
.p-tiles div { display: grid; justify-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 10px 2px; border-radius: 12px; background: #fff; }
.p-tiles svg { width: 20px; height: 20px; fill: none; stroke: var(--hc); stroke-width: 1.8; transition: stroke .4s; }
.p-card { margin: 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff; display: grid; gap: 2px; border-left: 4px solid var(--hc); transition: border-color .4s; }
.p-card small { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8C7C80; font-weight: 700; }
.p-card b { font-size: 13px; }
.p-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: #fff; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #E7E0D8; }
.p-barra i { width: 20px; height: 20px; border-radius: 6px; background: #D9D0C6; } .p-barra i:first-child { background: var(--hc); }
@media (max-width: 860px) { .prueba-g { grid-template-columns: 1fr; gap: 28px; } .p-movil { order: -1; width: 250px; } .p-escudos { max-height: 196px; } }
@media (prefers-reduced-motion: reduce) { .inclina, #rueda-aguja, .p-cab img, .p-aviso { transition: none !important; } }

/* «Mueve la hora y síguela» */
.sg-elige { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sg-elige label { font: 700 12px var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-osc-2); }
.sg-elige select { min-height: 50px; min-width: min(100%, 360px); max-width: 100%; border-radius: 14px; border: 1px solid rgba(242, 199, 107, .4); padding: 0 44px 0 16px; font: 600 16px var(--texto); background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F2C76B' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; color: var(--sobre-osc); appearance: none; -webkit-appearance: none; cursor: pointer; }
.sg-elige select:focus { outline: 2px solid var(--oro); outline-offset: 2px; }
.sg-elige + .demo { margin-top: 18px; }
.sg-plano svg { aspect-ratio: 5 / 4; height: auto; background: #0b0508; }
#sg-foto { filter: saturate(.35) brightness(.5) sepia(.45) hue-rotate(-25deg); }
.sg-todo { fill: none; stroke: rgba(242, 199, 107, .35); stroke-width: calc(5px * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: calc(2px * var(--k, 1)) calc(10px * var(--k, 1)); }
.sg-hecho { fill: none; stroke: #F2C76B; stroke-width: calc(7px * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(242, 199, 107, .6)); }
.sg-clave { fill: #10070B; stroke: #F2C76B; stroke-width: calc(3px * var(--k, 1)); }
.sg-disco { fill: #F6EEE3; stroke: #F2C76B; stroke-width: calc(4px * var(--k, 1)); }
.sg-pulso { fill: none; stroke: #F2C76B; stroke-width: calc(3px * var(--k, 1)); opacity: .5; animation: sg-late 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sg-late { from { transform: scale(.7); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
.panel .quien img[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sg-pulso { animation: none; } }