/* =========================================================
   HERMANAS DE LA SOLEDAD — estilo recto/serio
   (usa el MISMO markup que historia: #historia-layout, .historia-texto, etc.)
   Compatible con tokens de header.css: --brand, --hdr-h, --gutter, --container, --text-dark
   ========================================================= */
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text-dark);
  background: #fff;
}
:root{
  --ui-border: rgba(0,0,0,.10);
  --ui-shadow: 0 18px 55px rgba(0,0,0,.14);
}


:root{
  --ui-border: rgba(0,0,0,.10);
  --ui-shadow: 0 18px 55px rgba(0,0,0,.14);
}

/* Layout principal: 2 columnas rectas */
#historia-layout{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  width: 100%;
  min-height: calc(100svh - var(--hdr-h));
  background: #fff;
}

/* Columna izquierda */
.historia-texto{
  padding: 46px clamp(18px, 4vw, 64px) 64px;
  max-width: 980px;
}

.titulo-historia{
  font-size: clamp(2.0rem, 3.2vw, 3.0rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(0,0,0,.88);
  margin: 0 0 18px 0;
  position: relative;
  padding-left: 14px;
}

/* Barra vertical (toque “institucional”) */
.titulo-historia::before{
  content:"";
  position: absolute;
  left: 0;
  top: .12em;
  width: 4px;
  height: .95em;
  background: var(--brand);
}

.intro-historia{
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(0,0,0,.76);
  margin: 0 0 34px 0;
  /*max-width: 70ch;*/
}

/* Bloques */
.bloque-historia{
  margin: 0 0 26px 0;
  padding: 16px 0 16px 16px;
  border-left: 4px solid var(--brand);
  background: linear-gradient(90deg, rgba(75,42,136,.06), transparent 58%);
}

.bloque-historia h3{
  margin: 0 0 10px 0;
  font-size: 1.18rem;
  font-weight: 950;
  color: rgba(0,0,0,.86);
  letter-spacing: -0.01em;
}

.bloque-historia p{
  margin: 0 0 10px 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(0,0,0,.76);
}

.bloque-historia em{ font-style: italic; }
.bloque-historia strong{ color: rgba(0,0,0,.88); }

/* Columna derecha: imagen “full” fija y recta */
.historia-imagen-full{
  position: sticky;
  top: var(--hdr-h);
  height: calc(100svh - var(--hdr-h));
  overflow: hidden;
  background: #111;
  border-left: 1px solid rgba(0,0,0,.08);
}



/* Sombra sutil hacia la izquierda para integrarlo */
.historia-imagen-full::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(900px 700px at 10% 50%, rgba(0,0,0,.25), transparent 60%),
              linear-gradient(90deg, rgba(0,0,0,.22), transparent 45%);
  pointer-events: none;
}


/* Responsive */
@media (max-width: 980px){
  #historia-layout{
    grid-template-columns: 1fr;
  }

  .historia-imagen-full{
    position: relative;
    top: auto;
    height: 320px;
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .historia-texto{
    padding: calc(var(--hdr-h) + 32px) 18px 46px;
  }
}
/* =========================================================
   Slider suave en la imagen derecha (crossfade)
   Si hay varias <img> dentro de .historia-imagen-full
   ========================================================= */



.historia-imagen-full img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
  z-index: 1;
}

.historia-imagen-full img.is-active{
  opacity: 1;
}


/* Si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .historia-imagen-full img{ transition: none; }
}

/* Dots de navegación */
.slider-dots{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}
.slider-dot{
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 2px solid rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.slider-dot.active{
  background: #fff;
  transform: scale(1.2);
}