/**
 * @file
 * Componentes: cabecera, menú, slider, secciones de portada, tarjetas,
 * formularios, pie e iconos.
 */

/* ------------------------------------------------------------------ *
 * Iconos SVG (máscaras CSS, heredan el color del texto)
 * ------------------------------------------------------------------ */
:root {
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z%22/%3E%3C/svg%3E");
  --icon-facebook: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M14 8.5V6.6c0-.8.2-1.3 1.4-1.3H17V2.2C16.7 2.1 15.7 2 14.6 2 12.3 2 10.7 3.4 10.7 6v2.5H8V12h2.7v10H14V12h2.7l.4-3.5z%22/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8zm-1.1 16.2h1.7L7.4 4.7H5.6z%22/%3E%3C/svg%3E");
  --icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4v11H3zM9.5 9.75h3.8v1.5h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.65 4.77 6.1v5.45h-4v-4.83c0-1.15-.02-2.63-1.6-2.63-1.6 0-1.85 1.25-1.85 2.55v4.91h-4z%22/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-3.5-3.5%22/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E");
  --icon-file: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3C/svg%3E");
}

/* Iconos heredados del contenido migrado (Glyphicons / Font Awesome) */
.glyphicon,
.fa {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon-phone) center / contain no-repeat;
  mask: var(--icon-phone) center / contain no-repeat;
}

/* Glyphicons usados como viñeta en el texto: triángulo naranja */
.glyphicon:not(.glyphicon-phone-alt):not(.glyphicon-earphone) {
  width: 0.65em;
  height: 0.75em;
  margin-inline-end: 0.35em;
  vertical-align: 0;
  background: var(--color-primary);
  -webkit-mask: none;
  mask: none;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.fa-facebook {
  -webkit-mask-image: var(--icon-facebook);
  mask-image: var(--icon-facebook);
}
.fa-twitter {
  -webkit-mask-image: var(--icon-x);
  mask-image: var(--icon-x);
}
.fa-linkedin {
  -webkit-mask-image: var(--icon-linkedin);
  mask-image: var(--icon-linkedin);
}
.fa-lg {
  width: 1.25em;
  height: 1.25em;
}

/* ------------------------------------------------------------------ *
 * Botones
 * ------------------------------------------------------------------ */
.button,
.form-submit,
.webform-button--submit,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.65rem 1.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--transition),
    transform var(--transition);
}

.button:hover,
.form-submit:hover,
input[type="submit"]:hover {
  background: var(--color-primary-strong);
  color: #fff;
}

.button:active,
.form-submit:active {
  transform: translateY(1px);
}

.button--secondary {
  background: var(--color-navy);
}

.button--secondary:hover {
  background: var(--color-navy-strong);
}

/* ------------------------------------------------------------------ *
 * Cabecera
 * ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  transition: box-shadow var(--transition);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-height);
  padding-block: var(--space-3);
}

.site-header__brand {
  flex: 0 0 auto;
  margin-inline-end: auto;
}

.branding__logo img {
  width: clamp(150px, 12vw + 80px, 200px);
  height: auto;
}

.branding__name {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
  text-decoration: none;
}

.site-header__search {
  flex: 0 1 280px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__actions > .region {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__actions .block__title,
.site-header__search .block__title {
  display: none;
}

/* Buscador */
.search-block-form form,
form.search-block-form {
  position: relative;
  display: flex;
  margin: 0;
}

.search-block-form .form-item {
  flex: 1;
  margin: 0;
}

.search-block-form input[type="search"] {
  width: 100%;
  height: 42px;
  padding: 0 2.75rem 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  font-size: var(--text-sm);
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

.search-block-form input[type="search"]:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.search-block-form .form-actions {
  position: absolute;
  inset: 0 0 0 auto;
  margin: 0;
}

.search-block-form .form-submit {
  width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: transparent;
  font-size: 0;
  -webkit-mask: none;
  position: relative;
}

.search-block-form .form-actions::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  background: var(--color-text-muted);
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
  pointer-events: none;
}

/* "¿Te llamamos nosotros?" */
#block-tuasesorlegal-callback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-muted);
}

#block-tuasesorlegal-callback p {
  margin: 0;
}

#block-tuasesorlegal-callback .field--name-body,
#block-tuasesorlegal-callback .field--name-body > p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
}

