/* ════════════════════════════════════════════════════════════════════════════
   home.css — Transotel.Web  v2  (Rediseño Azul Naval + Dorado)
   Ubicación: wwwroot/css/home.css
   Estilos específicos de la landing page (Index.cshtml)
   v3 (LOTE VELOCIDAD-1): la foto de fondo de la cabecera (.hero-bg) ya no se
      enlaza desde Unsplash: está en /img/portada/ en WebP, 1600 px en
      ordenador y 800 px en móvil. Index.cshtml la precarga y carga este CSS
      en el <head> (antes lo inyectaba home.js al final).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── VARIABLES LOCALES HOME ──────────────────────────────────────────────── */
:root {
    --hm-navy:          #0B1F3A;
    --hm-navy-mid:      #152d55;
    --hm-navy-light:    #1e4070;
    --hm-navy-a80:      rgba(11,31,58,0.80);
    --hm-navy-a90:      rgba(11,31,58,0.92);
    --hm-gold:          #dfbb3e;
    --hm-gold-dark:     #c9a830;
    --hm-gold-light:    #f0d472;
    --hm-gold-a10:      rgba(223,187,62,0.10);
    --hm-gold-a15:      rgba(223,187,62,0.15);
    --hm-gold-a25:      rgba(223,187,62,0.25);
    --hm-white:         #ffffff;
    --hm-off-white:     #f5f7fb;
    --hm-text-dark:     #111827;
    --hm-text-mid:      #4b5563;
    --hm-text-light:    rgba(255,255,255,0.82);
    --hm-border-glass:  rgba(255,255,255,0.11);
    --hm-shadow-card:   0 2px 20px rgba(11,31,58,0.08);
    --hm-shadow-hover:  0 10px 40px rgba(11,31,58,0.16);
    --hm-radius:        12px;
    --hm-radius-lg:     18px;
    --hm-radius-xl:     26px;
    --hm-radius-pill:   999px;
    --hm-ease:          cubic-bezier(0.4,0,0.2,1);
    --hm-dur:           0.25s;
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLA DE CONTENIDO — Oculta visualmente, mantiene presencia en DOM para SEO
   ════════════════════════════════════════════════════════════════════════════ */
.toc {
    position: absolute !important;
    width:    1px !important;
    height:   1px !important;
    overflow: hidden !important;
    clip:     rect(0,0,0,0) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════════ */
.hero-section {
    position:   relative;
    background: var(--hm-navy);
    color:      var(--hm-white);
    overflow:   hidden;
    padding:    0;
    min-height: 92vh;
    display:    flex;
    flex-direction: column;
}

/* Fotografía de fondo con overlay */
.hero-bg {
    position:            absolute;
    inset:               0;
    /* [VELOCIDAD-1] La misma foto que antes se enlazaba desde Unsplash
       (1600 px, 116 KB, otro dominio), ahora alojada en la web en WebP.
       Los media de aquí tienen que ser IGUALES a los de la precarga de
       Index.cshtml (@section HeadExtra) o se descargarían las dos. */
    background-image:    url('/img/portada/hero-portada-1600.webp');
    background-size:     cover;
    background-position: center 30%;
    pointer-events:      none;
}

@media (max-width: 800px) {
    .hero-bg {
        background-image: url('/img/portada/hero-portada-800.webp');
    }
}

/* Capa de degradado sobre la foto */
.hero-section::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        125deg,
        rgba(11,31,58,0.97) 0%,
        rgba(21,45,85,0.88) 55%,
        rgba(11,31,58,0.80) 100%
    );
    z-index: 1;
}

/* Halo dorado decorativo (esquina superior derecha) */
.hero-section::after {
    content:  '';
    position: absolute;
    top:      -180px;
    right:    -180px;
    width:    560px;
    height:   560px;
    background: radial-gradient(circle, rgba(223,187,62,0.14) 0%, transparent 68%);
    z-index:  1;
    pointer-events: none;
}

/* Contenido */
.hero-content {
    display:        flex;
    flex-direction: column;
    gap:            2.5rem;
    padding:        5rem 0 4rem;
    position:       relative;
    z-index:        2;
    flex:           1;
}

@media (min-width: 992px) {
    .hero-content {
        flex-direction: row;
        align-items:    center;
        gap:            4.5rem;
        padding:        7rem 0 5rem;
    }
    .hero-text  { flex: 1 1 54%; }
    .hero-image { flex: 1 1 46%; }
}

