/* ============================================================================
   MDM Android — hero + Device Story
   ----------------------------------------------------------------------------
   El hero es una maqueta normal de dos columnas y NO se toca.

   Después del hero: UNA sola columna visual (izquierda) que atraviesa toda la
   sección, y seis filas que contienen SOLO texto. Ninguna imagen vive dentro de
   una fila, así que es imposible que asome el visual de la siguiente por debajo
   de un divisor.

   El único elemento con position:sticky es .ds-stage. Ni la sección ni los
   textos se congelan: las filas suben con el scroll como cualquier contenido.

   Ajustes rápidos:
     --and-gutter   padding horizontal del hero
     .ds-row        alto de fila y divisores
     .ds-hand / .ds-phone / .ds-handphone   tamaño de cada estado
   ============================================================================ */

.and{
  --and-orange:var(--orange,#FB923C);
  --and-ink:#121212;
  --and-muted:#5f6773;
  --and-paper:#f7f7f5;
  --and-rule:rgba(18,18,18,.16);
  --and-gutter:clamp(28px,5vw,80px);

  position:relative;
  background:var(--and-paper);
  color:var(--and-ink);
  overflow:clip;
}
.and-shell{
  width:100%;max-width:1500px;margin-inline:auto;
  padding-inline:var(--and-gutter);
  position:relative;
}

/* ============================ hero ============================
   El hero pasa a ser una FOTO A SANGRE. La imagen esta compuesta con el
   sujeto a la derecha y la mitad izquierda vacia en naranja: ahi va el
   texto. Por eso ya no es una rejilla de dos columnas con un recorte al
   lado, sino una sola capa con la copia encima.

   La foto sale del contenedor a ancho completo con el truco del 50vw, para
   que llegue a los dos bordes de la pantalla aunque .container tenga
   margenes.
   ============================================================== */
.and-hero{
  position:relative;
  /* --- La foto llega hasta arriba del todo ---
     La cabecera es position:relative y ocupa 92px de flujo, asi que el hero
     empezaba 92px por debajo y quedaba una franja blanca. Se suben esos 92px
     y se devuelven como padding, para que el texto no acabe debajo del
     navbar. La cabecera lleva z-index:60, asi que sigue pintandose encima
     de la foto. */
  margin-top:-92px;
  padding-top:calc(104px + clamp(20px,3vh,44px));
  padding-bottom:clamp(30px,5vh,60px);

  /* OJO: el naranja NO va aqui. .and-hero vive dentro de .container, asi que
     solo mide el ancho del contenido (1281 de 1425) y dejaba dos franjas
     blancas en los margenes de pagina. Va en .and-hero-visual, que si es a
     sangre. */

  /* --- La foto entera, sin recortar ---
     Antes la caja media 1440x760 (ratio 1.895) contra una imagen de 1.777:
     `cover` recortaba arriba y abajo y se perdia un 6%. Fijando el alto a la
     proporcion exacta de la foto (941/1672 = 56.28% del ancho), la caja y la
     imagen coinciden y no se recorta nada. */
  /* Alto = la foto entera (proporcion exacta) MAS el espacio de la cabecera.
     Asi la foto no se recorta y ademas baja lo suficiente para que el navbar
     no le pise la cabeza: solo tenia 14px de aire sobre el pelo (1.5%) y la
     barra ocupa 84. */
  min-height:calc(100vw * 941 / 1672 + 104px);

  display:grid;
  align-items:center;
  isolation:isolate;
}
.and-hero-visual{
  position:absolute;
  inset:0;
  z-index:-1;
  /* a sangre: rompe los margenes del .container que lo envuelve */
  left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;
  width:100vw;
  overflow:hidden;
  /* Rellena el hueco superior que deja la foto (anclada abajo con
     object-position) con la fila superior REAL de la imagen, muestreada cada
     10% del ancho. Con la foto nueva esa fila es AZUL CIELO, no durazno: si se deja
     el degradado anterior aparece una banda naranja pegada arriba. */
  background:linear-gradient(90deg,
    #67A0D5 0%, #4E9BDB 10%, #2C97E0 20%, #1292E0 30%, #018EDE 40%,
    #018BDB 50%, #0089D9 60%, #0189D8 70%, #007FD0 80%, #007BCD 90%,
    #047BC6 100%);
}
.and-hero-visual img{
  display:block;
  width:100%;height:100%;
  /* La caja ya tiene la proporcion de la foto, asi que aqui no se recorta
     nada. `contain` lo deja garantizado incluso si el redondeo de vw juega
     un pixel en contra. */
  object-fit:contain;
  /* Anclada abajo: el espacio sobrante queda arriba, que es justo donde va
     la cabecera. */
  object-position:center bottom;
  filter:none;
}
/* Sin velo. El fondo pasa a crema claro y el texto a oscuro: medido, el
   oscuro da 9.39:1 en el peor punto de la zona de texto (el blanco daba
   1.14:1, ilegible). Oscurecer el fondo ya no hace falta. */
.and-hero-copy{
  position:relative;
  z-index:1;
  /* 44% y no 52%: mas alla de ahi el fondo se aclara y el blanco baja de
     4.5:1. Es el limite que da la medida de contraste, no una estetica. */
  max-width:min(44%,560px);
}

/* Texto sobre naranja: pasa a blanco. */
.and-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--and-orange);
}
.and-eyebrow::before{content:"";width:22px;height:1px;background:var(--and-orange)}
.and-hero h1{
  margin:26px 0 0;
  font-size:clamp(40px,5.6vw,92px);line-height:.98;letter-spacing:-.05em;font-weight:500;
  color:#1B2430;
  text-wrap:balance;
}
/* La palabra acentuada ya no puede ir en naranja: se perderia sobre el
   fondo. Se invierte el recurso y va en blanco solido sobre el resto. */
