/* ════════════════════════════════════════════════════════════
   traslado-web.css — Transotel
   Fichero real: wwwroot/css/traslado-web.css

   LOTE F2b — carcasa del F1 + PASO 1 del wizard publico (B2C).
   Sustituye a la version del F1. Todo lo que habia sigue aqui, sin tocar:
   lo nuevo esta al final, a partir de "PASO 1".

   Colores de la web (regla 28):
     #008572  fondos y rellenos
     #dfbb3e  botones y acentos
   Movil primero. El breakpoint unico esta en 640px.
   ════════════════════════════════════════════════════════════ */

:root {
    --tw-teal:        #008572;
    --tw-teal-oscuro: #00655a;
    --tw-teal-suave:  #e6f2f0;
    --tw-oro:         #dfbb3e;
    --tw-oro-suave:   #fdf6e3;
    --tw-gris:        #6b7280;
    --tw-gris-claro:  #e5e7eb;
    --tw-texto:       #1f2937;
    --tw-radio:       10px;
    --tw-rojo:        #b91c1c;
    --tw-rojo-suave:  #fef2f2;
    --tw-verde:       #15803d;
    --tw-verde-suave: #f0fdf4;
}

/* ── Contenedor ───────────────────────────────────────────── */
.tw-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    color: var(--tw-texto);
}

/* ── Aviso de pruebas (se retira en el F6) ────────────────── */
.tw-aviso {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--tw-oro-suave);
    border: 1px solid var(--tw-oro);
    border-radius: var(--tw-radio);
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .9rem;
    line-height: 1.4;
}

.tw-aviso i {
    color: var(--tw-oro);
    flex-shrink: 0;
}

/* ── Cabecera ─────────────────────────────────────────────── */
.tw-header {
    margin-bottom: 1.75rem;
}

.tw-header__titulo {
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--tw-teal-oscuro);
    margin: 0 0 .5rem;
}

.tw-header__entrada {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tw-gris);
    margin: 0;
    max-width: 60ch;
}

/* ── Indicador de pasos ───────────────────────────────────── */
.tw-pasos {
    margin-bottom: 1.5rem;
}

.tw-pasos__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.tw-paso {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--tw-gris);
    font-size: .85rem;
    white-space: nowrap;
}

.tw-paso--activo {
    background: var(--tw-teal-suave);
    color: var(--tw-teal-oscuro);
    font-weight: 600;
}

.tw-paso__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--tw-gris-claro);
    color: var(--tw-gris);
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tw-paso--activo .tw-paso__num {
    background: var(--tw-teal);
    color: #fff;
}

/* ── Panel de un paso ─────────────────────────────────────── */
.tw-panel {
    background: #fff;
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.tw-panel__titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tw-teal-oscuro);
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--tw-gris-claro);
}

.tw-panel__titulo i {
    color: var(--tw-teal);
}

/* ── Hueco provisional del F1 ─────────────────────────────── */
.tw-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--tw-gris);
    border: 2px dashed var(--tw-gris-claro);
    border-radius: var(--tw-radio);
}

.tw-placeholder i {
    font-size: 1.75rem;
    color: var(--tw-oro);
}

.tw-placeholder p {
    margin: 0;
    font-size: .95rem;
}

/* ════════════════════════════════════════════════════════════
   PASO 1 · RUTA Y DIRECCIONES   (lote F2b)
   ════════════════════════════════════════════════════════════ */

/* ── Campos ───────────────────────────────────────────────── */
.tw-campo {
    margin: 0 0 1.1rem;
    border: 0;
    padding: 0;
}

.tw-label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tw-texto);
    margin-bottom: .4rem;
    padding: 0;
}

.tw-label--sep {
    margin-top: .9rem;
}

.tw-input {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tw-texto);
    background: #fff;
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tw-input:focus {
    outline: none;
    border-color: var(--tw-teal);
    box-shadow: 0 0 0 3px rgba(0, 133, 114, .12);
}

.tw-input--cp {
    max-width: 11rem;
    letter-spacing: .06em;
}

.tw-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: .7rem;
    padding-right: 2.2rem;
}

.tw-hint {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--tw-gris);
}

.tw-hint--centro {
    text-align: center;
    margin-top: .6rem;
}

/* ── Tipo de traslado ─────────────────────────────────────── */
.tw-tipos {
    margin-bottom: 1.5rem;
}

.tw-tipos__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
}

.tw-tipo input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tw-tipo__caja {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 2px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    cursor: pointer;
    font-size: .95rem;
    line-height: 1.3;
    transition: border-color .15s ease, background .15s ease;
}

.tw-tipo__caja i {
    color: var(--tw-gris);
    font-size: 1.05rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}

.tw-tipo input:checked + .tw-tipo__caja {
    border-color: var(--tw-teal);
    background: var(--tw-teal-suave);
    font-weight: 600;
    color: var(--tw-teal-oscuro);
}

.tw-tipo input:checked + .tw-tipo__caja i {
    color: var(--tw-teal);
}

.tw-tipo input:focus-visible + .tw-tipo__caja {
    outline: 3px solid var(--tw-oro);
    outline-offset: 2px;
}

/* ── Origen y destino ─────────────────────────────────────── */
.tw-ruta {
    display: flex;
    flex-direction: column;
}

.tw-extremo {
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    padding: 1rem;
    background: #fcfcfc;
}

.tw-extremo__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--tw-teal-oscuro);
    margin: 0 0 .9rem;
}

.tw-extremo__titulo i {
    color: var(--tw-teal);
    font-size: .85rem;
}

.tw-extremo .tw-campo:last-child {
    margin-bottom: 0;
}

