@charset "UTF-8";
/*
    Home — rediseño SVENSON 2026
    Author: Vicente Martín | elgrupo

    Medidas de los nodos 3032-2956 (escritorio, marco de 1920 con contenedor de
    1280) y 2665-4866 (móvil, marco de 390).

    La página es una pila de franjas a sangre; lo que se centra es el contenido,
    a 1280, igual que en la cabecera y el pie.

    Cada regla lleva dentro sus propios @include devices(), en vez de juntar
    todo el móvil en un bloque al final: así se ve de un tirón qué hace cada
    pieza en cada tamaño. El corte general es 1023, el del marco de 390 y el
    mismo que el resto del rediseño; la rejilla de servicios usa además 1319,
    767 y 479 para ir quitando columnas.
*/
/*
    Created on : Jan 30, 2024, 10:43:30 AM
    Author     : Vicente Martín <vicente@elgrupo.es>
*/
/*
 * #page-wrapper es un .container-fluid de Bootstrap y trae 15px de calle a cada
 * lado en todo el sitio. Aquí sobran: las franjas de la home van a sangre. Se
 * quitan solo en esta plantilla, no en todo el sitio; de paso el pie deja de
 * tener esos 15px, que tampoco están en su diseño.
 *
 * No se hace con un margen negativo en .sv-home porque entonces cada franja
 * mide 30px más que la ventana y las que llevan calles pequeñas (el banner en
 * móvil) se salen por la izquierda.
 */
.page-template-page-home-2026 #page-wrapper {
  padding-right: 0;
  padding-left: 0;
}

.sv-home {
  /* Base de texto propia: el componente no hereda la del body, que depende
     de qué hoja se imprima la última (Bootstrap o style.css). Es la que tenía
     cuando se maquetó. */
  font-size: 14px;
  line-height: 1.42857143;
  --sv-home-ancho: 1280px;
  --sv-home-negro: #212121;
  --sv-home-rojo: #b01b35;
  --sv-home-apoyo: #b4b4b4;
  --sv-home-offwhite: #f2f2f2;
  --sv-home-transicion: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: Inter, sans-serif;
  color: var(--sv-home-negro);
}

/* ---------------------------------------------------------------------------
   Piezas que se repiten en varias franjas
   --------------------------------------------------------------------------- */
.sv-home__titulo {
  margin: 0;
  color: var(--sv-home-rojo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home__titulo {
    font-size: 18px;
    line-height: 22px;
  }
}

/* El filete que abre la franja del equipo médico y la de las preguntas. */
.sv-home__titulo--filete {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: var(--sv-home-ancho);
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--sv-home-rojo);
}
@media only screen and (max-width: 1023.98px) {
  .sv-home__titulo--filete {
    padding-top: 37px;
  }
}

.sv-home__entradilla {
  max-width: var(--sv-home-ancho);
  margin: 15px auto 0;
  font-size: 16px;
  line-height: 27px;
  text-align: center;
}
.sv-home__entradilla p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home__entradilla {
    max-width: 344px;
    margin-top: 18px;
  }
}

.sv-home__boton {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 39px;
  padding: 10px 11px;
  border-radius: 34px;
  background: var(--sv-home-rojo);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: background var(--sv-home-transicion);
  transition: background var(--sv-home-transicion);
}
.sv-home__boton:hover, .sv-home__boton:focus {
  background: var(--sv-home-negro);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   1 · Vídeo de cabecera (nodos 3032-3229 y 2691-6425)
   --------------------------------------------------------------------------- */
.sv-home-hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 492px;
  /* El filete que cierra la cabecera por abajo. */
  border-top: 1px solid var(--sv-home-rojo);
  overflow: hidden;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-hero {
    /* 1 · Vídeo */
    height: 220px;
  }
}

.sv-home-hero__fondo {
  position: absolute;
  inset: 0;
}
.sv-home-hero__fondo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* El encuadre del diseño se apoya en la parte de abajo de la foto. */
  -o-object-position: center bottom;
     object-position: center bottom;
}

.sv-home-hero__velo {
  position: absolute;
  inset: 0;
  background: rgba(33, 33, 33, 0.21);
}

.sv-home-hero__textos {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  max-width: var(--sv-home-ancho);
  margin: 0 auto;
  padding: 0 34px 26px;
  z-index: 2;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-hero__textos {
    padding: 0 11px 12px;
  }
}

