:root {
--header-height: 94px;
--container-max-width: 1200px;
--w-col-6: 600px;
--section-padding-v: 60px; --section-padding-h: 24px; --transition: all 0.3s ease;
--border-radius: 8px; --colors-medicina-dark: #4C586BFF;
--colors-medicina-light: #7F8EA6FF;
--colors-lifestyle-dark: #6D7661FF;
--colors-lifestyle-light: #80928BFF;
--colors-ocio-dark: #945446FF;
--colors-ocio-light: #AA8487FF;
--colors-neutral-100: #F8F6F4FF;
--colors-neutral-500: #EFEBE7FF;
--colors-black: #000;
--colors-white: #FFFFFFFF; --font-headings: 'Maven Pro', sans-serif;
--font-body: 'Work Sans', sans-serif; --text-fs-body: 1rem;
--text-fs-sm: 0.875rem;
--text-fs-md: 1.125rem;
--text-fs-lg: 2.65rem;
--text-fs-xl: 3.5rem;
--lh-headings: 120%;
--lh-body: 150%; --text-dark: var(--colors-black);
--text-light: var(--colors-white);
--bg-main: var(--colors-neutral-100);
--bg-dark: var(--colors-neutral-500);
--bg-light: var(--colors-white);
--primary-color: var(--colors-lifestyle-dark);
--primary-hover: color-mix(in srgb, var(--primary-color), black 30%); --bp-sm: 960px;
--bp-md: 1200px;
--bp-xl: 1400px;
} * {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-body);
background-color: var(--bg-main);
color: var(--text-dark);
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}   .container {
width: 100%;
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--section-padding-h);
padding-right: var(--section-padding-h);
}
.container-fluid {
max-width: 100% !important;
padding: 0 !important;
}
.container .container-fluid,
.container .container {
padding: 0; } .site-main {
flex: 1;
width: 100%;
padding: 0;
}  .site-header {
width: 100%;
height: var(--header-height);
position: fixed;
top: var(--section-padding-h);
z-index: 1000;
padding-left: var(--section-padding-h);
padding-right: var(--section-padding-h);
}
.site-header .container {
padding-left: var(--section-padding-h);
padding-right: var(--section-padding-h);
background-color: var(--bg-main);
border-radius: var(--border-radius);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.site-header .header-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.site-branding .site-title {
margin: 0;
font-family: var(--font-headings);
font-size: var(--text-fs-lg);
font-weight: 800;
letter-spacing: -0.5px;
}
.site-branding .site-title a {
color: var(--text-dark);
text-decoration: none;
}  .main-navigation {
display: block;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding: 1rem;
position: absolute;
top: var(--header-height);
left: 0;
width: 100%;
background: var(--bg-main);
flex-direction: column;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
}
.main-navigation.toggled ul {
display: flex;
}
.main-navigation ul li {
display: block;
padding: 15px var(--section-padding-h);
}
.main-navigation ul li a {
color: var(--text-dark);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
}
.main-navigation ul li:is(.button) a {
color: var(--text-light);
}
.main-navigation ul li:not(.button):hover {
color: var(--primary-color);
padding-left: calc(var(--section-padding-h) + 10px);
}  .menu-toggle {
background: none;
border: none;
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-box {
width: 24px;
height: 18px;
display: inline-block;
position: relative;
}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
width: 24px;
height: 2px;
background-color: var(--text-dark);
position: absolute;
transition: var(--transition);
}
.hamburger-inner {
top: 50%;
transform: translateY(-50%);
}
.hamburger-inner::after,
.hamburger-inner::before {
content: "";
display: block;
}
.hamburger-inner::before {
top: -8px;
}
.hamburger-inner::after {
bottom: -8px;
}   @media (max-width: 960px) {
.main-navigation.toggled .hamburger-inner {
background-color: transparent;
}
.main-navigation.toggled .hamburger-inner::before {
top: 0;
transform: rotate(45deg);
}
.main-navigation.toggled .hamburger-inner::after {
bottom: 0;
transform: rotate(-45deg);
}
}  @media (min-width: 961px) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex !important;
position: static;
flex-direction: row;
width: auto;
background: transparent;
box-shadow: none;
align-items: center;
gap: 1rem;
}
.main-navigation ul li a {
padding: 0 1rem;
}
.main-navigation ul li:not(.button) {
padding: 0;
border-bottom: 2px solid transparent;
}
.main-navigation ul li:not(.button):hover {
background: transparent;
border-bottom: 2px solid var(--text-dark);
transition: var(--transition);
padding-left: 0;
}
}  .button {
display: inline-block;
padding: 12px 24px !important;
background-color: var(--primary-color);
color: var(--text-light);
text-decoration: none !important;
border-radius: var(--border-radius);
transition: var(--transition);
font-size: var(--text-fs-body);
cursor: pointer;
border: 2px solid transparent;
text-align: center;
width: fit-content;
height: fit-content;
}
.button:hover,
.button:focus {
background-color: var(--primary-hover);
}
.button:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.button:active {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-headings);
line-height: var(--lh-headings);
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: var(--primary-color);
text-decoration: none;
font-weight: 700;
transition: var(--transition);
}
a:hover,
a:focus {
text-decoration: underline; }
h1 {
font-size: var(--text-fs-xl);
font-weight: 800;
}
h2 {
font-size: var(--text-fs-lg);
font-weight: 800;
}
h3 {
font-size: var(--text-fs-lg);
font-weight: 500;
}
h4 {
font-size: var(--text-fs-md);
font-weight: 800;
}
h5 {
font-size: var(--text-fs-sm);
font-weight: 800;
text-transform: uppercase;
}
h6 {
font-size: var(--text-fs-sm);
font-weight: 400;
text-transform: uppercase;
}  #colophon {
margin-top: auto;
width: 100%;
background: var(--colors-lifestyle-dark);
}
#colophon .container {
padding-top: 40px;
padding-bottom: 40px;
}
#colophon .site-info {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
text-align: center;
flex-wrap: wrap;
}
#colophon .site-info p,
#colophon .site-info a {
margin: 0;
font-size: var(--text-fs-body);
color: var(--text-light);
text-decoration: none;
}
#footer-legal-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 30px;
}
.footer-widgets {
border-top: 1px solid var(--colors-lifestyle-light);
padding-top: 40px;
}
#footer-legal-menu li a {
font-size: var(--text-fs-sm);
}
.footer-widgets .wp-block-image {
width: 100%; } @media (max-width: 960px) {
#colophon .site-info {
flex-direction: column;
gap: 20px;
}
#footer-legal-menu {
flex-direction: column;
gap: 10px;
align-items: center;
}
}  .archive-hero {
padding: var(--section-padding-v) var(--section-padding-h);
text-align: center;
}
.archive-hero__title {
font-size: var(--text-fs-xl);
margin-bottom: 10px;
}
.archive-container {
display: flex;
gap: 40px;
}
.archive-content {
flex: 1;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 1200px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 960px) {
.archive-container {
flex-direction: column;
}
.posts-grid {
grid-template-columns: 1fr;
}
}
.post-card {
display: flex;
flex-direction: column;
}
.post-card__image img {
width: 100%;
height: 200px;
object-fit: cover;
background-color: var(--bg-light);
border-radius: var(--border-radius);
}
.post-card__content {
margin-top: 1rem;
flex: 1;
display: flex;
flex-direction: column;
}
.post-card__title {
font-size: 1.25rem;
margin-bottom: 15px;
}
.post-card__excerpt {
font-size: 0.95rem;
margin-bottom: 20px;
flex: 1;
}
.post-card__more {
align-self: flex-start;
display: flex;
align-items: center;
gap: 5px;
}
.post-card__more:hover {
text-decoration: underline !important;
}
.post-card__more::after {
content: " →";
} .widget-area {
flex: 0 0 300px;
}
.widget {
margin-bottom: 40px;
}
.widget-title {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
border-bottom: 2px solid var(--primary-color);
display: inline-block;
}
@media (max-width: 960px) {
.widget-area {
flex: 1 1 100%;
}
}  .single-post-container {
max-width: 960px;
margin: 0 auto;
width: 90%;
}
.single-post-container .entry-header {
text-align: left;
margin-bottom: 30px;
}
.single-post-container .entry-title {
font-size: 3rem;
}
.post-media {
margin-bottom: 40px;
}
.single-post-container .wp-block-image img {
border-radius: var(--border-radius);
}
.post-thumbnail img {
width: 100%;
height: auto;
border-radius: var(--border-radius);
}
.single-post-container .entry-footer {
margin-top: 50px;
padding-top: 20px;
}  .comments-area {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--bg-dark);
}
.comments-title {
font-size: 1.5rem;
margin-bottom: 30px;
}
.comment-list {
list-style: none;
padding: 0;
margin: 0 0 40px;
}
.comment-list .comment {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #f0f0f0;
}
.comment-body {
display: flex;
gap: 20px;
}
.comment-author .avatar {
border-radius: 50%;
}
.comment-author cite {
font-style: normal;
font-weight: 700;
}
.comment-meta {
margin-bottom: 10px;
font-size: 0.9rem;
color: var(--text-disabled);
}
.comment-content {
font-size: 1rem;
}
.comment-content p {
margin-bottom: 10px;
}
.reply {
margin-top: 10px;
}
.comment-reply-link {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-color);
} .comment-respond {
background: var(--bg-dark);
padding: 30px;
border-radius: 8px;
margin-top: 40px;
}
.comment-reply-title {
font-size: 1.5rem;
margin-bottom: 20px;
}
.comment-form p {
margin-bottom: 15px;
}
.comment-form label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 10px;
border: 1px solid var(--bg-dark);
border-radius: 4px;
background: #fff;
font-family: inherit;
}
.comment-form textarea {
min-height: 150px;
}
.comment-form .submit {
display: inline-block;
padding: 12px 24px;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.comment-form .submit:hover {
background: var(--primary-hover);
}
@media (max-width: 960px) {
.comment-body {
flex-direction: column;
}
}  .block-pretitle {
text-transform: uppercase;
font-size: var(--text-fs-body);
font-style: normal;
font-weight: 400;
line-height: var(--lh-headings);
letter-spacing: -0.32px;
display: block;
margin-bottom: 0;
}
.block-title {
font-family: var(--font-headings);
font-size: var(--text-fs-lg);
font-weight: 400;
line-height: var(--lh-headings);
margin-top: 0;
margin-bottom: 0;
} .hero-home-block {
color: var(--text-light);
background-color: var(--primary-color);
}
.hero-home-block .hero-col-1 {
position: relative;
}
.hero-home-block .hero-col-2 {
padding: var(--section-padding-v) var(--section-padding-h);
}
@media (min-width: 960px) {
.hero-home-block .hero-col-2 {
padding-top: var(--header-height);
padding-right: var(--section-padding-h);
}
}
.hero-home-block .hero-col-1::before {
content: "";
position: absolute;
inset: 0; background-image: url(//donasemen.es/wp-content/themes/EJCDonarSemen/assets/img/hero-mask.png);
background-size: cover;
background-position: right bottom;
background-repeat: no-repeat;
z-index: 2;
pointer-events: none; } .block-listado-iconos__content {
font-size: var(--text-fs-md);
} .block-cards-destacadas .card-item {
background-color: var(--bg-dark);
border-radius: var(--border-radius);
padding: 1rem 1.5rem;
}
.block-cards-destacadas .card-item .card-title {
font-size: 24px;
font-weight: bold;
line-height: var(--lh-headings);
font-family: var(--font-headings);
margin-top: 0;
margin-bottom: 0;
}
.block-cards-destacadas .card-item .card-number {
font-family: var(--font-headings);
font-size: clamp(2rem, -10rem + 21.3333vw, 6rem);
font-weight: 900;
line-height: 1;
position: absolute;
top: -24px;
right: 10px;
z-index: 10;
opacity: 0.3;
color: var(--colors-ocio-light);
} .block-faq__question {
text-align: left;
font-family: var(--font-headings);
font-size: 24px;
font-weight: 800;
} .block-texto-parallax .block-texto-parallax__col--image {
position: relative;
}
.block-texto-parallax .block-texto-parallax__col--image::before {
content: "";
position: absolute;
inset: 0;
background-image: url(//donasemen.es/wp-content/themes/EJCDonarSemen/assets/img/parallax-mask.png);
background-size: cover;
background-position: left bottom;
background-repeat: no-repeat;
z-index: 2;
pointer-events: none;
} .block-hotspots-container {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto;
}
.block-hotspots-image {
grid-column: 3/6;
grid-row: 1/4;
justify-self: center;
align-self: center;
overflow: visible;
}
.block-hotspot {
z-index: 99;
font-size: var(--text-fs-md);
}
.block-hotspots-image img {
display: block;
width: 100%;
height: auto;
transform: scale(1.1);
transform-origin: center;
}
.block-hotspot#hotspot-0 {
grid-column: 1/3;
grid-row: 1;
}
.block-hotspot#hotspot-1 {
grid-column: 6/8;
grid-row: 1;
text-align: right;
}
.block-hotspot#hotspot-2 {
grid-column: 1/3;
grid-row: 3;
align-self: center;
}
.block-hotspot#hotspot-3 {
grid-column: 6/8;
grid-row: 3/4;
align-self: center;
text-align: right;
}
.block-hotspot#hotspot-4 {
grid-column: 3/6;
grid-row: 4;
text-align: center;
}
@media (max-width: 960px) {
.block-hotspots-image img {
width: 80%;
transform: scale(1);
margin: 0 auto;
}
}  .text-white {
color: var(--text-light) !important;
}
.pr-0 {
padding-right: 0;
}
.pl-0 {
padding-left: 0;
}