.tw-flecha {
    display: flex;
    justify-content: center;
    color: var(--tw-gris);
    padding: .55rem 0;
    font-size: 1.1rem;
}

/* ── Buscador con sugerencias ─────────────────────────────── */
.tw-busca {
    position: relative;
}

.tw-busca__icono {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tw-gris);
    font-size: .9rem;
    pointer-events: none;
}

.tw-busca .tw-input {
    padding-left: 2.4rem;
}

.tw-sugg {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.tw-sugg__item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .6rem .7rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.35;
}

.tw-sugg__item:hover,
.tw-sugg__item:focus {
    background: var(--tw-teal-suave);
}

.tw-sugg__item i {
    color: var(--tw-teal);
    margin-top: .15rem;
    flex-shrink: 0;
}

.tw-sugg__caja {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-sugg__caja strong {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tw-sugg__caja span {
    font-size: .82rem;
    color: var(--tw-gris);
}

.tw-sugg__vacio {
    padding: .75rem .7rem;
    font-size: .88rem;
    color: var(--tw-gris);
    text-align: center;
}

/* ── Resultado de la validacion ───────────────────────────── */
.tw-resultado {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.4rem;
    padding: .9rem 1rem;
    border-radius: var(--tw-radio);
    border: 1px solid var(--tw-gris-claro);
    background: #f9fafb;
    font-size: .93rem;
    line-height: 1.45;
}

.tw-resultado i {
    font-size: 1.05rem;
    margin-top: .1rem;
    flex-shrink: 0;
    color: var(--tw-gris);
}

.tw-resultado__txt {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.tw-resultado__txt span {
    color: var(--tw-gris);
    font-size: .88rem;
}

.tw-resultado--ok {
    border-color: var(--tw-verde);
    background: var(--tw-verde-suave);
}

.tw-resultado--ok i,
.tw-resultado--ok strong {
    color: var(--tw-verde);
}

.tw-resultado--ko {
    border-color: var(--tw-rojo);
    background: var(--tw-rojo-suave);
}

.tw-resultado--ko i,
.tw-resultado--ko strong {
    color: var(--tw-rojo);
}

.tw-resultado--cargando i {
    color: var(--tw-teal);
}

/* ── Acciones ─────────────────────────────────────────────── */
.tw-acciones {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tw-gris-claro);
}

.tw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .85rem 1.25rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--tw-texto);
    background: var(--tw-oro);
    border: 0;
    border-radius: var(--tw-radio);
    cursor: pointer;
    transition: filter .15s ease;
}

.tw-btn:hover:not(:disabled) {
    filter: brightness(.95);
}

.tw-btn:disabled {
    background: var(--tw-gris-claro);
    color: var(--tw-gris);
    cursor: not-allowed;
}

/* ── Escritorio ───────────────────────────────────────────── */
@media (min-width: 640px) {

    .tw-main {
        padding: 2rem 1.5rem 4rem;
    }

    .tw-header__titulo {
        font-size: 2.1rem;
    }

    .tw-header__entrada {
        font-size: 1.075rem;
    }

    .tw-paso {
        font-size: .9rem;
        padding: .45rem 1rem;
    }

    .tw-panel {
        padding: 1.75rem;
    }

    .tw-tipos__grid {
        grid-template-columns: 1fr 1fr;
    }

    .tw-extremo {
        padding: 1.25rem;
    }

    .tw-btn {
        width: auto;
        min-width: 16rem;
        margin: 0 auto;
    }
}

/* ── Accesibilidad ────────────────────────────────────────── */
.tw-main :focus-visible {
    outline: 3px solid var(--tw-oro);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .tw-main *,
    .tw-main *::before,
    .tw-main *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════
   GOOGLE PLACES   (lote F2c)
   El desplegable de Google (.pac-container) se cuelga del <body>, fuera de
   nuestro contenedor, asi que hay que darle z-index a mano o el buscador de
   hoteles (.tw-sugg, z-index 20) se le pone por encima cuando los dos bloques
   estan abiertos a la vez.
   ════════════════════════════════════════════════════════════ */

.pac-container {
    z-index: 100000 !important;
    border-radius: var(--tw-radio);
    border: 1px solid var(--tw-gris-claro);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    font-family: inherit;
    margin-top: 4px;
}

.pac-item {
    padding: .45rem .7rem;
    font-size: .9rem;
    cursor: pointer;
    border-top: 0;
}

.pac-item:hover,
.pac-item-selected {
    background: var(--tw-teal-suave);
}

.pac-item-query {
    font-size: .95rem;
    color: var(--tw-texto);
}

.pac-icon {
    margin-top: .35rem;
}

/* Google mete su propio logo al final del desplegable. Se deja, es
   obligatorio por las condiciones de uso de la API. */

/* ════════════════════════════════════════════════════════════
   PASO 2 · EQUIPAJE Y PRECIO   (lote F3)

   Todo lo de arriba es del F1, el F2b y el F2c y NO se ha tocado ni una
   linea. Lo del F3 empieza aqui y se apoya en las mismas variables de :root.
   Movil primero, con el mismo breakpoint unico de 640px.
   ════════════════════════════════════════════════════════════ */

/* ── Lista de tamanos ─────────────────────────────────────── */
.tw-tallas {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.tw-talla {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    background: #fcfcfc;
    transition: border-color .15s ease, opacity .15s ease;
}

.tw-talla__cara {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.tw-talla__cara > i {
    color: var(--tw-teal);
    font-size: 1.2rem;
    width: 1.6rem;
    text-align: center;
    flex-shrink: 0;
}

.tw-talla__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tw-talla__txt strong {
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.25;
}

.tw-talla__txt span {
    font-size: .82rem;
    color: var(--tw-gris);
}

/* El motivo por el que un tamano no esta disponible. Se ensena en vez de
   hacer desaparecer la fila: un tamano que desaparece parece un fallo. */
.tw-talla__motivo {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--tw-rojo);
}

.tw-talla--off {
    opacity: .55;
    background: #f9fafb;
}

.tw-talla--off .tw-talla__cara > i {
    color: var(--tw-gris);
}

/* ── Contador de mas y menos ──────────────────────────────── */
.tw-stepper {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.tw-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: .85rem;
    color: var(--tw-teal-oscuro);
    background: var(--tw-teal-suave);
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: filter .15s ease;
}

.tw-stepper__btn:hover:not(:disabled) {
    filter: brightness(.95);
}

.tw-stepper__btn:disabled {
    background: #f3f4f6;
    color: #c3c7cd;
    cursor: not-allowed;
}

.tw-stepper__num {
    min-width: 2rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tw-texto);
}

.tw-contador {
    margin: 0 0 1.1rem;
    font-size: .85rem;
    color: var(--tw-gris);
    text-align: right;
}

/* ── Desglose del precio ──────────────────────────────────── */
.tw-precio {
    border: 1px solid var(--tw-teal);
    border-radius: var(--tw-radio);
    background: var(--tw-teal-suave);
    padding: 1rem 1.1rem;
}

.tw-precio__linea {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .93rem;
    color: var(--tw-texto);
    padding: .3rem 0;
}

.tw-precio__total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .55rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(0, 133, 114, .25);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tw-teal-oscuro);
}

