/* ==============================================================
   Workori/YOYO - index-polish-final.css
   Artista: Constructor (El Equipo v4.0) - qwen2.5-coder:14b-ctx
   Fecha:   2026-08-07
   Proposito: Pulir 9 huecos visuales del index de Workori
               (8 elementos + soporte responsive/a11y) sin tocar
               index.html ni los CSS base / lock existentes.

   Reglas duras respetadas:
   - NO se toca index.html, base.css, ni home-pwa-apps-lock.css.
   - Selectores especificos para no revertir polish previo.
   - Paleta derivada: var(--blue), #053fa0, var(--teal), #c47a4a, #0e1f40.
   - Ningun display:none en elementos visibles.
   - Branding PWA (icon/badge client/provider) intacto: solo
     profundidad interna sutil, sin cambiar azul/verde del lock.
   - Vanilla CSS, ASCII puro, sin dependencias.

   Carga: enganchar en index.html DESPUES de modern-polish.css y
   tablet-polish.css, para que este archivo sea la ultima palabra
   visual del index.
   ============================================================== */

/* --- 0. KEYFRAMES COMPARTIDOS ------------------------------ */

/* Entrada suave para el hero photo y la float stack */
@keyframes ipf-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Escalonado de los hijos del hero-float-stack--tr */
@keyframes ipf-float-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Dropdown del search */
@keyframes ipf-fade-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Shimmer muy sutil del icon de PWA card */
@keyframes ipf-icon-shine {
  0%, 100% { box-shadow: 0 4px 10px rgba(14, 31, 64, 0.06), 0 1px 2px rgba(14, 31, 64, 0.04); }
  50%      { box-shadow: 0 6px 14px rgba(7, 95, 228, 0.12), 0 2px 4px rgba(14, 31, 64, 0.06); }
}


/* --- 1. PWA APP CARD - ICONO Y BADGE ----------------------- */

/*
 * El lock (#mobile-apps[data-home-lock="pwa-apps"]) ya define
 * el tamano (54x54) y los background-images. Aqui sumamos
 * profundidad INTERNA y ritmo sin alterar colores ni tamano.
 *
 * Scope: solo cuando el lock esta aplicado (no pisamos lo que
 * ya existe para usuarios fuera del lock).
 */

#mobile-apps[data-home-lock="pwa-apps"] .pwa-app-card__icon {
  /* Anillo de profundidad sutil por encima del border #edf1f7 */
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.06),
    0 4px 10px rgba(14, 31, 64, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition:
    transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Mantiene el radius 8px del lock; reafirmamos por si la cascada baja */
  animation: ipf-icon-shine 4.6s ease-in-out 0.4s 1 both;
}

#mobile-apps[data-home-lock="pwa-apps"] .pwa-app-card:hover .pwa-app-card__icon {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 2px 4px rgba(14, 31, 64, 0.08),
    0 8px 18px rgba(7, 95, 228, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Badge: el lock ya define pill + colores. Solo afinamos. */
#mobile-apps[data-home-lock="pwa-apps"] .pwa-app-card__badge {
  /* font-size del lock es 0.75rem; pedimos 0.72rem y tracking 0.06em
     unicamente si el archivo se carga tras el lock (asi lo hacemos).
     No pisamos background ni color: respetamos el branding. */
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  /* sombra interior que da relieve sin alterar el color de fondo */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(14, 31, 64, 0.05);
  transition:
    transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.22s ease;
}

#mobile-apps[data-home-lock="pwa-apps"] .pwa-app-card:hover .pwa-app-card__badge {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 3px 6px rgba(14, 31, 64, 0.07);
}


/* --- 2. HERO PHOTO - RADIO + SOMBRA LAYERED + ENTRADA ------ */

/*
 * .hero-photo en base.css ya tiene mask-image, object-fit y
 * posicionamiento. Aqui solo anadimos:
 *  - radio sutil (la foto vive dentro de un contenedor recortado)
 *  - sombra en capas (no se ve porque esta masked, pero ayuda al
 *    contenedor del img en navegadores que ignoran el radius)
 *  - animacion fade-in-up al cargar (600ms, una vez)
 *
 * Para no romper el mask, el radius se aplica al contenedor
 * padre (.hero-photo-wrap) si existe; en su defecto, el propio
 * .hero-photo. Detectamos el padre mas probable.
 */

