/* =========================================================
   MIDETUWEB: HERO + DARK FIXES + BUTTON VISIBILITY PATCH
   Para tu HTML exacto (hero-inner, hero-copy, hero-form-wrap)
   Cargar al final de todos los CSS.
   ========================================================= */

:root{
  --mtw-bg: #070b14;
  --mtw-bg2: #0b1220;
  --mtw-surface: rgba(255,255,255,.06);
  --mtw-surface2: rgba(255,255,255,.10);
  --mtw-border: rgba(255,255,255,.12);
  --mtw-text: rgba(255,255,255,.90);
  --mtw-text2: rgba(255,255,255,.72);
  --mtw-text3: rgba(255,255,255,.56);
  --mtw-accent: #39c8b7;
  --mtw-accent2: #5ee6d7;
  --mtw-danger: #f15249;
  --mtw-radius: 18px;
  --mtw-radius-lg: 26px;
  --mtw-shadow: 0 24px 70px rgba(0,0,0,.38);
  --mtw-shadow2: 0 18px 46px rgba(0,0,0,.30);
}

/* ---------------------------------------------------------
   1) Fix “white bands” and random light wrappers
---------------------------------------------------------- */

/* Global baseline background */

html, body {
    background: radial-gradient(1400px 800px at 15% 10%, rgba(57, 200, 183, .18), transparent 60%), radial-gradient(900px 1400px at 75% 12%, rgba(94, 230, 215, .12), transparent 60%), linear-gradient(180deg, var(--mtw-bg2), var(--mtw-bg));
    color: var(--mtw-text);
    background-attachment: fixed;
}

/* Some legacy blocks force white backgrounds */
.container,
.section,
.long-block,
.footer,
#feedback,
#feedback-controls{
  background-color: transparent;
}

/* Kill white backgrounds that sneak in from Bootstrap-ish components */
.well, .panel, .thumbnail, .navbar, .container-narrow,
.section.dark-text, .dark-text{
  background-color: transparent !important;
}

/* Ensure dark-text sections still look readable on dark theme */
.section.team-section.align-center.dark-text{
  color: var(--mtw-text);
}
.section.team-section.align-center.dark-text .sub-header,
.section.team-section.align-center.dark-text p{
  color: var(--mtw-text2);
}

/* If any text becomes too dark due to legacy .dark-text, force it */
.dark-text .heading,
.dark-text h2,
.dark-text h3,
.dark-text span{
  color: rgba(255,255,255,.92);
}

/* Feedback sections: force dark / remove white stripe */
#feedback.section.feedback-section, .jumbotrons{
  background: radial-gradient(800px 360px at 50% 0%, rgba(57,200,183,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 70px 0;
}

#feedback blockquote{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius: var(--mtw-radius);
  color: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
}

/* Feedback controls was your main “white offender” */
#feedback-controls.section.feedback-controls-section{
  background: radial-gradient(900px 420px at 50% 0%, rgba(57,200,183,.16), transparent 62%),
              rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 42px 0;
}

#feedback-controls .switch{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--mtw-radius);
  padding: 14px 14px;
  box-shadow: var(--mtw-shadow2);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
#feedback-controls .switch:hover{
  transform: translateY(-2px);
  border-color: rgba(57,200,183,.28) !important;
  background: rgba(255,255,255,.08) !important;
}
#feedback-controls p{
  color: rgba(255,255,255,.82);
}
#feedback-controls .highlight{
  color: var(--mtw-accent);
}

/* ---------------------------------------------------------
   2) HERO: make it cooler + animated background
---------------------------------------------------------- */

#hero.hero-section.jumbotron{
  position: relative;
  overflow: hidden;
  border-radius: var(--mtw-radius-lg);
  padding: 84px 0 70px; /* container inside */
  margin: 78px 0 44px;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(57,200,183,0.20), rgba(0,0,0,0) 60%),
    radial-gradient(850px 520px at 15% 30%, rgba(49,93,134,0.16), rgba(0,0,0,0) 58%),
    radial-gradient(720px 420px at 85% 34%, rgba(94,230,215,0.12), rgba(0,0,0,0) 58%),
    rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--mtw-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Subtle grid overlay to feel “techy” */
#hero.hero-section.jumbotron::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .25;
  mask-image: radial-gradient(60% 55% at 50% 25%, rgba(0,0,0,1), rgba(0,0,0,0));
  pointer-events:none;
}

/* Aurora blobs animated */
#hero.hero-section.jumbotron::after{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(closest-side at 30% 28%, rgba(57,200,183,0.22), rgba(0,0,0,0) 60%),
    radial-gradient(closest-side at 70% 36%, rgba(94,230,215,0.16), rgba(0,0,0,0) 58%),
    radial-gradient(closest-side at 55% 70%, rgba(49,93,134,0.12), rgba(0,0,0,0) 62%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(57,200,183,0.10),
      rgba(255,255,255,0.00),
      rgba(94,230,215,0.08),
      rgba(255,255,255,0.00),
      rgba(49,93,134,0.08));
  filter: blur(26px);
  opacity: .75;
  animation: mtwHeroAurora 13s ease-in-out infinite;
  pointer-events:none;
}

