main.fix {
  overflow: clip;
}

/* BOTONES */
/* ===== Botones: icono desde HTML ===== */
.btn{
  border-radius: 8px !important;
}

/* 1. Quitar la flecha automática del template */
.btn::after {
  content: none;
}

/* Icono dentro del botón */
.btn i {
  margin-left: 10px;
  font-size: 13px;
  line-height: 1;
  transition: transform 0.3s ease-out;
}
.btn:hover i,
.btn:focus-visible i {
  transform: translateX(3px); /* pequeño empuje; borralo si no lo querés */
}

/* 2. Animación lineal de abajo hacia arriba (sin onda) */
.btn::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0px !important;
  transform: translateY(101%);
  transition: transform 0.35s ease-out;
  transition-duration: 0.35s; /* pisa los 800ms del template */
}
.btn:hover::before,
.btn:focus-visible::before {
  top: 0; /* anula el top: -40% del template */
  transform: translateY(0);
}

/* 3. Variante para fondos oscuros: relleno blanco, texto al color del botón */
.btn.btn-light-hover::before {
  background: #fff;
}
.btn.btn-light-hover:hover,
.btn.btn-light-hover:focus-visible {
  color: var(--tg-theme-secondary-500);
  background: var(--tg-theme-secondary-500);
}

/* Dirección del icono en hover */
.btn.btn-icon-down:hover i,
.btn.btn-icon-down:focus-visible i {
  transform: translateY(3px);
}

.btn.btn-icon-up:hover i,
.btn.btn-icon-up:focus-visible i {
  transform: translateY(-3px);
}

/* ANIMACION BTN REBOTE */
@keyframes iconBounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@keyframes iconBounceUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.btn.btn-icon-bounce-down:hover i,
.btn.btn-icon-bounce-down:focus-visible i {
  animation: iconBounceDown 0.8s ease-in-out infinite;
}

.btn.btn-icon-bounce-up:hover i,
.btn.btn-icon-bounce-up:focus-visible i {
  animation: iconBounceUp 0.8s ease-in-out infinite;
}

/* Para quien tenga activado "reducir movimiento" en el sistema, conviene cortar el rebote infinito:  */
/*@media (prefers-reduced-motion: reduce) {
  .btn i { animation: none !important; }
}*/

/* PRELOADER  */
/*#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff1c72 !important;
}

#preloader .loader {
  --color-1: #ffffff;
  --size: 1px;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  border-radius: 50%;
  position: relative;
  animation: loaderRotate 1s linear infinite;
}

#preloader .loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(5 * var(--size)) solid var(--color-1);
  animation: prixClipFix 2s linear infinite;
}

@keyframes loaderRotate {
  100% { transform: rotate(360deg); }
}

@keyframes prixClipFix {
  0%   { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); }
  25%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); }
  50%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); }
  75%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
  100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
}*/
/*=============================
    00. Preloader
===============================*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff1c72;
}

#preloader .preloader-logo {
  --logo-size: 80px;
  --pulse-color: var(--tg-theme-secondary-500);

  position: relative;
  width: var(--logo-size);
  height: var(--logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo */
#preloader .preloader-logo img,
#preloader .preloader-logo svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  animation: logoPulse 1.1s ease-in-out infinite;
}

/* Onda que se expande detrás del logo */
/*#preloader .preloader-logo::before,
#preloader .preloader-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pulse-color);
  opacity: 0;
  animation: logoRipple 1.6s ease-out infinite;
}
#preloader .preloader-logo::after {
  animation-delay: 0.8s;
}*/

@keyframes logoPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.75; }
}

