:root{
  --bg:#101010;
  --panel:#161616;
  --text:#F7F7F7;
  --muted:#C9C9C9;
  --line:#262626;
  --brand:#FF5A1F;
  --brand-2:#FF7A00;
  --brand-dark:#D84412;
  --accent:#FFD9C6;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height:1.4;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--container); margin-inline:auto; padding:0 20px}

/* ------------------ HEADER / HERO ------------------ */
header.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:32px 0 24px;
  /* background image fills hero area, gradients layered on top for contrast */
  background-image:
    radial-gradient(1000px 380px at 85% -5%, rgba(255,122,0,.20), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, rgba(255,90,31,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(15,15,15,0.18) 100%);
  background-size: auto, auto, cover;
  background-position: 85% -5%, -10% 10%, center;
  background-repeat: no-repeat;
}
.topline{
  font-size:.85rem; color:var(--muted); letter-spacing:.3px;
  display:flex; gap:12px; align-items:center; margin-bottom:16px;
}
.badge{padding:6px 10px; border:1px solid var(--line); border-radius:999px; backdrop-filter: blur(6px)}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr; text-align:center} }

.kicker{font-weight:700; color:#fff; letter-spacing:.4px; font-size:14px; text-transform:uppercase; opacity:.8}

.display{
  font-family:"Bebas Neue", sans-serif; font-size:64px; line-height:.95; letter-spacing:.5px; margin:6px 0 14px;
}
@media (max-width: 640px){ .display{font-size:44px} }

.display strong{color:#fff}
.display .brand{color:var(--brand); text-shadow:0 4px 24px rgba(255,90,31,.4)}

.lead{max-width:52ch; color:#e9e9e9; opacity:.92}
.cta-row{display:flex; gap:12px; align-items:center; margin-top:18px}
@media (max-width: 980px){ .cta-row{justify-content:center; flex-wrap:wrap} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:12px; font-weight:700; border:1px solid transparent; cursor:pointer}
.btn-primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#101010; box-shadow:0 10px 24px rgba(255,90,31,.28)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:#2b2b2b; color:#eaeaea; background:#141414}
.btn-ghost:hover{background:#1b1b1b}

.hero-art{position:relative}
.hero-art .blob{
  position:absolute; inset:auto -40% -40% auto; width:120%; height:120%; z-index:-1;
  background:radial-gradient(40% 40% at 60% 40%, rgba(255,122,0,.26), transparent 70%),
             radial-gradient(40% 40% at 40% 60%, rgba(255,90,31,.22), transparent 70%);
  filter:blur(30px);
}

/* ------------------ SECTION TITLE ------------------ */
.section{
  padding:64px 0; border-top:1px solid var(--line);
  background-image: radial-gradient(1px 1px at 16px 16px, #1d1d1d 1px, transparent 0);
  background-size: 20px 20px;
}
.section h2{
  font-family:"Bebas Neue", sans-serif; letter-spacing:.6px; font-size:44px; margin:0 0 18px; text-align:center;
}
.section .sub{color:#d0d0d0; text-align:center; max-width:70ch; margin:0 auto 28px}
.brand-inline{color:var(--brand)}

/* ------------------ VÍDEO CARD ------------------ */
.video-wrap{display:flex; justify-content:center}
.video-card{
  width:min(980px, 100%); aspect-ratio:16/9; background:#fff; color:#111; border-radius:22px; box-shadow:var(--shadow);
  display:grid; place-items:center; font-weight:800; font-size: clamp(20px, 5vw, 44px);
  position:relative; overflow:hidden; border:1px solid #eee;
}
.video-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%, rgba(255,122,0,.09), transparent 40%);
}
/* small overlay to visually hide YouTube branding watermark in the iframe (non-invasive, pointer-events:none) */
.yt-mask{
  position:absolute;
  right:10px;
  bottom:10px;
  width:72px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(180deg,#0f0f0f, rgba(15,15,15,0.65));
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  pointer-events:none;
  z-index:40;
}

/* ------------------ HIDE VIDEO UI BUTTONS ------------------ */
/* Ensure iframe can receive pointer events so user can unmute / interact */
.video-card iframe {
  pointer-events: auto;
}

/* hide the small mask and any potential YouTube control overlays inside the card */
.yt-mask,
.video-card .yt-controls,
.video-card .yt-button {
  display: none !important;
}

/* cover typical YouTube branding/watermark regions (top-left and bottom-right),
   placed above the iframe but pointer-events:auto so it doesn't block interactions
   handled by the page JS (iframe already disabled pointer events). */
.branding-cover{
  position:absolute;
  inset:0;
  /* allow pointer events to reach the iframe so users can control sound */
  pointer-events: none;
  z-index:50;
  background: transparent;
}
.branding-cover::before,
.branding-cover::after{
  content:"";
  position:absolute;
  background: rgba(15,15,15,0.92); /* dark, nearly-opaque to hide YouTube overlays */
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  mix-blend-mode:normal;
  opacity:1;
  z-index:51;
}
/* top-left small cover (for small player logo/watermark) */
.branding-cover::before{
  left:8px;
  top:8px;
  width:96px;
  height:34px;
}
/* bottom-right small cover (for any watermark/branding) */
.branding-cover::after{
  right:8px;
  bottom:8px;
  width:96px;
  height:34px;
}
/* New: an extra element to cover the full-width bottom control area (playbar, time, share etc.) */
.branding-cover .control-cover{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:64px; /* covers typical control bar height */
  background: linear-gradient(180deg, rgba(15,15,15,0.0), rgba(15,15,15,0.94));
  z-index:51;
  pointer-events:auto;
}
/* respect reduced-motion / accessibility and avoid hiding important controls for small screens */
@media (max-width:480px){
  .branding-cover::before,
  .branding-cover::after{ width:64px; height:24px; }
  .branding-cover .control-cover{ height:56px; }
}

/* ------------------ BENEFÍCIOS ------------------ */
.benefits{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center}
@media (max-width: 900px){ .benefits{grid-template-columns:1fr; text-align:center} }
.stamp{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:#1d1d1d; border:1px dashed #2f2f2f; box-shadow: inset 0 0 0 8px #141414}
.check{display:flex; align-items:flex-start; gap:12px; padding:12px 0; color:#eaeaea}
.check svg{flex:0 0 22px}
.muted{color:var(--muted); font-size:.95rem}

/* image replacement for stamp */
.stamp-image{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:20px;
  border:1px solid #2f2f2f;
  box-shadow:var(--shadow);
  display:block;
}

/* Logo splash effect: orange explosion droplets behind the stamp-image */
.logo-splash{
  position:relative;
  display:inline-block;
  padding:12px;
}
.logo-splash .splash{
  position:absolute;
  left:50%;
  top:50%;
  width:360px;
  height:360px;
  transform:translate(-50%,-50%);
  z-index:0;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,122,31,0.28) 0%, rgba(255,90,31,0.18) 18%, rgba(255,122,31,0.08) 36%, transparent 48%),
              radial-gradient(circle at 70% 60%, rgba(255,154,92,0.14) 0%, transparent 35%);
  filter: blur(8px);
  pointer-events:none;
  mix-blend-mode:screen;
  /* subtle scale pulse for life */
  animation: splash-shimmer 2400ms ease-in-out infinite;
}
.logo-splash .splash::before,
.logo-splash .splash::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  background: radial-gradient(circle, rgba(255,122,31,0.95) 0%, rgba(255,90,31,0.92) 40%, rgba(255,122,31,0.12) 60%, transparent 70%);
  border-radius:50%;
  filter: blur(2px);
}
.logo-splash .splash::before{
  width:18px; height:18px;
  left:18%; top:22%;
  box-shadow:
    40px -28px 0 6px rgba(255,122,31,0.82),
    90px -8px 0 8px rgba(255,154,92,0.65),
    -48px -10px 0 5px rgba(255,90,31,0.72);
}
.logo-splash .splash::after{
  width:14px; height:14px;
  right:20%; bottom:18%;
  box-shadow:
    -36px 42px 0 6px rgba(255,122,31,0.82),
    -92px 10px 0 8px rgba(255,154,92,0.60),
    56px 34px 0 5px rgba(255,90,31,0.70);
}
.logo-splash img.stamp-image{
  position:relative;
  z-index:2;
  /* slight lift so splash is visible around edges */
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}
.logo-splash:hover img.stamp-image{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 30px 80px rgba(255,90,31,0.18);
}

@keyframes splash-shimmer {
  0% { transform: translate(-50%,-50%) scale(.985); opacity:0.98; }
  50% { transform: translate(-50%,-50%) scale(1.02); opacity:1; }
  100% { transform: translate(-50%,-50%) scale(.985); opacity:0.98; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-splash .splash { animation: none; transform:none; filter: none; }
  .logo-splash img.stamp-image:hover { transform:none; box-shadow:none; }
}

/* ------------------ SOBRE ------------------ */
.about{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch}
.card{background:#141414; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow)}
.about h3{margin:6px 0 10px}
.about p{color:#dcdcdc}
@media (max-width: 900px){ .about{grid-template-columns:1fr} }

/* New: constrain image inside the about card to make it smaller */
.about .card img {
  width: 100%;
  max-width: 100%; /* allow image to use full card width */
  /* remove strict max-height and let image fill card */
  height: 100%;          /* fill the card's vertical space */
  object-fit: cover;     /* cover the area while preserving aspect */
  border-radius:12px;
  display:block;
  margin:0 auto;
}

/* ------------------ FORM GRADIENT ------------------ */
.cta-section{
  position:relative; isolation:isolate; overflow:hidden; border-top:1px solid var(--line);
  padding:70px 0; background: radial-gradient(80% 100% at 50% 0%, rgba(255,90,31,.3), rgba(255,45,85,.2) 40%, transparent 70%),
                               linear-gradient(180deg, #201312 0%, #150f0e 60%, #0f0f0f 100%);
}
.cta-card{max-width:760px; margin:0 auto}
.cta-card h2{margin-bottom:6px}
.cta-card p{color:#f2f2f2; opacity:.95; text-align:center}
form{margin-top:16px}
.grid-form{display:grid; gap:12px}
input, select, textarea{
  width:100%; padding:14px 14px; border-radius:12px; background:#111; color:#fff; border:1px solid #2a2a2a;
  outline:none; transition:.2s border-color;
}
input:focus, textarea:focus{border-color:var(--brand)}
.btn-submit{
  width:100%;
  margin-top:10px;
  padding:14px 18px;
  border-radius:12px;
  border:0;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#111;
  box-shadow:0 10px 24px rgba(255,90,31,.28);
  /* ensure text is centered */
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
 
 .whatsapp{
   position:fixed; right:16px; bottom:16px; z-index:50;
   display:flex; align-items:center; gap:10px; background:#128C7E; color:#fff; border-radius:999px; padding:10px 14px;
   box-shadow:0 12px 30px rgba(0,0,0,.35)
 }
 .whatsapp:hover{filter:brightness(1.05)}
 
 footer{border-top:1px solid var(--line); padding:28px 0 60px; text-align:center; color:#a9a9a9; font-size:.92rem}
 .links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px}
 .links a{color:#cfcfcf}
 
/* ------------------ BUTTON ANIMATIONS ------------------ */
@keyframes btn-press {
  0% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(255,90,31,.28); }
  50% { transform: translateY(1.5px) scale(.998); box-shadow: 0 6px 18px rgba(255,90,31,.20); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(255,90,31,.28); }
}

@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Primary buttons: subtle lift and sliding shine on hover/focus */
.btn-primary {
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform, box-shadow;
  position:relative;
  overflow:hidden;
}
.btn-primary::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 100%);
  transform: translateX(-100%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 26px 60px rgba(255,90,31,.28);
  outline: none;
}
.btn-primary:hover::after,
.btn-primary:focus::after {
  animation: shine .9s linear forwards;
}
.btn-primary:active {
  animation: btn-press .22s ease;
}

/* Ghost buttons: subtle border glow on hover/focus */
.btn-ghost {
  transition: box-shadow .18s ease, transform .12s ease;
}
.btn-ghost:hover,
.btn-ghost:focus {
  box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 18px rgba(255,122,31,.06) inset;
  transform: translateY(-2px);
  outline: none;
}
.btn-ghost:active { transform: translateY(0); }

/* Submit button special pulse to call attention after page load */
.btn-submit {
  position:relative;
  transition: transform .16s ease, box-shadow .16s ease, opacity .18s ease;
  will-change: transform, box-shadow;
  overflow:visible;
  /* preserve centered layout for any state overrides */
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* subtle pulse that runs once after load to draw attention, but does not loop endlessly */
@keyframes pulse-one {
  0% { box-shadow: 0 10px 24px rgba(255,90,31,.18); transform: translateY(0); }
  50% { box-shadow: 0 28px 68px rgba(255,90,31,.28); transform: translateY(-4px); }
  100% { box-shadow: 0 10px 24px rgba(255,90,31,.18); transform: translateY(0); }
}
.btn-submit.pulse {
  animation: pulse-one 800ms ease 150ms 1;
}

/* New: blinking (piscando) highlight for submit button */
@keyframes blink {
  0%   { box-shadow: 0 10px 24px rgba(255,90,31,.14); transform: translateY(0) scale(1); opacity:1; }
  50%  { box-shadow: 0 30px 72px rgba(255,90,31,.36); transform: translateY(-4px) scale(1.01); opacity:.94; }
  100% { box-shadow: 0 10px 24px rgba(255,90,31,.14); transform: translateY(0) scale(1); opacity:1; }
}

/* .blink uses a subtle, accessible blinking that doesn't hide content — it pulses brightness and shadow */
.btn-submit.blink {
  animation: blink 1.2s ease-in-out infinite;
  will-change: box-shadow, transform, opacity;
}

/* Respect reduced-motion preference: disable infinite blinking */
@media (prefers-reduced-motion: reduce) {
  .btn-submit.blink { animation: none; }
}

/* active/pressed state for accessibility and tactile feedback */
.btn-submit:active {
  transform: translateY(1.5px) scale(.998);
  box-shadow: 0 6px 14px rgba(0,0,0,.36);
}

/* reduce motion preference: simplify animations */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .btn-submit { transition: none; animation: none !important; }
  .btn-primary::after { display:none; }
}

/* ------------------ BUTTON MOTION (hover + subtle idle) ------------------ */

/* blinking (piscando) highlight for general CTA buttons */
@keyframes blink {
  0%   { box-shadow: 0 8px 20px rgba(255,90,31,.12); transform: translateY(0) scale(1); opacity:1; }
  50%  { box-shadow: 0 30px 72px rgba(255,90,31,.30); transform: translateY(-3px) scale(1.01); opacity:.95; }
  100% { box-shadow: 0 8px 20px rgba(255,90,31,.12); transform: translateY(0) scale(1); opacity:1; }
}

/* apply blinking to CTA buttons */
.cta-row .btn.blink {
  animation: blink 1.4s ease-in-out infinite;
  will-change: box-shadow, transform, opacity;
}

/* Slightly reduce intensity for ghost button so it's not too aggressive */
.cta-row .btn-ghost.blink {
  animation-duration: 1.6s;
  opacity: 0.98;
}

/* Respect reduced-motion preference: disable blinking */
@media (prefers-reduced-motion: reduce) {
  .cta-row .btn.blink { animation: none !important; transform: none !important; box-shadow: none !important; }
}