/* =====================================================================
   BRITANIA — Hoja de personalización (se carga al final, sobrescribe el tema)
   Paleta: Azul marino #1F3864 · Azul medio #2E5090 · Verde tenis #4CAF50
   Tipografía: Playfair Display (títulos) + Montserrat (texto)
   ===================================================================== */

/* Fuentes Britania */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* 1) Color de acento global del tema (era verde golf #77A96A) -> AZUL MARINO Britania */
:root{
  --theme-color: #1F3864;       /* acento principal: íconos, subtítulos, hovers, flechas */
  --theme-color2: #2E5090;      /* azul medio de apoyo */
  --brit-green: #4CAF50;        /* verde tenis: botones de conversión */
  --brit-green-dark: #3D9140;
}

/* 2) Tipografías */
body, p, li, a, input, textarea, button, .text-box p,
.main-menu .navigation > li > a{
  font-family: 'Montserrat', sans-serif;
}
h1,h2,h3,h4,h5,h6,
.sec-title h2, .banner-carousel .content-box h2{
  font-family: 'Playfair Display', serif !important;
}

/* 3) Botones de acción -> VERDE TENIS (conversión: Afíliate, CTA, etc.) */
.theme-btn.btn-one{
  background-color: var(--brit-green) !important;
  border-color: var(--brit-green) !important;
  color:#fff !important;
}
.theme-btn.btn-one:hover{
  background-color: var(--brit-green-dark) !important;
  border-color: var(--brit-green-dark) !important;
}
/* el "barrido" de hover de algunos botones */
.theme-btn.btn-one:before,
.theme-btn.btn-one:after{ background-color: var(--brit-green-dark) !important; }

/* 4) Header / barra superior en azul */
.main-header .header-top{ background-color: var(--theme-color); }
.main-header .header-top, .main-header .header-top a,
.main-header .info-list li{ color:#dfe6f2; }
.main-header .info-list li i{ color:#fff; }

/* 5) Hero: oscurecer un poco la foto para que el texto blanco resalte */
.banner-section .slide-item .bg-layer:after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(15,28,54,.78) 0%, rgba(15,28,54,.45) 55%, rgba(15,28,54,.25) 100%);
}
.banner-section .content-box{ position:relative; z-index:2; }
.banner-section .content-box h2{ color:#fff; }
.banner-section .content-box .upper-text{ color:var(--brit-green); letter-spacing:2px; }
.banner-section .content-box p{ color:#eef2f8; }

/* 6) Footer en azul marino */
.main-footer{ background-color: var(--theme-color); }
.main-footer:before{ background:none; }
.main-footer h3, .main-footer p, .main-footer a, .main-footer li{ color:#e7ecf5; }
.main-footer .links-widget .links-list li a:hover,
.main-footer .contact-widget .info-list li a:hover{ color: var(--brit-green); }
.footer-bottom{ background-color:#16284a; }
.footer-bottom p, .footer-bottom a{ color:#cdd6e6; }

/* 7) Tarjetas: flecha en azul, hover verde */
.service-block-one .inner-box .lower-content .link a{
  background: var(--theme-color); color:#fff;
}
.service-block-one .inner-box:hover .lower-content .link a{ background: var(--brit-green); }

/* 8) Ocultar elementos de DEMO de la plantilla que NO usamos */
.loader-wrap,                 /* preloader que decía "golfer" */
.page_direction,              /* botones RTL/LTR */
.chat-icon, #chat-popup{      /* chat de demostración */
  display:none !important;
}

/* 9) Detalle: subrayado de acento bajo subtítulos como en el mockup */
.sec-title .sub-title{ color: var(--brit-green); font-weight:600; letter-spacing:1px; }

/* =====================================================================
   AJUSTES DE PROPORCIÓN Y RESPONSIVE (calibrado para menú en español)
   Laptop (~1366px) y escritorio grande (1920px)
   ===================================================================== */

/* --- LOGO: compacto, sin el relleno gigante de la plantilla --- */
.main-header .outer-container .left-column .logo-box{ padding: 14px 0 !important; }
.main-header .logo-box img,
.sticky-header .logo-box img{ max-height: 60px; width:auto; }
.main-footer .footer-logo img{ max-height: 64px; width:auto; }

/* --- CONTENEDOR: menos relleno lateral para ganar espacio al menú --- */
.main-header .outer-container{ padding: 0 30px !important; }

/* --- MENÚ: que quepa en UNA fila --- */
.main-menu .navigation{ white-space: nowrap; }
.main-menu .navigation > li{ margin: 0 14px !important; }
.main-menu .navigation > li > a{
  font-size: 15px !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
/* botón AFÍLIATE y teléfono un poco más compactos */
.main-header .menu-right-content .support-box a{ font-size: 15px; }
.main-header .menu-right-content .btn-box .theme-btn{ padding: 12px 26px; }

/* --- BARRA SUPERIOR: que no se parta en varias líneas --- */
.main-header .header-top .top-inner{ flex-wrap: nowrap; }
.main-header .info-list li{ font-size: 13.5px; margin-right: 22px; white-space: nowrap; }
.main-header .info-list{ display:flex; flex-wrap:wrap; }

/* --- HERO: título proporcional que ESCALA con la pantalla --- */
.banner-carousel .content-box h2,
.banner-carousel .active .content-box h2{
  font-size: clamp(38px, 4.4vw, 66px) !important;
  line-height: 1.08 !important;
}
.banner-carousel .content-box p{ font-size: clamp(15px, 1.2vw, 19px); }
.banner-section .slide-item{ }
.banner-section .slide-item .bg-layer{ min-height: 620px; }
.banner-carousel .content-box{ max-width: 720px; }

/* --- LAPTOP / pantallas medianas: apretar un poco más --- */
@media (max-width: 1500px){
  .main-menu .navigation > li{ margin: 0 10px !important; }
  .main-menu .navigation > li > a{ font-size: 14px !important; }
  .main-header .menu-right-content .support-box{ display:none; } /* ocultar tel para dar aire; queda el botón AFÍLIATE */
}
@media (max-width: 1300px){
  .main-header .info-list li{ font-size: 12.5px; margin-right: 16px; }
  .main-menu .navigation > li{ margin: 0 8px !important; }
  .banner-section .slide-item .bg-layer{ min-height: 540px; }
}

/* --- Ícono de WhatsApp en el header (reemplaza al botón AFÍLIATE) --- */
.brit-wa{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:50%;
  background: var(--brit-green); color:#fff !important;
  font-size:24px; transition: all .3s ease;
}
.brit-wa:hover{ background: var(--brit-green-dark); transform: translateY(-2px); color:#fff !important; }
.brit-wa i{ line-height:1; }
/* Con el menú más corto (5 ítems) damos más aire entre opciones */
.main-menu .navigation > li{ margin: 0 20px !important; }
.main-menu .navigation > li > a{ font-size: 16px !important; }
@media (max-width: 1500px){
  .main-menu .navigation > li{ margin: 0 15px !important; }
  .main-menu .navigation > li > a{ font-size: 15px !important; }
}

/* =====================================================================
   TARJETAS estilo mockup: contenedor redondeado + sombra + foto rectangular
   + círculo blanco con ícono + flecha. (Sobrescribe el óvalo de la plantilla)
   ===================================================================== */
.service-block-one{ padding-bottom: 0 !important; margin-bottom: 25px; }

.service-block-one .inner-box{
  background:#fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(31,56,100,.10);
  overflow: hidden;
  text-align: center;
  position: relative;
  padding-bottom: 34px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-block-one .inner-box:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(31,56,100,.20);
}

/* Foto rectangular (quitar óvalo) */
.service-block-one .inner-box .image-box{
  border-radius: 0 !important;
  width: 100% !important;
  height: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
.service-block-one .inner-box .image-box:before{ display:none !important; }
.service-block-one .inner-box .image-box .image{
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.service-block-one .inner-box .image-box .image img{
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .5s ease;
}
.service-block-one .inner-box:hover .image-box .image img{ transform: scale(1.05); }

/* Círculo blanco con ícono, encimado entre foto y texto */
.service-block-one .brit-icon{
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(31,56,100,.16);
  display: flex; align-items: center; justify-content: center;
  margin: -33px auto 14px;
  position: relative; z-index: 3;
  color: var(--theme-color);
  font-size: 26px;
  transition: all .35s ease;
}
.service-block-one .inner-box:hover .brit-icon{
  color: #fff; background: var(--theme-color);
}

/* Texto */
.service-block-one .inner-box .lower-content{
  padding: 0 22px !important;
  position: static !important;
}
.service-block-one .inner-box .lower-content h3{ margin-bottom: 10px; }
.service-block-one .inner-box .lower-content h3 a{
  color: var(--theme-color);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .3px;
}
.service-block-one .inner-box .lower-content p{ font-size: 14.5px; color:#5b6472; }

/* Flecha: círculo azul centrado al pie de la tarjeta */
.service-block-one .inner-box .lower-content .link{
  position: relative !important;
  left: auto !important; bottom: auto !important; margin: 18px auto 0 !important;
  display: flex; justify-content: center;
}
.service-block-one .inner-box .lower-content .link a{
  width: 46px !important; height: 46px !important; line-height: 46px !important;
  background: var(--theme-color) !important;
  color: #fff !important;
  font-size: 18px !important;
  box-shadow: 0 6px 16px rgba(31,56,100,.20) !important;
  display:inline-flex; align-items:center; justify-content:center;
}
.service-block-one .inner-box .lower-content .link a:hover{
  background: var(--brit-green) !important;
}

/* --- Tarjetas: misma altura las 4 (flexbox), texto que empuja la flecha al fondo --- */
.service-section .row{ display: flex; flex-wrap: wrap; }
.service-section .row > [class*="col-"].service-block{ display: flex; }
.service-block-one{ width: 100%; display: flex; }
.service-block-one .inner-box{
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* el texto ocupa el espacio disponible y empuja la flecha al pie, alineada en todas */
.service-block-one .inner-box .lower-content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.service-block-one .inner-box .lower-content p{ flex: 1 1 auto; }

/* =====================================================================
   PÁGINA SOMOS — bloque "Qué nos hace diferentes" + imagen chooseus
   ===================================================================== */
.brit-chooseus .brit-chooseus-img img{
  width:100%; border-radius:16px;
  box-shadow:0 12px 30px rgba(31,56,100,.15);
  object-fit:cover;
}
.brit-diff{ margin-top:10px; }
.brit-diff-item{
  position:relative;
  padding:14px 0 14px 22px;
  border-left:3px solid var(--brit-green);
  border-radius:0;
  margin-bottom:16px;
}
.brit-diff-item:last-child{ margin-bottom:0; }
.brit-diff-item h4{
  color:var(--theme-color);
  margin-bottom:4px; font-size:18px;
}
.brit-diff-item p{ margin:0; color:#5b6472; font-size:15px; }

/* La sección chooseus base del tema trae fondo/relleno propio; lo neutralizamos */
.chooseus-section.brit-chooseus{ background:none !important; }
.chooseus-section.brit-chooseus:before,
.chooseus-section.brit-chooseus .pattern-layer{ display:none !important; }

/* Badge "40+ años" del bloque de historia */
.about-style-three .experience-box .inner h2 span{ font-size:60%; }

/* Lista de valores en dos columnas dentro del tab */
.list-style-one.two-column{
  display:flex; flex-wrap:wrap;
}
.list-style-one.two-column li{ flex:0 0 50%; }
@media (max-width:575px){ .list-style-one.two-column li{ flex:0 0 100%; } }

/* CTA: fondo navy de marca y botón secundario legible sobre oscuro */
.cta-section.bg-color-2{ background-color: var(--theme-color) !important; }
.cta-section.bg-color-2:before,
.cta-section.bg-color-2 .pattern-layer{ opacity:.08; }
.cta-section .theme-btn.btn-two{
  background: transparent !important;
  border: 2px solid #fff !important;
  color:#fff !important;
}
.cta-section .theme-btn.btn-two:hover{
  background:#fff !important; color: var(--theme-color) !important;
}

/* Bloque de historia: ocultar el círculo decorativo de la plantilla (queda el badge 40+) */
.about-style-three .image-shape{ display:none !important; }

/* CTA btn-two: override con mayor especificidad que color.css */
.cta-section.bg-color-2 .content-box .theme-btn.btn-two{
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color:#ffffff !important;
}
.cta-section.bg-color-2 .content-box .theme-btn.btn-two:hover{
  background:#ffffff !important;
  color: var(--theme-color) !important;
  border-color:#ffffff !important;
}

/* =====================================================================
   AJUSTES SOMOS v2 (feedback Ulises A-D)
   ===================================================================== */

/* A) Panel del logo en BLANCO (no navy) -> logo a color se ve limpio y elegante */
.main-header .outer-container .left-column .logo-box{ background: transparent !important; }

/* B) Subtítulo del hero de página */
.page-title .content-box .page-title-text{
  font-family:'Montserrat', sans-serif;
  color:#eef2f8; font-size:clamp(16px,1.4vw,20px);
  margin-top:14px; margin-bottom:6px;
  max-width:640px; margin-left:auto; margin-right:auto;
}

/* C) Imagen de historia más grande (ocupa la columna) + badge más compacto */
.about-style-three .image_block_three .image-box{ padding:0 !important; }
.about-style-three .image_block_three .image-box .image img{
  width:100%; height:480px; object-fit:cover; border-radius:16px;
  box-shadow:0 12px 30px rgba(31,56,100,.15);
}
.about-style-three .image_block_three .image-box .experience-box{
  left:24px !important; top:24px !important; bottom:auto !important;
  width:150px !important; height:150px !important;
}

/* D) Pestañas Misión/Visión/Valores en Montserrat VERDE, con protagonismo */
.about-style-three .tabs-box .tab-btns{ border-bottom:1px solid #e3e7ee; margin-bottom:22px; }
.about-style-three .tabs-box .tab-btns .tab-btn{
  font-family:'Montserrat', sans-serif !important;
  color: var(--brit-green) !important;
  font-weight:600 !important; font-size:16px !important;
  text-transform:uppercase; letter-spacing:.6px;
  cursor:pointer; padding:0 0 12px 0; margin-right:28px;
  position:relative; display:inline-block;
}
.about-style-three .tabs-box .tab-btns .tab-btn.active-btn{ color: var(--brit-green-dark) !important; }
.about-style-three .tabs-box .tab-btns .tab-btn.active-btn:after{
  content:''; position:absolute; left:0; bottom:-1px;
  width:100%; height:2px; background: var(--brit-green);
}

/* E) CIERRE NAVY CONTINUO: quitar la onda blanca del borde superior del footer
   y ajustar el aire para que el CTA "Vive Britania" y el footer lean como un solo bloque */
.main-footer .pattern-layer{ display:none !important; }
.cta-section.bg-color-2{ padding-bottom:80px !important; }
.main-footer.pt_150{ padding-top:90px !important; }

/* =====================================================================
   PÁGINA INSTALACIONES — tarjetas de instalación + galería con lightbox
   ===================================================================== */
.brit-fac-grid{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
}
.brit-fac-card{
  flex:1 1 200px; max-width:260px;
  background:#fff; border-radius:16px;
  box-shadow:0 8px 24px rgba(31,56,100,.08);
  padding:30px 22px 26px; text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.brit-fac-card:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(31,56,100,.16); }
.brit-fac-icon{
  width:64px; height:64px; border-radius:50%;
  background:#eef2f8; color:var(--theme-color);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 16px; transition:all .35s ease;
}
.brit-fac-card:hover .brit-fac-icon{ background:var(--theme-color); color:#fff; }
.brit-fac-card h4{ color:var(--theme-color); font-size:17px; margin-bottom:6px; }
.brit-fac-card p{ font-size:14px; color:#5b6472; margin:0; }

/* Galería con lightbox (bloque editable) */
.brit-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:16px;
}
.brit-gallery a{
  display:block; position:relative; overflow:hidden;
  border-radius:14px; height:230px;
}
.brit-gallery a img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.brit-gallery a:hover img{ transform:scale(1.06); }
.brit-gallery a:after{
  content:"\f00e"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px; background:rgba(31,56,100,.55);
  opacity:0; transition:opacity .35s ease;
}
.brit-gallery a:hover:after{ opacity:1; }

/* Logos oficiales: dar más presencia (el escudo circular pide más alto) */
.main-header .logo-box img,
.sticky-header .logo-box img{ max-height: 78px !important; }
.main-header .outer-container .left-column .logo-box{ padding: 10px 0 !important; }
.main-footer .footer-logo img{ max-height: 74px !important; }

/* =====================================================================
   PÁGINA ACADEMIA DE TENIS
   ===================================================================== */
/* Imagen de intro (reutiliza estética de chooseus) */
.brit-academy-img img{
  width:100%; border-radius:16px; object-fit:cover;
  box-shadow:0 12px 30px rgba(31,56,100,.15);
}
/* Botón dentro del hero de página */
.page-title .content-box .btn-box{ margin-top:24px; }

/* Número dentro del círculo (niveles) */
.brit-fac-icon{ font-weight:600; }

/* Tarjetas de info (Torneos / Curso de verano) - alineadas a la izquierda */
.brit-info-card{
  background:#fff; border-radius:16px; height:100%;
  box-shadow:0 8px 24px rgba(31,56,100,.08);
  padding:32px 30px;
}
.brit-info-card .brit-fac-icon{ margin:0 0 16px 0; }
.brit-info-card h4{ color:var(--theme-color); font-size:19px; margin-bottom:10px; }
.brit-info-card p{ color:#5b6472; margin:0; font-size:15px; }

/* Chips "Qué traer a clase" */
.brit-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.brit-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef2f8; color:var(--theme-color);
  border-radius:30px; padding:10px 20px; font-size:14.5px; font-weight:500;
}
.brit-chip i{ color:var(--brit-green); font-size:13px; }

/* Nota bajo los botones del CTA */
.cta-section .cta-note{ color:#cdd6e6; font-size:14px; margin-top:18px; }

/* =====================================================================
   PÁGINA CONTÁCTANOS — select del formulario + mapa
   ===================================================================== */
.contact-style-two .form-inner select{
  position:relative; display:block; width:100%; height:60px;
  background:#f4f6fa; border:1px solid #e3e7ee; border-radius:8px;
  padding:0 20px; color:#5b6472; font-size:15px;
  font-family:'Montserrat',sans-serif; margin-bottom:30px;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231F3864' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 20px center;
}
.contact-style-two .map-inner iframe{ border-radius:16px; }

/* Select del formulario convertido por nice-select: igualar a los inputs */
.contact-style-two .form-inner .nice-select{
  width:100%; height:60px; line-height:58px;
  background:#f4f6fa !important; border:1px solid #e3e7ee !important; border-radius:8px !important;
  padding:0 20px; color:#5b6472; font-size:15px; margin-bottom:30px;
  font-family:'Montserrat',sans-serif; float:none;
}
.contact-style-two .form-inner .nice-select .current{ color:#5b6472; }
.contact-style-two .form-inner .nice-select .list{ width:100%; }

/* =====================================================================
   HERO: mover las flechas del carrusel a la esquina inferior derecha
   (antes quedaban centradas a los lados y la izquierda tapaba el texto)
   ===================================================================== */
.banner-carousel .owl-nav{
  left: auto !important;
  right: 50px !important;
  top: auto !important;
  bottom: 45px !important;
  margin-top: 0 !important;
  width: auto !important;
  display: flex;
  gap: 14px;
}
.banner-carousel .owl-nav .owl-prev,
.banner-carousel .owl-nav .owl-next{
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

/* Menú con 6 ítems: reducir espaciado para que quepa cómodo */
.main-menu .navigation > li{ margin: 0 14px !important; }

/* =====================================================================
   "AFÍLIATE" como botón CTA al final del menú
   ===================================================================== */
.main-menu .navigation > li.nav-cta{ margin-left: 24px !important; margin-right: 0 !important; }
.main-menu .navigation > li.nav-cta > a{
  display: inline-block;
  background: var(--brit-green);
  color: #fff !important;
  padding: 11px 28px !important;
  margin: 26px 0 !important;
  line-height: 1 !important;
  border-radius: 30px;
  font-weight: 600;
  transition: background .3s ease;
}
.main-menu .navigation > li.nav-cta > a:hover{ background: var(--theme-color); color: #fff !important; }
.main-menu .navigation > li.nav-cta > a::before{ display: none !important; }
/* En el header fijo (sticky) es más bajo: menos margen vertical */
.sticky-header .main-menu .navigation > li.nav-cta > a{ margin: 13px 0 !important; }