.sv-home-hero__titulo {
  max-width: 290px;
  margin: 0 0 10px;
  color: var(--sv-home-rojo);
  font-size: 30px;
  font-weight: 700;
  line-height: 34px;
  text-transform: uppercase;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-hero__titulo {
    max-width: 171px;
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 20px;
  }
}

/* Es un h2: hay que deshacer lo que el tema le pone a los encabezados. */
.sv-home-hero__entradilla {
  max-width: 337px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 27px;
  font-weight: 400;
  line-height: 34px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-hero__entradilla {
    max-width: 199px;
    font-size: 16px;
    line-height: 20px;
  }
}

.sv-home-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  padding: 0;
  z-index: 3;
  border: 0;
  /* style.css le pone fondo gris a todo button:focus; aquí el botón es solo
     el dibujo. */
  background: none;
  line-height: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-transition: -webkit-transform var(--sv-home-transicion);
  transition: -webkit-transform var(--sv-home-transicion);
  transition: transform var(--sv-home-transicion);
  transition: transform var(--sv-home-transicion), -webkit-transform var(--sv-home-transicion);
}
.sv-home-hero__play:hover, .sv-home-hero__play:focus {
  background: none;
}
.sv-home-hero__play:hover {
  -webkit-transform: translate(-50%, -50%) scale(1.06);
          transform: translate(-50%, -50%) scale(1.06);
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-hero__play {
    width: 74px;
    height: 74px;
  }
}

.sv-home-hero__play-icono {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 100%;
}
@media (max-width: 480px) {
  .sv-home-hero__play-icono {
    background-color: transparent;
  }
}

/* ---------------------------------------------------------------------------
   2 · Datos (nodos 3032-3161 y 2878-540)

   El icono va montado a caballo del borde superior de la caja: sobresale 47
   de los 74 que mide, así que lo que se solapa es el margen negativo.
   --------------------------------------------------------------------------- */
.sv-home-datos {
  padding: 47px 20px 0;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos {
    /* 2 · Datos */
    padding: 20px 8px 0;
  }
}

.sv-home-datos__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--sv-home-ancho);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    -webkit-column-gap: 19px;
       -moz-column-gap: 19px;
            column-gap: 19px;
    row-gap: 12px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.sv-home-datos__dato {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sv-home-datos__icono {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 74px;
  height: 74px;
  margin-bottom: -27px;
  border: 2px solid var(--sv-home-rojo);
  border-radius: 50%;
  background: #fff;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos__icono {
    width: 40px;
    height: 40px;
    margin-bottom: -18px;
    border-width: 1.5px;
  }
}

.sv-home-datos__glifo {
  display: block;
  width: auto;
  height: 47px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos__glifo {
    height: 25px;
  }
}

.sv-home-datos__caja {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-height: 117px;
  padding: 46px 8px 34px;
  border-radius: 6px;
  background: var(--sv-home-offwhite);
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos__caja {
    min-height: 79px;
    padding: 24px 6px 14px;
    border-radius: 5px;
  }
}

/*
 * El h3 solo agrupa la cifra y su rótulo; el estilo lo ponen los dos hijos, así
 * que aquí hay que deshacer lo que el tema le pone a los encabezados (24px y
 * su interlineado, que descuadraban el alto de la caja).
 */
.sv-home-datos__rotulo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: normal;
  text-transform: inherit;
}

.sv-home-datos__cifra {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos__cifra {
    font-size: 20px;
    line-height: 24px;
  }
}

.sv-home-datos__texto {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-datos__texto {
    font-size: 14px;
    line-height: 16px;
  }
}

/* ---------------------------------------------------------------------------
   3 · Reclamo y banner (nodos 3032-3156 y 2689-3166)
   --------------------------------------------------------------------------- */
.sv-home-banner {
  padding: 46px 20px 0;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-banner {
    /* 3 · Reclamo y banner */
    padding: 32px 10px 0;
  }
}

.sv-home-banner__caja {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: var(--sv-home-ancho);
  min-height: 288px;
  margin: 0 auto;
  padding: 24px 28px;
  border: 1px solid var(--sv-home-rojo);
  border-radius: 12px;
  background: #fff;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-banner__caja {
    /* El marco rojo y el reclamo de dentro son solo de escritorio. */
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
}

