/* Uvamejai · ENSAYO (9 oct 2026) · los juegos nuevos: «¿Qué elemental te acompaña?» (portada) y «Arma tu kit mágico». */

/* ---- papel viejo, el mismo de los retratos de Coronas ---- */
.el-papel,.el-res-lamina,.kit-papel{position:relative;color:#3a2618;border-radius:6px;background-color:#ecd8b6;
  background-image:radial-gradient(60% 40% at 18% 12%,rgba(160,110,60,.22),transparent 70%),radial-gradient(50% 35% at 85% 88%,rgba(150,95,45,.25),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 38px rgba(120,72,30,.45),inset 0 0 6px rgba(80,45,20,.5),0 30px 60px -28px rgba(0,0,0,.75)}
.ac-retrato{display:block;width:100%;height:auto}
.ac-mancha{transition:opacity 1.2s ease}

/* ================= ¿QUÉ ELEMENTAL TE ACOMPAÑA? ================= */
.elemental{position:relative;padding:clamp(70px,10vh,120px) var(--lado) clamp(60px,9vh,110px);max-width:1280px;margin:0 auto;scroll-margin-top:var(--alto-cabecera)}
.elemental-cabeza{text-align:center;max-width:46rem;margin:0 auto clamp(30px,5vw,52px)}
.elemental-cabeza .bajada{margin-inline:auto}
.el-mesa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.el-papel{padding:10px;transform:rotate(-1.4deg);position:sticky;top:calc(var(--alto-cabecera) + 24px)}
.el-papel-nota{position:absolute;left:0;right:0;bottom:16px;text-align:center;margin:0;font:400 1.15rem var(--mano);color:#6b4a2c;opacity:.85}
.el-pregunta.entra{animation:el-entra .55s var(--curva)}
@keyframes el-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.el-progreso{display:flex;gap:7px;margin-bottom:26px}
.el-progreso i{flex:1;height:3px;border-radius:3px;background:var(--linea)}
.el-progreso i.hecho{background:var(--oro)}
.el-progreso i.ahora{background:linear-gradient(90deg,var(--oro) 0 30%,var(--linea) 30%)}
.el-num{font:600 .8rem var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--crema-suave);margin:0 0 10px}
.el-num span{font:400 1.2rem var(--mano);letter-spacing:0;text-transform:none;color:var(--oro)}
.el-pregunta h3{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;margin:0 0 28px;outline:none;text-wrap:balance}
/* las respuestas: renglones de un oráculo, no casillas */
.el-opciones{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.el-opciones button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px 8px 16px 34px;border-bottom:1px solid var(--linea);position:relative;transition:background-color .3s,padding-left .35s var(--curva)}
.el-opciones button::before{content:'';position:absolute;left:8px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:1px solid var(--oro);transition:background-color .3s,box-shadow .3s}
.el-opciones button b{font-family:var(--display);font-weight:400;font-size:clamp(1.12rem,1.7vw,1.32rem);color:var(--crema)}
.el-opciones button small{font-size:.98rem;color:var(--crema-suave)}
.el-opciones button:hover,.el-opciones button:focus-visible{background:rgba(227,178,76,.07);padding-left:42px}
.el-opciones button:hover::before,.el-opciones button[aria-pressed="true"]::before{background:var(--oro);box-shadow:0 0 14px var(--oro)}
.el-opciones button:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}
/* los símbolos: sellos redondos */
.el-simbolos{display:flex;flex-wrap:wrap;gap:18px 14px;justify-content:flex-start}
.el-simbolos button{all:unset;box-sizing:border-box;cursor:pointer;width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.el-glifo{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(227,178,76,.45);color:var(--oro-claro);background:radial-gradient(circle,rgba(227,178,76,.08),transparent 70%);transition:transform .35s var(--curva),box-shadow .35s,background-color .3s}
.el-glifo svg{width:46px;height:46px}
.el-simbolos b{font-weight:500;font-size:.92rem;color:var(--crema-suave);line-height:1.2}
.el-simbolos button:hover .el-glifo,.el-simbolos button:focus-visible .el-glifo{transform:translateY(-4px) rotate(-4deg);box-shadow:0 0 0 6px rgba(227,178,76,.1),0 0 30px rgba(227,178,76,.3)}
.el-simbolos button:focus-visible .el-glifo{outline:2px solid var(--oro);outline-offset:3px}
.el-atras{all:unset;cursor:pointer;margin-top:22px;font:600 .8rem var(--texto);letter-spacing:.16em;text-transform:uppercase;color:var(--crema-suave)}
.el-atras:hover{color:var(--oro)}

/* ---- el resultado ---- */
.el-resultado{animation:el-entra .7s var(--curva)}
.el-res-cabeza{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.el-res-lamina{margin:0;padding:10px;transform:rotate(-1.4deg)}
.el-res-lamina figcaption{position:absolute;left:0;right:0;bottom:-38px;text-align:center;font-size:1.1rem}
.el-res-texto h3{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1;margin:6px 0 18px;outline:none;color:var(--oro-claro)}
.el-verso{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.35;color:var(--crema);margin:0 0 18px}
.el-res-texto>p{color:var(--crema-suave);font-size:1.06rem;max-width:36rem}
.el-llega{border-left:2px solid var(--oro);padding-left:16px;color:var(--crema)!important}
.el-compartir{margin-top:22px}
.el-lectura{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(28px,4vw,64px);margin:clamp(60px,8vw,96px) 0 0;padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--linea)}
.el-lectura section p{margin:0;color:var(--crema-suave);font-size:1.04rem}
.el-rotulo{font:600 .78rem var(--texto)!important;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)!important;margin:0 0 10px!important}
.el-pregunta-suya{grid-column:1/-1;text-align:center;padding:clamp(26px,4vw,40px) clamp(18px,4vw,60px);border-radius:28px;border:1px solid rgba(227,178,76,.35);background:radial-gradient(ellipse at 50% 0,rgba(227,178,76,.12),transparent 70%)}
.el-pregunta-suya .a-mano{font-size:clamp(1.5rem,2.8vw,2.1rem)!important;line-height:1.25;color:var(--oro-claro)!important;margin:4px auto 12px!important;max-width:34rem;text-wrap:balance}
.el-pregunta-suya small{color:var(--crema-suave)}
.el-segundo{text-align:center;margin:clamp(30px,4vw,44px) auto 0;max-width:40rem;color:var(--crema-suave);font-family:var(--display);font-style:italic;font-size:1.12rem}
.el-segundo b{color:var(--crema);font-style:normal;font-weight:500}
.el-herramientas{margin-top:clamp(70px,9vw,120px)}
.el-herramientas>.titulo-seccion,.el-herramientas>.bajada{text-align:center;margin-inline:auto}
.el-col-eti{font:400 1.25rem var(--mano);color:var(--oro);margin:clamp(30px,4vw,44px) 0 16px}
.el-disponibles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(22px,3vw,40px) clamp(16px,2.4vw,28px)}
.el-medidas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.el-medida{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:20px;border:1px solid var(--linea);background:rgba(31,18,41,.55);text-decoration:none;color:inherit;transition:border-color .3s,transform .35s var(--curva),background-color .3s}
.el-medida:hover{border-color:rgba(227,178,76,.6);transform:translateY(-3px);background:rgba(42,25,54,.7)}
.el-medida-foto{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden}
.el-medida-foto img{width:100%;height:100%;object-fit:cover;display:block}
.el-sello{position:absolute;left:6px;bottom:6px;font:600 .62rem var(--texto);letter-spacing:.12em;text-transform:uppercase;background:rgba(20,11,27,.78);color:var(--oro-claro);padding:4px 8px;border-radius:999px}
.el-medida-texto{display:flex;flex-direction:column;gap:3px}
.el-medida-texto small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-suave)}
.el-medida-texto b{font-family:var(--display);font-weight:400;font-size:1.22rem;color:var(--crema)}
.el-medida-texto>span{font-size:.93rem;color:var(--crema-suave);line-height:1.4}
.el-medida-texto em{font-style:normal;color:var(--oro-claro);font-weight:600;margin-top:4px}
.el-ir{font-size:.85rem!important;color:var(--oro)!important;font-weight:600}
.el-kit-invita{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;margin-top:clamp(40px,5vw,60px);padding:clamp(22px,3vw,34px);border-radius:24px;border:1px dashed rgba(227,178,76,.5);background:rgba(227,178,76,.05)}
.el-kit-invita div{max-width:36rem}
.el-kit-invita b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--crema);margin-bottom:4px}
.el-kit-invita span{color:var(--crema-suave)}
.el-otra{justify-content:center;margin-top:40px}

