/* ==========================================================================
   ECOSISTEMA — la operación, señalada.

   Tres capturas reales (tablet al centro, dos teléfonos flanqueando) y seis
   llamadas que apuntan a algo que SE VE en pantalla, unidas por un hilo fino.

   Cómo está montado:
     .eco__stage    caja de referencia. Todo lo demás se posiciona en % sobre
                    ella, así que la escena entera escala sin recalcular nada.
     .eco__devices  las tres capturas, en flex, solapadas.
     .eco__threads  un SVG estirado sobre la escena (viewBox 0 0 100 100 +
                    preserveAspectRatio:none) para poder trazar en las mismas
                    coordenadas en % que usan las llamadas.
     .eco__notes    las seis llamadas, cada una con su --x/--y (el punto al
                    que señala) y su --tx/--ty (dónde se posa el texto).

   El SVG deformado engorda los trazos de forma desigual; por eso el grosor va
   con vector-effect:non-scaling-stroke, que lo mantiene a 1px real.
   ========================================================================== */

:root{
  /* Los tokens salen de .eco pero la sección del diagrama, que es su hermana,
     también los usa: por eso viven en :root y no dentro de .eco. */
  --eco-bg:#fb923c;
  --eco-ink:#2a160b;
  --eco-muted:rgba(42,22,11,.80);
  --eco-hair:rgba(42,22,11,.34);
}

.eco{
  /* Franja naranja, igual que .mdm-crm en mdm-crm-band.css: mismo naranja de
     marca, mismo radio de 24px, mismo panel metido hacia dentro y misma tinta
     oscura. No es un color nuevo: es el bloque que ya existe en esta página,
     para que las dos franjas se lean como la misma familia. */
  position:relative;
  /* Tramo INTERMEDIO del bloque naranja: arriba está la sección del diagrama
     y abajo .mdm-band, las tres del mismo naranja. Por eso aquí no hay radio
     —lo ponen la primera y la última— pero sí el mismo ancho, que ahora sale
     de .section-shell (styles.css) para que las tres coincidan al pixel y no
     aparezca ningún escalón entre ellas. */
  width:var(--section-width);
  margin-inline:auto;
  margin-block:0;
  border-radius:0;
  padding:clamp(56px,5vw,84px) 0 clamp(56px,5.4vw,88px);
  overflow:hidden;
  background:var(--eco-bg);
  isolation:isolate;
}

/* ==========================================================================
   LA SECCIÓN DEL DIAGRAMA ("Una plataforma. Más control.") comparte franja.

   Vive en mdm-overview.css; aquí solo se le cambia la superficie para que se
   funda con esta. El diagrama es un PNG con fondo transparente, así que no
   arrastra ninguna caja blanca al cambiar de color.

   Es el PRIMER tramo del bloque, así que es la que redondea por arriba: lleva
   .section-shell--top en el marcado (product-pages.js) y con eso recibe el
   mismo remate que .mdm-mgmt —esquina normal a la izquierda, curva grande a
   la derecha—. Antes entraba con una línea recta de lado a lado.
   ========================================================================== */
.mdm-overview-section{
  background:var(--eco-bg);
  padding-bottom:0;
}

/* MISMA TIPOGRAFIA QUE SU VECINO.

   "Una plataforma. Mas control." heredaba de .product-heading h2
   (product-pages.css): font-weight:450 y hasta 68px. Todos los demas
   titulares de este bloque naranja van en negrita —.eco__title 750,
   .mdm-band__title 760, .mdm-crm__phrase 800— asi que este se leia de otra
   fuente: fino y enorme entre titulares gruesos.

   Se iguala al de su hermano inmediato, .eco__title ("Todo conectado. Una
   sola operacion."): misma escala, mismo peso, mismo tracking y mismo
   interlineado. No es una tipografia nueva; es la que ya usa el bloque. */
.mdm-overview-section .product-heading h2{
  color:var(--eco-ink);
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.06;
  font-weight:750;
  letter-spacing:-.035em;
}

.mdm-overview-section .product-heading p{
  color:var(--eco-muted);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.55;
}

.eco *{box-sizing:border-box}

/* ------------------------------------------------------------------ INTRO */
.eco__intro{
  width:min(760px,88%);
  margin:0 auto clamp(30px,3.4vw,44px);
  text-align:center;
}

