/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
.btn-cta .elementor-button-text{
    font-weight: 400;
}
.elementor-kit-15 input:not([type="button"]):not([type="submit"]), .elementor-kit-15 textarea, .elementor-kit-15 .elementor-field-textual {
    padding: 15px !important;
    border: 1px solid #75182324;
}
.elementor-sticky--effects{
    padding-top: 15px;
    padding-bottom: 15px;
    background: white;
    box-shadow: 4px 4px 30px 0px rgba(42, 67, 113, 0.15);
}
@media (min-width: 767px){
    .elementor-sticky--effects .menu-item a, .elementor-sticky--effects .elementor-icon-list-text{
        color: black !important;
    }
}
.elementor-sticky--effects .elementor-icon-list-icon svg{
    fill: black !important;
}
.elementor-sticky--effects .white{
    display: none !important;
}
.black{
    display: none;
}
.elementor-sticky--effects .black{
    display: block !important;
}
.elementor-sticky--effects svg{
    fill: black !important;
}
/* =====================================================================
   CENTRE TÈCNIC — Pàgina OFICINES (Elementor · Containers / addons atòmics)
   ---------------------------------------------------------------------
   Acompanya el template "elementor-oficines.json" (estructura amb Containers).
   El CSS també va INCRUSTAT dins del JSON (widget HTML ocult) → carrega sempre.
   Tot està limitat a les classes .ctof-*  →  no afecta la resta del web.
   Color de marca: granat #751823.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;450;500;600;700&display=swap');

/* ---- Variables ---- */
:root {
  --ctof-garnet: #751823;
  --ctof-garnet-900: #3f0c14;
  --ctof-garnet-tint: #f7ecec;
  --ctof-ink: #1b1417;
  --ctof-ink-soft: #514750;
  --ctof-muted: #8c8186;
  --ctof-line: #ebe4e4;
  --ctof-line-strong: #ddd2d2;
  --ctof-paper: #ffffff;
  --ctof-paper-2: #faf6f5;
  --ctof-font-display: 'Bricolage Grotesque', sans-serif;
  --ctof-font-body: 'Hanken Grotesk', sans-serif;
  --ctof-radius: 16px;
  --ctof-ease: cubic-bezier(.22,.61,.36,1);
  --ctof-shadow-md: 0 2px 6px rgba(27,20,23,.06), 0 30px 60px -34px rgba(63,12,20,.32);
}

/* contenidor tècnic que només conté el <style>+<script>: no ha d'ocupar espai */
.ctof-style-holder { display: none !important; }

/* base */
.ctof-section { font-family: var(--ctof-font-body); color: var(--ctof-ink); }
.ctof-section, .ctof-section * { box-sizing: border-box; }
.ctof-section h1, .ctof-section h2, .ctof-section h3,
.ctof-section h4, .ctof-section h5, .ctof-section h6 {
  font-family: var(--ctof-font-display);
  font-weight: 600; line-height: 1.04; letter-spacing: -.02em;
  margin: 0; color: var(--ctof-ink);
}

/* amplada de contingut centrada (equivalent a .container) */
.ctof-inner {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 0px !important; gap: 0 !important;
}

/* ritme vertical de les seccions */
.ctof-intro       { padding: 90px 0 28px !important; }
.ctof-incl        { padding: 28px 0 90px !important; }
.ctof-offices     { padding: 90px 0 !important; }
.ctof-paper2      { background: var(--ctof-paper-2); }
.ctof-cta-section { padding: 40px 0 96px !important; }

/* =====================================================================
   INTRO
   ===================================================================== */
.ctof-lead-xl p {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5; color: var(--ctof-ink);
  max-width: 900px; font-weight: 450; margin: 0;
}
.ctof-lead-xl strong { color: var(--ctof-garnet); font-weight: 600; }

/* =====================================================================
   TARGETES  Inclòs / Segons consum
   ===================================================================== */
.ctof-incl-grid {
  display: grid !important; grid-template-columns: 1.25fr .75fr; gap: 22px !important;
  margin-top: 56px; padding: 0 !important; align-items: stretch;
}
.ctof-card {
  background: var(--ctof-paper); border: 1px solid var(--ctof-line);
  border-radius: var(--ctof-radius); padding: 38px 38px 34px !important;
  gap: 0 !important; height: 100%;
}
.ctof-card-accent { background: var(--ctof-garnet); border-color: transparent; }

