/**
 * Variables
 */
:root {
  --color-primary: #db3700;
  --color-secondary: #720026;
  --color-primary-light: #ff7b4f;
  --color-light: #f1b3a8;
  --color-dark: #2c3549; /* Actualizado al Azul Grisáceo */
  --color-gray: #414348;
  --color-text: #2a2a2a;
  --color-text-light: #b9b9b9;
  --color-bold: #1e2127;
  --color-border: #c9cee7;
  --body-bg: #ffffff;
  --content-bg: #f2f4ff;
  --circle-one: #f3e7f0;
  --circle-two: #e0e2f6;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-content: "Open Sans", sans-serif;
  --font-heading: "Roboto", sans-serif;
}

/* default box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default margin */
body,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* HTML and Body
----------------------- */
html:focus-within {
  scroll-behavior: smooth;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  height: 100%;
}

body {
  background-image: url('images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-content), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
/* Fonts
---------------------------------------- */
/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("../fonts/open-sans.woff2") format("woff2"), url("../fonts/open-sans.woff") format("woff");
}
/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto.woff2") format("woff2"), url("../fonts/roboto.woff") format("woff");
}
/* roboto-700 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-bold.woff2") format("woff2"), url("../fonts/roboto-bold.woff") format("woff");
}
/* Regions
----------------------- */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

template,
[hidden] {
  display: none;
}

/* Typography
----------------------- */
/* Typography -> Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-bold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
}

h1 {
  font-size: 2.1rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.3rem;
}

h5, h6 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 1.2rem 0;
}

/* Typography -> Links */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

a {
  color: var(--color-primary);
  background-color: transparent;
  text-decoration: none;
  transition: color 0.4s ease;
}

a:active,
a:hover,
a:focus {
  text-decoration: none;
  border: 0;
  outline: 0;
}

a:active,
a.active {
  color: var(--color-primary);
}

a:hover {
  color: var(--theme-dark);
}

b,
strong {
  font-weight: bolder;
  color: var(--color-bold);
}

dfn,
cite {
  font-style: italic;
}

del {
  text-decoration: line-through;
}

small {
  font-size: 80%;
}

big {
  font-size: 125%;
}

h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
  font-style: normal;
  color: var(--color-primary);
}

/* Typography-> code tags */
code,
kbd,
pre,
samp {
  background: var(--content-bg);
  font-family: monospace, monospace;
  font-size: 1rem;
}

kbd {
  margin: 0;
  padding: 0 5px;
}

pre {
  overflow: auto;
  margin: 1rem 0;
  padding: 1rem;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

tt,
var {
  font-family: monospace, monospace;
  font-style: italic;
}

mark {
  display: inline-block;
  background: var(--color-primary);
  color: #ffffff;
  padding: 1px 4px;
}

/* typography -> abbreviation */
acronym[title], abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
}

abbr,
acronym {
  cursor: help;
}

acronym {
  border-bottom: 1px dotted;
}

/* Media
----------------------- */
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
  max-width: 100%;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img,
picture,
svg {
  max-width: 100% !important;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border: 0;
}

figcaption {
  padding: 4px;
  font-size: 0.8rem;
  background: var(--content-bg);
  border: 1px solid var(--color-border);
  text-align: center;
}

.align-left,
img.align-left,
figure.align-left {
  margin: 0 1rem 1rem 0;
}

.align-right,
img.align-right,
figure.align-right {
  margin: 0 0 1rem 1rem;
}

.align-center,
img.align-center,
figure.align-center {
  display: block;
  clear: both;
  margin: 1rem auto;
}

figure.align-center {
  display: table;
}

figure.align-center img {
  display: block;
  clear: both;
  margin: 0 auto;
}