/* ── Badge ────────────────────────────────────────────────────────────────── */
.hero-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.45rem;
    background:     var(--hm-gold-a15);
    border:         1px solid rgba(223,187,62,0.45);
    color:          var(--hm-gold);
    padding:        0.38rem 1.05rem;
    border-radius:  var(--hm-radius-pill);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom:  1.35rem;
    width:          fit-content;
    animation:      hm-fadeDown 0.6s var(--hm-ease) both;
}

/* ── H1 ───────────────────────────────────────────────────────────────────── */
.hero-title {
    font-size:      clamp(2.5rem, 5.5vw, 3.9rem);
    font-weight:    800;
    color:          var(--hm-white);
    line-height:    1.08;
    margin-bottom:  1.35rem;
    letter-spacing: -0.025em;
    animation:      hm-fadeUp 0.65s var(--hm-ease) 0.08s both;
}

.hero-title-highlight {
    display:    block;
    background: linear-gradient(90deg, #dfbb3e 0%, #f5dc7a 48%, #dfbb3e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* ── Subtítulo ────────────────────────────────────────────────────────────── */
.hero-subtitle {
    font-size:     1.1rem;
    color:         var(--hm-text-light);
    line-height:   1.75;
    margin-bottom: 2.25rem;
    animation:     hm-fadeUp 0.65s var(--hm-ease) 0.16s both;
}

/* ── Formulario tracking ──────────────────────────────────────────────────── */
.hero-tracking-form {
    background:      rgba(255,255,255,0.06);
    border:          1px solid var(--hm-border-glass);
    border-radius:   var(--hm-radius-lg);
    padding:         1.5rem 1.5rem 1.25rem;
    margin-bottom:   2rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation:       hm-fadeUp 0.65s var(--hm-ease) 0.24s both;
}

.hero-tracking-form .tracking-label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--hm-gold);
    margin-bottom:  0.65rem;
}

.tracking-input-group {
    display:  flex;
    position: relative;
}

.tracking-icon {
    position:    absolute;
    left:        0.9rem;
    top:         50%;
    transform:   translateY(-50%);
    color:       #9ca3af;
    z-index:     2;
    pointer-events: none;
}

.tracking-input {
    flex:          1;
    border-radius: var(--hm-radius) 0 0 var(--hm-radius);
    border:        2px solid transparent;
    border-right:  none;
    padding-left:  2.8rem;
    background:    rgba(255,255,255,0.94);
    color:         var(--hm-text-dark);
    height:        50px;
    font-size:     0.95rem;
    transition:    border-color var(--hm-dur) var(--hm-ease),
                   background   var(--hm-dur) var(--hm-ease);
}
.tracking-input:focus {
    outline:      none;
    border-color: var(--hm-gold);
    background:   #fff;
    z-index:      1;
}
.tracking-input::placeholder { color: #9ca3af; }

.btn-tracking {
    border-radius: 0 var(--hm-radius) var(--hm-radius) 0;
    background:    var(--hm-gold);
    border:        2px solid var(--hm-gold);
    border-left:   none;
    color:         var(--hm-navy);
    font-weight:   800;
    font-size:     0.88rem;
    padding:       0 1.5rem;
    height:        50px;
    white-space:   nowrap;
    flex-shrink:   0;
    cursor:        pointer;
    transition:    background var(--hm-dur) var(--hm-ease),
                   transform  var(--hm-dur) var(--hm-ease);
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
}
.btn-tracking:hover {
    background: var(--hm-gold-dark);
    border-color: var(--hm-gold-dark);
    transform:  scale(1.02);
}
.btn-tracking:active { transform: scale(0.98); }

.tracking-hint {
    font-size:    0.76rem;
    color:        rgba(255,255,255,0.48);
    margin-top:   0.6rem;
    margin-bottom: 0;
}

/* ── Botones del hero ─────────────────────────────────────────────────────── */
.hero-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.85rem;
    animation: hm-fadeUp 0.65s var(--hm-ease) 0.32s both;
}

/* ── Imagen del hero ──────────────────────────────────────────────────────── */
.hero-image {
    display:         flex;
    justify-content: center;
    animation:       hm-fadeRight 0.75s var(--hm-ease) 0.2s both;
    position:        relative;
}

