/* Theme Name: TarifaÓptima Template: twentytwentyfive Version: 1.37.3 Text Domain: tarifaoptima */ :root{--to-navy:#153b5b;--to-navy-deep:#0c2941;--to-cyan:#58c7d8;--to-ink:#102c43;--to-muted:#526474;--to-line:#dce7ed;--to-white:#fff;--to-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.8-.78.97-.14.16-.29.18-.53.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.13-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.42h-.48c-.16 0-.43.06-.66.31-.23.25-.86.85-.86 2.06s.89 2.39 1.01 2.56c.12.16 1.74 2.66 4.22 3.73.59.25 1.05.4 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.28Z'/%3E%3C/svg%3E")} *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{margin:0;overflow-x:hidden} .to-shell-skip{position:fixed;left:12px;top:-80px;z-index:10002;padding:12px 18px;border-radius:10px;background:var(--to-navy-deep);color:#fff;text-decoration:none}.to-shell-skip:focus{top:12px} /* ── CABECERA ISLA · 01/09/2026 ──────────────────────────────────────────── Geometría nueva, enlaces intactos. Sale de web-nueva/hero-animado.html (?v=header-final): la barra va metida hacia dentro y, al bajar, se despega del borde y se convierte en una pastilla con borde y sombra. Lo que NO cambia, porque no es diseño: las 10 URLs del menú, el desplegable de Trámites con su hub y su teléfono, el CTA de WhatsApp, el cajón de móvil y los id que la prueba de shared-shell comprueba (hdr, burger, mobmenu). Ahora es sticky SIEMPRE, no solo a partir del scroll. `is-sticky` deja de decidir si se pega y pasa a decidir solo el aspecto de pastilla; el JS que la pone ya existía y no se toca. */ /* Fondo OPACO, no el .97 del boceto: allí detrás hay una foto y aquí hay texto. Medido en captura, a 1440 se leía «Asesoramiento independiente...» por dentro de la pastilla. Un 3 % de transparencia sobre un párrafo se ve. EN REPOSO VA A ANCHO COMPLETO · 01/09/2026 Con la isla metida hacia dentro desde el principio, la foto del hero asomaba por los huecos laterales y la barra blanca quedaba como un rectángulo flotando con las esquinas rectas. En la referencia eso no se ve porque su cabecera en reposo es del mismo color que la página; la nuestra es blanca sobre una foto, así que el hueco delata la caja. Ahora en reposo llega a los bordes y la isla SOLO se forma al bajar. El relleno de reposo lleva sumada la isla (`calc(7% + var(--to-isla))`), así que al encogerse la caja el contenido NO se mueve de sitio: solo se meten los bordes. Sin esa suma, el logo y el CTA daban un salto lateral. */ /* LA TRANSICIÓN, afinada el 01/09/2026. Cuatro cosas la hacían dura: · se animaba `top`, que en un sticky recalcula posición en cada fotograma. Ahora es `transform`, que va por compositor y no toca el layout. · el radio iba de 0 a 999 px sobre una barra de 105: saturaba al 5 % de la animación, así que la pastilla aparecía de golpe y el resto del tiempo no pasaba nada. Con 56 px (algo más de la mitad del alto) la curva se reparte por toda la duración. · el borde salía de `transparent`, que es negro con alfa 0, y al mezclarse ensuciaba de gris. Sale del mismo marino con alfa 0 y funde limpio. · 0,7 s en todo. Ahora la geometría va a 0,5 s con una curva que frena al final, y color y sombra entran antes, que es lo que se nota primero. */ .to-shell-header{--to-isla:clamp(0px,4vw,128px);position:sticky;top:0;z-index:1000;margin:0;padding:16px calc(7% + var(--to-isla));border:2px solid rgba(21,59,91,0);border-radius:0;background:#fff;color:var(--to-ink);font-family:Figtree,system-ui,-apple-system,sans-serif;transition:transform .5s cubic-bezier(.22,1,.36,1),margin .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),border-radius .5s cubic-bezier(.22,1,.36,1),border-color .3s ease-out,box-shadow .4s ease-out} .to-shell-header.is-sticky{margin:0 var(--to-isla);padding:16px 7%;transform:translateY(8px);border-color:rgba(21,59,91,.9);border-radius:56px;box-shadow:0 -2px 4px -1px rgba(12,41,65,.07),0 5px 8px -2px rgba(12,41,65,.10),0 2px 4px -1px rgba(12,41,65,.06)} .to-shell-inner{width:min(1180px,calc(100% - 40px));margin-inline:auto} /* LA BARRA LLENA LA ISLA · 01/09/2026, comparado con BajaTuFactura Este reseteo se quitó por la mañana, cuando el contenido se apelotonaba a la izquierda. Vuelve porque aquella no era la causa: era que el menú no estaba centrado (ver el bloque de abajo), y eso ya está arreglado. El tope de 1180 px de .to-shell-inner sí hacía daño aquí. MEDIDO: a 1440 el relleno interior de la isla salía al 5,5 % y a 1920 se disparaba al 16,6 %, porque el contenido se quedaba clavado en 1180 mientras la isla crecía. En la referencia ese relleno es del 8,5 % y NO cambia con el ancho: por eso el nuestro se veía agrupado en el centro en pantallas grandes. Ahora lo pone la isla con `padding:16px 7%`. En porcentaje y no en píxeles para que la proporción se mantenga a cualquier ancho. El PIE sigue con .to-shell-inner y su tope de 1180: es contenido de la página, no una tarjeta flotante, y ahí sí alinea con el resto. */ .to-shell-nav{width:100%;max-width:none;margin-inline:0;min-height:69px;display:flex;align-items:center;gap:20px} /* EL MENÚ SE CENTRA AQUÍ, y no con el `margin:0 auto` de .to-shell-links (01/09/2026). Ese margen no centraba nada: el