#block-tuasesorlegal-callback a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition);
}

#block-tuasesorlegal-callback a:hover {
  background: var(--color-primary);
}

/* Teléfono */
#block-tuasesorlegal-phone h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#block-tuasesorlegal-phone .glyphicon {
  color: var(--color-primary);
}

/* Selector de idioma */
.language-switcher-language-url ul,
#block-tuasesorlegal-language ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

#block-tuasesorlegal-language a {
  display: block;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-decoration: none;
}

#block-tuasesorlegal-language a.is-active,
#block-tuasesorlegal-language li.is-active a {
  background: var(--color-primary);
  color: #fff;
}

/* Botón de menú (móvil) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before {
  top: -6px;
}
.nav-toggle__icon::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ------------------------------------------------------------------ *
 * Menú principal
 * ------------------------------------------------------------------ */
.site-nav {
  background: var(--color-primary);
  color: #fff;
}

.main-nav__list,
.main-nav__submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__list {
  display: flex;
  flex-wrap: wrap;
}

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

.main-nav__link {
  display: block;
  padding: 0.95rem clamp(0.55rem, 0.2rem + 0.6vw, 1rem);
  white-space: nowrap;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--transition);
}

/* Hover y página activa: mismo fondo, sin subrayado */
.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__item:not(.main-nav__item--parent) > .main-nav__link.is-active,
.main-nav__list > .is-active-trail > .main-nav__link {
  color: #fff;
  background: rgb(0 0 0 / 0.1);
}

.main-nav__toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-start: -0.6rem;
  margin-inline-end: 0.2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
}

.main-nav__toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: rotate var(--transition);
}

.main-nav__toggle[aria-expanded="true"]::before {
  rotate: 180deg;
}

.main-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 260px;
  padding: var(--space-2);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition:
    opacity var(--transition),
    translate var(--transition),
    visibility var(--transition);
}

.main-nav__item--parent:is(:hover, :focus-within) > .main-nav__submenu,
.main-nav__toggle[aria-expanded="true"] + .main-nav__submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.main-nav__submenu .main-nav__link {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.main-nav__submenu .main-nav__link:hover,
.main-nav__submenu .main-nav__link:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* Móvil / tableta */
@media (max-width: 960px) {
  :root {
    --header-height: 64px;
  }

  .site-header__bar {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .nav-toggle {
    display: inline-flex;
    order: 2;
  }

  .site-header__brand {
    order: 1;
  }

  .site-header__actions > .region {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .site-header__actions {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  #block-tuasesorlegal-callback {
    display: none;
  }

  .site-header__search {
    order: 4;
    flex: 1 1 100%;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    display: block;
  }

  .main-nav__list {
    flex-direction: column;
    padding-block: var(--space-2);
  }

  .main-nav__item {
    flex-wrap: wrap;
  }

  .main-nav__link {
    flex: 1;
    font-size: var(--text-sm);
  }

  .main-nav__toggle {
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .main-nav__submenu {
    position: static;
    width: 100%;
    display: none;
    min-width: 0;
    margin-bottom: var(--space-2);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
  }

  .main-nav__item--parent:is(:hover, :focus-within) > .main-nav__submenu {
    display: none;
  }

  .main-nav__toggle[aria-expanded="true"] + .main-nav__submenu {
    display: block;
  }
}

/* ------------------------------------------------------------------ *
 * Slider de portada
 * ------------------------------------------------------------------ */
.front-hero .block,
.front-hero .field,
.front-hero .field__item,
.front-hero p {
  margin: 0;
}

.front-hero .block__title {
  display: none;
}

.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-strong);
  color: #fff;
  isolation: isolate;
}

.hero-slider__track {
  display: grid;
}

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(380px, 32vw + 200px, 560px);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 700ms ease,
    visibility 700ms ease;
}

.hero-slide.is-active,
.hero-slider:not(.is-ready) .hero-slide:first-child {
  opacity: 1;
  visibility: visible;
}

.hero-slide__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.04;
  transition: scale 7s ease-out;
}

.hero-slide.is-active .hero-slide__img {
  scale: 1;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgb(8 42 74 / 0.92) 0%,
      rgb(8 42 74 / 0.75) 40%,
      rgb(8 42 74 / 0.25) 75%,
      rgb(8 42 74 / 0.1) 100%
    ),
    linear-gradient(0deg, rgb(8 42 74 / 0.45) 0%, transparent 35%);
}