.hero-image-wrapper {
    position:  relative;
    width:     100%;
    max-width: 510px;
}

.hero-image img {
    border-radius:  var(--hm-radius-xl);
    box-shadow:     0 28px 70px rgba(0,0,0,0.50);
    width:          100%;
    object-fit:     cover;
    aspect-ratio:   4 / 3;
    display:        block;
    border:         3px solid rgba(223,187,62,0.28);
}

/* Tarjeta flotante sobre la imagen (estadística) */
.hero-image-badge {
    position:      absolute;
    bottom:        -20px;
    left:          -20px;
    background:    var(--hm-gold);
    color:         var(--hm-navy);
    padding:       0.8rem 1.4rem;
    border-radius: var(--hm-radius);
    box-shadow:    0 10px 28px rgba(223,187,62,0.45);
    font-weight:   800;
    font-size:     0.88rem;
    display:       flex;
    align-items:   center;
    gap:           0.55rem;
    animation:     hm-fadeUp 0.7s var(--hm-ease) 0.55s both;
    line-height:   1.3;
}

.hero-image-badge .badge-number {
    font-size:   1.6rem;
    font-weight: 900;
    line-height: 1;
    display:     block;
}

/* ── Trust bar ────────────────────────────────────────────────────────────── */
.trust-bar {
    background: rgba(0,0,0,0.18);
    border-top: 1px solid var(--hm-border-glass);
    padding:    1.35rem 0;
    position:   relative;
    z-index:    2;
}

.trust-bar-inner {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         1rem 1.5rem;
}

.trust-label {
    color:          rgba(255,255,255,0.55);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space:    nowrap;
    margin:         0;
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
}

/* Pills de confianza (reemplazan logos SVG rotos) */
.trust-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.55rem;
}

.trust-pill {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    background:    rgba(255,255,255,0.06);
    border:        1px solid rgba(255,255,255,0.10);
    color:         rgba(255,255,255,0.78);
    padding:       0.32rem 0.85rem;
    border-radius: var(--hm-radius-pill);
    font-size:     0.77rem;
    font-weight:   500;
    white-space:   nowrap;
    transition:    background var(--hm-dur) var(--hm-ease);
}

.trust-pill:hover {
    background: rgba(255,255,255,0.10);
}

.trust-pill i {
    color:     var(--hm-gold);
    font-size: 0.7rem;
}

/* También mantener compatibilidad si se usan logos reales */
.trust-logos {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         1.5rem;
}
.trust-logos img {
    height:  28px;
    width:   auto;
    opacity: 0.55;
    filter:  brightness(0) invert(1);
    transition: opacity var(--hm-dur);
}
.trust-logos img:hover { opacity: 0.90; }


/* ════════════════════════════════════════════════════════════════════════════
   SECCIONES GENERALES
   ════════════════════════════════════════════════════════════════════════════ */
.section {
    padding: 5.5rem 0;
}

.section.bg-light,
.section.bg-gray {
    background: var(--hm-off-white);
}

/* Sobrescribir bg-teal con gradiente naval en la home */
.section.bg-teal {
    background: linear-gradient(
        130deg,
        var(--hm-navy) 0%,
        var(--hm-navy-mid) 60%,
        var(--hm-navy-light) 100%
    ) !important;
    position: relative;
    overflow:  hidden;
}
.section.bg-teal::before {
    content:  '';
    position: absolute;
    top:      -200px;
    right:    -200px;
    width:    550px;
    height:   550px;
    background: radial-gradient(circle, rgba(223,187,62,0.09) 0%, transparent 68%);
    pointer-events: none;
}

/* Fondo oscuro CTA final */
.section.bg-dark,
#cta-final.section {
    background: linear-gradient(
        135deg,
        #060f1e 0%,
        var(--hm-navy) 50%,
        #0d1f3c 100%
    ) !important;
    position: relative;
    overflow:  hidden;
}
#cta-final::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: radial-gradient(ellipse at 25% 60%, rgba(223,187,62,0.07) 0%, transparent 55%),
                radial-gradient(ellipse at 75% 40%, rgba(30,64,112,0.35) 0%, transparent 55%);
    pointer-events: none;
}

/* Encabezados de sección */
.section-header { margin-bottom: 0.5rem; }

