/* Capa visual V3: portada, textura y cabeceras interiores */
.home-carousel {
  min-height:730px;
  display:block
}

.home-carousel .home-slides {
  position:absolute;
  inset:0 0 58px;
  z-index:0
}

.home-slide {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.015);
  transition:opacity .8s ease,transform 6.5s linear,visibility 0s .8s;
  background:#0d2943;
  overflow:hidden
}

.home-slide.is-active {
  opacity:1;
  visibility:visible;
  transform:scale(1);
  transition:opacity .8s ease,transform 6.5s linear,visibility 0s
}

.home-slide:before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--slide-image) center/cover no-repeat
}

.home-slide:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#071c30f7 0%,#09253eda 42%,#0a263e62 80%),linear-gradient(0deg,#0a2239 0%,transparent 50%)
}

.home-slide-layout {
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  padding-top:90px;
  padding-bottom:118px
}

.home-slide-content {
  max-width:820px
}

.home-slide h1,.home-slide h2 {
  font-size:clamp(3.6rem,6.6vw,7rem);
  line-height:1.01;
  color:white;
  margin-bottom:27px;
  max-width:800px
}

.home-slide h1 em,.home-slide h2 em {
  font-style:normal;
  color:#ff858f
}

.home-slide p {
  color:#e6eff7;
  font-size:clamp(1.05rem,1.5vw,1.27rem);
  max-width:580px;
  line-height:1.55
}

.home-carousel .home-hero-aside {
  position:absolute;
  z-index:3;
  right:max(24px,calc((100vw - 1142px)/2));
  bottom:150px;
  width:210px;
  pointer-events:auto
}

.home-carousel-ui {
  position:absolute;
  z-index:5;
  bottom:85px;
  left:0;
  right:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.carousel-tabs,.carousel-arrows {
  display:flex;
  gap:10px;
  align-items:center
}

.carousel-tabs button {
  background:none;
  border:0;
  color:#ffffffb9;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  cursor:pointer;
  font:800 .8rem Manrope,sans-serif
}

.carousel-tabs button i {
  width:38px;
  height:2px;
  background:#ffffff6a;
  display:block;
  position:relative;
  overflow:hidden
}

.carousel-tabs button.is-active {
  color:#fff
}

.carousel-tabs button.is-active i {
  background:#fff
}

.carousel-tabs button.is-active i:after {
  content:"";
  position:absolute;
  inset:0;
  background:#ed4856;
  animation:slide-progress 6.5s linear forwards
}

.carousel-arrows button {
  width:40px;
  height:40px;
  border:1px solid #ffffff82;
  border-radius:50%;
  background:#0b2a4377;
  color:white;
  font-size:1.1rem;
  cursor:pointer
}

.carousel-arrows button:hover,.carousel-arrows button:focus-visible {
  background:var(--red)
}

.carousel-arrows button[data-pause] {
  font-size:.85rem
}

.home-carousel .home-hero-bottom {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:4
}

.home-explainer {
  position:relative;
  isolation:isolate;
  background:#0a2a45
}

.home-explainer:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('textura-cmice.jpg') center/cover no-repeat;
  filter:grayscale(.35)
}

.home-explainer:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#09253ef0,#0a2945d9 55%,#09243db9),repeating-linear-gradient(135deg,transparent 0 28px,#ffffff0b 29px 30px)
}

.home-explainer-grid {
  position:relative
}

.explainer-cards article {
  background:#082a49bb;
  backdrop-filter:blur(8px);
  border:1px solid #ffffff66;
  box-shadow:0 16px 40px #001a2d55
}

.explainer-cards article:first-child {
  transform:translateX(-18px)
}

.explainer-cards article:last-child {
  transform:translateX(18px)
}

.inner-hero {
  position:relative;
  isolation:isolate;
  min-height:450px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:96px 0
}

.inner-hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--inner-image) center/cover no-repeat;
  transform:scale(1.03)
}

.inner-hero:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#09233ceb,#092a47cc 58%,#092a4794),linear-gradient(0deg,#071e32c7,transparent 65%),repeating-linear-gradient(130deg,transparent 0 34px,#ffffff13 35px 36px)
}

.inner-hero-content {
  position:relative;
  width:100%
}

.inner-hero .kicker {
  color:#ffb4bd
}

.inner-hero h1 {
  max-width:930px;
  font-size:clamp(2.8rem,5.3vw,5.7rem);
  line-height:1.07
}

.inner-hero p {
  max-width:720px;
  font-size:1.19rem
}

.inner-intro-mark {
  position:absolute;
  right:24px;
  bottom:-72px;
  width:180px;
  border-top:2px solid #ff6875;
  padding:13px 0 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.inner-intro-mark b {
  font-size:1.8rem;
  color:#ff929b
}

.inner-promo {
  background:#0c2b47;
  color:white;
  padding:75px 0;
  overflow:hidden
}

.inner-promo-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:65px;
  align-items:center
}

