@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* Tu Casa de Restauración Familiar — clases base (prefijo tc-) */
.tc { font-family: var(--font-sans); color: var(--ink); }
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }

/* Botón */
.tc-btn { font: 500 16px/20px var(--font-sans); display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; letter-spacing: .01em; }
.tc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tc-btn--primario { background: var(--primario); color: var(--on-primario); }
.tc-btn--secundario { background: transparent; color: var(--azul-texto); border-color: var(--border-control); }
.tc-btn--calido { background: var(--naranja); color: var(--on-naranja); }
.tc-btn--pill { border-radius: var(--radius-pill); }
.tc-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Antetítulo y textos */
.tc-eyebrow { font: 500 13px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-texto); }
.tc-h1 { font: 500 40px/46px var(--font-sans); margin: 0; }
.tc-h2 { font: 500 30px/36px var(--font-sans); margin: 0; }
.tc-h3 { font: 500 22px/28px var(--font-sans); margin: 0; }
.tc-body { font: 400 16px/26px var(--font-sans); margin: 0; }
.tc-small { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); margin: 0; }
.tc-versiculo { font: italic 400 20px/32px var(--font-sans); margin: 0; }

/* Tarjeta */
.tc-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); overflow: hidden; }
.tc-card__band { height: 6px; background: var(--azul); }
.tc-card__body { padding: var(--space-5); display: grid; gap: var(--space-2); }

/* Campo */
.tc-field { display: grid; gap: var(--space-1); font-family: var(--font-sans); }
.tc-field label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.tc-field input, .tc-field textarea { font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--surface-raised);
  border: 1.5px solid var(--border-control); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.tc-field input:focus-visible, .tc-field textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tc-field .tc-help { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.tc-field.is-error input { border-color: var(--error); }
.tc-field.is-error .tc-help { color: var(--error); }

/* Logo que cambia con el tema */
.tc-logo--dark { display: none; }
[data-theme="dark"] .tc-logo--light { display: none; }
[data-theme="dark"] .tc-logo--dark { display: block; }

/* Papel impreso: siempre papel claro, sin importar el tema de pantalla */
.tc-paper { background: #ffffff; color: var(--marino); font-family: var(--font-sans);
  box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10); position: relative; overflow: hidden; }
.tc-paper--crema { background: #fff8ec; }
.tc-stage { background: var(--azul-suave); padding: var(--space-6); display: flex; gap: var(--space-6);
  align-items: center; justify-content: center; flex-wrap: wrap; min-height: 100%; }