.section-header h2 {
    font-size:      clamp(1.8rem, 3vw, 2.55rem);
    font-weight:    800;
    color:          var(--hm-text-dark);
    letter-spacing: -0.02em;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            0.55rem;
    flex-wrap:      wrap;
}

.section-header h2 i {
    color: var(--hm-navy) !important;
}

.section-header .lead {
    color:      var(--hm-text-mid);
    margin-top: 0.85rem;
    font-size:  1.05rem;
}

/* Línea dorada bajo el título */
.divider {
    width:         56px;
    height:        4px;
    background:    linear-gradient(90deg, var(--hm-gold) 0%, var(--hm-gold-light) 60%, transparent 100%);
    border-radius: 4px;
    margin:        1rem auto 0;
}

.text-center .divider { margin: 1rem auto 0; }

/* Icono de color dorado */
.text-dorado,
.text-teal { color: var(--hm-gold) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   CÓMO FUNCIONA — Steps
   ════════════════════════════════════════════════════════════════════════════ */
.steps-list {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2rem;
    margin-top:            3.5rem;
}

@media (min-width: 768px) {
    .steps-list { grid-template-columns: repeat(3, 1fr); }
}

.step-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            1.35rem;
    position:       relative;
    padding:        2.25rem 1.75rem;
    background:     var(--hm-white);
    border-radius:  var(--hm-radius-lg);
    border:         1px solid rgba(11,31,58,0.07);
    box-shadow:     var(--hm-shadow-card);
    transition:     transform var(--hm-dur) var(--hm-ease),
                    box-shadow var(--hm-dur) var(--hm-ease);
}

.step-item:hover {
    transform:  translateY(-5px);
    box-shadow: var(--hm-shadow-hover);
}

@media (min-width: 768px) {
    .step-item:not(:last-child)::after {
        content:       '';
        position:      absolute;
        top:           54px;
        right:         -1.1rem;
        width:         2.2rem;
        height:        2px;
        background:    linear-gradient(90deg, var(--hm-navy-light), var(--hm-gold));
        border-radius: 2px;
        z-index:       2;
    }
}

.step-icon {
    position:        relative;
    width:           88px;
    height:          88px;
    background:      linear-gradient(135deg, var(--hm-navy) 0%, var(--hm-navy-mid) 100%);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.9rem;
    color:           var(--hm-gold);
    box-shadow:      0 8px 24px rgba(11,31,58,0.28);
    flex-shrink:     0;
}

.step-number {
    position:        absolute;
    top:             -4px;
    right:           -4px;
    width:           28px;
    height:          28px;
    background:      var(--hm-gold);
    color:           var(--hm-navy);
    font-size:       0.68rem;
    font-weight:     900;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          2px solid var(--hm-white);
    box-shadow:      0 2px 6px rgba(0,0,0,0.15);
}

.step-body h3 {
    font-size:    1.1rem;
    font-weight:  700;
    color:        var(--hm-text-dark);
    margin-bottom: 0.5rem;
}
.step-body p {
    font-size:  0.875rem;
    color:      var(--hm-text-mid);
    margin:     0;
    line-height: 1.65;
}


/* ════════════════════════════════════════════════════════════════════════════
   BENEFICIOS — Cards
   ════════════════════════════════════════════════════════════════════════════ */
.benefits-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3.5rem;
}
@media (min-width: 576px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } }

.benefit-card {
    background:    var(--hm-white);
    border-radius: var(--hm-radius-lg);
    border:        1px solid rgba(11,31,58,0.07);
    box-shadow:    var(--hm-shadow-card);
    overflow:      hidden;
    position:      relative;
    transition:    transform var(--hm-dur) var(--hm-ease),
                   box-shadow var(--hm-dur) var(--hm-ease);
}

/* Borde superior dorado al hover */
.benefit-card::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     3px;
    background: linear-gradient(90deg, var(--hm-gold), var(--hm-gold-light));
    opacity:    0;
    transition: opacity var(--hm-dur) var(--hm-ease);
}

.benefit-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--hm-shadow-hover);
}
.benefit-card:hover::before { opacity: 1; }

.benefit-card .card-body {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.9rem;
    padding:        1.85rem;
}

