/* Tuin — Agenda tu cita (cita.html)
   Paleta: #c7a3ff (primario) · #8050a0 (tertiary) · #f5eaff (surface container)
   CSS a mano, igual que planes.css: la build de Tailwind no compila esta página. */

:root {
  --tc-bg: #f5eaff;
  --tc-surface: #ffffff;
  --tc-ink: #1b1a1c;
  --tc-muted: #6b5f73;
  --tc-faint: #a396ad;
  --tc-primary: #c7a3ff;
  --tc-primary-strong: #8050a0;
  --tc-primary-soft: #f3e8ff;
  --tc-border: #e6dcf0;
  --tc-radius: 1.15rem;
  --tc-radius-lg: 1.6rem;
  --tc-shadow: 0 20px 40px -28px rgba(199, 163, 255, .5);
  --tc-shadow-lift: 0 24px 50px -26px rgba(90, 58, 143, .35);
  --tc-font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --tc-font-body: 'Be Vietnam Pro', system-ui, sans-serif;
}

.tc-body {
  background: var(--tc-bg);
  color: var(--tc-ink);
  font-family: var(--tc-font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 3rem;
}

/* `hidden` tiene que ganarle a los display de más abajo (.tc-shell es grid en
   desktop, y eso pisaba el atributo). */
[hidden] { display: none !important; }

.tc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(button, a, input):focus-visible {
  outline: 2px solid var(--tc-primary-strong);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.tc-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.25rem;
  padding-top: max(.9rem, env(safe-area-inset-top));
  background: rgba(245, 234, 255, .85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.tc-logo { display: block; flex: none; }
.tc-logo img { display: block; height: 2.1rem; width: auto; }
.tc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--tc-surface); color: var(--tc-primary-strong);
  box-shadow: var(--tc-shadow); flex: none;
  transition: transform .25s ease;
}
.tc-iconbtn:hover { transform: scale(1.06); }
.tc-iconbtn:active { transform: scale(.94); }
.tc-iconbtn svg { width: 1.25rem; height: 1.25rem; }

.tc-noscript {
  margin: 1rem 1.25rem; padding: 1rem 1.15rem; border-radius: var(--tc-radius);
  background: var(--tc-surface); color: var(--tc-ink); font-size: .9rem;
}
.tc-noscript a { color: var(--tc-primary-strong); font-weight: 600; }

/* ---------- Layout ---------- */
.tc-shell {
  max-width: 30rem; margin: 0 auto; padding: .5rem 1.25rem 0;
}
.tc-flow { display: flex; flex-direction: column; gap: 2rem; }
.tc-block { display: flex; flex-direction: column; gap: .85rem; }
/* Si el título y el navegador de meses no caben juntos, el navegador baja a su
   propia línea en vez de partir el encabezado. */
.tc-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1rem; flex-wrap: wrap;
}
.tc-block__head .tc-step { white-space: nowrap; }
.tc-block__head .tc-monthnav { margin-left: auto; }

.tc-title {
  font-family: var(--tc-font-head); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -.02em; line-height: 1.1; margin: 0;
}
.tc-subtitle { color: var(--tc-muted); font-size: .9rem; margin: -.5rem 0 0; }

.tc-step {
  font-family: var(--tc-font-head); font-weight: 800; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .1em; margin: 0;
}
.tc-step span { color: var(--tc-primary-strong); }

.tc-monthnav { display: flex; align-items: center; gap: .15rem; flex: none; }
.tc-monthnav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 0; padding: 0;
  background: none; color: var(--tc-primary-strong); cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.tc-monthnav__btn:hover:not(:disabled) { background: var(--tc-primary-soft); }
.tc-monthnav__btn:disabled { opacity: .25; cursor: not-allowed; }
.tc-monthnav__btn svg { width: 1rem; height: 1rem; }

