@font-face {
  font-family: "Gacor";
  src: url("assets/Gacor.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Escala y espaciado compartidos por el contenido móvil. */
.mobile-section-title,
.mobile-call-button,
.contact-mobile-content {
  display: none;
}

.service-modal__chrome {
  display: contents;
}

.service-modal__grabber {
  display: none;
}

@media (max-width: 960px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :root {
    --mobile-page-background: linear-gradient(
      180deg,
      #fff 0%,
      #fff 22%,
      #faf7f4 44%,
      #eee5dc 72%,
      #dfcfc1 100%
    );
    --ink-soft: var(--ink);
    --mobile-title-size: 20px;
    --mobile-subtitle-size: 22px;
    --mobile-text-size: 16px;
    --mobile-text-leading: 24px;
    --mobile-space-related: 12px;
    --mobile-space-content: 24px;
    --mobile-content-top: 98px;
    --mobile-edge-gap: 18px;
    --mobile-heading-gap: 6px;
    --mobile-nav-height: 72px;
    --mobile-nav-bottom: max(12px, env(safe-area-inset-bottom));
    --mobile-call-size: 56px;
  }

  body {
    font-size: var(--mobile-text-size);
    line-height: var(--mobile-text-leading);
  }

  body::before {
    background: var(--mobile-page-background);
  }

  .page-panel {
    padding-top: var(--mobile-content-top);
    padding-bottom: calc(
      var(--mobile-nav-bottom) + var(--mobile-nav-height) +
      var(--mobile-edge-gap)
    );
  }

  .page-panel--services,
  .page-panel--blog,
  .page-panel--contact {
    --mobile-content-top: 104px;
  }

  .page-container,
  .services-shell {
    width: min(calc(100% - 28px), 740px);
  }

  .home-layout,
  .services-shell,
  .section-layout,
  .about-layout,
  .contact-layout {
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  .section-layout,
  .about-layout,
  .contact-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: calc(
      100dvh - var(--mobile-content-top) - var(--mobile-nav-bottom) -
      var(--mobile-nav-height) - var(--mobile-edge-gap)
    );
    gap: var(--mobile-space-content);
  }

  .section-layout > .site-footer,
  .about-layout > .site-footer,
  .contact-layout > .site-footer {
    margin-top: 0;
  }

  .section-layout > .empty-state,
  .about-layout > .about-card {
    flex-grow: 1;
  }

  .services-heading,
  .section-heading {
    display: grid;
    gap: var(--mobile-space-related);
  }

  .services-heading > .eyebrow,
  .services-heading > p:last-child,
  .page-panel--blog .section-heading > .eyebrow,
  .page-panel--contact .section-heading > .eyebrow {
    display: none;
  }

  .mobile-section-title {
    display: block;
    margin: 0;
    padding: 0;
    font-family: "Gacor", Arial, sans-serif;
    font-size: var(--mobile-title-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    color: var(--bronze-deep);
  }

  .services-heading h2,
  .section-heading h2,
  .home-services > h2,
  .mobile-home-about > h2,
  .service-choice__copy strong,
  .service-card__copy strong,
  .empty-state strong,
  .service-modal__services > h3,
  .service-modal__item-copy strong,
  .service-modal__help-copy h3,
  .service-modal__aside h3 {
    margin: 0;
    font-size: var(--mobile-text-size);
    font-weight: 400;
    line-height: var(--mobile-text-leading);
  }

  .service-modal__content > h2 {
    margin: 0;
    font-size: var(--mobile-title-size);
    color: var(--ink);
    line-height: 1.3;
  }

  .services-heading {
    gap: var(--mobile-heading-gap);
    text-align: center;
  }

  .services-heading h2,
  .section-heading h2 {
    color: var(--ink-soft);
  }

  .page-panel p:not(.eyebrow),
  .service-modal p:not(.eyebrow),
  .service-choice__copy small,
  .service-choice__link,
  .mobile-home-about__toggle,
  .services-tabs button,
  .services-search input,
  .service-card__copy small,
  .service-card__action,
  .empty-state span,
  .contact-card > div,
  .service-modal__item-copy small,
  .page-panel .button,
  .service-modal .button {
    font-size: var(--mobile-text-size);
    line-height: var(--mobile-text-leading);
  }

  .section-heading > p:last-child,
  .services-heading > p:last-child {
    max-width: none;
    margin: 0;
  }

  .home-services,
  .mobile-home-about {
    margin-top: var(--mobile-space-content);
  }

  .home-services,
  .mobile-home-about {
    padding-top: var(--mobile-space-content);
  }

  .home-services > h2,
  .mobile-home-about > h2 {
    margin-bottom: var(--mobile-space-content);
  }

  .home-services > h2,
  .mobile-home-about > h2,
  .contact-section-title {
    font-size: var(--mobile-subtitle-size);
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    color: var(--ink);
  }

  .contact-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-inline: 8px;
  }

  .mobile-home-about > h2 {
    justify-content: center;
    font-family: "Gacor", Arial, sans-serif;
    font-size: var(--mobile-title-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bronze-deep);
  }

  .contact-section-title > i {
    flex: 0 0 auto;
    font-size: 19px;
  }

  .page-panel .eyebrow,
  .service-modal .eyebrow,
  .service-choice > i,
  .services-grid .service-card > i,
  .large-choice > i,
  .empty-state > i,
  .contact-card i,
  .mobile-home-about > h2 i,
  .services-cta__mark,
  .service-modal__item-number,
  .service-modal__item > i,
  .service-modal__help-icon,
  .schedule-list div {
    color: var(--ink);
  }

  .home-copy > .eyebrow {
    color: var(--bronze-deep);
  }

  .services-search input::placeholder {
    color: var(--ink);
  }

  .service-choice-grid,
  .services-grid,
  .contact-card,
  .service-modal__items {
    gap: var(--mobile-space-content);
  }

  .service-choice,
  .service-card,
  .mobile-home-about__card,
  .about-card,
  .contact-card,
  .empty-state,
  .service-modal__item {
    padding: var(--mobile-space-content);
  }

  .service-choice,
  .service-card,
  .service-choice__copy,
  .service-card__copy,
  .service-modal__item-copy,
  .service-modal__item,
  .service-card__action,
  .service-choice__link,
  .contact-card > div,
  .mobile-home-about > h2,
  .page-panel .button,
  .service-modal .button,
  .empty-state {
    gap: var(--mobile-space-related);
  }

  .mobile-home-about__card p,
  .about-card p {
    margin: 0;
  }

  .mobile-home-about__card p + p,
  .about-card p + p,
  .mobile-home-about__more p:first-child,
  .mobile-home-about__toggle,
  .about-card .text-link {
    margin-top: var(--mobile-space-related);
  }

  .services-tools {
    gap: 8px;
    margin-top: var(--mobile-heading-gap);
  }

  .services-tabs {
    height: 52px;
    min-height: 52px;
    padding: 4px;
    background: rgb(139 117 96 / 14%);
  }

  .services-tabs button {
    min-height: 44px;
    padding: 0 6px;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 18px;
    white-space: nowrap;
  }

  .services-search {
    height: 52px;
  }

  .services-grid,
  .services-empty {
    margin-top: var(--mobile-space-content);
  }

  .services-empty {
    margin-bottom: var(--mobile-space-content);
  }

  /* Tarjetas de servicios: una cabecera en línea y una descripción breve. */
  .services-grid {
    gap: var(--mobile-space-content);
  }

  .services-grid .service-card {
    --service-card-padding: 16px;
    --service-action-size: 12px;
    min-height: 0;
    grid-template-columns: 24px minmax(0, 1fr) var(--service-action-size);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px;
    padding: var(--service-card-padding);
  }

  .services-grid .service-card > i {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: var(--service-icon-size, 20px);
    line-height: 1;
    text-align: center;
    color: var(--bronze-deep);
    transform: translateY(var(--service-icon-shift, 0px));
  }

  .services-grid .service-card__copy {
    display: contents;
  }

  .services-grid .service-card__copy strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--service-title-size, 18px);
    font-weight: 700;
    line-height: 24px;
    color: var(--ink);
    white-space: nowrap;
    transform: none;
  }

  .services-grid .service-card__copy small {
    grid-column: 1 / 3;
    grid-row: 2;
    padding-inline-start: var(--service-action-size);
    font-size: calc(var(--mobile-text-size) - 1px);
    line-height: var(--mobile-text-leading);
  }

  .services-grid .service-card__action {
    position: absolute;
    top: 50%;
    right: var(--service-card-padding);
    grid-area: auto;
    align-self: auto;
    justify-self: auto;
    display: block;
    width: var(--service-action-size);
    height: var(--service-action-size);
    min-height: 0;
    font-size: 0;
    line-height: 0;
    color: var(--bronze-deep);
    transform: translateY(-50%);
  }

  .services-grid .service-card__action i {
    display: none;
  }

  .services-grid .service-card__action::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* Inicio y los detalles del modal comparten el espaciado de las tarjetas. */
  .home-services .service-choice,
  .service-modal__item {
    --service-card-padding: 16px;
    --service-action-size: 12px;
    display: grid;
    min-height: 0;
    grid-template-columns: 24px minmax(0, 1fr) var(--service-action-size);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 8px;
    padding: var(--service-card-padding);
  }

  .home-services .service-choice {
    grid-template-rows: auto auto auto;
    -webkit-user-drag: none;
  }

  .home-services .service-choice,
  .home-services .service-choice__copy,
  .home-services .service-choice__copy *,
  .home-services .service-choice__link {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  .home-services .service-choice i {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .home-services .service-choice__copy,
  .service-modal__item-copy {
    display: contents;
  }

  .home-services .service-choice > i,
  .service-modal__item > i {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--bronze-deep);
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }

  .home-services .service-choice__copy strong,
  .service-modal__item-copy strong {
    grid-column: 2 / -1;
    grid-row: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--mobile-text-size);
    font-weight: 700;
    line-height: var(--mobile-text-leading);
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  .home-services .service-choice__copy small,
  .service-modal__item-copy small {
    grid-column: 1 / 3;
    grid-row: 2;
    min-width: 0;
    padding-inline-start: var(--service-action-size);
    font-size: calc(var(--mobile-text-size) - 1px);
    line-height: var(--mobile-text-leading);
    color: var(--ink);
  }

  .home-services .service-choice__link {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-inline-start: var(--service-action-size);
    color: var(--bronze-deep);
    font-size: calc(var(--mobile-text-size) - 1px);
    font-weight: 700;
    line-height: var(--mobile-text-leading);
  }

  .home-services .service-choice__link i {
    display: grid;
    flex: 0 0 var(--service-action-size);
    place-items: center;
    width: var(--service-action-size);
    font-size: 12px;
    color: inherit;
    transform: none;
  }

  .home-services .service-choice__link i::before {
    content: "\f054";
  }

  .service-modal__items,
  .service-modal__items:has(.service-modal__item:nth-child(4):last-child) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: var(--mobile-space-content);
  }

  .service-modal__item {
    min-height: auto;
    height: auto;
    grid-template-rows: max-content max-content;
  }

  .site-footer {
    gap: 14px;
    padding: var(--mobile-space-content) 8px 4px;
    font-size: 12px;
    line-height: 1.5;
  }

  .page-panel--home .site-footer,
  .page-panel--services .site-footer {
    margin-top: var(--mobile-space-content);
  }

  .site-footer .footer-links {
    gap: 10px 22px;
  }

  .site-footer .footer-copy {
    gap: 4px;
  }

  .contact-card a,
  .contact-card > div > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .contact-card i {
    flex: 0 0 auto;
  }

  /* Contacto comparte la escala, el cristal y los márgenes de Servicios. */
  .contact-heading {
    gap: var(--mobile-heading-gap);
    text-align: center;
  }

  .contact-heading > .contact-desktop-copy {
    display: none;
  }

  .contact-mobile-content {
    display: block;
  }

  .contact-heading > .contact-intro {
    margin: 0;
    color: var(--ink-soft);
  }

  .contact-intro > span {
    display: block;
  }

  .contact-section,
  .contact-section-heading {
    display: grid;
    min-width: 0;
    gap: var(--mobile-space-content);
  }

  .contact-section-heading {
    gap: var(--mobile-heading-gap);
    text-align: center;
  }

  .contact-section--divided {
    padding-top: var(--mobile-space-content);
    border-top: 1px solid rgb(139 117 96 / 18%);
  }

  .contact-section-title {
    margin: 0;
  }

  .contact-section--directions {
    gap: var(--mobile-space-related);
  }

  .contact-section--directions > .contact-section-title {
    font-size: calc(var(--mobile-subtitle-size) - 2px);
  }

  .contact-section-heading > p {
    margin: 0;
    color: var(--ink-soft);
  }

  .contact-card,
  .contact-map-group,
  .contact-form {
    min-width: 0;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgb(255 255 255 / 49%), rgb(255 255 255 / 15%));
    box-shadow:
      inset 0 0 0 0.5px rgb(255 255 255 / 74%),
      inset 0 1px 0 rgb(255 255 255 / 76%),
      0 16px 32px rgb(69 51 38 / 8%);
  }

  .contact-card {
    gap: var(--mobile-space-related);
  }

  .contact-card > div {
    font-size: 15px;
  }

  .contact-card i {
    width: 22px;
    font-size: 20px;
    text-align: center;
  }

  .contact-map-group {
    display: grid;
    gap: var(--mobile-space-related);
    min-width: 0;
    margin: 0;
  }

  .contact-map {
    position: relative;
    overflow: hidden;
    height: 240px;
    border-radius: 10px;
    background: #e9e5dc;
  }

  .contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
  }

  .contact-map-address {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mobile-space-related);
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    line-height: var(--mobile-text-leading);
    text-align: left;
  }

  .contact-map-address > span {
    min-width: 0;
  }

  .contact-map-address > i {
    flex: 0 0 auto;
    width: 22px;
    font-size: 20px;
    text-align: center;
  }

  .contact-map-group > .contact-map__link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    cursor: pointer;
  }

  .contact-map__link:focus-visible {
    outline: 2px solid var(--bronze-deep);
    outline-offset: -4px;
  }

  .contact-form,
  .contact-form__field {
    display: grid;
    gap: var(--mobile-space-related);
  }

  .contact-form__field {
    min-width: 0;
    gap: var(--mobile-heading-gap);
  }

  .contact-form__field > label {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
  }

  .contact-form__field input,
  .contact-form__field textarea {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px;
    border: 1px solid rgb(139 117 96 / 22%);
    border-radius: 12px;
    background: rgb(255 255 255 / 40%);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
  }

  .contact-form__field textarea {
    resize: vertical;
    min-height: 144px;
  }

  .contact-form__field :is(input, textarea):focus-visible {
    border-color: var(--bronze-deep);
    outline: 2px solid rgb(111 91 73 / 22%);
    outline-offset: 2px;
  }

  .contact-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 24px;
  }

  .contact-form__privacy input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0;
    accent-color: var(--bronze-deep);
  }

  .contact-form__privacy label {
    min-width: 0;
    cursor: pointer;
  }

  .contact-form__privacy a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    background: rgb(18 18 17 / 68%);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%);
  }

  .contact-form__submit:disabled {
    cursor: not-allowed;
    opacity: .65;
  }

  .service-modal__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px max(24px, env(safe-area-inset-bottom));
    scrollbar-width: thin;
  }

  /* Panel móvil desde abajo: el fondo comienza por debajo del header. */
  .service-modal {
    top: 98px;
    padding: 0;
    place-items: end stretch;
  }

  .service-modal__backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity .42s ease;
  }

  .service-modal__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100dvh - 98px);
    max-height: none;
    overflow: hidden;
    border-radius: 32px 32px 0 0;
    background: linear-gradient(155deg, #fffdfb, #ebe0d5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), 0 -14px 50px rgb(48 34 24 / 14%);
    opacity: 1;
    transform: translate3d(0, calc(100% + 24px), 0);
    transition: transform .42s cubic-bezier(.22, .8, .25, 1);
  }

  .service-modal.is-open .service-modal__panel {
    transform: translate3d(0, var(--sheet-offset, 0px), 0);
  }

  .service-modal.is-open .service-modal__backdrop {
    opacity: calc(1 - var(--sheet-drag-progress, 0));
  }

  .service-modal.is-dragging .service-modal__panel,
  .service-modal.is-dragging .service-modal__backdrop {
    transition: none;
  }

  .service-modal__chrome {
    position: relative;
    display: grid;
    flex: 0 0 56px;
    place-items: start center;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
  }

  .service-modal.is-dragging .service-modal__chrome {
    cursor: grabbing;
  }

  .service-modal__grabber {
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: rgb(111 91 73 / 38%);
    pointer-events: none;
  }

  .service-modal__close {
    position: absolute;
    top: 8px;
    right: 14px;
    float: none;
    width: 44px;
    height: 44px;
    margin: 0;
    border-color: rgb(139 117 96 / 18%);
    background: rgb(255 255 255 / 32%);
  }

  .service-modal__header {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--mobile-space-related);
  }

  .service-modal__visual {
    width: 48px;
    min-height: 48px;
    border-radius: 12px;
  }

  .service-modal__visual > i {
    font-size: 24px;
    color: #fff;
  }

  .service-modal__content > .eyebrow,
  .service-modal__content > h2 {
    padding-right: 0;
  }

  .service-modal__content > h2 {
    font-family: var(--font-body);
    min-width: 0;
    font-size: clamp(20px, 6.15vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .service-modal__intro {
    margin-top: var(--mobile-space-related);
  }

  .service-modal__mobile-action,
  .service-modal__services {
    margin-top: var(--mobile-space-content);
  }

  .service-modal__services {
    padding-top: var(--mobile-space-content);
  }

  .service-modal__services > h3 {
    margin-bottom: var(--mobile-space-content);
  }

  .service-modal__aside {
    gap: var(--mobile-space-related);
    margin: var(--mobile-space-content) 0 0;
    padding: var(--mobile-space-content) 0;
  }

  .service-modal__help-copy p {
    margin: var(--mobile-space-related) 0 0;
  }

  .mobile-bottom-nav {
    bottom: var(--mobile-nav-bottom);
    height: var(--mobile-nav-height);
  }

  /* Las superficies fijas siguen admitiendo toques, sin selección ni arrastre. */
  :is(.site-header, .header-controls, .mobile-bottom-nav, .mobile-call-button),
  :is(.site-header, .header-controls, .mobile-bottom-nav, .mobile-call-button) * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }

  .mobile-call-button {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(
      var(--mobile-nav-bottom) + var(--mobile-nav-height) +
      var(--mobile-space-related)
    );
    z-index: 650;
    width: var(--mobile-call-size);
    height: var(--mobile-call-size);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 25% 0%, rgb(255 255 255 / 18%), transparent 65%),
      rgb(18 18 17 / 68%);
    color: #fff;
    box-shadow:
      0 10px 24px rgb(0 0 0 / 18%),
      inset 0 1px 0 rgb(255 255 255 / 26%);
  }

  .mobile-call-button svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: none;
  }

  .mobile-call-button:focus-visible {
    outline: 2px solid var(--bronze-deep);
    outline-offset: 4px;
  }

}

