/* ============================================================
   COMPONENTES DE LA MAQUETA APROBADA
   Portados tal cual de sitio-web/index.html, que es la página que
   marketing validó. Los nombres de variable de la maqueta se resuelven
   contra los presets del tema, así cambiar un color desde el editor
   sigue cambiándolo en todas partes.
   ============================================================ */
:root {
  --naranja:      var(--wp--preset--color--naranja);
  --naranja-vivo: var(--wp--preset--color--naranja-vivo);
  --azul:         var(--wp--preset--color--azul);
  --azul-vivo:    var(--wp--preset--color--azul-vivo);
  --gris:         var(--wp--preset--color--gris);
  --bg:           var(--wp--preset--color--fondo);
  --bg-alt:       var(--wp--preset--color--fondo-alt);
  --surface:      var(--wp--preset--color--fondo);
  --ink:          var(--wp--preset--color--texto);
  --ink-soft:     var(--wp--preset--color--texto-suave);
  --line:         var(--wp--preset--color--linea);
  --line-soft:    color-mix(in srgb, var(--wp--preset--color--linea) 55%, transparent);
  --noche:        var(--wp--preset--color--noche);
  --noche-2:      var(--wp--preset--color--noche-2);
  --noche-ink:    var(--wp--preset--color--noche-texto);
  --noche-soft:   var(--wp--preset--color--noche-suave);
  --noche-line:   var(--wp--preset--color--noche-linea);
  --f-display:    var(--wp--preset--font-family--display);
  --f-body:       var(--wp--preset--font-family--cuerpo);
  --r: 14px;
  --sombra:      var(--wp--preset--shadow--tarjeta);
  --sombra-alta: var(--wp--preset--shadow--alta);
}

/* ------------------------------------------------------------------
   WordPress separa con un margen superior a los hijos de cada grupo.
   Dentro de las secciones de la maqueta ese margen sobra: la maqueta
   trae los suyos.

   Va ACÁ ARRIBA a propósito, antes de las reglas de la maqueta. Empata
   en especificidad con ellas —casi todas son de una sola clase— así
   que el desempate lo define el orden: la maqueta viene después y
   gana. Y le sigue ganando a la regla de WordPress, que va en :where()
   y vale cero. Puesto al final del archivo, este reset borraba los
   márgenes de .franja-serv, .canal, .grid-serv, .escala, .valores,
   .modos, .pasos, .faq y .contacto.
   ------------------------------------------------------------------ */
.tmr-seccion :where(.is-layout-flow, .is-layout-constrained) > * {
  margin-block-start: 0;
}


/* ------------------------------------------------------------------
   Base de la maqueta.
   index.html arranca con un reset del que dependen casi todos sus
   componentes: `p{margin:0}`, `ul{margin:0;padding:0;list-style:none}`,
   títulos sin margen propio y con `text-wrap:balance`. Al portar los
   componentes me salteé ese reset, y sin él WordPress deja las listas
   de .modo con viñeta y corridas 40 px, y los títulos parten distinto
   de como se aprobaron.

   Va acotado a los envoltorios de la maqueta —las secciones del
   patrón, la cabecera y el pie— para no sacarle las viñetas ni los
   márgenes a una entrada del blog. Y va ACÁ ARRIBA, antes de los
   componentes, para que cualquier regla propia de la maqueta le gane
   por orden.
   ------------------------------------------------------------------ */
/* El envoltorio va en :where() para que no sume especificidad. Si sumara,
   este reset le ganaría a las reglas propias de la maqueta —.hero-lede,
   .nota-ev, .gr-pie— y les borraría su margen, que es exactamente el error
   que ya cometí con el reset de arriba. Así queda por encima del navegador
   y por debajo de la maqueta, que es donde tiene que estar. */
/* `*{box-sizing:border-box}`. WordPress no lo trae global en el frente —lo
   declaran algunos bloques para sí mismos y nada más—, y la maqueta cuenta
   con él en todas partes: sin esto `.wrap` mide 1200 px MÁS sus 48 px de
   respiro a cada lado, y los campos del formulario, que van con `width:100%`
   y relleno propio, se salen de su columna y se pisan entre sí. */