.tw-precio__total span:last-child {
    font-variant-numeric: tabular-nums;
}

.tw-precio .tw-hint {
    margin-top: .6rem;
}

/* ── Aviso informativo del paso 2 ─────────────────────────── */
/* Los estados --ok, --ko y --cargando ya existen desde el F2b. */
.tw-resultado--info {
    border-color: var(--tw-oro);
    background: var(--tw-oro-suave);
}

.tw-resultado--info i,
.tw-resultado--info strong {
    color: #8a6d14;
}

/* ── Dos botones ──────────────────────────────────────────── */
.tw-acciones--dos {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.tw-btn--sec {
    background: #fff;
    color: var(--tw-teal-oscuro);
    border: 1px solid var(--tw-teal);
}

.tw-btn--sec:hover:not(:disabled) {
    background: var(--tw-teal-suave);
    filter: none;
}

/* ── Escritorio ───────────────────────────────────────────── */
@media (min-width: 640px) {

    .tw-talla {
        padding: .95rem 1.15rem;
    }

    .tw-talla__txt strong {
        font-size: 1.02rem;
    }

    .tw-precio {
        padding: 1.25rem 1.5rem;
    }

    .tw-precio__total {
        font-size: 1.4rem;
    }

    .tw-acciones--dos {
        flex-direction: row-reverse;
        justify-content: center;
        gap: 1rem;
    }

    .tw-acciones--dos .tw-btn {
        width: auto;
        min-width: 13rem;
        margin: 0;
    }
}

/* ════════════════════════════════════════════════════════════
   PASO 3 · FECHAS   (lote F4)

   Se inserta AQUI, justo antes de la capa visual, y no al final del fichero,
   para respetar la estructura que dejo el F3.6: primero todo lo funcional
   (F1, F2b, F2c, F3 y ahora F4) y encima UNA sola capa visual. Si algun dia
   hay que dar marcha atras con el aspecto, se borra desde la capa visual y
   esto sigue funcionando.

   Movil primero, mismo breakpoint unico de 640px.
   ════════════════════════════════════════════════════════════ */

/* ── Caja del calendario ──────────────────────────────────── */
.tw-cal {
    border: 1px solid #d7dde8;
    border-radius: 10px;
    padding: .75rem;
    background: #fff;
    margin: 0 0 1rem;
}

.tw-cal__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.tw-cal__mes {
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
    flex: 1 1 auto;
}

.tw-cal__nav {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #d7dde8;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #008572;
}

.tw-cal__nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Rejilla de siete columnas ────────────────────────────── */
.tw-cal__dow,
.tw-cal__rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tw-cal__dow {
    margin: 0 0 .35rem;
}

.tw-cal__dow li {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
}

/* ── Un dia ───────────────────────────────────────────────── */
.tw-dia {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 2.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-size: .95rem;
    font-family: inherit;
    color: #111827;
    cursor: pointer;
    padding: 0;
}

/* Hueco de relleno al principio y al final del mes. */
.tw-dia--vacio {
    visibility: hidden;
    cursor: default;
}

/* No ofertable: se VE, pero no se puede pulsar.
   Handoff 6.1: decirlo en el calendario, no rechazarlo despues. */
.tw-dia--no {
    color: #b6bcc7;
    cursor: not-allowed;
    background: #f4f6f9;
    text-decoration: line-through;
}

.tw-dia--si {
    border-color: #cfe3df;
    background: #f2faf8;
    font-weight: 600;
}

.tw-dia--si:hover,
.tw-dia--si:focus-visible {
    border-color: #008572;
    background: #e3f4f0;
}

.tw-dia--elegido,
.tw-dia--elegido:hover {
    background: #008572;
    border-color: #008572;
    color: #fff;
    font-weight: 700;
}

/* ── Resumen de lo elegido ────────────────────────────────── */
.tw-elegido {
    border: 1px solid #d7dde8;
    border-radius: 10px;
    padding: .9rem 1rem;
    margin: 0 0 1rem;
    background: #fff;
}

.tw-elegido__linea {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    font-size: .95rem;
}

.tw-elegido__linea strong {
    text-align: right;
}

.tw-elegido__nota {
    display: block;
    margin: .5rem 0 0;
    font-size: .8rem;
    color: #6b7280;
}

/* Aviso de que ese dia lleva recargo, o cualquier otro matiz del dia. */
.tw-elegido__aviso {
    display: block;
    margin: .5rem 0 0;
    font-size: .85rem;
    color: #92400e;
}

/* ── Leyenda ──────────────────────────────────────────────── */
.tw-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin: 0 0 1rem;
    font-size: .8rem;
    color: #6b7280;
}