@media (max-width:860px){
  .el-mesa,.el-res-cabeza{grid-template-columns:1fr}
  .el-papel{position:relative;top:0;width:min(62vw,260px);margin:0 auto}
  .el-res-lamina{width:min(78vw,340px);margin:0 auto 40px}
  .el-lectura{grid-template-columns:1fr}
  .el-simbolos{justify-content:center}
  .el-simbolos button{width:88px}.el-glifo{width:72px;height:72px}
}
@media (max-width:480px){.el-medida{grid-template-columns:92px minmax(0,1fr)}}

/* el dibujo aparece trazándose */
.dibujando .ac-lin{stroke-dasharray:1;stroke-dashoffset:1;animation:ac-trazar 2.2s var(--curva) forwards}
.dibujando .ac-lav,.dibujando .ac-mancha{opacity:0;animation:ac-aguada 1.4s ease forwards;animation-delay:1s}
@keyframes ac-trazar{to{stroke-dashoffset:0}}
@keyframes ac-aguada{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dibujando *,.el-pregunta.entra,.el-resultado{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}

/* ================= ARMA TU KIT MÁGICO ================= */
.kit{padding-top:calc(var(--alto-cabecera) + clamp(30px,6vh,70px))}
.kit .migas{margin-bottom:18px}
.kit h1.titulo-seccion{font-size:clamp(2.6rem,6vw,4.4rem)}
.kit-viene{margin:18px auto 0;padding:12px 18px;border-radius:16px;border:1px solid rgba(227,178,76,.4);background:rgba(227,178,76,.07);color:var(--crema);max-width:40rem}
.kit-papel{padding:clamp(26px,3vw,40px) clamp(22px,3vw,36px);min-height:340px;transform:rotate(-1.2deg);position:sticky;top:calc(var(--alto-cabecera) + 24px);font-family:var(--mano);color:#3a2618;
  background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(90,55,25,.13) 33px 34px),radial-gradient(60% 40% at 18% 12%,rgba(160,110,60,.22),transparent 70%),radial-gradient(50% 35% at 85% 88%,rgba(150,95,45,.25),transparent 70%)}
