/* ================================================================ MUTUALIDAD — styles.css limpio Sin duplicados + fix de scroll/sidebar responsive ================================================================ */ /* ======================================== FONT FACES ======================================== */ @font-face { font-family: 'Rufina'; src: url('./fonts/Rufina-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Rufina'; src: url('./fonts/Rufina-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Mutualidad'; src: url('./fonts/Mutualidad-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mutualidad'; src: url('./fonts/Mutualidad-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ======================================== CSS CUSTOM PROPERTIES ======================================== */ :root { --dosce-ff-base: 'Mutualidad', 'Rufina', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; --dosce-ff-heading: 'Rufina', serif; --dosce-fs-base: 18px; --dosce-fs-sm: 15px; --dosce-fs-lg: 56px; --dosce-fw-normal: 400; --dosce-fw-semi: 600; --dosce-fw-bold: 700; --dosce-h1: 56px; --dosce-h2: 44px; --dosce-h3: 32px; --dosce-h4: 24px; --dosce-h5: 20px; --dosce-h1-sm: 2.5rem; --dosce-h1-md: 3rem; --dosce-h2-sm: 2rem; --dosce-h2-md: 2.375rem; --dosce-h3-sm: 1.5rem; --dosce-h3-md: 1.75rem; --dosce-primary: #004136; --dosce-secondary: #B9EDAA; --dosce-dark: #001C14; --dosce-white: #FFFFFF; --dosce-green: #004136; --dosce-green-dark: #001C14; --dosce-green-light-01: #336053; --dosce-green-light-02: #66887E; --dosce-lime: #B9EDAA; --dosce-lime-light: #E3F8DD; --dosce-pink: #D1A4C4; --dosce-pink-dark: #9D7B93; --dosce-light-01: #DBB2D5; --dosce-light-02: #E3C9DA; --dosce-grey: #E1E1E1; --dosce-grey-dark: #DADADA; --dosce-body-color: #004136; --dosce-max-w: 1248px; --dosce-radius: 24px; --dosce-pill: 50rem; --dosce-sp-1: 0.25rem; --dosce-sp-2: 0.5rem; --dosce-sp-3: 1rem; --dosce-sp-4: 1.5rem; --dosce-sp-5: 3rem; --dosce-sp-6: 4.5rem; --dosce-sp-7: 6rem; --dosce-sp-8: 7.5rem; --dosce-grad-1: #E3C9DA; --dosce-grad-2: #B9EDAA; --dosce-slider-text: var(--dosce-primary); --dosce-slider-secondary: var(--dosce-pink-dark); --dosce-slider-label-bg: rgba(255, 255, 255, 0.60); --dosce-slider-dot-border: var(--dosce-primary); --dosce-slider-dot-active: var(--dosce-primary); --dosce-slider-dot-hover: rgba(0, 65, 54, 0.2); --dosce-slider-btn-fill: var(--dosce-primary); --dosce-slider-btn-disabled: #DADADA; --dosce-slider-transition: 0.3s ease; --dosce-slider-gap-m: 16px; --dosce-slider-gap-d: 60px; } /* ======================================== RESET / BASE / FIX SCROLL ======================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; max-width: 100%; min-height: 100%; overflow-x: hidden !important; } body.dosce-body { font-family: var(--dosce-ff-base); font-size: var(--dosce-fs-base); color: var(--dosce-body-color); line-height: 1.8; margin: 0; padding: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch; flex-direction: column; align-items: stretch; } body.dosce-body strong { font-weight: 700; } body.dosce-body h1, body.dosce-body h2, body.dosce-body h3, body.dosce-body h4, body.dosce-body h5, body.dosce-body h6 { color: var(--dosce-primary); font-family: var(--dosce-ff-heading); font-weight: var(--dosce-fw-bold); line-height: 1.2; margin-top: 0; margin-bottom: var(--dosce-sp-4); } body.dosce-body h1 { font-size: var(--dosce-h1); } body.dosce-body h2 { font-size: var(--dosce-h2); } body.dosce-body h3 { font-size: var(--dosce-h3); } body.dosce-body h4 { font-size: var(--dosce-h4); } #main-content, .dosce-main { width: 100%; min-width: 0; overflow-x: hidden !important; overflow-y: visible !important; } /* ======================================== UTILIDADES ======================================== */ .dosce-mb-0 { margin-bottom: 0 !important; } .dosce-text-break { overflow-wrap: break-word; word-break: break-word; } .dosce-clearfix::after { content: ""; display: table; clear: both; } .dosce-text-secondary { color: var(--dosce-slider-secondary) !important; } .dosce-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ul li::marker { color: var(--dosce-pink); } ol li::marker { color: var(--dosce-green-light-01); font-weight: var(--dosce-fw-bold); } /* ======================================== DOSCE NAV — top navigation ======================================== */ .dosce-nav { background: #fff; border-bottom: 1px solid #e0e4e2; position: sticky; top: 0; z-index: 200; } .dosce-nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: flex-end; min-height: 56px; position: relative; } .dosce-nav__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; } .dosce-nav__link { display: block; padding: 18px 14px; font-size: 13.5px; font-weight: 400; color: #1a3a34; text-decoration: none; white-space: nowrap; transition: color 0.2s; letter-spacing: 0.01em; } .dosce-nav__link:hover { color: #004136; } .dosce-nav__link--active { font-weight: 700; color: #004136; } .dosce-nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 10px; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } .dosce-nav__hamburger span { display: block; width: 22px; height: 2px; background: #004136; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; } .dosce-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .dosce-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .dosce-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .dosce-nav__brand { display: none; } /* ======================================== HERO BANNER ======================================== */ .dosce-hero { background-color: var(--dosce-primary); color: white; padding: 3rem; overflow: hidden; } .dosce-hero__title { color: white !important; } .dosce-hero__wrapper { background-color: rgba(217, 217, 217, 0.09); border-radius: var(--dosce-radius); display: flex; overflow: hidden; justify-content: space-between; flex-direction: row; max-width: 1400px; margin: 0 auto; min-width: 0; } .dosce-hero__left { padding: 4rem 6rem 8rem; min-width: 0; } .dosce-hero h1 { font-size: clamp(2.5rem, 6vw, 80px); font-family: var(--dosce-ff-heading); line-height: 1.1; } .dosce-hero__desc { font-size: 18px; line-height: 2; color: white; } .dosce-hero__right { flex-shrink: 0; margin-bottom: 60px; max-width: 550px; } .dosce-hero__right img { width: 100%; height: 100%; border-bottom-left-radius: 50%; object-fit: cover; box-shadow: 0 0 50px 8px rgba(255, 255, 255, 0.2); } .dosce-hero__cta { width: 100%; max-width: 1400px; min-height: 100px; margin: 0 auto; display: flex; justify-content: center; padding-top: 45px; margin-top: -90px; position: relative; } .dosce-hero__decorator { position: absolute; top: 0; width: 1400px; object-fit: contain; object-position: center; pointer-events: none; } .dosce-hero__btn { color: var(--dosce-primary); width: 150px; aspect-ratio: 1; padding: 20px; border: none; border-radius: 50%; background: var(--dosce-lime); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; z-index: 1; transition: background-color 0.2s ease, transform 0.2s ease; font-family: var(--dosce-ff-base); font-weight: var(--dosce-fw-semi); font-size: var(--dosce-fs-sm); text-align: center; text-decoration: none; } .dosce-hero__btn:hover { background: var(--dosce-white); text-decoration: none; color: var(--dosce-primary); } .dosce-hero__btn:focus-visible { outline: 3px solid var(--dosce-white); outline-offset: 4px; background: var(--dosce-white); } .dosce-hero__btn:active { transform: scale(0.97); } .dosce-hero__btn--play { width: 180px; gap: 8px; } .dosce-hero__play-icon { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent var(--dosce-primary); display: inline-block; } .dosce-hero__triangle { --r: 3px; height: 30px; aspect-ratio: cos(30deg); --_g: calc(tan(60deg) * var(--r)) left var(--r), #000 98%, #0000 101%; -webkit-mask: conic-gradient(from 60deg at calc(3 * var(--r) / 2 - 100%), #000 60deg, #0000 0) 0 0 / calc(100% - 3 * var(--r) / 2) 100% no-repeat, radial-gradient(var(--r) at calc(100% - 2 * var(--r)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g)); mask: conic-gradient(from 60deg at calc(3 * var(--r) / 2 - 100%), #000 60deg, #0000 0) 0 0 / calc(100% - 3 * var(--r) / 2) 100% no-repeat, radial-gradient(var(--r) at calc(100% - 2 * var(--r)) 50%, #000 98%, #0000 101%), radial-gradient(var(--r) at top var(--_g)), radial-gradient(var(--r) at bottom var(--_g)); clip-path: polygon(100% 50%, 0 100%, 0 0); background: var(--dosce-primary); } /* ======================================== CONTENEDOR GENERAL ======================================== */ .dosce-container { position: relative; width: 100%; max-width: 100%; min-width: 0; padding: 80px 170px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; min-height: 400px; } .dosce-container--standard { padding: 80px 170px; } .dosce-container--light { background: radial-gradient(circle at center, rgba(227, 248, 221, 0.6) 0%, #ffffff 70%); } .dosce-container__content { position: relative; z-index: 10; max-width: 1100px; width: 100%; min-width: 0; } .dosce-heading, .dosce-paragraph { text-align: center; } .dosce-paragraph { margin-bottom: var(--dosce-sp-5); } .dosce-paragraph img { max-width: 100%; } .dosce-tag { display: inline-flex; gap: 10px; padding: 6px 10px; border-radius: 4px; font-family: 'Mutualidad', sans-serif; font-weight: 700; font-size: 14px; line-height: 200%; text-align: center; text-transform: uppercase; margin-bottom: 16px; z-index: 11; } /* Gradientes */ .dosce-gradients { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .dosce-gradient { position: absolute; width: min(40%, 450px); height: min(40%, 450px); aspect-ratio: 1; opacity: 0.4; filter: blur(64px); border-radius: 50%; pointer-events: none; } .dosce-gradient--tr { right: 0; top: 5%; } .dosce-gradient--tl { left: 0; top: 5%; } .dosce-gradient--br { right: 5%; bottom: 10%; } .dosce-gradient--bl { left: 3%; bottom: 15%; } /* Blog / interior layout */ .dosce-body:has(.dosce-container--blog--style) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .dosce-body:has(.dosce-container--blog--style) .dosce-container { overflow: visible; } .dosce-body .dosce-container--blog--style { width: 100%; max-width: 1620px; margin: auto; padding: 0 130px 0 0; } .dosce-body .dosce-container--blog--style .dosce-container__content, .dosce-body:has(.dosce-container--blog--style) .dosce-carta-content { max-width: inherit; } .dosce-body:has(.dosce-container--blog--style) .dosce-main { overflow-x: hidden !important; overflow-y: visible !important; } /* ======================================== GRIDS / CARDS GENERALES ======================================== */ .dosce-explore { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; } .dosce-explore--3col { grid-template-columns: repeat(3, 1fr); } .dosce-explore-card { background: white; border: 1px solid var(--dosce-grey); border-radius: var(--dosce-radius); padding: 32px 24px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; text-decoration: none; color: var(--dosce-primary); } .dosce-body:has(.dosce-container--blog--style) .dosce-explore-card h3 { font-size: var(--dosce-h4); letter-spacing: -0.2px; margin-bottom: 0; } .dosce-explore-card:hover { border-color: var(--dosce-primary); box-shadow: 0 4px 20px rgba(0, 65, 54, 0.08); text-decoration: none; color: var(--dosce-primary); } .dosce-explore-card__icon { width: 135px; height: 135px; object-fit: contain; margin-bottom: 8px; } .dosce-explore-card__title { font-family: var(--dosce-ff-heading); font-size: 22px; font-weight: var(--dosce-fw-bold); color: var(--dosce-primary); margin: 0; line-height: 1.2; } .dosce-explore-card__desc { font-family: var(--dosce-ff-base); font-size: 14px; color: var(--dosce-primary); line-height: 1.5; margin: 0; flex-grow: 1; } .dosce-explore-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--dosce-ff-base); font-size: 14px; font-weight: var(--dosce-fw-bold); color: var(--dosce-primary); text-decoration: none; margin-top: auto; transition: gap 0.2s ease; } .dosce-explore-card:hover .dosce-explore-card__link { gap: 10px; } .dosce-explore-card--green { background: var(--dosce-green); border-color: var(--dosce-green); } .dosce-explore-card--green .dosce-explore-card__title, .dosce-explore-card--green .dosce-explore-card__desc, .dosce-explore-card--green .dosce-explore-card__link { color: #fff; } .dosce-explore-card--green:hover { border-color: var(--dosce-primary); color: #fff; } /* ======================================== CARD GENÉRICA ======================================== */ .dosce-card { background: #fff; border: 1px solid var(--dosce-primary); border-radius: var(--dosce-radius); padding: 24px; display: flex; flex-direction: column; width: 100%; max-width: 345px; height: 100%; } .dosce-card__logo { width: 100px; flex-shrink: 0; margin-bottom: 40px; } .dosce-card__image { width: 100%; height: 100%; object-fit: contain; } .dosce-card__title { font-size: 24px; color: var(--dosce-primary); font-family: 'Rufina'; font-weight: 400; letter-spacing: -1px; margin: 0 0 8px; flex-shrink: 0; } .dosce-card__desc { font-size: 14px; font-family: 'Mutualidad'; color: var(--dosce-primary); line-height: 1.4; margin: 0 0 8px; } .dosce-card__link { display: inline-flex; align-items: center; gap: 10px; font-family: 'Mutualidad'; font-size: 15px; font-weight: 700; color: var(--dosce-primary); text-decoration: none; margin-top: auto; flex-shrink: 0; transition: gap 0.3s ease; } .dosce-card__link:hover { gap: 14px; text-decoration: none; color: var(--dosce-primary); } .dosce-card__link:hover .dosce-card__arrow { transform: translateX(5px); } .dosce-card__arrow { font-size: 1.2rem; display: inline-flex; align-items: center; transition: transform 0.3s ease; } /* ======================================== CARDS GRID ======================================== */ .dosce-cards-grid[data-layout="grid"] > div { display: grid; grid-template-columns: repeat(var(--grid-columns, 3), 1fr); gap: var(--grid-gap, 1.5rem); align-items: stretch; width: 100%; } .dosce-cards-grid[data-layout="grid"] > div > * { display: flex; flex-direction: column; } .dosce-cards-grid[data-layout="grid"] > div > * > * { flex: 1; height: 100%; } /* ======================================== CIFRAS ======================================== */ .dosce-cifras-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; width: 100%; align-items: start; } .dosce-cifras-layout__left { display: flex; flex-direction: column; gap: 16px; } .dosce-cifras-layout__header { font-family: var(--dosce-ff-heading); font-size: clamp(28px, 3.5vw, 40px); font-weight: var(--dosce-fw-bold); color: var(--dosce-primary); line-height: 1.15; margin: 0 0 8px; } .dosce-cifras-layout__image { width: 100%; border-radius: 200px 24px 24px 24px; object-fit: cover; } .dosce-cifras-layout__right { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; } .dosce-cifra-mini { background: #fff; border: 1px solid #e6e6e6; border-radius: 16px; padding: 24px 20px; text-align: left; color: var(--dosce-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .dosce-cifra-mini__number { font-family: 'Rufina', serif; font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height: 1.1; margin: 0 0 8px; color: var(--dosce-primary); } .dosce-cifra-mini__text { font-family: var(--dosce-ff-base); font-size: 13px; line-height: 1.4; color: var(--dosce-primary); margin: 0; } .dosce-cifras-band { background-color: var(--dosce-green); color: white; padding: 60px 20px; overflow: hidden; } .dosce-cifras-band__inner { max-width: 1100px; margin: 0 auto; } .dosce-cifras-band__title { font-family: var(--dosce-ff-heading); font-size: clamp(24px, 3vw, 36px); font-weight: var(--dosce-fw-bold); color: white !important; text-align: center; margin: 0 0 40px; line-height: 1.2; } .dosce-cifras-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .dosce-cifra-band-item { background: #ffffff; border-radius: 16px; text-align: left; padding: 24px 20px; } .dosce-cifra-band-item__number { font-family: 'Rufina', serif; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.1; margin: 0 0 8px; color: var(--dosce-primary); } .dosce-cifra-band-item__text { font-family: var(--dosce-ff-base); font-size: 13px; line-height: 1.4; color: var(--dosce-primary); margin: 0; } /* ======================================== CIFRA BANNER / CARD ======================================== */ .dosce-cifra-banner { display: flex; flex-direction: column; gap: 40px; max-width: 500px; } .dosce-cifra-banner__content { max-width: 500px; gap: 16px; color: var(--dosce-primary); } .dosce-cifra-banner__title { font-family: 'Rufina', serif; font-size: 48px; font-weight: 700; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.02em; text-align: left; } .dosce-cifra-banner__subtitle { font-family: 'Mutualidad', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.5; } .dosce-cifra-banner__img-container { position: relative; max-width: 500px; flex: none; align-self: stretch; overflow: hidden; } .dosce-cifra-banner__img-wrapper { position: relative; width: 100%; height: 100%; border-radius: 200px 24px 24px 24px; overflow: hidden; } .dosce-cifra-banner__img { width: 100%; height: 100%; object-fit: cover; display: block; } .dosce-cifra-banner__overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 376px; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%); border-radius: 24px; pointer-events: none; } .dosce-cifra-banner__curve { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; } .dosce-cifra-banner__curve--desktop { bottom: 80px; left: 50%; transform: translateX(-50%); width: 600px; height: 120px; background-image: url("./imgs/vector-bannercifra-mobile.svg"); } .dosce-cifra-banner__curve--mobile { display: none; bottom: 30px; left: 50%; transform: translateX(-50%); width: 300px; height: 60px; background-image: url("./imgs/vector-bannercifra-mobile.svg"); } .dosce-cifra-card { text-align: right; background-color: #fff; border-radius: var(--dosce-radius); padding: 24px; max-width: 500px; min-height: 175px; width: 100%; border: 1px solid var(--dosce-grey); color: var(--dosce-primary); box-sizing: border-box; overflow-wrap: break-word; } .dosce-cifra-card__title { font-family: 'Rufina'; font-size: clamp(40px, 4.5vw, 84px); line-height: 1.2; font-weight: 700; margin-bottom: 24px; } .dosce-cifra-card__desc { font-family: 'Mutualidad'; font-size: clamp(16px, 1vw, 18px); font-weight: 400; line-height: 1.6; } /* ======================================== QUOTE / TESTIMONIAL ======================================== */ .dosce-quote { width: 100%; max-width: 1100px; margin: 0 auto; padding: 40px 20px; box-sizing: border-box; } .dosce-quote__content { display: flex; gap: 48px; align-items: center; } .dosce-quote__text-section { flex: 1; min-width: 0; } .dosce-quote__blockquote { font-family: var(--dosce-ff-heading); font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; line-height: 1.3; color: var(--dosce-primary); margin: 0 0 24px; letter-spacing: -0.5px; } .dosce-quote__blockquote em, .dosce-quote__highlight { color: var(--dosce-pink-dark); font-style: normal; } .dosce-quote__blockquote i { font-style: italic; } .dosce-quote__author { font-family: var(--dosce-ff-base); font-size: 14px; font-weight: var(--dosce-fw-bold); color: var(--dosce-primary); margin: 0; } .dosce-quote__role { font-weight: var(--dosce-fw-normal); color: var(--dosce-green-light-02); } .dosce-quote__image-wrapper { flex-shrink: 0; height: auto; overflow: hidden; width: 60%; } .dosce-quote__image-wrapper__short { width: 33%; } .dosce-quote__image { width: 100%; height: 100%; object-fit: cover; display: block; } /* ======================================== PROMO ======================================== */ .dosce-promo { position: relative; overflow: hidden; padding: 80px 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .dosce-promo .dosce-text-secondary { color: var(--dosce-green-light-02) !important; } .dosce-promo > *:not(.dosce-promo__image):not(picture) { position: relative; z-index: 1; max-width: 900px; width: 100%; } .dosce-promo > picture, .dosce-promo > .dosce-promo__image { position: absolute !important; top: 50%; transform: translateY(-50%); right: 0; width: auto; height: auto; max-width: 300px; max-height: 400px; z-index: 0; margin: 0 !important; padding: 0 !important; pointer-events: none; line-height: 0; display: block; } .dosce-promo--dark { background-color: var(--dosce-green); color: white; } .dosce-promo--light { background-color: var(--dosce-lime-light); color: var(--dosce-primary); } .dosce-promo__title { font-family: var(--dosce-ff-heading); font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3rem); font-weight: var(--dosce-fw-bold); line-height: 1.15; margin-bottom: 16px; max-width: 900px; } .dosce-promo--dark .dosce-promo__title { color: white; } .dosce-promo__subtitle { font-family: var(--dosce-ff-heading); font-size: clamp(1rem, 1.5vw + 0.25rem, 1.5rem); font-weight: var(--dosce-fw-bold); margin-bottom: 0.5rem; max-width: 600px; } .dosce-promo__subtitle p, .dosce-promo__disclaimer p { margin: 0; } .dosce-promo__disclaimer { font-size: 14px; margin-bottom: 32px; max-width: 650px !important; } .dosce-promo__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; } .dosce-promo__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--dosce-ff-base); font-weight: var(--dosce-fw-semi); font-size: 15px; text-decoration: none; padding: 10px 20px; min-height: 44px; min-width: 44px; border-radius: var(--dosce-pill); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .dosce-promo__cta:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; } .dosce-promo--dark .dosce-promo__cta--primary { background-color: transparent; border-color: var(--dosce-white); color: var(--dosce-white); } .dosce-promo--dark .dosce-promo__cta--primary:hover { background-color: var(--dosce-lime-light); border-color: var(--dosce-lime-light); color: var(--dosce-primary); text-decoration: none; } .dosce-promo--dark .dosce-promo__cta--primary svg path { fill: var(--dosce-lime); } .dosce-promo--dark .dosce-promo__cta--primary:hover svg path { fill: var(--dosce-primary); } .dosce-promo--light .dosce-promo__cta--primary { background-color: var(--dosce-primary); border-color: var(--dosce-primary); color: var(--dosce-lime-light); } .dosce-promo--light .dosce-promo__cta--primary:hover { background-color: var(--dosce-green-dark); border-color: var(--dosce-primary); color: var(--dosce-lime); text-decoration: none; } .dosce-promo--light .dosce-promo__cta--primary svg path { fill: var(--dosce-lime); } /* ======================================== PILARES ======================================== */ .dosce-pilares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 800px; margin: 0 auto; width: 100%; } .dosce-pilar { background: #ffffff; border: 1px solid var(--dosce-primary); border-radius: var(--dosce-radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 8px; } .dosce-pilar__number { font-family: var(--dosce-ff-heading); font-size: 40px; font-weight: 700; line-height: 1; color: var(--dosce-primary); margin-bottom: 4px; } .dosce-pilar__title { font-family: var(--dosce-ff-heading); font-size: 22px; font-weight: 700; color: var(--dosce-primary); margin: 0; line-height: 1.2; } .dosce-pilar__desc { font-family: var(--dosce-ff-base); font-size: 14px; line-height: 1.5; color: var(--dosce-primary); margin: 0; } /* ======================================== ARTICLE / TWO COL ======================================== */ .dosce-article { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; max-width: 1100px; margin: 0 auto; width: 100%; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; min-width: 0; } .dosce-article__title { font-family: var(--dosce-ff-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--dosce-primary); margin: 0 0 20px; line-height: 1.2; } .dosce-article__text { color: var(--dosce-primary); min-width: 0; } .dosce-article__text p { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.7; color: var(--dosce-primary); margin: 0 0 16px; } .dosce-article__text p:last-child { margin-bottom: 0; } .dosce-article__image { display: flex; align-items: center; justify-content: center; } .dosce-article__image img { width: 100%; height: 350px; border-radius: 16px; object-fit: cover; } .dosce-article__placeholder { align-items: center; background: white; border-radius: 16px; border-top-left-radius: 24px; border-top-right-radius: 104px; display: flex; justify-content: center; max-height: 400px; overflow: hidden; } .dosce-two-col { display: flex; align-items: stretch; gap: 20px; width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; } .dosce-two-col__main, .dosce-two-col__side { min-width: 0; } .dosce-two-col__main > div { height: 100%; } .dosce-two-col__main { flex: 1 1 55%; } .dosce-two-col__side { flex: 1 1 45%; } .dosce-two-col__side > * { display: flex; flex-direction: column; gap: 16px; height: 100%; min-width: 0; } .dosce-two-col__side > * > div { flex-grow: 1; } /* ======================================== PAGE LAYOUT (sidebar + main) ======================================== */ .dosce-page { display: grid; grid-template-columns: 352px 1fr; min-height: 100vh; padding: 0 12px; width: 100%; min-width: 0; } .dosce-main { overflow-x: hidden !important; } /* ======================================== SIDEBAR FIX DEFINITIVO RESPONSIVE ======================================== */ .dosce-sidebar { background-color: var(--dosce-light-02); color: #ffffff; padding: 40px 0; position: sticky; height: calc(100vh - 56px); overflow-y: auto; display: flex; flex-direction: column; gap: 32px; width: 352px; } .dosce-sidebar__title { font-family: var(--dosce-ff-heading); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--dosce-primary); text-decoration: none; display: block; padding: 8px 0 8px 28px; } .dosce-sidebar__nav { display: flex; flex-direction: column; gap: 4px; } .dosce-sidebar__link { font-family: var(--dosce-ff-base); font-size: 15px; font-weight: 700; color: var(--dosce-primary); text-decoration: none; padding: 8px 0 8px 28px; transition: color 0.2s ease; line-height: 1.4; } .dosce-sidebar__link:hover { color: #ffffff; text-decoration: none; } .dosce-sidebar__link:hover, .dosce-sidebar__link--active { border-left: 4px solid; color: var(--dosce-primary); padding: 8px 0 8px 24px; text-underline-offset: 4px; } .dosce-sidebar__close, .dosce-sidebar__toggle { display: none; } .dosce-sidebar__backdrop { display: none; } /* ======================================== BREADCRUMB ======================================== */ .dosce-breadcrumb { padding: 20px 40px 20px 90px; font-family: var(--dosce-ff-base); font-size: 14px; color: var(--dosce-green-light-02); } .dosce-breadcrumb__link { color: var(--dosce-green-light-02); text-decoration: none; transition: color 0.2s ease; } .dosce-breadcrumb__link:hover { color: var(--dosce-primary); text-decoration: underline; } .dosce-breadcrumb__sep { margin: 0 8px; color: var(--dosce-green-light-02); } .dosce-breadcrumb__current { color: var(--dosce-primary); font-weight: 700; } /* ======================================== HERO INTERIOR / IMPACT PAGES ======================================== */ .dosce-carta-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-social-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 20px 60px 60px; overflow: hidden; } .dosce-carta-hero__text, .dosce-medioambiente-hero__text, .dosce-gst-sostenibilidad-hero__text, .dosce-social-hero__text { flex: 1; min-width: 0; padding-top: 20px; } .dosce-carta-hero__title, .dosce-medioambiente-hero__title, .dosce-gst-sostenibilidad-hero__title, .dosce-social-hero__title { font-family: var(--dosce-ff-heading); font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.15; color: var(--dosce-primary); margin: 0 0 20px; } .dosce-carta-hero__subtitle, .dosce-medioambiente-hero__subtitle, .dosce-gst-sostenibilidad-hero__subtitle, .dosce-social-hero__subtitle { font-family: var(--dosce-ff-heading); font-size: clamp(16px, 2vw, 20px); font-style: italic; font-weight: 400; color: var(--dosce-primary); margin: 0; line-height: 1.5; } .dosce-carta-hero__portrait, .dosce-medioambiente-hero__portrait, .dosce-gst-sostenibilidad-hero__portrait, .dosce-social-hero__portrait { flex-shrink: 0; width: 320px; height: 320px; position: relative; } .dosce-carta-hero__portrait-bg, .dosce-medioambiente-hero__portrait-bg, .dosce-gst-sostenibilidad-hero__portrait-bg, .dosce-social-hero__portrait-bg { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, var(--dosce-light-02) 0%, var(--dosce-lime-light) 100%); } .dosce-carta-hero__portrait img, .dosce-medioambiente-hero__portrait img, .dosce-gst-sostenibilidad-hero__portrait img, .dosce-social-hero__portrait img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 1; } /* Blog layout hero overrides */ .dosce-container--blog--style :is(.dosce-carta-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-social-hero) { overflow: visible; position: relative; height: 520px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 0 0 90px; gap: 40px; margin-bottom: 80px; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) :is(.dosce-social-hero__text, .dosce-medioambiente-hero__text, .dosce-gst-sostenibilidad-hero__text, .dosce-carta-hero__text) { flex: 1; max-width: 450px; position: relative; z-index: 2; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) :is(.dosce-social-hero__subtitle, .dosce-medioambiente-hero__subtitle, .dosce-gst-sostenibilidad-hero__subtitle, .dosce-carta-hero__subtitle) { font-family: var(--dosce-ff-base); font-style: normal; font-weight: 400; font-size: 18px; color: var(--dosce-primary); opacity: 0.9; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) :is(.dosce-social-hero__portrait, .dosce-medioambiente-hero__portrait, .dosce-gst-sostenibilidad-hero__portrait, .dosce-carta-hero__portrait) { position: relative; width: 50%; max-width: 700px; height: 520px; flex-shrink: 0; z-index: 1; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) :is(.dosce-social-hero__portrait-bg, .dosce-medioambiente-hero__portrait-bg, .dosce-gst-sostenibilidad-hero__portrait-bg, .dosce-carta-hero__portrait-bg) { background: transparent; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) :is(.dosce-social-hero__portrait-img, .dosce-medioambiente-hero__portrait-img, .dosce-gst-sostenibilidad-hero__portrait-img, .dosce-carta-hero__portrait-img) { border-radius: 0 0 0 90px; width: 100%; height: 100%; object-fit: cover; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) .dosce-gradients { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block !important; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) .dosce-gradient--1 { background: radial-gradient(circle, var(--dosce-grad-1) 0%, rgba(255, 255, 255, 0) 75%); position: absolute; top: -5%; left: 25%; width: 450px; height: 450px; border-radius: 50%; filter: blur(20px); } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) .dosce-gradient--2 { background: radial-gradient(circle, var(--dosce-grad-2) 0%, rgba(255, 255, 255, 0) 75%); position: absolute; bottom: -5%; right: -25%; width: 550px; height: 550px; border-radius: 50%; filter: blur(20px); } /* ======================================== PAGE HERO SIMPLE ======================================== */ .dosce-page-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 20px 60px 48px; } .dosce-page-hero__text { flex: 1; min-width: 0; padding-top: 8px; } .dosce-page-hero__title { font-family: var(--dosce-ff-heading); font-size: clamp(36px, 4.5vw, 56px); font-weight: 700; line-height: 1.1; color: var(--dosce-primary); margin: 0 0 16px; } .dosce-page-hero__intro { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.7; color: var(--dosce-primary); max-width: 500px; margin: 0; } .dosce-page-hero__image { flex-shrink: 0; width: 280px; height: 260px; } .dosce-page-hero__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .dosce-page-hero__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--dosce-lime-light) 0%, var(--dosce-light-02) 100%); border-radius: 50% 16px 16px 16px; } /* ======================================== CONTENT / SECTION ======================================== */ .dosce-social-content, .dosce-medioambiente-content, .dosce-gst-sostenibilidad-content, .dosce-carta-content { max-width: 780px; padding: 0 0 20px 90px; color: var(--dosce-primary); } .dosce-social-content p, .dosce-medioambiente-content p, .dosce-gst-sostenibilidad-content p, .dosce-carta-content p { font-family: var(--dosce-ff-base); font-size: 16px; line-height: 1.8; color: var(--dosce-primary); margin: 0 0 24px; } .dosce-social-content strong, .dosce-medioambiente-content strong, .dosce-gst-sostenibilidad-content strong, .dosce-carta-content strong { font-weight: 700; } :is(.dosce-social-content, .dosce-medioambiente-content, .dosce-gst-sostenibilidad-content, .dosce-carta-content) :is(.dosce-social-content__closing, .dosce-medioambiente-content__closing, .dosce-gst-sostenibilidad-content__closing, .dosce-carta-content__closing) { margin-top: 40px !important; margin-bottom: 8px !important; } :is(.dosce-social-content, .dosce-medioambiente-content, .dosce-gst-sostenibilidad-content, .dosce-carta-content) :is(.dosce-social-content__author, .dosce-medioambiente-content__author, .dosce-gst-sostenibilidad-content__author, .dosce-carta-content__author) { font-family: var(--dosce-ff-base); font-size: 16px; font-weight: 700; color: var(--dosce-primary); margin: 0 0 4px !important; } :is(.dosce-social-content, .dosce-medioambiente-content, .dosce-gst-sostenibilidad-content, .dosce-carta-content) :is(.dosce-social-content__role, .dosce-medioambiente-content__role, .dosce-gst-sostenibilidad-content__role, .dosce-carta-content__role) { font-family: var(--dosce-ff-base); font-size: 15px; font-weight: 400; color: var(--dosce-green-light-02); margin: 0 !important; } .dosce-carta-content__quote { border-left: 4px solid var(--dosce-pink); padding: 16px 24px; margin: 32px 0; background: var(--dosce-lime-light); border-radius: 0 12px 12px 0; } .dosce-carta-content__quote p { font-family: var(--dosce-ff-heading); font-size: clamp(16px, 2vw, 20px); font-style: italic; color: var(--dosce-primary); margin: 0; line-height: 1.6; } .dosce-section { padding: 40px 40px 40px 90px; } .dosce-section--alt { background-color: transparent; } .dosce-section__inner { max-width: 100%; } .dosce-section__title { font-family: var(--dosce-ff-heading); font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2; color: var(--dosce-primary); margin: 0 0 28px; } .dosce-section__lead { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.7; color: var(--dosce-primary); margin: 0 0 24px; } .dosce-section__text { margin-bottom: 24px; } .dosce-section__text p { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.75; color: var(--dosce-primary); margin: 0 0 28px; } .dosce-section__text p:last-child { margin-bottom: 0; } .dosce-section__subtitle { font-family: var(--dosce-ff-base); font-size: 20px; font-weight: 700; color: var(--dosce-primary); margin-top: 40px; margin-bottom: 20px; } .dosce-section__list { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.75; color: var(--dosce-primary); } .dosce-callout { background: var(--dosce-light-02); border-radius: 16px; padding: 24px 32px; margin: 28px 0 32px; } .dosce-callout p { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.7; color: var(--dosce-primary); margin: 0; } .dosce-subsection { margin: 8px 0 16px; } .dosce-subsection__tag { display: block; font-family: var(--dosce-ff-base); font-size: 14px; font-style: normal; font-weight: 700; color: var(--dosce-primary); line-height: 1.4; } /* ======================================== ICON GRID / ICON CARD ======================================== */ .dosce-icon-grid { display: grid; gap: 14px; margin: 0 0 40px; } .dosce-icon-grid--1col { grid-template-columns: 1fr; max-width: 440px; margin: 40px 0; } .dosce-icon-grid--2col { grid-template-columns: repeat(2, 1fr); padding: 40px 60px; gap: 24px; } .dosce-icon-grid--2col-narrow { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: 40px auto; gap: 24px; } .dosce-icon-grid--3col { grid-template-columns: repeat(3, 1fr); padding: 40px 0; gap: 24px; } .dosce-icon-grid--4col { grid-template-columns: repeat(2, 1fr); padding: 40px 60px; gap: 24px; } .dosce-icon-grid--one-row { grid-template-columns: repeat(4, 1fr); padding: 40px 60px; gap: 24px; } .dosce-icon-card { background: #ffffff; border: 1px solid #e6e6e6; border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; height: 100%; } .dosce-icon-card--wide { grid-column: span 2; } .dosce-icon-card--outline { background: transparent; border: 1px solid var(--dosce-primary); border-radius: 24px; padding: 32px 24px 40px; } .dosce-icon-card--outline .dosce-icon-card__img { margin: 0 auto 16px; } .dosce-icon-card--outline .dosce-icon-card__title { font-family: var(--dosce-ff-base); font-size: 15px; line-height: 1.7; font-weight: 400; color: var(--dosce-primary); text-align: left; } .dosce-icon-card__img { width: 100%; max-width: 160px; height: auto; margin: 0 auto 8px; display: block; } .dosce-icon-card__title { font-family: var(--dosce-ff-base); font-size: 14px; font-weight: 400; color: var(--dosce-primary); margin: 0; line-height: 1.5; } .dosce-icon-card__desc { font-family: var(--dosce-ff-base); font-size: 13px; line-height: 1.5; color: var(--dosce-primary); margin: 0; opacity: 0.85; } .dosce-icon-placeholder { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--dosce-lime-light) 30%, var(--dosce-lime) 100%); flex-shrink: 0; } .dosce-icon-placeholder--sm { width: 44px; height: 44px; } /* ======================================== STAT CARD / STATS ======================================== */ .dosce-stat-card { background-color: #ffffff; border: 1px solid #e6e6e6; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; justify-content: flex-start; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); min-height: 240px; position: relative; width: 100%; } .dosce-stat-card__indicator { width: 56px; height: 56px; border-radius: 50%; color: var(--dosce-primary); font-family: var(--dosce-ff-heading); font-size: 44px; font-weight: 700; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; position: relative; z-index: 1; } .dosce-stat-card__indicator::before { content: ""; position: absolute; top: 5px; left: 5px; width: 38px; height: 38px; border-radius: 50%; z-index: -1; opacity: 0.8; } .dosce-stat-card--pink .dosce-stat-card__indicator::before { background-color: #D1A4C4; } .dosce-stat-card--green .dosce-stat-card__indicator::before { background-color: #e8f5e9; } .dosce-stat-card__number { font-family: var(--dosce-ff-heading); font-size: clamp(28px, 5vw, 80px); line-height: 1; font-weight: 400; margin: 8px 0 4px; color: var(--dosce-primary); } .dosce-stat-card__text { font-family: var(--dosce-ff-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 400; line-height: 1.3; color: var(--dosce-primary); } .dosce-stat-card__desc { font-family: var(--dosce-ff-base); font-size: 14px; font-weight: 400; line-height: 2; color: var(--dosce-primary); margin: 0; } .dosce-stat-card--filled { background-color: var(--dosce-green-light-01); border: 1.5px solid white; box-shadow: none; gap: 0; } .dosce-stat-card--filled .dosce-stat-card__number, .dosce-stat-card--filled .dosce-stat-card__text { color: var(--dosce-white); } .dosce-stat-card--ghost { background: var(--dosce-green-light-01) !important; border: 1px solid white !important; border-radius: 20px !important; padding: 24px !important; min-height: 180px !important; box-shadow: none !important; color: #ffffff !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; transition: transform 0.3s ease; width: 100%; height: 100px; } .dosce-stat-card--ghost:hover { background: rgba(255, 255, 255, 0.12) !important; transform: translateY(-5px); } .dosce-stat-card--ghost .dosce-stat-card__number { color: #ffffff !important; font-size: 42px !important; margin-bottom: 4px; line-height: 1; } .dosce-stat-card--ghost .dosce-stat-card__text { color: #ffffff !important; line-height: 1.3; margin: 8px 0; } .dosce-stat-card--ghost strong { font-weight: 700; } .dosce-stat-card--ghost-wide { min-width: 380px; min-height: 240px !important; } .dosce-stats-section { background-color: var(--dosce-primary); padding: 80px 100px; color: #ffffff; } .dosce-stats-section__title { font-family: var(--dosce-ff-heading); font-size: clamp(24px, 3vw, 36px); font-weight: var(--dosce-fw-bold); color: #ffffff; text-align: center; margin: 0 0 60px; line-height: 1.2; } .dosce-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 80px 80px; } .dosce-stats-section--diversity { background-color: #004136; background-image: url('./imgs/social/Ornament_big.svg'); background-repeat: no-repeat; background-position: top 40px right -20px; background-size: 450px; padding: 100px 0; } .dosce-stats-section--diversity .dosce-stats-section__title { font-size: 36px; } .dosce-stats-section--diversity .dosce-stat-card__text { font-family: var(--dosce-ff-heading) !important; font-size: 24px !important; line-height: 1.2; } .dosce-stats-container { max-width: 1380px !important; margin: 0 auto; padding: 80px 100px; width: 100%; display: flex; flex-direction: column; align-items: center; } .dosce-stats-intro { max-width: 800px; margin: 0 auto 100px; text-align: center; color: #ffffff !important; font-size: 17px; line-height: 1.6; font-weight: 300; position: relative; z-index: 5; } .dosce-top-stats-row { display: flex; justify-content: center; gap: 40px; margin: 0 auto 80px; width: 100%; transition: all 0.3s ease; align-items: center; } .dosce-stats-tag { display: inline-block; background-color: #B9EDAA; color: var(--dosce-primary); font-family: var(--dosce-ff-base); font-size: 13px; font-weight: 800; text-transform: uppercase; padding: 4px 12px; border-radius: 0; margin-bottom: 24px; letter-spacing: 1px; } .dosce-stats-grid--2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .dosce-stats-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 24px; width: 100%; } .dosce-stats-group { margin-top: 0; } /* ======================================== VARIABLE GRID ======================================== */ .dosce-variable-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin: 40px 0; align-items: start; } .dosce-variable-grid .dosce-stat-card { height: auto; min-height: auto; } .card-w-4 { grid-column: span 4; } .card-w-5 { grid-column: span 5; } .card-w-6 { grid-column: span 6; } .card-w-7 { grid-column: span 7; } .card-w-8 { grid-column: span 8; } .card-mt-sm { margin-top: 20px; } .card-mt-md { margin-top: 40px; } .card-mt-lg { margin-top: 60px; } /* ======================================== IMG GOBERNANZA ======================================== */ .dosce-img-mobile { display: none; visibility: hidden; } /* ======================================== TABLAS / SVG ======================================== */ .dosce-emissions-table-wrap, .dosce-esg-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dosce-emissions-table-wrap { margin-top: 40px; border-radius: 8px; border: 1px solid #c8ddd8; } .dosce-emissions-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--dosce-primary); background: #ffffff; min-width: 520px; } .dosce-emissions-table thead tr { background-color: var(--dosce-primary); color: #ffffff; } .dosce-emissions-table thead th { padding: 18px 28px; text-align: left; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .dosce-emissions-table thead th:not(:first-child) { text-align: right; } .dosce-emissions-table tbody tr { border-bottom: 1px solid #ddeee9; } .dosce-emissions-table tbody tr:last-child { border-bottom: none; } .dosce-emissions-table tbody td { padding: 15px 28px; vertical-align: middle; } .dosce-emissions-table tbody td:not(:first-child) { text-align: right; white-space: nowrap; } .dosce-emissions-table__row--scope td { background-color: #e3f5dd; font-weight: 700; color: var(--dosce-primary); } .dosce-emissions-table__row--scope3 td { background-color: #d3edcb; font-weight: 700; color: var(--dosce-primary); } .dosce-emissions-table tbody td.dosce-emissions-table__sub { padding-left: 44px; font-weight: 400; } .dosce-emissions-table tbody td.dosce-emissions-table__subsub { padding-left: 60px; font-weight: 400; font-style: italic; color: var(--dosce-green-light-01); } .dosce-emissions-table__row--total td { background-color: var(--dosce-primary); color: #ffffff; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.85rem; } .dosce-emissions-table tbody tr:not(.dosce-emissions-table__row--scope):not(.dosce-emissions-table__row--scope3):not(.dosce-emissions-table__row--total):hover td { background-color: #f0faf0; transition: background-color 0.15s ease; } .dosce-materiality-wrap { width: 100%; margin: 32px 0 0; } .dosce-materiality-svg { width: 100%; height: auto; display: block; } .dosce-esg-table-wrap { margin-top: 28px; border-radius: 6px; } .dosce-esg-table { width: 100%; border-collapse: collapse; font-family: var(--dosce-ff-base); font-size: 13.5px; color: var(--dosce-primary); } .dosce-esg-table thead tr { border-top: 2px solid var(--dosce-primary); border-bottom: 2px solid var(--dosce-primary); } .dosce-esg-table thead th { padding: 14px 20px; font-weight: 700; font-size: 13px; color: var(--dosce-primary); background: #fff; text-align: left; } .dosce-esg-table__th-num, .dosce-esg-table__num { text-align: right; white-space: nowrap; } .dosce-esg-table__th-dim { width: 110px; } .dosce-esg-table__th-aspect { min-width: 320px; } .dosce-esg-table tbody tr { border-bottom: 1px solid #e0ece8; } .dosce-esg-table tbody tr:last-child { border-bottom: 2px solid var(--dosce-primary); } .dosce-esg-table tbody td { padding: 12px 20px; vertical-align: middle; line-height: 1.45; } .dosce-esg-table__row--first td { border-top: 2px solid var(--dosce-primary); } .dosce-esg-table__dim { font-weight: 600; font-size: 13px; color: var(--dosce-primary); vertical-align: top; padding-top: 16px !important; white-space: nowrap; } .dosce-esg-table__var--pos { color: #2a7a2a; font-weight: 600; } .dosce-esg-table__var--neg { color: #c0392b; font-weight: 600; } .dosce-esg-table__var--neu { color: #888; } .dosce-esg-table tbody tr:hover td { background-color: #f5faf7; transition: background-color 0.12s ease; } .dosce-esg-table__notes { margin: 20px 0 0; padding: 0 0 0 18px; list-style: decimal; display: flex; flex-direction: column; gap: 4px; } .dosce-esg-table__notes li { font-family: var(--dosce-ff-base); font-size: 11px; line-height: 1.55; color: #666; } /* ======================================== ESG PLAN ======================================== */ .dosce-esg-plan { margin: 32px 0 0; } .dosce-esg-plan__title { font-family: var(--dosce-ff-heading); font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: var(--dosce-primary); margin: 0 0 32px; } .dosce-esg-plan__layout { display: flex; align-items: stretch; gap: 0; } .dosce-esg-plan__proposito { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; max-width: 150px; flex-shrink: 0; padding-right: 20px; position: relative; } .dosce-esg-plan__proposito::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 2px; background: linear-gradient(to bottom, #b8d4a0, #d4a8bc, #a8b89a); border-radius: 2px; } .dosce-esg-plan__proposito-label { font-family: var(--dosce-ff-heading); font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: var(--dosce-primary); margin-bottom: 16px; } .dosce-esg-plan__proposito-text { font-family: var(--dosce-ff-base); font-size: 12px; line-height: 1.6; color: var(--dosce-primary); text-align: center; margin: 0; } .dosce-esg-plan__rows { flex: 1; display: flex; flex-direction: column; gap: 0; padding-left: 20px; position: relative; } .dosce-esg-row { display: flex; align-items: center; gap: 0; position: relative; padding: 18px 0; } .dosce-esg-row + .dosce-esg-row { margin-top: -8px; } .dosce-esg-row__icon-wrap { position: relative; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .dosce-esg-row__icon-wrap--e { background: #0d3d30; } .dosce-esg-row__icon-wrap--s { background: #b07090; } .dosce-esg-row__icon-wrap--g { background: #6e8060; } .dosce-esg-row__icon-svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); } .dosce-esg-row__letter { font-family: Georgia, 'Times New Roman', serif; font-size: 36px; font-weight: 700; color: rgba(255, 255, 255, 0.22); position: absolute; bottom: 6px; right: 10px; line-height: 1; user-select: none; pointer-events: none; } .dosce-esg-row__pill { flex-shrink: 0; width: 260px; border-radius: 40px; padding: 20px 28px; margin-left: -12px; z-index: 1; } .dosce-esg-row__pill--e { background: #d6e8d4; } .dosce-esg-row__pill--s { background: #e8d0dc; } .dosce-esg-row__pill--g { background: #dde5d4; } .dosce-esg-row__pill-title { display: block; font-family: var(--dosce-ff-heading); font-size: 13px; font-weight: 700; color: var(--dosce-primary); margin-bottom: 6px; } .dosce-esg-row__pill-desc { font-family: var(--dosce-ff-base); font-size: 11.5px; line-height: 1.55; color: var(--dosce-primary); margin: 0; } .dosce-esg-row__list { flex: 1; list-style: none; margin: 0; padding: 0 0 0 32px; display: flex; flex-direction: column; gap: 9px; } .dosce-esg-row__list li { font-family: var(--dosce-ff-base); font-size: 12px; line-height: 1.5; color: var(--dosce-primary); padding-left: 18px; position: relative; } .dosce-esg-row__list li::before { content: '→'; position: absolute; left: 0; color: var(--dosce-primary); font-size: 11px; } /* ======================================== ODS CHART ======================================== */ .dosce-ods-chart { width: 100%; margin: 36px 0 0; user-select: none; } .dosce-ods-chart__bars { display: flex; align-items: flex-end; gap: 10px; height: 300px; padding: 0 4px; } .dosce-ods-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; } .dosce-ods-bar__col { width: 100%; height: var(--bar-h); background-color: var(--bar-c); display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; min-height: 40px; } .dosce-ods-bar__val { font-family: var(--dosce-ff-heading); font-size: clamp(20px, 2.5vw, 30px); font-weight: 700; color: #fff; line-height: 1; } .dosce-ods-chart__icons { display: flex; gap: 10px; padding: 0 4px; margin-top: 8px; } .dosce-ods-icon { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .dosce-ods-icon img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .dosce-ods-icon__label { font-family: var(--dosce-ff-base); font-size: clamp(8px, 0.85vw, 10px); line-height: 1.3; text-align: center; text-transform: uppercase; margin: 0; } .dosce-ods-icon__label strong { display: block; font-size: 1.2em; } .dosce-ods-chart__groups { display: flex; gap: 10px; padding: 6px 4px 0; } .dosce-ods-group { display: flex; flex-direction: column; align-items: center; position: relative; } .dosce-ods-group::before { content: ''; display: block; width: 100%; height: 8px; border-left: 1.5px solid #555; border-right: 1.5px solid #555; border-bottom: 1.5px solid #555; box-sizing: border-box; } .dosce-ods-group__label { font-family: var(--dosce-ff-base); font-size: 14px; font-weight: 600; color: var(--dosce-primary); margin-top: 4px; font-style: italic; } .dosce-ods-chart__mobile { display: none; } .dosce-ods-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; margin-top: 36px; align-items: stretch; } .dosce-ods-card { border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; height: 100%; } .dosce-ods-card__header { background: var(--dosce-primary); color: #fff; font-family: var(--dosce-ff-heading); font-size: 18px; font-weight: 700; line-height: 1.35; padding: 10px 14px; height: 80px; display: flex; align-items: center; flex-shrink: 0; } .dosce-ods-card__body { display: flex; flex-direction: column; flex: 1; } .dosce-ods-card__group--main { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px; background: #c8c8c6; } .dosce-ods-card__group--sec { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px; background: #e8e8e6; flex: 1; align-content: flex-start; } .dosce-ods-card__group--main img { width: 100px; height: 100px; object-fit: cover; display: block; transition: transform 0.25s ease; transform-origin: center center; } .dosce-ods-card__group--sec img { width: 90px; height: 90px; object-fit: cover; display: block; transition: transform 0.25s ease; transform-origin: center center; } .dosce-ods-card__group--main img:hover, .dosce-ods-card__group--sec img:hover { transform: scale(1.2); } .dosce-ods-cards__legend { display: flex; gap: 24px; margin-top: 16px; padding: 10px 14px; background: #e8e8e6; border-radius: 6px; width: fit-content; } .dosce-ods-cards__legend-item { display: flex; align-items: center; gap: 8px; font-family: var(--dosce-ff-base); font-size: 12px; color: var(--dosce-primary); } .dosce-ods-cards__legend-dot { display: block; flex-shrink: 0; } .dosce-ods-cards__legend-dot--main { width: 18px; height: 18px; background: #c8c8c6; border: 1px solid #aaa; } .dosce-ods-cards__legend-dot--sec { width: 13px; height: 13px; background: #e8e8e6; border: 1px solid #aaa; } /* ======================================== LOGOS GRID (unificado) ======================================== */ .dosce-logos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 28px; align-items: center; width: 100%; } .dosce-logos-grid__item { display: flex; align-items: center; justify-content: center; padding: 20px; background: #fff; border-radius: 6px; transition: box-shadow 0.2s ease; } .dosce-logos-grid__item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .dosce-logos-grid__item img, .dosce-logos-grid > img { max-width: 100%; max-height: 120px; width: auto; height: auto; object-fit: contain; display: block; } /* ======================================== SLIDER ======================================== */ .dosce-slider { width: 100%; max-width: 1100px; margin: 0 auto; padding: 40px 20px; box-sizing: border-box; overflow: hidden; } .dosce-slider__track-wrapper { width: 100%; margin-bottom: 32px; overflow: hidden; } .dosce-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 24px; } .dosce-slider__track::-webkit-scrollbar { display: none; } .dosce-slider__slide { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; } .dosce-slider__container { min-height: 500px; } .dosce-slider__slide-inner { height: 100%; } .dosce-slider__content { display: flex; flex-direction: column; gap: 30px; align-items: center; width: 100%; } .dosce-slider__text-section, .dosce-slider__text { width: 100%; display: flex; flex-direction: column; gap: var(--dosce-slider-gap-m); } .dosce-slider__title { font-size: 32px; line-height: 120%; letter-spacing: -0.84px; color: var(--dosce-slider-text); font-family: Rufina, serif; font-weight: 700; } .dosce-slider__author { font-family: Mutualidad, sans-serif; font-weight: 400; line-height: 160%; font-size: 14px; margin: 0; color: var(--dosce-slider-text); } .dosce-slider__img-wrapper { position: relative; width: 100%; max-width: 500px; max-height: 450px; flex-shrink: 0; overflow: visible; padding: 24px 48px 32px 24px; box-sizing: border-box; } .dosce-slider__img { width: 100%; height: auto; max-height: 450px; display: block; object-fit: contain; } .dosce-slider__label { position: absolute; padding: 18px 24px; font-size: 32px; color: var(--dosce-slider-text); border-radius: 12px; background: var(--dosce-slider-label-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; line-height: 110%; letter-spacing: -0.72px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: calc(100% - 24px); z-index: 2; font-family: Rufina, serif; font-weight: 700; } .dosce-slider__container--layout1 .dosce-slider__label--1 { top: 12%; right: 4%; } .dosce-slider__container--layout1 .dosce-slider__label--2 { bottom: 42%; left: 2%; } .dosce-slider__container--layout1 .dosce-slider__label--3 { bottom: 8%; right: 8%; } .dosce-slider__controls { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-top: 24px; } .dosce-slider__nav { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: start; gap: var(--dosce-slider-gap-m); min-width: 0; } .dosce-slider__dots { display: flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 0 8px; } .dosce-slider__dot { width: 8px; height: 8px; border-radius: 50%; background-color: transparent; cursor: pointer; transition: all var(--dosce-slider-transition); border: 1px solid var(--dosce-slider-dot-border); flex-shrink: 0; padding: 0; } .dosce-slider__dot:hover { background-color: var(--dosce-slider-dot-hover); transform: scale(1.1); } .dosce-slider__dot--active { background: var(--dosce-slider-dot-active); width: 101px; border-radius: 8px; } .dosce-slider__btn { background-color: transparent; border: none; color: var(--dosce-slider-btn-fill); width: 52px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--dosce-slider-transition); flex-shrink: 0; position: relative; padding: 0; } .dosce-slider__btn svg { width: 52px; height: 40px; display: block; } .dosce-slider__btn path { fill: var(--dosce-slider-btn-fill); transition: fill var(--dosce-slider-transition); } .dosce-slider__btn--prev:hover { transform: translateX(-4px); } .dosce-slider__btn--next:hover { transform: translateX(4px); } .dosce-slider__btn:disabled { opacity: 0.3; cursor: not-allowed; } .dosce-slider__btn:disabled path { fill: var(--dosce-slider-btn-disabled); } .dosce-slider__btn:disabled:hover { transform: none; } .dosce-slider__btn:focus, .dosce-slider__dot:focus { outline: none; } .dosce-slider__btn:focus-visible, .dosce-slider__dot:focus-visible { outline: 2px solid var(--dosce-primary); outline-offset: 2px; } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 1200px) { .dosce-hero__left { padding: var(--dosce-sp-6) var(--dosce-sp-6) var(--dosce-sp-7); } .dosce-hero__right { max-width: 400px; } } @media (max-width: 1024px) { .dosce-container { min-height: 350px; } .dosce-container--standard { padding: 60px 100px; } .dosce-gradient { width: min(45%, 400px); height: min(45%, 400px); opacity: 0.35; filter: blur(56px); } .dosce-gradient--tr { right: -18%; top: -18%; } .dosce-gradient--tl { left: -18%; top: -18%; } } @media (max-width: 991px) { body.dosce-body h1 { font-size: var(--dosce-h1-md); } body.dosce-body h2 { font-size: var(--dosce-h2-md); } body.dosce-body h3 { font-size: var(--dosce-h3-md); } .dosce-explore { grid-template-columns: repeat(2, 1fr); } .dosce-cifras-layout { grid-template-columns: 1fr; } .dosce-cifras-layout__image { max-height: 280px; border-radius: 24px; } .dosce-quote__content { gap: 32px; } .dosce-quote__image-wrapper { width: 260px; height: 340px; } .dosce-page { grid-template-columns: 1fr; min-height: auto; } .dosce-page-hero { flex-direction: column; gap: 24px; padding: 20px 40px 32px; } .dosce-page-hero__image { width: 100%; height: 200px; } .dosce-page-hero__intro { max-width: 100%; } .dosce-stats-section--diversity { background-size: 300px; background-position: top 20px right -50px; } .dosce-stats-container { padding: 60px 40px; } .dosce-top-stats-row { gap: 24px; margin-bottom: 60px; } .dosce-stats-wrapper { grid-template-columns: 1fr; gap: 40px; } .dosce-variable-grid { gap: 20px; } .dosce-cards-grid[data-layout="grid"] > div { grid-template-columns: repeat(2, 1fr); } .dosce-container--blog--style :is(.dosce-carta-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-social-hero) { padding: 24px; height: auto !important; } /* NAV mobile */ .dosce-nav__inner { justify-content: flex-start; padding: 0 16px; } .dosce-nav__hamburger { display: flex; } .dosce-nav__brand { display: block; font-size: 13px; font-weight: 600; color: #004136; text-decoration: none; padding: 8px 0; } .dosce-nav__list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid #e0e4e2; border-bottom: 1px solid #e0e4e2; box-shadow: 0 6px 16px rgba(0, 65, 54, 0.1); display: none; z-index: 100; } .dosce-nav__list--open { display: flex; } .dosce-nav__link { padding: 14px 24px; font-size: 14px; border-bottom: 1px solid #f0f2f1; white-space: normal; } .dosce-nav__link:last-child { border-bottom: none; } /* SIDEBAR mobile fix */ .dosce-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: min(300px, calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; height: 100dvh !important; max-height: 100dvh !important; z-index: 300 !important; padding: 64px 24px 32px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; transform: translate3d(-110%, 0, 0) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s !important; will-change: transform; } .dosce-sidebar--open { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: transform 0.3s ease, opacity 0.2s ease !important; } .dosce-sidebar__backdrop { display: block !important; position: fixed !important; inset: 0 !important; background: rgba(0, 41, 34, 0.45) !important; z-index: 290 !important; backdrop-filter: blur(2px); opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease, visibility 0s linear 0.2s !important; } .dosce-sidebar__backdrop--visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .dosce-sidebar__close { display: flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; color: var(--dosce-primary); border-radius: 6px; transition: background 0.2s; } .dosce-sidebar__close:hover { background: rgba(0, 65, 54, 0.1); } .dosce-sidebar__toggle { display: flex; align-items: center; gap: 10px; background: none; border: 1.5px solid var(--dosce-primary); border-radius: 8px; padding: 10px 16px; cursor: pointer; color: var(--dosce-primary); font-family: var(--dosce-ff-base); font-size: 14px; font-weight: 600; margin: 16px 24px; width: fit-content; transition: background 0.2s, color 0.2s; position: relative; z-index: 210; } .dosce-sidebar__toggle:hover { background: var(--dosce-primary); color: #fff; } .dosce-sidebar__toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 16px; flex-shrink: 0; } .dosce-sidebar__toggle-bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; } .dosce-sidebar__title { font-size: 17px; padding: 8px 0 8px 16px; } .dosce-sidebar__link { font-size: 14px; padding: 10px 0 10px 16px; } .dosce-sidebar__link--active, .dosce-sidebar__link:hover { padding: 10px 0 10px 12px; } .dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero { flex-direction: column-reverse; align-items: center; padding: 24px; gap: 24px; } .dosce-container--blog--style :is(.dosce-social-hero, .dosce-medioambiente-hero, .dosce-gst-sostenibilidad-hero, .dosce-carta-hero) :is(.dosce-social-hero__portrait, .dosce-medioambiente-hero__portrait, .dosce-gst-sostenibilidad-hero__portrait, .dosce-carta-hero__portrait) { position: relative; top: 0; width: 240px; height: 240px; margin: 32px auto 0; right: auto; max-width: 100%; } :is(.dosce-social-hero__text, .dosce-medioambiente-hero__text, .dosce-gst-sostenibilidad-hero__text, .dosce-carta-hero__text) { text-align: center; padding-top: 0; max-width: 100% !important; } } @media (max-width: 980px) { .dosce-hero__wrapper { flex-direction: column; position: relative; border-top-left-radius: 24px; border-top-right-radius: 104px; } .dosce-hero__left { padding: 0; } .dosce-hero__title-bg { position: relative; z-index: 1; min-height: 360px; padding: 2rem; display: flex; align-items: flex-end; background-image: url(/documents/d/mutualidad/esquinasupbannerprincipal); background-size: cover; background-position: center; background-repeat: no-repeat; } .dosce-hero__title-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.65)); z-index: 0; } .dosce-hero h1 { font-size: clamp(2rem, 8vw, 52px); position: relative; z-index: 1; } .dosce-hero__right { position: absolute; top: 0; left: 0; right: 0; height: 360px; max-width: 100%; overflow: hidden; z-index: 0; } .dosce-hero__right img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; } .dosce-hero__desc { padding: var(--dosce-sp-3); margin-bottom: var(--dosce-sp-8); } .dosce-hero__cta { width: 100%; margin-top: -130px; } .dosce-hero__decorator { width: 1400px; object-fit: cover; object-position: center top; } } @media (max-width: 900px) { .dosce-cifra-banner__curve--desktop { display: none; } .dosce-cifra-banner__curve--mobile { display: block; bottom: 40px; left: 0; transform: none; width: 100%; height: 100px; background-image: url("/documents/d/mutualidad/vector-bannercifra-tablet"); } } @media (max-width: 860px) { .dosce-promo > picture, .dosce-promo > .dosce-promo__image { max-width: 200px; max-height: 260px; opacity: 0.5; } } @media (max-width: 768px) { .dosce-container { min-height: 300px; } .dosce-container--standard { padding: 40px 60px; } .dosce-gradient { width: min(50%, 350px); height: min(50%, 350px); opacity: 0.3; filter: blur(48px); } .dosce-gradient--tr { right: -20%; top: -20%; } .dosce-gradient--tl { left: -20%; top: -20%; } .dosce-body .dosce-container--blog--style { padding: 0; } .dosce-article { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; } .dosce-two-col { flex-direction: column; gap: 16px; align-items: flex-start; } .dosce-two-col__main, .dosce-two-col__side { flex: 1 1 auto; width: 100%; } .dosce-two-col__main > div, .dosce-two-col__side > * { height: auto; } .dosce-two-col__side > * { gap: 8px; } .dosce-two-col__side > * > div { flex-grow: 0; } .dosce-promo { padding: 60px 15px; } .dosce-promo > picture, .dosce-promo > .dosce-promo__image { display: none; } .dosce-promo__title { font-size: 28px; margin-bottom: 1.5rem; } .dosce-promo__subtitle { font-size: 16px; font-weight: var(--dosce-fw-normal); font-family: var(--dosce-ff-base); margin-bottom: 1.5rem; } .dosce-promo__disclaimer { margin-bottom: 24px; } .dosce-promo__buttons { flex-direction: column; align-items: center; width: 100%; margin-top: 24px; } .dosce-promo__cta { width: 100%; max-width: 360px; padding: 12px 25px; font-size: 16px; } .dosce-cifra-banner { gap: 24px; max-width: 95%; justify-self: center; } .dosce-cifra-banner__content { order: 2; width: 100%; align-self: center; } .dosce-cifra-banner__title { font-size: 24px; line-height: 1.2; margin-bottom: 12px; } .dosce-cifra-banner__subtitle { font-size: 16px; } .dosce-cifra-banner__img-container { order: 1; height: 190px; width: 100%; align-self: center; } .dosce-cifra-banner__img-wrapper, .dosce-cifra-banner__overlay { border-radius: 24px; } .dosce-cifra-banner__overlay { height: 100%; } .dosce-cifra-banner__curve--mobile { bottom: 35px; height: 100px; } } @media (max-width: 767px) { body.dosce-body h1 { font-size: var(--dosce-h1-sm); } body.dosce-body h2 { font-size: var(--dosce-h2-sm); } body.dosce-body h3 { font-size: var(--dosce-h3-sm); } .dosce-explore--3col, .dosce-pilares, .dosce-icon-grid--2col, .dosce-icon-grid--3col, .dosce-icon-grid--4col, .dosce-icon-grid--one-row, .dosce-variable-grid, .dosce-stats-grid { grid-template-columns: 1fr; } .card-w-4, .card-w-5, .card-w-6, .card-w-7, .card-w-8 { grid-column: span 1; } .card-mt-sm, .card-mt-md, .card-mt-lg { margin-top: 0; } .dosce-icon-grid--2col, .dosce-icon-grid--one-row { padding: 24px 16px; } .dosce-icon-grid--2col-narrow { grid-template-columns: 1fr; max-width: 100%; margin: 24px 0; } .dosce-icon-card--wide { grid-column: span 1; } .dosce-breadcrumb { padding: 16px 24px; } .dosce-social-content, .dosce-medioambiente-content, .dosce-gst-sostenibilidad-content, .dosce-carta-content, .dosce-section { padding: 0 24px 40px; } .dosce-section { padding-top: 32px; } .dosce-section__title { font-size: 24px; } .dosce-section__subtitle { font-size: 18px; margin-top: 30px; } .dosce-social-content p, .dosce-medioambiente-content p, .dosce-gst-sostenibilidad-content p, .dosce-carta-content p { font-size: 15px; line-height: 1.7; } .dosce-quote__content { flex-direction: column; gap: 24px; } .dosce-quote__image-wrapper { width: 100%; max-width: 300px; height: 300px; align-self: center; order: -1; border-radius: 24px; } .dosce-quote__blockquote { font-size: 22px; } .dosce-cifra-card { padding: 24px; } .dosce-cifra-card__title, .dosce-cifra-card__desc { text-align: left; } .dosce-stats-section { padding: 60px 24px; } .dosce-stats-grid { gap: 16px; padding: 40px 0; } .dosce-stats-container { padding: 40px 24px; } .dosce-stats-intro { margin-bottom: 60px; font-size: 16px; } .dosce-stats-section--diversity .dosce-stats-section__title { font-size: 28px; margin-bottom: 40px; } .dosce-stats-section--diversity .dosce-stat-card__text__sm { font-family: var(--dosce-ff-base); font-size: 14px; } .dosce-top-stats-row { flex-direction: column; gap: 16px; } .dosce-top-stats-row .dosce-stat-card--ghost { width: 100% !important; flex: none !important; } .dosce-stat-card { padding: 30px; min-height: auto; } .dosce-stat-card__number { font-size: 60px; } .dosce-stat-card--ghost { min-height: auto; padding: 20px; } .dosce-stat-card--ghost .dosce-stat-card__number { font-size: 32px !important; } .dosce-slider { padding: 30px 15px; } .dosce-slider__container { min-height: auto; } .dosce-slider__track-wrapper { margin-bottom: 24px; } .dosce-slider__content { gap: var(--dosce-slider-gap-m); width: 100%; } .dosce-slider__title { font-size: 24px; } .dosce-slider__img-wrapper { max-height: none; height: auto; padding: 16px 24px 20px 16px; } .dosce-slider__img { max-height: 280px; width: auto; max-width: 100%; margin: 0 auto; } .dosce-slider__label { font-size: 20px; padding: 12px 16px; letter-spacing: -0.6px; max-width: calc(100% - 12px); } .dosce-slider__container--layout1 .dosce-slider__label--1 { right: 4%; top: 10%; } .dosce-slider__container--layout1 .dosce-slider__label--2 { left: 2%; bottom: 50%; top: auto; } .dosce-slider__container--layout1 .dosce-slider__label--3 { bottom: 8%; right: 4%; left: auto; } .dosce-slider__controls { margin-top: 16px; } .dosce-slider__nav { gap: 12px; } .dosce-slider__btn { width: 48px; height: 36px; } .dosce-slider__btn svg { width: 48px; height: 36px; } .dosce-slider__dots { min-width: 60px; max-width: 120px; padding: 0 6px; gap: 6px; } .dosce-slider__dot { width: 6px; height: 6px; } .dosce-slider__dot--active { width: 30px; } } @media (max-width: 600px) { .dosce-emissions-table-wrap { border-radius: 4px; margin-top: 24px; } .dosce-emissions-table { font-size: 0.82rem; } .dosce-emissions-table thead th, .dosce-emissions-table tbody td { padding: 12px 16px; } .dosce-emissions-table tbody td.dosce-emissions-table__sub { padding-left: 24px; } .dosce-emissions-table tbody td.dosce-emissions-table__subsub { padding-left: 32px; } .dosce-esg-table { font-size: 12px; } .dosce-esg-table tbody td, .dosce-esg-table thead th { padding: 10px 12px; } .dosce-ods-chart__desktop { display: none; } .dosce-ods-chart__mobile { display: flex; flex-direction: column; gap: 20px; } .dosce-ods-mobile-group { display: flex; flex-direction: column; gap: 0; } .dosce-ods-mobile-group__label { font-family: var(--dosce-ff-base); font-size: 13px; font-weight: 700; font-style: italic; color: var(--dosce-primary); padding: 6px 12px; border-bottom: 1px solid #ccc; margin-bottom: 4px; } .dosce-ods-mobile-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid #eee; } .dosce-ods-mobile-item img { width: 52px; height: 52px; object-fit: cover; flex-shrink: 0; } .dosce-ods-mobile-item__val { font-family: var(--dosce-ff-heading); font-size: 36px; font-weight: 700; line-height: 1; flex-shrink: 0; width: 44px; text-align: center; } .dosce-ods-mobile-item__name { font-family: var(--dosce-ff-base); font-size: 12px; line-height: 1.4; text-transform: uppercase; } } @media (max-width: 576px) { .dosce-container { min-height: 250px; } .dosce-container--standard { padding: 30px 20px; } .dosce-gradient { width: min(55%, 300px); height: min(55%, 300px); opacity: 0.3; filter: blur(40px); } .dosce-gradient--tr { right: -22%; top: -22%; } .dosce-gradient--tl { left: -22%; top: -22%; } } @media (max-width: 575px) { .dosce-explore, .dosce-stats-grid--2x2, .dosce-ods-cards { grid-template-columns: 1fr; } .dosce-cifras-layout__right, .dosce-cifras-band__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .dosce-cifra-mini, .dosce-cifra-band-item { padding: 16px; } .dosce-cifra-mini__number { font-size: 28px; } .dosce-cifras-band { padding: 40px 16px; } .dosce-article { padding: 24px 20px; gap: 20px; } .dosce-cifra-banner__curve--mobile { bottom: 30px; height: 90px; background-image: url("/documents/d/mutualidad/vector-bannercifra-mobile"); } .dosce-page-hero { padding: 16px 24px 24px; } .dosce-sidebar { width: min(300px, calc(100vw - 12px)) !important; max-width: calc(100vw - 12px) !important; } .dosce-breadcrumb, .dosce-section, .dosce-social-content, .dosce-medioambiente-content, .dosce-gst-sostenibilidad-content, .dosce-carta-content { padding-left: 10px !important; padding-right: 10px !important; } .dosce-container--standard { padding-left: 20px !important; padding-right: 20px !important; } .dosce-img-desktop { display: none; visibility: hidden; } .dosce-img-mobile { display: block; visibility: visible; } .dosce-promo { padding: 48px 12px; } .dosce-promo__cta { max-width: 100%; } .dosce-logos-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .dosce-promo { padding: 48px 12px; } } @media (max-width: 375px) { .dosce-container { min-height: 200px; } .dosce-container--standard { padding: 20px 15px; } .dosce-gradient { width: min(60%, 250px); height: min(60%, 250px); opacity: 0.25; filter: blur(32px); } } @media (min-width: 768px) { .dosce-card { max-width: none; } .dosce-card__logo { width: clamp(120px, 45%, 176px); margin-bottom: 32px; } .dosce-card__link { gap: 8px; } .dosce-card__link:hover { gap: 12px; } } @media (min-width: 768px) and (max-width: 1023px) { .dosce-slider { padding: 36px 20px; } .dosce-slider__content { gap: 24px; width: 100%; } .dosce-slider__img-wrapper { max-width: 500px; max-height: 450px; height: auto; padding: 20px 44px 28px 20px; } .dosce-slider__controls { margin-top: 20px; } .dosce-slider__nav { gap: 12px; } .dosce-slider__dots { max-width: 150px; } .dosce-slider__dot--active { width: 50px; } } @media (min-width: 901px) { .dosce-nav__brand { display: none; } } @media (min-width: 992px) { .dosce-card { min-width: 224px; max-width: 350px; } .dosce-card__logo { width: clamp(130px, 50%, 150px); margin-bottom: 32px; } .dosce-card__title { font-size: 32px; } .dosce-card__link { gap: 15px; } .dosce-card__link:hover { gap: 20px; } .dosce-card__arrow { font-size: 1.5rem; } .dosce-sidebar { position: sticky !important; left: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; height: calc(100vh - 56px) !important; width: 352px !important; } .dosce-sidebar__backdrop { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } @media (min-width: 1024px) { .dosce-slider__content { flex-direction: row; gap: var(--dosce-slider-gap-d); align-items: center; justify-content: space-between; width: 100%; } .dosce-slider__text-section { max-width: 550px; flex: 1; min-height: 100%; order: 1; } .dosce-slider__title { font-size: 32px; letter-spacing: -1.08px; } .dosce-slider__img-wrapper { max-width: 550px; max-height: 450px; height: auto; flex: 1; order: 2; padding: 24px 56px 32px 24px; } .dosce-slider__controls { margin-top: 24px; } .dosce-slider__nav { gap: 16px; } } @media (min-width: 1200px) { .dosce-slider__btn { width: 60px; height: 46px; } .dosce-slider__btn svg { width: 60px; height: 46px; } .dosce-slider__nav { gap: 20px; } .dosce-slider__dots { max-width: 220px; } .dosce-slider__dot--active { width: 100px; } } @media (prefers-reduced-motion: reduce) { .dosce-promo__cta, .dosce-slider__btn, .dosce-slider__label, .dosce-slider__dot { transition: none !important; animation: none !important; } .dosce-slider__track { scroll-behavior: auto; } } @media print { .dosce-slider__controls, .dosce-slider__nav, .dosce-slider__dots { display: none !important; } .dosce-slider__track { overflow: visible; display: block; } .dosce-slider__slide { display: block; width: 100%; page-break-inside: avoid; margin-bottom: 24px; } .dosce-slider__container { min-height: auto; } .dosce-slider { padding: 0; } } .dosce-carta-content--entrevista { margin-left: 60px; margin-right: 60px; } @media (max-width: 767px) { .dosce-carta-content--entrevista { max-width: 100%; margin-left: 0; margin-right: 0; padding: 0 24px 40px; } } @media (max-width: 575px) { .dosce-carta-content--entrevista { padding-left: 10px; padding-right: 10px; } body.dosce-nav-open .dosce-sidebar__toggle { display: none !important; } }
Gestión de sostenibilidad | Memoria de Sostenibilidad e Impacto 2025

Gestión de la sostenibilidad

Medioambiente

Principales magnitudes ESG

Dimensión Aspecto material 2025 2024 Variación
Ambiental Emisiones de CO2 (Huella de Carbono) (Tn)1 6.103.407,86 — —
Neutralidad de carbono voluntaria (%)2 100,00 % 100,00 % –%
Consumo de energía (MWh) 553,49 647,20 -14,48%
Consumo de electricidad verde (%) 100,00 % 100,00 % –%
Consumo de papel (Tn) 4,05 10,50 -61,45%
Social Índice de recomendación de clientes: NPS 25,60 7,80 228,21%
Mujeres en el Comité Ejecutivo (%)3 57,14 % 43,00 % 14,14
Mujeres en puestos directivos (Comité de Dirección) (%)4 45,45 % 37,00 % 8,45
Empleados con discapacidad (n.º) 3,00 2,00 50%
Índice de compromiso empleados/as: engagement (sobre 10) 7,20 7,00 2,86%
eNPS 22,00 41,00 -46,34%
Horas de formación / empleado (n.º)5 31,16 74,74 -58,31%
Participaciones de empleados en acciones de voluntariado corporativo (n.º)6 19,00 73,00 -73,97%
Certificaciones de Accesibilidad Universal en la cartera de inmuebles (n.º)7 14,00 7,00 100%
Beneficiarios en ayudas y becas – Fundación Mutualidad 3.764,00 3.518,00 6,99%
Beneficiarios programas Fundación Mutualidad (cultura del ahorro, talento joven, envejecimiento y acción social) 13.278,00 12.291,00 8,03%
Empleados sensibilizados/as y formados/as en realidad psicosocial y financiera del colectivo senior (%) 100,00 % 100,00 % –%
Gobernanza Índice de Reputación Corporativa (sobre 1.000)8 754,00 751,00 0,4%
Calificación ESG de la cartera de inversiones financieras (sobre 100)9 67,00 65,00 3,08%
Compras de fondos de inversión art.8/9 sobre el total de nuevas compras (%) 100,00 % 100,00 % –%
Inmuebles de la cartera con certificación de sostenibilidad (n.º)10 20,00 20,00 –%
Mujeres en la Junta de Gobierno (%)11 35,29 % 41,00 % -5,71
Incidentes de corrupción y soborno confirmados (n.º) 0,00 0,00 –%
Incidentes relativos a violaciones de la privacidad y pérdida de datos del cliente (n.º) 0,00 0,00 –%
Cumplimiento del Plan de Sostenibilidad (%)12 95,00 % 92,00 % 3,00
Plantilla firmante del Código Ético y de Conducta (%) 100,00 % 100,00 % –%
Empleados sensibilizados/as y formados/as en seguridad de la información y ciberseguridad (%)13 87,00 % 92,40 % -5,4
  1. En 2025 se ha realizado un cambio de metodología en el cálculo de huella de carbono, no realizando el recálculo de años previos puesto que se partirá de 2025 como nuevo año base. Para más información, ver en capítulo de Medioambiente.
  2. Las emisiones de CO2 compensadas en el año indicado corresponden a la huella de carbono del ejercicio anterior. En 2025, se compensó el 100% de las emisiones correspondientes a 2024, tal y como se explica en el capítulo de esta memoria sobre medioambiente.
  3. La variación se expresa en puntos porcentuales en lugar de tanto por ciento.
  4. La variación se expresa en puntos porcentuales en lugar de tanto por ciento.
  5. La diferencia en el número de horas de formación entre 2024 y 2025 se debe a la finalización de las capacitaciones del equipo Comercial, alcanzando en su mayoría el nivel más alto en formación de distribuidores de seguros y reaseguros.
  6. La variación en la participación en voluntariado corporativo se explica principalmente por una menor programación de actividades en este ámbito durante el ejercicio.
  7. Certificados AIS en la cartera de inmuebles. Este sello reconoce un alto grado de compromiso en materia de accesibilidad física, sensorial y cognitiva.
  8. El Índice Reputacional se establece a través de un modelo propio, desarrollado por Mutualidad y un tercero experto en reputación corporativa.
  9. Calificación obtenida a través de la herramienta Clarity.
  10. Sellos BREEAM® y LEED en la cartera de inmuebles. Certificaciones internacionalmente reconocidas en materia de sostenibilidad en edificación.
  11. La variación se expresa en puntos porcentuales en lugar de tanto por ciento.
  12. La variación se expresa en puntos porcentuales en lugar de tanto por ciento.
  13. La variación se expresa en puntos porcentuales en lugar de tanto por ciento.

Análisis de materialidad

Estrategia ESG

En 2025 hemos presentado el Plan Estratégico 2025–2028 para anticiparnos a los retos económicos, normativos y sociales del futuro. Esta nueva hoja de ruta amplía el modelo a todos los profesionales y refuerza el carácter social de la entidad. El plan se articula en torno a cuatro pilares: creación de valor económico y social, crecimiento, excelencia operativa y personas.

En materia de sostenibilidad, hemos revisado nuestro Plan ESG para adaptarlo a los rápidos cambios en el entorno normativo y social y alinearlo con la estrategia global de la compañía. A partir de este proceso, desarrollamos el III Plan ESG 2025-2028, que complementa el Plan Estratégico en las dimensiones ambientales, sociales y de buen gobierno.

III Plan ESG 2025-2028 Activistas de lo Mutuo

Propósito

Mejorar la calidad de vida de los y las mutualistas, contribuyendo a una sociedad más colaborativa, justa e inclusiva.

E
Medioambiente

Queremos contribuir a la lucha contra el cambio climático mediante la gestión responsable de nuestros impactos ambientales directos e indirectos y a través de nuestras inversiones, apoyando la transición hacia una economía más resiliente.

  • Acción climática y mitigación de emisiones.
  • Eficiencia energética y uso responsable de recursos.
S
Social

Apostamos por mejorar la calidad de vida de las personas, impulsando la diversidad e inclusión, el talento, la satisfacción del mutualista y la contribución a la comunidad.

  • Protección del mutualista e inclusión financiera.
  • Diversidad, equidad e inclusión.
  • Gestión responsable del talento y bienestar del empleado.
  • Cadena de suministro ética y sostenible.
  • Acción social alineada con el propósito.
G
Gobernanza

Promovemos una cultura de integridad, cumplimiento y buen gobierno corporativo, desarrollando nuestra actividad de forma ética, fiable y transparente con nuestros grupos de interés.

  • Cultura ética y del cumplimiento en todos los niveles.
  • IA responsable.
  • Transparencia y acceso a la información para todos los grupos de interés.
  • Integración ESG en las decisiones de inversión.
  • Gestión de riesgos no financieros (ESG, reputacionales, etc.).

Grupos de interés

El diálogo constructivo y constante con nuestros grupos de interés es una pieza clave de nuestra forma de entender la sostenibilidad. A lo largo de nuestra actividad, hemos identificado, analizado y clasificado a los diferentes colectivos con los que nos relacionamos, considerando factores como el grado de responsabilidad de la organización, el nivel de influencia de cada grupo y el impacto que nuestra actividad genera sobre ellos.

Disponemos de diversos canales de comunicación y diálogo que nos facilitan el contacto directo con ellos, lo que nos permite comprender mejor sus necesidades y expectativas.

Contribución a los ODS

A lo largo de 2025, realizamos un análisis de la contribución de las iniciativas del Plan ESG a los Objetivos de Desarrollo Sostenible (ODS) prioritarios para la compañía.

2
1
2
5
1
8
6
3
ODS 3

3 SALUD
Y BIENESTAR

ODS 4

4 EDUCACIÓN
DE CALIDAD

ODS 5

5 IGUALDAD
DE GÉNERO

ODS 8

8 TRABAJO DECENTE
Y CRECIMIENTO
ECONÓMICO

ODS 10

10 REDUCCIÓN DE LAS
DESIGUALDADES

ODS 13

13 ACCIÓN
POR EL CLIMA

ODS 16

16 PAZ, JUSTICIA
E INSTITUCIONES
SÓLIDAS

ODS 17

17 ALIANZAS PARA
LOGRAR
LOS OBJETIVOS

S
E
G
Personas
y Cultura
ODS 5 ODS 8
ODS 10 ODS 16 ODS 17
Compras
ODS 5 ODS 8
ODS 10 ODS 13 ODS 17
Comunicación y
Sostenibilidad
ODS 13 ODS 16
ODS 4 ODS 8 ODS 17
Inversiones
Financieras
ODS 13 ODS 16
ODS 8 ODS 17
Fiscal
ODS 16
ODS 17
Tecnología
ODS 8
ODS 4 ODS 13 ODS 17
Cumplimiento
ODS 16
ODS 5 ODS 8 ODS 17
Negocio
ODS 3
ODS 8 ODS 10 ODS 13 ODS 16
Inversiones
Inmobiliarias
ODS 13 ODS 17
ODS 8 ODS 16
Principales
Secundarios

Alianzas y compromisos ESG

APRI
PRI
UNESPA
ICEA
CEDM
Forética
SERES
CEPES
Links of interest
More Mutualidad
Contact us
Download our app
Mutualidad iOS App
Mutualidad Android App
Twitter Mutualidad
Facebook Mutualidad
LinkedIn Mutualidad
Instagram Mutualidad
YouTube Mutualidad
TikTok Mutualidad
WhatsApp Mutualidad
Certificación huella de carbono
Certificación ISO 9001
Certificación ISO 20121
© 2026 Mutualidad
Links of interest
More Mutualidad
Contact us
Download our app
Mutualidad iOS App
Mutualidad Android App
Certificación huella de carbono
Certificación ISO 9001
Certificación ISO 20121
Twitter Mutualidad
Facebook Mutualidad
LinkedIn Mutualidad
Instagram Mutualidad
YouTube Mutualidad
TikTok Mutualidad
WhatsApp Mutualidad
© 2026 Mutualidad