/* capçalera de targeta (Icon Box) */
.ctof-card-head .elementor-icon-box-wrapper { display: flex; align-items: flex-start; text-align: left; gap: 12px; }
.ctof-card-head .elementor-icon-box-icon { margin: 0; flex: none; }
.ctof-card-head .elementor-icon-box-icon .elementor-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--ctof-garnet-tint); color: var(--ctof-garnet);
  display: grid; place-items: center; font-size: 21px; border: 0;
}
.ctof-card-head .elementor-icon-box-icon .elementor-icon svg,
.ctof-card-head .elementor-icon-box-icon .elementor-icon i { width: 21px; height: 21px; font-size: 19px; }
.ctof-card-head .elementor-icon-box-title { font-size: 23px; margin: 6px 0 0; line-height: 1.1; }
.ctof-card-head .elementor-icon-box-description { margin: 8px 0 0; font-size: 14.5px; color: var(--ctof-muted); font-family: var(--ctof-font-body); }
.ctof-card-accent .elementor-icon-box-icon .elementor-icon { background: rgba(255,255,255,.16); color: #fff; }
.ctof-card-accent .elementor-icon-box-title { color: #fff; }
.ctof-card-accent .elementor-icon-box-description { color: rgba(255,255,255,.72); }

/* llistes amb check */
.ctof-list .elementor-icon-list-items { margin: 24px 0 0 !important; padding: 0 !important; list-style: none; }
.ctof-list-cols .elementor-icon-list-items { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.ctof-list .elementor-icon-list-item {
  display: flex !important; align-items: flex-start !important; gap: 13px;
  padding: 13px 0 !important; margin: 0 !important;
  font-size: 16px; line-height: 1.45;
  border-top: 1px solid var(--ctof-line);
}
.ctof-list .elementor-icon-list-item > a { padding: 0; display: flex; align-items: flex-start; gap: 13px; }
.ctof-list .elementor-icon-list-item:first-child { border-top: 0; }
.ctof-list-cols .elementor-icon-list-item:nth-child(-n+2) { border-top: 0; }
.ctof-list .elementor-icon-list-icon {
  width: 22px !important; height: 22px; flex: 0 0 22px; margin: 1px 0 0; padding: 0 !important;
  border-radius: 999px; background: var(--ctof-garnet-tint);
  display: inline-flex !important; align-items: center; justify-content: center;
}
.ctof-list .elementor-icon-list-icon i,
.ctof-list .elementor-icon-list-icon svg {
  width: 11px; height: 11px; font-size: 11px !important; line-height: 1;
  color: var(--ctof-garnet) !important; fill: var(--ctof-garnet) !important;
}
.ctof-list .elementor-icon-list-text { color: var(--ctof-ink); font-family: var(--ctof-font-body); align-self: center; }
.ctof-card-accent .ctof-list .elementor-icon-list-item { border-top-color: rgba(255,255,255,.16); }
.ctof-card-accent .ctof-list .elementor-icon-list-icon { background: rgba(255,255,255,.18); }
.ctof-card-accent .ctof-list .elementor-icon-list-icon i,
.ctof-card-accent .ctof-list .elementor-icon-list-icon svg { color: #fff !important; fill: #fff !important; }
.ctof-card-accent .ctof-list .elementor-icon-list-text { color: #fff; }

/* =====================================================================
   ENCAPÇALAMENT DE SECCIÓ  (Despatxos disponibles)
   ===================================================================== */
.ctof-eyebrow .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ctof-font-body); font-weight: 600;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ctof-garnet);
}
.ctof-eyebrow .elementor-heading-title::before { content: ""; width: 26px; height: 1.5px; background: var(--ctof-garnet); display: inline-block; }
.ctof-h2 { margin-top: 20px; }
.ctof-h2 .elementor-heading-title { font-size: clamp(34px, 4vw, 54px); line-height: 1.04; }
.ctof-lead p { margin: 22px 0 0; font-size: 19px; color: var(--ctof-ink-soft); line-height: 1.6; max-width: 720px; }

/* =====================================================================
   GRAELLA DE DESPATXOS  (Image Box dins el container .ctof-grid)
   ===================================================================== */
.ctof-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px !important;
  margin-top: 60px; padding: 0 !important; align-items: stretch;
}
.ctof-grid > * { margin: 0 !important; width: auto !important; max-width: none !important; }

.ctof-office {
  border: 1px solid var(--ctof-line); border-radius: var(--ctof-radius);
  overflow: hidden; background: var(--ctof-paper);
  transition: transform .3s var(--ctof-ease), box-shadow .3s var(--ctof-ease), border-color .3s var(--ctof-ease);
}
.ctof-office:hover { transform: translateY(-6px); box-shadow: var(--ctof-shadow-md); border-color: transparent; }
.ctof-office .elementor-widget-container,
.ctof-office .elementor-image-box-wrapper { display: flex; flex-direction: column; height: 100%; }
.ctof-office .elementor-image-box-img {
  width: 100% !important; margin: 0 !important;
  aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in;
  border-bottom: 1px solid var(--ctof-line); background: var(--ctof-paper-2);
}
.ctof-office .elementor-image-box-img a,
.ctof-office .elementor-image-box-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ctof-office .elementor-image-box-content {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px 24px;
}
.ctof-office .elementor-image-box-title { font-size: 21px; white-space: nowrap; margin: 0; }
.ctof-office .elementor-image-box-description {
  margin: 0; font-family: var(--ctof-font-body);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ctof-garnet);
  background: var(--ctof-garnet-tint); padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}
