/* ═══════════════════════════════════
   PARKING SITE — GEO
   Design line: AP/Reuters clean editorial, deep navy + blue
═══════════════════════════════════ */

/* ─── TOKENS ─────────────────────── */
:root {
  --text: #1a1f2e;
  --text-muted: #475569;
  --text-soft: #64748b;

  --primary-100: #93c5fd;
  --primary-500: #1a4b8c;
  --primary-700: #2563eb;
  --primary-800: #0f1e40;

  --accent-400: #60a5fa;
  --accent-500: #1e3a6e;

  /* First stop of the widget ring gradient — the teal-400 the reference
     sweep opens on, pulled toward our blues so it still reads as one family. */
  --teal-400: #2dd4bf;

  --white: #ffffff;
  --gray-300: #dee2e6;
  --gray-600: #6c757d;

  --background: #f4f6f9;
  --border: #e2e8f0;
  --surface-100: #eff6ff;

  /* Single page-wide light gradient — every section sits on top of this */
  --page-gradient: linear-gradient(165deg, #f3f8ff 0%, #f6f8fc 42%, #e9f0fd 100%);

  --box-shadow-sm: 0 1px 3px 0 rgba(34, 40, 42, 0.1);
  --box-shadow-md: 0 4px 20px 0 rgba(33, 37, 41, 0.05);
  --box-shadow-lg: 0 4px 20px 0 rgba(33, 37, 41, 0.15);

  --font-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --wrap: 1100px;
}

/* ─── BASE RESET ─────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* iOS Safari fix: never overflow-x: hidden on html or body */
html {
  width: 100%;
  background: var(--background);
  font-family: var(--font-body);
}

body {
  width: 100%;
  background: var(--page-gradient) fixed;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* overflow-x containment goes on the inner wrapper only */
.pg-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

/* ─── LOGO ───────────────────────── */
.logo {
  max-width: 120px;
}

.logo a {
  display: flex;
}

/* ═══════════════════════════════════
           NAV
═══════════════════════════════════ */
.site-nav {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.site-nav.scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--box-shadow-sm);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-inner .logo {
  flex-shrink: 0;
  margin-right: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links > a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-links > a:hover {
  background: var(--surface-100);
  color: var(--primary-500);
}

.nav-mobile-header {
  display: none;
}

/* Hamburger */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.mobile-menu-btn span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--primary-800);
}

/* Must sit BELOW .site-nav (z-index 100), not above it. The drawer lives
   inside the nav, and .site-nav is sticky with a z-index, so it opens its
   own stacking context — the drawer's z-index: 200 only ranks it against
   its siblings inside the nav, never against this overlay. At 190 the
   overlay covered the drawer and swallowed every click, including the
   close button. At 90 it dims the page content and leaves the nav and its
   drawer on top and clickable. */
.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 64, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 90;
}