.inner-promo-visual {
  height:330px;
  background:linear-gradient(0deg,#102d49a6,transparent),var(--promo-image) center/cover no-repeat;
  box-shadow:18px 18px 0 #ffffff17;
  position:relative
}

.inner-promo-visual:after {
  content:"CMICE";
  position:absolute;
  bottom:15px;
  left:25px;
  color:#ffffffea;
  font:800 3rem Manrope,sans-serif;
  letter-spacing:-.06em
}

.inner-promo .home-kicker {
  color:#ffb6bc
}

.inner-promo h2 {
  font-size:clamp(2.3rem,3.5vw,4rem);
  line-height:1.08
}

.inner-promo p {
  color:#dae7ef;
  font-size:1.16rem;
  max-width:590px
}

.inner-promo .btn {
  margin-top:10px
}

@keyframes slide-progress {
  from {
    transform:translateX(-100%)
  }
  to {
    transform:translateX(0)
  }
}

@media(max-width:900px) {
  .home-carousel .home-hero-aside {
    display:none
  }
  .home-slide-content {
    max-width:690px
  }
  .inner-intro-mark {
    display:none
  }
  .inner-promo-grid {
    gap:35px
  }
  .inner-promo-visual {
    height:300px
  }
}

@media(max-width:650px) {
  .home-carousel {
    min-height:660px
  }
  .home-carousel .home-slides {
    bottom:50px
  }
  .home-slide-layout {
    padding-top:60px;
    padding-bottom:100px
  }
  .home-slide h1,.home-slide h2 {
    font-size:clamp(3rem,11vw,4.2rem)
  }
  .home-slide .actions {
    gap:8px
  }
  .home-slide .btn {
    min-height:48px;
    padding:9px 14px;
    font-size:.78rem
  }
  .home-carousel-ui {
    bottom:70px
  }
  .carousel-tabs button i {
    width:25px
  }
  .carousel-arrows button {
    width:33px;
    height:33px
  }
  .carousel-arrows button[data-pause] {
    font-size:.7rem
  }
  .home-carousel .home-hero-bottom .wrap {
    padding-top:14px;
    padding-bottom:14px
  }
  .home-explainer:before {
    background-position:60% center
  }
  .explainer-cards article:first-child,.explainer-cards article:last-child {
    transform:none
  }
  .inner-hero {
    min-height:410px;
    padding:70px 0
  }
  .inner-hero h1 {
    font-size:clamp(2.5rem,10vw,3.5rem)
  }
  .inner-promo {
    padding:58px 0
  }
  .inner-promo-grid {
    grid-template-columns:1fr
  }
  .inner-promo-visual {
    height:220px
  }
}

@media(prefers-reduced-motion:reduce) {
  .home-slide,.home-slide.is-active {
    transition:none;
    transform:none
  }
  .carousel-tabs button.is-active i:after {
    animation:none
  }
}

/* Photographs are real HTML images, with a controlled overlay for legible headings. */
.home-slide-photo, .inner-hero-photo, .explainer-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-slide-photo {
  object-position: center 45%;
}

.home-slide::before, .inner-hero::before, .home-explainer::before {
  content: none;
}

.home-slide::after {
  background: linear-gradient(90deg, #071c30ed 0%, #09253da9 40%, #09253d29 78%), linear-gradient(0deg, #0a2239ba, transparent 48%);
}

.inner-hero-photo {
  z-index: -2;
  object-position: center 42%;
}

.inner-hero::after {
  background: linear-gradient(90deg, #09233ce8 0%, #092a47a8 47%, #092a4726 85%), linear-gradient(0deg, #071e3288, transparent 70%);
}

.explainer-photo {
  z-index: -2;
  filter: grayscale(.25);
}

.home-explainer::after {
  background: linear-gradient(90deg, #09253eea 0%, #0a2945c2 58%, #09243d84);
}

/* The image-led section gives every interior page a second visual chapter. */
.inner-story {
  padding: 100px 0;
  background: #f2f6f9;
}

.inner-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(35px, 6vw, 95px);
}

.inner-story-image {
  height: 590px;
  position: relative;
  overflow: hidden;
  background: #153450;
  box-shadow: 22px 22px 0 #dce8ef;
}

.inner-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inner-story-image span {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 9px 13px;
  background: #08263fdd;
  color: #fff;
  font: 800 .72rem Manrope, Arial, sans-serif;
  letter-spacing: .13em;
}

.inner-story-content h2 {
  font-size: clamp(2.35rem, 3.7vw, 4.1rem);
  line-height: 1.1;
  margin: 16px 0 22px;
  max-width: 650px;
}

.inner-story-content > p {
  font-size: 1.17rem;
  max-width: 600px;
  color: var(--muted);
}

.inner-story-steps {
  margin: 32px 0;
  border-top: 1px solid var(--line);
}

.inner-story-steps > div {
  display: flex;
  gap: 22px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.inner-story-steps b {
  color: var(--red);
  min-width: 78px;
  font: 800 .9rem Manrope, Arial, sans-serif;
}

.inner-story-steps span {
  display: grid;
  gap: 3px;
}

.inner-story-steps strong {
  font: 800 1.02rem Manrope, Arial, sans-serif;
}

.inner-story-steps small {
  color: var(--muted);
  font-size: .94rem;
}

@media (max-width: 900px) {
  .inner-story {
    padding: 68px 0;
  }
  .inner-story-layout {
    grid-template-columns: 1fr;
  }
  .inner-story-image {
    height: 360px;
    box-shadow: 12px 12px 0 #dce8ef;
  }
}

@media (max-width: 650px) {
  .home-slide-photo {
    object-position: 65% center;
  }
  .inner-hero-photo {
    object-position: 60% center;
  }
  .inner-story-image {
    height: 260px;
  }
}