/* Theme Name: Gipsy Henna Theme URI: https://gipsyhenna.com Author: Blackline Author URI: https://blacklinemkt.com Description: Tema de bloques a medida para Gipsy Henna BCN — bridal mehndi for Indian & South Asian destination weddings. EN-first, portfolio-driven. Version: 0.2.0 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: gipsy-henna */ /* --------------------------------------------------------------- Páginas interiores — hero, tarjetas y listas Las interiores eran una columna de texto plana sobre crema. Esto les da el mismo lenguaje editorial que la home. --------------------------------------------------------------- */ /* Eyebrow: rótulo pequeño en versalitas sobre los títulos de sección */ .gh-eyebrow{ font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--wp--preset--color--accent); margin:0 0 .6rem; } .gh-hero .gh-eyebrow{color:var(--wp--preset--color--gold)} /* Listas con marcador de henna en vez del punto por defecto */ .gh-ticks{list-style:none;padding-left:0;margin:0} .gh-ticks li{ position:relative; padding-left:2.1rem; margin-bottom:1rem; line-height:1.6; } .gh-ticks li::before{ content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.7rem; border:1px solid var(--wp--preset--color--gold); border-radius:50%; background: radial-gradient(circle at center, var(--wp--preset--color--accent) 0 35%, transparent 36%); } /* Sobre fondo oscuro el marcador necesita subir de luminosidad */ .gh-on-dark .gh-ticks li::before{ background: radial-gradient(circle at center, var(--wp--preset--color--gold) 0 35%, transparent 36%); } /* Tarjeta de paquete: la foto manda, el texto acompaña */ .gh-card figure{margin:0} .gh-card img{ width:100%; height:clamp(260px,30vw,380px); object-fit:cover; display:block; } .gh-card h3{margin:1.1rem 0 .4rem} .gh-card .gh-meta{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--accent); margin:.6rem 0 0; } /* Franja de datos: cifras grandes para credibilidad B2B */ .gh-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2rem; text-align:center; } .gh-stat strong{ display:block; font-family:var(--wp--preset--font-family--display); font-weight:400; font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; color:var(--wp--preset--color--gold); } .gh-stat span{ display:block; margin-top:.7rem; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; } /* Tablas: la de capacidad se veía como una hoja de cálculo */ .wp-block-table table{border-collapse:collapse;width:100%} .wp-block-table td, .wp-block-table th{ border-left:0; border-right:0; border-top:0; } .wp-block-table th{ font-family:var(--wp--preset--font-family--body); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-align:left; padding:.9rem 1rem; border-bottom:1px solid rgba(124,59,18,.35); } .wp-block-table td{ padding:.9rem 1rem; border-bottom:1px solid rgba(124,59,18,.12); } .wp-block-table tr:last-child td{border-bottom:none} /* --------------------------------------------------------------- Header oscuro con el lockup de marca El logo es oro sobre transparente: sobre crema la filigrana del mandala se lava (queda casi invisible), sobre marron lee nitido. --------------------------------------------------------------- */ .gh-header{ position:relative; z-index:10; border-bottom:1px solid rgba(59,36,20,.12); } .gh-header .wp-block-site-logo img{ width:248px; max-width:100%; height:auto; display:block; } .gh-header .wp-block-navigation a{ color:var(--wp--preset--color--primary); text-decoration:none; } .gh-header .wp-block-navigation a:hover, .gh-header .wp-block-navigation .current-menu-item a{ color:var(--wp--preset--color--accent); } /* Selector de idioma. Va pegado al menu, no dentro de el: en movil el menu colapsa en overlay y el idioma tiene que seguir visible. */ .gh-header .gh-nav-wrap{ gap:1.6rem; } .gh-lang{ display:inline-block; padding:.32rem .62rem; border:1px solid rgba(59,36,20,.28); color:var(--wp--preset--color--primary); font-family:var(--wp--preset--font-family--body); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; line-height:1; white-space:nowrap; } .gh-lang:hover{ border-color:var(--wp--preset--color--accent); color:var(--wp--preset--color--accent); } /* wpautop envuelve la salida del shortcode en un

pelado, sin clase. Sin esto arrastra el margen de parrafo y engorda la cabecera. */ .gh-header .gh-nav-wrap > p, .gh-header .wp-block-shortcode{ margin:0; } /* Boton hamburguesa y overlay en movil */ .gh-header .wp-block-navigation__responsive-container-open, .gh-header .wp-block-navigation__responsive-container-close{ color:var(--wp--preset--color--primary); } .gh-header .wp-block-navigation__responsive-container.is-menu-open a{ color:var(--wp--preset--color--primary); font-size:1.15rem; } /* Overlay movil. El bloque nav lleva justifyContent:right para alinear el menu a la derecha en la barra de escritorio, y eso le pone la clase `items-justified-right`. Al abrirse el overlay el nucleo pasa la lista Y CADA ITEM a flex-direction column, con lo que el eje horizontal lo gobierna `align-items`, no `justify-content`: los items quedaban pegados al borde derecho y los largos ("FOR WEDDING PLANNERS") se salian de la pantalla cortados. Por eso el centrado se fuerza con align-items, y solo dentro del overlay. */ .gh-header .wp-block-navigation__responsive-container.is-menu-open{ padding:5rem 1.5rem 3rem; } .gh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .gh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right{ width:100%; align-items:center; justify-content:flex-start; gap:1.5rem; } .gh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ width:100%; align-items:center; justify-content:center; text-align:center; } .gh-header .wp-block-navigation__responsive-container.is-menu-open a{ display:inline-block; max-width:100%; } .gh-header .wp-block-navigation__responsive-container-close{ padding:.4rem; } /* El selector de idioma vive fuera del nav precisamente para seguir accesible con el menu colapsado, pero el overlay va a z-index 100000 y lo tapaba (comprobado con elementFromPoint). Se eleva mientras el menu esta abierto. `has-modal-open` la pone el nucleo en el . */ .has-modal-open .gh-header .gh-lang{ position:relative; z-index:100001; } @media (max-width:781px){ .gh-header .wp-block-site-logo img{width:190px} } @media (max-width:420px){ .gh-header .wp-block-site-logo img{width:155px} } /* Footer: mismo lockup, menu completo del sitio */ .gh-footer-logo img{max-width:294px;height:auto} .gh-footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.5rem; } .gh-footer-nav a{ color:var(--wp--preset--color--base); text-decoration:none; white-space:nowrap; } .gh-footer-nav a:hover{color:var(--wp--preset--color--gold)} /* Los separadores colgaban al final de linea cuando el menu envuelve */ .gh-footer-nav span{display:none} /* --------------------------------------------------------------- Journal: archivo en tarjetas y cuerpo del post --------------------------------------------------------------- */ .gh-journal .wp-block-post-template{gap:var(--wp--preset--spacing--50)} .gh-journal .wp-block-post-featured-image{overflow:hidden} .gh-journal .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .gh-journal li:hover .wp-block-post-featured-image img{transform:scale(1.04)} .gh-journal .wp-block-post-title a{ text-decoration:none; color:var(--wp--preset--color--primary); } .gh-journal .wp-block-post-title a:hover{color:var(--wp--preset--color--accent)} .gh-journal .wp-block-post-excerpt__more-link{ display:inline-block; margin-top:.8rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--accent); } /* Cuerpo del articulo: medida corta y respiracion de lectura larga */ .gh-prose p{ font-size:1.12rem; line-height:1.85; } .gh-prose h2{margin-top:2.6em} .gh-prose h3{margin-top:2em} .gh-prose li{line-height:1.8} /* El blockGap (1.6rem) se colaba como franja de fondo entre el header y el hero y entre cada dos bandas a sangre. El espaciado real lo dan los paddings de cada seccion; donde SI queremos aire, va como margen inline en el propio bloque y ese gana por especificidad. */ .wp-site-blocks > * + *{margin-block-start:0} .alignfull + *, * + .alignfull{margin-block-start:0} main.wp-block-group > * + *{margin-block-start:0} /* --------------------------------------------------------------- Tiles de servicios de la home: la tarjeta entera es enlace --------------------------------------------------------------- */ .gh-tile{position:relative;overflow:hidden} /* WP pone position:relative en el contenedor interno del cover, asi que el enlace estirado solo cubriria la franja del texto. Lo llevamos a ocupar el tile entero manteniendo la etiqueta abajo y centrada. */ .gh-tile .wp-block-cover__inner-container{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:var(--wp--preset--spacing--40); } .gh-tile .wp-block-cover__image-background{transition:transform .7s ease} .gh-tile:hover .wp-block-cover__image-background{transform:scale(1.05)} .gh-tile-label{margin:0} .gh-tile-label a{ color:inherit; text-decoration:none; display:inline-block; padding-bottom:.35rem; border-bottom:1px solid transparent; } /* El pseudo-elemento cubre el tile entero: click en cualquier punto */ .gh-tile-label a::after{ content:""; position:absolute; inset:0; } .gh-tile:hover .gh-tile-label a{border-bottom-color:var(--wp--preset--color--gold)} .gh-tile-label a:focus-visible{outline:2px solid var(--wp--preset--color--gold);outline-offset:4px} /* --- Videos verticales (henna natural, baby shower). Grabados con movil a 606x1080, asi que a ancho completo se ven enormes y pixelados. --- */ .gh-video-vertical{margin-left:auto;margin-right:auto;max-width:min(320px,80vw)} .gh-video-vertical video{width:100%;height:auto;display:block;border-radius:2px} .gh-video-vertical figcaption{text-align:center;font-size:.85rem;opacity:.8;margin-top:.8rem} /* dentro de una banda oscura el pie hereda el crema del grupo, no hace falta color */ /* Paginas legales (privacidad). Hero sin foto: el eyebrow tiene que ir en oro igual que en los cover, y el cuerpo pide medida de lectura mas corta. */ .gh-hero-plain .gh-eyebrow{color:var(--wp--preset--color--gold)} .gh-legal{max-width:44rem} .gh-legal h2{ margin-top:2.8rem; margin-bottom:.8rem; font-size:1.35rem; font-weight:400; color:var(--wp--preset--color--primary); } .gh-legal p,.gh-legal li{line-height:1.75} .gh-legal ul{margin:0 0 1.2rem;padding-left:1.2rem} .gh-legal li{margin-bottom:.6rem} /* El enlace legal del pie va en el oro de su propia linea, no en el naranja de enlace por defecto: sobre el marron del pie ese naranja se apaga. */ .gh-footer .has-gold-color a{color:inherit;text-decoration:underline;text-underline-offset:.2em} .gh-footer .has-gold-color a:hover{color:var(--wp--preset--color--base)} /* --------------------------------------------------------------- Firma de Blackline. La web entera va de lineas trazadas a mano, asi que el credito no es una linea de texto: es una linea mas. Un trazo de henna cruza el pie de izquierda a derecha y desemboca en el filete vertical dorado que en el logotipo de Blackline separa el monograma del nombre. El trazo horizontal es de ella, el vertical es nuestro, y se tocan. El trazo se dibuja solo, y se vuelve a dibujar al pasar por encima. Cero JavaScript: el estado declarado es el final, asi que si la animacion no corre queda la linea entera. Coincidencia que vale la pena usar: el oro de Blackline (#c8a46a) y el de Gipsy Henna (#c9a24a) se separan en dos digitos. Se usa el de la casa, que ya esta en la paleta. --------------------------------------------------------------- */ .gh-signature{ margin-top:var(--wp--preset--spacing--50); padding-top:var(--wp--preset--spacing--40); border-top:1px solid rgba(201,162,74,.2); } .gh-signature__claim{ margin:0 0 1.15rem; text-align:center; font-size:.8rem; line-height:1.7; letter-spacing:.03em; color:var(--wp--preset--color--gold); /* .85 y no menos: a .72 el oro mezclado con el marron del pie da 4,26:1 y este texto son 12,8 px, o sea que se queda por debajo del 4,5:1 de AA. A .85 da 5,39:1. El oro a pleno sobre este fondo es 6,94:1. */ opacity:.85; } .gh-signature__mark{ display:flex; align-items:center; gap:.9rem; max-width:32rem; margin:0 auto; color:var(--wp--preset--color--gold); text-decoration:none; transition:color .35s ease; } .gh-signature__stroke{ flex:1 1 60px; min-width:0; height:20px; display:block; overflow:visible; } /* pathLength="1" normaliza la longitud del trazo: el dash no depende de la curva que haya dibujada, asi que se puede cambiar el path sin recalcular. Se dibuja por tiempo y no con animation-timeline:view(). Se probo con view() y en una pagina sin scroll que gastar (la de gracias, que es corta) el trazo se quedaba congelado a media linea, que parece un fallo de carga. El pie va siempre por debajo del pliegue: quien llega ahi lo encuentra ya trazado, y quien aterriza en una pagina corta lo ve dibujarse. El estado declarado es el final, asi que si la animacion no corre, la linea sale entera. */ .gh-signature__stroke path{ stroke-dasharray:1; stroke-dashoffset:0; animation:gh-trace 1.9s cubic-bezier(.22,.61,.36,1) .25s backwards; } /* Al pasar por encima se vuelve a trazar: es el momento en que alguien esta mirando el credito de verdad. */ .gh-signature__mark:hover .gh-signature__stroke path, .gh-signature__mark:focus-visible .gh-signature__stroke path{ animation:gh-trace 1.2s cubic-bezier(.22,.61,.36,1); } @keyframes gh-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .gh-signature__rule{ flex:0 0 auto; width:1px; height:1.4em; background:currentColor; opacity:.85; } .gh-signature__word{ flex:0 0 auto; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; white-space:nowrap; } .gh-signature__mark:hover, .gh-signature__mark:focus-visible{color:var(--wp--preset--color--base)} .gh-signature__mark:focus-visible{outline:2px solid var(--wp--preset--color--gold);outline-offset:8px} @media (prefers-reduced-motion:reduce){ .gh-signature__stroke path{animation:none;stroke-dashoffset:0} } /* --------------------------------------------------------------- Botones outline — misma caja que los solidos El nucleo genera CSS propio por cada variacion de estilo de bloque (block-style-variation-styles, las clases is-style-outline--2, --3...) y ese bloque se imprime DESPUES de global-styles, asi que pisaba el padding del theme.json y dejaba los outline en 42 px de alto frente a los 58 de los solidos, con la mitad de aire a los lados. Se veia en cualquier pareja CTA + secundario. Aqui se devuelve la caja del tema restando el borde de 2 px para que las alturas cuadren al pixel. --------------------------------------------------------------- */ .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button .wp-block-button__link.is-style-outline{ padding:calc(1.15rem - 2px) calc(2.25rem - 2px); } /* --------------------------------------------------------------- Cabeceras de seccion sobre bloque ancho — gh-wide-head En un grupo con layout "constrained", los hijos sin alinear se quedan en contentSize (720 px) y salen CENTRADOS dentro del grupo, mientras que el hijo con alignwide ocupa los 1320 px enteros. El resultado es que el antetitulo y el H2 aparecen sangrados 300 px respecto a la tabla, la galeria o la rejilla que presentan, y se lee como un fallo de maquetacion. Pasaba en 13 secciones de 7 paginas, en ingles y en espanol (auditoria 26-ago-2026). Aqui se conserva la MEDIDA de lectura (los mismos 720 px, asi que los cortes de linea no cambian) y solo se suelta el centrado, de forma que el texto arranca en el mismo borde izquierdo que su bloque. Hace falta !important porque la regla del nucleo (.is-layout-constrained > :where(...)) declara los margenes como "auto !important", asi que la especificidad sola no basta. Es la misma trampa que con los botones outline de mas arriba. --------------------------------------------------------------- */ .wp-block-group.gh-wide-head > :not(.alignwide):not(.alignfull):not(.aligncenter){ margin-left:0 !important; margin-right:auto !important; } /* --------------------------------------------------------------- Tira de portfolio de la home — gh-strip Banda a sangre de fotos verticales que avanza sola en bucle, entre el hero y el primer bloque de texto (27-ago-2026). POR QUE UNA TIRA Y NO UN CARRUSEL A PANTALLA COMPLETA: el trabajo de mehndi es vertical (antebrazos, manos, pies). Un hero apaisado obliga a recortar justo lo que hay que ensenar. La tira convierte esa limitacion en formato y ensena nueve piezas en el sitio donde antes solo habia una. LAS FOTOS VAN loading="eager" fetchpriority="low", NO diferidas, y no es un descuido: medido el 27-ago-2026, dentro de un track con animacion de transform el diferido nativo no se dispara de forma fiable. Con lazy se quedaban 12 de 18 sin cargar despues de 10 segundos con la tira a la vista, y la banda se veia vacia; forzando eager llegan las 18 en 3 segundos. Por eso las fotos se rebajaron antes a 440 px de ancho (uploads/tira/, 424 KB las nueve, frente a 1,16 MB de los derivados de 576). El fetchpriority bajo evita que compitan con el hero, que es el LCP. CERO JAVASCRIPT, a proposito, como el resto del sitio: - el bucle es una animacion CSS sobre un track DUPLICADO; se desplaza -50% y al terminar vuelve a 0, que es el mismo fotograma, asi que no se ve el salto. - el boton de pausa es un checkbox oculto con su label. WCAG 2.2.2 exige poder parar cualquier movimiento automatico de mas de 5 s, y :hover no vale porque deja fuera a quien navega con dedo o con teclado. El checkbox si es enfocable y lo anuncia el lector. OJO AL GAP: la separacion entre fotos va como margin-inline-end de cada item, NO como gap del flex. Con gap, el ancho del track es 18w + 17g y la mitad exacta cae en medio de una separacion, asi que el bucle da un saltito de medio hueco en cada vuelta. Con margin, cada item mide w+m y el 50% cae siempre en un borde. --------------------------------------------------------------- */ /* Desde el 27-ago-2026 la tira ES el hero de la home: va pegada a la cabecera, sin aire arriba, y el titular vive debajo sobre crema (gh-lede). Sustituye al cover a 94vh, cuya foto tapaba las manos con el H1, dejaba el tercio superior en mar vacio y llevaba una playa con banistas de fondo. */ .gh-strip{ background:var(--wp--preset--color--contrast); padding:0 0 var(--wp--preset--spacing--30); overflow:hidden; } .gh-strip__viewport{overflow:hidden} .gh-strip__track{ display:flex; width:max-content; margin:0; padding:0; list-style:none; animation:gh-strip-slide 64s linear infinite; } .gh-strip__item{ flex:0 0 auto; /* Como hero pide presencia, pero con tope: a 300 px de ancho la banda medía 634 px y en un portatil de 900 el titular de debajo no asomaba. A 270 se queda en 580 y el H1 entra en la primera pantalla. */ inline-size:clamp(160px,17vw,270px); margin-inline-end:6px; } .gh-strip__item img{ display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; /* Mientras la foto no ha llegado, el hueco se ve como un bloque henna y no como un agujero en la banda oscura. Las fotos son diferidas y la tira se mueve, asi que siempre hay un momento con alguna sin cargar. */ background:#4a2c18; } @keyframes gh-strip-slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* Pausa al pasar el raton por encima. NO se usa :focus-within, y es a proposito: al pulsar el boton para reanudar, el foco se queda en el checkbox, asi que la regla mantenia la tira parada mientras la etiqueta ya decia "Pause". El control explicito de abajo cubre el teclado, que es para lo que estaba :focus-within. Detectado al probarlo, 27-ago-2026. */ .gh-strip:hover .gh-strip__track{animation-play-state:paused} /* El checkbox real: fuera de la vista pero enfocable y anunciable */ .gh-strip__pause-input{ position:absolute; width:1px;height:1px; margin:-1px;padding:0;border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } .gh-strip__pause-input:checked ~ .gh-strip__viewport .gh-strip__track{ animation-play-state:paused; } .gh-strip__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.8rem 2rem; margin-top:var(--wp--preset--spacing--30); padding:0 var(--wp--preset--spacing--30); } .gh-strip__foot a, .gh-strip__pause{ font-family:var(--wp--preset--font-family--body); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--wp--preset--color--gold); text-decoration:none; cursor:pointer; } .gh-strip__foot a:hover, .gh-strip__pause:hover{color:var(--wp--preset--color--base)} /* Diana tactil de 44 px sin engordar la tipografia */ .gh-strip__pause{ display:inline-flex; align-items:center; min-height:44px; padding:0 .2rem; } .gh-strip__pause-off{display:none} .gh-strip__pause-input:checked ~ .gh-strip__foot .gh-strip__pause-on{display:none} .gh-strip__pause-input:checked ~ .gh-strip__foot .gh-strip__pause-off{display:inline} /* El foco vive en un input invisible: se pinta sobre su label */ .gh-strip__pause-input:focus-visible ~ .gh-strip__foot .gh-strip__pause{ outline:2px solid var(--wp--preset--color--gold); outline-offset:4px; } /* Sin animacion: la tira pasa a ser una galeria que se arrastra a mano, se esconde el duplicado (contenido repetido sin bucle que lo justifique) y desaparece el boton de pausa, que ya no pausa nada. */ @media (prefers-reduced-motion:reduce){ .gh-strip__track{animation:none} .gh-strip__viewport{overflow-x:auto;scroll-snap-type:x mandatory} .gh-strip__item{scroll-snap-align:center} .gh-strip__clone{display:none} .gh-strip__pause{display:none} } /* --------------------------------------------------------------- Pie: bloque de contacto en columnas — gh-contact Sustituye a la linea suelta de email + Instagram (27-ago-2026). POR QUE SE REHIZO, con la medida delante: el email y el Instagram iban en #a8501b sobre el marron #2c1a0f y daban 3,03:1, o sea que los dos unicos datos de contacto del sitio eran lo MENOS legible de todo el pie, por debajo del aviso de copyright, y no llegaban al 4,5:1 de WCAG AA. El naranja esta calculado para el fondo crema (ahi da 5,05:1 y esta bien); sobre el marron no sirve. Ahora el dato va en crema (19,3:1) y la etiqueta en oro (6,9:1). Y se anade la ficha de Google, que hasta hoy solo existia en el sameAs del JSON-LD: 60 resenas de cinco estrellas declaradas a las maquinas e invisibles para una persona, en un negocio que es 70% wedding planners, que es justo quien baja al pie a verificar. --------------------------------------------------------------- */ .gh-contact{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--wp--preset--spacing--40); max-width:1100px; margin:var(--wp--preset--spacing--50) auto 0; padding:0 var(--wp--preset--spacing--30); text-align:center; } .gh-contact__col{ display:flex; flex-direction:column; align-items:center; gap:.55rem; padding-inline:var(--wp--preset--spacing--20); border-inline-start:1px solid rgba(201,162,74,.22); } .gh-contact__col:first-child{border-inline-start:0} .gh-contact__icon{ display:block; width:26px;height:26px; color:var(--wp--preset--color--gold); } .gh-contact__label{ margin:0; font-family:var(--wp--preset--font-family--body); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--wp--preset--color--gold); } .gh-contact__val{ margin:0; font-size:.95rem; line-height:1.5; color:var(--wp--preset--color--base); } .gh-contact__val a{ color:var(--wp--preset--color--base); text-decoration:none; border-bottom:1px solid rgba(201,162,74,.5); padding-bottom:1px; } .gh-contact__val a:hover{ color:var(--wp--preset--color--gold); border-bottom-color:var(--wp--preset--color--gold); } .gh-contact__social{ display:flex; align-items:center; justify-content:center; gap:.5rem; } /* 44x44 de diana tactil con un icono de 24: el aire va en el padding */ .gh-contact__social a{ display:inline-flex; align-items:center; justify-content:center; width:44px;height:44px; color:var(--wp--preset--color--base); border:0; } .gh-contact__social a:hover{color:var(--wp--preset--color--gold)} .gh-contact__social svg{width:24px;height:24px;display:block} .gh-contact__social a:focus-visible, .gh-contact__val a:focus-visible{ outline:2px solid var(--wp--preset--color--gold); outline-offset:3px; } /* A dos columnas antes de que los datos se partan: con cuatro columnas el correo se rompe a media direccion por debajo de los 900 px */ @media (max-width:900px){ .gh-contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wp--preset--spacing--40) var(--wp--preset--spacing--30)} .gh-contact__col:nth-child(odd){border-inline-start:0} } /* En movil se MANTIENEN las dos columnas. Apilarlas a una dejaba el pie en 1.400 px, 1,66 pantallas de un movil de 844, cuando antes eran 792. El unico dato que no cabe a esa medida es el correo, asi que se le deja partir por donde sea en vez de estirar la columna. Medido el 27-ago-2026. */ @media (max-width:480px){ .gh-contact{gap:var(--wp--preset--spacing--30) .9rem;padding:0 .9rem} .gh-contact__col{padding-inline:0;gap:.4rem} .gh-contact__icon{width:22px;height:22px} .gh-contact__label{font-size:.65rem;letter-spacing:.12em} .gh-contact__val{font-size:.85rem;overflow-wrap:anywhere} } /* --------------------------------------------------------------- Pie: el menu pasa a ser un