.hero-photo,
.hero-photo-wrap .hero-photo,
.hero-figure .hero-photo,
.hero-media .hero-photo {
  border-radius: clamp(14px, 2vw, 20px);
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.04),
    0 8px 24px rgba(14, 31, 64, 0.08),
    0 24px 56px rgba(14, 31, 64, 0.06);
  animation: ipf-fade-in-up 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 80ms;
}

/* Wrapper padre, si lo tiene: contiene el radius y evita bleed */
.hero-photo-wrap,
.hero-figure,
.hero-media {
  border-radius: clamp(14px, 2vw, 20px);
  overflow: hidden;
}


/* --- 3. HERO FLOAT STACK -- ENTRADA ESCALONADA -------------- */

/*
 * .hero-float-stack--tr ya define posicion absoluta y gap.
 * Anadimos entrada escalonada a sus hijos directos
 * (hero-job-card, status-card, hero-trust-card) usando :nth-child.
 */

.hero-float-stack--tr > .hero-job-card {
  animation: ipf-float-rise 620ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.10s;
}

.hero-float-stack--tr > .status-card {
  animation: ipf-float-rise 620ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.25s;
}

.hero-float-stack--tr > .hero-trust-card {
  animation: ipf-float-rise 620ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0.40s;
}

/* Respeta los descendientes que ya tienen transitions en modern-polish */
.hero-float-stack--tr > * {
  will-change: transform, opacity;
}


/* --- 4. LANGUAGE SWITCH - SEGMENTED CONTROL REFINADO ------- */

/*
 * base.css ya define el contenedor (border-radius 8px, padding 3px).
 * Subimos el radius a 10px, engordamos el border a azul corporativo
 * muy tenue, fondo blanco y anadimos sombra inset al active.
 *
 * NO cambiamos el color del texto en .active (#fff + fondo azul).
 * Solo afinamos.
 */

