/* ═══════════════════════════════════════════════════════════════════════════
   ferias.css — Pagina publica de ferias y congresos
   Ubicacion: Transotel.Web/wwwroot/css/ferias.css

   LOTE FERIAS · PASO 6. Fichero NUEVO.
   LOTE FERIAS · FOTOS. Anadido el bloque «Fotos del CMS» (cabecera y
   «Que llevamos»). No cambia ninguna regla anterior.

   ESTETICA PROPIA, PERO DE LA MISMA CASA. La cabecera y el pie siguen siendo
   los de Transotel: el NAP y el grafo Organization tienen que ser identicos o
   se rompe la ficha de empresa. Lo que cambia es el cuerpo: aqui manda el
   verde de fondo (#008572) en bandas y el dorado (#dfbb3e) en los botones y
   en las cifras, con mas aire y tipografia mas grande que en el resto.

   TODO EL PREFIJO ES .fer- : ni una regla puede escaparse a otra pagina.

   RESPONSIVE: una sola columna en movil, rejilla a partir de 768 px. Las
   tablas y las listas largas van dentro de su propio contenedor con
   overflow-x para que el cuerpo de la pagina nunca se desplace de lado.
   ═══════════════════════════════════════════════════════════════════════════ */

.fer {
    --fer-verde:        #008572;
    --fer-verde-osc:    #00695b;
    --fer-verde-claro:  #e6f2f0;
    --fer-oro:          #dfbb3e;
    --fer-oro-osc:      #c9a52f;
    --fer-tinta:        #1d2b28;
    --fer-tinta-suave:  #55635f;
    --fer-linea:        #d8e2df;
    --fer-papel:        #ffffff;
    --fer-papel-suave:  #f6f9f8;
    --fer-radio:        14px;
    --fer-sombra:       0 2px 10px rgba(0, 0, 0, .07);

    color: var(--fer-tinta);
    font-size: 1.02rem;
    line-height: 1.65;
}

.fer-envoltorio {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 1.15rem;
}

.fer h2 {
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
    line-height: 1.25;
    margin: 0 0 .65rem;
    color: var(--fer-verde-osc);
}

.fer h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0 0 .35rem;
}

.fer .fer-parrafo {
    margin: 0 0 1.4rem;
    max-width: 68ch;
    color: var(--fer-tinta-suave);
}

.fer .fer-nota {
    margin: 1rem 0 0;
    font-size: .9rem;
    color: var(--fer-tinta-suave);
}

.fer section {
    padding-block: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
}

/* ── Botones y enlaces ──────────────────────────────────────────────────── */