.tw-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tw-leyenda i {
    width: .85rem;
    height: .85rem;
    border-radius: 3px;
    display: inline-block;
}

.tw-leyenda__si { background: #f2faf8; border: 1px solid #cfe3df; }
.tw-leyenda__no { background: #f4f6f9; border: 1px solid #e3e8f0; }

/* ── Escritorio ───────────────────────────────────────────── */
@media (min-width: 640px) {

    .tw-cal {
        padding: 1.1rem;
    }

    .tw-cal__dow,
    .tw-cal__rejilla {
        gap: .35rem;
    }

    .tw-dia {
        min-height: 3rem;
        font-size: 1rem;
    }
}

/* ════════════════════════════════════════════════════════════
   CAPA VISUAL   (lote F3.6 · sustituye entera a la del F3.5)

   POR QUE SE REHIZO
     La del F3.5 maquillaba una caja de 1060 px centrada sobre crema. El
     problema no era el acabado: era que la pantalla no hablaba el idioma del
     resto de Transotel. La home es AZUL NAVAL con dorado, hero a todo el
     ancho con foto detras, titular enorme con una linea en degradado dorado y
     franja de avales debajo. Esto copia ese lenguaje en vez de inventar uno
     tercero.

   DE DONDE SALEN LOS VALORES
     De home.css. *** home.css NO se carga en esta pagina: *** el layout solo
     trae site.css, legal.css y esta hoja. Por eso los colores se redefinen
     aqui con prefijo --tw2- en vez de reutilizar las --hm-, que no existirian.

   .container SI EXISTE: lo define site.css y lo usan la cabecera y el pie del
   sitio. Usandolo, el wizard queda alineado con ellos al pixel.

   TODO lo de arriba (841 lineas del F1, F2b, F2c y F3) sigue INTACTO.
   *** NO SE TOCA NI UN id NI UNA CLASE DE LAS QUE USA EL JAVASCRIPT. ***
   ════════════════════════════════════════════════════════════ */

:root {
    --tw2-navy:       #0B1F3A;
    --tw2-navy-mid:   #152d55;
    --tw2-navy-light: #1e4070;
    --tw2-oro:        #dfbb3e;
    --tw2-oro-claro:  #f0d472;
    --tw2-humo:       #f5f7fb;
    --tw2-texto:      #111827;
    --tw2-texto-mid:  #4b5563;
    --tw2-sombra:     0 2px 20px rgba(11, 31, 58, .08);
    --tw2-sombra-alta: 0 10px 40px rgba(11, 31, 58, .16);
    --tw2-radio:      12px;
    --tw2-radio-lg:   18px;
}

/* ── El main deja de ser una caja estrecha ────────────────────
   Se conserva la clase .tw-main para no romper los selectores de accesibilidad
   y de prefers-reduced-motion que ya existian arriba. Solo se le quita el
   ancho y el padding: el ancho lo ponen ahora los .container de dentro. */
.tw-main {
    max-width: none;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════
   HERO A TODO EL ANCHO
   ════════════════════════════════════════════════════════════ */
.tw-hero {
    position: relative;
    background: var(--tw2-navy);
    color: #fff;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.tw-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.tw-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

/* Degradado naval sobre la foto. Mismo angulo que .hero-section::before */
.tw-hero__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
                rgba(11, 31, 58, .97) 0%,
                rgba(21, 45, 85, .90) 55%,
                rgba(11, 31, 58, .78) 100%);
    z-index: 1;
}

/* Halo dorado de la esquina, como en la home */
.tw-hero::after {
    content: '';
    position: absolute;
    top: -180px;
    right: -180px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(223, 187, 62, .14) 0%, transparent 68%);
    z-index: 1;
    pointer-events: none;
}

.tw-hero__inner {
    position: relative;
    z-index: 2;
    padding: 3.25rem 0 3rem;
    max-width: 44rem;
}

/* Pildora dorada */
.tw-hero__sello {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(223, 187, 62, .15);
    border: 1px solid rgba(223, 187, 62, .45);
    color: var(--tw2-oro);
    padding: .38rem 1.05rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.35rem;
    width: fit-content;
}

.tw-hero__titulo {
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #fff;
    margin: 0 0 1.2rem;
}

/* Segunda linea en degradado dorado, igual que .hero-title-highlight */
.tw-hero__oro {
    display: block;
    background: linear-gradient(90deg, #dfbb3e 0%, #f5dc7a 48%, #dfbb3e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tw-hero__sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    margin: 0;
    max-width: 40ch;
}

/* ── Franja de avales, pegada al hero ─────────────────────── */
.tw-avales {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, .18);
    border-top: 1px solid rgba(255, 255, 255, .11);
    padding: 1.1rem 0;
}

.tw-avales__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1.4rem;
}

.tw-avales__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tw-avales__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tw-avales__pill {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .78);
    padding: .32rem .85rem;
    border-radius: 999px;
    font-size: .77rem;
    white-space: nowrap;
}

.tw-avales__pill i {
    color: var(--tw2-oro);
    font-size: .7rem;
}