@keyframes logoRipple {
  0%   { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Accesibilidad: sin animaciones bruscas si el usuario lo pidió */
@media (prefers-reduced-motion: reduce) {
  #preloader .preloader-logo img,
  #preloader .preloader-logo svg { animation: logoFade 2s ease-in-out infinite; }
  /*#preloader .preloader-logo::before,
  #preloader .preloader-logo::after { display: none; }*/
}
@keyframes logoFade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ===== FIX: Mobile menu queda atrapado en el stacking context del sticky header ===== */
/* Cuando el header es sticky, el tgmobile__menu (position:fixed dentro de él)
   queda clipado al header. La solución real es mover el elemento en el DOM via JS. */
.sticky-menu .tgmobile__menu,
.sticky-menu .tgmobile__menu-backdrop {
    position: fixed !important;
}

.tgmobile__menu .navigation li {
    border-top: 0px !important;
}
.tgmobile__menu .navigation:last-child {
    border-bottom: 0px !important;
}

.sticky-menu {
    background: rgba(255, 255, 255, 1);
    backdrop-filter: unset !important;
}

.tg-header__area .mobile-nav-toggler {
    width: unset !important;
    height: unset !important;
    box-shadow: none !important;
    background: none !important;
    border-radius: 0px !important;
}

.mobile-nav-toggler i {
    color: #ff1c72 !important;
    font-size: 20px;
}

.tgmobile__menu-backdrop { z-index: 100000 !important; }
.tgmobile__menu          { z-index: 100001 !important; }

/* ===== TOPBAR ===== */
/*.tg-header__top-info li, .tg-header__top-right li, .tg-header__top-info li a, .tg-header__top-right li a {
    gap: 3px !important;
    font-size: 13px !important;
    color: white !important;
}
.tg-header__top-info li i, .tg-header__top-right li i {
    font-size: 18px !important;
    color: white !important;
}
.tg-header__top-info li a:hover, .tg-header__top-right li a:hover {
    color: #11131a !important;
}*/
/* ===== TOPBAR ===== */
.tg-header__top-info li,
.tg-header__top-right li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1;
    color: #fff !important;
}

.tg-header__top-info li a,
.tg-header__top-right li a{
/*.tg-header__top-right li a span {*/
    font-size: 13px;
    line-height: 1;
    color: #fff !important;
}
.tg-header__top-right li a span {
    font-size: 13px;
    line-height: 1;
    color: inherit !important;
}

.tg-header__top-info li a:hover,
.tg-header__top-right li a:hover{
    color: #11131a !important;
}

.tg-header__top-right li a span {
    transition: color 0.3s ease-out;
}

/* Íconos: caja real de 1em (el template les pone line-height: 0) */
.tg-header__top-info li i,
.tg-header__top-right li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1 !important;
    color: #fff !important;
}

/* Ajuste óptico del sobre: más chico y apenas más abajo,
   para alinearlo con el centro de las minúsculas */
.tg-header__top-right li i {
    /*font-size: 18px;*/
    transform: translateY(1px);
}

/* ===== HEADER MENU ===== */

/* --- Logo + badge FIFA --- */
/* El contenedor define color y alto para logo, barra y FIFA */
.tgmenu__nav .logo {
    --logo-h: 34px;
    --fifa-h: 25px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #ffffff !important;
    transition: color .3s ease;
}

.sticky-menu .tgmenu__nav .logo {
    color: #11131a !important;
}

.tgmenu__nav .logo .logo-link {
    display: block;
    color: inherit !important;
}

/* Pisa las reglas de la plantilla (.sticky-menu .logo a svg path) */
.tg-header__area .tgmenu__nav .logo .logo-link .logo-text path {
    fill: currentColor;
}

/* Logo completo: 625.5 / 149.2 = 4.1924 */
.tgmenu__nav .logo .logo-svg {
    display: block;
    height: var(--logo-h);
    width: calc(var(--logo-h) * 4.1924);
}

/* Barra vertical */
.tgmenu__nav .logo .logo-divider {
    display: block;
    width: 1px;
    height: var(--logo-h);
    background: currentColor;
    opacity: 1;
}

/* Badge FIFA: 275.4 / 149.2 = 1.8458 */
.tgmenu__nav .logo .logo-fifa {
    display: block;
    height: var(--fifa-h);
    width: calc(var(--fifa-h) * 1.8458);
}

/* Menú responsive: solo isotipo + barra + FIFA */
@media (max-width: 991.98px) {
    .tgmenu__nav .logo {
        --logo-h: 40px;
        --fifa-h: 30px;
        gap: 12px;
    }
    .tgmenu__nav .logo .logo-svg {
        width: var(--logo-h);
    }
    .tgmenu__nav .logo .logo-text {
        display: none;
    }
}

/* --- Links del menú --- */
/* Estado normal (header transparente sobre el hero): blanco */
.tgmenu__navbar-wrap > ul > li a {
    color: #ffffff !important;
}
/* Sticky con fondo blanco: oscuro */
.sticky-menu .tgmenu__navbar-wrap > ul > li a {
    color: #11131a !important;
}
.tgmenu__navbar-wrap > ul > li a:hover, .tgmenu__navbar-wrap > ul > li.active a {
    color: #ff1c72 !important;
}