.sv-home-banner__reclamo {
  margin: 0;
}

.sv-home-banner__reclamo--escritorio {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  /* En el diseño ocupa dos líneas dentro de una caja de 322. */
  max-width: 322px;
  margin: 0 auto;
  padding: 0;
  color: var(--sv-home-rojo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-banner__reclamo--escritorio {
    display: none;
  }
}

/* En escritorio el reclamo va dentro de la caja. */
.sv-home-banner__reclamo--movil {
  display: none;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-banner__reclamo--movil {
    display: block;
    margin-bottom: 32px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }
}

.sv-home-banner__pieza {
  /* El mínimo de un elemento flexible es su contenido, y la fila de pases de
     slick mide el ancho de todas las imágenes juntas: sin esto la caja se
     estira hasta salirse de la pantalla.

     Los 660px son los del banner en el diseño (659, redondeado a par para
     que el 2x salga exacto). Cuando hay varios banners la columna de puntos
     va a su derecha y la pieza tiene que dar para los dos (sitio hay: dentro
     de la caja sobran más de 200px); con uno solo no hay puntos y la imagen
     se queda en sus 660. */
  --sv-home-banner-pieza: 660px;
}
.sv-home-banner__pieza.sv-banner--vertical {
  --sv-home-banner-pieza: calc(660px + var(--sv-banner-puntos-ancho));
}
.sv-home-banner__pieza {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 var(--sv-home-banner-pieza);
          flex: 0 1 var(--sv-home-banner-pieza);
  min-width: 0;
  max-width: var(--sv-home-banner-pieza);
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-banner__pieza {
    /* En tablet no pasa del ancho de escritorio: así el banner nunca pide
       más de su 2x de escritorio (ver custom/tamanos-imagen.php). */
    max-width: 660px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ---------------------------------------------------------------------------
   4 · Servicios (nodos 3032-3126 y 2665-5523)

   La franja gris no llega hasta abajo: las tarjetas la desbordan. Va como
   degradado de dos paradas para no tener que sacar un pseudoelemento.
   --------------------------------------------------------------------------- */
.sv-home-servicios {
  margin-top: 46px;
  padding: 45px 20px 0;
  background: linear-gradient(to bottom, var(--sv-home-offwhite) 410px, transparent 410px);
}
@media only screen and (max-width: 1319.98px) {
  .sv-home-servicios {
    /* La franja gris que las tarjetas desbordan es una idea de una sola fila:
       con dos, el gris tiene que llegar hasta abajo. */
    padding-bottom: 38px;
    background: var(--sv-home-offwhite);
  }
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-servicios {
    /* 4 · Servicios */
    margin-top: 32px;
    padding: 33px 18px 38px;
    /* Aquí el gris sí llega hasta abajo. */
    background: var(--sv-home-offwhite);
  }
}

.sv-home-servicios__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 236px));
  gap: 25px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: var(--sv-home-ancho);
  margin: 36px auto 0;
  padding: 0;
  list-style: none;
  /* Las cinco columnas solo salen cuando caben a la medida del diseño (236px
     en un contenedor de 1280, o sea a partir de 1320 de ventana). Por debajo
     se apretarían hasta quedar más pequeñas que en la tableta, así que lo
     que se hace es ir quitando columnas. El tope de ancho deja la tarjeta en
     unos 270px en lo alto de cada tramo, que es hasta donde el 2x de
     escritorio (472px) sigue dando densidad de sobra.

     La tarjeta no se vuelve apaisada hasta que se queda sola en su fila; ahí
     entra también el recorte de móvil del <picture>, así que si se mueve el
     corte de 479 hay que mover el media del <source> en
     parts/home2026/servicios.php. */
}
@media only screen and (max-width: 1319.98px) {
  .sv-home-servicios__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 860px;
    gap: 25px;
  }
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-servicios__lista {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sv-home-servicios__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    gap: 20px;
  }
}
@media only screen and (max-width: 479.98px) {
  .sv-home-servicios__lista {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    gap: 33px;
  }
}