.and-hero h1 em{font-style:normal;color:var(--and-orange);font-weight:730}
.and-title-mobile{display:none}
.and-hero-copy p{
  max-width:42ch;margin:26px 0 0;
  color:#4A5561;font-size:clamp(16px,1.3vw,20px);line-height:1.6;
}
.and-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
/* El boton secundario vuelve a su tratamiento normal: sobre crema claro el
   blanco solido ya no hace falta. */
.and-hero-actions .button:not(.button-primary){
  background:#fff;
  border-color:rgba(31,41,55,.12);
  color:#20262e;
}

/* Móvil y tablet: fotografía a sangre, cabecera superpuesta, copia centrada
   y una sola llamada a la acción, siguiendo la composición de referencia. */
@media(max-width:900px){
  .mdm-detail-page .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
    opacity:.96;
  }
  .mdm-detail-page .mobile-header-language,
  .mdm-detail-page:not(.home-page) .mobile-header-language{
    color:#fff;
    border-color:rgba(255,255,255,.52);
    background:rgba(255,255,255,.14);
  }
  .mdm-detail-page .menu-toggle,
  .mdm-detail-page:not(.home-page) .menu-toggle{
    color:#fff;
    background:rgba(255,255,255,.18)!important;
  }

  .and-hero{
    position:relative;
    display:flex;
    flex-direction:column;
    /* Una pantalla, como la referencia. svh y no vh: en movil vh cuenta la
       barra del navegador y el hero se pasaba de largo. */
    min-height:100svh;
    width:100vw;
    margin-inline:calc(50% - 50vw);
    /* SIN margen negativo. A partir de 900px la cabecera pasa a
       position:absolute (styles.css, bloque "CABECERA MOVIL"), o sea que ya
       no ocupa flujo y no hay nada que cancelar. Los -72px que habia aqui no
       subian el hero bajo la cabecera: como <main> es el primer hijo en flujo
       del <body> y ni .and-shell ni .and ni main tienen borde o padding que
       lo frenen, el margen colapsaba hacia arriba y movia la caja del PROPIO
       body 72px. La cabecera se posiciona respecto al body, asi que se iba
       con el y el navbar desaparecia de la pantalla.
       El hueco bajo la barra lo reserva el padding-top de aqui abajo. */
    margin-top:0;
    padding:calc(72px + clamp(18px,3.5vh,34px)) 22px clamp(28px,5vh,48px);
    overflow:hidden;
    text-align:center;
    background:#FB923C;
  }

  .and-hero-text{position:relative}
  .and-hero-text::before{
    display:none;
    content:none;
  }

  /* La fotografía llena el hero desde el primer píxel, sin franja superior. */
  .and-hero-visual{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    margin:0;
    background:none;
  }
  .and-hero-visual picture{
    display:block;
    width:100%;
    height:100%;
  }
  .and-hero-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  .and-hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(91,35,7,.3);
    pointer-events:none;
  }

  .and-hero-copy{
    position:relative;
    z-index:1;
    max-width:none;
    text-align:center;
  }
  .and-eyebrow{justify-content:center}
  .and-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);
  }
  .and-hero h1 em{color:#fff;font-weight:720}
  .and-hero-copy p{
    max-width:32ch;margin:20px auto 0;
    color:rgba(255,255,255,.88);font-size:17px;line-height:1.45;
  }
  /* CTA única y compacta sobre la fotografía. */
  .and-hero-actions{
    align-items:center;
    justify-content:center;
    margin-top:clamp(22px,3.5vh,30px);
  }
  .and-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;
  }
  .and-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;
  }
  .and-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);
  }
}