.fer-boton {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.35rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fer-boton--principal {
    background: var(--fer-oro);
    color: var(--fer-tinta);
}

.fer-boton--principal:hover,
.fer-boton--principal:focus-visible {
    background: var(--fer-oro-osc);
    color: var(--fer-tinta);
}

.fer-boton--secundario {
    background: transparent;
    border-color: currentColor;
    color: var(--fer-verde-osc);
}

.fer-boton--secundario:hover,
.fer-boton--secundario:focus-visible {
    background: var(--fer-verde-claro);
}

.fer-boton--pequeno {
    padding: .55rem 1rem;
    font-size: .95rem;
}

.fer-enlace {
    color: var(--fer-verde-osc);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fer-enlace:hover,
.fer-enlace:focus-visible { color: var(--fer-verde); }

.fer a:focus-visible,
.fer summary:focus-visible {
    outline: 3px solid var(--fer-oro);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Bloque 1 · Cabecera ────────────────────────────────────────────────── */

.fer-hero {
    background: linear-gradient(160deg, var(--fer-verde) 0%, var(--fer-verde-osc) 100%);
    color: #fff;
    padding-block: clamp(2.4rem, 1.5rem + 3.5vw, 4rem);
}

.fer-hero__h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.85rem);
    line-height: 1.18;
    margin: 0 0 1rem;
    color: #fff;
    max-width: 22ch;
}

.fer-hero__respuesta {
    font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
    margin: 0 0 1.75rem;
    max-width: 62ch;
    color: rgba(255, 255, 255, .95);
}

.fer-hero__botones {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.fer-hero .fer-boton--secundario {
    color: #fff;
    border-color: rgba(255, 255, 255, .8);
}

.fer-hero .fer-boton--secundario:hover,
.fer-hero .fer-boton--secundario:focus-visible {
    background: rgba(255, 255, 255, .14);
}

.fer-migas {
    margin: 0 0 1.25rem;
    font-size: .88rem;
}

.fer-migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fer-migas li + li::before {
    content: "›";
    margin-right: .6rem;
    opacity: .7;
}

.fer-migas a { color: rgba(255, 255, 255, .92); }
.fer-migas [aria-current] { color: rgba(255, 255, 255, .72); }

/* ── Bloque 2 · Los dos "desde" ─────────────────────────────────────────── */

.fer-precios { background: var(--fer-papel); }

.fer-precios__rejilla {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.fer-precio {
    border: 2px solid var(--fer-linea);
    border-radius: var(--fer-radio);
    padding: 1.35rem;
    background: var(--fer-papel-suave);
}

.fer-precio__ruta {
    margin: 0 0 .3rem;
    font-weight: 700;
    color: var(--fer-verde-osc);
}

.fer-precio__cifra {
    margin: 0;
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--fer-tinta);
}

.fer-precio__talla {
    margin: .3rem 0 0;
    font-size: .92rem;
    color: var(--fer-tinta-suave);
}

/* ── Bloque 3 · Que llevamos ────────────────────────────────────────────── */

.fer-llevamos { background: var(--fer-papel-suave); }

.fer-tabla-marco {
    overflow-x: auto;
    border: 1px solid var(--fer-linea);
    border-radius: var(--fer-radio);
    background: var(--fer-papel);
}

.fer-tabla {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.fer-tabla th,
.fer-tabla td {
    padding: .85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--fer-linea);
    vertical-align: top;
}

.fer-tabla thead th {
    background: var(--fer-verde-claro);
    color: var(--fer-verde-osc);
    font-size: .88rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.fer-tabla tbody tr:last-child th,
.fer-tabla tbody tr:last-child td { border-bottom: 0; }

.fer-tabla__letra {
    display: inline-block;
    min-width: 2.2rem;
    padding: .1rem .5rem;
    margin-right: .5rem;
    border-radius: 6px;
    background: var(--fer-oro);
    color: var(--fer-tinta);
    font-weight: 800;
    text-align: center;
}

.fer-tabla__desc {
    color: var(--fer-tinta-suave);
    font-weight: 500;
}

.fer-aviso {
    margin-top: 1.5rem;
    padding: 1.15rem 1.3rem;
    border-left: 5px solid var(--fer-oro);
    border-radius: 0 var(--fer-radio) var(--fer-radio) 0;
    background: var(--fer-papel);
    box-shadow: var(--fer-sombra);
}

.fer-aviso__titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--fer-verde-osc);
}

.fer-aviso p { margin: 0; color: var(--fer-tinta-suave); }

/* ── Bloque 4 · Como funciona ───────────────────────────────────────────── */

.fer-pasos { background: var(--fer-papel); }

.fer-pasos__lista {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fer-paso;
}

.fer-paso {
    position: relative;
    padding: 1.4rem 1.3rem 1.3rem 3.6rem;
    border: 1px solid var(--fer-linea);
    border-radius: var(--fer-radio);
    background: var(--fer-papel-suave);
}

.fer-paso__num {
    position: absolute;
    top: 1.35rem;
    left: 1.1rem;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fer-verde);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
}

.fer-paso__texto { margin: 0; color: var(--fer-tinta-suave); }

/* ── Bloque 5 · Cuando enviar ───────────────────────────────────────────── */

.fer-cuando { background: var(--fer-verde-claro); }

.fer-plazos {
    display: grid;
    gap: .65rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fer-plazos li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1.1rem;
    border-radius: var(--fer-radio);
    background: var(--fer-papel);
}

.fer-plazos i { color: var(--fer-verde); margin-top: .25rem; }

/* ── Bloque 6 · Indice de ferias ────────────────────────────────────────── */

.fer-indice { background: var(--fer-papel); }