.hero-slide__content {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding-block: var(--space-12) calc(var(--space-12) + 3rem);
}

.hero-slide__content > * {
  max-width: 38rem;
}

.hero-slide__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-slide__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-3xl);
  color: #fff;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
}

.hero-slide__text {
  margin-bottom: var(--space-6);
  font-size: var(--text-lg);
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

.hero-slider__controls {
  position: absolute;
  inset: auto 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.hero-slider__dots {
  display: flex;
  gap: var(--space-2);
}

.hero-slider__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.55);
  transition:
    background-color var(--transition),
    width var(--transition);
}

.hero-slider__dot[aria-current="true"] {
  width: 54px;
  background: var(--color-primary);
}

.hero-slider__arrows {
  display: flex;
  gap: var(--space-2);
}

.hero-slider__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  backdrop-filter: blur(6px);
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.hero-slider__arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.hero-slider__arrow::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

.hero-slider__arrow--prev::before {
  rotate: 180deg;
}

/* ------------------------------------------------------------------ *
 * Secciones de portada
 * ------------------------------------------------------------------ */
.section .block__title {
  margin-bottom: var(--space-8);
  text-align: center;
  font-size: var(--text-2xl);
}

.section .block__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: var(--space-4) auto 0;
  border-radius: 2px;
  background: var(--color-primary);
}

.section--intro {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.section--intro strong {
  color: var(--color-navy-strong);
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Tarjetas (listados)
 * ------------------------------------------------------------------ */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.card:has(a:hover),
.card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.card__media {
  /* aspect-ratio: 4 / 3; */
  overflow: hidden;
  background: var(--color-surface-muted);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 500ms ease;
}

.card:has(a:hover) .card__media img {
  scale: 1.05;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}

.card__date {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}

.card__title {
  margin: 0;
  font-size: var(--text-lg);
}

.card__title a {
  color: var(--color-navy-strong);
  text-decoration: none;
}

.card__title a::after {
  /* toda la tarjeta clicable */
  content: "";
  position: absolute;
  inset: 0;
}

.card {
  position: relative;
}

.card__files,
.card__more,
.card__text a {
  position: relative;
  z-index: 1;
}

.card__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.card__text > :last-child {
  margin-bottom: 0;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.card__more::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: translate var(--transition);
}

.card__more:hover::after {
  translate: 3px 0;
}

/* Servicios de portada: tarjeta compacta centrada */
.card--servicios .card__body {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.card--servicios .card__title {
  font-size: var(--text-base);
  font-weight: 600;
}

/* Detalle de servicios ("otros"): columnas de texto con viñetas */
.card--otros {
  border: 0;
  border-top: 3px solid var(--color-primary);
  border-radius: 0;
  background: transparent;
}

.card--otros:has(a:hover),
.card--otros:focus-within {
  transform: none;
  box-shadow: none;
}

.card--otros .card__body {
  padding: var(--space-6) 0 0;
}

.card--otros .card__text {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.card--otros .card__text p,
.card--otros .card__text li {
  position: relative;
  padding-inline-start: 1.4rem;
}

.card--otros .card__text ul {
  padding: 0;
  list-style: none;
}

.card--otros .card__text p:has(.glyphicon),
.card--otros .card__text li:has(.glyphicon) {
  padding-inline-start: 0;
}

.card--otros .card__text p:has(.glyphicon)::before,
.card--otros .card__text li:has(.glyphicon)::before {
  display: none;
}

.card--otros .card__text p::before,
.card--otros .card__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7em;
  height: 0.7em;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.card--otros .card__text img[src*="arrow"] {
  display: none;
}

/* Archivos adjuntos */
.file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.file::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: var(--color-primary);
  -webkit-mask: var(--icon-file) center / contain no-repeat;
  mask: var(--icon-file) center / contain no-repeat;
}

.file > span {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Páginas interiores
 * ------------------------------------------------------------------ */
.page-hero {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: linear-gradient(
    120deg,
    var(--color-navy-strong) 0%,
    var(--color-navy) 60%,
    #12507f 100%
  );
  color: #fff;
}

.page-hero h1,
.page-hero .page-title {
  margin: 0;
  color: #fff;
  font-size: var(--text-2xl);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--space-2);
  opacity: 0.6;
}

.breadcrumb a {
  color: rgb(255 255 255 / 0.85);
}

.prose {
  max-width: 75ch;
}

.prose img {
  border-radius: var(--radius-sm);
}

.node--view-mode-full .field--type-image {
  margin-bottom: var(--space-6);
}

.node--view-mode-full .field--type-image img {
  border-radius: var(--radius);
}

.node--view-mode-full .field--type-file {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
  background: var(--color-primary-soft);
}

.field__label {
  font-weight: 600;
  color: var(--color-navy-strong);
}

/* Pestañas de administración */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

.tabs a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-muted);
}

.tabs a.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* Mensajes de Drupal */
[data-drupal-messages] > div,
.messages {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.messages--error {
  border-color: #c62828;
  background: #fdecea;
}

.messages--warning {
  border-color: #f9a825;
  background: #fff8e1;
}

/* Paginador */
.pager__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

.pager__item a,
.pager__item.is-active {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  text-decoration: none;
}

.pager__item a {
  color: var(--color-text);
}

.pager__item a:hover {
  background: var(--color-primary-soft);
}

.pager__item.is-active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Formularios (webform, búsqueda, usuario)
 * ------------------------------------------------------------------ */
.form-item {
  margin-bottom: var(--space-4);
}

.form-item label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy-strong);
}