.benefit-card h3 {
    font-size:   1.02rem;
    font-weight: 700;
    margin:      0;
    color:       var(--hm-text-dark);
}
.benefit-card p {
    font-size:  0.875rem;
    color:      var(--hm-text-mid);
    margin:     0;
    line-height: 1.65;
}

.benefit-icon {
    width:           56px;
    height:          56px;
    background:      var(--hm-gold-a15);
    border:          1px solid var(--hm-gold-a25);
    border-radius:   var(--hm-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.4rem;
    color:           var(--hm-navy);
    flex-shrink:     0;
    transition:      background var(--hm-dur) var(--hm-ease),
                     transform  var(--hm-dur) var(--hm-ease);
}

.benefit-card:hover .benefit-icon {
    background: var(--hm-gold-a25);
    transform:  scale(1.08);
}


/* ════════════════════════════════════════════════════════════════════════════
   TARIFAS — Pricing cards
   ════════════════════════════════════════════════════════════════════════════ */
.pricing-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3.5rem;
}
@media (min-width: 576px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }

.pricing-card {
    background:    var(--hm-white);
    border-radius: var(--hm-radius-lg);
    border:        2px solid transparent;
    box-shadow:    var(--hm-shadow-card);
    overflow:      hidden;
    transition:    all var(--hm-dur) var(--hm-ease);
    cursor:        pointer;
}

.pricing-card:hover {
    border-color: var(--hm-gold);
    box-shadow:   0 14px 40px rgba(223,187,62,0.22);
    transform:    translateY(-5px);
}

.pricing-card .card-body {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             0.8rem;
    padding:         2.25rem 1.5rem;
}

.pricing-icon {
    width:           68px;
    height:          68px;
    background:      linear-gradient(135deg, var(--hm-navy) 0%, var(--hm-navy-mid) 100%);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.65rem;
    color:           var(--hm-gold);
    box-shadow:      0 8px 22px rgba(11,31,58,0.25);
    transition:      transform var(--hm-dur) var(--hm-ease);
}
.pricing-card:hover .pricing-icon { transform: scale(1.08); }

.pricing-name {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0;
    color:       var(--hm-text-dark);
}
.pricing-dimensions {
    font-size: 0.75rem;
    margin:    0;
    color:     var(--hm-text-mid);
    line-height: 1.5;
}

.pricing-price {
    display:         flex;
    align-items:     baseline;
    gap:             0.3rem;
    flex-wrap:       wrap;
    justify-content: center;
}
.price-from {
    font-size: 0.78rem;
    color:     var(--hm-text-mid);
    order:     -1;
}
.price-amount {
    font-size:      2.1rem;
    font-weight:    900;
    color:          var(--hm-navy);
    letter-spacing: -0.03em;
}
.pricing-note {
    font-size: 0.75rem;
    margin:    0;
    color:     var(--hm-text-mid);
}


/* ════════════════════════════════════════════════════════════════════════════
   PARA HOTELES — CTA
   ════════════════════════════════════════════════════════════════════════════ */
.hotel-cta-grid {
    display:        flex;
    flex-direction: column;
    gap:            2.5rem;
    position:       relative;
    z-index:        1;
}

@media (min-width: 992px) {
    .hotel-cta-grid {
        flex-direction: row;
        align-items:    center;
        gap:            4.5rem;
    }
    .hotel-cta-text  { flex: 1 1 54%; }
    .hotel-cta-image { flex: 1 1 46%; }
}

.hotel-cta-grid h2 {
    color:          var(--hm-white);
    font-size:      clamp(1.8rem, 3vw, 2.4rem);
    font-weight:    800;
    display:        flex;
    align-items:    center;
    gap:            0.6rem;
    justify-content: flex-start !important;
}
.hotel-cta-grid h2 i { color: var(--hm-gold); }

.hotel-cta-grid .lead {
    color:     rgba(255,255,255,0.82);
    font-size: 1.05rem;
    margin-top: 0.6rem;
}

.hotel-benefits-list {
    display:        flex;
    flex-direction: column;
    gap:            0.8rem;
    margin-top:     1.6rem;
    padding:        0;
}
.hotel-benefits-list li {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    color:       rgba(255,255,255,0.88);
    font-size:   0.9rem;
    line-height: 1.6;
}
.hotel-benefits-list .fa-check-circle {
    color:      var(--hm-gold);
    margin-top: 3px;
    flex-shrink: 0;
}

