/**
 * CIALI Core — animaciones, decoraciones y utilidades.
 * Se aplican con clases desde Elementor (Avanzado → Clases CSS).
 */

/* ==================================================================
   1. ENTRADA AL APARECER EN PANTALLA
   ================================================================== */
.ca-reveal{
  opacity:0;
  transform:translateY(38px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),
             transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.ca-reveal--left  { transform:translateX(-46px); }
.ca-reveal--right { transform:translateX(46px); }
.ca-reveal--zoom  { transform:scale(.92); }
.ca-reveal--up    { transform:translateY(60px); }

.ca-reveal.ca-visible{
  opacity:1;
  transform:none;
}

/* Retardos escalonados */
.ca-delay-1{ transition-delay:100ms; }
.ca-delay-2{ transition-delay:200ms; }
.ca-delay-3{ transition-delay:300ms; }
.ca-delay-4{ transition-delay:400ms; }
.ca-delay-5{ transition-delay:500ms; }

/* Dentro del editor de Elementor todo debe verse siempre */
.ciali-editando .ca-reveal{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion: reduce){
  .ca-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* En pantallas pequeñas las entradas laterales pasan a verticales: el
   desplazamiento horizontal previo a la animación asomaba fuera del ancho. */
@media (max-width:1024px){
  .ca-reveal--left, .ca-reveal--right{ transform:translateY(32px); }
}

/* ==================================================================
   2. MEDIALUNA DEL ISOLOGO BAJO EL TÍTULO  (clases ca-dots / ca-dots--centro)
   Sustituye a los tres puntos del sistema de referencia (06-10-2026): la
   medialuna celeste que acoge la elipse amarilla del isologo de CIALI.
   Los colores salen de las variables globales (--ca-secondary, --ca-accent).
   Caja de 44 × 20 px; la elipse (15 × 9) se posa dentro del cuenco.
   ================================================================== */
.ca-dots .elementor-heading-title{ position:relative; padding-bottom:32px; }
.ca-dots .elementor-heading-title::before{
  content:''; position:absolute; left:0; bottom:2px;
  width:44px; height:20px;
  background:var(--ca-secondary,#35AEE2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath d='M1 2C4 14 18 20 30 19C38 18 43 12 43 6C43 3 41 1 39 1C40 9 33 14 24 14C14 14 6 9 1 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath d='M1 2C4 14 18 20 30 19C38 18 43 12 43 6C43 3 41 1 39 1C40 9 33 14 24 14C14 14 6 9 1 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ca-dots .elementor-heading-title::after{
  content:''; position:absolute; left:18.5px; bottom:10.5px;
  width:15px; height:9px; border-radius:50%;
  background:var(--ca-accent,#FFEF00);
  /* filo celeste muy fino: la elipse amarilla se distingue también sobre blanco */
  box-shadow:0 0 0 1px rgba(53,174,226,.35);
  transition:transform .7s cubic-bezier(.2,.7,.2,1) .45s, opacity .7s ease .45s;
}
/* Variante centrada */
.ca-dots--centro .elementor-heading-title::before{ left:50%; margin-left:-22px; }
.ca-dots--centro .elementor-heading-title::after{ left:50%; margin-left:-3.5px; }

/* Entrada: la elipse cae en la medialuna cuando el título aparece */
.ca-dots.ca-reveal:not(.ca-visible) .elementor-heading-title::after{ transform:translateY(-9px); opacity:0; }
.ciali-editando .ca-dots .elementor-heading-title::after{ transform:none !important; opacity:1 !important; }
@media (prefers-reduced-motion: reduce){
  .ca-dots .elementor-heading-title::after{ transition:none; transform:none !important; opacity:1 !important; }
}

/* ==================================================================
   3. BLOQUE NUMÉRICO
   ================================================================== */
.ca-numero{ position:relative; }
.ca-numero__cifra{
  display:block;
  font-family:"Fira Sans", system-ui, sans-serif;
  font-size:64px; line-height:1; font-weight:800;
  color:var(--ca-primary,#005598);
  letter-spacing:-1px;
}
.ca-numero__sufijo{
  font-size:.5em; font-weight:700; margin-left:4px;
  color:var(--ca-secondary,#35AEE2);
}
.ca-numero__etiqueta{
  display:block; margin-top:8px;
  font-family:"Fira Sans", system-ui, sans-serif;
  font-size:15px; line-height:1.5; color:var(--ca-muted,#63707E);
}
.ca-numero--claro .ca-numero__cifra{ color:#fff; }
.ca-numero--claro .ca-numero__etiqueta{ color:#B9C7D4; }
.ca-numero--linea{ padding-left:20px; }
.ca-numero--linea::before{
  content:''; position:absolute; left:0; top:4px; bottom:12px; width:3px;
  border-radius:2px; background:var(--ca-secondary,#35AEE2);
}
@media (max-width:767px){
  .ca-numero__cifra{ font-size:46px; }
}

/* ==================================================================
   4. CABECERA COMPACTA AL BAJAR
   ================================================================== */
.ca-header--sticky{
  position:sticky; top:0; z-index:100;
  transition:box-shadow .35s ease, padding .35s ease;
}
.ca-header--compacta{
  box-shadow:0 6px 28px rgba(27,31,45,.12);
}
.ca-header--compacta .elementor-widget-theme-site-logo img,
.ca-header--compacta .elementor-widget-image img{
  transition:max-width .35s ease;
  max-width:128px;
}

/* ==================================================================
   5. LEVE INCLINACIÓN AL PASAR EL RATÓN
   ================================================================== */
.ca-tilt{ transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.ca-tilt:hover{ transform:translateY(-8px) rotate(-.4deg); }

/* ==================================================================
   6. UTILIDADES DE COMPOSICIÓN
   ================================================================== */
/* Caja montada sobre la sección anterior */
.ca-montado{ margin-top:-70px !important; position:relative; z-index:6; }
.ca-montado--sm{ margin-top:-40px !important; position:relative; z-index:6; }
@media (max-width:1024px){ .ca-montado{ margin-top:-50px !important; } }
@media (max-width:767px){
  .ca-montado, .ca-montado--sm{ margin-top:-34px !important; }
}

/* Retícula de puntos como fondo de sección */
.ca-puntos{ position:relative; }
.ca-puntos::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle, var(--ca-dot,#C9D2E0) 1px, transparent 1.6px);
  background-size:20px 20px;
}
.ca-puntos > *{ position:relative; z-index:1; }

/* Franja diagonal inferior */
.ca-diagonal{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%); }
@media (max-width:767px){ .ca-diagonal{ clip-path:none; } }

/* Botón en forma de píldora, como el sistema de referencia */
.ca-pill .elementor-button{ border-radius:30px !important; padding-left:44px; padding-right:44px; }

/* ==================================================================
   TESTIMONIOS (widget ciali-testimonios)
   Estructura; colores, tipografías, relleno y sombra son controles del widget.
   ================================================================== */
.ca-testimonios{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
  align-items:stretch;
}
.ca-testimonio{
  margin:0;
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border-radius:6px;
  padding:40px 34px 36px;
  box-shadow:0 0 50px rgba(27,31,45,.1);
}
.ca-testimonio__comillas{ width:28px; height:28px; color:#E8F4FB; flex:0 0 auto; margin-bottom:6px; }
.ca-testimonio__texto{ margin:0; padding:0; border:0; quotes:none; }
.ca-testimonio__texto p{ margin:0 0 .8em; }
.ca-testimonio__texto p:last-child{ margin-bottom:0; }
/* Distancias medidas sobre las tarjetas anteriores (texto→nombre 55 px,
   nombre→empresa 35 px, empresa→borde 62 px); el tema pone figcaption en cursiva */
.ca-testimonio__autor{ display:flex; align-items:center; gap:14px; margin:15px 0 17px; font-style:normal; }
.ca-testimonio__foto{
  width:56px; height:56px; flex:0 0 56px;
  border-radius:50%; object-fit:cover;
}
.ca-testimonio__datos{ display:flex; flex-direction:column; gap:16px; }
.ca-testimonio__nombre, .ca-testimonio__empresa{ display:block; }
@media (max-width:1024px){ .ca-testimonios{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:767px){ .ca-testimonio{ padding:30px 24px 28px; } }

/* Aviso dentro del editor cuando un repetidor está vacío */
.ca-socios-vacio{
  margin:0; padding:22px; text-align:center;
  border:1px dashed var(--ca-border,#DFE6EE); border-radius:6px;
  color:var(--ca-muted,#63707E); font-size:14px;
}

/* ==================================================================
   GALERÍA DE EMPRESAS ASOCIADAS
   ================================================================== */
.ca-socios{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}
.ca-socio{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:#fff; padding:18px;
  border:1px solid var(--ca-border,#DFE6EE); border-radius:var(--ca-radius-sm,6px);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ca-socio:hover{
  border-color:var(--ca-secondary,#35AEE2);
  box-shadow:0 0 34px rgba(27,31,45,.12);
  transform:translateY(-4px);
}
.ca-socio__enlace{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; text-decoration:none;
}
.ca-socio__img{
  width:100%; height:115px;
  object-fit:contain;
  transition:transform .35s ease;
}
.ca-socio:hover .ca-socio__img{ transform:scale(1.04); }

/* Nombre de la empresa, al pasar el ratón */
.ca-socio__nombre{
  position:absolute; left:0; right:0; bottom:0;
  padding:7px 10px;
  font-size:11px; line-height:1.3; font-weight:600; text-align:center;
  color:#fff; background:rgba(0,43,77,.92);
  border-radius:0 0 var(--ca-radius-sm,6px) var(--ca-radius-sm,6px);
  opacity:0; transform:translateY(100%);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.ca-socio:hover .ca-socio__nombre,
.ca-socio:focus-within .ca-socio__nombre{ opacity:1; transform:translateY(0); }

/* Lupa para ver el logotipo original */
/* El kit de Elementor estiliza todos los botones con `.elementor-kit-N button`,
   que es más específico que una sola clase: su relleno inflaba la lupa a 64x32
   y aplastaba el icono a 0 de ancho. Por eso se cualifica con el contenedor. */
.ca-socio .ca-socio__lupa{
  position:absolute; top:8px; right:8px; z-index:2;
  box-sizing:border-box;
  width:30px; height:30px; min-width:30px; min-height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  color:#fff; background:var(--ca-primary,#005598);
  opacity:0; transform:scale(.8);
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
/* El icono es un hijo flexible: sin esto se encoge hasta desaparecer. */
.ca-socio .ca-socio__lupa svg{
  width:16px; height:16px; flex:0 0 auto; display:block; fill:currentColor;
}
.ca-socio:hover .ca-socio__lupa,
.ca-socio:focus-within .ca-socio__lupa{ opacity:1; transform:scale(1); }
.ca-socio .ca-socio__lupa:hover{ background:var(--ca-secondary,#35AEE2); }
.ca-socio .ca-socio__lupa:focus-visible{ opacity:1; transform:scale(1); }

@media (max-width:1024px){ .ca-socios{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:767px){
  .ca-socios{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .ca-socio{ padding:12px; }
  .ca-socio__img{ height:90px; }
  /* En táctil no hay "pasar el ratón": nombre y lupa siempre visibles */
  .ca-socio__nombre{ opacity:1; transform:none; position:static; margin-top:8px;
    background:transparent; color:var(--ca-muted,#63707E); padding:0; }
  .ca-socio .ca-socio__lupa{ opacity:1; transform:none; }
  .ca-socio__enlace{ flex-direction:column; }
}

/* ==================================================================
   VISOR DE IMAGEN
   ================================================================== */
.ca-visor{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:30px;
  background:rgba(0,27,48,.92);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.ca-visor--abierto{ opacity:1; visibility:visible; }
.ca-visor__caja{
  margin:0; max-width:min(820px, 92vw); max-height:86vh;
  background:#fff; border-radius:10px; padding:28px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.ca-visor__img{
  max-width:100%; max-height:62vh; object-fit:contain; display:block;
}
.ca-visor__pie{
  font-family:"Fira Sans", system-ui, sans-serif;
  font-size:15px; font-weight:600; color:var(--ca-text,#1D2B3A); text-align:center;
}
.ca-visor .ca-visor__cerrar{
  position:absolute; top:18px; right:22px;
  box-sizing:border-box;
  width:44px; height:44px; min-width:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; line-height:1; cursor:pointer;
  color:#fff; background:transparent; border:0; border-radius:50%;
  transition:background .25s ease;
}
.ca-visor .ca-visor__cerrar:hover{ background:rgba(255,255,255,.15); }
@media (max-width:767px){
  .ca-visor{ padding:16px; }
  .ca-visor__caja{ padding:18px; }
}

/* ==================================================================
   7. CARRUSEL DEL HERO (propio)
   Cada diapositiva es un contenedor de Elementor con la clase .ca-slide,
   por lo que su contenido se edita con los widgets habituales.
   Sustituye al widget de diapositivas, cuya caja de texto colapsaba.
   ================================================================== */
.ca-slider{
  position:relative; overflow:hidden;
  min-height:680px;
}
.ca-slider .ca-slide{
  position:absolute !important; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s ease, visibility 1s ease, transform 1.2s ease;
  transform:scale(1.04);
  pointer-events:none;
}
.ca-slider .ca-slide--activa{
  opacity:1; visibility:visible; transform:scale(1);
  pointer-events:auto; z-index:2;
}
/* Antes de que arranque el guion, la primera se ve igualmente */
.ca-slider:not(.ca-slider--activo) .ca-slide:first-child{
  opacity:1; visibility:visible; transform:none;
}

/* Puntos */
.ca-slider__puntos{
  position:absolute; left:0; right:0; bottom:28px; z-index:5;
  display:flex; justify-content:center; gap:10px;
}
.ca-punto{
  width:10px; height:10px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.ca-punto:hover{ background:rgba(255,255,255,.75); }
.ca-punto--activo{ background:var(--ca-secondary,#35AEE2); transform:scale(1.3); }

/* Flechas */
.ca-slider__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; padding:0;
  border:1px solid rgba(255,255,255,.35); border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  font-size:30px; line-height:1; cursor:pointer;
  transition:background .3s ease, border-color .3s ease;
}
.ca-slider__flecha:hover{
  background:var(--ca-secondary,#35AEE2); border-color:var(--ca-secondary,#35AEE2);
}
.ca-slider__flecha--ant{ left:26px; }
.ca-slider__flecha--sig{ right:26px; }

@media (max-width:767px){
  .ca-slider{ min-height:520px; }
  .ca-slider__flecha{ width:40px; height:40px; font-size:24px; }
  .ca-slider__flecha--ant{ left:10px; }
  .ca-slider__flecha--sig{ right:10px; }
  .ca-slider__puntos{ bottom:18px; }
}

/* En el editor se muestran apiladas para poder trabajar con todas */
.ciali-editando .ca-slider .ca-slide{
  position:relative !important; opacity:1 !important; visibility:visible !important;
  transform:none !important; margin-bottom:12px;
}
.ciali-editando .ca-slider{ min-height:0; }

/* ==================================================================
   8. TÍTULO SOLO PARA LECTORES DE PANTALLA Y BUSCADORES
   El carrusel del hero compone sus títulos como <div>, así que la página
   necesita un H1 real. Este se lee y se indexa, pero no se ve.
   ================================================================== */
.ca-sr-only, .ca-sr-only .elementor-heading-title{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
/* Al tabular sí se muestra, para no dejar a nadie sin referencia */
.ca-sr-only:focus-within .elementor-heading-title{
  position:static !important; width:auto; height:auto; margin:0;
  clip:auto; clip-path:none; white-space:normal;
}