/* Fuentes locales */
@font-face{
  font-family:'AntonLocal';
  src:url('../fonts/Anton-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MontserratLocal';
  src:url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MontserratLocal';
  src:url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gap-md)}

/* Variables */
:root{
  --azul:#0E2C52;
  --blanco:#FFFFFF;
  --rojo:#D5193A;

  --wrap:1160px;
  --gap-xl:48px;
  --gap-lg:32px;
  --gap-md:24px;
  --gap-sm:16px;

  --r-lg:18px;

  --shadow-card:0 20px 40px rgba(0,0,0,.18);
  --shadow-video:0 14px 32px rgba(0,0,0,.42);

  /* Enfoque unificado hero */
  --hero-object-position: center center; /* puede cambiarse p.ej. 'center 30%' */
  --hero-zoom: 1;                        /* con contain no necesitamos acercar */
  --hero-blur: 16px;                     /* desenfoque del fondo de seguridad */
  --hero-backdrop-dim: 0.85;             /* oscurecimiento del fondo */
}

/* Reset básico */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--azul);
  color:#1e1e1e;
  font-family:'MontserratLocal', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.6;
}

/* Contenedor */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gap-md)}

/* ================== HEADER ================== */
.header{
  padding:var(--gap-md) 0 var(--gap-sm);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:var(--gap-md); padding-right:var(--gap-md); /* respiración lateral */
}
.brand{display:flex; align-items:center; gap:20px}
.brand img{height:auto;width:auto;max-height:65px;display:block}
.brand img:first-child{max-height:70px}

.btn{
  display:inline-block;border:0;border-radius:8px;padding:11px 16px;font-family:'MontserratLocal',sans-serif;font-weight:700;letter-spacing:.3px;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease
}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--rojo);color:#fff;box-shadow:0 6px 14px rgba(213,25,58,.25)}
.btn-primario:hover{opacity:.94;box-shadow:0 8px 18px rgba(213,25,58,.33)}

/* Responsive header */
@media (max-width:768px){
  .header{flex-wrap:wrap; row-gap:10px}
  /* Logos como grupo centrado en primera fila, botón baja a segunda fila */
  .brand{order:1; width:100%; justify-content:center; gap:20px}
  .brand img{max-height:50px}
  .brand img:first-child{max-height:55px}
  .header > .btn{order:2; margin-left:auto; margin-top:8px}
}
/* Móviles muy pequeños: controlar tamaño con clamp para evitar desbordes */
@media (max-width:600px){
  .brand img{max-height: clamp(40px, 14vw, 72px); max-width: calc((100% - 20px)/2)}
  .brand img:first-child{max-height: clamp(44px, 15vw, 78px)}
  .header > .btn{font-size:13px; padding:8px 12px}
}

/* ================== PAPER + HERO UNIFICADO ================== */
.paper{
  background:#fff; border-radius:0;
  box-shadow:var(--shadow-card);
  padding:var(--gap-xl) var(--gap-lg);
  margin-top:0;
  overflow:hidden;
}
@media (max-width:700px){
  .paper{padding:32px 20px}
}
@media (max-width: 480px) {
    .paper {
        padding: 0 var(--gap-lg) var(--gap-md);
    }
}

/* Contenedor destacado con enfoque "hero" unificado */
.featured{
  position:relative;
  margin: calc(-1 * var(--gap-xl)) calc(-1 * var(--gap-lg)) var(--gap-lg);
  isolation:isolate;
  background:#0B2443; /* seguridad detrás */
  height:clamp(320px, 61vh, 600px);
  --_hero-pos: var(--hero-object-position);
  --_hero-zoom: var(--hero-zoom);
  --hero-bg-url: none;                 /* se setea por JS con la src real */
  overflow:hidden;
}

/* Fondo difuminado (cover) para cubrir bordes sin franjas */
.featured::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--hero-bg-url);
  background-repeat:no-repeat;
  background-size:cover;                    /* SIEMPRE cubre */
  background-position: var(--_hero-pos);
  filter: blur(var(--hero-blur)) brightness(var(--hero-backdrop-dim));
  transform: scale(1.06);
  transform-origin: var(--_hero-pos);
}

/* Imagen principal nítida (contain = siempre completa) */
.featured > img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:contain;                        /* CLAVE: imagen completa */
  object-position: var(--_hero-pos);
  transform: scale(var(--_hero-zoom));
  transform-origin: var(--_hero-pos);
  background:transparent;
  object-fit:cover;
}

/* Altura adaptable */
@media (max-width:1024px){
  .featured{ height:clamp(300px, 31vh, 520px) }
}
@media (max-width:600px){
  .featured{ height:clamp(260px, 42vh, 460px) }
  .featured > img{
    object-position:center center;
    transform:scale(1);
    transform-origin:center;
    object-fit: contain;
  }
}
@media (max-width:480px){
  .featured{ height:clamp(184px, 20vh, 460px);margin-top: 0px; }
  .featured > img{
    object-position:center center;
    transform:scale(1);
    transform-origin:center;
    object-fit: contain;
  }
}

/* ================== TIPOGRAFÍA Y CUERPO ================== */
.kicker{
  font-family:'AntonLocal', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:clamp(42px, 6vw, 68px);
  line-height:1; letter-spacing:1px; color:#0E2C52;
  margin:0 0 var(--gap-lg);
  text-align:center;
}
.lead{font-size:clamp(16px, 2vw, 20px); color:#000000; margin-bottom:var(--gap-lg); text-transform:uppercase}
.copy p{margin:.8rem 0; font-size:16px; color:#000000; text-transform:uppercase}

/* ================== SHARE BAR ================== */
.share-bar{
  display:flex; align-items:center; gap:12px;
  margin: 0 0 var(--gap-lg);
  flex-wrap:wrap;
}
.share-bar .label{
  font-weight:700; color:#0E2C52; margin-right:4px;
}
.share-buttons{display:flex; gap:10px; flex-wrap:wrap}
.share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#0E2C52; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.share-btn:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.15)}
.share-btn svg{width:22px;height:22px;display:block}

/* ================== FOOTER ================== */
.footer{background:var(--azul);color:#b9c9dc;padding:20px 0}
.footer-content{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px}
.footer-left{text-align:left}
.footer-center{text-align:center}
.footer-right{text-align:right}
.footer-left p{margin:0;font-size:14px;color:#b9c9dc}
.footer-center p{margin:0;font-size:14px}
.footer-center a{color:#fff;text-decoration:none}
.footer-center a:hover{text-decoration:underline}
.social{display:flex;gap:20px;justify-content:flex-end}
.social a{display:grid;place-items:center;width:auto;height:auto;transition:opacity .2s ease}
.social a:hover{opacity:0.8}
.social img{width:auto;height:auto;max-width:40px;max-height:40px}
@media (max-width:768px){
  .footer-content{grid-template-columns:1fr;gap:16px;text-align:center}
  .footer-left,.footer-center,.footer-right{text-align:center}
  .social{justify-content:center}
}

.back{
  display:inline-flex; align-items:center; gap:12px;
  color:#fff; text-decoration:none; font-weight:700;
  margin:0 0 var(--gap-md) 0;
}
.back svg{flex:0 0 auto}
.back .back-icon{width:34px;height:34px;display:block}