/* ============================ device story ============================
   UNA sola columna visual para toda la sección. Los seis FeatureRow llevan
   texto y nada más: no hay ninguna imagen dentro de ellos, por eso ya no se
   asoma el visual del siguiente bloque por debajo del divisor.

   El escenario usa position:sticky —solo él, nunca la sección entera ni los
   textos—, así que la página sigue desplazándose con normalidad mientras el
   objeto acompaña la narrativa. Tres estados: mano → teléfono → mano+teléfono.
   ====================================================================== */

.ds{
  position:relative;
  max-width:1450px;margin-inline:auto;
  padding-inline:clamp(22px,5vw,70px);
  padding-top:clamp(100px,14vh,160px);   /* aire entre el hero y el primer divisor */
}
.ds-grid{
  display:grid;
  grid-template-columns:42% 58%;
  align-items:stretch;                    /* la columna visual debe medir lo mismo
                                             que la de texto o sticky no tiene recorrido */
}

/* ---------- columna visual (única) ---------- */
.ds-visual{position:relative}
.ds-stage{
  position:sticky;top:15vh;height:70vh;
  display:flex;align-items:center;justify-content:center;
}
.ds-art{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;object-fit:contain;
  will-change:transform,opacity;
}
/* Dos decisiones aquí, ambas verificadas midiendo en el navegador:
   1) Se dimensionan por ALTURA con width:auto, no por ancho con max-height.
   Con max-height la caja del <img> queda más alta que la imagen pintada
   (letterbox), y entonces la caja deja de servir para alinear: el cruce final
   con la composición se desviaba 12px.
   2) El tope de ancho es 92% del propio escenario, no un valor en vw. El
   escenario mide lo que mide la columna, así que ninguna imagen puede invadir
   la columna de texto en ningún ancho (a 1024 la composición se salía 24px). */
/* 56vh y no 70: a 70 la mano ocupaba el 70% del alto y, mientras la sección
   entra (antes de que el sticky se asiente), se cortaba hasta 690px por abajo. */
.ds-hand{
  height:min(56vh,600px);width:auto;max-width:min(92%,560px);
  filter:drop-shadow(0 34px 52px rgba(18,18,18,.15));
}
.ds-phone{
  height:min(70vh,690px);width:auto;max-width:min(92%,390px);
  filter:drop-shadow(0 30px 46px rgba(18,18,18,.20));
}
/* 66vh: por encima de eso la composición sobresale del escenario (70vh) y se
   recortaba por arriba y por abajo al entrar y salir. */
.ds-handphone{
  height:min(66vh,700px);width:auto;max-width:min(92%,630px);
  filter:drop-shadow(0 38px 58px rgba(18,18,18,.17));
}
/* glow tenue: solo se enciende en el feature 04 */
.ds-glow{
  position:absolute;left:50%;top:50%;
  width:min(34vw,520px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(251,146,60,.09),transparent 68%);
  opacity:0;pointer-events:none;
}

/* Estado inicial de la historia: solo la mano. Si el JS no llega a arrancar,
   la regla de abajo (.ds:not(.is-live)) devuelve las tres a la vista. */
.ds-phone,.ds-handphone{opacity:0}
/* El escenario entra con un fundido corto para que no se vea a medio cortar
   mientras la sección todavía está llegando desde abajo. */
.ds.is-live .ds-stage{opacity:0}

/* ---------- filas de texto ---------- */
.ds-rows{position:relative;min-width:0}
.ds-row{
  display:grid;
  grid-template-columns:minmax(270px,.8fr) minmax(360px,1.2fr);
  gap:clamp(70px,8vw,150px);
  align-items:center;
  min-height:clamp(600px,72vh,780px);
  padding:clamp(30px,5vh,56px) 0;
  border-top:1px solid rgba(0,0,0,.12);
}
.ds-row:last-child{border-bottom:1px solid rgba(0,0,0,.12)}

.ds-index{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--and-orange);
}
.ds-index i{display:block;width:26px;height:1px;background:var(--and-orange);font-style:normal}
.ds-head h2{
  margin:0;
  font-size:clamp(42px,3.5vw,62px);line-height:1.0;letter-spacing:-.04em;font-weight:580;
  text-wrap:balance;
}
.ds-desc p{margin:0;max-width:470px;color:var(--and-muted);font-size:clamp(16px,1.15vw,18px);line-height:1.55}
.ds-bullets{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ds-bullets li{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.01em;color:#4a525e}
.ds-bullets li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--and-orange);flex:0 0 auto}