:where(.tmr-seccion, .tmr-interior, .head, .pie),
:where(.tmr-seccion, .tmr-interior, .head, .pie) *,
:where(.tmr-seccion, .tmr-interior, .head, .pie) *::before,
:where(.tmr-seccion, .tmr-interior, .head, .pie) *::after { box-sizing: border-box }

:where(.tmr-seccion, .tmr-interior, .head, .pie) p { margin: 0 }
:where(.tmr-seccion, .tmr-interior, .head, .pie) :is(ul, ol) { margin: 0; padding: 0; list-style: none }
:where(.tmr-seccion, .tmr-interior, .head, .pie) :is(h1, h2, h3, h4) { margin: 0 }
:where(.tmr-seccion, .tmr-interior, .head, .pie) :is(img, svg) { max-width: 100% }

/* `a{color:inherit}` de la maqueta: los enlaces toman el color de su
   contexto y cada componente pone el suyo. Sin esto el logotipo de la
   cabecera y el del pie salen azules, porque heredan el color de enlace del
   tema.

   El envoltorio va con clase y el enlace dentro de :where(), así suma (0,1,0):
   lo justo para empatarle a la regla que WordPress emite desde theme.json
   —y ganarle por orden, porque maqueta.css se encola después— sin pasarle por
   encima a `.nav a`, `.pie-links a` ni `.btn-naranja`, que traen su propio
   color y valen lo mismo o más. */
.tmr-seccion :where(a), .tmr-interior :where(a), .head :where(a), .pie :where(a) { color: inherit }

/* Estas dos sí van globales: valen igual en la portada que en una
   página de servicio armada con bloques nativos. */
h1, h2, h3, h4 { text-wrap: balance }
html { scroll-behavior: smooth }

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* Cada sección de la maqueta ocupa el ancho de la ventana, igual que las
   bandas del tema: al insertarse como patrón queda dentro del contenido del
   artículo, que está limitado al ancho de lectura. */
.wp-site-blocks .tmr-seccion.tmr-seccion {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: auto;
}

:root{
  /* marca */
  --naranja:#F26836;
  --naranja-vivo:#FF682F;
  --azul:#0E7EBC;
  --azul-vivo:#007FBF;
  --gris:#949DAB;

  /* superficie clara */
  --bg:#FFFFFF;
  --bg-alt:#F4F6F9;
  --surface:#FFFFFF;
  --ink:#12222E;
  --ink-soft:#4B5D6B;
  --line:#DFE4EA;
  --line-soft:#EDF0F4;

  /* héroe y bandas oscuras: idénticas en ambos temas */
  --noche:#07202F;
  --noche-2:#0B2E42;
  --noche-ink:#EAF2F7;
  --noche-soft:#9FB6C4;
  --noche-line:#18455E;

  --f-display:"Comfortaa","Trebuchet MS",sans-serif;
  --f-body:"Quicksand","Segoe UI",system-ui,sans-serif;

  --gutter:clamp(18px,4.6vw,48px);
  --maxw:1200px;
  --r:14px;
  --sombra:0 2px 4px #12222e0a,0 18px 40px -28px #12222e59;
  --sombra-alta:0 4px 10px #12222e0f,0 30px 60px -30px #12222e5c;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
    --bg:#081A25;
    --bg-alt:#0C2434;
    --surface:#0E2A3C;
    --ink:#E9F1F6;
    --ink-soft:#9DB4C2;
    --line:#1B4058;
    --line-soft:#143247;
    --azul:#3FA8E0;
    --gris:#8FA0AE;
    --sombra:0 2px 4px #0006,0 18px 40px -28px #000;
    --sombra-alta:0 4px 10px #00000073,0 30px 60px -30px #000;
  }}
