/* Indie Fest Chile - Home styles */
:root{
  /* Foco del recorte del logo en el HERO */
  --hero-focus-x: 52%;  /* 0% = izquierda, 100% = derecha */
  --hero-focus-y: 38%;  /* 0% = arriba, 100% = abajo */
  --hero-zoom: 1.32;    /* 1 = sin zoom, >1 = acerca */

  --hero-height: clamp(220px, 38vh, 360px); /* altura máxima del HERO */

  --hero-max-w: 780px; /* ancho máximo del HERO (frame + logo) */
  --hero-headline-max: 44px; /* tamaño máximo del titular sobre el logo */

  --red: #971d1d;
  --red-dark: #7f1717;
  --orange: #f1a208;
  --black: #0f0f0f;
  --light: #f4f4f5;
  --white: #ffffff;
}

*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; color:#18181b; background:#fff; }

.container{ width:min(1200px, 92%); margin-inline:auto; }

/* NAVBAR */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #e5e7eb; }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand__logo{ width:40px; height:40px; background:#fff; border-radius:10px; object-fit:contain; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.brand__name{ font-weight:800; letter-spacing:-.02em; }
.nav__menu{ display:flex; align-items:center; gap:20px; }
.nav__menu a{ text-decoration:none; color:#111; font-weight:600; }
.nav__toggle{ display:none; background:none; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; font-size:20px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; font-weight:800; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn--accent{ background:var(--orange); color:#111; }
.btn--primary{ background:var(--red); color:var(--white); }
.btn--light{ background:#fff; color:#111; border-color:#e5e7eb; }
.btn:hover{ filter:brightness(0.97); }

/* HERO */
.hero{ background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%); color:#fff; }
.hero__inner{ padding: 28px 0 36px; text-align:center; }
.hero__stage{ display:grid; place-items:center; margin: 8px auto 16px; width:min(var(--hero-max-w), 92%); }
.hero__frame{ position:relative; width:100%; height: var(--hero-height); background:#fff; border-radius:24px; overflow:hidden; box-shadow: 0 18px 40px rgba(0,0,0,.12); border:1px solid #eee; }
.hero__logo{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position: var(--hero-focus-x) var(--hero-focus-y); transform: scale(var(--hero-zoom)); transform-origin: center; will-change: transform; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); pointer-events:none; }
.hero__headline{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width: 88%;
  margin:0;
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(20px, 3vw + 10px, var(--hero-headline-max));
  color: var(--orange);
  text-align:center;
  -webkit-text-stroke: 4px rgba(255,255,255,.88);
  text-shadow:
    0 2px 6px rgba(0,0,0,.25),
    0 8px 20px rgba(0,0,0,.25);
  paint-order: stroke fill;
}

@media (max-width: 560px){
  .hero__headline{ -webkit-text-stroke: 3px rgba(255,255,255,.92); }
}
.hero__subtitle{ opacity:.9; margin: 12px auto 0; max-width: 800px; }
.hero__cta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* SECTIONS */
.section{ padding: 72px 0; }
.section--alt{ background: var(--light); }
.section__title{ font-size: clamp(24px, 3vw, 36px); font-weight:900; letter-spacing:-.02em; margin:0 0 20px; }

/* ABOUT */
.about__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items:center; }
.about__text p{ line-height:1.8; color:#3f3f46; }
.about__actions{ margin-top:16px; }
.about__art .art__card{ background:#fff; border-radius:20px; padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.08); border:1px solid #eee; }
.about__art img{ width:100%; height:auto; display:block; }

/* GRIDS */
.logo-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.logo-tile{ background:#111; color:#fff; display:grid; place-items:center; height:120px; border-radius:14px; border:1px solid #2a2a2a; }
@media (max-width: 900px){
  .logo-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px){
  .logo-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* STAFF */
.staff-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.staff-card{ background:#fff; border-radius:18px; padding:18px; text-align:center; border:1px solid #eee; box-shadow: 0 10px 20px rgba(0,0,0,.05); }
.staff-card__avatar{ width:180px; height:180px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #cbd5e1, #94a3b8); margin: 12px auto 16px; border: 6px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.staff-card__name{ margin:6px 0 0; font-weight:800; }
.staff-card__role{ margin:4px 0 0; color:#52525b; }
@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; }
  .staff-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .staff-grid{ grid-template-columns: 1fr; }
}

/* FOOTER */
.footer{ background:#0c0c0c; color:#fff; padding: 28px 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer__brand{ display:flex; align-items:center; gap:12px; }
.footer__brand img{ width:36px; height:36px; border-radius:10px; background:#fff; }
.footer__social{ display:flex; align-items:center; gap:16px; }
.icon{ width:28px; height:28px; display:inline-grid; place-items:center; color:#fff; opacity:.9; }
.icon:hover{ opacity:1; }

/* MOBILE MENU */
@media (max-width: 860px){
  .nav__toggle{ display:block; }
  .nav__menu{ display:none; position:absolute; top:72px; right:0; left:0; background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 4%; flex-direction:column; gap:14px; }
  .nav__menu.open{ display:flex; }
}

/* HERO without logo */
.hero__title{
  font-weight:900;
  letter-spacing:-.02em;
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw + 8px, 56px);
  color: var(--orange);
  text-shadow: 0 2px 6px rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.18);
}


/* Estado "Próximamente" para tiles */
.logo-tile--soon{
  border: 2px dashed #444;
  opacity: .9;
  font-weight: 800;
  letter-spacing: .02em;
}

.logo-title{
  display:block;
  max-width:82%;
  max-height:72%;                 
  object-fit:contain;             
  object-position:center;
  image-rendering:auto;
}

.logo-tile--image{
  background:#111;
  border:1px solid #2a2a2a;
}

.logo-text{
  color:#0c0c0c
}