/* bloques visuales que solo existen en móvil */
.ds-mobile-art{display:none}

/* ---------- sin JS / movimiento reducido ---------- */
/* El escenario deja de ser sticky y las tres imágenes se apilan en el flujo:
   toda la historia sigue siendo legible sin una sola animación. */
.ds:not(.is-live) .ds-stage{position:static;height:auto;display:block;padding-bottom:40px}
.ds:not(.is-live) .ds-art{position:relative;left:auto;top:auto;transform:none;opacity:1;margin:0 auto 44px}
.ds:not(.is-live) .ds-glow{display:none}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .ds-grid{grid-template-columns:38% 62%}
  .ds-row{
    grid-template-columns:1fr;
    gap:22px;
    min-height:clamp(460px,58vh,620px);
  }
}

/* ---------- móvil ---------- */
/* No hay espacio para una columna lateral: el escenario sticky desaparece y
   la historia se cuenta con tres bloques intercalados (mano antes del 01,
   teléfono antes del 02 y mano+teléfono antes del 06). El teléfono no se
   repite en cada feature. */
@media (max-width:767px){
  .ds{padding-top:clamp(70px,10vh,110px)}
  .ds-grid{grid-template-columns:1fr}
  .ds-visual{display:none}
  .ds-row{min-height:auto;padding:56px 0}
  .ds-head h2{font-size:clamp(34px,9vw,46px)}
  .ds-desc{margin-top:20px}
  .ds-mobile-art{
    display:flex;justify-content:center;
    padding:18px 0 46px;
  }
  .ds-mobile-art img{display:block;height:auto;object-fit:contain}
  .ds-mobile-art[data-art="hand"] img{width:min(96vw,430px)}
  .ds-mobile-art[data-art="phone"] img{width:min(66vw,300px)}
  .ds-mobile-art[data-art="hand-phone"] img{width:min(92vw,420px)}
}


/* ==========================================================================
   TARJETA RESUMEN (and-brief) — va justo despues del hero.
   Es la pieza grafica tal cual la entrego el cliente, no una reconstruccion:
   aqui solo se le da el ancho del contenido y se deja respirar.
   ========================================================================== */
.and-brief{
  width:min(1630px,calc(100% - 80px));
  margin-inline:auto;
  /* El padding lateral devuelve a la tarjeta el aire que tenia dentro del
     mockup. Al recortarle el marco gris paso a ocupar todo el ancho y
     crecio un 20%: esto la deja otra vez a su tamano, y de paso mejora la
     densidad de pixeles en pantallas Retina. */
  padding:clamp(48px,7vh,88px) clamp(0px,4vw,90px) clamp(20px,3vh,40px);
}
.and-brief-img{
  display:block;
  width:100%;
  /* Tope a 1000px. Al recortarle el marco gris que traia el PNG, la tarjeta
     paso a ocupar todo el ancho y crecio un 20% con los mismos pixeles: por
     eso se veia mas blanda. Con este tope recupera su tamano y, junto a la
     variante @2x del srcset, en Retina recibe ~2000px reales. */
  max-width:1000px;
  margin-inline:auto;
  height:auto;          /* la pieza ya trae su propia proporcion */
}
/* Mismos margenes laterales que .container en el resto del sitio. */
@media(max-width:1200px){ .and-brief{width:min(1630px,calc(100% - 42px))} }
@media(max-width:620px){  .and-brief{width:calc(100% - 28px)} }

/* ==========================================================================
   TUS DISPOSITIVOS BAJO CONTROL — composición de la referencia.
   El texto, el CTA y las tarjetas definen las filas. La foto ocupa su altura
   total: las tarjetas se superponen a la foto, nunca al botón ni al texto.
   ========================================================================== */
