/* =============================================================
   TapUp · La portada nueva (7 oct 2026)
   Todo lo de la portada de membresías lleva el prefijo pt-. Lo de la
   base (header, botones, secciones, pie, FAQ) sigue en styles.css; la
   tarjeta de metal en metal.css. Referencia visual: Calendly con los
   colores de TapUp — mucho aire, pocas cosas y grandes.
   ============================================================= */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pt-ancla { position: relative; top: -80px; display: block; height: 0; }
.section__head--centro { text-align: center; margin-inline: auto; }
.section__head--centro .section__lead { margin-inline: auto; }

/* ---------- 1. Hero ---------- */
.pt-hero {
  position: relative;
  padding-block: clamp(36px, 6vw, 84px) clamp(40px, 6vw, 80px);
  background:
    radial-gradient(60% 60% at 85% 20%, rgba(37, 99, 235, .10), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(30, 27, 75, .06), transparent 70%),
    var(--white);
  overflow: hidden;
}
.pt-hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .pt-hero__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.pt-hero__titulo {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--indigo);
  margin: 10px 0 18px;
}
.pt-hero__titulo span { color: var(--blue); display: block; }
.pt-hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.55;
  color: var(--text-body);
  max-width: 34em;
  margin: 0 0 26px;
}
.pt-hero__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.pt-hero__puntos {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: .9rem; color: var(--text-muted);
}
.pt-hero__puntos li::before { content: '✓'; color: var(--blue); font-weight: 700; margin-right: 6px; }

.pt-hero__visual { position: relative; min-height: 300px; }
.pt-hero__placa {
  display: block; width: 100%; max-width: 560px; height: auto;
  border-radius: 22px;
  box-shadow: 0 30px 60px -28px rgba(30, 27, 75, .45);
}
.pt-hero__tel {
  position: absolute; right: 0; bottom: -18px;
  width: clamp(150px, 34%, 210px);
}
@media (max-width: 959px) {
  .pt-hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .pt-hero__tel { right: 4%; bottom: -24px; width: 38%; }
}

