/* =============================================================================
   srv/servicios-seo__off-page.css — /servicios-seo/off-page/ · actos 1–4, paneles, ventanas de mundo en móvil, franja de ritmo,
   prueba, «Ver más» en contorno (C14), logos (C15), formulario de noche (Sofía §2.5), hoja <dialog>, barra de esta plantilla y modos.
   Enlazado antes del acto 1 (≤ 6 KB gzip). Escritorio: columna izquierda que acaba donde acababa el CTA (la manzana queda a la vista,
   a su derecha); móvil: paneles opacos y ventanas de 60 svh entre actos. Sin rojo (errores en crema); un naranja por pantalla.
   ========================================================================== */
/* --- piezas del motor dentro de la caja de luces: la mezcla va en el elemento que se mueve (VFX §2.6) --- */
.op-cabeza{position:absolute;display:block;aspect-ratio:1;translate:-50% -50%;mix-blend-mode:plus-lighter;pointer-events:none;will-change:transform,opacity}
.op-cabeza--calida::before{display:none}
.op-vent{position:absolute;overflow:hidden;mix-blend-mode:plus-lighter;pointer-events:none;will-change:transform}
.op-lienzo{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.op-g-tenue .op-g0,.op-g-tenue .op-g1{stop-color:#BEB6A8;stop-opacity:.2}
.op-arcos-x,.op-arcos-pot,.op-arcos{transition:opacity .6s linear}
.op-tenue{transition:opacity .6s linear}
html.op-afinidad .op-tenue{opacity:0}
.op-pobre{transition:opacity .6s linear}
html.op-calidad .op-pobre{opacity:.15}
.op-arcos-pot{opacity:0;fill-opacity:.67}
html.op-potencia .op-arcos-pot{opacity:1}
html.op-potencia .op-arcos:not(.op-arcos-pot):not(.op-arcos-x){opacity:0}
html.op-potencia .op-arcos-x{opacity:0}
.op-tercio.es-on{opacity:1}
html.op-entra .op-aparca{opacity:1;transition:none}
html.op-entra .pws-enc .pws-enc2{transition-delay:.12s}

.pw-op__acto{position:relative;z-index:1;padding:0 0 38vh}
.pw-op__acto1{padding-top:12vh}
.pw-op__panel{box-sizing:border-box;width:min(calc(100% - 32px),25.6rem);margin-left:max(16px,calc(var(--op-col) - 40px));padding:30px 32px 32px;border-radius:20px;background:rgb(14 31 61/.92);box-shadow:inset 0 0 0 1px rgb(244 233 214/.08),0 30px 80px -40px rgb(0 0 0/.7);font-size:16.5px;line-height:1.65;color:var(--h2-crema-2)}
.pw-op__panel+.pw-op__panel{margin-top:22vh}
.pw-op__panel h2{margin:0 0 .9rem;font:600 clamp(26px,1.2vw + 17px,34px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--h2-crema)}
.pw-op__panel h3{margin:1.6rem 0 .6rem;font:600 19px/1.3 var(--sans);letter-spacing:-.01em;color:var(--h2-crema)}
.pw-op__panel h2+h3{margin-top:.4rem}
.pw-op__panel p{margin:0 0 1rem}
.pw-op__panel strong{color:var(--h2-crema);font-weight:600}
.pw-op__migas{margin:0 0 1.1rem;font-size:12px;line-height:1.5;color:var(--h2-crema-3)}
.pw-op__migas ol{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.pw-op__migas li+li::before{border-color:var(--h2-crema-3)}
.pw-op__migas a{color:var(--h2-crema-2)}
.pw-op__prueba--a1{margin:0 0 1.2rem}
.op-t{transition:box-shadow .6s linear}
.op-t.es-on{box-shadow:inset 0 -1px 0 #FFCB8A}
@media (min-width:981px) and (min-aspect-ratio:9/10){.op-t.es-on{box-shadow:none}}
html.op-hoja-abierta .pw-op__cta{filter:grayscale(1) brightness(.7)}
.op-ventana{display:none}

/* franja de ritmo (vector 2): pista crema 16 %, línea ámbar que dibuja el scroll, marcas irregulares; sin eje ni subida */
.op-franja{margin:.4rem 0 1.4rem}
.op-franja__svg{display:block;width:100%;height:28px;overflow:visible}
.op-franja__pista,.op-franja__linea{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.op-franja__pista{stroke:rgb(244 233 214/.16)}
.op-franja__linea{stroke:#FFCB8A;transform-box:fill-box;transform-origin:0 50%;scale:var(--fr,1) 1}
.op-franja__marca{fill:#FFCB8A;transform-box:fill-box;transition:translate .6s cubic-bezier(.2,0,0,1)}
html.pws-js .op-franja:not(.es-hecha) .op-franja__marca{opacity:0}
html.pws-js .op-franja:not(.es-hecha){--fr:0}
.op-franja figcaption{margin-top:.35rem;font-size:13px;color:var(--h2-crema-2)}

/* acto 3: prueba, «Ver más» en contorno crema, logos en crema al 55 % */
.pw-op__panel--3{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.pw-op__panel--3 .pw-op__prueba{margin:0;text-shadow:none}
.pw-op__vermas{margin:0}
.pw-op__contorno{min-height:48px;padding:0 1.4rem;background:transparent;color:var(--h2-crema);box-shadow:inset 0 0 0 1.5px rgb(244 233 214/.45);font-weight:600}
.pw-op__contorno:hover{box-shadow:inset 0 0 0 1.5px var(--h2-crema)}
.pw-op__logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.8rem;margin:.3rem 0 0;padding:0;list-style:none}
.pw-op__logos img{display:block;height:22px;width:auto;filter:brightness(0) invert(.93) sepia(.12);opacity:.55}

/* acto 4: titular, Alberto real, formulario de noche (campos #1E2D48, borde crema 45 %, foco crema, errores en crema) */
.pw-op__titular{margin:0 0 1rem;font:600 clamp(28px,1.4vw + 18px,40px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--h2-crema)}
.pw-op__yo{display:flex;gap:.9rem;align-items:flex-start}
.pw-op__yo img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;margin-top:.2rem;box-shadow:0 0 0 1.5px rgb(244 233 214/.35)}
.pw-op__form{margin-top:.6rem}
.pw-op__completa{margin:0 0 .9rem;font:600 19px/1.3 var(--sans);color:var(--h2-crema)}
.pw-op__form .pw-form{gap:1rem}
.pw-op__form .pw-campo label{font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--h2-crema-2)}
.pw-op__form .pw-opcional{color:var(--h2-crema-3);font-weight:400}
.pw-op__form .pw-campo input{box-sizing:border-box;min-height:48px;padding:.6rem .85rem;border:1.5px solid rgb(244 233 214/.45);border-radius:12px;background:#1E2D48;color:var(--h2-crema);caret-color:#FFCB8A;font-size:16px}
.pw-op__form .pw-campo input:focus{outline:none;border-color:var(--h2-crema);box-shadow:0 0 0 1.5px var(--h2-crema)}
.pw-op__form .pw-campo input:-webkit-autofill{-webkit-text-fill-color:#F4E9D6;box-shadow:0 0 0 100px #1E2D48 inset;caret-color:#FFCB8A}
.pw-op__form .pw-campo input[aria-invalid="true"]{border:2px solid var(--h2-crema)}
.pw-op__form .op-error{display:flex;gap:.35rem;align-items:center;margin:.2rem 0 0;font-size:13px;color:var(--h2-crema)}
.pw-op__form .pw-check{color:var(--h2-crema-2);font-size:14px}
.pw-op__form .pw-check input{accent-color:#FFCB8A}
.pw-op__form .pw-check a{color:var(--h2-crema)}
.pw-op__form .pw-form>button{width:100%;min-height:56px;padding:0 1.5rem;border-radius:999px;background:var(--h2-accion);color:var(--h2-accion-txt);font:700 20px/1 var(--sans);letter-spacing:-.01em;box-shadow:inset 0 1px 0 rgb(255 255 255/.22),0 18px 40px -16px rgb(255 122 26/.45)}
.pw-op__form .pw-form>button:hover{background:var(--h2-accion-hover)}
.pw-op__form .pw-form>button::after{display:none}
.pw-op__form .pw-form__pie{margin:0;color:var(--h2-crema-2)}
.pw-op__form .pw-form__pie .pw-ic{color:var(--h2-crema-2)}
.pw-op__form .pw-aviso{border-left:3px solid #FFCB8A;background:rgb(255 203 138/.08);color:var(--h2-crema)}
.pw-op__form .pw-aviso a{color:var(--h2-crema)}
.pw-op__otros{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;margin:1.2rem 0 0;font-size:15px}
.pw-op__sep{display:none}
.pw-op__otros a{display:inline-flex;align-items:center;gap:.4rem;color:var(--h2-crema);text-decoration:underline;text-decoration-color:rgb(244 233 214/.35);text-underline-offset:.2em}
.pw-op__otros .pw-ic{width:1.1rem;height:1.1rem;color:var(--h2-crema-2)}
.pw-op__aviso4{margin:.7rem 0 0 max(16px,calc(var(--op-col) - 40px));font-size:13px;color:var(--h2-crema-2);text-shadow:var(--op-halo-lectura)}
.pw-op__acto4{padding-bottom:16vh}

/* la hoja: el mismo nodo <form> dentro de un <dialog>; escritorio panel derecho de 480 px (la manzana a la vista), móvil hoja inferior */
.op-hoja{box-sizing:border-box;position:fixed;inset:0 0 0 auto;width:min(480px,100%);max-width:none;height:100%;max-height:none;margin:0;padding:56px 32px 32px;border:0;background:#0E1F3D;color:#F4E9D6;color-scheme:dark;overflow:auto;overscroll-behavior:contain;box-shadow:-30px 0 80px -30px rgb(0 0 0/.7);--h2-crema:#F4E9D6;--h2-crema-2:#D8D0C1;--h2-crema-3:#BEB6A8;--h2-accion:#FF7A1A;--h2-accion-hover:#FF8A3D;--h2-accion-txt:#081327}
.op-hoja::backdrop{background:rgb(8 19 39/.55)}
.op-hoja__x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgb(244 233 214/.08);color:#F4E9D6;cursor:pointer}
.op-hoja__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.op-hoja:focus-visible,.op-hoja__x:focus-visible{outline:2px solid #F4E9D6;outline-offset:3px}
.op-hoja .pw-op__form{margin:0}
html.op-hoja-abierta .pw-barra{visibility:hidden}

/* barra de contacto de esta plantilla (como la hermana): WhatsApp 20/700 con glifo crema, «Llamar» como icono; solo sin naranja a la vista */
.pws--op .pw-barra .pw-boton--acento{background:var(--h2-accion,#FF7A1A);color:#081327;font:700 20px/1 var(--sans);box-shadow:none;white-space:nowrap}
.pws--op .pw-barra .pw-boton--acento::after{display:none}
.pws--op .pw-barra{grid-template-columns:1fr 3.4rem}
.pws--op .pw-barra .pw-boton--llamar{font-size:0;gap:0;padding-inline:0;background:rgb(244 233 214/.1);color:#F4E9D6}
.pws--op .pw-barra .pw-boton--llamar .pw-ic{width:1.4rem;height:1.4rem}
.pws--op .pw-barra.es-visible:not(.es-libre){translate:0 140%}

/* móvil: paneles opacos a todo el ancho y ventanas de 60 svh de mundo entre actos (los cambios del mundo ocurren ahí) */
@media (max-width:980px),(max-aspect-ratio:9/10){
.pw-op__acto{padding-bottom:0}
.pw-op__acto1{padding-top:0}
.pw-op__panel{width:auto;margin:0;border-radius:0;background:#0E1F3D;padding:28px 20px 30px;box-shadow:none}
.pw-op__panel+.pw-op__panel{margin-top:0}
.op-ventana{display:block;height:60vh;height:60svh}
.pw-op__acto3,.pw-op__acto4{margin-top:60vh;margin-top:60svh}
.pw-op__aviso4{margin:0;padding:10px 20px 18px;background:#0E1F3D}
.pw-op__acto4{padding-bottom:0}
.op-hoja{inset:auto 0 0 0;width:100%;height:auto;max-height:88vh;max-height:88svh;border-radius:16px 16px 0 0;padding:52px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px -20px rgb(0 0 0/.7)}
}

/* --- modos --- */
@media (prefers-contrast:more){.pw-op__panel{background:#0E1F3D}.pw-op__form .pw-campo input{border-color:#F4E9D6}.op-franja__pista{stroke:rgb(244 233 214/.4)}.pw-op__logos img{opacity:.9}}
@media (forced-colors:active){.pw-op__contorno,.pw-op__form .pw-form>button{border:2px solid ButtonText;forced-color-adjust:auto}.pw-op__form .pw-campo input{background:Field;color:FieldText;border-color:FieldText}.pw-op__logos img{filter:none;opacity:1}.op-franja__pista{stroke:GrayText}.op-franja__linea{stroke:CanvasText}.op-franja__marca{fill:CanvasText}}
@media print{.pw-op__panel{background:none;color:#000;box-shadow:none;width:auto;margin:0}.pw-op__panel h2,.pw-op__panel h3,.pw-op__panel strong,.pw-op__titular{color:#000}.op-ventana,.op-hoja,.pw-op__pista,.pw-barra{display:none}.pw-op__acto{padding:0}}