/* =========================
   REQUIREMENTS REVIEW SECTION
========================= */

.review-section{
    min-height:100vh;
    padding:60px 6% 40px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   CONTAINER
========================= */

.review-container{
    max-width:1400px;
    width:100%;
    text-align:center;
}

/* =========================
   TITULO
========================= */

.review-section h2{
    font-family:'Orbitron',sans-serif;
    font-size:70px;
    margin-bottom:16px;
    letter-spacing:2px;
    background:linear-gradient(90deg,#00eaff,#7b2bff);
    -webkit-background-clip:text;
    color:transparent;
    text-shadow:
        0 0 12px rgba(0,234,255,.4),
        0 0 25px rgba(123,43,255,.4);
    position:relative;
    display:inline-block;
}

.review-section h2::after{
    content:"";
    display:block;
    margin:18px auto 0;
    width:680px;
    height:3px;
    border-radius:3px;
    background:linear-gradient(90deg,#00eaff,#7b2bff);
    box-shadow:0 0 10px #00eaff, 0 0 25px #7b2bff;
    animation:reviewTitleLine 3s ease-in-out infinite;
}

@keyframes reviewTitleLine{
    0%  { transform:scaleX(.6); opacity:.7; }
    50% { transform:scaleX(1);  opacity:1;  }
    100%{ transform:scaleX(.6); opacity:.7; }
}

/* =========================
   INTRO
========================= */

.review-intro{
    font-size:18px;
    color:rgba(255,255,255,.65);
    max-width:800px;
    margin:28px auto 80px;
    line-height:1.8;
}

/* =========================
   DIAGRAMA
========================= */

.review-diagram{
    position:relative;
    width:min(1200px,90vw);
    height:600px;
    margin:20px auto 0;
}

/* =========================
   NODO CENTRAL
========================= */

.review-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:10;
}

.review-icon{
    width:200px;
    filter:
        drop-shadow(0 0 20px rgba(0,234,255,.6))
        drop-shadow(0 0 40px rgba(123,43,255,.35));
    animation:reviewIconPulse 4s ease-in-out infinite;
}

@keyframes reviewIconPulse{
    0%  { transform:scale(1); }
    50% { transform:scale(1.06); }
    100%{ transform:scale(1); }
}

/* =========================
   LINEAS SVG
========================= */

.review-lines{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:1;
}

.review-lines line{
    stroke:#00eaff;
    stroke-width:1.5;
    stroke-linecap:round;
    opacity:.35;
    filter:drop-shadow(0 0 5px #00eaff);
    stroke-dasharray:6 6;
    animation:reviewLineFlow 2.5s linear infinite;
}

@keyframes reviewLineFlow{
    from{ stroke-dashoffset:0; }
    to  { stroke-dashoffset:24; }
}

/* =========================
   TARJETAS
========================= */

.review-question{
    position:absolute;
    width:340px;
    height:140px;
    perspective:1000px;
    cursor:pointer;
    z-index:5;
    transform:var(--pos-transform);
}

.review-question:hover{
    z-index:20;
}

/* Posiciones */

.q1{ top:-10px;   left:50%; --pos-transform:translateX(-50%); }
.q2{ top:40px;    left:10px; --pos-transform:translate(0,0); }
.q3{ top:40px;    right:10px; --pos-transform:translate(0,0); }
.q4{ top:50%;     left:-30px; --pos-transform:translateY(-50%); }
.q5{ top:50%;     right:-30px; --pos-transform:translateY(-50%); }
.q6{ bottom:30px; left:10px; --pos-transform:translate(0,0); }
.q7{ bottom:30px; right:10px; --pos-transform:translate(0,0); }
.q8{ bottom:-10px; left:50%; --pos-transform:translateX(-50%); }

/* =========================
   FLIP INNER
========================= */

.flip-inner{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform .65s cubic-bezier(.4,0,.2,1);
}

.review-question.flip .flip-inner{
    transform:rotateY(180deg);
}

/* =========================
   CARAS
========================= */

.flip-front,
.flip-back{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px 22px;
    border-radius:16px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    text-align:center;
}

.flip-front{
    background:rgba(10,5,40,.7);
    border:1px solid rgba(0,234,255,.22);
    backdrop-filter:blur(14px);
    box-shadow:
        0 0 18px rgba(0,234,255,.1),
        0 0 35px rgba(123,43,255,.06);
    transform:rotateY(0deg);
    transition:border-color .3s, box-shadow .3s;
}

.review-question:hover .flip-front{
    border-color:rgba(0,234,255,.6);
    box-shadow:
        0 0 28px rgba(0,234,255,.25),
        0 0 55px rgba(123,43,255,.15);
}

.flip-back{
    background:rgba(15,5,50,.9);
    border:1px solid rgba(123,43,255,.55);
    backdrop-filter:blur(14px);
    box-shadow:
        0 0 25px rgba(123,43,255,.35),
        0 0 50px rgba(0,234,255,.1);
    transform:rotateY(180deg);
}

/* =========================
   TEXTO PREGUNTA
========================= */

.flip-front p{
    font-size:13.5px;
    color:#cfd8ff;
    line-height:1.5;
    font-weight:500;
    margin:0;
}

/* =========================
   TEXTO RESPUESTA
========================= */

.flip-back p{
    font-size:12.5px;
    color:#b8f5ff;
    line-height:1.6;
    margin:0;
}

/* =========================
   INDICADOR ↻
========================= */

/* =========================
   REVEAL FIX
   Las tarjetas usan position:absolute con transform propio (--pos-transform).
   El reveal global sobreescribía ese transform. Lo neutralizamos aquí.
========================= */

.review-question.reveal {
    transform: var(--pos-transform);
    opacity: 0;
}

.review-question.reveal.visible {
    transform: var(--pos-transform);
    opacity: 1;
}

.review-center.reveal {
    transform: translate(-50%, -50%);
    opacity: 0;
}

.review-center.reveal.visible {
    transform: translate(-50%, -50%);
    opacity: 1;
}