/*
Theme Name: Club Arrabi Child
Theme URI: https://clubarrabi.com/
Template: kadence
Author: Sirope Agencia Creativa
Author URI: https://sirope.es/
Description: Kadence Theme Child is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter temples that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 0.0.7
Updated: 2025-09-16 17:12:51
*/


/* ==========================================================================
   1. VARIABLES Y TIPOGRAFÍA DINÁMICA (Optimizado para Laptop 1366px)
   ========================================================================== */
:root {
  /* Explicación del nuevo cálculo:
     Usamos un valor central ligeramente más alto para que en 1366px 
     el texto tenga cuerpo y no se "encoja" demasiado.
  */
  --h1-size: clamp(40px, 6.5vw, 80px) !important;   /* En 1366px -> ~88px */
  --h2-size: clamp(34px, 4.5vw, 72px) !important;    /* En 1366px -> ~61px */
  --h3-size: clamp(24px, 3.2vw, 28px) !important;    /* En 1366px -> ~43px */
  --p-size:  clamp(17px, 1.1vw, 18px) !important;    /* En 1366px -> ~18px */
  
  /* Colores Corporativos */
  --color-primary: #ed3453;
  --color-accent:  #f4accc;
  --color-dark:    #062a39;
  --color-selection: #ffe7db;
}

/* Aplicación global con mejor control de legibilidad */
h1 { font-size: var(--h1-size); line-height: 0.9; letter-spacing: -0.02em; }
h2 { font-size: var(--h2-size); line-height: 1.1;  letter-spacing: -0.01em; }
h3 { font-size: var(--h3-size); line-height: 1.2; }
p  { font-size: var(--p-size);  line-height: 1.55; }

/* Ajuste específico para que en pantallas tipo Laptop no haya saltos de línea huérfanos */
@media (max-width: 1400px) {
  :root {
    --h1-size: clamp(36px, 6vw, 72px) !important;
    --h2-size: clamp(32px, 4.2vw, 64px) !important;
  }
}

/* Tablet / Mobile - Ajuste de seguridad */
@media (max-width: 768px) {
  :root {
    --h1-size: clamp(34px, 10vw, 54px) !important;
    --h2-size: clamp(28px, 8vw, 42px) !important;
    --p-size: 17px !important;
  }
}


/* ==========================================================================
   2. SCROLLBAR Y RESET (Lenis Compatible)
   ========================================================================== */
html {
  box-sizing: border-box;
  overflow-x: hidden;
}

*, *:before, *:after { box-sizing: inherit; }

@media (hover: hover) {
  ::-webkit-scrollbar { width: 10px; background: #f1f1f1; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
  }
}

::selection { background-color: var(--color-selection); }

/* Lenis Fixes */
html.lenis { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }


/* ==========================================================================
   4. SLIDER & COUNTER (Splide)
   ========================================================================== */
.splide__arrow {
  background: white !important;
  width: 50px !important;
  height: 50px !important;
  opacity: 1 !important;
  transition: transform 0.3s ease;
}

.splide__arrow svg path { fill: var(--color-primary); }
.splide__arrow:hover { transform: scale(1.1); }

.slider-counter {
  display: inline-flex;
  align-items: baseline;
  color: white;
  font-size: 20px;
  margin: 0 15px;
}

.slider-counter .active-slide {
  font-size: 36px;
  font-weight: 900;
  color: var(--color-primary);
  margin-right: 4px;
}

/* ==========================================================================
   5. ACORDEONES (Custom Arrows & AOS Fix)
   ========================================================================== */
[data-aos] { pointer-events: auto !important; }

.acc-arr .kt-blocks-accordion-icon-trigger::before,
.acc-arr .kt-blocks-accordion-icon-trigger::after {
  content: none !important;
}