.sv-home-servicios__tarjeta {
  position: relative;
  display: block;
  /* Las medidas del diseño son 236x365. */
  aspect-ratio: 236/365;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
}
.sv-home-servicios__tarjeta:hover .sv-home-servicios__foto, .sv-home-servicios__tarjeta:focus .sv-home-servicios__foto {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media only screen and (max-width: 479.98px) {
  .sv-home-servicios__tarjeta {
    aspect-ratio: 355/291;
  }
}

/* La foto es un <picture>: el recorte de móvil es otro, no un reencuadre del
   de escritorio. El <picture> es quien se estira y quien hace el zoom; la
   <img> de dentro solo rellena. */
.sv-home-servicios__foto {
  position: absolute;
  inset: 0;
  -webkit-transition: -webkit-transform var(--sv-home-transicion);
  transition: -webkit-transform var(--sv-home-transicion);
  transition: transform var(--sv-home-transicion);
  transition: transform var(--sv-home-transicion), -webkit-transform var(--sv-home-transicion);
}
.sv-home-servicios__foto img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * Las dos capas del diseño en una: el degradado de abajo (#212121 del 0 al 70%,
 * inclinado unos 17 grados) y la "Oscuridad" plana del 15% que lleva encima
 * toda la tarjeta.
 */
.sv-home-servicios__tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(196deg, rgba(33, 33, 33, 0) 62%, rgba(33, 33, 33, 0.7) 96%), rgba(33, 33, 33, 0.15);
  pointer-events: none;
}

.sv-home-servicios__rotulo {
  position: absolute;
  z-index: 1;
  right: 21px;
  bottom: 16px;
  left: 23px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  text-transform: uppercase;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-servicios__rotulo {
    right: 21px;
    bottom: 22px;
    left: 21px;
  }
}

/* ---------------------------------------------------------------------------
   Carruseles (equipo médico y casos de éxito)

   El dibujo es de aquí; el movimiento lo pone slick. Las flechas y la caja de
   los puntos están escritas en la plantilla para poder colocarlas: en
   escritorio las flechas van a los lados de la pista y los puntos debajo; en
   móvil las tres cosas comparten una fila bajo la pista.
   --------------------------------------------------------------------------- */
.sv-carrusel {
  --sv-carrusel-calle: 28px;
  --sv-carrusel-aire-puntos: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: var(--sv-carrusel-calle);
     -moz-column-gap: var(--sv-carrusel-calle);
          column-gap: var(--sv-carrusel-calle);
}
@media only screen and (max-width: 1023.98px) {
  .sv-carrusel {
    /* Carruseles: la pista ocupa el ancho de la pantalla y las flechas bajan a
       compartir fila con los puntos. */
    --sv-carrusel-calle: 27px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /*
     * El margen negativo de la .slick-list (media calle a cada lado) asoma
     * fuera de la pantalla y daba scroll horizontal en iPhone, que no hace
     * caso del overflow-x del body. El carrusel mide lo mismo que la
     * pantalla, así que recortarlo aquí no esconde nada. clip y no hidden:
     * no recorta en vertical ni lo convierte en una caja con scroll.
     */
    overflow-x: clip;
  }
}

.sv-carrusel__flecha {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: block;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  -webkit-transition: opacity var(--sv-home-transicion);
  transition: opacity var(--sv-home-transicion);
}
.sv-carrusel__flecha:hover, .sv-carrusel__flecha:focus {
  background: none;
}
.sv-carrusel__flecha svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sv-carrusel__flecha {
  /* La clase la pone slick al llegar al extremo. */
}
.sv-carrusel__flecha.slick-disabled {
  opacity: 0.35;
  cursor: default;
}

/*
 * Las flechas se van a los extremos con márgenes automáticos, no con un
 * space-between: cuando hay tan pocas tarjetas como pases, slick las esconde, y
 * con space-between la pista se quedaba pegada a la izquierda en vez de
 * centrarse.
 */
.sv-carrusel__flecha--atras {
  margin-right: auto;
}
@media only screen and (max-width: 1023.98px) {
  .sv-carrusel__flecha--atras {
    /* La fila de mandos va flecha · puntos · flecha, y en el marcado los
       puntos van los últimos. */
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-right: 0;
  }
}

.sv-carrusel__flecha--adelante {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  margin-left: auto;
}
@media only screen and (max-width: 1023.98px) {
  .sv-carrusel__flecha--adelante {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    margin-left: 0;
  }
}