/* Make hero content sit above overlays */
#hero .hero-inner{
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   3) Glow animated H1 (Analiza tu WEB)
---------------------------------------------------------- */

#hero .hero-title{
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  text-align: center;

  /* Neon gradient text */
  background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(94,230,215,0.95), rgba(255,255,255,0.98));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Glow aura */
  text-shadow:
    0 0 10px rgba(57,200,183,0.25),
    0 0 26px rgba(57,200,183,0.18),
    0 18px 55px rgba(0,0,0,0.58);

  animation: mtwGlowPulse 2.6s ease-in-out infinite;
}

/* Optional extra glow “halo” using pseudo */
#hero .hero-title::after{
  content: attr(data-shadow);
  display:none; /* enable if you want duplication trick */
}

/* Lead and microcopy */
#hero .hero-lead{
  color: rgba(255,255,255,0.80);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 auto 10px;
  text-align: center;
}
#hero .hero-microcopy{
  color: rgba(255,255,255,0.68);
  max-width: 860px;
  margin: 0 auto 0;
  text-align: center;
}

/* ---------------------------------------------------------
   4) Form area + trust badges + note
---------------------------------------------------------- */

#hero .hero-form-wrap{
  margin: -26px auto 0;
}
#sc-boxalert{
min-height: 0px; 
padding: 10px 0;
}
}


/* Trust badges */
#hero .hero-trust{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 14px auto 0;
}

#hero .hero-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.84);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

#hero .hero-badge:hover{
  transform: translateY(-2px);
  border-color: rgba(57,200,183,0.28);
  background: rgba(255,255,255,0.08);
}

/* Note */
#hero .hero-note{
  max-width: 920px;
  margin: 14px auto 0;
  text-align: center;
  color: rgba(255,255,255,0.60);
}
#hero .hero-note small{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------
   5) Feature cards polish (you already added feature-card)
---------------------------------------------------------- */
.feature-card{
  border-radius: 18px;
  padding: 18px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 34px rgba(0,0,0,0.25);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  min-height: 200px;
}
.feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(57,200,183,0.26);
  background: rgba(255,255,255,0.07);
}
.feature-card .heading{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .02em;
}
.feature-card p{
  color: rgba(255,255,255,0.72);
}

/* ---------------------------------------------------------
   6) Guarantee strip: smoother, less “flat”
---------------------------------------------------------- */
#guarantee.long-block.guarantee-section{
  background: linear-gradient(90deg, rgba(57,200,183,.16), rgba(255,255,255,.04));
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------
   7) Animations
---------------------------------------------------------- */
@keyframes mtwGlowPulse{
  0%, 100%{
    filter: drop-shadow(0 0 0 rgba(57,200,183,0));
    text-shadow:
      0 0 10px rgba(57,200,183,0.22),
      0 0 26px rgba(57,200,183,0.16),
      0 18px 55px rgba(0,0,0,0.58);
  }
  50%{
    filter: drop-shadow(0 12px 18px rgba(57,200,183,0.18));
    text-shadow:
      0 0 14px rgba(57,200,183,0.34),
      0 0 36px rgba(57,200,183,0.22),
      0 22px 70px rgba(0,0,0,0.64);
  }
}

@keyframes mtwHeroAurora{
  0%   { transform: translate(-2%, -1%) scale(1.02) rotate(0deg); }
  50%  { transform: translate(2%, 1%) scale(1.06) rotate(12deg); }
  100% { transform: translate(-2%, -1%) scale(1.02) rotate(0deg); }
}

@keyframes mtwBtnShimmer{
  0%   { transform: translateX(-50%) rotate(18deg); opacity: 0.0; }
  20%  { opacity: 0.70; }
  55%  { opacity: 0.45; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0.0; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  #hero.hero-section.jumbotron::after,
  #hero .hero-title,
  #website-form #submit.btn::after,
  #website-form .btn.btn-success::after,
  #submit.btn::after{
    animation: none !important;
  }
}

/* Mobile tweaks */
@media (max-width: 767px){
  #hero.hero-section.jumbotron{
    padding: 60px 0 54px;
    margin: 62px 0 30px;
  }
  form#website-form.form.form-dark{
    padding: 14px 14px 8px;
  }
  .feature-card{
    min-height: auto;
  }
}
/* =========================================================
   WEBS / RANKING SECTION (premium dark)
   ========================================================= */

#webs.awards-section{
  position: relative;
  padding: 80px 0 70px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(57,200,183,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
#webs.metricas-section{
  position: relative;
  padding: 20px 0 70px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(57,200,183,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

/* subtle grid overlay */
#webs.awards-section::before, #webs.metricas-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .18;
  mask-image: radial-gradient(60% 55% at 50% 20%, rgba(0,0,0,1), rgba(0,0,0,0));
  pointer-events:none;
}

#webs .container{
  position: relative;
  z-index: 2;
}