/* ===== SELECTOR IDIOMA ===== */
.tgmenu__nav .lang-action {
    margin-left: auto;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
}

/*.lang-switcher__icon {*/
.lang-switcher i{
    font-size: 20px;
    opacity: 1;
}

.lang-switcher__sep {
    opacity: 1;
}

.lang-switcher__link {
    color: #ffffff;
    opacity: 1;
    transition: color .2s ease, opacity .2s ease;
}

/* Sticky con fondo blanco: vuelve al tono oscuro */
.sticky-menu .lang-switcher,
.sticky-menu .lang-switcher__link {
    color: #11131a;
}
.sticky-menu .lang-switcher__icon,
.sticky-menu .lang-switcher__sep,
.sticky-menu .lang-switcher__link {
    opacity: .15;
}

.lang-switcher__link:hover,
.lang-switcher__link.is-active {
    color: #ff1c72;
    opacity: 1;
}

/* --- Selector de idioma tipo dropdown (en desuso, guardado por si se retoma) ---
.tgmenu__wrap,
.tgmenu__nav,
.sticky-menu,
.sticky-menu .tgmenu__wrap {
    overflow: visible !important;
}
.lang-switcher {
    position: relative;
}
.lang-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #11131a;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
}
.lang-switcher__toggle:hover,
.lang-switcher.is-open .lang-switcher__toggle {
    color: #ff1c72;
}
.lang-switcher__toggle:hover i,
.lang-switcher__toggle:hover span,
.lang-switcher.is-open .lang-switcher__toggle i,
.lang-switcher.is-open .lang-switcher__toggle span {
    color: #ff1c72;
}
.lang-switcher__caret {
    font-size: 11px;
    transition: transform .25s ease;
}
.lang-switcher.is-open .lang-switcher__caret {
    transform: rotate(180deg);
}
.lang-switcher__list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 160px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 30px 0px #cfdee4;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang-switcher.is-open .lang-switcher__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher__list a {
    display: block;
    padding: 8px 18px;
    color: #fff;
    white-space: nowrap;
}
.lang-switcher__list a:hover,
.lang-switcher__list a.is-active {
    background: rgba(255, 255, 255, .08);
}
--- fin dropdown --- */

/* ===== MOBILE MENU ===== */
.tgmobile__menu .nav-logo img {
    max-height: 30px;
}
.tgmobile__menu .close-btn {
    color: #ff1c72;
}
.tgmobile__menu .navigation li > a {
    color: #11131a !important;
    font-size: 18px;
    font-weight: 400;
}
.tgmobile__menu .navigation li.active a, .tgmobile__menu .navigation li > a:hover {
    color: #ff1c72 !important;
}
.tgmobile__menu .navigation li > a::before {
    width: 4px;
    background: #ff1c72;
}
.tgmobile__menu-bottom .contact-info .list-wrap li a, .tgmobile__menu-bottom .social-links ul li a {
    color: #ff1c72;
}
.tgmobile__menu-bottom .contact-info .list-wrap li a:hover, .tgmobile__menu-bottom .social-links ul li a:hover {
    color: #11131a;
}
.tgmobile__menu-bottom .icon-tm svg {
    display: block;
    width: 24px;
    height: auto;
}

/* BREADCRUMB */
.breadcrumb__bg{
    padding: 55px 0 50px;
    background-color: #f6f6f6;
}
.breadcrumb__content h1.title {
    font-size: 30px !important;
}
.breadcrumb__content .breadcrumb-item a {
  color: #11131a;
}

/* FONDER SECCTION MAXI */
.banner__bg-four {
  padding: 50px 0 0 !important;
}
[data-section="ceo"] .testimonial__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

[data-section="ceo"] .testimonial__bottom .thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
}

[data-section="ceo"] .testimonial__bottom .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(2.15);             /* zoom para que entre cabeza y hombros */
    transform-origin: center top;
    filter: grayscale(25%);
}