/* ════════════════════════════════════════════════════════════
   ZONAS DE CONTENIDO
   ════════════════════════════════════════════════════════════ */
.tw-zona {
    padding: 2.75rem 0;
}

.tw-zona--humo {
    background: var(--tw2-humo);
}

.tw-zona--blanca {
    background: #fff;
}

/* Cabecera de seccion con la linea dorada de la home */
.tw-seccion__cab {
    text-align: center;
    margin-bottom: 2rem;
}

.tw-seccion__cab h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tw2-texto);
    margin: 0;
}

.tw-seccion__cab p {
    color: var(--tw2-texto-mid);
    margin: .8rem 0 0;
    font-size: 1rem;
}

.tw-seccion__linea {
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, var(--tw2-oro) 0%, var(--tw2-oro-claro) 60%, transparent 100%);
    border-radius: 4px;
    margin: 1rem auto 0;
}

/* ── Aviso de pruebas: discreto. Se va entero en el F6 ────── */
.tw-aviso {
    font-size: .85rem;
    padding: .6rem .9rem;
    margin: 0 auto 1.5rem;
    max-width: 48rem;
    background: #fff;
    border-color: rgba(223, 187, 62, .5);
    box-shadow: none;
}

/* ── Indicador de pasos ───────────────────────────────────── */
.tw-pasos {
    margin-bottom: 1.75rem;
}

.tw-pasos__lista {
    justify-content: center;
}

.tw-paso {
    background: #fff;
    border: 1px solid #e3e8f0;
}

.tw-paso--activo {
    background: var(--tw2-navy);
    border-color: var(--tw2-navy);
    color: #fff;
}

.tw-paso--activo .tw-paso__num {
    background: var(--tw2-oro);
    color: var(--tw2-navy);
}

/* ── Panel del wizard ─────────────────────────────────────── */
.tw-panel {
    border-radius: var(--tw2-radio-lg);
    border-color: #e3e8f0;
    box-shadow: var(--tw2-sombra);
    padding: 1.5rem 1.25rem;
    max-width: 62rem;
    margin: 0 auto;
}

.tw-panel__titulo {
    font-size: 1.2rem;
    color: var(--tw2-navy);
}

.tw-panel__titulo i {
    color: var(--tw2-oro);
}

.tw-extremo__titulo {
    color: var(--tw2-navy);
}

.tw-extremo {
    background: #fff;
    border-color: #e3e8f0;
    border-radius: var(--tw2-radio);
}

.tw-flecha {
    color: var(--tw2-navy);
    opacity: .45;
}

.tw-tipo__caja {
    border-radius: var(--tw2-radio);
    background: #fff;
}

.tw-tipo input:checked + .tw-tipo__caja {
    border-color: var(--tw2-navy);
    background: #eef2f9;
    color: var(--tw2-navy);
}

.tw-tipo input:checked + .tw-tipo__caja i {
    color: var(--tw2-oro);
}

/* [DTO-C3] Codigo de descuento en el paso 4 */
.tw-campo--dto {
    margin-top: 1rem;
}

    .tw-campo--dto .tw-label i {
        margin-right: .35rem;
        color: #008572;
    }

.tw-resumen__linea--dto span:last-child {
    color: #008572;
    font-weight: 700;
}

/* ── Tallas y precio ──────────────────────────────────────── */
.tw-talla {
    background: #fff;
    border-radius: var(--tw2-radio);
    border-color: #e3e8f0;
}

.tw-talla__cara > i {
    color: var(--tw2-navy);
}

.tw-talla__txt strong {
    color: var(--tw2-texto);
}

.tw-precio {
    border-radius: var(--tw2-radio-lg);
    border-color: var(--tw2-navy);
    background: linear-gradient(130deg, var(--tw2-navy) 0%, var(--tw2-navy-mid) 100%);
    color: #fff;
    box-shadow: var(--tw2-sombra);
}

.tw-precio__linea {
    color: rgba(255, 255, 255, .82);
}

.tw-precio__total {
    border-top-color: rgba(255, 255, 255, .18);
    color: var(--tw2-oro);
}

.tw-precio .tw-hint {
    color: rgba(255, 255, 255, .55);
}

/* ── Botones ──────────────────────────────────────────────── */
.tw-btn {
    border-radius: 999px;
    padding: .9rem 1.6rem;
    font-weight: 800;
    color: var(--tw2-navy);
    box-shadow: 0 2px 10px rgba(11, 31, 58, .12);
}

.tw-btn:disabled {
    box-shadow: none;
}

.tw-btn--sec {
    background: #fff;
    color: var(--tw2-navy);
    border: 1px solid #d7dfeb;
}

.tw-btn--sec:hover:not(:disabled) {
    background: var(--tw2-humo);
}

/* ════════════════════════════════════════════════════════════
   TARJETAS DE "COMO FUNCIONA"
   ════════════════════════════════════════════════════════════ */
.tw-confianza__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tw-confianza__item {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.6rem 1.4rem;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: var(--tw2-radio-lg);
    box-shadow: var(--tw2-sombra);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1),
                box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}

.tw-confianza__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--tw2-sombra-alta);
}

.tw-confianza__item > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tw2-navy) 0%, var(--tw2-navy-light) 100%);
    color: var(--tw2-oro);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.tw-confianza__txt {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tw-confianza__txt strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tw2-texto);
}

.tw-confianza__txt span {
    font-size: .92rem;
    line-height: 1.65;
    color: var(--tw2-texto-mid);
}

/* ── Pie del wizard ───────────────────────────────────────── */
.tw-pie {
    margin: 2rem auto 0;
    text-align: center;
    font-size: .82rem;
    color: var(--tw2-texto-mid);
}