/* Portada de acceso rápido para teléfonos. */
@media (max-width: 680px) {
  .mobile-intro {
    z-index: 2000;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    align-items: center;
    justify-items: center;
    gap: var(--mobile-space-content);
    overflow-y: auto;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    background: var(--mobile-page-background);
    outline: none;
  }

  .mobile-intro__content {
    width: min(100%, 340px);
    gap: var(--mobile-space-content);
  }

  .mobile-intro__logo {
    --intro-logo-size: min(330px, calc(100vw - 48px), 40dvh);
    width: var(--intro-logo-size);
    height: auto;
    max-height: none;
    /* Compensa los márgenes transparentes para centrar la gráfica visible. */
    margin: calc(var(--intro-logo-size) * -0.075) 0;
  }

  .mobile-intro__status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 16px;
    border-radius: 16px;
    background: var(--glass-fill);
    color: var(--ink);
    font-size: 16px;
    line-height: 24px;
  }

  .mobile-intro__status strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
  }

  .mobile-intro__status small {
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    text-align: right;
  }

  .mobile-intro__actions {
    display: grid;
    gap: var(--mobile-space-related);
    width: 100%;
    margin-top: 0;
  }

  .mobile-intro__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 58px;
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .mobile-intro__action[hidden] {
    display: none;
  }

  .mobile-intro__action > i {
    flex: 0 0 auto;
    font-size: 22px;
  }

  .mobile-intro__action--call {
    background: linear-gradient(145deg, rgb(255 255 255 / 12%), transparent), rgb(18 18 17 / 88%);
    color: #fff;
  }

  .mobile-intro__action--whatsapp {
    background: linear-gradient(145deg, rgb(255 255 255 / 52%), rgb(200 229 207 / 80%));
    color: var(--ink);
  }

  .mobile-intro__action:focus-visible,
  .mobile-intro__swipe:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
  }

  .mobile-intro__swipe {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    width: calc(100% - 48px);
    min-height: 88px;
    gap: 12px;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    transform: translateX(-50%);
  }

  .mobile-intro__swipe i {
    font-size: 22px;
    animation: intro-swipe-up 1.6s ease-in-out infinite;
  }

  body.mobile-intro-open :is(.site-header, .header-controls, .mobile-bottom-nav, .mobile-call-button) {
    visibility: hidden;
  }

  .mobile-intro[aria-hidden="true"] :is(.mobile-hero-logo__coin, .mobile-hero-logo__reflection, .mobile-hero-logo__shadow),
  body.mobile-intro-open .app-viewport :is(.mobile-hero-logo__coin, .mobile-hero-logo__reflection, .mobile-hero-logo__shadow) {
    animation-play-state: paused;
  }

  @keyframes intro-swipe-up {
    0%, 100% { transform: translateY(4px); opacity: .55; }
    50% { transform: translateY(-8px); opacity: 1; }
  }
}

/* En pantallas bajas se reserva espacio para que el aviso no tape los botones. */
@media (max-width: 680px) and (max-height: 700px) {
  .mobile-intro {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .mobile-intro__swipe {
    position: static;
    width: 100%;
    transform: none;
  }
}

@media (max-width: 680px) and (max-height: 560px) {
  .mobile-intro {
    gap: 12px;
    padding: 16px;
  }

  .mobile-intro__logo {
    --intro-logo-size: min(192px, calc(100vw - 32px), 26dvh);
  }

  .mobile-intro__actions {
    margin-top: 0;
  }

  .mobile-intro__status,
  .mobile-intro__action {
    min-height: 48px;
    padding: 12px;
  }

  .mobile-intro__swipe {
    min-height: 64px;
    gap: 8px;
    padding: 4px;
  }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .service-modal__panel,
  .service-modal__backdrop {
    transition-duration: .01ms;
  }
}