/* Velaccio Marketing — velaccio.com — © Velaccio. All rights reserved.
   Provenance ref: VEL-PROV-9K4XQ7M2 (see js/vel-credit.js for what this is) */
:root {
  --vel-provenance: "VEL-PROV-9K4XQ7M2";
  --vel-owner: "Velaccio Marketing";
}

/* =========================================================================
   Velaccio — Responsive layer

   Loaded last, after main-style.css and the section stylesheets, so it can
   correct them without any of them being edited.

   WHY THIS FILE EXISTS

   main-style.css drives the whole composition off the root font size, in vw:

       html                          { font-size: .625vw }             >= 1100
       @media(max-width: 1099px) html{ font-size: 1.3513513514vw }
       @media(max-width:  499px) html{ font-size: 2.6666666667vw }

   Every length in the theme is rem, so a rem is a share of the viewport and
   the page is one fixed composition that is zoomed rather than reflowed. That
   is a legitimate way to build this design, and it is why the desktop holds
   together — but each of those three steps is only correct at the one width
   it was drawn for (2560, 740 and 375 respectively) and drifts everywhere
   else. Worse, the lower two meet at a cliff rather than a crossover: 1rem is
   12.8px at 499px wide and 6.76px at 500px wide.

   Measured body text across the range, before this file:

       320 -> 13.7px    500 -> 10.8px    900 -> 19.5px
       375 -> 16.0px    600 -> 13.0px   1024 -> 22.1px
       480 -> 20.5px    768 -> 16.6px   1099 -> 23.8px

   So the same page was unreadable on a large phone or a small tablet and
   oversized on a big one. That single number is the cause of most of what
   reads as "not responsive" here; the layout itself never overflows.

   WHAT IT DOES

   The vw scaling is kept and bounded, so rem tracks the viewport inside a
   legible band instead of without limit, and the phone step is carried up to
   599px so the cliff disappears. On top of that: floors under the smallest
   labels, tap targets brought to 44px, and the few grids that were still
   two-up on a phone stacked.

   Desktop (>= 1100px) is deliberately untouched.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Root scale
   ------------------------------------------------------------------------- */

/* Phone. The vw term is the theme's own, so 375px — the width this step was
   drawn at — still resolves to exactly 10px and renders as before. The bounds
   only catch the ends: without a floor a 320px phone fell to 8.5px, and
   without a ceiling the step ran to 16px by 599px. */
@media (max-width: 599px) {
  html {
    font-size: clamp(9px, 2.6666666667vw, 11.5px);
  }
}

/* Tablet. Again the theme's own vw term, so 740px is unchanged, but the floor
   stops the collapse below it (600px was 8.1px) and the ceiling stops the
   design inflating into a phone layout blown up across an iPad (1099px was
   14.85px, i.e. 23.8px body copy). The band this leaves — 10.4 to 12px — is
   close to the 768px rendering held steady across the whole tier. */
@media (min-width: 600px) and (max-width: 1099px) {
  html {
    font-size: clamp(10.4px, 1.3513513514vw, 12px);
  }
}


/* -------------------------------------------------------------------------
   2. Media
   The theme caps audio/canvas/video but never img, which is the one that
   actually ships at intrinsic size (the logo is declared 800x133).
   Heights are left alone on purpose: the theme fills most figures with
   position:absolute + object-fit, and height:auto would break those.
   ------------------------------------------------------------------------- */

img {
  max-width: 100%;
}

@media (max-width: 1099px) {

  svg,
  iframe,
  video {
    max-width: 100%;
  }

  /* Grid and flex items default to min-width:auto, which is what turns an
     over-wide child into a row that will not shrink. Nothing currently
     overflows, but the floors added above make items wider than the theme
     ever rendered them, so this is the guard that keeps that true. */
  .container > *,
  .s-inner > *,
  .s-content > * {
    min-width: 0;
  }
}


/* -------------------------------------------------------------------------
   3. Readability floors

   The section stylesheets already carry px floors under their smallest type
   (`max(10px, ...)`), which stops it vanishing but still lands below what is
   comfortable on a phone held at arm's length. These raise the floors on
   small screens only; the calc/vw term keeps winning at larger sizes, so the
   tablet and desktop renderings are unchanged wherever they were already
   above the floor.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  /* Ad formats — card description */
  .fmt-card__desc {
    font-size: max(13.5px, calc(1.05 * var(--fmt-w)));
  }

  /* Story reel — the handle and timestamp on each card */
  .vsr-user {
    font-size: max(13px, calc(var(--vsr-w) * .033));
  }

  .vsr-time {
    font-size: max(12px, calc(var(--vsr-w) * .0307));
  }

  .vsr-sub {
    font-size: max(13.5px, 1.5rem);
  }

  /* What we do — pillar copy and the eyebrow label */
  .wwd-text,
  .wwd-pillar__text {
    font-size: max(13.5px, 1.35rem);
    line-height: 1.55;
  }

  .wwd-label__in {
    font-size: max(13px, 1.4rem);
  }

  /* Booking drawer */
  .vel-book__event-desc,
  .vel-book__event-when,
  .vel-book__label,
  .vel-book__tip {
    font-size: max(13px, 1.3rem);
  }

  .vel-book__event-tz {
    font-size: max(12px, 1.2rem);
  }

  .vel-cal__month {
    font-size: max(14px, 1.4rem);
  }

  .vel-cal__day,
  .vel-cal__day .vel-cal__day-n {
    font-size: max(14px, 1.3rem);
  }

  /* the L M X J V S D column headings */
  .vel-cal__dow span {
    font-size: max(12px, 1.1rem);
  }

  .vel-book__field span {
    font-size: max(13px, 1.3rem);
  }

  /* Theme body copy and footer. The theme states these from deep descendant
     chains, so the selectors below match those chains rather than the class
     on its own — otherwise the 1.2rem original keeps winning on specificity. */
  .resource-text,
  .channel-text {
    font-size: max(13.5px, 1.4rem);
  }

  .footer .footer-copyright .copyright,
  .footer .footer-copyright .legal-nav .menu .menu-item a,
  .footer .footer-top .footer-top-right .footer-contact .contact-items .contact-item .contact-link,
  .footer .footer-top .footer-top-left .footer-nav .menu .menu-item a {
    font-size: max(13.5px, 1.4rem);
  }

  /* Slightly looser leading reads better at small sizes on a handheld. The
     theme sets line-height per block, so this only reaches the copy that
     inherits it. */
  body {
    line-height: 1.5;
  }
}


