/* Beneficios en marcas: usa los tokens de home.css (--surface, --border, --orange, --text2, --label, --ice) */
.ben-lead{color:var(--text2);font-size:clamp(17px,1.5vw,19px);max-width:36em;margin-top:6px}
.ben-grid,.ben-tiles{list-style:none;padding:0}
.ben-grid{display:grid;gap:14px;margin-top:18px}
.ben-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px;margin:0}
.page .ben-card p,.page .ben-card li{margin-top:0}
.ben-logo{background:#F5F6F8;border-radius:14px;min-height:84px;display:flex;align-items:center;padding:12px 16px;margin-bottom:6px}
.ben-logo img{max-height:40px;max-width:100%;width:auto;height:auto}
.ben-wm{font-weight:700;letter-spacing:-.02em;color:#0E1116}
.ben-cat{color:var(--label);font-size:14.5px}
.page .ben-off,.ben-off{font-weight:700;font-size:19px;color:var(--ice);margin-top:4px}
.page .ben-plus,.ben-plus{color:var(--text2);font-size:16px}
.plus-tag{display:inline-block;background:var(--orange);color:#0E1116;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-right:6px}
.ben-link{color:var(--orange);font-weight:700;font-size:15px;margin-top:6px;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.ben-how{padding-left:22px;display:grid;gap:4px}
.ben-note{color:var(--label);font-size:14.5px;margin-top:16px}
@media (min-width:700px){.ben-grid{grid-template-columns:1fr 1fr}}

/* Portada: todas las marcas de un vistazo, en tarjetas con el logo grande */
.ben-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 22px}
.ben-tile{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:4px;transition:transform .25s ease,border-color .25s,box-shadow .25s}
.ben-tile:hover{transform:translateY(-4px);border-color:rgba(255,90,31,.55);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.ben-tile-logo{background:#F5F6F8;border-radius:14px;height:78px;display:flex;align-items:center;justify-content:center;padding:12px 16px;margin-bottom:8px;text-align:center}
.ben-tile-logo img{max-height:56px;max-width:100%;width:auto;height:auto}
.ben-tile-logo .ben-wm{font-size:clamp(16px,1.5vw,20px);line-height:1.1}
.ben-tile-cat{color:var(--label);font-size:14px;padding:0 4px}
.ben-tile-off{font-weight:700;font-size:18px;color:var(--ice);padding:0 4px;margin-top:2px}
.ben-tile-off.ben-tbc{font-weight:400;font-size:14.5px;color:var(--label);font-style:italic}
.ben-tile-plus{color:var(--text2);font-size:14.5px;padding:0 4px;margin-top:2px}
.ben-star{border-color:rgba(255,90,31,.55);background:linear-gradient(160deg,#1c2640,#161B22 70%);box-shadow:0 24px 70px -30px rgba(53,86,196,.6)}
@media (max-width:760px){.ben-tiles{grid-template-columns:repeat(2,1fr);gap:12px}.ben-tile-logo{height:78px}.ben-tile-off{font-size:16px}}
@media (prefers-reduced-motion:reduce){.ben-tile{transition:none}.ben-tile:hover{transform:none}}

/* Logos reales y nombre de la marca como título debajo */
.ben-logo,.ben-tile-logo{justify-content:center}
.ben-logo img{max-height:48px}
.ben-name,.page .ben-name{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ice);margin:2px 0 0;line-height:1.25}
.ben-tile-name{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ice);margin:0;padding:0 4px;line-height:1.25}

/* Logos sobre cristal oscuro (sin caja blanca): versión monocroma clara; los que ya vienen claros (.keep) se dejan tal cual */
.ben-logo,.ben-tile-logo{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09)}
.ben-logo img,.ben-tile-logo img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.95}
.ben-logo img.keep,.ben-tile-logo img.keep{filter:none;opacity:1}
.ben-logo .ben-wm,.ben-tile-logo .ben-wm{color:var(--ice)}

/* Logo más alto (Viator con «A TripAdvisor Company»): todas las cajas un poco más altas para que no se descuadren */
.ben-logo{min-height:96px}
.ben-tile-logo{height:96px}
.ben-logo img.logo-alto{max-height:72px}
.ben-tile-logo img.logo-alto{max-height:74px}
@media (max-width:760px){.ben-tile-logo{height:96px}}

/* Código de descuento */
.ben-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:.92em;letter-spacing:.04em;color:var(--ice);background:rgba(255,90,31,.16);border:1px dashed rgba(255,90,31,.7);border-radius:8px;padding:1px 8px}

/* Botón de beneficio (enlace de afiliado + copia del código) */
.ben-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:8px;padding:0 20px;border-radius:99px;background:var(--orange);color:#0E1116;font-weight:700;font-size:15.5px;text-decoration:none;align-self:flex-start}
.ben-btn:hover{filter:brightness(1.08)}
.ben-revealed{color:var(--ice);font-size:15px;margin-top:10px}
.ben-small{color:var(--label);font-size:13px;margin-top:8px}

/* Aviso al pulsar «Obtener el descuento»: copiado + redirigiendo (animado) */
.ben-redirect{margin-top:10px}
.ben-redirect[hidden]{display:none}
.ben-revealed{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.ben-check{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:#0E1116;font-weight:700;font-size:13px}
.ben-redirect.is-ready .ben-check{animation:benpop .35s cubic-bezier(.2,.9,.3,1.4)}
.ben-redirect.is-ready .ben-revealed{animation:benin .4s ease both}
.ben-redirecting{color:var(--text2);font-size:14.5px;margin:6px 0 0}
.ben-hint{color:var(--label)}
.ben-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.ben-bar i{display:block;height:100%;width:0;background:var(--orange);border-radius:4px}
.ben-redirect.is-ready .ben-bar i{animation:benbar 1.8s linear forwards}
.ben-redirect.is-sent .ben-bar{display:none}
.ben-btn.is-done{background:var(--green);pointer-events:none}
@keyframes benbar{to{width:100%}}
@keyframes benpop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes benin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ben-redirect.is-ready .ben-bar i{animation:none;width:100%}.ben-redirect.is-ready .ben-check,.ben-redirect.is-ready .ben-revealed{animation:none}}
.page .ben-card a.ben-btn,.page .ben-card a.ben-btn:hover{text-decoration:none!important;color:#0E1116!important;border:0}
.page .ben-card a.ben-btn.is-done{background:var(--green)}
.ben-card .ben-btn{width:fit-content}

.ben-copy{font:inherit;font-weight:700;font-size:13px;color:#0E1116;background:var(--ice);border:0;border-radius:99px;padding:5px 14px;cursor:pointer;margin-left:6px}
.ben-copy:hover{filter:brightness(.92)}
.ben-copy.is-copied{background:var(--green)}

/* Con pocas marcas visibles, las cajas se reparten el ancho (en vez de dejar columnas vacías) */
.ben-tiles{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Las cajas de la home llevan los mismos botones que las tarjetas de /beneficios */
.ben-tile .ben-btn,.ben-tile .ben-copy{align-self:flex-start}
.ben-tile .ben-btn{margin:8px 4px 0;width:fit-content;text-decoration:none}
.ben-tile .ben-link{margin:4px 4px 2px}
.ben-tile .ben-redirect{margin:10px 4px 0}
.ben-tile .ben-small{padding:0 4px;margin:8px 0 2px}
.ben-tile-plus .ben-code{font-size:.9em}
.ben-tile-plus .plus-tag{margin-right:6px}