/* Foto del CEO: tamaño controlado en todas las resoluciones */
[data-section="ceo"] .banner__img-two {
    --ceo-img-max: 500px;   /* ancho máximo de la foto: ajustá este valor */
    text-align: center;
}
[data-section="ceo"] .banner__img-two > img:nth-child(1) {
    display: block;
    width: 100%;
    max-width: var(--ceo-img-max);
    height: auto;
    margin: 0 0 0 auto;         /* anula el margin-left: 50px de la plantilla */
    filter: grayscale(30%);
    transform: translateX(25px);
}

/* Título del CEO: dos líneas, misma escala que los títulos de sección */
[data-section="ceo"] .banner__content-four > .title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.12;
    text-transform: none;
}
/* Cada concepto en su propia línea (pisa el inline-block / inline de la plantilla) */
[data-section="ceo"] .banner__content-four > .title > .ceo-title__line {
    display: block;
    text-wrap: balance;
}
/* Quita el subrayado decorativo que la plantilla le pone a los <span> del título */
[data-section="ceo"] .banner__content-four > .title > .ceo-title__line::before {
    content: none;
    display: none;
}
[data-section="ceo"] .banner__content-four > .title > .ceo-title__accent {
    color: #ff1c72;
}
/* Subtítulo del CEO ("Expertos en el área") */
[data-section="ceo"] .banner__content-four > .sub-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
}
@media (max-width: 1199.98px) {
    [data-section="ceo"] .banner__content-four > .title { font-size: 42px; }
}
@media (max-width: 767.98px) {
    [data-section="ceo"] .banner__content-four > .title { font-size: 36px; }
}
@media (min-width: 576px) and (max-width: 767px) {
    [data-section="ceo"] .banner__content-four > .title { font-size: 36px; }
}

/* ===== FONTS GENERAL ===== */
h1, h2, h3, h4, h5, h6 {
    color: #11131a !important;
}
p {
    color: #11131a !important;
}
span.sub-title {
    color: #ff1c72 !important;
}
.section-title .sub-title {
    color: #ff1c72 !important;
}

.btn {
    background: #ff1c72 none repeat scroll 0 0;
}
.btn::before {
    background: #11131a;
}

::selection {
    background: #ff1c72 !important;
    color: #fff !important;
}

/* LICENCIA */
.consulting-content {
    padding: 65px 60px;
}
@media (max-width: 1199.98px) {
    .consulting-content { padding: 50px 40px; }
}
@media (max-width: 767.98px) {
    .consulting-content { padding: 40px 30px; }
}
@media (max-width: 768px) {
  .licencia-info .separador {
    display: none;
  }
  .licencia-info .dato {
    display: block;
  }
}

/* ===== LICENCIA FIFA ===== */
/* Reemplaza TODO el bloque anterior del sello por este */

/* Panel en el oscuro de marca */
[data-section="fifa"] .consulting-inner-wrap {
    background: #11131a;
}

/* Sello: reemplaza a .consulting-img como otro ítem del flex del panel */
[data-section="fifa"] .lic-badge {
    --size: 180px;
    flex: 0 0 var(--size);
    width: var(--size);
    height: var(--size);
    margin: auto 60px auto auto;   /* centrado vertical, empujado a la derecha */
    position: relative;
    pointer-events: none;
}
[data-section="fifa"] .lic-badge__seal {
    position: absolute;
    inset: 14%;
    width: 72%;
    height: 72%;
    overflow: visible;
}

/* Sello grande de fondo (estático) */
[data-section="fifa"] .lic-badge__ghost {
    position: absolute;
    width: 280%;
    height: 280%;
    left: -60%;
    top: -75%;
    fill: #fff;
    opacity: .04;
    transform: rotate(-12deg);
}

/* Silueta del sello: gira lento sobre su centro */
[data-section="fifa"] .lic-badge__outline {
    fill: #fff;
    opacity: .12;
    transform-box: view-box;
    transform-origin: 128px 128px;
    animation: licSpin 40s linear infinite;
}

/* Tilde: base tenue + coloración lineal al entrar en pantalla */
[data-section="fifa"] .lic-badge__base {
    fill: #fff;
    opacity: .12;
}
[data-section="fifa"] .lic-badge__check {
    fill: #ff1c72;
    opacity: .7;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .3s;
}
[data-section="fifa"] .consulting-inner-wrap.is-visible .lic-badge__check {
    clip-path: inset(0 0 0 0);
}

