/* =========================================================
   ATTICO TOURS — Visas (hub + formularios por país)
   Extiende styles.css (mismos tokens de marca)
   ========================================================= */

/* ---------- Visa hero (páginas de formulario y hub) ---------- */
.visa-hero{position:relative;overflow:hidden;padding:150px 0 68px;color:#fff}
.visa-hero-bg{position:absolute;inset:0;background-color:var(--purple-darker);background-image:linear-gradient(150deg,rgba(31,14,51,.9),rgba(59,26,82,.82) 55%,rgba(94,46,126,.82)),var(--visa-img,none);background-size:cover;background-position:center}
.visa-hero-inner{position:relative;z-index:1;max-width:760px}
.crumbs{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:22px;flex-wrap:wrap}
.crumbs a{color:rgba(255,255,255,.72);transition:.2s}
.crumbs a:hover{color:var(--cyan-light)}
.crumbs span[aria-current]{color:#fff}
.visa-hero-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;line-height:1.05;margin-bottom:16px;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.visa-hero-title em{color:var(--cyan-light);font-weight:600}
.visa-hero-sub{font-size:clamp(1.02rem,2vw,1.18rem);color:rgba(255,255,255,.9);max-width:620px;margin-bottom:26px}
.visa-flag-lg{display:inline-block;width:52px;height:52px;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.3);margin-bottom:18px}

.visa-hero-steps{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.visa-hero-steps li{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.92);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:8px 16px 8px 8px;border-radius:100px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.visa-hero-steps li span{width:26px;height:26px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:.82rem;font-weight:800;color:#fff;flex:none}

/* ---------- Hub "elige tu visa" ---------- */
.visa-hub-section{background:var(--bg-alt)}
.visa-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hub-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;transition:.3s;overflow:hidden}
.hub-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.35s}
a.hub-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
a.hub-card:hover::before{transform:scaleX(1)}
.hub-flag{width:56px;height:56px;border-radius:13px;position:relative;overflow:hidden;box-shadow:0 4px 14px rgba(59,26,82,.18);margin-bottom:16px}
.hub-card h3{font-size:1.5rem;color:var(--ink);margin-bottom:6px}
.hub-card p{font-size:.95rem;color:var(--ink-soft);flex:1}
.hub-cta{display:inline-block;margin-top:14px;font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--cyan-deep)}
a.hub-card:hover .hub-cta{color:var(--purple)}