:root[data-theme="dark"]{
  --bg:#081A25; --bg-alt:#0C2434; --surface:#0E2A3C;
  --ink:#E9F1F6; --ink-soft:#9DB4C2;
  --line:#1B4058; --line-soft:#143247;
  --azul:#3FA8E0; --gris:#8FA0AE;
  --sombra:0 2px 4px #0006,0 18px 40px -28px #000;
  --sombra-alta:0 4px 10px #00000073,0 30px 60px -30px #000;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}
@keyframes surge{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.anima .surge{animation:surge .72s cubic-bezier(.2,.7,.25,1) backwards}
@media (prefers-reduced-motion:reduce){
.surge{opacity:1;transform:none}}
.logo-txt{font-family:var(--f-display);font-weight:700;font-size:27px;letter-spacing:-.02em;line-height:1;color:var(--gris)}
.logo-bajada{
  font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);display:block;margin-top:5px;
}
.head-in{display:flex;align-items:center;gap:22px;min-height:72px}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink)}
.menu-btn:hover{border-color:var(--naranja);color:var(--naranja)}
.menu-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.menu-btn .cerrar{display:none}
.menu-btn[aria-expanded="true"] .abrir{display:none}
.menu-btn[aria-expanded="true"] .cerrar{display:block}
.menu-movil{border-top:1px solid var(--line);background:var(--bg);padding:14px var(--gutter) 22px}
.menu-movil ul{display:flex;flex-direction:column}
.menu-movil a{display:block;padding:13px 2px;font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.menu-movil a:hover{color:var(--naranja)}
.menu-movil .btn{margin-top:18px;width:100%}
@media (min-width:961px){
.menu-movil{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);font-weight:700;font-size:15.5px;padding:13px 24px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-naranja{background:var(--naranja);color:#fff;box-shadow:0 10px 26px -12px #f26836cc}
.btn-naranja:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px #f26836e6}
.btn-linea{border-color:var(--line);color:var(--ink);background:transparent}
.btn-linea:hover{border-color:var(--naranja);color:var(--naranja)}
.btn-claro{border-color:#ffffff59;color:#fff;background:#ffffff0f}
.btn-claro:hover{background:#ffffff26;border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:14.5px}
@media (max-width:520px){
.btn{width:100%}}
.hero{position:relative;background:var(--noche);color:var(--noche-ink);overflow:hidden;isolation:isolate}
#lienzo{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(80% 70% at 18% 22%,#0e7ebc4d,transparent 65%),
             radial-gradient(60% 60% at 88% 78%,#f268363d,transparent 62%),
             linear-gradient(180deg,#07202f00 45%,#07202fe6 100%)}
.hero-in{position:relative;z-index:2;padding-block:clamp(56px,9vw,104px) clamp(40px,6vw,64px)}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--noche-soft)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--naranja);flex:none}
.hero h1{font-size:clamp(40px,7.4vw,86px);line-height:.99;letter-spacing:-.035em;margin-top:24px;max-width:15ch}
.hero h1 .naranja{color:var(--naranja-vivo)}
.hero h1 .sub{display:block;color:var(--noche-soft);font-size:clamp(28px,4.6vw,52px);margin-top:.18em;letter-spacing:-.03em}
.hero-lede{color:var(--noche-ink);opacity:.88;font-size:clamp(17px,1.65vw,20.5px);max-width:56ch;margin-top:30px;font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-micro{margin-top:16px;font-size:13.8px;color:var(--noche-soft);max-width:56ch}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--noche-line);border:1px solid var(--noche-line);border-radius:var(--r);overflow:hidden;margin-top:clamp(44px,6vw,64px)}
.cifra{background:#0A2839;padding:22px 20px;display:flex;flex-direction:column;gap:4px}
.cifra dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--noche-soft);font-weight:600;order:2}
.cifra dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3vw,34px);color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cifra dd .u{color:var(--naranja-vivo)}
@media (max-width:820px){
.cifras{grid-template-columns:repeat(2,1fr)}}
.alianzas{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.alianzas-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 38px;padding-block:20px}
.alianzas .rot{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);font-weight:700}
.alianza{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--ink-soft)}
.alianza i{width:9px;height:9px;background:var(--azul);flex:none;clip-path:polygon(50% 0,100% 100%,0 100%)}
.alianza:nth-child(odd) i{background:var(--naranja)}
.sec{padding-block:clamp(64px,8.5vw,110px)}
.sec-alt{background:var(--bg-alt)}
.rotulo{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--naranja)}
.rotulo::before{content:"";width:26px;height:2px;background:var(--naranja);flex:none}
.sec h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em;margin-top:20px;max-width:19ch}
.sec .lede{color:var(--ink-soft);font-size:clamp(16.5px,1.5vw,19px);max-width:62ch;margin-top:20px}
.cabecera-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
/* En la maqueta este lede lleva `style="margin-top:0"` en línea, porque va a
   la par del título y no debajo. Un bloque nativo no puede guardar un style
   suelto sin que el editor lo dé por inválido, así que la regla vive acá y el
   párrafo sigue siendo editable con un clic. */