/* Heartbeat del tilde, una vez coloreado */
[data-section="fifa"] .lic-badge__tick {
    transform-box: fill-box;
    transform-origin: center;
}
[data-section="fifa"] .consulting-inner-wrap.is-visible .lic-badge__tick {
    animation: licBeat 2.4s ease-in-out 1.5s infinite;
}

@keyframes licSpin { to { transform: rotate(360deg); } }
@keyframes licBeat {
    0%, 40%, 100% { transform: scale(1); }
    10%           { transform: scale(1.07); }
    20%           { transform: scale(1); }
    30%           { transform: scale(1.05); }
}

/* Responsive */
@media (max-width: 1199.98px) {
    [data-section="fifa"] .lic-badge {
        --size: 160px;
        margin-right: 40px;
    }
    [data-section="fifa"] .lic-badge__ghost {
      left: -75%;
      top: -90%;
    }
}
/* Tablet y celular: el sello chico se oculta y el sello grande queda
   como fondo de todo el panel, detrás del texto */
@media (max-width: 991.98px) {
    [data-section="fifa"] .consulting-content {
        position: relative;
        z-index: 1;
    }
    [data-section="fifa"] .lic-badge {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        margin: 0;
        flex: none;
        z-index: 0;
    }
    [data-section="fifa"] .lic-badge__seal {
        display: none;
    }
    [data-section="fifa"] .lic-badge__ghost {
        width: 460px;
        height: 460px;
        left: auto;
        top: auto;
        right: -150px;
        bottom: -170px;
    }
}
@media (max-width: 575.98px) {
    [data-section="fifa"] .lic-badge__ghost {
        width: 360px;
        height: 360px;
        right: -130px;
        bottom: -140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-section="fifa"] .lic-badge__outline,
    [data-section="fifa"] .consulting-inner-wrap.is-visible .lic-badge__tick {
        animation: none;
    }
    [data-section="fifa"] .lic-badge__check {
        transition: none;
        clip-path: none;
    }
}

/* ===== HERO FULLSCREEN (reemplaza al slider) ===== */
.slider__area.hero__fullscreen {
    min-height: 100vh;
    min-height: 100svh;
    padding: 140px 0 80px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slider__area.hero__fullscreen > .container {
    width: 100%;
}
.hero__fullscreen .banner__content-three.home-9 {
    margin: 0;
}
.hero__fullscreen .banner__content-three.home-9 .title {
    font-size: clamp(38px, 6vw, 65px);
    line-height: 1.1;
    text-transform: none;
}
.hero__fullscreen .banner__content-three.home-9 .sub {
    max-width: 560px;
    line-height: 1.5;
    text-transform: none;
    margin-bottom: 40px;
}
@media (max-width: 991.98px) {
    .banner__bg-four {
      padding: 70px 0 40px !important;
    }

    .slider__area.hero__fullscreen {
        padding: 120px 0 60px;
    }
    .hero__fullscreen .banner__content-three.home-9 .sub {
        margin-left: auto;
        margin-right: auto;
    }


    .banner__content-four {
        text-align: left !important;
    }
}

/* ===== HERO: VIDEO DE FONDO ===== */
/* Capas dentro del hero (la sección ya crea su propio contexto con z-index: 1):
   -2 video  ·  -1 overlay (::before del template)  ·  0 contenido */
.hero--video {
    background-color: #040314; /* mientras carga el poster */
}

.hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* el jugador está centrado */
    pointer-events: none;    /* sin clic derecho ni interacción */
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;              /* invisible hasta que realmente reproduce (ver script en index.php) */
    transition: opacity .25s ease;
}
.hero__video.is-playing {
    opacity: 1;
}

/* El video ya viene oscurecido: el overlay del template (0.84 plano) lo dejaría casi negro.
   Se reemplaza por un degradado que oscurece más el lado del texto. */
.hero--video.banner__bg-five::before {
    opacity: 1;
    background: linear-gradient(90deg,
        rgba(4, 3, 20, .70) 0%,
        rgba(4, 3, 20, .45) 45%,
        rgba(4, 3, 20, .15) 100%);
}

/* Tablet y mobile: el texto va centrado, overlay parejo */
@media (max-width: 991.98px) {
    .hero--video.banner__bg-five::before {
        background: rgba(4, 3, 20, .50);
    }
}