.form-item label.option {
  display: inline;
  font-weight: 400;
}

.form-text,
.form-email,
.form-tel,
.form-url,
.form-number,
.form-date,
.form-search,
.form-textarea,
.form-select {
  width: 100%;
  max-width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.form-text:focus,
.form-email:focus,
.form-tel:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-required::after {
  content: " *";
  color: var(--color-primary-strong);
}

.description,
.form-item__description {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.webform-submission-form {
  max-width: 680px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */
.site-footer {
  margin-top: auto;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer h2,
.site-footer .block__title {
  display: none;
}

.site-footer__main {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  padding-block: var(--space-12) var(--space-8);
  text-align: center;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__services a {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__social ul {
  gap: var(--space-3);
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--radius-pill);
  transition:
    background-color var(--transition),
    color var(--transition);
}

.site-footer__social a:hover {
  background: #fff;
  color: var(--color-primary);
  text-decoration: none;
}

.site-footer__legal a {
  font-size: var(--text-xs);
  opacity: 0.9;
}

.site-footer__bottom {
  padding-block: var(--space-6);
  background: var(--color-primary-strong);
  text-align: center;
}

.site-footer__bottom h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  color: #fff;
}

.site-footer__bottom p {
  margin: 0;
  font-size: var(--text-xs);
  opacity: 0.85;
}

/* ------------------------------------------------------------------ *
 * Páginas de contenido (servicios, páginas, actualidad)
 * ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(242 107 29 / 0.35), transparent 65%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.7);
}

.breadcrumb a {
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.layout--with-sidebar {
  align-items: start;
}

@media (min-width: 960px) {
  .layout--with-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .layout__sidebar {
    position: static;
  }
}

.node--view-mode-full .node__content {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.node--view-mode-full .field--type-image {
  order: -1;
  margin: 0 0 var(--space-8);
}

.node--view-mode-full .field--type-image img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.node--view-mode-full .field--name-body {
  font-size: var(--text-sm);
  line-height: 1.75;
}

/* Tipografía del texto largo */
.prose h2,
.node__content h2 {
  margin-top: var(--space-12);
  font-size: var(--text-xl);
}

.prose h3,
.node__content h3 {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
}

.node__content > :first-child h2:first-child {
  margin-top: 0;
}

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

.node__content ul li {
  position: relative;
  margin-bottom: var(--space-2);
  padding-inline-start: 1.5rem;
}

.node__content ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.55em;
  width: 0.6em;
  height: 0.6em;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.node__content ol {
  padding-inline-start: 1.4rem;
}

.node__content ol li::marker {
  color: var(--color-primary-strong);
  font-weight: 700;
}

.node__content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-primary-soft);
  font-size: var(--text-lg);
  color: var(--color-navy-strong);
}

.node__content strong {
  color: var(--color-navy-strong);
}

.node__content .field--type-datetime,
.node__content .field--type-entity-reference {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.node__content .field--type-file .field__item + .field__item {
  margin-top: var(--space-2);
}

.node__content .field--type-file a {
  font-weight: 600;
}

/* Tarjeta de contacto lateral */
.cta-card {
  padding: var(--space-8);
  border-radius: var(--radius);
  background: linear-gradient(
    150deg,
    var(--color-navy-strong),
    var(--color-navy)
  );
  color: rgb(255 255 255 / 0.85);
  font-size: var(--text-sm);
  box-shadow: var(--shadow);
}

.cta-card__eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cta-card__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
  color: #fff;
}

.cta-card__phone a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.cta-card__phone .glyphicon {
  color: var(--color-primary);
}

.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
}

.cta-card__actions .button {
  flex: 1 1 auto;
}

.cta-card .button--secondary {
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
}

.cta-card .button--secondary:hover {
  background: #fff;
  color: var(--color-navy);
}

.layout__sidebar .block + .block {
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------------ *
 * Listado de Actualidad legislativa (tarjeta horizontal)
 * ------------------------------------------------------------------ */
.view-id-actualidad.view-display-id-block_1 .view-content {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .view-id-actualidad.view-display-id-block_1 .card--actualidad {
    display: grid;
    grid-template-columns: minmax(180px, 34%) 1fr;
  }

  .view-id-actualidad.view-display-id-block_1 .card--actualidad .card__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 200px;
  }

  .view-id-actualidad.view-display-id-block_1 .card--actualidad .card__media a,
  .view-id-actualidad.view-display-id-block_1
    .card--actualidad
    .card__media
    .field,
  .view-id-actualidad.view-display-id-block_1
    .card--actualidad
    .card__media
    .field__item {
    display: block;
    height: 100%;
  }
}

.card--actualidad .card__title {
  font-size: var(--text-lg);
  line-height: 1.3;
}

.card--actualidad .card__title a:hover {
  color: var(--color-primary-strong);
}

.card--actualidad .card__date {
  display: inline-flex;
  width: fit-content;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
}

.card--actualidad .card__files {
  font-size: var(--text-sm);
}

/* Paginador de los listados */
.pager {
  margin-top: var(--space-8);
}

/* ------------------------------------------------------------------ *
 * Página de contacto: formulario + columna de contacto
 * ------------------------------------------------------------------ */
:root {
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22m3 7 9 6 9-6%22/%3E%3C/svg%3E");
  --icon-pin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z%22/%3E%3Ccircle cx=%2212%22 cy=%229.5%22 r=%222.5%22/%3E%3C/svg%3E");
  --icon-callback: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6M21 3l-7 7%22/%3E%3Cpath d=%22M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2%22/%3E%3C/svg%3E");
}

.page-node-type--webform .layout--with-sidebar {
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}

@media (min-width: 960px) {
  .page-node-type--webform .layout--with-sidebar {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.webform-submission-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
  max-width: none;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.webform-submission-form > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.webform-submission-form > .tal-half {
  grid-column: auto;
}

@media (max-width: 640px) {
  .webform-submission-form > .tal-half {
    grid-column: 1 / -1;
  }
}

.tal-form-intro {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.webform-submission-form .form-item {
  margin-bottom: var(--space-2);
}

.webform-submission-form .form-text,
.webform-submission-form .form-email,
.webform-submission-form .form-select,
.webform-submission-form .form-textarea {
  min-height: 48px;
  border-color: #d5dbe1;
  background: var(--color-surface-muted);
}

.webform-submission-form .form-text:focus,
.webform-submission-form .form-email:focus,
.webform-submission-form .form-select:focus,
.webform-submission-form .form-textarea:focus {
  background: var(--color-surface);
}

.webform-submission-form .form-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: var(--icon-chevron);
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 14px;
}

.webform-submission-form .form-textarea {
  resize: vertical;
}

.tal-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  font-size: var(--text-sm);
}

.tal-privacy input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--color-primary);
}

