/* ========================================================================== Ébano Galería — sistema visual Todo va prefijado con .eb-site (clase del ) para ganar a Astra y Elementor. ========================================================================== */ @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); } :root { --eb-ink: #1d1916; --eb-ink-2: #28221e; --eb-ink-3: #3a322c; --eb-paper: #f5f1ea; --eb-paper-2: #ebe4d8; --eb-white: #ffffff; --eb-stone: #645b53; --eb-stone-light: #bcb2a6; --eb-line: #ddd4c7; --eb-line-dark: rgba(255, 255, 255, 0.14); --eb-red: #b3261e; --eb-red-dark: #8e1c16; --eb-oak: #d2a878; --eb-font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; --eb-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --eb-container: 1240px; --eb-gutter: clamp(16px, 4vw, 32px); --eb-section: clamp(72px, 9vw, 128px); --eb-radius: 4px; --eb-radius-lg: 10px; --eb-shadow: 0 1px 2px rgba(29, 25, 22, 0.06), 0 18px 40px -18px rgba(29, 25, 22, 0.28); --eb-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --eb-header-h: 72px; } /* ---------- Base ---------- */ body.eb-site { margin: 0; background: var(--eb-paper); color: var(--eb-ink); font-family: var(--eb-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .eb-site .eb-main, .eb-site .eb-header, .eb-site .eb-topbar, .eb-site .eb-drawer, .eb-site .eb-footer, .eb-site .eb-lb { font-family: var(--eb-font-body); } .eb-site .eb-main *, .eb-site .eb-main *::before, .eb-site .eb-main *::after, .eb-site .eb-topbar *, .eb-site .eb-header *, .eb-site .eb-drawer *, .eb-site .eb-footer *, .eb-site .eb-container, .eb-lb * { box-sizing: border-box; } .eb-site .eb-main img, .eb-site .eb-header img, .eb-site .eb-footer img { display: block; max-width: 100%; height: auto; } .eb-site .eb-main :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; } .eb-site .eb-main :where(ul, ol)[role="list"], .eb-site .eb-main :where(.eb-services, .eb-steps, .eb-checks, .eb-benefits, .eb-why__list, .eb-kom__benefits, .eb-hero__proof, .eb-contact__cards, .eb-works__grid, .eb-gallery) { list-style: none; padding: 0; } .eb-site a { color: inherit; } .eb-site :focus-visible { outline: 3px solid var(--eb-oak); outline-offset: 3px; } .eb-site .eb-icon { width: 1.25em; height: 1.25em; flex: none; } .eb-site .eb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .eb-site .eb-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 12px 18px; background: var(--eb-ink); color: var(--eb-white); font-weight: 600; text-decoration: none; border-radius: var(--eb-radius); transition: top 0.2s; } .eb-site .eb-skip:focus { top: 12px; } html.eb-lock, html.eb-lock body { overflow: hidden; } /* Contenedores de Elementor que envuelven cada sección: sin márgenes propios. */ .eb-site .e-con.eb-wrap { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --margin-top: 0px; --margin-bottom: 0px; padding: 0; margin: 0; max-width: none; } .eb-site .e-con.eb-wrap > .elementor-widget, .eb-site .e-con.eb-wrap > .elementor-widget > .elementor-widget-container { width: 100%; margin: 0; padding: 0; } /* ---------- Layout ---------- */ .eb-site .eb-container { width: 100%; max-width: calc(var(--eb-container) + 2 * var(--eb-gutter)); margin-inline: auto; padding-inline: var(--eb-gutter); } .eb-site .eb-section { padding-block: var(--eb-section); } .eb-site .eb-section--tight { padding-block: clamp(48px, 6vw, 80px); } .eb-site .eb-tone-paper { background: var(--eb-paper); } .eb-site .eb-tone-white { background: var(--eb-white); } .eb-site .eb-tone-ink { background: var(--eb-ink); color: var(--eb-white); } /* ---------- Tipografía ---------- */ .eb-site .eb-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--eb-red); font: 600 14px/1.2 var(--eb-font-body); letter-spacing: 0.14em; text-transform: uppercase; } .eb-site .eb-eyebrow::before { content: ""; flex: none; width: 44px; height: 3px; background: currentColor; } .eb-site .eb-eyebrow--light { color: var(--eb-oak); } .eb-site .eb-h1, .eb-site .eb-h2, .eb-site .eb-h3 { margin: 0; color: inherit; font-family: var(--eb-font-display); text-transform: uppercase; text-wrap: balance; } .eb-site .eb-h1 { font-size: clamp(44px, 6vw, 82px); font-weight: 700; line-height: 0.92; letter-spacing: -0.005em; } .eb-site .eb-h2 { font-size: clamp(36px, 4.4vw, 62px); font-weight: 700; line-height: 0.95; } .eb-site .eb-h3 { font-size: clamp(23px, 2vw, 28px); font-weight: 600; line-height: 1.05; letter-spacing: 0.01em; } .eb-site .eb-h1 em, .eb-site .eb-h2 em { font-style: normal; color: var(--eb-red); } .eb-site .eb-lead { max-width: 62ch; margin-top: 22px; color: var(--eb-stone); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; } .eb-site .eb-tone-ink .eb-lead, .eb-site .eb-phero--dark .eb-lead { color: var(--eb-stone-light); } .eb-site .eb-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); } .eb-site .eb-head--center { margin-inline: auto; text-align: center; } .eb-site .eb-head--center .eb-eyebrow { justify-content: center; } .eb-site .eb-head--center .eb-lead { margin-inline: auto; } .eb-site .eb-head--split { display: grid; gap: 20px 64px; max-width: none; align-items: end; } .eb-site .eb-head--split .eb-lead { margin-top: 0; } @media (min-width: 900px) { .eb-site .eb-head--split { grid-template-columns: 1.1fr 1fr; } } .eb-site .eb-prose { max-width: 72ch; font-size: 18px; line-height: 1.7; } .eb-site .eb-prose > * + * { margin-top: 1em; } .eb-site .eb-prose :where(h2, h3, h4) { margin-top: 1.8em; font-family: var(--eb-font-display); text-transform: uppercase; line-height: 1.05; } .eb-site .eb-prose h2 { font-size: 32px; } .eb-site .eb-prose h3 { font-size: 24px; } .eb-site .eb-prose a { color: var(--eb-red); text-underline-offset: 3px; } .eb-site .eb-prose :where(ul, ol) { padding-left: 1.2em; } .eb-site .eb-prose li + li { margin-top: 0.4em; } .eb-site .eb-prose table { width: 100%; border-collapse: collapse; font-size: 16px; } .eb-site .eb-prose :where(td, th) { padding: 10px; border: 1px solid var(--eb-line); text-align: left; vertical-align: top; } /* ---------- Botones ---------- */ .eb-site .eb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 54px; padding: 0 1.7em; border: 1.5px solid transparent; border-radius: var(--eb-radius); font: 600 16px/1.1 var(--eb-font-body); letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--eb-ease); } .eb-site .eb-btn .eb-icon { width: 18px; height: 18px; transition: transform 0.2s var(--eb-ease); } .eb-site .eb-btn:hover .eb-icon { transform: translateX(3px); } .eb-site .eb-btn:active { transform: translateY(1px); } .eb-site .eb-btn--primary { background: var(--eb-red); color: var(--eb-white); } .eb-site .eb-btn--primary:hover { background: var(--eb-red-dark); color: var(--eb-white); } .eb-site .eb-btn--dark { background: var(--eb-ink); color: var(--eb-white); } .eb-site .eb-btn--dark:hover { background: var(--eb-ink-3); color: var(--eb-white); } .eb-site .eb-btn--line { border-color: currentColor; color: var(--eb-ink); background: transparent; } .eb-site .eb-btn--line:hover { background: var(--eb-ink); border-color: var(--eb-ink); color: var(--eb-white); } .eb-site .eb-tone-ink .eb-btn--line, .eb-site .eb-kom .eb-btn--line, .eb-site .eb-drawer .eb-btn--line, .eb-site .eb-phero--dark .eb-btn--line { color: var(--eb-white); } .eb-site .eb-tone-ink .eb-btn--line:hover, .eb-site .eb-kom .eb-btn--line:hover, .eb-site .eb-drawer .eb-btn--line:hover, .eb-site .eb-phero--dark .eb-btn--line:hover { background: var(--eb-white); border-color: var(--eb-white); color: var(--eb-ink); } .eb-site .eb-btn--light { background: var(--eb-white); color: var(--eb-ink); } .eb-site .eb-btn--light:hover { background: var(--eb-paper); color: var(--eb-ink); } .eb-site .eb-btn--sm { min-height: 46px; padding: 0 1.25em; font-size: 15px; } .eb-site .eb-btn--block { width: 100%; } .eb-site .eb-link { display: inline-flex; align-items: center; gap: 8px; color: var(--eb-red); font-weight: 600; text-decoration: none; } .eb-site .eb-link:hover { color: var(--eb-red-dark); } .eb-site .eb-link .eb-icon { width: 18px; height: 18px; transition: transform 0.2s var(--eb-ease); } .eb-site .eb-link:hover .eb-icon { transform: translateX(3px); } /* ---------- Barra superior ---------- */ .eb-site .eb-topbar { background: var(--eb-ink); color: var(--eb-stone-light); font-size: 13.5px; line-height: 1.3; } .eb-site .eb-topbar__in { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 38px; } .eb-site .eb-topbar p { margin: 0; } .eb-site .eb-topbar strong { color: var(--eb-white); font-weight: 600; letter-spacing: 0.04em; } .eb-site .eb-topbar__badge { display: flex; align-items: center; gap: 10px; } .eb-site .eb-topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eb-oak); } .eb-site .eb-topbar__meta { display: none; gap: 22px; margin: 0; padding: 0; list-style: none; } .eb-site .eb-topbar__meta li, .eb-site .eb-topbar__meta a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .eb-site .eb-topbar__meta a:hover { color: var(--eb-white); } .eb-site .eb-topbar__meta .eb-icon { width: 15px; height: 15px; color: var(--eb-oak); } @media (min-width: 760px) { .eb-site .eb-topbar__in { justify-content: space-between; } .eb-site .eb-topbar__meta { display: flex; } } /* ---------- Cabecera ---------- */ .eb-site .eb-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--eb-line); transition: box-shadow 0.25s; } @supports (backdrop-filter: blur(8px)) { .eb-site .eb-header { background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(160%) blur(10px); } } .admin-bar.eb-site .eb-header { top: 32px; } @media (max-width: 782px) { .admin-bar.eb-site .eb-header { top: 0; } } .eb-site .eb-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(29, 25, 22, 0.45); } .eb-site .eb-header__in { display: flex; align-items: center; gap: 24px; min-height: var(--eb-header-h); } .eb-site .eb-logo { flex: none; display: block; margin-right: auto; } .eb-site .eb-logo img { width: auto; height: 54px; } .eb-site .eb-nav { display: none; } .eb-site .eb-nav__list { display: flex; gap: clamp(14px, 1.8vw, 30px); margin: 0; padding: 0; list-style: none; } .eb-site .eb-nav__link { position: relative; display: block; padding: 10px 0; color: var(--eb-ink); font: 600 17px/1 var(--eb-font-display); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .eb-site .eb-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--eb-red); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--eb-ease); } .eb-site .eb-nav__link:hover { color: var(--eb-red); } .eb-site .eb-nav__link:hover::after, .eb-site .eb-nav__link[aria-current="page"]::after { transform: scaleX(1); } .eb-site .eb-header__actions { display: flex; align-items: center; gap: 10px; } .eb-site .eb-header__phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 46px; height: 46px; border: 1.5px solid var(--eb-line); border-radius: 50%; color: var(--eb-ink); font: 700 19px/1 var(--eb-font-display); letter-spacing: 0.02em; text-decoration: none; } .eb-site .eb-header__phone .eb-icon { width: 19px; height: 19px; color: var(--eb-red); } .eb-site .eb-header__phone span { display: none; } .eb-site .eb-header__cta { display: none; } .eb-site .eb-burger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--eb-ink); color: var(--eb-white); cursor: pointer; } .eb-site .eb-burger__bars, .eb-site .eb-burger__bars::before, .eb-site .eb-burger__bars::after { display: block; width: 18px; height: 2px; background: currentColor; transition: transform 0.25s var(--eb-ease), opacity 0.2s; } .eb-site .eb-burger__bars { position: relative; } .eb-site .eb-burger__bars::before, .eb-site .eb-burger__bars::after { content: ""; position: absolute; left: 0; } .eb-site .eb-burger__bars::before { top: -6px; } .eb-site .eb-burger__bars::after { top: 6px; } .eb-site .eb-burger[aria-expanded="true"] .eb-burger__bars { background: transparent; } .eb-site .eb-burger[aria-expanded="true"] .eb-burger__bars::before { transform: translateY(6px) rotate(45deg); } .eb-site .eb-burger[aria-expanded="true"] .eb-burger__bars::after { transform: translateY(-6px) rotate(-45deg); } @media (min-width: 640px) { .eb-site .eb-header__cta { display: inline-flex; } } @media (min-width: 1100px) { :root { --eb-header-h: 88px; } .eb-site .eb-logo img { height: 62px; } .eb-site .eb-nav { display: block; } .eb-site .eb-burger { display: none; } .eb-site .eb-header__actions { margin-left: 8px; } } @media (min-width: 1320px) { .eb-site .eb-header__phone { width: auto; height: auto; padding: 0 4px; border: 0; border-radius: 0; } .eb-site .eb-header__phone span { display: inline; } .eb-site .eb-header__phone:hover { color: var(--eb-red); } } /* Menú móvil */ .eb-site .eb-drawer { position: fixed; inset: 0; top: var(--eb-drawer-top, var(--eb-header-h)); z-index: 95; display: flex; flex-direction: column; gap: 32px; padding: 28px var(--eb-gutter) 32px; overflow-y: auto; background: var(--eb-ink); color: var(--eb-white); animation: eb-fade-in 0.2s var(--eb-ease); } .eb-site .eb-drawer[hidden] { display: none; } .eb-site .eb-drawer__nav ul { margin: 0; padding: 0; list-style: none; } .eb-site .eb-drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--eb-line-dark); color: var(--eb-white); font: 700 32px/1 var(--eb-font-display); text-transform: uppercase; text-decoration: none; } .eb-site .eb-drawer__nav a[aria-current="page"] { color: var(--eb-oak); } .eb-site .eb-drawer__foot { display: grid; gap: 12px; margin-top: auto; } .eb-site .eb-drawer__hours { margin: 4px 0 0; color: var(--eb-stone-light); font-size: 14px; text-align: center; } @keyframes eb-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---------- Hero de portada ---------- */ .eb-site .eb-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 96px) clamp(64px, 8vw, 120px); background: linear-gradient(90deg, var(--eb-paper) 0 52%, var(--eb-paper-2) 52% 100%); } .eb-site .eb-hero__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; } .eb-site .eb-hero__title { max-width: 12ch; } .eb-site .eb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .eb-site .eb-hero__proof { display: flex; flex-wrap: wrap; gap: 18px 30px; margin: 44px 0 0; padding: 28px 0 0; border-top: 1px solid var(--eb-line); } .eb-site .eb-hero__proof li { display: flex; align-items: center; gap: 12px; color: var(--eb-stone); font-size: 14.5px; line-height: 1.3; } .eb-site .eb-hero__proof strong { color: var(--eb-ink); font-weight: 600; } .eb-site .eb-hero__proof .eb-icon { width: 30px; height: 30px; color: var(--eb-red); } .eb-site .eb-hero__proof img { width: 64px; height: auto; mix-blend-mode: multiply; } .eb-site .eb-hero__media { position: relative; } .eb-site .eb-hero__main { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow); } .eb-site .eb-hero__main img, .eb-site .eb-hero__inset img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-hero__inset { position: absolute; right: -10px; bottom: -36px; width: 34%; max-width: 210px; padding: 8px 8px 0; background: var(--eb-white); border-radius: var(--eb-radius); box-shadow: var(--eb-shadow); } .eb-site .eb-hero__inset img { aspect-ratio: 3 / 3.4; border-radius: 2px; } .eb-site .eb-hero__inset figcaption { padding: 10px 4px 12px; color: var(--eb-stone); font-size: 13px; line-height: 1.3; } .eb-site .eb-hero__inset strong { color: var(--eb-red); font-weight: 600; } .eb-site .eb-hero__vertical { display: none; position: absolute; top: 0; left: 0; margin: 0; transform: rotate(180deg); writing-mode: vertical-rl; color: transparent; font: 700 64px/1 var(--eb-font-display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 1.2px var(--eb-red); opacity: 0.6; user-select: none; } @media (min-width: 980px) { .eb-site .eb-hero__grid { grid-template-columns: 1fr 1.12fr; } .eb-site .eb-hero__main { aspect-ratio: 1 / 1.02; } .eb-site .eb-hero__media { padding-left: 78px; } .eb-site .eb-hero__vertical { display: block; } } @media (min-width: 1300px) { .eb-site .eb-hero__inset { right: -28px; } } @media (max-width: 979px) { .eb-site .eb-hero { background: var(--eb-paper); } .eb-site .eb-hero__media { margin-right: 10px; } .eb-site .eb-hero__main { aspect-ratio: 4 / 3; } } /* ---------- Franja de materiales ---------- */ .eb-site .eb-materials { background: var(--eb-ink); color: var(--eb-white); } .eb-site .eb-materials__grid { display: grid; } .eb-site .eb-material { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--eb-line-dark); } .eb-site .eb-material:last-child { border-bottom: 0; } .eb-site .eb-material__n { grid-row: span 2; color: var(--eb-oak); font: 700 44px/1 var(--eb-font-display); } .eb-site .eb-material__t { font: 700 34px/1 var(--eb-font-display); text-transform: uppercase; } .eb-site .eb-material p { color: var(--eb-stone-light); font-size: 16px; line-height: 1.5; } @media (min-width: 860px) { .eb-site .eb-materials__grid { grid-template-columns: repeat(3, 1fr); } .eb-site .eb-material { padding: 46px 40px; border-bottom: 0; border-left: 1px solid var(--eb-line-dark); } .eb-site .eb-material:first-child { border-left: 0; padding-left: 0; } } /* ---------- Servicios (tarjetas) ---------- */ .eb-site .eb-services { display: grid; gap: 24px; margin: 0; } @media (min-width: 680px) { .eb-site .eb-services { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .eb-site .eb-services { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .eb-site .eb-service a { display: flex; flex-direction: column; height: 100%; background: var(--eb-white); border-radius: var(--eb-radius-lg); overflow: hidden; text-decoration: none; box-shadow: 0 1px 0 var(--eb-line); transition: box-shadow 0.3s var(--eb-ease), transform 0.3s var(--eb-ease); } .eb-site .eb-service a:hover { transform: translateY(-4px); box-shadow: var(--eb-shadow); } .eb-site .eb-service figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--eb-paper-2); } .eb-site .eb-service figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--eb-ease); } .eb-site .eb-service a:hover figure img { transform: scale(1.04); } .eb-site .eb-service__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 26px 26px 28px; } .eb-site .eb-service__n { color: var(--eb-red); font: 700 15px/1 var(--eb-font-display); letter-spacing: 0.12em; } .eb-site .eb-service a:hover .eb-h3 { color: var(--eb-red); } .eb-site .eb-service p { color: var(--eb-stone); font-size: 16px; line-height: 1.55; } .eb-site .eb-service__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--eb-ink); font-weight: 600; font-size: 15px; } .eb-site .eb-service__more .eb-icon { width: 17px; height: 17px; color: var(--eb-red); transition: transform 0.2s var(--eb-ease); } .eb-site .eb-service a:hover .eb-service__more .eb-icon { transform: translateX(4px); } .eb-site .eb-service--kom figure { background: #f3f4f6; } .eb-site .eb-service--kom figure img { object-fit: contain; padding: 18px; } /* ---------- Kömmerling (bloque oscuro) ---------- */ .eb-site .eb-kom { position: relative; overflow: hidden; padding-block: var(--eb-section); background: var(--eb-ink); color: var(--eb-white); } .eb-site .eb-kom::before { content: "KÖMMERLING"; position: absolute; right: -0.04em; bottom: -0.2em; color: transparent; font: 700 clamp(90px, 16vw, 240px)/1 var(--eb-font-display); letter-spacing: -0.01em; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07); pointer-events: none; } .eb-site .eb-kom__grid { position: relative; display: grid; gap: 56px; align-items: center; } @media (min-width: 1000px) { .eb-site .eb-kom__grid { grid-template-columns: 1.05fr 1fr; gap: 80px; } } .eb-site .eb-kom__lead { max-width: 58ch; margin-top: 24px; color: var(--eb-stone-light); font-size: 18.5px; line-height: 1.6; } .eb-site .eb-kom__benefits { display: grid; gap: 22px 32px; margin: 40px 0 0; } @media (min-width: 620px) { .eb-site .eb-kom__benefits { grid-template-columns: repeat(2, 1fr); } } .eb-site .eb-kom__benefits li { display: flex; gap: 14px; align-items: flex-start; } .eb-site .eb-kom__benefits .eb-icon { width: 40px; height: 40px; padding: 9px; border: 1px solid var(--eb-line-dark); border-radius: 50%; color: var(--eb-oak); } .eb-site .eb-kom__benefits strong { display: block; margin-bottom: 2px; font: 600 21px/1.1 var(--eb-font-display); letter-spacing: 0.02em; text-transform: uppercase; } .eb-site .eb-kom__benefits span { color: var(--eb-stone-light); font-size: 15.5px; line-height: 1.5; } .eb-site .eb-kom__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; } .eb-site .eb-kom__media { position: relative; display: grid; gap: 16px; } .eb-site .eb-kom__card { position: relative; padding: clamp(24px, 3vw, 40px); background: var(--eb-white); border-radius: var(--eb-radius-lg); color: var(--eb-ink); } .eb-site .eb-kom__card img { width: 100%; } .eb-site .eb-kom__card .eb-kom__logo { width: 140px; margin-bottom: 20px; } .eb-site .eb-kom__photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--eb-radius-lg); } .eb-site .eb-kom__photo img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-kom__caption { margin-top: 14px; color: var(--eb-stone); font-size: 14px; } /* ---------- Trabajos (rejilla) ---------- */ .eb-site .eb-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; } .eb-site .eb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--eb-line); border-radius: 999px; background: var(--eb-white); color: var(--eb-ink); font: 600 15px/1 var(--eb-font-body); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .eb-site .eb-chip span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--eb-paper); color: var(--eb-stone); font-size: 12.5px; text-align: center; } .eb-site .eb-chip:hover { border-color: var(--eb-ink); } .eb-site .eb-chip[aria-pressed="true"] { background: var(--eb-ink); border-color: var(--eb-ink); color: var(--eb-white); } .eb-site .eb-chip[aria-pressed="true"] span { background: var(--eb-red); color: var(--eb-white); } .eb-site .eb-works__grid { display: grid; gap: 22px; margin: 0; } @media (min-width: 640px) { .eb-site .eb-works__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .eb-site .eb-works__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .eb-site .eb-work[hidden] { display: none; } .eb-site .eb-work__link { position: relative; display: block; overflow: hidden; border-radius: var(--eb-radius-lg); background: var(--eb-ink); color: var(--eb-white); text-decoration: none; isolation: isolate; } .eb-site .eb-work__media { display: block; aspect-ratio: 4 / 5; } .eb-site .eb-work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--eb-ease), opacity 0.3s; } .eb-site .eb-work__link::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(29, 25, 22, 0) 42%, rgba(29, 25, 22, 0.88) 100%); } .eb-site .eb-work__link:hover .eb-work__media img { transform: scale(1.05); } .eb-site .eb-work__placeholder { display: grid; place-items: center; height: 100%; color: var(--eb-stone-light); font: 700 28px/1 var(--eb-font-display); text-transform: uppercase; } .eb-site .eb-work__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 8px; padding: 24px 76px 24px 24px; } .eb-site .eb-work__cat { color: var(--eb-oak); font: 600 13px/1.2 var(--eb-font-body); letter-spacing: 0.14em; text-transform: uppercase; } .eb-site .eb-work__title { font: 700 clamp(25px, 2.3vw, 30px)/1 var(--eb-font-display); text-transform: uppercase; text-wrap: balance; } .eb-site .eb-work__meta { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.78); font-size: 14px; } .eb-site .eb-work__meta .eb-icon { width: 16px; height: 16px; } .eb-site .eb-work__go { position: absolute; right: 20px; bottom: 24px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--eb-red); color: var(--eb-white); transition: transform 0.3s var(--eb-ease); } .eb-site .eb-work__go .eb-icon { width: 20px; height: 20px; } .eb-site .eb-work__link:hover .eb-work__go { transform: rotate(45deg); } .eb-site .eb-works__more { display: flex; justify-content: center; margin-top: 44px; } .eb-site .eb-works__empty, .eb-site .eb-works__none { padding: 40px; border: 1.5px dashed var(--eb-line); border-radius: var(--eb-radius-lg); color: var(--eb-stone); text-align: center; } .eb-site .eb-works__none a { color: var(--eb-red); } /* ---------- Pasos ---------- */ .eb-site .eb-process { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; } @media (min-width: 1000px) { .eb-site .eb-process { grid-template-columns: 1fr 1.25fr; } } .eb-site .eb-process__media { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: var(--eb-radius-lg); } .eb-site .eb-process__media img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-steps { display: grid; gap: 0; margin: 0; counter-reset: none; } .eb-site .eb-step { display: grid; grid-template-columns: 64px 1fr; gap: 6px 20px; padding: 26px 0; border-top: 1px solid var(--eb-line); } .eb-site .eb-step:last-child { border-bottom: 1px solid var(--eb-line); } .eb-site .eb-step__n { grid-row: span 2; color: var(--eb-red); font: 700 44px/0.9 var(--eb-font-display); } .eb-site .eb-step p { color: var(--eb-stone); font-size: 16.5px; line-height: 1.55; } /* ---------- Por qué nosotros / listas con icono ---------- */ .eb-site .eb-why { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; } @media (min-width: 1000px) { .eb-site .eb-why { grid-template-columns: 1fr 1.1fr; } .eb-site .eb-why--reverse .eb-why__media { order: 2; } } .eb-site .eb-why__media { position: relative; aspect-ratio: 4 / 4.8; overflow: hidden; border-radius: var(--eb-radius-lg); } .eb-site .eb-why__media img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-why__tag { position: absolute; left: 18px; bottom: 18px; padding: 10px 14px; border-radius: var(--eb-radius); background: var(--eb-white); color: var(--eb-ink); font-size: 14px; line-height: 1.3; box-shadow: var(--eb-shadow); } .eb-site .eb-why__tag strong { color: var(--eb-red); } .eb-site .eb-why__list { display: grid; gap: 26px; margin: 40px 0 0; } @media (min-width: 640px) { .eb-site .eb-why__list { grid-template-columns: repeat(2, 1fr); gap: 30px 36px; } } .eb-site .eb-why__list li { display: grid; gap: 12px; } .eb-site .eb-why__list .eb-icon { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--eb-paper); color: var(--eb-red); } .eb-site .eb-why__list h3 { font: 600 22px/1.1 var(--eb-font-display); letter-spacing: 0.02em; text-transform: uppercase; } .eb-site .eb-why__list p { margin-top: 6px; color: var(--eb-stone); font-size: 16px; line-height: 1.55; } .eb-site .eb-tone-paper .eb-why__list .eb-icon { background: var(--eb-white); } .eb-site .eb-checks { display: grid; gap: 10px; margin: 26px 0 0; } .eb-site .eb-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; } .eb-site .eb-checks .eb-icon { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--eb-red); color: var(--eb-white); stroke-width: 3; } /* Tarjetas de ventajas (página Kömmerling) */ .eb-site .eb-benefits { display: grid; gap: 18px; margin: 0; } @media (min-width: 640px) { .eb-site .eb-benefits { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .eb-site .eb-benefits { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .eb-site .eb-benefit { padding: 30px 28px; border-radius: var(--eb-radius-lg); background: var(--eb-white); box-shadow: 0 1px 0 var(--eb-line); } .eb-site .eb-tone-white .eb-benefit { background: var(--eb-paper); box-shadow: none; } .eb-site .eb-benefit .eb-icon { width: 30px; height: 30px; margin-bottom: 20px; color: var(--eb-red); } .eb-site .eb-benefit p { margin-top: 10px; color: var(--eb-stone); font-size: 16px; line-height: 1.55; } /* ---------- Bloques imagen + texto (Servicios) ---------- */ .eb-site .eb-split { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; } @media (min-width: 960px) { .eb-site .eb-split { grid-template-columns: 1fr 1fr; } .eb-site .eb-split--reverse .eb-split__media { order: 2; } } .eb-site .eb-split__media { position: relative; } .eb-site .eb-split__main { aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: var(--eb-radius-lg); } .eb-site .eb-split__main img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-split__main--contain { background: #f3f4f6; } .eb-site .eb-split__main--contain img { object-fit: contain; padding: 24px; } .eb-site .eb-split__sub { position: absolute; right: -10px; bottom: -26px; width: 38%; aspect-ratio: 3 / 3.6; overflow: hidden; border: 8px solid var(--eb-white); border-radius: var(--eb-radius); box-shadow: var(--eb-shadow); } .eb-site .eb-tone-paper .eb-split__sub { border-color: var(--eb-paper); } .eb-site .eb-split--reverse .eb-split__sub { right: auto; left: -10px; } .eb-site .eb-split__sub img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-split__copy > p:not(.eb-eyebrow) { margin-top: 22px; color: var(--eb-stone); font-size: 17.5px; line-height: 1.65; } .eb-site .eb-split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* ---------- Cabecera de páginas interiores ---------- */ .eb-site .eb-phero { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); background: var(--eb-paper); } .eb-site .eb-phero__grid { display: grid; gap: 40px; align-items: end; } @media (min-width: 980px) { .eb-site .eb-phero__grid { grid-template-columns: 1.2fr 1fr; gap: 72px; } } .eb-site .eb-phero__media { aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow); } .eb-site .eb-phero__media img { width: 100%; height: 100%; object-fit: cover; } .eb-site .eb-phero__media--contain { background: var(--eb-white); } .eb-site .eb-phero__media--contain img { object-fit: contain; padding: 28px; } .eb-site .eb-phero--dark { background: var(--eb-ink); color: var(--eb-white); } .eb-site .eb-phero--dark .eb-crumbs, .eb-site .eb-phero--dark .eb-crumbs a { color: var(--eb-stone-light); } .eb-site .eb-phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .eb-site .eb-crumbs { margin-bottom: 28px; color: var(--eb-stone); font-size: 14px; } .eb-site .eb-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .eb-site .eb-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; } .eb-site .eb-crumbs a { color: var(--eb-stone); text-decoration: none; } .eb-site .eb-crumbs a:hover { color: var(--eb-red); text-decoration: underline; } .eb-site .eb-work-head { display: grid; gap: 24px 72px; align-items: end; } @media (min-width: 980px) { .eb-site .eb-work-head { grid-template-columns: 1.3fr 1fr; } } .eb-site .eb-work-intro { color: var(--eb-stone); font-size: 18px; } .eb-site .eb-phero--work { padding-bottom: clamp(36px, 4vw, 56px); } .eb-site .eb-work-count { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--eb-stone); font-size: 15px; } /* ---------- Galería de un trabajo + visor ---------- */ .eb-site .eb-section--gallery { padding-top: clamp(40px, 5vw, 64px); } .eb-site .eb-gallery { columns: 1; column-gap: 18px; margin: 0; } @media (min-width: 640px) { .eb-site .eb-gallery { columns: 2; } } @media (min-width: 1060px) { .eb-site .eb-gallery { columns: 3; column-gap: 22px; } } .eb-site .eb-gallery__item { break-inside: avoid; margin-bottom: 18px; } .eb-site .eb-gallery__item a { display: block; overflow: hidden; border-radius: var(--eb-radius-lg); cursor: zoom-in; } .eb-site .eb-gallery__item img { width: 100%; transition: transform 0.6s var(--eb-ease); } .eb-site .eb-gallery__item a:hover img { transform: scale(1.03); } .eb-lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; background: rgba(15, 12, 10, 0.94); color: #fff; } .eb-lb[hidden] { display: none; } .eb-lb__figure { grid-column: 2; display: grid; justify-items: center; gap: 12px; margin: 0; max-height: 100vh; } .eb-lb__img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 4px; } .eb-lb__count { font-size: 14px; opacity: 0.75; } .eb-lb__btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; } .eb-lb__btn:hover { background: rgba(255, 255, 255, 0.24); } .eb-lb__prev { grid-column: 1; justify-self: center; } .eb-lb__next { grid-column: 3; justify-self: center; } .eb-lb__close { position: absolute; top: 16px; right: 16px; font-size: 30px; } @media (max-width: 640px) { .eb-lb { grid-template-columns: 0 1fr 0; } .eb-lb__prev, .eb-lb__next { position: absolute; bottom: 18px; } .eb-lb__prev { left: calc(50% - 64px); } .eb-lb__next { right: calc(50% - 64px); } .eb-lb__img { max-height: calc(100vh - 160px); } } /* ---------- Preguntas frecuentes ---------- */ .eb-site .eb-faq { display: grid; gap: 40px; } @media (min-width: 1000px) { .eb-site .eb-faq { grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; } .eb-site .eb-faq .eb-head { position: sticky; top: calc(var(--eb-header-h) + 32px); } } .eb-site .eb-faq__list { border-top: 1px solid var(--eb-line); } .eb-site .eb-faq__item { border-bottom: 1px solid var(--eb-line); } .eb-site .eb-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font: 600 clamp(21px, 1.8vw, 25px)/1.15 var(--eb-font-display); text-transform: uppercase; list-style: none; cursor: pointer; } .eb-site .eb-faq__item summary::-webkit-details-marker { display: none; } .eb-site .eb-faq__item summary:hover { color: var(--eb-red); } .eb-site .eb-faq__item summary .eb-icon { width: 34px; height: 34px; padding: 7px; border: 1.5px solid var(--eb-line); border-radius: 50%; transition: transform 0.25s var(--eb-ease), background-color 0.2s, color 0.2s; } .eb-site .eb-faq__item[open] summary .eb-icon { transform: rotate(45deg); background: var(--eb-red); border-color: var(--eb-red); color: var(--eb-white); } .eb-site .eb-faq__a { padding: 0 56px 26px 0; color: var(--eb-stone); font-size: 17px; line-height: 1.65; } .eb-site .eb-faq__a p + p { margin-top: 0.8em; } /* ---------- Llamada a la acción ---------- */ .eb-site .eb-cta { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 104px); background: var(--eb-red); color: var(--eb-white); } .eb-site .eb-cta::after { content: ""; position: absolute; top: -40%; right: -10%; width: 55%; height: 180%; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 22px); pointer-events: none; } .eb-site .eb-cta__in { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; } @media (min-width: 960px) { .eb-site .eb-cta__in { grid-template-columns: 1.4fr 1fr; gap: 64px; } } .eb-site .eb-cta .eb-eyebrow { color: rgba(255, 255, 255, 0.85); } .eb-site .eb-cta__title { margin: 0; font: 700 clamp(38px, 5vw, 68px)/0.95 var(--eb-font-display); text-transform: uppercase; text-wrap: balance; } .eb-site .eb-cta__text > p:last-child { max-width: 58ch; margin-top: 20px; color: rgba(255, 255, 255, 0.9); font-size: 18px; line-height: 1.6; } .eb-site .eb-cta__actions { display: grid; gap: 14px; justify-items: start; } @media (min-width: 960px) { .eb-site .eb-cta__actions { justify-items: end; } } .eb-site .eb-cta__phone { display: inline-flex; align-items: center; gap: 16px; color: var(--eb-white); text-decoration: none; } .eb-site .eb-cta__phone .eb-icon { width: 58px; height: 58px; padding: 15px; border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 50%; transition: background-color 0.2s; } .eb-site .eb-cta__phone:hover .eb-icon { background: rgba(255, 255, 255, 0.14); } .eb-site .eb-cta__phone span { display: grid; font: 700 clamp(34px, 3.6vw, 46px)/1 var(--eb-font-display); letter-spacing: 0.02em; } .eb-site .eb-cta__phone small { margin-bottom: 4px; font: 500 13px/1 var(--eb-font-body); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } /* ---------- Contacto ---------- */ .eb-site .eb-contact__grid { display: grid; gap: 40px; align-items: start; } @media (min-width: 1000px) { .eb-site .eb-contact__grid { grid-template-columns: 1fr 1.15fr; gap: 64px; } } .eb-site .eb-contact__cards { display: grid; gap: 14px; margin: 0; } .eb-site .eb-ccard { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: var(--eb-radius-lg); background: var(--eb-white); box-shadow: 0 1px 0 var(--eb-line); color: var(--eb-ink); font-size: 17px; line-height: 1.45; text-decoration: none; transition: box-shadow 0.25s, transform 0.25s var(--eb-ease); } .eb-site a.eb-ccard:hover { box-shadow: var(--eb-shadow); transform: translateY(-2px); } .eb-site .eb-ccard .eb-icon { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--eb-paper); color: var(--eb-red); } .eb-site .eb-ccard small { display: block; margin-bottom: 4px; color: var(--eb-stone); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .eb-site .eb-ccard strong { font: 700 26px/1.1 var(--eb-font-display); letter-spacing: 0.02em; } .eb-site .eb-contact__photo { margin-top: 14px; overflow: hidden; border-radius: var(--eb-radius-lg); } .eb-site .eb-contact__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .eb-site .eb-contact__photo figcaption { padding: 12px 4px 0; color: var(--eb-stone); font-size: 14px; } .eb-site .eb-formcard { padding: clamp(26px, 4vw, 48px); border-radius: var(--eb-radius-lg); background: var(--eb-white); box-shadow: var(--eb-shadow); } .eb-site .eb-formcard > p { margin: 12px 0 8px; color: var(--eb-stone); } /* WPForms dentro de la tarjeta */ .eb-site .eb-formcard .wpforms-container { margin: 18px 0 0; } .eb-site .eb-formcard .wpforms-field { padding: 0 0 18px; } .eb-site .eb-formcard .wpforms-field-label { margin-bottom: 8px; color: var(--eb-ink); font: 600 15px/1.3 var(--eb-font-body); } .eb-site .eb-formcard .wpforms-required-label { color: var(--eb-red); } .eb-site .eb-formcard input[type="text"], .eb-site .eb-formcard input[type="email"], .eb-site .eb-formcard input[type="tel"], .eb-site .eb-formcard input[type="number"], .eb-site .eb-formcard textarea { width: 100%; max-width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--eb-line); border-radius: var(--eb-radius); background: var(--eb-paper); color: var(--eb-ink); font: 400 17px/1.4 var(--eb-font-body); box-shadow: none; transition: border-color 0.2s, background-color 0.2s; } .eb-site .eb-formcard textarea { min-height: 150px; resize: vertical; } .eb-site .eb-formcard input:focus, .eb-site .eb-formcard textarea:focus { border-color: var(--eb-ink); background: var(--eb-white); outline: none; box-shadow: 0 0 0 3px rgba(210, 168, 120, 0.45); } .eb-site .eb-formcard button[type="submit"], .eb-site .eb-formcard .wpforms-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--eb-radius); background: var(--eb-red); color: var(--eb-white); font: 600 17px/1 var(--eb-font-body); cursor: pointer; transition: background-color 0.2s; } .eb-site .eb-formcard button[type="submit"]:hover { background: var(--eb-red-dark); } .eb-site .eb-formcard .wpforms-error, .eb-site .eb-formcard label.wpforms-error { color: var(--eb-red); font-size: 14px; } .eb-site .eb-formcard__note { margin-top: 16px; color: var(--eb-stone); font-size: 13.5px; line-height: 1.5; } .eb-site .eb-formcard__note a { color: var(--eb-ink); } /* ---------- Pie ---------- */ .eb-site .eb-footer { background: var(--eb-ink); color: var(--eb-stone-light); font-size: 15.5px; line-height: 1.6; } .eb-site .eb-footer a { color: var(--eb-stone-light); text-decoration: none; transition: color 0.2s; } .eb-site .eb-footer a:hover { color: var(--eb-white); } .eb-site .eb-footer__grid { display: grid; gap: 40px; padding-block: clamp(56px, 7vw, 88px); } @media (min-width: 700px) { .eb-site .eb-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .eb-site .eb-footer__grid { grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 56px; } } .eb-site .eb-footer__word { margin: 0 0 14px; color: var(--eb-white); font: 700 40px/1 var(--eb-font-display); text-transform: uppercase; } .eb-site .eb-footer__brand > p:not(.eb-footer__word) { max-width: 38ch; margin: 0; } .eb-site .eb-footer__kom { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 10px 16px 10px 10px; border-radius: var(--eb-radius); background: var(--eb-white); } .eb-site .eb-footer__kom img { width: 88px; } .eb-site .eb-footer .eb-footer__kom span { color: var(--eb-ink); font-size: 13px; font-weight: 600; line-height: 1.25; } .eb-site .eb-footer__title { margin: 0 0 18px; color: var(--eb-white); font: 600 19px/1 var(--eb-font-display); letter-spacing: 0.1em; text-transform: uppercase; } .eb-site .eb-footer__links, .eb-site .eb-footer__contact, .eb-site .eb-footer__legal { margin: 0; padding: 0; list-style: none; } .eb-site .eb-footer__links li + li { margin-top: 8px; } .eb-site .eb-footer__contact li { display: flex; gap: 12px; align-items: flex-start; } .eb-site .eb-footer__contact li + li { margin-top: 14px; } .eb-site .eb-footer__contact .eb-icon { width: 19px; height: 19px; margin-top: 3px; color: var(--eb-oak); } .eb-site .eb-footer__social { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 500; } .eb-site .eb-footer__social .eb-icon { width: 38px; height: 38px; padding: 9px; border: 1px solid var(--eb-line-dark); border-radius: 50%; } .eb-site .eb-footer__kd { padding-block: 18px; background: var(--eb-white); } .eb-site .eb-footer__kd img { width: 100%; max-width: 1100px; margin-inline: auto; } .eb-site .eb-footer__bottom { padding-block: 22px; border-top: 1px solid var(--eb-line-dark); font-size: 14px; } .eb-site .eb-footer__bottom-in { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; } .eb-site .eb-footer__bottom p { margin: 0; } .eb-site .eb-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; } /* ---------- Animación de entrada ---------- */ .eb-site .eb-reveal { transition: opacity 0.7s var(--eb-ease), transform 0.7s var(--eb-ease); } .eb-site .eb-reveal.is-pending { opacity: 0; transform: translateY(24px); } @media (prefers-reduced-motion: reduce) { .eb-site *, .eb-site *::before, .eb-site *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Impresión ---------- */ @media print { .eb-site .eb-topbar, .eb-site .eb-header, .eb-site .eb-drawer, .eb-site .eb-cta, .eb-site .eb-footer__kd { display: none; } } /* ---------- Complementos de páginas ---------- */ .eb-site .eb-anchor { scroll-margin-top: calc(var(--eb-header-h) + 16px); } .eb-site .eb-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .eb-site .eb-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--eb-line); border-radius: 999px; background: var(--eb-white); color: var(--eb-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color 0.2s, color 0.2s; } .eb-site .eb-jump a:hover { border-color: var(--eb-red); color: var(--eb-red); } .eb-site .eb-phero--compact { padding-bottom: clamp(24px, 3vw, 40px); } .eb-site .eb-kom-hero { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 28px; } .eb-site .eb-kom-hero img { padding: 0; } .eb-site .eb-kom-hero .eb-kom__logo { width: 150px; margin: 0; } @media (min-width: 1000px) { .eb-site .eb-benefits--4 { grid-template-columns: repeat(4, 1fr); } } .eb-site .eb-brandband { padding-block: 36px; background: var(--eb-white); border-bottom: 1px solid var(--eb-line); } .eb-site .eb-brandband__in { display: grid; gap: 20px 40px; align-items: center; justify-items: start; } @media (min-width: 860px) { .eb-site .eb-brandband__in { grid-template-columns: auto 1fr auto; } } .eb-site .eb-brandband__logo img { width: 130px; } .eb-site .eb-brandband__text { color: var(--eb-stone); font-size: 18px; line-height: 1.5; } .eb-site .eb-brandband__text strong { color: var(--eb-ink); font-weight: 600; }