/* ========================================================================== Hambone Comedy · lo que cambia en WordPress -------------------------------------------------------------------------- hambone.css es la hoja de la estática, copiada tal cual. Esta la adapta al marcado de Elementor, que difiere en tres cosas y solo en tres: 1. Cada widget va dentro de un
envoltorio, y la clase de la maqueta va en ESE div: `

…`, `
`, `
`. Aquí se le dice al hijo que herede o que llene a su padre. 2. Los contenedores de Elementor son flex en columna con reglas de dos clases (0,2,0): la dirección y el `flex` hay que pedirlos con `.e-con.x`. 3. `.e-con .elementor-widget.elementor-widget` (0,3,0) quita el margen de abajo a todos los widgets: se devuelve donde la estática lo tenía. Lo que NO hay aquí: colores, tamaños o espacios nuevos. Todo sale de los tokens de hambone.css. Si algo se ve distinto de la estática, el fallo está en esta hoja. ========================================================================== */ /* ── 0 · Página ─────────────────────────────────────────────────────────── */ /* La cabecera fija: Elementor la mete en su propio
, que mide lo mismo que ella, así que el `sticky` va en el envoltorio. */ .elementor-location-header { position: sticky; top: 0; z-index: 100; } .admin-bar .elementor-location-header { top: 32px; } .hb-menu-w, .hb-menu-w > .elementor-shortcode { display: contents; } /* ── 1 · Titulares, textos e imágenes: el hijo hereda de su envoltorio ──── */ /* Lo que la estática daba a todo h1…h6 y el envoltorio no tiene. Sin peso: la clase manda. */ :where(.elementor-widget-heading) { font-family: var(--hb-f-display); line-height: 0.9; } .elementor-widget-heading[class*="v2-"] > .elementor-heading-title, .elementor-widget-heading[class*="hb-"] > .elementor-heading-title { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; white-space: inherit; text-wrap: inherit; margin: 0; } /* Elementor da `line-height: 1` a todo titular; la estática, 0,9 (h1…h3). */ .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title { line-height: 0.9; } /* El título de las tarjetas «Work with us» tomaba el tamaño de su

. */ .hb-ww > .hb-poster { font-size: var(--hb-s-x-large); } /* Un párrafo seguido de algo lleva su 1rem de la estática aunque sea el último de su widget; las excepciones van justo debajo. */ .elementor-widget-text-editor:not(:last-child) > p:last-child { margin-bottom: 1rem; } .e-con .elementor-widget-text-editor.elementor-widget:is(.hb-colophon, .hb-mb-25, .hb-muted, .hb-eyebrow) > p, :is(.v2-socio, .v2-formato) > .elementor-widget-text-editor.elementor-widget > p { margin: 0; } /* Las imágenes: `img { display:block }` de la estática, que Elementor pasa a inline-block. */ .elementor-widget-image img { display: block; } .elementor-widget-image[class*="v2-"] a, .elementor-widget-image[class*="hb-"] a { display: block; } /* Las que llenan su caja (fondos, héroe, marco, fondo de tarjeta). */ .v2-fondo img, .v2-hero__foto img, .v2-whats__marco img, .hb-ww__fondo img { width: 100%; height: 100%; object-fit: cover; } .v2-hero__foto img { object-position: 70% 30%; } @media (max-width: 700px) { .v2-hero__foto img { object-position: 72% 20%; } } /* Las que en la estática llevaban la clase en el y ahora la lleva el div. */ .v2-whats__comica img, .v2-whats__jamon img, .hb-ww__recorte img, .v2-lista__comico img, .v2-siguenos__comico img, .v2-mosaico img { width: 100%; height: auto; } .v2-pie__logo img { width: 100%; } .hb-ww__sello .hb-ww__tinder img { width: 13rem; } .elementor.elementor .e-con > .hb-ww__recorte { max-width: none; } /* ── 2 · Contenedores ───────────────────────────────────────────────────── */ /* Un contenedor de Elementor mide `width: 100%`; un bloque de la estática, `auto`. Con margen negativo o lateral (el panel de About) no es lo mismo. */ .e-con:is([class*="v2-"], [class*="hb-"]) { --width: auto; min-width: auto; } /* Y `min-width: 0` en cada widget: un «25%» se partía en dos líneas al encoger. */ .e-con > .elementor-widget { min-width: auto; } /* Donde la estática tenía un bloque normal (un
, un
), el contenedor también lo es: en flex los márgenes de dos hermanos se SUMAN en vez de solaparse, y cada bloque de texto salía 16 px más separado. Los que llevan rejilla o fila propia (`hb-wrap v2-whats__rejilla`…) no entran. */ .e-con.hb-wrap:not([class*="__"]), .e-con.v2-seccion, .e-con.hb-section, .e-con.hb-plantilla, .e-con.v2-whats__texto, .e-con.v2-intro__panel, .e-con.v2-lista__texto, .e-con.v2-banda__caja, .e-con.v2-siguenos__texto, .e-con.v2-upcoming__lista, .e-con.v2-agenda__lista, .e-con.v2-teja__texto, .e-con.hb-header, .e-con.hb-footer, .e-con.v2-mosaico-w, .e-con.hb-loop-item { display: block; } .e-con.v2-botones, .e-con.v2-cifra, .e-con.v2-pie__fila, .e-con.hb-header__inner, .e-con.v2-gafas { flex-direction: row; } .e-con.v2-botones, .e-con.v2-pie__fila, .e-con.hb-header__inner { flex-wrap: wrap; } .e-con.v2-cifra, .e-con.v2-gafas { flex-wrap: nowrap; } /* Dos botones dentro de un

, separados por un espacio (404 y Thank you): en línea, y el espacio lo pone el salto de línea que hay entre los dos widgets. */ .e-con.hb-botones-linea { display: block; } .hb-botones-linea > .elementor-widget { display: inline-block; } /* «Who we are»: cada lente era un

  • de ancho fijo. */ .e-con.v2-gafas__lente { --lente: clamp(6rem, 25vw, 13rem); position: relative; flex: 0 0 var(--lente); width: auto; display: grid; justify-items: center; align-content: start; gap: 0.6rem; text-align: center; } .v2-gafas__lente + .v2-gafas__lente { margin-left: clamp(0.75rem, 2.5vw, 2rem); } /* El puente de las gafas, colgado de la cara (el ::before del contenedor es de Elementor). */ .v2-gafas__lente + .v2-gafas__lente > .v2-gafas__cara::before { content: ""; position: absolute; top: calc(var(--lente) / 2 - 0.5rem); right: 100%; width: clamp(0.75rem, 2.5vw, 2rem); height: 1rem; background: var(--hb2-oro); border-radius: 4px; } /* «What we do»: la foto en su marco (era
    ). */ .v2-formato__figura { margin: 1.5rem 0 0; padding: 0.6rem; border: 2px solid rgb(0 0 0 / 0.35); border-radius: 14px; } .v2-formato__figura img { width: 100%; max-width: 13rem; height: auto; border-radius: 10px; } /* ── 3 · Márgenes y anchos que Elementor anula ─────────────────────────── */ /* `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` (0,4,0) pisa todo `max-width` de la estática puesto en un envoltorio. Se devuelven. */ .elementor.elementor .e-con > .v2-equipo__texto { max-width: 52rem; } .elementor.elementor .e-con > :is(.v2-video__enlace, .v2-agenda__banner) { max-width: 80rem; } .elementor.elementor .e-con > .v2-siguenos__comico { max-width: 44rem; } .elementor.elementor .e-con > .hb-lede { max-width: 46ch; } .elementor.elementor .e-con > .hb-ww__texto { max-width: 30ch; } .elementor.elementor .e-con > .v2-cifra__txt { max-width: 9rem; } .elementor.elementor .e-con > .hb-formulario--contacto { max-width: 53rem; } .elementor.elementor .v2-galeria .e-con > .hb-muted { max-width: 40rem; } @media (max-width: 760px) { .elementor.elementor .e-con > .v2-siguenos__comico { max-width: 24rem; } .elementor.elementor .e-con > .v2-lista__comico { max-width: 18rem; } } .e-con > .elementor-widget.elementor-widget.v2-titulo { margin-block-end: var(--hb-sp-40); } .e-con.v2-banda__caja > .elementor-widget.elementor-widget.v2-titulo { margin-block-end: 0; } .e-con.v2-lista__texto > .elementor-widget.elementor-widget.v2-titulo { margin-block-end: 1.25rem; } .e-con.v2-intro__panel > .elementor-widget.elementor-widget.v2-titulo { margin-block-end: 1rem; } .e-con > .elementor-widget.elementor-widget.v2-siguenos__titulo { margin-block-end: 0.5rem; } .e-con > .elementor-widget.elementor-widget.hb-mb-25 { margin-block-end: 2.5rem; } .e-con > .elementor-widget.elementor-widget.v2-agenda__banner { margin-block-end: 1.5rem; } .v2-galeria .e-con > .elementor-widget.elementor-widget.hb-muted { margin-block-end: 1.5rem; } /* ── 4 · Botones: el aspecto de .hb-btn sobre el de Elementor ──────── */ .boton .elementor-button { display: inline-block; font-family: var(--hb-f-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; background: linear-gradient(180deg, var(--hb2-amarillo) 0%, var(--hb2-oro) 100%); color: var(--hb-ink); fill: currentColor; border: 1px solid var(--hb2-amarillo); border-radius: 5px; padding: 0.95rem 1.6rem 0.85rem; transition: filter 0.2s var(--hb-ease), transform 0.2s var(--hb-ease); } .boton .elementor-button:hover, .boton .elementor-button:focus { filter: brightness(1.08); color: var(--hb-ink); text-decoration: none; transform: translateY(-2px); } .boton .elementor-button:visited { color: var(--hb-ink); } .boton .elementor-button:focus-visible { outline: 3px solid var(--hb-c-glow); outline-offset: 3px; } .boton--outline .elementor-button, .boton--outline .elementor-button:visited { background: transparent; color: var(--hb2-amarillo); border-color: var(--hb2-amarillo); } .boton--outline .elementor-button:hover, .boton--outline .elementor-button:focus { background: var(--hb2-amarillo); color: var(--hb-ink); } .boton--claro .elementor-button, .boton--claro .elementor-button:visited { color: var(--hb-c-contrast); border-color: var(--hb-c-contrast); } .boton--claro .elementor-button:hover, .boton--claro .elementor-button:focus { background: var(--hb-c-contrast); color: var(--hb-ink); } .hb-ww .boton .elementor-button { background: linear-gradient(180deg, var(--hb-c-glow), var(--hb-c-gold) 55%); color: var(--hb-ink); border-radius: 4px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.35); } /* ── 5 · Shows: el aviso cuando no hay ninguna fecha publicable ────────── */ /* Es el «Nothing found message» del Loop Grid, con el aspecto de .hb-sin-fechas. */ .hb-shows .e-loop-nothing-found-message { color: inherit; text-align: start; padding: 0; } .hb-shows .e-loop-nothing-found-message__text { margin: 0; padding: 1.5rem; border: 2px dashed currentColor; border-radius: 4px; opacity: 0.85; } .v2-upcoming__lista .hb-shows .e-loop-nothing-found-message__text { margin: 1.5rem 0.5rem; } .v2-agenda__lista .hb-shows .e-loop-nothing-found-message__text { margin: 1rem; } /* ── 6 · Formularios (widget Form de Elementor Pro) con el aspecto de .hb-form ── */ .hb-formulario .elementor-form-fields-wrapper { display: grid; gap: 1rem; margin: 0; } .hb-formulario .elementor-form-fields-wrapper > div:not(.elementor-field-group) { display: none; } /* la trampa */ .hb-formulario .elementor-form-fields-wrapper > .elementor-field-group { display: grid; gap: 0.4rem; align-content: start; width: auto; max-width: none; margin: 0; padding: 0; } .hb-formulario .elementor-field-group > .elementor-field-label:not(.elementor-screen-only) { padding: 0; margin: 0; font-family: var(--hb-f-ui); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hb-c-muted); } .hb-formulario .elementor-field-group .elementor-field-textual, .hb-formulario .elementor-field-group select { box-sizing: border-box; width: 100%; min-height: 0; font-family: var(--hb-f-body); font-size: 1rem; line-height: normal; color: var(--hb-c-contrast); background: rgba(10, 10, 10, 0.42); border: 2px solid rgba(247, 241, 232, 0.45); border-radius: 2px; padding: 0.85rem 1rem; transition: border-color 0.15s var(--hb-ease), background 0.15s var(--hb-ease); } .hb-formulario .elementor-field-group textarea.elementor-field-textual { min-height: 9rem; resize: vertical; } .hb-formulario .elementor-field-group .elementor-field-textual:focus, .hb-formulario .elementor-field-group select:focus { border-color: var(--hb-c-gold); outline: 0; } .hb-formulario .elementor-field-textual::placeholder { color: rgba(247, 241, 232, 0.65); } /* El consentimiento: la casilla y su texto (era