/* Sistema de diseno 2027 — welcometoibiza.com Creado 2026-09-18 · v1.14.0 Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket). Aqui viven los valores del sistema. Ninguna plantilla nueva inventa un color, un tipo ni una medida: los coge de aqui. Todos estos valores salen de medir la web de Angel, no de un catalogo. Esta hoja NO pinta nada por si sola: solo declara. */ :root{ /* ---------- color ---------- */ --wti-naranja:#F57C00; /* el de la marca, 20 anos */ --wti-naranja-fuerte:#E06E00; --wti-marron:#7A5238; /* el segundo de la marca */ --wti-tinta:#1B1512; /* el negro de la casa, calido */ --wti-gris:#8A817B; /* texto secundario */ --wti-gris-claro:#A79C93; /* fechas, apoyos */ --wti-crema:#F2E6D8; /* pastillas y paneles. Medido en los botones de produccion */ --wti-crema-borde:#FFF4E5; --wti-crema-hover:#EADBC7; --wti-crema-fondo:#FBF7F2; /* fondo de los bloques alternos */ --wti-linea:#E8E2DA; /* filete fino */ --wti-linea-suave:#F0EAE2; --wti-foto-fondo:#F3EFEA; /* mientras carga una foto */ /* ---------- tipos ---------- */ --wti-titulos:"Oswald","Archivo Narrow",Impact,sans-serif; --wti-botones:"Bebas Neue","Oswald",Impact,sans-serif; --wti-texto:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; /* ---------- medidas ---------- */ --wti-ancho:1280px; /* el contenido, siempre */ --wti-margen:22px; /* aire lateral dentro del ancho */ --wti-radio:14px; /* tarjetas */ --wti-radio-chico:10px; /* pastillas y fotos pequenas */ --wti-foto:2 / 1; /* TODAS las fotos. 420x210 en origen */ } /* ========================================================================== Piezas que se repiten. Se usan tal cual en cualquier plantilla nueva. ========================================================================== */ /* El contenedor de siempre: 1280 centrado con su aire. */ .wti-dentro{ max-width:var(--wti-ancho); margin:0 auto; padding-left:var(--wti-margen); padding-right:var(--wti-margen); box-sizing:border-box; } /* Cabecera de bloque. La MISMA en todos los bloques de la web: ▪ TITULO ▪ [VER TODOS] el lema, en su propia linea enlace · enlace · enlace ────────────────────────────────────────────────────────────── El lema va DEBAJO del titulo, no al lado. Al lado solo funciona si el lema es corto: en cuanto pasa de una linea se parte y queda colgando del titulo, sin alinear con nada. Debajo se compone igual sea corto o largo, que es lo que tiene que hacer una cabecera. El enlace de accion se queda arriba a la derecha, a la altura del titulo. */ .wti-cabeza{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 22px; padding-bottom:14px; border-bottom:2px solid var(--wti-tinta); } .wti-cabeza .wti-titulo{ order:1; flex:none; margin:0; font-family:var(--wti-titulos); font-weight:400; font-size:30px; line-height:36px; color:var(--wti-naranja); text-transform:uppercase; } .wti-cabeza .wti-lema{ /* Linea propia: se pone delante del enlace de accion y empuja al resto. */ order:3; /* Sin max-width: con un tope, el navegador ve que el lema cabe al lado del titulo y no lo baja de linea, por mucho que pidamos el 100%. */ flex:0 0 100%; max-width:none; margin:9px 0 0; font-size:15px; font-weight:600; /* en negrita: es el subtitulo del bloque */ line-height:1.55; color:var(--wti-gris); } /* El enlace "ver todos" de un bloque. UNA sola regla para toda la web: la misma en la portada, en las portadas de seccion y en los listados. Antes estaba escrita cuatro veces (q27, n27, n27b, t27) y el dia que se tocara una las otras tres se quedaban atras. Es una llamada a la accion, asi que es la pastilla de la casa: naranja sobre blanco en reposo; al pasar por encima, marron sobre crema. El color BAJA. */ /* Va con a.wti-enlace y con !important en color y borde porque el kit de Elementor trae `.elementor-kit-99596 a{color:#963C00}`, que pesa lo mismo que una clase suelta y ganaba: el enlace salia en marron oscuro. */ a.wti-enlace, .wti-enlace{ display:inline-block; padding:9px 22px; border:1.5px solid var(--wti-naranja) !important; border-radius:999px; background:#fff; color:var(--wti-naranja) !important; font-family:var(--wti-titulos); font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; line-height:1.25; white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease; } a.wti-enlace:hover, .wti-enlace:hover{ background:var(--wti-crema-borde); border-color:var(--wti-marron) !important; color:var(--wti-marron) !important; } .wti-enlace span{margin-left:6px} /* Dentro de la cabecera de bloque, siempre pegado al borde derecho. */ .wti-cabeza .wti-enlace{ order:2; flex:none; margin-left:auto; align-self:flex-start; margin-top:2px; } /* Un cuadrado delante y detras del titulo de bloque. Es la marca de la casa en las cabeceras: se pinta con el color del propio titulo, asi que no hay que decidir ningun color aparte. */ .wti-cabeza .wti-titulo{ display:inline-flex; align-items:center; gap:12px; } .wti-cabeza .wti-titulo::before, .wti-cabeza .wti-titulo::after{ content:""; width:9px; height:9px; background:currentColor; flex:none; } /* Foto: SIEMPRE 2:1. */ .wti-foto{ aspect-ratio:var(--wti-foto); overflow:hidden; border-radius:var(--wti-radio-chico); background:var(--wti-foto-fondo); display:block; } .wti-foto img{width:100%;height:100%;object-fit:cover;display:block} /* Pastilla: el boton de la casa. Reposo naranja sobre blanco; al pasar por encima, marron sobre crema. El color BAJA, no sube. */ .wti-pastilla{ display:inline-block; padding:9px 22px; border:1.5px solid var(--wti-naranja) !important; border-radius:999px; background:#fff; color:var(--wti-naranja) !important; font-family:var(--wti-titulos); font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:background .18s ease,color .18s ease,border-color .18s ease; } .wti-pastilla:hover{ background:var(--wti-crema-borde); border-color:var(--wti-marron); color:var(--wti-marron); } /* Bloque sobre crema, a todo ancho, con el contenido centrado. */ .wti-bloque-crema{background:var(--wti-crema-fondo)} /* Tarjeta que flota: solo en los bloques sobre crema. Sin lineas ademas de la sombra: una tarjeta con sombra Y linea dice lo mismo dos veces. */ .wti-tarjeta{ background:#fff; border:0; border-radius:var(--wti-radio); box-shadow:0 14px 30px -22px rgba(27,21,18,.55); transition:transform .2s ease,box-shadow .2s ease; } .wti-tarjeta:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -22px rgba(27,21,18,.60); } /* Los bloques que aun traen su propia cabecera (la portada) llevan el mismo cuadrado. Estan aqui, y no en cada hoja, para que no vuelvan a separarse. */ .q27 .q27-titulo, .t27 .t27-titulo, .n27 .n27-titulo, .n27b .n27b-titulo, .w27 .w27-titulo{ display:inline-flex; align-items:center; gap:12px; } .q27 .q27-titulo::before,.q27 .q27-titulo::after, .t27 .t27-titulo::before,.t27 .t27-titulo::after, .n27 .n27-titulo::before,.n27 .n27-titulo::after, .n27b .n27b-titulo::before,.n27b .n27b-titulo::after, .w27 .w27-titulo::before,.w27 .w27-titulo::after{ content:""; width:9px; height:9px; background:currentColor; flex:none; } /* En el pie los titulos son pequenos: cuadrado solo delante y mas fino. */ .f27 .f27-col-titulo{display:inline-flex;align-items:center;gap:8px} .f27 .f27-col-titulo::before{content:"";width:7px;height:7px;background:currentColor;flex:none} /* La fecha del dia, en pastilla negra. Es el unico sitio donde el negro manda: marca "hoy" sin competir con el naranja de la marca. */ .q27 .q27-dia, .t27 .t27-dia{ display:inline-block; margin-bottom:12px; padding:8px 18px; background:var(--wti-tinta); border:2px solid var(--wti-tinta); /* El radio chico de la casa, no el de pastilla: esto es una etiqueta de fecha, no un boton, y a 999 parecia que se podia pulsar. */ border-radius:var(--wti-radio-chico); font-family:var(--wti-titulos); font-size:15px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; /* Con !important porque el kit de Elementor pinta los

con el color de la tinta y la fecha salia negra sobre negro. */ color:#fff !important; } .t27 .t27-dia{align-self:flex-start} /* ========================================================================== Linea de enlaces bajo la cabecera de un bloque. UNA sola para toda la web: las categorias de las noticias y los enlaces de una seccion son el mismo elemento y ahora se ven igual. Sin pastillas, a proposito: una fila de pastillas pesa tanto como el contenido que va debajo, y estas son enlaces de apoyo, no la accion principal del bloque (esa es .wti-enlace). v1.9.0 — Mas visible: 20 px, color tinta y un filete vertical entre uno y otro en vez del puntito. El puntito se perdia y la linea se leia como una nota al pie en vez de como un menu. Hay sitio: son siete categorias y a 20 px ocupan 636 px de los 1.280. ========================================================================== */ /* Cuando la cabecera lleva linea de enlaces, la raya baja: la raya cierra la cabecera ENTERA (titulo, lema y enlaces), no solo el titulo. Asi el orden es siempre el mismo en toda la web: titulo + lema -> linea de enlaces -> RAYA -> contenido Es lo que ya hacia el bloque de noticias; ahora lo hacen todos. */ .wti-cabeza:has(+ .wti-linea){ border-bottom:0; padding-bottom:0; } .wti-cabeza + .wti-linea{ /* Entre dos lineas: una fina arriba y la gruesa de la cabecera abajo. El menu queda encajado y se lee como una pieza, no como texto suelto. */ margin-top:12px; padding-top:13px; padding-bottom:14px; border-top:1px solid var(--wti-linea); border-bottom:2px solid var(--wti-tinta); } .wti-linea{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 26px; margin:0; padding:0; list-style:none; } .wti-linea li{margin:0;padding:0;list-style:none} .wti-linea a{ position:relative; font-family:var(--wti-botones); font-size:20px; font-weight:400; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; color:var(--wti-tinta) !important; text-decoration:none; white-space:nowrap; padding:0 0 2px; border-bottom:2px solid transparent; } .wti-linea a:hover, .wti-linea a:focus-visible{ color:var(--wti-naranja) !important; border-bottom-color:var(--wti-naranja); } /* Un filete vertical entre uno y otro: separa de verdad y hace que la fila se lea como un menu. Vale con enlaces sueltos y con lista. */ .wti-linea a + a::before, .wti-linea li + li > a::before{ content:""; position:absolute; left:-14px; top:.28em; width:1px; height:.86em; background:#D9CFC3; } /* ========================================================================== Texto plegado: se recorta el alto, se difumina el final y un boton lo abre. UNA sola pieza para toda la web: "Bienvenido a Ibiza" en la portada y el texto largo de cada seccion. Importante: el texto NO se quita del HTML. Sale entero desde el primer momento —es el que posiciona— y lo unico que se recorta es el alto. El color del difuminado lo pone cada bloque con --wti-plegado-fondo, porque depende de si el bloque va sobre blanco o sobre crema. ========================================================================== */ .wti-plegado{ position:relative; display:flex; flex-direction:column; align-items:center; } .wti-plegado .wti-plegado-cuerpo{ position:relative; width:100%; max-height:var(--wti-plegado-alto,300px); overflow:hidden; transition:max-height .4s ease; } .wti-plegado.esta-abierto .wti-plegado-cuerpo{max-height:4000px} /* El difuminado que avisa de que hay mas. Es largo y suave a proposito: lo que tiene que verse es el TEXTO desvaneciendose, no una banda de color tapandolo. Con un difuminado corto parece que el texto se acaba ahi; con este se leen dos o tres lineas cada vez mas flojas y queda claro que sigue. El color va en componentes (--wti-plegado-fondo-rgb) porque un degradado que arranca en `transparent` pasa por gris en algunos navegadores. */ .wti-plegado:not(.esta-abierto) .wti-plegado-cuerpo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; background:linear-gradient(180deg, rgba(var(--wti-plegado-fondo-rgb,255,255,255),0) 0%, rgba(var(--wti-plegado-fondo-rgb,255,255,255),.18) 34%, rgba(var(--wti-plegado-fondo-rgb,255,255,255),.62) 68%, rgba(var(--wti-plegado-fondo-rgb,255,255,255),.92) 88%, rgba(var(--wti-plegado-fondo-rgb,255,255,255),1) 100%); pointer-events:none; } /* El boton. Va con !important porque el kit de Elementor pinta TODOS los