/* ════════════════════════════════════════════════════════════════════════════
   como-funciona.css — Transotel.Web
   Ubicación: Transotel.Web/wwwroot/css/como-funciona.css
   ════════════════════════════════════════════════════════════════════════════ */

/* ── TOC (índice de contenidos) ─────────────────────────────────────────── */
.cf-toc-wrap {
    background:    linear-gradient(90deg, #0B1F3A 0%, #112a4e 100%);
    border-bottom: 3px solid #dfbb3e;
    padding:       0.65rem 0;
}
.cf-toc-inner {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    overflow-x:  auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cf-toc-inner::-webkit-scrollbar { display: none; }

.cf-toc-label {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    color:       #dfbb3e;
    font-size:   .78rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: .75rem;
    border-right:  1px solid rgba(223,187,62,.3);
}
.cf-toc-list {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    flex-wrap:   nowrap;
    padding:     0;
    margin:      0;
    list-style:  none;
}
.cf-toc-list li { flex-shrink: 0; }
.cf-toc-list a {
    display:       block;
    padding:       .3rem .7rem;
    border-radius: 999px;
    color:         rgba(255,255,255,.75);
    font-size:     .8rem;
    font-weight:   500;
    text-decoration: none;
    white-space:   nowrap;
    transition:    background .2s, color .2s;
    border:        1px solid transparent;
}
.cf-toc-list a:hover,
.cf-toc-list a:focus {
    background: rgba(223,187,62,.15);
    border-color: rgba(223,187,62,.35);
    color:       #dfbb3e;
}
@media (max-width: 767px) {
    .cf-toc-wrap  { display: none; }
}

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.cf-hero {
    position:   relative;
    background: #0B1F3A;
    color:      #fff;
    overflow:   hidden;
    padding:    0;
}
.cf-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(125deg, rgba(11,31,58,.97) 0%, rgba(21,45,85,.88) 55%, rgba(11,31,58,.80) 100%);
    z-index:    1;
}
.cf-hero-inner {
    display:        flex;
    flex-direction: column;
    gap:            2.5rem;
    padding:        5rem 0 4rem;
    position:       relative;
    z-index:        2;
}
@media (min-width:992px) {
    .cf-hero-inner  { flex-direction:row; align-items:center; gap:4rem; padding:7rem 0 5rem; }
    .cf-hero-text   { flex:1 1 54%; }
    .cf-hero-figure { flex:1 1 46%; }
}
.cf-hero-text h1 {
    font-size:      clamp(2.2rem,4.5vw,3.4rem);
    font-weight:    800;
    line-height:    1.1;
    margin-bottom:  1.2rem;
    letter-spacing: -0.025em;
    color:          #ffffff !important;
    text-shadow:    0 2px 18px rgba(0,0,0,.55);
}
.cf-hero-text .lead {
    color:       rgba(255,255,255,.88) !important;
    margin-bottom: 2rem;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

.cf-hero-figure { display:flex; justify-content:center; }
.cf-hero-figure img {
    border-radius: 18px;
    box-shadow:    0 28px 70px rgba(0,0,0,.5);
    width:         100%;
    max-width:     510px;
    object-fit:    cover;
    aspect-ratio:  4/3;
    border:        3px solid rgba(223,187,62,.28);
}

/* Pills hero */
.cf-pill-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.cf-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    background:    rgba(223,187,62,.12);
    border:        1px solid rgba(223,187,62,.4);
    color:         #dfbb3e;
    padding:       .35rem .9rem;
    border-radius: 999px;
    font-size:     .8rem;
    font-weight:   700;
    white-space:   nowrap;
}
.page-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            .45rem;
    background:     rgba(0,133,114,.15);
    border:         1px solid rgba(0,133,114,.4);
    color:          #00c4a8;
    padding:        .38rem 1rem;
    border-radius:  999px;
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom:  1.2rem;
    width:          fit-content;
}

/* ── 2 VÍAS ────────────────────────────────────────────────────────────────── */
.cf-vias-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2rem;
    margin-top:            3rem;
}
@media (min-width:900px) { .cf-vias-grid { grid-template-columns:repeat(2,1fr); } }

