/* ════════════════════════════════════════════════════════════════════════════
   tarifas.css — Transotel.Web
   Ubicación: Transotel.Web/wwwroot/css/tarifas.css
   v2 — Precios fijos · Tabla de referencia de tallas · Botón scroll-to-top
   ════════════════════════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.tar-hero {
    position:   relative;
    background: #0B1F3A;
    color:      #fff;
    overflow:   hidden;
    padding:    6rem 0 5rem;
}
.tar-hero-bg {
    position:            absolute;
    inset:               0;
    background-image:    url('https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?w=1400&auto=format&fit=crop&q=60');
    background-size:     cover;
    background-position: center;
    opacity:             .12;
}
.tar-hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 60%,rgba(223,187,62,.10) 0%,transparent 55%);
    pointer-events:none;
}
.tar-hero-inner { position:relative; z-index:1; text-align:center; }

.tar-hero h1,
.tar-hero h2,
.tar-hero h3 {
    color: #ffffff;
}

.tar-hero-inner h1 {
    font-size:      clamp(2.2rem,4.5vw,3.4rem);
    font-weight:    800;
    letter-spacing: -0.025em;
    margin-bottom:  1rem;
    text-shadow:    0 2px 12px rgba(0,0,0,0.40);
}
.tar-hero-inner .lead {
    color:         rgba(255,255,255,.85);
    margin-bottom: 2.5rem;
    text-shadow:   0 1px 6px rgba(0,0,0,0.30);
}

.tar-stats {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             2.5rem;
    margin-top:      1rem;
}
.tar-stat { text-align:center; }
.tar-stat-num {
    display:     block;
    font-size:   2.4rem;
    font-weight: 900;
    color:       #dfbb3e;
    line-height: 1;
}
.tar-stat-label { font-size:.82rem; color:rgba(255,255,255,.65); margin-top:.3rem; }

/* ── CARDS ─────────────────────────────────────────────────────────────────── */
.tar-cards {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3rem;
    padding:               0;
}
@media (min-width:576px) { .tar-cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px) { .tar-cards { grid-template-columns:repeat(4,1fr); } }

.tar-card {
    background:    #fff;
    border-radius: 16px;
    border:        2px solid transparent;
    box-shadow:    0 2px 20px rgba(11,31,58,.08);
    overflow:      hidden;
    padding:       2rem 1.5rem;
    display:       flex;
    flex-direction:column;
    align-items:   center;
    text-align:    center;
    gap:           .75rem;
    position:      relative;
    transition:    all .25s ease;
}
.tar-card:hover {
    border-color: #dfbb3e;
    box-shadow:   0 14px 40px rgba(223,187,62,.20);
    transform:    translateY(-5px);
}
.tar-card--featured {
    border-color: #dfbb3e;
    box-shadow:   0 8px 32px rgba(223,187,62,.22);
}

.tar-card-ribbon {
    position:      absolute;
    top:           -1px; right:-1px;
    background:    #dfbb3e;
    color:         #0B1F3A;
    font-size:     .7rem;
    font-weight:   800;
    padding:       .3rem .7rem;
    border-radius: 0 14px 0 10px;
    display:       flex;
    align-items:   center;
    gap:           .3rem;
    letter-spacing:.04em;
}