/* ---------- Avisos dentro del formulario (elegibilidad) ---------- */
.form-notice{margin:2px 0 6px;padding:16px 18px;border-radius:14px;font-size:.92rem;line-height:1.55;border:1px solid}
.form-notice strong{font-weight:700}
.form-notice.warn{background:#fff6f4;border-color:#f3c9c4;color:#9a2c1c}
.form-notice.info{background:#eefbfd;border-color:#bfe9f0;color:#0b6b78}
.form-notice.ok{background:#eefaf1;border-color:#bfe6cd;color:#1c6b3f}

/* ---------- Form shell / layout ---------- */
.visa-form-section{background:var(--bg-cyan)}
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.visa-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow);grid-column:1}
.form-required-note{font-size:.86rem;color:var(--muted);margin-bottom:28px}
.req-star{color:#c0392b;font-weight:700}

/* ---------- Fieldset blocks ---------- */
.form-block{border:none;padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.form-block:last-of-type{border-bottom:none;margin-bottom:8px;padding-bottom:8px}
.form-block legend{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--ink);margin-bottom:22px;padding:0;width:100%}
.block-num{flex:none;font-family:var(--sans);font-size:.82rem;font-weight:800;letter-spacing:.05em;color:var(--purple);background:linear-gradient(135deg,rgba(123,63,160,.12),rgba(0,188,212,.12));width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.block-hint{font-size:.9rem;color:var(--ink-soft);margin:-8px 0 18px}
.block-hint strong{color:var(--purple)}

/* ---------- Fields (reuse .field from styles.css) ---------- */
.label-as-legend{display:block;font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.form-block .field input[type="date"]{color:var(--ink)}

/* ---------- Radio pills ---------- */
.radio-group{display:flex;gap:12px;flex-wrap:wrap}
.radio-pill{position:relative;cursor:pointer}
.radio-pill input{position:absolute;opacity:0;width:0;height:0}
.radio-pill span{display:inline-flex;align-items:center;justify-content:center;min-width:96px;padding:12px 24px;border:1.5px solid var(--line);border-radius:100px;font-weight:600;font-size:.96rem;color:var(--ink-soft);background:#fbfafc;transition:.2s}
.radio-pill:hover span{border-color:var(--purple-light);color:var(--purple)}
.radio-pill input:checked+span{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(123,63,160,.5)}
.radio-pill input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:3px}

/* ---------- Conditional reveal ---------- */
.conditional{margin-top:18px;padding:20px;background:var(--bg-cyan);border:1px dashed #bfe9f0;border-radius:14px;animation:condIn .3s ease}
@keyframes condIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- File uploads ---------- */
.uploads{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.upload{position:relative}
.upload input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload-box{display:flex;flex-direction:column;gap:4px;padding:20px;border:1.5px dashed var(--line);border-radius:14px;background:#fbfafc;cursor:pointer;transition:.2s;min-height:112px;justify-content:center}
.upload-box:hover{border-color:var(--purple-light);background:#fbf6ff}
.upload-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(123,63,160,.12),rgba(0,188,212,.12));color:var(--purple);margin-bottom:6px}
.upload-title{font-weight:700;font-size:.98rem;color:var(--ink)}
.upload-meta{font-size:.8rem;color:var(--muted)}
.upload input:focus-visible+.upload-box{outline:3px solid var(--cyan);outline-offset:3px}
/* filled state */
.upload.filled .upload-box{border-style:solid;border-color:var(--cyan);background:#eefbfd}
.upload.filled .upload-ic{background:var(--grad);color:#fff}
.upload.filled .upload-meta{color:var(--cyan-deep);font-weight:600}
.upload.error .upload-box{border-color:#c0392b;background:#fff5f4}
.upload-clear{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:1rem;line-height:1;display:none;place-items:center;transition:.2s;z-index:2}
.upload.filled .upload-clear{display:grid}
.upload-clear:hover{background:#c0392b;color:#fff;border-color:transparent}
.upload-total{margin-top:16px;font-size:.88rem;color:var(--ink-soft);text-align:right}
.upload-total.over{color:#c0392b;font-weight:700}
.upload-total strong{color:var(--purple)}
.upload-total.over strong{color:#c0392b}

/* ---------- Checkbox ---------- */
.checkbox-field{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.98rem;color:var(--ink);line-height:1.5}
.checkbox-field input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--purple);cursor:pointer}

/* ---------- Submit ---------- */
.form-submit{margin-top:30px}
.form-submit .btn-primary{font-size:1.05rem;padding:17px 30px}
.form-note{text-align:center;font-size:.82rem;color:var(--muted);margin-top:16px;line-height:1.55}
.form-note a{color:var(--purple);text-decoration:underline}
.form-alert{margin-top:16px;padding:14px 18px;border-radius:12px;background:#fff5f4;border:1px solid #f3c9c4;color:#a5281b;font-size:.9rem;font-weight:600;text-align:center}
.form-alert.info{background:#eefbfd;border-color:#bfe9f0;color:var(--cyan-deep)}

/* ---------- Success card ---------- */
.visa-success{grid-column:1 / -1;max-width:620px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:56px 40px;box-shadow:var(--shadow-lg)}
.visa-success .check{width:78px;height:78px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin:0 auto 26px;box-shadow:0 14px 40px -10px rgba(0,188,212,.6)}
.visa-success h2{font-size:clamp(1.6rem,3.5vw,2.2rem);color:var(--ink);margin-bottom:14px}
.visa-success p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:28px;max-width:460px;margin-inline:auto}
.btn-ghost-dark{background:transparent;color:var(--purple);border:1.5px solid var(--line)}
.btn-ghost-dark:hover{background:var(--bg-alt);border-color:var(--purple);color:var(--purple)}

/* ---------- Aside ---------- */
.form-aside{grid-column:2;position:sticky;top:100px;display:grid;gap:18px}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.aside-card h3{font-size:1.25rem;color:var(--ink);margin-bottom:8px}
.aside-card>p{font-size:.92rem;color:var(--ink-soft);margin-bottom:18px}
.aside-docs h4{font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin-bottom:14px}
.aside-docs ul{list-style:none;display:grid;gap:11px;margin-bottom:16px}
.aside-docs li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-soft)}
.aside-docs li em{color:var(--muted);font-style:normal;font-size:.82rem}
.doc-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.03)}
.doc-dot.req{background:var(--grad)}
.aside-tip{font-size:.82rem;color:var(--muted);line-height:1.5;padding-top:14px;border-top:1px solid var(--line)}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .form-shell{grid-template-columns:1fr}
  .visa-form{grid-column:1}
  .form-aside{grid-column:1;position:static;grid-template-columns:1fr 1fr}
  .visa-hub-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .visa-hero{padding:130px 0 54px}
  .visa-form{padding:26px 20px}
  .form-block .field-row{grid-template-columns:1fr}
  .uploads{grid-template-columns:1fr}
  .form-aside{grid-template-columns:1fr}
  .radio-pill span{min-width:0;flex:1}
  .radio-group{display:grid;grid-template-columns:1fr 1fr}
  .visa-hub-grid{grid-template-columns:1fr}
}