/* =========================================================================
   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 ========================== */

/* Rejilla de dos columnas en flujo normal, no coordenadas del artboard.
   El diseno separa las columnas 10.428rem (11.0958 de margen, 45.5619 de
   tarjeta, 67.0857 la segunda) y ese mismo hueco es el que se usa tambien
   entre filas: los cuatro espacios alrededor del cruce central miden lo
   mismo.

   Tenia que dejar de ser absoluto para que eso se cumpla siempre. Con un
   paso vertical fijo, una tarjeta cuyo titulo o texto ocupara un renglon
   mas crecia hacia abajo y se comia el hueco de su fila: en el sitio real
   las filas quedaban a menos de 2rem mientras las columnas seguian a 10.4.
   En flujo, el `row-gap` se mide desde el borde de la tarjeta mas alta y no
   depende del contenido.

   `justify-content: center` deja los mismos 11.0991rem de margen a cada
   lado que marca el artboard. */
.si-cards {
  display: grid;
  grid-template-columns: repeat(2, 45.5619rem);   /* 728.991 */
  justify-content: center;
  gap: 10.428rem;                    /* 166.848 — el hueco entre columnas */
  /* La primera fila arranca en 77.6875rem del artboard y el tramo en
     79.686: la rejilla sube esa diferencia. */
  margin-top: -1.9985rem;
  /* El aire que el artboard deja bajo la ultima fila. */
  padding-bottom: 8.2534rem;
}

.si-card {
  position: relative;
  /* Alto minimo, no fijo: un titulo de dos renglones estira la tarjeta y su
     forma con ella, y las de su fila la acompanan. */
  min-height: 39.6032rem;            /* 633.651 */
  /* Aire bajo el ultimo renglon de contacto, el que deja el artboard. */
  padding-bottom: 2.85rem;
}
.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);
}

/* El alto del tramo lo reescribe js/urreta.js al cambiar de ramo, para que
   un ramo con menos filas no deje debajo el hueco de las que no tiene. El
   cambio es seco a proposito: con `transition: height` el navegador se
   queda con el alto de partida cuando lo que cambia es la variable que hay
   dentro del `var()`, y el tramo no llegaba a encogerse nunca. */

/* ==================== 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 paso que la plantilla deja en `--si-paso`.

   El paso del artboard eran 47.4392rem y dejaba 23.5rem de aire entre el
   boton de una fila y el logotipo de la siguiente —mas del doble que el
   hueco entre columnas—, asi que la reja se leia como filas sueltas. Ahora
   son 33.3176: lo que mide la fila (24.4782) mas el mismo hueco horizontal
   (8.8394). */
.si-logo {
  position: absolute;
  top: calc(204rem + var(--si-fila, 0) * var(--si-paso, 33.3176rem));   /* 3264 */
  width: 18.2901rem;                 /* 292.641 */
  height: 18.2901rem;
  overflow: hidden;
}
/* El hueco del artboard es cuadrado y la mayoria de los logotipos del diseno
   tambien (347x347), pero no todos: varios SVG son apaisados —uno mide
   225x10— y forzarlos al cuadrado los estiraba hasta hacerlos ilegibles. Con
   `contain` el logotipo entra entero y centrado, con aire alrededor; los que
   ya son cuadrados llenan el hueco igual que antes. Es lo mismo que hace la
   rejilla de plataformas del area interna con los logotipos del CMS. */
.si-logo img {
  position: absolute;
  left: 0.11%;
  top: 0.02%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* 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) * var(--si-paso, 33.3176rem));   /* 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. El envoltorio y el
   aviso tambien: en columna llevan `display` propio, que sin esto le gana
   al `hidden` del navegador y dejaba ver todos los ramos a la vez. */
.si-logo[hidden],
.si-descarga[hidden],
.si-aseg[hidden],
.si-aviso-ramo[hidden] { display: none; }

/* ========================= AVISO DE UN RAMO ============================
   Un ramo sin aseguradoras —Danos— muestra en su lugar un aviso con el
   contacto directo. Ocupa el hueco de la primera fila de logotipos, con el
   ancho del panel de arriba, y se viste como las tarjetas de atencion:
   el degradado de marca, texto blanco y los mismos renglones de contacto.
   El texto va a la izquierda y los contactos a la derecha; en el marcado
   siguen su orden de lectura (texto, contactos, cierre).
   -------------------------------------------------------------------- */
.si-aviso-ramo {
  position: absolute;
  top: 204rem;                       /* la primera fila de logotipos */
  left: 11.1419rem;                  /* 178.27, como el panel */
  width: 101.5126rem;                /* 1624.202 */
  /* Lo que mide una fila —logotipo, aire y boton—, para que bajo el aviso
     quede el mismo aire que bajo la ultima fila de los otros ramos. */
  min-height: 24.4782rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "texto  filas"
    "cierre filas";
  align-content: center;
  column-gap: 6rem;
  row-gap: 1.75rem;                  /* el de las tarjetas */
  padding: 4rem 6.9621rem;           /* el margen interior de las tarjetas */
  border-radius: 1rem;               /* 16, el de la forma de las tarjetas */
  background-image: var(--grad-cta);
  box-shadow: 0 1.2652rem 2.8116rem rgba(143, 70, 100, 0.25);
  color: var(--c-white);
}
.si-aviso-ramo__texto {
  grid-area: texto;
  align-self: end;
  font-size: 2.25rem;                /* 36 */
  font-weight: 200;
  line-height: 1.25;
}
.si-aviso-ramo__cierre {
  grid-area: cierre;
  align-self: start;
  font-size: 1.25rem;                /* 20, el texto de las tarjetas */
  font-weight: 300;
  line-height: normal;
}
.si-aviso-ramo__filas {
  grid-area: filas;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;                    /* 9, el paso de los renglones */
}

/* 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 lo
   reescribe js/urreta.js al cambiar de ramo). Va bajo la ultima fila con el
   mismo aire que separa las filas entre si. */
.si-vermas {
  position: absolute;
  top: calc(237.3176rem + (var(--si-filas, 2) - 1) * var(--si-paso, 33.3176rem));
  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; }