.tw-pie i {
    color: var(--tw2-navy);
    margin-right: .35rem;
}

/* ════════════════════════════════════════════════════════════
   ESCRITORIO
   ════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {

    .tw-hero__inner {
        padding: 4.5rem 0 4rem;
    }

    .tw-zona {
        padding: 3.5rem 0;
    }

    .tw-panel {
        padding: 2rem;
    }

    .tw-confianza__lista {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ── ORIGEN Y DESTINO, UNO AL LADO DEL OTRO ──────────────────
       En movil siguen uno debajo de otro. El HTML no cambia: son los mismos
       tres hijos de .tw-ruta.                                            */
    .tw-ruta {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        gap: 1rem;
    }

    .tw-flecha {
        padding: 0;
        align-self: center;
        transform: rotate(-90deg);
        font-size: 1.25rem;
    }
}

@media (min-width: 992px) {

    .tw-hero__inner {
        padding: 5.5rem 0 4.5rem;
    }
}

/* ── Movimiento reducido ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .tw-confianza__item:hover {
        transform: none;
    }
}

/* ════════════════════════════════════════════════════════════
   CAPA VISUAL DEL PASO 3   (lote F4)

   Va al final, encima de todo, igual que la del F3.6. Aqui SOLO hay color,
   radios y sombras: ni una regla de posicion ni de rejilla, que viven arriba.
   Se usan las variables --tw2- del F3.6, no las --hm- de la home: home.css NO
   se carga en esta pagina.
   ════════════════════════════════════════════════════════════ */

.tw-cal {
    border-radius: var(--tw2-radio);
    border-color: #e3e8f0;
    box-shadow: var(--tw2-sombra);
}

.tw-cal__mes {
    color: var(--tw2-navy);
    letter-spacing: -.01em;
}

.tw-cal__nav {
    border-color: #e3e8f0;
    color: var(--tw2-navy);
    transition: background .15s ease, border-color .15s ease;
}

.tw-cal__nav:not(:disabled):hover {
    background: var(--tw2-humo);
    border-color: var(--tw2-navy);
}

.tw-cal__dow li {
    color: var(--tw2-texto-mid);
}

/* Los dias que SI se pueden elegir: naval sobre humo. */
.tw-dia--si {
    border-color: #dbe3ef;
    background: var(--tw2-humo);
    color: var(--tw2-navy);
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.tw-dia--si:hover,
.tw-dia--si:focus-visible {
    background: #e8edf7;
    border-color: var(--tw2-navy-light);
}

/* El elegido: naval macizo con el numero en dorado, igual que el total del
   recuadro del precio. Es el mismo gesto en las dos pantallas. */
.tw-dia--elegido,
.tw-dia--elegido:hover,
.tw-dia--elegido:focus-visible {
    background: linear-gradient(130deg, var(--tw2-navy) 0%, var(--tw2-navy-mid) 100%);
    border-color: var(--tw2-navy);
    color: var(--tw2-oro);
    box-shadow: var(--tw2-sombra);
}

.tw-elegido {
    border-radius: var(--tw2-radio);
    border-color: #e3e8f0;
    box-shadow: var(--tw2-sombra);
}

.tw-elegido__linea strong {
    color: var(--tw2-navy);
}

.tw-leyenda__si { background: var(--tw2-humo); border-color: #dbe3ef; }

/* ── Movimiento reducido, tambien aqui ────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .tw-dia--si,
    .tw-cal__nav {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════
   PASO 4 · TUS DATOS   (lote F5a) — BLOQUE FUNCIONAL

   Va aqui, DESPUES de la capa visual del F4, porque es bloque nuevo y no
   pisa nada de lo anterior. Su propia capa visual va al final del fichero,
   detras de esta, para poder dar marcha atras borrando desde alli.

   Movil primero. El breakpoint sigue siendo 640px, el unico del fichero.
   ════════════════════════════════════════════════════════════ */

/* ── El resumen ───────────────────────────────────────────── */
.tw-resumen {
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

.tw-resumen__bloque {
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--tw-gris-claro);
}

.tw-resumen__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tw-gris);
    margin: 0 0 .4rem;
}

.tw-resumen__titulo i { color: var(--tw-teal); }

.tw-resumen__ruta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

.tw-resumen__flecha {
    color: var(--tw-oro);
    flex: 0 0 auto;
}

.tw-resumen__bultos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
}

.tw-resumen__bultos li {
    background: var(--tw-teal-suave);
    color: var(--tw-teal-oscuro);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .9rem;
    font-weight: 600;
}

.tw-resumen__fecha {
    margin: 0;
    font-weight: 600;
    text-transform: capitalize;
}

.tw-resumen__plazo {
    margin: .15rem 0 0;
    font-size: .9rem;
    color: var(--tw-gris);
}

/* ── El desglose del resumen ──────────────────────────────────
   *** CLASES PROPIAS, NO LAS DEL PASO 2 (.tw-precio__*). ***
   Alli esas clases viven sobre una caja naval y la capa visual las pinta en
   blanco. Reutilizarlas aqui dejaba el subtotal y el impuesto ilegibles.
   Con clases propias, el paso 2 puede cambiar de aspecto sin arrastrar a
   este. */
.tw-resumen__precio {
    margin-top: .25rem;
    padding: .9rem 1rem;
    border-radius: var(--tw-radio);
    background: var(--tw-teal-suave);
    border: 1px solid var(--tw-teal);
}

.tw-resumen__linea {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .93rem;
    padding: .3rem 0;
}

.tw-resumen__linea span:last-child { font-variant-numeric: tabular-nums; }