.language-switch {
  border-radius: 10px;
  border: 1px solid rgba(7, 95, 228, 0.15);
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.04),
    0 3px 8px rgba(14, 31, 64, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.language-switch:hover,
.language-switch:focus-within {
  border-color: rgba(7, 95, 228, 0.28);
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.05),
    0 4px 12px rgba(7, 95, 228, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.language-option {
  border-radius: 7px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.language-option.active {
  background: linear-gradient(180deg, #1a6ff0 0%, var(--blue) 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(7, 95, 228, 0.25),
    0 3px 8px rgba(7, 95, 228, 0.15);
}

.language-option:hover:not(.active) {
  background: rgba(7, 95, 228, 0.06);
  color: #053fa0;
}


/* --- 5. SEARCH SUGGESTIONS - ENTRADA SUAVE ---------------- */

/*
 * base.css define position:absolute, padding 8px, radius 10px,
 * background #fff y box-shadow:var(--shadow). Anadimos:
 *  - radius 12px (sube 2px)
 *  - border azul tenue
 *  - box-shadow layered mas rica
 *  - keyframe fadeSlideDown 180ms al aparecer (cuando pierde hidden)
 *
 * El atributo [hidden] lo gestiona el JS; nosotros animamos cuando
 * el contenedor se vuelve visible.
 */

.search-suggestions {
  border-radius: 12px;
  border: 1px solid rgba(7, 95, 228, 0.12);
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.04),
    0 8px 22px rgba(14, 31, 64, 0.08),
    0 22px 48px rgba(7, 95, 228, 0.06);
  animation: ipf-fade-slide-down 180ms ease-out both;
}

/* Si el JS pone el atributo hidden, congelamos el estado sin
   desaparecer el contenedor de forma agresiva (defensa contra
   animaciones en cola). */
.search-suggestions[hidden] {
  animation: none;
}


/* --- 6. HOME DATA EMPTY - CARD SUTIL ---------------------- */

/*
 * home-brand-lock.css define padding 24px, border dashed #b9c8dc,
 * radius 8px, bg #f7faff. Subimos a una card mas pulida:
 *  - radius 14px
 *  - border dashed en azul corporativo (en lugar de gris azulado)
 *  - bg rgba(7,95,228,0.04)
 *  - padding 32px
 *  - text-align center (para todo el bloque)
 *  - sombra sutil para elevarlo como card
 *
 * Mantenemos color de texto: #29415f. NO ocultamos elementos.
 */

.home-data-empty {
  border-radius: 14px;
  border: 1px dashed rgba(7, 95, 228, 0.2);
  background: rgba(7, 95, 228, 0.04);
  padding: 32px;
  text-align: center;
  color: #29415f;
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.03),
    0 6px 16px rgba(7, 95, 228, 0.04);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.home-data-empty:hover {
  border-color: rgba(7, 95, 228, 0.32);
  background: rgba(7, 95, 228, 0.06);
  box-shadow:
    0 1px 3px rgba(14, 31, 64, 0.04),
    0 10px 24px rgba(7, 95, 228, 0.07);
}

.home-data-empty strong {
  font-weight: 750;
  color: #053fa0;
  letter-spacing: -0.005em;
}

.home-data-empty p {
  margin-top: 8px;
  color: #4a5b76;
  line-height: 1.55;
}


/* --- 7. NAV TOGGLE - MORPH A X ---------------------------- */

/*
 * base.css define el boton (46x46, border 1px var(--line), radius 8px)
 * y los 3 spans (height 2px, margin 5px 0, bg var(--ink)). Tambien
 * define transition: transform 0.25s, opacity 0.2s en los spans.

 * Aqui afinamos:
 *  - radius del boton a 10px (coherente con .btn)
 *  - background blanco, border sutil azul corporativo
 *  - spans: bordes redondeados en los extremos
 *  - hover sutil
 *  - estado expanded: rotar span 1 (45deg) y span 3 (-45deg),
 *    ocultar span 2 (opacity 0).
 */

.nav-toggle {
  border-radius: 10px;
  border: 1px solid rgba(7, 95, 228, 0.18);
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.04),
    0 3px 8px rgba(14, 31, 64, 0.04);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.nav-toggle:hover {
  border-color: rgba(7, 95, 228, 0.32);
  background: rgba(7, 95, 228, 0.03);
  box-shadow:
    0 1px 3px rgba(14, 31, 64, 0.05),
    0 6px 14px rgba(7, 95, 228, 0.08);
}

.nav-toggle:focus-visible {
  outline: 2.5px solid rgba(7, 95, 228, 0.45);
  outline-offset: 3px;
}

.nav-toggle span {
  border-radius: 2px;
  transform-origin: center;
}

/* Morph a X cuando el JS pone aria-expanded="true".
   El span 1 rota +45deg, el 2 se oculta, el 3 rota -45deg.
   El JS tambien suele tocar margins; los dejamos fluidos. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --- 8. MOBILE TRUST STRIP - CARD POLIDA ------------------ */

/*
 * home-mobile.css lo activa solo en <body[data-workori-page="home"]>
 * con display:flex, gap 10px, padding 8px 2px 0, margin-top 12px.
 * Subimos a card pulida:
 *  - bg blanco
 *  - border sutil 1px rgba(230,235,243,0.8)
 *  - radius 12px
 *  - padding 12px 16px
 *  - gap 12px entre thumb y signals
 *  - sombra muy sutil
 *
 * NO tocamos el padding superior que pone home-mobile.css (8px 2px 0);
 * lo sobrescribimos para llegar a la card pulida, ya que este archivo
 * se carga despues en el orden logico.
 */

body[data-workori-page="home"] .mobile-trust-strip {
  margin-top: 12px;
  padding: 12px 16px;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(230, 235, 243, 0.8);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(14, 31, 64, 0.03),
    0 4px 12px rgba(14, 31, 64, 0.04);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

body[data-workori-page="home"] .mobile-trust-strip:hover {
  border-color: rgba(7, 95, 228, 0.18);
  box-shadow:
    0 1px 3px rgba(14, 31, 64, 0.04),
    0 8px 18px rgba(7, 95, 228, 0.05);
}

body[data-workori-page="home"] .mobile-trust-strip__thumb {
  border-radius: 8px;
  flex-shrink: 0;
}

body[data-workori-page="home"] .mobile-trust-strip__signals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #29415f;
  font-size: 0.86rem;
  line-height: 1.35;
}

body[data-workori-page="home"] .mobile-trust-strip__signals span {
  display: block;
  font-weight: 600;
  letter-spacing: -0.005em;
}

body[data-workori-page="home"] .mobile-trust-strip__signals span:first-child {
  color: #053fa0;
  font-weight: 750;
}


/* --- 9. RESPONSIVE - TABLET (max-width: 768px) ------------- */

/*
 * Sin widths fijos. Usamos clamp() / % / flex.
 * En tablet compactamos paddings y reescalamos.
 */

@media (max-width: 768px) {

  /* Hero photo: radio un poco menor en pantallas pequenas */
  .hero-photo,
  .hero-photo-wrap .hero-photo,
  .hero-figure .hero-photo,
  .hero-media .hero-photo {
    border-radius: clamp(12px, 3vw, 18px);
    box-shadow:
      0 1px 2px rgba(14, 31, 64, 0.04),
      0 6px 18px rgba(14, 31, 64, 0.08),
      0 18px 42px rgba(14, 31, 64, 0.06);
  }

  /* Float stack: reescalar suavemente. Ya tiene scale(0.88) en mobile. */
  .hero-float-stack--tr {
    gap: 8px;
  }

  /* Language switch: misma estructura, padding comodo */
  .language-switch {
    padding: 2px;
    border-radius: 9px;
  }

  .language-option {
    min-width: 40px;
    min-height: 38px;
    font-size: 0.76rem;
    border-radius: 6px;
  }

  /* Search suggestions: mas compacto */
  .search-suggestions {
    border-radius: 10px;
    padding: 6px;
  }

  /* Home data empty: menos padding */
  .home-data-empty {
    padding: 24px 20px;
    border-radius: 12px;
  }

  /* Nav toggle: ya estaba en 46x46; lo dejamos */
  .nav-toggle {
    width: 42px;
    height: 42px;
    padding: 10px;
  }
}


/* --- 10. RESPONSIVE - MOVIL PEQUENO (max-width: 480px) ------ */

@media (max-width: 480px) {

  /* PWA icon y badge: ya pequenos. Solo afinamos transicion */
  #mobile-apps[data-home-lock="pwa-apps"] .pwa-app-card__icon {
    animation-duration: 3.6s; /* un pelin mas rapido en pantallas chicas */
  }

  /* Hero photo: radio menor */
  .hero-photo,
  .hero-photo-wrap .hero-photo,
  .hero-figure .hero-photo,
  .hero-media .hero-photo {
    border-radius: clamp(10px, 4vw, 14px);
    box-shadow:
      0 1px 2px rgba(14, 31, 64, 0.04),
      0 4px 12px rgba(14, 31, 64, 0.07),
      0 12px 28px rgba(14, 31, 64, 0.05);
  }

  /* Float stack: animation-delay mas cortos para que la entrada
     se sienta mas responsiva en pantallas pequenas */
  .hero-float-stack--tr > .hero-job-card  { animation-delay: 0.05s; }
  .hero-float-stack--tr > .status-card    { animation-delay: 0.15s; }
  .hero-float-stack--tr > .hero-trust-card{ animation-delay: 0.25s; }

  /* Empty state: padding reducido */
  .home-data-empty {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .home-data-empty strong {
    font-size: 0.98rem;
  }

  .home-data-empty p {
    font-size: 0.92rem;
  }

  /* Mobile trust strip: gap y padding reducidos */
  body[data-workori-page="home"] .mobile-trust-strip {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 10px;
  }

  body[data-workori-page="home"] .mobile-trust-strip__signals {
    font-size: 0.82rem;
  }

  /* Search suggestions */
  .search-suggestions {
    border-radius: 10px;
    padding: 6px;
  }
}


/* ==============================================================
   GPS / ubicación centralizado
   (fix 2026-08-10) El botón GPS se veía fuera de zona y gigante
   porque modern-polish.css lo forzaba a 44px contra un campo de
   30px (ratio 147%). Aquí lo centramos en su zona y lo hacemos
   proporcional al alto del input.
   ============================================================== */

/* ==============================================================
   GPS / ubicación centralizado — CUADRO ÚNICO
   (fix 2026-08-10) El usuario quiere que el campo de ubicación y
   el botón GPS sean UN SOLO OBJETO (como un cuadrado en Photoshop):
   un contenedor con borde que engloba el input + el botón GPS
   juntos, centrado. Aquí refactorizamos .location-input-row para
   que sea el "cuadro" y el botón quede DENTRO, a la derecha.
   ============================================================== */

body[data-workori-page="home"] .field-group-location .location-input-row {
  /* Contenedor: el campo (rectángulo angosto) + botón GPS como dos
     piezas centradas juntas, con separación entre ellas */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body[data-workori-page="home"] .location-input-row input[type="text"],
body[data-workori-page="home"] .location-input-row input {
  /* El RECTÁNGULO del campo: con su propio borde, ANCHO REDUCIDO
     para que NO llegue hasta el botón GPS (queda un hueco y el
     conjunto campo+botón queda centrado) */
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 56px);
  min-height: 34px;
  padding: 0 14px;
  border: 1.5px solid #d8e2ef;
  border-radius: 10px;
  background: #ffffff;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  outline: 0;
  box-sizing: border-box;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body[data-workori-page="home"] .location-input-row input::placeholder {
  color: #7b8598;
  font-weight: 500;
}

body[data-workori-page="home"] .location-input-row input:focus {
  border-color: var(--blue, var(--blue));
  box-shadow: 0 0 0 3px rgba(7, 95, 228, 0.12);
}

body[data-workori-page="home"] .location-button,
body[data-workori-page="home"] [class*="location-button"] {
  /* El botón GPS: cuadrado independiente, a la derecha del campo,
     separado (no pegado al borde del rectángulo) */
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid #d8e2ef;
  border-radius: 10px;
  background: #eef4ff;
  color: var(--blue, var(--blue));
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

body[data-workori-page="home"] .location-button:hover,
body[data-workori-page="home"] .location-button:focus {
  background: #dfebff;
  color: var(--blue, var(--blue));
  outline: 0;
}

body[data-workori-page="home"] .location-button .location-button-icon,
body[data-workori-page="home"] [class*="location-button"] .location-button-icon {
  width: 18px;
  height: 18px;
}

/* En móvil: campo más angosto para que el botón respire */
@media (max-width: 599px) {
  body[data-workori-page="home"] .location-input-row input[type="text"],
  body[data-workori-page="home"] .location-input-row input {
    min-height: 38px;
  }
  body[data-workori-page="home"] .location-button,
  body[data-workori-page="home"] [class*="location-button"] {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }
}

/* --- 11. PREFER-REDUCED-MOTION ---------------------------- */

/*
 * Apagamos todas las animaciones/keyframes para usuarios
 * que han solicitado movimiento reducido. Mantenemos la
 * estetica (sombras, radios) intacta.
 */

@media (prefers-reduced-motion: reduce) {

  .hero-photo,
  .hero-photo-wrap .hero-photo,
  .hero-figure .hero-photo,
  .hero-media .hero-photo {
    animation: none;
  }

  .hero-float-stack--tr > .hero-job-card,
  .hero-float-stack--tr > .status-card,
  .hero-float-stack--tr > .hero-trust-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .search-suggestions {
    animation: none;
  }

  #mobile-apps[data-home-lock="pwa-apps"] .pwa-app-card__icon {
    animation: none;
  }

  /* En general: cualquier elemento con transition agresiva la baja */
  .nav-toggle,
  .nav-toggle span,
  .language-switch,
  .language-option,
  .home-data-empty,
  body[data-workori-page="home"] .mobile-trust-strip {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* --- 12. FIN ----------------------------------------------- */

/* --- 13. HERO: MENOS DEGRADADO, SE VE MAS AL HOMBRE ---------- */
/*
 * base.css desvanece el lado izquierdo de la foto (mask-image con stops
 * muy juntos: transparent 0% -> 0.28@8% -> 0.72@18% -> #000@30%) y encima
 * el overlay blanco .hero-media::before blanquea hasta el 52% del ancho.
 * Resultado: una banda gris/blanca fuerte que tapa parte del profesional.
 * Override: la foto llega antes a plena opacidad (mas sujeto visible) y el
 * overlay blanco se retrae y se vuelve mas tenue (fondo suave a los lados,
 * sin franja dura).
 */
.hero-photo {
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.16) 5%,
      rgba(0, 0, 0, 0.55) 12%,
      #000 20%,
      #000 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.16) 5%,
      rgba(0, 0, 0, 0.55) 12%,
      #000 20%,
      #000 100%
    );
}

.hero-media::before {
  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.55) 10%,
      rgba(255, 255, 255, 0.18) 20%,
      rgba(255, 255, 255, 0) 30%
    ),
    linear-gradient(180deg, rgba(8, 20, 45, 0) 78%, rgba(8, 20, 45, 0.08) 100%);
}