.hotel-cta-image {
    position: relative;
}
.hotel-cta-image img {
    border-radius: var(--hm-radius-xl);
    box-shadow:    0 22px 55px rgba(0,0,0,0.38);
    width:         100%;
    object-fit:    cover;
    aspect-ratio:  4/3;
    border:        3px solid rgba(223,187,62,0.22);
}

/* ── Botón «Contactar con nuestro equipo de hoteles» · arreglo móvil ────────
   (27/09/2026) El texto es largo y .btn de site.css trae white-space: nowrap:
   en móvil el botón no se podía partir y se salía de la pantalla (en español,
   420 px de botón en un móvil de 360 px), así que la portada se desplazaba de
   lado. Aquí se deja partir en dos líneas y nunca pasa del ancho disponible.
   En escritorio, donde cabe, sigue igual, en una sola línea. En móvil ocupa
   todo el ancho, como los demás botones grandes de la portada.
   Solo afecta al botón del bloque de hoteles (.hotel-cta-text). */
.hotel-cta-text .btn {
    max-width:   100%;
    white-space: normal;
    text-align:  center;
}

@media (max-width: 575px) {
    .hotel-cta-text .btn {
        width:           100%;
        justify-content: center;
        padding-inline:  1.25rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   TESTIMONIOS
   ════════════════════════════════════════════════════════════════════════════ */
.testimonials-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3.5rem;
}
@media (min-width: 576px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
    background:    var(--hm-white);
    border-radius: var(--hm-radius-lg);
    border:        1px solid rgba(11,31,58,0.07);
    box-shadow:    var(--hm-shadow-card);
    transition:    transform var(--hm-dur) var(--hm-ease),
                   box-shadow var(--hm-dur) var(--hm-ease);
}

.testimonial-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--hm-shadow-hover);
}

.testimonial-card .card-body {
    display:        flex;
    flex-direction: column;
    gap:            0.9rem;
    padding:        1.85rem;
}

.testimonial-stars {
    color:    var(--hm-gold);
    display:  flex;
    gap:      2px;
    font-size: 0.875rem;
}

.testimonial-card blockquote {
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    flex:           1;
    border-left:    3px solid var(--hm-gold);
    padding-left:   1rem;
}

.testimonial-card blockquote p {
    font-size:  0.9rem;
    color:      var(--hm-text-mid);
    font-style: italic;
    margin:     0;
    line-height: 1.7;
}

.testimonial-card cite {
    font-style:  normal;
    font-size:   0.875rem;
    font-weight: 700;
    color:       var(--hm-navy);
}


/* ════════════════════════════════════════════════════════════════════════════
   CTA FINAL
   ════════════════════════════════════════════════════════════════════════════ */
#cta-final h2 {
    color:          var(--hm-white);
    font-size:      clamp(2rem, 4vw, 3.1rem);
    font-weight:    800;
    letter-spacing: -0.02em;
    position:       relative;
    z-index:        1;
}

#cta-final .lead {
    color:    rgba(255,255,255,0.72);
    position: relative;
    z-index:  1;
}

.cta-actions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             1rem;
    justify-content: center;
    position:        relative;
    z-index:         1;
}


/* ════════════════════════════════════════════════════════════════════════════
   ANIMACIONES
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes hm-fadeDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hm-fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hm-fadeRight {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Fade-in al hacer scroll (aplicado por home.js) */
.fade-wait {
    opacity:   0;
    transform: translateY(26px);
}
.fade-in {
    opacity:    1;
    transform:  translateY(0);
    transition: opacity 0.5s var(--hm-ease), transform 0.5s var(--hm-ease);
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE AJUSTES FINALES
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .hero-section { min-height: auto; }
    .hero-image-badge { bottom: -14px; left: -10px; }
}

@media (max-width: 767px) {
    .hero-content { padding: 4rem 0 3rem; }
    .hero-image-badge { display: none; }
    .section { padding: 4rem 0; }
}

