/* Mushroom Pillow — legal pages shared stylesheet */

@font-face{
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/NHaasGroteskDSPro-75Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tipografía nueva (auto-alojada) — ver CLAUDE.md para el criterio de asignación */
@font-face{
  font-family: 'Europa Grotesk SH';
  src: url('../fonts/EuropaGroteskSH-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Europa Grotesk SH';
  src: url('../fonts/EuropaGroteskSH-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Europa Grotesk SH';
  src: url('../fonts/EuropaGroteskSH-DemBol.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Futura Display';
  src: url('../fonts/FuturaTS-Heavy.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Futura Label';
  src: url('../fonts/Futura-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --color-red: #E31B17;
  --color-white: #FFFFFF;
  --color-black: #1A1A18;
  --color-off-white: #F8F5F0;
  --color-text-muted: #5A5A58;
  --maxw: 760px;
}

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

body{
  margin: 0;
  background: var(--color-off-white);
  color: var(--color-black);
  font-family: 'Europa Grotesk SH', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 24px 100px;
}

a{ color: var(--color-red); }

h1, h2{
  font-family: 'Futura Display', 'Europa Grotesk SH', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(32px, 6vw, 48px); margin: 0 0 8px; }
h2{ font-size: 22px; margin: 40px 0 12px; }

.updated{
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 32px;
}

.quick-guide{
  background: var(--color-white);
  border: 3px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 40px;
}
.quick-guide p{ margin: 0 0 10px; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
.quick-guide ol{ margin: 0; padding-left: 20px; }
.quick-guide li{ margin-bottom: 4px; }

.legal-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 3px solid var(--color-black);
  font-family: 'Futura Label', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legal-nav a.active{ color: var(--color-black); text-decoration: underline; }

.brand-logo{
  display: block;
  width: 220px;
  max-width: 60%;
  height: auto;
  margin: 0 0 32px;
}

.btn-manage-cookies{
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  border: 3px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  border-radius: 8px;
  padding: 14px 22px;
  font-family: 'Futura Label', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin: 24px 0;
  transition: transform .15s;
}
.btn-manage-cookies:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--color-black); }

.back-link{
  display: inline-block;
  margin-top: 48px;
  font-family: 'Futura Label', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table-scroll{ overflow-x: auto; margin: 16px 0 24px; }
.table-scroll .cookie-table{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}
.cookie-table th, .cookie-table td{
  border: 2px solid var(--color-black);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.cookie-table th{
  background: var(--color-black);
  color: var(--color-white);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}