/* Tu Essence · 4 PAREJAS DE LETRAS para el título y los encabezados (barra de prueba «Letra»).
   La regla de Danny (medida en sus vídeos, 7-oct): DOS familias, una grande y fuerte y otra elegante; nunca una sola letra blanda.
   --display = los titulares · --serif = la cursiva de acento y los nombres · --sans = el texto y los botones. */
html[data-letra="campana"]   { --display: 'Inter Tight', system-ui, sans-serif; --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter Tight', system-ui, sans-serif; }
html[data-letra="firma"]     { --display: 'Playfair Display', Georgia, serif; --serif: 'Playfair Display', Georgia, serif; --sans: 'Montserrat', system-ui, sans-serif; }
html[data-letra="realeza"]   { --display: 'Cinzel', Georgia, serif; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Cormorant Garamond', Georgia, serif; }
html[data-letra="editorial"] { --display: 'Bodoni Moda', Didot, Georgia, serif; --serif: 'Bodoni Moda', Didot, Georgia, serif; --sans: 'Jost', system-ui, sans-serif; }

html[data-letra] :is(.sec-cab, .notas, .contacto) h2 { font-family: var(--display); }
/* en el móvil la 1.ª línea (la de la puerta) cabe en UNA línea con cualquier letra */
@media (max-width: 479px) { html[data-letra] .puerta .etiqueta { letter-spacing: .22em; white-space: nowrap; } }
/* largo de línea del título para las letras de «texto corrido» (en em de su propio tamaño) */
html:is([data-letra="firma"], [data-letra="realeza"], [data-letra="editorial"]) .puerta h1 { max-width: 11.5em; }

/* ── 1 · CAMPAÑA — «FRAGANCIA» gigante en Inter Tight negra + la cursiva de Playfair (sus favoritas: la palabra gigante y la escalera) ── */
html[data-letra="campana"] body { font-weight: 400; }
html[data-letra="campana"] :is(.portada, .puerta) h1 { font: 400 16px/1 var(--display); letter-spacing: 0; }
html[data-letra="campana"] :is(.portada, .puerta) h1 .t1 { display: block; margin: 0 0 12px; font: 600 clamp(12px, 3.3vw, 16px)/1.3 var(--sans); letter-spacing: .44em; text-transform: uppercase; color: var(--suave); white-space: nowrap; }
html[data-letra="campana"] :is(.portada, .puerta) h1 .t2 { display: block; font: 900 min(15vw, 132px)/.84 var(--display); letter-spacing: -.012em; text-transform: uppercase; }
html[data-letra="campana"] .portada h1 .t2 { font-size: min(15vw, 96px); }
html[data-letra="campana"] :is(.portada, .puerta) h1 .t3 { display: block; margin-top: .04em; font: italic 400 min(10.5vw, 84px)/1.05 var(--serif); color: var(--detalle); }
html[data-letra="campana"] .etiqueta { font: 600 11px/1.4 var(--sans); letter-spacing: .34em; }
html[data-letra="campana"] :is(.sec-cab, .notas, .contacto) h2 { font-weight: 900; font-size: clamp(38px, 9vw, 78px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
html[data-letra="campana"] :is(.sec-cab, .notas, .contacto) h2 em { display: block; font: italic 400 .8em/1.1 var(--serif); letter-spacing: 0; text-transform: none; }

/* ── 2 · FIRMA — Playfair grande con su cursiva + Montserrat espaciada en dorado ── */
html[data-letra="firma"] body { font-size: 15.5px; }
html[data-letra="firma"] :is(.portada, .puerta) h1 { font: 400 clamp(40px, 10.6vw, 104px)/1.02 var(--display); letter-spacing: -.01em; }
html[data-letra="firma"] :is(.portada, .puerta) h1 em { font-style: italic; }
html[data-letra="firma"] .etiqueta { font: 500 11px/1.4 var(--sans); letter-spacing: .38em; }
html[data-letra="firma"] .btn { font: 500 13.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* ── 3 · REALEZA — Cinzel con luz dorada + Cormorant en cursiva ── */
/* Cormorant es fina: cuerpo, menú y botones un punto más gruesos; y cifras de caja alta (sus cifras antiguas hacían leer «40» como «4o») */
html[data-letra="realeza"] body { font-weight: 600; font-size: 18.5px; font-variant-numeric: lining-nums; }
html[data-letra="realeza"] :is(.cab-menu a, .cab-der a) { font-weight: 600; font-size: 16px; }
@media (min-width: 900px) { html[data-letra="realeza"] body { font-size: 19.5px; } html[data-letra="realeza"] .etiqueta { font-size: 12.5px; }
  html[data-letra="realeza"] :is(.cab-menu a, .cab-der a) { font-size: 17px; } }
html[data-letra="realeza"] :is(.portada, .puerta) h1 { font: 500 clamp(30px, 8.4vw, 82px)/1.1 var(--display); letter-spacing: .03em; }
html[data-letra="realeza"] :is(.portada, .puerta) h1 :is(.t1, .t2) { text-transform: uppercase; color: transparent; background: linear-gradient(180deg, #f8e8cb 8%, #e4b57a 52%, #b4641b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-letra="realeza"] :is(.portada, .puerta) h1 .t3 { display: block; margin-top: .06em; font: italic 500 clamp(40px, 11vw, 100px)/.95 var(--serif); letter-spacing: 0; color: var(--texto); }
html[data-letra="realeza"] .etiqueta { font: 500 11px/1.4 var(--display); letter-spacing: .3em; }
html[data-letra="realeza"] .btn { font: 600 14px var(--display); letter-spacing: .14em; }
html[data-letra="realeza"] :is(.sec-cab, .notas, .contacto) h2 { font-weight: 500; font-size: clamp(30px, 7.4vw, 66px); line-height: 1.05; letter-spacing: .03em; }
html[data-letra="realeza"] :is(.sec-cab, .notas, .contacto) h2 em { font: italic 500 1.15em var(--serif); letter-spacing: 0; }
html[data-letra="realeza"] .tarjeta-nombre { font-weight: 600; font-size: 22px; }

/* ── 4 · EDITORIAL — Bodoni Moda (la familia del logo) + Jost ── */
html[data-letra="editorial"] :is(.portada, .puerta) h1 { font: 400 clamp(40px, 10.8vw, 104px)/1 var(--display); letter-spacing: -.02em; }
html[data-letra="editorial"] :is(.portada, .puerta) h1 em { font-style: italic; }