/* HirePath 1.7 — diseño de portada móvil con fotografía íntegra.
 * No modifica el diseño de escritorio, el menú ni el contenido WordPress.
 * La relación 2048 × 768 permite mostrar la imagen sin recortes.
 */
@media screen and (max-width: 680px) {
  body.hpv-hero-v13 .hp-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f0f9ff 0%, #eaf6fb 64%, #f6fbfd 100%) !important;
    color: #123e56 !important;
  }
  /* Fotografía completa de EE. UU. y México, sin deformación ni recorte. */
  body.hpv-hero-v13 .hp-hero::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 37.5vw;
    max-height: 255px;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    pointer-events: none;
  }
  body.hpv-hero-v13 .hp-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: calc(37.5vw - 22px);
    height: 35px;
    background: linear-gradient(180deg, rgba(240,249,255,0), #f0f9ff 95%);
    pointer-events: none;
  }
  body.hpv-hero-v13 .hp-hero .hp-hero-in {
    width: min(calc(100% - 24px), 600px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    gap: 13px !important;
    padding: calc(37.5vw + 9px) 0 24px !important;
    position: relative;
    z-index: 1;
  }
  /* Las dos tarjetas quedan sobre el panel informativo. */
  body.hpv-hero-v13 .hp-hero .hp-art {
    order: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-links {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 9px !important;
    margin: 0 !important;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 9px !important;
    min-width: 0 !important;
    min-height: 68px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid #d2e5ed !important;
    box-shadow: 0 5px 15px rgba(12,67,91,.09) !important;
    text-decoration: none !important;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-card img {
    display: block !important;
    width: 40px !important;
    height: 27px !important;
    flex: 0 0 40px !important;
    object-fit: cover !important;
    border: 1px solid #dce8ed !important;
    border-radius: 4px !important;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-text {
    display: flex !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-text strong {
    color: #103b56 !important;
    font-size: clamp(12px,3.35vw,15px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-text small {
    color: #547287 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  body.hpv-hero-v13 .hp-hero .hpv-country-arrow {
    margin-left: auto !important;
    align-self: center;
    font-size: 16px !important;
  }
  /* Panel claro con contraste suficiente. */
  body.hpv-hero-v13 .hp-hero .hp-hero-in > div:first-child {
    order: 2 !important;
    display: block !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 19px 17px 18px !important;
    margin: 0 !important;
    background: rgba(255,255,255,.93) !important;
    border: 1px solid rgba(255,255,255,.98) !important;
    border-radius: 17px !important;
    box-shadow: 0 9px 25px rgba(11,60,84,.10) !important;
  }
  body.hpv-hero-v13 .hp-hero .hp-kicker {
    margin: 0 !important;
    color: #986015 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .8px !important;
  }
  body.hpv-hero-v13 .hp-hero h1 {
    margin: 10px 0 10px !important;
    color: #0e3955 !important;
    font-size: clamp(28px, 7.1vw, 37px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.7px !important;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  body.hpv-hero-v13 .hp-hero p {
    margin: 0 0 12px !important;
    color: #294f64 !important;
    font-size: 15px !important;
    line-height: 1.57 !important;
  }
  body.hpv-hero-v13 .hp-hero .hp-search {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin-top: 8px !important;
  }
  body.hpv-hero-v13 .hp-hero .hp-search input {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 47px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 11px !important;
    background: #fff !important;
  }
  body.hpv-hero-v13 .hp-hero .hp-search button {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    min-height: 47px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
  }
  body.hpv-hero-v13 .hp-hero .hp-actions {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 9px !important;
    margin-top: 12px !important;
  }
  body.hpv-hero-v13 .hp-hero .hp-actions .hp-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 47px !important;
    padding: 9px 8px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    border-radius: 11px !important;
  }
}
@media screen and (max-width: 360px) {
  body.hpv-hero-v13 .hp-hero .hp-hero-in { width: min(calc(100% - 20px),600px) !important; }
  body.hpv-hero-v13 .hp-hero .hpv-country-card { gap: 6px !important; padding: 8px 6px !important; }
  body.hpv-hero-v13 .hp-hero .hpv-country-card img { width: 34px !important; height: 23px !important; flex-basis: 34px !important; }
  body.hpv-hero-v13 .hp-hero .hpv-country-arrow { display: none !important; }
  body.hpv-hero-v13 .hp-hero .hp-actions { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.hpv-hero-v13 .hp-hero .hpv-country-card { transition: none !important; }
}