/* Sección «Tipos de tarjeta» de la página de inicio (tarjetas como en iPhone y Android). */

.tt-sec .tt-barra{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 26px}
.tt-sec .tt-plat{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;background:#e7ece9;border-radius:12px;padding:4px}
.tt-sec .tt-plat button{border:0;background:transparent;border-radius:9px;padding:9px 18px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;color:#55615b}
.tt-sec .tt-plat button.on{background:#fff;color:#06130f;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tt-sec .tt-plat button:focus-visible{outline:2px solid #0f6f43;outline-offset:2px}
.tt-sec .tt-pista{font-size:13px;color:#66736d;min-width:220px}
.tt-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;max-width:960px;margin:0 auto}
.tt-item{min-width:0;cursor:default;outline:none;text-align:left}
.tt-item .tt-n{font-size:12px;color:#66736d;font-variant-numeric:tabular-nums}
.tt-item h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:2px 0 10px}
.tt-marco{border-radius:18px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tt-item:hover .tt-marco,.tt-item:focus-visible .tt-marco,.tt-item.vivo .tt-marco{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,19,15,.14)}
.tt-item p{font-size:14px;line-height:1.5;color:#66736d;margin:12px 0 0}
.tt-item p b{color:#06130f;font-weight:600}
.tt-sec .tt-prev{padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;--ink:#111713;--line:#e2e8e3;--green-dark:#0f6f43}
.tt-sec .pop{animation:ttpop .45s ease}
@keyframes ttpop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.tt-sec .listo{animation:ttbrillo 1.2s ease}
@keyframes ttbrillo{0%,100%{filter:none}50%{filter:brightness(1.12)}}
@media(max-width:1000px){.tt-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tt-rejilla{grid-template-columns:minmax(0,1fr)}.tt-item{max-width:360px;margin:0 auto;width:100%}}
@media(prefers-reduced-motion:reduce){.tt-marco{transition:none}.tt-sec .pop,.tt-sec .listo{animation:none}}

/* Vista previa de Wallet (copiada del panel, con nombres propios para no chocar con la web) */

.tt-prev{background:linear-gradient(150deg,#eef3ee,#e2eae4);border:1px solid var(--line);border-radius:24px;padding:26px;position:relative;overflow:hidden;min-height:260px}
.tt-prev:before{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-100px;background:radial-gradient(circle,rgba(37,207,121,.14),transparent 65%)}
.preview-label{position:relative;z-index:2;margin:0 0 16px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green-dark)}
.ttw-card{position:relative;z-index:2;max-width:360px;margin:auto;border-radius:20px;overflow:hidden;background:var(--ttw-accent,#D9782D);color:var(--ttw-ink,#fff);box-shadow:0 24px 50px rgba(0,0,0,.24);padding:20px 22px 22px}
.ttw-top{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}
.ttw-brand{display:flex;align-items:center;gap:9px;min-width:0}
.ttw-brand img{width:26px;height:26px;object-fit:contain;border-radius:7px;background:rgba(255,255,255,.18);flex:0 0 26px}
.ttw-brand span{font-size:11px;font-weight:700;opacity:.85}
.ttw-top.has-wide-logo .ttw-brand img{width:auto;height:34px;max-width:220px;border-radius:0;background:none;flex:0 0 auto}
.ttw-top.has-wide-logo .ttw-brand span{display:none}
.ttw-title{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.2;overflow-wrap:break-word;margin-bottom:16px;text-align:center}
.ttw-module{background:rgba(255,255,255,.09);border-radius:18px;padding:20px 14px 16px;margin-bottom:18px}
.ttw-tagline{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ttw-tagline-color,inherit);opacity:.85;margin-bottom:14px;text-align:center}
.ttw-points{margin-bottom:0;text-align:center}
.ttw-points span{font-size:9.5px;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.ttw-points strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:1px}
.ttw-barcode{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:14px}
.ttw-qr-box{background:#fff;border-radius:14px;padding:10px;line-height:0}
.ttw-qr-box canvas{width:104px!important;height:104px!important;display:block}
.ttw-barcode span{font-size:9.5px;opacity:.8;text-align:center}
.ttw-hero{border-radius:14px;transition:background .2s;position:relative;
  aspect-ratio:1032/336;overflow:hidden;margin:0 -10px;padding:0;
  display:flex;flex-direction:column;justify-content:center;gap:6px}
.ttw-hero.has-photo{background-size:cover}
.ttw-hero.has-photo .tt-strow,.ttw-hero.has-photo .tt-rew{position:relative;z-index:1}
.ttw-hero.has-photo:after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.4) 55%,rgba(0,0,0,.62));z-index:0}
.ttw-hero.has-cutout{background-repeat:no-repeat}
.ttw-hero.has-libre{background-size:cover;background-position:center;padding:0;aspect-ratio:1032/336;overflow:hidden}
.ttw-hero.has-libre .tt-strow,.ttw-hero.has-libre .tt-rew{position:absolute;transform:translate(-50%,-50%);margin:0}
.ttw-hero.has-libre .tt-strow{z-index:1}
.ttw-hero.has-libre .tt-rew{z-index:2}
.ttw-hero.has-libre .tt-rew[hidden]{display:none}
.ttw-hero.has-libre .libre-draggable,.tta-strip.has-libre .libre-draggable{cursor:grab;touch-action:none}
.ttw-hero.has-libre,.tta-strip.has-libre{cursor:move;touch-action:none}
.ttw-hero.has-libre.arrastrando-foto,.tta-strip.has-libre.arrastrando-foto{outline:2px dashed rgba(255,255,255,.9);outline-offset:-4px}
.tt-strow{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:320px;margin:0 auto}
.stamp{width:var(--stamp-size,42px);height:var(--stamp-size,42px);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:rgba(255,255,255,.12);border:1.5px dashed rgba(255,255,255,.85);color:rgba(255,255,255,.7)}
.stamp svg{width:60%;height:60%}
.stamp img{width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:.6}
.stamp.filled{background:#fff;border-style:solid;border-color:transparent;color:var(--ttw-accent,#D9782D);box-shadow:0 3px 6px rgba(0,0,0,.22)}
.stamp.filled svg{color:var(--ttw-accent,#D9782D)}
.stamp.filled img{opacity:1;object-fit:contain;padding:5px}
.stamp.sin-circulo{background:none;border:none;box-shadow:none}
.stamp.sin-circulo img{border-radius:0;object-fit:contain;padding:0;opacity:1}
.stamp.sin-circulo:not(.filled) img{filter:grayscale(1);opacity:.55}
.tt-rew{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;margin-top:16px}
.ttw-hero:not(.has-libre) .tt-rew{margin-top:0}
.tt-rew svg{width:19px;height:19px;flex:0 0 19px;color:var(--ttw-tt-rew-color,inherit)}
.tt-rew img{width:19px;height:19px;flex:0 0 19px;object-fit:contain}
.tt-rew strong{font-size:13px;font-weight:750}
.ttw-textmodule{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:750}
.ttw-textmodule svg{width:16px;height:16px}
.ttw-hero-real{display:none;width:100%;height:100%;object-fit:cover;border-radius:14px}
.ttw-hero.showing-real{aspect-ratio:1032/336;overflow:hidden;padding:0;background:none}
.ttw-hero.showing-real .ttw-hero-real{display:block}
.ttw-hero.showing-real .tt-strow,.ttw-hero.showing-real .tt-rew,.ttw-hero.showing-real:after{display:none}
.ttw-toggle{position:relative;z-index:2;display:flex;gap:6px;background:#e1e8e2;border-radius:12px;padding:4px;margin:0 auto 16px;max-width:300px}
.ttw-toggle-btn{flex:1;border:0;background:none;padding:8px 10px;border-radius:9px;font-size:11.5px;font-weight:750;color:#5e6a62;cursor:pointer;transition:.15s}
.ttw-toggle-btn.active{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.tta-card{position:relative;z-index:2;max-width:360px;margin:auto;border-radius:26px;overflow:hidden;background:var(--ttw-accent,#D9782D);color:var(--ttw-ink,#fff);box-shadow:0 24px 50px rgba(0,0,0,.24);font-family:-tta-system,'SF Pro Text',system-ui,sans-serif}
.tta-header{position:relative;z-index:1;display:flex;align-items:center;padding:16px 18px 4px}
.tta-header img{height:45px;max-width:188px;object-fit:contain;object-position:left center}
.tta-strip{position:relative;aspect-ratio:375/144;background-color:var(--ttw-accent,#D9782D);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:center;gap:10px}
.tta-strip:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28));pointer-events:none}
.tta-strip-tagline{position:relative;z-index:2;text-align:center;font-size:13px;font-weight:600;letter-spacing:.02em;opacity:.92;padding:0 16px}
.tta-tt-strow{position:relative;z-index:1;display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:300px;margin:0 auto}
.tta-tt-strow .stamp{width:var(--stamp-size,30px);height:var(--stamp-size,30px)}
.tta-strip.has-libre:after{content:none}
.tta-strip.has-libre .tta-tt-strow,.tta-strip.has-libre #appleLibrePremio{position:absolute;transform:translate(-50%,-50%);padding-top:0;margin:0;max-width:none}
.tta-strip.has-libre .tta-strip-tagline{position:absolute;top:10px;left:0;right:0;margin:0;z-index:2}
.tta-strip.has-libre #appleLibrePremio{z-index:2}
.tta-strip{--tta-stamp-circle:#fff}
.tta-strip .stamp.filled{background:var(--tta-stamp-circle)}
.tta-strip .stamp.sin-circulo{background:none}
.tta-fields{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:6px 10px;padding:14px 20px}
.tta-field{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 auto}
.tta-field-premio{flex:1 1 0%;min-width:88px}
.tta-field:not(.tta-field-premio){flex:0 1 auto;max-width:96px}
.tta-field:not(.tta-field-premio) .tta-field-label,
.tta-field:not(.tta-field-premio) strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tta-field-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;opacity:.75}
.tta-field strong{font-size:15px;font-weight:800;letter-spacing:-.01em;overflow-wrap:break-word}
.tta-field-premio strong{font-size:14px}
.tta-barcode{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 20px 22px}
.tta-qr-box{background:#fff;border-radius:12px;padding:9px;line-height:0}
.tta-qr-box canvas{width:92px!important;height:92px!important;display:block}
.tta-barcode span{font-size:9.5px;opacity:.8;text-align:center}
.tta-info-dot{position:absolute;right:14px;bottom:14px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1}
.tta-strip-real{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tta-strip.showing-real .tta-strip-real{display:block}
.tta-strip.showing-real .tta-strip-tagline,.tta-strip.showing-real .tta-tt-strow,.tta-strip.showing-real:after{display:none}
@media(max-width:840px){.ttw-toggle-btn{min-height:40px;font-size:13px}}

.tt-vw .ttw-hero{background-color:rgba(0,0,0,.18);background-size:cover;background-position:center;background-repeat:no-repeat}
.tt-vw .tt-vw-pts{display:flex;justify-content:center;gap:12px}
.tt-vw .tt-vw-pts .ttw-points{flex:1 1 0;min-width:0}
.tt-vw .tt-vw-pts .ttw-points strong{overflow-wrap:break-word}
.tt-vw .tt-vw-pts.dos .ttw-points strong{font-size:13px}
.tt-vw .tta-header{gap:10px}
.tt-vw .tta-header img{min-width:0}
.tt-vw .tt-vw-socio{text-align:center;margin:-8px 0 14px;font-size:12px}
.tt-vw .tt-vw-socio span{display:block;font-size:9.5px;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.tt-vw .tt-vw-socio strong{font-size:14px}
.tt-vw .tt-vw-cab{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.04em;text-align:right;white-space:nowrap}
.tt-vw .tta-strip{height:auto;aspect-ratio:375/123}
.tt-vw .tta-strip:after{content:none}
.tt-vw .tta-field.tt-vw-der{text-align:right;margin-left:auto}
.tt-vw .tta-fields.tt-vw-tres{gap:6px 8px;padding-left:16px;padding-right:16px}
.tt-vw .tta-fields.tt-vw-tres .tta-field{flex:1 1 auto;max-width:none}
.tt-vw .tta-fields.tt-vw-tres .tta-field strong{font-size:12.5px}
.tt-vw .tta-fields.tt-vw-tres .tta-field.tta-field-premio{flex:2 1 0}


/* Ejemplos de la web: logo ancho con el nombre, tiras dibujadas y cambio de color al subir de nivel */
.tt-sec .ttw-card,.tt-sec .tta-card{transition:background-color .7s ease,color .7s ease}
.tt-sec .tta-header img.tt-ancho{height:40px;max-width:220px}
.tt-sec .tt-tira{position:relative;overflow:hidden}
.tt-sec .ttw-hero.tt-tira{aspect-ratio:1032/336;padding:0;border-radius:14px}
.tt-sec .tta-strip.tt-tira{aspect-ratio:375/123}
.tt-sec .tt-tira .tt-ilu{position:absolute;inset:0;width:100%;height:100%;display:block}
.tt-sec .tt-pro{font-size:11px;font-weight:800;background:#06130f;color:#fff;border-radius:99px;padding:2px 7px;vertical-align:3px}
@media(prefers-reduced-motion:reduce){.tt-sec .ttw-card,.tt-sec .tta-card{transition:none}}

/* Botones «Ver como en iPhone / Android» debajo del texto, estilo botón de Wallet */
.tt-sec .tt-barra{flex-direction:column;gap:12px;margin:4px 0 30px}
.tt-sec .tt-sub{margin:0;font-size:15px;color:#66736d}
.tt-sec .tt-plat{display:flex;gap:12px;background:none;padding:0;border-radius:0}
.tt-sec .tt-plat button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:150px;padding:9px 20px;border-radius:12px;background:#000;color:#fff;font-size:19px;font-weight:600;line-height:1.1;letter-spacing:-.01em;box-shadow:none;border:2px solid #000;transition:transform .15s,box-shadow .15s,opacity .15s;opacity:.55}
.tt-sec .tt-plat button small{font-size:11px;font-weight:500;opacity:.85;letter-spacing:0}
.tt-sec .tt-plat button.on{background:#000;color:#fff;opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 5px #2fda7f}
.tt-sec .tt-plat button:hover{opacity:1;transform:translateY(-1px)}
.tt-sec .tt-pista{min-width:0;text-align:center}
.tt-sec .tt-plat button{flex-direction:row;align-items:center;gap:10px;min-width:176px;font-size:18px}
.tt-sec .tt-plat button span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
@media(max-width:420px){.tt-sec .tt-plat button{min-width:0;padding:9px 14px;font-size:16px}}