/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

:root{
  --white:#fdfdf9;
  --black:#202326;
  --neutral:#585757;

  --brand-orange:#F86200;
  --brand-teal:#30A5BF;
  --text-color:#0b0b0b;
  --radius-pill:9999px;
  
  --blue-800:#004251;
  
  --aut-blue:#0D5673;
  
  --polar-blue:#04303D;

  --teal-900:#1A4E5F;
  --teal-700:#0E7283;  
  --teal-500:#1290A8;
  --teal-300:#66C8D6;
  --teal-200:#dff3f6;
  
  --light-lake:#e8f5f8;

  --orange-700:#6E2C00;
  --orange-600:#D75500; /* solid */
  --orange-500:#FF9C32; /* border/text */
  --orange-300:#FFB66A; /* hover solid */
  --orange-200:#FDD8BF;
  --orange-100:#FFDCA5;/* hover outline */
  
  --purple:#A075FD;
}

/* ===== Typography ===== */

h1{
  font-size:clamp(2.2em,3.2vw + 1rem,3.3em);
  line-height:1.1;
  font-weight:700;
  
}
h2{
  font-size:clamp(2em,2.6vw + 1rem,2.4em);
  line-height:1.15;
  font-weight:700;

}
h3{
  font-size:clamp(1.5em,2.5vw + .8rem,1.8em);
  line-height:1.1;
  font-weight:700;
 
}
h4{ font-size:1.25em; line-height:1.2; font-weight:700; }
h5{ font-size:1.125em; line-height:1.25; font-weight:700; }

/* ===== Accent/Span ===== */
.accent{ color:var(--brand-orange); }

p{
font-size:16px;
}

/* ===== Base ===== */
.ca-ilustration{
object-fit:contain !important;
}