.tar-card-icon {
    width:68px; height:68px;
    background:linear-gradient(135deg,#0B1F3A,#1e4070);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; color:#dfbb3e;
    box-shadow:0 8px 22px rgba(11,31,58,.25);
    transition:transform .25s;
}
.tar-card:hover .tar-card-icon { transform:scale(1.08); }

.tar-card-title { font-size:1rem; font-weight:700; margin:0; color:#0B1F3A; }
.tar-card-desc  { font-size:.82rem; color:#6c757d; margin:0; line-height:1.55; }

.tar-card-dims { font-size:.78rem; color:#6c757d; display:flex; flex-direction:column; gap:.25rem; width:100%; }
.tar-card-dims dt { font-weight:600; color:#495057; margin-top:.3rem; }
.tar-card-dims dd { margin:0; }

/* Precio fijo — sin "desde" */
.tar-card-price {
    display:         flex;
    align-items:     baseline;
    justify-content: center;
}
.tar-price-amount {
    font-size:   2rem;
    font-weight: 900;
    color:       #0B1F3A;
    letter-spacing:-.03em;
}

/* ── TABLA ─────────────────────────────────────────────────────────────────── */
.tar-table-wrap { overflow-x:auto; margin-top:3rem; }
.tar-table-price { color:#0B1F3A; font-size:1.05rem; }
.tar-empty { padding:3rem 0; }

/* ── DIMENSIONES ─────────────────────────────────────────────────────────── */
.tar-dim-layout {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3rem;
    margin-top:            3rem;
    align-items:           start;
}
@media (min-width:768px) { .tar-dim-layout { grid-template-columns:1fr 1fr; } }

.tar-dim-visual { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.tar-dim-box-wrap { perspective:600px; }
.tar-dim-box {
    width:160px; height:200px;
    background:linear-gradient(135deg,rgba(11,31,58,.08),rgba(11,31,58,.04));
    border:2px dashed rgba(11,31,58,.2);
    border-radius:12px;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    transform:rotateY(-10deg) rotateX(5deg);
}
.tar-dim-bag { font-size:4rem; color:rgba(11,31,58,.15); }

.tar-dim-lbl {
    position:    absolute;
    font-weight: 900;
    font-size:   1rem;
    color:       #0B1F3A;
    background:  #dfbb3e;
    border-radius:50%;
    width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.tar-dim-a { top:-10px; left:50%; transform:translateX(-50%); }
.tar-dim-b { right:-12px; top:50%; transform:translateY(-50%); }
.tar-dim-c { bottom:-10px; left:50%; transform:translateX(-50%); }

/* ── TABLA DE REFERENCIA DE TALLAS (en la sección cómo medir) ──────────────── */
.tar-dim-sizes-ref {
    width: 100%;
    margin-top: .5rem;
}
.tar-dim-ref-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .78rem;
    background:      #fff;
    border-radius:   10px;
    overflow:        hidden;
    box-shadow:      0 2px 12px rgba(11,31,58,.08);
}
.tar-dim-ref-table thead {
    background: linear-gradient(135deg,#0B1F3A,#1e4070);
    color:      #fff;
}
.tar-dim-ref-table thead th {
    padding:     .5rem .6rem;
    font-weight: 700;
    font-size:   .72rem;
    text-align:  left;
    white-space: nowrap;
    border:      none;
}
.tar-dim-ref-table tbody tr {
    border-bottom: 1px solid rgba(11,31,58,.06);
    transition:    background .15s;
}
.tar-dim-ref-table tbody tr:last-child { border-bottom:none; }
.tar-dim-ref-table tbody tr:hover { background:rgba(223,187,62,.06); }
.tar-dim-ref-table tbody td {
    padding:    .45rem .6rem;
    color:      #495057;
    white-space: nowrap;
    border:     none;
}
.tar-dim-ref-table tbody td strong {
    color:       #0B1F3A;
    font-weight: 700;
}

.tar-medir-list { display:flex; flex-direction:column; gap:1rem; margin:1.25rem 0; padding:0; list-style:none; }
.tar-medir-list li { font-size:.9rem; color:#495057; }
.tar-medir-list strong { display:block; color:#0B1F3A; margin-bottom:.2rem; }

.tar-dim-tip {
    display:     flex;
    gap:         .75rem;
    background:  rgba(223,187,62,.08);
    border-left: 3px solid #dfbb3e;
    padding:     .85rem 1rem;
    border-radius:0 6px 6px 0;
    margin-top:  1rem;
}
.tar-dim-tip i { color:#c9a830; flex-shrink:0; margin-top:3px; }
.tar-dim-tip p { font-size:.85rem; color:#6c757d; margin:0; }

/* ── CÁLCULO (precio fijo: 2 pasos) ─────────────────────────────────────── */
.tar-calc-row {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    margin-top:      3rem;
}
.tar-calc-step {
    flex:       1 1 220px;
    max-width:  280px;
    text-align: center;
    padding:    1.75rem 1.25rem;
    background: #f8f9fa;
    border-radius:14px;
    border:     1px solid rgba(11,31,58,.07);
}
.tar-calc-step--total { background:rgba(11,31,58,.04); border-color:#0B1F3A; }

.tar-calc-icon {
    width:60px; height:60px; margin:0 auto .9rem;
    background:linear-gradient(135deg,#0B1F3A,#1e4070);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; color:#dfbb3e;
}
.tar-calc-icon--gold { background:linear-gradient(135deg,#dfbb3e,#c9a830); color:#0B1F3A; }

.tar-calc-step h3 { font-size:.95rem; font-weight:700; margin-bottom:.4rem; color:#0B1F3A; }
.tar-calc-step p  { font-size:.82rem; color:#6c757d; margin:0; }

.tar-calc-op {
    font-size:  1.6rem;
    color:      #adb5bd;
    flex-shrink:0;
}

.tar-igic-note {
    display:       flex;
    align-items:   flex-start;
    gap:           .75rem;
    background:    rgba(0,133,114,.06);
    border:        1px solid rgba(0,133,114,.2);
    border-left:   4px solid #008572;
    border-radius: 6px;
    padding:       1rem 1.25rem;
    margin-top:    2.5rem;
    font-size:     .875rem;
    color:         #495057;
}
.tar-igic-note i { color:#008572; flex-shrink:0; margin-top:3px; }

/* ── QUÉ INCLUYE ──────────────────────────────────────────────────────────── */
.tar-inc-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.25rem;
    margin-top:            3rem;
    padding:               0;
}
@media (min-width:576px) { .tar-inc-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px) { .tar-inc-grid { grid-template-columns:repeat(3,1fr); } }

.tar-inc-item {
    display:       flex;
    align-items:   flex-start;
    gap:           1rem;
    background:    #fff;
    border-radius: 12px;
    border:        1px solid rgba(11,31,58,.07);
    padding:       1.4rem;
    transition:    box-shadow .2s, transform .2s;
}
.tar-inc-item:hover { box-shadow:0 6px 24px rgba(11,31,58,.10); transform:translateY(-3px); }
.tar-inc-item > i { font-size:1.5rem; color:#008572; flex-shrink:0; margin-top:2px; }
.tar-inc-item strong { display:block; font-size:.95rem; color:#0B1F3A; margin-bottom:.3rem; }
.tar-inc-item p { font-size:.85rem; color:#6c757d; margin:0; }

/* ── SCROLL TO TOP ─────────────────────────────────────────────────────────── */
.tar-scroll-top {
    position:      fixed;
    bottom:        2rem;
    right:         2rem;
    z-index:       999;
    width:         48px;
    height:        48px;
    border-radius: 50%;
    background:    linear-gradient(135deg,#008572,#006b5c);
    color:         #fff;
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content:center;
    font-size:     1.1rem;
    box-shadow:    0 4px 16px rgba(0,133,114,.35);
    opacity:       0;
    transform:     translateY(10px);
    transition:    opacity .3s ease, transform .3s ease, background .2s;
    pointer-events:none;
}
.tar-scroll-top:not([hidden]) {
    opacity:       1;
    transform:     translateY(0);
    pointer-events:auto;
}
.tar-scroll-top:hover {
    background: linear-gradient(135deg,#dfbb3e,#c9a830);
    color:      #0B1F3A;
    box-shadow: 0 6px 20px rgba(223,187,62,.40);
    transform:  translateY(-2px);
}
.tar-scroll-top:focus-visible {
    outline:        2px solid #dfbb3e;
    outline-offset: 3px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:575px) {
    .tar-calc-row { flex-direction:column; align-items:center; }
    .tar-calc-step { max-width:100%; width:100%; }
    .tar-calc-op { transform:rotate(90deg); }

    .tar-dim-ref-table thead th,
    .tar-dim-ref-table tbody td { white-space:normal; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ENVÍOS INTERNACIONALES (Hotel→Casa Europa)  ·  añadido Lote 2
   ════════════════════════════════════════════════════════════════════════════ */
.tar-intl-section {
    /* Tinte teal muy suave: separa de tar-precios (blanco) y tar-dimensiones (gris) */
    background: linear-gradient(180deg, rgba(0,133,114,.055) 0%, rgba(0,133,114,.02) 100%);
}

.tar-intl-top {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3rem;
}
@media (min-width:768px) {
    .tar-intl-top { grid-template-columns: 1fr 1.1fr; align-items:stretch; }
}

/* ── Tarjeta "desde X" ────────────────────────────────────────────────────── */
.tar-intl-price-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    text-align:     center;
    gap:            .35rem;
    padding:        2.25rem 1.75rem;
    border-radius:  16px;
    background:     linear-gradient(135deg,#0B1F3A 0%,#1e4070 100%);
    color:          #fff;
    box-shadow:     0 12px 36px rgba(11,31,58,.22);
    position:       relative;
    overflow:       hidden;
}
.tar-intl-price-card::after {
    content:''; position:absolute; top:-50px; right:-40px;
    width:200px; height:200px;
    background:radial-gradient(circle,rgba(223,187,62,.20) 0%,transparent 70%);
    pointer-events:none;
}
.tar-intl-from {
    font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#dfbb3e; position:relative; z-index:1;
}
.tar-intl-amount {
    font-size:3.2rem; font-weight:900; line-height:1; letter-spacing:-.03em;
    color:#fff; position:relative; z-index:1;
}
.tar-intl-amount--ask { font-size:2rem; color:#dfbb3e; }
.tar-intl-suffix { font-size:.85rem; color:rgba(255,255,255,.8); position:relative; z-index:1; }
.tar-intl-note   { font-size:.75rem; color:rgba(255,255,255,.6); margin:.6rem 0 0; max-width:300px; position:relative; z-index:1; }
.tar-intl-ask-btn { margin-top:.9rem; position:relative; z-index:1; }

/* ── Hotel→Casa ───────────────────────────────────────────────────────────── */
.tar-intl-casa {
    display:flex; flex-direction:column; justify-content:center;
    gap:.7rem; padding:2.25rem 1.75rem;
    background:#fff; border-radius:16px;
    border:1px solid rgba(11,31,58,.07);
    box-shadow:0 2px 20px rgba(11,31,58,.08);
}
.tar-intl-casa-icon {
    display:inline-flex; align-items:center; gap:.6rem;
    font-size:1.5rem; color:#0B1F3A; align-self:flex-start;
    background:rgba(223,187,62,.12); border:1px solid rgba(223,187,62,.4);
    padding:.7rem 1.1rem; border-radius:999px;
}
.tar-intl-casa-icon .fa-arrow-right-long { font-size:.95rem; color:#c9a830; }
.tar-intl-casa h3 { font-size:1.15rem; font-weight:800; color:#0B1F3A; margin:0; }
.tar-intl-casa p  { font-size:.92rem; color:#495057; line-height:1.6; margin:0; }

/* ── Destinos y plazos ────────────────────────────────────────────────────── */
.tar-intl-plazos { margin-top:3rem; }
.tar-intl-plazos-title {
    display:flex; align-items:center; gap:.55rem;
    font-size:1.1rem; font-weight:700; color:#0B1F3A; margin-bottom:1.25rem;
}
.tar-intl-plazos-title i { color:#008572; }
.tar-intl-table {
    width:100%; border-collapse:collapse; background:#fff;
    border-radius:12px; overflow:hidden; box-shadow:0 2px 16px rgba(11,31,58,.08);
    font-size:.9rem;
}
.tar-intl-table thead { background:linear-gradient(135deg,#0B1F3A,#1e4070); color:#fff; }
.tar-intl-table thead th { padding:.75rem 1rem; text-align:left; font-weight:700; font-size:.85rem; border:none; }
.tar-intl-table tbody tr { border-bottom:1px solid rgba(11,31,58,.06); }
.tar-intl-table tbody tr:last-child { border-bottom:none; }
.tar-intl-table tbody tr:hover { background:rgba(0,133,114,.04); }
.tar-intl-table tbody td { padding:.7rem 1rem; color:#495057; border:none; vertical-align:top; }
.tar-intl-table tbody td strong { color:#0B1F3A; font-weight:800; }
.tar-intl-plazos-note { font-size:.8rem; color:#6c757d; margin:.9rem 0 0; }
.tar-intl-aduana      { font-size:.8rem; color:#6c757d; margin:.35rem 0 0; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.tar-intl-cta {
    display:flex; flex-direction:column; align-items:center; gap:1rem;
    text-align:center; margin-top:3rem;
    padding:2rem; border-radius:16px;
    background:rgba(223,187,62,.08); border:1px solid rgba(223,187,62,.25);
}
.tar-intl-cta p { font-size:1rem; color:#0B1F3A; margin:0; font-weight:600; }

@media (max-width:575px) {
    .tar-intl-amount { font-size:2.6rem; }
    .tar-intl-cta    { padding:1.5rem; }
}