/* ============================================================
   Zemsania Landings Ops — Servicios Gestionados · Ops
   Medidas 1:1 del diseño de Figma (marco 1440 · contenido 1200).
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root{
  --zop-ink:#141414;
  --zop-grey:#5E5E5E;
  --zop-grey-2:#8A847C;
  --zop-sep:#B8B1A7;
  --zop-line:#E8E3DC;
  --zop-cream:#FAF8F5;
  --zop-tint:#FDEEE8;
  --zop-peach-line:#F7C3AD;
  --zop-orange:#F15C2B;
  --zop-orange-2:#F18822;
  --zop-grad:linear-gradient(90deg,#F15C2B 0%,#F18822 100%);
  --zop-font:'Inter',sans-serif;
  --zop-px:120px;
  --zop-header-h:96px; /* altura de la cabecera fija del tema (la ajusta el JS) */
}

/* ── Reset acotado a la landing ──────────────────────────────── */
.zop-main,.zop-main *,.zop-main *::before,.zop-main *::after,
.zop-modal,.zop-modal *{box-sizing:border-box}
body.zop-landing .zop-main{
  font-family:var(--zop-font);
  font-size:16px;
  line-height:19px;
  color:var(--zop-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.zop-main img{max-width:100%;height:auto;display:block}
.zop-main :where(ul,ol,dl,dd){list-style:none;margin:0;padding:0}
/* Especificidad baja (0,1,0) a propósito: anula los márgenes del tema pero deja
   mandar a las clases de cada componente, que van después. */
.zop-main :where(h1,h2,h3,h4,p,li,dt,dd){margin:0;padding:0;font-family:var(--zop-font);letter-spacing:normal;text-transform:none;font-style:normal}
body.zop-landing .zop-main a{color:inherit;text-decoration:none}
.zop-main :where(button){font-family:var(--zop-font);background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;text-align:left;line-height:inherit;font-size:inherit}
body.zop-landing .zop-main strong{font-weight:600}
body.zop-landing .zop-main [hidden]{display:none !important}
.zop-main .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Títulos: el tema los pinta con degradado; en la landing van en #141414
   (y en blanco sobre la banda naranja del formulario). */
body.zop-landing .zop-main h1,body.zop-landing .zop-main h2,body.zop-landing .zop-main h3,body.zop-landing .zop-main h4{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--zop-ink);
}
body.zop-landing .zop-main h2.zop-form__title{color:#fff !important;-webkit-text-fill-color:#fff !important}

/* ── Contenedor y ritmo ──────────────────────────────────────── */
.zop-container{width:100%;max-width:calc(var(--zop-w,1200px) + var(--zop-px) * 2);margin:0 auto;padding:0 var(--zop-px)}
.zop-landing-wrap > * + *{margin-top:8px}           /* 8 px entre secciones, como en Figma */
.zop-main--end{margin-top:8px}
.zop-sec{position:relative;background:#fff}
.zop-sec > .zop-container{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--zop-gap,40px)}
.zop-sec.zop-sec--cream{background:var(--zop-cream)}

/* ── Cabecera de sección ─────────────────────────────────────── */
.zop-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
body.zop-landing .zop-main .zop-eb{font-weight:600;color:var(--zop-orange)}
body.zop-landing .zop-main .zop-eb--o13{font-size:13px;line-height:16px}
body.zop-landing .zop-main .zop-eb--o13b{font-size:13px;line-height:16px;letter-spacing:.156px}
body.zop-landing .zop-main .zop-eb--o14{font-size:14px;line-height:17px}
body.zop-landing .zop-main .zop-eb--o14w{font-size:14px;line-height:17px;letter-spacing:.84px}
body.zop-landing .zop-main .zop-eb--grad{
  font-size:14px;line-height:17px;
  background:var(--zop-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
body.zop-landing .zop-main .zop-h2{font-size:34px;line-height:41px;color:var(--zop-ink)}
body.zop-landing .zop-main .zop-h2--semi{font-weight:600}
body.zop-landing .zop-main .zop-h2--bold{font-weight:700}
body.zop-landing .zop-main .zop-sub{color:var(--zop-grey);font-weight:400}
body.zop-landing .zop-main .zop-sub--a{font-size:18px;line-height:22px;max-width:800px}
body.zop-landing .zop-main .zop-sub--b{font-size:18px;line-height:27px}
body.zop-landing .zop-main .zop-sub--c{font-size:17px;line-height:21px}
body.zop-landing .zop-main .zop-sub--d{font-size:17px;line-height:26px;max-width:820px}
body.zop-landing .zop-main .zop-sub--m{font-size:18px;line-height:22px;max-width:820px}
/* Cabecera de los KPIs: antetítulo con aire, título de 30 px y 10 px de separación */
.zop-head--k{gap:10px}
body.zop-landing .zop-main .zop-eb--k{font-size:14px;line-height:17px;letter-spacing:.5px}
body.zop-landing .zop-main .zop-h2--k{font-size:30px;font-weight:600;line-height:36px}
/* Antetítulos en degradado (todas las cabeceras de Ops) */
body.zop-landing .zop-main .zop-eb--o14,body.zop-landing .zop-main .zop-eb--k{
  background:var(--zop-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;align-self:flex-start;
}
body.zop-landing .zop-main .zop-inline-link{color:var(--zop-orange);font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ── Botones ─────────────────────────────────────────────────── */
body.zop-landing .zop-main .zop-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  font-family:var(--zop-font);font-size:16px;font-weight:600;line-height:16px;
  border-radius:100px;padding:16px 30px;border:0;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
body.zop-landing .zop-main .zop-btn--primary{background:var(--zop-orange);color:#fff}
body.zop-landing .zop-main .zop-btn--primary:hover{background:#D94E1F}
body.zop-landing .zop-main .zop-btn--light{background:#fff;color:var(--zop-ink);border:1.5px solid var(--zop-line)}
body.zop-landing .zop-main .zop-btn--light:hover{border-color:var(--zop-orange)}
body.zop-landing .zop-main .zop-btn--ghost{background:transparent;color:var(--zop-ink);border:1.5px solid var(--zop-ink);font-size:15px;line-height:15px;padding:14px 26px}
body.zop-landing .zop-main .zop-btn--ghost:hover{border-color:var(--zop-orange);color:var(--zop-orange)}
body.zop-landing .zop-main .zop-btn--pill{background:#fff;color:var(--zop-ink);border:1.5px solid var(--zop-line);font-size:15px;line-height:18px;padding:12px 22px}
body.zop-landing .zop-main .zop-btn--pill:hover{border-color:var(--zop-orange)}
body.zop-landing .zop-main .zop-btn--md{font-size:15px;line-height:18px;padding:14px 26px}
body.zop-landing .zop-main .zop-btn--sm{font-size:15px;line-height:18px;padding:13px 24px}

/* Desplegar / plegar */
body.zop-landing .zop-main .zop-toggle{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;line-height:17px;color:var(--zop-orange);align-self:flex-start}
.zop-main .zop-ui-icon--down{transition:transform .2s}
.zop-main [aria-expanded="true"] .zop-ui-icon--down{transform:rotate(180deg)}
.zop-main .zop-toggle:focus-visible,.zop-main .zop-acc__trigger:focus-visible,.zop-main .zop-btn:focus-visible{outline:2px solid var(--zop-orange);outline-offset:3px}

/* Piezas pequeñas */
.zop-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--zop-orange)}
.zop-dot--8{width:8px;height:8px}
.zop-dot--12{width:12px;height:12px}
.zop-tile{display:flex;align-items:center;justify-content:center;flex:none}
.zop-tile--44{width:44px;height:44px;border-radius:12px;background:var(--zop-tint)}
.zop-tile--46{width:46px;height:46px;border-radius:12px;background:var(--zop-tint)}
.zop-tile--52{width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--zop-line)}
.zop-main .zop-icon{display:block;flex:none}
body.zop-landing .zop-main .zop-pill-tag{display:inline-flex;padding:5px 12px;border-radius:999px;background:var(--zop-tint);font-size:11px;font-weight:600;line-height:13px;letter-spacing:.66px;color:var(--zop-orange)}
.zop-note{display:flex;gap:12px}
.zop-note__bar{flex:none;width:3px;border-radius:2px;background:var(--zop-orange)}
body.zop-landing .zop-main .zop-note p{font-size:16px;line-height:24px;color:var(--zop-grey)}
body.zop-landing .zop-main .zop-note--ink p{font-weight:500;color:var(--zop-ink)}
.zop-note--grow{flex:1 1 0;min-width:0}

body.zop-no-scroll{overflow:hidden}

/* ── Figuras decorativas ─────────────────────────────────────── */
.zop-landing-wrap,.zop-casos-wrap{position:relative;overflow-x:clip}
@supports not (overflow-x:clip){.zop-landing-wrap{overflow:hidden}}
.zop-casos-wrap{position:relative}
.zop-casos-wrap > section{position:relative;z-index:2}
.zop-deco-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.zop-deco-layer--clip{overflow:hidden}
.zop-deco-layer--under{z-index:0}
.zop-deco-frame{position:absolute;top:0;left:50%;width:1440px;height:100%;margin-left:-720px}
.zop-main .zop-deco,.zop-casos-wrap .zop-deco{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}

/* ============================================================
   HERO
   ============================================================ */
.zop-hero{padding:calc(var(--zop-header-h) + 44px) 0 72px;background:#fff}
.zop-hero > .zop-container{gap:48px}
.zop-subnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:17px}
body.zop-landing .zop-main .zop-subnav__label{
  font-size:13px;font-weight:600;line-height:16px;letter-spacing:.4px;
  background:var(--zop-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.zop-subnav__sep{font-size:14px;font-weight:500;line-height:17px;color:var(--zop-sep)}
.zop-subnav__dot{font-size:13px;font-weight:500;line-height:16px;color:var(--zop-grey)}
body.zop-landing .zop-main .zop-subnav__link{font-size:13px;font-weight:500;line-height:16px;color:var(--zop-grey);transition:color .2s}
body.zop-landing .zop-main .zop-subnav__link:hover{color:var(--zop-ink)}
body.zop-landing .zop-main .zop-subnav__link.is-active{
  font-weight:600;letter-spacing:.2px;
  background:var(--zop-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

.zop-hero__inner{display:flex;align-items:flex-start;gap:64px}
.zop-hero__content{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
body.zop-landing .zop-main .zop-hero__h1{font-size:50px;font-weight:700;line-height:56px;color:var(--zop-ink);align-self:stretch}
.zop-hero__sp8{display:block;height:8px}
.zop-hero__sp14{display:block;height:14px}
body.zop-landing .zop-main .zop-hero__lead{font-size:19px;line-height:30px;color:var(--zop-ink)}
body.zop-landing .zop-main .zop-hero__apoyo{font-size:17px;line-height:26.86px;color:var(--zop-grey)}
.zop-hero__chips{display:flex;flex-wrap:wrap;gap:8px}
body.zop-landing .zop-main .zop-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 12px;border-radius:100px;
  background:var(--zop-cream);border:1px solid var(--zop-line);font-size:13px;font-weight:500;line-height:16px;color:var(--zop-ink);
}
.zop-chip svg{flex:none;display:block}
.zop-hero__ctas{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}

.zop-hero__media{flex:none}
.zop-hero__media--foto{width:380px;height:480px;border-radius:20px;overflow:hidden;background:var(--zop-cream)}
.zop-main .zop-hero__media--foto img{width:100%;height:100%;object-fit:cover}


/* ============================================================
   LÍNEA DEGRADADA bajo el hero (600 × 2 px, a un lado)
   ============================================================ */
.zop-gline{display:flex;height:2px}
.zop-gline span{display:block;width:600px;max-width:42%;height:2px;background:linear-gradient(90deg,#F18822,#F15C2B)}
.zop-gline--right{justify-content:flex-end}

/* ============================================================
   SECCIONES COMUNES · ritmo vertical de Figma
   ============================================================ */
.zop-areas,.zop-capas,.zop-modelo,.zop-piramide,.zop-tecnologias,.zop-respaldo,.zop-sellos,.zop-cobertura{padding:56px 0}
.zop-areas > .zop-container,.zop-capas > .zop-container{--zop-gap:36px}
.zop-cobertura > .zop-container{--zop-gap:28px}
.zop-sec.zop-kpis{padding:48px 0}
.zop-sec.zop-kpis > .zop-container{--zop-gap:28px}
body.zop-landing .zop-main .zop-foot{font-size:15px;font-weight:500;line-height:18px;color:var(--zop-grey)}

/* Rejillas por número de elementos */
.zop-cols-1{grid-template-columns:minmax(0,1fr)}
.zop-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zop-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.zop-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.zop-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.zop-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ── Solución: tarjetas ──────────────────────────────────────── */
ul.zop-area-grid{display:grid;gap:20px;padding:0}
.zop-area{display:flex;flex-direction:column;gap:12px;padding:28px 24px;background:var(--zop-cream);border:1px solid var(--zop-line);border-radius:18px}
.zop-area__icon{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:14px;background:#fff}
body.zop-landing .zop-main .zop-area__title{font-size:19px;font-weight:600;line-height:23px}
body.zop-landing .zop-main .zop-area__text{font-size:14px;line-height:20px;color:var(--zop-grey)}
/* 3 columnas (Sistemas): tarjeta más amplia */
ul.zop-area-grid.zop-cols-3 .zop-area{gap:14px;padding:30px 28px}
body.zop-landing .zop-main ul.zop-area-grid.zop-cols-3 .zop-area__title{font-size:20px;line-height:24px}
body.zop-landing .zop-main ul.zop-area-grid.zop-cols-3 .zop-area__text{font-size:15px;line-height:21px}

/* ── Solución: capas 01 · 02 · 03 ────────────────────────────── */
ol.zop-capa-list{display:flex;flex-direction:column;gap:14px;padding:0}
.zop-capa{display:flex;align-items:center;gap:20px;padding:24px 28px 24px 24px;background:var(--zop-cream);border:1px solid var(--zop-line);border-radius:16px}
.zop-capa__bar{flex:none;width:5px;height:52px;border-radius:3px;background:var(--zop-grad)}
.zop-capa__num{display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--zop-line)}
.zop-capa__num span{font-size:20px;font-weight:600;line-height:24px;background:var(--zop-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.zop-capa__body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
body.zop-landing .zop-main .zop-capa__title{font-size:20px;font-weight:600;line-height:24px}
body.zop-landing .zop-main .zop-capa__text{font-size:15px;line-height:21px;color:var(--zop-grey)}

/* ── KPIs ────────────────────────────────────────────────────── */
ul.zop-kpi-grid{display:grid;gap:20px;padding:0}
.zop-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 26px;background:var(--zop-cream);border:1px solid var(--zop-line);border-radius:18px}
.zop-kpi__val{align-self:stretch;font-size:40px;font-weight:700;line-height:48px;background:var(--zop-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;white-space:nowrap}
.zop-kpi__val{width:fit-content;align-self:flex-start}
.zop-kpi__bar{display:block;width:40px;height:3px;border-radius:2px;background:var(--zop-grad)}
body.zop-landing .zop-main .zop-kpi__text{font-size:15px;line-height:18px;color:var(--zop-grey)}

/* ── Cobertura continua (follow-the-sun) ─────────────────────── */
ol.zop-sun{display:flex;padding:0;border:1px solid var(--zop-line);border-radius:14px;overflow:hidden}
.zop-sun__slot{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 8px;text-align:center}
.zop-sun__name{font-size:15px;font-weight:600;line-height:18px;color:#fff}
.zop-sun__hours{font-size:12px;font-weight:500;line-height:15px;color:#fff}

/* ── Cómo lo prestamos ───────────────────────────────────────── */
.zop-mods{display:grid;gap:24px}
.zop-mod{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:30px;background:var(--zop-cream);border:1px solid var(--zop-line);border-radius:20px}
.zop-mod.is-featured{border:1.5px solid var(--zop-orange);padding:30px}
.zop-mod__tag{display:inline-flex;padding:6px 14px;border-radius:100px;background:#fff;border:1px solid var(--zop-line);font-size:12px;font-weight:600;line-height:15px;color:var(--zop-orange)}
.zop-mod.is-featured .zop-mod__tag{background:var(--zop-grad);border:0;color:#fff}
body.zop-landing .zop-main .zop-mod__title{font-size:22px;font-weight:600;line-height:27px}
ul.zop-dots{display:flex;flex-direction:column;gap:14px;align-self:stretch;padding:0}
.zop-dots li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:21px;color:var(--zop-ink)}
.zop-dots li > span:last-child{flex:1 1 0;min-width:0}
.zop-dots__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--zop-grad)}
body.zop-landing .zop-main p.zop-foot--intro{margin:0}
ol.zop-levels{display:grid;gap:16px;padding:0}
.zop-level{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px;background:#fff;border:1px solid var(--zop-line);border-radius:18px}
.zop-level__bars{display:flex;gap:5px}
.zop-level__bars span{display:block;width:26px;height:6px;border-radius:3px;background:#E0DCD6}
.zop-level__bars span.is-on{background:var(--zop-grad)}
body.zop-landing .zop-main .zop-level__title{font-size:20px;font-weight:600;line-height:24px}
body.zop-landing .zop-main .zop-level__text{font-size:15px;line-height:21px;color:var(--zop-grey)}

/* ── Valor diferencial: pirámide (QA) ────────────────────────── */
.zop-pyr{position:relative;display:flex;align-items:center;gap:48px}
.zop-pyr__svg{display:block;flex:none;width:520px;height:auto;overflow:visible}
.zop-pyr__label{font-family:var(--zop-font);font-size:15px;font-weight:600;fill:#1C1C1C}
.zop-pyr__label.is-light{fill:#fff}
body.zop-landing .zop-main .zop-pyr__axis{position:absolute;left:26px;font-size:11px;font-weight:600;line-height:13px;letter-spacing:.88px;color:#737373}
body.zop-landing .zop-main .zop-pyr__axis--top{top:0}
body.zop-landing .zop-main .zop-pyr__axis--bottom{top:286px;color:var(--zop-orange)}
ul.zop-pts{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px;padding:0}
.zop-pt{display:flex;align-items:flex-start;gap:12px}
.zop-pt__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--zop-grad)}
.zop-pt__body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
body.zop-landing .zop-main .zop-pt__title{font-size:18px;font-weight:600;line-height:22px;color:var(--zop-ink)}
body.zop-landing .zop-main .zop-pt__text{font-size:15px;line-height:21px;color:var(--zop-grey)}

/* ── Valor diferencial: tecnologías (Data) ───────────────────── */
ul.zop-logos{display:flex;flex-wrap:wrap;justify-content:center;row-gap:16px;padding:0}
.zop-logo{display:flex;align-items:center;justify-content:center;flex:0 0 200px;height:64px}
.zop-main .zop-logo img{display:block;max-width:none;object-fit:contain;opacity:.55}
.zop-logo--more{font-size:16px;font-weight:600;line-height:19px;color:#9A9A9A}

/* ── Valor diferencial: sellos (Seguridad) ───────────────────── */
ul.zop-seals{display:flex;flex-wrap:wrap;gap:14px;padding:0}
.zop-seal{display:inline-flex;align-items:center;gap:10px;padding:14px 22px 14px 20px;background:var(--zop-cream);border:1px solid var(--zop-line);border-radius:12px;font-size:17px;font-weight:600;line-height:21px;color:var(--zop-ink)}
.zop-seal__icon{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:#fff}

/* ── Valor diferencial: técnico + respaldo (Sistemas) ────────── */
.zop-mod--plain{padding:32px 30px}

/* ============================================================
   EL RETO (Seguridad) · acordeón
   ============================================================ */
.zop-acc{background:#fff;border:1px solid var(--zop-line);border-radius:18px;overflow:hidden}
.zop-acc__item{border-bottom:1px solid var(--zop-line)}
.zop-acc__item:last-child{border-bottom:0}
body.zop-landing .zop-main .zop-acc__h{font-size:inherit;font-weight:inherit;line-height:inherit}
body.zop-landing .zop-main .zop-acc__trigger{display:flex;align-items:center;gap:16px;width:100%;padding:24px 28px}
body.zop-landing .zop-main .zop-acc__q{flex:1 1 0;min-width:0;font-size:18px;font-weight:600;line-height:22px;color:var(--zop-ink)}
.zop-acc__toggle{display:flex;align-items:center;justify-content:center;flex:none;width:35px;height:36px;border-radius:14px;background:#fff;border:1px solid var(--zop-line);font-size:18px;font-weight:700;line-height:22px;color:var(--zop-ink)}
.zop-acc__toggle::before{content:"+"}
.zop-acc__item.is-open .zop-acc__toggle{width:29px;height:34px;border:0;background:var(--zop-orange);color:#fff}
.zop-acc__item.is-open .zop-acc__toggle::before{content:"–"}
.zop-acc__panel{display:flex;gap:12px;margin-top:-10px;padding:0 76px 24px 28px}
.zop-acc__bar{flex:none;width:3px;border-radius:2px;background:var(--zop-orange)}
body.zop-landing .zop-main .zop-acc__panel p{font-size:15px;line-height:22px;color:var(--zop-grey)}

.zop-sec.zop-reto{padding:64px 0}
.zop-reto__wrap{display:flex;align-items:flex-start;gap:64px}
.zop-reto__side{flex:0 0 420px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.zop-main .zop-reto__img{width:420px;height:190px;object-fit:cover;border-radius:20px}
body.zop-landing .zop-main .zop-reto__title{font-size:34px;font-weight:600;line-height:40.8px}
body.zop-landing .zop-main .zop-reto__text{font-size:17px;line-height:26.35px;color:var(--zop-grey)}
.zop-acc--reto{flex:1 1 0;min-width:0}
body.zop-landing .zop-main .zop-acc--reto .zop-acc__q{line-height:23.4px}
.zop-acc--reto .zop-acc__toggle,.zop-acc--reto .zop-acc__item.is-open .zop-acc__toggle{width:32px;height:32px;border:0;border-radius:100px;background:var(--zop-cream)}
.zop-acc--reto .zop-acc__item.is-open .zop-acc__toggle{background:var(--zop-orange)}
.zop-acc--reto .zop-acc__panel > div{display:flex;flex-direction:column;gap:4px}
body.zop-landing .zop-main .zop-acc__panel p.zop-reto__label,body.zop-landing .zop-main .zop-reto__label{font-size:12px;font-weight:600;line-height:15px;letter-spacing:.48px;color:var(--zop-orange)}
body.zop-landing .zop-main .zop-acc--reto .zop-acc__panel p.zop-reto__answer{font-size:16px;line-height:24px;color:var(--zop-ink)}


/* ============================================================
   FORMULARIO — banda naranja · 2 columnas · gap 64
   ============================================================ */
.zop-form{padding:64px 0;background:var(--zop-grad);color:#fff;overflow:hidden}
.zop-form > .zop-container{display:block}
.zop-form__inner{display:flex;gap:64px;align-items:stretch}
.zop-form__left{flex:0 0 536px;min-width:0;display:flex;flex-direction:column;gap:16px}
.zop-form__media{width:100%;height:287px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.14)}
.zop-main .zop-form__media img{width:100%;height:287px;object-fit:cover}
body.zop-landing .zop-main .zop-form__title{font-size:36px;font-weight:600;line-height:41.76px}
body.zop-landing .zop-main .zop-form__text{font-size:18px;line-height:27px;color:#fff;opacity:.92}
.zop-form__right{flex:1 1 0;min-width:0;display:flex}
.zop-form__embed{flex:1;display:flex;flex-direction:column;gap:18px;min-height:472px;padding:32px;background:#fff;border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.14);color:var(--zop-ink)}
.zop-form__embed .hs-form-frame{width:100%}
.zop-form__placeholder{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 16px;text-align:center;font-size:14px;color:var(--zop-grey)}
body.zop-landing .zop-main .zop-form__legal{margin-top:auto;font-size:12px;line-height:16.8px;color:var(--zop-grey)}

/* ── Casos de éxito del tema: aire arriba y abajo ── */
.zop-casos-wrap,#main.zop-casos-wrap{padding-top:72px;padding-bottom:72px}

/* ============================================================
   POPUP DE VÍDEO
   ============================================================ */
.zop-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.zop-modal[hidden]{display:none}
.zop-modal__backdrop{position:absolute;inset:0;background:rgba(20,20,20,.72);cursor:pointer}
.zop-modal__box{position:relative;width:880px;max-width:100%}
.zop-modal__frame{position:relative;width:100%;aspect-ratio:880 / 530;border-radius:16px;overflow:hidden;background:#000}
.zop-modal__frame iframe,.zop-modal__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.zop-modal__close{position:absolute;right:0;top:-44px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--zop-ink);font:600 16px/36px var(--zop-font);cursor:pointer}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  :root{--zop-px:56px}
  body.zop-landing .zop-main .zop-hero__h1{font-size:44px;line-height:50px}
  .zop-kpi__val{font-size:36px;line-height:44px}
  .zop-form__left{flex:1 1 0}
  .zop-logo{flex-basis:16.66%}
}

@media (max-width:1024px){
  :root{--zop-px:40px}
  .zop-deco-layer{display:none}
  .zop-hero__inner{flex-direction:column;align-items:flex-start;gap:40px}
  .zop-hero__content{flex:none;width:100%}
  .zop-hero__media{align-self:center}
  body.zop-landing .zop-main .zop-hero__h1{font-size:40px;line-height:46px}
  body.zop-landing .zop-main .zop-hero__lead{font-size:17px;line-height:27px}
  body.zop-landing .zop-main .zop-hero__apoyo{font-size:16px;line-height:25px}
  body.zop-landing .zop-main .zop-h2,body.zop-landing .zop-main .zop-reto__title{font-size:28px;line-height:34px}
  body.zop-landing .zop-main .zop-h2--k{font-size:26px;line-height:32px}
  .zop-cols-4,.zop-cols-5,.zop-cols-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zop-pyr{flex-direction:column;align-items:flex-start;gap:36px}
  .zop-pyr__svg{width:100%;max-width:520px}
  .zop-logo{flex-basis:33.33%}
  .zop-reto__wrap{flex-direction:column;gap:40px}
  .zop-reto__side{flex:none;width:100%}
  .zop-acc--reto,.zop-form__left,.zop-form__right{flex:none;width:100%}
  .zop-main .zop-reto__img{width:100%;height:auto;aspect-ratio:420/190}
  .zop-form__inner{flex-direction:column;gap:40px}
}

@media (max-width:760px){
  .zop-cols-2,.zop-cols-3,.zop-cols-4,.zop-cols-5,.zop-cols-6,
  ul.zop-area-grid.zop-cols-3,ol.zop-levels.zop-cols-3{grid-template-columns:minmax(0,1fr)}
  ul.zop-kpi-grid.zop-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zop-mods{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  :root{--zop-px:20px}
  .zop-hero{padding-bottom:56px}
  body.zop-landing .zop-main .zop-hero__h1{font-size:34px;line-height:40px}
  body.zop-landing .zop-main .zop-hero__h1 br{display:none}
  body.zop-landing .zop-main .zop-h2,body.zop-landing .zop-main .zop-reto__title{font-size:26px;line-height:32px}
  body.zop-landing .zop-main .zop-h2--k{font-size:24px;line-height:30px}
  body.zop-landing .zop-main .zop-sub--a,body.zop-landing .zop-main .zop-sub--m{font-size:16px;line-height:24px}
  .zop-areas,.zop-capas,.zop-modelo,.zop-piramide,.zop-tecnologias,.zop-respaldo,.zop-sellos,.zop-cobertura,.zop-sec.zop-reto,.zop-form{padding:48px 0}
  .zop-sec.zop-kpis{padding:44px 0}
  .zop-hero__media--foto{width:100%;height:auto;aspect-ratio:380 / 480;max-width:380px}
  .zop-hero__ctas,.zop-hero__ctas .zop-btn{width:100%}
  ul.zop-kpi-grid.zop-cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .zop-kpi{padding:20px 18px}
  .zop-kpi__val{font-size:28px;line-height:34px;white-space:normal}
  body.zop-landing .zop-main .zop-kpi__text{font-size:14px;line-height:18px}
  .zop-capa{align-items:flex-start;padding:20px;gap:14px}
  .zop-capa__bar{display:none}
  .zop-capa__num{width:44px;height:44px;border-radius:12px}
  ol.zop-sun{flex-direction:column}
  .zop-mod,.zop-mod.is-featured,.zop-mod--plain{padding:24px 22px}
  .zop-level{padding:22px}
  .zop-logo{flex-basis:50%;height:56px}
  .zop-seal{padding:10px 16px 10px 12px;font-size:15px;line-height:19px}
  ul.zop-seals{gap:10px}
  body.zop-landing .zop-main .zop-pyr__axis{display:none}
  .zop-pyr__label{font-size:19px}
  body.zop-landing .zop-main .zop-acc__trigger{padding:20px}
  .zop-acc__panel{padding:0 20px 20px}
  body.zop-landing .zop-main .zop-acc__q{font-size:16px;line-height:21px}
  body.zop-landing .zop-main .zop-form__title{font-size:28px;line-height:33px}
  .zop-form__embed{padding:24px;min-height:0}
}

@media (prefers-reduced-motion:reduce){
  .zop-main *{transition:none !important}
}

/* ============================================================
   VÍDEO EN LUGAR DE IMAGEN (archivo o YouTube / Vimeo)
   Ocupa el mismo hueco y tamaño que la imagen.
   ============================================================ */
.zop-main video{display:block;max-width:100%}
.zop-embed{position:relative;display:block;overflow:hidden;background:#141414}
.zop-embed iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;transform:translate(-50%,-50%);pointer-events:none}
.zop-embed iframe{width:max(100%,177.78cqh);height:max(100%,56.25cqw)}
.zop-embed{container-type:size}
.zop-hero__media--foto > video,.zop-hero__media--foto > .zop-embed{width:100%;height:100%;object-fit:cover}
.zop-main video.zop-reto__img,.zop-main .zop-embed.zop-reto__img{width:420px;max-width:100%;height:190px;object-fit:cover;border-radius:20px}
.zop-form__media > video,.zop-form__media > .zop-embed{width:100%;height:287px;object-fit:cover}
@media (max-width:1024px){
  .zop-main video.zop-reto__img,.zop-main .zop-embed.zop-reto__img{width:100%;height:auto;aspect-ratio:420/190}
}


/* ============================================================
   MONITORES GRANDES (≥ 1400 px): el contenido se alinea con la
   cabecera y el pie del tema (contenedor de 1320 px − 24 px de
   márgenes = 1296 px) para que no quede aire de más a los lados.
   Las figuras decorativas se abren lo mismo hacia fuera.
   ============================================================ */
@media (min-width:1400px){
  :root{--zop-w:1296px;--zop-wide:48px}
}