/*
 * Reto cafetero. Tarjeta oscura de la marca dentro de un articulo blanco.
 * Paleta oficial: negro espresso, marron corporativo #543013, dorado #e4c387, crema #fadeb7.
 * El rojo y el naranja son solo para ofertas: aqui un fallo se marca con grano VERDE (sin
 * tostar), que es cafe de verdad y no un semaforo.
 */
.cmwi-reto {
    --cmwi-fondo: #17100b;
    --cmwi-fondo-2: #241912;
    --cmwi-borde: #3a2a1f;
    --cmwi-marron: #543013;
    --cmwi-dorado: #e4c387;
    --cmwi-crema: #fadeb7;
    --cmwi-texto: #f6efe6;
    --cmwi-suave: #c9b8a6;
    --cmwi-verde: #a9b58f;
    --cmwi-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
    --cmwi-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    box-sizing: border-box;
    max-width: 640px;
    margin: 2.2em auto;
    padding: 28px 24px 24px;
    border-radius: 14px;
    background: var(--cmwi-fondo);
    background-image: radial-gradient(120% 80% at 100% 0%, rgba(228, 195, 135, 0.09), transparent 60%);
    color: var(--cmwi-texto);
    font-family: var(--cmwi-sans);
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(23, 16, 11, 0.18);
}
.cmwi-reto *, .cmwi-reto *::before, .cmwi-reto *::after { box-sizing: border-box; }
/* Doble clase: en linea dentro del articulo, el `p` del tema (margen de 32px) pesa igual que una. */
.cmwi-reto.cmwi-reto p { margin: 0; }
.cmwi-reto [hidden] { display: none !important; }

/*
 * 🚨 El tema de la tienda (Kadence) pinta TODOS los <button> del articulo: Mayusculas Iniciales,
 * espaciado de 1px y un fondo suyo al pasar o enfocar. Y sangra las listas 32px. Sus reglas pesan
 * mas que una clase sola, asi que aqui todo lo que choca va con `.cmwi-reto` delante. Se vio en
 * produccion el 3-oct-2026: Playground lleva otro tema y no lo enseñaba.
 */
.cmwi-reto button { text-transform: none; letter-spacing: normal; }
/* Y el tema hijo lleva `p { text-transform: none !important }`: las mayusculas de los parrafos
   del reto solo las gana otro !important con mas peso. */
.cmwi-reto .cmwi-reto__antetitulo,
.cmwi-reto .cmwi-reto__nivel { text-transform: uppercase !important; }