.mobile-menu__overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__close {
  background: none;
  border: 0;
  font-size: 32px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

/* ═══════════════════════════════════
           WIDGET ZONE
═══════════════════════════════════ */
/* The shell ships with no widgets — the CMS drops .item-* blocks into
   .container.main. These rules give whatever lands there the same
   measure and gutters as the rest of the page. */
.home .container.main .item {
  width: 100%;
  max-width: calc(var(--wrap) + 48px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.home .container.main .item:first-of-type {
  margin-top: 52px;
}

/* ═══════════════════════════════════
           AD ZONES
═══════════════════════════════════ */
/* Containment — keeps wide creatives from bleeding out (SOP Bug 9).
   Never set font-size: 0 or line-height: 0 here (SOP Bug 8). */
.ad_code {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: min(100%, calc(var(--wrap) + 48px));
  margin: 40px auto 0;
  padding: 0 24px;
  text-align: center;
}

.ad_code iframe {
  max-width: 100%;
}

/* ═══════════════════════════════════
           FOOTER
═══════════════════════════════════ */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  margin-top: 72px;
  padding: 44px 24px 32px;
}

.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
}

.footer-inner .logo {
  max-width: 120px;
  margin: 0 auto 24px;
}

.footer-links-standard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.footer-links-standard a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.footer-links-standard a:hover {
  color: var(--primary-500);
}

.footer-bottom {
  padding-top: 20px;
}

.footer-copyright {
  font-size: 12px;
  color: var(--text-soft);
}

.site-disclaimer {
  max-width: 640px;
  margin: 12px auto 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ═══════════════════════════════════
           RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 767.98px) {
  /* backdrop-filter, like filter, makes an element the containing block for
     its position: fixed descendants. The drawer lives inside the nav, so with
     the blur on, its top/bottom resolved against the nav's 60px box instead of
     the viewport: the panel came out 60px tall and every link below that was
     clipped out of the layout and unclickable. The blur is desktop-only now;
     the drawer only exists at this width, so nothing is lost. */
  .site-nav {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94);
  }

  .site-nav.scrolled {
    background: var(--white);
  }

  /* With the overlay sitting below the nav, the nav bar is the one strip the
     dim does not reach. Clearing its background while the drawer is open lets
     the dim show through, and fading the logo and burger keeps that strip from
     reading as a leftover bright band. */
  .site-nav:has(.nav-links.mobile-open),
  .site-nav.scrolled:has(.nav-links.mobile-open) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  .site-nav:has(.nav-links.mobile-open) .logo,
  .site-nav:has(.nav-links.mobile-open) .mobile-menu-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .nav-inner {
    gap: 12px;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 86vw);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0 16px 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 200;
    overflow-y: auto;
  }

  .nav-links.mobile-open {
    transform: translateX(0);
  }

  .nav-mobile-header {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }

  .nav-links > a {
    padding: 12px;
    font-size: 15px;
  }

  .home .container.main .item {
    padding: 0 16px;
  }

  .home .container.main .item:first-of-type {
    margin-top: 40px;
  }

  .ad_code {
    padding: 0 16px;
    margin-top: 32px;
  }

  .site-footer {
    margin-top: 48px;
  }
}

/* LAYOUT RESET */
.home .container.main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.container.layout {
  max-width: 100%;
  padding: 0;
}

.container.layout .row.layout {
  margin: 0;
}

.container.layout .row.layout > .cols {
  overflow-x: hidden;
}

.home .container.layout .row.layout > .cols {
  padding: 0;
}

.pages .main-wrapper .container.main {
  padding: 24px 16px;
}

/* FONTS RESET */
.main-paragraph h1,
.main-paragraph h2 {
  font-weight: 700;
  color: var(--text);
}

.main-paragraph h1,
.main-paragraph h2,
.main-paragraph h3,
.main-paragraph p,
.main-paragraph strong {
  color: var(--text);
}

.main-paragraph h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.main-paragraph h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 40px 0 18px;
}

.main-paragraph h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 24px 0 10px;
}

.main-paragraph p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.main-paragraph strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .main-paragraph h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .main-paragraph h2 {
    font-size: 25px;
    margin: 32px 0 16px;
  }

  .main-paragraph h3 {
    font-size: 20px;
    margin: 22px 0 8px;
  }

  .main-paragraph p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* TABLE RESET */
table { margin: 32px 0; }

table th, table td {
  border-color: var(--border) !important;
  padding: 8px 16px !important;
}

table td {
  color: var(--text) !important;
}

table th {
  background: var(--primary-500) !important;
  color: var(--white) !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

table tbody tr:nth-child(even) td {
  background: var(--surface-100) !important;
}

@media (max-width: 992px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    border: 0 !important
  }
}

/* CONTACT US FORM */
#contact-form {
  margin: 45px auto 0;
  max-width: 500px;
}

#contact-form input,
#contact-form textarea {
  flex: 1;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  outline: 0;
  padding: 14px 18px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  min-width: 100%;
}

#contact-form input:active,
#contact-form input:focus,
#contact-form textarea:active,
#contact-form textarea:focus {
  border: 2px solid var(--primary-500);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--gray-600);
}

#contact-form button {
  background: var(--primary-500);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 16px;
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s;
  white-space: nowrap;
  width: 100%;
}

#contact-form button:hover {
  background: var(--accent-500);
}

/* ═══════════════════════════════════
           WIDGETS
═══════════════════════════════════ */

/* IMAGE STYLE RESET */
.item-current-image img {
  box-shadow: none !important;
  border-radius: 4px !important;
  border-color: var(--gray-300) !important;
}

/* SUBLIST */
.item-sublist a {
  width: 100%;
  height: 100%;
}

.item.item-bubbles {
  margin-bottom: 32px;
}

.item-bubbles .row {
  margin: 0;
}

