/* styles.css */

:root{
  --navy: #162B4E;         /* Azul Marino Alba (detalles) */
  --metal-pink: #D98BAF;   /* acento rosa metálico */
  --muted: #6B7280;        /* gris neutro */
}

/* Fuentes (ya cargadas en HTML), tipografías */
body {
  font-family: "Poppins", sans-serif;
  background: #ffffff;
  color: #0f172a;
  margin: 0;
}

/* fadeIn (tal como pediste) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 1.2s ease-in-out;
}

/* Layout */
.vh-fit {
  /* min-height: 100vh; */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Accent pill */
.accent-pill {
  background: linear-gradient(90deg,var(--navy), rgba(22,43,78,0.06));
  color: var(--navy);
}

/* Video box */
.video-frame{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.137);
  /* border: 3px solid rgba(217,139,175,0.08); */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  position: relative;
  height: 460px; /* base height; responsive adjustments below */
}

/* Poster overlay: visible until video loads / play */
.poster-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 20; /* above video but below controls (controls z-40) */
  background: #000;
}

/* video occupies same area, behind poster */
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  z-index: 10;
  position: relative;
}

/* responsive video height */
@media (max-width: 640px){
  .video-frame { height: 340px; }
}
@media (min-width: 1024px){
  .video-frame { height: 540px; }
}

/* Big play button */
.big-play {
  width:96px;
  height:96px;
  border-radius:999px;
  background: #162b4e;
  display:flex;
  align-items:center;
  justify-content:center;
  /* box-shadow: 0 18px 40px rgba(217,139,175,0.28); */
  transition: transform .18s ease;
  z-index: 50;
}
.big-play:hover{ transform: scale(1.06); }

/* Controls and buttons bigger */
.control-btn {
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* control bar input accent */
input[type="range"]{
  accent-color: var(--navy);
}

/* aside larger */
.aside-panel {
  width: 100%;
  max-width: 420px;
  min-width: 260px;
  margin-left: auto; margin-right: auto; /* centra en mobile */
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.28);
}

/* Buttons (cta) */
.btn-accent {
  background: rgba(22,43,78,0.5);
  color: var(--navy);
  text-decoration: none;
  display:inline-block;
}
.btn-pink {
  background: #d98baf80;
  color: var(--navy);
  text-decoration: none;
}
.btn-green {
  background: #25D366;
  color: var(--navy);
  text-decoration: none;
}
.btn-navy {
  background: #162B4E;
  color: var(--navy);
  text-decoration: none;
}

/* CTA principal */
.cta-full {
  background: linear-gradient(90deg,var(--navy), var(--metal-pink));
}

/* ensure overlay initial show */
#bigPlayBtn { z-index: 45; }

/* subtle hover for aside */
/* .aside-panel:hover { transform: translateY(-4px); transition: transform .2s ease; } */

/* Accessibility focus */
button:focus, a:focus, input:focus { outline: 3px solid rgba(22,43,78,0.12); outline-offset: 2px; }

/* Ensure no accidental overflow that creates scrollbars */
main { overflow: visible; }
html, body { overflow-x: hidden; } /* evita scroll horizontal */