/* =========================================================================
   URRETA — Siniestros
   Artboard 1980 x 8124 px  →  123.75rem x 507.75rem
   ========================================================================= */

.si-fondo { position: absolute; left: 0; width: 123.75rem; }
.si-fondo--hero    { top: 2.3125rem;   height: 68.125rem;
                     background: linear-gradient(to bottom, #FFEEE7, #F9E9EC); }
.si-fondo--tarjetas{ top: 70.4375rem;  height: 129.1134rem; background: var(--c-cream); }
.si-fondo--banda   { top: 311.1915rem; height: 40.2742rem;  background: var(--c-cream); }

.si-titulo {
  position: absolute;
  top: 17.5rem;                      /* 280 */
  left: 15.6088rem;                  /* 249.74 */
  width: 92.5rem;                    /* 1480 */
  height: 27.9816rem;                /* 447.706 */
  font-size: 6rem;
  font-weight: 200;
  line-height: 7.25rem;              /* 116 */
  color: var(--c-primary);
}
.si-intro {
  position: absolute;
  top: 47.7115rem;                   /* 763.383 */
  left: 53.0894rem;                  /* 849.43 */
  width: 43.125rem;                  /* 690 */
  height: 9.2757rem;                 /* 148.411 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.5rem;
  color: var(--c-primary);
}
.si-foto {
  position: absolute;
  top: 46.0625rem;                   /* 737 */
  left: 26.2027rem;                  /* 419.24 */
  width: 13.375rem;                  /* 214 */
  height: 13.3125rem;                /* 213 */
  border-radius: 1.4058rem;
  box-shadow: 0 1.2652rem 2.8116rem rgba(143, 70, 100, 0.35);
  background: #951F99;
  overflow: hidden;
}
.si-foto img { position: absolute; left: -2.3%; top: -19.95%; width: 104.17%; height: 129.03%; max-width: none; }

/* ======================= TARJETAS DE CONTACTO ========================== */

/* Igual que la rejilla de aseguradoras: la fila viene de `--si-card-fila`,
   asi que las tarjetas de atencion admiten las que hagan falta con el paso
   vertical del diseno (44.0129rem) en vez de estar atadas a las cuatro del
   artboard. */
.si-card {
  position: absolute;
  top: calc(77.6875rem + var(--si-card-fila, 0) * 44.0129rem);   /* 1243 */
  width: 45.5619rem;                 /* 728.991 */
  /* Alto minimo, no fijo: un titulo de dos renglones estira la tarjeta y su
     forma con ella. El paso entre filas (44.0129rem) deja 4.41rem de aire
     libre debajo, que es mas de lo que anade un renglon de mas. */
  min-height: 39.6032rem;            /* 633.651 */
  /* Aire bajo el ultimo renglon de contacto, el que deja el artboard. */
  padding-bottom: 2.85rem;
}
.si-card--col1 { left: 11.0958rem; }   /* 177.53 */
.si-card--col2 { left: 67.0857rem; }   /* 1073.37 */
.si-card__forma { position: absolute; inset: 0; width: 100%; height: 100%; }

/* El interior de la tarjeta pasa de coordenadas fijas a flujo. El artboard
   separa titulo, texto y contactos por 1.75rem en las cuatro tarjetas —el
   mismo valor en todas—, asi que con un `gap` sale identico y, ademas, un
   titulo de dos renglones empuja lo de abajo en vez de encaramarse. */
.si-card__cont {
  position: relative;
  margin-left: 6.9621rem;            /* 111.393 */
  width: 31.6384rem;                 /* 506.215 */
  display: flex;
  flex-direction: column;
  gap: 1.75rem;                      /* 28 */
}
.si-card--a .si-card__cont { margin-top: 5.6817rem; }   /* 90.906 */
.si-card--b .si-card__cont,
.si-card--c .si-card__cont { margin-top: 5.9942rem; }   /* 95.906 */
.si-card--d .si-card__cont,
.si-card--extra .si-card__cont { margin-top: 4.8067rem; }   /* 76.906 */

.si-card__titulo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 3rem;                   /* 48 */
  font-weight: 200;
  line-height: normal;
  color: var(--c-white);
}
.si-card--a .si-card__titulo,
.si-card--d .si-card__titulo,
.si-card--extra .si-card__titulo { min-height: 3.875rem; }   /* 62 */
.si-card--b .si-card__titulo,
.si-card--c .si-card__titulo { min-height: 3.25rem; }    /* 52 */

.si-card__texto {
  width: 27.6028rem;                 /* 441.645 */
  font-size: 1.25rem;                /* 20 */
  font-weight: 300;
  line-height: normal;
  color: var(--c-white);
}
.si-card--a .si-card__texto,
.si-card--b .si-card__texto,
.si-card--c .si-card__texto { min-height: 3.3625rem; }
.si-card--d .si-card__texto,
.si-card--extra .si-card__texto { min-height: 5.1125rem; }

/* Cuatro renglones con el paso del artboard: 71.097 de alto y 9 de aire. */
.si-card__filas {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;                    /* 9 */
  width: 100%;
}

.si-fila {
  display: flex;
  align-items: center;
  width: 31.61rem;                   /* 505.761 */
  height: 4.4436rem;                 /* 71.097 */
  padding-left: 2.3518rem;           /* 37.63 */
  border-radius: 0.5rem;             /* 8 */
  background: var(--c-white);
  font-size: 1.25rem;                /* 20 */
  font-weight: 300;
  line-height: 2.5rem;               /* 40 */
  color: var(--c-primary);
  white-space: nowrap;
}
.si-fila {
  transition:
    transform  var(--t-medio) var(--e-suave),
    box-shadow var(--t-medio) var(--e-suave);
}
.si-fila:hover {
  transform: translateX(0.375rem);
  box-shadow: 0 0.375rem 1rem rgba(109, 20, 86, 0.18);
}

.si-fila b { font-weight: 300; }
.si-fila span { margin-left: 0.5rem; }

/* Posición de cada tarjeta */

/* ===================== GUIAS DE TRAMITES (panel) ======================= */

.si-panel {
  position: absolute;
  top: 167.5575rem;                  /* 2680.92 */
  left: 11.1419rem;                  /* 178.27 */
  width: 101.5126rem;                /* 1624.202 */
  height: 25.7312rem;                /* 411.699 */
}
.si-panel img { width: 100%; height: 100%; }

.si-panel__titulo {
  position: absolute;
  top: 180.4231rem;                  /* 2886.77 (centro) */
  left: 18.5963rem;                  /* 297.54 */
  width: 34.123rem;                  /* 545.968 */
  height: 14.6031rem;                /* 233.649 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 4rem;
  font-weight: 200;
  line-height: normal;
  color: var(--c-primary);
}
.si-panel__texto {
  position: absolute;
  top: 175.8919rem;                  /* 2814.27 */
  left: 67.1644rem;                  /* 1074.63 */
  width: 39.5622rem;                 /* 632.995 */
  height: 9.062rem;                  /* 144.992 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.5rem;
  color: var(--c-primary);
}

/* ==================== LOGOS + BOTONES DE DESCARGA ===================== */

/* La fila ya no viene de una clase por fila sino de `--si-fila`, que la
   plantilla pone en linea. Asi la rejilla de aseguradoras admite las filas
   que haga falta con el mismo paso vertical del diseno (47.4392rem), en vez
   de estar atada a las dos del artboard. */
.si-logo {
  position: absolute;
  top: calc(204rem + var(--si-fila, 0) * 47.4392rem);   /* 3264 */
  width: 18.2901rem;                 /* 292.641 */
  height: 18.2901rem;
  overflow: hidden;
}
.si-logo img { position: absolute; left: 0.11%; top: 0.02%; width: 100%; height: 100%; max-width: none; }

/* Cada botón de descarga abre su propio desplegable: el bloque envolvente
   toma la posición del artboard y el botón pasa a ser relativo. */
.si-descarga {
  position: absolute;
  top: calc(224.5407rem + var(--si-fila, 0) * 47.4392rem);   /* 3592.651 */
  width: 19.7688rem;                 /* 316.3 */
}
.si-descarga.is-open { z-index: 14; }

.si-boton {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 3.9375rem;                 /* 63 */
  border: 0.05rem solid var(--c-border-pink);
  border-radius: 2.625rem;           /* 42 */
  box-shadow: 0 0.25rem 0.35rem rgba(109, 20, 86, 0.22);
  background-image: linear-gradient(
    31.20deg,
    rgb(225, 73, 110)  21.771%,
    rgb(255, 104, 157) 40.030%,
    rgb(200, 54, 150)  61.610%,
    rgb(200, 54, 150)  69.660%,
    rgb(239, 62, 177)  89.723%
  );
  cursor: pointer;
  transition:
    transform  var(--t-medio) var(--e-suave),
    box-shadow var(--t-medio) var(--e-suave);
}
.si-boton:hover,
.si-boton:focus-visible {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.5rem 0.75rem rgba(109, 20, 86, 0.32);
}
.si-boton:active { transform: translateY(0) scale(0.99); }

/* La flecha apunta hacia arriba mientras el menú está abierto */
.si-boton__cont img { transition: transform var(--t-largo) var(--e-entrada); }
.si-descarga.is-open .si-boton__cont img { transform: rotate(180deg); }

/* --- Menú desplegable -------------------------------------------------
   Cinco enlaces del ancho del botón, con paso de 67 px (63 de alto + 4 de
   separación). En reposo son sólo texto; al pasar el cursor se rellenan
   con la píldora degradada, igual que en el diseño.
   -------------------------------------------------------------------- */
.si-descarga__menu {
  position: absolute;
  top: 4.4375rem;                    /* 71 — 63 del botón + 8 */
  /* Fondo propio, y no es adorno: el desplegable se abre ENCIMA de la fila
     siguiente —su logotipo y su botón—, y sin nada detrás los dos textos se
     leen superpuestos. El panel sobresale media rem por cada lado para que
     su relleno no estreche las píldoras: el rótulo más largo va en una sola
     línea y con menos sitio se cortaría. */
  left: -0.5rem;
  width: calc(100% + 1rem);
  padding: 0.5rem;
  border-radius: 1rem;
  background: var(--c-cream);
  box-shadow: 0 0.5rem 1.5rem rgba(109, 20, 86, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;                      /* 4 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.625rem);
  pointer-events: none;
  transition:
    opacity    var(--t-medio) var(--e-suave),
    transform  var(--t-medio) var(--e-suave),
    visibility 0s linear var(--t-medio);
}
.si-descarga.is-open .si-descarga__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.si-descarga__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.9375rem;                 /* 63 */
  padding: 0 1rem;
  border: 0.05rem solid transparent;
  border-radius: 2.625rem;           /* 42 */
  /* 16 px: el rotulo mas largo ("Aviso de accidente o enfermedad") cabe en
     un solo renglon dentro de los 316 px del boton, como en el diseño. */
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--c-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    color      var(--t-medio) var(--e-suave),
    border-color var(--t-medio) var(--e-suave),
    box-shadow var(--t-medio) var(--e-suave),
    opacity    var(--t-medio) var(--e-suave),
    transform  var(--t-medio) var(--e-suave);
}
.si-descarga__link::before {
  content: '';
  position: absolute;
  inset: -0.05rem;
  border-radius: inherit;
  background-image: linear-gradient(
    31.20deg,
    rgb(225, 73, 110)  21.771%,
    rgb(255, 104, 157) 40.030%,
    rgb(200, 54, 150)  61.610%,
    rgb(200, 54, 150)  69.660%,
    rgb(239, 62, 177)  89.723%
  );
  opacity: 0;
  transition: opacity var(--t-medio) var(--e-suave);
}
.si-descarga__link > span { position: relative; }

.si-descarga.is-open .si-descarga__link { opacity: 1; transform: translateY(0); }
/* Entran escalonados, de arriba hacia abajo */
.si-descarga.is-open .si-descarga__link:nth-child(1) { transition-delay: 40ms; }
.si-descarga.is-open .si-descarga__link:nth-child(2) { transition-delay: 90ms; }
.si-descarga.is-open .si-descarga__link:nth-child(3) { transition-delay: 140ms; }
.si-descarga.is-open .si-descarga__link:nth-child(4) { transition-delay: 190ms; }
.si-descarga.is-open .si-descarga__link:nth-child(5) { transition-delay: 240ms; }

.si-descarga__link:hover,
.si-descarga__link:focus-visible {
  color: var(--c-white);
  border-color: var(--c-border-pink);
  box-shadow: 0 0.25rem 0.35rem rgba(109, 20, 86, 0.22);
}
.si-descarga__link:hover::before,
.si-descarga__link:focus-visible::before { opacity: 1; }
.si-boton__cont {
  position: absolute;
  top: 15.51%; bottom: 15.51%;
  left: 12.28%; right: 12.15%;
  display: flex;
  align-items: center;
  gap: 0.75rem;                      /* 12 */
}
.si-boton__cont span {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.5rem;
  color: var(--c-white);
  white-space: nowrap;
}
/* El SVG exportado incluye el trazo (25 x 12.4434); la caja del nodo mide
   25 x 10.4434. El sangrado es simetrico: centrado cae en el mismo sitio. */
.si-boton__cont img { width: 1.5625rem; height: 0.7777rem; flex: none; }

/* Columnas y filas de la parrilla de aseguradoras */
.si-col1 { left: 11.322rem; }        /* 181.152 */
.si-col2 { left: 38.4499rem; }       /* 615.198 */
.si-col3 { left: 66.3171rem; }       /* 1061.074 */
.si-col4 { left: 94.1379rem; }       /* 1506.207 */

.si-bcol1 { left: 10.5826rem; }      /* 169.322 */
.si-bcol2 { left: 37.6641rem; }      /* 602.625 */
.si-bcol3 { left: 65.5313rem; }      /* 1048.501 */
.si-bcol4 { left: 93.3986rem; }      /* 1494.377 */

/* ============================ RAMOS (pestanas) =========================
   El artboard deja libre la franja entre el panel (acaba en 193.29rem) y la
   primera fila de logotipos (204rem). Ahi van las pestanas de ramo, con la
   pildora del propio diseno: rellena la activa, perfilada el resto. Con un
   solo ramo no se dibujan y la rejilla queda como en el maquetado.
   -------------------------------------------------------------------- */
.si-ramos {
  position: absolute;
  top: 195.5rem;                     /* 3128 */
  left: 11.1419rem;                  /* 178.27 */
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 2;
}

.si-ramo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15.3125rem;             /* 245, el ancho de boton del diseno */
  height: 3.9375rem;                 /* 63 */
  padding: 0 1.75rem;
  border: 0.05rem solid var(--c-border-pink);
  border-radius: 2.625rem;           /* 42 */
  background: transparent;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: normal;
  color: var(--c-primary);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-image var(--t-medio) var(--e-suave),
    color            var(--t-medio) var(--e-suave),
    transform        var(--t-medio) var(--e-suave),
    box-shadow       var(--t-medio) var(--e-suave);
}
.si-ramo:hover,
.si-ramo:focus-visible { transform: translateY(-0.1875rem); }

.si-ramo.is-activo {
  background-image: linear-gradient(
    31.20deg,
    rgb(225, 73, 110)  21.771%,
    rgb(255, 104, 157) 40.030%,
    rgb(200, 54, 150)  61.610%,
    rgb(200, 54, 150)  69.660%,
    rgb(239, 62, 177)  89.723%
  );
  box-shadow: 0 0.25rem 0.35rem rgba(109, 20, 86, 0.22);
  color: var(--c-cream);
}

/* Los logotipos y sus botones son hermanos sueltos posicionados en absoluto:
   el cambio de ramo los oculta uno a uno, no por grupos. */
.si-logo[hidden],
.si-descarga[hidden] { display: none; }

/* Primera linea del desplegable en Autos y Danos: el numero de cabina.
   No es una descarga, asi que no lleva subrayado ni cursor de enlace cuando
   el numero no se puede marcar. */
.si-descarga__link--tel {
  font-weight: 400;
  cursor: default;
}
a.si-descarga__link--tel { cursor: pointer; }

/* Baja con la rejilla: `--si-filas` lo pone la plantilla en el tramo, y con
   las dos filas del diseno el calculo devuelve el 300.3125 original. */
.si-vermas {
  position: absolute;
  top: calc(300.3125rem + (var(--si-filas, 2) - 2) * 47.4392rem);   /* 4805 */
  left: 50.5313rem;                  /* 808.5 */
  width: 22.6875rem;                 /* 363 */
  background-image: linear-gradient(
    42.09deg,
    rgb(225, 73, 110)  21.560%,
    rgb(252, 104, 156) 40.442%,
    rgb(200, 54, 150)  61.297%,
    rgb(200, 54, 150)  76.581%,
    rgb(239, 62, 177)  93.953%
  );
}

/* ============================== BANDA ================================== */

.si-banda {
  position: absolute;
  top: 317.675rem;                   /* 5082.796 */
  left: 6.4214rem;                   /* 102.742 */
  width: 110.875rem;                 /* 1774 */
  height: 30.7963rem;                /* 492.74 */
  transform: scaleX(-1);
}
.si-banda img { width: 100%; height: 100%; }

.si-banda__texto {
  position: absolute;
  top: 333.095rem;                   /* 5329.52 (centro) */
  left: 13.395rem;                   /* 214.32 */
  width: 96.9903rem;                 /* 1551.844 */
  height: 14.5rem;                   /* 232 */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 4rem;
  font-weight: 200;
  line-height: normal;
  text-align: center;
  color: var(--c-primary);
}
.si-banda__texto p { margin: 0; }