/* =========================================================
   ZERO LOSS ES — capture page
   Réplica de la página BR (zero-loss-07) sin WordPress/Elementor
   ========================================================= */

:root{
  --verde:        #2ED782;
  --verde-btn-a:  #1E9F5E;
  --verde-btn-b:  #17D575;
  --verde-inset:  #96FFA9;
  --negro:        #000000;
  --footer-bg:    #0c1817;
  --footer-text:  #a9f3ce;
  --texto:        #F1F1F1;

  /* Botón: shine + pulso */
  --velocidad-transicion: 200ms;
  --color-brillo: #fff;
  --blur-brillo: 50px;
  --expansion-brillo: 30px;
  --inclinacion-brillo: -20deg;
  --velocidad-brillo: 2s;
  --duracion-pulso: 3s;
  --escala-min: 0.98;
  --escala-max: 1.03;

  --ticker-duration: 30s;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--negro);
  color:var(--texto);
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
.green{ color:var(--verde); }

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:700px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  background-image:url("../img/bg-desktop.webp");
  background-position:top center;
  background-repeat:no-repeat;
  background-size:cover;
  padding:60px 20px;
}

.hero__inner{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.hero__logo{
  width:auto; height:70px;
  margin-bottom:-15px;
}

.hero__title{
  width:35%;
  max-width:35%;
  font-family:"Syne", sans-serif;
  font-size:36px;
  font-weight:600;
  line-height:1.1em;
  letter-spacing:-0.3px;
  color:#F1F1F1;
  margin:16px 0 12px;
}

.hero__sub{
  width:35%;
  max-width:35%;
  font-size:18px;
  font-weight:500;
  line-height:1.35em;
  letter-spacing:-0.3px;
  color:#FFFFFF;
  margin:0 0 24px;
}

.hero__cta-label{
  width:35%;
  max-width:35%;
  font-size:14px;
  font-weight:500;
  line-height:1.3em;
  letter-spacing:-0.3px;
  color:#FFFFFF;
  margin:0 0 12px;
}

/* ================= BOTÓN ================= */
.btn{
  position:relative;
  overflow:hidden;
  display:block;
  width:21%;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-family:"Manrope", sans-serif;
  font-weight:600;
  font-size:16px;
  padding:20px;
  border:1px solid transparent;
  border-radius:21px;
  background:linear-gradient(91deg, var(--verde-btn-a) 5.46%, var(--verde-btn-b) 62.9%);
  box-shadow:0 -10.767px 15.719px 0 var(--verde-inset) inset;
  transition:all var(--velocidad-transicion) ease-in-out;
  animation:pulse var(--duracion-pulso) ease-in-out infinite;
}
.btn span{ position:relative; z-index:2; }

.btn::before{
  content:'';
  display:block;
  width:0;
  position:absolute;
  top:0; bottom:0;
  left:0;
  opacity:0;
  transform:skewX(var(--inclinacion-brillo));
  background:var(--color-brillo);
  box-shadow:0 0 var(--blur-brillo) var(--expansion-brillo) var(--color-brillo);
  animation:shine var(--velocidad-brillo) linear infinite;
}

@keyframes shine{
  0%   { opacity:0;   left:0%; }
  20%  { opacity:1; }
  50%  { left:100%;   opacity:.8; }
  100% { opacity:0;   left:100%; }
}

@keyframes pulse{
  0%   { transform:scale(var(--escala-min)); }
  50%  { transform:scale(var(--escala-max)); }
  100% { transform:scale(var(--escala-min)); }
}

/* ============ NOTIFICACIONES FLOTANTES ============ */
.notif{
  position:absolute;
  width:28%;
  max-width:340px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:5px;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(10px);
  animation:floating 5s ease-in-out infinite;
  z-index:3;
}

.notif__row{ display:flex; align-items:flex-start; gap:15px; }
.notif__row img{ width:38px; height:38px; flex:0 0 38px; }
.notif h3{ margin:0 0 2px; font-size:14px; font-weight:600; color:#fff; }
.notif p { margin:0; font-size:12px; font-weight:400; color:#fff; line-height:1.25; }
.notif__time{ font-size:10px; font-weight:600; color:#83B6A6; margin-top:2px; }

.notif--1{ top:12%;  right:41px; }
.notif--2{ top:62%;  left:46%;   filter:blur(1px); }

@keyframes floating{
  0%   { transform:translate(0, 0px); }
  50%  { transform:translate(0, 15px); }
  100% { transform:translate(0, 0px); }
}

/* ================= TICKERS ================= */
.ticker{
  position:relative;
  width:100%;
  height:80px;
  overflow:hidden;
  margin-top:-12px;
}

.ticker--green{
  border-top:1px solid #B2FFDB;
  border-bottom:1px solid #B2FFDB;
  background:radial-gradient(at center center, #39B178 50%, #184B33 100%);
  transform:rotate(-5deg) scale(1.01);
  z-index:10;
}

.ticker--cream{
  background-color:#E8E5DD;
  transform:rotate(5deg) scale(1.01);
  z-index:1;
}

.ticker__track{
  position:absolute;
  white-space:nowrap;
  will-change:transform;
  display:flex;
  align-items:center;
  height:100%;
}

.ticker--green  .ticker__track{ animation:ticker-left  var(--ticker-duration) linear infinite; }
.ticker--cream  .ticker__track{ animation:ticker-right var(--ticker-duration) linear infinite; }

.ticker__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  padding:0 10px;
  height:100%;
  font-family:'Space Mono', monospace;
  letter-spacing:5px;
  text-transform:uppercase;
}
.ticker--green .ticker__item{ color:#ffffff; }
.ticker--cream .ticker__item{ color:#000000; }

@keyframes ticker-left { 0%{transform:translateX(0);}    100%{transform:translateX(-50%);} }
@keyframes ticker-right{ 0%{transform:translateX(-50%);} 100%{transform:translateX(0);} }

/* ================= PRUEBA SOCIAL ================= */
.proof{
  background:var(--negro);
  padding:80px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.proof__title{
  width:53%;
  max-width:53%;
  text-align:center;
  font-family:"Syne", sans-serif;
  font-size:36px;
  font-weight:600;
  line-height:1.1em;
  letter-spacing:-0.3px;
  color:#F1F1F1;
  margin:0;
}

.carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:40px 0;
}

/* Máscara degradada a los costados (igual al original) */
.carousel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to right, #000 0%, transparent 20%, transparent 80%, #000 100%);
  z-index:10;
  pointer-events:none;
}

.carousel__track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:carousel-scroll 60s linear infinite;
}

.carousel__slide{
  flex:0 0 auto;
  width:calc((100vw - 5 * 20px) / 4);
  max-width:320px;
  margin:0;
}
.carousel__slide img{ width:100%; border-radius:20px; }

@keyframes carousel-scroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

.proof .btn{ margin-top:40px; }

/* ================= FOOTER ================= */
.footer{
  background:var(--footer-bg);
  padding:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer p{
  margin:0;
  text-align:center;
  font-family:"Inter Tight", sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--footer-text);
}

/* ================= COOKIES ================= */
.cookie{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding:14px 20px;
  background:rgba(12,24,23,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(46,215,130,.3);
}
.cookie[hidden]{ display:none; }
.cookie p{ margin:0; font-size:13px; color:#e6e6e6; }
.cookie button{
  border:0;
  border-radius:8px;
  padding:10px 22px;
  font-family:"Manrope", sans-serif;
  font-weight:600;
  font-size:13px;
  color:#04170e;
  background:linear-gradient(91deg, var(--verde-btn-a) 5.46%, var(--verde-btn-b) 62.9%);
  cursor:pointer;
}

/* ================= TABLET ================= */
@media (max-width:1024px){
  .hero__title, .hero__sub, .hero__cta-label{ width:55%; max-width:55%; }
  .btn{ width:35%; }
  .notif{ width:38%; }
  .notif--2{ left:20px; }
  .carousel__slide{ width:calc((100vw - 4 * 20px) / 3); }
  .proof__title{ width:80%; max-width:80%; }
}

/* ================= MÓVIL ================= */
@media (max-width:767px){
  .hero{
    background-image:url("../img/bg-mobile.webp");
    padding:280px 20px 40px;
    gap:15px;
    align-items:stretch;
  }
  .hero__logo{ margin:0 auto -15px; }
  .hero__title, .hero__sub, .hero__cta-label{
    width:100%; max-width:100%;
    text-align:center;
  }
  .hero__title{ font-size:26px; }
  .btn{ width:100%; }

  .notif{ width:170px; padding:8px; }
  .notif h3{ font-size:8px; }
  .notif p { font-size:6px; }
  .notif__time{ font-size:6px; }
  .notif__row img{ width:20px; height:20px; flex:0 0 20px; }
  .notif__row{ gap:8px; }
  .notif--1{ top:60px;  right:-1px;  left:auto; }
  .notif--2{ top:150px; left:-40px;  right:auto; }

  .ticker, .ticker__item{ height:80px; }
  .ticker__item{ font-size:16px; padding:0 20px; }

  .proof{ padding:40px 0; }
  .proof__title{ width:100%; max-width:100%; padding:0 20px; font-size:26px; }
  .carousel__slide{ width:calc((100vw - 3 * 20px) / 2); }
  .proof .btn{ width:calc(100% - 80px); margin-left:40px; margin-right:40px; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .btn, .btn::before, .notif, .ticker__track, .carousel__track{ animation:none !important; }
}