/* ═══════════════════════════════════════════════════════════════════════════
   europa.css — Páginas de Europa
   Ubicación: Transotel.Web/wwwroot/css/europa.css

   LOTE CODIGO-EUROPA (IA-7 + IA-9) · 26/10/2026 · Fichero NUEVO.
   La central «Enviar la maleta a casa desde España» y las cuatro de país.
   Usa las variables de site.css (--color-teal, --color-dorado, --color-azul…).
   Colores del proyecto: #DFBB3E botones · #008572 fondos.
   Todo con prefijo .eur- para no chocar con ninguna otra página.
   Mobile-first no hace falta aquí: la rejilla se rompe a una columna en los
   cortes de abajo, igual que ruta.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.eur [hidden] { display: none !important; }

/* ── Migas de pan ──────────────────────────────────────────────────────── */
.eur-migas {
    background: var(--color-off-white);
    border-bottom: 1px solid var(--color-light-gray);
    font-size: var(--font-size-sm);
}
.eur-migas ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: .6rem 0;
    list-style: none;
}
.eur-migas li { display: inline-flex; align-items: center; color: var(--color-text-muted); }
.eur-migas li + li::before {
    content: "›";
    margin-right: .35rem;
    color: var(--color-mid-gray);
}
.eur-migas a { color: var(--color-teal-dark); text-decoration: none; }
.eur-migas a:hover,
.eur-migas a:focus-visible { text-decoration: underline; }
.eur-migas [aria-current="page"] { color: var(--color-azul); font-weight: var(--font-weight-semibold); }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.eur-hero {
    position: relative;
    padding: 3rem 0 3.5rem;
    color: var(--color-white);
    background:
        radial-gradient(circle at 85% 15%, rgba(223, 187, 62, .20), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .06), transparent 40%),
        linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 60%, var(--color-teal-darker) 100%);
    overflow: hidden;
}
.eur-hero__rejilla { display: block; }
.eur-hero__rejilla--con-foto {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 2.5rem;
}
.eur-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
    line-height: 1.15;
    color: var(--color-white);
}
.eur-respuesta {
    margin: 0 0 1.75rem;
    max-width: 68ch;
    font-size: 1.12rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .95);
}
.eur-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.eur-hero .btn-primary { box-shadow: var(--shadow-dorado); }

/* ── Fotos ─────────────────────────────────────────────────────────────── */
.eur-foto {
    margin: 0;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}
.eur-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.eur-foto figcaption {
    padding: .7rem 1rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--color-dark-gray);
    border-top: 3px solid var(--color-dorado);
}

/* ── Cuerpo ────────────────────────────────────────────────────────────── */
.eur-cuerpo { padding-top: 2.5rem; padding-bottom: 3rem; }

.eur-toc { margin-bottom: 2.5rem; }
.eur-toc ol {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: .35rem 1.75rem;
    margin: 0;
    padding-left: 1.2rem;
}
.eur-toc li { color: var(--color-teal-dark); }

/* 01/11/2026 · Contraste (PageSpeed, accesibilidad 96): los enlaces del
   índice «En esta página» salían en verde claro sobre fondo claro. Mismo
   verde oscuro que las migas y la lista de países, que sí pasan la prueba.
   Doble clase para ganar a la regla general de .toc de site.css. */
.toc.eur-toc a { color: var(--color-teal-dark); }
.toc.eur-toc a:hover,
.toc.eur-toc a:focus-visible { color: var(--color-teal-darker); }

.eur-seccion {
    margin: 0 0 3rem;
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}
.eur-seccion h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
    color: var(--color-azul);
    line-height: 1.25;
}
.eur-seccion h2 .fa-solid { flex: 0 0 auto; color: var(--color-teal); font-size: .85em; }
.eur-seccion > p { max-width: 75ch; margin: 0 0 1rem; line-height: 1.75; }

.eur-enlace-seccion { margin-top: 1.25rem; }
.eur-enlace {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: var(--color-teal-dark);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}
.eur-enlace:hover,
.eur-enlace:focus-visible { color: var(--color-teal-darker); text-decoration: underline; }