/* Accesibilidad: si el usuario pidió menos movimiento, queda el poster de fondo */
@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
}

/* ===== COVER ===== */
.testimonial__info-three {
    padding-left: 15px;
}
.testimonial__info-three .title {
    font-size: 18px;
}
.testimonial__info-three span {
    font-size: 15px;
    margin-top: -5px;
    color: #11131a;
}
.testimonial__info-three::before {
    border-radius: 0px;
    background: #ff1c72;
}

/* ===== ABOUT ===== */
.choose__area-six {
  padding: 80px 0px 85px !important;
}
.choose__box .icon {
    background: #f6f6f6 !important;
    color: #ff1c72 !important;
    font-size: 45px !important;
}

/* Mapa */
.choose__img-wrap-five--map {
    padding-bottom: 0;
}
.choose__img-wrap-five--map img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 !important;
}

@media (max-width: 575.98px) {
    .choose__box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .choose__box .icon {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px; /* separación con el título al quedar arriba */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .choose__box .content {
        width: 100%;
        text-align: center;
    }

    .choose__box .content p {
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px !important;
    }
}

/* ===== CALL TO ACTION ===== */
.call-back-wrap {
    background: #e9e9e9;
}
.codigo-numerico {
    font-family: 'Source Code Pro', Consolas, 'Courier New', monospace;
    letter-spacing: 1px;
}

/* ===== SERVICIOS ===== */
.services-content { 
    padding-top: 40px !important;
    text-align: center;
}
.services-thumb img {
    height: 180px;
    filter: grayscale(25%);
}
.services-thumb {
    border-radius: 10px 10px 0 0;
}
.services-content p{
    margin-bottom: 0px !important;
    /*text-align: left;*/
    line-height: 1.65;
}
.services-content .icon {
    color: #ff1c72;
    background: #f6f6f6;
    font-size: 38px !important;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: -40px;
}

/*.services-row > div:last-child .icon {
    transform: translateY(-4px);
}*/
.services-item-wrap > div:last-child .services-content .icon i,
.row > div:last-child .services-item .icon i {
    display: inline-block;
    transform: translateY(-1px); /* ajustá el valor */
}

.services-item {
    box-shadow: 0px 4px 30px 0px rgba(207, 222, 228, 0.35);
}
.services-item:hover {
    box-shadow: 0px 4px 30px 0px #cfdee4;
}
.services-item:hover .services-content .icon {
    background: #ff1c72;
}
.services-item:hover > .services-content h4.title {
    color: #ff1c72 !important;
}

/* Servicios: mismo alto solo cuando están los 3 en fila (col-lg-4 → ≥992px) */
@media (min-width: 992px) {
    .services-content { padding: 40px 32px 34px !important; }
  [data-section="services"] .services-item-wrap .row > [class*="col-"] {
    display: flex;
  }

  [data-section="services"] .services-item {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  [data-section="services"] .services-content {
    flex-grow: 1; /* el bloque de texto absorbe la diferencia de alto */
  }
}

/* ===== FOOTER ===== */
.fw-logo img {
    max-height: 30px;
}
.footer__area-two {
    background: #11131a;
}
.footer__area-two p {
    color: white !important;
}
.footer__bottom-two {
    border-top: none;
    background: black !important;
}
.copyright-text-two p {
    font-size: 13px;
}
.copyright-text-two p a {
    color: #ff1c72;
}
.copyright-text-two p a:hover {
    color: white !important;
}
.footer-social .list-wrap li a {
    width: 40px;
    height: 40px;
    color: #ff1c72;
    background: #f6f6f6;
}
.footer-social .list-wrap li a:hover {
    background: #ff1c72;
    color: white;
}
.footer-social .icon-tm svg {
    display: block;
    width: 26px;    /* ≈ ancho visual de los íconos de Font Awesome a 20px */
    height: auto;
}
.footer-info-list .list-wrap li a {
    color: white;
}
/* Íconos del footer: caja del alto de una línea de texto */
.footer-info-list .list-wrap li .icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;          /* = font-size 16px × line-height 1.5 */
    line-height: 1;
}
.footer-info-list .list-wrap li .icon i{
    font-size: 22px;
    line-height: 1 !important;
    color: #ff1c72 !important;
}
.footer-info-list .list-wrap li .icon--mail i {
    transform: translateY(1px);
}

h4.fw-title {
    color: #ff1c72 !important;
}
.fw-title::before {
    background: #ff1c72;
    border-radius: 0px !important;
}

/* SCROLL TO TOP */
.scroll__top {
    background: #ff1c72;
    font-size: 14px !important;
    bottom: -80px;
    transition: bottom 1s ease, background-color .2s ease;
}
.scroll__top:hover,
.scroll__top:focus-visible {
    background: #ff498e;
}

.scroll__top::after {
    display: none !important;
}
@media (max-width: 767.98px) {
    .scroll__top {
        right: 15px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
}

.scroll__top i {
  display: inline-block; /* necesario para que tome el transform */
}

.scroll__top:hover i,
.scroll__top:focus-visible i {
  animation: iconBounceUp 0.8s ease-in-out infinite;
}

/* ===== NAVEGACION ONE-PAGE ===== */
/* Bootstrap activa scroll-behavior:smooth en :root; eso pelea con la
   animacion por JS (cada paso se "suaviza" de nuevo y queda trabado). */
html, :root {
    scroll-behavior: auto !important;
}

/* CONTACTO */
.contact__area {
  padding: 0px 0 120px;
}
[data-section="contact"] .section-title .title {
    /*font-size: clamp(28px, 3vw, 36px);*/
    text-transform: none;
    line-height: 1.2;
}

/*[data-section="contact"] .row.align-items-center {
  align-items: flex-start !important;
}*/
.contact__form-wrap {
  background: #f6f6f6 !important;
  border: 0px !important;
}

/* Campos: borde, texto ingresado y transición del foco */
.contact__form-wrap form .form-grp input,
.contact__form-wrap form .form-grp textarea {
  border: 1px solid #e9e9e9;
  color: #11131a;
  transition: border-color .2s ease;
}

/* Placeholder: mismo tono del texto, más claro */
.contact__form-wrap form .form-grp input::placeholder,
.contact__form-wrap form .form-grp textarea::placeholder {
  color: rgba(17, 19, 26, .3); /* #11131a al 45% */
  opacity: 1;                    /* Firefox le baja la opacidad por defecto */
}

/* Campo activo: borde en el color principal */
.contact__form-wrap form .form-grp input:focus,
.contact__form-wrap form .form-grp textarea:focus {
  border-color: #ff1c72;
  outline: none;
}

.contact__form-wrap form .checkbox-grp label {
    color: #11131a;
    /*line-height: 22px;*/
}

/* Checkbox de consentimiento */
.contact__form-wrap form .checkbox-grp input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;              /* que el texto largo no lo achique */
  width: 22px;
  height: 22px;
  margin: 0 9px 0 0;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  background: #fff center / 14px no-repeat;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
  padding: 10px;
}

/* Hover y foco con teclado: anticipa el color de marca */
.contact__form-wrap form .checkbox-grp input[type="checkbox"]:hover,
.contact__form-wrap form .checkbox-grp input[type="checkbox"]:focus-visible {
  border-color: #ff1c72;
  outline: none;
}

/* Marcado: relleno de marca con tilde blanco */
.contact__form-wrap form .checkbox-grp input[type="checkbox"]:checked {
  background-color: #ff1c72;
  border-color: #ff1c72;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

/* Intro fija mientras se scrollea el formulario (solo escritorio) */
@media (min-width: 992px) {
  .contact__area .contact__content {
    position: sticky;
    top: 120px; /* alto del header sticky (~90px) + aire */
  }
}

/* ===== CONTACTO: honeypot, errores, envío y confirmación ===== */
/* Pegar en custom.css, al final de la sección CONTACTO. */

/* --- Honeypot: fuera de pantalla (no display:none, que los bots detectan) --- */
.form-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Turnstile (en modo invisible no ocupa lugar) --- */
.contact__form-wrap .cf-turnstile {
  margin-bottom: 15px;
}
.contact__form-wrap .cf-turnstile:empty {
  margin: 0;
}

/* --- Errores por campo --- */
.contact__form-wrap form .form-grp.has-error input:not([type="radio"]):not([type="checkbox"]),
.contact__form-wrap form .form-grp.has-error select,
.contact__form-wrap form .form-grp.has-error textarea,
.contact__form-wrap form .form-grp.has-error input[type="radio"],
.contact__form-wrap form .form-grp.has-error input[type="checkbox"] {
  border-color: #ff1c72;
}
.contact__form-wrap form .field-error {
  display: block;
  flex-basis: 100%;     /* en el checkbox (flex) baja a su propia línea */
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #ff1c72;
}
/*.contact__form-wrap form .checkbox-grp {
  flex-wrap: wrap;
}*/

/* --- Aviso general --- */
.contact__form-wrap .form-alert {
  margin: 0 0 20px;
  padding: 12px 16px;
  /*border-left: 3px solid #e5383b;*/
  border-radius: 8px;
  background: rgba(255, 28, 114, 0.1);
  font-size: 14px;
  line-height: 1.5;
  color: #ff1c72;
}

/* --- Botón enviando --- */
/*.contact__form-wrap .btn.is-loading,
.contact__form-wrap .btn:disabled {
  cursor: wait;
  opacity: .85;
}
.contact__form-wrap .btn.is-loading::before {
  transform: translateY(101%); /* sin la animación de hover mientras envía */
/*}*/
/* --- Botón enviando: queda fijo en el estado de hover (relleno #11131a arriba) --- */
.contact__form-wrap .btn.is-loading,
.contact__form-wrap .btn:disabled {
  cursor: wait;
  opacity: 1;
  color: #fff;
}
.contact__form-wrap .btn.is-loading::before,
.contact__form-wrap .btn:disabled::before {
  top: 0;
  transform: translateY(0);
}
/* Sin el desplazamiento del ícono mientras envía */
.contact__form-wrap .btn.is-loading i {
  transform: none;
}

/* --- Confirmación --- */
.contact__form-wrap .form-success {
  padding: 50px 20px;
  text-align: center;
  outline: none;
}
.contact__form-wrap .form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #ff1c72;
  color: #fff;
  font-size: 28px;
}
.contact__form-wrap .form-success__title {
  margin-bottom: 12px;
  font-size: 24px;
}
.contact__form-wrap .form-success p {
  max-width: 460px;
  margin: 0 auto;
}

/* Spinner del botón (Material Symbols: progress_activity)
   Ocupa lo mismo que una letra del botón y se agranda solo visualmente,
   así el alto del botón no cambia. */
.btn .material-symbols-outlined.btn-spin {
  display: inline-block;
  font-size: inherit;              /* mismo tamaño que el texto del botón (pisa los 13px de .btn i) */
  line-height: 1;
  vertical-align: middle;
  margin-left: 10px;
  font-variation-settings: 'wght' 600;  /* grosor: 400 normal, hasta 700 */
  animation: btnSpin .8s linear infinite;
}

@keyframes btnSpin {
  from { transform: scale(1.3) rotate(0deg); }
  to   { transform: scale(1.3) rotate(360deg); }
}

/* ===== CONTACTO: bloque del padre, madre o tutor ===== */
/* Pegar en custom.css, en la sección CONTACTO. */

.contact__form-wrap form .form-tutor {
  margin: 5px 0 30px;
  padding: 22px 22px 20px;
  border-left: 3px solid #ff1c72;
  border-radius: 8px;
  background: #fff;
}
.contact__form-wrap form .form-tutor[hidden] {
  display: none;
}
.contact__form-wrap form .form-tutor__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.contact__form-wrap form .form-tutor__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
}
/* Dentro del recuadro blanco, los campos se separan con el borde del input */
.contact__form-wrap form .form-tutor .form-grp input:not([type="checkbox"]) {
  background-color: #f6f6f6;
}

/* ===== PÁGINA DE ERROR (4xx) ===== */
/* Pegar al final de custom.css. Reutiliza .error-area / .error-content del template. */

.error-area {
    padding: 100px 0 120px;
}
@media (max-width: 767.98px) {
    .error-area {
        padding: 80px 0 100px;
    }
}

.error-content .sub-title {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Número del error: reemplaza al SVG "404" del template, sirve para cualquier código */
.error-content .error-code {
    display: block;
    font-family: var(--tg-heading-font-family);
    font-size: clamp(96px, 20vw, 180px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ff1c72;
}

.error-content .title {
    margin: 20px 0 12px;
    font-size: clamp(28px, 4vw, 40px); /* pisa los 48px del template */
}

.error-content p {
    max-width: 480px;
    margin: 0 auto 35px;
}