/* ---------- El celular (marco para las vistas previas) ---------- */
.pt-tel {
  width: 250px; max-width: 100%;
  aspect-ratio: 9 / 18.5;
  border-radius: 34px;
  background: #0F172A;
  padding: 8px;
  box-shadow: 0 30px 60px -24px rgba(30, 27, 75, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pt-tel__pantalla {
  width: 100%; height: 100%;
  border-radius: 27px;
  background: var(--white);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  color: var(--indigo);
}
.pt-hero__tel .pt-tel__pantalla { font-size: 9px; }

/* Página del negocio (hero) */
.pt-pag { display: flex; flex-direction: column; align-items: center; padding-bottom: 10px; background: #F8FAFC; }
.pt-pag__portada { width: 100%; height: 26%; background-size: cover; background-position: center; }
.pt-pag__logo {
  width: 3.6em; height: 3.6em; margin-top: -1.8em;
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 1.3em; box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}
.pt-pag__nombre { font-size: 1.35em; margin-top: .4em; }
.pt-pag__sub { color: var(--text-muted); margin-bottom: .8em; }
.pt-pag__boton {
  width: 86%; margin-top: .55em; padding: .75em .9em;
  border-radius: 1em; background: #fff; border: 1px solid var(--gray-200);
  font-weight: 600; display: flex; align-items: center; gap: .5em;
}
.pt-pag__boton i { font-style: normal; }
.pt-pag__boton--azul { background: var(--blue); color: #fff; border-color: var(--blue); justify-content: center; }

/* ---------- 2. Todo en uno ---------- */
.pt-junto__rejilla {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px; margin: 0 auto;
}
@media (min-width: 720px) { .pt-junto__rejilla { grid-template-columns: 1fr 1fr; } }
.pt-junto__caja {
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  border: var(--border);
  background: var(--white);
}
.pt-junto__caja--tapup {
  background: var(--indigo); color: #fff; border-color: var(--indigo);
  box-shadow: 0 24px 50px -26px rgba(30, 27, 75, .7);
}
.pt-junto__titulo { font-weight: 700; color: var(--text-muted); margin: 0 0 14px; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.pt-junto__logo { height: 26px; width: auto; aspect-ratio: var(--ratio-lockup); fill: currentColor; color: #fff; }
.pt-junto__lista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 11px; }
.pt-junto__lista li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.pt-junto__caja--antes .pt-junto__lista li { color: var(--text-body); }
.pt-junto__caja--antes .pt-junto__lista li::before { content: '✕'; color: #94A3B8; font-weight: 700; }
.pt-junto__caja--tapup .pt-junto__lista li::before { content: '✓'; color: #7DD3FC; font-weight: 800; }
.pt-junto__pie { margin: 0; padding-top: 14px; border-top: 1px solid var(--gray-200); font-weight: 700; color: var(--text-muted); }
.pt-junto__caja--tapup .pt-junto__pie { border-color: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- 3. Pasos ---------- */
.pt-pasos {
  list-style: none; padding: 0; margin: 0 auto; max-width: 960px;
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
  counter-reset: none;
}
@media (min-width: 760px) { .pt-pasos { grid-template-columns: repeat(3, 1fr); } }
.pt-paso { background: var(--white); border: var(--border); border-radius: var(--radius-lg); padding: 22px; }
.pt-paso__n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-tint); color: var(--blue); font-weight: 800;
}
.pt-paso h3 { margin: 12px 0 6px; font-size: 1.1rem; color: var(--indigo); }
.pt-paso p { margin: 0; color: var(--text-body); }

/* ---------- 4. Funciones en pestañas ---------- */
.pt-tabs {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 28px; padding: 5px;
  background: var(--gray-100); border-radius: 999px; width: fit-content; max-width: 100%;
}
.pt-tab {
  border: 0; background: none; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  font: inherit; font-weight: 600; color: var(--text-body);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.pt-tab[aria-selected="true"] { background: var(--white); color: var(--indigo); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.pt-tab:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 600px) {
  .pt-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; border-radius: 16px; scrollbar-width: none; }
  .pt-tabs::-webkit-scrollbar { display: none; }
  .pt-tab { white-space: nowrap; flex: 0 0 auto; }
}

.pt-panel {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px; margin: 0 auto;
}
.pt-panel + .pt-panel { margin-top: 48px; }
.js-tabs .pt-panel + .pt-panel { margin-top: 0; }
.js-tabs .pt-panel[hidden] { display: none; }
@media (min-width: 860px) { .pt-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 56px; } }
.pt-panel__titulo {
  font-family: 'Archivo', 'Inter', sans-serif; font-stretch: 108%;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; color: var(--indigo); margin: 0 0 16px;
}
.pt-panel__lista { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.pt-panel__lista li { position: relative; padding-left: 28px; color: var(--text-body); font-size: 1.04rem; line-height: 1.5; }
.pt-panel__lista li::before {
  content: ''; position: absolute; left: 0; top: .28em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.pt-panel__demo { font-weight: 700; color: var(--blue); text-decoration: none; }
.pt-panel__demo:hover { text-decoration: underline; }
.pt-panel__visual { display: flex; justify-content: center; }
.pt-panel__visual--placa img { width: 100%; max-width: 380px; height: auto; border-radius: 18px; box-shadow: 0 24px 50px -26px rgba(30, 27, 75, .5); }
@media (max-width: 859px) { .pt-panel__visual .pt-tel { width: 230px; } }

/* Fidelidad (Wallet) */
.pt-wallet { background: #E5E7EB; padding: 22px 12px 12px; position: relative; }
.pt-pase {
  background: linear-gradient(160deg, #3B2A20, #6B4A33);
  color: #fff; border-radius: 14px; padding: 12px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
}
.pt-pase__cab { display: flex; justify-content: space-between; align-items: center; font-size: 1.05em; }
.pt-pase__nivel { background: #F5C451; color: #3B2A20; font-weight: 800; padding: 2px 8px; border-radius: 99px; font-size: .85em; }
.pt-pase__sellos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 14px 0 8px; }
.pt-pase__sellos i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .45); }
.pt-pase__sellos i.si { border: 0; background: #F5C451 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B2A20'%3E%3Cpath d='M5 8h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 9h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3C/svg%3E") center / 62% no-repeat; }
.pt-pase__falta { margin: 0 0 10px; opacity: .85; }
.pt-pase__datos { display: flex; gap: 18px; }
.pt-pase__datos span { display: flex; flex-direction: column; opacity: .8; font-size: .9em; }
.pt-pase__datos b { font-size: 1.35em; opacity: 1; }
.pt-pase__qr {
  width: 40%; aspect-ratio: 1; margin: 12px auto 2px; border-radius: 8px;
  background: #fff url('/assets/qr-muestra.svg') center / 84% no-repeat;
}
.pt-aviso {
  position: absolute; left: 10px; right: 10px; top: 8px;
  background: rgba(255, 255, 255, .96); border-radius: 12px;
  padding: 8px 10px; display: flex; flex-direction: column;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
  animation: pt-aviso 4.5s var(--ease-out) infinite;
}
.pt-aviso b { font-size: .95em; }
@keyframes pt-aviso {
  0%, 12% { transform: translateY(-140%); opacity: 0; }
  20%, 78% { transform: translateY(0); opacity: 1; }
  90%, 100% { transform: translateY(-140%); opacity: 0; }
}

/* Menú */
.pt-menu { padding: 14px 12px; background: #FFFBF5; }
.pt-menu__seccion { font-weight: 800; font-size: 1.15em; margin: 4px 0 8px; color: #3B2A20; }
.pt-menu__item { display: flex; gap: 9px; align-items: center; background: #fff; border-radius: 12px; padding: 7px; margin-bottom: 7px; box-shadow: 0 2px 6px rgba(59, 42, 32, .08); }
.pt-menu__item img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.pt-menu__item span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pt-menu__item small { color: var(--text-muted); }
.pt-menu__item u { text-decoration: none; background: #ECFDF5; color: #047857; padding: 0 4px; border-radius: 4px; }
.pt-menu__item em { font-style: normal; font-weight: 800; color: #3B2A20; margin-top: 2px; }
.pt-menu__ia { display: inline-block; margin-top: 6px; background: var(--blue-tint); color: var(--blue); font-weight: 700; padding: 4px 9px; border-radius: 99px; }

/* Reseñas */
.pt-res { padding: 16px 12px; background: #F8FAFC; display: flex; flex-direction: column; gap: 10px; }
.pt-res__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-res__kpis span { background: #fff; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; color: var(--text-muted); border: 1px solid var(--gray-200); }
.pt-res__kpis b { font-size: 1.6em; color: var(--indigo); }
.pt-res__card, .pt-res__ia { background: #fff; border-radius: 12px; padding: 10px; border: 1px solid var(--gray-200); }
.pt-res__card p, .pt-res__ia p { margin: 0; }
.pt-res__quien { margin-bottom: 4px !important; }
.pt-res__estrellas { color: #F59E0B; letter-spacing: 1px; }
.pt-res__ia { background: var(--blue-tint); border-color: #C7D7FE; }
.pt-res__ia span { display: block; font-weight: 800; color: var(--blue); margin-bottom: 4px; }
.pt-res__alerta { background: #FEF2F2; color: #B91C1C; border-radius: 12px; padding: 9px 10px; font-weight: 700; }

/* Clientes */
.pt-cli { padding: 16px 10px; background: #F8FAFC; }
.pt-cli__filtros { display: flex; gap: 6px; margin-bottom: 10px; }
.pt-cli__filtros span { padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--gray-200); font-weight: 600; }
.pt-cli__filtros .on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pt-cli__fila { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 12px; padding: 8px; margin-bottom: 7px; border: 1px solid var(--gray-200); }
.pt-cli__fila--hoy { border-color: #FCD34D; box-shadow: 0 0 0 2px #FEF3C7; }
.pt-cli__fila i { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--blue-tint); color: var(--blue); font-style: normal; font-weight: 800; display: grid; place-items: center; font-size: .9em; }
.pt-cli__fila span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pt-cli__fila small { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-cli__etapa { font-style: normal; font-weight: 700; font-size: .85em; padding: 2px 7px; border-radius: 99px; background: #FEF3C7; color: #92400E; }
.pt-cli__etapa--verde { background: #DCFCE7; color: #166534; }
.pt-cli__etapa--azul { background: var(--blue-tint); color: var(--blue); }
.pt-cli__wa { display: block; text-align: center; margin-top: 10px; background: #16A34A; color: #fff; font-weight: 700; border-radius: 12px; padding: 9px; }

/* ---------- 5. Giros ---------- */
.pt-giros { text-align: center; }
.pt-giros__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pt-giro {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  background: var(--white); color: var(--text-body); border: var(--border);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.pt-giro:hover { border-color: var(--gray-300); }
.pt-giro[aria-selected="true"] { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pt-giro:focus-visible { outline: none; box-shadow: var(--ring); }
.pt-giros__uso {
  margin: 22px auto 0; max-width: 36em; min-height: 3em;
  font-size: 1.12rem; font-weight: 500; color: var(--indigo);
}

/* ---------- 6. Precios ---------- */
.pt-periodo {
  display: flex; gap: 4px; padding: 4px; margin: 0 auto 26px;
  width: fit-content; background: var(--gray-100); border-radius: 999px;
}
.pt-periodo__op {
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 9px 18px; border-radius: 999px; color: var(--text-body);
}
.pt-periodo__op span { font-weight: 600; font-size: .78rem; color: #047857; background: #DCFCE7; padding: 2px 7px; border-radius: 99px; margin-left: 4px; }
.pt-periodo__op[aria-pressed="true"] { background: var(--white); color: var(--indigo); box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.pt-periodo__op:focus-visible { outline: none; box-shadow: var(--ring); }
/* El ahorro del anual, visible en la vista mensual (14 oct 2026). */
.pt-plan__ahorro { color: #047857; font-weight: 600; }

.pt-planes {
  display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1040px; margin: 0 auto;
}
@media (min-width: 900px) { .pt-planes { grid-template-columns: repeat(3, 1fr); } }
.pt-planes[data-periodo-actual="anual"] .pt-solo-mensual,
.pt-planes[data-periodo-actual="mensual"] .pt-solo-anual { display: none; }
.pt-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
}
.pt-plan--destacado { border: 2px solid var(--blue); box-shadow: 0 26px 50px -30px rgba(37, 99, 235, .55); }
.pt-plan__insignia {
  position: absolute; top: -12px; left: 24px;
  background: var(--blue); color: #fff; font-size: .78rem; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.pt-plan__nombre { margin: 0; font-size: 1.3rem; color: var(--indigo); }
.pt-plan__para { margin: 2px 0 16px; color: var(--text-muted); }
.pt-plan__precio { margin: 0; color: var(--text-muted); }
.pt-plan__precio b {
  font-family: 'Archivo', 'Inter', sans-serif; font-stretch: 110%;
  font-size: 2.3rem; color: var(--indigo); letter-spacing: -.01em;
}
.pt-plan__nota { margin: 4px 0 18px; font-size: .9rem; color: var(--text-body); min-height: 2.6em; }
.pt-plan__lista { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; flex: 1; }
.pt-plan__lista li { position: relative; padding-left: 24px; color: var(--text-body); font-size: .96rem; }
.pt-plan__lista li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.pt-plan__boton { width: 100%; justify-content: center; }
.pt-precios__todas { text-align: center; margin: 26px auto 6px; font-weight: 600; color: var(--indigo); max-width: 40em; }
.pt-precios__extra { text-align: center; margin: 0 auto 6px; color: var(--text-body); max-width: 44em; }
.pt-precios__confianza { text-align: center; margin: 14px 0 0; font-size: .88rem; color: var(--text-muted); }

/* ---------- 7. Pide tus placas ---------- */
.pt-pedir__rejilla {
  display: grid; gap: 32px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) { .pt-pedir__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

.pt-forma {
  background: var(--white); border: var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px;
  box-shadow: 0 24px 50px -36px rgba(30, 27, 75, .45);
}
.pt-campo { display: grid; gap: 6px; min-width: 0; }
.pt-campo > span { font-weight: 600; color: var(--indigo); font-size: .92rem; }
.pt-campo small { color: var(--text-muted); font-weight: 500; }
.pt-campo input, .pt-campo select, .pt-campo textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 16px; color: var(--indigo);
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--gray-300); background: #fff;
}
.pt-campo textarea { resize: vertical; }
.pt-campo input:focus, .pt-campo select:focus, .pt-campo textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.pt-campo input[aria-invalid="true"] { border-color: #DC2626; }
.pt-campo__par { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .pt-campo__par { grid-template-columns: 1fr 1fr; } }
.pt-logo__caja {
  display: grid; gap: 4px; cursor: pointer; text-align: center;
  padding: 18px; border-radius: 12px; border: 1.5px dashed var(--gray-300); background: var(--gray-50);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.pt-logo__caja b { color: var(--blue); }
.pt-logo__caja span { color: var(--text-muted); font-size: .88rem; }
.pt-logo__caja:hover, .pt-logo.arrastrando .pt-logo__caja { border-color: var(--blue); background: var(--blue-tint); }
#pLogo:focus-visible + .pt-logo__caja { box-shadow: var(--ring); }
.pt-logo__listo { margin: 8px 0 0; font-size: .9rem; color: var(--indigo); font-weight: 600; }
.pt-logo__listo button { border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; }
.pt-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }
.pt-forma__enviar { width: 100%; justify-content: center; }
.pt-forma__enviar[disabled] { opacity: .7; cursor: wait; }
.pt-forma__error { margin: 0; color: #B91C1C; font-weight: 600; }
.pt-forma__legal { margin: 0; font-size: .82rem; color: var(--text-muted); text-align: center; }
.pt-forma--listo { text-align: center; }
.pt-forma--listo p { margin: 0; color: var(--text-body); }
.pt-forma__ok { font-size: 1.3rem; font-weight: 800; color: var(--indigo) !important; }
.pt-forma--listo .btn { justify-self: center; }

/* ---------- 8. Tarjeta de metal ---------- */
.pt-metal__demo { display: inline-block; margin-left: 16px; font-weight: 700; color: var(--blue); text-decoration: none; }
.pt-metal__demo:hover { text-decoration: underline; }
@media (max-width: 520px) { .pt-metal__demo { display: block; margin: 14px 0 0; } }

/* ---------- 10. Cierre ---------- */
.pt-cierre__caja { text-align: center; }
.pt-cierre__caja .section__lead { margin-inline: auto; }
.pt-cierre__botones { justify-content: center; margin-top: 24px; }

/* Con «Reducir movimiento» (común en iPhone) el aviso no se desliza, pero
   sí aparece y se va: si no, el teléfono se veía quieto (8 oct 2026). */
@media (prefers-reduced-motion: reduce) {
  .pt-aviso { animation: pt-aviso-suave 4.5s ease-in-out infinite; }
}
@keyframes pt-aviso-suave {
  0%, 12% { opacity: 0; }
  22%, 78% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* El celular del hero va chico y encima de la placa (la placa manda). */
.pt-hero__visual .pt-hero__tel { width: clamp(118px, 34%, 190px); right: -6px; bottom: -34px; }
.pt-hero__visual { padding-bottom: 34px; }
@media (min-width: 960px) { .pt-hero__titulo { font-size: clamp(2.6rem, 4.6vw, 3.7rem); } }
.pt-hero__visual .pt-hero__placa { width: 80%; }
.pt-hero__visual .pt-hero__tel { width: clamp(112px, 30%, 176px); right: 0; bottom: -10px; }
.pt-panel .pt-tel { aspect-ratio: 9 / 16; }
.pt-plan__lista { align-content: start; }

@media (max-width: 600px) {
  .pt-hero__visual { padding-bottom: 0; }
  .pt-hero__visual .pt-hero__placa { width: 84%; }
  .pt-hero__visual .pt-hero__tel { width: 31%; aspect-ratio: 9 / 13; bottom: -14px; border-radius: 22px; padding: 5px; }
  .pt-hero__visual .pt-tel__pantalla { border-radius: 18px; font-size: 7.5px; }
}
@media (max-width: 959px) { .pt-hero__visual { min-height: 0; margin-bottom: 18px; } }
/* CELULAR (8 oct 2026, Alessandro: «el celular sale muy apachurrado»): el
   teléfono va con proporción de teléfono y más grande, montado sobre la
   esquina de la placa; la placa se recorre a la izquierda para dejarle sitio. */
@media (max-width: 600px) {
  /* El relleno en % es del ancho: deja el alto que le falta al teléfono. */
  .pt-hero__visual { padding-bottom: 44%; margin: 14px auto 8px; }
  .pt-hero__visual .pt-hero__placa { width: 76%; }
  .pt-hero__visual .pt-hero__tel { width: 41%; max-width: 170px; aspect-ratio: 9 / 18.5; right: 0; top: -14px; bottom: auto; border-radius: 26px; padding: 6px; }
  .pt-hero__visual .pt-tel__pantalla { border-radius: 21px; font-size: 8.4px; }
}
/* En celular, primero se ve la demostración y luego el texto. */
@media (max-width: 859px) {
  .pt-panel__visual { order: -1; }
  .pt-panel { gap: 22px; }
}

.metal-adelanto__texto .btn { margin-top: 18px; }

/* ---------- La tarjeta de metal (copiado de premium.css, que la portada nueva ya no carga) ---------- */
/* =============================================================
   TARJETA DE METAL · el adelanto de la portada (24 sep 2026)
   Oscuro, para que el metal luzca. Lleva a /tarjeta-metal.
   ============================================================= */
.metal-adelanto {
  background: radial-gradient(90% 90% at 80% 20%, #2A2A33, #0E0E11 70%);
  color: #E8EAEE;
  overflow: hidden;
}
.metal-adelanto .section__title { color: #fff; }
.metal-adelanto .section__lead { color: #A1A5AE; }
.metal-adelanto__rejilla { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .metal-adelanto__rejilla { grid-template-columns: 1fr 1fr; gap: 48px; } }
.metal-adelanto__insignia {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.metal-adelanto__texto .btn { margin-top: 8px; }
.metal-adelanto__tarjetas { position: relative; display: block; height: 250px; max-width: 420px; margin: 0 auto; width: 100%; }
.metal-adelanto__tarjeta {
  position: absolute;
  left: 50%;
  top: 60px;
  width: min(300px, 78vw);
  transform: translateX(-54%) rotate(-5deg);
  animation: metal-adelanto 7s ease-in-out infinite;
}
.metal-adelanto__tarjeta--atras {
  top: 0;
  transform: translateX(-38%) rotate(7deg) scale(.92);
  animation-name: metal-adelanto-atras;
}
@keyframes metal-adelanto { 0%, 100% { transform: translateX(-54%) rotate(-5deg); } 50% { transform: translateX(-54%) translateY(-8px) rotate(-4deg); } }
@keyframes metal-adelanto-atras { 0%, 100% { transform: translateX(-38%) rotate(7deg) scale(.92); } 50% { transform: translateX(-38%) translateY(6px) rotate(8deg) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .metal-adelanto__tarjeta { animation: none; } }
.metal-adelanto .pt-metal__demo { color: #93B4FF; }

/* ---------- Pide tus placas: la vista previa con el arte real (7 oct 2026) ----------
   El fondo es assets/placa-plantilla-<color>.svg (sale de
   herramientas/placa-para-la-web.mjs, el mismo dibujo de la fábrica). Encima,
   en la zona del sticker (42 %, 8.06 %, 53 % × 46.77 %), el logo y el nombre. */
.pt-vista { margin-top: 22px; max-width: 560px; }
.pt-vista__colores { display: flex; gap: 8px; margin-bottom: 14px; }
.pt-vista__color {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--text-body);
  padding: 7px 14px; border-radius: 999px; border: var(--border); background: var(--white);
}
.pt-vista__color[aria-pressed="true"] { border-color: var(--indigo); color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
.pt-vista__color:focus-visible { outline: none; box-shadow: var(--ring); }
.pt-vista__muestra { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid var(--gray-300); }
.pt-vista__muestra--negra { background: #111114; border-color: #111114; }
.pt-vista__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.pt-vista__item { margin: 0; position: relative; }
.pt-vista__item figcaption { margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--text-muted); text-align: center; }
.pt-vista__placa {
  position: relative; aspect-ratio: 100 / 62; border-radius: 6.5% / 10.5%;
  overflow: hidden; box-shadow: 0 14px 28px -14px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .08);
  container-type: inline-size;
}
.pt-vista__arte { display: block; width: 100%; height: 100%; }
.pt-vista__sticker {
  position: absolute; left: 42%; top: 8.06%; width: 53%; height: 46.77%;
  display: flex; align-items: center; gap: 4cqw; padding: 0 2cqw; box-sizing: border-box;
}
.pt-vista__logo { flex: 0 0 auto; height: 70%; display: flex; align-items: center; }
.pt-vista__logo:empty { display: none; }
.pt-vista__logo img { display: block; height: 100%; width: auto; max-width: 18cqw; object-fit: contain; }
.pt-vista[data-color="negra"] /* Con base: la base de madera, de cara plana, tapa la parte de abajo. */
.pt-vista__soporte { position: relative; }
/* La base real es de cara plana y tapa sólo los 8 mm lisos de abajo (P.ranura). */

.pt-vista__nota { margin: 14px 0 0; color: var(--text-muted); font-size: .9rem; }
@media (max-width: 600px) { .pt-vista__fila { gap: 12px; } }

/* ---------- Ejemplos (cashback, invita a un amigo…) ---------- */
.pt-ejemplos__rejilla {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1040px;
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .pt-ejemplos__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pt-ejemplos__rejilla { grid-template-columns: repeat(3, 1fr); } }
.pt-ej {
  background: var(--white); border: var(--border); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 6px;
}
.pt-ej h3 { margin: 6px 0 0; font-size: 1.12rem; color: var(--indigo); }
.pt-ej p { margin: 0 0 10px; color: var(--text-body); line-height: 1.5; }
.pt-ej__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; }
.pt-ej__icono--verde { background: #DCFCE7; } .pt-ej__icono--azul { background: var(--blue-tint); }
.pt-ej__icono--oro { background: #FEF3C7; } .pt-ej__icono--rosa { background: #FCE7F3; }
.pt-ej__icono--morado { background: #EDE9FE; } .pt-ej__icono--cafe { background: #F5E9DC; }
.pt-ej__burbuja {
  margin-top: auto; align-self: flex-start;
  background: var(--gray-50); border: var(--border); border-radius: 14px 14px 14px 4px;
  padding: 9px 12px; font-size: .88rem; color: var(--indigo);
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, .35);
}

/* ---------- Detalles del hero y de la tarjeta de fidelidad ---------- */
.pt-pag__redes { display: flex; gap: .7em; margin-top: auto; padding-top: .9em; }
.pt-red {
  width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 3px 8px rgba(15, 23, 42, .18);
}
.pt-red svg { width: 58%; height: 58%; }
.pt-red--wa { background: #25D366; }
.pt-red--ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.pt-red--tt { background: #111114; }
.pt-pase__foto {
  height: 4.2em; margin: 10px -12px 0; background-size: cover; background-position: center;
}

/* ---------- La ventana de la tarjeta de metal ---------- */
.pt-dialogo {
  border: 0; padding: 0; border-radius: 22px; width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; background: var(--white);
  box-shadow: 0 40px 80px -20px rgba(15, 23, 42, .5);
}
.pt-dialogo::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.pt-dialogo.con-marco { width: min(1080px, calc(100vw - 32px)); height: calc(100dvh - 32px); overflow: hidden; }
.pt-dialogo__cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15, 23, 42, .08); color: var(--indigo); font-size: 1.6rem; line-height: 1;
}
.pt-dialogo__cerrar:focus-visible { outline: none; box-shadow: var(--ring); }
.pt-dialogo__escoger { padding: 30px 26px 26px; }
.pt-dialogo__escoger h2 { margin: 0 0 4px; font-size: 1.5rem; color: var(--indigo); }
.pt-dialogo__escoger > p { margin: 0 0 18px; color: var(--text-muted); }
.pt-dialogo__ops { display: grid; gap: 12px; }
.pt-dialogo__op {
  display: grid; gap: 4px; text-align: left; cursor: pointer; text-decoration: none;
  font: inherit; padding: 16px 18px; border-radius: 14px; border: var(--border); background: var(--white);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.pt-dialogo__op:hover, .pt-dialogo__op:focus-visible { border-color: var(--blue); background: var(--blue-tint); outline: none; }
.pt-dialogo__op b { color: var(--indigo); font-size: 1.05rem; }
.pt-dialogo__op span { color: var(--text-body); font-size: .92rem; }
.pt-dialogo__marco { width: 100%; height: 100%; }
.pt-dialogo__marco iframe { display: block; width: 100%; height: 100%; border: 0; }
button.metal-adelanto__tarjetas { border: 0; background: none; padding: 0; cursor: pointer; }

/* Sin logo todavía: un recuadro que dice dónde va. */
.pt-vista__logo:empty { display: flex; width: 22cqw; height: 70%; border: 1.5px dashed currentColor; border-radius: 2cqw; opacity: .35; color: #111114; }
.pt-vista[data-color="negra"] .pt-vista__logo:empty { color: #fff; }
.pt-vista__logo:empty::after { content: 'Tu logo'; margin: auto; font-size: 3.4cqw; font-weight: 700; }
.pt-vista__logo:empty { width: 17cqw; }
.pt-dialogo__cerrar { background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(15,23,42,.2); }

/* El logo ocupa TODO el sticker (7 oct 2026): el logo del cliente ya trae el
   nombre de su negocio; no se escribe aparte. */
.pt-vista__sticker { padding: 0; gap: 0; justify-content: center; }
.pt-vista__logo { width: 100%; height: 100%; justify-content: center; }
.pt-vista__logo img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.pt-vista__logo:empty { width: 100%; height: 100%; border-radius: 2.5cqw; }
.pt-vista__logo:empty::after { content: 'Tu logo'; font-size: 4.4cqw; }
/* Con base (D-29): la misma placa, pegada con su 3M sobre una cuña de cara
   plana, inclinada hacia atrás. Se ve la cara de la cuña alrededor y su
   frente abajo. */
.pt-vista__soporte { position: relative; perspective: 700px; padding-bottom: 9%; }
.pt-vista__cuna {
  transform: rotateX(24deg); transform-origin: 50% 100%;
  padding: 3.2%; border-radius: 9px;
  background: linear-gradient(180deg, #E2C49B, #C9A16F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pt-vista__cuna .pt-vista__placa { box-shadow: 0 2px 4px rgba(60, 35, 10, .35); }
.pt-vista__frente {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #B9894F, #9C6E38);
}
.pt-vista__sombra {
  position: absolute; left: 6%; right: 6%; bottom: -6%; height: 8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15, 23, 42, .28), transparent 70%);
  z-index: -1;
}

/* ---------- Comprar: membresía, placas extra y bienvenida (7 oct 2026) ---------- */
.pt-compra { padding: 28px 24px 22px; display: grid; gap: 12px; }
.pt-compra h2 { margin: 0; font-size: 1.6rem; color: var(--indigo); }
.pt-compra__eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.pt-compra__periodo { margin: 4px 0 2px; }
.pt-compra__cuenta { background: var(--blue-tint); border-radius: 12px; padding: 12px 14px; color: var(--text-body); font-size: .93rem; line-height: 1.45; }
.pt-compra__cuenta b { display: block; font-size: 1.15rem; color: var(--indigo); }
.pt-compra__ayuda { margin: -6px 0 0; font-size: .82rem; color: var(--text-muted); }
.pt-compra__transferencia { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; }
.pt-compra__transferencia[hidden] { display: none; }
.pt-compra--listo { text-align: center; }
.pt-compra--listo .btn { justify-self: center; }
.pt-extra { display: grid; gap: 10px; }
.pt-extra__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: var(--border); border-radius: 12px; }
.pt-extra__fila b { display: block; color: var(--indigo); }
.pt-extra__fila small { color: var(--text-muted); }
.pt-extra__cuantas { display: inline-flex; align-items: center; gap: 10px; }
.pt-extra__cuantas button { width: 36px; height: 36px; border-radius: 50%; border: var(--border); background: var(--white); font-size: 1.2rem; cursor: pointer; color: var(--indigo); }
.pt-extra__cuantas output { min-width: 2ch; text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--indigo); }
.pt-extra__total { margin: 0; font-weight: 700; color: var(--indigo); }
.pt-bienvenida { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-body); }
.pt-bienvenida b { color: var(--indigo); }

/* Continuar con Google en la compra */
.pt-compra__google { min-height: 44px; display: flex; justify-content: center; }
.pt-compra__google[hidden] { display: none; }
.pt-compra__o { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .82rem; }
.pt-compra__o::before, .pt-compra__o::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.pt-compra__o[hidden] { display: none; }
.pt-campo input[readonly] { background: var(--gray-50); color: var(--text-body); }

/* Cuántas negras y el logo en la ventana de pago (7 oct 2026) */
.pt-compra__colores { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: var(--border); border-radius: 12px; }
.pt-compra__etq { color: var(--text-body); font-size: .93rem; }
.pt-compra__etq b { color: var(--indigo); }
.pt-compra__muestra { width: 22px; height: 14px; border-radius: 3px; background: #111114; }
.pt-compra__logocaja { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
.pt-compra__logocaja img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; border: var(--border); }
.pt-compra__logocaja img[hidden] { display: none; }
.pt-compra__logocaja small { color: var(--text-muted); font-weight: 500; }
.pt-compra__nota { color: var(--text-muted); font-size: .78rem; }
.pt-periodo__op span { white-space: nowrap; } .pt-periodo__op { white-space: nowrap; }

/* Un contador por color */
.pt-compra__colores { display: grid; gap: 8px; }
.pt-compra__colores .pt-compra__etq { margin: 0; }
.pt-compra__color { display: flex; justify-content: space-between; align-items: center; }
.pt-compra__color > span:first-child { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--indigo); }
.pt-compra__muestra { display: inline-block; width: 26px; height: 17px; border-radius: 4px; }
.pt-compra__muestra--blanca { background: #fff; border: 1px solid var(--gray-300); }
.pt-compra__muestra--negra { background: #111114; }
.pt-compra__falta { margin: 0; font-size: .82rem; color: #B45309; }
.pt-compra__falta[hidden] { display: none; }

/* Qué incluye y «¿Quieres más placas?» en la ventana de pago */
.pt-compra__incluye { margin: -4px 0 0; font-size: .88rem; color: var(--indigo); font-weight: 600; }
.pt-compra__cuenta span { display: block; }
.pt-compra__mas { border: var(--border); border-radius: 12px; padding: 10px 14px; }
.pt-compra__mas summary { cursor: pointer; font-weight: 700; color: var(--blue); }
.pt-compra__mas summary small { display: block; font-weight: 500; color: var(--text-muted); }
.pt-compra__mas[open] summary { margin-bottom: 10px; }
.pt-compra__color { width: 100%; }

/* Placas extra: modelo × color (7 oct 2026) */
.pt-modelo { display: grid; gap: 8px; padding: 12px 14px; border: var(--border); border-radius: 12px; }
.pt-modelo__cabeza { display: flex; align-items: center; gap: 12px; }
.pt-modelo__cabeza b { display: block; color: var(--indigo); }
.pt-modelo__cabeza small { color: var(--text-muted); }
.pt-modelo__foto { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--gray-50); }
.pt-modelo__foto--base { transform: perspective(120px) rotateX(18deg); }
.pt-compra__cuenta { margin: -4px 0 0; font-size: .88rem; color: var(--text-muted); }
.pt-compra__cuenta[hidden], #placasNegocio[hidden] { display: none; }
.pt-modelo__foto { box-sizing: border-box; width: 64px; height: 64px; padding: 8px; background: #E9EDF4; filter: none; }
.pt-modelo__foto--base { transform: none; padding: 6px 8px 12px; background: linear-gradient(#E9EDF4 78%, #C9CFDA 78%); }

/* Desde la app: sólo la ventana de placas extra (7 oct 2026) */
.pt-solo-ventana body { visibility: hidden; }
.pt-solo-ventana #dlgPlacas { visibility: visible; }

/* En celular las ventanas (placas extra, tarjeta de metal…) dejan libre la
   franja de la hora, el wifi y la batería del iPhone (9 oct 2026). */
@media (max-width: 600px) {
  .pt-dialogo:not(.con-marco) {
    margin-top: max(56px, calc(env(safe-area-inset-top) + 12px));
    max-height: calc(100dvh - max(56px, calc(env(safe-area-inset-top) + 12px)) - 16px);
  }
}