.svg-masks {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hero-kicker {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #59bbd6;
  font-weight: 900;
  margin: 0 0 16px;
}

/* Scroll-reveal: elements fade/slide in the first time they enter the
   viewport (see reveals() in scripts.js). .reveal-stagger cascades its
   .reveal-item children in with a small delay between each instead of all
   at once. Content stays fully visible without JS or IntersectionObserver
   support (reveals() falls back to revealing everything immediately), and
   prefers-reduced-motion skips the animation outright. */
.reveal {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.reveal-up {
  transform: translateY(28px);
}

.reveal-left {
  transform: translateX(-28px);
}

.reveal-right {
  transform: translateX(28px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.reveal-stagger .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.reveal-stagger.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger .reveal-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

#menu-trigger span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

#menu-trigger .ico-bars {
  position: static;
  filter: none;
  width: 1.3em;
  height: 1.3em;
  color: #1099bf;
}

/* "Menú" stays for screen readers/desktop fallback but is not shown next to
   the icon on mobile; harmless on desktop since #menu-trigger is already
   display:none there. */
#menu-trigger .menu-label {
  display: none;
}

/* Kill the theme's Font Awesome chevron (content:'\f078'/'\f077'): that font
   isn't loaded in this build, and the chevron is now a real
   <svg class="chevron"> in the markup instead. !important because the
   theme's own open-state selector (….-is-open li.-active > a:after) is more
   specific than a plain override and would otherwise win this back, showing
   a blank "missing glyph" box in its place. */
#servicios .botones li > a:after {
  content: none !important;
}

/* The chevron svg is only ever shown on mobile (see media block below); keep
   it fully neutralised by default so it never renders on desktop, where
   nothing else resets the generic svg{position:absolute;...} rule for it. */
#servicios .botones li > a .chevron {
  display: none;
  position: static;
  filter: none;
  margin: 0;
  width: 18px;
  height: 18px;
}

/* .servicio-panel (built by scripts.js) is a mobile-only accordion body;
   desktop keeps showing content through the .servicios-slider carousel
   instead, so the panel must default to hidden here, not just inside the
   mobile media block below — otherwise it renders unstyled and full-height
   inside every desktop tile. */
#servicios .botones li .servicio-panel {
  display: none;
}

/* Mobile services accordion: all 9 titles stay visible and in fixed 1-9
   order at all times (never reordered, never hidden) so a visitor can see
   every service at a glance — only the content below (photo + description)
   is hidden until one of them is tapped, and only that row gets the "open"
   (solid, arrow up) treatment. */
@media (max-width: 1024px) {
  #servicios .botones {
    height: auto;
    overflow: visible;
  }

  #servicios .botones li.-active {
    order: 0;
    height: auto;
  }

  /* The theme's <li> centers a single flex child (the row link) on one
     axis; now that a row can also hold its .servicio-panel, it needs to
     stack them (link on top, panel below) instead of placing both side by
     side. */
  #servicios .botones li {
    flex-direction: column;
    align-items: stretch;
  }

  /* Every row's own border only covers its sides and bottom (the theme
     assumed the active item, with its solid teal fill, would always sit
     first and mask the missing top edge). With a fixed 1-9 order that's no
     longer guaranteed, so the first row needs an explicit top border or the
     list looks like it's missing its top edge whenever item 1 isn't the one
     selected. */
  #servicios .botones li:first-child > a {
    border-top: 2px solid #1099bf;
  }

  #servicios .botones li > a {
    /* The theme's 50px right padding left room for its old Font Awesome
       icon; trim it to match the left side now that the chevron sits flush
       against the edge via justify-content instead of being absolutely
       positioned. */
    padding-right: 20px;
    justify-content: space-between;
  }

  /* The active row (item 1 by default, for slick's sake) stays outlined —
     not solid teal — until the visitor actually taps a service, so nothing
     looks already chosen/expanded before they've interacted with the list. */
  #servicios:not(.servicio-elegido) .botones li.-active > a {
    background-color: #fff;
    color: #1099bf;
  }

  /* Every row gets its own arrow, pointing down by default. Only the row the
     visitor actually picked flips to point up (and to white, matching its
     solid teal fill) once something has genuinely been chosen. */
  #servicios .botones li > a .chevron {
    display: block;
    flex: 0 0 auto;
    margin-left: 12px;
    color: #1099bf;
    transition: transform .2s ease;
  }

  #servicios.servicio-elegido .botones li.-active > a .chevron {
    color: #fff;
    transform: rotate(180deg);
  }

  /* Desktop keeps the shared .servicios-slider pane (slick carousel) below
     the tile grid; mobile uses its own per-row .servicio-panel instead, built
     from that same markup by scripts.js, so it never shows both at once. */
  #servicios .servicios-slider {
    display: none;
  }

  #servicios .botones li .servicio-panel {
    display: none;
    padding: 28px 20px 36px;
    border-left: 2px solid #1099bf;
    border-right: 2px solid #1099bf;
    border-bottom: 2px solid #1099bf;
  }

  #servicios.servicio-elegido .botones li.-active .servicio-panel {
    display: block;
  }

  #servicios .servicio-panel-img {
    display: block;
    width: 200px;
    height: 200px;
    max-width: 60%;
    margin: 0 auto 24px;
    border-radius: 50%;
    object-fit: cover;
  }

  #servicios .servicio-panel .content {
    padding: 0;
  }
}