/* ── Pasos ─────────────────────────────────────────────────────────────── */
.eur-pasos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: eur-paso;
}
.eur-paso {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    counter-increment: eur-paso;
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}
.eur-paso::before {
    content: counter(eur-paso);
    position: absolute;
    top: .9rem;
    right: 1rem;
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-dorado-alpha20);
}
.eur-paso__icono {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-teal), var(--color-teal-light));
    color: var(--color-white);
    font-size: 1.2rem;
    box-shadow: var(--shadow-teal);
}
.eur-paso h3 { margin: 0 0 .4rem; font-size: 1.08rem; color: var(--color-azul); }
.eur-paso p  { margin: 0; line-height: 1.6; color: var(--color-dark-gray); }

/* ── Tablas ────────────────────────────────────────────────────────────── */
.eur-tabla {
    margin: 1.5rem 0 1rem;
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow);
}
.eur-tabla:focus-visible { outline: 3px solid var(--color-dorado); outline-offset: 2px; }
.eur-tabla__tabla { min-width: 560px; margin: 0; font-size: .95rem; }
.eur-tabla__tabla thead th { white-space: normal; vertical-align: bottom; }

/* site.css pinta TODOS los th de .table en verde con letra blanca: en las
   cabeceras de fila (el país o la talla) eso deja el texto sin contraste. */
.eur-tabla__tabla tbody th {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--color-light-gray);
    background: transparent;
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
    text-align: left;
    white-space: normal;
    vertical-align: middle;
}
.eur-tabla__tabla tbody tr:nth-child(even) th,
.eur-tabla__tabla tbody tr:nth-child(even) td { background: var(--color-off-white); }
.eur-tabla__tabla td { white-space: nowrap; }

.eur-pais { font-weight: var(--font-weight-semibold); color: var(--color-azul); }
.eur-pais--enlace {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-teal-dark);
    text-decoration: none;
}
.eur-pais--enlace .fa-solid { font-size: .75em; }
.eur-pais--enlace:hover,
.eur-pais--enlace:focus-visible { text-decoration: underline; }

.eur-precio   { font-size: 1.05rem; color: var(--color-teal-dark); }
.eur-todavia  { font-size: .9rem; color: var(--color-text-muted); font-style: italic; }
.eur-nd       { color: var(--color-mid-gray); }
.eur-medidas  { color: var(--color-dark-gray); }

.eur-talla {
    display: inline-grid;
    place-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    margin-right: .6rem;
    padding: 0 .5rem;
    border-radius: var(--border-radius);
    background: var(--color-teal);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    vertical-align: middle;
}
.eur-talla__desc { font-weight: var(--font-weight-semibold); color: var(--color-azul); vertical-align: middle; }

.eur-nota,
.eur-aviso {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 75ch;
    margin: .5rem 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--color-dark-gray);
}
.eur-nota .fa-solid,
.eur-aviso .fa-solid { margin-top: .25rem; color: var(--color-teal); }
.eur-aviso {
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--color-dorado);
    border-radius: var(--border-radius);
    background: var(--color-dorado-alpha10);
}

/* ── Enlaces a las páginas de país (central) ───────────────────────────── */
.eur-paises {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-light-gray);
    border-left: 4px solid var(--color-teal);
    border-radius: var(--border-radius-lg);
    background: var(--color-off-white);
}
.eur-paises__titulo { margin: 0 0 .75rem; font-weight: var(--font-weight-bold); color: var(--color-azul); }

.eur-paises ul,
.eur-otros ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .6rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.eur-paises a,
.eur-otros a {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--color-teal-dark);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}
.eur-paises a:hover,
.eur-paises a:focus-visible,
.eur-otros a:hover,
.eur-otros a:focus-visible { color: var(--color-teal-darker); text-decoration: underline; }

/* ── Listas que vienen del CMS en HTML (tallas, islas) ─────────────────── */
.eur-tallas,
.eur-lista {
    max-width: 75ch;
    margin: 1rem 0;
    line-height: 1.7;
}
.eur-tallas p,
.eur-lista p { margin: 0 0 .5rem; }
.eur-tallas ul,
.eur-lista ul {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}
.eur-tallas li,
.eur-lista li {
    position: relative;
    margin: 0 0 .5rem;
    padding-left: 1.6rem;
}
.eur-tallas li::before,
.eur-lista li::before {
    content: "";
    position: absolute;
    top: .65em;
    left: .35rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--color-dorado);
}

