/* Portada temporal de Party Bites: video de fondo, titular que crece y acceso para admins */
:root {
  --negro: #000000;
  --mostaza: #EFB43F;
  --mostaza-honda: #C98F22;
  --hueso: #F5EEE2;
  --ceniza: #B8B0A3;
  --rojo-aviso: #FF8A6B;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texto: "Big Shoulders Text", "Arial Narrow", sans-serif;
  --margen: clamp(1rem, 4vw, 3.5rem);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 1.125rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Fondo: video de fotos oscurecidas ---------- */
.fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--negro); }

.fondo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04); /* esconde los bordes que deja el difuminado */
}

.fondo-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .35) 100%),
    radial-gradient(ellipse at 70% 40%, transparent 0%, rgba(0, 0, 0, .45) 75%);
}

/* ---------- Logo ---------- */
.cabecera {
  position: relative;
  z-index: 1;
  padding: var(--margen) var(--margen) 0;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: .9;
  letter-spacing: .06em;
  color: var(--hueso);
}

.logo-linea { display: inline-flex; align-items: baseline; }

.logo-a {
  width: .78em;
  height: .72em;
  margin: 0 .04em;
  color: var(--mostaza);
  align-self: center;
}

/* ---------- Titular ---------- */
.portada {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 7rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem var(--margen) calc(var(--margen) + 4.5rem);
  max-width: 78rem;
}

.titular {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}

/* Cada línea es más grande que la anterior: la frase crece "en grande" */
.titular span { display: block; }
.titular-1 { font-size: clamp(2.1rem, 6.2vw, 5.2rem); font-weight: 700; color: var(--ceniza); }
.titular-2 { font-size: clamp(3.3rem, 11.6vw, 9.6rem); }
.titular-3 { font-size: clamp(4.6rem, 17.5vw, 14.5rem); margin-left: -.03em; }

.bajada {
  margin: 1.6rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--hueso);
  opacity: .88;
}

.contacto {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.6rem;
}

.boton-whatsapp {
  display: inline-block;
  padding: .85rem 1.5rem;
  background: var(--mostaza);
  color: var(--negro);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .15s;
}
.boton-whatsapp:hover { background: var(--hueso); }

.enlace-ig {
  color: var(--hueso);
  font-weight: 600;
  text-decoration-color: rgba(245, 238, 226, .4);
  text-underline-offset: .25em;
}
.enlace-ig:hover { text-decoration-color: var(--mostaza); }

/* Entrada única del titular al cargar */
@media (prefers-reduced-motion: no-preference) {
  .titular span, .bajada, .contacto {
    animation: subir .9s cubic-bezier(.2, .7, .2, 1) both;
  }
  .titular-2 { animation-delay: .12s; }
  .titular-3 { animation-delay: .24s; }
  .bajada { animation-delay: .5s; }
  .contacto { animation-delay: .62s; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(.35em); }
  to { opacity: 1; transform: none; }
}

/* ---------- Acceso para admins (abajo a la derecha) ---------- */
.acceso {
  position: fixed;
  right: var(--margen);
  bottom: var(--margen);
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: .6rem;
  width: min(20rem, calc(100vw - 2 * var(--margen)));
}

.acceso-boton {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--hueso);
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(245, 238, 226, .3);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .15s, color .15s;
}
.acceso-boton:hover, .acceso-abierto .acceso-boton { border-color: var(--mostaza); color: var(--mostaza); }

.acceso-panel {
  width: 100%;
  padding: 1.1rem;
  background: rgba(10, 8, 4, .88);
  border: 1px solid rgba(239, 180, 63, .45);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  display: grid;
  gap: .55rem;
}
.acceso-panel[hidden] { display: none; }

.acceso-panel label { font-weight: 600; font-size: .95rem; }

.acceso-panel input {
  font: inherit;
  font-size: 1.05rem;
  width: 100%;
  padding: .65rem .75rem;
  color: var(--hueso);
  background: rgba(245, 238, 226, .08);
  border: 1px solid rgba(245, 238, 226, .35);
  border-radius: 8px;
}
.acceso-panel input[aria-invalid="true"] { border-color: var(--rojo-aviso); }

.acceso-error { margin: 0; color: var(--rojo-aviso); font-size: .95rem; }

.acceso-acciones { display: flex; gap: .6rem; margin-top: .2rem; }

.acceso-entrar, .acceso-cerrar {
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: .6rem 1rem;
  cursor: pointer;
}
.acceso-entrar { flex: 1; background: var(--mostaza); color: var(--negro); border: 0; }
.acceso-entrar:hover { background: var(--hueso); }
.acceso-cerrar { background: transparent; color: var(--hueso); border: 1px solid rgba(245, 238, 226, .3); }

/* Foco visible con teclado en todo lo que se puede pulsar */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--mostaza);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .portada { padding-bottom: 6.5rem; }
  .contacto { gap: .8rem 1.2rem; }
}