/*
 * MiRed Service Cards — Scroll-driven sticky expansion
 * Cards = 25cqw collapsed, 50cqw expanded. Container = 100% del wrapper.
 */

/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --msc-inner-margin:  8px;
  --msc-inner-radius:  16px;
  --msc-outer-radius:  24px;
  --msc-card-bg:       #f4f4f4;
  --msc-btn-color:     #1253ED;
  --msc-text-dark:     #161616;
  --msc-font:          'Nunito', sans-serif;
  --msc-row-gap:       16px;
}

/* ─── Wrapper ────────────────────────────────────────────────────────────── */
.mired-service-cards-wrapper {
  width: 100%;
}

.mired-sc-section-title {
  font-family:   var(--msc-font);
  font-size:     2rem;
  font-weight:   700;
  color:         var(--msc-text-dark);
  margin-bottom: 1.5rem;
}

/* ─── Scroll driver — 250 vh tall ────────────────────────────────────────── */
.mired-sc-scroll-driver {
  /* Recorrido de scroll por card (en vh). Subilo para dar más tiempo de
     lectura, bajalo para pasar más rápido. */
  --msc-step:   45;
  --msc-header: 0px; /* alto del header fijo; lo mide el JS */
  --msc-offset: 0px; /* desplazamiento extra (control de Elementor) */
  --msc-cards:  4;   /* lo pone el JS */
  --msc-view:   calc(100vh - var(--msc-header) - var(--msc-offset));
  /* Alto real del panel (cards + hint + CTA); lo mide el JS. Sin JS cae al
     viewport entero. */
  --msc-pane:   var(--msc-view);
  position:     relative;
  /* Alto reservado = el panel anclado + un paso por card */
  height:       calc(var(--msc-pane) + var(--msc-cards) * var(--msc-step) * 1vh);
}

@supports (height: 100dvh) {
  .mired-sc-scroll-driver { --msc-view: calc(100dvh - var(--msc-header) - var(--msc-offset)); }
}

/* ─── Sticky pane — mide lo que mide su contenido (sin aire antes/después de
   las cards) y se ancla centrado en el viewport: header + mitad del sobrante ── */
.mired-sc-sticky {
  position:        sticky;
  top:             calc(var(--msc-header) + var(--msc-offset) + max(0px, (var(--msc-view) - var(--msc-pane)) / 2));
  height:          auto;
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}

/* ─── Two-row layout — 100% del contenedor, referencia para cqw ─────────── */
.mired-sc-rows {
  container-type: inline-size;
  display:        flex;
  flex-direction: column;
  gap:            var(--msc-row-gap);
  width:          100%;
}

/* Row 1 izquierda, Row 2 derecha — crea el offset visual */
.mired-sc-row {
  display: flex;
  gap:     0;
}

.mired-sc-row--1 { justify-content: flex-start; }
.mired-sc-row--2 { justify-content: flex-end;   }