.cf-via-card { border-radius:16px; overflow:hidden; border:2px solid transparent; transition:.25s ease; }
.cf-via-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(11,31,58,.12); }
.cf-via-card--primary { border-color:#dfbb3e; box-shadow:0 8px 32px rgba(223,187,62,.15); }

.cf-via-header {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    padding:        1.5rem 1.75rem;
    color:          #fff;
}
.cf-via-header h3 { color:#fff; margin:0; font-size:1.15rem; }
.cf-via-header--hotel  { background:linear-gradient(135deg,#0B1F3A 0%,#1e4070 100%); }
.cf-via-header--cliente{ background:linear-gradient(135deg,#c9a830 0%,#dfbb3e 100%); color:#0B1F3A; }
.cf-via-header--cliente h3 { color:#0B1F3A; }
.cf-via-header--cliente .cf-via-num { background:#0B1F3A; color:#dfbb3e; }

.cf-via-num {
    width:32px; height:32px;
    background:#dfbb3e; color:#0B1F3A;
    border-radius:50%; font-weight:900; font-size:.85rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

.cf-via-tagline {
    font-weight: 600;
    color:       #008572;
    font-size:   .9rem;
    margin-bottom:.75rem;
    display:     flex;
    align-items: center;
    gap:         .4rem;
}

/* Pasos dentro de la via */
.cf-steps-list { display:flex; flex-direction:column; gap:1.25rem; margin-top:1.5rem; padding:0; }
.cf-steps-list li { display:flex; align-items:flex-start; gap:1rem; }
.cf-step-dot {
    width:28px; height:28px; flex-shrink:0;
    background:#0B1F3A; color:#dfbb3e;
    border-radius:50%; font-size:.75rem; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    margin-top:2px;
}
.cf-steps-list strong { display:block; font-size:.95rem; margin-bottom:.3rem; color:#0B1F3A; }
.cf-steps-list p      { font-size:.875rem; color:#6c757d; margin:0; line-height:1.65; }

/* Campos del formulario preview */
.cf-form-fields { display:flex; flex-direction:column; gap:1rem; margin-top:1.25rem; padding:0; }
.cf-form-fields li { display:flex; align-items:flex-start; gap:.85rem; }
.cf-form-fields i { color:#008572; font-size:1.1rem; margin-top:3px; flex-shrink:0; }
.cf-form-fields strong { display:block; font-size:.9rem; color:#0B1F3A; }
.cf-form-fields span   { font-size:.82rem; color:#6c757d; }

.cf-via-note {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    background:    rgba(0,133,114,.07);
    border-left:   3px solid #008572;
    border-radius: 0 6px 6px 0;
    padding:       .75rem 1rem;
    font-size:     .82rem;
    color:         #495057;
    margin-top:    1.5rem;
}
.cf-via-note i { color:#008572; flex-shrink:0; margin-top:2px; }

/* ── TIMELINE DE PASOS ───────────────────────────────────────────────────── */
.cf-timeline { display:flex; flex-direction:column; gap:0; margin-top:3rem; padding:0; position:relative; }
.cf-timeline::before {
    content:''; position:absolute;
    left:28px; top:0; bottom:0; width:2px;
    background:linear-gradient(to bottom,#0B1F3A,#dfbb3e);
}
@media (min-width:576px) { .cf-timeline::before { left:36px; } }

.cf-tl-item { display:flex; gap:1.5rem; padding-bottom:2.5rem; position:relative; }
.cf-tl-item--final { padding-bottom:0; }

.cf-tl-icon {
    width:58px; height:58px; flex-shrink:0;
    background:linear-gradient(135deg,#0B1F3A,#1e4070);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.35rem; color:#dfbb3e;
    box-shadow:0 6px 20px rgba(11,31,58,.25);
    position:relative; z-index:1;
    border:3px solid #fff;
}
.cf-tl-icon--gold { background:linear-gradient(135deg,#dfbb3e,#c9a830); color:#0B1F3A; }

.cf-tl-body { padding-top:.6rem; flex:1; }
.cf-tl-body h3 { font-size:1.1rem; margin-bottom:.5rem; color:#0B1F3A; }
.cf-tl-body p  { font-size:.875rem; color:#6c757d; line-height:1.7; margin:0; }

.cf-paso-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.cf-tag {
    display:     inline-flex; align-items:center; gap:.3rem;
    background:  rgba(11,31,58,.06); border:1px solid rgba(11,31,58,.12);
    color:       #495057; padding:.25rem .7rem;
    border-radius:999px; font-size:.76rem; font-weight:600;
}

/* ── DIMENSIONES ─────────────────────────────────────────────────────────── */
.cf-dim-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            2rem;
}
@media (min-width:576px) { .cf-dim-grid { grid-template-columns:repeat(3,1fr); } }

.cf-dim-card {
    border-radius: 14px;
    padding:       2rem 1.5rem;
    text-align:    center;
    border:        2px solid transparent;
}
.cf-dim-card--blue  { background:rgba(11,31,58,.05); border-color:rgba(11,31,58,.12); }
.cf-dim-card--gold  { background:rgba(223,187,62,.08); border-color:rgba(223,187,62,.3); }
.cf-dim-card--teal  { background:rgba(0,133,114,.06); border-color:rgba(0,133,114,.25); }

.cf-dim-icon { font-size:2.2rem; margin-bottom:1rem; display:block; }
.cf-dim-card--blue .cf-dim-icon  { color:#0B1F3A; }
.cf-dim-card--gold .cf-dim-icon  { color:#c9a830; }
.cf-dim-card--teal .cf-dim-icon  { color:#008572; }

.cf-dim-card h3 { font-size:1rem; font-weight:700; margin-bottom:.6rem; }

.cf-dim-formula {
    font-size:   1.5rem;
    font-weight: 900;
    margin:      .5rem 0;
    color:       #0B1F3A;
}
.cf-dim-formula span { color:#dfbb3e; }
.cf-dim-card p { font-size:.875rem; color:#6c757d; margin:0; }

.cf-dim-warning {
    display:       flex;
    align-items:   flex-start;
    gap:           .75rem;
    background:    rgba(220,53,69,.06);
    border:        1px solid rgba(220,53,69,.2);
    border-left:   4px solid #dc3545;
    border-radius: 6px;
    padding:       1rem 1.25rem;
    margin-top:    2.5rem;
    font-size:     .875rem;
    color:         #495057;
}
.cf-dim-warning i { color:#dc3545; flex-shrink:0; margin-top:2px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.cf-faq-container { max-width:780px; margin-inline:auto; }
.cf-faq-list      { display:flex; flex-direction:column; gap:.75rem; margin-top:2.5rem; padding:0; }

.cf-faq-item {
    background:    #fff;
    border:        1px solid #e9ecef;
    border-radius: 10px;
    overflow:      hidden;
    transition:    box-shadow .2s;
}
.cf-faq-item:has(.cf-faq-q[aria-expanded="true"]) {
    box-shadow: 0 4px 20px rgba(11,31,58,.08);
    border-color:#008572;
}

.cf-faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:1.1rem 1.4rem;
    background:transparent; border:none; cursor:pointer; text-align:left;
    font-size:.95rem; font-weight:600; color:#0B1F3A;
    transition:background .2s;
}
.cf-faq-q:hover { background:rgba(0,133,114,.05); }
.cf-faq-q i { flex-shrink:0; color:#008572; transition:transform .25s; }
.cf-faq-q[aria-expanded="true"] i { transform:rotate(180deg); }

.cf-faq-a {
    padding:0 1.4rem 1.2rem;
    font-size:.875rem; color:#6c757d; line-height:1.7;
}
.cf-faq-a[hidden] { display:none; }
.cf-faq-a p { margin:0 0 .75rem; }
.cf-faq-a p:last-child { margin-bottom:0; }

/* ── ANIMACIONES SCROLL ──────────────────────────────────────────────────── */
.fade-wait  { opacity:0; transform:translateY(18px); transition:opacity .45s ease, transform .45s ease; }
.fade-in    { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:575px) {
    .cf-timeline::before { left:20px; }
    .cf-tl-icon { width:42px; height:42px; font-size:1rem; }
    .cf-via-header { padding:1.2rem 1.25rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NUEVAS SECCIONES: AVISO CRÍTICO · CÓMO MEDIR · TABLA DE TAMAÑOS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── AVISO CRÍTICO DE RETENCIÓN ─────────────────────────────────────────── */
.cf-aviso-critico {
    display:        flex;
    align-items:    flex-start;
    gap:            1.25rem;
    background:     linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border:         2px solid #f0ad4e;
    border-left:    6px solid #dc3545;
    border-radius:  10px;
    padding:        1.35rem 1.5rem;
    margin-bottom:  2.5rem;
    box-shadow:     0 4px 16px rgba(220,53,69,.12);
}
.cf-aviso-critico-icono {
    color:       #dc3545;
    flex-shrink: 0;
    margin-top:  2px;
    font-size:   1.5rem;
}
.cf-aviso-critico-texto strong {
    display:       block;
    font-size:     1rem;
    font-weight:   800;
    color:         #b02a37;
    margin-bottom: .4rem;
}
.cf-aviso-critico-texto p {
    font-size:   .9rem;
    color:       #495057;
    margin:      0;
    line-height: 1.65;
}
@media (max-width: 575px) {
    .cf-aviso-critico { flex-direction:column; gap:.75rem; }
}

/* ── SECCIÓN CÓMO MEDIR ─────────────────────────────────────────────────── */
.cf-medicion-wrap {
    margin-top: 3.5rem;
}
.cf-medicion-wrap h3 {
    font-size:   1.5rem;
    font-weight: 800;
    color:       #0B1F3A;
}

.cf-medicion-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2.5rem;
    align-items:           start;
    margin-bottom:         2.5rem;
}
@media (min-width: 768px) {
    .cf-medicion-grid { grid-template-columns: 1fr 1.4fr; gap: 3rem; }
}

/* ── DIAGRAMA VISUAL MALETA ──────────────────────────────────────────────── */
.cf-medicion-figura { display: flex; justify-content: center; }

.cf-maleta-diagram {
    position:        relative;
    width:           220px;
    height:          270px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.cf-maleta-box {
    position:        relative;
    width:           160px;
    height:          200px;
    border:          2.5px dashed #b0bec5;
    border-radius:   16px;
    background:      rgba(11,31,58,.04);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.cf-maleta-icon {
    font-size: 4.5rem;
    color:     rgba(11,31,58,.18);
}

/* Badges A / B / C circulares */
.cf-dim-badge {
    position:        absolute;
    width:           30px;
    height:          30px;
    background:      #dfbb3e;
    color:           #0B1F3A;
    border-radius:   50%;
    font-size:       .78rem;
    font-weight:     900;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 3px 10px rgba(223,187,62,.45);
    border:          2px solid #fff;
}
.cf-dim-badge--a { top:-15px; left:50%; transform:translateX(-50%); }
.cf-dim-badge--b { top:50%; right:-15px; transform:translateY(-50%); }
.cf-dim-badge--c { bottom:-15px; left:50%; transform:translateX(-50%); }

/* ── INSTRUCCIONES DE MEDICIÓN ──────────────────────────────────────────── */
.cf-medicion-info h4 {
    font-size:     1.1rem;
    font-weight:   800;
    color:         #0B1F3A;
    margin-bottom: 1.25rem;
}

.cf-medicion-dl {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    padding:        0;
    margin:         0;
}
.cf-medicion-def dt {
    font-size:     .92rem;
    font-weight:   700;
    color:         #0B1F3A;
    margin-bottom: .2rem;
}
.cf-medicion-def dd {
    font-size:   .87rem;
    color:       #6c757d;
    margin-left: 0;
    line-height: 1.6;
}

.cf-dim-tip {
    display:       flex;
    align-items:   flex-start;
    gap:           .6rem;
    background:    rgba(223,187,62,.12);
    border:        1px solid rgba(223,187,62,.35);
    border-radius: 8px;
    padding:       .85rem 1.1rem;
    font-size:     .875rem;
    color:         #6c6200;
    margin-top:    1.5rem;
}
.cf-dim-tip i { color:#c9a830; flex-shrink:0; margin-top:2px; }

/* ── TABLA DE TAMAÑOS Y PRECIOS ─────────────────────────────────────────── */
.cf-tarifas-table-wrap {
    overflow-x:  auto;
    border-radius: 12px;
    box-shadow:    0 4px 24px rgba(11,31,58,.1);
    -webkit-overflow-scrolling: touch;
}

.cf-tarifas-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9rem;
    min-width:       480px;
}

.cf-tarifas-table thead tr {
    background: #0B1F3A;
    color:      #fff;
}
.cf-tarifas-table thead th {
    padding:        .9rem 1.1rem;
    text-align:     left;
    font-weight:    700;
    font-size:      .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border:         none;
    white-space:    nowrap;
}
.cf-tarifas-table thead th:last-child { text-align: right; }

.cf-tarifas-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition:    background .15s;
}
.cf-tarifas-table tbody tr:last-child  { border-bottom: none; }
.cf-tarifas-table tbody tr:hover       { background: rgba(0,133,114,.04); }
.cf-tarifas-table tbody tr:nth-child(even) { background: rgba(11,31,58,.025); }
.cf-tarifas-table tbody tr:nth-child(even):hover { background: rgba(0,133,114,.04); }

.cf-tarifas-table td {
    padding:        .85rem 1.1rem;
    color:          #495057;
    vertical-align: middle;
}
.cf-tarifas-table td strong { color:#0B1F3A; font-weight:700; }

.cf-tarifas-precio {
    text-align:  right;
    font-weight: 800;
    font-size:   1rem;
    color:       #008572 !important;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .cf-tarifas-table-wrap { border-radius: 8px; }
    .cf-tarifas-table      { font-size: .82rem; }
    .cf-tarifas-table td,
    .cf-tarifas-table th   { padding: .7rem .8rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODALIDADES — ¿a dónde llevamos el equipaje?  ·  añadido Lote 3
   ════════════════════════════════════════════════════════════════════════════ */
.cf-mod-section {
    /* Tinte teal muy suave para separar de cf-vias (blanca) y cf-pasos (gris) */
    background: linear-gradient(180deg, rgba(0,133,114,.055) 0%, rgba(0,133,114,.02) 100%);
}
.cf-mod-grid {
    display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem;
}
@media (min-width:768px) { .cf-mod-grid { grid-template-columns:repeat(3,1fr); } }

.cf-mod-card {
    display:flex; flex-direction:column; gap:.55rem;
    background:#fff; border-radius:16px; padding:2rem 1.5rem; text-align:center;
    border:1px solid rgba(11,31,58,.07);
    box-shadow:0 2px 18px rgba(11,31,58,.07);
    transition:transform .25s, box-shadow .25s;
}
.cf-mod-card:hover { transform:translateY(-5px); box-shadow:0 12px 34px rgba(11,31,58,.12); }
.cf-mod-card--primary {
    border-color:rgba(223,187,62,.45);
    box-shadow:0 6px 26px rgba(223,187,62,.18);
}

.cf-mod-icon {
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    font-size:1.6rem; color:#0B1F3A; margin:0 auto .4rem; min-height:46px;
}
.cf-mod-card--primary .cf-mod-icon { color:#c9a830; }
.cf-mod-icon .fa-arrow-right-long { font-size:1rem; color:#008572; }

.cf-mod-card h3 { font-size:1.1rem; font-weight:800; color:#0B1F3A; margin:0; }
.cf-mod-card p  { font-size:.9rem; color:#495057; line-height:1.65; margin:0; }
.cf-mod-card .btn { align-self:center; margin-top:.4rem; }