.tal-privacy label {
  margin: 0;
  font-weight: 500;
  color: var(--color-text);
}

.webform-submission-form .form-actions {
  margin-top: var(--space-4);
}

.webform-submission-form .webform-button--submit {
  min-width: 220px;
  min-height: 52px;
  font-size: var(--text-base);
  box-shadow: 0 8px 20px -8px rgb(242 107 29 / 0.6);
}

.webform-confirmation {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: calc(var(--radius) + 4px);
  background: var(--color-primary-soft);
  border: 1px solid rgb(242 107 29 / 0.25);
}

.webform-confirmation h3 {
  color: var(--color-primary-strong);
}

.form-item--error-message,
.form-item .error + .form-item--error-message {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: #c62828;
}

.form-item input.error,
.form-item select.error,
.form-item textarea.error {
  border-color: #c62828;
}

/* Columna de contacto */
.contact-info {
  padding: var(--space-8);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(
    160deg,
    var(--color-navy-strong),
    var(--color-navy)
  );
  color: rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow);
}

.contact-info__title {
  margin-bottom: var(--space-6);
  font-size: var(--text-xl);
  color: #fff;
}

.contact-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.contact-item + .contact-item {
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.contact-item__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(242 107 29 / 0.15);
}

.contact-item__icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  -webkit-mask: var(--icon-phone) center / contain no-repeat;
  mask: var(--icon-phone) center / contain no-repeat;
}