/* Resting state is deliberately quiet: white, one hairline border, no
   shadow. All the colour lives in the hover state.

   Everything that moves here is an animatable property — background-color,
   border-color, colour, transform, box-shadow. Nothing animates padding or
   swaps a background-image, because neither interpolates: padding reflows
   the label mid-transition and a gradient swap lands in one frame. That
   combination is what made the earlier version look like it was stuttering. */
.bubbles-chip {
  align-items: center;
  background-color: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  display: flex;
  font-weight: 500;
  height: 100%;
  padding: 16px 48px 16px 24px;
  position: relative;
  will-change: transform;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

/* Gradient ring, same construction as the sublist cards.
   inset: -1.5px (not 0) because an absolutely positioned child anchors to
   the padding box — at 0 the ring would sit 1.5px inside the chip's own
   border and you would see both. Pulled out by the border width, its outer
   edge lands exactly on the chip's, and the border goes transparent on
   hover so the ring replaces it rather than doubling it. */
.bubbles-chip::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: 1;
  border-radius: 13.5px;
  padding: 2px;
  background: linear-gradient(90deg, var(--teal-400) 0%, var(--primary-700) 50%, var(--primary-500) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* El markup real envuelve la etiqueta en un <span class="bubbles-chip-text">,
   así que el texto puede acompañar a la flecha en el hover — igual que en las
   sublist cards. Sin ese span sería un nodo de texto suelto, imposible de
   transformar por separado. */
.bubbles-chip-text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.bubbles-chip:hover .bubbles-chip-text,
.bubbles-chip:focus .bubbles-chip-text {
  transform: translateX(4px);
}

.bubbles-chip:hover,
.bubbles-chip:focus {
  background-color: var(--surface-100);
  border-color: transparent;
  color: var(--primary-800);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(15, 30, 64, 0.35);
}

.bubbles-chip:hover::before,
.bubbles-chip:focus::before {
  opacity: 1;
}

.bubbles-chip:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px -8px rgba(15, 30, 64, 0.35);
}

.bubbles-link {
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
}

.bubbles-link .bubbles-outer {
  display: block;
  height: 100%;
  padding: 5px;
  max-width: 100%;
}

.sibling.link-button .bubbles-link .bubbles-outer,
.sibling.link-button .bubbles-chip {
  height: auto;
}

.col-gap:has(> .item-bubbles)::before {
  display: none !important;
}

/* Same chevron as the sublist cards — both widgets now use the glyph from
   the reference component. Vertically centred on the chip: top: 50% plus a
   -50% translate, which the hover state has to carry along or the chevron
   drops back to the top edge mid-transition. */
.bubbles-chip::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 14px;
  background-color: var(--gray-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.4 4.4 7 11.2' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.4 4.4 7 11.2' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateY(-50%);
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bubbles-chip:hover::after,
.bubbles-chip:focus::after {
  background-color: var(--primary-700);
  transform: translate(4px, -50%);
}

/* SUBLIST CARDS */
.item-sublist:has(.sublist.card) .row > div {
  padding: 5px !important;
}

/* Gradient-ring card: hairline border at rest, a 2px gradient ring that
   fades in on hover, scale up on hover / down on press, and the title and
   arrow sliding right together. */
.sublist.card {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--box-shadow-sm);
  will-change: transform;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

/* The ring. inset: 0 + padding: 2px + xor-composited masks paint the 2px
   frame only and leave the middle punched out, so it overlays the card
   instead of hiding behind it — which is what a negative z-index layer
   would do here. Being a plain opacity fade, it interpolates cleanly. */
.sublist.card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: 1;
  border-radius: 13.5px;
  padding: 2px;
  background: linear-gradient(90deg, var(--teal-400) 0%, var(--primary-700) 50%, var(--primary-500) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.sublist.card:hover {
  border-color: transparent;
  box-shadow: var(--box-shadow-lg);
  color: var(--primary-500);
  transform: scale(1.02);
}

.sublist.card:hover::before {
  opacity: 1;
}

.sublist.card:active {
  transform: scale(0.98);
}

.sublist.card h5,
.sublist.card .h5 {
  margin-bottom: 0;
  font-weight: 500;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sublist.card:hover h5,
.sublist.card:hover .h5 {
  transform: translateX(4px);
}

.sublist.card .card-body {
  position: relative;
  padding: 16px 40px 16px 16px;
}

/* The chevron from the reference component, verbatim (heroicons
   chevron-right, 20x20 viewBox). Used as a mask rather than an inline
   <svg> for two reasons: the widget markup is CMS-generated so there is
   nowhere to put the tag, and as a mask its colour is background-color
   and therefore animatable — an inline svg with fill="currentColor"
   would work too, but only if the markup were ours to write. */
.sublist.card .card-body::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 14px;
  background-color: var(--gray-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.4 4.4 7 11.2' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.4 4.4 7 11.2' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateY(-50%);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease;
}

.sublist.card:hover .card-body::after {
  transform: translate(4px, -50%);
  background-color: var(--primary-700);
}

/* Spans standing in for block elements inside anchors (SOP Rule 10 / Bug 3) */
.sublist.card,
.sublist.card .card-body,
.sublist.card .h5 {
  display: block;
}

.sublist.card {
  height: 100%;
  background: var(--white);
  color: var(--text);
}

.sublist.card .h5 {
  font-size: 1.25rem;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .row div:has(> .sublist.card) {
    padding: 0 !important;
  }

  /* The rule above only matches when the card is a *direct* child of the
     column. The widget wraps each card in an <a> (required by SOP Rule 10 —
     no <div> inside <a>), so it never fires and the column keeps its 5px,
     leaving the cards indented 5px past the chips above them. Match through
     the anchor instead. */
  .home .container.main .item-sublist .row > div {
    padding: 0 !important;
  }

  .row:has(> div .sublist.card) {
    margin: 0;
    gap: 10px;
  }

  .sublist.card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .sublist.card .card-img-top {
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    width: 120px;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .sublist.card .card-body {
    flex: 1;
    padding: 1rem 40px 1rem 1rem;
  }

  .sublist.card .card-body * {
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sublist.card .card-body h5,
  .sublist.card .card-body .h5 {
    font-size: 16px;
  }
}

/* Gutter cancel — declared after the widgets block so it wins over
   `.item-bubbles .row { margin: 0 }`. Lines each widget's first column
   up with the 24px page margin instead of 17px (bubbles) / -7px
   (sublist) further in. */
.home .container.main .item-bubbles .row {
  margin: 0 -17px;
}

@media (min-width: 768px) {
  .home .container.main .item-sublist .row {
    margin: 0 -5px;
  }
}

/* ═══════════════════════════════════
           DROPDOWN BUTTON
═══════════════════════════════════ */
/* El botón es un <div class="dropdown-sublist"> con un nodo de texto suelto
   dentro, y el CMS le agrega la clase "open" al desplegar. Al ser un div hace
   falta el display: inline-flex explícito para que el globo, el texto y la
   flecha se ordenen en fila. */

.dropdown-sublist {
  position: relative;
  /* display: flex (no inline-flex) para que ocupe todo el ancho del bloque, y
     margin lateral -2px para igualar el desborde de las chips de abajo: la
     .row de Bootstrap aporta -12px de margen, la columna 5px de padding inline
     y .bubbles-outer otros 5px, o sea -12 + 5 + 5 = -2px respecto del wrapper.
     Tomando el ancho del contenedor en vez de un valor fijo, el botón sigue
     coincidiendo con las chips aunque cambie el layout. */
  display: flex;
  margin: 0 -2px;
  align-items: center;
  gap: 10px;
  /* padding lateral igualado al de las chips (24px / 48px) para que los bordes
     y la flecha queden en la misma vertical que las de la lista. El vertical
     sale de igualar los 58px del banner de venta del dominio: el contenido más
     alto es el globo de 20px, así que (58 - 20) / 2 = 19px arriba y abajo. */
  padding: 19px 48px 19px 24px;
  border: none;
  border-radius: 10px;
  background-color: var(--primary-800);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(15, 30, 64, 0.8);
  animation: dropdown-breathe 8s ease-in-out infinite;
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

/* Latido de atención, portado del keyframe "thumb-thumb" de la referencia.
   Todo el pulso ocurre dentro del primer 10% del ciclo — 0.8s de movimiento
   seguidos de 7.2s de reposo absoluto — así llama la atención sin resultar
   insistente. Para espaciarlo más, subir sólo la duración de 8s. */
@keyframes dropdown-breathe {
  0%, 10%, 100% { transform: scale(1); }
  5%            { transform: scale(1.015); }
  7%            { transform: scale(0.99); }
}

/* En cuanto el usuario toca el botón —hover, foco o desplegado— el latido se
   corta: ya cumplió su función de llamar la atención, y a partir de ahí lo
   único que se mueve es el globo. El botón no se desplaza en ninguno de esos
   estados, sólo cambia de color. */
.dropdown-sublist:hover,
.dropdown-sublist:focus,
.dropdown-sublist.open {
  animation: none;
  background-color: var(--primary-700);
  box-shadow: 0 14px 28px -14px rgba(15, 30, 64, 0.9);
  color: var(--white);
}

/* Globo. Va como mask y no como <svg> inline porque el markup del botón lo
   genera el CMS: no hay dónde poner la etiqueta, y como mask su color es
   background-color, que sí transiciona. */
.dropdown-sublist::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M18.2075 6.78485C17.4747 7.46088 16.5544 8.00912 15.5106 8.39144C14.4668 8.77376 13.3244 8.981 12.163 8.99875C11.0016 9.01651 9.84894 8.84434 8.7852 8.49423C7.72146 8.14412 6.77215 7.62447 6.00325 6.97139'/%3E%3Cpath d='M18.3222 17.3235C17.5826 16.608 16.6367 16.0274 15.5553 15.6251C14.474 15.2227 13.2853 15.0091 12.0783 15.0003C10.8713 14.9914 9.67723 15.1875 8.58561 15.5739C7.494 15.9603 6.53311 16.5269 5.77495 17.2314'/%3E%3Cpath d='M12 4V20'/%3E%3Cpath d='M20 12H4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M18.2075 6.78485C17.4747 7.46088 16.5544 8.00912 15.5106 8.39144C14.4668 8.77376 13.3244 8.981 12.163 8.99875C11.0016 9.01651 9.84894 8.84434 8.7852 8.49423C7.72146 8.14412 6.77215 7.62447 6.00325 6.97139'/%3E%3Cpath d='M18.3222 17.3235C17.5826 16.608 16.6367 16.0274 15.5553 15.6251C14.474 15.2227 13.2853 15.0091 12.0783 15.0003C10.8713 14.9914 9.67723 15.1875 8.58561 15.5739C7.494 15.9603 6.53311 16.5269 5.77495 17.2314'/%3E%3Cpath d='M12 4V20'/%3E%3Cpath d='M20 12H4'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: perspective(200px) rotateY(0deg);
}

/* Un giro completo por hover. Va como animation y no como transition porque
   una transición de 0 a 360deg desanda el camino al salir el cursor: se vería
   girando para atrás en vez de completar la vuelta. */
.dropdown-sublist:hover::before,
.dropdown-sublist:focus::before,
.dropdown-sublist.open::before {
  animation: dropdown-globe-spin 0.9s ease-in-out;
}

@keyframes dropdown-globe-spin {
  from { transform: perspective(200px) rotateY(0deg); }
  to   { transform: perspective(200px) rotateY(360deg); }
}

/* Panel desplegado. Sin fondo propio las chips quedaban apoyadas directamente
   sobre el gradiente de la página, flotando sin nada que las agrupara. El
   margen lateral -2px es el mismo del botón, para que los tres bordes
   —botón, panel y chips— caigan en la misma vertical. */
.select-sublist {
  margin: 10px -2px 0;
  padding: 10px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--box-shadow-md);
}

/* Caret: el mismo chevron de los widgets, rotado 90deg para apuntar hacia
   abajo, y 270deg cuando el CMS marca el menú como abierto. */
.dropdown-sublist::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 14px;
  border: none;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.4 4.4 7 11.2' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7.4 4.4 7 11.2' fill='%23000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateY(-50%) rotate(90deg);
  /* 450ms y no 300: el barrido es de 180deg (90 -> 270) y a 300ms se percibe
     casi instantáneo. Comparte la curva con el resto de las interacciones. */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.dropdown-sublist.open::after {
  transform: translateY(-50%) rotate(270deg);
}

/* Un loop infinito de atención es exactamente lo que esta preferencia pide
   silenciar. El giro del globo en hover se mantiene: es respuesta a una
   acción del usuario, no movimiento autónomo. */
@media (prefers-reduced-motion: reduce) {
  .dropdown-sublist {
    animation: none;
  }
}