/* ---------------------------------------------------------------
   Slider de la portada: va pasando servicios, sistemas y novedades.
   Solo lo usa index.php. Se apoya en los estilos de .portada.
   Sin JavaScript se ven todas las diapositivas una debajo de otra;
   con JavaScript (clase .listo) se muestra una y se va rotando.
--------------------------------------------------------------- */

.portada-slider .contenedor{padding-top:3.5rem;padding-bottom:2.2rem;}

/* Un color de fondo por diapositiva. Son capas superpuestas que se
   funden entre sí, porque un degradado no se puede animar directamente.
   Todos son tonos medios: se leen con letra blanca y no son oscuros. */
.fondos{position:absolute;inset:0;}
.fondo{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.fondo.activo{opacity:1;}
.fondo-azul    {background:linear-gradient(160deg,#0b2a5c 0%,#123f8f 45%,#1256c4 100%);}
.fondo-indigo  {background:linear-gradient(160deg,#2a2a86 0%,#3b3fc0 50%,#5a5fe0 100%);}
.fondo-naranja {background:linear-gradient(160deg,#9a3a0a 0%,#bf4d0c 50%,#cf580d 100%);}
.fondo-turquesa{background:linear-gradient(160deg,#0b5a5a 0%,#0f766e 50%,#12877d 100%);}
.fondo-rosa    {background:linear-gradient(160deg,#9d1239 0%,#be1a4a 50%,#d42a58 100%);}
.fondo-violeta {background:linear-gradient(160deg,#4c1d95 0%,#6d2fc4 50%,#8b4be0 100%);}
.fondo-verde   {background:linear-gradient(160deg,#0f5132 0%,#157347 50%,#1a8450 100%);}
.fondo-ciruela {background:linear-gradient(160deg,#5a1a4e 0%,#7a2263 50%,#962f7a 100%);}

/* La etiqueta de arriba del título es un rótulo de texto, igual que los de
   las secciones: sin fondo ni borde, para que no se confunda con un botón. */
.slide .sello{
  background:none;border:0;border-radius:0;padding:0;
  gap:.8rem;margin-bottom:1.1rem;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.slide .sello span.punto{width:1.8rem;height:2px;border-radius:0;background:rgba(255,255,255,.7);}

/* Color de acento de cada diapositiva: lo usa el botón principal. */
.tema-azul    {--acento:#0d3f92;}
.tema-indigo  {--acento:#2f33a8;}
.tema-naranja {--acento:#b34a0b;}
.tema-turquesa{--acento:#0d6b63;}
.tema-rosa    {--acento:#a8133f;}
.tema-violeta {--acento:#5a24a8;}
.tema-verde   {--acento:#136b40;}
.tema-ciruela {--acento:#6a1b58;}

/* El botón principal es blanco con letra del color de la diapositiva;
   así combina con cualquier fondo. */
.slide .boton-primario{background:#fff;color:var(--acento,var(--azul-osc));box-shadow:0 6px 18px rgba(0,0,0,.18);}
.slide .boton-primario:hover{background:rgba(255,255,255,.88);color:var(--acento,var(--azul-osc));}
.slide .bajada{color:rgba(255,255,255,.9);}

.slide{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"texto imagen" "acciones imagen";
  column-gap:3rem;
  align-content:center;
  align-items:center;
}

.slide-texto{grid-area:texto;align-self:end;}
.slide-acciones{grid-area:acciones;align-self:start;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;}
.slide-imagen{grid-area:imagen;margin:0;}
.slide-imagen img{width:100%;height:auto;}
.slide-titulo{
  color:#fff;max-width:22ch;margin:0 0 .5em;
  font-size:clamp(1.9rem,4vw,3rem);
}

/* Las diapositivas van una sobre otra, en la misma celda de una rejilla, y se
   ve una. El alto lo pone el navegador (el de la más alta): no depende de medir
   con JavaScript, así que no se corre al cargar la tipografía o las imágenes.
   Desde el primer instante solo se ve la primera, sin parpadeo mientras carga
   el script. Quien no tiene JavaScript las ve todas, una debajo de otra
   (css/slider-sinjs.css). */
.slides{display:grid;position:relative;}
.slides .slide{
  grid-area:1/1;margin:0;
  opacity:0;visibility:hidden;
}
.slides .slide.activa{opacity:1;visibility:visible;}
/* La que sale se apaga primero y la que entra aparece después: nunca se
   ve el texto de dos diapositivas encimado. */
.slides.listo .slide{transition:opacity .2s ease, visibility 0s linear .2s;}
.slides.listo .slide.activa{transition:opacity .4s ease .2s;}

/* Controles: puntos a la izquierda, flechas y pausa a la derecha. */
.slider-control{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1rem;
  margin-top:2rem;
}
.slider-puntos{display:flex;flex-wrap:wrap;gap:.1rem;}
.slider-punto{
  position:relative;width:1.5rem;height:1.5rem;padding:0;border:0;
  background:transparent;cursor:pointer;
}
.slider-punto::before{
  content:"";position:absolute;top:50%;left:50%;
  width:.7rem;height:.7rem;border-radius:999px;
  background:rgba(255,255,255,.38);
  transform:translate(-50%,-50%);
  transition:width .25s ease, background .25s ease;
}
.slider-punto:hover::before{background:rgba(255,255,255,.7);}
.slider-punto[aria-current="true"]::before{width:1.5rem;background:#fff;}

.slider-botones{display:flex;gap:.5rem;}
.slider-boton{
  width:2.6rem;height:2.6rem;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);
  color:#fff;cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.slider-boton:hover{background:#fff;color:var(--azul-osc);}
.slider-boton svg{width:1rem;height:1rem;fill:currentColor;}
.slider-punto:focus-visible,.slider-boton:focus-visible{outline:2px solid #fff;outline-offset:2px;}

@media (max-width:860px){
  .portada-slider .contenedor{padding-top:2.6rem;padding-bottom:1.6rem;}
  .slides{display:block;}
  .slides .slide{grid-area:auto;position:absolute;top:0;left:0;right:0;}
  .slides .slide.activa{position:relative;}
  .slide{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"texto" "imagen" "acciones";
  }
  .slide-texto{align-self:start;}
  .slide-imagen{margin:1.4rem 0 0;}
  .slide-imagen img{height:190px;object-fit:cover;}
  .slide-imagen img.captura-ui{object-position:left top;}
  .slide-acciones{align-self:start;}
}