/* ═══════════════════════════════════════════════════════════════════════════
   home-gancho.css — Portada: «¿Por qué no enviar la maleta por mensajería?»
   Ubicacion: Transotel.Web/wwwroot/css/home-gancho.css

   LOTE GANCHO · PASO 2. Fichero NUEVO. Lo carga Index.cshtml solo cuando el
   bloque sale (hay titulo y boton en el CMS), igual que home-ferias.css.

   Panel verde (#008572) con el boton dorado (#dfbb3e): el mismo aspecto que
   la cabecera de la pagina a la que lleva, para que el salto se note poco.

   TODO EL PREFIJO ES .hmg- : ni una regla puede escaparse a otra seccion.

   RESPONSIVE: una columna en movil (texto y boton, y debajo los tres
   puntos); dos columnas desde 900 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Va justo detras de «¿Por que elegir Transotel?», que ya deja su aire
   por abajo: sin relleno arriba para que no quede un hueco doble. */
.hmg { padding-top: 0; }

.hmg *,
.hmg *::before,
.hmg *::after { box-sizing: border-box; }

.hmg-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    padding: clamp(1.4rem, 1rem + 2.4vw, 2.6rem);
    border-radius: 18px;
    background: linear-gradient(160deg, #008572 0%, #00695b 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 105, 91, .18);
}

.hmg-panel > * { min-width: 0; }

.hmg-titulo {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .8rem;
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
    line-height: 1.25;
    color: #fff;
    overflow-wrap: break-word;
}

.hmg-titulo i {
    flex: none;
    font-size: .85em;
    color: #dfbb3e;
}

.hmg-parrafo {
    margin: 0 0 1.4rem;
    max-width: 62ch;
    color: rgba(255, 255, 255, .95);
    line-height: 1.65;
}

.hmg-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    max-width: 100%;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    border: 2px solid transparent;
    background: #dfbb3e;
    color: #1d2b28;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease;
}

.hmg-boton:hover,
.hmg-boton:focus-visible {
    background: #c9a52f;
    color: #1d2b28;
    text-decoration: none;
}

.hmg-boton:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.hmg-puntos {
    display: grid;
    gap: .7rem;
    align-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hmg-puntos li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .09);
    line-height: 1.45;
    overflow-wrap: break-word;
}

.hmg-puntos li > span:last-child { min-width: 0; }

.hmg-puntos__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .16);
    color: #dfbb3e;
}

/* Desde 900 px: texto y boton a la izquierda, los tres puntos a la derecha. */
@media (min-width: 900px) {
    .hmg-panel--con-puntos {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 2.6rem;
        align-items: center;
    }
}

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

/* Impresion: sin fondo de color ni boton. */
@media print {
    .hmg-panel { background: none !important; color: #000 !important; box-shadow: none !important; }
    .hmg-titulo,
    .hmg-parrafo { color: #000 !important; }
    .hmg-puntos li { border-color: #999 !important; background: none !important; }
    .hmg-boton { display: none !important; }
}