.sv-carrusel__pista {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  /*
   * El ancho no se deja a lo que sobre: slick reparte la pista en huecos
   * iguales, y la tarjeta visible acaba midiendo (ancho + calle) / pases -
   * calle. Cada bloque pone el suyo para que salga la medida del diseño.
   * Además, cuando hay tan pocas tarjetas como pases slick esconde las
   * flechas, y con un ancho elástico las tarjetas se estirarían.
   */
  -webkit-box-flex: 0;
      -ms-flex: 0 1 var(--sv-carrusel-pista, auto);
          flex: 0 1 var(--sv-carrusel-pista, auto);
  min-width: 0;
  /* Antes de que arranque slick: una fila que no desborde la página. */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--sv-carrusel-calle);
  overflow: hidden;
}
.sv-carrusel__pista.slick-initialized {
  display: block;
  overflow: visible;
}
.sv-carrusel__pista {
  /* La calle entre tarjetas: slick reparte el ancho en huecos iguales y la
     tarjeta se separa por dentro. */
}
.sv-carrusel__pista .slick-list {
  margin: 0 calc(var(--sv-carrusel-calle) / -2);
}
.sv-carrusel__pista .slick-slide {
  height: auto;
  padding: 0 calc(var(--sv-carrusel-calle) / 2);
}
@media only screen and (max-width: 1023.98px) {
  .sv-carrusel__pista {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%;
    /* Aquí manda el ancho de la pantalla, no la medida de escritorio. */
    --sv-carrusel-pista: 100%;
  }
}

.sv-carrusel__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.sv-carrusel__puntos {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  margin-top: var(--sv-carrusel-aire-puntos);
}
.sv-carrusel__puntos .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-carrusel__puntos li {
  display: block;
  /* style.css le pone margen inferior a todo <li>: la fila de puntos
     medía 12 en vez de 5 y empujaba el botón. */
  margin: 0;
  line-height: 0;
}
.sv-carrusel__puntos {
  /* Con un solo pase slick pinta un punto suelto que no lleva a ninguna
     parte; las flechas sí las esconde él. */
}
.sv-carrusel__puntos li:only-child {
  display: none;
}
@media only screen and (max-width: 1023.98px) {
  .sv-carrusel__puntos {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-top: 0;
  }
}

.sv-carrusel__punto {
  display: block;
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sv-home-apoyo);
  cursor: pointer;
  /* El texto lo mete slick dentro del botón; aquí solo se ve la bolita. */
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  -webkit-transition: background var(--sv-home-transicion);
  transition: background var(--sv-home-transicion);
  /* style.css pinta de gris todo button:focus, y el punto activo se perdía. */
}
.sv-carrusel__punto:focus {
  background: var(--sv-home-apoyo);
}

.slick-active .sv-carrusel__punto,
.slick-active .sv-carrusel__punto:focus {
  background: var(--sv-home-rojo);
}

/* ---------------------------------------------------------------------------
   5 · Equipo médico (nodos 3188-5702 y 2731-3272)
   --------------------------------------------------------------------------- */
.sv-home-equipo {
  margin-top: 60px;
  padding: 0 20px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo {
    /* 5 · Equipo médico */
    margin-top: 0;
    /* El carrusel se sale a sangre: los márgenes van en el titular y en la
       entradilla, que los ponen sus propias clases. */
    padding: 0;
  }
}

.sv-home-equipo__cuerpo {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  /* La segunda fila se queda con lo que sobre de la ficha grande: si no, la
     rejilla reparte ese sobrante entre las dos y el botón se va hacia abajo. */
  grid-template-rows: auto 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-column-gap: 32px;
     -moz-column-gap: 32px;
          column-gap: 32px;
  max-width: var(--sv-home-ancho);
  margin: 26px auto 0;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__cuerpo {
    display: block;
    margin-top: 39px;
  }
}

.sv-home-equipo__destacado {
  grid-row: 1/span 2;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__destacado {
    /* En móvil no hay ficha grande: todos van iguales dentro del carrusel. */
    display: none;
  }
}