.ctof-office-feat .elementor-image-box-description {
  color: var(--ctof-ink-soft); background: var(--ctof-paper-2); border: 1px solid var(--ctof-line); font-weight: 600;
}

/* =====================================================================
   CTA INFERIOR  (container .ctof-cta)
   ===================================================================== */
.ctof-cta {
  background: var(--ctof-paper-2); border: 1px solid var(--ctof-line);
  border-radius: var(--ctof-radius); padding: 40px 56px !important;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 28px !important;
}
.ctof-cta-text { padding: 0 !important; gap: 0 !important; flex: 1 1 320px; }
.ctof-cta-title .elementor-heading-title { font-size: clamp(24px, 2.6vw, 34px); max-width: 18ch; }
.ctof-cta-sub p { margin: 8px 0 0; color: var(--ctof-ink-soft); font-size: 16.5px; }

/* botó */
.ctof-btn .elementor-button {
  font-family: var(--ctof-font-body); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
  padding: 17px 34px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ctof-garnet); color: #fff;
  transition: transform .18s var(--ctof-ease), box-shadow .25s var(--ctof-ease);
}
.ctof-btn .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(117,24,35,.55); color: #fff; }

/* =====================================================================
   LIGHTBOX dels despatxos  (s'injecta al <body> via JS)
   ===================================================================== */
.ctof-lb {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(18,4,7,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 5vh 5vw;
  font-family: var(--ctof-font-body); box-sizing: border-box;
}
.ctof-lb.open { display: flex; }
.ctof-lb figure {
  margin: 0; max-width: 1000px; width: 100%; background: #fff;
  border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.ctof-lb .ctof-lb-media { width: 100%; aspect-ratio: 16/11; background: var(--ctof-paper-2); }
.ctof-lb .ctof-lb-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ctof-lb figcaption {
  padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--ctof-line);
}
.ctof-lb figcaption h3 { margin: 0; font-size: 22px; font-family: var(--ctof-font-display); color: var(--ctof-ink); }
.ctof-lb .ctof-lb-chip {
  display: inline-flex; align-items: center; font-size: 14px; font-weight: 600;
  color: var(--ctof-garnet); background: var(--ctof-garnet-tint);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}
.ctof-lb .ctof-lb-chip.feat { color: var(--ctof-ink-soft); background: var(--ctof-paper-2); border: 1px solid var(--ctof-line); }
.ctof-lb .ctof-lb-close {
  position: absolute; top: 24px; right: 24px; width: 50px; height: 50px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
  cursor: pointer; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.ctof-lb .ctof-lb-close:hover { background: #fff; color: var(--ctof-garnet); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .ctof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .ctof-incl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ctof-grid { grid-template-columns: 1fr; }
  .ctof-list-cols .elementor-icon-list-items { grid-template-columns: 1fr; }
  .ctof-card { padding: 30px 26px !important; }
  .ctof-cta { padding: 36px 28px !important; }
  .ctof-inner { padding: 0 22px !important; }
}
.elementor-icon-list-icon svg{
  margin-right: 0px;
}
.elementor-icon-list-icon svg{
  margin-right: 0px !important;
}