/* Casa Luisa · componentes base. Depende de tokens.css (cargarlo antes).
   Fuentes: Cormorant Garamond 300–600 (+ cursiva) y Montserrat 400–600, desde Google Fonts. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: var(--cl-font-display);
  font-size: var(--cl-type-body-size);
  line-height: var(--cl-type-body-lh);
  letter-spacing: var(--cl-type-body-tracking);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }

/* ---------- Tipografía ---------- */
.cl-display-xl, .cl-display-l, .cl-display-m, .cl-title { font-family: var(--cl-font-display); margin: 0; }
.cl-display-xl { font-size: var(--cl-type-display-xl-size); line-height: var(--cl-type-display-xl-lh); letter-spacing: var(--cl-type-display-xl-tracking); font-weight: 400; }
.cl-display-l  { font-size: var(--cl-type-display-l-size);  line-height: var(--cl-type-display-l-lh);  letter-spacing: var(--cl-type-display-l-tracking);  font-weight: 400; }
.cl-display-m  { font-size: var(--cl-type-display-m-size);  line-height: var(--cl-type-display-m-lh);  letter-spacing: var(--cl-type-display-m-tracking);  font-weight: 400; }
.cl-title      { font-size: var(--cl-type-title-size);      line-height: var(--cl-type-title-lh);      font-weight: 500; }
.cl-lead       { font-size: var(--cl-type-lead-size); line-height: var(--cl-type-lead-lh); letter-spacing: var(--cl-type-lead-tracking); }
.cl-body       { max-width: var(--cl-measure); }
.cl-em         { font-style: italic; }

.cl-label, .cl-label-s {
  font-family: var(--cl-font-ui);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.4;
}
.cl-label   { font-size: var(--cl-type-label-size);   letter-spacing: var(--cl-type-label-tracking); }
.cl-label-s { font-size: var(--cl-type-label-s-size); letter-spacing: var(--cl-type-label-s-tracking); }
.cl-muted   { color: var(--cl-text-muted); }

/* Encabezado de sección del manual: "1. ETIQUETA ———————" */
.cl-section-title {
  display: flex; align-items: center; gap: var(--cl-space-5);
  font-family: var(--cl-font-ui); font-size: var(--cl-type-label-size); font-weight: 500;
  letter-spacing: var(--cl-type-label-tracking); text-transform: uppercase;
}
.cl-section-title::after { content: ""; flex: 1; border-top: var(--cl-hairline); }