/* Form
----------------------- */
form {
  margin-bottom: 1rem;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.6;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

.button,
.button-solid,
a.button-solid:hover,
button,
[type=button],
[type=reset],
[type=submit] {
  position: relative;
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff;
  border: 0;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-appearance: button;
  transition: all 0.3s ease-in-out;
}

.button:hover,
.button-solid:hover,
a.button-solid:hover,
button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover {
  background-color: var(--color-dark);
  color: #ffffff;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 0;
}

button[disabled],
html input[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

input {
  line-height: normal;
}

input,
textarea {
  max-width: 100%;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=date],
input[type=tel],
input[type=time],
textarea {
  background: transparent;
  color: var(--color-text);
  padding: 10px;
  border: 0;
  box-shadow: 0 0 0 3px var(--color-border);
  transition: all 0.5s ease-in-out;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=tel]:focus,
input[type=time]:focus,
textarea:focus {
  box-shadow: 0 0 3px 1px var(--color-dark);
  border: 0;
  outline: 0;
}

textarea {
  width: 100%;
  overflow: auto;
  transition: border 0.3s linear;
  vertical-align: top;
}
@keyframes autofill {
  to {
    color: var(--color-text);
    background: transparent;
  }
}
input:-webkit-autofill {
  animation-name: autofill;
  animation-fill-mode: both;
}

[type=checkbox],
[type=radio] {
  padding: 0;
  box-sizing: border-box;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  margin: 0 0 10px 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
}

fieldset > :last-child {
  margin-bottom: 0;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

optgroup {
  font-weight: bold;
}

select {
  padding: 4px 0;
}

form label {
  color: var(--color-bold);
  font-weight: var(--font-weight-bold);
}

label[for] {
  cursor: pointer;
}

/* Summary */
details {
  margin-bottom: 1rem;
  background-color: var(--color-border);
}

summary {
  background-color: var(--color-border);
  color: var(--color-text);
  padding: 0.5rem;
  cursor: pointer;
}

details[open] {
  background-color: var(--body-bg);
}

details[open] summary {
  background-color: var(--color-dark);
  color: #ffffff;
}

details .form-details-wrapper {
  background-color: #ffffff;
  padding: 1rem;
}

/* Form */
.form-item {
  margin-bottom: 1rem;
}

.form-required:after {
  content: "*";
  display: inline-block;
  padding-left: 4px;
  color: red;
}

.form-item label {
  display: block;
}

label.option {
  display: inline;
  font-weight: normal;
}

progress {
  vertical-align: baseline;
}

::-webkit-input-placeholder {
  color: var(--color-border);
}

:-moz-placeholder {
  color: var(--color-border);
}

::-moz-placeholder {
  color: var(--color-border);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--color-border);
}

.field--name-body input[type=text],
.field--name-body input[type=email],
.field--name-body input[type=url],
.field--name-body input[type=password],
.field--name-body input[type=search],
.field--name-body input[type=number],
.field--name-body input[type=date],
.field--name-body input[type=tel],
.field--name-body input[type=time],
.field--name-body textarea {
  display: block;
  margin-bottom: 0.8rem;
}

/* Form in body */
.node-content input[type=text],
.node-content input[type=email],
.node-content input[type=url],
.node-content input[type=password],
.node-content input[type=search],
.node-content input[type=number],
.node-content input[type=date],
.node-content input[type=tel],
.node-content input[type=time],
textarea {
  display: block;
  background: var(--content-bg);
  margin-bottom: 0.8rem;
  border-radius: 20px;
}

/* Animated expanding textarea */
.form-textarea {
  height: 100px;
  transition: height 0.3s ease-in-out;
}

.form-textarea:focus {
  height: 180px;
}

summary {
  display: list-item;
  cursor: pointer;
  color: #a1a1a1;
  color: var(--color-text);
}

/* Common HTML Elements
----------------------- */
hr {
  clear: both;
  width: 100%;
  height: 1px;
  margin: 0.5rem 0;
  border: 0;
  border-bottom: 2px solid var(--color-border);
  box-sizing: content-box;
  overflow: visible;
}

address {
  margin: 0 0 1rem 0;
  font-style: italic;
}

/* Definition Lists */
dt {
  color: var(--color-bold);
  font-weight: 700;
  margin: 0 0 1.75rem;
}

dd {
  margin: 0 0 1.2rem 0;
}

blockquote {
  position: relative;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--content-bg);
  border-left: 6px solid var(--color-primary);
  border-top: 2px solid var(--color-border);
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}

[dir=rtl] blockquote {
  position: relative;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--content-bg);
  border-right: 6px solid var(--color-primary);
  border-top: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* List
----------------------- */
ul,
ol {
  margin: 0;
  padding: 0 0 0.25rem 1rem;
}

[dir=rtl] ul,
[dir=rtl] ol {
  padding: 0 1rem 0.25rem 0;
}

ol ol,
ul ul {
  margin: 0;
  padding: 0 0 0.25rem 1rem;
}

[dir=rtl] ol ol,
[dir=rtl] ul ul {
  padding: 0 1rem 0.25rem 0;
}

ul {
  list-style: disc;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/* Table
----------------------- */
table {
  width: 100%;
  margin-bottom: 1.2rem;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
tr,
td {
  vertical-align: middle;
}

th {
  background-color: var(--content-bg);
  color: var(--color-bold);
  margin: 0;
  padding: 5px;
  border: 1px solid var(--color-border);
  text-align: left;
  text-shadow: none;
}

th a {
  color: var(--color-bold);
}

td {
  padding: 5px;
  border: 1px solid var(--color-border);
}

/* Misc
----------------------- */
::-moz-selection {
  background: var(--color-primary);
  color: #fff;
  text-shadow: none;
}

::selection {
  background: var(--color-primary);
  color: #fff;
  text-shadow: none;
}

/*!
 *  vani icon font. Generated by Iconly: https://iconly.io/
 */
@font-face {
  font-display: auto;
  font-family: "vani";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/vani.woff2") format("woff2");
}
[class=ficon], [class^=ficon-], [class*=" ficon-"] {
  display: inline-block;
  font-family: "vani" !important;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.ficon-feed:before { content: "\e000"; }
.ficon-bookmark:before { content: "\e001"; }
.ficon-search:before { content: "\e002"; }
.ficon-user:before { content: "\e003"; }
.ficon-calendar:before { content: "\e004"; }
.ficon-twitter:before { content: "\e005"; }
.ficon-facebook:before { content: "\e006"; }
.ficon-github:before { content: "\e007"; }
.ficon-linkedin:before { content: "\e008"; }
.ficon-comments:before { content: "\e009"; }
.ficon-file:before { content: "\e00a"; }
.ficon-youtube:before { content: "\e00b"; }
.ficon-instagram:before { content: "\e00c"; }
.ficon-vk:before { content: "\e00d"; }
.ficon-whatsapp:before { content: "\e00e"; }
.ficon-vimeo:before { content: "\e00f"; }
.ficon-hashtag:before { content: "\e010"; }
.ficon-telegram:before { content: "\e011"; }
.ficon-share:before { content: "\e013"; }
.ficon-mail:before { content: "\e014"; }
.ficon-map:before { content: "\e015"; }
.ficon-phone:before { content: "\e016"; }
.ficon-arrow-up:before { content: "\e017"; }
.ficon-horn:before { content: "\e018"; }
.ficon-bell:before { content: "\e019"; }
.ficon-info:before { content: "\e01a"; }
.ficon-comment:before { content: "\e01b"; }
.ficon-angle-left:before { content: "\e01c"; }
.ficon-angle-right:before { content: "\e01d"; }
.ficon-arrow-right:before { content: "\e01e"; }
.ficon-arrow-left:before { content: "\e01f"; }
.ficon-quote:before { content: "\e020"; }
.ficon-clock:before { content: "\e021"; }
.ficon-alert-circle:before { content: "\e022"; }
.ficon-alert:before { content: "\e023"; }
.ficon-check:before { content: "\e024"; }
.ficon-comment-add:before { content: "\e025"; }
.ficon-close:before { content: "\e026"; }
.ficon-plus:before { content: "\e027"; }
.ficon-minus:before { content: "\e028"; }
.ficon-menu:before { content: "\e012"; }
.ficon-menu-open:before { content: "\e029"; }
.ficon-mastodon:before { content: "\e02a"; }
.ficon-tiktok:before { content: "\e02b"; }
.ficon-twitch:before { content: "\e02c"; }
.ficon-bluesky:before { content: "\e02d"; }
.ficon-discord:before { content: "\e02e"; }

.full-width {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 10px;
}

/* Main wrapper -> Main + Sidebar
--------------------------------*/
.main-wrapper {
  width: 100%;
}

/* Layout -> containers */
.main-container {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0;
  padding: 2rem 0;
}

.no-sidebar .main-container,
.sidebar-left .main-container,
.sidebar-right .main-container,
.two-sidebar .main-container {
  grid-template-columns: 100%;
}

.sidebar-left #main,
.sidebar-right #main,
.two-sidebar #main {
  margin: 0 0 2rem 0;
}

.region-sidebar-first,
.region-sidebar-second {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar .block {
  padding: 1rem;
  background-color: var(--content-bg);
  border-radius: 6px;
}

.sidebar .block-title {
  line-height: 1;
  padding-bottom: 10px;
}

.sidebar .block p:last-of-type {
  margin: 0;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.sidebar li:last-child {
  border: none;
}

/* Forms in sidebar */
.sidebar input[type=text],
.sidebar input[type=email],
.sidebar input[type=url],
.sidebar input[type=password],
.sidebar input[type=search],
.sidebar input[type=number],
.sidebar input[type=date],
.sidebar input[type=tel],
.sidebar input[type=time],
.sidebar textarea {
  width: 100%;
  border: 1px solid var(--color-border);
}

/* Extended pro */
.sidebar-circle-one,
.sidebar-circle-two {
  position: absolute;
  border-radius: 50%;
}

.sidebar-circle-one {
  background: var(--circle-one);
  width: 30px;
  height: 30px;
  top: 38px;
  right: 20px;
}

.sidebar-circle-two {
  background: var(--circle-two);
  width: 42px;
  height: 42px;
  top: 20px;
  right: 36px;
}

/* Header
--------------------------------------*/
.header {
  position: relative;
  width: 100%;
  background: var(--content-bg);
  margin: 0;
  padding: 0;
}

.header-top-blocks {
  position: relative;
  background: var(--content-bg);
  width: 100%;
  margin: 0;
  padding: 0;
}

.header-block-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.header-block {
  max-width: 100%;
}

.header-block p:last-child {
  margin: 0;
}

.header-main {
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-brand {
  position: relative;
}

.site-branding {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  line-height: 1;
}

.site-branding img {
  width: auto;
  max-height: 36px;
}

.site-branding a {
  color: var(--color-primary);
}
/* Hace que el logo de la marca sea más grande y legible */
.site-branding .site-logo img {
    height: 75px !important; /* Ajusta este valor a tu gusto (ej. 70px o 80px) */
    width: auto !important;
    max-height: none !important;
}

/* Opcional: Asegura que en celulares muy pequeños no se salga de la pantalla */
@media (max-width: 768px) {
    .site-branding .site-logo img {
        height: 45px !important;
    }
}

.site-name-slogan {
  display: flex;
  flex-direction: column;
}

.site-name {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary);
  text-transform: uppercase;
}

.site-slogan {
  font-size: 0.8rem;
}

.header-main-right {
  position: relative;
  display: flex;
  align-items: center;
}

.header-main-right i {
  font-size: 20px;
  font-weight: bold;
}

.menu-wrap {
  font-family: var(--font-heading);
  font-weight: 700;
  position: fixed;
  color: #ffffff;
  background: var(--color-bold);
  top: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 1rem;
  width: 100%;
  max-width: 320px;
  z-index: 25;
  transform: translateX(-100%);
  transition: all 0.8s ease;
}

ul.main-menu,
.region-primary-menu .menu {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 1em;
  z-index: 30;
  list-style: none;
  list-style-type: none;
}

.main-menu a,
.region-primary-menu .menu a {
  color: #ffffff;
}

ul.main-menu li,
.region-primary-menu .menu li {
  position: relative;
  padding: 0;
}

ul.main-menu li a,
.region-primary-menu .menu li a {
  border-bottom: 1px solid var(--color-gray);
}

.main-menu li span,
.region-primary-menu .menu li span {
  display: block;
  padding: 10px 0;
}

ul.main-menu > li,
.region-primary-menu .menu > li {
  display: block;
  float: none;
  line-height: 1;
  margin: 0;
}

ul.main-menu > li > a,
.region-primary-menu .menu > li > a {
  display: block;
  margin: 0;
  padding: 10px 0;
}

ul.main-menu > li a::after,
.region-primary-menu .menu > li a::after {
  content: none;
}

ul.main-menu ul.submenu,
.region-primary-menu .menu .submenu {
  position: relative;
  display: block;
  font-weight: 400;
  margin: 0;
  padding: 0;
  z-index: 30;
}

ul.main-menu ul.submenu li,
.region-primary-menu .menu .submenu li {
  display: block;
  background: none;
  width: 100%;
  font-size: 0.9rem;
}

ul.main-menu ul.submenu li a,
.region-primary-menu .menu .submenu li a {
  display: block;
  width: 100%;
  padding: 10px 0 10px 20px;
}

ul.main-menu ul.submenu li a::after,
.region-primary-menu .menu .submenu li a::after {
  content: none;
}

.main-menu li span.dropdown-arrow {
  position: absolute;
  display: inline-block;
  right: 0;
  padding: 0;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children::after {
  content: "+";
  position: absolute;
  right: -16px;
  top: 10px;
  width: 10px;
  height: 22px;
}

ul.main-menu ul.submenu ul.submenu {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 0 0 30px;
  z-index: 30;
}

ul.main-menu ul.submenu ul.submenu li {
  display: block;
  font-size: inherit;
  width: 100%;
  padding: 0;
  text-align: left;
}

.main-menu ul.submenu li.expanded::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 10px;
}

.mobile-menu {
  display: block;
}

.active-menu .menu-wrap {
  overflow-y: scroll;
  transform: translateX(0);
  transition: all 1s ease;
}

.close-mobile-menu {
  position: absolute;
  top: 0.5rem;
  right: 4px;
  display: none;
  place-content: center;
  width: 36px;
  height: 36px;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  z-index: 48;
  cursor: pointer;
  text-align: center;
}

.active-menu .close-mobile-menu,
.active-menu .main-menu {
  display: grid;
}

.full-page-search {
  position: relative;
  margin: 0;
  padding: 0;
}

.search-icon,
.mobile-menu,
.sliding-panel-icon {
  position: relative;
  display: grid;
  place-content: center;
  background-color: transparent;
  color: var(--color-bold);
  width: 36px;
  height: 36px;
  margin: 0 0 0 10px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  cursor: pointer;
}

.search-icon:hover,
.mobile-menu:hover,
.sliding-panel-icon:hover {
  border: 2px solid var(--color-dark);
}

.search-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--content-bg);
  z-index: 50;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.search-box.open {
  transform: translate3d(0, 0, 0);
}

.search-box-content {
  position: relative;
  z-index: 60;
}

.region-search-box .block-title {
  color: var(--color-bold);
  text-align: center;
}

.region-search-box .block-content {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.region-search-box .block-content form {
  width: 90%;
}

.search-box-content form label {
  display: none;
}

.search-box-content input[type=search] {
  width: 100%;
  margin: 2rem 0 1rem 0;
  padding: 0 30px 0 0;
  font-size: 1.4rem;
  background: url("../images/search.svg") top right no-repeat;
  background-size: contain;
  border: 0;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}

.search-box-content input[type=search]:focus {
  border: 0;
  border-bottom: 2px solid var(--color-primary);
}

.search-box-content input[type=submit] {
  padding: 10px 24px;
  border-radius: 50px;
}

.search-box-close {
  flex: 1;
  z-index: 60;
  cursor: crosshair;
  cursor: url("../images/cursor.svg"), auto;
}

/* Page Header
--------------------------------------*/
.page-header {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 5rem 0 6rem 0;
  text-align: center;
}

.breadcrumb {
  position: relative;
  display: block;
  width: 100%;
}

.breadcrumb-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-items li {
  display: inline-block;
}

.breadcrumb-item span {
  font-size: 14px;
  margin: 0 6px;
}

.header-top {
  top: 0;
  z-index: 25;
}

/* Homepage -> Slider */
.slider,
.home-slider {
  position: relative;
  background-color: var(--content-bg);
  height: 100vh;
  width: 100%;
  z-index: 10;
  overflow: hidden;
}

.slider-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.slider-half {
  flex: 0 0 50%;
  max-width: 100%;
}

.slider-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(100vh - 2rem);
  overflow: hidden;
}

.slider-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.slider em {
  font-style: normal;
}

.slider h1,
.slider h2,
.slider h3,
.slider h4,
.slider h5 {
  line-height: 1.2;
}

.slider p {
  margin-bottom: 0;
}

.slider h1 { font-size: 2.6em; }
.slider h2 { font-size: 2em; }
.slider h3 { font-size: 1.4em; }
.slider h4 { font-size: 1.2em; }
.slider em { color: var(--color-primary); }
.slider p { font-size: 1.2em; }

.slider .button,
.slider button {
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #ffffff;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 50px;
  padding: 9px 22px;
  transition: 0.3s ease-in-out;
}

.slider .button:hover,
.slider button:hover {
  color: var(--color-primary);
  background: transparent;
}

/* Slider Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeOutLeft {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.layer1, .layer2, .layer3, .layer4, .layer5, .layer6 {
  opacity: 0;
  filter: alpha(opacity=0);
  transition: all ease 0.8s;
}

.tns-slide-active .layer1,
.tns-slide-active .layer2,
.tns-slide-active .layer3,
.tns-slide-active .layer4,
.tns-slide-active .layer5,
.tns-slide-active .layer6 {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
  transform: translate3d(0, 0, 0);
}

.layer1, .layer4 { transform: translate3d(100%, 0, 0); }
.layer2, .layer5 { transform: translate3d(0, -100%, 0); }
.layer3, .layer6 { transform: translate3d(0, 100%, 0); }

.tns-slide-active .layer1 { transition-delay: 0.8s; }
.tns-slide-active .layer2 { transition-delay: 2s; }
.tns-slide-active .layer3 { transition-delay: 3s; }
.tns-slide-active .layer4 { transition-delay: 4s; }
.tns-slide-active .layer5 { transition-delay: 5s; }
.tns-slide-active .layer6 { transition-delay: 6s; }

.tns-slider, .tns-carousel {
  margin: 0;
  padding: 0;
}

.tns-nav, .tns-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 1rem;
}

.tns-nav button {
  background-color: #222222;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.tns-nav .tns-nav-active {
  background-color: var(--color-primary);
}

.tns-controls button {
  background-color: transparent;
  color: var(--color-bold);
  padding: 4px 1rem;
  border: 3px solid var(--color-bold);
  border-radius: 2rem;
}

.tns-controls button:hover {
  background-color: var(--content-bg);
  color: var(--color-bold);
}

/* Responsive Slider */
@media (min-width: 992px) {
  .slider-container, .slider-item { flex-direction: row; }
  .slider-half { max-width: 50%; }
  .slider h1 { font-size: 2rem; }
  .slider h2 { font-size: 1.8rem; }
  .slider h3 { font-size: 1.6rem; }
  .slider h4 { font-size: 1.4rem; }
  .slider h5 { font-size: 1.2rem; }
  .slider em { color: var(--color-primary); }
  .slider p { font-size: 20px; }
}

/* Homepage */
.region-content-home {
  display: flex;
  flex-direction: column;
}

.region-content-home .block:nth-child(even) {
  background: var(--content-bg);
}

.region-content-home .block {
  padding: 4rem 0;
}

.homepage-content .block-title {
  text-align: center;
  margin-bottom: 1rem;
}

.homepage-content .block-title::before,
.homepage-content .block-title::after {
  position: absolute;
  content: "";
  top: 50%;
  background: var(--color-primary);
  width: 40px;
  height: 2px;
}

.homepage-content .block-title::before { transform: translateX(-50px); }
.homepage-content .block-title::after { transform: translateX(10px); }

/* Drupal core Field */
[dir] .field:not(:last-child) { margin-bottom: 36px; }
.field-label { font-weight: var(--font-weight-bold); }

[dir=ltr] .field-label-inline .field-label, [dir=ltr] .field-label-inline .field__items { float: left; }
[dir=rtl] .field-label-inline .field-label, [dir=rtl] .field-label-inline .field__items { float: right; }
[dir=ltr] .field-label-inline .field-label, [dir=ltr] .field-label-inline > .field__item, [dir=ltr] .field-label-inline .field__items { padding-right: 0.5em; }
[dir=rtl] .field-label-inline .field-label, [dir=rtl] .field-label-inline > .field__item, [dir=rtl] .field-label-inline .field__items { padding-left: 0.5em; }
.field-label-inline .field-label::after { content: ":"; }

/* Calendar module */
.calendar-calendar .full { display: table; }
.calendar-calendar .empty { display: table-cell; }

/* Admin Toolbar */
button.toolbar-item, button.toolbar-icon { background: none; }
.filter-wrapper { border: 1px solid var(--color-border); }
.feed-icon { display: block; }

/* Main -> Node */
.node, .node-promoted, .node-sticky, .node-view-mode-full, .node-unpublished {
  position: relative;
}

.node-view-mode-teaser {
  position: relative;
  background: var(--content-bg);
  padding: 1rem;
  margin-bottom: 4rem;
  border-radius: 8px;
}

.node-view-mode-teaser.node-sticky { border: 2px solid var(--color-border); }

.node-title a {
  position: relative;
  transition: color 0.4s;
}

.node-title a::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}

.node-title a:hover::after { transform: scaleX(1); }

.node-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--content-bg);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  font-size: 0.8rem;
  width: 100%;
  margin: 0 0 1rem 0;
  padding: 10px 1rem;
}

.author-picture img {
  width: auto;
  max-height: 25px;
  margin: 0;
}

.node-submitted-details {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.node-submitted-details i { color: var(--color-primary); }

.node-taxonomy-container, .node-links-container {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
}

.term-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1;
}

.taxonomy-terms {
  list-style: none;
  margin: 1rem 0 0.2rem 0;
  padding: 0;
}

.taxonomy-term a {
  padding: 6px 14px;
  border: 2px solid var(--color-border);
  border-radius: 2rem;
  transition: all 0.4s ease-in-out;
}

.taxonomy-term a:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.taxonomy-term a::before {
  content: "#";
  margin-right: 5px;
}

/* Search result page */
.page-content input[type=search] { width: 80%; }
ol.search-results { list-style: none; margin: 1rem 0; padding: 0; }
.search-results li { margin: 0 0 1rem 0; padding: 1rem; background: var(--content-bg); }
.search-advanced summary { margin: 10px 0; cursor: pointer; }
.search-advanced .form-details-wrapper, .search-advanced .form-wrapper {
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--color-border);
}