/* ── Preguntas frecuentes ──────────────────────────────────────────────── */
.eur-faq { display: grid; gap: .75rem; margin-top: 1.5rem; }
.eur-faq__item {
    border: 1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    background: var(--color-white);
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}
.eur-faq__item[open] { border-color: var(--color-teal); box-shadow: var(--shadow-sm); }
.eur-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
}
.eur-faq__item summary::-webkit-details-marker { display: none; }
.eur-faq__item summary:focus-visible { outline: 3px solid var(--color-dorado); outline-offset: 2px; }
.eur-faq__pregunta {
    margin: 0;
    font-size: 1.02rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-azul);
}
.eur-faq__flecha { flex: 0 0 auto; color: var(--color-teal); transition: transform var(--transition-base); }
.eur-faq__item[open] .eur-faq__flecha { transform: rotate(180deg); }
.eur-faq__respuesta { padding: 0 1.25rem 1rem; }
.eur-faq__respuesta p { margin: 0; line-height: 1.7; color: var(--color-dark-gray); }

@media (prefers-reduced-motion: reduce) {
    .eur-faq__flecha { transition: none; }
}

/* ── Otros países (páginas de país) ────────────────────────────────────── */
.eur-otros {
    margin: 0 0 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--border-radius-lg);
    background: var(--color-off-white);
}
.eur-otros h2 { margin: 0 0 1rem; font-size: 1.2rem; color: var(--color-azul); }

/* ── Botón final ───────────────────────────────────────────────────────── */
.eur-cta {
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-xl);
    text-align: center;
    background:
        radial-gradient(circle at 15% 80%, rgba(223, 187, 62, .2), transparent 40%),
        linear-gradient(135deg, var(--color-teal-dark), var(--color-teal));
    box-shadow: var(--shadow-teal);
}

/* ── Pantallas medianas ────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .eur-hero__rejilla--con-foto { grid-template-columns: 1fr; }
    .eur-foto--cabecera { max-width: 640px; }
    .eur-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Móvil: las tablas pasan a fichas ──────────────────────────────────── */
@media (max-width: 640px) {
    .eur-hero { padding: 2rem 0 2.5rem; }
    .eur-respuesta { font-size: 1.03rem; }
    .eur-hero__acciones .btn,
    .eur-cta .btn,
    .eur-enlace-seccion .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
    .eur-pasos { grid-template-columns: 1fr; }
    .eur-paises,
    .eur-otros { padding: 1.1rem 1.15rem; }

    .eur-tabla { overflow: visible; box-shadow: none; background: transparent; }
    .eur-tabla__tabla { min-width: 0; }
    .eur-tabla__tabla thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .eur-tabla__tabla,
    .eur-tabla__tabla tbody,
    .eur-tabla__tabla tr,
    .eur-tabla__tabla th,
    .eur-tabla__tabla td { display: block; width: 100%; }
    .eur-tabla__tabla tbody tr {
        margin-bottom: 1rem;
        overflow: hidden;
        border: 1px solid var(--color-light-gray);
        border-radius: var(--border-radius);
        background: var(--color-white) !important;
        box-shadow: var(--shadow-sm);
    }
    .eur-tabla__tabla tbody tr:nth-child(even) th,
    .eur-tabla__tabla tbody tr:nth-child(even) td { background: transparent; }
    .eur-tabla__tabla tbody th { border-bottom: 2px solid var(--color-dorado); }
    .eur-tabla__tabla td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        white-space: normal;
        text-align: right;
    }
    .eur-tabla__tabla td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        font-size: .85rem;
        text-align: left;
        color: var(--color-dark-gray);
    }
    .eur-tabla__tabla tr:hover td { background: transparent; }

    /* La tabla de los 24 países: cada ficha en tres columnas (plazo, desde
       España, hacia España) para que la lista no se haga interminable. */
    .eur-tabla__tabla--paises tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: .75rem;
    }
    .eur-tabla__tabla--paises tbody th { grid-column: 1 / -1; padding: .6rem .85rem; }
    .eur-tabla__tabla--paises td {
        display: block;
        padding: .55rem .85rem .65rem;
        border-bottom: none;
        text-align: left;
    }
    .eur-tabla__tabla--paises td + td { border-left: 1px solid var(--color-light-gray); }
    .eur-tabla__tabla--paises td::before {
        display: block;
        margin-bottom: .15rem;
        font-size: .75rem;
        line-height: 1.3;
    }
}