.tc-month {
  font-family: var(--tc-font-head); font-weight: 700; font-size: .8rem;
  color: var(--tc-primary-strong); margin: 0; white-space: nowrap;
  min-width: 6.4rem; text-align: center;
}
.tc-hint { font-size: .78rem; color: var(--tc-faint); margin: 0; text-align: center; }
.tc-hint--error { color: #ba1a1a; font-weight: 600; text-align: left; }
.tc-hint:empty { display: none; }

/* ---------- Tarjetas de plan ---------- */
.tc-plans { display: flex; flex-direction: column; gap: 1.4rem; }
.tc-plan-wrap { display: flex; flex-direction: column; gap: .5rem; }
.tc-plan {
  display: flex; flex-direction: column; text-align: left;
  border-radius: var(--tc-radius-lg); overflow: hidden;
  background: var(--tc-surface); border: 1.5px solid transparent;
  box-shadow: var(--tc-shadow); cursor: pointer; padding: 0;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tc-plan:hover { transform: translateY(-2px); }

/* La foto es el explicador real: se ve de un vistazo qué sale de cada paquete. */
.tc-plan__photo { display: block; background: #eedcf9; }
/* La banda encuadra la fila superior de uñas completa, sin partir la de abajo. */
.tc-plan__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 1;
  object-fit: cover; object-position: 50% 11%;
}
.tc-plan__body {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.2rem 1.4rem 1.35rem;
}

.tc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.tc-chip {
  padding: .3rem .6rem; border-radius: 999px; background: var(--tc-primary-soft);
  color: var(--tc-primary-strong); font-family: var(--tc-font-head);
  font-weight: 700; font-size: .68rem;
}
/* "Todo lo del Bento" carga la relación entre los dos paquetes: va destacado. */
.tc-chip--strong { background: var(--tc-primary-strong); color: #fff; }

/* ---------- A la medida (sale del flujo, va a WhatsApp) ----------
   Misma tarjeta blanca que el resto para no parecer un placeholder; lo que la
   distingue es el kicker, no un borde punteado. En móvil apila para que el
   texto respire y el botón sea del ancho completo. */
.tc-custom {
  display: flex; flex-direction: column; gap: .9rem;
  margin-top: .3rem; padding: 1.15rem 1.3rem; border-radius: var(--tc-radius-lg);
  background: var(--tc-surface); box-shadow: var(--tc-shadow);
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tc-custom:hover { transform: translateY(-2px); box-shadow: var(--tc-shadow-lift); }
.tc-custom__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tc-custom__kicker {
  font-family: var(--tc-font-head); font-weight: 700; font-size: .64rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tc-primary-strong);
}
.tc-custom__title {
  font-family: var(--tc-font-head); font-weight: 700; font-size: 1.05rem;
}
.tc-custom__desc {
  font-size: .82rem; line-height: 1.45; color: var(--tc-muted);
  text-wrap: pretty; /* evita que quede una palabra sola al envolver */
}
.tc-custom__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1rem; border-radius: 999px;
  background: var(--tc-primary-strong); color: #fff;
  font-family: var(--tc-font-head); font-weight: 700; font-size: .8rem;
}
.tc-custom__cta svg { width: .95rem; height: .95rem; }

@media (min-width: 28rem) {
  .tc-custom { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.25rem; }
  .tc-custom__cta { flex: none; }
}

/* ---------- Detalle desplegable ---------- */
.tc-more { padding: 0 .4rem; }
.tc-more__sum {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  list-style: none; padding: .25rem .2rem;
  font-family: var(--tc-font-head); font-weight: 700; font-size: .78rem;
  color: var(--tc-primary-strong); text-decoration: underline;
  text-underline-offset: 3px;
}
.tc-more__sum::-webkit-details-marker { display: none; }
.tc-more__sum::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.tc-more[open] .tc-more__sum::after { transform: rotate(-135deg) translate(-1px, -1px); }
.tc-more__panel {
  margin-top: .6rem; padding: 1.1rem 1.25rem; border-radius: var(--tc-radius);
  background: rgba(255, 255, 255, .75);
}
.tc-more__gloss {
  margin: 0 0 .9rem; font-size: .82rem; line-height: 1.55; color: var(--tc-muted);
  font-style: italic;
}
.tc-more__foot {
  margin: .9rem 0 0; font-size: .78rem; font-weight: 600; color: var(--tc-primary-strong);
}
.tc-list__title {
  margin: 0 0 .45rem; font-family: var(--tc-font-head); font-weight: 700;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tc-faint);
}
.tc-list { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .4rem; }
.tc-list:last-of-type { margin-bottom: 0; }
.tc-list li {
  position: relative; padding-left: 1.4rem; font-size: .85rem; line-height: 1.45;
}
.tc-list li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.tc-list--yes li::before { content: "✓"; color: #2f7d4f; }
.tc-list--no li::before { content: "✕"; color: #b0526a; }
.tc-list--no li { color: var(--tc-muted); }
.tc-plan[aria-checked="true"] {
  border-color: var(--tc-primary-strong);
  box-shadow: var(--tc-shadow-lift), 0 0 0 4px rgba(199, 163, 255, .3);
}
/* El badge va solo en su renglón: los textos de marca crecen y antes empujaban
   al precio fuera de la tarjeta en la columna angosta de desktop. El indicador
   de selección se ancla a la derecha del mismo renglón. */
.tc-plan__top {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

/* Sin esto la tarjeta se lee como contenido, no como una opción que eliges:
   mismo lenguaje que el ✓ de las opciones de base y retiro. */
.tc-plan__radio {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  border: 2px solid var(--tc-border); background: var(--tc-surface);
  transition: border-color .2s ease, background-color .2s ease;
}
.tc-plan[aria-checked="true"] .tc-plan__radio {
  border-color: var(--tc-primary-strong);
  background: var(--tc-primary-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.8rem no-repeat;
}
.tc-plan__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.tc-plan__price {
  font-family: var(--tc-font-head); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.02em; flex: none;
}
.tc-plan__name {
  font-family: var(--tc-font-head); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -.02em; line-height: 1.15;
}
.tc-plan__name--accent { color: var(--tc-primary-strong); }
.tc-plan__desc {
  color: var(--tc-muted); font-size: .82rem; line-height: 1.4; font-weight: 500;
}
/* La duración va aparte: pegada al tagline partía el renglón y dejaba "150 /
   min" cortado a la mitad en la columna angosta de desktop. */
.tc-plan__meta {
  margin-top: -.3rem;
  font-family: var(--tc-font-head); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--tc-faint);
}
.tc-badge {
  display: inline-block; padding: .4rem .75rem; border-radius: 999px;
  white-space: nowrap;
  font-family: var(--tc-font-head); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .09em;
}
.tc-badge--soft { background: var(--tc-primary-soft); color: var(--tc-primary-strong); }
.tc-badge--solid { background: var(--tc-primary-strong); color: #fff; }

/* ---------- Opciones (base / retiro) ---------- */
.tc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tc-opt {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .3rem; min-height: 5.25rem; padding: 1rem .9rem;
  border-radius: var(--tc-radius); background: var(--tc-surface);
  border: 1.5px solid transparent; box-shadow: var(--tc-shadow);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tc-opt:hover { transform: translateY(-2px); }
.tc-opt[aria-checked="true"] {
  border-color: var(--tc-primary);
  box-shadow: var(--tc-shadow-lift), 0 0 0 4px rgba(199, 163, 255, .2);
}
.tc-opt__name {
  font-family: var(--tc-font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.2;
}
.tc-opt__meta {
  font-family: var(--tc-font-head); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--tc-primary-strong);
}
.tc-opt[aria-checked="true"]::after {
  content: ""; position: absolute; top: -.5rem; right: -.5rem;
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--tc-primary-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.85rem no-repeat;
  box-shadow: 0 0 0 3px var(--tc-bg);
}

/* "Sin retiro" es una opción igual que las otras dos y es la que viene elegida
   por defecto. Como texto suelto no se leía como algo seleccionado: ahora usa
   la misma tarjeta y el mismo ✓, solo que en una franja de ancho completo. */
.tc-opt--ancho {
  grid-column: 1 / -1; min-height: 0; padding: .85rem 1rem;
}
.tc-opt--ancho .tc-opt__name { font-size: .92rem; }

/* El degradado del borde derecho avisa que el carrusel sigue. */
.tc-days {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
}

/* ---------- Días ---------- */
.tc-days {
  display: flex; gap: .7rem; overflow-x: auto; padding: .35rem .15rem .5rem;
  scroll-snap-type: x proximity; -ms-overflow-style: none; scrollbar-width: none;
}
.tc-days::-webkit-scrollbar { display: none; }
.tc-day {
  flex: none; width: 4.1rem; padding: .8rem .4rem .7rem; border-radius: var(--tc-radius);
  background: var(--tc-surface); border: 1.5px solid transparent;
  box-shadow: var(--tc-shadow); cursor: pointer; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.tc-day:hover:not(:disabled) { transform: translateY(-2px); }
.tc-day__dow {
  font-family: var(--tc-font-head); font-weight: 700; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tc-faint);
}
.tc-day__num {
  font-family: var(--tc-font-head); font-weight: 800; font-size: 1.4rem; line-height: 1.1;
}
.tc-day__dot {
  width: .32rem; height: .32rem; border-radius: 999px;
  background: var(--tc-primary-strong); margin-top: .1rem;
}
.tc-day[aria-checked="true"] {
  background: var(--tc-primary); border-color: var(--tc-primary);
  box-shadow: var(--tc-shadow-lift);
}
.tc-day[aria-checked="true"] .tc-day__dow { color: rgba(255, 255, 255, .85); }
.tc-day[aria-checked="true"] .tc-day__num { color: #fff; }
.tc-day[aria-checked="true"] .tc-day__dot { background: #fff; }
.tc-day:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.tc-day:disabled .tc-day__dot { visibility: hidden; }

/* Mientras el servidor dice qué días tienen lugar: esqueleto, no días falsos. */
.tc-day--cargando { animation: tc-pulso 1.2s ease-in-out infinite; }
.tc-day--cargando .tc-day__dot { visibility: hidden; }
@keyframes tc-pulso {
  0%, 100% { opacity: .45; }
  50% { opacity: .75; }
}

/* ---------- Horas ---------- */
.tc-times {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); gap: .7rem;
}
.tc-time {
  padding: .8rem .4rem; border-radius: var(--tc-radius);
  background: var(--tc-surface); border: 1.5px solid transparent;
  box-shadow: var(--tc-shadow); cursor: pointer;
  font-family: var(--tc-font-head); font-weight: 700; font-size: .95rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tc-time:hover:not(:disabled) { transform: translateY(-2px); }
.tc-time[aria-checked="true"] {
  background: var(--tc-primary-strong); border-color: var(--tc-primary-strong);
  color: #fff; box-shadow: var(--tc-shadow-lift);
}
.tc-time:disabled { color: var(--tc-faint); opacity: .55; cursor: not-allowed; box-shadow: none; }
.tc-times:empty { display: none; }

/* ---------- Campos ---------- */
.tc-fields { display: flex; flex-direction: column; gap: .8rem; }
.tc-input {
  width: 100%; padding: 1.05rem 1.25rem; border-radius: var(--tc-radius);
  background: var(--tc-surface); border: 1.5px solid transparent;
  box-shadow: var(--tc-shadow); font-family: var(--tc-font-body); font-size: 1rem;
  color: var(--tc-ink); transition: border-color .2s ease;
}
.tc-input::placeholder { color: var(--tc-faint); }
.tc-input:focus { border-color: var(--tc-primary); }
.tc-input[aria-invalid="true"] { border-color: #ba1a1a; }

/* ---------- Cotización ----------
   En móvil la barra vive pegada abajo y se come pantalla útil, así que va
   compacta: sin kicker ni nota al pie (decorativos, el número ya se explica
   solo) y con tipografías y padding reducidos. En desktop es una tarjeta en
   la columna lateral, con espacio de sobra: ahí se muestra completa. */
.tc-side { position: sticky; bottom: 0; padding: 1rem 0 .6rem; }
.tc-summary {
  padding: .9rem 1.05rem 1rem; border-radius: var(--tc-radius-lg);
  background: var(--tc-surface); box-shadow: 0 -6px 40px -18px rgba(90, 58, 143, .35);
}
.tc-summary__row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .85rem;
}
.tc-summary__left { min-width: 0; }
.tc-summary__kicker {
  display: none;
  font-family: var(--tc-font-head); font-weight: 700; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tc-primary-strong);
  margin: 0 0 .3rem;
}
.tc-summary__line {
  font-family: var(--tc-font-head); font-weight: 700; font-size: .95rem;
  margin: 0; line-height: 1.25;
}
.tc-summary__time {
  display: flex; align-items: center; gap: .3rem; margin: .15rem 0 0;
  font-size: .72rem; font-weight: 600; color: var(--tc-muted);
}
.tc-summary__time svg { width: .85rem; height: .85rem; flex: none; }
.tc-summary__right { text-align: right; flex: none; }
.tc-summary__price {
  font-family: var(--tc-font-head); font-weight: 800; font-size: 1.55rem;
  letter-spacing: -.02em; color: var(--tc-primary-strong); margin: 0; line-height: 1;
}
.tc-summary__unit {
  font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tc-faint); margin: .2rem 0 0;
}
.tc-summary__note {
  display: none;
  margin: .75rem 0 0; font-size: .7rem; line-height: 1.45;
  color: var(--tc-faint); text-align: center;
}
.tc-summary .tc-cta { margin-top: .75rem; padding: .85rem 1rem; font-size: .85rem; }

.tc-cta {
  width: 100%; margin-top: 1.1rem; padding: 1.1rem 1.25rem; border: 0;
  border-radius: 999px; background: var(--tc-primary); color: #fff; cursor: pointer;
  font-family: var(--tc-font-head); font-weight: 800; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 18px 34px -18px rgba(199, 163, 255, .9);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.tc-cta:hover:not(:disabled) { transform: scale(1.015); background: #b98fff; }
.tc-cta:active:not(:disabled) { transform: scale(.98); }
.tc-cta:disabled { background: #ded2ef; color: #fff; box-shadow: none; cursor: not-allowed; }

/* ---------- Checkout ---------- */
.tc-shell--solo { max-width: 30rem; }

/* Honeypot: fuera de la vista sin display:none, que algunos bots detectan. */
.tc-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Al entrar al checkout movemos el foco al título para lectores de pantalla;
   no hace falta pintar el anillo porque no es un control. */
#tc-co-title:focus { outline: none; }

.tc-loading { margin: 0; padding: 2rem 0; text-align: center; color: var(--tc-muted); }
.tc-loading[hidden] { display: none; }

.tc-card {
  padding: 1.25rem 1.35rem; border-radius: var(--tc-radius-lg);
  background: var(--tc-surface); box-shadow: var(--tc-shadow);
}
.tc-card__kicker {
  font-family: var(--tc-font-head); font-weight: 700; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tc-primary-strong);
  margin: 0 0 .6rem;
}

.tc-recap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; }
.tc-recap dt { color: var(--tc-muted); font-size: .85rem; }
.tc-recap dd {
  margin: 0; text-align: right; font-size: .85rem; font-weight: 600;
}

.tc-card--amount { text-align: center; padding: 1.5rem 1.35rem; }
.tc-amount {
  font-family: var(--tc-font-head); font-weight: 800; font-size: 2.6rem;
  letter-spacing: -.03em; color: var(--tc-primary-strong); margin: 0; line-height: 1;
}
.tc-amount__note { margin: .6rem 0 0; font-size: .8rem; color: var(--tc-muted); }

.tc-bank { padding: .4rem 1.35rem; }
.tc-bank__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--tc-border);
}
.tc-bank__row:last-child { border-bottom: 0; }
.tc-bank__label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tc-faint); margin: 0 0 .2rem;
}
.tc-bank__value {
  margin: 0; font-family: var(--tc-font-head); font-weight: 700; font-size: 1rem;
  word-break: break-all;
}
.tc-bank__value--mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.tc-copy {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .8rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--tc-primary-soft); color: var(--tc-primary-strong);
  font-family: var(--tc-font-head); font-weight: 700; font-size: .72rem;
  transition: background .2s ease, transform .2s ease;
}
.tc-copy:hover { transform: scale(1.04); }
.tc-copy[data-copied="true"] { background: var(--tc-primary-strong); color: #fff; }

.tc-timer { text-align: center; }
.tc-timer__label {
  margin: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tc-faint);
}
.tc-timer__clock {
  margin: .35rem 0 .6rem; font-family: var(--tc-font-head); font-weight: 800;
  font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.tc-timer__track {
  height: .35rem; border-radius: 999px; background: #e3d5f2; overflow: hidden;
}
.tc-timer__fill {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: var(--tc-primary); transition: width 1s linear;
}
.tc-timer__note { margin: .6rem 0 0; font-size: .75rem; color: var(--tc-muted); }
.tc-timer--urgente .tc-timer__clock { color: #ba1a1a; }
.tc-timer--urgente .tc-timer__fill { background: #ba1a1a; }

.tc-back {
  display: block; width: 100%; margin-top: .9rem; padding: .6rem; border: 0;
  background: none; cursor: pointer; color: var(--tc-muted);
  font-family: var(--tc-font-head); font-weight: 700; font-size: .8rem;
}
.tc-back:hover { color: var(--tc-primary-strong); }

/* ---------- Footer ---------- */
.tc-footer {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem;
  margin-top: 2rem; padding: 0 1.25rem;
  font-size: .78rem; color: var(--tc-faint);
}
.tc-footer a { color: var(--tc-muted); text-decoration: none; }
.tc-footer a:hover { color: var(--tc-primary-strong); }

/* ---------- Desktop ---------- */
@media (min-width: 62rem) {
  .tc-shell {
    max-width: 62rem; display: grid; gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start; padding-top: 1.5rem;
  }
  /* Dos filas explícitas: tarjetas arriba, desplegables abajo. Así las tarjetas
     igualan altura entre sí, pero abrir un desplegable estira solo la fila de
     abajo — antes estiraba la tarjeta vecina y la dejaba como caja vacía. */
  .tc-plans {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.4rem;
  }
  .tc-plan-wrap { display: contents; }
  .tc-plan-wrap > .tc-plan { grid-row: 1; }
  .tc-plan-wrap > .tc-more { grid-row: 2; align-self: start; }
  .tc-plan-wrap:first-child > * { grid-column: 1; }
  .tc-plan-wrap:last-child > * { grid-column: 2; }
  /* La columna es angosta: el nombre baja un punto para caber junto al precio
     en una sola línea. En móvil la tarjeta es ancha y se queda en 1.4rem. */
  .tc-plan__name { font-size: 1.2rem; }
  .tc-plan__price { font-size: 1.35rem; }
  .tc-shell--solo { display: block; max-width: 34rem; }
  .tc-side { position: sticky; top: 6rem; bottom: auto; padding: 0; }
  .tc-summary {
    padding: 1.25rem 1.35rem 1.35rem; box-shadow: var(--tc-shadow-lift);
  }
  .tc-summary__kicker, .tc-summary__note { display: block; }
  .tc-summary__line { font-size: 1.05rem; }
  .tc-summary__time { margin-top: .35rem; font-size: .78rem; }
  .tc-summary__price { font-size: 1.9rem; }
  .tc-summary__unit { font-size: .6rem; margin-top: .3rem; }
  .tc-summary .tc-cta { margin-top: 1.1rem; padding: 1.1rem 1.25rem; font-size: .95rem; }
  .tc-title { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}