.cabecera-fila > .lede{margin-top:0}
.manifiesto{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){
.manifiesto{grid-template-columns:1fr}}
.manifiesto h2{max-width:16ch}
.manifiesto .lede + .lede{margin-top:16px}
.cita{border-left:3px solid var(--naranja);padding-left:22px;margin-top:30px}
.cita p{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2.2vw,25px);line-height:1.3;letter-spacing:-.02em}
.ave-deco{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:clamp(16px,3vw,32px)}
.ave{width:min(100%,360px);height:auto;overflow:visible}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes aleteo{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-2.2deg)}}
.ave-flota{animation:flota 5.2s ease-in-out infinite;filter:drop-shadow(0 26px 40px #0e7ebc33)}
.ave-alas{animation:aleteo 2.6s ease-in-out infinite;transform-box:view-box;transform-origin:50px 30px}
@keyframes ensamblar{
  0%{opacity:0;filter:blur(3px);transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.78)}
  62%{opacity:1;filter:blur(0)}
  100%{opacity:1;filter:blur(0);transform:none}
}
.pz{transform-box:fill-box;transform-origin:50% 50%;transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s}
.pz.destaca{transform:scale(1.14);filter:drop-shadow(0 3px 7px #0e7ebc73) brightness(1.08)}
.ave.corre .pz{animation:ensamblar 1s cubic-bezier(.16,1.02,.3,1) backwards}
.ave-pie{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:38ch}
.cualidades{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cual{
  font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);background:var(--surface);
  padding:6px 13px;border-radius:999px;cursor:pointer;
  transition:color .22s,background .22s,border-color .22s,transform .22s;
}
.cual:hover,.cual:focus-visible{color:#fff;background:var(--naranja);border-color:var(--naranja);transform:translateY(-2px)}
@keyframes encender{
  0%{opacity:.25;transform:translateY(6px) scale(.94)}
  45%{opacity:1;transform:none;color:#fff;background:var(--naranja);border-color:var(--naranja)}
  100%{opacity:1;transform:none}
}
.ave.corre ~ .ave-pie .cual{animation:encender 1.15s cubic-bezier(.16,1.02,.3,1) backwards}
.ave-pie .glosa{font-size:14.2px;color:var(--ink-soft);line-height:1.55}
.rearmar{
  background:none;border:0;cursor:pointer;padding:6px 4px;
  font-family:var(--f-body);font-weight:700;font-size:13.5px;color:var(--azul);
  border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s;
}
.rearmar:hover{border-color:var(--azul)}
@media (prefers-reduced-motion:reduce){
.rearmar{display:none}}
.grid-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media (max-width:1000px){
.grid-serv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
.grid-serv{grid-template-columns:1fr}}
.franja-serv{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--naranja);border-radius:0 var(--r) var(--r) 0;padding:30px 30px 32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center}
.franja-serv .serv-ico{flex:none}
.franja-serv h3{font-size:22px;font-weight:600;margin-bottom:8px}
.franja-serv p{font-size:15.4px;color:var(--ink-soft);max-width:70ch}
.niveles{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.nivel{font-family:var(--f-body);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--azul);border:1px solid var(--azul);padding:4px 12px;border-radius:999px}
@media (max-width:860px){
.franja-serv{grid-template-columns:1fr;gap:18px;text-align:left}}
.serv{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 32px;display:flex;flex-direction:column;gap:13px;overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.25,1),box-shadow .28s,border-color .28s}

/* Índice de servicios: el título de la tarjeta es un enlace, pero se ve como título. */
.serv h3 a{text-decoration:none}
.serv h3 a:hover,.serv h3 a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.serv::before{content:"";position:absolute;top:0;left:0;width:76px;height:76px;background:var(--azul);opacity:.08;clip-path:polygon(0 0,100% 0,0 100%);transition:opacity .28s,background .28s}
.serv:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:transparent}
.serv:hover::before{opacity:.18;background:var(--naranja)}
.serv-ico{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--azul) 12%,transparent);position:relative;z-index:1}
.serv-ico svg{width:24px;height:24px;stroke:var(--azul);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.serv:hover .serv-ico{background:color-mix(in srgb,var(--naranja) 14%,transparent)}
.serv:hover .serv-ico svg{stroke:var(--naranja)}
.serv h3{font-size:21px;position:relative;z-index:1}
.serv p{font-size:15.4px;color:var(--ink-soft)}
.serv .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:16px}
.tag{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink-soft);background:var(--bg-alt);border:1px solid var(--line-soft);padding:4px 11px;border-radius:999px}
.valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:52px}
.valor{background:var(--surface);padding:34px 30px;display:flex;flex-direction:column;gap:12px}
.valor .n{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--naranja)}
.valor h3{font-size:22px}
.valor p{font-size:15.4px;color:var(--ink-soft)}
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
@media (max-width:940px){
.equipo{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
.equipo{grid-template-columns:1fr}}
.persona{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:center;padding-bottom:26px;transition:transform .28s,box-shadow .28s}
.persona:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.retrato{aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(150deg,var(--azul) 0%,#0b5f8f 55%,var(--noche-2) 100%);position:relative}
.retrato svg{width:44%;height:auto;opacity:.92}
.persona h3{font-size:19px;margin-top:20px}
.persona .rol{font-size:14px;color:var(--naranja);font-weight:700;margin-top:3px}
.persona .cert{font-size:13.5px;color:var(--ink-soft);margin-top:9px;padding-inline:18px}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative}
.pasos::before{content:"";position:absolute;top:27px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--azul),var(--naranja))}
.paso{padding:0 18px;position:relative}
.paso .bolita{width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--azul);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--azul);position:relative;z-index:1;margin-inline:auto}
.paso:last-child .bolita{border-color:var(--naranja);color:var(--naranja)}
.paso h3{font-size:19px;margin-top:22px;text-align:center}
.paso p{font-size:14.8px;color:var(--ink-soft);margin-top:10px;text-align:center}
.paso .entrega{display:block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--naranja);text-align:center}
@media (max-width:880px){
.pasos{grid-template-columns:1fr;gap:30px}
.pasos::before{top:0;bottom:0;left:27px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--azul),var(--naranja))}
.paso{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:0;text-align:left}
.paso .bolita{margin:0}
.paso h3,.paso p,.paso .entrega{text-align:left;grid-column:2}
.paso h3{margin-top:12px}}
.modos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;align-items:stretch}
@media (max-width:1040px){
.modos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
.modos{grid-template-columns:1fr}}
.modo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 25px;display:flex;flex-direction:column;gap:13px}
.modo.destacado{border:2px solid var(--naranja);box-shadow:var(--sombra-alta);position:relative}
/* La insignia «Más elegida» se retira: no hay dato que diga cuál modalidad se elige más.
   El realce visual del recuadro se conserva como decisión comercial, no como medición. */