#webs .section-header{
  max-width: 980px;
  margin: 0 auto 26px;
}

#webs .section-icon{
  margin: 0 0 10px;
  opacity: .95;
}

#webs .section-title{
  color: rgba(255,255,255,.92);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

#webs .section-subtitle{
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 920px;
}

#webs .section-cta{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#webs .btn-cta-ranking{
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(57,200,183,.55) !important;
  background: linear-gradient(180deg, rgba(57,200,183,.20), rgba(57,200,183,.08)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.32);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#webs .btn-cta-ranking:hover{
  transform: translateY(-2px);
  border-color: rgba(94,230,215,.65) !important;
  background: linear-gradient(180deg, rgba(57,200,183,.28), rgba(57,200,183,.10)) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
}

#webs .section-note{
  color: rgba(255,255,255,.55);
  text-align: center;
  max-width: 820px;
}

/* ---------------------------------------------------------
   Widget content: fight white boxes inside ranking items
   (generic selectors for common markup)
---------------------------------------------------------- */
#webs .section-content{
  margin-top: 22px;
}

/* If widget uses thumbnails/cards */
#webs .thumbnail,
#webs .panel,
#webs .well,
#webs .list-group-item,
#webs .card,
#webs table,
#webs .table{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.86);
}

/* Links inside widget */
#webs a{
  color: rgba(94,230,215,.95);
}
#webs a:hover{
  color: rgba(255,255,255,.95);
}

/* If widget prints images with white backgrounds, soften */
#webs img{
  border-radius: 14px;
}

/* Responsive */
@media (max-width: 767px){
  #webs.awards-section{
    padding: 60px 0 54px;
  }
}
/* =========================================================
   CONTACT SECTION (premium dark)
   ========================================================= */

#contact.contact-section{
  position: relative;
  padding: 80px 0 70px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(57,200,183,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

#contact .section-icon{
  margin: 0 0 8px;
  opacity: .95;
}

#contact .sub-header{
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  max-width: 920px;
  margin: 0 auto;
}

/* Wrapper */
#contact .contact-wrap{
  max-width: 980px;
  margin: 26px auto 0;
}

/* Replace old .well with a modern notice card */
#contact .notice{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}

#contact .notice-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  background: rgba(57,200,183,.14);
  border: 1px solid rgba(57,200,183,.28);
  color: rgba(255,255,255,.92);
}

#contact .notice-title{
  margin: 0 0 6px;
  letter-spacing: .02em;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

#contact .notice-text{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

#contact .notice a{
  color: rgba(94,230,215,.95);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(94,230,215,.35);
}
#contact .notice a:hover{
  color: rgba(255,255,255,.95);
  border-bottom-color: rgba(255,255,255,.40);
}

/* Contact form card */
#contact .contact-form{
  margin-top: 16px;
  border-radius: 20px;
  padding: 16px 16px 6px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

/* Inputs */
#contact .form-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 16px !important;
  padding: 12px 12px !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#contact .form-control::placeholder{
  color: rgba(255,255,255,.55);
}

#contact .form-control:focus{
  border-color: rgba(57,200,183,.62) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 0 0 6px rgba(57,200,183,.12) !important;
}

/* Textarea polish */
#contact textarea.form-control{
  min-height: 150px;
  resize: vertical;
}

/* Hint */
#contact .contact-hint{
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.58);
}

/* Button */
#contact .btn-contact{
  border-radius: 999px !important;
  font-weight: 900;
  letter-spacing: .01em;

  color: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(57,200,183,.55) !important;
  background: linear-gradient(180deg, rgba(57,200,183,.96), rgba(29,128,118,.94)) !important;

  box-shadow:
    0 18px 40px rgba(57,200,183,.16),
    0 18px 50px rgba(0,0,0,.34);

  position: relative;
  overflow: hidden;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

/* Shimmer */
#contact .btn-contact::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width: 45%;
  height: 230%;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.22), rgba(255,255,255,0.0));
  transform: rotate(18deg);
  opacity: .7;
  animation: mtwBtnShimmer 2.7s ease-in-out infinite;
  pointer-events:none;
}

#contact .btn-contact:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 22px 52px rgba(57,200,183,.18),
    0 22px 60px rgba(0,0,0,.38);
}

/* Mobile */
@media (max-width: 767px){
  #contact.contact-section{
    padding: 60px 0 54px;
  }
  #contact .notice{
    grid-template-columns: 1fr;
  }
  #contact .notice-icon{
    width: 52px; height: 52px;
  }
}

#sc-404, #page-faq, #page-how, #page-terms, #page-privacy, #tool-page {
    position: relative;
    padding: 20px 0 70px;
    background: radial-gradient(900px 520px at 50% 0%, rgba(57, 200, 183, .14), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .00));
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.fx-btn--primary i {color:black}