.and-control{
  --ac-orange:#FB923C;
  --ac-card:#FB923C;
  --ac-ink:#171b20;
  width:100%;
  padding:clamp(30px,5vh,72px) 0 clamp(48px,7vh,96px);
}
.ac-wrap{
  width:min(1760px,92%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:45% minmax(0,1fr);
  column-gap:6%;
}
.ac-photo{
  position:relative;
  grid-column:1;
  grid-row:1 / 4;
  overflow:hidden;
  border-radius:clamp(90px,12vw,240px) 0 clamp(90px,12vw,240px) 0;
}
.ac-portrait{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 26%;
}
.ac-copy{
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.ac-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin-bottom:24px;
  padding:7px 12px;
  border:1px solid currentColor;
  border-radius:4px;
  color:#563018;
  font-size:14px;
  line-height:1;
}
.ac-title{
  margin:0 0 clamp(22px,2vw,38px);
  font-size:clamp(32px,4vw,76px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
  color:var(--ac-ink);
  text-wrap:balance;
}
.ac-desc{
  margin:0;
  font-size:clamp(16px,1.3vw,24px);
  line-height:1.5;
  color:#35393e;
  letter-spacing:-.015em;
}
.ac-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:clamp(22px,1.6vw,30px);
  padding:0 clamp(24px,1.8vw,36px);
  min-height:clamp(48px,3.6vw,70px);
  border:0;
  border-radius:24px 5px 24px 5px;
  background:var(--ac-orange);
  color:#fff;
  font-weight:700;
  font-size:clamp(16px,1.3vw,24px);
  text-decoration:none;
  transition:background-color .2s ease;
}
.ac-cta:hover{background:#FB923C}
.ac-cta:focus-visible{outline:3px solid var(--ac-ink);outline-offset:5px}
.ac-cards{
  grid-column:1 / -1;
  grid-row:2;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,1.6vw,32px);
  margin-top:clamp(64px,8.6vw,160px);
  margin-left:16%;
}
.ac-card{
  min-width:0;
  min-height:clamp(220px,16.5vw,330px);
  padding:clamp(30px,3.2vw,64px);
  border:0;
  border-radius:clamp(20px,1.6vw,30px) clamp(100px,8.5vw,165px) clamp(20px,1.6vw,30px) clamp(20px,1.6vw,30px);
  background:var(--ac-card);
  color:var(--ac-ink);
}
.ac-card h3{
  margin:0 0 clamp(22px,2vw,38px);
  font-size:clamp(22px,1.8vw,34px);
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:750;
}
.ac-card p{
  margin:0;
  font-size:clamp(16px,1.3vw,24px);
  line-height:1.5;
  letter-spacing:-.015em;
}
/* La fotografía continúa un poco por debajo de las tarjetas. */
.ac-wrap::after{
  content:"";
  grid-column:1 / -1;
  grid-row:3;
  height:clamp(28px,3vw,52px);
}

@media(max-width:900px){
  .and-control{
    padding:50px 0 56px;
    background:var(--ac-card);
  }
  .ac-wrap{
    width:100%;
    grid-template-columns:minmax(0,1fr);
    row-gap:0;
  }
  .ac-photo{
    grid-column:1;
    grid-row:2;
    margin:0 20px;
    aspect-ratio:1.12;
    border-radius:18px 72px 18px 0;
  }
  .ac-copy{
    grid-column:1;
    grid-row:1;
    padding:0 22px 36px;
    text-align:center;
  }
  .ac-cards{
    grid-column:1;
    grid-row:3;
    z-index:2;
    margin:-34px 20px 0;
    gap:16px;
  }
  .ac-card{
    min-height:0;
    padding:30px 26px 34px;
    border-radius:16px 72px 16px 16px;
    background:#fff;
  }
  .ac-title{
    max-width:12ch;
    margin-inline:auto;
    margin-bottom:20px;
    font-size:clamp(34px,9.2vw,42px);
    line-height:1.04;
  }
  .ac-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin-bottom:24px;
    padding:6px 11px;
    border:1px solid currentColor;
    border-radius:4px;
    font-size:14px;
  }
  .ac-desc{max-width:34ch;margin-inline:auto;font-size:18px;line-height:1.5}
  .ac-cta{
    min-height:52px;
    margin-top:26px;
    padding-inline:24px;
    border-radius:14px 4px 14px 4px;
    font-size:16px;
  }
  .ac-wrap::after{display:none}
}
@media(max-width:620px){
  .ac-cards{grid-template-columns:1fr;gap:20px}
  .ac-title{font-size:clamp(34px,9.2vw,40px)}
  .ac-card{padding:30px 24px 34px}
  .ac-card h3{margin-bottom:16px;font-size:22px}
  .ac-card p{font-size:17px;line-height:1.48}
}
@media(prefers-reduced-motion:reduce){
  .ac-cta{transition:none}
}

/* ========================================================================== 
   MDM ANDROID — composición alineada con Apple.
   En escritorio ambos héroes comparten exactamente el mismo flujo, altura y
   encuadre. De esta forma la cabecera reserva su espacio y nunca pisa la
   cabeza de la persona. Las reglas móviles permanecen independientes.
   ========================================================================== */