.kit-papel-titulo{font-family:var(--pluma);font-size:2rem;margin:0 0 10px;color:#5b1a22}
.kit-papel ol{margin:0;padding-left:24px;font-size:1.18rem;line-height:34px}
.kit-papel li{animation:el-entra .5s var(--curva)}
.kit-papel li::marker{color:#a3740f}
.kit-papel .vacio{opacity:.4}
.kit-ayuda{margin:-16px 0 18px;color:var(--crema-suave);font-size:.95rem}
.el-opciones.varias button::before{border-radius:4px}
.kit-pie{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.kit-pie .el-atras{margin:0}
.kit-pie .boton:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.kit-resultado{animation:el-entra .7s var(--curva);max-width:980px;margin:0 auto}
.kit-res-cabeza{text-align:center;margin-bottom:clamp(30px,4vw,50px)}
.kit-res-cabeza h2{outline:none}
.kit-res-cabeza .bajada{margin-inline:auto}
.kit-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:kit}
.kit-item{display:grid;grid-template-columns:auto 130px minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px 20px 14px 14px;border-radius:22px;border:1px solid var(--linea);background:rgba(31,18,41,.6);animation:el-entra .6s var(--curva) both;animation-delay:calc(var(--i) * .12s)}
.kit-item::before{counter-increment:kit;content:counter(kit);font:300 2.2rem var(--display);font-style:italic;color:var(--oro);width:34px;text-align:center}
.kit-foto{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden}
.kit-foto img{width:100%;height:100%;object-fit:cover;display:block}
.kit-item-texto{display:flex;flex-direction:column;gap:4px}
.kit-item-texto small{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-suave)}
.kit-item-texto b{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--crema)}
.kit-item-texto span{color:var(--crema-suave);font-size:.98rem}
.kit-item-texto em{font-style:normal;color:var(--oro-claro);font-weight:600}
.kit-ver{color:var(--oro);font-weight:600;font-size:.9rem}
.kit-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 30px;margin-top:22px;padding:20px 24px;border-top:1px solid rgba(227,178,76,.4)}
.kit-total small{display:block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crema-suave)}
.kit-total b{font-family:var(--display);font-weight:400;font-size:2.2rem;color:var(--oro-claro)}
.kit-total span{display:block;font-size:.9rem;color:var(--crema-suave)}
.kit-total p{margin:0;max-width:30rem;color:var(--crema-suave);font-size:.95rem}
.kit-acciones{justify-content:center;margin-top:30px}
.kit-nota{text-align:center;font-size:1.1rem;margin-top:16px}
@media (max-width:860px){.kit-papel{position:relative;top:0;min-height:0}}
@media (max-width:600px){
  .kit-item{grid-template-columns:90px minmax(0,1fr);padding:12px}
  .kit-item::before{display:none}
  .kit-ver{grid-column:2}
}
@media (max-width:860px){
  .el-mesa{gap:22px}
  .el-papel{width:min(40vw,160px)}
  .el-papel-nota{font-size:.85rem;bottom:8px;padding:0 6px;line-height:1.1}
  .kit-papel{min-height:0;padding:20px 22px}
  .kit-papel-titulo{font-size:1.5rem}
  .kit-papel ol{font-size:1.02rem;line-height:30px}
}
@media (max-width:560px){
  .el-disponibles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .el-disponibles .pieza h3{font-size:1.02rem}.el-disponibles .pieza-texto{padding-right:44px}.el-disponibles .pieza-agregar{width:40px;height:40px}
}

