Skip to Main Content
Memoria 2025
/* ================================================================
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;
}
}
Memoria de Sostenibilidad e Impacto 2025 | Mutualidad
Si quieres conocer con más detalle nuestro desempeño económico, ambiental, social y de buen gobierno,
así como nuestro compromiso con la creación de valor real y duradero, puedes consultar el informe
completo a continuación.
Descubre nuestra
Memoria de Información No Financiera e Impacto 2025
Descarga PDF
