/* ===========================================================
   iAgency × Expocamacol 2026 — Spot Pantalla + Video 2D/3D
   Versión fondo blanco — Editorial Old (títulos) + Work Sans (cuerpo)
=========================================================== */

@font-face{
  font-family: 'Editorial Old';
  src: url('assets/fonts/PPEditorialOld-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Work Sans';
  src: url('assets/fonts/WorkSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Work Sans';
  src: url('assets/fonts/WorkSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Work Sans';
  src: url('assets/fonts/WorkSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
:root{
  --gold: #000000;
  --gold-dim: #000000;
  --gold-bright: #000000;
  --gray: #000000;
  --gray-mid: #000000;
  --gray-line: #e4e2dc;
  --ink: #000000;
  --bg: #ffffff;
  --bg-soft: #ffffff;

  --font-display: 'Editorial Old', serif;
  --font-body: 'Work Sans', sans-serif;

  --ease: cubic-bezier(.22,.68,.36,1);
  --dur-s: .25s;
  --dur-m: .5s;
  --dur-l: .9s;

  --radius: 18px;
  --radius-sm: 12px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; background: #ffffff; }
html::-webkit-scrollbar{ display: none; width: 0; height: 0; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--ink); color: #ffffff; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===========================================================
   Section shell
=========================================================== */
.section{
  position: relative;
  padding: 100px 0;
  background: transparent;
}
/* ===========================================================
   Light wrap — one continuous white ground running behind the
   proposal cover through the closing.
=========================================================== */
.light-wrap{
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* ===========================================================
   Background effect — subtle diagonal shadow fixed behind the
   whole page, fading out toward the rest of the white ground.
=========================================================== */
.bg-fx{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0,0,0,.09) 0%, transparent 45%);
}
main{
  position: relative;
  z-index: 1;
}

.section--light{
  --ink: #000000;
  --gray: #000000;
  --gray-mid: #000000;
  --gray-line: #e4e2dc;
  --gold: #000000;
  position: relative;
  background: transparent;
  padding: 56px 0;
}
/* 5% tighter gap between the cover ("Spot publicitario") and
   Pantalla 3D specifically. */
#proposal{ padding-bottom: 53px; }
#pantalla-3d{ padding-top: 53px; }

/* ===========================================================
   Section inner — centered content column, no card container
=========================================================== */
.section-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}
.section-inner--center{ text-align: center; }
.section-inner--center .chapter-head{ text-align: center; }

/* ===========================================================
   Hero — full-bleed intro video, no copy, no header
=========================================================== */
.section--hero{
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
}
@supports (height: 100dvh){
  .section--hero{ height: 100dvh; min-height: 100dvh; }
}
.hero-video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #000000;
  z-index: 3;
  animation: cue-bob 2.4s ease-in-out infinite;
}
.hero-scroll-cue span{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
}
.hero-scroll-cue svg{ width: 16px; height: 16px; opacity: .85; }
@keyframes cue-bob{
  0%, 100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 8px); }
}

/* ===========================================================
   Reveal-on-scroll
=========================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ===========================================================
   Chapter header block
=========================================================== */
.chapter-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(40px, 6.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.chapter-title--sub{ font-size: clamp(32px, 5.1vw, 51px); color: var(--gold); }
.chapter-head{ margin-bottom: 28px; }

/* "Spot publicitario" cover title — 10% larger, with 10% extra space above */
#proposal .chapter-title{
  font-size: clamp(44px, 7.3vw, 75px);
  margin-top: 10%;
}

/* ===========================================================
   Dot list — used for Pantalla 3D and Avisos publicitarios
=========================================================== */
.dot-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.dot-list li{
  position: relative;
  padding-left: 26px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  text-align: justify;
}
.dot-list li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.footnote{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #999999;
  text-align: justify;
}

/* ===========================================================
   Section description paragraph (Presencia de marca)
=========================================================== */
.section-desc{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 28px;
  text-align: justify;
}

/* ===========================================================
   Lead line (Avisos publicitarios)
=========================================================== */
.lead-line{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
  text-align: justify;
}

/* ===========================================================
   Investment total
=========================================================== */
.total-summary{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px 0 32px;
  margin-bottom: 24px;
}
.total-summary__value{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(50px, 8.2vw, 85px);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.total-summary__benefit{
  margin-top: 10%;
  text-align: center;
  font-style: italic;
}
.benefit-lead{
  font-weight: 700;
}
.lead-line--italic{
  font-style: italic;
}
.terms-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.terms-list li{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #999999;
  text-align: justify;
}

/* ===========================================================
   Comp video — full-bleed section between Pantalla 3D and Avisos
=========================================================== */
.section--video{
  display: flex;
  justify-content: center;
  padding-left: 24px;
  padding-right: 24px;
}
.video-full{ position: relative; z-index: 1; width: 100%; max-width: 784px; line-height: 0; }
.comp-video{ width: 100%; height: auto; display: block; border-radius: 12px; }

/* ===========================================================
   Fair cards — click to slide the front out and reveal the back
=========================================================== */
.fair-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.fair-card{
  position: relative;
  height: 320px;
  overflow: hidden;
  border: 1px solid #000;
  cursor: pointer;
}
.fair-card .face{
  position: absolute;
  inset: 0;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  transition: transform .4s cubic-bezier(.22,.68,.36,1);
}
.fair-card .face--front{ background: #fff; transform: translateY(0); }
.fair-card .face--back{
  background: #fff;
  border-top: 3px solid #000;
  transform: translateY(100%);
}
.fair-card.is-open .face--front{ transform: translateY(-100%); }
.fair-card.is-open .face--back{ transform: translateY(0); }

.fair-card__num{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
}
.fair-card__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  color: #000;
}
.fair-card__hint{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #888;
}
.fair-card__dates{
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  color: #666;
}
.fair-card__text{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  text-align: justify;
  color: #000;
}
.fair-card__stat{
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  color: #000;
}
.face--logo{
  align-items: center;
  text-align: center;
}
.fair-card__logo{
  width: 63%;
  max-width: 168px;
  height: auto;
}

/* ===========================================================
   Responsive
=========================================================== */

/* Tablet (portrait & landscape) — also absorbs the narrow-desktop
   range down to 1024px. */
@media (max-width: 1150px){
  .section--light{ padding: 48px 0; }
  #proposal{ padding-bottom: 46px; }
  #pantalla-3d{ padding-top: 46px; }
  .section-inner{ max-width: 680px; }
}

/* Phones */
@media (max-width: 720px){
  .section--light{ padding: 40px 0; }
  #proposal{ padding-bottom: 38px; }
  #pantalla-3d{ padding-top: 38px; }
  .section--video{ padding-left: 18px; padding-right: 18px; }
  .section-inner{ padding: 0 22px; }
  .total-summary{ padding: 8px 0 24px; }
  .fair-cards{ grid-template-columns: 1fr; }
}