/* =====================================================================
   ARTECLAU — Sistema de diseño base
   Arte sacro y contemporáneo · óleo sobre lienzo
   ===================================================================== */

/* ---- Tipografía ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  /* Neutros cálidos */
  --lienzo:   #F7F3EC;  /* fondo principal — marfil cálido */
  --marfil:   #FCF9F3;  /* superficies / tarjetas */
  --lino:     #E6DECF;  /* líneas, bordes sutiles */
  --arena:    #C9B79C;  /* tono medio decorativo */
  --sombra:   #8A7E6A;  /* texto secundario */
  --tinta:    #211C16;  /* texto principal (negro cálido) */
  --carbon:   #25201B;  /* secciones oscuras */
  --carbon-2: #1A1612;  /* negro más profundo */

  /* Acento — oro antiguo */
  --oro:      #B0894C;  /* acento principal */
  --oro-luz:  #CBA968;  /* hover / luz */
  --oro-tinta:#8A6A38;  /* oro sobre fondo claro, mejor contraste */

  /* Tipos */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Métrica */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 2px;

  --shadow-soft: 0 1px 2px rgba(33,28,22,.04), 0 12px 40px -12px rgba(33,28,22,.14);
  --shadow-art:  0 2px 6px rgba(33,28,22,.08), 0 30px 60px -24px rgba(33,28,22,.32);
}

*{ box-sizing:border-box; }

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body{
  margin:0;
  background:var(--lienzo);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  font-size:17px;
}

/* ---- Tipos display ---- */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.01em;
}

h1,h2,h3{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; margin:0; }

/* Eyebrow / label */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--oro-tinta);
}
.eyebrow--light{ color:var(--oro-luz); }

/* ---- Botones ---- */
.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:16px 32px;
  border:1px solid var(--tinta);
  background:var(--tinta);
  color:var(--marfil);
  cursor:pointer;
  border-radius:var(--radius);
  transition:.35s cubic-bezier(.2,.7,.2,1);
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{ background:var(--carbon-2); transform:translateY(-1px); }

.btn--ghost{
  background:transparent; color:var(--tinta);
}
.btn--ghost:hover{ background:var(--tinta); color:var(--marfil); }

.btn--gold{
  background:var(--oro); border-color:var(--oro); color:var(--carbon-2);
}
.btn--gold:hover{ background:var(--oro-luz); border-color:var(--oro-luz); }

.btn--block{ width:100%; justify-content:center; }

/* Link con subrayado animado */
.link-underline{
  position:relative; text-decoration:none; color:inherit;
  padding-bottom:2px;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- Logo: monograma (Paspartú / doble línea) ---- */
.ac-mark{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid currentColor;
  font-family:var(--serif); font-weight:500;
  letter-spacing:.02em; line-height:1;
}
.ac-mark::before{
  content:"";
  position:absolute; inset:11%;
  border:1px solid currentColor;
  pointer-events:none;
}

.ac-mark--disc{ border-radius:50%; }
.ac-mark--disc::before{ display:none; }

/* ---- Wordmark ---- */
.ac-wordmark{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ac-wordmark .arte{ font-weight:400; }
.ac-wordmark .clau{ font-weight:600; }

/* utilidades */
.u-center{ text-align:center; }
.u-serif{ font-family:var(--serif); }
.u-italic{ font-style:italic; }
.muted{ color:var(--sombra); }