.tw-resumen__total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .55rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(0, 133, 114, .25);
    font-size: 1.25rem;
    font-weight: 700;
}

.tw-resumen__total span:last-child { font-variant-numeric: tabular-nums; }

/* ── Marca de campo obligatorio ───────────────────────────── */
.tw-obl {
    color: var(--tw-rojo);
    font-weight: 700;
    margin-left: .2rem;
}

.tw-leyenda-obl {
    margin: -.35rem 0 .85rem;
    font-size: .82rem;
    color: var(--tw-gris);
}

/* ── Las dos puertas ──────────────────────────────────────── */
.tw-puertas { margin-bottom: 1.25rem; }

.tw-puertas__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-top: .5rem;
}

.tw-puerta { cursor: pointer; display: block; }

.tw-puerta input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tw-puerta__caja {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 2px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}

.tw-puerta__caja > i {
    font-size: 1.15rem;
    color: var(--tw-gris);
    margin-top: .15rem;
    flex: 0 0 auto;
}

.tw-puerta__txt { display: flex; flex-direction: column; gap: .15rem; }
.tw-puerta__txt strong { font-size: .98rem; }

.tw-puerta__txt small {
    font-size: .84rem;
    color: var(--tw-gris);
    line-height: 1.35;
}

.tw-puerta input:checked + .tw-puerta__caja {
    border-color: var(--tw-teal);
    background: var(--tw-teal-suave);
}

.tw-puerta input:checked + .tw-puerta__caja > i { color: var(--tw-teal); }

.tw-puerta input:focus-visible + .tw-puerta__caja {
    outline: 2px solid var(--tw-oro);
    outline-offset: 2px;
}

/* ── Bloques del formulario ───────────────────────────────── */
.tw-bloque { margin-bottom: 1rem; }

.tw-bloque__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    margin: 0 0 .75rem;
    color: var(--tw-teal-oscuro);
}

.tw-bloque__titulo i { color: var(--tw-teal); }

.tw-bloque__titulo--sep {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tw-gris-claro);
}

.tw-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}

/* ── Campo en error ───────────────────────────────────────── */
.tw-input--malo {
    border-color: var(--tw-rojo);
    background: var(--tw-rojo-suave);
}

/* ── Campo en espejo ("lo recojo yo mismo") ───────────────── */
.tw-input--espejo {
    background: #f9fafb;
    color: var(--tw-gris);
}

/* ── Casillas ─────────────────────────────────────────────── */
.tw-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
    line-height: 1.45;
    font-size: .93rem;
}

.tw-check input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .15rem;
    flex: 0 0 auto;
    accent-color: var(--tw-teal);
    cursor: pointer;
}

.tw-check--mismo { margin-bottom: .9rem; }

/* ── Condiciones ──────────────────────────────────────────── */
.tw-condiciones {
    border: 1px solid var(--tw-gris-claro);
    border-radius: var(--tw-radio);
    padding: .9rem 1rem;
    margin: 1.25rem 0 1rem;
    background: #fff;
}

.tw-condiciones__nota {
    display: flex;
    gap: .55rem;
    margin: .8rem 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--tw-gris-claro);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--tw-gris);
}

.tw-condiciones__nota i {
    color: var(--tw-teal);
    margin-top: .15rem;
    flex: 0 0 auto;
}

/* ── Boton de pagar ───────────────────────────────────────── */
.tw-btn--pagar:not(:disabled) {
    background: var(--tw-teal);
    color: #fff;
}

/* ── 640px arriba ─────────────────────────────────────────── */
@media (min-width: 640px) {

    .tw-puertas__grid { grid-template-columns: 1fr 1fr; }

    .tw-rejilla { grid-template-columns: 1fr 1fr; }

    .tw-resumen { padding: 1.25rem 1.4rem; }
}

/* ════════════════════════════════════════════════════════════
   CAPA VISUAL DEL PASO 4   (lote F5a)

   Va al final, encima de todo, igual que la del F3.6 y la del F4. Aqui SOLO
   hay color, radios y sombras: ni una regla de posicion ni de rejilla, que
   viven en el bloque funcional de arriba.
   Se usan las variables --tw2- del F3.6, no las --hm- de la home: home.css NO
   se carga en esta pagina.

   *** PARA DAR MARCHA ATRAS EN LO VISUAL DEL PASO 4 SE BORRA DESDE AQUI. ***
   ════════════════════════════════════════════════════════════ */

