/* Home · "La oportunidad que estabas esperando" — propuesta C "Noche" elegida por el cliente (2026-10-06):
   azul noche como el pie y el menú móvil, la foto real se funde con la oscuridad (máscara, sin capa de color),
   textos más anchos y sección más baja que la original. Mismos textos, enlaces, vídeo y foto.
   La sección conserva las clases del original (márgenes negativos por ancho); se dobla la clase para ganarles. */
.ecb-op.ecb-op {
  --op-navy: #093a5d;
  --op-gold: #df9b11;
  --op-gold-soft: #f5be4f;
  --op-ink: #ffffff;
  --op-ink-2: #c9dceb;
  --op-pad: clamp(20px, 5vw, 72px);
  --op-max: 1240px;
  --op-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  gap: 0;
  align-items: start;
  min-height: 0;
  padding: 0 0 clamp(40px, 8vw, 64px);
  /* Vertical (180°): abajo es #041c30 en todo el ancho, igual que el fundido de la foto (con 160° se veía el corte). */
  background: linear-gradient(180deg, #0a3556 0%, #062a44 52%, #041c30 100%);
  color: var(--op-ink);
  font-family: "Open Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: clamp(72px, 9vw, 130px);
}
.ecb-op.ecb-op *, .ecb-op.ecb-op *::before, .ecb-op.ecb-op *::after { box-sizing: border-box; }
.ecb-op.ecb-op ::selection { background: var(--op-gold-soft); color: var(--op-navy); }

/* Foto */
.ecb-op .op-photo { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 10; max-height: 420px; }
.ecb-op .op-photo img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 45% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Texto */
.ecb-op .op-copy { position: relative; z-index: 2; display: grid; align-content: start; padding: 0 var(--op-pad); margin-top: clamp(-96px, -12vw, -48px); }
.ecb-op .op-lead {
  margin: 0 0 6px;
  color: var(--op-gold-soft);
  font: 400 clamp(1.7rem, 1.05rem + 1.7vw, 2.55rem)/1.1 Lobster, cursive;
  letter-spacing: 0.005em;
}
.ecb-op .op-title {
  margin: 0;
  color: var(--op-ink);
  font: 800 clamp(2.35rem, 1.35rem + 2.7vw, 3.75rem)/1.04 "Open Sans", system-ui, sans-serif;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ecb-op .op-q { margin: clamp(22px, 2.4vw, 32px) 0 8px; color: var(--op-ink); font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.4; }
.ecb-op .op-q strong { font-weight: 700; }
.ecb-op .op-text { margin: 0; max-width: 64ch; color: var(--op-ink-2); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.65; text-wrap: pretty; }

/* Botones: las dos ediciones; la de primavera rellena, la de otoño con borde. */
.ecb-op .op-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 2.6vw, 36px); }
.ecb-op .op-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 0 20px 0 24px; border-radius: 999px;
  background: var(--op-gold); color: #fff;
  font: 700 0.95rem/1 "Open Sans", system-ui, sans-serif; letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(2, 16, 30, 0.8);
  transition: background-color 200ms var(--op-ease), transform 200ms var(--op-ease), box-shadow 200ms var(--op-ease);
}
.ecb-op .op-btn svg { width: 18px; height: 18px; flex: none; transition: transform 200ms var(--op-ease); }
.ecb-op .op-btn:hover { background: var(--op-gold-soft); color: #fff; transform: translateY(-1px); }
.ecb-op .op-btn:hover svg { transform: translateX(3px); }
.ecb-op .op-btn:active { transform: translateY(0); }
.ecb-op .op-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.ecb-op .op-btn + .op-btn { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.ecb-op .op-btn + .op-btn:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; box-shadow: inset 0 0 0 1.5px #ffffff; }

/* Vídeo */
.ecb-op .op-video { position: relative; z-index: 3; margin: 0; padding: clamp(28px, 5vw, 40px) var(--op-pad) 0; }
.ecb-op .op-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #041c30;
  box-shadow: 0 28px 60px -24px rgba(2, 16, 30, 0.75), 0 8px 18px -10px rgba(2, 16, 30, 0.5);
}
.ecb-op .op-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; }

@media (min-width: 1025px) {
  .ecb-op.ecb-op {
    /* Columna de texto ancha (menos renglones = sección más baja). */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    column-gap: 40px; row-gap: 36px;
    padding: 88px max(var(--op-pad), calc((100vw - var(--op-max)) / 2)) 80px;
  }
  /* La máscara va en el contenedor: así el fundido inferior (::after) también se desvanece hacia la izquierda y no deja costura. */
  .ecb-op .op-photo {
    position: absolute; inset: 0 0 0 auto; width: 56%; max-height: none; aspect-ratio: auto; z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  }
  .ecb-op .op-photo img { object-position: 46% 32%; -webkit-mask-image: none; mask-image: none; }
  .ecb-op .op-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(0deg, #041c30, transparent); }
  .ecb-op .op-copy { grid-column: 1; grid-row: 1; padding: 0; margin: 0; }
  .ecb-op .op-text { max-width: 60ch; }
  .ecb-op .op-video { grid-column: 1 / span 2; grid-row: 2; width: min(580px, 46%); padding: 0; }
}

@media (max-width: 480px) {
  .ecb-op .op-ctas { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ecb-op .op-btn { width: 100%; }
}

/* Un solo momento de movimiento: la foto "se enciende" al llegar a la sección. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ecb-op .op-photo img { animation: ecb-op-light linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes ecb-op-light { from { filter: brightness(0.45) saturate(0.7); } to { filter: none; } }