/* Hero Apple: fotografía original completa y composición equivalente a Android.
   Estos estilos solo se cargan en /mdm/apple/. */
.apple-intro{
  --apple-gutter:clamp(28px,5vw,80px);
  position:relative;
  overflow:clip;
  background:#f7f7f5;
  color:#1b2430;
}
.apple-hero-shell{
  position:relative;
  width:100%;
  max-width:1500px;
  margin-inline:auto;
  padding-inline:var(--apple-gutter);
}
.apple-hero{
  position:relative;
  display:grid;
  align-items:center;
  isolation:isolate;
  /* Reserva espacio sobre la foto para que la cabecera no tape la cabeza. */
  margin-top:-92px;
  min-height:calc(100vw * 941 / 1672 + 104px);
  padding-top:calc(104px + clamp(20px,3vh,44px));
  padding-bottom:clamp(30px,5vh,60px);
}
.apple-hero-visual{
  position:absolute;
  inset:0;
  left:50%;
  right:50%;
  margin-inline:-50vw;
  width:100vw;
  overflow:hidden;
  z-index:-1;
  /* Fila superior REAL de apple-hero-banner.webp, muestreada cada 10% del
     ancho (ver .and-hero-visual). */
  background:linear-gradient(90deg,
    #7896B8 0%, #608FBB 10%, #4687B7 20%, #3A7FB4 30%, #327AAF 40%,
    #2875AD 50%, #2576B0 60%, #2376B2 70%, #166EAA 80%, #0969A6 90%,
    #0263A1 100%);
}
.apple-hero-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.apple-hero-copy{
  position:relative;
  z-index:1;
  max-width:min(44%,560px);
}
.apple-hero h1{
  margin:26px 0 0;
  font-size:clamp(40px,5.6vw,92px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.05em;
  text-wrap:balance;
  color:#1b2430;
}
.apple-hero h1 em{
  color:var(--orange,#FB923C);
  font-style:normal;
  font-weight:730;
}
.apple-hero-copy p{
  max-width:42ch;
  margin:26px 0 0;
  color:#4a5561;
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.6;
}
.apple-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:38px;
}
.apple-hero-actions .button:not(.button-primary){
  background:#fff;
  border-color:rgba(31,41,55,.12);
  color:#20262e;
}

/* En escritorio el héroe debe ocupar exactamente el primer encuadre, igual
   que Android. La antigua altura basada en el ancho crecía de más en
   monitores panorámicos y dejaba la banda de estadísticas fuera de pantalla. */
@media(min-width:901px){
  .mdm-apple-page .apple-hero{
    min-height:100svh;
  }

  .mdm-apple-page .apple-hero-copy{
    top:-20px;
  }
}

/* Como en Android, se apila el texto y la foto sin recortar al cliente. */
@media(max-width:900px){
  .apple-intro{background:#FB923C}
  .apple-hero{
    display:flex;
    flex-direction:column;
    width:100vw;
    min-height:100svh;
    margin-inline:calc(50% - 50vw);
    /* Sin margen negativo, mismo motivo que en Android: en movil la cabecera
       es absolute, no ocupa flujo, y ese margen acababa colapsando hacia
       arriba y llevandose el navbar fuera de pantalla. Ver la nota larga en
       mdm-android.css. */
    margin-top:0;
    padding:calc(72px + clamp(18px,3.5vh,34px)) 22px clamp(28px,5vh,48px);
    overflow:hidden;
    text-align:center;
    background:#FB923C;
  }
  .apple-hero-copy{position:relative;z-index:1;max-width:none}
  .apple-hero h1{
    margin-top:16px;
    font-size:clamp(39px,10.4vw,52px);
    line-height:.98;
    font-weight:720;
    color:#fff;
    text-shadow:0 2px 18px rgba(70,24,3,.18);
  }
  .apple-hero h1 em{color:#fff;font-weight:720}
  .apple-hero-copy p{
    max-width:32ch;
    margin:20px auto 0;
    color:rgba(255,255,255,.88);
    font-size:17px;
    line-height:1.45;
  }
  .apple-hero-actions{
    align-items:center;
    justify-content:center;
    margin-top:clamp(22px,3.5vh,30px);
  }
  .apple-hero-actions .button{
    width:min(232px,72vw);
    height:52px;
    justify-content:space-between;
    padding:0 8px 0 22px;
    border-radius:17px 29px 29px 17px;
    font-size:16px;
  }
  .apple-hero-actions .button-primary{
    color:#1b2430;
    background:rgba(255,255,255,.94);
    border-color:rgba(255,255,255,.9);
    box-shadow:0 14px 34px rgba(88,31,5,.24),inset 0 1px 0 #fff;
  }
  .apple-hero-actions .button-primary span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    color:#fff;
    background:#FB923C;
    box-shadow:0 6px 16px rgba(251,146,60,.32);
  }
  .apple-hero-copy{position:relative}
  .apple-hero-copy::before{
    display:none;
    content:none;
  }

  /* Misma composición a sangre que Android. */
  .apple-hero-visual{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    margin:0;
    background:none;
  }
  .apple-hero-visual picture{
    display:block;
    width:100%;
    height:100%;
  }
  .apple-hero-visual img{
    display:block;
    position:static;
    width:100%;
    max-width:none;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:none;
  }
  .apple-hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(91,35,7,.3);
    pointer-events:none;
  }
}

/* ==========================================================================
   CABECERA SOBRE LA FOTO DE NUBES — solo escritorio.

   Al cambiar el hero a la fotografia de cielo, la franja donde vive el
   navbar paso de durazno claro a azul medio. El menu conserva su color
   original (#354052) y sobre ese azul cae a ~3.1:1: se vuelve casi
   ilegible. Se pasa a blanco, exactamente el mismo tratamiento que ya
   tiene la portada sobre su propio cielo, y asi las tres paginas leen
   igual.

   Solo cambia el COLOR del menu y del logo. No toca posiciones, tamanos,
   tipografia, el subrayado naranja, ni los botones Login y Solicitar demo,
   que ya contrastan por si mismos. En movil no aplica nada de esto.
   ========================================================================== */
@media(min-width:901px){
  body:has(> main[data-route="mdm-apple"]) .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
  }

  body:has(> main[data-route="mdm-apple"]) .desktop-nav,
  body:has(> main[data-route="mdm-apple"]) .desktop-nav > a,
  body:has(> main[data-route="mdm-apple"]) .desktop-nav .solutions-trigger,
  body:has(> main[data-route="mdm-apple"]) .desktop-nav .nav-menu-trigger{
    color:rgba(255,255,255,.95);
  }

  body:has(> main[data-route="mdm-apple"]) .desktop-nav :is(a,.solutions-trigger,.nav-menu-trigger):hover,
  body:has(> main[data-route="mdm-apple"]) .desktop-nav .active{
    color:#fff;
  }

  body:has(> main[data-route="mdm-apple"]) .desktop-nav > :is(a,button)::after,
  body:has(> main[data-route="mdm-apple"]) .desktop-nav > .nav-menu > .nav-menu-trigger::after{
    background:#fff;
  }
}

/* --- Niebla de lectura --------------------------------------------------
   El fondo dejo de ser crema claro y ahora es cielo: por la izquierda pasa
   de azul medio (arriba) a nube naranja (abajo). Medido sobre la foto, la
   palabra acentuada caia a 1.5:1 contra la nube — practicamente invisible.

   En lugar de oscurecer la foto se aclara: una niebla BLANCA que arranca en
   el borde izquierdo y se ha disuelto del todo antes de llegar al sujeto.
   Encaja con el motivo de nubes en vez de pelearse con el, no toca la
   fotografia de la derecha y sube toda la zona de texto muy por encima de
   4.5:1. Solo escritorio: en movil el hero es otra composicion.
   ------------------------------------------------------------------------ */
@media(min-width:901px){
  .apple-hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(100deg,
        rgba(255,255,255,.88) 0%,
        rgba(255,255,255,.76) 20%,
        rgba(255,254,252,.48) 38%,
        rgba(255,254,252,.17) 52%,
        rgba(255,255,255,0) 64%),
      radial-gradient(120% 78% at 6% 52%,
        rgba(255,255,255,.42), rgba(255,255,255,0) 62%);
    /* La niebla arranca POR DEBAJO de la cabecera. Sin esto cubre tambien
       la franja del navbar, y como el logo va en blanco sobre el cielo,
       se quedaba blanco sobre blanco: invisible. */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 84px,#000 188px);
    mask-image:linear-gradient(to bottom,transparent 0,transparent 84px,#000 188px);
  }

  /* El acento del titular baja de tono. #FB923C sobre la nube daba 1.5:1;
     este naranja quemado, que es el de la marca en version profunda, da
     4.9:1 sobre la niebla. Cambia SOLO en el titular del hero: el resto de
     la pagina conserva el naranja del sistema. */
  .apple-hero h1 em{color:#C2410C}
}

/* --- Dobladillo inferior ------------------------------------------------
   La fotografia terminaba en un borde recto de lado a lado justo donde
   empieza el blanco de la seccion siguiente, y como la banda de
   estadisticas cruza ese borde, el corte quedaba a la vista a izquierda y
   derecha de la banda.

   Mismo recurso que en la portada: un degradado al blanco, largo y de
   arranque muy lento, que disuelve el ultimo tramo de la foto en el fondo
   de la pagina en vez de cortarlo. No es una banda encima — los dos
   primeros tramos son practicamente transparentes.

   Va a sangre (100vw) porque .apple-hero vive dentro de .container y si no se
   quedaria corto en los margenes de pagina. z-index:0 lo deja por encima de
   la foto (que es z-index:-1) y por debajo de la copia (z-index:1), asi que
   no toca ni el titular ni el boton.
   ------------------------------------------------------------------------ */
@media(min-width:901px){
  .apple-hero::after{
    content:"";
    position:absolute;
    left:50%;
    right:50%;
    margin-inline:-50vw;
    width:100vw;
    bottom:0;
    height:clamp(120px,15vh,200px);
    z-index:0;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.14) 32%,
      rgba(255,255,255,.44) 57%,
      rgba(255,255,255,.78) 77%,
      rgba(255,255,255,.94) 90%,
      #fff 100%);
  }
}

/* --------------------------------------------------------------------------
   FOTOGRAFIA DE TELEFONO — fondo de cielo.

   La foto naranja de estudio pasa a la fotografia sobre nubes. Eso obliga a
   tres ajustes y solo tres; el resto del hero movil (medidas, tipografia,
   posiciones, boton) se queda exactamente igual.

   1. El velo. Era `rgba(91,35,7,.3)`, un marron pensado para el naranja: sobre
      el cielo lo ensuciaba. Fuera.
   2. El color del texto. Medido sobre la foto nueva, el blanco cae a 1.26:1
      en la banda del titular — ilegible. En oscuro sube por encima de 6:1 en
      toda esa banda, sin necesidad de velo, y ademas lee igual que /mdm/.
   3. El dobladillo inferior, para que la foto no acabe en un corte recto
      contra lo que viene despues.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .mdm-apple-page .apple-hero{
    /* Respaldo mientras carga la foto: el azul real de su fila superior. */
    background:#3E97D9;
  }

  /* La esquina inferior del hero va redondeada (38.8px), y por ese hueco
     asomaba lo que hay detras: el blanco de <main> en un lado y el naranja
     del body en el otro. Se pinta con el azul oscuro del panel de
     estadisticas —#151A20, medido del propio panel— para que la curva se
     apoye en el mismo color que la banda que viene justo debajo. */
  .mdm-apple-page .apple-hero-shell{
    background:#151A20;
  }

  .mdm-apple-page .apple-hero-visual::after{
    /* Solo el dobladillo: el velo marron ya no pinta nada aqui. */
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 72%,
      rgba(255,255,255,.14) 79%,
      rgba(255,255,255,.46) 88%,
      rgba(255,255,255,.80) 94%,
      rgba(255,255,255,.95) 97%,
      #fff 100%);
  }

  .mdm-apple-page .apple-hero h1,
  .mdm-apple-page .apple-hero h1 em{
    color:#132030;
    text-shadow:0 1px 22px rgba(255,255,255,.45);
  }

  .mdm-apple-page .apple-hero-copy p{
    color:#28323F;
    /* La segunda linea cruza el pelo de la modelo, donde el oscuro sobre
       oscuro se pierde. Un halo blanco local lo resuelve sin lavar la foto,
       que es lo que haria un velo a toda la banda. */
    text-shadow:0 1px 12px rgba(255,255,255,.9),0 0 22px rgba(255,255,255,.65);
  }
}