/* Capa `components`: la declara este mismo archivo. Antes se la asignaba el
   `@import ... layer(components)` de main.css; ahora cada hoja se encola por
   separado para que descarguen en paralelo. Ver inc/enqueue.php. */
@layer components {
  /* ==========================================================================
   PARTIALS — Header, Nav (menú móvil multinivel), Footer, Contacto, Redes.
   Extraído de los <style> de headers/Default.astro, Nav.astro y footers/Default.astro.
   Sustituciones respecto al original:
     · @media (--nav-movil)   → @media (max-width: 1379.98px)
     · @media (--nav-desktop) → @media (min-width: 1380px)   (web.json → breakpointMovil)
     · el reset `button {}` del nav se acota a `.nav button`.
   Sin @layer: gana a las capas base, igual que los <style> de componente en Astro.
   ========================================================================== */

  /* =========================== HEADER =========================== */
  .header {
    color: var(--color-base-content);
    background: var(--color-base-100);
  }
  .header--sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    z-index: 4;
    transition: box-shadow 250ms ease;
  }
  .header--sticky.--is-active {
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
  }
  .header--sticky.--is-active .header__logo img {
    width: calc(var(--width-logo) * 0.87);
  }
  .header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background: transparent;
    color: #fff;
    transition:
      background 300ms ease,
      color 300ms ease,
      box-shadow 250ms ease;
  }
  .header--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    );
    transition: opacity 300ms ease;
  }
  .header--overlay.--is-active::before {
    opacity: 0;
  }
  .header--overlay.--is-active {
    background: var(--color-base-100);
    color: var(--color-base-content);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
  }
  .header--overlay.--is-active .header__logo img {
    width: calc(var(--width-logo) * 0.87);
  }
  /* Logo alternativo del modo overlay (web.json → headerOverlay.logo): visible solo
   mientras el header está transparente sobre el hero. El swap se limita a
   .header--overlay-logo (solo se pinta cuando hay logo alternativo configurado). */
  .header__logo-overlay {
    display: none;
  }
  .header--overlay-logo.header--overlay:not(.--is-active)
    .header__logo
    img:not(.header__logo-overlay) {
    display: none;
  }
  .header--overlay-logo.header--overlay:not(.--is-active)
    .header__logo-overlay {
    display: block;
  }
  /* Sin logo alternativo configurado: se blanquea el normal con un filtro (vale
   para logos monocromos sobre un hero oscuro). Equivale al
   `:not(:has(.header__logo-img--overlay))` de Astro, aqui via la clase que ya
   marca el header cuando SI hay logo de overlay. */
  .header--overlay:not(.--is-active):not(.header--overlay-logo)
    .header__logo
    img {
    filter: brightness(0) invert(1);
  }

  /* Modo "revelar" (web.json -> headerOverlay.trigger): absolute sobre el hero
   (se va con el) y, al superarlo, fixed bajando deslizandose. La
   transparencia -> solidez la sigue dando --is-active. */
  .header--overlay[data-overlay-trigger="revelar"] {
    position: absolute;
  }
  .header--overlay[data-overlay-trigger="revelar"].--is-active {
    position: fixed;
    animation: header-reveal 350ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* El header entra ya compacto: el logo cambia de tamano de golpe mientras aun
   esta fuera de pantalla, asi no se ve encoger. */
  .header--overlay[data-overlay-trigger="revelar"] .header__logo img {
    transition: none;
  }
  @keyframes header-reveal {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  .header--overlay:not(.--is-active) .header__pre {
    background: transparent;
    border-bottom-color: color-mix(in oklch, #fff 25%, transparent);
  }
  .header--overlay:not(.--is-active)
    .header__pre
    .contact--ghost
    .contact__link,
  .header--overlay:not(.--is-active) .header__pre .social--ghost .social__link {
    background: transparent;
    border-color: color-mix(in oklch, #fff 40%, transparent);
    color: #fff;
  }

  .header__pre {
    display: none;
    background: var(--color-base-200, #f5f5f5);
    border-bottom: 1px solid
      color-mix(in oklch, var(--color-base-content) 8%, transparent);
    font-size: 0.9rem;
  }
  .header__pre-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
  }
  .header__pre-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .header__main {
    padding: 0.6rem var(--padding-h);
  }
  .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .header__logo {
    display: block;
    flex-shrink: 0;
  }
  .header__logo img {
    display: block;
    height: auto;
    width: var(--width-logo);
    transition: width 250ms ease;
  }
  .header__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .nav__contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    align-items: center;
  }

  @media only screen and (max-width: 600px) {
    .header__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      height: 32px;
      width: 32px;
      padding: 0;
    }
    .header__cta i {
      font-size: 0.9em;
      margin: 0;
    }
    .header__cta span {
      display: none;
    }
  }

  /* ── HAMBURGER ── */
  .hamburger {
    cursor: pointer;
    z-index: 1;
    padding: 4px;
    height: 32px;
    width: 32px;
    display: grid;
    place-content: center;
  }
  .hamburger .bar {
    display: block;
    height: 2px;
    width: 26px;
    background: currentColor;
    transition:
      transform 300ms ease,
      width 300ms ease;
  }
  .hamburger .bar.middle {
    margin: 6px auto;
  }
  .hamburger--is-active .top {
    transform: translateY(8px) rotateZ(45deg);
  }
  .hamburger--is-active .bottom {
    transform: translateY(-8px) rotateZ(-45deg);
  }
  .hamburger--is-active .middle {
    width: 0;
  }

  @media only screen and (min-width: 1380px) {
    .header__pre {
      display: block;
    }
    .header__main {
      padding: 0.75rem var(--padding-h);
    }
    /* Reparto de Header.astro: logo | menu centrado | CTA.
     Solo en desktop: por debajo el .nav es fixed (drawer) y sale del flujo. */
    .header__container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }
    .header__logo {
      justify-self: start;
    }
    .header__container > .nav {
      justify-self: center;
    }
    .header__info {
      justify-self: end;
    }
    .nav__contact {
      display: none;
    }
    .hamburger {
      display: none;
    }
  }

  /* =========================== NAV =========================== */
  .nav button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .nav button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .nav {
    --nav-bg: var(--color-base-100);
    --nav-surface: color-mix(
      in oklch,
      var(--color-base-content) 5%,
      transparent
    );
    --nav-surface-hover: color-mix(
      in oklch,
      var(--color-base-content) 9%,
      transparent
    );
    --nav-border: color-mix(
      in oklch,
      var(--color-base-content) 12%,
      transparent
    );
    --nav-divider: color-mix(
      in oklch,
      var(--color-base-content) 8%,
      transparent
    );
    --nav-text-muted: color-mix(
      in oklch,
      var(--color-base-content) 60%,
      transparent
    );
    --nav-text-soft: color-mix(
      in oklch,
      var(--color-base-content) 100%,
      transparent
    );
    --nav-badge-success: #1f7a3b;
    --nav-badge-warning: #8a5a00;
    --nav-badge-danger: #962020;
    --nav-radius: 0.5rem;
    --nav-radius-sm: 8px;
    --nav-radius-pill: 999px;
    --heightNavHead: 100px;
    --heightNavInfo: 56px;
    --nav-slide-duration: 0.35s;
    --nav-slide-ease: cubic-bezier(0.32, 0.72, 0, 1);
    font-weight: 400;
  }
  [data-theme="dark"] .nav {
    --nav-badge-success: #6fdb92;
    --nav-badge-warning: #f2bd63;
    --nav-badge-danger: #f28b8b;
  }
  .nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav__link {
    display: block;
    color: currentColor;
    text-decoration: none;
    font-size: 1em;
  }
  .nav__list--secondary .nav__link {
    text-transform: uppercase;
    font-size: 0.95em;
  }
  .nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav__center {
    display: none;
  }
  @media only screen and (min-width: 1380px) {
    .nav__center {
      display: flex;
      align-items: center;
    }
  }
  .nav__txt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .nav__txt i {
    width: 20px;
    text-align: center;
    font-size: 1.05em;
    flex-shrink: 0;
  }
  .nav__desc {
    display: block;
    flex-basis: 100%;
    font-size: 0.78em;
    color: var(--nav-text-muted);
    line-height: 1.3;
    opacity: 0.95;
  }
  .nav__badge {
    font-size: 0.72em;
    font-weight: var(--bold1, 500);
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--nav-surface);
    color: var(--color-base-content);
    flex-shrink: 0;
    line-height: 1.5;
  }
  .nav__badge--primary {
    background: color-mix(in oklch, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
  }
  .nav__badge--success {
    background: color-mix(in oklch, var(--nav-badge-success) 14%, transparent);
    color: var(--nav-badge-success);
  }
  .nav__badge--warning {
    background: color-mix(in oklch, var(--nav-badge-warning) 14%, transparent);
    color: var(--nav-badge-warning);
  }
  .nav__badge--danger {
    background: color-mix(in oklch, var(--nav-badge-danger) 14%, transparent);
    color: var(--nav-badge-danger);
  }
  .nav__item--has-sub > .nav__submenu.nav__submenu--imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: flex-start;
    grid-gap: 0.75rem;
  }
  .nav__submenu.nav__submenu--imgs .nav__item--has-sub {
    grid-column: -1 / 1;
  }
  .nav__submenu.nav__submenu--imgs
    .nav__item:not(.nav__item--has-sub)
    .nav__link {
    font-size: 0.9em;
  }
  .nav__submenu.nav__submenu--imgs .nav__txt {
    display: block;
    text-align: center;
    margin-top: 0.25rem;
  }

  /* ── MOBILE (≤ 1379.98px) ── */
  @media only screen and (max-width: 1379.98px) {
    .nav {
      position: fixed;
      top: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: min-content min-content 1fr;
      height: 100%;
      overflow-x: hidden;
      z-index: 10;
      background: var(--nav-bg);
      color: var(--color-base-content);
      width: min(100%, 420px);
      text-align: left;
      font-size: 0.95rem;
    }
    .nav--left {
      left: -100%;
      transition: left 400ms ease;
    }
    .nav--right {
      right: -100%;
      transition: right 400ms ease;
    }
    .nav--is-active {
      box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
    }
    .nav--right.nav--is-active {
      right: 0%;
      transition: right 400ms ease;
    }
    .nav--left.nav--is-active {
      left: 0%;
      transition: left 400ms ease;
    }

    .nav__head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1.25rem;
      height: var(--heightNavHead);
      grid-row: 1;
    }
    .nav__head:not(:has(.nav__logo)) {
      justify-content: flex-end;
    }
    .nav__logo {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      aspect-ratio: 1;
      height: var(--heightNavHead);
    }
    .nav__logo img {
      width: 100%;
      display: block;
    }
    .nav__close {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: var(--nav-radius-sm);
      border: 1px solid var(--nav-border);
      color: var(--color-base-content);
      transition:
        background 0.15s ease,
        border-color 0.15s ease;
      margin: 0;
    }
    .nav__close:hover {
      background: var(--nav-surface);
      border-color: transparent;
    }
    .nav__close i {
      font-size: 1.25rem;
    }

    .nav__info {
      height: var(--heightNavInfo);
      display: flex;
      align-items: center;
      padding: 0 1rem;
      background: transparent;
      text-transform: none;
      color: var(--color-base-content);
      overflow: hidden;
      transform: translateX(0);
      transition: transform var(--nav-slide-duration) var(--nav-slide-ease);
      grid-row: 2;
      position: relative;
      z-index: 1;
      border-bottom: 1px solid transparent;
    }
    .nav__info:has(.nav__back--active) {
      border-bottom-color: var(--nav-divider);
    }
    .nav__info:has(.nav__back:not(.nav__back--active)) {
      transform: translateX(100%);
      height: 0;
      transition: transform var(--nav-slide-duration) var(--nav-slide-ease);
    }
    .nav__back {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.4rem 0.85rem 0.4rem 0.4rem;
      border-radius: var(--nav-radius-pill);
      background: var(--nav-surface);
      font-size: 0.9rem;
      font-weight: var(--bold1, 500);
      color: var(--color-base-content);
      transition: background 0.15s ease;
      line-height: 1;
    }
    .nav__back:hover {
      background: var(--nav-surface-hover);
    }
    .nav__back i {
      width: 26px;
      height: 26px;
      font-size: 0.85rem;
      display: grid;
      place-content: center;
      border-radius: 50%;
      background: var(--nav-bg);
      color: var(--color-base-content);
      flex-shrink: 0;
      margin: 0;
    }
    .nav__back span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      max-width: 220px;
    }

    .nav__translate {
      transition: transform var(--nav-slide-duration) var(--nav-slide-ease);
      will-change: transform;
      display: flex;
      flex-direction: column;
      grid-column: 1;
      grid-row: 3;
      position: relative;
    }
    .nav__translate > .nav__list {
      position: relative;
    }
    .nav__list--primary {
      width: 100%;
      padding: 0.5rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav__link {
      padding: 0.65rem 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: var(--nav-radius);
      color: var(--color-base-content);
      transition:
        background 0.15s ease,
        color 0.15s ease;
      font-size: 0.95rem;
      line-height: 1.35;
    }
    .nav__link:hover {
      background: var(--nav-surface);
    }
    .nav__list > .nav__item--selected > .nav__link,
    .nav__list > .nav__item:has(.nav__item--selected) > .nav__link,
    .nav__list
      > .nav__item:has(.nav__item--selected)
      > .nav__submenu
      > .nav__item:has(.nav__item--selected)
      > .nav__link,
    .nav__list
      > .nav__item--has-sub
      > .nav__submenu
      > .nav__item--selected
      > .nav__link {
      background: var(--nav-surface);
      font-weight: var(--bold1, 500);
      color: var(--color-primary);
    }
    .nav__submenu .nav__submenu .nav__item--selected > .nav__link {
      background: var(--nav-surface);
      font-weight: var(--bold1, 500);
      color: var(--color-primary);
    }
    .nav__txt {
      width: 100%;
    }

    .nav__item--has-sub > .nav__link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav__item--has-sub > .nav__link .nav__down {
      width: 28px;
      height: 28px;
      display: grid;
      flex-shrink: 0;
      color: var(--nav-text-soft);
      place-items: center;
      text-align: center;
      font-size: 1em;
      border-radius: var(--nav-radius-sm);
      background: var(--nav-bg);
      transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.25s ease;
    }
    .nav__link:hover .nav__down {
      color: var(--color-base-content);
    }
    .nav__item--has-sub > .nav__link .nav__down .--rotate {
      transform: rotate(180deg);
    }
    .nav__item--has-sub:has(> .nav__submenu[data-mode="accordion"])
      > .nav__link
      .nav__down
      i:before {
      content: "\f107";
    }
    .nav__item--has-sub:has(> .nav__submenu[data-mode="slide"])
      > .nav__link
      .nav__down
      i:before {
      content: "\f105";
    }
    .nav__item--has-sub:has(> .nav__submenu[data-mode="accordion"])
      > .nav__link
      .nav__down
      .--rotate {
      transform: rotate(180deg);
    }
    .nav__item--has-sub:has(> .nav__submenu[data-mode="slide"])
      > .nav__link
      .nav__down
      .--rotate {
      transform: none;
    }
    .nav__item--has-sub > .nav__link .nav__down i {
      transform: translateY(0);
    }

    .nav__item--has-sub:has(> .nav__submenu[data-mode="accordion"]) {
      display: grid;
      grid-template-rows: min-content 0fr;
      transition: grid-template-rows var(--nav-slide-duration)
        var(--nav-slide-ease);
    }
    .nav__item--has-sub:has(
      > .nav__submenu[data-mode="accordion"].nav__submenu--is-active
    ) {
      grid-template-rows: min-content 1fr;
    }
    .nav__submenu[data-mode="accordion"] {
      position: static;
      background: transparent;
      box-shadow: none;
      margin: 0 0 0 1.25rem;
      padding: 0 0 0 0.5rem;
      border-left: 1px solid var(--nav-divider);
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-height: 0;
      overflow: hidden;
      opacity: 1;
      pointer-events: none;
    }
    .nav__submenu[data-mode="accordion"].nav__submenu--is-active {
      pointer-events: auto;
    }
    .nav__list
      > .nav__item--has-sub:not(:has(.nav__submenu--is-active))
      .nav__submenu[data-mode="accordion"],
    .nav__list
      > .nav__item--has-sub
      .nav__item--has-sub:not(:has(.nav__submenu--is-active))
      .nav__submenu[data-mode="accordion"] {
      opacity: 1;
    }
    .nav__submenu[data-mode="accordion"] > .nav__item > .nav__link {
      padding: 0.5rem 0.75rem;
      font-size: 0.92em;
    }
    .nav__submenu[data-mode="accordion"] .nav__submenu[data-mode="accordion"] {
      margin-left: 1rem;
    }

    .nav__badge {
      background: var(--nav-surface);
      color: var(--color-base-content);
      margin-left: auto;
    }
    .nav__item--has-sub > .nav__link .nav__badge {
      margin-left: auto;
      margin-right: 0.25rem;
    }

    .nav__list
      > .nav__item--has-sub:not(:has(.nav__submenu--is-active))
      .nav__submenu[data-mode="slide"],
    .nav__list
      > .nav__item--has-sub
      .nav__item--has-sub:not(:has(.nav__submenu--is-active))
      .nav__submenu[data-mode="slide"] {
      opacity: 0;
      pointer-events: none;
      transition: 0.3s opacity 0s ease-in-out;
    }
    .nav__item--has-sub > .nav__submenu[data-mode="slide"] {
      position: absolute;
      height: 100%;
      z-index: 3;
      box-shadow: none;
      left: 100%;
      top: 0;
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 0.75rem;
      background: var(--nav-bg);
      transition: 0s opacity 0s ease-in-out;
    }
    .nav--is-active
      .nav__submenu--is-active:not(:has(.nav__submenu--is-active))
      > .nav__item
      > .nav__link {
      opacity: 1;
    }
    .nav__list > .nav__item--has-sub > .nav__submenu > .nav__back {
      display: none;
    }

    .nav__details {
      padding: 1rem 1.25rem 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: end;
      gap: 0.75rem;
    }
    .nav__details:not(:empty) {
      border-top: 1px solid var(--nav-divider);
      padding-top: 1rem;
    }
    .nav__details .buttons {
      display: flex;
      justify-content: center;
    }
    .nav__details .buttons ul {
      flex-wrap: wrap;
    }

    .nav__list
      > .nav__item--has-sub
      > .nav__link:not([href="#"]):not([href="javascript:void(0);"]) {
      pointer-events: none;
    }
    .nav__list
      > .nav__item--has-sub
      > .nav__link:not([href="#"]):not([href="javascript:void(0);"])
      .nav__txt {
      pointer-events: auto;
    }
    .nav__list
      > .nav__item--has-sub
      > .nav__link:not([href="#"]):not([href="javascript:void(0);"])
      .nav__down {
      pointer-events: auto;
    }
  }

  /* ── DESKTOP (≥ 1380px) ── */
  @media only screen and (min-width: 1380px) {
    .nav__head,
    .nav__info,
    .nav__details {
      display: none;
    }
    .nav .nav__list--secondary {
      display: none;
    }
    .nav__list {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav__list > .nav__item {
      position: relative;
      margin-left: 0.75rem;
    }
    .nav__link {
      padding: 0.4rem 0.25rem;
      display: inline-flex;
      font-size: 0.95em;
      align-items: center;
      gap: 0.35rem;
      transition: color 0.18s ease;
    }
    .nav__list > .nav__item:hover > .nav__link {
      color: var(--color-primary);
    }
    .nav__item--selected > .nav__link,
    .nav__item:has(.nav__item--selected) > .nav__link {
      color: var(--color-primary);
      font-weight: var(--bold1, 600);
    }
    .nav__txt > .nav__desc {
      display: none;
    }
    .nav__list > .nav__item--has-sub {
      position: relative;
    }
    .nav__item--has-sub > .nav__link {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
    }
    .nav__item--has-sub > .nav__link .nav__down {
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      color: var(--nav-text-muted);
      font-size: 0.85em;
      transition:
        transform 0.2s ease,
        color 0.15s ease;
      background: transparent;
    }
    .nav__list > .nav__item--has-sub:hover > .nav__link .nav__down {
      color: var(--color-primary);
      transform: rotate(180deg);
    }
    .nav__list > .nav__item--has-sub > .nav__link .nav__down i:before {
      content: "\f107";
    }
    .nav__item--has-sub > .nav__link .nav__down .--rotate {
      transform: rotate(180deg);
    }

    .nav__submenu {
      visibility: hidden;
      opacity: 0;
      padding: 0.5rem;
      position: absolute;
      z-index: 3;
      border-radius: var(--nav-radius);
      display: flex;
      flex-direction: column;
      transform: translateY(8px);
      box-shadow:
        0 0 0 1px var(--nav-border),
        0 12px 32px -8px rgba(0, 0, 0, 0.12),
        0 4px 12px -4px rgba(0, 0, 0, 0.08);
      left: 0;
      color: var(--color-base-content);
      gap: 1px;
      top: 100%;
      background: var(--nav-bg);
      text-align: left;
      min-width: 220px;
      pointer-events: none;
      transition:
        transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 240ms ease,
        visibility 0s ease 240ms;
    }
    .nav__submenu.nav__submenu--imgs {
      min-width: 360px;
    }
    .nav__list > .nav__item--has-sub:hover > .nav__submenu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      transition:
        transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 240ms ease;
    }
    .nav__item--has-sub:hover .nav__submenu {
      pointer-events: auto;
    }
    .nav__submenu .nav__link {
      padding: 0.5rem 0.75rem;
      border-radius: var(--nav-radius-sm);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.92em;
      transition:
        background 0.15s ease,
        color 0.15s ease;
    }
    .nav__submenu .nav__link:hover {
      background: var(--nav-surface);
    }
    .nav__submenu .nav__item--selected > .nav__link {
      background: var(--nav-surface);
      color: var(--color-primary);
      font-weight: var(--bold1, 500);
    }
    .nav__submenu .nav__txt {
      flex-wrap: wrap;
    }
    .nav__submenu .nav__txt > .nav__desc {
      display: block;
      flex-basis: 100%;
      font-size: 0.78em;
      color: var(--nav-text-muted);
      margin-top: 2px;
    }

    .nav__submenu .nav__submenu {
      transform: translateX(8px) translateY(0);
      top: 0;
      left: calc(100% + 0.5rem);
      transition:
        transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 240ms ease,
        visibility 0s ease 240ms;
    }
    .nav__submenu .nav__submenu::before {
      content: "";
      position: absolute;
      top: 0;
      left: -0.5rem;
      width: 0.5rem;
      height: 100%;
      background: transparent;
    }
    .nav__submenu .nav__submenu--is-active,
    .nav__submenu .nav__item--has-sub:hover > .nav__submenu {
      visibility: visible;
      opacity: 1;
      transform: translateX(0) translateY(0);
      transition:
        transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 240ms ease;
    }
    .nav__item--has-sub .nav__item {
      margin: 0;
      text-align: left;
      position: relative;
    }
    .nav__item--has-sub .nav__item--has-sub > .nav__link {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .nav__item--has-sub .nav__item:hover > .nav__link,
    .nav__item--has-sub .nav__item--selected > .nav__link {
      color: var(--color-primary);
    }
    .nav__submenu .nav__item--has-sub > .nav__link .nav__down {
      width: 16px;
      height: 16px;
      display: grid;
      color: var(--nav-text-soft);
      place-items: center;
      background: transparent;
      text-align: center;
      margin: 0 0 0 auto;
      font-size: 0.9em;
      transition:
        color 0.15s ease,
        transform 0.2s ease;
    }
    .nav__submenu .nav__item--has-sub:hover > .nav__link .nav__down {
      color: var(--color-primary);
      transform: translateX(2px) rotate(0);
    }
    .nav__submenu .nav__item--has-sub > .nav__link .nav__down i:before {
      content: "\f105";
    }
    .nav__submenu .nav__badge {
      margin-left: auto;
    }
    .header--overlay:not(.--is-active)
      .nav__list
      > .nav__item--has-sub
      > .nav__link
      .nav__down {
      background: transparent;
      color: currentColor;
    }
  }

  /* ── OVERLAY (mobile) ── */
  .header__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9;
  }
  .header__overlay--is-active {
    opacity: 1;
    pointer-events: auto;
  }
  @media (min-width: 1380px) {
    .header__overlay {
      display: none;
    }
  }

  /* =========================== FOOTER =========================== */
  .footer {
    text-align: center;
    background: linear-gradient(var(--color-base-200), var(--color-base-100));
    color: var(--color-base-content);
  }
  .footer__inner {
    margin: 0 auto;
  }
  .footer__info1 {
    padding: min(var(--padding-v), 3rem) var(--padding-h);
  }
  .footer__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
  }
  .footer__title {
    margin: 0 0 0.5rem;
  }
  .footer__blurb {
    max-width: 640px;
    margin: 0 auto 1.25rem;
    opacity: 0.85;
  }
  .footer__list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
  }
  .footer__list li {
    display: inline-block;
    margin: 0.25rem 1rem;
  }
  .footer__list li > i {
    margin-right: 0.4rem;
    color: var(--color-primary);
  }
  .footer__list a {
    color: currentColor;
    text-decoration: none;
  }
  .footer__list a:hover {
    text-decoration: underline;
  }

  /* Barra legal (equivalente a BarraLegal.astro) */
  .barra-legal {
    border-top: 1px solid
      color-mix(in oklch, var(--color-base-300) 10%, transparent);
    padding: 1rem var(--padding-h);
    font-size: 0.85rem;
  }
  .barra-legal a {
    color: inherit;
    text-decoration: none;
  }
  .barra-legal__copy {
    font: normal 12px / 16px Arial;
    text-transform: uppercase;
    opacity: 0.3;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  }
  .barra-legal__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
  }
  .barra-legal__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
  }
  .barra-legal__links a {
    color: currentColor;
    text-decoration: none;
    opacity: 0.8;
  }
  .barra-legal__links a:hover {
    opacity: 1;
    text-decoration: underline;
  }

  /* =========================== DOCUMENTO LEGAL =========================== */
  /* Réplica del <style> scoped de DocumentoLegal.astro. El cuerpo lo formatea el
   servicio (trae su propio <style>); esto solo acota el ancho y el ritmo. */
  .documento-legal {
    line-height: 1.6;
  }
  .documento-legal h2,
  .documento-legal h3 {
    margin-top: 1.75em;
  }
  .documento-legal__vacio {
    text-align: center;
    opacity: 0.7;
    padding: 3rem 0;
  }
  /* Nota de configuración: solo la ve quien puede arreglarlo (ver render.php). */
  .documento-legal__aviso {
    max-width: 60ch;
    margin: -2rem auto 3rem;
    padding: 0.75rem 1rem;
    border: 1px dashed currentColor;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
  }
  .documento-legal__aviso code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  /* =========================== CONTACTO / REDES / IDIOMA ===========================
   Portado 1:1 de los <style> de Contact.astro y RedesSociales.astro.
   Las variantes que usan los partials del tema (--stack, --lg) viven aquí y no en
   el style.css del bloque: ese solo se carga cuando la página inserta el bloque,
   y las cabeceras/pies las piden siempre. */
  .contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
  }
  .contact__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15em;
    border-radius: var(--radius-field, 3px);
    text-decoration: none;
    color: var(--c);
    font-size: 0.95rem;
    line-height: 1;
    transition: opacity 0.2s ease;
  }
  .contact--ghost,
  .contact--bg {
    gap: 0.25rem;
  }
  .contact--ghost .contact__link,
  .contact--bg .contact__link {
    --c: var(--color-base-content);
    background: var(--color-base-100);
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-base-300);
  }
  a.contact__link:hover {
    opacity: 0.8;
  }
  a.contact__link:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 2px;
  }
  .contact__link i {
    font-size: 0.95em;
  }

  /* Variante: en columna. */
  .contact--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .contact--stack.contact--bg {
    gap: 0.25rem;
  }

  /* Variante: botones con fondo de color. Re-pisa la pastilla de arriba. */
  .contact--bg {
    --c: var(--color-primary);
  }
  .contact--bg .contact__link {
    background: var(--c);
    color: #fff;
  }
  .contact--bg .contact__link:hover {
    opacity: 0.9;
  }

  /* Variante grande. */
  .contact--lg .contact__link {
    font-size: 1.15rem;
    padding: 0.5rem 0.75rem;
  }

  .social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .social__item {
    /* Color de marca por red; fallback al color primario del tema. */
    --c: var(--color-primary);
  }
  .social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    background: var(--c);
    font-size: 1.05rem;
    line-height: 1;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }
  .social__link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
  }
  .social__link:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 2px;
  }

  /* Colores de marca por red (tokens en global.css). Los emiten redes.php y
   blocks/redes-sociales/render.php como modificador del <li>. */
  .social__item--facebook {
    --c: var(--color-facebook);
  }
  .social__item--instagram {
    --c: var(--color-instagram);
  }
  .social__item--linkedin {
    --c: var(--color-linkedin);
  }
  .social__item--youtube {
    --c: var(--color-youtube);
  }
  .social__item--tiktok {
    --c: var(--color-tiktok);
  }
  .social__item--x,
  .social__item--twitter {
    --c: var(--color-x);
  }
  .social__item--whatsapp {
    --c: var(--color-whatsapp);
  }
  .social__item--telegram {
    --c: var(--color-telegram);
  }

  /* Variante: iconos sin fondo (solo color de marca). */
  .social--ghost .social__link {
    background: #fff;
    color: var(--c);
    width: 28px;
    height: 28px;
    font-size: 1rem;
    border: 1px solid var(--color-base-300);
  }
  .social--ghost {
    gap: 0.25rem;
  }
  .social--ghost .social__link:hover {
    transform: translateY(-2px);
    opacity: 1;
  }

  /* Variante grande. */
  .social--lg .social__link {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
  }

  .lang-switcher {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
  }
  .lang-switcher__item a {
    text-decoration: none;
    color: currentColor;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-button);
    font-weight: var(--bold1);
  }
  .lang-switcher__item--active a {
    color: var(--color-primary);
  }

  /* ==========================================================================
   FLOATING CONTACT — botón flotante de contacto
   Copia de los <style> de FloatingContact.astro. Dos estilos: el base
   (botones circulares abajo a la derecha) y el modificador `.scroll`
   (pestañas deslizantes ancladas al lateral), que se elige desde
   empresa.json → floatingContact.clase.
   ========================================================================== */

  /* ── Estilo base: botones circulares ─────────────────────────────────────── */
  .floating-contact {
    position: fixed;
    bottom: 5rem;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 2;
  }

  .floating-contact__btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.25);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
    overflow: hidden;
  }

  .floating-contact__ico {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
  }

  .floating-contact__btn--whatsapp {
    background: var(--color-whatsapp);
  }
  .floating-contact__btn--tel,
  .floating-contact__btn--movil {
    background: var(--color-primary);
  }
  .floating-contact__btn--email {
    background: var(--color-secondary);
  }

  .floating-contact__btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px oklch(0% 0 0 / 0.35);
  }

  .floating-contact__label {
    display: none;
  }

  /* ── Visibilidad automática por scroll ───────────────────────────────────── */
  /* Oculto por defecto; lo revela floating-contact.js al pasar los disparadores
   de `mostrarDesde`. Sin JS el botón no aparece: por eso el parcial solo pone
   `--auto` cuando hay selector. */
  .floating-contact--auto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .floating-contact--auto.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ── Estilo scroll: deslizante desde la derecha ──────────────────────────── */
  .floating-contact.scroll {
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    gap: 6px;
  }

  .floating-contact.scroll .floating-contact__btn {
    border-radius: 8px 0 0 8px;
    background: #fff;
    color: var(--color-base-content);
    box-shadow: -2px 2px 8px oklch(0% 0 0 / 0.15);
    transform: translateX(calc(100% - 42px));
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  @media (hover: hover) {
    .floating-contact.scroll .floating-contact__btn:hover {
      transform: translateX(0);
      box-shadow: -2px 2px 8px oklch(0% 0 0 / 0.15);
    }
  }

  .floating-contact.scroll .floating-contact__ico {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    color: #fff;
  }

  .floating-contact.scroll
    .floating-contact__btn--whatsapp
    .floating-contact__ico {
    background: var(--color-whatsapp);
  }
  .floating-contact.scroll .floating-contact__btn--tel .floating-contact__ico,
  .floating-contact.scroll
    .floating-contact__btn--movil
    .floating-contact__ico {
    background: var(--color-primary);
  }
  .floating-contact.scroll
    .floating-contact__btn--email
    .floating-contact__ico {
    background: var(--color-secondary);
  }

  .floating-contact.scroll .floating-contact__label {
    display: flex;
    align-items: center;
    padding: 0 0.75rem 0 0.5rem;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
  }

  @media (max-width: 600px) {
    .floating-contact.scroll {
      top: auto;
      bottom: 5rem;
      transform: none;
    }
  }
}