:root {
  --tierra:     #333333;
  --book-cloth: #B4482A;
  --tinta:      #B4482A;
  --dorado:     #8F3720;
  --manila:     #F2EEEB;
  --crema:      #FFFFFF;
  --blanco:     #FFFFFF;
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", system-ui, sans-serif;
  background: var(--blanco);
  color: var(--tierra);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--book-cloth);
  outline-offset: 3px;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Hero ---------- */

.hero { background: var(--blanco); color: #333333;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 36px);
  text-align: center;
  padding: clamp(32px, 6vh, 64px) 24px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.symbol {
  position: relative;
  width: 54px;
  height: 56px;
  flex-shrink: 0;
}

.symbol .corner-h {
  position: absolute;
  width: 16px;
  height: 4px;
  background: var(--book-cloth);
}

.symbol .corner-v {
  position: absolute;
  width: 4px;
  height: 16px;
  background: var(--book-cloth);
}

.symbol .tl-h { top: 0; left: 0; }
.symbol .tl-v { top: 0; left: 0; }
.symbol .tr-h { top: 0; right: 0; }
.symbol .tr-v { top: 0; right: 0; }
.symbol .bl-h { bottom: 0; left: 0; }
.symbol .bl-v { bottom: 0; left: 0; }
.symbol .br-h { bottom: 0; right: 0; }
.symbol .br-v { bottom: 0; right: 0; }

.symbol .diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: var(--tinta);
  transform: translate(-50%, -50%) rotate(45deg);
}

.lockup__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.lockup__name {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.038em;
  font-size: 26px;
  color: #595959;
}

.lockup__tagline {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  color: #333333;
}

.display {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 4.5vw + 1rem, 3.75rem);
  line-height: 1.1;
  margin: 0;
  max-width: 18ch;
}

.kicker {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  /* Mismo motivo que .lockup__tagline: dorado sobre tierra no cumple AA aca. */
  color: #595959;
  font-size: clamp(0.95rem, 1vw + 0.75rem, 1.15rem);
  max-width: 46ch;
  margin: 0;
}

.signature {
  display: flex;
  width: 100%;
  height: 8px;
  flex-shrink: 0;
}

.signature__band--book-cloth,
.signature__band--dorado,
.signature__band--manila { flex: 1; background: var(--book-cloth); }



/* ---------- Main ---------- */

.main {
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 32px);
  padding: clamp(28px, 5vh, 48px) 24px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tag {
  background: var(--manila);
  color: var(--tierra);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: 10px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  /* 20px es el piso real: blanco/book-cloth da 3.2:1, que solo cumple AA como
     "texto grande" (>=18.66px bold). Bajar el tamaño rompe el contraste. */
  font-size: 1.25rem;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn--primary {
  background: var(--book-cloth);
  color: var(--blanco);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--book-cloth);
  color: var(--tierra);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 24px clamp(20px, 4vh, 32px);
}

.footer p {
  margin: 0;
}

.footer__contact {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--tierra);
}

.footer__legal {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--tierra);
}

/* ---------- Responsive ---------- */

@media (min-width: 721px) {
  html, body {
    height: 100%;
  }

  .page {
    height: 100vh;
  }
}

@media (max-width: 720px) {
  .lockup {
    flex-direction: column;
    gap: 12px;
  }

  .lockup__text {
    align-items: center;
    text-align: center;
  }
}


/* ── Bloque MNI · Manual de Marca V5 ──────────────────────────
   2,97:1 · celdas 32/32/29 del ancho · radio 42% del alto
   M recta · N curva arriba-izq · I curva abajo-der · letras al 71% */
.mni{display:flex; height:40px; width:119px; justify-content:space-between; flex:0 0 auto}
.mni__cell{height:40px; background:var(--book-cloth); color:var(--blanco);
  display:flex; align-items:center; justify-content:center;
  font-family:"Montserrat",system-ui,sans-serif; font-weight:800; font-size:28px; line-height:1}
.mni__m{width:38px; border-radius:0}
.mni__n{width:38px; border-radius:17px 0 0 0}
.mni__i{width:34px; border-radius:0 0 17px 0}
@media (max-width:640px){
  .mni{height:33px; width:98px}
  .mni__cell{height:33px; font-size:23px}
  .mni__m,.mni__n{width:31px} .mni__i{width:28px}
  .mni__n{border-radius:14px 0 0 0} .mni__i{border-radius:0 0 14px 0}
}


/* ── MOBILE FIX ────────────────────────────────────────────────
   Montserrat es mas ancha que la tipografia anterior: a 390px
   el titular, la bajada, los chips y el pie se salian del ancho.
   Los hijos de .hero__inner y .footer tomaban ancho de contenido
   (align-items:center => fit-content), por eso desbordaban. */
@media (max-width: 720px){
  .hero__inner{padding-left:20px; padding-right:20px}
  .hero__inner > *, .footer > *{max-width:100%}
  .display{font-size:clamp(1.5rem, 6.4vw, 3.75rem); max-width:100%}
  .kicker{max-width:100%}
  .tags, .actions{width:100%}
  .display, .kicker{width:100%}
  .tag{font-size:10.5px; letter-spacing:0.16em; padding:9px 13px}
  .footer{padding-left:20px; padding-right:20px}
  .footer__contact{font-size:11px; line-height:1.75}
  .footer__legal{font-size:10px; line-height:1.75}
}
@media (max-width: 400px){
  .tag{font-size:10px; letter-spacing:0.12em; padding:8px 11px}
  .footer__contact{font-size:10px}
  .footer__legal{font-size:9.5px}
  .btn{padding:12px 18px; font-size:15px; white-space:nowrap}
}

/* ── ANTI-DESBORDE ───────────────────────────────────────────
   Red de seguridad: ningun contenedor puede pasar el viewport. */
html, body{overflow-x:hidden}
.page, .hero, .hero__inner, .main, .footer, .tags, .actions{max-width:100vw}