.acc-arr .kt-blocks-accordion-icon-trigger {
  width: 45px;
  height: 45px;
  background: url("data:image/svg+xml,%3Csvg width='57' height='57' viewBox='0 0 57 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.5 24L28.5 53L2.5 24M28.5 53V3' stroke='%23F4ACCC' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.4s ease;
}

.acc-arr button[aria-expanded="true"] .kt-blocks-accordion-icon-trigger {
  transform: rotate(180deg);
}

/* Estilo Cross (+) */
.acc-cross .kt-blocks-accordion-icon-trigger:before,
.acc-cross .kt-blocks-accordion-icon-trigger:after {
  background: var(--color-accent) !important;
}

.acc-cross .kt-accodion-icon-style-basic .kt-blocks-accordion-icon-trigger:before,
.acc-cross .kt-accodion-icon-style-basic .kt-blocks-accordion-icon-trigger:after {
  display: inline-block;
  width: 20px;
  height: 2px;
	color:white;
}



/* Quita el borde inferior y endereza las esquinas de abajo al abrirse */
.wp-block-kadence-pane .kt-blocks-accordion-header.kt-accordion-panel-active {
    border-bottom: 0px transparent !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

 

/* ==========================================================================
   6. PRECIOS Y SÍMBOLO EURO (Fix Tipográfico)
   ========================================================================== */
/* Precios / Superscripts */


	h3 sup,
	h3 s {
	  font-size: 32px;
	  color: #f4accc;
		font-weight: 500;
	  margin-right: 3px;
	}


	h3 sup {
	  top: -0.99em;
	}



	h3 sub {
	  margin-left: 5px;
	  font-size: 36px;
	  line-height: 1em;
	  bottom: 0em;
	}



@media screen and (max-width:960px) {
	h3 sup,
	h3 s {
		font-size: 20px;
	}
	
	h3 sub {

	  font-size: 28px;
	
	}
	
}

/* Forzado de glifo para Euro */
h3, sup, span.euro {
  font-family: "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   7. FOOTER Y EXTRAS
   ========================================================================== */
.site-footer-row-container-inner {
  border-radius: 20px 20px 0 0;
  padding: 40px clamp(20px, 5vw, 80px);
}

#footer-menu li a {
  display: flex;
  justify-content: space-between; /* Texto a la izquierda, flecha a la derecha */
  align-items: center;
  padding: 15px 0;
  text-transform: uppercase;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 0.3s ease;
}

#footer-menu li a::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  /* SVG en color blanco (stroke='white') */
  background: url("data:image/svg+xml,%3Csvg width='57' height='57' viewBox='0 0 57 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.5 24L28.5 53L2.5 24M28.5 53V3' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  
  /* Rotación antihoraria y ajuste de posición inicial */
  transform: rotate(-90deg)  translateY(-5px);
  opacity: 0.5; /* Opacidad reducida por defecto */
  transition: transform 0.4s ease, opacity 0.4s ease;
  flex-shrink: 0;
}

/* Estado Hover */
#footer-menu li a:hover {
  opacity: 0.8; /* Opcional: el texto también cambia un poco */
}

#footer-menu li a:hover::after {
  opacity: 1; /* Flecha brilla al máximo */
  transform: rotate(-90deg) translateY(0px); /* Se desplaza hacia la derecha (su "arriba" tras rotar) */
}


/* Header Blur */
.item-is-stuck {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.85) !important;
}

/* Botón Pulse */
.btn-glow {
  box-shadow: 0 0 0 0 rgba(237, 52, 83, 0.4);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(237, 52, 83, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(237, 52, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(237, 52, 83, 0); }
}


.cta-precios .kt-blocks-accordion-icon-trigger:before, .cta-precios  .kt-blocks-accordion-icon-trigger:after {
    background: white!important;
}



#sec-faq  .kt-blocks-accordion-icon-trigger:before, #sec-faq  .kt-blocks-accordion-icon-trigger:after {
    background: black !important;
}
 


#colophon .footer-navigation .footer-menu-container > ul   {
   display:flex;
	flex-direction:column
}





 #sec-destacado 
.kt-blocks-accordion-title {
    display: flex !important;
    align-items: flex-start; 
    gap: 16px;               
    text-align: left;       
}

#sec-destacado 
.kt-blocks-accordion-title strong ,
#sec-destacado 
.kt-blocks-accordion-title em {
	font-weight: 500;
	font-style: normal !important;
}