/* ZOESYSTEM MLM · cierre.css (M11)
   Bloque D, cierre de la página: S11 «Míralo en acción», S12 «Empieza en 3 pasos», S13 «Planes» y S14 «Preguntas frecuentes»
   (pantallas.md, S11 a S14; skill de diseño 9.7, 9.9, 9.10 y 9.11).
   Va después de secciones.css y antes de animaciones.css. Las capas se declaran en base.css; aquí se amplían «secciones» y «animaciones».
   Colores, espacios y radios salen de los tokens de base.css. Sin estilos en línea y sin recursos de otros dominios.
   Todo el contenido está en el HTML: sin JavaScript se ve y se entiende igual (las preguntas son <details> nativos).
   Las clases llevan prefijo por sección (enaccion, como, planes, preguntas) para no chocar con las de M07 a M10. */

@layer secciones {

  /* ---------- Piezas comunes del bloque ---------- */
  .cierre__intro { margin: var(--e-4) 0 0; color: var(--ink-700); }
  .cierre__accion { margin-top: var(--e-6); }
  @media (min-width: 900px) { .cierre__accion { margin-top: var(--e-7); } }

  /* ---------- S11 Míralo en acción: espacios «Próximamente» (sin imágenes del sistema ni botón de reproducir) ---------- */
  .enaccion__espacios { display: grid; gap: var(--e-3); }
  .enaccion__capturas { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }

  .espacio {
    --trama: rgba(116, 231, 202, .07);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 72px;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    background-color: var(--pine-900);
    background-image: repeating-linear-gradient(135deg, var(--trama) 0 2px, transparent 2px 16px);
    color: var(--on-dark);
  }
  /* Anillo de la marca: decorativo, grande y tenue */
  .espacio__anillo {
    position: absolute;
    right: -14%;
    bottom: -42%;
    width: 72%;
    max-width: 280px;
    aspect-ratio: 1;
    color: var(--zoe-500);
    opacity: .28;
    pointer-events: none;
  }
  .espacio__anillo .icono { width: 100%; height: 100%; }
  .espacio__contenido { position: relative; display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
  .espacio__icono { flex: none; color: var(--zoe-200); opacity: .4; }
  .espacio__icono .icono { width: 28px; height: 28px; }
  .espacio__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); min-width: 0; }
  .espacio__leyenda { margin: 0; max-width: none; color: var(--on-dark); font-size: 16px; font-weight: 700; line-height: 1.3; }

  /* El video: 16:9 a lo ancho, contenido al centro */
  .espacio--video {
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: var(--e-5) var(--e-4);
    border-radius: var(--r-lg);
    text-align: center;
  }
  .espacio--video .espacio__contenido { flex-direction: column; gap: var(--e-3); }
  .espacio--video .espacio__icono .icono { width: 40px; height: 40px; }
  .espacio--video .espacio__texto { align-items: center; }
  .espacio--video .espacio__leyenda { font-size: 17px; }

  /* En pantallas grandes el bloque no pasa de 1000 px: un video 16:9 de 1240 px ocuparía casi toda la pantalla */
  @media (min-width: 900px) {
    .enaccion__espacios { max-width: 1000px; margin-inline: auto; }
  }
  @media (min-width: 640px) {
    .enaccion__espacios { gap: var(--e-4); }
    .enaccion__capturas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
    .espacio--captura {
      justify-content: center;
      aspect-ratio: 4 / 3;
      padding: var(--e-4);
      border-radius: var(--r-lg);
      text-align: center;
    }
    .espacio--captura .espacio__contenido { flex-direction: column; gap: var(--e-3); }
    .espacio--captura .espacio__icono .icono { width: 36px; height: 36px; }
    .espacio--captura .espacio__texto { align-items: center; }
  }

  /* ---------- S12 Empieza en 3 pasos: anillos numerados unidos por una línea ---------- */
  .como__lista { --sep: var(--e-6); display: grid; margin: 0; padding: 0; list-style: none; }
  .como__paso {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--e-4);
    align-items: start;
    padding-bottom: var(--e-6);
  }
  .como__paso:last-child { padding-bottom: 0; }

  .como__anillo {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--zoe-700);
    border-radius: 50%;
    color: var(--ink-900);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
  /* El relleno va en una capa propia para poder animar solo su opacidad */
  .como__anillo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--zoe-100);
  }
  /* El tercer paso termina en pino 900 con el número blanco */
  .como__paso:last-child .como__anillo { border-color: var(--pine-900); color: var(--white); }
  .como__paso:last-child .como__anillo::before { background: var(--pine-900); }

  /* Línea de unión: de un anillo al siguiente (vertical en celular) */
  .como__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 60px;
    bottom: 4px;
    width: 2px;
    background: var(--zoe-400);
    transform-origin: top center;
  }
  .como__cuerpo { min-width: 0; padding-top: var(--e-1); }
  .como__cuerpo h3 { margin: 0 0 var(--e-2); }
  .como__cuerpo p { margin: 0; color: var(--ink-700); }

  @media (min-width: 640px) {
    .como__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sep); }
    .como__paso { display: block; padding-bottom: 0; }
    .como__anillo { margin-bottom: var(--e-4); }
    .como__paso:not(:last-child)::after {
      top: 27px;
      bottom: auto;
      left: 60px;
      right: calc(4px - var(--sep));
      width: auto;
      height: 2px;
      transform-origin: left center;
    }
    .como__cuerpo { padding-top: 0; }
  }
  @media (min-width: 900px) { .como__lista { --sep: var(--e-7); } }

  /* ---------- S13 Planes: tres tarjetas sin precios («Cotiza a tu medida») ---------- */
  .planes__lista { display: grid; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
  .planes__tarjeta {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
    padding: var(--e-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--mist-50);
    color: var(--ink-900);
  }
  .planes__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
  .planes__texto { margin: 0; color: var(--ink-700); }
  .planes__cotiza {
    margin: auto 0 0;
    padding-top: var(--e-4);
    border-top: 1px solid var(--line);
    max-width: none;
    color: var(--ink-900);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
  }
  .planes__tarjeta--destacada {
    --foco: var(--foco-oscuro);
    border-color: var(--pine-900);
    background: var(--pine-900);
    color: var(--white);
    box-shadow: var(--sombra-3);
  }
  .planes__tarjeta--destacada h3, .planes__tarjeta--destacada .planes__cotiza { color: var(--white); }
  .planes__tarjeta--destacada .planes__texto { color: var(--on-dark); }
  .planes__tarjeta--destacada .planes__cotiza { border-top-color: var(--pine-line); }

  @media (min-width: 900px) {
    .planes__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); padding-top: var(--e-3); }
    .planes__tarjeta { padding: 28px; }
    /* La destacada sube 12 px (propiedad «translate»: no choca con el revelado, que usa «transform») */
    .planes__tarjeta--destacada { translate: 0 -12px; }
  }

  /* ---------- S14 Preguntas frecuentes: <details> nativos ---------- */
  .preguntas { display: grid; gap: var(--e-6); }
  .preguntas__titulo > h2 { max-width: 20em; }
  .preguntas__lista { display: grid; gap: var(--e-3); min-width: 0; }

  .pregunta {
    border-radius: var(--r-md);
    background: var(--mist-100);
  }
  .pregunta[open] { background: var(--white); box-shadow: var(--sombra-2); }

  .pregunta__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 56px;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    color: var(--ink-900);
    font-size: clamp(19px, .2vw + 18.3px, 21px);
    font-weight: 800;
    line-height: 1.25;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pregunta__resumen::-webkit-details-marker { display: none; }
  .pregunta__resumen::marker { content: ""; }
  .pregunta__texto { min-width: 0; overflow-wrap: break-word; }
  @media (hover: hover) {
    .pregunta:not([open]) > .pregunta__resumen:hover { background: var(--mist-200); }
  }

  /* Círculo blanco con «+» hecho de dos barras; al abrir gira 45° y pasa a verde 700 («×») */
  .pregunta__icono {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-900);
  }
  .pregunta__icono::before, .pregunta__icono::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 2px;
    background: currentColor;
  }
  .pregunta__icono::after { transform: rotate(90deg); }
  .pregunta[open] .pregunta__icono { color: var(--zoe-700); transform: rotate(45deg); }

  .pregunta__respuesta { padding: 0 var(--e-4) var(--e-4); }
  .pregunta__respuesta p { margin: 0; color: var(--ink-700); }

  .preguntas__ayuda {
    padding: var(--e-5);
    border-radius: var(--r-lg);
    background: var(--pine-900);
    color: var(--white);
  }
  .preguntas__ayuda h3 { color: var(--white); }
  .preguntas__ayuda p { margin: var(--e-2) 0 var(--e-4); color: var(--on-dark); }

  @media (min-width: 1024px) {
    .preguntas {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-areas: "titulo lista" "ayuda lista";
      grid-template-rows: auto 1fr;
      column-gap: var(--e-8);
      row-gap: var(--e-6);
      align-items: start;
    }
    .preguntas__titulo { grid-area: titulo; }
    .preguntas__lista { grid-area: lista; }
    /* La caja de ayuda queda fija a la izquierda mientras se leen las preguntas */
    .preguntas__ayuda { grid-area: ayuda; position: sticky; top: calc(var(--header-h) + var(--e-5)); }
  }
}