.sv-home-equipo__carrusel {
  /* 4 fichas de 182,84 con 28 de calle. */
  --sv-carrusel-pista: 815px;
  --sv-carrusel-aire-puntos: 35px;
  /* En el diseño las fichas no van a ras de la grande, sino 52,6px más abajo
     (nodo 3188-5702), con las flechas a media altura de ellas. */
  margin-top: 53px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__carrusel {
    margin-top: 0;
  }
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__carrusel {
    --sv-carrusel-calle: 22px;
  }
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__carrusel {
    /* El diseño de móvil no lleva ni flechas ni puntos aquí: se pasa con el
       dedo. slick conserva los botones aunque se le pase arrows:false, porque
       son nuestros y viven fuera del carrusel. */
  }
  .sv-home-equipo__carrusel .sv-carrusel__flecha,
  .sv-home-equipo__carrusel .sv-carrusel__puntos {
    display: none;
  }
}

.sv-home-equipo__boton {
  justify-self: center;
  width: 351px;
  max-width: 100%;
  margin-top: 38px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__boton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 351px;
    margin: 41px auto 0;
  }
}

/* En escritorio el destacado vive fuera del carrusel; la copia de dentro solo
   es para móvil, y slickFilter la saca de los pases (ver js/home-2026.js). */
.sv-home-equipo__item--destacado {
  display: none;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__item--destacado {
    display: block;
  }
}

/* El destacado va en rojo también en su copia del carrusel, como la ficha
   grande de escritorio. */
.sv-home-equipo__item--destacado .sv-home-equipo__ficha-datos {
  color: var(--sv-home-rojo);
}

/* Ficha grande del destacado. */
.sv-home-equipo__grande {
  position: relative;
  display: block;
  width: 300px;
  aspect-ratio: 300/491;
  border: 1px solid var(--sv-home-rojo);
  border-radius: 46px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  /* El velo blanco que funde la foto con el rótulo. */
}
.sv-home-equipo__grande::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(21%, rgba(255, 255, 255, 0)), color-stop(69%, #fff));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 21%, #fff 69%);
  pointer-events: none;
}

