/* WIFISAN-24 - estilos específicos. Se cargan después de style.css y grid.css. */
.wh-page { overflow: hidden; }
.wh-page h1,
.wh-page h2,
.wh-page h3 { line-height: 1.25; }

.wh-section { padding: 78px 0; }
.wh-section-soft { background: #f7f8fa; }
.wh-section-dark { background: #17202a; color: #fff; }
.wh-narrow { max-width: 930px; margin-left: auto; margin-right: auto; }
.wh-kicker {
   color: #0A6A5A;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 2px;
   margin-bottom: 20px;
}
.wh-section-title { margin-bottom: 38px; }
.wh-section-title > p { max-width: 820px; margin: 10px auto 0; }

/* HERO */
.wh-hero {
   background: linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #f8fbf9 100%);
   border-bottom: 1px solid #e8ecef;
   padding: 58px 0 64px;
}
.wh-hero-row { display: flex; align-items: center; }
.wh-hero h1 { font-size: 48px; margin: 0 0 18px; color: #4E0054; }
.wh-hero-lead { font-size: 24px; line-height: 1.45; color: #3c4854; margin-bottom: 18px; }
.wh-hero-copy { font-size: 17px; line-height: 1.7; color: #606b75; max-width: 720px; }
.wh-hero-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 26px 0; }
.wh-hero-points span {
   display: inline-flex; align-items: center; gap: 8px;
   font-weight: 700; color: #3c4854;
}
.wh-hero-points i { color: #0A6A5A; font-size: 18px; }
.wh-actions .btn { margin-right: 8px; margin-bottom: 8px; }

.wh-portal-figure {
   max-width: 390px;
   margin: 0 auto;
   background: #fff;
   border-radius: 16px;
   padding: 14px;
   box-shadow: 0 18px 50px rgba(24, 43, 58, 0.14);
   border: 1px solid #e8ecef;
}
.wh-portal-figure img { margin: 0 auto; border-radius: 10px; }
.wh-portal-figure figcaption { text-align: center; font-size: 13px; color: #7a838c; margin-top: 12px; }

/* CONTEXTO */
.wh-context { padding: 62px 0 52px; }
.wh-context h2 { margin-top: 0; }

/* MODALIDADES */
.wh-mode-grid { display: flex; flex-wrap: wrap; }
.wh-mode-grid > [class*="col-"] { display: flex; margin-bottom: 28px; }
.wh-mode-card {
   width: 100%; background: #fff; border-radius: 12px; padding: 28px 26px 24px;
   box-shadow: 0 8px 28px rgba(32, 45, 58, 0.08);
   border-top: 6px solid #2f5aa3;
   transition: transform .2s ease, box-shadow .2s ease;
}
.wh-mode-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(32, 45, 58, 0.13); }
.wh-mode-card h3 { margin: 8px 0 12px; font-size: 21px; }
.wh-mode-card p { color: #5d6872; line-height: 1.6; }
.wh-mode-card ul { padding-left: 19px; margin: 16px 0 0; }
.wh-mode-card li { margin-bottom: 8px; line-height: 1.5; }
.wh-mode-icon {
   width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
   color: #fff; background: #2f5aa3; font-size: 22px;
}
.wh-mode-blue { border-top-color: #3f63a4; }
.wh-mode-blue .wh-mode-icon { background: #3f63a4; }
.wh-mode-red { border-top-color: #df4a3a; }
.wh-mode-red .wh-mode-icon { background: #df4a3a; }
.wh-mode-orange { border-top-color: #f39a0a; }
.wh-mode-orange .wh-mode-icon { background: #f39a0a; }
.wh-mode-green { border-top-color: #0d7d38; }
.wh-mode-green .wh-mode-icon { background: #0d7d38; }
.wh-mode-gray { border-top-color: #5b5858; }
.wh-mode-gray .wh-mode-icon { background: #5b5858; }
.wh-mode-black { border-top-color: #1d1d1d; }
.wh-mode-black .wh-mode-icon { background: #1d1d1d; }

/* CONTROL DE ANCHO DE BANDA */
.wh-bandwidth { background: #fff; }
.wh-bandwidth h2 { font-size: 35px; margin-top: 0; }

.wh-control-grid {
   display: flex;
   flex-wrap: wrap;
}
.wh-control-grid > div {
   float: none;
   display: flex;
   margin-bottom: 24px;
}
.wh-control-card {
   width: 100%;
   height: 100%;
   min-height: 205px;
   padding: 25px;
   background: #f7f8fa;
   border: 1px solid #e6eaee;
   border-radius: 10px;
}
/*.wh-control-grid > div { margin-bottom: 24px; }*/
.wh-control-card {
   height: 100%; min-height: 205px; padding: 25px; background: #f7f8fa;
   border: 1px solid #e6eaee; border-radius: 10px;
}
.wh-control-card > i { color: #0A6A5A; font-size: 30px; margin-bottom: 8px; }
.wh-control-card h3 { font-size: 20px; margin: 8px 0 10px; }
.wh-control-card p { color: #66717b; line-height: 1.6; margin-bottom: 0; }

/* VIDEO */
.wh-title-light h2, .wh-title-light p { color: #fff; }
.wh-section-dark .wh-kicker { color: #ffbc66; }
.wh-video-shell {
   background: #0d1217; padding: 10px; border-radius: 12px;
   box-shadow: 0 22px 60px rgba(0,0,0,.34); max-width: 1060px; margin: 0 auto;
}
.wh-video { display: block; width: 100%; height: auto; border-radius: 7px; background: #000; }
.wh-chapters {
   max-width: 1060px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.wh-chapter {
   border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
   border-radius: 999px; padding: 10px 15px; font-size: 13px; cursor: pointer;
   transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wh-chapter:hover, .wh-chapter:focus { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); outline: none; }
.wh-chapter.active { background: #0A6A5A; border-color: #0A6A5A; }
.wh-live-demo {
   max-width: 1060px; margin: 34px auto 0; padding: 22px 24px; border-radius: 10px;
   background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
   display: flex; align-items: center; gap: 24px;
}
.wh-live-demo h3 { margin: 0 0 4px; color: #fff; }
.wh-live-demo p { margin: 0; color: #d9e0e5; }
.wh-live-demo .btn { margin-left: auto; white-space: nowrap; }
.wh-demo-credentials { display: flex; flex-direction: column; min-width: 220px; font-size: 13px; color: #f5f7f8; }

/* PERSONALIZACIÓN */
.wh-personalization { background: #fff; }
.wh-check-list { list-style: none; padding: 0; margin: 24px 0 0; }
.wh-check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 16px; }
.wh-check-list li:before {
   content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: #0A6A5A;
}
.wh-quote-box {
   background: #f6f8fa; border-left: 5px solid #0A6A5A; border-radius: 8px;
   padding: 35px 35px 30px; margin-top: 12px;
}
.wh-quote-box i { font-size: 28px; color: #0A6A5A; opacity: .8; }
.wh-quote-box p { font-family: 'Roboto Slab', serif; font-size: 24px; line-height: 1.5; color: #38434d; margin: 15px 0 0; }

/* FORMULARIO */
.wh-form-section { border-top: 1px solid #e8ecef; }
.wh-form { background: #fff; border: 1px solid #e6eaee; border-radius: 12px; padding: 28px; box-shadow: 0 10px 30px rgba(32,45,58,.07); }
.wh-form .form-control { height: 45px; }
.wh-form .website { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.wh-submit { min-width: 210px; }
.wh-form-note { display: flex; gap: 9px; align-items: center; color: #66717b; margin-top: 20px; }
.wh-form-note i { color: #0A6A5A; font-size: 18px; }
.wh-form-status { margin: 12px 0 0; min-height: 20px; color: #a94442; }

/* FINAL HOOK */
.wh-final-hook {
   padding: 78px 0 86px;
   color: #fff;
   background: linear-gradient(135deg, #2d3c49 0%, #17202a 62%, #0A6A5A 135%);
}
.wh-final-hook .wh-kicker { color: #ffbc66; }
.wh-final-hook h2 { color: #fff; font-size: 38px; margin: 8px 0 18px; }
.wh-final-hook p { max-width: 810px; margin: 0 auto 26px; font-size: 18px; line-height: 1.65; color: #e4eaee; }

/* Ajustes de botones sobre los estilos existentes */
.wh-page .btn { border-radius: 4px; font-weight: 700; }

@media (max-width: 991px) {
   .wh-hero-row { display: block; }
   .wh-hero h1 { font-size: 40px; }
   .wh-portal-figure { margin-top: 38px; }
   .wh-live-demo { flex-wrap: wrap; }
   .wh-live-demo .btn { margin-left: 0; }
   .wh-demo-credentials { min-width: 190px; }
}

@media (max-width: 767px) {
   .wh-section { padding: 58px 0; }
   .wh-hero { padding: 42px 0 50px; }
   .wh-hero h1 { font-size: 34px; }
   .wh-hero-lead { font-size: 21px; }
   .wh-hero-points { display: block; }
   .wh-hero-points span { display: flex; margin-bottom: 9px; }
   .wh-mode-grid { display: block; }
   .wh-mode-grid > [class*="col-"] { display: block; }
   .wh-control-card { min-height: 0; }
   .wh-chapters { display: block; }
   .wh-chapter { width: 100%; margin-bottom: 8px; text-align: left; }
   .wh-live-demo { display: block; }
   .wh-demo-credentials { margin: 14px 0; }
   .wh-final-hook h2 { font-size: 30px; }
   .wh-form { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
   .wh-mode-card, .wh-chapter { transition: none; }
}

/* =====================================================
   DEMO ONLINE
===================================================== */

.wh-online-demo {
   max-width: 980px;
   margin: 35px auto 10px;
   padding: 30px 35px;
   background: #ffffff;
   border: 3px solid #f0ad4e;
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.22);
   color: #333333;
}

.wh-online-demo-header {
   text-align: center;
   margin-bottom: 25px;
}

.wh-online-badge {
   display: inline-block;
   padding: 6px 14px;
   margin-bottom: 10px;
   background: #0A6A5A;
   color: #ffffff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   border-radius: 20px;
}

.wh-online-demo h2 {
   margin: 5px 0 8px;
   color: #4e0054;
   font-size: 28px;
   font-weight: 700;
}

.wh-online-demo-header p {
   margin: 0;
   font-size: 16px;
   color: #555555;
}

.wh-online-demo-content {
   display: flex;
   align-items: center;
}

.wh-demo-credentials {
   display: flex;
   gap: 15px;
}

.wh-demo-credential {
   flex: 1;
   padding: 14px 18px;
   background: #f5f6f7;
   border: 1px solid #d9dde1;
   border-radius: 6px;
}

.wh-demo-credential span {
   display: block;
   margin-bottom: 3px;
   color: #777777;
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: .5px;
}

.wh-demo-credential strong {
   display: block;
   color: #222222;
   font-size: 16px;
   word-break: break-all;
}

.wh-demo-action {
   text-align: center;
}

.wh-demo-button {
   display: inline-block;
   padding: 13px 24px;
   background: #f0ad4e;
   color: #111111 !important;
   border: 0;
   border-radius: 4px;
   font-weight: 700;
   font-size: 16px;
   transition: all .2s ease;
}

.wh-demo-button:hover,
.wh-demo-button:focus {
   background: #e69b28;
   color: #111111 !important;
   text-decoration: none;
   transform: translateY(-1px);
}

.wh-demo-button i {
   margin-left: 7px;
}

.wh-demo-action small {
   display: block;
   margin-top: 8px;
   color: #777777;
}


/* MOBILE */
@media (max-width: 767px) {

   .wh-online-demo {
      margin: 25px 5px 10px;
      padding: 25px 18px;
   }

   .wh-online-demo h2 {
      font-size: 23px;
   }

   .wh-online-demo-content {
      display: block;
   }

   .wh-demo-credentials {
      display: block;
   }

   .wh-demo-credential {
      margin-bottom: 10px;
   }

   .wh-demo-action {
      margin-top: 20px;
   }

   .wh-demo-button {
      width: 100%;
   }
   
   .wh-video-play {
	  width: 72px;
	  height: 72px;
   }

   .wh-video-play-icon {
	  margin-left: 5px;
	  border-top-width: 14px;
	  border-bottom-width: 14px;
	  border-left-width: 23px;
   }   
}




/* VIDEO */
.wh-title-light h2, .wh-title-light p { color: #fff; }
.wh-section-dark .wh-kicker { color: #ffbc66; }

.wh-video-shell {
   background: #0d1217;
   padding: 10px;
   border-radius: 12px;
   box-shadow: 0 22px 60px rgba(0,0,0,.34);
   max-width: 1060px;
   margin: 0 auto;
}

.wh-video-wrap {
   position: relative;
   width: 100%;
}

.wh-video {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 7px;
   background: #000;
}

/* Botón Play central */
.wh-video-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 96px;
   height: 96px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.82);
   cursor: pointer;
   z-index: 3;

   display: flex;
   align-items: center;
   justify-content: center;

   transition:
      transform .2s ease,
      background .2s ease,
      opacity .2s ease;
}

.wh-video-play:hover,
.wh-video-play:focus {
   background: rgba(0, 0, 0, 0.95);
   transform: translate(-50%, -50%) scale(1.07);
   outline: none;
}

/* Triángulo blanco */
.wh-video-play-icon {
   display: block;
   width: 0;
   height: 0;
   margin-left: 7px;
   border-top: 19px solid transparent;
   border-bottom: 19px solid transparent;
   border-left: 31px solid #fff;
}

/* Lo utilizará Javascript cuando el vídeo esté reproduciéndose */
.wh-video-play.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.wh-chapters {
   max-width: 1060px;
   margin: 22px auto 0;
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   justify-content: center;
}

.wh-chapter {
   border: 1px solid rgba(255,255,255,.25);
   background: rgba(255,255,255,.08);
   color: #fff;
   border-radius: 999px;
   padding: 10px 15px;
   font-size: 13px;
   cursor: pointer;
   transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.wh-chapter:hover,
.wh-chapter:focus {
   background: rgba(255,255,255,.15);
   border-color: rgba(255,255,255,.5);
   outline: none;
}

.wh-chapter.active {
   background: #0A6A5A;
   border-color: #0A6A5A;
}