/* The theme gives every .content inside .servicios-slider a 60px bottom
   margin (meant for a stacked layout); at desktop widths .row.rlt centers
   it as a flex item, and that stray margin throws the centering off by the
   same 60px, pushing the text block visibly above middle. */
#servicios .servicios-slider .servicio-slide .content {
  margin-bottom: 0;
}

#contacto .gform_wrapper .gform_fields {
  list-style: none;
  margin: 0;
  padding: 0;
}

#contacto .gform_wrapper .gfield_label {
  display: block;
  font-weight: 900;
  margin-bottom: 6px;
}

#contacto .gform_wrapper input.large,
#contacto .gform_wrapper textarea {
  width: 100%;
  font: inherit;
}

#contacto .hidden-field {
  display: none;
}

#contacto .gform_wrapper .gform_footer {
  padding: 0 !important;
}

#contacto input[type="tel"] {
  color: #71777b;
  border: 1px solid #f5f7ff;
  background: #f5f7ff !important;
  padding: 10px !important;
  font-size: 14px !important;
  font-weight: 900;
}

#contacto input[type="tel"]:focus {
  border-color: #1099bf;
}

#contacto .gform_button {
  margin: 0 !important;
  text-transform: uppercase;
  padding: 15px 30px;
  transition: all 0.3s ease-out;
  color: #fff;
  font-size: 14px;
  font-family: "Nuckle", sans-serif;
  border: none;
  border-radius: 100px;
  font-weight: 900;
  background-color: #1099bf;
  cursor: pointer;
}

#contacto .gform_button:hover {
  color: #1099bf;
  background-color: #e2f6ff;
}

#contacto .gform_button[disabled] {
  opacity: .6;
  cursor: wait;
}

#contacto .form-status {
  margin: 12px 0 0;
  font-weight: 900;
}

#contacto .form-status.ok {
  color: #1099bf;
}

#contacto .form-status.error {
  color: #f05364;
}

#contacto .dir-container .box h5 a {
  color: inherit;
  text-decoration: none;
}

/* The theme's nav underline grows in 0.3s, which reads a little slow for
   such a small element. */
.site-nav .menu > li > a:after {
  transition: all .15s linear;
}

/* #marcas and #contacto are both plain white and sit back to back, so
   without a seam between them one runs straight into the other. */
#contacto {
  border-top: 1px solid rgba(16, 153, 191, .15);
}

/* A small lift on hover for buttons, gated to real pointer devices so it
   doesn't get stuck "on" after a tap on a touch screen. */
@media (hover: hover) {
  .boton:hover,
  #contacto .gform_button:hover {
    transform: translateY(-2px);
  }

  #servicios .botones li > a {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }

  #servicios .botones li:not(.-active) > a:hover {
    background-color: #f5f7ff;
  }

  #servicios .botones li > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(16, 153, 191, .15);
  }
}

footer .footer-nap {
  text-align: center;
  font-size: 13px;
  margin: 0;
  padding: 12px 16px 24px;
}

footer .footer-nap a {
  color: inherit;
}

.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
}

/* Fewer redundant "Pedir turno" CTAs on mobile: the floating WhatsApp
   button and the per-promo "Consultar" links already cover those spots. */
@media (max-width: 1024px) {
  #servicios .row.mb .medium-7.text-right {
    display: none;
  }

  #servicios .row.mb .medium-5 {
    width: 100%;
  }

  /* #contacto's form sits directly in a .row with no extra .columns wrapper
     around it, unlike every other section, so it's missing the 10px gutter
     those get from that extra layer — add it back so the form lines up with
     the rest of the page instead of crowding the screen edges. */
  #contacto .row {
    padding: 0 10px;
  }
}