/* ============================================================
   APPROACH · Correcciones SOLO para mobile/tablet
   (no afecta el diseño desktop: todo va dentro de @media)
   ============================================================ */

/* ===== GLOBAL (todos los anchos) =====
   El template usa float:left en las <section>; al quitar varias,
   las que no flotan se montan encima (solape en el modelo de caja)
   y los anclas del menú saltan al top. Forzamos flujo vertical normal
   para que el apilado y los anclas (#parallax-info, etc.) funcionen.
   Visualmente queda igual en desktop. */
body > section,
body > footer {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  position: relative !important;
}
/* el ancla aterriza debajo del menú fijo, no tapada por él */
html { scroll-padding-top: 80px; }
html, body { overflow-x: hidden; max-width: 100%; }

@media only screen and (max-width: 991px){

  /* 3) Parallax sin background fixed (en mobile hace zoom y rompe) */
  #parallaxTraining,
  .content-result.content-result-news {
    background-attachment: scroll !important;
  }

  /* 4) Títulos grandes que desbordan el ancho */
  .bbtxt-box h4 {
    font-size: 30px !important;
    white-space: normal !important;
    word-break: break-word;
    margin-top: 10px !important;
  }
  .middle-txt { display: inline !important; white-space: normal !important; }

  .txt-training h2 { font-size: 30px !important; word-break: break-word; }
  .txt-training p  { font-size: 18px !important; }
  .txt-training a  {
    display: inline-block;
    margin: 5px 4px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    letter-spacing: .5px !important;
  }

  /* 5) Hero: texto legible y proporcionado */
  .content-result p.sub-result.welcome { font-size: 24px !important; }
  .content-result p.sub-result.aft-little { font-size: 42px !important; }

  /* 6) Imágenes nunca desbordan */
  img { max-width: 100% !important; height: auto; }
}

@media only screen and (max-width: 575px){
  .bbtxt-box h4 { font-size: 24px !important; }
  .txt-training h2 { font-size: 24px !important; }
  .content-result p.sub-result.aft-little { font-size: 34px !important; }
  .content-result p.sub-result.welcome { font-size: 20px !important; }
}

/* ===== Nuestra Historia: imagen llena toda la columna derecha (desktop) ===== */
@media only screen and (min-width: 992px){
  #parallax-info .clearfix { position: relative; }
  #parallax-info .cup-img {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 50%;
    padding: 0 !important;
    background: url("../img/backtennis7.jpg") center center / cover no-repeat;
  }
  #parallax-info .cup-img img { display: none; }
}

/* ===== Footer APPROACH (logo + contacto + redes) ===== */
#footer-tag { padding: 55px 0 35px; }
#footer-tag .ft-logo {
  font-family: 'Oswald','Raleway',sans-serif;
  font-weight: 700; font-size: 36px; letter-spacing: 3px;
  text-transform: uppercase; color: #fff; margin: 0 0 4px;
}
#footer-tag .ft-logo span { color: #CAE751; }
#footer-tag .ft-tagline {
  color: #CAE751; letter-spacing: 4px; text-transform: uppercase;
  font-size: 11px; margin: 0 0 16px;
}
#footer-tag .ft-brand p { color: #aab0b8; line-height: 1.7; }
#footer-tag h3 { margin-bottom: 18px; }
#footer-tag .ft-contact { list-style: none; padding: 0; margin: 0; }
#footer-tag .ft-contact li {
  color: #cfd4da; padding: 7px 0; border: 0; font-size: 14px;
}
#footer-tag .ft-contact li i { color: #CAE751; width: 20px; margin-right: 6px; }
#footer-tag .ft-contact a { color: #cfd4da; text-decoration: none; }
#footer-tag .ft-contact a:hover { color: #CAE751; }
#footer-tag .ft-social { margin-top: 4px; padding: 0; }
#footer-tag .ft-social li { display: inline-block; margin: 0 8px 0 0; }

/* ===== Footer: Seguinos centrado, Contacto a la derecha (desktop) ===== */
@media only screen and (min-width: 992px){
  #footer-tag .ft-col-social { text-align: center; }
  #footer-tag .ft-col-contact { text-align: right; }
  #footer-tag .ft-col-contact .ft-contact li i { margin: 0 0 0 8px; width: auto; }
}

/* ===== Footer: alinear los 3 encabezados al mismo nivel ===== */
#footer-tag h3 { margin-top: 0 !important; }

/* ===== Cita: frase completa, tamaño más chico (solo la cita, no el título de Servicios) ===== */
.bbtxt-content .bbtxt-box h4 { font-size: 40px; line-height: 1.35; }
@media only screen and (max-width: 991px){
  .bbtxt-content .bbtxt-box h4 { font-size: 26px !important; line-height: 1.4; }
}
@media only screen and (max-width: 575px){
  .bbtxt-content .bbtxt-box h4 { font-size: 21px !important; }
}