/* ---- el kit: descuento, carrito y extra ---- */
.kit-sello-desc{display:inline-flex;align-items:center;gap:10px;margin:16px auto 0;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(227,178,76,.12);border:1px solid rgba(227,178,76,.45);color:var(--crema)}
.kit-sello-desc b{background:var(--oro);color:var(--tinta);border-radius:999px;padding:4px 10px;font-size:.92rem}
.kit-cuentas{margin:0;min-width:min(100%,340px)}
.kit-cuentas div{display:flex;justify-content:space-between;gap:20px;padding:6px 0}
.kit-cuentas dt{color:var(--crema-suave);font-size:.95rem}
.kit-cuentas dd{margin:0;color:var(--crema)}
.kit-desc dd,.kit-desc dt{color:var(--oro-claro)!important}
.kit-final{border-top:1px solid var(--linea);margin-top:6px;padding-top:12px!important;align-items:baseline}
.kit-final dt{font-size:.8rem!important;letter-spacing:.18em;text-transform:uppercase}
.kit-final dd{font-family:var(--display);font-size:2.2rem;color:var(--oro-claro)!important}
.kit-cuenta-uva{display:block;margin:26px 0 0;color:var(--crema);font-weight:500}
.kit-cuenta-uva small{color:var(--crema-suave);font-weight:400}
.kit-cuenta-uva textarea{display:block;width:100%;margin-top:8px;padding:14px 16px;border-radius:16px;border:1px solid var(--linea);background:rgba(20,11,27,.55);color:var(--crema);font:inherit;resize:vertical}
.kit-cuenta-uva textarea:focus{outline:2px solid var(--oro);outline-offset:1px}
.kit-extra{margin-top:clamp(40px,5vw,60px)}
.kit-extra-tarjeta{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:center;max-width:560px;padding:12px;border-radius:20px;border:1px dashed var(--linea);text-decoration:none;color:inherit}
.kit-extra-tarjeta img{width:110px;height:110px;object-fit:cover;border-radius:14px}
.kit-extra-tarjeta small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crema-suave)}
.kit-extra-tarjeta b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--crema)}
.kit-extra-tarjeta span span{display:block;color:var(--crema-suave);font-size:.93rem}
.kit-extra-tarjeta em{font-style:normal;color:var(--oro-claro);font-weight:600}

/* ---- 9 oct, ronda 2: fuera las láminas dibujadas; el ser se muestra con la foto real de una pieza de Uva ---- */
.el-papel{padding:0;transform:none;aspect-ratio:4/5;border-radius:var(--arco);overflow:hidden;background:radial-gradient(ellipse at 50% 40%,rgba(181,143,208,.22),rgba(20,11,27,.9) 70%);border:1px solid rgba(227,178,76,.35);box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}
.el-papel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(calc(var(--velo,1) * 22px + 3px)) brightness(calc(1 - var(--velo,1) * .35)) saturate(.85);transform:scale(1.12);transition:filter 1.2s ease;animation:el-entra 1s ease}
.el-papel::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(20,11,27,.75) 100%);pointer-events:none}
.el-velo-signo{position:absolute;inset:0;display:grid;place-items:center;font:300 7rem var(--display);font-style:italic;color:rgba(227,178,76,.35)}
.el-papel-nota{z-index:1;color:var(--oro-claro)!important;text-shadow:0 2px 10px rgba(0,0,0,.8);bottom:22px!important}
.el-res-foto{position:relative;margin:0}
.el-res-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--arco);border:1px solid rgba(227,178,76,.45);box-shadow:0 0 0 8px rgba(227,178,76,.06),0 40px 80px -30px rgba(0,0,0,.85);animation:el-revela 1.6s var(--curva)}
.el-res-foto figcaption{text-align:center;margin-top:14px;font-size:1.05rem;line-height:1.3}
@keyframes el-revela{from{filter:blur(16px) brightness(.7);transform:scale(.97)}to{filter:none;transform:none}}
@media (max-width:860px){.el-papel{width:min(44vw,180px)}.el-velo-signo{font-size:4rem}.el-res-foto{width:min(80vw,360px);margin:0 auto 20px}}
@media (prefers-reduced-motion:reduce){.el-res-foto img,.el-papel img{animation:none!important;transition:none}}