/* ─── Card — 25% del contenedor colapsada, 50% expandida ─────────────────── */
.mired-sc-card {
  flex-shrink: 0;
  width:       25cqw;
  height:      15cqw;
  overflow:    hidden;
  transition:  width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mired-sc-card.is-active {
  width: 50cqw;
}

/* ─── Gray outer shell ───────────────────────────────────────────────────── */
.mired-sc-outer {
  width:          100%;
  height:         100%;
  background:     var(--msc-card-bg);
  border-radius:  var(--msc-outer-radius);
  padding:        var(--msc-inner-margin);
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  gap:            0;
  overflow:       hidden;
  position:       relative;
}

/* ─── Colored inner block — llena la card colapsada, mitad al expandir ───── */
.mired-sc-colored {
  flex-shrink:      0;
  width:            100%;
  height:           calc(15cqw - 2 * var(--msc-inner-margin));
  background-color: var(--card-color, #50B940);
  border-radius:    var(--msc-inner-radius);
  display:          flex;
  flex-direction:   column;
  align-items:      flex-start;
  justify-content:  center;
  padding:          32px;
  transition:       width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mired-sc-card.is-active .mired-sc-colored {
  width: 50%;
}

/* ─── Title — blanco y centrado ──────────────────────────────────────────── */
.mired-sc-colored .mired-sc-title {
  color:       #ffffff;
  font-family: var(--msc-font);
  font-size:   18px; /* 18px */
  font-weight: 700;
  line-height: 1.2;
  text-align:  left;
  margin:      0;
}

/* ─── Arrow button — solo en CTA ─────────────────────────────────────────── */
.mired-sc-btn {
  position:         absolute;
  bottom:           20px;
  right:            20px;
  z-index:          2;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            32px;
  height:           32px;
  background-color: var(--msc-btn-color);
  border-radius:    8px;
  color:            #ffffff;
  text-decoration:  none;
  transition:       background-color 0.2s ease;
}

.mired-sc-btn:hover,
.mired-sc-btn:focus {
  background-color: #0d3fa6;
  outline:          2px solid #fff;
  outline-offset:   2px;
}

.mired-sc-btn--no-link { cursor: default; }

.mired-sc-btn svg {
  display:     block;
  flex-shrink: 0;
}

/* ─── Description panel ─────────────────────────────────────────────────── */
.mired-sc-desc-panel {
  /* Ancho final fijo (mitad de la card abierta): el texto se maqueta una sola
     vez en su forma definitiva y no se re-acomoda mientras la card crece. */
  flex:            0 0 auto;
  width:           calc(25cqw - var(--msc-inner-margin));
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  /* Padding escala con el contenedor (igual que la card = 15cqw), para no
     comerse el espacio del texto cuando la pantalla se comprime.
     Vertical más chico que horizontal: el alto es el recurso escaso. */
  padding:         clamp(8px, 1.6cqw, 28px) clamp(14px, 2.4cqw, 32px);
  opacity:        0;
  transition:     opacity 0s; /* al cerrar desaparece de golpe: sin texto cortado */
  pointer-events: none;
}

.mired-sc-card.is-active .mired-sc-desc-panel {
  opacity:        1;
  /* Aparece recién cuando la card terminó de abrirse (width dura 0.45s) */
  transition:     opacity 0.25s ease 0.42s;
  pointer-events: auto;
}

.mired-sc-desc-panel p {
  color:       var(--msc-text-dark);
  font-family: var(--msc-font);
  /* ponytail: el texto escala con el ancho del contenedor (cqw): hasta 18px en
     pantallas grandes (≈18/16/14) y NUNCA baja de 14px (piso pedido por el
     usuario). Medido: a 950px entran 14px justos.
     !important para ganarle al tamaño fijo (18px) que mete el control de
     tipografía de Elementor y que desbordaba ≤1250px. */
  font-size:   clamp(13px, 1.25cqw, 16px) !important;
  font-weight: 500;
  line-height: 1.25;
  text-align:  left;
  margin:      0;
}

/* ─── CTA card — gris, sin expansión ────────────────────────────────────── */
.mired-sc-card--cta {
  transition: none;
}

.mired-sc-card--cta .mired-sc-outer {
  position:        relative;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         20px;
}

/* Fila CTA: texto + flecha en la misma línea, centrados verticalmente */
.mired-sc-cta-row {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  width:           100%;
}

.mired-sc-title--cta {
  position:    static;
  flex:        1;
  /* !important: el control "Color del título de tarjeta" de Elementor apunta a
     .mired-sc-title (que el CTA también usa) y le mete el blanco de las cards de
     color. El CTA va sobre fondo gris, así que se mantiene oscuro sí o sí. */
  color:       var(--msc-text-dark) !important;
  font-family: var(--msc-font);
  font-size:   1rem;
  font-weight: 600;
  line-height: 1.4;
  margin:      0;
  text-align:  left;
}

/* Title as link — visually identical to the <h3>, link behaviour added */
a.mired-sc-title--cta-link {
  display:         block;
  text-decoration: none;
  color:           inherit;
  cursor:          pointer;
}

a.mired-sc-title--cta-link:focus-visible {
  outline:        2px solid var(--msc-btn-color);
  outline-offset: 3px;
  border-radius:  3px;
}

.mired-sc-card--cta .mired-sc-btn {
  position:    static;
  flex-shrink: 0;
}

/* ─── Responsive: mobile — scroll vertical dos zonas ────────────────────── */
@media (max-width: 900px) {

  /* Más recorrido por card en mobile: se lee sobre pantalla chica */
  .mired-sc-scroll-driver { --msc-step: 60; }

  /* Sticky: columna centrada, sin gap (el CTA se pega a la card) */
  .mired-sc-sticky {
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0;
  }

  /* Apilado con grid: todas las cards en la misma celda, el alto lo da la
     card más alta (nada de alto fijo: el texto largo ya no se corta). */
  .mired-sc-rows,
  .mired-sc-row {
    display: grid;
    gap:     0;
    width:   100%;
  }

  .mired-sc-row { grid-area: 1 / 1; }

  .mired-sc-card,
  .mired-sc-card.is-active {
    grid-area:      1 / 1;
    width:          100%;
    height:         auto;
    opacity:        0;
    transform:      scale(0.96) translateY(12px);
    transition:     opacity  0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index:        0;
  }

  .mired-sc-card.is-active {
    opacity:        1;
    transform:      none;
    pointer-events: auto;
    z-index:        1;
  }

  /* Shell: solo radios arriba — abajo se une con el botón CTA */
  .mired-sc-outer {
    flex-direction: column;
    height:         100%;
    padding:        0;
    overflow:       hidden;
    background:     var(--msc-card-bg);
    border-radius:  var(--msc-outer-radius) var(--msc-outer-radius) 0 0;
  }

  .mired-sc-card.is-active .mired-sc-outer {
    flex-direction: column;
  }

  .mired-sc-desc-panel {
    will-change: width, opacity;
  }

  /* Zona superior: color (62%) con título al fondo */
  .mired-sc-colored {
  width: 100%;
  /* ponytail: 200px = "un poco más grande"; sube/baja este valor si lo querés distinto */
  min-height: 200px;
  height: auto;
  background-color: var(--card-color, #50B940);
  /* Esquinas inferiores cuadradas: pega a ras con la descripción de abajo */
  border-radius: var(--msc-inner-radius) var(--msc-inner-radius) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  will-change: width;
}

.mired-sc-card.is-active .mired-sc-colored {
  width: 100%;
}

.mired-sc-card:not(.is-active) .mired-sc-desc-panel {
  display: none;
}

.mired-sc-desc-panel {
  overflow: hidden;
}

.mired-sc-card.is-active .mired-sc-desc-panel {
  width: 100%;
  opacity: 1;
}

.mired-sc-colored .mired-sc-title {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}

  /* Zona inferior: gris (38%) con descripción */
  .mired-sc-desc-panel,
  .mired-sc-card.is-active .mired-sc-desc-panel {
    position:        static;
    flex:            1;
    width:           100%;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         18px 24px 22px;
    opacity:         1;
    transition:      none;
    pointer-events:  auto;
    background:      var(--msc-card-bg);
  }

  .mired-sc-desc-panel p {
    color:       #3a3a3a;
    /* Móvil: 18px fijo (pedido). !important para ganarle al clamp !important
       de la regla desktop, que también aplica a este ancho. */
    font-size:   16px !important;
    font-weight: 500;
    line-height: 1.6;
  }

  /* La card CTA se oculta en el stack (se muestra como botón persistente) */
  .mired-sc-card--cta {
    display: none;
  }
}

/* ─── Indicador de scroll mobile ──────────────────────────────────────────── */
.mired-sc-scroll-hint {
  display: none;
}

@media (max-width: 900px) {
  .mired-sc-scroll-hint {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    margin-top:     14px;
    color:          rgba(0, 0, 0, 0.6);
    font-family:    var(--msc-font);
    font-size:      0.8rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    animation:      msc-hint-bounce 2s ease-in-out infinite;
    flex-shrink:    0;
  }

  .mired-sc-scroll-hint svg {
    display: block;
  }

  @keyframes msc-hint-bounce {
    0%, 100% { transform: translateY(0);   opacity: 0.6; }
    50%       { transform: translateY(6px); opacity: 1;   }
  }
}

/* ─── CTA mobile persistente (creado por JS, debajo del hint) ───────────── */
.mired-sc-mobile-cta {
  display: none;
}

@media (max-width: 900px) {
  .mired-sc-mobile-cta {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              12px;
    width:            100%;
    padding:          18px 24px;
    /* mismo gris que la card, radios solo abajo */
    background-color: var(--msc-card-bg);
    border-top:       1px solid rgba(0, 0, 0, 0.08);
    border-radius:    0 0 var(--msc-outer-radius) var(--msc-outer-radius);
    color:            var(--msc-text-dark);
    font-family:      var(--msc-font);
    font-size:        1rem;
    font-weight:      700;
    text-decoration:  none;
    flex-shrink:      0;
    transition:       background-color 0.18s ease;
  }

  .mired-sc-mobile-cta:active {
    background-color: #e8e8e8;
  }

  .mired-sc-mobile-cta span {
    flex: 1;
  }

  .mired-sc-mobile-cta svg {
    flex-shrink: 0;
    color:       var(--msc-btn-color);
  }
}

/* ─── Accesibilidad: sin movimiento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mired-sc-card,
  .mired-sc-desc-panel {
    transition: none;
  }

  .mired-sc-card {
    width: 50cqw;
  }

  .mired-sc-desc-panel {
    opacity:   1;
    transform: none;
  }
}