:root {
      --red: #D00000;
      --dark-red: #6A040F;
      --orange: #E85D04;
      --dark: #1A1A1A;
      --mid: #222;
      --bg: #F2F2F2;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Rubik',sans-serif; background:var(--bg); color:var(--dark); }

    .label-banner {
      background: linear-gradient(135deg,#6A040F,#D00000,#E85D04);
      color:#fff; text-align:center;
      padding:12px; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    }

    .hub-section { padding:72px 32px 88px; }

    .hub-hd { text-align:center; margin-bottom:64px; }
    .ol { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
    .hub-hd h2 { font-size:clamp(26px,3.5vw,42px); font-weight:800; }
    .hub-hd p  { font-size:14px; color:#777; margin-top:8px; }

    /* ─── CARDS ROW ─── */
    .cards-row {
      max-width:1120px; margin:0 auto;
      display:flex; align-items:center; justify-content:center;
      gap:0;
    }

    /* ─── CONNECTOR ─── */
    .connector {
      flex:1; height:4px; position:relative; max-width:60px;
      background:#e0e0e0; border-radius:2px; overflow:hidden;
    }
    .connector::after {
      content:'';
      position:absolute; top:0; left:-100%; height:100%; width:60%;
      background:linear-gradient(90deg,transparent,var(--orange),var(--red),transparent);
      animation: flowLine 2s linear infinite;
      border-radius:2px;
    }
    @keyframes flowLine {
      0%  { left:-60%; }
      100%{ left:100%; }
    }

    /* ─── FLIP CARD ─── */
    .flip-wrap {
      perspective:1000px;
      width:220px; flex-shrink:0;
      opacity:0; transform:translateY(24px);
      animation:cardIn .55s ease forwards;
    }
    .flip-wrap:nth-child(1){ animation-delay:.1s; }
    .flip-wrap:nth-child(3){ animation-delay:.22s; }
    .flip-wrap:nth-child(5){ animation-delay:.34s; }
    .flip-wrap:nth-child(7){ animation-delay:.46s; }
    @keyframes cardIn { to{ opacity:1; transform:translateY(0); } }

    .flip-card {
      position:relative;
      width:220px; height:300px;
      transform-style:preserve-3d;
      transition: transform .55s cubic-bezier(.4,0,.2,1);
      cursor:pointer;
    }
    .flip-wrap:hover .flip-card { transform: rotateY(180deg); }


    /* FACE COMMON */
    .face {
      position:absolute; inset:0;
      border-radius:16px; overflow:hidden;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
    }

    /* FRONT */
    .front {
      background:#fff;
      box-shadow:0 6px 28px rgba(0,0,0,.1);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:16px; padding:24px;
      border:2px solid transparent;
      transition:border-color .3s;
    }
    .flip-wrap .front { border-color:rgba(208,0,0,.15); }

    .front-icon {
      width:100px; height:100px; border-radius:12px; overflow:hidden;
      background:#f0f0f0; border:2px dashed #ccc;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .front-icon img {
      width:100%; height:100%; object-fit:cover; border-radius:10px;
      display:block;
    }
    .front-icon .ph-label {
      font-size:9px; color:#aaa; letter-spacing:1px; text-transform:uppercase; text-align:center;
    }
    .front-name {
      font-size:14px; font-weight:800; text-align:center;
      color:var(--dark); line-height:1.3;
    }
    .front-sub { font-size:10px; color:#999; text-align:center; letter-spacing:.5px; }

    /* Top accent line — todas las cards */
    .front::before {
      content:''; position:absolute; top:0; left:12px; right:12px; height:3px;
      border-radius:0 0 3px 3px;
      background:linear-gradient(90deg,var(--dark-red),var(--red),var(--orange));
    }

    /* BACK */
    .back {
      transform:rotateY(180deg);
      background:linear-gradient(160deg,var(--dark) 0%,#2a0000 100%);
      box-shadow:0 12px 40px rgba(0,0,0,.3);
      display:flex; flex-direction:column;
      padding:24px 20px;
      color:#fff;
    }

    .back-title {
      font-size:13px; font-weight:800; text-transform:uppercase;
      letter-spacing:.5px; margin-bottom:16px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }

    .back-list { list-style:none; flex:1; display:flex; flex-direction:column; gap:8px; }
    .back-list li {
      font-size:12px; color:rgba(255,255,255,.8); line-height:1.4;
      display:flex; align-items:flex-start; gap:8px;
    }
    .back-list li::before { content:'→'; color:var(--orange); font-weight:700; flex-shrink:0; }

    .back-cta {
      margin-top:16px; padding:9px 0; text-align:center;
      background:linear-gradient(135deg,var(--dark-red),var(--orange));
      border-radius:8px;
      color:#fff; font-size:11px; font-weight:700; letter-spacing:1px;
      text-transform:uppercase;
    }

    /* ─── MOBILE ─── */
    @media(max-width:900px){
      .cards-row { flex-wrap:wrap; gap:16px; }
      .connector { display:none; }
      .flip-wrap { width:48%; }
      .flip-card { width:100%; }
    }
    @media(max-width:500px){
      .flip-wrap { width:100%; }
    }

    /* ─── HINT ─── */
    .hint {
      text-align:center; margin-top:40px;
      font-size:12px; color:#999; letter-spacing:1px;
    }
    .hint span { color:var(--red); font-weight:700; }

    .back-cta{
    display:block;
    margin-top:16px;
    padding:9px 0;
    text-align:center;
    background:linear-gradient(135deg,var(--dark-red),var(--orange));
    border-radius:8px;
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
}