/* ===== Logo del footer (imagen) ===== */
#footer-tag .ft-logo-img { max-width: 250px; width: 100%; height: auto; display: block; margin: 0 0 16px; }

/* ===== Logo del header: acotar tamaño ===== */
.content-logo .logo img { max-height: 78px; width: auto; }
@media only screen and (max-width: 991px){
  .content-logo .logo img { max-height: 56px; max-width: 240px; }
}

/* ===== Coherencia de marca: contraste sobre los nuevos colores ===== */
/* Botones del parallax: violeta con texto blanco; hover lima con texto oscuro */
.txt-training a {
  background: #844693 !important;
  border: 1px solid #6E3A7B !important;
  color: #fff !important;
}
.txt-training a:hover {
  background: #CAE751 !important;
  border-color: #B2CE3A !important;
  color: #2c333b !important;
}
/* Bloque "Nuestra Historia" ahora es violeta -> texto en blanco para contraste */
#parallax-info .yoga-desc,
#parallax-info .yoga-desc h1,
#parallax-info .yoga-desc p { color: #fff !important; }

/* ===== Sección Novedades (home) ===== */
.sec-novedades{ background:#f5f6f8; padding:70px 0; }
.sec-novedades .nov-head{ text-align:center; margin-bottom:42px; }
.sec-novedades .nov-head h2{ font-weight:700; letter-spacing:1px; color:#2c333b; text-transform:uppercase; margin:0 0 8px; }
.sec-novedades .nov-head h2 span{ color:#844693; }
.sec-novedades .nov-head p{ color:#777; margin:0; }
.nov-card{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.07);
           display:flex; flex-direction:column; height:100%; margin-bottom:26px; transition:transform .25s, box-shadow .25s; }
.nov-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.13); }
.nov-img{ display:block; height:190px; background-size:cover; background-position:center; background-color:#844693; }
.nov-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1 1 auto; }
.nov-date{ font-size:12px; color:#9aa0a6; text-transform:uppercase; letter-spacing:1px; }
.nov-body h4{ font-size:19px; line-height:1.3; margin:9px 0 10px; }
.nov-body h4 a{ color:#2c333b; text-decoration:none; }
.nov-body h4 a:hover{ color:#844693; }
.nov-body p{ color:#777; font-size:14px; line-height:1.6; flex:1 1 auto; margin:0 0 14px; }
.nov-link{ color:#844693; font-weight:600; text-decoration:none; font-size:14px; align-self:flex-start; }
.nov-link:hover{ color:#6e3a7b; }
.nov-empty{ color:#888; padding:30px 0; }
.nov-all{ text-align:center; margin-top:16px; }
.btn-nov{ display:inline-block; background:#844693; color:#fff; padding:13px 32px; border-radius:4px;
          text-transform:uppercase; letter-spacing:1px; font-size:13px; font-weight:600; text-decoration:none; transition:all .25s; }
.btn-nov:hover{ background:#CAE751; color:#2c333b; }

/* ===== Hero mobile: achicar la frase para que la barra no sobresalga =====
   La frase tiene font-size:30px inline; en mobile ocupa 3 líneas y la barra
   (margin-top:-133px) sobresale de la imagen (se veía gris). La achicamos
   y reducimos el padding para que entre dentro del alto de la imagen. */
@media only screen and (max-width: 991px){
  #summary-slider #heroFrase{ font-size:19px !important; letter-spacing:.5px !important; }
  #summary-slider .content-match-team-wrapper{ padding:22px 12px !important; }
}
@media only screen and (max-width: 400px){
  #summary-slider #heroFrase{ font-size:17px !important; }
}

/* ===== Bajada (.subin) en minúscula, no todo en mayúsculas ===== */
.bbtxt-box p.subin{ text-transform: none !important; }

/* ===== Título de la sección de servicios ("APPROACH, TU FORMACIÓN...") más chico ===== */
.bbtxt-content-subscription .bbtxt-box h4{ font-size:42px !important; line-height:1.25; font-style:italic; }
@media only screen and (max-width: 991px){
  .bbtxt-content-subscription .bbtxt-box h4{ font-size:27px !important; }
}
@media only screen and (max-width: 575px){
  .bbtxt-content-subscription .bbtxt-box h4{ font-size:22px !important; }
}

/* ===== Fuente del sitio: Helvetica Neue (fallback Helvetica/Arial) ===== */
body, body *{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
/* preservar los íconos (Font Awesome 4 y Bootstrap Icons) */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"]{ font-family: "FontAwesome" !important; }
.bi, [class^="bi-"], [class*=" bi-"]{ font-family: "bootstrap-icons" !important; }