.sv-home-equipo__grande-foto {
  /* La foto no llega al borde de abajo: los últimos 19px son blancos. */
  width: 100%;
  height: 96%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.sv-home-equipo__grande-datos {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 53px;
  left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  color: var(--sv-home-rojo);
  text-align: center;
}

.sv-home-equipo__grande-nombre {
  font-size: 22px;
  font-weight: 700;
  line-height: 27px;
}

.sv-home-equipo__grande-cargo {
  font-size: 22px;
  font-weight: 400;
  line-height: 27px;
}

/* Fichas del carrusel. */
.sv-home-equipo__ficha {
  position: relative;
  display: block;
  aspect-ratio: 183/300;
  border: 1px solid var(--sv-home-rojo);
  border-radius: 28px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
}
.sv-home-equipo__ficha::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(21%, rgba(255, 255, 255, 0)), color-stop(69%, #fff));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 21%, #fff 69%);
  pointer-events: none;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__ficha {
    aspect-ratio: 230/306;
  }
}

.sv-home-equipo__ficha-foto {
  width: 100%;
  height: 96%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.sv-home-equipo__ficha-datos {
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 27px;
  left: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  color: var(--sv-home-negro);
  text-align: center;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__ficha-datos {
    bottom: 15px;
    gap: 5px;
  }
}

.sv-home-equipo__ficha-nombre {
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__ficha-nombre {
    font-size: 14px;
    line-height: 19px;
  }
}

.sv-home-equipo__ficha-cargo {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-equipo__ficha-cargo {
    font-size: 14px;
    line-height: 19px;
  }
}

/* ---------------------------------------------------------------------------
   6 · Casos de éxito (nodos 3032-3009 y 2665-5819)
   --------------------------------------------------------------------------- */
.sv-home-casos {
  margin-top: 68px;
  padding: 47px 20px 0;
  background: linear-gradient(to bottom, var(--sv-home-offwhite) 410px, transparent 410px);
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos {
    /* 6 · Casos de éxito. La franja gris envuelve la sección entera y acaba
       29px bajo la fila de mandos (nodo 2665-5819). Va con padding y no con
       un alto fijo: el vídeo encoge con la pantalla y la fila de puntos
       crece con el número de casos, así que un corte a 626px se quedaba
       corto o largo según el móvil. */
    margin-top: 52px;
    padding: 44px 0 29px;
    background: var(--sv-home-offwhite);
  }
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos .sv-home__titulo {
    /* 20 de interlínea, como en el diseño: con los 22 generales los
       vídeos bajaban 2px. */
    line-height: 20px;
  }
}

.sv-home-casos__carrusel {
  /* Las flechas van mucho más separadas que en el equipo médico: los vídeos
     ocupan el contenedor entero y ellas quedan fuera. */
  --sv-carrusel-calle: 73px;
  --sv-carrusel-aire-puntos: 40px;
  /* 4 vídeos de 243 con 28 de calle. */
  --sv-carrusel-pista: 1056px;
  max-width: var(--sv-home-ancho);
  margin: 60px auto 0;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos__carrusel {
    --sv-carrusel-calle: 27px;
    --sv-carrusel-aire-puntos: 0;
    /* 39 entre el titular y los vídeos, como en el nodo 2665-5819. */
    margin-top: 39px;
  }
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos__carrusel {
    /* La fila de mandos, como en el nodo 2665-5819: 26 bajo los vídeos y
       20,5 entre flecha y puntos (170 de fila con cinco puntos). */
    -webkit-column-gap: 20.5px;
       -moz-column-gap: 20.5px;
            column-gap: 20.5px;
  }
  .sv-home-casos__carrusel .sv-carrusel__flecha,
  .sv-home-casos__carrusel .sv-carrusel__puntos {
    margin-top: 26px;
  }
}

.sv-home-casos__carrusel .sv-carrusel__pista .slick-list,
.sv-home-casos__carrusel .sv-carrusel__pista .slick-slide {
  /* Entre los vídeos la calle es de 28 en escritorio y 27 en móvil, no la
     del carrusel (que en escritorio separa las flechas). */
  --sv-carrusel-calle: 28px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos__carrusel .sv-carrusel__pista .slick-list,
  .sv-home-casos__carrusel .sv-carrusel__pista .slick-slide {
    --sv-carrusel-calle: 27px;
  }
}

.sv-home-casos__carrusel .sv-carrusel__pista {
  gap: 28px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos__carrusel .sv-carrusel__pista {
    gap: 27px;
  }
}

.sv-home-casos__tarjeta {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9/16;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: none;
  overflow: hidden;
  cursor: pointer;
}
.sv-home-casos__tarjeta:hover, .sv-home-casos__tarjeta:focus {
  background: none;
}
.sv-home-casos__tarjeta:hover .sv-home-casos__play {
  -webkit-transform: translate(-50%, -50%) scale(1.08);
          transform: translate(-50%, -50%) scale(1.08);
}

.sv-home-casos__foto {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sv-home-casos__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 51px;
  height: 51px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform var(--sv-home-transicion);
  transition: -webkit-transform var(--sv-home-transicion);
  transition: transform var(--sv-home-transicion);
  transition: transform var(--sv-home-transicion), -webkit-transform var(--sv-home-transicion);
}
.sv-home-casos__play svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-casos__play {
    width: 74px;
    height: 74px;
  }
}

/* ---------------------------------------------------------------------------
   7 · Opiniones y preguntas frecuentes
   --------------------------------------------------------------------------- */
.sv-home-opiniones {
  margin-top: 35px;
  padding: 0 20px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-opiniones {
    /* 7 · Opiniones y preguntas */
    margin-top: 19px;
    padding: 0 10px;
  }
}
.sv-home-opiniones {
  /* El ancho lo pone scss/opiniones.scss para toda la web: el mismo 1280 del
     contenedor que el equipo, los casos y las preguntas. */
}

.sv-home-faqs {
  margin-top: 89px;
  padding: 0 20px 60px;
  /* En la home las preguntas van al ancho del contenedor, no a los 1063 de
     la página de cita. */
}
.sv-home-faqs .sv-faqs {
  max-width: var(--sv-home-ancho);
}
.sv-home-faqs .sv-faqs__titulo {
  max-width: var(--sv-home-ancho);
  margin: 0 auto 32px;
  padding-top: 30px;
  border-top: 1px solid var(--sv-home-apoyo);
  font-size: 30px;
}
@media only screen and (max-width: 1023.98px) {
  .sv-home-faqs {
    margin-top: 73px;
    padding: 0 0 40px;
  }
  .sv-home-faqs .sv-faqs__titulo {
    padding: 0 15px;
    border-top: 0;
    font-size: 18px;
  }
}

.slick-vertical .slick-slide {
  border: none;
}/*# sourceMappingURL=home-2026.css.map */