.contact-item--mail .contact-item__icon::before {
  -webkit-mask-image: var(--icon-mail);
  mask-image: var(--icon-mail);
}
.contact-item--call .contact-item__icon::before {
  -webkit-mask-image: var(--icon-callback);
  mask-image: var(--icon-callback);
}
.contact-item--map .contact-item__icon::before {
  -webkit-mask-image: var(--icon-pin);
  mask-image: var(--icon-pin);
}

.contact-item__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

.contact-item__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  word-break: break-word;
}

.contact-item__value:hover,
.contact-item__link:hover {
  color: var(--color-primary);
}

.contact-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.contact-item__link::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

.contact-item__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.6);
}

/* ------------------------------------------------------------------ *
 * Klaro (banner de cookies) con los colores de la marca
 * ------------------------------------------------------------------ */
.klaro {
  --font-family: var(--font-sans);
  --green1: var(--color-primary);
  --green2: var(--color-primary-strong);
  --green3: var(--color-primary);
  --blue1: var(--color-navy);
  --blue2: var(--color-navy-strong);
  --dark1: var(--color-navy-strong);
  --dark2: #1b4470;
  --dark3: #2a5683;
  --border-radius: 12px;
  --button-text-color: #fff;
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.klaro .cm-btn {
  border-radius: var(--radius-pill) !important;
  padding: 0.55rem 1.1rem !important;
  font-weight: 600;
}

.layout__sidebar,
.layout__sidebar .block,
.contact-info,
.cta-card {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* ------------------------------------------------------------------ *
 * Acceso a clientes (formulario HTML del contenido migrado, #login)
 * Solo aspecto: sobrescribe los estilos en línea del D7.
 * ------------------------------------------------------------------ */
form#login.login-form {
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 4px);
  background: var(--color-surface) !important;
  box-shadow: var(--shadow);
  text-align: left !important;
}

form#login fieldset {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0 clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 0;
  min-width: 0;
}

form#login fieldset > span.title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.5rem)) var(--space-2);
  padding: var(--space-6) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(
    135deg,
    var(--color-navy-strong),
    var(--color-navy)
  );
  color: #fff !important;
  font-size: var(--text-xl);
  font-weight: 700;
  text-align: left !important;
}

form#login fieldset > span.title::before {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary)
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 11V7a4 4 0 0 1 8 0v4%22/%3E%3C/svg%3E")
    center / 20px no-repeat;
}

form#login .row {
  display: grid !important;
  gap: var(--space-2);
  margin: 0 !important;
}

form#login .row > [class*="col-"] {
  flex: none;
  width: auto;
  text-align: left !important;
}

form#login .row .title {
  color: var(--color-navy-strong) !important;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left !important;
}

form#login input[type="text"],
form#login input[type="password"] {
  width: 100%;
  min-height: 50px;
  margin: 0 !important;
  padding: 0.7rem 1rem;
  border: 1px solid #d5dbe1;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: var(--text-base);
  color: var(--color-text);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background-color var(--transition);
}

form#login input[type="text"]:focus,
form#login input[type="password"]:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

form#login input[type="submit"] {
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-2);
  font-size: var(--text-base);
  box-shadow: 0 8px 20px -8px rgb(242 107 29 / 0.6);
}

/* Submenú: el activo con el mismo estilo que su hover */
.main-nav__submenu .main-nav__link.is-active,
.main-nav__submenu .is-active-trail > .main-nav__link {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}