/* =========================================================
   BRAVÍA PRODUCCIONES — CSS COMÚN SEGURO
   Línea gráfica: blanco/negro, Calibri, aire, líneas finas.
   Cargar antes del CSS específico de cada página.
========================================================= */

:root{
  --bravia-white:#ffffff;
  --bravia-black:#0b0b0b;
  --bravia-ink:#0b0b0b;
  --bravia-text:#2b2b2b;
  --bravia-muted:#5f5f5f;
  --bravia-line:rgba(0,0,0,.14);
  --bravia-line-strong:rgba(0,0,0,.32);

  --bravia-font:Calibri, "Segoe UI", Arial, sans-serif;

  /* Alias para compatibilidad con páginas antiguas */
  --ink:var(--bravia-ink);
  --muted:var(--bravia-muted);
  --line:var(--bravia-line);
  --line-strong:var(--bravia-line-strong);

  --gold:var(--bravia-ink);
  --gold-soft:#f4f4f4;
  --sep:var(--bravia-line);

  --primary:var(--bravia-ink);
  --primary-weak:#f4f4f4;

  --maxw:1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--bravia-font);
  color:var(--bravia-ink);
}
img{ max-width:100%; }
a{ color:inherit; }
button, input, textarea, select{ font-family:inherit; }


/* =========================================================
   HEADER GLOBAL BRAVÍA — igual al index
========================================================= */

.bravia-site-header{
  width:min(var(--maxw), calc(100% - 42px));
  margin:0 auto;
  padding:26px 0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--bravia-line);
  background:#ffffff;
}

.bravia-logo-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.bravia-brand-logo{
  width:clamp(190px, 24vw, 310px);
  height:auto;
  display:block;
  filter:grayscale(1) contrast(1.05);
}

.bravia-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.bravia-header-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--bravia-line-strong);
  background:#ffffff;
  color:var(--bravia-ink);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:16px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}

.bravia-header-pill:hover{
  background:#111111;
  color:#ffffff;
  transform:translateY(-2px);
}

@media(max-width:920px){
  .bravia-site-header{
    align-items:center;
    flex-direction:column;
    text-align:center;
  }

  .bravia-header-actions{
    justify-content:center;
  }
}

@media(max-width:680px){
  .bravia-site-header{
    width:min(100% - 26px, var(--maxw));
  }

  .bravia-brand-logo{
    width:min(280px, 82vw);
  }

  .bravia-header-pill{
    min-height:40px;
    padding:0 14px;
    font-size:12px;
  }
}


/* Ajuste header interno: mantiene el mismo encabezado visual del index */
.bravia-site-header{
  width:min(var(--maxw), calc(100% - 42px));
}

/* =========================================================
   MENÚ PRINCIPAL GLOBAL BRAVÍA
   Usado en index y páginas secundarias
========================================================= */

.bravia-main-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.bravia-main-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid transparent;
  background:#ffffff;
  color:#0b0b0b;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:800;
  font-size:13px;
  line-height:1;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.bravia-main-menu a:hover{
  border-color:rgba(0,0,0,.32);
  transform:translateY(-2px);
}

.bravia-main-menu .bravia-menu-cta{
  border:1px solid rgba(0,0,0,.32);
  background:#111111;
  color:#ffffff;
  padding:0 18px;
}

.bravia-main-menu .bravia-menu-cta:hover{
  background:#ffffff;
  color:#0b0b0b;
}

@media(max-width:980px){
  .bravia-site-header{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .bravia-main-menu{
    justify-content:center;
  }
}

@media(max-width:620px){
  .bravia-site-header{
    width:min(100% - 26px, 1160px);
  }

  .bravia-brand-logo{
    width:min(280px, 82vw);
  }

  .bravia-main-menu{
    width:100%;
    gap:7px;
  }

  .bravia-main-menu a{
    flex:1 1 calc(50% - 7px);
    font-size:11px;
    min-height:38px;
    padding:0 10px;
  }

  .bravia-main-menu .bravia-menu-cta{
    flex-basis:100%;
  }
}
/* =========================================================
   FIX FINAL RESPONSIVE BRAVÍA — 2026-06-12
   Capa segura: evita desbordes horizontales y ordena el menú
   en pantallas pequeñas. No modifica cálculos ni JavaScript.
========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
  height:auto;
}

input,
select,
textarea,
button{
  max-width:100%;
}

.bravia-site-header,
.bravia-logo-link,
.bravia-main-menu,
.bravia-main-menu a{
  min-width:0;
}

.bravia-main-menu a{
  white-space:normal;
  text-align:center;
  line-height:1.15;
}

@media screen and (max-width:620px){
  .bravia-site-header{
    width:min(100% - 26px, var(--maxw));
    padding:22px 0 18px;
  }

  .bravia-brand-logo{
    width:min(260px, 84vw);
  }

  .bravia-main-menu{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    gap:7px;
  }

  .bravia-main-menu a{
    width:100%;
    min-height:40px;
    padding:8px 8px;
    font-size:11px;
    letter-spacing:.07em;
  }

  .bravia-main-menu .bravia-menu-cta{
    grid-column:1 / -1;
  }
}

@media screen and (max-width:380px){
  .bravia-main-menu{
    grid-template-columns:1fr;
  }
}