/* -------------------------------------------------------------------------
   4. Tap targets

   44px minimum, per the WCAG 2.2 target-size guidance the brief asks for.

   Two notes on method. The theme animates several of these links with a pair
   of stacked .line spans inside an overflow:hidden anchor, so an expanded
   ::before hit area would be clipped and vertical padding would drag the
   underline (a:after, bottom:0) away from the text. Where that applies the
   list item carries the height and the anchor is stretched to fill it, which
   grows the target without touching the anchor's own box.

   The story reel already raises its mute button under (pointer: coarse); that
   floor is lifted to 44 rather than replaced, since the reason it is scoped
   to coarse pointers in the first place still holds.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  /* Header: hamburger and logo */
  .header .header-main .header-main-inner .header-nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The negative margin that used to live here was a mistake. It was added to
     stop the enlarged 44px button widening the bar, but the button is
     absolutely the last thing in the row, so it never widened anything — all
     the -1rem did was drag it out to the very edge. Measured on a 375px
     screen: the glyph ended ~5px from the white pill's edge while the logo
     opposite sat 13px in, which is what read as "no padding".

     0.4rem instead, which puts the 44px hit box 4px from the inner edge and
     the 24px glyph inside it ~15px from the pill — near enough symmetric with
     the logo. The hit target keeps its full 44px either way.

     El margen se aplica ahora en los dos estados, abierto y cerrado. Antes
     iba bajo html:not(.nav-active) y al abrir el menú volvía a mandar la
     regla del tema (margin-right:1.5rem; margin-top:.3rem), así que el botón
     daba un salto de 1,1rem a la izquierda y 0,3rem hacia abajo justo cuando
     se convertía en X: de ahí que la X no quedara centrada en la barra. */
  html .header .header-main .header-main-inner .header-nav-toggle {
    margin-right: .4rem;
    margin-top: 0;
  }

  .header .header-main .header-main-inner .header-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }


  /* Header: the slide-out menu */
  .header .header-main .header-nav .nav .menu .menu-item > a {
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  .header .header-main .header-nav .nav .menu .sub-menu .menu-item > a {
    min-height: 44px;
  }

  /* Buttons and social pills */
  .btn,
  .wpcf7-form .wpcf7-submit,
  .social-btn,
  .arrow-btn {
    min-height: 44px;
  }

  .arrow-btn {
    min-width: 44px;
  }

  .header .header-main .header-nav .header-social-buttons .social-btn {
    padding-top: .8rem;
    padding-bottom: .8rem;
  }

  /* Booking drawer: calendar, slots and form controls.
     A 7-column calendar at 320px still leaves ~41px per cell, so the height
     is the binding constraint here, not the width. */
  .vel-cal__day {
    height: auto;
    min-height: 44px;
  }

  .vel-cal__nav {
    min-width: 44px;
    min-height: 44px;
  }

  .vel-book__slot-row > * {
    min-height: 44px;
  }

  .vel-book__field input,
  .vel-book__field select,
  .vel-book__field textarea {
    min-height: 44px;
  }

  .vel-book__cta {
    min-width: 44px;
    min-height: 44px;
  }

  /* Footer link lists. The item carries the height; the anchor fills it, so
     the underline stays on the text. */
  .footer .footer-top .footer-top-left .footer-nav .menu .menu-item {
    height: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .footer .footer-top .footer-top-left .footer-nav .menu .menu-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer .legal-nav a,
  .footer .contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer .legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
  }

  /* Legal pages: the document switcher pills and the contact button. The
     links inside the body copy are left alone — an inline link in a running
     paragraph is the documented exception to the target size rule, and
     padding one would break the line box it sits in. */
  #legal .legal-docs a,
  #legal .legal-content .legal-cta a.legal-cta-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The Instagram post replica.

   These are the one set of controls that must not be resized: the component
   is a facsimile of a UI the reader recognises, and a 44px like button would
   give it away faster than a small one. So the target is grown without the
   button being grown — an absolutely positioned ::after over each control,
   centred on it and sized to 44px. Nothing here clips its overflow, so the
   pseudo-element takes the taps at full size while the button keeps drawing
   at 6px, 26px or 32px as designed.

   `.igp__dot` gets a wider box than tall: the dots sit ~8px apart, so a 44px
   square would have neighbours overlapping and the wrong dot would win. */
@media (pointer: coarse) {

  .igp__more,
  .igp__nav,
  .igp__act,
  .igp__dot {
    position: relative;
  }

  .igp__more::after,
  .igp__nav::after,
  .igp__act::after,
  .igp__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .igp__dot::after {
    width: 20px;
  }
}

/* Touch devices, at any width — a tablet in the 1100px+ band is still a
   finger. Scoped to coarse pointers so the laptop rendering of these
   controls, which the section stylesheets tuned deliberately, is untouched. */
@media (pointer: coarse) {

  .vsr-mute {
    width: max(44px, calc(var(--vsr-w) * .105));
    height: max(44px, calc(var(--vsr-w) * .105));
  }

  /* the dots are 1-2px tall themselves, so the target is all padding; the
     active one draws a taller pill, hence the min-height rather than padding
     alone doing the work for both states */
  .vsr-dot {
    padding: 16px 6px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .testimonials-nav-btn {
    min-width: 44px;
    min-height: 44px;
  }
}


/* -------------------------------------------------------------------------
   5. Layout

   The section stylesheets already collapse their own grids (what-we-do goes
   4 -> 2 -> 1, ce-about 4 -> 2 -> 1, story-reel and showreel go to a column),
   and the booking drawer already drops to a single column under 1099px. What
   is left is the field grid inside it, which stays two-up all the way down,
   and a little breathing room at the container edges.
   ------------------------------------------------------------------------- */

@media (max-width: 599px) {

  /* Two ~150px fields side by side is not a form anyone wants to fill in on a
     phone. The full-width modifiers keep working — 1 / -1 spans one column. */
  .vel-book__fields {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  /* The theme's gutter is 1.6rem, which the bounded root now resolves to
     ~15-18px. Held to a firm 16px so the edge margin does not drift with the
     viewport the way everything else does. */
  .container,
  .container-sm,
  .container-xs {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Section rhythm compresses on a phone: the theme's 4rem is fine, but the
     tighter blocks end up close enough to run together once type is at its
     floor rather than scaled down with them. */
  .section {
    padding-top: 4.8rem;
    padding-bottom: 4.8rem;
  }

  /* Hero statistics.

     The theme lays these out as a nowrap row of flex-basis:0 items, which
     only holds while every figure is a token like "150+" or "3-5x". The
     service pages put a phrase in that slot instead ("Tú cierras", "B2B /
     B2C"), and since the figure also carries white-space:nowrap the row is
     sized by content it is not allowed to break, so the third column runs
     past the viewport — measured at 429px on a 375px screen.

     Wrapping the row and releasing the figure fixes both pages without
     touching the ones where the tokens already fit. */
  #home .section-hero .hero-statistics {
    flex-wrap: wrap;
    gap: 2rem 3.2rem;
  }

  #home .section-hero .hero-statistics .hero-statistic {
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0;
  }

  #home .section-hero .hero-statistics .hero-statistic-figure {
    white-space: normal;
  }
}

/* Tablet: the roster names are set to wrap under 860px, which at this tier
   leaves a very tall stack. Held on one line a little longer. */
@media (min-width: 600px) and (max-width: 860px) {
  .rst-row {
    font-size: clamp(40px, 8.5vw, 72px);
  }
}


/* -------------------------------------------------------------------------
   6. Horizontal overflow guard

   html and body already carry overflow-x:hidden from the theme, which hides a
   spill rather than preventing one. Nothing overflows today and the floors
   above were sized not to change that; this is the belt to that braces.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  .section,
  .footer {
    max-width: 100vw;
  }
}


/* -------------------------------------------------------------------------
   7. Footer top-left: menus on the left, social on the right

   The three menus (Empresa, Servicios, Legal) are wrapped in .footer-nav-group
   and the social buttons — previously alone in .footer-bottom next to the
   logo — sit in .footer-social-col as the right-hand column of the same
   panel. The theme already makes .footer-top-left a flex row on desktop and a
   block stack on mobile, so this layer only sizes the two new children and
   gives the social column the same joined-card treatment the menus get on
   mobile (1px border, -1px top margin).
   ------------------------------------------------------------------------- */

.footer .footer-top .footer-top-left .footer-nav-group {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 4rem;
  min-width: 0;
}

.footer .footer-top .footer-top-left .footer-social-col {
  flex: 0 0 auto;
}

.footer .footer-top .footer-top-left .footer-social-title {
  font-family: "P22 Mackinac", serif;
  color: #62e9e6;
  font-size: 2.3rem;
  line-height: 100%;
  margin-bottom: 2.4rem;
}

/* The theme painted the footer social buttons white only under .footer-bottom,
   and the SVGs carry fill="black" inline, so the set has to be re-inked for
   its new home in .footer-top. */
.footer .footer-top .footer-top-left .footer-social-buttons .social-btn {
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn .icon path {
  fill: #fff;
}

.footer.footer-light .footer-top .footer-top-left .footer-social-buttons .social-btn {
  color: #000;
  box-shadow: inset 0 0 0 1px #000;
}

.footer.footer-light .footer-top .footer-top-left .footer-social-buttons .social-btn .icon path {
  fill: #000;
}

/* The label roll on hover was scoped to .footer-bottom as well; the split is
   done by the footer script for every .social-btn it finds, so only the CSS
   needs restating. */
.footer .footer-top .footer-top-left .footer-social-buttons .social-btn-text {
  display: block;
  position: relative;
  overflow: hidden;
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn-text .line {
  display: block;
  will-change: transform;
  transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1), color .6s cubic-bezier(0.19, 1, 0.22, 1), opacity .6s cubic-bezier(0.19, 1, 0.22, 1);
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn-text .line.line-hover {
  position: absolute;
  top: 110%;
  left: 0;
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn:hover .social-btn-text .line {
  transform: translateY(-110%);
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn:hover .social-btn-text .line:not(.line-hover) {
  opacity: 0;
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn .icon {
  transform: translateZ(0);
}

.footer .footer-top .footer-top-left .footer-social-buttons {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: .8rem;
  padding-top: 0;
}

.footer .footer-top .footer-top-left .footer-social-buttons .social-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: 4.8rem;
}

/* The light footer variants keep their own ink. */
.footer.footer-light .footer-top .footer-top-left .footer-social-title {
  color: #000;
}

@media (min-width: 1100px) {

  /* The theme reserved 10.8rem of right padding for the empty space the
     social column now fills. */
  .footer .footer-top .footer-top-left {
    align-items: flex-start;
    gap: 6.4rem;
    padding-right: 5.6rem;
  }

  .footer .footer-top .footer-top-left .footer-social-col {
    width: 22.4rem;
  }
}

@media (max-width: 1099px) {

  /* .footer-top-left is a block stack here: the group is transparent and the
     social column becomes the last card in the accordion column. */
  .footer .footer-top .footer-top-left .footer-nav-group {
    display: block;
  }

  .footer .footer-top .footer-top-left .footer-social-col {
    border: 1px solid #fff;
    border-radius: 1.6rem;
    margin-top: -1px;
    padding: 2.4rem;
  }

  .footer.footer-light .footer-top .footer-top-left .footer-social-col {
    border-color: #000;
  }

  .footer .footer-top .footer-top-left .footer-social-title {
    font-size: 2rem;
    line-height: 120%;
    margin-bottom: 1.6rem;
  }

  /* Three buttons: a 2-up grid would leave a lone half-width tile, so they
     stay stacked full width here as well. */
  .footer .footer-top .footer-top-left .footer-social-buttons .social-btn {
    width: 100%;
    min-height: 44px;
  }
}


/* -------------------------------------------------------------------------
   7b. Panel de navegación móvil

   El panel es .header-nav: el listado, los dos botones y las redes. Debajo
   de 1100px el tema ya lo dimensiona bien —height:calc(100% - 4.8rem) y
   overflow-y:auto— así que aquí NO se le toca ni el alto ni el fondo.

   Se intentó antes y salió mal, así que queda anotado para no repetirlo:

     · background:#fff en .header-nav.  showNav() hace
       `set(nav,{autoAlpha:1})` en el instante 0 y anima el alto de
       .header-main-bg a 100% durante 0,8 s.  Un fondo propio en el panel
       aparece de golpe en t=0 y tapa esa apertura: se ve un bloque blanco
       saltando antes de que la barra acabe de crecer.  El fondo lo pone
       .header-main-bg y llega al 100%, comprobado.
     · height/flex/max-height propios.  El alto del tema ya deja el panel
       ocupando la barra entera y con scroll interno.

   Lo que sí faltaba es que ese scroll se pudiera usar con el dedo: Lenis
   captura los eventos táctiles de toda la página, y la única salida es el
   atributo data-lenis-prevent, que estaba en .nav (el <ul>) y no en el
   contenedor que realmente scrollea.  Se ha movido a .header-nav en el
   marcado de las seis páginas.

   Aquí quedan solo espaciados, el submenú y el cajón de reserva.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  /* El desplegable se abre aunque no haya animación: si GSAP no llega a
     correr —reduced-motion, una transición de Barba a medias, un frame
     perdido— el wrapper se quedaría en height:0 y no se abriría nada.
     Cuando GSAP sí corre, su estilo en línea manda y la animación se ve. */
  .header .header-main .header-nav .nav .menu .menu-item.menu-item-has-children.active > .sub-menu-wrapper {
    height: auto;
  }

  /* ESTO ERA LO QUE CORTABA EL MENÚ.

     El cajón de reserva es hermano de .header-nav dentro de .header-main, que
     debajo de 1100px es un flex column de alto fijo. La hoja de la página lo
     saca de position:absolute y le pone height:auto para TODOS los estados,
     no solo el abierto:

       @media(max-width:1099px){ .vel-book__drawer{ position:static; height:auto } }

     visibility:hidden no quita el hueco, así que el formulario seguía ocupando
     sitio con el cajón cerrado. Medido a 360x640: 371px para un cajón
     invisible, y el panel del menú comprimido de 579px a 210px con 324px de
     contenido. De ahí que el menú saliera cortado — y más cuanto más baja
     fuera la pantalla, porque a 844px de alto todavía sobraba sitio.

     Cerrado no ocupa nada; abierto, .header.is-booking le devuelve su alto y
     vel-book-triggers.js lo mete dentro del panel. */
  .header:not(.is-booking) .vel-book__drawer {
    display: none;
  }

  /* LA APERTURA DEL MENÚ.

     showNav() hace dos cosas a la vez: pone el panel visible de golpe
     —set(nav,{autoAlpha:1}) en el instante 0— y anima el alto de
     .header-main-bg hasta el 100% durante 0,8 s. El panel no lo recorta nadie,
     así que durante esa subida el menú, los dos botones y las redes están
     dibujados en negro sobre la página, fuera de la barra blanca, que todavía
     va por la mitad. Capturado a 300 ms con la barra en .8s: medía 70px y
     "Servicios", "Contacto" y los botones ya estaban encima del hero.

     El panel se recorta con clip-path siguiendo el mismo recorrido y la misma
     curva que la barra (Power4.easeInOut ≈ cubic-bezier(.77,0,.175,1), 0,8 s),
     de modo que el contenido va apareciendo justo por detrás del borde blanco
     y el escalonado de las líneas se ve como estaba pensado.

     El fondo blanco propio va con el recorte, no sin él: suelto aparecía de
     golpe en t=0 y tapaba la apertura, que es lo que pasaba antes. Recortado
     no puede adelantarse a la barra.

     Y el scroll táctil: Lenis captura los eventos de toda la página y la única
     salida es data-lenis-prevent, que estaba en .nav (el <ul>) y no en el
     contenedor que scrollea. Se ha añadido a .header-nav en las seis páginas. */
  /* LA BARRA, A SU VELOCIDAD REAL.

     css/vel-book.css le pone a .header-main-bg `transition: height .6s`,
     que es lo que necesita el cajón de reserva: ahí el alto lo cambia una
     clase, .is-booking, y sin transición se abriría de golpe. En móvil
     también, con el cajón dentro del panel: medido, la barra pasa de 400
     a 836px al abrirlo.

     Pero el menú no cambia el alto por clase: lo anima GSAP, escribiéndolo
     en línea frame a frame, y entonces el transition lo persigue con .6s
     propios. Resultado: el tween de .45s de showNav() tardaba ~950ms en
     pintarse — a 390x844, a los 550ms el panel estaba entero a la vista y
     la barra iba por 94 de 400px.

     Así que la transición se quita solo mientras GSAP manda:
     vel-nav-clip.js pone nav-anim en <html> durante la apertura y el
     cierre del menú, y la retira al acabar. El cajón la conserva. */
  html.nav-anim .header .header-main .header-main-bg {
    transition: none;
  }

  .header .header-main .header-nav {
    background: #fff;
    border-radius: 0 0 .4rem .4rem;
    clip-path: inset(0 0 100% 0);
    /* mismos tiempos que la barra en js/main.js: showNav la sube en .45s con
       Power4.easeInOut, hideNav la baja en .45s empezando en .12. Ese .1 de
       retardo es el del cierre; la apertura lo reajusta abajo.

       Es el plan B: con js/vel-nav-clip.js en marcha el recorte no se
       cronometra, se mide contra el borde de la barra (regla de abajo). */
    transition: clip-path .45s cubic-bezier(.77, 0, .175, 1) .1s;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2rem;
  }

  /* Los dos sentidos llevan retardos distintos porque la barra también:
     showNav la sube desde t=0 y hideNav la baja desde t=.12. Al abrir bastan
     40 ms para que el borde blanco vaya por delante y el contenido no asome
     sobre la página; al cerrar hacen falta los .1 de la regla de arriba, que
     es la que se aplica en cuanto se quita nav-active. */
  html.nav-active .header .header-main .header-nav {
    clip-path: inset(0 0 0 0);
    transition-delay: .04s;
  }

  /* CUANDO EL RECORTE LO LLEVA EL JS.

     vel-nav-clip.js pone nav-clip-js en <html> y, mientras la barra se
     mueve, escribe el clip-path en línea contra el borde blanco real. Con
     una transición encima, ese valor medido llegaría suavizado —es decir,
     otra vez tarde— así que aquí se quita. Los estados quietos, abierto y
     cerrado, los siguen poniendo las dos reglas de arriba: el script suelta
     el estilo en línea en cuanto la barra para. */
  html.nav-clip-js .header .header-main .header-nav {
    transition: none;
  }

  /* CON EL MENÚ ABIERTO LA BARRA NO SE VA.

     Un salto a un ancla de la misma página desde dentro del panel —"Casos",
     href="#casos"— mueve el documento de golpe. Lenis lo lee como scroll hacia
     abajo y marca html.scrolled-down, y entonces

       .scrolled-down .header{transform:translateY(-6rem)}

     sube la barra para quitarla de en medio. Con el menú abierto eso se lleva
     la fila del logo y de la X: medido a 390x844, la hamburguesa pasaba de
     top 11..55 a top -51..-7, fuera de pantalla, y elementFromPoint sobre ella
     devolvía .header-nav. Sin forma de cerrar el menú.

     js/vel-nav-links.js cierra el menú al pulsar esos enlaces, que es el
     arreglo de fondo. Esto es la red debajo: mientras el menú esté abierto la
     barra se queda donde está, venga de donde venga el desplazamiento. */
  html.nav-active .header {
    transform: none !important;
  }

  /* Aire entre apartados: con todo a 48px seguidos el panel se leía apelmazado */
  .header .header-main .header-nav .nav .menu > .menu-item > a {
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  /* el submenú se sangra, para que se vea de quién cuelga */
  .header .header-main .header-nav .nav .menu .sub-menu-wrapper .sub-menu > .menu-item > a {
    padding-left: 1.6rem;
  }

  /* los CTA y las redes, separados del listado */
  .header .header-main .header-nav .header-buttons {
    margin-top: 1.6rem;
    gap: 1.2rem;
  }

  .header .header-main .header-nav .header-social-buttons {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
  }

  /* ── el cajón de "Reservar llamada", dentro del panel ──────────────────
     En móvil vel-nav-book.js mueve [data-book-drawer] dentro de .header-nav,
     justo detrás de los botones.  Motivo: colgado de .header-main, que es
     overflow:hidden y de alto fijo, el formulario medía 1091px dentro de una
     caja de 438px y las siete preguntas quedaban recortadas sin ninguna forma
     de llegar a ellas.  Dentro del panel comparte el scroll que ya existe.

     Las reglas de ancho/posición del cajón en móvil están en el <style>
     vel-book-css de cada página; aquí solo lo que depende de estar dentro
     del panel. */
  .header .header-main .header-nav > .vel-book__drawer {
    width: 100%;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, .1);

    /* El panel es un flex column, así que el cajón llegaba comprimido: 418px
       de caja para 1090px de formulario, y sin scroll propio (overflow:hidden)
       las preguntas seguían recortadas. Con flex:0 0 auto ocupa lo que mide y
       el scroll lo pone .header-nav, que es lo que se pedía: desplazarse
       dentro de la barra hasta la última pregunta. */
    flex: 0 0 auto;
    height: auto;
    overflow: visible;
  }

  /* el separador propio de la rejilla sobra al haber ya uno arriba */
  .header .header-main .header-nav > .vel-book__drawer .vel-book__grid {
    border-top: 0;
    padding-top: 0;
  }

  /* El botón de enviar quedaba flotando a la derecha, a la altura del primer
     campo, comiéndose un tercio del ancho.

     Es un choque de orden en la hoja de la página: allí el bloque
     @media(max-width:1099px){.vel-book__col--form{flex-direction:column}}
     está escrito ANTES que .vel-book__col--form{flex-direction:row}, y con la
     misma especificidad (0,1,0) gana la última, así que en móvil la columna
     nunca llegaba a apilarse. Al ir esta hoja después y con más especificidad,
     aquí sí se aplica. */
  .header .header-main .vel-book__drawer .vel-book__col--form {
    flex-direction: column;
  }

  /* apilado, la flecha ocupa el ancho completo: 44px de alto y todo el ancho
     de la tarjeta en lugar de un cuadrado suelto */
  .header .header-main .vel-book__drawer .vel-book__send {
    align-self: stretch;
    width: 100%;
    margin-top: 1.6rem;
  }
}

/* Sin animaciones, el texto del submenú nunca se destaparía.
   Cada línea arranca oculta —.line-inner con yPercent:150— dentro de un
   .line con overflow:hidden, y quien la devuelve a su sitio es
   toggleParentItemOn() con un fromTo de GSAP; en CSS solo existe una regla
   equivalente y está atada a :hover, que en táctil no ocurre nunca.

   Con prefers-reduced-motion el usuario ha pedido que no haya recorrido, así
   que se destapa directamente.  El !important es obligatorio: GSAP deja el
   estado inicial escrito EN LÍNEA (transform: translate(0%,150%) rotate(10deg))
   y un estilo en línea gana a cualquier hoja.

   Fuera de este bloque NO se toca: hacerlo mata el escalonado de GSAP, que es
   justo la animación del menú móvil. */
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {

  /* sin recorrido no hay nada que sincronizar */
  .header .header-main .header-nav {
    transition: none;
  }

  .header .header-main .header-nav .nav .menu .menu-item.menu-item-has-children.active > .sub-menu-wrapper > .sub-menu-inner > .sub-menu > .menu-item > a .text .line .line-inner {
    transform: none !important;
  }
}


/* -------------------------------------------------------------------------
   8. Reel landing pad below the navbar breakpoint

   .reel-stop is a 100svh empty section that exists only so the WebGL reel has
   somewhere to fly to and park; .reel-target inside it is visibility:hidden
   and never paints. The page script only runs that flight on
   (min-width:768px) and (pointer:fine) with a live GL context — otherwise it
   sets html.reel-native and the section is left behind as a full viewport of
   nothing between the hero and the sheet.

   So it is removed at the mobile/tablet tier, but only in the native case:
   a narrow desktop window with a mouse still runs the GL flight and still
   needs the pad to land on.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  html.reel-native .reel-stop {
    display: none;
  }
}


/* -------------------------------------------------------------------------
   9. Testimonios header below the navbar breakpoint

   The theme turns .s-content into a ROW at this tier
   (flex-direction:row; align-items:flex-end) with the title pinned to
   width:23rem and the arrows pushed to the far end. On a phone that puts the
   eyebrow, a 4.1rem compressed headline and two 44px buttons on one line: the
   label wraps to three lines, the title breaks mid-word, and the arrows are
   cut off by the container edge.

   Same three parts, stacked as rows instead.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  .section-testimonials .s-inner .s-content {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3.2rem;
  }

  .section-testimonials .s-inner .s-content .fmt-label {
    width: 100%;
  }

  /* released from the 23rem column the theme gave it */
  .section-testimonials .s-inner .s-content .s-title {
    width: 100%;
    flex-shrink: 1;
    margin-bottom: 2.4rem;
  }

  .section-testimonials .s-inner .s-content .testimonials-nav {
    width: 100%;
    justify-content: flex-start;
  }
}


/* -------------------------------------------------------------------------
   10. Solutions cards with the image slot removed

   .solution is a flex row that used to hold a 28rem image plate plus the
   copy; with the plate gone the copy is the only child and the theme's
   justify-content:center would shrink-wrap it in the middle of the card.
   ------------------------------------------------------------------------- */

.section-solutions .solutions .solution .solution-content {
  flex: 1 1 auto;
  width: 100%;
}


/* -------------------------------------------------------------------------
   11. La X del menú móvil

   Dos arreglos sobre el botón hamburguesa y la fila de pestañas, los dos
   consecuencia de que el tema mezcle rem con px en la misma pieza.

   LA X

   .line-wrapper mide 1.2rem de alto y apila tres .line de height:2px con
   .3rem de separación. Al abrir, el tema esconde la línea del medio y junta
   las otras dos con translate(0, ±0.5rem) antes de girarlas 45°. Esos 0.5rem
   solo llevan cada línea al centro exacto del envoltorio si 1rem = 10px:

       alto del contenido = 2px·3 + 0.3rem·2 = 6px + 0.6rem
       hueco superior     = (1.2rem − 6px − 0.6rem) / 2 = 0.3rem − 3px
       centro de la 1ª    = 0.3rem − 2px
       centro del bloque  = 0.6rem
       desplazamiento     = 0.6rem − (0.3rem − 2px) = 0.3rem + 2px

   0.3rem + 2px = 0.5rem únicamente con 1rem = 10px, que es lo que valía el
   root del tema a 375px de ancho. La sección 1 de este archivo acota el root
   entre 9px y 12px, así que fuera de esa anchura los dos brazos se cruzan
   descentrados y la X sale torcida. Con calc() el desplazamiento es exacto a
   cualquier tamaño de root y la transición sigue animándose igual.

   EL LOGO CON EL MENÚ ABIERTO

   .header-tabs se ha quitado del marcado: la barra ya no cambia de contenido
   al abrirse. Lo que ocupaba su sitio era el logo, que el tema apaga con
   .nav-active .header .header-main-inner .header-logo{opacity:0} para dejar
   paso a las dos pestañas. Sin pestañas eso dejaba la barra abierta vacía,
   así que el logo se mantiene encendido en los dos estados. El panel abierto
   es blanco (.header-main-bg, background:#fff), de modo que el logo negro se
   lee igual que con el menú cerrado.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  .nav-active .header .header-main .header-main-inner .header-nav-toggle .line-wrapper .line:nth-child(1) {
    transform: translate(0, calc(0.3rem + 2px)) rotate(45deg);
  }

  .nav-active .header .header-main .header-main-inner .header-nav-toggle .line-wrapper .line:nth-child(3) {
    transform: translate(0, calc(-0.3rem - 2px)) rotate(-45deg);
  }

  .nav-active .header .header-main .header-main-inner .header-logo {
    opacity: 1;
    pointer-events: auto;
  }
}


/* -------------------------------------------------------------------------
   12. El panel móvil: alto según contenido, y más rápido

   ALTO

   Antes el panel abierto ocupaba siempre la pantalla entera y el sobrante se
   quedaba en blanco: .header{height:100%} → .header-main{height:100%} →
   .header-nav{height:calc(100% - 4.8rem); overflow-y:auto}. Con el menú solo
   (dos entradas, dos botones y las redes) eso deja un hueco muerto abajo y un
   contenedor con scroll que no hace falta.

   Ahora .header-main mide lo que mide su contenido mientras el cajón de
   reserva está cerrado, así que el fondo blanco acaba justo debajo de las
   redes. .header-main-bg es absolute dentro de .header-main, y showNav() le
   anima el alto a "100%", de modo que el fondo sigue al contenido sin tocar
   el JS.

   Por qué :not(.is-booking) y no .nav-active: al abrir "Reservar llamada" el
   panel tiene que volver a la pantalla completa —con su scroll— para que
   quepan las siete preguntas, que es justo lo que hace el estado is-booking.
   Y al no depender de nav-active, la caja no cambia de alto a mitad del
   cierre: hideNav() quita nav-active en t=0 pero no baja el fondo hasta t=.12,
   y ese desfase habría dado un fogonazo blanco a pantalla completa.

   El max-height es la red de seguridad: si se despliega el submenú de
   Servicios en una pantalla baja, el panel deja de crecer al llegar al borde
   y recupera el scroll que .header-nav ya tiene. Sin desplegar no aparece.

   VELOCIDAD

   La apertura duraba ~1,3 s: el fondo subía en .8 s y las entradas del menú
   entraban con duration:1 escalonadas desde .2. Los tiempos se han recortado
   en js/main.js (showNav/hideNav) a algo menos de la mitad, y aquí se ajustan
   las transiciones CSS de la hamburguesa para que la X termine con ellos y no
   .35 s después.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  .header:not(.is-booking) .header-main {
    height: auto;
  }

  .header:not(.is-booking) .header-main .header-nav {
    height: auto;
    flex: 0 0 auto;
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
  }

  /* La hamburguesa: el tema la mueve en .8s/.6s, más lento que el panel */
  .header .header-main .header-main-inner .header-nav-toggle .line-wrapper,
  .header .header-main .header-main-inner .header-nav-toggle .line-wrapper .line:nth-child(1),
  .header .header-main .header-main-inner .header-nav-toggle .line-wrapper .line:nth-child(3) {
    transition-duration: .45s;
  }

  .header .header-main .header-main-inner .header-nav-toggle .line-wrapper .line:nth-child(2) {
    transition-duration: .3s;
    transition-delay: .2s;
  }

  .nav-active .header .header-main .header-main-inner .header-nav-toggle .line-wrapper .line:nth-child(2) {
    transition-duration: .3s;
    transition-delay: 0s;
  }

  .header .header-main .header-main-inner .header-nav-toggle:before {
    transition-duration: .35s;
  }

  .nav-active .header .header-main .header-main-inner .header-nav-toggle:before {
    transition-duration: .3s;
    transition-delay: .1s;
  }

  .header .header-main .header-main-inner:after {
    transition-duration: .5s;
  }

  .nav-active .header .header-main .header-main-inner:after {
    transition-duration: .5s;
    transition-delay: .2s;
  }
}


/* -------------------------------------------------------------------------
   13. La tarjeta de testimonio en móvil

   El tema la deja igual que en escritorio: width:54rem, padding:4rem y
   border-radius:6.4rem. Con el root acotado entre 9 y 11,5px eso son 486-621px
   de tarjeta, y .testimonials-inner es overflow:hidden, así que en un teléfono
   la tarjeta se sale y se ve cortada por la derecha — medido a 375px: 540px de
   tarjeta para 343px de hueco. El carrusel no se entera porque desplaza con
   xPercent (js/2496.js), que es relativo al ancho de cada tarjeta, así que
   limitarla no rompe el paso de una a otra.

   max-width en el tramo de tablet y, ya en teléfono, se bajan también el
   relleno, el radio y los dos rótulos: 4rem de aire y 6,4rem de esquina son
   proporciones de una tarjeta de 540px, no de una de 343px. La cita se queda
   en 1.4rem (14px a 375px), que es donde la deja el tema y ya está justo.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  .section-testimonials .s-inner .testimonials .testimonial {
    max-width: 100%;
  }
}

@media (max-width: 599px) {

  .section-testimonials .s-inner .testimonials .testimonial {
    padding: 2.4rem;
    border-radius: 3.2rem;
  }

  .section-testimonials .s-inner .testimonials .testimonial-role {
    font-size: 1.6rem;
    margin-bottom: .6rem;
  }

  .section-testimonials .s-inner .testimonials .testimonial-name {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
}


/* -------------------------------------------------------------------------
   14. "Dos formas de trabajar con nosotros" — el aire en móvil

   En el tier de escritorio las dos tarjetas van en columnas, así que el aire
   de la sección lo reparte el ancho. Al pasar de 1099px el tema las apila
   (.resources{display:block}) y todo ese aire pasa a ser vertical, sumado:
   4.8rem de padding arriba, 2.4rem bajo el titular, 2.4rem entre tarjeta y
   tarjeta, dos pastillas de título de 6.4rem de alto, 2.4rem de padding
   dentro de cada tarjeta, y otros 4.8rem de padding abajo. A 375px, donde
   1rem son 10px, el bloque pide unos 60px más de scroll de los que necesita
   para respirar.

   Se toca SOLO esta sección. El 4.8rem general de .section (punto 3 de este
   archivo) se queda como está: es deliberado, porque con el tipo en su suelo
   los bloques se pegan entre sí. Aquí se puede bajar sin que pase eso porque
   section-tints.css dibuja un filete en cada junta, así que la separación
   entre secciones ya no depende solo del hueco.
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {

  .section-resources {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  /* titular -> tarjetas */
  .section-resources .s-inner .s-content {
    margin-bottom: 2rem;
  }

  /* tarjeta -> tarjeta */
  .section-resources .s-inner .resources .resource:not(:last-child) {
    margin-bottom: 1.6rem;
  }

  /* La pastilla del título es de alto fijo, no de contenido: 6.4rem eran
     64px para una línea de texto que ocupa la mitad. */
  .section-resources .s-inner .resources .resource-title-wrapper {
    height: 5.6rem;
  }

  .section-resources .s-inner .resources .resource-content {
    padding: 2rem 1.6rem;
  }
}