.modo h3{font-size:21px}
.modo > p{color:var(--ink-soft);font-size:15.4px}
.modo ul{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.modo li{font-size:15px;color:var(--ink-soft);padding-left:26px;position:relative}
.modo li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;background:var(--azul);clip-path:polygon(50% 0,100% 100%,0 100%)}
.modo.destacado li::before{background:var(--naranja)}
.modo .btn{margin-top:auto}
.banda{position:relative;background:linear-gradient(120deg,var(--naranja) 0%,#e2551f 100%);color:#fff;overflow:hidden}
.banda::before{content:"";position:absolute;top:-30%;right:-6%;width:52%;height:170%;background:#ffffff14;clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)}
.banda-in{position:relative;z-index:1;padding-block:clamp(54px,7vw,82px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:34px}
.banda h2{font-size:clamp(28px,4vw,44px);max-width:17ch;letter-spacing:-.03em}
.banda p{margin-top:14px;font-size:17.5px;max-width:46ch;opacity:.95;font-weight:500}
.banda .btn-blanco{background:#fff;color:#D9481A;font-size:16.5px;padding:15px 30px}
.banda .btn-blanco:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px #00000059}
.faq{margin-top:46px;max-width:900px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding-block:22px;font-family:var(--f-display);font-weight:700;font-size:18.5px;display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::-webkit-details-marker{display:none}
.chev{width:30px;height:30px;border-radius:50%;background:var(--bg-alt);display:grid;place-items:center;flex:none;transition:transform .28s,background .28s}
.chev::before{content:"";width:8px;height:8px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg) translate(-2px,-2px)}
details[open] .chev{transform:rotate(180deg);background:color-mix(in srgb,var(--naranja) 15%,transparent)}
details[open] .chev::before{border-color:var(--naranja)}
details p{padding-bottom:24px;color:var(--ink-soft);font-size:16px;max-width:72ch}
.contacto{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,60px);margin-top:50px;align-items:start}
@media (max-width:880px){
.contacto{grid-template-columns:1fr}}
form{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.2vw,36px);box-shadow:var(--sombra)}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:540px){
.fila-2{grid-template-columns:1fr}}
.campo{display:grid;gap:7px}
label{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
input,select,textarea{font-family:var(--f-body);font-size:15.5px;font-weight:500;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;width:100%;transition:border-color .2s}
input:hover,select:hover,textarea:hover{border-color:var(--gris)}
textarea{resize:vertical;min-height:112px}
#estado{font-size:14.5px;font-weight:600;padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--azul) 10%,transparent);border:1px solid var(--azul);color:var(--ink)}
#estado.err{background:color-mix(in srgb,var(--naranja) 12%,transparent);border-color:var(--naranja)}
.nota-form{font-size:13.5px;color:var(--ink-soft)}
.datos{background:var(--noche);color:var(--noche-ink);border-radius:var(--r);padding:clamp(26px,3.2vw,36px);position:relative;overflow:hidden}
.datos::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,#0e7ebc59,transparent 70%)}
.datos > *{position:relative;z-index:1}
.dato{padding-block:19px;border-bottom:1px solid var(--noche-line)}
.dato:first-of-type{padding-top:0}
.dato:last-child{border-bottom:0;padding-bottom:0}
.dato h3{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--noche-soft);font-weight:600}
.dato p{margin-top:8px;font-size:16px;font-weight:500;line-height:1.55}
.dato a{color:#fff;text-decoration:none;border-bottom:1.5px solid var(--naranja);padding-bottom:1px}
.dato a:hover{color:var(--naranja-vivo)}
.pend{color:var(--naranja-vivo);border-bottom:1.5px dashed var(--naranja-vivo);font-weight:600}
.oscura{background:var(--noche);color:var(--noche-ink);position:relative;overflow:hidden}
.oscura::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 85% 10%,#0e7ebc3d,transparent 62%),radial-gradient(50% 60% at 8% 95%,#f2683633,transparent 60%)}
.oscura > *{position:relative;z-index:1}
.oscura .rotulo{color:var(--naranja-vivo)}
.oscura h2{color:#fff}
.oscura .lede{color:var(--noche-soft)}
.grid-num{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--noche-line);border:1px solid var(--noche-line);border-radius:var(--r);overflow:hidden;margin-top:50px}
@media (max-width:940px){
.grid-num{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){
.grid-num{grid-template-columns:1fr}}
.num{background:#0A2839;padding:30px 28px;display:flex;flex-direction:column;gap:8px}
.num .v{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3.8vw,42px);color:#fff;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num .v small{font-size:.52em;font-weight:600;color:var(--naranja-vivo);letter-spacing:0}
.num .k{font-weight:700;font-size:15px;color:#fff}
.num .d{font-size:13.8px;color:var(--noche-soft);line-height:1.5}
.nota-ev{margin-top:26px;font-size:13.8px;color:var(--noche-soft);max-width:78ch;border-left:2px solid var(--noche-line);padding-left:18px}
/* La misma nota, en una sección clara: el color de la banda oscura no se lee sobre blanco. */
.sec:not(.oscura) .nota-ev{color:var(--ink-soft);border-left-color:var(--line)}

.marcas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--noche-line);border:1px solid var(--noche-line);border-radius:var(--r);overflow:hidden;margin-top:50px}
@media (max-width:940px){
.marcas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){
.marcas{grid-template-columns:1fr}}
.marca{background:#0A2839;padding:30px 28px;display:flex;flex-direction:column;gap:11px;transition:background .25s}
.marca:hover{background:#0C3247}
.marca-logo{height:44px;display:flex;align-items:center}
.marca-logo img{width:auto;max-width:100%;display:block}
.marca-logo img[alt="Tenable"]{max-height:32px}
.marca-logo img[alt="Veeam"]{max-height:32px}
.marca-logo img[alt="Sophos"]{max-height:21px}
.marca-logo img[alt="ManageEngine"]{max-height:27px}
.marca-logo img[alt="Red Hat"]{max-height:31px}
.marca-nombre{font-family:var(--f-display);font-weight:700;font-size:27px;line-height:1;color:#fff;letter-spacing:-.025em}
.marca-rol{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--naranja-vivo)}
.marca-d{font-size:14.4px;color:var(--noche-soft);line-height:1.58}
.canal{margin-top:24px;border:1px solid var(--noche-line);border-radius:var(--r);background:#08222F;padding:26px 28px;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:10px 34px;align-items:center}
@media (max-width:820px){
.canal{grid-template-columns:1fr}}
.canal-marcas{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.canal-marcas span{font-family:var(--f-display);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.02em;white-space:nowrap}
.canal p{font-size:14.4px;color:var(--noche-soft);max-width:62ch}
.canal p strong{color:#fff;font-weight:600}
.gr{margin-top:46px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px)}
.gr-cab{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.gr-cab h3{font-size:20px}
.gr-cab .um{font-size:13px;color:var(--ink-soft);font-weight:600}
.barras{display:flex;flex-direction:column;gap:15px}
.barra{display:grid;grid-template-columns:minmax(140px,224px) minmax(0,1fr);gap:16px;align-items:center}
.barra .et{font-size:14.2px;font-weight:600;color:var(--ink);line-height:1.3}
.barra .pista{display:flex;align-items:center;gap:11px}
.barra .fill{height:19px;border-radius:0 4px 4px 0;background:#0E7EBC;transition:filter .2s;min-width:3px}
.barra:hover .fill{filter:brightness(1.12)}
.barra .val{font-size:13.5px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.gr-pie{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13.8px;color:var(--ink-soft);max-width:80ch}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .barra .fill{background:#2E97D4}}
:root[data-theme="dark"] .barra .fill{background:#2E97D4}
@media (max-width:620px){
.barra{grid-template-columns:1fr;gap:6px}
.barra .et{font-size:13.6px}}
.escala{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
@media (max-width:940px){
.escala{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){
.escala{grid-template-columns:1fr}}
.esc{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--naranja);border-radius:0 var(--r) var(--r) 0;padding:24px 24px 26px;display:flex;flex-direction:column;gap:6px}
.esc .v{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3.2vw,34px);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.esc .k{font-weight:700;font-size:15px}
.esc .d{font-size:14px;color:var(--ink-soft)}
.pie-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:36px;padding-bottom:34px;border-bottom:1px solid var(--noche-line)}
@media (max-width:760px){
.pie-top{grid-template-columns:1fr;gap:28px}}
.pie-desc{color:var(--noche-soft);font-size:15px;margin-top:18px;max-width:40ch}
.pie-links{display:flex;flex-direction:column;gap:11px}
.pie-links a{font-size:15px;color:var(--noche-ink);text-decoration:none;opacity:.88;width:fit-content}
.pie-links a:hover{color:var(--naranja-vivo);opacity:1}
.pie-bot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:22px;font-size:13.5px;color:var(--noche-soft)}

/* ------------------------------------------------------------------
   Sólo para la versión "todo editable": las piezas que allí se arman
   con bloques nativos necesitan recuperar su aspecto.
   ------------------------------------------------------------------ */
.cifra-v {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cifra-k {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--noche-soft); font-weight: 600; margin-top: 4px;
}
.tmr-tabla-horas table { border-collapse: collapse; width: 100% }
.tmr-tabla-horas th, .tmr-tabla-horas td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.tmr-tabla-horas thead th {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg-alt); font-weight: 600;
}
.tmr-tabla-horas td:last-child {
  font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap;
}
.tmr-logo-socio { margin: 0 }
.tmr-logo-socio img { width: auto; max-height: 30px }


/* ------------------------------------------------------------------
   Cabecera y pie de la maqueta aprobada.
   ------------------------------------------------------------------ */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:34px;height:auto;flex:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:14px;top:-60px;z-index:200;background:var(--naranja);color:#fff;font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:0 0 8px 8px;text-decoration:none;transition:top .18s}
.saltar:focus{top:0}
.head{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head .logo{margin-right:auto}
.head .logo-txt{color:var(--ink)}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--ink-soft);position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--naranja);transition:right .28s cubic-bezier(.2,.7,.25,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
@media (max-width:960px){
.nav{display:none}}
@media (max-width:960px){
.head .menu-btn{display:inline-flex}
.head .head-cta{display:none}}
.pie{background:var(--noche-2);color:var(--noche-ink);padding-block:clamp(40px,5vw,58px) 26px}
.pie .logo-txt{color:#fff}
.pie h4{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--noche-soft);font-weight:600;margin-bottom:16px}
@media print{
@page{size:A4;margin:14mm 12mm}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;transition:none!important}
body{font-size:11.5pt;background:#fff}
h1,h2,h3{break-after:avoid;break-inside:avoid}
a{text-decoration:none}
/* el PDF sale siempre en la versión clara, sin importar el tema del lector */
  :root{
    --bg:#FFFFFF; --bg-alt:#F4F6F9; --surface:#FFFFFF;
    --ink:#12222E; --ink-soft:#4B5D6B; --line:#DFE4EA; --line-soft:#EDF0F4;
    --azul:#0E7EBC; --gris:#949DAB;
  }
/* lo que no tiene sentido en papel */
  .saltar,.menu-btn,.menu-movil,#lienzo,.rearmar{display:none!important}
.head{position:static!important;backdrop-filter:none!important}
.lado{position:static!important}
summary::after{content:""!important}
details p{padding-bottom:14px}
/* que nada quede cortado por la mitad */
  section,article,details,.num,.esc,.marca,.modo,.serv,.persona,.etapa,.valor,
  .gr,.franja-serv,.prueba,.dato,.entregables,.chequeo,.campos,.caja,.aviso,.fuera{break-inside:avoid}
.cuerpo{display:block}
.lado{margin-top:26px}}


/* El signo de aproximado se dibuja desde acá y no desde el contenido: la base
   de datos del sitio es latin1 y lo guardaría como "?", y la entidad HTML
   tampoco sirve porque el editor la decodifica al guardar. El CSS es un
   archivo del tema, así que nunca pasa por la base. */
.tmr-aprox::before { content: "\2248\00a0" }