/** * Cabecera 2027 — welcometoibiza.com * Archivo: assets/css/wti-cabecera-2027-1.17.0.css * Creado: 2026-09-17 * El nombre lleva la versión porque WP Rocket borra el ?ver= de los estáticos. * * 1.14.0 · 2026-09-26 (tema 5.4.6) · Móvil y tableta, hasta 1024 px: barra fija de * 60 px (escudo, lupa y botón de menú) y el menú en un cajón. Antes la cabecera de * escritorio se envolvía: 348 px al entrar, 307 px pegada al bajar y el menú se * pintaba encima del texto. Mini-Spec docs/specs/2026-09-26_cabecera-movil-2027.md. * Por encima de 1024 px todo sigue igual (solo se añade el hueco de la barra de * administración, para quien tiene la sesión abierta). * * 1.14.1 · 2026-09-26 (tema 5.5.1) · En el cajón el buscador va sin la caja de * alrededor (se veían dos marcos, el suyo y el del campo). * * 1.15.0 · 2026-09-26 (tema 5.5.7) · El corte sube de 1024 a 1200 px (Angel: «para * tablets usamos iPad como referencia y lo que mejor se adapte»). Medido: la cabecera * de escritorio solo cabe entera desde 1201 px (155 px de alto); entre 1025 y 1180 px * los accesos iban en una columna (hasta 287 px) y el idioma se salía 31 px, y entre * 1181 y 1200 van en tres filas (173 px). Así todos los iPad (768, 810, 820, 834, 1024, * 1080, 1180 y 1194 px) llevan la barra y el cajón, y el escritorio de 1366 y 1440 px * no cambia. El bloque «max-width:1200px» de abajo ya no pinta el escritorio: queda por * debajo de las reglas del cajón. * También 1.15.0: debajo de la barra va la zona «400x100 Cabecera Movil» (Angel: «hay un * banner cabecera móvil 400x100, usa esa zona»), no la de escritorio. * 1.15.1 (otra sesión, tema 5.6.2): tamaño de pastillas y menú al fijarse, del panel Estilos. * * 1.16.0 · 2026-09-26 (tema 5.7.1) · Opción A de Welcome 2027/maqueta-cabecera-movil-2027.html * (Angel: «no me gusta ese hueco blanco… dejar solo los calendarios y lupa y menú»; «cambia * Hoy por Planes»). En la barra: escudo, «Planes» y «Fiestas» (pastillas crema, Oswald, iconos * naranjas), lupa y menú. Fuera la tira de accesos (siguen en el cajón). El banner 400×100, * de lado a lado y pegado a la barra, sin esquinas ni blanco. El escritorio no cambia. * * 1.17.0 · 2026-09-26 (tema 5.7.4) · Angel: «el banner también tiene que ser sticky». La * barra y el banner van en un solo bloque (.c27-pegado) que se queda arriba al bajar. * Móvil (< 600 px): el 400×100 de lado a lado. 600–767 px: el 400×100 como mucho a 600 px, * centrado en una franja crema. Tableta (768–1200 px): el 728×90 de escritorio a su tamaño, * centrado en la franja crema (sin banners en esa zona, el 400×100 a 600 px como mucho). * Las anclas (#…) paran debajo del bloque (scroll-padding con su alto, del JS 1.4.0) y el * cajón del menú empieza donde acaba el bloque. El escritorio no cambia. */ .c27{ --c27-naranja:#F57C00; --c27-marron:#7A5238; --c27-crema:#F2E6D8; /* el crema exacto de los botones de produccion */ --c27-crema-bd:#FFF4E5; /* el borde punteado claro de produccion */ --c27-crema-hov:#EADBC7; --c27-tinta:#121520; --c27-grafito:#4A4F5C; --c27-gris:#6B7280; --c27-gris2:#9CA3AF; --c27-linea:#ECEEF3; --c27-titulos:"Oswald","Archivo Narrow",Impact,sans-serif; --c27-botones:"Bebas Neue","Oswald",Impact,sans-serif; /* el tipo de los botones de produccion */ position:sticky; top:0; z-index:9000; background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; box-shadow:0 8px 22px -18px rgba(18,21,32,.55); } /* 2026-09-17 · IMPORTANTE Elementor imprime en linea `.elementor-kit-99596 a{color:#963C00}`. Ese selector pesa mas que `.c27-pastilla`, asi que las pastillas salian en ese naranja oscuro en vez del marron de la casa. Por eso no coincidian con los botones de produccion por mucho que el fondo fuera el mismo. Todo lo que pinte un enlace de la cabecera va prefijado con `.c27` para ganarle. Lo detecto Angel en el inspector. */ /* ---------- fila 1: escudo + banner + accesos ---------- */ .c27-fila1{display:flex;align-items:center;gap:12px;padding:7px 22px;max-width:1280px;margin:0 auto} .c27-escudo{flex:none;line-height:0} .c27-escudo img{width:64px;height:64px;object-fit:contain;display:block;transition:width .18s ease,height .18s ease} .c27-banner{position:relative;flex:none;line-height:0;order:1} /* 1.14.0: en el HTML van antes los accesos */ .c27-banner img{display:block;max-width:100%;height:auto;border-radius:6px} .c27-et{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#B9C0CC;font-weight:800} .c27-et-lateral{position:absolute;left:-18px;top:50%;transform:translateY(-50%) rotate(-90deg);white-space:nowrap} .c27-accesos{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:410px;order:2} .c27 .c27-pastilla{font-family:var(--c27-botones);font-size:20px;font-weight:400;letter-spacing:normal;text-transform:uppercase; color:var(--c27-marron);background:var(--c27-crema);border:2px solid var(--c27-crema-bd);border-radius:10px; padding:5px 9px;text-decoration:none;white-space:nowrap;line-height:1.2;box-sizing:border-box; display:flex;align-items:center;justify-content:center;text-align:center} .c27 .c27-pastilla:hover{background:var(--c27-crema-hov);border-color:#fff} /* 2026-09-17: ni naranja ni blanco. Los accesos son todos la misma pastilla; lo unico que separa los comerciales es la linea vertical. */ /* El último acceso no es un calendario: se separa y va en blanco */ .c27-accesos a:last-child{margin-left:10px;position:relative} .c27-accesos a:last-child::before{content:"";position:absolute;left:-11px;top:6px;bottom:6px;width:1px;background:#E2D2BF} /* Con 5 accesos: rejilla 2x2 con los cuatro calendarios (mismo ancho, bordes alineados) y el quinto —que no es calendario— aparte, a la derecha y a toda altura. Antes caían 2+3 en dos filas desiguales y parecía casualidad. */ .c27-accesos.c27-acc-5, .c27-accesos.c27-acc-6{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;max-width:410px;align-items:stretch} /* El texto puede partirse en dos lineas: traducido al frances o al italiano ocupa hasta un 40% mas y antes se salia por encima del banner. */ .c27-accesos.c27-acc-5 .c27-pastilla, .c27-accesos.c27-acc-6 .c27-pastilla{white-space:normal} .c27-accesos.c27-acc-5 a:last-child{grid-column:3;grid-row:1 / span 2;margin-left:11px;align-self:center;white-space:nowrap} /* Con 6: los cuatro calendarios siguen en 2x2 y los dos comerciales se apilan en la tercera columna, uno encima del otro. */ .c27-accesos.c27-acc-6 a:nth-child(5), .c27-accesos.c27-acc-6 a:nth-child(6){grid-column:3;margin-left:11px;white-space:nowrap;position:relative} .c27-accesos.c27-acc-6 a:nth-child(5){grid-row:1} .c27-accesos.c27-acc-6 a:nth-child(6){grid-row:2} .c27-accesos.c27-acc-6 a:nth-child(5)::before, .c27-accesos.c27-acc-6 a:nth-child(6)::before{content:"";position:absolute;left:-11px;top:4px;bottom:4px;width:1px;background:#E2D2BF} /* ---------- fila 2: marco naranja ---------- */ .c27-fila2{padding:0 22px 9px;max-width:1280px;margin:0 auto} .c27-marco{border:1.5px solid var(--c27-naranja);border-radius:10px;height:42px;display:flex;align-items:stretch;padding:0 6px;position:relative;background:#fff} .c27-seccion{display:flex;align-items:center;position:static} .c27 .c27-seccion>a{font-family:var(--c27-titulos);font-size:16px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--c27-marron);text-decoration:none; padding:0 15px;display:flex;align-items:center;height:100%;position:relative;white-space:nowrap} .c27-seccion+.c27-seccion>a::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:var(--c27-crema-bd)} .c27 .c27-seccion:hover>a,.c27 .c27-seccion>a:focus{color:var(--c27-naranja)} .c27-seccion>a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--c27-naranja); border-radius:3px 3px 0 0;transform:scaleX(0);transform-origin:center;transition:transform .18s ease} .c27-seccion:hover>a::after,.c27-seccion.c27-activa>a::after{transform:scaleX(1)} /* ---------- panel ---------- */ .c27-panel{position:absolute;left:-1.5px;right:-1.5px;top:40px;background:#fff; border:1.5px solid var(--c27-naranja);border-top:0;border-radius:0 0 10px 10px; box-shadow:0 30px 60px -28px rgba(18,21,32,.45); display:grid;grid-template-columns:repeat(var(--c27-cols,4),1fr) 250px;gap:20px;padding:20px 20px 22px; opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:20} .c27-seccion:hover .c27-panel,.c27-seccion:focus-within .c27-panel{opacity:1;visibility:visible;transform:translateY(0)} .c27-panel h6{margin:0 0 9px;font-family:var(--c27-titulos);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c27-naranja);font-weight:500} .c27 .c27-panel a{display:block;font-size:13px;color:#5A5A5A;text-decoration:none;padding:5px 0;font-weight:500;border-bottom:1px solid #F5F6F9} .c27-panel a:last-child{border-bottom:0} .c27 .c27-panel a:hover{color:var(--c27-naranja)} .c27 .c27-panel a.c27-mas{color:var(--c27-naranja);font-weight:800;border-bottom:0;padding-top:8px} .c27-promo{background:#F6F7FA;border:1px solid var(--c27-linea);border-radius:14px;padding:10px;align-self:start} .c27-promo img{width:100%;border-radius:8px;display:block;border:1px solid var(--c27-linea)} .c27-promo .c27-et{display:block;margin-bottom:7px} /* ---------- lupa e idioma ---------- */ .c27-herram{margin-left:auto;display:flex;align-items:center;gap:8px;padding-right:6px;position:static} .c27-lupa{width:40px;height:40px;border:0;background:none;color:var(--c27-naranja); display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .15s ease,opacity .15s ease} .c27-lupa:hover,.c27-lupa[aria-expanded="true"]{transform:scale(1.08)} .c27-lupa:focus-visible{outline:2px solid var(--c27-naranja);outline-offset:3px;border-radius:6px} /* ni borde ni fondo: solo el icono */ .c27-lupa,.c27-lupa:hover,.c27-lupa:active,.c27-lupa[aria-expanded="true"]{background:none!important;border:0!important;box-shadow:none!important} .c27-idioma{display:flex;align-items:center;gap:6px;border:1px solid var(--c27-linea);border-radius:999px;padding:7px 12px; font-family:var(--c27-titulos);font-size:14px;font-weight:500;color:var(--c27-grafito);letter-spacing:.06em;cursor:pointer} .c27-idioma-caja{position:relative} .c27-idioma{background:#fff;cursor:pointer} .c27-idioma i{font-style:normal;font-size:10px;opacity:.7} .c27-idiomas{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:#fff; border:1px solid var(--c27-linea);border-radius:12px;box-shadow:0 22px 44px -22px rgba(18,21,32,.5);min-width:170px;display:none;z-index:40} .c27-idioma-caja.c27-abierto .c27-idiomas{display:block} .c27-idiomas li{margin:0} .c27 .c27-idiomas a{display:block;padding:8px 11px;border-radius:8px;font-size:13.5px;color:var(--c27-grafito);text-decoration:none;font-weight:600} .c27 .c27-idiomas a:hover{background:var(--c27-crema);color:var(--c27-marron)} .c27-idiomas li.c27-act a{background:var(--c27-crema);color:var(--c27-marron)} .c27-buscador{position:absolute;right:6px;top:52px;background:#fff;border:1px solid var(--c27-linea);border-radius:12px; box-shadow:0 22px 44px -22px rgba(18,21,32,.5);padding:10px 14px;width:420px;display:none;align-items:center;gap:10px;z-index:30} .c27-buscador input{border:0;outline:0;font-size:14px;width:100%;color:var(--c27-tinta);background:transparent} .c27-buscador .wti-s,.c27-buscador form{width:100%} .c27-marco.c27-buscando .c27-buscador{display:flex} /* ---------- al bajar: se queda todo, un poco más compacto ---------- */ .c27.c27-compacta .c27-fila1{padding:6px 22px} .c27.c27-compacta .c27-escudo img{width:56px;height:56px} /* 1.15.1: el tamaño sale del panel Estilos (--r-acceso-s / --r-menu-s), un poco menor; antes era un número fijo que ganaba al panel y al fijarse la cabecera las pastillas crecían y se partían (Angel). */ .c27.c27-compacta .c27-pastilla{font-size:calc(var(--r-acceso-s, 20px) * .92);padding:4px 8px} .c27.c27-compacta .c27-fila2{padding-bottom:8px} .c27.c27-compacta .c27-marco{height:40px} .c27.c27-compacta .c27-seccion>a{font-size:calc(var(--r-menu-s, 16px) * .94);padding:0 13px} /* ---------- tablet y móvil ---------- */ @media (max-width:1200px){ .c27-seccion>a{padding:0 11px;font-size:12px} .c27-accesos{max-width:320px} .c27-accesos.c27-acc-5, .c27-accesos.c27-acc-6{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:320px} .c27-accesos.c27-acc-5 a:last-child, .c27-accesos.c27-acc-6 a:nth-child(5), .c27-accesos.c27-acc-6 a:nth-child(6){margin-left:10px} } /* ---------- escritorio: las piezas del móvil no pintan nada ---------- La barra no hace caja (el escudo sigue siendo parte de la fila 1) y los botones, la copia de los accesos del cajón y las flechas de las secciones van ocultos. */ @media (min-width:1201px){ .c27-pegado,.c27-barra{display:contents} .c27-botones,.c27-accesos-cajon,.c27-abre,.c27-banner-movil{display:none} } /* Barra de administración (sesión abierta): la cabecera se pega debajo de ella, no por detrás. En el escritorio la barra de WordPress mide 32 px. */ @media (min-width:783px){ .admin-bar .c27{top:32px} } /* ---------- móvil y tableta (hasta 1200 px desde la 1.15.0; antes 1024) ---------- 2026-09-26 · 1.14.0. Antes: la cabecera de escritorio envuelta (348 px al entrar, 307 px pegada al bajar, con las líneas del menú pintadas encima del contenido). Ahora: [escudo] [PLANES] [FIESTAS] [lupa] [≡] <- barra, 60 px (1.16.0) [============ banner 400×100 ============] <- de lado a lado (1.17.0: también fijo) 1.17.0: barra y banner se quedan pegados arriba al bajar, como un solo bloque (.c27-pegado): la cabecera y su fila 1 dejan de hacer caja (display:contents) y el bloque se pega a la página entera. El alto no cambia al bajar (sin saltos). El menú (la misma