/* Footer - VaniPro Style */
#footer-top {
  background: var(--content-bg);
  margin: 0;
  padding: 2rem 0;
}

.region-footer-top, .region-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  color: rgba(255, 255, 255, 0.7);
  padding-top: 60px;
  margin-top: 60px;
}

.footer .block-title {
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 20px 0 !important;
  padding: 0 0 10px 0 !important;
  position: relative;
  line-height: 1.3;
}

.footer .block-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #FF6600, #FF9933);
  border-radius: 2px;
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer a:hover { color: #FF6600; }
.footer ul, .footer ol { margin: 0; padding: 0; }
.footer ul, .footer ul li { list-style: none; }
.footer li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer li a { padding: 8px 0; display: inline-block; color: rgba(255, 255, 255, 0.7); }
.footer li a:hover { color: #FF6600; padding-left: 8px; }
.footer-blocks { padding: 3rem 0; }

.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.footer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

#footer-bottom { position: relative; margin: 0; padding: 0 0 1rem 0; }
.footer-bottom-last { background: rgba(0, 0, 0, 0.2); padding: 30px 0; margin-top: 40px; }
.footer-bottom-last-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.copyright { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }

.social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-icons li { border: 0; }
.social-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 1.2rem;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-icons li a:hover {
  border-color: #FF6600;
  border-radius: 8px;
  color: #ffffff !important;
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
}

.block, .block-title, .block-content { position: relative; }
.block-section .block-title { margin-bottom: 12px; }
.block-section .block-title::before, .block-section .block-title::after {
  position: absolute;
  content: "";
  left: 0;
  height: 1px;
}
.block-section .block-title::before { background-color: var(--color-primary-light); bottom: 0; width: 25px; }
.block-section .block-title::after { background-color: var(--color-primary); bottom: -6px; width: 45px; }

.highlighted { position: relative; background: var(--content-bg); width: 100%; margin: 0; padding: 0; }
.region-highlighted { display: flex; flex-direction: column; gap: 1.5rem; }
.highlighted .block { position: relative; margin: 0; padding: 1rem 0; }
.highlighted p:last-child { margin: 0; }

.content-top, .content-bottom { width: 100%; }
.region-content-top, .region-content-bottom { display: flex; flex-direction: column; }
.content-top .block, .content-bottom .block { position: relative; margin: 0; }
.content-top .block { padding-bottom: 2rem; }
.content-bottom .block { padding-top: 2rem; }

.comments { display: flex; flex-direction: column; gap: 1rem; }
.comment-single {
  display: flex; flex-direction: column; gap: 1rem;
  background-color: var(--content-bg); padding: 1rem; border-radius: 8px;
}
.comment-header { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-border); }
.comment-user-picture { background-color: var(--color-border); width: 4rem; height: 4rem; border-radius: 8px; }
.comment-head { display: flex; flex-direction: column; }
.comment-title { font-size: 20px; font-weight: var(--font-weight-normal); margin: 0; }
.comment-body p:last-of-type { margin-bottom: 20px; }
.comment-body .links { display: flex; gap: 1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.comment-body .links a {
  display: block; background-color: var(--color-primary); color: #ffffff;
  padding: 2px 16px; border-radius: 30px; transition: all 0.2s ease;
}
.comment-body .links a:hover { background-color: var(--color-dark); }
.comments .indented { margin-left: 2rem; }

.comment-form-wrap {
  position: relative; margin: 1rem 0; padding: 1rem;
  box-shadow: 0 0 10px 2px var(--color-border); border-radius: 1rem;
}
.comment-form label { display: block; }

.links.inline {
  display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0;
}
.links.inline li { margin: 0; padding: 0; }

.node-content .field-label::before {
  content: "\e010"; font-family: "vani"; color: var(--color-primary); padding-right: 5px;
}

.menu { margin: 0; padding: 0; }
.menu li { position: relative; }
.submenu { margin: 0; padding: 0; }

.page-tabs {
  display: flex; gap: 2px; margin: 0 0 0.5rem 0; padding: 0;
  border-bottom: 1px solid var(--color-border); list-style: none;
}
.page-tabs li { margin: 0; padding: 0; }
.page-tabs li a {
  display: block; background-color: var(--color-dark); color: #ffffff;
  padding: 4px 10px; transition: all 0.3s ease;
}
.page-tabs .active-page-tab a, .page-tabs li a:hover {
  background: var(--color-primary); color: #ffffff;
}

.pager { margin: 1rem 0; }
.pager-items { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pager-item, .pager-item a {
  display: grid; place-content: center; background-color: var(--color-dark);
  color: #ffffff; min-width: 40px; height: 40px; border-radius: 4px; transition: 0.3s ease-in-out;
}
.pager-item:hover, .pager-item a:hover { background-color: var(--color-primary); }
.pager-item-arrow a { background-color: var(--color-dark); display: grid; place-content: center; min-width: 40px; height: 40px; }
.pager-item-active, .pager-item-active a {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-primary); color: #ffffff; height: 40px; min-width: 40px;
}

.pager-item-first a, .pager-item-last a, .pager-item-previous a, .pager-item-next a {
  display: flex; align-items: center; background-color: var(--color-dark); height: 40px; padding: 0 10px;
}

.scrolltop {
  position: fixed; display: none; right: 10px; bottom: 10px; width: 50px; height: 50px;
  place-content: center; background-color: var(--color-primary); color: #ffffff;
  border: 2px solid var(--color-primary); padding: 0; border-radius: 50%; z-index: 20; cursor: pointer; transition: background-color 0.3s ease;
}
.scrolltop:hover { background: var(--color-dark); }

.message, .message-success, .message-info, .message-error, .message-warning, .message-announcement, .message-notice {
  position: relative; margin: 1rem 0; padding: 14px 14px 14px 64px; color: #ffffff; text-shadow: none;
}
.message p:last-child, .message-success p:last-child, .message-info p:last-child, .message-error p:last-child, .message-warning p:last-child, .message-announcement p:last-child, .message-notice p:last-child { margin: 0; }
.message a, .message a:visited, .message-success a, .message-info a, .message-error a, .message-warning a, .message-announcement a, .message-notice a { color: #ffffff; text-decoration: underline; }
.message em, .message-success em, .message-info em, .message-error em, .message-warning em, .message-announcement em, .message-notice em { color: var(--color-bold); }

.message-status, .message-success { background: #89ad32; }
.message-status::before, .message-success::before { content: "\e024"; background-color: #759625; }
.message-info { background-color: #0c79c2; }
.message-info::before { content: "\e01a"; background-color: #0865a3; }
.message-error { background: #c94d1c; }
.message-error::before { content: "\e023"; background-color: #b3461b; }
.message-warning { background: #cd5a0a; }
.message-warning::before { content: "\e022"; background-color: #a44707; }
.message-announcement { background-color: #09bdab; }
.message-announcement::before { content: "\e018"; background-color: #0d9e88; }
.message-notice { background-color: #cca610; }
.message-notice::before { background-color: #bd8a09; content: "\e00a"; }

.message::before, .message-success::before, .message-info::before, .message-error::before, .message-warning::before, .message-announcement::before, .message-notice::before {
  position: absolute; top: 0; left: 0; width: 56px; height: 100%; font-family: "vani"; font-size: 2rem; text-align: center; line-height: 56px;
}

.disply-block { display: block; }
.disply-inline { display: inline-block; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.center { margin: 0 auto; }

.no-margin { margin: 0; }
.no-padding { padding: 0; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }

.font-weight-normal { font-weight: var(--font-weight-normal); }
.font-weight-bold { font-weight: var(--font-weight-bold); }

.font-size-small { font-size: 0.9em; }
.font-size-medium { font-size: 1.5em; }
.font-size-2x, .size-2x { font-size: 2rem; }
.font-size-3x, .size-3x { font-size: 3rem; }
.font-size-4x, .size-4x { font-size: 4rem; }
.font-size-5x, .size-5x { font-size: 5rem; }
.font-size-6x, .size-6x { font-size: 6rem; }

.text-outline {
  color: transparent; font-weight: var(--font-weight-bold);
  -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--color-dark);
  text-stroke: 1px var(--color-text); paint-order: stroke fill; line-height: 1.2;
}

.text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  color: transparent; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.width30, .width40, .width50, .width60, .width70, .width80, .width90 {
  width: 100%; clear: both; display: block;
}

.theme-color, .color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-primary-light { color: var(--color-primary-light); }
.color-dark { color: var(--color-dark); }
.color-border { color: var(--color-border); }
.color-white, .white { color: #ffffff; }
.black { color: #000000; }
.dark { color: var(--color-dark); }

.theme-bg, .bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.content-bg { background-color: var(--content-bg); }
.dark-bg { background-color: var(--color-dark); }

.list-check { margin: 0; padding: 0; list-style: none; }
.list-check li { position: relative; }
.list-check li::before {
  content: "\e024"; font-family: "vani"; padding-right: 5px; color: var(--color-primary); vertical-align: middle;
}

.highlight { display: inline-block; background: var(--color-dark); color: #ffffff; padding: 1px 4px; }

.button-link, a.button-link, button.button-link {
  display: inline-block; font-family: "Roboto", sans-serif; font-weight: 700;
  color: #ffffff; background: var(--color-primary); border: 2px solid var(--color-primary);
  border-radius: 50px; padding: 9px 22px; transition: 0.3s ease-in-out;
}
.button-link:hover, a.button-link:hover, button.button-link:hover {
  color: var(--color-primary); background: transparent;
}

.button-border, a.button-border, button.button-border {
  position: relative; display: inline-block; font-family: "Roboto", sans-serif; font-weight: 700;
  color: var(--color-bold); background: transparent; border: 0; padding: 0.6em 0.2em 0.6em 0;
}
.button-border:hover, a.button-border:hover, button.button-border:hover { background: transparent; color: var(--color-bold); }
.button-border::after, a.button-border::after, button.button-border::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 1.4em; height: 2px;
  background: var(--color-primary); transition: all 0.5s ease;
}
.button-border:hover::after, a.button-border:hover::after, button.button-border:hover::after { width: 100%; }

.button-round, a.button-round {
  position: relative; display: inline-block; font-family: "Roboto", sans-serif; font-weight: 700;
  color: var(--color-primary); background: transparent; border: 2px solid var(--color-border);
  border-radius: 30px; padding: 8px 20px; transition: all 0.4s ease-in-out;
}
.button-round:hover, a.button-round:hover { color: #ffffff; background: var(--color-primary); }

.empty, .empty50, .empty70, .empty100, .empty150 { position: relative; width: 100%; clear: both; }
.empty { height: 2rem; }
.empty50 { height: 50px; }
.empty70 { height: 70px; }
.empty100 { height: 100px; }
.empty150 { height: 150px; }

.spacer, .spacer-small, .spacer-x, .spacer-xx { width: 100%; display: flex; flex-direction: column; }
.spacer { padding: 1rem 0; }
.spacer-small { padding: 0.5rem 0; }
.spacer-x { padding: 2rem 0; }
.spacer-xx { padding: 3rem 0; }

.section, .section-small, .section-large, .section-large-x, .section-large-xx { display: block; width: 100%; }
.section { padding: 2rem 0; }
.section-small { padding: 1rem 0; }
.section-large { padding: 3rem 0; }
.section-large-x { padding: 4rem 0; }
.section-large-xx { padding: 5rem 0; }

.row { width: 100%; clear: both; margin-bottom: 1rem; }
.full { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; }

.flex, .grid, .items, .columns, .grid-container, .flex-container {
  margin: 0; padding: 0; list-style: none;
}
.flex, .flex-container, .columns { display: flex; }
.flex-container, .columns { flex-wrap: wrap; }
.grid { display: grid; }
.grid-container { display: grid; grid-auto-flow: column; }
.items { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 1rem; }
.items3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.grid-item img, .item img { display: block; }
.column { flex: 1 1 230px; margin: 0; padding: 0; }

.space-between { justify-content: space-between; }
.v-center { align-items: center; }
.h-center { justify-content: center; }
.vh-center { justify-content: center; align-items: center; }
.gap { gap: 1rem; }
.gap-x { gap: 2rem; }
.gap-small { gap: 0.5rem; }
.no-gap { gap: 0; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.w10, .w20, .w30, .w40, .w50, .w60, .w70, .w80, .w90 { flex: 1 1 100%; }
.wrap { flex-wrap: wrap; }
.no-wrap { flex-wrap: nowrap; }
.grid-center { display: grid; place-content: center; }

.call-to-action {
  position: relative; display: flex; background-color: var(--content-bg);
  flex-direction: column; justify-content: space-between; align-items: center;
  margin: 1rem 0; padding: 2rem; text-align: center;
}

.service {
  background-color: #ffffff; padding: 1rem; border-radius: 0;
  box-shadow: 0 0 20px #cacbda; transition: all 0.5s ease-in-out;
}
.service:hover { border-radius: 30px 0; transform: translateY(-1em); }
.service-icon { margin-bottom: 1rem; }
.service-icon img { max-height: 50px; width: auto; }
.service-icon i { font-size: 3rem; color: var(--color-primary); }
.service .button-link, .service a.button-link { color: var(--color-primary); background: transparent; border: 2px solid var(--color-primary); }
.service .button-link:hover, .service a.button-link:hover { color: #ffffff; background: var(--color-primary); }

.feature { background: #ffffff; padding: 1rem; box-shadow: 0 0 10px #cacbda; text-align: center; transition: all 0.5s ease-in-out; }
.feature-icon { margin-bottom: 1rem; }
.feature-icon img { max-height: 50px; width: auto; }
.feature-icon i { font-size: 3rem; color: var(--color-bold); }
.feature:hover { background: var(--color-primary); color: #ffffff; transform: translateY(-10px); }
.feature .button-link:hover, .feature a.button-link:hover { border: 2px solid #ffffff; }

.plan-name {
  background-color: var(--color-primary);
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
  padding: 2rem 0 4rem 0;
}
.plan-name h1, .plan-name h2, .plan-name h3, .plan-name h4 { color: #ffffff; }
.plan-details { margin: 0; padding: 0; list-style: none; }
.plan-details li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.plan-details li:last-child { border: none; }

.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: #ffffff; z-index: 9999; overflow: hidden; }
.loader-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.loader-icon { width: 72px; height: 72px; display: block; padding: 0px; }
.loader-icon span {
  background: var(--color-primary); position: absolute; display: inline-block;
  width: 72px; height: 72px; border-radius: 50%; animation: preloader 1.8s linear infinite;
}
.loader-icon span:last-child { animation-delay: -0.9s; -webkit-animation-delay: -0.9s; }

@keyframes preloader {
  0% { transform: scale(0, 0); opacity: 0.5; }
  100% { transform: scale(1, 1); opacity: 0; }
}

.sliding-sidebar { position: relative; visibility: hidden; z-index: 110; transition: visibility 0s 0.4s; }
.sliding-sidebar.animated-panel-is-visible { visibility: visible; transition: visibility 0s 0s; }
.sliding-sidebar-container {
  position: fixed; top: 0; width: 90%; max-width: 360px; height: 100%; padding: 16px 20px;
  background: var(--content-bg); color: var(--color-text); overflow-x: auto;
  transition: transform 0.4s 0s; box-shadow: -2px 0 4px #a9a9aa;
}
.animated-panel-from-right .sliding-sidebar-container { right: 0; transform: translate(100%, 0); }
.animated-panel-from-left .sliding-sidebar-container { left: 0; transform: translate3d(-100%, 0, 0); }
.animated-panel-is-visible .sliding-sidebar-container { transition-delay: 0s; transform: translate(0, 0); }
.close-animated-sidebar {
  position: absolute; cursor: pointer; right: 4px; top: 4px; width: 36px; height: 36px;
  line-height: 32px; text-align: center; border-radius: 50%; border: 2px solid var(--color-primary); z-index: 120;
}
.sliding-sidebar-container .block { padding: 0 0 1.6em 0; }
.sliding-sidebar-container h2 { font-size: 1.6em; }

.share-node { position: relative; margin: 1em 0; }
.share-node-title i { color: var(--color-primary); }
.icons { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.icons li a { display: grid; place-content: center; width: 44px; height: 44px; border: 2px solid var(--color-border); transition: all 0.3s ease-in-out; }
.icons li a:hover { border: 2px solid var(--color-primary); }

.cookiealert {
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 150; background: var(--content-bg);
  padding: 10px 0; margin: 0 !important; text-align: center; opacity: 0; transform: translateY(100%); transition: all 500ms ease-out;
}
.cookiealert p { margin: 0; }
.cookiealert.show { opacity: 1; transform: translateY(0%); transition-delay: 1000ms; }

.title { position: relative; text-align: center; margin-bottom: 1em; }
.title::before, .title::after { position: absolute; content: ""; height: 1px; background: var(--color-primary); margin: 0 auto; left: 50%; }
.title::before { width: 40px; bottom: 0; transform: translateX(-20px); }
.title::after { bottom: -4px; width: 60px; transform: translateX(-30px); }

.accordion, .toggle { position: relative; }
.accordion-title, .toggle-title {
  display: block; background-color: var(--content-bg); margin: 0; padding: 0.6em 0;
  border-bottom: 1px solid var(--color-border); cursor: pointer;
}
.accordion-title::before, .toggle-title::before { content: "+"; display: inline-block; color: var(--color-primary); width: 34px; text-align: center; }
.accordion-content, .toggle-content { padding: 1em 0; margin: 0; }
.active-toggle, .active-accordion { background-color: var(--color-primary); color: #ffffff; }
.active-toggle::before, .active-accordion::before { content: "-"; color: #ffffff; }

.banner { position: relative; width: 100%; margin-bottom: 1.6em; color: #000000; }
.banner img { position: relative; }
.banner .banner-message { position: absolute; display: flex; flex-direction: column; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; padding: 1em; }

.line, .line-double, .line-dash, .line-dot {
  position: relative; display: flex; width: 100%; max-width: 100%; margin: 1.4em 0; clear: both; height: 8px;
}
.line { border-top: 2px solid var(--color-border); }
.line-double { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.line-dash { border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border); }
.line-dot { border-top: 2px dotted var(--color-border); border-bottom: 2px dotted var(--color-border); }

.icon-box, .icon-box2 { position: relative; background: var(--content-bg); font-family: "Open Sans", sans-serif !important; line-height: 1.7; }
.icon-box i, .icon-box2 i { font-size: 3em; color: var(--color-primary); transition: all 0.3s ease-out; }
.icon-box img, .icon-box2 img { transition: all 0.3s ease-out; }
.icon-box:hover i, .icon-box2:hover i { color: var(--color-dark); transform: translateY(-10px); }
.icon-box:hover img, .icon-box2:hover img { transform: translateY(-10px); }
.icon-box { text-align: center; padding: 2em 1em; }
.icon-box i { display: block; margin-bottom: 30px; }
.icon-box2 { padding: 2em 1em; display: flex; justify-content: space-between; align-items: center; }
.icon-box2 i, .icon-box2 img { padding-right: 20px; }

.box { position: relative; background: var(--content-bg); padding: 1rem; border-radius: 6px; }
.box-white { background-color: #ffffff; padding: 1rem; border-radius: 6px; box-shadow: 0 0 10px #dddddd; }
.box-dark { position: relative; background: var(--color-dark); color: #ffffff; padding: 1rem; border-radius: 6px; }
.box-dark h1, .box-dark h2, .box-dark h3, .box-dark h4, .box-dark h5, .box-dark h6 { color: var(--color-primary); }

.box-theme { position: relative; background: var(--color-primary); color: #ffffff; padding: 1em; border-radius: 6px; }
.box-theme .button-link, .box-theme a.button-link, .box-theme button.button-link { border: 2px solid #ffffff; }
.box-theme .button-link:hover, .box-theme a.button-link:hover, .box-theme button.button-link:hover { background: #ffffff; }

.primary { background-color: var(--color-primary); color: #ffffff; }
.secondary { background-color: var(--color-secondary); color: #ffffff; }
.dark { background-color: var(--color-dark); color: var(--color-text-light); }
.secondary :is(h1, h2, h3, h4, h5, h6), .primary :is(h1, h2, h3, h4, h5, h6), .dark :is(h1, h2, h3, h4, h5, h6) { color: #ffffff; }
.secondary .button, .primary .button, .dark .button { background-color: transparent; border: 3px solid #ffffff; }
.secondary .button:hover, .primary .button:hover, .dark .button:hover { border: 3px solid var(--color-text-light); }

.clear { position: relative; }
.clear::before, .clear::after, .row::before, .row::after { content: ""; display: table; clear: both; }

@media (max-width: 768px) {
  .region-primary-menu .menu .submenu .submenu { padding-left: 1rem; }
  .menu-item-has-children::after { right: 1rem; }
}

@media (min-width: 768px) {
  html { font-size: 18px; }
  .no-sidebar .main-container { grid-template-columns: 100%; }
  .sidebar-left .main-container { grid-template-columns: 30% 70%; }
  .sidebar-right .main-container { grid-template-columns: 70% 30%; }
  .two-sidebar .main-container { grid-template-columns: 30% 40% 30%; }
  #main { order: 2; }
  .sidebar-left #main, .sidebar-right #main, .two-sidebar #main { margin: 0; }
  #sidebar-left { order: 1; padding: 0 1rem 0 0; }
  #sidebar-right { order: 3; padding: 0 0 0 1rem; }
  .header-block-container { flex-direction: row; }
  .header-block { max-width: 50%; }
  .header-main { padding: 1rem 0; }
  .menu-wrap { position: relative; background: transparent; width: 100%; max-width: 100%; float: right; margin-left: 0; padding: 0; transform: translateX(0); transition: none; }
  .main-menu { display: block; color: var(--color-bold); }
  .main-menu a { color: var(--color-bold); }
  ul.main-menu li { display: inline-block; }
  ul.main-menu li a { border: none; }
  ul.main-menu > li { display: inline-block; margin-left: 30px; }
  ul.main-menu > li > a { padding: 10px 1px; }
  ul.main-menu > li a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 20px; height: 2px; background: var(--color-primary); transition: width 0.3s ease; }
  ul.main-menu li:hover > a::after { width: 100%; }
  ul.main-menu ul.submenu { position: absolute; display: none; font-weight: 700; top: 35px; opacity: 0; }
  ul.main-menu ul.submenu li { display: inline-block; width: 160px; background: #ffffff; text-align: left; border-bottom: 1px solid var(--color-primary); }
  ul.main-menu ul.submenu li a { display: inline-block; padding: 10px 6px 10px 10px; transition: all ease 0.3s; }
  ul.main-menu ul.submenu li a:hover { padding: 10px 2px 10px 14px; }
  li.expanded:hover ul.submenu, li.collapsed:hover ul.submenu { display: block; animation: slideUp 0.5s forwards; }
  .main-menu li span.dropdown-arrow { position: relative; transition: all 0.3s ease-in-out; }
  ul.main-menu li.expanded:hover .dropdown-arrow, ul.main-menu li.collapsed:hover .dropdown-arrow { transform: rotate(135deg); }
  ul.main-menu ul.submenu ul.submenu { position: absolute; display: none; width: 160px; top: 0; left: 160px; padding: 0; opacity: 0; }
  ul.submenu li.expanded:hover ul.submenu, ul.submenu li.collapsed:hover ul.submenu { display: block; animation: slideUp 0.5s forwards; }
  .main-menu ul.submenu li.expanded::after { right: 10px; }
  .main-menu > li:last-child .submenu .submenu, .region-primary-menu .menu > li:last-child .submenu .submenu { left: unset; right: 160px; }
  .footer .social-icons { justify-content: center; flex-wrap: wrap; }
  .footer-container { grid-template-columns: 1fr; gap: 35px; }
  .footer-block { align-items: center; text-align: center; }
  .footer .block-title::after { left: 50%; transform: translateX(-50%); }
  .footer-bottom-last-container { flex-direction: column; text-align: center; }
  .width30 { width: 30%; }
  .width40 { width: 40%; }
  .width50 { width: 50%; }
  .width60 { width: 60%; }
  .width70 { width: 70%; }
  .width80 { width: 80%; }
  .width90 { width: 90%; }
  .w10 { flex-basis: calc(10% - 1rem); }
  .w20 { flex-basis: calc(20% - 1rem); }
  .w30 { flex-basis: calc(30% - 1rem); }
  .w40 { flex-basis: calc(40% - 1rem); }
  .w50 { flex-basis: calc(50% - 1rem); }
  .w60 { flex-basis: calc(60% - 1rem); }
  .w70 { flex-basis: calc(70% - 1rem); }
  .w80 { flex-basis: calc(80% - 1rem); }
  .w90 { flex-basis: calc(90% - 1rem); }
  .full { flex-direction: row; margin-bottom: 1rem; }
  .call-to-action { flex-direction: row; }
}

@media (min-width: 992px) {
  th { padding: 10px; }
  td { padding: 5px 10px; }
  .morphist { text-align: left; }
  .header-cicle1, .header-cicle2, .header-cicle3 { height: 4rem; width: 4rem; }
  .header-cicle4, .header-cicle5, .header-cicle6 { height: 3rem; width: 3rem; }
  .header-cicle7, .header-cicle8, .header-cicle9, .header-cicle10 { width: 2rem; height: 2rem; }
}

/* ==========================================================================
   ESTILOS PERSONALIZADOS FUNDACIÓN TARAB! (FUERA DE @MEDIA Y SIN ERRORES)
   ========================================================================== */

/* Fondo Azul Grisáceo Elegante (Sustituye al morado oscuro) */
.tarab-bg-dark {
    background-color: #2c3549 !important;
    color: #ffffff !important;
}

/* Texto dorado/amarillo suave para resaltar títulos dentro de fondos oscuros */
.tarab-highlight-text {
    color: #f7d070 !important;
}

/* Fondo Lila / Violeta suave para tarjetas secundarias */
.tarab-card-violet {
    background-color: #f4f0f8 !important;
    border-left: 5px solid #6b5b95 !important;
    color: #2c3549 !important;
}

/* Forzar que todos los textos y párrafos dentro de secciones oscuras sean visibles */
.mundo-hero, 
.mundo-hero p, 
.mundo-hero span, 
.mundo-hero em,
.mundo-hero blockquote,
.mundo-hero blockquote p {
    color: #ffffff !important;
}

.mundo-hero h1 {
    color: #ffe8a1 !important;
}

/* Evitar que CKEditor rompa o desplace las tarjetas y párrafos */
.field-name-field-body section p {
    margin-bottom: 1rem;
}
/* ==========================================================================
   SOLUCIÓN DEFINITIVA DE CONTRASTE Y COLORES — MUNDO XNE TARAB!
   ========================================================================== */

/* 1. Forzar el Azul Grisáceo en lugar del morado oscuro */
section.mundo-hero,
.tarab-bg-dark {
    background: #2c3549 !important; /* Cambia el morado #3a2b58 por Azul Grisáceo */
    background-color: #2c3549 !important;
    border: 1px solid #3e4a64 !important;
}

/* 2. Forzar que TODOS los textos de la tarjeta hero sean blancos/dorados */
section.mundo-hero *,
section.mundo-hero p,
section.mundo-hero span,
section.mundo-hero em,
section.mundo-hero strong {
    color: #ffffff !important;
}

/* 3. Título principal en Dorado */
section.mundo-hero h1,
section.mundo-hero h1 * {
    color: #ffe8a1 !important;
}

/* 4. Subtítulo en crema suave */
section.mundo-hero .hero-subtitle,
section.mundo-hero p:nth-of-type(1) em {
    color: #e8ddd3 !important;
}

/* 5. Cita / Blockquote */
section.mundo-hero blockquote {
    background-color: rgba(255, 232, 161, 0.1) !important;
    border-left: 5px solid #ffe8a1 !important;
}

section.mundo-hero blockquote p,
section.mundo-hero blockquote em {
    color: #ffffff !important;
}
/* ==========================================================================
   PROGRAMAS ESTRELLA - GRILLA DE LOGOS (FOOTER THIRD)
   ========================================================================== */
.footer-programas-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Grilla de 2x2 */
  gap: 12px !important;
  width: 100% !important;
}

.footer-programa-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  height: 65px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

.footer-programa-item img {
  max-height: 45px !important;
  width: auto !important;
  max-width: 90% !important;
  object-fit: contain !important;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: all 0.3s ease !important;
}

/* Efecto al pasar el mouse */
.footer-programa-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 232, 161, 0.3) !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.footer-programa-item:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

/* ==========================================================================
   LINKS DE INTERÉS (FOOTER FOURTH)
   ========================================================================== */
.footer-links-list li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-link-item {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.95rem;
  padding: 4px 0;
  transition: all 0.3s ease;
}

.footer-link-item i {
  transition: transform 0.3s ease;
}

.footer-link-item:hover {
  color: #ffe8a1 !important;
  padding-left: 6px;
}

.footer-link-item:hover i {
  transform: translateX(4px);
  color: #ffe8a1 !important;
}

/* ==========================================================================
   SLIDER DE ALIADOS (LOGOS GRANDES + CONTENCIÓN ABSOLUTA DE GRID)
   ========================================================================== */

/* 1. Definición estricta de las 4 columnas */
@media (min-width: 768px) {
  .footer-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
  }

  /* Clave CSS Grid: Fuerza a las celdas a no expandirse por culpa de sus hijos */
  .footer-container > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Corta cualquier derrame externo */
  }
}

/* 2. El wrapper visual del slider */
.footer-aliados-slider-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.footer-aliados-slider-wrapper h4 {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* 3. Área visible con máscara lateral y recorte estricto */
.footer-aliados-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative;
  display: block !important;
  box-sizing: border-box !important;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 4. Pista animada con logos a buen tamaño */
.footer-aliados-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 35px !important;
  width: max-content !important;
  animation: scrollAliados 30s linear infinite !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer-aliados-container:hover .footer-aliados-track {
  animation-play-state: paused !important;
}

.footer-aliado-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 80px !important;
  flex: 0 0 auto !important;
  opacity: 0.75;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.footer-aliado-item img {
  height: 70px !important; /* ¡Logos de 70px, grandes y llamativos! */
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

.footer-aliado-item:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.08);
}

/* 5. Animación continua */
@keyframes scrollAliados {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* /* ==========================================================================
   TARJETAS DE NOVEDADES Y BLOQUE FRONTAL (VIEWS DRUPAL)
   ========================================================================== */

/* 1. Tarjeta contenedora individual */
.views-view-responsive-grid__item-inner {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e0e2f6 !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  height: 100% !important;
}

.views-view-responsive-grid__item-inner:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 2. Título de la noticia */
.views-field-title a {
  color: #2c3549 !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.views-field-title a:hover {
  color: #db3700 !important;
}

/* 3. Contenedor de la Imagen / SVG */
.views-field-field-image img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

/* 4. Resumen del Body (Limpia estilos extra dentro del campo) */
.views-field-field-body {
  color: #414348 !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  flex-grow: 1 !important; /* Empuja el botón al fondo de la tarjeta */
}

/* Anular el fondo blanco viejo si venía embebido en el body */
.views-field-field-body article.noticia-tarab {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* 5. Etiqueta de Categoría */
.views-field-field-categoria {
  display: inline-block !important;
  width: fit-content !important;
}

.views-field-field-categoria a {
  background-color: rgba(219, 55, 0, 0.1) !important;
  color: #db3700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
}

/* 6. Botón Leer más... */
.views-field-view-node {
  margin-top: auto !important;
  padding-top: 10px !important;
}

.views-field-view-node a {
  display: inline-block !important;
  background-color: #db3700 !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(219, 55, 0, 0.3) !important;
}

.views-field-view-node a:hover {
  background-color: #2c3549 !important;
  transform: scale(1.03) !important;
}

/* ==========================================================================
   REUBICACIÓN DEL BIRRETE (ZONA DE ESTUDIANTES) AL LATERAL DERECHO
   ========================================================================== */

/* 1. Transformar el botón del birrete en una pestaña lateral flotante */
.sliding-panel-icon {
  position: fixed !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 9990 !important;
  margin: 0 !important;
  width: 46px !important;
  height: 48px !important;
  border-radius: 8px 0 0 8px !important; /* Esquinas redondeadas hacia la izquierda */
  background-color: #db3700 !important; /* Naranja Tarab! */
  color: #ffffff !important;
  border: none !important;
  box-shadow: -3px 0 12px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.sliding-panel-icon i {
  font-size: 1.3rem !important;
  color: #ffffff !important;
}

.sliding-panel-icon:hover {
  width: 54px !important; /* Pequeño efecto de extensión al pasar el mouse */
  background-color: #2c3549 !important;
}

/* 2. Dejar la cabecera móvil totalmente limpia para el botón hamburguesa */
@media (max-width: 850px) {
  .header-main-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 15px !important;
  }

  /* Hamburguesa visible y sin interferencias */
  .mobile-menu {
    position: relative !important;
    z-index: 9999 !important;
    margin: 0 !important;
  }
}
/* ==========================================================================
   REUBICACIÓN DEL BIRRETE (ZONA DE ESTUDIANTES)
   ========================================================================== */
.sliding-panel-icon {
  position: fixed !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 9990 !important;
  margin: 0 !important;
  width: 46px !important;
  height: 48px !important;
  border-radius: 8px 0 0 8px !important;
  background-color: #db3700 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: -3px 0 12px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.sliding-panel-icon i {
  font-size: 1.3rem !important;
  color: #ffffff !important;
}

.sliding-panel-icon:hover {
  width: 54px !important;
  background-color: #2c3549 !important;
}

/* ==========================================================================
   MENÚ HAMBURGUESA Y RESPONSIVE (SOLO PARA PANTALLAS PEQUEÑAS)
   ========================================================================== */

/* 1. En Escritorio (>850px), ocultar el botón de la hamburguesa por completo */
@media (min-width: 851px) {
  .mobile-menu {
    display: none !important;
  }
}

/* 2. En Móviles y Tablets (<=850px) */
@media (max-width: 850px) {
  /* Ocultar el menú horizontal de texto */
  .header-main-right .desktop-menu {
    display: none !important;
  }

  /* Mostrar y dar formato al botón hamburguesa */
  button.mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    position: relative !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 2px solid #db3700 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    outline: none !important;
  }

  button.mobile-menu i {
    pointer-events: none !important;
    font-size: 1.2rem !important;
    color: #db3700 !important;
  }

  /* El panel flotante cortina */
  .primary-menu-wrapper .menu-wrap {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 290px !important;
    max-width: 85% !important;
    height: 100vh !important;
    background-color: #2c3549 !important;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5) !important;
    overflow-y: auto !important;
    padding: 3rem 1.5rem 1.5rem 1.5rem !important;
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 999999 !important;
  }

  /* REGLA DE APERTURA: Cuando body o wrapper tienen .active-menu */
  body.active-menu .menu-wrap,
  .primary-menu-wrapper.active-menu .menu-wrap {
    transform: translateX(0) !important;
  }

  /* Botón de cerrar (X) */
  .close-mobile-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
  }

  /* Lista de enlaces */
  .menu-wrap ul.main-menu {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
  }

  .menu-wrap ul.main-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .menu-wrap ul.main-menu li a {
    color: #ffffff !important;
    padding: 12px 10px !important;
    display: block !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
  }

  .menu-wrap ul.main-menu li a:hover {
    color: #ffe8a1 !important;
    padding-left: 16px !important;
  }
}
/* REGLA DE PROTECCIÓN DE CONTRASTE EN HISTORIA */
.historia-hero, 
.historia-hero *,
.nosotros-cta-banner,
.nosotros-cta-banner * {
  color: #ffffff;
}

.historia-hero h1, 
.historia-hero h1 strong,
.nosotros-cta-banner h2 {
  color: #ffe8a1 !important;
}

/* Tarjeta Presente (Fondo Oscuro) */
.extended-timeline .timeline-item:last-child div[style*="background-color:#2c3549"],
.extended-timeline .timeline-item:last-child div[style*="background-color:#2c3549"] * {
  color: #e8ddd3 !important;
}

.extended-timeline .timeline-item:last-child div[style*="background-color:#2c3549"] h3,
.extended-timeline .timeline-item:last-child div[style*="background-color:#2c3549"] h3 *,
.extended-timeline .timeline-item:last-child div[style*="background-color:#2c3549"] strong {
  color: #ffe8a1 !important;
}
/* ==========================================================================
   SOLUCIÓN DEFINITIVA PARA HEROES (ALIADOS Y TRANSPARENCIA)
   ========================================================================== */

/* 1. Forzar fondo Azul Grisáceo y bordes correctos */
section.aliados-hero,
section.transparencia-hero {
    background-color: #2c3549 !important;
    border: 1px solid #3e4a64 !important;
    color: #ffffff !important;
}

/* 2. Forzar que todos los textos internos sean blancos por defecto */
section.aliados-hero *,
section.transparencia-hero * {
    color: #ffffff !important;
}

/* 3. Forzar el Título Principal en color Crema/Dorado (#ffe8a1) */
section.aliados-hero h1,
section.aliados-hero h1 strong,
section.transparencia-hero h1,
section.transparencia-hero h1 strong {
    color: #ffe8a1 !important;
}

/* 4. Forzar el Subtítulo / Párrafo en crema suave (#e8ddd3) */
section.aliados-hero p.lead,
section.aliados-hero p.lead em,
section.transparencia-hero p.lead,
section.transparencia-hero p.lead em {
    color: #e8ddd3 !important;
}
/* ==========================================================================
   ESTILOS PERSONALIZADOS PARA EL BLOQUE SOCIAL DEL SIDEBAR
   ========================================================================== */

.sidebar-social {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sidebar-social h4 {
    color: #2c3549 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-social h4 i {
    color: #db3700; /* Naranja institucional para el icono del título */
}

.sidebar-social .social-description {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 15px !important;
}

/* Personalización de los íconos dentro del sidebar */
.sidebar-social .icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-social .icons li {
    border: none !important;
    padding: 0 !important;
}

.sidebar-social .icons li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-color: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    color: #2c3549 !important; /* Color inicial del ícono (Azul grisáceo) */
    font-size: 1.1rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Efecto hover interactivo con los colores de la fundación */
.sidebar-social .icons li a:hover {
    background-color: #db3700 !important; /* Fondo naranja Tarab! al pasar el mouse */
    border-color: #db3700 !important;
    color: #ffffff !important; /* Ícono blanco */
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 4px 12px rgba(219, 55, 0, 0.3);
}
/* ==========================================================================
   SISTEMA DE TILES VIVOS TIPO METRO UI (DEFINITIVO)
   ========================================================================== */

/* Contenedor Principal de la Galería Metro */
.artist-hero-grid .metro-gallery {
  width: 100% !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

/* Grilla Inteligente Dense Packing (Rellena todos los huecos) */
.artist-hero-grid .metro-gallery .field-items,
.artist-hero-grid .metro-gallery .field--name-field-galeria-multimedia-remote .field__items {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: 120px !important;
  grid-auto-flow: dense !important; /* Llena espacios en blanco con tiles disponibles */
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}

/* 4 Columnas en escritorio (PC) */
@media (min-width: 992px) {
  .artist-hero-grid .metro-gallery .field-items,
  .artist-hero-grid .metro-gallery .field--name-field-galeria-multimedia-remote .field__items {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 130px !important;
  }
}

/* Base de Mosaico / Tile Individual */
.artist-hero-grid .metro-gallery .field-item.tile {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
  perspective: 1000px !important;
  transform-style: preserve-3d !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
}

/* PATRONES DE DIMENSIÓN DE TILES (Metro UI Spans) */
.artist-hero-grid .metro-gallery .field-item.tile-square { grid-column: span 1 !important; grid-row: span 1 !important; }
.artist-hero-grid .metro-gallery .field-item.tile-wide   { grid-column: span 2 !important; grid-row: span 1 !important; }
.artist-hero-grid .metro-gallery .field-item.tile-tall   { grid-column: span 1 !important; grid-row: span 2 !important; }
.artist-hero-grid .metro-gallery .field-item.tile-large  { grid-column: span 2 !important; grid-row: span 2 !important; }

/* Enlaces e Imagen de Fondo */
.artist-hero-grid .tile-inner-link {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

.artist-hero-grid .tile-img-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* Capa Flotante de Contenido */
.artist-hero-grid .tile-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.32) !important;
  color: #ffffff !important;
  padding: 10px !important;
  text-align: center !important;
  backface-visibility: hidden !important;
  transition: background 0.3s ease !important;
}

.artist-hero-grid .tile:hover .tile-overlay {
  background: rgba(0, 0, 0, 0.15) !important;
}

.artist-hero-grid .tile-icon i {
  font-size: 26px !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.artist-hero-grid .tile-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Botón Play Interactivo para Audios */
.artist-hero-grid .audio-play-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 2px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  backdrop-filter: blur(4px) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}

.artist-hero-grid .audio-play-btn i {
  font-size: 18px !important;
  color: #ffffff !important;
  margin-left: 3px !important;
}

.artist-hero-grid .tile-music:hover .audio-play-btn {
  transform: scale(1.15) !important;
  background: #ff7b00 !important;
  border-color: #ff7b00 !important;
}

/* ==========================================================================
   ANIMACIONES VIVAS (METRO LIVE TILES 3D & SLIDE)
   ========================================================================== */

/* 1. Voltereta 3D (Flip) en bucle */
@keyframes metroTileFlip {
  0%, 80%, 100% {
    transform: rotateY(0deg);
  }
  90% {
    transform: rotateY(180deg);
  }
}

.artist-hero-grid .metro-gallery .tile-live {
  animation: metroTileFlip 7s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Retrasos escalonados para que cada tile gire a un ritmo distinto */
.artist-hero-grid .metro-gallery .field-item:nth-child(1).tile-live { animation-delay: 0.5s !important; }
.artist-hero-grid .metro-gallery .field-item:nth-child(3).tile-live { animation-delay: 2.5s !important; }
.artist-hero-grid .metro-gallery .field-item:nth-child(5).tile-live { animation-delay: 4.5s !important; }

/* 2. Desplazamiento Suave (Slide Up) */
@keyframes metroTileSlide {
  0%, 82%, 100% {
    transform: translateY(0);
  }
  91% {
    transform: translateY(-8px);
  }
}

.artist-hero-grid .metro-gallery .tile-slide {
  animation: metroTileSlide 6s infinite ease-in-out !important;
}

.artist-hero-grid .metro-gallery .field-item:nth-child(2).tile-slide { animation-delay: 1.5s !important; }
.artist-hero-grid .metro-gallery .field-item:nth-child(4).tile-slide { animation-delay: 3.5s !important; }

/* Efecto Hover tridimensional al pasar el mouse */
.artist-hero-grid .metro-gallery .field-item.tile:hover {
  animation-play-state: paused !important; /* Detiene la animación temporalmente mientras el usuario interactúa */
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow: 0 12px 28px rgba(255, 123, 0, 0.25) !important;
  z-index: 20 !important;
}
/* ==========================================================================
   SOLUCIÓN DEFINITIVA: MENÚ HAMBURGUESA MÓVIL Y HOME RESPONSIVO
   ========================================================================== */

/* 1. Menú hamburguesa desplegable perfecto */
@media (max-width: 850px) {
  .header-main-right .desktop-menu {
    display: none !important;
  }

  button.mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    position: relative !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    outline: none !important;
  }

  button.mobile-menu i {
    pointer-events: none !important;
    font-size: 1.2rem !important;
    color: var(--color-primary) !important;
  }

  /* Forzar la cortina del menú a cubrir la pantalla al activarse en el body */
  body.active-menu .menu-wrap {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .menu-wrap {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 300px !important;
    max-width: 85% !important;
    height: 100vh !important;
    background-color: var(--color-bold) !important;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5) !important;
    overflow-y: auto !important;
    padding: 3rem 1.5rem 1.5rem 1.5rem !important;
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 999999 !important;
  }

  .close-mobile-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
  }

  .menu-wrap ul.main-menu {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
  }

  .menu-wrap ul.main-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .menu-wrap ul.main-menu li a {
    color: #ffffff !important;
    padding: 12px 10px !important;
    display: block !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
  }

  .menu-wrap ul.main-menu li a:hover {
    color: #ffe8a1 !important;
    padding-left: 16px !important;
  }
}

@media (min-width: 851px) {
  .mobile-menu {
    display: none !important;
  }
}

/* 2. Corrección del Home y grillas de Vistas (Artistas y Noticias) */
.region-content-home,
.homepage-content {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

.region-content-home .views-view-responsive-grid,
.homepage-content .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  .region-content-home .views-view-responsive-grid,
  .homepage-content .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  .region-content-home .views-view-responsive-grid,
  .homepage-content .views-view-responsive-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.region-content-home .views-view-responsive-grid__item,
.homepage-content .views-view-responsive-grid__item {
  width: 100% !important;
  margin: 0 !important;
}
/* ==========================================================================
   LIMPIEZA EXCLUSIVA PARA EL BLOQUE DE ARTISTAS EN EL HOME
   ========================================================================== */

#block-tarab-views-block-artistas-block-1 .view-filters {
  display: none !important;
}

#block-tarab-views-block-artistas-block-1 .block-title {
  text-align: center !important;
  margin-bottom: 2rem !important;
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  color: var(--color-bold) !important;
}

/* Forzar que la grilla de artistas del home se distribuya correctamente en 4 columnas */
#block-tarab-views-block-artistas-block-1 .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

@media (min-width: 576px) {
  #block-tarab-views-block-artistas-block-1 .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  #block-tarab-views-block-artistas-block-1 .views-view-responsive-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

#block-tarab-views-block-artistas-block-1 .views-view-responsive-grid__item {
  width: 100% !important;
  margin: 0 !important;
}
/* ==========================================================================
   CORRECCIÓN DEFINITIVA PARA EL BLOQUE DE ÚLTIMAS NOTICIAS EN EL HOME
   ========================================================================== */

#block-tarab-views-block-novedades-block-1 .block-title {
  text-align: center !important;
  margin-bottom: 2rem !important;
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  color: var(--color-bold) !important;
}

/* Forzar ancho completo del contenedor de novedades */
#block-tarab-views-block-novedades-block-1 .views-element-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

/* Anular el cálculo inline de columnas de Drupal y forzar grilla propia */
#block-tarab-views-block-novedades-block-1 .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  #block-tarab-views-block-novedades-block-1 .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  #block-tarab-views-block-novedades-block-1 .views-view-responsive-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas perfectas para noticias */
  }
}

#block-tarab-views-block-novedades-block-1 .views-view-responsive-grid__item {
  width: 100% !important;
  margin: 0 !important;
}
/* ==========================================================================
   CORRECCIÓN DE DESBORDE DE FOOTER EN MÓVILES Y TABLETS
   ========================================================================== */

@media (max-width: 991px) {
  /* Forzar que el contenedor principal del footer baje a una sola columna fluida */
  .footer-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Asegurar que cada bloque del footer no rebase el ancho de la pantalla */
  .footer-block,
  .footer-block-region {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Contener el slider de aliados del footer-second para que no se desborde */
  .footer-aliados-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .footer-aliados-track {
    width: max-content !important;
  }

  /* Asegurar que la grilla de programas estrella (footer-third) se adapte limpiamente */
  .footer-programas-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ajustar los enlaces de interés (footer-fourth) para que ocupen todo el ancho sin desbordar */
  .footer-links-list {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* ==========================================================================
   FORZAR APERTURA ABSOLUTA DEL MENÚ HAMBURGUESA MÓVIL
   ========================================================================== */

@media (max-width: 850px) {
  /* Asegurar que el contenedor wrapper y el menu-wrap existan en el DOM móvil */
  .primary-menu-wrapper {
    display: block !important;
    position: static !important;
  }

  /* Forzar visibilidad total cuando el body tenga la clase activa */
  body.active-menu .menu-wrap {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  /* Estilo y posición base de la cortina móvil */
  .menu-wrap {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 300px !important;
    max-width: 85% !important;
    height: 100vh !important;
    background-color: var(--color-bold, #2c3549) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6) !important;
    overflow-y: auto !important;
    padding: 3.5rem 1.5rem 1.5rem 1.5rem !important;
    transform: translateX(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 999999 !important;
    visibility: hidden;
  }

  /* Mostrar los elementos internos del menú al deslizarse */
  body.active-menu .menu-wrap .main-menu,
  body.active-menu .menu-wrap .close-mobile-menu {
    display: grid !important;
  }

  .close-mobile-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    background: transparent !important;
  }
}
/* ==========================================================================
   POBLAR Y MOSTRAR LOS ENLACES DENTRO DE LA CORTINA MÓVIL
   ========================================================================== */

@media (max-width: 850px) {
  /* Forzar que el bloque de menú dentro de la cortina sea visible y se ordene en columna */
  body.active-menu .menu-wrap .block-menu,
  body.active-menu .menu-wrap nav,
  body.active-menu .menu-wrap ul.main-menu {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Estilo limpio para cada opción de enlace en el menú móvil */
  .menu-wrap ul.main-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .menu-wrap ul.main-menu li a {
    color: #ffffff !important;
    display: block !important;
    padding: 14px 10px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .menu-wrap ul.main-menu li a:hover,
  .menu-wrap ul.main-menu li a.is-active {
    color: #ffe8a1 !important;
    padding-left: 16px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* Ocultar las flechas de submenús si causan ruido visual en móvil */
  .menu-wrap .dropdown-arrow {
    float: right !important;
  }
}
/* ==========================================================================
   CORRECCIÓN RESPONSIVA PARA LA PÁGINA DE NOVEDADES
   ========================================================================== */

.path-novedades .views-element-container,
.path-novedades .view-novedades {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.path-novedades .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  .path-novedades .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  .path-novedades .views-view-responsive-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.path-novedades .views-view-responsive-grid__item {
  width: 100% !important;
  margin: 0 !important;
}
/* ==========================================================================
   CORRECCIÓN RESPONSIVA PARA LA PÁGINA DE ARTISTAS
   ========================================================================== */

.path-chibysuca .views-element-container,
.path-chibysuca .view-artistas {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.path-chibysuca .views-view-responsive-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  .path-chibysuca .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 992px) {
  .path-chibysuca .views-view-responsive-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.path-chibysuca .views-view-responsive-grid__item {
  width: 100% !important;
  margin: 0 !important;
}
/* ==========================================================================
   CORRECCIÓN DE ICONOS SOCIALES EN EL SIDEBAR (ZONA DE ESTUDIANTES)
   ========================================================================== */

.sidebar-social .icons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar-social .icons li {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-social .icons li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  color: #2c3549 !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* Forzar que los elementos i o etiquetas de los íconos rendericen correctamente */
.sidebar-social .icons li a i,
.sidebar-social .icons li a svg {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
}

/* Efecto hover interactivo en el sidebar */
.sidebar-social .icons li a:hover {
  background-color: var(--color-primary, #db3700) !important;
  border-color: var(--color-primary, #db3700) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 12px rgba(219, 55, 0, 0.3);
}
/* ==========================================================================
   TRADUCCIÓN Y ESTILO "TARAB!" PARA COMPARTIR PÁGINA
   ========================================================================== */

.share-node {
  background: var(--content-bg, #f2f4ff) !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--color-border, #c9cee7) !important;
  margin: 2rem 0 !important;
}

.share-node-title {
  font-size: 1.1rem !important;
  font-family: var(--font-heading) !important;
  color: var(--color-bold, #2c3549) !important;
  margin-bottom: 1rem !important;
  visibility: hidden; /* Oculta el texto original de forma segura */
  position: relative;
}

.share-node-title::after {
  content: " Compartir esta página";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-bold, #2c3549);
}

.share-node-title i {
  visibility: visible !important;
  color: var(--color-primary, #db3700) !important;
  margin-right: 5px;
}

/* Círculos interactivos estilo Tarab! para los botones de compartir */
.share-node .icons li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 2px solid var(--color-border, #c9cee7) !important;
  color: var(--color-bold, #2c3549) !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.share-node .icons li a:hover {
  background-color: var(--color-primary, #db3700) !important;
  border-color: var(--color-primary, #db3700) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 12px rgba(219, 55, 0, 0.3);
}
/* ==========================================================================
   CAJA DE COMPARTIR TRANSPARENTE Y TÍTULO DESPLAZADO
   ========================================================================== */

.share-node {
  background: transparent !important;
  padding: 1rem 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 2rem 0 !important;
}

.share-node-title {
  font-size: 1.1rem !important;
  font-family: var(--font-heading) !important;
  color: var(--color-bold, #2c3549) !important;
  margin-bottom: 1rem !important;
  position: relative;
  padding-left: 30px !important; /* Mueve el texto a la derecha dejando espacio limpio para el icono */
  visibility: hidden;
}

.share-node-title::after {
  content: "Compartir esta página";
  visibility: visible;
  position: absolute;
  left: 30px; /* Alineado con el espaciado */
  top: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-bold, #2c3549);
}

.share-node-title i {
  visibility: visible !important;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--color-primary, #db3700) !important;
  font-size: 1.2rem;
}

/* Círculos interactivos estilo Tarab! para los botones */
.share-node .icons li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  border: 2px solid var(--color-border, #c9cee7) !important;
  color: var(--color-bold, #2c3549) !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.share-node .icons li a:hover {
  background-color: var(--color-primary, #db3700) !important;
  border-color: var(--color-primary, #db3700) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 12px rgba(219, 55, 0, 0.3);
}
/* ==========================================================================
   MATRIZ DE CALENDARIO / HORARIO GENERAL TARAB!
   ========================================================================== */

/* Estructura general de la tabla */
.custom-schedule-table {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.custom-schedule-table thead th {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.custom-schedule-table .program-label {
  vertical-align: middle;
  border-right: 2px solid rgba(0, 0, 0, 0.1);
}

/* Enlaces e Insignias dentro de las celdas del horario */
.event-badge-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  padding: 10px 6px;
  border-radius: 10px;
  transition: all 0.25s ease;
  color: #2d3748;
  background: rgba(248, 249, 250, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.event-badge-link:hover {
  background-color: rgba(219, 55, 0, 0.08);
  border-color: #db3700;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(219, 55, 0, 0.12);
}

.event-badge-link .event-logo-img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}

.event-badge-link .time-text {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.event-badge-link .teacher-text {
  font-size: 0.72rem;
  color: #718096;
  margin-top: 2px;
}

/* Resaltado especial para eventos y estrenos */
.event-row-highlight {
  background-color: rgba(219, 55, 0, 0.03) !important;
}

.event-badge-link.special-event {
  border: 1px dashed #db3700;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(219, 55, 0, 0.15);
}

.event-badge-link.special-event:hover {
  background: #fff5f2;
}

/* Celda activa cuando hay clase asignada */
td.active-slot {
  background-color: rgba(219, 55, 0, 0.02);
}
/* Estilo Tarab! para eventos en FullCalendar */
.fc-event {
  border: none !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.fc-event:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
  cursor: pointer;
}

/* Fondo transparente del contenedor general para acoplarse al background */
.fc {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 16px !important;
  padding: 15px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
/* ==========================================================================
   INSIGNIAS RESPONSIVAS (MUNDOS Y SUBTÍTULOS)
   ========================================================================== */

/* Permite que las insignias de subtítulo rompan línea de forma estética */
.badge.bg-success-subtle,
.badge {
  white-space: normal !important;      /* Permite salto de línea en pantallas estrechas */
  text-align: left !important;         /* Mantiene alineación legible al saltar línea */
  line-height: 1.4 !important;         /* Interlineado cómodo */
  max-width: 100% !important;          /* Impide el desborde horizontal */
  display: inline-block !important;
  word-break: break-word !important;   /* Corta palabras largas si no caben */
  padding: 6px 12px !important;
}

/* Ajuste de tamaño de fuente progresivo en móviles */
@media (max-width: 576px) {
  .badge.bg-success-subtle,
  .badge {
    font-size: 0.8rem !important;      /* Escalado adecuado para smartphones */
    padding: 5px 10px !important;
  }
}
/* ==========================================================================
   ANIMACIONES METRO / ZUNE (KEYFRAMES & HOVER EFFECTS)
   ========================================================================== */

/* 1. Transición general y perspectiva 3D para cada Tile */
.proyecto-metro-gallery .field-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease !important;
}

/* 2. Efecto Tilt / Zoom interactivo al pasar el mouse (Hover Zune) */
.proyecto-metro-gallery .field-item:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 25px rgba(219, 55, 0, 0.25) !important;
  z-index: 5;
}

.proyecto-metro-gallery .field-item:hover .tile-img-cover {
  transform: scale(1.08);
  transition: transform 0.6s ease;
}

/* 3. Animación "Tile Live" (Efecto sutil de respiración y deslizamiento vertical) */
.proyecto-metro-gallery .field-item.tile-live {
  animation: metroTileLive 6s infinite ease-in-out alternate;
}

/* Desfasar la animación entre ítems para que no se muevan todos al mismo tiempo */
.proyecto-metro-gallery .field-item.tile-live:nth-child(2n) {
  animation-delay: 1.5s;
}
.proyecto-metro-gallery .field-item.tile-live:nth-child(3n) {
  animation-delay: 3s;
}

@keyframes metroTileLive {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97) rotateX(2deg);
  }
  100% {
    transform: scale(1);
  }
}

/* 4. Animación "Tile Slide" (Efecto de volteo / entrada 3D suave) */
.proyecto-metro-gallery .field-item.tile-slide {
  animation: metroTileSlide 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.proyecto-metro-gallery .field-item.tile-slide:nth-child(2n+1) {
  animation-delay: 2s;
}

@keyframes metroTileSlide {
  0%, 100% {
    transform: rotateY(0deg);
  }
  45% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg) scale(0.95);
  }
  55% {
    transform: rotateY(0deg);
  }
}

/* Asegurar animación fluida en la imagen interna */
.proyecto-metro-gallery .tile-img-cover {
  transition: transform 0.5s ease-out !important;
  backface-visibility: hidden;
}