.fer-indice__lista {
    display: grid;
    gap: .7rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fer-indice__lista a {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1.1rem;
    border: 2px solid var(--fer-linea);
    border-radius: var(--fer-radio);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}

.fer-indice__lista a:hover,
.fer-indice__lista a:focus-visible {
    border-color: var(--fer-oro);
    background: var(--fer-papel-suave);
}

.fer-indice__nombre { font-weight: 700; color: var(--fer-verde-osc); }
.fer-indice__ciudad { font-size: .9rem; color: var(--fer-tinta-suave); }

/* ── Bloque 7 · Fichas de feria ─────────────────────────────────────────── */

.fer-fichas {
    background: var(--fer-papel-suave);
    padding-block: clamp(1.5rem, 1rem + 2vw, 2.4rem);
}

.fer-ficha {
    padding: 1.5rem 1.35rem;
    margin-bottom: 1rem;
    border: 1px solid var(--fer-linea);
    border-left: 5px solid var(--fer-verde);
    border-radius: 0 var(--fer-radio) var(--fer-radio) 0;
    background: var(--fer-papel);
    box-shadow: var(--fer-sombra);
    scroll-margin-top: 90px;   /* que el ancla no quede bajo la cabecera fija */
}

.fer-ficha:last-child { margin-bottom: 0; }

/* Edicion ya pasada: se atenua, pero no se esconde. */
.fer-ficha--pasada { border-left-color: var(--fer-linea); opacity: .82; }

/* Resaltado momentaneo al saltar desde el indice. Lo pone y lo quita
   ferias.js; sin JavaScript no pasa nada y el ancla funciona igual. */
.fer-ficha--resaltada {
    border-left-color: var(--fer-oro);
    box-shadow: 0 0 0 3px rgba(223, 187, 62, .45);
}

.fer-ficha__nombre { font-size: 1.28rem; color: var(--fer-verde-osc); margin-bottom: .8rem; }

.fer-ficha__datos {
    display: grid;
    grid-template-columns: 1fr;
    gap: .15rem .9rem;
    margin: 0 0 1rem;
}

.fer-ficha__datos dt {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fer-tinta-suave);
}

.fer-ficha__datos dd { margin: 0 0 .6rem; font-weight: 600; }

.fer-ficha__sinDato { font-weight: 500; color: var(--fer-tinta-suave); font-style: italic; }

.fer-ficha__texto { margin: 0 0 1.1rem; color: var(--fer-tinta-suave); max-width: 68ch; }

.fer-ficha__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.1rem;
}

.fer-enlace--volver { margin-left: auto; font-size: .9rem; }

/* ── Bloque 8 · Presupuesto ─────────────────────────────────────────────── */

.fer-presupuesto {
    background: linear-gradient(160deg, var(--fer-verde-osc) 0%, var(--fer-verde) 100%);
    color: #fff;
    scroll-margin-top: 90px;
}

.fer-presupuesto h2 { color: #fff; }
.fer-presupuesto .fer-parrafo { color: rgba(255, 255, 255, .95); }

.fer-presupuesto__lista {
    display: grid;
    gap: .55rem;
    grid-template-columns: 1fr;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
    max-width: 62ch;
}

.fer-presupuesto__lista li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.fer-presupuesto__lista i { color: var(--fer-oro); margin-top: .35rem; }

.fer-presupuesto__botones {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.fer-presupuesto .fer-boton--secundario {
    color: #fff;
    border-color: rgba(255, 255, 255, .8);
}

.fer-presupuesto .fer-boton--secundario:hover,
.fer-presupuesto .fer-boton--secundario:focus-visible {
    background: rgba(255, 255, 255, .14);
}

/* ── Bloque 9 · Preguntas frecuentes ────────────────────────────────────── */

.fer-faq { background: var(--fer-papel); }

.fer-faq__item {
    border: 1px solid var(--fer-linea);
    border-radius: var(--fer-radio);
    margin-bottom: .65rem;
    background: var(--fer-papel-suave);
    scroll-margin-top: 90px;
}

.fer-faq__item summary {
    cursor: pointer;
    padding: 1rem 1.2rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.fer-faq__item summary::-webkit-details-marker { display: none; }

.fer-faq__item summary h3 {
    margin: 0;
    font-size: 1.03rem;
    color: var(--fer-verde-osc);
}

.fer-faq__item summary::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--fer-oro);
    flex: none;
}

.fer-faq__item[open] summary::after { content: "–"; }

.fer-faq__item > p {
    margin: 0;
    padding: 0 1.2rem 1.15rem;
    color: var(--fer-tinta-suave);
    max-width: 72ch;
}

/* ── Bloque 10 · Mas informacion ────────────────────────────────────────── */

.fer-mas { background: var(--fer-papel-suave); }

.fer-mas__lista {
    display: grid;
    gap: .7rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fer-mas__lista a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1.15rem;
    border-radius: var(--fer-radio);
    background: var(--fer-papel);
    border: 1px solid var(--fer-linea);
    text-decoration: none;
    color: var(--fer-verde-osc);
    font-weight: 600;
}

.fer-mas__lista a:hover,
.fer-mas__lista a:focus-visible { border-color: var(--fer-oro); }

.fer-mas__lista i { color: var(--fer-oro); }

/* ── Fotos del CMS ──────────────────────────────────────────────────────── */
/*    LOTE FERIAS · FOTOS. Las sube el panel («Imagenes de paginas») y la
      vista las pinta con su ancho y alto reales, asi la pagina no salta al
      cargar. Sin foto, las dos rejillas quedan en una columna, como antes.  */

.fer-foto { margin: 0; }

.fer-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--fer-radio);
    background: var(--fer-verde-claro);
}