/* Cabecera: antetitulo a la izquierda, granos a la derecha */
.cmwi-reto__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.cmwi-reto__antetitulo {
    color: var(--cmwi-dorado);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cmwi-reto__intro .cmwi-reto__antetitulo { margin-bottom: 10px; }

/* Los granos */
.cmwi-reto .cmwi-reto__granos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cmwi-reto .cmwi-reto__granos > li { margin: 0; padding: 0; }
.cmwi-reto__grano { width: 16px; height: 22px; display: block; }
.cmwi-reto__grano .cmwi-g-cuerpo { fill: transparent; stroke: var(--cmwi-suave); stroke-width: 1.4; transition: fill .45s ease, stroke .45s ease; }
.cmwi-reto__grano .cmwi-g-raja { fill: none; stroke: var(--cmwi-suave); stroke-width: 1.3; stroke-linecap: round; transition: stroke .45s ease; }
.cmwi-reto__grano--actual .cmwi-g-cuerpo { stroke: var(--cmwi-dorado); }
.cmwi-reto__grano--actual .cmwi-g-raja { stroke: var(--cmwi-dorado); }
.cmwi-reto__grano--acierto .cmwi-g-cuerpo { fill: var(--cmwi-marron); stroke: var(--cmwi-dorado); }
.cmwi-reto__grano--acierto .cmwi-g-raja { stroke: var(--cmwi-dorado); }
.cmwi-reto__grano--fallo .cmwi-g-cuerpo { fill: rgba(169, 181, 143, 0.28); stroke: var(--cmwi-verde); }
.cmwi-reto__grano--fallo .cmwi-g-raja { stroke: var(--cmwi-verde); }

/*
 * Intro = el banner que ve el lector en mitad del articulo. Tiene que llamar la atencion sin
 * gritar: titular grande, el sello del descuento como el de un saco de cafe, y una sola animacion
 * al entrar en pantalla (los cinco granos se tuestan y cae el sello). Al empezar a jugar
 * (.cmwi-reto--jugando) desaparece y los granos vuelven a ser el marcador.
 */
.cmwi-reto:not(.cmwi-reto--jugando) { box-shadow: 0 0 0 1px rgba(228, 195, 135, 0.28), 0 14px 34px rgba(23, 16, 11, 0.24); }
.cmwi-reto__gancho { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.cmwi-reto__titulo {
    font-family: var(--cmwi-serif);
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--cmwi-texto);
    margin-bottom: 10px !important;
}
.cmwi-reto__texto { color: var(--cmwi-suave); margin-bottom: 20px !important; }
.cmwi-reto__sello {
    flex: none;
    width: 100px;
    height: 100px;
    margin-top: 2px;
    border: 2px dashed var(--cmwi-dorado);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cmwi-dorado);
    box-shadow: inset 0 0 0 5px var(--cmwi-fondo), inset 0 0 0 6.5px rgba(228, 195, 135, 0.45);
    transform: rotate(-10deg);
}
.cmwi-reto__sello-cifra { font: 700 1.85rem/1 var(--cmwi-serif); font-variant-numeric: tabular-nums; }
.cmwi-reto__sello-texto { margin-top: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

@keyframes cmwi-tueste { from { fill: transparent; } to { fill: var(--cmwi-marron); } }
@keyframes cmwi-sellar {
    0%   { opacity: 0; transform: rotate(-32deg) scale(1.6); }
    70%  { opacity: 1; transform: rotate(-8deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}
.cmwi-reto--animable:not(.cmwi-reto--jugando) .cmwi-reto__sello { opacity: 0; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__sello { animation: cmwi-sellar .6s cubic-bezier(.2, .8, .2, 1) 1.15s both; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos .cmwi-g-cuerpo { animation: cmwi-tueste .45s ease both; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos li:nth-child(1) .cmwi-g-cuerpo { animation-delay: .1s; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos li:nth-child(2) .cmwi-g-cuerpo { animation-delay: .3s; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos li:nth-child(3) .cmwi-g-cuerpo { animation-delay: .5s; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos li:nth-child(4) .cmwi-g-cuerpo { animation-delay: .7s; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos li:nth-child(n+5) .cmwi-g-cuerpo { animation-delay: .9s; }
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos .cmwi-g-cuerpo,
.cmwi-reto--visto:not(.cmwi-reto--jugando) .cmwi-reto__granos .cmwi-g-raja { stroke: var(--cmwi-dorado); }

/* Botones */
.cmwi-reto__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--cmwi-dorado);
    color: #1b120b;
    font: 600 16px/1.2 var(--cmwi-sans);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, transform .1s ease;
}
.cmwi-reto .cmwi-reto__boton:focus,
.cmwi-reto .cmwi-reto__boton:active { background: var(--cmwi-dorado); color: #1b120b; }
.cmwi-reto .cmwi-reto__boton:hover { background: var(--cmwi-crema); color: #1b120b; }
.cmwi-reto__boton:active { transform: translateY(1px); }
.cmwi-reto__boton[disabled] { opacity: .55; cursor: default; }
.cmwi-reto .cmwi-reto__boton--secundario,
.cmwi-reto .cmwi-reto__boton--secundario:focus,
.cmwi-reto .cmwi-reto__boton--secundario:active {
    background: transparent;
    color: var(--cmwi-dorado);
    box-shadow: inset 0 0 0 1.5px var(--cmwi-dorado);
}
.cmwi-reto .cmwi-reto__boton--secundario:hover { background: rgba(228, 195, 135, 0.12); color: var(--cmwi-crema); }
.cmwi-reto :focus-visible { outline: 3px solid var(--cmwi-crema); outline-offset: 3px; }
/* La pregunta y la nota reciben el foco por codigo (para el lector de pantalla), no por teclado:
   ahi el recuadro solo estorba. */
.cmwi-reto [tabindex="-1"]:focus { outline: none; }

/* Pregunta */
.cmwi-reto__numero { color: var(--cmwi-suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.cmwi-reto__pregunta {
    font-family: var(--cmwi-serif);
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.45rem);
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 18px !important;
    color: var(--cmwi-texto);
}
.cmwi-reto .cmwi-reto__opciones { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.cmwi-reto .cmwi-reto__opciones > li { margin: 0; padding: 0; }
.cmwi-reto__opcion {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1.5px solid var(--cmwi-borde);
    border-radius: 10px;
    background: var(--cmwi-fondo-2);
    color: var(--cmwi-texto);
    font: 500 16px/1.35 var(--cmwi-sans);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.cmwi-reto .cmwi-reto__opcion:hover,
.cmwi-reto .cmwi-reto__opcion:focus,
.cmwi-reto .cmwi-reto__opcion:active { background: var(--cmwi-fondo-2); color: var(--cmwi-texto); box-shadow: none; }
.cmwi-reto__opcion:hover:not([aria-disabled="true"]) { border-color: var(--cmwi-dorado); }
.cmwi-reto__opcion[aria-disabled="true"] { cursor: default; }
.cmwi-reto__opcion--correcta { border-color: var(--cmwi-dorado); }
.cmwi-reto .cmwi-reto__opcion--correcta,
.cmwi-reto .cmwi-reto__opcion--correcta:hover,
.cmwi-reto .cmwi-reto__opcion--correcta:focus,
.cmwi-reto .cmwi-reto__opcion--correcta:active { background: rgba(228, 195, 135, 0.14); }
.cmwi-reto__opcion--fallada { border-color: var(--cmwi-verde); }
.cmwi-reto__opcion--apagada { opacity: .45; }
.cmwi-reto__marca { flex: none; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.cmwi-reto__opcion--correcta .cmwi-reto__marca { color: var(--cmwi-dorado); }
.cmwi-reto__opcion--fallada .cmwi-reto__marca { color: var(--cmwi-verde); }

/* El dato tras responder */
.cmwi-reto__dato {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--cmwi-dorado);
    background: rgba(250, 222, 183, 0.06);
    border-radius: 0 10px 10px 0;
}
.cmwi-reto__veredicto { font-weight: 700; margin-bottom: 4px !important; }
.cmwi-reto__dato-texto { color: var(--cmwi-texto); }
.cmwi-reto__fuente { margin-top: 6px !important; font-size: 13px; color: var(--cmwi-suave); }
.cmwi-reto__fuente a { color: var(--cmwi-suave); text-decoration: underline; text-underline-offset: 2px; }
.cmwi-reto__acciones { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Resultado */
.cmwi-reto__nota {
    font-family: var(--cmwi-serif);
    font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem);
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cmwi-texto);
}
.cmwi-reto__nota small { font-size: .42em; color: var(--cmwi-suave); font-weight: 400; margin-left: .2em; }
.cmwi-reto__nivel {
    margin-top: 8px !important;
    color: var(--cmwi-dorado);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.cmwi-reto__nivel-texto { margin-top: 6px !important; color: var(--cmwi-suave); }
.cmwi-reto__comentario {
    margin-top: 18px !important;
    font-family: var(--cmwi-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--cmwi-crema);
}
.cmwi-reto__pensando { margin-top: 18px; display: grid; gap: 8px; }
.cmwi-reto__pensando span { display: block; height: 10px; border-radius: 6px; background: rgba(250, 222, 183, 0.10); animation: cmwi-pulso 1.4s ease-in-out infinite; }
.cmwi-reto__pensando span:nth-child(2) { width: 85%; animation-delay: .15s; }
.cmwi-reto__pensando span:nth-child(3) { width: 60%; animation-delay: .3s; }
@keyframes cmwi-pulso { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Premio */
.cmwi-reto__premio { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--cmwi-borde); }
.cmwi-reto__premio-titulo { font-family: var(--cmwi-serif); font-size: 1.25rem; font-weight: 700; margin-bottom: 6px !important; }
.cmwi-reto__campo { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--cmwi-suave); }
/*
 * El campo del correo, blanco con letra negra: oscuro sobre oscuro no se leia lo escrito (el tema
 * le pone su color de texto con mas peso; lo vio Sergio el 4-oct-2026). !important en el color y
 * el fondo porque el tema los fija en todos los input del articulo.
 */
.cmwi-reto.cmwi-reto .cmwi-reto__entrada {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--cmwi-dorado);
    border-radius: 10px;
    background: #ffffff !important;
    color: #17100b !important;
    -webkit-text-fill-color: #17100b;
    caret-color: #17100b;
    font: 16px/1.3 var(--cmwi-sans); /* 16px: iOS no hace zoom al entrar */
    box-shadow: none;
}
.cmwi-reto.cmwi-reto .cmwi-reto__entrada::placeholder { color: #8a7a6c; -webkit-text-fill-color: #8a7a6c; opacity: 1; }
.cmwi-reto.cmwi-reto .cmwi-reto__entrada:focus { border-color: var(--cmwi-crema); outline: none; box-shadow: 0 0 0 3px rgba(228, 195, 135, 0.45); }
.cmwi-reto__casilla { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 16px; font-size: 14px; color: var(--cmwi-suave); cursor: pointer; }
.cmwi-reto .cmwi-reto__casilla input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--cmwi-dorado); }
.cmwi-reto .cmwi-reto__casilla a { color: var(--cmwi-dorado); }
.cmwi-reto__trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* El codigo: un ticket */
.cmwi-reto__ticket {
    margin: 14px 0 10px;
    padding: 16px;
    border: 1.5px dashed var(--cmwi-dorado);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(228, 195, 135, 0.06);
}
.cmwi-reto__codigo {
    font: 700 clamp(1.3rem, 1rem + 1.4vw, 1.7rem)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .08em;
    color: var(--cmwi-dorado);
    user-select: all;
}
.cmwi-reto__letra-pequena { font-size: 14px; color: var(--cmwi-suave); }

.cmwi-reto__aviso { margin-top: 12px !important; color: var(--cmwi-crema); font-size: 14px; }
.cmwi-reto__aviso:empty { display: none; }

@media (max-width: 480px) {
    .cmwi-reto { padding: 22px 16px 18px; border-radius: 12px; margin: 1.8em 0; }
    .cmwi-reto__gancho { gap: 12px; }
    .cmwi-reto__sello { width: 82px; height: 82px; }
    .cmwi-reto__sello-cifra { font-size: 1.45rem; }
    .cmwi-reto__sello-texto { font-size: 7.5px; letter-spacing: .08em; margin-top: 3px; }
    .cmwi-reto__boton { width: 100%; }
    .cmwi-reto__acciones .cmwi-reto__boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cmwi-reto *, .cmwi-reto *::before, .cmwi-reto *::after { transition: none !important; animation: none !important; }
    .cmwi-reto .cmwi-reto__sello { opacity: 1 !important; }
}