/* CBo PlanetaNativo — estilos de la página de marca.
   La maquetación vive en estilos en línea dentro de marcas/planeta-nativo.html
   (tal como salió del diseño). Aquí quedan solo las piezas que un atributo
   style= no puede resolver: base del documento, estados :hover y ajustes
   responsivos. Los estados hover se definen COMPLETOS aquí (base + :hover)
   porque un estilo en línea gana siempre a una regla de hoja de estilos. */

body{margin:0; background:#06100F}
*{box-sizing:border-box}
a{color:#D4AF37; text-decoration:none}
a:hover{color:#688F3A}
::selection{background:#688F3A; color:#06100F}
img,video{max-width:100%}
html{scroll-behavior:smooth}

/* ── marca ───────────────────────────────────────────────────────────────── */
.pn-lockup{color:#E8E6E8; display:flex}
.pn-lockup:hover{color:#E8E6E8}

/* La fotografía del hero tiene una banda clara de atardecer justo donde caen el
   ojal y el titular: la sombra los mantiene legibles sin oscurecer la imagen. */
.pn-hero-copy,.pn-hero-top{text-shadow:0 2px 18px rgba(6,16,15,0.75)}
.pn-hero-copy .pn-btn-gold,.pn-hero-copy .pn-btn-ghost,.pn-hero-top .pn-btn-outline{text-shadow:none}

/* ── navegación ──────────────────────────────────────────────────────────── */
.pn-navlink{color:rgba(232,230,232,0.78); transition:color .2s}
.pn-navlink:hover{color:#D4AF37}

/* ── botones ─────────────────────────────────────────────────────────────── */
.pn-btn-outline,.pn-btn-gold,.pn-btn-ghost{
  font-family:Montserrat,Arial,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  transition:background-color .22s, color .22s, border-color .22s}

.pn-btn-outline{border:1px solid rgba(212,175,55,0.8); color:#D4AF37; background:transparent}
.pn-btn-outline:hover{background:#D4AF37; color:#06100F}

.pn-btn-gold{background:#D4AF37; color:#06100F}
.pn-btn-gold:hover{background:#688F3A; color:#06100F}

.pn-btn-ghost{border:1px solid rgba(232,230,232,0.28); color:#E8E6E8}
.pn-btn-ghost:hover{border-color:#688F3A; color:#688F3A}

/* ── responsivo ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  /* la retícula 1fr/2.1fr de la sección Plataforma se apila */
  .pn-split{grid-template-columns:1fr !important; gap:40px !important}
}

@media(max-width:760px){
  /* márgenes laterales de todas las secciones y del pie */
  section,footer,#pn-header{padding-left:22px !important; padding-right:22px !important}
  section{padding-top:76px !important; padding-bottom:76px !important}
  /* el hero conserva el alto completo, pero deja aire al lockup superior */
  #top{padding-top:170px !important; padding-bottom:56px !important}
  .pn-hero-top{top:24px !important; left:22px !important; right:22px !important}
  .pn-hero-top img{width:44px !important; height:44px !important}
  footer{gap:16px 24px !important; padding-top:32px !important; padding-bottom:32px !important}
}

@media(max-width:420px){
  /* el lockup del hero y su botón dejan de competir por la misma línea */
  .pn-hero-top{flex-direction:column; align-items:flex-start !important; gap:14px !important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #pn-header{transition:none}
}