@layer animaciones {

  @media (prefers-reduced-motion: no-preference) {

    /* S12: al entrar, la línea de unión se dibuja (700 ms) y los anillos se llenan uno tras otro (150 ms de separación).
       El estado «pendiente» lo pone revelar.js en la lista; sin JavaScript se ve el estado final. */
    .como__paso::after { transition: transform var(--dur-4) var(--curva-salida) var(--ret-paso, 0ms); }
    .como__anillo { transition: color var(--dur-2) var(--curva-estandar) var(--ret-paso, 0ms), border-color var(--dur-2) var(--curva-estandar) var(--ret-paso, 0ms); }
    .como__anillo::before { transition: opacity var(--dur-2) var(--curva-estandar) var(--ret-paso, 0ms); }
    .como__paso:nth-child(2) { --ret-paso: 150ms; }
    .como__paso:nth-child(3) { --ret-paso: 300ms; }

    .js .revelar--pendiente .como__paso:not(:last-child)::after { transform: scaleY(0); }
    .js .revelar--pendiente .como__anillo::before { opacity: 0; }
    .js .revelar--pendiente .como__paso:last-child .como__anillo { color: var(--ink-900); border-color: var(--zoe-700); }
    @media (min-width: 640px) {
      .js .revelar--pendiente .como__paso:not(:last-child)::after { transform: scaleX(0); }
    }

    /* S14: la respuesta aparece en 250 ms (solo opacidad y desplazamiento, nunca el alto) y el ícono gira */
    .pregunta__icono { transition: transform var(--dur-2) var(--curva-estandar), color var(--dur-2) var(--curva-estandar); }
    .pregunta[open] > .pregunta__respuesta { animation: zs-respuesta var(--dur-2) var(--curva-salida); }
    @keyframes zs-respuesta {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: none; }
    }
  }

  /* Reducir movimiento: sin animación de la respuesta ni giro progresivo del ícono; el cambio es instantáneo
     (animaciones.css ya pone todas las transiciones en 0 s) y el estado abierto se sigue viendo («×» y verde) */
  @media (prefers-reduced-motion: reduce) {
    .pregunta[open] > .pregunta__respuesta { animation: none; }
  }
}