/* JMG Technology — Home sobre Material Design 3 (Material Web 2.2.0)
   Tema generado con material-color-utilities: semilla #F26628 (fidelity), neutros desde la tinta #16161A. */
.m3{
  --md-sys-color-primary:#a73a00;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#f26628;
  --md-sys-color-on-primary-container:#511800;
  --md-sys-color-secondary:#77574b;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#fed4c5;
  --md-sys-color-on-secondary-container:#79594e;
  --md-sys-color-tertiary:#5e5e64;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#929198;
  --md-sys-color-on-tertiary-container:#2a2a30;
  --md-sys-color-error:#ba1a1a;
  --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#ffdad6;
  --md-sys-color-on-error-container:#93000a;
  --md-sys-color-surface:#fcf8fb;
  --md-sys-color-on-surface:#1c1b1e;
  --md-sys-color-surface-variant:#e4e1e9;
  --md-sys-color-on-surface-variant:#47464c;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f6f2f6;
  --md-sys-color-surface-container:#f0edf0;
  --md-sys-color-surface-container-high:#eae7ea;
  --md-sys-color-surface-container-highest:#e5e1e5;
  --md-sys-color-inverse-surface:#313033;
  --md-sys-color-inverse-on-surface:#f3f0f3;
  --md-sys-color-inverse-primary:#ffb59a;
  --md-sys-color-outline:#77767d;
  --md-sys-color-outline-variant:#c8c5cd;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
}
.m3 .hero,.m3 .planta,.m3 .chapter--ink,.m3 .footer,.m3 .utility,.m3 .site-header,.m3 .menu-panel,.m3 .route-panel--project,.m3 .policy,.m3 .coverage{
  --md-sys-color-primary:#ffb59a;
  --md-sys-color-on-primary:#5a1b00;
  --md-sys-color-primary-container:#f26628;
  --md-sys-color-on-primary-container:#511800;
  --md-sys-color-secondary:#e7beaf;
  --md-sys-color-on-secondary:#442a20;
  --md-sys-color-secondary-container:#5d4035;
  --md-sys-color-on-secondary-container:#d4ac9e;
  --md-sys-color-tertiary:#c8c5cd;
  --md-sys-color-on-tertiary:#303036;
  --md-sys-color-tertiary-container:#929198;
  --md-sys-color-on-tertiary-container:#2a2a30;
  --md-sys-color-error:#ffb4ab;
  --md-sys-color-on-error:#690005;
  --md-sys-color-error-container:#93000a;
  --md-sys-color-on-error-container:#ffdad6;
  --md-sys-color-surface:#131315;
  --md-sys-color-on-surface:#e5e1e5;
  --md-sys-color-surface-variant:#47464c;
  --md-sys-color-on-surface-variant:#c8c5cd;
  --md-sys-color-surface-container-lowest:#0e0e10;
  --md-sys-color-surface-container-low:#1c1b1e;
  --md-sys-color-surface-container:#201f22;
  --md-sys-color-surface-container-high:#2a2a2c;
  --md-sys-color-surface-container-highest:#353437;
  --md-sys-color-inverse-surface:#e5e1e5;
  --md-sys-color-inverse-on-surface:#313033;
  --md-sys-color-inverse-primary:#a73a00;
  --md-sys-color-outline:#919097;
  --md-sys-color-outline-variant:#47464c;
  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
}
.m3{
  --md-ref-typeface-brand:"Archivo",system-ui,sans-serif;
  --md-ref-typeface-plain:"Archivo",system-ui,sans-serif;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-large:20px;
  --md-sys-shape-corner-medium:12px;
  /* botones: contenedor naranja de marca con texto tinta */
  --md-filled-button-container-color:var(--md-sys-color-primary-container);
  --md-filled-button-label-text-color:#16161A;
  --md-filled-button-hover-label-text-color:#16161A;
  --md-filled-button-focus-label-text-color:#16161A;
  --md-filled-button-pressed-label-text-color:#16161A;
  --md-filled-button-icon-color:#16161A;
  --md-filled-button-hover-icon-color:#16161A;
  --md-filled-button-focus-icon-color:#16161A;
  --md-filled-button-pressed-icon-color:#16161A;
  --md-filled-button-container-height:52px;
  --md-filled-button-leading-space:24px;
  --md-filled-button-trailing-space:24px;
  --md-filled-button-with-trailing-icon-trailing-space:6px;
  --md-filled-button-label-text-font:"Archivo";
  --md-filled-button-label-text-weight:700;
  --md-filled-button-label-text-size:1rem;
  --md-filled-button-icon-size:40px;
  --md-outlined-button-container-height:52px;
  --md-outlined-button-label-text-font:"Archivo";
  --md-outlined-button-label-text-weight:650;
  --md-outlined-button-label-text-size:1rem;
  --md-outlined-button-leading-space:22px;
  --md-outlined-button-trailing-space:22px;
  --md-outlined-button-with-leading-icon-leading-space:16px;
  --md-outlined-button-icon-size:20px;
  --md-outlined-text-field-container-shape:12px;
  --md-outlined-text-field-label-text-font:"Archivo";
  --md-outlined-text-field-input-text-font:"Archivo";
  --md-outlined-text-field-input-text-size:1rem;
  --md-outlined-text-field-focus-outline-color:var(--md-sys-color-primary-container);
  --md-outlined-text-field-focus-label-text-color:var(--md-sys-color-primary);
  --md-outlined-text-field-caret-color:var(--md-sys-color-primary-container);
  --md-outlined-select-text-field-container-shape:12px;
  --md-outlined-select-text-field-input-text-font:"Archivo";
  --md-outlined-select-text-field-label-text-font:"Archivo";
  --md-outlined-select-text-field-focus-outline-color:var(--md-sys-color-primary-container);
  --md-menu-container-shape:16px;
  --md-ripple-pressed-opacity:.16;
  --md-focus-ring-color:var(--md-sys-color-primary-container);
  --md-focus-ring-width:3px;
}
.m3 md-filled-button,.m3 md-outlined-button,.m3 md-filled-tonal-button{transition:transform 160ms cubic-bezier(.32,.72,0,1)}
.m3 md-filled-button:active,.m3 md-outlined-button:active{transform:scale(.98)}
.m3 md-filled-button.ink{--md-filled-button-container-color:#16161A;--md-filled-button-label-text-color:#F4F5F6;--md-filled-button-hover-label-text-color:#F4F5F6;--md-filled-button-focus-label-text-color:#F4F5F6;--md-filled-button-pressed-label-text-color:#F4F5F6;--md-filled-button-icon-color:#F4F5F6;--md-filled-button-hover-icon-color:#F4F5F6;--md-filled-button-focus-icon-color:#F4F5F6;--md-filled-button-pressed-icon-color:#F4F5F6}
.m3 .chapter--paper md-outlined-button,.m3 .chapter--white md-outlined-button,.m3 .chapter--orange md-outlined-button,.m3 .route-panel--list md-outlined-button,.m3 .form-card md-outlined-button{--md-outlined-button-outline-color:#16161A;--md-outlined-button-label-text-color:#16161A;--md-outlined-button-hover-label-text-color:#16161A;--md-outlined-button-icon-color:#16161A}
.m3 .chapter--orange md-filled-button:not(.ink){--md-filled-button-container-color:#16161A;--md-filled-button-label-text-color:#F4F5F6;--md-filled-button-hover-label-text-color:#F4F5F6;--md-filled-button-pressed-label-text-color:#F4F5F6;--md-filled-button-focus-label-text-color:#F4F5F6;--md-filled-button-icon-color:#F4F5F6;--md-filled-button-hover-icon-color:#F4F5F6}
/* button-in-button: el ícono vive en su propia isla circular */
.m3 .nest{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(22,22,26,.12);transition:transform 420ms cubic-bezier(.32,.72,0,1)}
.m3 md-filled-button.ink .nest,.m3 .chapter--orange md-filled-button .nest{background:rgba(255,255,255,.14)}
.m3 .nest svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.m3 md-filled-button:hover .nest{transform:translate(3px,-1px) scale(1.05)}}
.m3 md-outlined-button .ic{width:20px;height:20px}

/* isla de navegación flotante */
.m3 .site-header{position:sticky;top:14px;margin:14px auto 0;width:min(100% - 2*var(--gutter),1180px);border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(22,22,26,.93);box-shadow:0 18px 40px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.m3 .site-header .wrap{width:100%;padding:0 10px 0 22px;min-height:64px}
.m3 .site-header .header-cta{--md-filled-button-container-height:44px}
.m3 .utility{border-bottom:0}
.m3 .hero{padding-top:clamp(48px,6vw,96px)}
/* menú móvil: hamburguesa que se vuelve X y panel de pantalla completa con entrada escalonada */
.m3 .menu summary{width:48px;height:48px;padding:0;justify-content:center;font-size:0;position:relative;box-shadow:none;background:rgba(255,255,255,.08)}
.m3 .menu summary::before,.m3 .menu summary::after{content:"";position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:var(--on-ink);transition:transform 420ms cubic-bezier(.32,.72,0,1)}
.m3 .menu summary::before{transform:translateY(-4px)}
.m3 .menu summary::after{transform:translateY(4px)}
.m3 .menu[open] summary{background:var(--on-ink)}
.m3 .menu[open] summary::before{transform:rotate(45deg);background:var(--ink)}
.m3 .menu[open] summary::after{transform:rotate(-45deg);background:var(--ink)}
.m3 .menu-panel{position:fixed;inset:0;top:0;left:0;right:0;z-index:-1;border-radius:0;border:0;padding:120px var(--gutter) 40px;background:rgba(14,14,17,.95);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);display:flex;flex-direction:column;gap:6px}
.m3 .menu-panel a{font-size:clamp(1.8rem,8vw,2.6rem);font-weight:780;letter-spacing:-.02em;font-variation-settings:"wdth" 112;padding:10px 4px;border-radius:12px}
.m3 .menu[open] .menu-panel a{animation:m3-rise 640ms cubic-bezier(.32,.72,0,1) both}
.m3 .menu[open] .menu-panel a:nth-child(2){animation-delay:60ms}.m3 .menu[open] .menu-panel a:nth-child(3){animation-delay:120ms}.m3 .menu[open] .menu-panel a:nth-child(4){animation-delay:180ms}.m3 .menu[open] .menu-panel a:nth-child(5){animation-delay:240ms}.m3 .menu[open] .menu-panel > :last-child{animation-delay:300ms}
@keyframes m3-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* doble marco: superficie como placa dentro de una bandeja */
.m3 .bezel{border-radius:calc(var(--r-panel) + 8px);padding:8px;background:rgba(22,22,26,.04);box-shadow:inset 0 0 0 1px rgba(22,22,26,.06)}
.m3 .bezel--ink{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.m3 .bezel > *{box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 24px 48px -32px rgba(22,22,26,.35)}
.m3 .bezel > .route-panel,.m3 .bezel > .form-card,.m3 .bezel > .policy,.m3 .bezel > .coverage{position:relative;height:100%}
.m3 .policy{margin-top:0}
.m3 .policy-bezel{margin-top:clamp(48px,6vw,88px)}
.m3 .unit{box-shadow:0 0 0 6px rgba(255,255,255,.045),0 0 0 7px rgba(255,255,255,.08)}
.m3 .works figure{box-shadow:0 0 0 6px rgba(22,22,26,.12)}

/* campos Material */
.m3 .route-row md-outlined-text-field{flex:1 1 260px;--md-outlined-text-field-container-shape:28px;--md-outlined-text-field-outline-color:rgba(255,255,255,.35);--md-outlined-text-field-input-text-color:#F4F5F6;--md-outlined-text-field-label-text-color:#B4B8BF;--md-outlined-text-field-hover-outline-color:#F4F5F6;--md-outlined-text-field-leading-space:22px}
.m3 .form-card md-outlined-text-field,.m3 .form-card md-outlined-select{width:100%}
.m3 .form-card .fld > label:not(.h3),.m3 .form-card .fld > .err{display:none}
.m3 .summary md-outlined-text-field{width:100%}
.m3 md-outlined-select md-select-option{--md-menu-item-label-text-font:"Archivo"}
/* chips y pestañas con ripple de Material */
.m3 .zones-tabs button,.m3 .chips label,.m3 .stage-chips button,.m3 .seg label{position:relative;overflow:hidden}
/* entrada al hacer scroll (contenido visible sin JS) */
.js .m3-reveal{opacity:0;transform:translateY(12px);transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 600ms cubic-bezier(.16,1,.3,1)}
.js .m3-reveal.is-in{opacity:1;transform:none}
@media (max-width:700px){.m3 .site-header{top:10px;margin-top:10px}.m3 .bezel{padding:6px;border-radius:34px}}
@media (prefers-reduced-motion:reduce){
  .js .m3-reveal{opacity:1;transform:none;filter:none;transition:none}
  .m3 .menu[open] .menu-panel a{animation:none}
  .m3 .menu summary::before,.m3 .menu summary::after,.m3 .nest,.m3 md-filled-button{transition:none}
}

/* ===== Motion graphics ===== */
.m3 #stage-ring .ring-node{transform-box:fill-box;transform-origin:center}
.m3 .pkt{fill:var(--orange)}
.m3 #stage-ring .pkt{fill:#F4F5F6}
.m3 #stage-ring .pkt:first-of-type{fill:var(--orange)}
.m3 .pkt--cable{fill:#F4F5F6;stroke:var(--orange);stroke-width:.5;opacity:0;transition:opacity 200ms ease}
.m3 .cable-live path.is-on + .pkt--cable{opacity:1}
.m3 .arc-wrap{position:relative}
.m3 .arc-pulse{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--ink);opacity:0;pointer-events:none;transition:opacity 200ms ease;will-change:transform}
.m3 md-filled-button.magnetic{transition:transform 480ms cubic-bezier(.32,.72,0,1)}
.m3 .ledger li{position:relative;transition:transform 320ms cubic-bezier(.23,1,.32,1)}
.m3 .ledger li::before{content:"";position:absolute;inset:0 -16px;border-radius:16px;background:rgba(22,22,26,.06);opacity:0;transform:scaleX(.98);transition:opacity 220ms ease,transform 320ms cubic-bezier(.23,1,.32,1);z-index:-1}
@media (hover:hover) and (pointer:fine){.m3 .ledger li:hover::before{opacity:1;transform:none}.m3 .ledger li:hover h3{transform:translateX(4px)}}
.m3 .ledger h3{transition:transform 320ms cubic-bezier(.23,1,.32,1)}
.m3 .faq details[open] > p{animation:faq-in 380ms cubic-bezier(.23,1,.32,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.m3 .faq details[open] > p{animation:none}.m3 .ledger li::before,.m3 .ledger h3,.m3 md-filled-button.magnetic{transition:none}}
.m3 .zone md-filled-button,.m3 .zone md-outlined-button,.m3 .route-panel md-filled-button,.m3 .leasing-copy md-outlined-button,.m3 .coverage md-filled-button{justify-self:start;align-self:start}
.m3 .zone .hero-ctas,.m3 .route-panel .hero-ctas{justify-self:start}
/* con el menú abierto, el encabezado suelta su desenfoque para que el panel cubra toda la pantalla */
.m3 .site-header:has(.menu[open]){-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-color:transparent;box-shadow:none}

/* formulario por servicio: las preguntas del servicio elegido */
.svc-q{grid-column:1/-1;display:grid;gap:18px;border:0;margin:0;padding:0;min-width:0}
.svc-q[hidden]{display:none}
.q-hint{display:block;font-weight:500;font-size:.8125rem;color:var(--text-2);margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lead-steps li{display:flex;gap:12px;align-items:center;color:var(--on-orange-2);font-weight:620;font-size:1rem}
.lead-steps b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--on-orange);color:var(--orange);display:grid;place-items:center;font-size:.875rem}
.lead-status{margin:14px 0 0;font-size:.9375rem;font-weight:620}
.lead-status:empty{display:none}
.lead-status.is-error{color:#B3261E}
.lead-status a{color:inherit;font-weight:750}

/* página de gracias */
.thanks-badge{display:inline-flex;align-items:center;gap:10px;font-weight:700;margin:0 0 18px}
.thanks-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.thanks-list{margin:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-top:1.5px solid var(--text)}
.thanks-list dt,.thanks-list dd{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.thanks-list dt{color:var(--text-2);font-size:.95rem;padding-right:16px}
.thanks-list dd{font-weight:720}
@media (max-width:760px){.thanks-grid{grid-template-columns:1fr}.thanks-list{grid-template-columns:1fr}.thanks-list dt{border-bottom:0;padding-bottom:2px}.thanks-list dd{padding-top:0}}

/* listas largas en móvil: se muestran las primeras y un botón abre el resto */
@media (max-width:640px){
  .catalog.is-clipped > li:nth-child(n+9){display:none}
  .brand-wall.is-clipped > li:nth-child(n+13),#brands-list.is-clipped > li:nth-child(n+13){display:none}
}
.more-btn{display:none}
@media (max-width:640px){.more-btn{display:inline-flex;align-items:center;gap:8px;margin-top:20px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:680;cursor:pointer}.more-btn:active{transform:scale(.97)}}
@media print{.js .m3-reveal{opacity:1;transform:none}.catalog.is-clipped > li,#brands-list.is-clipped > li{display:revert}.more-btn{display:none}}
