/* =============================================================================
   MAIN.CSS — Variables globales, resets y utilidades base
============================================================================= */

:root{
  --paper:#F4F4F4; --paper-2:#F2F2F2; --beige:#E8E0D5; --clay:#A68877;
  --clay-soft:rgba(166,136,119,.14); --ink:#211e1b; --muted:#736a61;
  --line:rgba(166,136,119,.28); --line-soft:rgba(33,30,27,.10);
  --shadow:0 18px 60px -28px rgba(33,30,27,.30);
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Manrope", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --maxw:1280px; --gut:clamp(20px,5vw,72px); --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}

/* --- Utilidades tipográficas globales --- */
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--clay)}
.section-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* --- Placeholder de imagen (fondo mientras carga) --- */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--beige),var(--paper-2) 55%,#ddd2c4);border-radius:14px}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 78% 30%,var(--clay-soft),transparent 60%)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* --- Botones --- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95em 1.7em;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  transition:transform .4s var(--ease),background .35s,color .35s,box-shadow .4s}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--clay);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--clay);color:var(--paper);border-color:var(--clay);transform:translateY(-2px)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* --- Utilidades de espaciado (reemplazan inline style="margin-top:X") --- */
.mt-xs{margin-top:.4rem}
.mt-sm{margin-top:1rem}
.mt-md{margin-top:1.4rem}

/* --- Variante de eyebrow clara (sobre fondo oscuro) --- */
.eyebrow-light{color:#e8e0d5}

/* --- section-no ancho reducido --- */
.section-no--narrow{max-width:30ch}