.fer-foto figcaption {
    margin-top: .6rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--fer-tinta-suave);
}

/* Cabecera: la foto sobre el verde, con borde claro y sombra marcada.
   minmax(0, 1fr) y min-width: 0 evitan que un contenido ancho estire la
   columna y la pagina se desplace de lado en movil. */
.fer-hero__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
}

.fer-hero__cuerpo > * { min-width: 0; }

.fer-foto--hero img {
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    background: rgba(255, 255, 255, .08);
}

.fer-foto--hero figcaption { color: rgba(255, 255, 255, .82); }

/* Que llevamos: en movil la foto va encima de la tabla, sin pasar de
   560 px para que no ocupe toda la pantalla. La tabla (min. 520 px) hace
   scroll dentro de su marco: la columna no debe crecer por ella. */
.fer-llevamos__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
}

.fer-llevamos__cuerpo > * { min-width: 0; }

.fer-foto--lateral { max-width: 560px; }
.fer-foto--lateral img { box-shadow: var(--fer-sombra); }

/* Desde 900 px: texto a la izquierda y foto a la derecha. */
@media (min-width: 900px) {
    .fer-hero__cuerpo--con-foto {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 2.6rem;
    }
}

/* Desde 1024 px la foto pasa a la derecha de la tabla. Antes no cabe: la
   tabla necesita sus 520 px. */
@media (min-width: 1024px) {
    .fer-llevamos__cuerpo--con-foto {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 2.2rem;
    }

    .fer-llevamos__cuerpo--con-foto .fer-llevamos__datos { grid-column: 1; grid-row: 1; }
    .fer-llevamos__cuerpo--con-foto .fer-foto--lateral   { grid-column: 2; grid-row: 1; max-width: none; }
}

/* Al imprimir, la cabecera va sin foto (se imprime en blanco y negro). */
@media print {
    .fer-foto--hero { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .fer-ficha__datos { grid-template-columns: auto 1fr; }
    .fer-ficha__datos dt { padding-top: .1rem; }
}

@media (min-width: 768px) {
    .fer-precios__rejilla  { grid-template-columns: repeat(2, 1fr); }
    .fer-pasos__lista      { grid-template-columns: repeat(3, 1fr); }
    .fer-plazos            { grid-template-columns: repeat(2, 1fr); }
    .fer-indice__lista     { grid-template-columns: repeat(2, 1fr); }
    .fer-mas__lista        { grid-template-columns: repeat(3, 1fr); }
    .fer-presupuesto__lista { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

@media (min-width: 1024px) {
    .fer-indice__lista { grid-template-columns: repeat(4, 1fr); }
}

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
    .fer * { transition: none !important; }
}

/* Impresion: sin bandas de color ni botones. */
@media print {
    .fer-hero,
    .fer-presupuesto { background: none !important; color: #000 !important; }
    .fer-hero__h1,
    .fer-presupuesto h2 { color: #000 !important; }
    .fer-boton,
    .fer-enlace--volver { display: none !important; }
    .fer-faq__item > p { display: block !important; }
}