/* HOUSE OF TALA — identidad común: negro, marfil, serif clásica, monograma T y brillo cálido. */

:root {
  --negro: #0b0a09;
  --carbon: #161412;
  --marfil: #e8ded2;
  --lino: #d9cec2;
  --gris: #8a8178;
  --hilo: rgba(232, 222, 210, .14);
  --brillo: rgba(232, 214, 190, .22);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --m: clamp(16px, 3.2vw, 48px);
}
.ui { font: 400 10.5px/1.3 var(--sans); letter-spacing: .32em; text-transform: uppercase; }

/* Sello apilado: HOUSE OF / TALA / EST. 2026 */
.sello { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-align: center; white-space: nowrap; width: max-content; }
.sello-house { font: 400 .19em/1 var(--serif); letter-spacing: .34em; margin-right: -.34em; }
.sello-tala { font: 500 1em/.86 var(--serif); letter-spacing: .02em; margin: .08em 0 .1em; }
.sello-est { font: 400 .085em/1 var(--sans); letter-spacing: .5em; margin-right: -.5em; }

/* Sello horizontal: HOUSE OF TALA */
.logo { display: inline-flex; align-items: baseline; gap: .55em; white-space: nowrap; }
.logo-house { font: 400 .42em/1 var(--serif); letter-spacing: .34em; }
.logo-tala { font: 500 1em/1 var(--serif); letter-spacing: .06em; }

/* La L invertida de la casa */
.l { display: inline-block; transform: scaleX(-1); letter-spacing: 0; margin-right: .02em; }
.logo-tala .l { margin-right: .06em; }

/* La L se da la vuelta al cargar (sello de portada) */
.sello.gira .sello-tala .l { animation: girar 1.5s .9s cubic-bezier(.65,0,.25,1) both; }
@keyframes girar { from { transform: scaleX(1); } to { transform: scaleX(-1); } }

/* Monograma T */
.monograma {
  display: inline-grid; place-items: center; width: 1em; height: 1em; border-radius: 22%;
  background: var(--marfil); color: var(--negro); font: 500 .62em/1 var(--serif);
}
.monograma > span { font-size: 1em; transform: translateY(.03em); }

/* Brillo cálido, como en la hoja de marca */
.halo { box-shadow: 0 0 60px 10px var(--brillo), 0 0 140px 40px rgba(232, 214, 190, .08); }

:focus-visible { outline: 1px solid var(--marfil); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }