/* Theme Name: Wired Theme URI: https://www.wiredbarcelona.com/ Author: Wired Barcelona Description: Tema de bloques de Wired Barcelona: ingeniería de redes y seguridad. Ligero, sin maquetador ni jQuery, editable desde el editor de WordPress. Version: 0.7.3 Requires at least: 6.6 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: wired */ /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; } :where(img) { height: auto; max-width: 100%; } :focus-visible { outline: 2px solid var(--wp--preset--color--green); outline-offset: 2px; } .wp-site-blocks { padding: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } /* ---------- Utilidades ---------- */ .wb-mono, .wb-eyebrow, .wb-caption, .wb-meta { font-family: var(--wp--preset--font-family--mono); } .wb-eyebrow { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--green-text); margin-bottom: 0 !important; } .wb-meta { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-caption { font-size: 0.75rem; color: var(--wp--preset--color--muted); } .wb-lead { font-size: var(--wp--preset--font-size--l); line-height: 1.55; color: var(--wp--preset--color--body); } .wb-placeholder { color: var(--wp--preset--color--muted); } /* ---------- Secciones ---------- */ .wb-section { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; } .wb-section--tight { padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--50) !important; } .wb-paper { background: var(--wp--preset--color--paper); } .wb-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-dark .wb-eyebrow { color: var(--wp--preset--color--green); } .wb-dark .wb-lead, .wb-dark p { color: var(--wp--preset--color--on-dark); } .wb-dark h1, .wb-dark h2, .wb-dark h3, .wb-dark h4, .wb-dark strong { color: var(--wp--preset--color--white); } .wb-dark .wb-meta, .wb-dark .wb-caption, .wb-dark figcaption { color: var(--wp--preset--color--on-dark-muted); } .wb-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--white); } .wb-dark a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--green); } .wb-green { background: var(--wp--preset--color--green); color: var(--wp--preset--color--ink); } .wb-green .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-green .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); } .wb-head { max-width: 760px; } .wb-head > * + * { margin-top: 0.9rem !important; } /* ---------- Botones ---------- */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid currentColor; color: inherit; padding: calc(0.85rem - 1px) calc(1.6rem - 1px); font-weight: 500; } .wb-dark .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--white); border-color: #5C6B66; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--ink); } .wb-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); } .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; } /* ---------- Tarjetas ---------- */ .wb-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; height: 100%; box-sizing: border-box; } .wb-card > * { margin: 0 !important; } .wb-card--accent { border-top: 3px solid var(--wp--preset--color--green); } .wb-card--media { padding: 0; } .wb-card--media > .wb-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; } .wb-card--media > .wb-card__body > * { margin: 0; } .wb-card .wb-card__more { margin-top: auto !important; font-weight: 600; font-size: var(--wp--preset--font-size--s); } .wb-card ul { padding-left: 1.1rem; font-size: var(--wp--preset--font-size--s); line-height: 1.7; color: var(--wp--preset--color--body); } .wb-card p { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); } .wb-card h3 { font-size: 1.375rem; } .wb-card figure { margin: 0; } .wb-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .wb-cards > .wp-block-column, .wb-cards > * { display: flex; flex-direction: column; } .wb-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.5rem; } .wb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .wb-grid > * { margin: 0 !important; } /* Franja oscura con imagen (capa física, destacado) */ .wb-feature { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: stretch; gap: 0 !important; } .wb-feature > figure { margin: 0; min-height: 300px; } .wb-feature > figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .wb-feature > .wb-feature__body { padding: clamp(1.75rem, 4vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; } .wb-feature > .wb-feature__body > * { margin: 0; } /* Dos columnas que se apilan */ .wb-split { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } .wb-split > * { margin: 0 !important; } .wb-split--top { align-items: start; } /* ---------- Cifras ---------- */ .wb-stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1.5rem; } .wb-stats > * { margin: 0 !important; } .wb-stat { border-top: 2px solid currentColor; padding-top: 0.9rem; } .wb-dark .wb-stat { border-top: 1px solid #33413C; } .wb-stat > * { margin: 0 !important; } .wb-stat__label { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); } .wb-dark .wb-stat__label { color: var(--wp--preset--color--on-dark-muted) !important; } .wb-stat__value { font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; margin-top: 0.35rem !important; } .wb-dark .wb-stat__value { color: var(--wp--preset--color--white) !important; } /* ---------- Pasos ---------- */ .wb-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 !important; border-top: 2px solid var(--wp--preset--color--ink); counter-reset: wbstep; } .wb-steps > * { margin: 0 !important; padding: 1.75rem 1.75rem 0 0; counter-increment: wbstep; } .wb-steps > * > * { margin: 0 0 0.75rem !important; } .wb-steps > *::before { content: counter(wbstep, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--green-text); font-size: var(--wp--preset--font-size--s); margin-bottom: 0.75rem; } .wb-steps p { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); } /* ---------- Listas técnicas ---------- */ .wb-specs { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); } .wb-specs li { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); margin: 0; } .wb-tags { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark-muted); } .wb-tags li { margin: 0; } .wb-chips { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .wb-chips li { border: 1px solid #C9D3CF; padding: 0.45rem 0.85rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); margin: 0; } .wb-rows { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid var(--wp--preset--color--line); } .wb-rows li { padding: 0.9rem 0; border-bottom: 1px solid var(--wp--preset--color--line); margin: 0; } /* ---------- Clientes ---------- */ .wb-clients { border-bottom: 1px solid var(--wp--preset--color--line); } .wb-clients__list { display: flex; flex-wrap: wrap; gap: 0.9rem 2.25rem; font-size: 1.125rem; font-weight: 600; color: var(--wp--preset--color--muted); } .wb-clients__list > * { margin: 0 !important; } /* ---------- Cita ---------- */ .wb-quote { border: 0; padding: 0; margin: 0; } .wb-quote p { font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); } .wb-quote cite { font-style: normal; font-size: var(--wp--preset--font-size--m); color: var(--wp--preset--color--body); } /* ---------- FAQ ---------- */ .wb-faq .wp-block-details { border-top: 1px solid #C9D3CF; padding: 1.35rem 0; margin: 0; } .wb-faq .wp-block-details:last-child { border-bottom: 1px solid #C9D3CF; } .wb-faq summary { font-size: 1.1875rem; font-weight: 600; cursor: pointer; } .wb-faq .wp-block-details p { margin-top: 0.9rem; color: var(--wp--preset--color--body); } /* ---------- Cabecera ---------- */ .wb-header { border-bottom: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); position: sticky; top: 0; z-index: 50; } .admin-bar .wb-header { top: 32px; } @media (max-width: 782px) { .admin-bar .wb-header { top: 46px; } } .wb-header__inner { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; } .wb-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--wp--preset--color--ink) !important; font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.02em; white-space: nowrap; } .wb-brand span { font-weight: 400; } .wb-brand img { display: block; height: 44px; width: auto; flex: none; } .wb-footer .wb-brand img { height: 48px; } @media (max-width: 600px) { .wb-brand img { height: 38px; } } .wb-header .wp-block-navigation { flex-grow: 1; font-size: var(--wp--preset--font-size--s); gap: 1.75rem; } .wb-header .wp-block-navigation a { color: var(--wp--preset--color--ink); text-decoration: none; } .wb-header .wp-block-navigation a:hover, .wb-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--green-text); } .wb-header__phone { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--ink) !important; text-decoration: none; white-space: nowrap; } .wb-header .wp-block-button__link { font-size: var(--wp--preset--font-size--s); padding: 0.7rem 1.2rem; min-height: 44px; } @media (max-width: 900px) { .wb-header__phone, .wb-header .wp-block-buttons { display: none; } .wb-header .wp-block-navigation { flex-grow: 0; margin-left: auto; } } .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--white) !important; } .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--white) !important; font-size: 1.375rem; } /* ---------- Pie ---------- */ .wb-footer { background: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--on-dark-muted); font-size: var(--wp--preset--font-size--s); } .wb-footer a { color: var(--wp--preset--color--on-dark-muted); } .wb-footer a:hover { color: var(--wp--preset--color--white); } .wb-footer h2 { font-size: var(--wp--preset--font-size--xs); font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--green); font-weight: 500; } .wb-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .wb-footer .wb-brand { color: var(--wp--preset--color--white) !important; } .wb-footer__cols { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem; } .wb-footer__cols > * { margin: 0 !important; } .wb-footer__bottom { border-top: 1px solid #1E2A26; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; } /* ---------- Formulario (Contact Form 7) ---------- */ .wb-form { background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); padding: clamp(1.5rem, 4vw, 2.25rem); } .wb-form p { color: var(--wp--preset--color--ink) !important; margin: 0 0 1rem; } .wb-form label { font-size: var(--wp--preset--font-size--s); font-weight: 500; display: block; } .wb-form input[type="text"], .wb-form input[type="email"], .wb-form input[type="tel"], .wb-form select, .wb-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 0.75rem; margin-top: 0.35rem; border: 1px solid #9AA6A1; border-radius: 0; background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); min-height: 46px; } .wb-form input[type="submit"] { background: var(--wp--preset--color--green); color: var(--wp--preset--color--ink); border: 0; font: inherit; font-weight: 600; padding: 0.95rem 1.6rem; min-height: 50px; cursor: pointer; width: 100%; } .wb-form input[type="submit"]:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-form .wpcf7-spinner { display: none; } /* ---------- Proyectos ---------- */ .wb-project-card { text-decoration: none; display: flex; flex-direction: column; gap: 0.75rem; } .wb-project-card img, .wb-projects .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block; } .wb-projects .wp-block-post-title { font-size: 1.25rem; margin: 0.5rem 0 0; } .wb-projects .wp-block-post-title a { text-decoration: none; color: inherit; } .wb-projects .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); } /* Imágenes de sección */ .wb-cover-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .wb-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .wb-wide-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; } .wb-4x3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* Hueco para foto pendiente */ .wb-photo-todo { background: var(--wp--preset--color--mist); aspect-ratio: 16 / 9; display: flex !important; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); text-align: center; padding: 1rem; margin: 0 !important; } /* Nota destacada */ .wb-note { background: var(--wp--preset--color--paper); padding: 1.25rem 1.5rem; margin-top: 2rem !important; } .wb-dark .wb-note { background: #17231F; } /* ---------- Ajustes v0.1.2 ---------- */ /* Franja con imagen: la foto rellena el alto del texto, no al revés */ .wb-feature > figure { position: relative; min-height: 320px; } .wb-feature > figure img { position: absolute; inset: 0; height: 100% !important; } @media (max-width: 760px) { .wb-feature > figure { min-height: 0; aspect-ratio: 4 / 3; } } /* Rejilla de 3 columnas fija en escritorio */ @media (min-width: 900px) { .wb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Títulos enlazados en tarjetas y proyectos */ .wb-card h3 a, .wb-project-card h3 a { color: inherit; text-decoration: none; } .wb-card h3 a:hover, .wb-project-card h3 a:hover { color: var(--wp--preset--color--green-text); } .wb-dark .wb-project-card h3 a:hover { color: var(--wp--preset--color--green); } .wb-project-card h3 { font-size: 1.25rem; } .wb-project-card > * { margin: 0 !important; } .wb-project-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } /* Formulario dentro de sección oscura */ .wb-dark .wb-form a { color: var(--wp--preset--color--green-text) !important; } .wb-form .wpcf7-list-item { margin: 0; } .wb-form .wpcf7-acceptance label { font-weight: 400; display: flex; gap: 0.5rem; align-items: flex-start; } .wb-form .wpcf7-acceptance input { margin-top: 0.3rem; } /* Listas con líneas sobre oscuro */ .wb-dark .wb-rows, .wb-dark .wb-rows li { border-color: #33413C; } /* Cifras más contenidas cuando van en media columna */ .wb-split .wb-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); } .wb-split .wb-stat__value { font-size: clamp(1.5rem, 2.4vw, 2rem); white-space: nowrap; } /* Pie: títulos de columna */ .wb-footer h2 { margin: 0 0 1rem; } .wb-footer .wb-footer__cols p { margin-top: 1rem; max-width: 30ch; } /* ---------- v0.1.3: página de servicio ---------- */ .wb-feats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 1px solid var(--wp--preset--color--line); margin-top: 2.5rem !important; } .wb-feats > * { margin: 0 !important; padding: 1.75rem 2rem 1.75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); } .wb-feat > * { margin: 0 !important; } .wb-feat h3 { font-size: 1.1875rem; } .wb-feat p { margin-top: 0.5rem !important; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); } .wb-fw { justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; margin-top: 2.25rem !important; gap: 0.5rem 1rem; } .wb-fw > * { margin: 0 !important; } .wb-fw strong { font-size: 1.125rem; } .wb-zones { margin-top: 1rem !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; } .wb-zones .wb-card h3 { font-size: 1.0625rem; } .wb-green h2 { font-size: var(--wp--preset--font-size--xl); max-width: 30ch; } .wb-green .wb-split { align-items: center; } .wb-head + .wb-grid, .wb-head + .wb-steps, .wb-split + .wb-grid, .wb-split + .wb-split, .wb-head + .wb-feats { margin-top: 2.5rem !important; } .wb-grid + .wb-feature { margin-top: 1.5rem !important; } .wb-faq > h2 { margin-bottom: 1.5rem; } /* ---------- v0.1.4: ficha de proyecto ---------- */ .wb-facts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem 2rem; border-top: 1px solid var(--wp--preset--color--line); padding-top: 1.35rem; margin-top: 1.75rem !important; } .wb-dark .wb-facts { border-color: #33413C; } .wb-facts > * { margin: 0 !important; } .wb-fact > * { margin: 0 !important; } .wb-fact__label { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-dark .wb-fact__label { color: var(--wp--preset--color--on-dark-muted) !important; } .wb-fact__value { font-weight: 500; margin-top: 0.2rem !important; } .wb-dark .wb-fact__value { color: var(--wp--preset--color--white) !important; } .wb-gallery { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; } .wb-gallery > * { margin: 0 !important; } .wb-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .wb-gallery figcaption { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); margin-top: 0.6rem; text-align: left; } .wb-section > .wp-block-group > .wb-wide-img:first-child { margin-top: 0; } .wb-wide-img { margin-top: 2.5rem !important; } .wb-draft-note { background: #FFF4D6; color: #5A4300 !important; padding: 0.9rem 1.25rem; font-size: var(--wp--preset--font-size--s); border-left: 3px solid #C99A00; } /* Esquemas técnicos (wired-esquema-*): se muestran enteros, nunca recortados. */ .wb-wide-img img[src*="wired-esquema"] { aspect-ratio: 16 / 9; object-fit: contain; } .wb-card img[src*="wired-esquema"], .wb-project-card img[src*="wired-esquema"], .wb-projects .wp-block-post-featured-image img[src*="wired-esquema"], .wb-4x3 img[src*="wired-esquema"], .wb-gallery img[src*="wired-esquema"] { object-fit: contain; background: var(--wp--preset--color--ink); } /* Seis pasos: dos filas de tres en lugar de 5 + 1. */ .wb-steps:has(> :nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* ===== 0.3.0 · Componentes de las páginas de servicio ===== */ /* Iconos de línea propios: clase .wb-ico + .wb-ico--nombre (se pintan con mask, toman el color del tema). */ :root { --wbi-shield: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.2-7 10-4-1.8-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); --wbi-audit: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E"); --wbi-firewall: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 9.7h18M3 14.3h18M9 5v4.7M15 9.7v4.6M9 14.3V19'/%3E%3C/svg%3E"); --wbi-segment: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2'/%3E%3Ccircle cx='19' cy='6' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Cpath d='M7 6h10M6 8l5 8M18 8l-5 8'/%3E%3C/svg%3E"); --wbi-lock: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='1.5'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3M12 15v2'/%3E%3C/svg%3E"); --wbi-laptop: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E"); --wbi-pulse: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E"); --wbi-mail: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); --wbi-wifi: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a15 15 0 0120 0M5 12.5a10 10 0 0114 0M8.5 16a5 5 0 017 0'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E"); --wbi-radar: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 12l5.5-5.5'/%3E%3C/svg%3E"); --wbi-plug: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v5M16 3v5M5 8h14v3a7 7 0 01-14 0zM12 18v3'/%3E%3C/svg%3E"); --wbi-rack: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='6' rx='1'/%3E%3Crect x='4' y='11' width='16' height='6' rx='1'/%3E%3Cpath d='M8 6h.01M8 14h.01M7 21h10'/%3E%3C/svg%3E"); --wbi-fiber: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c3-6 6 6 9 0s6 6 9 0'/%3E%3Ccircle cx='3' cy='12' r='1'/%3E%3Ccircle cx='21' cy='12' r='1'/%3E%3C/svg%3E"); --wbi-camera: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='13' height='10' rx='1.5'/%3E%3Cpath d='M16 11l5-3v8l-5-3'/%3E%3C/svg%3E"); --wbi-key: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E"); --wbi-calendar: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='1.5'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); --wbi-display: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); --wbi-speaker: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M17 9a4 4 0 010 6M19.5 6.5a8 8 0 010 11'/%3E%3C/svg%3E"); --wbi-people: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0112 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M15.5 14.4A5 5 0 0121 19'/%3E%3C/svg%3E"); --wbi-doc: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); --wbi-wrench: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 00-5.4 5.2L4 16.8V20h3.2l5.1-5.1a4 4 0 005.2-5.4l-2.6 2.6-2.4-.5-.5-2.4z'/%3E%3C/svg%3E"); --wbi-power: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13h6l-1 8 8-10h-6z'/%3E%3C/svg%3E"); --wbi-globe: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/%3E%3C/svg%3E"); --wbi-signal: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-3M10 20v-7M15 20v-11M20 20V4'/%3E%3C/svg%3E"); --wbi-sites: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M10 6.5h4.5a3 3 0 013 3V14'/%3E%3C/svg%3E"); --wbi-tablet: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); --wbi-printer: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6'/%3E%3Crect x='4' y='9' width='16' height='8' rx='1'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E"); --wbi-check: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); --wbi-alert: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9 15.5H3z'/%3E%3Cpath d='M12 10v4M12 16.5h.01'/%3E%3C/svg%3E"); --wbi-arrow: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E"); --wbi-chart: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E"); --wbi-door: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4a1 1 0 011-1h12a1 1 0 011 1v17M3 21h18'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3C/svg%3E"); } .wb-ico--shield { --ico: var(--wbi-shield); } .wb-ico--mail { --ico: var(--wbi-mail); } .wb-ico--audit { --ico: var(--wbi-audit); } .wb-ico--firewall { --ico: var(--wbi-firewall); } .wb-ico--segment { --ico: var(--wbi-segment); } .wb-ico--lock { --ico: var(--wbi-lock); } .wb-ico--laptop { --ico: var(--wbi-laptop); } .wb-ico--pulse { --ico: var(--wbi-pulse); } .wb-ico--wifi { --ico: var(--wbi-wifi); } .wb-ico--radar { --ico: var(--wbi-radar); } .wb-ico--plug { --ico: var(--wbi-plug); } .wb-ico--rack { --ico: var(--wbi-rack); } .wb-ico--fiber { --ico: var(--wbi-fiber); } .wb-ico--camera { --ico: var(--wbi-camera); } .wb-ico--key { --ico: var(--wbi-key); } .wb-ico--calendar { --ico: var(--wbi-calendar); } .wb-ico--display { --ico: var(--wbi-display); } .wb-ico--speaker { --ico: var(--wbi-speaker); } .wb-ico--people { --ico: var(--wbi-people); } .wb-ico--doc { --ico: var(--wbi-doc); } .wb-ico--wrench { --ico: var(--wbi-wrench); } .wb-ico--power { --ico: var(--wbi-power); } .wb-ico--globe { --ico: var(--wbi-globe); } .wb-ico--signal { --ico: var(--wbi-signal); } .wb-ico--sites { --ico: var(--wbi-sites); } .wb-ico--tablet { --ico: var(--wbi-tablet); } .wb-ico--printer { --ico: var(--wbi-printer); } .wb-ico--check { --ico: var(--wbi-check); } .wb-ico--alert { --ico: var(--wbi-alert); } .wb-ico--arrow { --ico: var(--wbi-arrow); } .wb-ico--chart { --ico: var(--wbi-chart); } .wb-ico--door { --ico: var(--wbi-door); } .wb-ico::before { content: ""; display: block; width: 2rem; height: 2rem; margin-bottom: 1rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .wb-dark .wb-ico::before { background: var(--wp--preset--color--green); } .wb-card.wb-ico::before { margin-bottom: 0.25rem; } /* Lo que vemos → lo que hacemos */ .wb-ps { display: grid !important; border-top: 1px solid var(--wp--preset--color--line); margin-top: 2.5rem !important; } .wb-ps > * { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0.5rem 3rem; padding: 1.35rem 0; border-bottom: 1px solid var(--wp--preset--color--line); margin: 0 !important; align-items: start; } .wb-ps > * > * { margin: 0 !important; position: relative; padding-left: 2rem; } .wb-ps > * > *::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.2rem; height: 1.2rem; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .wb-ps > * > :first-child { --ico: var(--wbi-alert); font-weight: 600; color: var(--wp--preset--color--ink); } .wb-ps > * > :first-child::before { background: var(--wp--preset--color--muted); } .wb-ps > * > :last-child { --ico: var(--wbi-arrow); color: var(--wp--preset--color--body); } .wb-ps > * > :last-child::before { background: var(--wp--preset--color--green-text); } .wb-ps > .wb-ps__head { padding: 0 0 0.75rem; } .wb-ps > .wb-ps__head > * { padding-left: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--green-text); } .wb-ps > .wb-ps__head > *::before { display: none; } @media (max-width: 700px) { .wb-ps > * { grid-template-columns: 1fr; } .wb-ps > .wb-ps__head { display: none !important; } } /* Lista con marcas de verificación */ .wb-checks { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.85rem 2.5rem; } .wb-checks li { position: relative; padding-left: 2rem; margin: 0; } .wb-checks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--wbi-check) center / contain no-repeat; mask: var(--wbi-check) center / contain no-repeat; } .wb-dark .wb-checks li::before { background: var(--wp--preset--color--green); } .wb-head + .wb-checks, .wb-feature__body .wb-checks { margin-top: 1.5rem !important; } .wb-feature__body .wb-checks { grid-template-columns: 1fr; gap: 0.6rem; font-size: var(--wp--preset--font-size--s); } /* Filas imagen + texto: alternas y con fondo */ .wb-feature { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .wb-paper .wb-feature { border-color: transparent; } .wb-feature--rev > figure { order: 2; } @media (max-width: 720px) { .wb-feature--rev > figure { order: 0; } } .wb-feature + .wb-feature { margin-top: 1.5rem !important; } .wb-head + .wb-feature { margin-top: 2.5rem !important; } .wb-feature > figure img[src*="wired-esquema"] { object-fit: contain; background: var(--wp--preset--color--ink); } /* Caso real (sección oscura) */ .wb-case .wb-stats { margin-top: 2rem !important; } .wb-case figure { margin: 0; } .wb-case figure img { width: 100%; display: block; } /* Servicios relacionados */ .wb-related { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin-top: 2rem !important; } .wb-related > * { margin: 0 !important; } .wb-related .wb-card { padding: 1.25rem 1.5rem; gap: 0.35rem; } .wb-related .wb-card h3 { font-size: 1.0625rem; } /* Iconos dentro de las cuadrículas de capacidades */ .wb-feats > .wb-ico::before { width: 1.75rem; height: 1.75rem; margin-bottom: 0.9rem; } /* Etiquetas técnicas en cabeceras oscuras */ .wb-dark .wb-tags { color: var(--wp--preset--color--on-dark-muted); } .wb-head > .wb-tags { margin-top: 1.75rem !important; } /* 0.3.1 · Secciones a sangre pegadas entre sí (sin la franja del block gap entre colores) */ .wp-block-post-content > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Cuadrículas de capacidades: 3, 5, 6 y 9 elementos en filas de tres */ .wb-feats:has(> :nth-child(3):last-child), .wb-feats:has(> :nth-child(5):last-child), .wb-feats:has(> :nth-child(6):last-child), .wb-feats:has(> :nth-child(9):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* Caso real: cifras en 2 × 2 y con salto de línea */ .wb-case .wb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; } .wb-case .wb-stat__value { white-space: normal; } /* ===== 0.4.0 · Bloques de texto con más diseño (tarjetas, pasos, listas, FAQ) ===== */ :root { --wbi-phone: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z'/%3E%3C/svg%3E"); --wbi-mail: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); --wbi-pin: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0114 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); --wbi-plus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --wbi-minus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); --wbi-building: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3'/%3E%3C/svg%3E"); --wbi-health: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); --wbi-school: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5'/%3E%3C/svg%3E"); --wbi-bag: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8V6a3 3 0 016 0v2'/%3E%3C/svg%3E"); --wbi-tv: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 21h8M9 3l3 3 3-3'/%3E%3C/svg%3E"); --wbi-landmark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 18h14M6 18v-7M10 18v-7M14 18v-7M18 18v-7M3 11h18L12 4z'/%3E%3C/svg%3E"); } .wb-ico--phone { --ico: var(--wbi-phone); } .wb-ico--mail { --ico: var(--wbi-mail); } .wb-ico--pin { --ico: var(--wbi-pin); } .wb-ico--plus { --ico: var(--wbi-plus); } .wb-ico--minus { --ico: var(--wbi-minus); } .wb-ico--building { --ico: var(--wbi-building); } .wb-ico--health { --ico: var(--wbi-health); } .wb-ico--school { --ico: var(--wbi-school); } .wb-ico--bag { --ico: var(--wbi-bag); } .wb-ico--tv { --ico: var(--wbi-tv); } .wb-ico--landmark { --ico: var(--wbi-landmark); } /* Tarjetas de capacidades, principios y sectores */ .wb-feats { gap: 1rem !important; border-top: 0 !important; counter-reset: wbfeat; } .wb-feats > * { position: relative; counter-increment: wbfeat; padding: 1.75rem 1.75rem 1.9rem !important; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line) !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .wb-paper .wb-feats > * { background: var(--wp--preset--color--white); } .wb-feats > *::after { content: ""; position: absolute; left: -1px; top: -1px; width: 3rem; height: 3px; background: var(--wp--preset--color--green); } .wb-feats > *:hover { border-color: #B9C6C1 !important; box-shadow: 0 14px 30px -22px rgba(15, 26, 23, .45); transform: translateY(-2px); } .wb-feats > .wb-ico { padding-top: 5.5rem !important; background-image: linear-gradient(var(--wp--preset--color--mist), var(--wp--preset--color--mist)); background-size: 2.75rem 2.75rem; background-position: 1.75rem 1.75rem; background-repeat: no-repeat; } .wb-feats > .wb-ico::before { position: absolute; top: 2.375rem; left: 2.375rem; width: 1.5rem !important; height: 1.5rem !important; margin: 0 !important; } .wb-feats > :not(.wb-ico)::before { content: counter(wbfeat, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--green-text); margin-bottom: 0.9rem; } /* Pasos: tarjetas con número y línea que los une */ .wb-steps { border-top: 0 !important; gap: 1rem !important; } .wb-steps > * { position: relative; padding: 1.75rem !important; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .wb-paper .wb-steps > * { background: var(--wp--preset--color--white); } .wb-steps > *::before { display: flex !important; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--wp--preset--color--green); background: var(--wp--preset--color--white); font-weight: 500; margin-bottom: 1.25rem !important; } .wb-steps > *::after { content: ""; position: absolute; top: 3.1rem; left: 5rem; right: -1rem; height: 1.5px; background: repeating-linear-gradient(90deg, var(--wp--preset--color--green) 0 6px, transparent 6px 12px); z-index: 1; } .wb-steps > :last-child::after, .wb-steps:has(> :nth-child(6):last-child) > :nth-child(3n)::after { display: none; } @media (max-width: 1000px) { .wb-steps > *::after { display: none; } } /* Listas en filas: flecha verde */ .wb-rows li { position: relative; padding-left: 2rem !important; } .wb-rows li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 1rem; height: 1rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--wbi-arrow) center / contain no-repeat; mask: var(--wbi-arrow) center / contain no-repeat; } .wb-dark .wb-rows li::before { background: var(--wp--preset--color--green); } /* Entregables junto al título: tarjeta tipo documento */ .wb-split > .wb-rows, .wb-split > .wb-checks { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line) !important; border-top: 3px solid var(--wp--preset--color--green) !important; padding: 1.25rem 2rem 1.5rem !important; } .wb-paper .wb-split > .wb-rows, .wb-paper .wb-split > .wb-checks { background: var(--wp--preset--color--white); } .wb-split > .wb-rows li:last-child { border-bottom: 0; } .wb-split > .wb-checks { padding-top: 1.75rem !important; } /* Contacto: iconos por línea */ .wb-contact li { padding-left: 2.5rem !important; } .wb-contact li::before { width: 1.35rem; height: 1.35rem; top: 1rem; } .wb-contact li:nth-child(1)::before { --ico: var(--wbi-phone); -webkit-mask-image: var(--wbi-phone); mask-image: var(--wbi-phone); } .wb-contact li:nth-child(2)::before { -webkit-mask-image: var(--wbi-mail); mask-image: var(--wbi-mail); } .wb-contact li:nth-child(3)::before { -webkit-mask-image: var(--wbi-pin); mask-image: var(--wbi-pin); } /* Pasos en lista numerada */ .wb-numbered { counter-reset: wbn; } .wb-numbered li { counter-increment: wbn; padding-left: 3rem !important; } .wb-numbered li::before { content: counter(wbn); -webkit-mask: none; mask: none; background: transparent; width: 1.9rem; height: 1.9rem; top: 0.7rem; border: 1.5px solid var(--wp--preset--color--green); color: var(--wp--preset--color--green-text); font-family: var(--wp--preset--font-family--mono); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } /* Especialidades de la portada: una tarjeta por línea con marca */ .wb-specs { gap: 0.6rem; border-top: 0 !important; } .wb-specs li { position: relative; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line) !important; padding: 0.95rem 1rem 0.95rem 2.6rem !important; } .wb-specs li::before { content: ""; position: absolute; left: 1rem; top: 1.1rem; width: 1rem; height: 1rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--wbi-check) center / contain no-repeat; mask: var(--wbi-check) center / contain no-repeat; } /* Preguntas frecuentes: título a la izquierda y desplegables en tarjeta */ .wb-faq { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.75rem 4rem; align-items: start; } .wb-faq > h2 { grid-row: 1 / span 40; margin: 0 !important; } .wb-faq .wp-block-details { grid-column: 2; border: 1px solid var(--wp--preset--color--line) !important; background: var(--wp--preset--color--white); padding: 0 !important; margin: 0 !important; transition: border-color .2s ease; } .wb-paper .wb-faq .wp-block-details { background: var(--wp--preset--color--white); } .wb-section:not(.wb-paper) .wb-faq .wp-block-details { background: var(--wp--preset--color--paper); } .wb-faq .wp-block-details[open] { border-color: var(--wp--preset--color--green) !important; } .wb-faq summary { list-style: none; position: relative; padding: 1.2rem 3.75rem 1.2rem 1.5rem; font-size: 1.0625rem !important; } .wb-faq summary::-webkit-details-marker { display: none; } .wb-faq summary::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--wbi-plus) center / contain no-repeat; mask: var(--wbi-plus) center / contain no-repeat; transition: transform .2s ease; } .wb-faq .wp-block-details[open] summary::after { -webkit-mask-image: var(--wbi-minus); mask-image: var(--wbi-minus); transform: rotate(180deg); } .wb-faq .wp-block-details > :not(summary) { margin: 0 !important; padding: 0 1.5rem 1.35rem; } @media (max-width: 800px) { .wb-faq { grid-template-columns: 1fr; } .wb-faq > h2 { grid-row: auto; margin-bottom: 0.75rem !important; } .wb-faq .wp-block-details { grid-column: 1; } } /* ===== 0.4.1 · Portada y proyectos ===== */ /* Bloques oscuros que heredaban el fondo blanco de .wb-feature */ .wb-feature.wb-dark { background: var(--wp--preset--color--ink) !important; border-color: transparent !important; } /* Cifras dentro de columnas: pueden partir línea y no se salen */ .wb-split .wb-stat__value, .wb-feature .wb-stat__value { white-space: normal; font-size: clamp(1.25rem, 2vw, 1.75rem); overflow-wrap: anywhere; } /* Listas dentro de tarjetas de servicio: marcas en vez de viñetas */ .wb-card ul { list-style: none; padding-left: 0 !important; } .wb-card ul li { position: relative; padding-left: 1.6rem; } .wb-card ul li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 1rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--wbi-check) center / contain no-repeat; mask: var(--wbi-check) center / contain no-repeat; } .wb-card.wb-ico::before { width: 1.75rem; height: 1.75rem; margin-bottom: 0.25rem; } /* Nota destacada con icono */ .wb-note { position: relative; padding-left: 4.25rem !important; border-left: 3px solid var(--wp--preset--color--green); } .wb-note::before { content: ""; position: absolute; left: 1.5rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -0.75rem; background: var(--wp--preset--color--green-text); -webkit-mask: var(--wbi-building) center / contain no-repeat; mask: var(--wbi-building) center / contain no-repeat; } /* Clientes: separadores */ .wb-clients__list > * { position: relative; } .wb-clients__list > * + *:not(:nth-child(2))::before { content: ""; position: absolute; left: -1.2rem; top: 50%; width: 5px; height: 5px; margin-top: -2px; background: var(--wp--preset--color--green); } /* Tarjetas de proyecto: la foto se acerca al pasar el ratón */ .wb-project-card figure { overflow: hidden; margin: 0; } .wb-project-card img { transition: transform .5s ease; } .wb-project-card:hover img { transform: scale(1.04); } /* Fichas de proyecto: columnas de texto en tarjeta con icono */ .single-portfolio_page .wb-split--top > .wb-head { position: relative; padding: 2rem 2rem 2.25rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .single-portfolio_page .wb-paper .wb-split--top > .wb-head { background: var(--wp--preset--color--white); } .single-portfolio_page .wb-split--top > .wb-head::after { content: ""; position: absolute; left: -1px; top: -1px; width: 3rem; height: 3px; background: var(--wp--preset--color--green); } .single-portfolio_page .wb-split--top { align-items: stretch; gap: 1rem !important; } .single-portfolio_page .wb-split--top > .wb-head.wb-ico { padding-top: 5.75rem; background-image: linear-gradient(var(--wp--preset--color--mist), var(--wp--preset--color--mist)); background-size: 2.75rem 2.75rem; background-position: 2rem 2rem; background-repeat: no-repeat; } .single-portfolio_page .wb-split--top > .wb-head.wb-ico::before { position: absolute; top: 2.625rem; left: 2.625rem; width: 1.5rem; height: 1.5rem; margin: 0; } .single-portfolio_page .wb-split--top > .wb-head .wb-rows li:last-child { border-bottom: 0; } .single-portfolio_page .wb-split--top > .wb-head h2 + .wb-rows { margin-top: 1rem !important; } /* Cifras de cabecera de proyecto: más compactas */ .single-portfolio_page .wb-stat__value { font-size: clamp(1.5rem, 2.4vw, 2.1rem); } /* ===== 0.5.0 · Cabecera nueva, malla y muro de logos ===== */ /* Barra superior */ .wb-topbar { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark-muted); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.02em; } .wb-topbar__inner { max-width: var(--wp--style--global--wide-size, 1280px); margin: 0 auto; padding: 0.55rem var(--wp--style--root--padding-right, 1.5rem) 0.55rem var(--wp--style--root--padding-left, 1.5rem); display: flex; justify-content: space-between; align-items: center; gap: 1rem; box-sizing: content-box; } .wb-topbar__links { display: flex; gap: 1.75rem; } .wb-topbar a { color: var(--wp--preset--color--on-dark) !important; text-decoration: none; } .wb-topbar a:hover { color: var(--wp--preset--color--green) !important; } @media (max-width: 720px) { .wb-topbar__tag { display: none; } .wb-topbar__inner { justify-content: center; } } /* Barra principal: logo a la izquierda, menú y botón a la derecha */ .wb-header__bar { background: var(--wp--preset--color--white); } .wb-header__inner { gap: 1rem 2.75rem !important; padding-top: 1.15rem; padding-bottom: 1.15rem; } .wb-header .wp-block-navigation { flex-grow: 1; justify-content: flex-end; gap: 2.1rem; font-weight: 500; } .wb-header .wp-block-navigation-item > a, .wb-header .wp-block-navigation-submenu > a { position: relative; padding: 0.35rem 0; } .wb-header .wp-block-navigation-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.25rem; height: 2px; background: var(--wp--preset--color--green); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .wb-header .wp-block-navigation-item > a:hover::after, .wb-header .current-menu-item > a::after, .wb-header .current-menu-ancestor > a::after { transform: scaleX(1); } .wb-header__cta { margin: 0 !important; padding-left: 2.25rem; border-left: 1px solid var(--wp--preset--color--line); } .wb-header__phone { display: none; } /* Desplegable de servicios en dos columnas */ @media (min-width: 880px) { .wb-header .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: repeat(2, minmax(230px, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 0.1rem 1.5rem; padding: 3.1rem 1.25rem 1.1rem !important; min-width: 560px !important; background: var(--wp--preset--color--white) !important; border: 1px solid var(--wp--preset--color--line) !important; border-top: 3px solid var(--wp--preset--color--green) !important; box-shadow: 0 24px 48px -28px rgba(15, 26, 23, .45); left: -1.25rem !important; top: 100% !important; margin-top: 0 !important; } .wb-header .wp-block-navigation__submenu-container::before, .wb-header .wp-block-navigation__submenu-container::after { position: absolute; top: 1.15rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--green-text); } .wb-header .wp-block-navigation__submenu-container::before { content: "Redes y seguridad"; left: 1.75rem; } .wb-header .wp-block-navigation__submenu-container::after { content: "Espacios de trabajo"; left: calc(50% + 1.25rem); } .wb-header .wp-block-navigation__submenu-container a { display: block; padding: 0.55rem 0.5rem !important; font-weight: 400; } .wb-header .wp-block-navigation__submenu-container a::after { display: none; } .wb-header .wp-block-navigation__submenu-container a:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--green-text); } } @media (max-width: 1179px) { .wb-header .wb-header__cta { display: none !important; } } /* Malla de red como fondo de las secciones oscuras y la franja verde */ .wb-section.wb-dark, .wb-footer { background-image: url(assets/img/malla-oscuro.svg); background-repeat: no-repeat; background-size: 820px auto; background-position: right -300px top -220px; } .wb-footer { background-position: left -360px bottom -460px; background-size: 760px auto; } .wb-green { background-image: url(assets/img/malla-blanca.svg); background-repeat: no-repeat; background-size: 460px auto; background-position: right -140px center; } @media (max-width: 720px) { .wb-section.wb-dark { background-size: 520px auto; background-position: right -260px top -160px; } } /* Muro de logos (clientes y marcas) */ .wb-logos { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 0.75rem; } .wb-head + .wb-logos { margin-top: 2rem !important; } .wb-logos > * { margin: 0 !important; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .wb-logos img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter .25s ease, opacity .25s ease; } .wb-logos > *:hover img { filter: none; opacity: 1; } /* 0.5.2 · El desplegable no se cierra al bajar el ratón: la zona activa del elemento llega hasta el panel */ @media (min-width: 880px) { .wb-header .wp-block-navigation-submenu { padding-bottom: 1.15rem; margin-bottom: -1.15rem; } .wb-header .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { transition-delay: 0s, 0.15s !important; } } /* 0.5.3 · Muros de logos sin huérfanos: 16 en 2×8, 14 en 2×7 */ @media (min-width: 1000px) { .wb-logos:has(> :nth-child(16):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); } .wb-logos:has(> :nth-child(14):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media (min-width: 560px) and (max-width: 999px) { .wb-logos:has(> :nth-child(16):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 0.5.4 · Muros de logos en filas centradas: la última fila incompleta queda centrada */ @media (min-width: 1000px) { .wb-logos { display: flex !important; flex-wrap: wrap; justify-content: center; } .wb-logos > * { flex: 0 0 calc((100% - 6 * 0.75rem) / 7 - 1px); box-sizing: border-box; min-width: 0; } .wb-logos:has(> :nth-child(16):last-child) > * { flex-basis: calc((100% - 7 * 0.75rem) / 8 - 1px); } .wb-logos:has(> :nth-child(3):last-child) > * { flex-basis: calc((100% - 6 * 0.75rem) / 7 - 1px); } .wb-logos:has(> :nth-child(3):last-child) { justify-content: flex-start; } } /* 0.5.7 · Galerías de 3, 6 o 9 fotos en filas de 3 */ @media (min-width: 1000px) { .wb-gallery:has(> :nth-child(3):last-child), .wb-gallery:has(> :nth-child(6):last-child), .wb-gallery:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); } } /* 0.5.8 · Fabricantes agrupados por especialidad: una fila por categoría, rejilla común de 9 */ .wb-brands { display: grid; gap: 1.75rem; margin-top: 2.25rem !important; } .wb-brands > * { margin: 0 !important; } .wb-brands__row > * { margin: 0 !important; } .wb-brands__label { color: var(--wp--preset--color--muted) !important; padding-bottom: 0.6rem; border-bottom: 1px solid var(--wp--preset--color--line); margin-bottom: 0.75rem !important; } .wb-brands .wb-logos { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0 !important; } .wb-brands .wb-logos > * { overflow: hidden; flex: none; } .wb-brands .wb-logos img { transform: scale(1.3); } @media (min-width: 700px) { .wb-brands .wb-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1000px) { .wb-brands .wb-logos { grid-template-columns: repeat(9, minmax(0, 1fr)); } } .wb-brands-eyebrow { margin-top: 3rem !important; } /* 0.5.9 · Cabeceras: la foto ocupa la mitad derecha a sangre y se funde con el fondo oscuro (antes era un recuadro claro flotando sobre la malla). Los esquemas (wired-esquema-*) quedan como estaban. */ @media (min-width: 960px) { .wp-block-post-content > .wb-dark:first-child:has(> .alignwide > .wb-split > figure img:not([src*="esquema"])) { position: relative; overflow: hidden; min-height: 540px; display: flex; flex-direction: column; justify-content: center; } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split:has(> figure img:not([src*="esquema"])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: static; } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > .wb-head { position: relative; z-index: 2; } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure:not(:has(img[src*="esquema"])) { position: absolute !important; top: 0; right: 0; bottom: 0; width: 58%; margin: 0 !important; z-index: 1; } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure:not(:has(img[src*="esquema"])) img { width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; filter: brightness(0.86) saturate(0.92) contrast(1.04); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 10%, rgba(0,0,0,0.3) 22%, rgba(0,0,0,0.65) 36%, rgba(0,0,0,0.9) 50%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 10%, rgba(0,0,0,0.3) 22%, rgba(0,0,0,0.65) 36%, rgba(0,0,0,0.9) 50%, #000 62%); } /* Sombra inferior para que la cabecera no corte en seco contra la sección siguiente */ .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure:not(:has(img[src*="esquema"]))::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(15,26,23,0.55) 0%, rgba(15,26,23,0) 28%), linear-gradient(180deg, rgba(15,26,23,0.35) 0%, rgba(15,26,23,0) 18%); } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure figcaption { position: absolute; right: 1.5rem; bottom: 1.1rem; z-index: 2; margin: 0; text-align: right; color: rgba(255,255,255,0.72); } } /* 0.5.11 · Cabeceras en móvil: la foto va a sangre bajo el texto, entra fundida desde arriba y toca la sección siguiente */ @media (max-width: 959px) { .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure:not(:has(img[src*="esquema"])) { margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important; margin-bottom: calc(-1 * var(--wp--preset--spacing--60)) !important; margin-top: 0 !important; } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure:not(:has(img[src*="esquema"])) img { aspect-ratio: 4 / 3; filter: brightness(0.9) saturate(0.94); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 14%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 14%, #000 34%); } .wp-block-post-content > .wb-dark:first-child > .alignwide > .wb-split > figure figcaption { padding: 0 var(--wp--style--root--padding-right) 1rem; } } /* 0.5.12 · Encuadre por foto en las cabeceras: en el rack CommScope tienen que verse los Palo Alto (parte baja) */ .wb-dark img[src*="rack-commscope"] { object-position: 50% 92%; } /* 0.5.13 · Monitorización y NOC: frase de cierre bajo los logos multifabricante */ .wb-noc-claim { margin-top: 2.5rem !important; padding-left: 1.25rem; border-left: 3px solid var(--wp--preset--color--green); color: var(--wp--preset--color--ink) !important; } /* 0.5.15 · Cabecera en tablet: entre 600 y 879 px el menú no cabe junto al logo → hamburguesa (WordPress solo la usa por debajo de 600 px). El botón de la cabecera, solo desde 1180 px. */ @media (min-width: 600px) and (max-width: 879px) { .wb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .wb-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; } .wb-header .wp-block-navigation { flex-grow: 0; margin-left: auto; } } /* 0.5.17 · El desplegable gana «Automatización e IA»: 7 filas en la primera columna y 6 en la segunda */ @media (min-width: 880px) { .wb-header .wp-block-navigation__submenu-container { grid-template-rows: repeat(7, auto); } .wb-header .wp-block-navigation__submenu-container::before { content: "Redes, seguridad e IA"; } } /* 0.5.18 · Preguntas frecuentes: el título ocupa 40 filas para quedar a la izquierda y cada fila vacía sumaba el hueco entre filas (≈430 px en blanco bajo las preguntas). Sin hueco entre filas; las preguntas se separan con margen. */ .wb-faq { row-gap: 0 !important; } .wb-faq .wp-block-details + .wp-block-details { margin-top: 0.75rem !important; } @media (max-width: 800px) { .wb-faq > h2 + .wp-block-details { margin-top: 0.75rem !important; } } /* 0.5.19 · Flujos de ejemplo (Automatización e IA): pasos en mono separados por flechas */ .wb-flow { list-style: none; padding: 0 !important; margin: 1rem 0 0 !important; display: flex; flex-wrap: wrap; row-gap: 0.45rem; } .wb-flow li { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); line-height: 1.5; color: var(--wp--preset--color--ink); } .wb-flow li:not(:last-child)::after { content: "→"; color: var(--wp--preset--color--green-text); margin: 0 0.55rem; } .wb-dark .wb-flow li { color: var(--wp--preset--color--on-dark); } .wb-dark .wb-flow li:not(:last-child)::after { color: var(--wp--preset--color--green); } .wb-card .wb-flow { margin-bottom: 0 !important; } .wb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .wb-head + .wb-grid--2, .wb-grid + .wb-split { margin-top: 2.5rem !important; } /* 0.5.20 · Los flujos dentro de tarjetas no llevan la marca ✓ de las listas de tarjeta */ .wb-card ul.wb-flow li { padding-left: 0; line-height: 1.6; } .wb-card ul.wb-flow li::before { content: none; } /* 0.5.21 · Banda «Diseñamos en capas»: la cadena de capas en grande y las tecnologías debajo */ .wb-layers .wb-flow--layers { margin-top: 0.9rem !important; row-gap: 0.6rem; } .wb-flow--layers li { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--xl); font-weight: 600; letter-spacing: -0.01em; } .wb-flow--layers li:not(:last-child)::after { margin: 0 0.75rem; font-weight: 400; } .wb-layers .wb-chips { margin-top: 1.25rem !important; } .wb-feature__body .wb-flow { margin-bottom: 1rem !important; } /* 0.5.22 · Etiquetas (chips) dentro de tarjetas: sin la marca ✓ de las listas de tarjeta */ .wb-card ul.wb-chips li { padding-left: 0.85rem; } .wb-card ul.wb-chips li::before { content: none; } .wb-card .wb-chips { margin-top: 1rem !important; } /* 0.5.23 · Aire entre un flujo grande y la rejilla de tarjetas que lo sigue */ .wb-flow--layers + .wb-feats, .wb-flow--layers + .wb-grid { margin-top: 2.25rem !important; } .wb-layers .wb-flow--layers + p { margin-top: 1.1rem !important; } /* 0.5.25 · Método de 7 pasos (Cómo trabajamos): 4 + 3 en escritorio */ @media (min-width: 1000px) { .wb-steps:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .wb-layers.wb-dark h2 { max-width: 30ch; } .wb-steps:has(> :nth-child(7):last-child) > :nth-child(4)::after { display: none; } /* 0.5.27 · Menú móvil: alineado a la izquierda, jerarquía clara y servicios compactos */ .wb-header .wp-block-navigation__responsive-container.is-menu-open { padding: 0 !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 1.1rem; right: 1.1rem; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding: 4.25rem 1.5rem 2.5rem !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100%; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; align-items: stretch !important; border-bottom: 1px solid rgba(255, 255, 255, .12); } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a { display: block; width: 100%; padding: 0.95rem 0 !important; font-size: 1.25rem !important; font-weight: 600; line-height: 1.25; text-align: left; } /* Servicios va al final: primero las secciones, luego la lista larga */ .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu { order: 10; border-bottom: 0 !important; padding-top: 1.5rem; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > a { padding: 0 0 0.6rem !important; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs) !important; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #4fd1a5 !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr; gap: 0 !important; padding: 0 0 0 1rem !important; margin: 0 !important; border-left: 2px solid var(--wp--preset--color--green) !important; background: transparent !important; position: static !important; width: 100% !important; min-width: 0 !important; box-shadow: none !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before, .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::after { content: none !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { display: block; padding: 0.5rem 0 !important; font-size: 1rem !important; font-weight: 400; line-height: 1.3; text-align: left; color: rgba(255, 255, 255, .82) !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; } @media (min-width: 480px) { .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { grid-template-columns: 1fr 1fr; column-gap: 1.5rem !important; } } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; align-items: flex-start !important; justify-content: flex-start !important; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { width: 100%; } .wb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > a { font-size: 0.8rem !important; } /* 0.5.28 · WhatsApp: botón flotante */ .wb-wa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.1rem 0.8rem 0.9rem; border-radius: 999px; background: #25D366; color: #0F1A17 !important; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; box-shadow: 0 10px 28px -10px rgba(15, 26, 23, .55); transition: transform .15s ease, box-shadow .15s ease; } .wb-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(15, 26, 23, .6); } .wb-wa:focus-visible { outline: 3px solid #0F1A17; outline-offset: 3px; } @media (max-width: 720px) { .wb-wa { right: 1rem; bottom: 1rem; padding: 0.85rem; } .wb-wa__text { display: none; } } @media print { .wb-wa { display: none; } } @media (max-width: 720px) { .wb-topbar__wa { display: none; } } /* 0.5.29 · Botón de contacto con colores de marca (sin el verde de WhatsApp) */ .wb-wa { background: var(--wp--preset--color--ink, #0F1A17); color: #fff !important; border: 1px solid rgba(255, 255, 255, .14); font-weight: 500; letter-spacing: 0.01em; padding: 0.75rem 1.2rem 0.75rem 1rem; } .wb-wa svg { color: var(--wp--preset--color--green, #00B188); } .wb-wa:hover { background: #17251F; } .wb-wa:focus-visible { outline-color: var(--wp--preset--color--green, #00B188); } @media (max-width: 720px) { .wb-wa { padding: 0.85rem; } } /* 0.5.30 · Aviso de cookies propio (Aceptar / Rechazar) */ #cookie-law-info-bar, #cookie-law-info-again, .cli-modal { display: none !important; } .wb-consent { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 100; width: min(26rem, calc(100vw - 2.5rem)); box-sizing: border-box; padding: 1.25rem 1.25rem 1.1rem; background: var(--wp--preset--color--white, #fff); color: var(--wp--preset--color--ink, #0F1A17); border: 1px solid var(--wp--preset--color--line, #DDE2DF); border-top: 3px solid var(--wp--preset--color--green, #00B188); box-shadow: 0 24px 48px -24px rgba(15, 26, 23, .45); font-size: 0.9rem; line-height: 1.5; } .wb-consent[hidden] { display: none; } .wb-consent__title { margin: 0 0 0.35rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--green-text, #00795E); } .wb-consent__text { margin: 0 0 1rem; } .wb-consent__text a { color: var(--wp--preset--color--green-text, #00795E); } .wb-consent__actions { display: flex; gap: 0.6rem; } .wb-consent__btn { flex: 1; padding: 0.7rem 1rem; border: 1px solid var(--wp--preset--color--ink, #0F1A17); background: var(--wp--preset--color--ink, #0F1A17); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .wb-consent__btn--ghost { background: transparent; color: var(--wp--preset--color--ink, #0F1A17); } .wb-consent__btn:hover { background: #17251F; color: #fff; } .wb-consent__btn:focus-visible { outline: 3px solid var(--wp--preset--color--green, #00B188); outline-offset: 2px; } .wb-consent-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .wb-consent-open:hover { color: var(--wp--preset--color--green, #00B188); } @media (max-width: 720px) { .wb-consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; } } @media print { .wb-consent { display: none !important; } } /* 0.5.31 · Ritmo visual en páginas con mucho texto */ /* Secciones numeradas: «02 / QUÉ CONSTRUIMOS» ayuda a saber en qué parte de la página estás */ .wp-block-post-content { counter-reset: wbsec; } .wp-block-post-content > .wb-section:not(:first-child):has(.wb-head > .wb-eyebrow) { counter-increment: wbsec; } .wp-block-post-content > .wb-section:not(:first-child) .wb-head > .wb-eyebrow::before { content: counter(wbsec, decimal-leading-zero) " /"; font-weight: 600; margin-right: 0.6rem; } /* Tarjetas de capacidades: icono más grande sobre verde suave y línea superior completa */ .wb-feats > .wb-ico { padding-top: 6rem !important; background-image: linear-gradient(#DDF2EA, #DDF2EA); background-size: 3.25rem 3.25rem; } .wb-feats > .wb-ico::before { top: 2.375rem; left: 2.375rem; width: 2rem !important; height: 2rem !important; } .wb-feats > *::after { width: calc(100% + 2px); } .wb-feats > * h3 { font-size: 1.25rem; } .wb-dark .wb-feats > .wb-ico { background-image: linear-gradient(rgba(0,177,136,.16), rgba(0,177,136,.16)); } /* Secciones grises: trama de red muy suave en la esquina */ .wp-block-post-content > .wb-section.wb-paper { position: relative; overflow: hidden; } .wp-block-post-content > .wb-section.wb-paper::before { content: ""; position: absolute; right: -160px; top: -140px; width: 600px; height: 600px; background: url("assets/img/malla-verde.svg") center / contain no-repeat; opacity: 0.22; pointer-events: none; } .wp-block-post-content > .wb-section.wb-paper > * { position: relative; z-index: 1; } @media (max-width: 720px) { .wp-block-post-content > .wb-section.wb-paper::before { width: 360px; height: 360px; right: -140px; top: -120px; } } /* Banda fotográfica a todo lo ancho entre bloques de texto */ .wp-block-post-content > .wp-block-image.wb-band { position: relative; margin-top: 0 !important; margin-bottom: 0 !important; max-width: none; } .wp-block-image.wb-band img { display: block; width: 100% !important; height: clamp(220px, 26vw, 380px) !important; aspect-ratio: auto !important; object-fit: cover; filter: brightness(0.8) saturate(0.9); } .wb-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(15,26,23,.55) 0%, rgba(15,26,23,0) 45%); } .wb-band figcaption { position: absolute; z-index: 1; left: var(--wp--style--root--padding-left, 1.5rem); right: var(--wp--style--root--padding-right, 1.5rem); bottom: 1.1rem; margin: 0 auto !important; max-width: var(--wp--style--global--wide-size, 1280px); text-align: left; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.88); } /* Flujos de ejemplo en tarjetas: cada paso como etiqueta, con la flecha entre etiquetas */ .wb-card ul.wb-flow { row-gap: 0.55rem; align-items: center; } .wb-card ul.wb-flow li { position: relative; padding: 0.3rem 0.6rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); font-size: 0.75rem; line-height: 1.45; } .wb-card ul.wb-flow li:not(:last-child) { margin-right: 1.5rem; } .wb-card ul.wb-flow li:not(:last-child)::after { position: absolute; right: -1.2rem; top: 50%; transform: translateY(-50%); margin: 0; } .wb-card ul.wb-flow li:last-child { border-color: var(--wp--preset--color--green); color: var(--wp--preset--color--green-text); background: #EEF8F4; } /* ---------- Guías ---------- */ .wb-footer .wb-footer__extra { margin-top: 1.25rem; } .wb-guides .wp-block-post-template > li { position: relative; padding: 1.5rem 1.5rem 1.75rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); transition: border-color .2s ease, transform .2s ease; } .wb-paper .wb-guides .wp-block-post-template > li { background: var(--wp--preset--color--white); } .wb-guides .wp-block-post-template > li::before { content: ""; position: absolute; left: -1px; top: -1px; width: 3rem; height: 3px; background: var(--wp--preset--color--green); } .wb-guides .wp-block-post-template > li:hover { border-color: var(--wp--preset--color--green); transform: translateY(-2px); } .wb-guides .wp-block-post-featured-image { margin: -1.5rem -1.5rem 1.25rem; } .wb-guides .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; } .wb-guides .wb-guide__date { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .06em; } .wb-guides .wp-block-post-title { font-size: 1.25rem; margin: 0.4rem 0 0; line-height: 1.3; } .wb-guides .wp-block-post-title a { text-decoration: none; color: inherit; } .wb-guides .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } .wb-guides .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); } .wb-guides .wp-block-post-excerpt__more-link { position: relative; z-index: 1; font-weight: 600; color: var(--wp--preset--color--green-text); text-decoration: none; } .wb-guide__head .wb-eyebrow a { color: inherit; text-decoration: none; } .wb-guide__head .wb-eyebrow a:hover { text-decoration: underline; } .wb-guide__head .wp-block-post-excerpt__excerpt { margin: 0; } .wb-guide > .wp-block-post-content { max-width: 720px; margin-left: auto !important; margin-right: auto !important; } .wb-guide .wp-block-post-content > * { max-width: 100%; } .wb-guide .wp-block-post-content :where(p, li) { font-size: var(--wp--preset--font-size--m); line-height: 1.7; } .wb-guide .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); } .wb-guide .wp-block-post-content h3 { font-size: var(--wp--preset--font-size--l); margin-top: 2rem; } .wb-guide .wp-block-post-content a { color: var(--wp--preset--color--green-text); } .wb-guide .wb-tip { padding: 1.1rem 1.35rem; background: #DDF2EA; border-left: 3px solid var(--wp--preset--color--green); } .wb-guide .wb-tip > * { margin: 0; } .wb-guide .wb-tip > * + * { margin-top: 0.5rem; } .wb-guide .wb-summary { padding: 1.35rem 1.5rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .wb-guide .wb-summary > :first-child { margin-top: 0; } .wb-guide__cta .wb-head { max-width: 720px; margin-left: auto !important; margin-right: auto !important; } /* Autodiagnóstico */ .wb-quiz { max-width: 760px; } .wb-quiz__list { list-style: none; padding: 0; margin: 0; counter-reset: wbq; display: flex; flex-direction: column; gap: 0.75rem; } .wb-quiz__q { counter-increment: wbq; padding: 1.25rem 1.5rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .wb-quiz__q.is-missing { border-color: #C99A00; box-shadow: inset 3px 0 0 #C99A00; } .wb-quiz__q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .wb-quiz__q legend { padding: 0; font-weight: 600; color: var(--wp--preset--color--ink); line-height: 1.45; } .wb-quiz__q legend::before { content: counter(wbq, decimal-leading-zero) " "; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--green-text); margin-right: 0.35rem; } .wb-quiz__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; } .wb-quiz__opts label { position: relative; cursor: pointer; } .wb-quiz__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .wb-quiz__opts span { display: inline-block; padding: 0.45rem 1rem; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--s); transition: border-color .15s ease, background .15s ease; } .wb-quiz__opts label:hover span { border-color: var(--wp--preset--color--green); } .wb-quiz__opts input:checked + span { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-quiz__opts input:focus-visible + span { outline: 2px solid var(--wp--preset--color--green); outline-offset: 2px; } .wb-quiz__progress { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); margin: 1.25rem 0 0.75rem; } .wb-quiz button.wp-block-button__link { cursor: pointer; border: 0; } .wb-quiz__result { margin-top: 2.5rem; padding: 2rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); outline: none; } .wb-quiz__result .wb-eyebrow { color: var(--wp--preset--color--green); margin: 0; } .wb-quiz__score { margin: 0.5rem 0 0; font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700; line-height: 1; color: var(--wp--preset--color--white); } .wb-quiz__score small { font-size: 0.35em; font-weight: 400; color: var(--wp--preset--color--on-dark-muted); margin-left: 0.25rem; } .wb-quiz__verdict, .wb-quiz__risks-title { color: var(--wp--preset--color--white); } .wb-quiz__verdict { margin-top: 1rem; } .wb-quiz__risks { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.9rem; } .wb-quiz__risks li { padding-left: 1rem; border-left: 2px solid var(--wp--preset--color--green); } .wb-quiz__risks strong { display: block; color: var(--wp--preset--color--white); font-weight: 600; } .wb-quiz__risks span { display: block; margin-top: 0.25rem; } .wb-quiz__risks a { display: inline-block; margin-top: 0.35rem; color: var(--wp--preset--color--green); font-weight: 600; text-decoration: none; } .wb-quiz__note { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark-muted); margin-top: 1.5rem; } .wb-quiz__result .wp-block-buttons { margin-top: 1.25rem; } @media (max-width: 600px) { .wb-quiz__q, .wb-quiz__result { padding: 1.1rem 1.15rem; } } .wb-guide__cover { margin: 0 !important; } .wb-guide__cover img { display: block; width: 100%; height: clamp(200px, 24vw, 340px) !important; object-fit: cover; filter: brightness(0.85) saturate(0.9); } .wb-guide .wb-check { position: relative; padding: 1rem 1.25rem 1rem 3.1rem; background: var(--wp--preset--color--paper); border-left: 3px solid var(--wp--preset--color--green); } .wb-guide .wb-check::before { content: ""; position: absolute; left: 1.1rem; top: 1.2rem; width: 1.2rem; height: 1.2rem; background: var(--wp--preset--color--green-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat; } .wb-guide .wb-check strong { color: var(--wp--preset--color--ink); } .wb-quiz-wrap { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 320px); gap: 3rem; align-items: start; } .wb-quiz-wrap > .wb-quiz { grid-column: 1; grid-row: 1; } .wb-quiz__aside { grid-column: 2; grid-row: 1; position: sticky; top: 6rem; padding: 1.75rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-top: 3px solid var(--wp--preset--color--green); } .wb-quiz__aside .wb-eyebrow { margin: 0 0 1rem; } .wb-quiz__aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; } .wb-quiz__aside li { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); padding-left: 1rem; border-left: 2px solid var(--wp--preset--color--line); } .wb-quiz__aside strong { display: block; color: var(--wp--preset--color--ink); } .wb-quiz__aside-note { margin: 1.25rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } @media (max-width: 960px) { .wb-quiz-wrap { grid-template-columns: 1fr; gap: 1.5rem; } .wb-quiz__aside { grid-column: 1; grid-row: auto; position: static; } .wb-quiz__aside ul { display: none; } .wb-quiz__aside { padding: 1rem 1.15rem; } .wb-quiz__aside .wb-eyebrow { display: none; } .wb-quiz__aside-note { margin: 0; } .wb-quiz-wrap > .wb-quiz { grid-row: auto; } } .wb-guide__byline { gap: 0.4rem 1.25rem !important; margin-top: 1.1rem !important; } .wb-guide__byline > * { margin: 0 !important; } .wb-dark .wb-guide__author { color: var(--wp--preset--color--white); } .wb-guide__author:empty { display: none; } .wb-guide__signature { margin-top: 3.5rem !important; padding: 1.5rem 1.75rem; border: 1px solid var(--wp--preset--color--line); border-left: 3px solid var(--wp--preset--color--green); background: var(--wp--preset--color--paper); } .wb-guide__signature > * { margin: 0 !important; } .wb-guide__signature > * + * { margin-top: 0.4rem !important; } .wb-guide .wb-guide__signature .wb-guide__signature-name { font-size: var(--wp--preset--font-size--l); font-weight: 600; color: var(--wp--preset--color--ink); } .wb-guide .wb-guide__signature p:last-child { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); } /* Comprobador de correo */ .wb-mailcheck { max-width: 880px; } .wb-mailcheck__form label { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--muted); margin-bottom: 0.6rem; } .wb-mailcheck__field { display: flex; gap: 0.75rem; flex-wrap: wrap; } .wb-mailcheck__field input { flex: 1 1 260px; min-width: 0; padding: 0.9rem 1rem; font: inherit; font-size: var(--wp--preset--font-size--l); border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); border-radius: 0; } .wb-mailcheck__field input:focus { outline: none; border-color: var(--wp--preset--color--green); box-shadow: 0 0 0 3px rgba(0,177,136,.18); } .wb-mailcheck__field button { cursor: pointer; border: 0; height: 100%; padding-left: 2rem; padding-right: 2rem; } .wb-mailcheck__field button:disabled { opacity: .6; cursor: progress; } .wb-mailcheck__status { min-height: 1.5em; margin: 0.75rem 0 0; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); } .wb-mailcheck__result { margin-top: 2rem; padding: 2rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); outline: none; } .wb-mailcheck__result .wb-eyebrow { color: var(--wp--preset--color--green); margin: 0; word-break: break-all; } .wb-mailcheck__head { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12); } .wb-mailcheck__head .wb-quiz__verdict { margin: 0; } .wb-mailcheck__head p { margin: 0.4rem 0 0; } .wb-mailcheck__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; } .wb-mailcheck__list li { padding: 1rem 1.25rem; background: rgba(255,255,255,.04); border-left: 3px solid #5C6B66; } .wb-mailcheck__list li.is-ok { border-left-color: var(--wp--preset--color--green); } .wb-mailcheck__list li.is-warn, .wb-mailcheck__list li.is-unk { border-left-color: #E0A800; } .wb-mailcheck__list li.is-bad { border-left-color: #E5484D; } .wb-mailcheck__row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .wb-mailcheck__row strong { color: var(--wp--preset--color--white); } .wb-mailcheck__chip { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .06em; padding: 0.15rem 0.55rem; border: 1px solid currentColor; white-space: nowrap; } .is-ok .wb-mailcheck__chip { color: var(--wp--preset--color--green); } .is-warn .wb-mailcheck__chip, .is-unk .wb-mailcheck__chip { color: #F2C14E; } .is-bad .wb-mailcheck__chip { color: #FF8A8E; } .is-info .wb-mailcheck__chip { color: var(--wp--preset--color--on-dark-muted); } .wb-mailcheck__list code { display: block; margin-top: 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark-muted); word-break: break-all; white-space: pre-wrap; } .wb-mailcheck__list p { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--s); } .wb-mailcheck__error { margin: 0; color: #FF8A8E; } .wb-mailcheck__result .wp-block-buttons { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } @media (max-width: 600px) { .wb-mailcheck__result { padding: 1.25rem; } .wb-mailcheck__head { grid-template-columns: 1fr; } } /* Portada · bloque de herramientas */ .wb-tools { display: flex !important; flex-direction: column; gap: 1rem; } .wb-tools > * { margin: 0 !important; } .wb-tools .wb-card { position: relative; padding: 1.5rem 1.75rem; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-top: 3px solid var(--wp--preset--color--green); transition: border-color .2s ease, transform .2s ease; } .wb-tools .wb-card:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--green); } .wb-tools .wb-card > * { margin: 0 !important; } .wb-tools .wb-card > * + * { margin-top: 0.45rem !important; } .wb-tools .wb-meta { font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--green-text); } .wb-tools h3 { font-size: var(--wp--preset--font-size--l); } .wb-tools h3 a { color: inherit; text-decoration: none; } .wb-tools h3 a::after { content: ""; position: absolute; inset: 0; } .wb-tools .wb-card p:last-child { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--body); } /* ---------- Simulador de ataques ---------- */ .wb-atk { --atk-red: #E5484D; --atk-amber: #E0A800; --atk-line: #2A3833; position: relative; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--on-dark); border: 1px solid var(--atk-line); } .wb-atk::before { content: ""; position: absolute; left: -1px; top: -1px; width: 4rem; height: 3px; background: var(--wp--preset--color--green); } .wb-atk .wb-eyebrow { color: var(--wp--preset--color--green); margin: 0; } .wb-atk button { font: inherit; } /* Controles */ .wb-atk__controls-head, .wb-atk__stage-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .wb-atk__presets { display: flex; gap: 0.4rem; } .wb-atk__presets button { cursor: pointer; padding: 0.3rem 0.8rem; background: transparent; color: var(--wp--preset--color--on-dark-muted); border: 1px solid var(--atk-line); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: .06em; } .wb-atk__presets button:hover { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--green); } .wb-atk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.6rem; margin-top: 1rem; } .wb-atk__ctl { position: relative; display: flex; gap: 0.85rem; align-items: center; padding: 0.8rem 1rem; background: rgba(255,255,255,.03); border: 1px solid var(--atk-line); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .wb-atk__ctl:hover { border-color: #3E4F49; } .wb-atk__ctl input { position: absolute; opacity: 0; width: 1px; height: 1px; } .wb-atk__switch { flex: none; position: relative; width: 2.4rem; height: 1.35rem; border-radius: 1rem; background: #33423D; transition: background .2s ease; } .wb-atk__switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--wp--preset--color--on-dark-muted); transition: transform .2s ease, background .2s ease; } .wb-atk__ctl input:checked + .wb-atk__switch { background: var(--wp--preset--color--green); } .wb-atk__ctl input:checked + .wb-atk__switch::after { transform: translateX(1.05rem); background: var(--wp--preset--color--white); } .wb-atk__ctl input:focus-visible + .wb-atk__switch { outline: 2px solid var(--wp--preset--color--green); outline-offset: 3px; } .wb-atk__ctl:has(input:checked) { border-color: rgba(0,177,136,.55); background: rgba(0,177,136,.07); } .wb-atk__ctl-text strong { display: block; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--s); font-weight: 600; } .wb-atk__ctl-text small { display: block; margin-top: 0.1rem; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark-muted); } .wb-atk__stage-head { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--atk-line); } .wb-atk__run { cursor: pointer; border: 0; min-width: 11rem; } .wb-atk.is-running .wb-atk__run { background: var(--atk-red); color: var(--wp--preset--color--white); } /* Ataques (carriles) */ .wb-atk__lanes { display: grid; gap: 0.75rem; margin-top: 1.5rem; } .wb-atk__lane { padding: 1rem 1.25rem 1.1rem; background: rgba(255,255,255,.025); border: 1px solid var(--atk-line); border-left: 3px solid #3A4A44; transition: border-color .3s ease, background .3s ease; } .wb-atk__lane.is-ok { border-left-color: var(--wp--preset--color--green); background: rgba(0,177,136,.045); } .wb-atk__lane.is-warn { border-left-color: var(--atk-amber); background: rgba(224,168,0,.045); } .wb-atk__lane.is-bad { border-left-color: var(--atk-red); background: rgba(229,72,77,.055); } .wb-atk__lane-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; } .wb-atk__code { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid #3A4A44; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--white); } .wb-atk__lane-name strong { display: block; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--m); font-weight: 600; line-height: 1.3; } .wb-atk__lane-name small { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--on-dark-muted); } .wb-atk__chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .wb-atk__chip:empty { display: none; } .wb-atk__chip svg { width: 0.95rem; height: 0.95rem; } .is-ok .wb-atk__chip { color: var(--wp--preset--color--green); } .is-warn .wb-atk__chip { color: #F2C14E; } .is-bad .wb-atk__chip { color: #FF8A8E; } .wb-atk__track { --node: 2.5rem; position: relative; list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.25rem; } .wb-atk__track::before, .wb-atk__progress { position: absolute; top: calc(var(--node) / 2 - 1px); left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; } .wb-atk__track::before { content: ""; background: var(--atk-line); } .wb-atk__progress { margin: 0; padding: 0; } .wb-atk__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(229,72,77,.45), var(--atk-red)); transition: width .85s cubic-bezier(.4,0,.2,1); } .wb-atk__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .4s ease; } .wb-atk__node { display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%; background: var(--wp--preset--color--ink-deep); border: 2px solid #3A4A44; color: var(--wp--preset--color--on-dark-muted); transition: border-color .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; } .wb-atk__node svg { width: 1.15rem; height: 1.15rem; } .wb-atk__title { margin-top: 0.5rem; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark-muted); line-height: 1.3; } .wb-atk__step.is-hit .wb-atk__node { border-color: var(--atk-red); background: rgba(229,72,77,.16); color: #FF8A8E; animation: wbAtkPulse 1s ease-out 1; } .wb-atk__step.is-hit .wb-atk__title, .wb-atk__step.is-blocked .wb-atk__title { color: var(--wp--preset--color--white); } .wb-atk__step.is-blocked .wb-atk__node { border-color: var(--wp--preset--color--green); background: var(--wp--preset--color--green); color: var(--wp--preset--color--ink); box-shadow: 0 0 0 5px rgba(0,177,136,.18), 0 0 24px rgba(0,177,136,.45); } .wb-atk__step.is-recovered .wb-atk__node { border-color: var(--atk-amber); background: rgba(224,168,0,.2); color: #F2C14E; box-shadow: 0 0 20px rgba(224,168,0,.35); animation: none; } .wb-atk__step.is-final .wb-atk__node { background: var(--atk-red); border-color: var(--atk-red); color: var(--wp--preset--color--white); box-shadow: 0 0 0 5px rgba(229,72,77,.2), 0 0 26px rgba(229,72,77,.5); } .wb-atk__step.is-skipped { opacity: .28; } @keyframes wbAtkPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.6); } 100% { box-shadow: 0 0 0 14px rgba(229,72,77,0); } } .wb-atk__outcome { margin: 0.9rem 0 0; font-size: var(--wp--preset--font-size--s); line-height: 1.55; animation: wbAtkIn .35s ease-out; } .wb-atk__outcome:empty { display: none; } .wb-atk__outcome strong { color: var(--wp--preset--color--white); } .wb-atk__depth { color: var(--wp--preset--color--on-dark-muted); } .wb-atk__depth.is-alone { color: #F2C14E; } @keyframes wbAtkIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Resultado global */ .wb-atk__result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; margin-top: 1.25rem; padding: 1.5rem 1.75rem; border: 1px solid var(--atk-line); border-top-width: 3px; outline: none; animation: wbAtkIn .4s ease-out; } .wb-atk__result[hidden] { display: none; } .wb-atk__result.is-ok { border-top-color: var(--wp--preset--color--green); background: rgba(0,177,136,.06); } .wb-atk__result.is-warn { border-top-color: var(--atk-amber); background: rgba(224,168,0,.06); } .wb-atk__result.is-bad { border-top-color: var(--atk-red); background: rgba(229,72,77,.07); } .wb-atk__result p { margin: 0; font-size: var(--wp--preset--font-size--s); } .wb-atk__result p + p { margin-top: 0.4rem; } .wb-atk__verdict { font-size: var(--wp--preset--font-size--xl) !important; font-weight: 600; line-height: 1.2; } .wb-atk__result.is-ok .wb-atk__verdict { color: #5FE0BD; } .wb-atk__result.is-warn .wb-atk__verdict { color: #F2C14E; } .wb-atk__result.is-bad .wb-atk__verdict { color: #FF8A8E; } .wb-atk__result .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; } .wb-atk__note { margin: 1.25rem 0 0; font-size: var(--wp--preset--font-size--xs); color: #6E7D78; } @media (max-width: 900px) { .wb-atk__result { grid-template-columns: 1fr; } } @media (max-width: 600px) { .wb-atk__lane { padding: 0.9rem 0.9rem 1rem; } .wb-atk__lane-head { grid-template-columns: auto 1fr; } .wb-atk__chip { grid-column: 1 / -1; } .wb-atk__track { --node: 2.1rem; } .wb-atk__title { font-size: 0.62rem; } .wb-atk__track.is-long .wb-atk__title-text { display: none; } } @media (prefers-reduced-motion: reduce) { .wb-atk *, .wb-atk *::before, .wb-atk *::after { animation: none !important; transition: none !important; } } /* ---------- Planificador wifi ---------- */ .wb-wifi { position: relative; padding: clamp(1rem, 2.5vw, 2rem); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .wb-wifi::before { content: ""; position: absolute; left: -1px; top: -1px; width: 4rem; height: 3px; background: var(--wp--preset--color--green); } .wb-wifi button { font: inherit; cursor: pointer; } .wb-wifi .wb-eyebrow { margin: 0; } .wb-wifi__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .wb-wifi__presets, .wb-wifi__views { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .wb-wifi__presets .wb-eyebrow { margin-right: 0.4rem; } .wb-wifi__bar button { padding: 0.45rem 0.9rem; background: var(--wp--preset--color--white); border: 1.5px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--s); } .wb-wifi__bar button:hover { border-color: var(--wp--preset--color--green); } .wb-wifi__bar button.is-on { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-wifi__main { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; } .wb-wifi__canvas { position: relative; width: 100%; border: 1px solid var(--wp--preset--color--line); } .wb-wifi__canvas canvas { display: block; touch-action: none; cursor: crosshair; } .wb-wifi__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-wifi__legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .wb-wifi__legend i { display: inline-block; width: 0.9rem; height: 0.9rem; } .wb-wifi__legend i.is-hatch { background: repeating-linear-gradient(45deg, rgba(15,26,23,.55) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--wp--preset--color--line); } .wb-wifi__hint { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-wifi__side { display: flex; flex-direction: column; gap: 1rem; } .wb-wifi__ap { padding: 1rem 1.1rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .wb-wifi__ap p { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--s); } .wb-wifi__field { display: block; margin-top: 0.8rem; font-size: var(--wp--preset--font-size--s); } .wb-wifi__field > span { display: flex; justify-content: space-between; font-weight: 600; color: var(--wp--preset--color--ink); } .wb-wifi__field output { font-family: var(--wp--preset--font-family--mono); font-weight: 400; color: var(--wp--preset--color--green-text); } .wb-wifi__field input[type=range] { width: 100%; margin-top: 0.4rem; accent-color: var(--wp--preset--color--green); } .wb-wifi__field select { width: 100%; margin-top: 0.35rem; padding: 0.4rem 0.5rem; font: inherit; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); } .wb-wifi__ap-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; } .wb-wifi__ap-actions button { padding: 0.35rem 0.7rem; background: transparent; border: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--xs); font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--wp--preset--color--ink); } .wb-wifi__ap-actions button:hover { border-color: var(--wp--preset--color--green); } .wb-wifi__stats { display: flex; flex-direction: column; gap: 0.35rem; } .wb-wifi__stat { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.75rem; align-items: center; padding: 0.55rem 0.8rem; border-left: 3px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); } .wb-wifi__stat.is-good { border-left-color: var(--wp--preset--color--green); } .wb-wifi__stat.is-weak { border-left-color: #F0A828; } .wb-wifi__stat.is-none, .wb-wifi__stat.is-co { border-left-color: #E5484D; } .wb-wifi__stat.is-asym { border-left-color: #55605C; } .wb-wifi__stat-v { font-size: 1.6rem; font-weight: 700; color: var(--wp--preset--color--ink); line-height: 1; font-variant-numeric: tabular-nums; } .wb-wifi__stat-v small { font-size: 0.55em; font-weight: 400; color: var(--wp--preset--color--muted); margin-left: 0.1rem; } .wb-wifi__stat-l strong { display: block; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--ink); } .wb-wifi__stat-l small { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); line-height: 1.35; } .wb-wifi__verdict { padding: 1rem 1.1rem; border: 1px solid var(--wp--preset--color--line); border-top: 3px solid #F0A828; } .wb-wifi__verdict.is-ok { border-top-color: var(--wp--preset--color--green); } .wb-wifi__verdict p { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--s); } .wb-wifi__verdict-title { margin: 0 !important; font-weight: 700; color: var(--wp--preset--color--ink); } .wb-wifi__verdict .wp-block-buttons { margin-top: 0.9rem; } .wb-wifi__note { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } @media (max-width: 1000px) { .wb-wifi__main { grid-template-columns: 1fr; } .wb-wifi__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } } /* ---------- Calculadora de videovigilancia ---------- */ .wb-cctv { position: relative; padding: clamp(1rem, 2.5vw, 2rem); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .wb-cctv::before { content: ""; position: absolute; left: -1px; top: -1px; width: 4rem; height: 3px; background: var(--wp--preset--color--green); } .wb-cctv button, .wb-cctv select { font: inherit; } .wb-cctv .wb-eyebrow { margin: 0; } .wb-cctv__bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .wb-cctv__bar .wb-eyebrow { margin-right: 0.4rem; } .wb-cctv__bar button { cursor: pointer; padding: 0.45rem 0.9rem; background: var(--wp--preset--color--white); border: 1.5px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--s); } .wb-cctv__bar button:hover { border-color: var(--wp--preset--color--green); } .wb-cctv__bar button.is-on { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-cctv__main { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.75rem; align-items: start; } .wb-cctv__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-bottom: 1rem; } .wb-cctv__field { display: block; font-size: var(--wp--preset--font-size--s); } .wb-cctv__field--wide { grid-column: 1 / -1; } .wb-cctv__field > span { display: flex; justify-content: space-between; font-weight: 600; color: var(--wp--preset--color--ink); } .wb-cctv__field output { font-family: var(--wp--preset--font-family--mono); font-weight: 500; color: var(--wp--preset--color--green-text); } .wb-cctv__field select { width: 100%; margin-top: 0.35rem; padding: 0.5rem 0.6rem; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); } .wb-cctv__field input[type=range] { width: 100%; margin-top: 0.5rem; accent-color: var(--wp--preset--color--green); } .wb-cctv__plan { border: 1px solid var(--wp--preset--color--line); } .wb-cctv__plan canvas { display: block; } .wb-cctv__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-cctv__legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .wb-cctv__legend i { display: inline-block; width: 0.9rem; height: 0.9rem; opacity: .75; } .wb-cctv__side { display: flex; flex-direction: column; gap: 1rem; } .wb-cctv__views { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: end; margin-top: 0.6rem; } .wb-cctv__views figure { margin: 0; } .wb-cctv__views canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--wp--preset--color--line); background: #DCE3E0; } .wb-cctv__face { width: 5.2rem !important; } .wb-cctv__views figcaption { margin-top: 0.35rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; color: var(--wp--preset--color--muted); } .wb-cctv__ppm { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.8rem 1rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-cctv__ppm span { font-size: 2.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .wb-cctv__ppm small { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark); } .wb-cctv__dori { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; } .wb-cctv__dori li { display: grid; grid-template-columns: 1.9rem 1fr auto; gap: 0.7rem; align-items: center; padding: 0.45rem 0.75rem; background: var(--wp--preset--color--paper); opacity: .55; } .wb-cctv__dori li.is-ok { opacity: 1; } .wb-cctv__dori b { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; background: var(--c); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); } .wb-cctv__dori strong { display: block; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--ink); } .wb-cctv__dori small { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-cctv__dori em { font-style: normal; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; color: var(--wp--preset--color--muted); } .wb-cctv__dori li.is-ok em { color: var(--wp--preset--color--green-text); font-weight: 600; } .wb-cctv__verdict { padding: 1rem 1.1rem; border: 1px solid var(--wp--preset--color--line); border-top: 3px solid #F0A828; } .wb-cctv__verdict.is-ok { border-top-color: var(--wp--preset--color--green); } .wb-cctv__verdict p { margin: 0.45rem 0 0; font-size: var(--wp--preset--font-size--s); } .wb-cctv__verdict-title { margin: 0 !important; font-weight: 700; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--m) !important; } .wb-cctv__tradeoff { color: var(--wp--preset--color--muted); } .wb-cctv__verdict .wp-block-buttons { margin-top: 0.9rem; } .wb-cctv__note { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } @media (max-width: 1000px) { .wb-cctv__main { grid-template-columns: 1fr; } } @media (max-width: 520px) { .wb-cctv__controls { grid-template-columns: 1fr; } } /* Herramientas en Guías: carrusel horizontal con scroll-snap */ .wb-tools.wb-tools--grid { display: flex !important; flex-direction: row; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.25rem 0; scrollbar-width: none; --fade-l: 3rem; --fade-r: 3rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); } .wb-tools.wb-tools--grid.is-start { --fade-l: 0px; } .wb-tools.wb-tools--grid.is-end { --fade-r: 0px; } .wb-tools--grid > .wb-card { flex: 0 0 min(82%, 17.5rem); scroll-snap-align: start; } .wb-tools--grid::-webkit-scrollbar { display: none; } .wb-tools-nav { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem !important; } .wb-tools-nav button { cursor: pointer; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--wp--preset--color--white); border: 1.5px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); font: inherit; font-size: 1.1rem; } .wb-tools-nav button:hover:not(:disabled) { border-color: var(--wp--preset--color--green); } .wb-tools-nav button:disabled { opacity: .35; cursor: default; } .wb-tools-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; } .wb-head + .wb-tools--grid { margin-top: 2rem !important; } .wb-head + .wb-guides { margin-top: 1.5rem !important; } .wb-tools-head + .wb-tools--grid { margin-top: 2rem !important; } .wb-tools-head > .wb-head { margin: 0 !important; } .wb-tools.wb-tools--grid { align-items: stretch; } .wb-tools--grid > .wb-card { display: flex; flex-direction: column; height: auto; align-self: stretch; } html { scroll-padding-top: 1rem; } /* Tarjetas de herramientas con icono (Guías y portada) */ .wb-tools .wb-card.wb-ico { padding-top: 5.1rem; background-image: linear-gradient(#DDF2EA, #DDF2EA); background-size: 2.75rem 2.75rem; background-position: 1.75rem 1.5rem; background-repeat: no-repeat; } .wb-tools .wb-card.wb-ico::before { position: absolute; top: 2.125rem; left: 2.375rem; width: 1.5rem; height: 1.5rem; margin: 0; } /* ---------- Simulador de caídas ---------- */ .wb-out { position: relative; padding: clamp(1rem, 2.5vw, 2rem); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .wb-out::before { content: ""; position: absolute; left: -1px; top: -1px; width: 4rem; height: 3px; background: var(--wp--preset--color--green); } .wb-out button { font: inherit; cursor: pointer; } .wb-out .wb-eyebrow { margin: 0; } .wb-out__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; } .wb-out__mode { display: inline-flex; border: 1.5px solid var(--wp--preset--color--ink); } .wb-out__mode button { padding: 0.55rem 1.1rem; background: var(--wp--preset--color--white); border: 0; color: var(--wp--preset--color--ink); font-weight: 600; font-size: var(--wp--preset--font-size--s); } .wb-out__mode button.is-on { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wb-out__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .wb-out__presets .wb-eyebrow { margin-right: 0.3rem; } .wb-out__presets button { padding: 0.4rem 0.8rem; background: var(--wp--preset--color--white); border: 1.5px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--xs); } .wb-out__presets button:hover { border-color: #E5484D; } .wb-out__presets button.is-on { border-color: #E5484D; background: #FDECEC; } .wb-out__presets button.is-reset { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: .04em; } .wb-out__presets button.is-reset:hover { border-color: var(--wp--preset--color--green); } .wb-out__main { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; } .wb-out__stage { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); padding: 0.75rem; } .wb-out__svg { display: block; width: 100%; height: auto; } .wb-out__hint { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-out__rack { fill: rgba(15,26,23,.035); stroke: #C9D3CF; stroke-dasharray: 5 5; transition: fill .3s ease; } .wb-out__rack.is-dark { fill: rgba(15,26,23,.12); } .wb-out__rack-label { font-family: var(--wp--preset--font-family--mono); font-size: 12px; fill: #8A9792; text-transform: uppercase; letter-spacing: .06em; } .wb-out__link { stroke: var(--wp--preset--color--green); stroke-width: 3; transition: stroke .25s ease; } .wb-out__link.is-power { stroke: #E0A800; stroke-dasharray: 2 5; stroke-linecap: round; } .wb-out__link.is-down { stroke: #E5484D; stroke-dasharray: 7 6; opacity: .75; } .wb-out__node rect, .wb-out__floor rect { fill: var(--wp--preset--color--white); stroke: #C9D3CF; stroke-width: 1.5; transition: fill .2s ease, stroke .2s ease; } .wb-out__node { cursor: pointer; outline: none; } .wb-out__node:hover rect, .wb-out__node:focus-visible rect { stroke: var(--wp--preset--color--ink); stroke-width: 2; } .wb-out__ico { color: var(--wp--preset--color--green-text); } .wb-out__ico svg { width: 26px; height: 26px; overflow: visible; } .wb-out__t1 { font-family: var(--wp--preset--font-family--sans); font-size: 14px; font-weight: 600; fill: var(--wp--preset--color--ink); } .wb-out__t2 { font-family: var(--wp--preset--font-family--mono); font-size: 11px; fill: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .04em; } .wb-out__node.is-broken rect { fill: #FDECEC; stroke: #E5484D; stroke-width: 2; } .wb-out__node.is-broken .wb-out__ico, .wb-out__node.is-off .wb-out__ico { color: #E5484D; } .wb-out__node.is-broken .wb-out__t2 { fill: #C2373C; } .wb-out__x { stroke: #E5484D; stroke-width: 2.5; stroke-linecap: round; } .wb-out__node.is-off rect { fill: #F1F3F2; stroke: #E5A3A5; stroke-dasharray: 4 3; } .wb-out__node.is-off .wb-out__t1 { fill: #8A9792; } .wb-out__node.is-absent { cursor: default; opacity: .4; } .wb-out__node.is-absent rect { fill: transparent; stroke-dasharray: 4 4; } .wb-out__node.is-absent .wb-out__ico { color: #8A9792; } .wb-out__floor rect { fill: #E9F6F1; stroke: var(--wp--preset--color--green); } .wb-out__floor.is-down rect { fill: #FDECEC; stroke: #E5484D; } .wb-out__floor.is-down .wb-out__ico { color: #E5484D; } .wb-out__side { display: flex; flex-direction: column; gap: 0.9rem; } .wb-out__seats { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); border-left: 4px solid var(--wp--preset--color--green); } .wb-out__seats.is-warn { border-left-color: #E0A800; } .wb-out__seats.is-bad { border-left-color: #E5484D; } .wb-out__big { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--white); font-variant-numeric: tabular-nums; } .wb-out__seats .wb-out__big small { display: inline; font-size: 0.45em; font-weight: 400; color: var(--wp--preset--color--on-dark-muted); } .wb-out__seats strong { display: block; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--s); } .wb-out__seats small { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--on-dark-muted); } .wb-out__services { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; } .wb-out__services li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; background: var(--wp--preset--color--paper); border-left: 3px solid var(--wp--preset--color--green); } .wb-out__services li.is-partial { border-left-color: #E0A800; } .wb-out__services li.is-down { border-left-color: #E5484D; background: #FDF3F3; } .wb-out__services strong { display: block; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--ink); } .wb-out__services small { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-out__services em { font-style: normal; font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; color: var(--wp--preset--color--green-text); } .wb-out__services li.is-partial em { color: #9A7400; } .wb-out__services li.is-down em { color: #C2373C; } .wb-out__why { padding: 1rem 1.1rem; border: 1px solid var(--wp--preset--color--line); border-top: 3px solid var(--wp--preset--color--line); } .wb-out__why.is-on { border-top-color: #E5484D; } .wb-out__why p { margin: 0.45rem 0 0; font-size: var(--wp--preset--font-size--s); } .wb-out__why-title { margin: 0 !important; font-weight: 700; color: var(--wp--preset--color--ink); } .wb-out__try button { padding: 0; background: none; border: 0; color: var(--wp--preset--color--green-text); text-decoration: underline; font-weight: 600; } .wb-out__why .wp-block-buttons { margin-top: 0.9rem; } .wb-out__note { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } @media (max-width: 1000px) { .wb-out__main { grid-template-columns: 1fr; } } /* ---------- Configurador de salas ---------- */ .wb-room { position: relative; padding: clamp(1rem, 2.5vw, 2rem); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); } .wb-room::before { content: ""; position: absolute; left: -1px; top: -1px; width: 4rem; height: 3px; background: var(--wp--preset--color--green); } .wb-room .wb-eyebrow { margin: 0 0 0.6rem; } .wb-room select { font: inherit; } .wb-room__main { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.75rem; align-items: start; } .wb-room__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.25rem; margin-bottom: 1.25rem; } .wb-room__field { display: block; font-size: var(--wp--preset--font-size--s); } .wb-room__field > span { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 600; color: var(--wp--preset--color--ink); } .wb-room__field output { font-family: var(--wp--preset--font-family--mono); font-weight: 500; color: var(--wp--preset--color--green-text); } .wb-room__field input[type=range] { width: 100%; margin-top: 0.5rem; accent-color: var(--wp--preset--color--green); } .wb-room__field select { width: 100%; margin-top: 0.35rem; padding: 0.45rem 0.55rem; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); } .wb-room__check { display: flex; align-items: center; gap: 0.5rem; align-self: end; padding-bottom: 0.35rem; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--ink); cursor: pointer; } .wb-room__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--green); } .wb-room__plan { display: grid; place-items: center; padding: 1rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .wb-room__plan svg { display: block; width: 100%; max-height: 30rem; } .wb-room__floor { fill: #FFFFFF; } .wb-room__wall { fill: none; stroke: var(--wp--preset--color--ink); stroke-width: 0.1; } .wb-room__wall.is-glass { stroke: #4FB3D9; stroke-width: 0.08; } .wb-room__zone { fill: rgba(0,177,136,.12); stroke: rgba(0,128,99,.55); stroke-width: 0.025; stroke-dasharray: 0.12 0.08; } .wb-room__screen { fill: var(--wp--preset--color--ink); } .wb-room__bar { fill: #3A4541; } .wb-room__table { fill: #E8DDCC; stroke: #C9B79B; stroke-width: 0.03; } .wb-room__seat { fill: var(--wp--preset--color--green); stroke: #fff; stroke-width: 0.05; } .wb-room__seat.is-bad { fill: #E5484D; } .wb-room__pod { fill: #0F1A17; stroke: #fff; stroke-width: 0.04; } .wb-room__lbl { font-family: var(--wp--preset--font-family--mono); font-size: 0.2px; fill: var(--wp--preset--color--muted); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.01px; } .wb-room__dim { font-family: var(--wp--preset--font-family--mono); font-size: 0.22px; fill: var(--wp--preset--color--muted); text-anchor: middle; } .wb-room__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.75rem; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-room__legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .wb-room__legend i { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; } .wb-room__legend i.is-ok { background: var(--wp--preset--color--green); } .wb-room__legend i.is-bad { background: #E5484D; } .wb-room__legend i.is-zone { background: rgba(0,177,136,.15); border: 1px dashed rgba(0,128,99,.6); } .wb-room__side { display: flex; flex-direction: column; gap: 1rem; } .wb-room__kit { padding: 1.1rem 1.2rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark); } .wb-room__kit .wb-eyebrow { color: var(--wp--preset--color--green); } .wb-room__kit ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; } .wb-room__kit li { padding-left: 0.85rem; border-left: 2px solid var(--wp--preset--color--green); } .wb-room__kit strong { display: block; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--m); } .wb-room__kit span { display: block; font-size: var(--wp--preset--font-size--xs); line-height: 1.45; } .wb-room__net { padding: 1rem 1.1rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); } .wb-room__ports { display: flex; gap: 1.25rem; margin-bottom: 0.5rem; } .wb-room__ports span { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } .wb-room__ports b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--wp--preset--color--ink); } .wb-room__net ul { margin: 0; padding-left: 1.1rem; font-size: var(--wp--preset--font-size--s); } .wb-room__net li + li { margin-top: 0.2rem; } .wb-room__warn { padding: 0.9rem 1rem; border: 1px solid var(--wp--preset--color--line); border-left: 3px solid #E0A800; } .wb-room__warn p { margin: 0; font-size: var(--wp--preset--font-size--s); } .wb-room__warn p + p { margin-top: 0.5rem; } .wb-room__notes .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .wb-room__note { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); } @media (max-width: 1000px) { .wb-room__main { grid-template-columns: 1fr; } } @media (max-width: 640px) { .wb-room__controls { grid-template-columns: 1fr 1fr; } } /* Selector de idioma (barra superior) */ .wb-lang { display: inline-flex; align-items: center; gap: 0.15rem; padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.18); } .wb-lang__item { padding: 0.05rem 0.35rem; letter-spacing: .06em; } .wb-lang__item.is-current { color: var(--wp--preset--color--green); font-weight: 600; } @media (max-width: 720px) { .wb-topbar__links { gap: 1.1rem; } .wb-lang { padding-left: 0.9rem; } } /* Sugerencia de idioma (franja superior, solo si el navegador prefiere otro idioma) */ .wb-langhint { position: relative; z-index: 95; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.55rem 3rem 0.55rem 1.25rem; background: var(--wp--preset--color--green, #00B188); color: var(--wp--preset--color--ink, #0F1A17); font-size: 0.9rem; line-height: 1.4; } .wb-langhint__in { margin: 0; text-align: center; } .wb-langhint__in a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .wb-langhint__in a:hover { text-decoration-thickness: 2px; } .wb-langhint__x { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; background: transparent; color: inherit; font-size: 1rem; cursor: pointer; border-radius: 4px; } .wb-langhint__x:hover { background: rgba(15, 26, 23, .1); } .wb-langhint__x:focus-visible, .wb-langhint__in a:focus-visible { outline: 2px solid var(--wp--preset--color--ink, #0F1A17); outline-offset: 2px; } @media print { .wb-langhint { display: none; } }