@font-face {
    font-family: "Figtree";
    src: url("../fuentes/figtree-variable.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

:root {
    --fondo: #f5f7fb;
    --superficie: #ffffff;
    --texto: #14213d;
    --texto-suave: #4f5d78;
    --marca: #16386e;
    --marca-oscura: #0f2a55;
    --sobre-marca-suave: #dfe7f5;
    --acento: #ef7d22;
    --acento-claro: #ffb26b;
    --acento-fondo: #ffe3cc;
    --acento-texto: #8a3f00;
    --cupon-rojo: #c4262e;
    --cupon-verde: #267a43;
    --borde: #8491a8;
    --borde-suave: #d5dcea;
    --correcto-fondo: #dcf2e3;
    --correcto-texto: #17592e;
    --error: #a91f1f;
    --error-fondo: #fbe6e6;
    --error-texto: #7a1414;
    --aviso-fondo: #fdf2d8;
    --aviso-texto: #5c4300;
    --radio: 10px;
    --radio-grande: 16px;
    --sombra: 0 1px 2px rgb(20 33 61 / 8%), 0 4px 14px rgb(20 33 61 / 6%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-underline-offset: .15em; }
a:hover { color: var(--marca-oscura); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }

h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 .75rem; }

code { overflow-wrap: anywhere; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.saltar { position: absolute; left: -9999px; z-index: 10; }
.saltar:focus { left: 1rem; top: 1rem; background: var(--superficie); padding: .5rem 1rem; }

/* Cabecera y navegación */

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 1rem;
    min-height: 4rem;
    background: var(--superficie);
}
.cabecera form { margin: 0; }
.cabecera > .boton { flex: none; white-space: nowrap; }

.marca { display: flex; align-items: center; gap: .625rem; min-width: 0; color: var(--texto); font-weight: 700; line-height: 1.2; text-decoration: none; }
.marca img { display: block; flex: none; width: auto; height: 3.5rem; }
.marca span { padding-left: .625rem; border-left: 1px solid var(--borde-suave); }

.navegacion {
    display: flex;
    flex-wrap: wrap;
    gap: .125rem .25rem;
    padding: .375rem .75rem;
    background: var(--marca);
}
.navegacion a { display: inline-block; padding: .5rem .625rem; color: #fff; font-weight: 500; text-decoration: none; border-radius: 8px; }
.navegacion a:hover { background: var(--marca-oscura); color: #fff; }
.navegacion a[aria-current] { background: var(--marca-oscura); box-shadow: inset 0 -3px 0 var(--acento-claro); }
.navegacion a:focus-visible { outline-color: var(--acento-claro); }

/* Contenido */

.contenido { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.contenido--ancho { max-width: 64rem; }

.formulario { display: grid; gap: 1rem; margin-bottom: 1rem; padding: 1.25rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }

.campo label { display: block; font-weight: 600; margin-bottom: .25rem; }
.campo input, .campo select {
    width: 100%;
    min-height: 3rem;
    padding: .5rem .75rem;
    font: inherit;
    color: inherit;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.campo input[type="file"] { padding: .625rem .5rem; }
.campo input[aria-invalid="true"] { border: 2px solid var(--error); }
.campo__ayuda { margin: .25rem 0 0; color: var(--texto-suave); font-size: .9375rem; }
.campo__error { margin: .25rem 0 0; color: var(--error); font-weight: 600; font-size: .9375rem; }

.casilla { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.casilla input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--marca); }

.boton {
    display: inline-block;
    min-height: 3rem;
    padding: .625rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: var(--marca);
    border: 1px solid var(--marca);
    border-radius: var(--radio);
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}
.boton:hover { color: #fff; background: var(--marca-oscura); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .6; cursor: wait; }
.boton--discreto { min-height: 2.75rem; padding: .375rem .875rem; color: var(--marca); background: transparent; border-color: var(--borde); }
.boton--discreto:hover { color: var(--marca-oscura); background: #e9eef8; }
.boton--acento { color: #2b1500; background: var(--acento); border-color: var(--acento); }
.boton--acento:hover { color: #2b1500; background: var(--acento-claro); }
.boton--peligro { color: var(--error-texto); background: var(--superficie); border: 2px solid var(--error-texto); }
.boton--peligro:hover { color: #fff; background: var(--error-texto); }

.aviso { padding: .75rem 1rem; color: var(--aviso-texto); background: var(--aviso-fondo); border-radius: var(--radio); }
.aviso--correcto { background: var(--correcto-fondo); color: var(--correcto-texto); }
.aviso--error { background: var(--error-fondo); color: var(--error-texto); }

.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.acciones form { margin: 0; }

.lista { padding-left: 1.25rem; }
.lista li { margin-bottom: .375rem; }

.desplegable { margin-top: 1rem; }
.desplegable summary { min-height: 2.75rem; cursor: pointer; color: var(--marca); }

.qr { display: inline-block; padding: 1rem; background: #fff; border-radius: var(--radio); }
.qr svg { display: block; max-width: 100%; height: auto; }

.codigos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .25rem 1rem; padding: 1rem; background: var(--superficie); border-radius: var(--radio); font-family: ui-monospace, Menlo, monospace; list-style: none; }

.pie { padding: 1.5rem 1rem 2rem; color: var(--texto-suave); font-size: .9375rem; text-align: center; background: var(--superficie); border-top: 1px solid var(--borde-suave); }
.pie p { margin: 0 0 .5rem; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; }
.pie a { display: inline-block; padding: .375rem .25rem; }

/* Portada */

.portada-cabecera {
    padding: 2.5rem 1rem 5rem;
    color: #fff;
    background:
        radial-gradient(circle at 96% 8%, transparent 0 4.5rem, rgb(239 125 34 / 60%) 4.55rem 5.5rem, transparent 5.55rem),
        radial-gradient(circle at 78% 100%, rgb(255 255 255 / 6%) 0 11rem, transparent 11.05rem),
        linear-gradient(160deg, var(--marca) 55%, var(--marca-oscura));
}
.portada-cabecera__interior { max-width: 64rem; margin: 0 auto; }
.portada-cabecera__antetitulo { margin: 0 0 .375rem; color: var(--acento-claro); font-weight: 600; }
.portada-cabecera h1 { max-width: 16em; margin: 0 0 .75rem; font-size: clamp(2.125rem, 7vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.portada-cabecera__entradilla { max-width: 34rem; margin: 0; color: var(--sobre-marca-suave); font-size: 1.125rem; }
.portada-cabecera__entradilla strong { color: #fff; }
.portada-cabecera__acciones { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.5rem 0 1rem; }
.boton--claro { color: #fff; background: transparent; border-color: rgb(255 255 255 / 70%); }
.boton--claro:hover { color: var(--marca); background: #fff; }
.boton--claro:focus-visible, .boton--acento:focus-visible { outline-color: #fff; }
.plazo { display: inline-block; margin: 0; padding: .375rem .875rem; color: var(--sobre-marca-suave); font-size: .9375rem; background: rgb(255 255 255 / 10%); border-radius: var(--radio); }
.plazo strong { color: var(--acento-claro); white-space: nowrap; }

.contenido--portada { padding-top: 0; }

.destacado { margin: 0; padding: .75rem 1rem; color: var(--acento-texto); background: var(--acento-fondo); border-radius: var(--radio); }

.bloque { margin-top: 2.5rem; }
.bloque > h2, .llamada h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }

.tarjetas-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .875rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.tarjetas-pasos li { position: relative; padding: 1.25rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); counter-increment: paso; }
.tarjetas-pasos li::after { content: counter(paso); position: absolute; top: 1rem; right: 1.25rem; color: var(--borde-suave); font-size: 2.5rem; font-weight: 800; line-height: 1; }
.tarjetas-pasos svg { width: 3rem; height: 3rem; padding: .625rem; fill: none; stroke: var(--acento-texto); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: var(--acento-fondo); border-radius: 50%; }
.tarjetas-pasos h3 { margin: .75rem 0 .25rem; font-size: 1.125rem; }
.tarjetas-pasos p { margin: 0; color: var(--texto-suave); }

.ejemplos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .875rem; margin: 0; padding: 0; list-style: none; }
.ejemplos li { --color: var(--cupon-verde); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 1rem; padding: 1rem 1.25rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: inset 5px 0 0 var(--color), var(--sombra); }
.ejemplos li:nth-child(2) { --color: var(--cupon-rojo); }
.ejemplos li:nth-child(3) { --color: var(--acento); }
.ejemplos span { grid-column: 1; color: var(--texto-suave); }
.ejemplos__descuento { color: var(--cupon-verde) !important; font-weight: 700; }
.ejemplos strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.nota { color: var(--texto-suave); font-size: .9375rem; }

.llamada { margin-top: 2.5rem; padding: 1.75rem 1.5rem; color: #fff; background: linear-gradient(135deg, var(--marca), var(--marca-oscura)); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.llamada h2 { margin-top: 0; }
.llamada p { margin: 0 0 1.25rem; color: var(--sobre-marca-suave); }

.preguntas { display: grid; gap: .5rem; }
.preguntas details { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .75rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; color: var(--acento-texto); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { margin: 0; padding: 0 1rem 1rem; color: var(--texto-suave); }

.cupones { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .875rem; margin: -3.25rem 0 1rem; padding: 0; list-style: none; }
.cupon { padding: .375rem; color: #fff; background: var(--cupon-rojo); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.cupon:nth-child(2n) { background: var(--cupon-verde); }
.cupon:nth-child(3n) { background: var(--marca-oscura); }
.cupon__interior { display: grid; gap: .25rem; height: 100%; padding: 1rem; border: 2px dashed rgb(255 255 255 / 75%); border-radius: 12px; }
.cupon__cifra { font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }

.comercios { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; padding: 0; list-style: none; }
.comercio { display: grid; gap: .125rem; padding: 1rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.comercio a { justify-self: start; padding: .25rem 0; }

/* Canje */

.cliente { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.cliente__iniciales { flex: none; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: var(--marca); font-weight: 700; background: #dbe5f6; border-radius: 50%; }
.cliente h1 { margin: 0; font-size: 1.375rem; }
.cliente p { margin: 0; color: var(--texto-suave); font-size: .9375rem; }

.bonos { display: grid; gap: .625rem; margin: 1rem 0; padding: 0; list-style: none; }
.bono { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; align-items: center; padding: .75rem 1rem; background: var(--superficie); border-left: 6px solid var(--cupon-rojo); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra); }
.bono:nth-child(2n) { border-left-color: var(--cupon-verde); }
.bono:nth-child(3n) { border-left-color: var(--marca-oscura); }
.bono span { grid-column: 1; color: var(--texto-suave); font-size: .9375rem; }
.bono span.bono__estado { grid-column: 1 / -1; margin-top: .25rem; color: var(--texto); font-weight: 600; }
.bono span.bono__estado--disponible { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: .125rem .625rem; color: var(--correcto-texto); font-size: .875rem; background: var(--correcto-fondo); border-radius: 99px; }
.bono--usado { background: #eceff5; border-left-color: var(--borde) !important; box-shadow: none; }

.opciones { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.opciones legend { padding: 0; margin-bottom: .375rem; font-weight: 600; }
.opcion { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; background: var(--fondo); border: 2px solid var(--borde-suave); border-radius: var(--radio); cursor: pointer; }
.opcion:has(input:checked) { background: #eaf0fb; border-color: var(--marca); }
.opcion input { width: 1.375rem; height: 1.375rem; flex: none; margin: .125rem 0 0; accent-color: var(--marca); }

.vista-previa img { display: block; max-width: 100%; max-height: 24rem; background: #fff; border: 1px solid var(--borde-suave); border-radius: var(--radio); }
.vista-previa p { margin: 0 0 .5rem; font-weight: 600; }

.a-cobrar { display: grid; gap: .125rem; margin: 1rem 0; padding: 1.5rem 1rem; text-align: center; color: #fff; background: var(--marca); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.a-cobrar strong { font-size: 3.25rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.a-cobrar__detalle { color: var(--acento-claro); font-size: 1.0625rem; font-weight: 500; }

/* Datos */

.sin-salto { white-space: nowrap; }

.canjes { display: grid; gap: .75rem; margin: 1rem 0; padding: 0; list-style: none; }
.canje { padding: 1rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.canje p { margin: 0; }
.canje__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--texto-suave); font-size: .9375rem; }
.canje__cliente { margin-top: .25rem !important; font-weight: 600; overflow-wrap: anywhere; }
.canje__comercio { color: var(--texto-suave); font-size: .9375rem; }
.canje__bonos { margin-top: .5rem !important; color: var(--marca); font-size: 1.25rem; font-weight: 700; }
.canje__importes { margin: .5rem 0; }
.canje__importes div { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; border-top: 1px solid var(--borde-suave); }
.canje__importes dt { color: var(--texto-suave); }
.canje__importes dd { margin: 0; font-weight: 600; white-space: nowrap; }
.canje__enlace { display: block; padding: .625rem 0 .125rem; font-weight: 600; }

.etiqueta { padding: .125rem .625rem; font-size: .875rem; font-weight: 600; border-radius: 99px; }
.etiqueta--anulado { color: var(--error-texto); background: var(--error-fondo); }

.solo-escritorio { display: none; }

@media (min-width: 52rem) {
    .solo-movil { display: none; }
    .solo-escritorio { display: block; }
}

.tabla-contenedor { overflow-x: auto; margin: 1rem 0; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabla th, .tabla td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--borde-suave); }
.tabla th { color: var(--texto-suave); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }

/* Ayuda, escrita en Markdown */

.ayuda { max-width: 46rem; }
.ayuda table { display: block; overflow-x: auto; margin: 1rem 0; border-collapse: collapse; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.ayuda th, .ayuda td { padding: .625rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde-suave); }
.ayuda th { color: var(--texto-suave); font-size: .875rem; font-weight: 600; }
.ayuda tr:last-child td { border-bottom: 0; }
.ayuda li + li { margin-top: .375rem; }
.ayuda blockquote { margin: 1rem 0; padding: .75rem 1rem; background: #e9eef8; border-left: 4px solid var(--marca); border-radius: var(--radio); }
.ayuda blockquote p { margin: 0; }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.resumen div { padding: .875rem 1rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.resumen dt { color: var(--texto-suave); font-size: .9375rem; }
.resumen dd { margin: .125rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }

.ficha { margin: 1rem 0; padding: .25rem 1.25rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.ficha div { padding: .625rem 0; border-bottom: 1px solid var(--borde-suave); }
.ficha div:last-child { border-bottom: 0; }
.ficha dt { color: var(--texto-suave); font-size: .9375rem; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

.credito { display: block; width: 100%; height: .875rem; margin: .5rem 0; overflow: hidden; appearance: none; background: var(--borde-suave); border: 0; border-radius: 99px; }
.credito::-webkit-progress-bar { background: var(--borde-suave); border-radius: 99px; }
.credito::-webkit-progress-value { background: var(--acento); border-radius: 99px; }
.credito::-moz-progress-bar { background: var(--acento); border-radius: 99px; }

.filtros { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: 1rem; }
.filtros a { display: inline-block; padding: .375rem 0; }
.filtros a[aria-current] { color: var(--texto); font-weight: 700; }

.filtro-canjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end; margin-bottom: 1rem; padding: 1.25rem; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); }

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 1rem 0; }
.paginacion a { display: inline-block; padding: .5rem 0; }

.ticket { display: block; max-width: 100%; max-height: 40rem; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); }

@media (max-width: 26rem) {
    .marca img { height: 2.5rem; }
    .marca span { font-size: .9375rem; }
    .cabecera { padding-inline: .75rem; }
    .cabecera--publica .marca span { display: none; }
    /* El menú del comercio cabe en una fila desde 360 px */
    .navegacion { padding-inline: .5rem; }
    .navegacion a { padding-inline: .375rem; }
}

@media (prefers-reduced-motion: reduce) {
    .boton { transition: none; }
    .boton:active { transform: none; }
}