.btn{
  display:inline-block;
  padding:.75em 1.5em;
  font-size:1em;
  line-height:1;
  border-radius:16px;
  border:2px solid transparent;
  text-decoration:none;
  cursor:pointer;
  max-height:fit-content;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, background-position .25s ease;
}
.btn:focus-visible{ outline:2px solid color-mix(in oklab, var(--teal-500), #fff 40%); outline-offset:2px; }


/* ===== Solid Buttons ===== */

/* ===== Autumn Blue ===== */
.btn--aut-blue{
  background:var(--aut-blue);
  border-color:var(--aut-blue);
  color:var(--white);
}
.btn--aut-blue:hover{
  background: transparent;
  border-color:var(--aut-blue);
  color: var(--aut-blue);
}

/* ===== Polar Blue ===== */
.btn--polar-blue{
  background:var(--polar-blue);
  border-color:var(--polar-blue);
  color:var(--white);
}
.btn--polar-blue:hover{
  background: transparent;
  border-color:var(--polar-blue);
  color: var(--polar-blue);
}

/* ===== Teal ===== */
.btn--teal{
  background:var(--teal-500);
  border-color:var(--teal-500);
  color:var(--white);
}
.btn--teal:hover{
  background: transparent;
  border-color:var(--teal-500);
  color: var(--teal-500);
}

/* ===== White Text with a Solid Blue Button ===== */
.btn--teal-white-text{
  background:var(--teal-500);
  border-color:var(--teal-500);
  color:var(--white);
}
.btn--teal-white-text:hover{
  background: transparent;
  border-color:var(--teal-500);
  color:var(--white);
}

/* ===== Orange ===== */
.btn--orange{
  background:var(--orange-600);
  border-color:var(--orange-600);
  color:var(--white);
}
.btn--orange:hover{ background:transparent; color:var(--orange-600); border-color:var(--orange-600); }

/* ===== White Text with an Solid Orange Button ===== */
.btn--orange-white-text{
  background:var(--orange-600);
  border-color:var(--orange-600);
  color:var(--white);
}
.btn--orange-white-text:hover{ background:transparent; color:var(--white); border-color:var(--orange-600); }


/* ===== Purple ===== */
.btn--purple{
  background:var(--purple);
  border-color:var(--purple);
  color:var(--white);
}
.btn--purple:hover{ background:transparent; color:var(--purple); border-color:var(--purple); }


/* ===== Outline Buttons ===== */

/* ===== Orange ===== */
.btn--outline-orange{
  background:transparent;
  color:var(--orange-600);
  border-color:var(--orange-600);
}
.btn--outline-orange:hover{
  background:var(--orange-600);
  color:var(--white);
  border-color:var(--orange-600);
}

/* ===== White Text with an Orange Outline Button ===== */
.btn--outline-orange-white-text{
  background:transparent;
  color:var(--white);
  border-color:var(--orange-600);
}
.btn--outline-orange-white-text:hover{
  background:var(--orange-600);
  color:var(--white);
  border-color:var(--orange-600);
}

/* ===== Autumn Blue ===== */
.btn--outline-aut-blue{
  background:Transparent;
  border-color:var(--aut-blue);
  color:var(--aut-blue);
}
.btn--outline-aut-blue:hover{
  background: var(--aut-blue);
  border-color:var(--aut-blue);
  color: var(--white);
}

/* ===== Polar Blue ===== */
.btn--outline-polar-blue{
  background:transparent;
  border-color:var(--polar-blue);
  color:var(--polar-blue);
}
.btn--outline-polar-blue:hover{
  background: var(--polar-blue);
  border-color:var(--polar-blue);
  color: var(--white);
}

/* ===== Teal ===== */
.btn--outline-teal{
  background:transparent;
  color:var(--teal-500);
  border-color:var(--teal-500);
}
.btn--outline-teal:hover{
  background: var(--teal-500);
  color:var(--white);
  border-color:var(--teal-500);
}

/* ===== White Text with Blue Outline Button ===== */
.btn--outline-teal-white-text{
  background:transparent;
  color:var(--white);
  border-color:var(--teal-500);
}
.btn--outline-teal-white-text:hover{
  background: var(--teal-500);
  color:var(--white);
  border-color:var(--teal-500);
}

/* ===== Purple ===== */
.btn--outline-purple{
  background:transparent;
  border-color:var(--purple);
  color:var(--purple);
}
.btn--outline-purple:hover{ background:var(--purple); color:var(--white); border-color:var(--purple); }

/* ===== Text Buttons ===== */

/* ===== Orange ===== */
.btn--text-orange{
  background: transparent;
  color: var(--orange-600);
  padding-left: 0px;
  padding-right: 0px;
}
.btn--text-orange:hover{
  color: var(--orange-700);
}

/* ===== Teal ===== */
.btn--text-teal{
  background: transparent;
  color: var(--teal-500);
  padding-left: 0px;
  padding-right: 0px;  
}

.btn--text-teal:hover{
  color: var(--blue-800);
}

/* ===== Black ===== */
.btn--text-black{
  background: transparent;
  color: var(--black);
  padding-left: 0px;
  padding-right: 0px;
}
.btn--text-black:hover{
  color: var(--neutral);
}

/* ===== Arrow SVG for all text buttons ===== */
/* Text Buttons */
.btn--text-orange,
.btn--text-teal,
.btn--text-black {
  background: transparent;
}

.btn--text-orange::after,
.btn--text-teal::after,
.btn--text-black::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 8px;
  vertical-align: middle; 
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M278.6 233.4 150.6 105.4c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L210.7 232H24c-13.3 0-24 10.7-24 24s10.7 24 24 24h186.7l-94 92.7c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l128-128c9.4-9.4 9.4-24.6 0-34z'/></svg>") no-repeat center;
  -webkit-mask-size: contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M278.6 233.4 150.6 105.4c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L210.7 232H24c-13.3 0-24 10.7-24 24s10.7 24 24 24h186.7l-94 92.7c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l128-128c9.4-9.4 9.4-24.6 0-34z'/></svg>") no-repeat center;
  mask-size: contain;
  background-color: currentColor;
  transition: transform 0.2s ease;
}

/* Hover */
.btn--text-orange:hover::after,
.btn--text-teal:hover::after,
.btn--text-black:hover::after {
  transform: translateX(3px);
}

.ca-margin-global-section{
padding:clamp(4em,4vw,6em) 0;
}

/* ===== Gradients ===== */

/* ===== Primary Gradients ===== */|

/*name: Efecte Polar Blue & M42 Black */
.gradient-blue-black{
background:linear-gradient(90deg,rgba( 19 ,47 ,60 ,1),rgba( 32 , 35 , 38,1));
}
.gradient-blue-black2{
background:linear-gradient(90deg,rgba( 19 ,47 ,60 ,1),rgba( 32 , 35 , 38,1));
}
/*name: Polar Blue & Efecte Autumn Blue*/
.gradient-blue{
background:linear-gradient(90deg,rgba(  39 , 85 , 112,1),rgba( 19 ,47 ,60,1));
}
/*name: Light Lake & White*/
.gradient-blue-light{
background:linear-gradient(90deg,rgba( 232, 245 , 248,1),rgba(253  ,253  ,249,1));
}

/* ===== Secondary Gradients ===== */  
/*name: Efecte Blue & Autumn Blue*/
.gradient-autumn-blue{
background:linear-gradient(90deg,rgba(  48 , 164 , 190, 1),rgba( 39 , 85 , 112,1));
}
/*name: Efecte Blue & Light Lake*/
.gradient-blue-lake{
background:linear-gradient(90deg,rgba(  48 , 164 , 190, 1),rgba( 232 , 245 , 248,1));
}
/*name: Seville Orange & Efecte Light Sunset*/
.gradient--orange{
background:linear-gradient(90deg, rgba(248, 98, 0,   0.85), rgba(253, 241, 248, 1));
}
/*name: Light Lake & Efecte Blue & Blood Orange*/
.gradient-light-blue-orange{
background:linear-gradient(90deg,rgba( 232 , 245 , 248,1),rgba(  48 , 164 , 190, 1),rgba( 248, 98, 0, 1));
}


swiper-container {
  --swiper-pagination-color: var(--orange-500);       /* dot activo */
  --swiper-pagination-bullet-inactive-color: #C7CDD3; /* dots inactivos */
  --swiper-pagination-bullet-inactive-opacity: 0.5;   /* opacidad inactivos */
  --swiper-pagination-bullet-size: 12px;               /* tamaño (opcional) */
  --swiper-pagination-bottom: 12px;                   /* margen inferior (opcional) */
}

/* =========================================================
=  Play/Pause Button
========================================================= */

.ca-swiper-toggle, .ca-slider-button-toggle, .ca-button-hero-toggle, .ca-swiper-logos-toggle {
  position: absolute;
  left: 16px;
  bottom: 8px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--orange-200);
  color: var(--orange-700); /* text/icon color */
  cursor: pointer;
  z-index: 10;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

/* Icons take the color from parent */
.ca-swiper-toggle svg,
.ca-slider-button-toggle svg,
.ca-button-hero-toggle svg,
.ca-swiper-logos-toggle svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ca-swiper-toggle:hover, .ca-slider-button-toggle:hover, .ca-button-hero-toggle:hover, .ca-swiper-logos-toggle:hover {
  background: var(--orange-700);
  color: var(--white); /* changes svg color */
}

.ca-swiper-toggle:focus, .ca-slider-button-toggle:focus, .ca-button-hero-toggle:focus, .ca-swiper-logos-toggle:focus {
  outline: 2px solid var(--orange-700);
  outline-offset: 2px;
}

/* swap icons depending on state */
.ca-swiper-toggle .icon-play,
.ca-slider-button-toggle .icon-play,
.ca-button-hero-toggle .icon-play,
.ca-swiper-logos-toggle .icon-play { display: none; }

.ca-swiper-toggle.is-paused .icon-play,
.ca-slider-button-toggle.is-paused .icon-play,
.ca-button-hero-toggle.is-paused .icon-play,
.ca-swiper-logos-toggle.is-paused .icon-play { display: block; }

.ca-swiper-toggle.is-paused .icon-pause,
.ca-slider-button-toggle.is-paused .icon-pause,
.ca-button-hero-toggle.is-paused .icon-pause,
.ca-swiper-logos-toggle.is-paused .icon-pause { display: none; }

/* ===== Responsive ===== */  

@media (max-width: 768px) {
  .btn{
    display:inline-block;
    padding:10px 18px;
    font-size:0.875em;
  }
   .ca-swiper-toggle, .ca-slider-button-toggle, .ca-button-hero-toggle, .ca-swiper-logos-toggle  {
    left: 20px;
    bottom: 5px;
    width: 35px;
    height: 35px;
  }
}