@media(min-width:901px){
  .mdm-android-page .and-hero{
    min-height:100svh;
  }

  .mdm-android-page .and-hero-visual img{
    transform:none;
  }

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

@media(max-width:900px){
  .mdm-android-page{
    background:#FB923C;
  }

  .mdm-android-page .site-header,
  .mdm-android-page:not(.home-page) .site-header{
    position:fixed;
    inset:0 0 auto;
    min-height:88px;
    padding:0;
    background:#FB923C!important;
  }

  .mdm-android-page .site-header > .nav-shell{
    width:calc(100% - 36px);
    height:88px;
    margin-inline:auto;
  }

  /* `:not(.menu-open)` NO es un parche: es la condicion que le faltaba a esta
     regla. Estas dos lineas devuelven el logo a la cabecera de la pagina de
     Android, pero pesan lo mismo (0,4,0) que la regla de estado
     `.site-header.menu-open > .nav-shell > .brand` de styles.css, que lo
     esconde mientras el menu movil esta abierto. Como mdm-android.css se
     carga DESPUES de styles.css, ganaba esta y el logotipo del navbar seguia
     pintado sobre la lamina naranja, encima del isotipo del propio menu: dos
     logos superpuestos. La cabecera solo repinta su logo cuando el menu esta
     cerrado. */
  .mdm-android-page .site-header:not(.menu-open) > .nav-shell > .brand,
  .mdm-android-page .site-header.mobile-controls-floating:not(.menu-open) > .nav-shell > .brand{
    display:flex;
    align-items:center;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }

  .mdm-android-page .site-header > .nav-shell > .brand img{
    width:auto;
    height:32px;
    filter:brightness(0) invert(1);
    opacity:1;
  }

  .mdm-android-page .mobile-header-actions{
    position:relative;
    top:auto;
    right:auto;
  }

  .mdm-android-page .site-header.mobile-controls-floating .mobile-header-actions{
    position:relative;
    top:auto;
    right:auto;
  }

  .mdm-android-page .mobile-header-language,
  .mdm-android-page:not(.home-page) .mobile-header-language,
  .mdm-android-page .site-header.mobile-controls-floating .mobile-header-language{
    color:#fff;
    border-color:rgba(255,255,255,.66);
    background:rgba(255,255,255,.13);
    box-shadow:none;
  }

  .mdm-android-page .menu-toggle,
  .mdm-android-page:not(.home-page) .menu-toggle,
  .mdm-android-page .site-header.mobile-controls-floating .menu-toggle{
    color:#fff;
    background:rgba(255,255,255,.16)!important;
    box-shadow:none;
  }

  .mdm-android-page .and{
    overflow:hidden;
  }

  .mdm-android-page .and-shell{
    width:100%;
    max-width:none;
    padding:0;
  }

  .mdm-android-page .and-hero{
    width:100%;
    min-height:calc(100svh - 88px);
    margin:88px 0 0;
    padding:clamp(42px,7svh,66px) 20px 34px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:#FB923C;
    border-radius:0 0 clamp(42px,12vw,78px) 0;
  }

  .mdm-android-page .and-hero-copy{
    position:relative;
    z-index:2;
    display:flex;
    width:100%;
    max-width:430px;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .mdm-android-page .and-hero-visual{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:inherit;
    overflow:hidden;
  }

  .mdm-android-page .and-hero-visual::after{
    display:block;
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(75,29,5,.22) 0%,rgba(75,29,5,.12) 46%,rgba(75,29,5,0) 72%);
    pointer-events:none;
  }

  .mdm-android-page .and-hero-visual picture,
  .mdm-android-page .and-hero-visual img{
    display:block;
    width:100%;
    height:100%;
  }

  .mdm-android-page .and-hero-visual img{
    object-fit:cover;
    object-position:center;
  }

  .mdm-android-page .and-hero h1{
    max-width:10.5ch;
    margin:0;
    color:#fff;
    font-size:clamp(40px,11.6vw,52px);
    line-height:.98;
    font-weight:760;
    text-shadow:0 3px 20px rgba(70,24,3,.2);
  }

  .mdm-android-page .and-title-desktop{display:none}
  .mdm-android-page .and-title-mobile{display:inline}

  .mdm-android-page .and-hero h1 em{
    color:#fff;
    font-weight:inherit;
  }

  .mdm-android-page .and-hero-copy p{
    max-width:31ch;
    margin:20px auto 0;
    color:rgba(255,255,255,.94);
    font-size:clamp(16px,4.4vw,18px);
    line-height:1.42;
    text-shadow:0 2px 12px rgba(70,24,3,.18);
  }

  .mdm-android-page .and-hero-actions{
    width:100%;
    margin-top:24px;
    justify-content:center;
  }

  .mdm-android-page .and-hero-actions .button-primary{
    width:min(250px,76vw);
    height:56px;
    color:#17202b;
    background:#fff;
    border-color:#fff;
    box-shadow:0 16px 34px rgba(92,34,6,.22);
  }
}

@media(max-width:380px){
  .mdm-android-page .site-header,
  .mdm-android-page:not(.home-page) .site-header{
    min-height:78px;
  }

  .mdm-android-page .site-header > .nav-shell{
    width:calc(100% - 26px);
    height:78px;
  }

  .mdm-android-page .site-header > .nav-shell > .brand img{
    height:27px;
  }

  .mdm-android-page .and-hero{
    min-height:calc(100svh - 78px);
    margin-top:78px;
    padding-top:36px;
  }

  .mdm-android-page .and-hero h1{
    font-size:clamp(37px,11.5vw,43px);
  }
}

/* ========================================================================== 
   MDM MÓVIL — composición compartida por Android y Apple.
   El héroe ocupa una pantalla completa; la cabecera se superpone a la foto y
   las estadísticas comienzan después, sin solapamientos ni alturas negativas.
   ========================================================================== */
@media(max-width:900px){
  .mdm-detail-page{
    background:#FB923C;
  }

  .mdm-detail-page .site-header,
  .mdm-detail-page:not(.home-page) .site-header{
    position:fixed;
    inset:0 0 auto;
    min-height:88px;
    padding:0;
    background:transparent!important;
    transition:background-color .22s ease,box-shadow .22s ease;
  }

  .mdm-detail-page .site-header.mobile-controls-floating,
  .mdm-detail-page:not(.home-page) .site-header.mobile-controls-floating{
    /* Al salir del hero se conserva solamente el par ES + menu, igual que
       en la portada. La cabecera completa no debe convertirse en una franja
       naranja fija ni arrastrar el logo por el resto de la pagina. */
    background:transparent!important;
    box-shadow:none;
  }

  .mdm-detail-page .site-header > .nav-shell{
    width:calc(100% - 36px);
    height:88px;
    margin-inline:auto;
  }

  /* Misma condicion que arriba, aqui para Android + Apple: el logo de la
     cabecera solo se repinta con el menu movil cerrado. Sin `:not(.menu-open)`
     esta regla anulaba a la de styles.css y quedaban dos logos encima. */
  .mdm-detail-page .site-header:not(.menu-open) > .nav-shell > .brand,
  .mdm-detail-page .site-header.mobile-controls-floating:not(.menu-open) > .nav-shell > .brand{
    display:flex;
    align-items:center;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }

  .mdm-detail-page .site-header.mobile-controls-floating:not(.menu-open) > .nav-shell > .brand{
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    pointer-events:none;
  }

  .mdm-detail-page .site-header > .nav-shell > .brand img{
    width:auto;
    height:32px;
    filter:brightness(0) invert(1);
    opacity:1;
  }

  .mdm-detail-page .mobile-header-actions{
    position:relative;
    inset:auto;
  }

  .mdm-detail-page .site-header.mobile-controls-floating .mobile-header-actions{
    position:fixed;
    top:max(12px,env(safe-area-inset-top));
    right:14px;
    bottom:auto;
    left:auto;
    z-index:220;
  }

  .mdm-detail-page .mobile-header-language,
  .mdm-detail-page:not(.home-page) .mobile-header-language,
  .mdm-detail-page .site-header.mobile-controls-floating .mobile-header-language{
    color:#fff;
    border-color:rgba(255,255,255,.64);
    background:rgba(255,255,255,.12);
    box-shadow:none;
  }

  .mdm-detail-page .menu-toggle,
  .mdm-detail-page:not(.home-page) .menu-toggle,
  .mdm-detail-page .site-header.mobile-controls-floating .menu-toggle{
    color:#fff;
    background:rgba(255,255,255,.15)!important;
    box-shadow:none;
  }

  .mdm-detail-page :is(.and-shell,.apple-hero-shell){
    width:100%;
    max-width:none;
    padding:0;
  }

  .mdm-detail-page :is(.and-hero,.apple-hero){
    width:100%;
    min-height:100svh;
    margin:0;
    padding:clamp(116px,17svh,138px) 20px 30px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    overflow:hidden;
    background:#FB923C;
    border-radius:0 0 clamp(34px,10vw,62px) 0;
  }

  .mdm-detail-page :is(.and-hero-copy,.apple-hero-copy){
    position:relative;
    z-index:2;
    display:flex;
    width:100%;
    max-width:430px;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .mdm-detail-page :is(.and-hero-visual,.apple-hero-visual){
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    margin:0;
    border-radius:inherit;
    overflow:hidden;
    background:none;
  }

  .mdm-detail-page :is(.and-hero-visual,.apple-hero-visual)::after{
    display:block;
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(78,31,6,.25) 0%,rgba(78,31,6,.12) 44%,rgba(78,31,6,0) 72%);
    pointer-events:none;
  }

  .mdm-detail-page :is(.and-hero-visual,.apple-hero-visual) picture,
  .mdm-detail-page :is(.and-hero-visual,.apple-hero-visual) img{
    display:block;
    width:100%;
    height:100%;
  }

  .mdm-detail-page :is(.and-hero-visual,.apple-hero-visual) img{
    position:static;
    max-width:none;
    object-fit:cover;
    object-position:center;
    transform:none;
  }

  .mdm-detail-page :is(.and-hero h1,.apple-hero h1){
    max-width:11ch;
    /* margin:0 dejaba el h1 pegado al borde izquierdo de .and-hero-text: con
       max-width:11ch la caja mide menos que su contenedor, y sin auto el
       sobrante se acumulaba todo a la derecha. El titular caia ~9px a la
       izquierda del centro real, desalineado con el <p> de abajo, que si
       lleva "20px auto 0". */
    margin:0 auto;
    color:#fff;
    font-size:clamp(36px,9.8vw,43px);
    line-height:.99;
    font-weight:750;
    letter-spacing:-.045em;
    text-shadow:0 3px 20px rgba(70,24,3,.2);
  }

  .mdm-apple-page .apple-hero h1{
    max-width:14.5ch;
  }

  .mdm-detail-page :is(.and-hero h1,.apple-hero h1) em{
    color:#fff;
    font-weight:inherit;
  }

  .mdm-detail-page :is(.and-hero-copy p,.apple-hero-copy p){
    max-width:32ch;
    margin:20px auto 0;
    color:rgba(255,255,255,.94);
    font-size:16px;
    line-height:1.43;
    letter-spacing:-.01em;
    text-shadow:0 2px 12px rgba(70,24,3,.18);
  }

  .mdm-detail-page :is(.and-hero-actions,.apple-hero-actions){
    width:100%;
    margin-top:24px;
    justify-content:center;
  }

  .mdm-detail-page :is(.and-hero-actions,.apple-hero-actions) .button-primary{
    width:min(220px,64vw);
    height:50px;
    padding:0 22px;
    justify-content:center;
    gap:12px;
    color:#17202b;
    background:#fff;
    border:1px solid rgba(255,255,255,.96);
    border-radius:16px 16px 34px 10px;
    box-shadow:0 13px 30px rgba(92,34,6,.2);
    font-size:15px;
    font-weight:520;
  }

  .mdm-detail-page :is(.and-hero-actions,.apple-hero-actions) .button-primary span{
    display:inline;
    width:auto;
    height:auto;
    color:inherit;
    background:none;
    border-radius:0;
    box-shadow:none;
  }
}

@media(max-width:380px){
  .mdm-detail-page .site-header,
  .mdm-detail-page:not(.home-page) .site-header{
    min-height:78px;
  }

  .mdm-detail-page .site-header > .nav-shell{
    width:calc(100% - 26px);
    height:78px;
  }

  .mdm-detail-page .site-header > .nav-shell > .brand img{
    height:27px;
  }

  .mdm-detail-page .site-header.mobile-controls-floating .mobile-header-actions{
    top:max(10px,env(safe-area-inset-top));
    right:11px;
  }

  .mdm-detail-page :is(.and-hero,.apple-hero){
    padding-top:104px;
  }

  .mdm-detail-page :is(.and-hero h1,.apple-hero h1){
    font-size:clamp(36px,10.8vw,41px);
  }
}

/* ==========================================================================
   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-android"]) .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
  }

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

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

  body:has(> main[data-route="mdm-android"]) .desktop-nav > :is(a,button)::after,
  body:has(> main[data-route="mdm-android"]) .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){
  .and-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. */
  .and-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 .and-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){
  .and-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-android-page .and-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-android-page .and-shell{
    background:#151A20;
  }

  .mdm-android-page .and-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-android-page .and-hero h1,
  .mdm-android-page .and-hero h1 em{
    color:#132030;
    text-shadow:0 1px 22px rgba(255,255,255,.45);
  }

  .mdm-android-page .and-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);
  }
}