/* Línea fina y separador con estrella */
.cl-rule { border: 0; border-top: var(--cl-hairline); margin: 0; }
.cl-ornament { display: flex; align-items: center; gap: var(--cl-space-4); color: var(--cl-medio); }
.cl-ornament::before, .cl-ornament::after { content: ""; flex: 1; border-top: var(--cl-hairline); }
.cl-star { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ---------- Botones ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cl-space-3);
  padding: 16px 32px; min-height: 48px;
  font-family: var(--cl-font-ui); font-size: var(--cl-type-label-s-size); font-weight: 500;
  letter-spacing: var(--cl-type-label-s-tracking); text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--cl-nogal); border-radius: var(--cl-radius-none); cursor: pointer;
  transition: background var(--cl-dur-base) var(--cl-ease-soft), color var(--cl-dur-base) var(--cl-ease-soft), border-color var(--cl-dur-base) var(--cl-ease-soft);
}
.cl-btn--primary { background: var(--cl-nogal); color: var(--cl-crema); }
.cl-btn--primary:hover { background: var(--cl-medio); border-color: var(--cl-medio); }
.cl-btn--ghost { background: transparent; color: var(--cl-nogal); }
.cl-btn--ghost:hover { background: var(--cl-nogal); color: var(--cl-crema); }
.cl-btn--inverse { background: var(--cl-crema); color: var(--cl-nogal); border-color: var(--cl-crema); }
.cl-btn--inverse:hover { background: transparent; color: var(--cl-crema); }
.cl-btn { transition: background var(--cl-dur-base) var(--cl-ease-soft), color var(--cl-dur-base) var(--cl-ease-soft), border-color var(--cl-dur-base) var(--cl-ease-soft), transform 140ms var(--cl-ease-soft); }
.cl-btn:active { transform: scale(.97); }
.cl-btn:focus-visible, .cl-link:focus-visible, .cl-input:focus-visible { outline: 2px solid var(--cl-medio); outline-offset: 3px; }
.cl-link {
  color: var(--cl-nogal); text-decoration: none; font-family: var(--cl-font-ui); font-size: var(--cl-type-label-s-size);
  letter-spacing: var(--cl-type-label-s-tracking); text-transform: uppercase; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px;
  transition: background-size var(--cl-dur-base) var(--cl-ease-soft);
}
.cl-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Superficies ---------- */
.cl-surface { background: var(--cl-arena); }
.cl-inverse { background: var(--cl-nogal); color: var(--cl-crema); }
.cl-inverse .cl-muted { color: var(--cl-taupe); }
.cl-card { background: #FBF7F1; border: var(--cl-hairline); padding: var(--cl-space-6); }
.cl-card--lift { box-shadow: var(--cl-shadow-soft); border-color: transparent; transition: box-shadow var(--cl-dur-slow) var(--cl-ease-soft), transform var(--cl-dur-slow) var(--cl-ease-soft); }
.cl-card--lift:hover { box-shadow: var(--cl-shadow-lift); transform: translateY(-4px); }

/* Círculo de ícono (como los íconos del concepto de marca) */
.cl-icon-chip { width: 72px; height: 72px; border-radius: var(--cl-radius-circle); background: var(--cl-arena); display: grid; place-items: center; color: var(--cl-medio); flex: none; }
.cl-icon-chip svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* Formularios */
.cl-field { display: grid; gap: var(--cl-space-2); }
.cl-input {
  width: 100%; padding: 14px 0; background: transparent; color: var(--cl-nogal);
  font-family: var(--cl-font-display); font-size: 1.25rem; letter-spacing: 0.01em;
  border: 0; border-bottom: 1px solid var(--cl-taupe); border-radius: 0;
  transition: border-color var(--cl-dur-base) var(--cl-ease-soft);
}
.cl-input::placeholder { color: var(--cl-taupe); font-style: italic; }
.cl-input:hover { border-color: var(--cl-medio); }
.cl-input:focus { border-color: var(--cl-nogal); outline: none; }

/* Fotografía: recorte recto, sin bordes redondeados. --img sobreescribe el placeholder. */
.cl-photo {
  position: relative; overflow: hidden; background-color: var(--cl-arena);
  background-image: var(--img, linear-gradient(160deg, #E3D6C4 0%, #CDB9A0 55%, #A98F73 100%));
  background-size: cover; background-position: center;
}
.cl-photo[data-ph]::after {
  content: attr(data-ph); position: absolute; left: 16px; bottom: 14px;
  font-family: var(--cl-font-ui); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: rgba(74,46,31,.55);
}
/* Capa para legibilidad de texto sobre foto: nogal, nunca negro puro. */
.cl-scrim-bottom::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(74,46,31,.82) 0%, rgba(74,46,31,.35) 38%, rgba(74,46,31,0) 70%); pointer-events: none; }
.cl-scrim-full::before { content: ""; position: absolute; inset: 0; background: rgba(74,46,31,.5); pointer-events: none; }

/* ---------- Movimiento ---------- */
@keyframes cl-rise   { from { opacity: 0; transform: translateY(var(--cl-rise)); } to { opacity: 1; transform: none; } }
@keyframes cl-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cl-drawY  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cl-twinkle{ 0%,100% { opacity: .55; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(0deg); } }
@keyframes cl-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

.cl-rise      { animation: cl-rise var(--cl-dur-slow) var(--cl-ease-emphasis) both; animation-delay: calc(var(--i, 0) * var(--cl-stagger)); }
.cl-fade      { animation: cl-fade var(--cl-dur-slower) var(--cl-ease-soft) both; animation-delay: calc(var(--i, 0) * var(--cl-stagger)); }
.cl-draw      { transform-origin: left center; animation: cl-draw var(--cl-dur-draw) var(--cl-ease-inout) both; animation-delay: calc(var(--i, 0) * var(--cl-stagger)); }
.cl-drawY     { transform-origin: center top;  animation: cl-drawY var(--cl-dur-draw) var(--cl-ease-inout) both; animation-delay: calc(var(--i, 0) * var(--cl-stagger)); }
.cl-twinkle   { animation: cl-twinkle 3.2s var(--cl-ease-inout) infinite; }
.cl-kenburns  { animation: cl-kenburns var(--cl-dur-kenburns) linear both; }
@media (prefers-reduced-motion: reduce) {
  .cl-rise, .cl-fade, .cl-draw, .cl-drawY, .cl-twinkle, .cl-kenburns { animation: none; opacity: 1; transform: none; }
}

/* Aparición al hacer scroll: el JS agrega .is-in (ver index.html). Sin JS el contenido queda visible. */
.js .cl-reveal { opacity: 0; transform: translateY(var(--cl-rise)); transition: opacity var(--cl-dur-slow) var(--cl-ease-emphasis), transform var(--cl-dur-slow) var(--cl-ease-emphasis); transition-delay: calc(var(--i, 0) * var(--cl-stagger)); }
.js .cl-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Redes: lienzos y piezas base ---------- */
.cl-artboard { position: relative; overflow: hidden; background: var(--cl-crema); color: var(--cl-nogal); flex: none; }
.cl-artboard--feed   { width: 1080px; height: 1350px; }
.cl-artboard--square { width: 1080px; height: 1080px; }
.cl-artboard--story  { width: 1080px; height: 1920px; }
.cl-artboard--nogal  { background: var(--cl-nogal); color: var(--cl-crema); }
.cl-artboard--arena  { background: var(--cl-arena); }

/* Cabecera de pieza: "CASA LUISA ——————— ETIQUETA" */
.cl-s-head { position: absolute; left: 96px; right: 96px; display: flex; align-items: center; gap: 28px; }
.cl-s-head::after { content: ""; flex: 1; border-top: 1.5px solid currentColor; opacity: .45; order: 1; }
.cl-s-head > :last-child { order: 2; }
.cl-s-logo { position: absolute; }
.cl-s-foot { position: absolute; left: 96px; right: 96px; display: flex; justify-content: space-between; align-items: center; }
.cl-s-pager { font-family: var(--cl-font-ui); font-size: 20px; letter-spacing: .3em; }