.tw-resumen {
    border-radius: var(--tw2-radio);
    border-color: #e3e8f0;
    box-shadow: var(--tw2-sombra);
    background: linear-gradient(180deg, #fff 0%, var(--tw2-humo) 100%);
}

.tw-resumen__bloque { border-bottom-color: #e3e8f0; }

.tw-resumen__titulo { color: var(--tw2-texto-mid); }

.tw-resumen__ruta { color: var(--tw2-navy); }

.tw-resumen__fecha { color: var(--tw2-navy); }

/* El desglose, en naval sobre claro. Se lee siempre, y ademas es el mismo
   lenguaje que la caja del paso 2 sin depender de sus clases. */
.tw-resumen__precio {
    border-radius: var(--tw2-radio);
    border-color: #d7dfeb;
    background: linear-gradient(130deg, var(--tw2-navy) 0%, var(--tw2-navy-mid) 100%);
    box-shadow: var(--tw2-sombra);
}

.tw-resumen__linea { color: rgba(255, 255, 255, .82); }

.tw-resumen__total {
    border-top-color: rgba(255, 255, 255, .18);
    color: var(--tw2-oro);
}

/* ── Las puertas ──────────────────────────────────────────── */
.tw-puerta__caja {
    border-radius: var(--tw2-radio);
    border-color: #e3e8f0;
}

.tw-puerta__caja:hover { border-color: var(--tw2-navy-light); }

.tw-puerta__txt strong { color: var(--tw2-navy); }

.tw-puerta input:checked + .tw-puerta__caja {
    border-color: var(--tw2-navy);
    background: var(--tw2-humo);
    box-shadow: var(--tw2-sombra);
}

.tw-puerta input:checked + .tw-puerta__caja > i { color: var(--tw2-oro); }

/* ── Titulos de bloque ────────────────────────────────────── */
.tw-bloque__titulo {
    color: var(--tw2-navy);
    letter-spacing: -.01em;
}

.tw-bloque__titulo i { color: var(--tw2-oro); }

.tw-bloque__titulo--sep { border-top-color: #e3e8f0; }

/* ── Condiciones ──────────────────────────────────────────── */
.tw-condiciones {
    border-radius: var(--tw2-radio);
    border-color: #e3e8f0;
    box-shadow: var(--tw2-sombra);
}

.tw-condiciones__nota {
    border-top-color: #e3e8f0;
    color: var(--tw2-texto-mid);
}

.tw-condiciones__nota i { color: var(--tw2-oro); }

/* ── El boton de pagar ────────────────────────────────────────
   Naval con letra dorada, igual que el resto de los botones fuertes del
   wizard. Desactivado se queda en gris, que es lo que va a ver Kasia
   hasta el F6. */
.tw-btn--pagar:not(:disabled) {
    background: var(--tw2-navy);
    color: var(--tw2-oro);
    box-shadow: var(--tw2-sombra);
}

.tw-btn--pagar:not(:disabled):hover { background: var(--tw2-navy-mid); }

/* ── Movimiento reducido, tambien aqui ────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .tw-puerta__caja {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════
   [AVISO EQUIPAJE] TAMANO Y PESO DECLARADOS — PASO 2

   NO SE REUTILIZA .tw-aviso A PROPOSITO. Esa clase es la del cartel de
   pruebas, que la propia hoja dice que se retira en el F6. Este aviso se
   queda para siempre, asi que tiene clase propia y no depende de otra que
   alguien pueda borrar.

   El mismo texto esta en el correo (NotificacionService._avisoEquipaje) y
   en el bono PDF (VoucherService, claves avisoEquipaje1 / avisoEquipaje2).
   ════════════════════════════════════════════════════════════ */
.tw-aviso-equipaje {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 1rem 0 0;
    padding: .85rem 1rem;
    background: var(--tw-oro-suave);
    border: 1px solid var(--tw-oro);
    border-radius: var(--tw-radio);
    font-size: .88rem;
    line-height: 1.5;
    color: var(--tw-texto);
}

.tw-aviso-equipaje > i {
    color: var(--tw-oro);
    margin-top: .15rem;
    flex: 0 0 auto;
}

.tw-aviso-equipaje strong {
    display: block;
    margin: 0 0 .2rem;
    color: var(--tw-teal-oscuro);
}

/* Movil estrecho: mismo bloque, un punto menos de letra y menos aire.
   El icono NO se quita: es lo que hace que el aviso se lea como aviso. */
@media (max-width: 420px) {
    .tw-aviso-equipaje {
        padding: .75rem .85rem;
        font-size: .84rem;
        gap: .5rem;
    }
}

/* ════════════════════════════════════════════════════════════
   EL ATRIBUTO hidden TIENE QUE OCULTAR
   ────────────────────────────────────────────────────────────
   *** ESTO ARREGLA UN FALLO REAL, NO ES UNA PRECAUCION. ***

   El navegador oculta los elementos con el atributo hidden mediante una
   regla suya, [hidden] { display: none }. Esa regla es de la HOJA DEL
   NAVEGADOR, asi que CUALQUIER regla de esta hoja con un selector de clase
   la gana. En cuanto una clase declara un display, el atributo hidden de
   ese elemento deja de ocultar nada y el JS que hace el.hidden = true se
   queda sin efecto, EN SILENCIO.

   MEDIDO el 21/08/2026: le pasaba a TRECE elementos del wizard, entre ellos
       .tw-elegido__linea   display: flex    -> suplemento de sabado, paso 3
       .tw-elegido__nota    display: block   -> su nota
       .tw-resumen__linea   display: flex    -> suplemento de sabado, paso 4
       .tw-resultado        display: flex    -> las cajas de mensaje y error
       .tw-servicios        display: grid    -> las tarjetas de servicio
       .tw-hint             display: block
       .tw-talla__motivo    display: block
       .tw-franja__aviso    display: flex

   COMO SE VEIA
   Elegir un viernes en el paso 3 pintaba "Suplemento entrega en sabado
   9,99 EUR"; al cambiar a un jueves la linea NO se iba, aunque el pedido ya
   no llevaba suplemento. El cobro siempre estuvo bien: el paso 4 lee el
   objeto de la respuesta, no el HTML. Lo que mentia era el cartel.
   Los mensajes de error tenian el mismo problema: una vez salian, no se
   borraban.

   POR QUE ASI Y NO CLASE A CLASE
   Devolverle el significado al atributo arregla los trece de una vez y
   cualquier elemento nuevo que se anada manana. Corregir clase por clase
   deja el mismo agujero abierto para el siguiente.

   El !important es imprescindible: sin el, una clase con display lo vuelve
   a ganar y no habriamos arreglado nada.

   VA AL FINAL DEL FICHERO a proposito, para que no haya duda de que nada
   posterior lo pisa.
   ════════════════════════════════════════════════════════════ */
[hidden] {
    display: none !important;
}