@media (max-width: 575px) {
    .cta-actions {
        flex-direction: column;
        align-items:    center;
    }
    .cta-actions .btn {
        width:     100%;
        max-width: 320px;
    }
    .hero-actions {
        flex-direction: column;
    }
    .hero-actions .btn {
        width:     100%;
        max-width: 360px;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   MODALIDADES (Hotel→Hotel · Hotel→Casa · Europa)
   Añadido — ampliación servicio Casa + Europa. Usa los tokens --hm-* existentes.
   ════════════════════════════════════════════════════════════════════════════ */
.modalidades-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            3rem;
}
@media (min-width: 768px) { .modalidades-grid { grid-template-columns: repeat(2, 1fr); } }

.modalidad-card {
    background:    var(--hm-white);
    border-radius: var(--hm-radius-lg);
    border:        1px solid rgba(11,31,58,0.07);
    box-shadow:    var(--hm-shadow-card);
    transition:    transform  var(--hm-dur) var(--hm-ease),
                   box-shadow var(--hm-dur) var(--hm-ease),
                   border-color var(--hm-dur) var(--hm-ease);
}
.modalidad-card:hover {
    transform:    translateY(-5px);
    box-shadow:   var(--hm-shadow-hover);
    border-color: var(--hm-gold);
}
.modalidad-card .card-body {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            0.9rem;
    padding:        2.25rem 1.75rem;
}
.modalidad-icon {
    display:       inline-flex;
    align-items:   center;
    gap:           0.7rem;
    font-size:     1.6rem;
    color:         var(--hm-navy);
    background:    linear-gradient(135deg, var(--hm-gold-a15), var(--hm-gold-a10));
    border:        1px solid rgba(223,187,62,0.40);
    padding:       0.9rem 1.4rem;
    border-radius: var(--hm-radius-pill);
}
.modalidad-icon .modalidad-arrow { font-size: 1rem; color: var(--hm-gold-dark); }
.modalidad-card h3 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--hm-text-dark); }
.modalidad-card p  { font-size: 0.92rem; color: var(--hm-text-mid); line-height: 1.65; margin: 0; }

/* ── Franja Europa destacada ──────────────────────────────────────────────── */
.modalidad-europa {
    position:      relative;
    display:       flex;
    align-items:   center;
    gap:           1.5rem;
    flex-wrap:     wrap;
    margin-top:    2rem;
    padding:       1.9rem 2rem;
    border-radius: var(--hm-radius-lg);
    background:    linear-gradient(125deg, var(--hm-navy) 0%, var(--hm-navy-light) 100%);
    color:         var(--hm-white);
    overflow:      hidden;
}
.modalidad-europa::after {
    content:  '';
    position: absolute;
    top:      -60px;
    right:    -40px;
    width:    220px;
    height:   220px;
    background: radial-gradient(circle, rgba(223,187,62,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.modalidad-europa > i {
    font-size:   2.6rem;
    color:       var(--hm-gold);
    flex-shrink: 0;
    position:    relative;
    z-index:     1;
}
.modalidad-europa-text { flex: 1 1 320px; position: relative; z-index: 1; }
.modalidad-europa-text h3 { color: var(--hm-white); font-size: 1.2rem; font-weight: 800; margin: 0 0 0.35rem; }
.modalidad-europa-text p  { color: rgba(255,255,255,0.82); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.modalidad-europa-badge {
    position:       absolute;
    top:            0.9rem;
    right:          0.9rem;
    background:     var(--hm-gold);
    color:          var(--hm-navy);
    font-size:      0.68rem;
    font-weight:    800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.25rem 0.7rem;
    border-radius:  var(--hm-radius-pill);
    z-index:        2;
}
.modalidad-europa-btn { flex-shrink: 0; position: relative; z-index: 1; }

@media (max-width: 575px) {
    .modalidad-europa { flex-direction: column; align-items: flex-start; text-align: left; }
    .modalidad-europa-btn { width: 100%; max-width: 360px; justify-content: center; }
}

/* ── "desde" internacional dentro del bloque Europa  ·  ajuste home ────────── */
.modalidad-europa-precio {
    display:     flex;
    align-items: baseline;
    flex-wrap:   wrap;
    gap:         0.4rem;
    margin:      0.7rem 0 0;
    position:    relative;
    z-index:     1;
}
.modalidad-europa-desde {
    font-size:      0.78rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--hm-gold);
}
.modalidad-europa-precio strong {
    font-size:   1.7rem;
    font-weight: 900;
    line-height: 1;
    color:       var(--hm-white);
}
.modalidad-europa-suffix {
    font-size: 0.8rem;
    color:     rgba(255,255,255,0.75);
}