.eco__eyebrow{
  display:inline-block;
  margin-bottom:16px;
  color:rgba(42,22,11,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.eco__title{
  margin:0;
  color:var(--eco-ink);
  font-size:clamp(30px,3.6vw,46px);
  line-height:1.06;
  font-weight:750;
  letter-spacing:-.035em;
}

.eco__lead{
  max-width:54ch;
  margin:18px auto 0;
  color:var(--eco-muted);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.55;
}

/* ------------------------------------------------------------------ ESCENA
   El aspect-ratio fija la caja ANTES de que carguen las capturas: sin él las
   llamadas, que van en %, saltarían de sitio al terminar la carga. */
.eco__stage{
  position:relative;
  width:min(94%,1360px);
  margin-inline:auto;
  aspect-ratio:1360 / 720;
}

.eco__devices{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.eco__device{
  margin:0;
  flex:0 0 auto;
  filter:drop-shadow(0 34px 46px rgba(112,43,0,.30));
}

.eco__device img{
  display:block;
  width:100%;
  height:auto;
}

/* La escalera: la tablet manda y los teléfonos se le montan por delante. */
.eco__device--cobrar{width:19%;   margin-right:-2.8%; transform:translateY(4%)  rotate(-3deg);  z-index:2}
.eco__device--panel {width:29%;                       transform:translateY(-2%) rotate(1deg);   z-index:1}
.eco__device--mano  {width:17.5%; margin-left:-2.6%;  transform:translateY(7%)  rotate(3.5deg); z-index:2}

/* ------------------------------------------------------------------ HILOS */
.eco__threads{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:3;
}

.eco__threads path{
  fill:none;
  stroke:var(--eco-hair);
  stroke-width:1;
  stroke-dasharray:3 3;
  /* El viewBox va deformado a propósito; esto evita que el trazo se estire
     con él y quede grueso en horizontal y fino en vertical. */
  vector-effect:non-scaling-stroke;
}

/* --------------------------------------------------------------- LLAMADAS */
.eco__notes{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
  z-index:4;
}

.eco__note{
  position:absolute;
  left:var(--tx);
  top:var(--ty);
  width:16.5%;
}

/* Los puntos viven en su propia capa, que cubre la escena entera: así --x/--y
   son un % de la ESCENA. Dentro del <li> no funcionaría, porque el <li> ya
   está desplazado a --tx/--ty y un % suyo mide otra cosa. */
.eco__pins{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.eco__pin{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:9px;
  height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--eco-ink);
  box-shadow:0 0 0 4px rgba(255,255,255,.34);
}

.eco__note strong{
  display:block;
  margin-bottom:5px;
  color:var(--eco-ink);
  font-size:clamp(13px,1.05vw,15px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
}

.eco__note span{
  color:var(--eco-muted);
  font-size:clamp(11.5px,.92vw,13px);
  line-height:1.42;
}

.eco__note--r{text-align:left}

/* -------------------------------------------------------------- ANIMACIÓN
   Igual que en la versión anterior de esta sección: el estado oculto SOLO
   existe si el JS ha marcado la sección. Si el script no llega a correr, la
   escena se ve igual. */
.eco--anim .eco__device,
.eco--anim .eco__note{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}

.eco--anim .eco__device--cobrar{--d:60ms}
.eco--anim .eco__device--panel{--d:0ms}
.eco--anim .eco__device--mano{--d:120ms}
.eco--anim .eco__note:nth-child(1){--d:260ms}
.eco--anim .eco__note:nth-child(2){--d:330ms}
.eco--anim .eco__note:nth-child(3){--d:400ms}
.eco--anim .eco__note:nth-child(4){--d:470ms}
.eco--anim .eco__note:nth-child(5){--d:540ms}
.eco--anim .eco__note:nth-child(6){--d:610ms}

.eco--anim.is-in .eco__note{opacity:1;transform:translateY(0)}
.eco--anim.is-in .eco__device--cobrar{opacity:1;transform:translateY(4%)  rotate(-3deg)}
.eco--anim.is-in .eco__device--panel {opacity:1;transform:translateY(-2%) rotate(1deg)}
.eco--anim.is-in .eco__device--mano  {opacity:1;transform:translateY(7%)  rotate(3.5deg)}

.eco--anim .eco__threads{opacity:0;transition:opacity .8s ease .5s}
.eco--anim.is-in .eco__threads{opacity:1}

/* ----------------------------------------------------------------- TABLET
   Entre 900 y 1200 las llamadas se estrechan mucho y el texto se rompe en
   demasiadas líneas. Se ensanchan y la escena se hace más alta. */
@media (max-width:1200px) and (min-width:901px){
  .eco__stage{aspect-ratio:1180 / 760}
  .eco__note{width:18%}
  .eco__device--cobrar{width:21%}
  .eco__device--panel {width:32%}
  .eco__device--mano  {width:19.5%}
}

/* ------------------------------------------------------------------ MÓVIL
   Las llamadas ancladas no funcionan en un teléfono: el punto y el texto se
   pisan. Se desmonta la escena: primero las capturas, en un carril que se
   arrastra con el dedo (mismo patrón que ya usaba esta sección), y debajo
   las seis notas como lista de dos columnas.
   ========================================================================== */
@media (max-width:900px){
  .eco{padding:clamp(44px,8vw,62px) 0 clamp(48px,9vw,64px)}

  .eco__intro{
    width:auto;
    margin-inline:0;
    padding-inline:22px;
    text-align:left;
  }
  .eco__lead{margin-inline:0}

  .eco__stage{
    width:100%;
    aspect-ratio:auto;
  }

  .eco__devices{
    position:relative;
    inset:auto;
    align-items:flex-end;
    justify-content:flex-start;
    gap:12px;
    padding-inline:calc((100% - 62vw) / 2);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .eco__devices::-webkit-scrollbar{display:none}

  /* Sin escalera ni solapes: de uno en uno, el desorden solo estorba. */
  .eco__device{
    width:62vw;
    margin:0;
    scroll-snap-align:center;
    filter:drop-shadow(0 18px 26px rgba(112,43,0,.26));
  }
  .eco__device--cobrar,
  .eco__device--panel,
  .eco__device--mano{transform:none}
  /* La tablet abre el carril: es la pantalla que mejor se lee. */
  .eco__device--panel{order:1;width:72vw}
  .eco__device--cobrar{order:2}
  .eco__device--mano{order:3}

  /* Los hilos no conectan nada con una sola captura a la vista. */
  .eco__threads{display:none}

  .eco__notes{
    position:relative;
    inset:auto;
    margin-top:26px;
    padding-inline:22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 16px;
  }

  .eco__note{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    padding-left:16px;
  }

  /* En móvil los puntos anclados no señalan nada: se apagan y cada nota
     lleva el suyo propio, pegado al texto. */
  .eco__pins{display:none}

  .eco__note::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--eco-ink);
    box-shadow:0 0 0 3px rgba(255,255,255,.32);
  }

  .eco__note strong{font-size:13.5px}
  .eco__note span{font-size:12px}

  .eco--anim .eco__note{--d:0ms!important}
}

@media (max-width:420px){
  .eco__notes{grid-template-columns:1fr;gap:16px}
}

/* Sin entrada animada para quien lo pide. */
@media (prefers-reduced-motion:reduce){
  .eco__device,
  .eco__note,
  .eco--anim .eco__device,
  .eco--anim .eco__note,
  .eco--anim .eco__threads{
    opacity:1;
    transition:none;
  }
  .eco--anim .eco__note{transform:none}
}

/* ==========================================================================
   EL DIAGRAMA EN TELÉFONO — legible, arrastrando.

   Medido a 390px: el esquema quedaba en 378x213. Son trece nodos con texto
   dentro; a ese tamaño las etiquetas caen por debajo de 5px y no se lee nada.

   No se encoge el diagrama: se le da su tamaño real dentro de un carril que
   se arrastra con el dedo, el mismo patrón que ya usan las capturas de esta
   franja y el carril de módulos. 720px de ancho deja las etiquetas sobre los
   11px, que sí se leen.
   ========================================================================== */
@media (max-width:900px){
  body:has(> main[data-route="mdm"]) .mdm-overview-visual{
    width:100%;
    margin-left:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* El centro del diagrama es "Control centralizado": es lo que tiene que
       verse primero, no el borde izquierdo. Con flex + safe center el carril
       arranca centrado y se puede arrastrar hacia los dos lados; "safe" evita
       que en un contenedor más estrecho se recorte por la izquierda. */
    display:flex;
    justify-content:safe center;
  }

  body:has(> main[data-route="mdm"]) .mdm-overview-visual::-webkit-scrollbar{
    display:none;
  }

  body:has(> main[data-route="mdm"]) .mdm-overview-visual img{
    width:1000px;
    flex:0 0 auto;
    max-width:none;
  }
}