/* =============================================
   MOBILE HOME — TU TALLER  ★ MAXIMUM EDITION
   Solo actúa en ≤ 1024px.
   La versión PC permanece intacta.
============================================= */

/* ══════════════════════════════════════════
   KEYFRAMES GLOBALES
══════════════════════════════════════════ */
@keyframes fab-pulse {
  0%   { box-shadow: 0 6px 28px rgba(204,0,0,0.7), 0 0 0 0 rgba(204,0,0,0.5); }
  65%  { box-shadow: 0 6px 28px rgba(204,0,0,0.4), 0 0 0 20px rgba(204,0,0,0); }
  100% { box-shadow: 0 6px 28px rgba(204,0,0,0.7), 0 0 0 0 rgba(204,0,0,0); }
}

@keyframes stats-shimmer {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}

@keyframes scanline {
  0%   { transform: translateY(-4px); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(95svh); opacity: 0; }
}

@keyframes red-flicker {
  0%,89%,91%,95%,100% { opacity: 1; }
  90%                  { opacity: 0.6; }
  93%                  { opacity: 0.8; }
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes counter-pop {
  0%   { transform: scale(0.8) translateY(10px); opacity: 0; }
  60%  { transform: scale(1.06) translateY(-2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 48px; opacity: 1; }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes resena-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes check-bounce {
  0%   { transform: scale(0) rotate(-30deg); }
  55%  { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes shimmer-swipe {
  from { left: -70%; }
  to   { left: 110%; }
}

@keyframes call-glow {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 -1px 16px rgba(204,0,0,0.35); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 -1px 28px rgba(204,0,0,0.6); }
}

@keyframes diagonal-in {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes bottombar-show {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes hero-word-enter {
  from {
    opacity: 0;
    transform: translateY(36px) skewY(1.2deg);
    clip-path: inset(0 0 110% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
    clip-path: inset(0 0 -8% 0);
  }
}

@keyframes hero-tag-enter {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes hero-subtitle-enter {
  from { opacity: 0; filter: blur(7px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0px); transform: translateY(0); }
}

@keyframes hero-btns-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glow-pulse-red {
  0%,100% {
    text-shadow:
      0 0 20px rgba(230,0,0,0.95),
      0 0 50px rgba(230,0,0,0.48),
      0 0 90px rgba(230,0,0,0.22);
  }
  50% {
    text-shadow:
      0 0 32px rgba(255,0,0,1),
      0 0 72px rgba(230,0,0,0.7),
      0 0 130px rgba(230,0,0,0.34);
  }
}

@keyframes frame250-reveal {
  from { opacity: 0; transform: scale(1.04); filter: brightness(0.5); }
  to   { opacity: 1; transform: scale(1);    filter: brightness(1); }
}

@keyframes clip-wipe-left {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes star-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  65%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes scroll-hint-bounce {
  0%,100% { transform: translateY(0) scaleX(-1); opacity: 0.5; }
  50%     { transform: translateY(7px) scaleX(-1); opacity: 1; }
}

@keyframes hero-line-grow {
  from { width: 0; opacity: 0; }
  to   { width: 32px; opacity: 0.7; }
}

@keyframes resena-blur-enter {
  from { opacity: 0; filter: blur(4px); transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════
   ELEMENTOS EXCLUSIVAMENTE MÓVILES
   Ocultos en escritorio por defecto.
══════════════════════════════════════════ */
.mobile-ticker,
.mobile-frame250,
.mobile-bottombar,
.mob-progress,
.mobile-antes-despues { display: none; }


/* ══════════════════════════════════════════
   PROGRESS BAR DE LECTURA (solo móvil)
══════════════════════════════════════════ */
.mob-progress {
  position: fixed;
  top: 68px; /* valor inicial; JS lo sobreescribe en scroll */
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gris-4);
  z-index: calc(var(--z-sticky) + 1);
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mob-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rojo), var(--rojo-hover));
  box-shadow: 0 0 8px var(--rojo-glow);
  transition: width 0.08s linear;
}

/* ══════════════════════════════════════════
   BARRA INFERIOR
══════════════════════════════════════════ */
.mobile-bottombar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  height: 64px;
  display: none;
  align-items: stretch;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--gris-4);
  /* Línea roja de acento superior */
  box-shadow:
    0 -1px 0 0 rgba(204,0,0,0.5),
    0 -8px 32px rgba(0,0,0,0.6);
  animation: bottombar-show 0.45s var(--ease-snappy) 0.6s both;
  /* safe-area-inset para iOS */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 0.3s var(--ease-snappy), opacity 0.3s;
}

.mobile-bottombar--hidden {
  transform: translateY(110%);
  opacity: 0;
}

.mobile-bottombar__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--gris-texto);
  padding: 10px 8px 8px;
  position: relative;
  overflow: hidden;
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* Shimmer al tap */
.mobile-bottombar__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.06) 50%,
    transparent 70%
  );
  left: -100%;
  pointer-events: none;
  opacity: 0;
}

.mobile-bottombar__btn:active::after {
  opacity: 1;
  animation: shimmer-swipe 0.35s var(--ease-out);
}

.mobile-bottombar__btn:active {
  background: rgba(255,255,255,0.04);
}

/* Botón "Cómo llegar" — estilo outline */
.mobile-bottombar__btn--map {
  color: rgba(255,255,255,0.7);
}

.mobile-bottombar__btn--map:active {
  color: var(--blanco);
}

/* Botón "Llamar" — rojo, CTA principal */
.mobile-bottombar__btn--call {
  background: var(--rojo);
  color: var(--blanco);
  flex: 1.15;
  gap: 2px;
}

.mobile-bottombar__btn--call:active {
  background: var(--rojo-hover);
  color: var(--blanco);
}

/* Glow exterior pulsante en el botón de llamar — solo sombra, sin tocar el fondo */
.mobile-bottombar__btn--call {
  animation: call-glow 2.8s ease-in-out infinite;
}

.mobile-bottombar__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-bottombar__icon svg {
  width: 100%;
  height: 100%;
}

.mobile-bottombar__label {
  font-family: var(--fuente);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.mobile-bottombar__num {
  font-family: var(--fuente);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}

.mobile-bottombar__divider {
  width: 1px;
  background: var(--gris-4);
  align-self: stretch;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   INICIO DEL BLOQUE MÓVIL
══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Activar elementos móviles */
  .mobile-ticker    { display: block  !important; }
  .mobile-frame250  { display: block  !important; }
  .mobile-bottombar { display: flex   !important; }
  .mob-progress     { display: block  !important; }
  .mobile-antes-despues { display: flex !important; }

  /* Padding inferior para no tapar contenido con la barra */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ─────────────────────────────────────────
     RESET CINEMATIC
  ───────────────────────────────────────── */
  .sc-pin  { height: auto !important; }

  .sc-stage {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--negro) !important;
    /* Para la CSS custom property del parallax */
    --mob-parallax-y: 0px;
  }

  .sc-canvas,
  .sc-overlay,
  .sc-line,
  .sc-progress,
  .sc-scroll-hint,
  .sc-card-badge,
  .sc-antes-despues { display: none !important; }

  .sc-layer {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
    pointer-events: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ═══════════════════════════════════════════
     §1 — HERO
     Full-viewport con imagen+gradiente,
     scanline, flicker, parallax CSS.
  ════════════════════════════════════════════ */
  .sc-stage::before {
    content: '';
    position: absolute;
    top: calc(var(--mob-parallax-y) * -1);
    left: 0; right: 0;
    height: calc(100svh + 100px);
    background:
      /* vignette radial esquinas */
      radial-gradient(ellipse 130% 80% at 50% 50%,
        transparent 30%,
        rgba(0,0,0,0.55) 100%
      ),
      /* gradiente principal */
      linear-gradient(
        168deg,
        rgba(8,8,8,0.96) 0%,
        rgba(8,8,8,0.65) 35%,
        rgba(140,0,0,0.26) 68%,
        rgba(8,8,8,0.97) 100%
      ),
      url('../hero_index_movil.webp') center 42% / cover no-repeat;
    z-index: 0;
    pointer-events: none;
    will-change: top;
    transform: translateZ(0);
  }

  /* Grain noise sutil sobre el hero */
  .sc-stage {
    isolation: isolate !important;
  }

  .sc-stage > *:not(::before):not(::after) {
    position: relative !important;
  }

  /* Scanline de luz que baja en bucle */
  .sc-stage::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(204,0,0,0) 5%,
      rgba(204,0,0,0.85) 50%,
      rgba(204,0,0,0) 95%,
      transparent 100%
    );
    z-index: 6;
    animation: scanline 6s cubic-bezier(0.4,0,0.6,1) 1s infinite;
    pointer-events: none;
  }

  #sc-tag,
  .sc-title,
  #sc-subtitle,
  #sc-btns {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Tag */
  #sc-tag {
    padding: calc(100svh - 460px) 24px 0 !important;
    animation: hero-tag-enter 0.7s var(--ease-snappy) 0.15s both !important;
  }

  .hero__tag {
    font-size: 0.58rem !important;
    letter-spacing: 0.38em !important;
    animation: red-flicker 7s ease-in-out 1s infinite !important;
  }

  .hero__tag::before {
    width: 0 !important;
    animation: hero-line-grow 0.9s 0.3s var(--ease-snappy) both !important;
  }

  /* Título */
  .sc-title { padding: 10px 24px 0 !important; }

  .hero__title {
    font-size: clamp(3rem, 14vw, 5rem) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.04em !important;
  }

  .hero__title .line-outline {
    display: none !important;
  }

  .hero__title .line-solid {
    display: block !important;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.82) !important;
    color: transparent !important;
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.07)) !important;
    animation: hero-word-enter 0.72s var(--ease-snappy) 0.42s both !important;
  }

  .hero__title .line-red {
    display: block !important;
    color: var(--blanco) !important;
    text-shadow: 
      0 0 20px rgba(0,0,0,0.95), 
      0 0 45px rgba(0,0,0,0.85), 
      0 0 80px rgba(0,0,0,0.75) !important;
    animation:
      hero-word-enter 0.72s var(--ease-snappy) 0.56s both !important;
  }

  /* Subtítulo */
  #sc-subtitle { padding: 18px 24px 0 !important; }

  .hero__subtitle {
    font-size: 0.58rem !important;
    letter-spacing: 0.32em !important;
    color: rgba(153,153,153,0.75) !important;
    animation: hero-subtitle-enter 0.7s var(--ease-snappy) 0.72s both !important;
  }

  /* Scroll hint debajo del subtítulo */
  #sc-scroll-hint {
    display: flex !important;
    position: relative !important;
    padding: 22px 24px 0 !important;
    z-index: 2 !important;
    opacity: 1 !important;
    animation: hero-subtitle-enter 0.6s var(--ease-snappy) 1s both !important;
  }

  #sc-scroll-hint span {
    font-size: 0.46rem !important;
    letter-spacing: 0.38em !important;
    color: rgba(255,255,255,0.28) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #sc-scroll-hint span::after {
    content: '↓' !important;
    animation: scroll-hint-bounce 1.8s ease-in-out infinite !important;
    display: inline-block !important;
    font-size: 0.7rem !important;
    color: rgba(204,0,0,0.7) !important;
  }

  /* Botones — uno rojo, uno outline, en fila */
  #sc-btns { padding: 28px 24px 0 !important; }

  .hero__btns {
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    animation: hero-btns-enter 0.65s var(--ease-spring) 0.82s both !important;
  }

  .hero__btns .btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.16em !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Shimmer en botón rojo al cargar */
  .hero__btns .btn--rojo::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    width: 50% !important;
    background: linear-gradient(
      105deg,
      transparent 20%,
      rgba(255,255,255,0.12) 50%,
      transparent 80%
    ) !important;
    left: -60% !important;
    animation: shimmer-swipe 0.8s var(--ease-snappy) 1.4s both !important;
    pointer-events: none !important;
  }

  /* ═══════════════════════════════════════════
     §2 — STATS CON CONTADORES ANIMADOS
  ════════════════════════════════════════════ */
  .sc-stats {
    position: relative !important;
    width: 100% !important;
    z-index: 2 !important;
    margin-top: 52px !important;
  }

  .sc-stats::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%, rgba(204,0,0,0.55) 30%,
      rgba(204,0,0,0.55) 70%, transparent 100%
    );
  }

  .sc-stats__inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Shimmer diagonal blanco que recorre el bloque */
  .sc-stats__inner::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 40%;
    height: 120%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.13) 40%,
      rgba(255,255,255,0.22) 50%,
      rgba(255,255,255,0.13) 60%,
      transparent 100%
    );
    animation: stats-shimmer 3.2s ease-in-out 1s infinite;
    pointer-events: none;
    z-index: 3;
  }

  /* Patrón diagonal en el fondo rojo */
  .sc-stats__inner::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.055) 0, rgba(0,0,0,0.055) 1px,
      transparent 1px, transparent 10px
    );
    pointer-events: none;
  }

  .sc-stats__item {
    padding: 22px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-align: center !important;
    position: relative !important;
  }

  .sc-stats__item:nth-child(3),
  .sc-stats__item:nth-child(4) { border-bottom: none !important; }

  .sc-stats__item::after { display: none !important; }

  .sc-stats__item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.14) !important;
  }

  .sc-stats__item strong {
    font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
    display: block !important;
    font-variant-numeric: tabular-nums !important;
    animation: counter-pop 0.7s var(--ease-spring) both !important;
    text-shadow: 0 0 28px rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.8) !important;
  }

  #sc-stat-0 strong { animation-delay: 0.05s !important; }
  #sc-stat-1 strong { animation-delay: 0.12s !important; }
  #sc-stat-2 strong { animation-delay: 0.19s !important; }
  #sc-stat-3 strong { animation-delay: 0.26s !important; }

  .sc-stats__item span {
    font-size: 0.54rem !important;
    letter-spacing: 0.2em !important;
    color: rgba(255,255,255,0.65) !important;
    margin-top: 4px !important;
    display: block !important;
  }

  /* ═══════════════════════════════════════════
     §3 — TICKER MARQUEE
     Banda roja de servicios en movimiento.
  ════════════════════════════════════════════ */
  .mobile-ticker {
    overflow: hidden !important;
    white-space: nowrap !important;
    background: var(--rojo) !important;
    padding: 13px 0 !important;
    position: relative !important;
    z-index: 3 !important;
    /* Diagonal cuts para aspecto agresivo */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
  }

  /* Gradiente de fade en los bordes del ticker */
  .mobile-ticker::before,
  .mobile-ticker::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    width: 32px !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  .mobile-ticker::before {
    left: 0 !important;
    background: linear-gradient(90deg, var(--rojo), transparent) !important;
  }
  .mobile-ticker::after {
    right: 0 !important;
    background: linear-gradient(-90deg, var(--rojo), transparent) !important;
  }

  .mobile-ticker__track {
    display: inline-flex !important;
    animation: ticker-scroll 22s linear infinite !important;
    will-change: transform !important;
    transition: animation-play-state 0.3s !important;
  }

  .mobile-ticker:hover .mobile-ticker__track,
  .mobile-ticker:active .mobile-ticker__track {
    animation-play-state: paused !important;
  }

  .mobile-ticker__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 24px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.92) !important;
    white-space: nowrap !important;
    transition: color 0.2s !important;
  }

  .mobile-ticker__item:hover { color: rgba(255,255,255,1) !important; }

  .mobile-ticker__item::before {
    content: '◆' !important;
    font-size: 0.36rem !important;
    color: rgba(255,255,255,0.4) !important;
  }

  /* ═══════════════════════════════════════════
     §4 — SEPARADOR DIAGONAL EDITORIAL
     Elemento de marca entre ticker y servicios.
  ════════════════════════════════════════════ */
  .sc-section-title,
  #sc-serv-title,
  #sc-res-title {
    padding: 56px 24px 24px !important;
    text-align: left !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Barra vertical roja sesgada de marca */
  .sc-section-title::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    height: 48px !important;
    background: linear-gradient(to bottom, var(--rojo), rgba(204,0,0,0.3)) !important;
    box-shadow: 0 0 14px var(--rojo-glow) !important;
    transform: skewX(-12deg) !important;
    margin-bottom: 18px !important;
    animation: diagonal-in 0.6s var(--ease-snappy) both !important;
  }

  .sc-section-title .section-title__eyebrow {
    font-size: 0.56rem !important;
    letter-spacing: 0.32em !important;
    padding: 0 !important;
    text-align: left !important;
    display: block !important;
    text-shadow: 0 0 14px rgba(204,0,0,0.5) !important;
  }

  .sc-section-title .section-title__eyebrow::before,
  .sc-section-title .section-title__eyebrow::after { display: none !important; }

  .sc-section-title h2 {
    font-size: clamp(1.95rem, 9.5vw, 2.8rem) !important;
    text-align: left !important;
    line-height: 0.93 !important;
    letter-spacing: -0.03em !important;
  }

  /* ═══════════════════════════════════════════
     §5 — CARDS DE SERVICIOS
     Lista editorial con número, título, texto.
     Reveal escalonado vía mob-visible.
  ════════════════════════════════════════════ */
  .sc-cards {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    transform: none !important;
    top: auto !important; left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sc-cards::after { display: none !important; }

  /* Estado inicial de reveal */
  .sc-card {
    opacity: 0;
    transform: translateX(-20px);
    transition:
      opacity 0.48s var(--ease-snappy),
      transform 0.48s var(--ease-snappy),
      background 0.18s !important;
  }

  /* Estado visible (JS añade .mob-visible) */
  .sc-card.mob-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .sc-card {
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--gris-3) !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background: var(--negro) !important;
    min-height: 80px !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }

  #sc-card-0 { border-top: 1px solid var(--gris-3) !important; }

  /* Borde izquierdo rojo animado al tap */
  .sc-card::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(to bottom, var(--rojo-hover), var(--rojo-dark)) !important;
    box-shadow: 0 0 10px var(--rojo-glow) !important;
    transform: scaleY(0) !important;
    transform-origin: bottom !important;
    transition: transform 0.22s var(--ease-snappy) !important;
    z-index: 2 !important;
  }

  .sc-card:active::before { transform: scaleY(1) !important; }
  .sc-card:active { background: rgba(16,16,16,0.98) !important; }

  /* Shimmer horizontal al tap */
  .sc-card::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    width: 60% !important;
    background: linear-gradient(
      105deg,
      transparent 20%,
      rgba(255,255,255,0.045) 50%,
      transparent 80%
    ) !important;
    left: -70% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0 !important;
  }

  .sc-card:active::after {
    opacity: 1 !important;
    animation: shimmer-swipe 0.38s var(--ease-out) !important;
  }

  /* Columna izquierda: número de servicio */
  .sc-card .service-card__num {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    width: 56px !important;
    min-height: 80px !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255,255,255,0.16) !important;
    letter-spacing: 0 !important;
    position: relative !important;
    top: auto !important; right: auto !important;
    line-height: 1 !important;
    border-right: 1px solid var(--gris-3) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: -webkit-text-stroke 0.2s !important;
  }

  .sc-card:active .service-card__num {
    -webkit-text-stroke: 1px rgba(204,0,0,0.55) !important;
  }

  /* Icono: oculto (el número ya diferencia) */
  .sc-card .service-card__icon { display: none !important; }

  /* Título */
  .sc-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--blanco) !important;
    padding: 20px 18px 2px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    transition: color 0.2s !important;
  }

  .sc-card:active h3 { color: rgba(255,255,255,0.9) !important; }

  /* Descripción */
  .sc-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.68rem !important;
    color: var(--gris-texto) !important;
    line-height: 1.55 !important;
    padding: 0 18px !important;
    margin: 0 !important;
  }

  /* "Ver más" */
  .sc-card .service-card__arrow {
    grid-column: 2 !important;
    grid-row: 3 !important;
    opacity: 1 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    color: var(--rojo) !important;
    padding: 6px 18px 18px !important;
    margin: 0 !important;
    text-shadow: 0 0 10px rgba(204,0,0,0.4) !important;
  }

  .sc-card .service-card__arrow::after {
    content: '→' !important;
    transition: transform 0.2s var(--ease-spring) !important;
  }

  .sc-card:active .service-card__arrow::after {
    transform: translateX(5px) !important;
  }

  .sc-card .card-glow { display: none !important; }

  /* ═══════════════════════════════════════════
     §6 — BLOQUE FRAME 250
     Foto editorial full-width con texto.
  ════════════════════════════════════════════ */
  .mobile-frame250 {
    position: relative !important;
    width: 100% !important;
    height: 64vw !important;
    min-height: 260px !important;
    max-height: 420px !important;
    overflow: hidden !important;
    display: block !important;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.8s var(--ease-snappy), transform 0.9s var(--ease-snappy) !important;
  }

  .mobile-frame250.mob-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .mobile-frame250__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 110% !important;
    object-fit: cover !important;
    object-position: center 55% !important;
    filter: brightness(0.72) contrast(1.18) saturate(0.78) !important;
    display: block !important;
    will-change: transform !important;
    transition: transform 0.1s linear !important;
  }

  .mobile-frame250__overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg,
        rgba(8,8,8,0.28) 0%,
        rgba(8,8,8,0.0) 28%,
        rgba(8,8,8,0.82) 100%
      ),
      linear-gradient(90deg,
        rgba(204,0,0,0.18) 0%,
        transparent 52%
      ) !important;
  }

  /* Scanline diagonal sobre el frame */
  .mobile-frame250__overlay::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    ) !important;
    pointer-events: none !important;
  }

  .mobile-frame250__label {
    position: absolute !important;
    bottom: 22px !important;
    left: 24px !important;
    right: 24px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .mobile-frame250__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .mobile-frame250__eyebrow {
    font-size: 0.52rem !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: var(--rojo) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 12px rgba(204,0,0,0.6) !important;
    animation: clip-wipe-left 0.6s var(--ease-snappy) both !important;
  }

  .mobile-frame250__title {
    font-size: clamp(1.65rem, 7.5vw, 2.3rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    line-height: 0.91 !important;
    color: var(--blanco) !important;
    text-shadow:
      0 2px 14px rgba(0,0,0,0.85),
      0 0 42px rgba(0,0,0,0.5) !important;
  }

  .mobile-frame250__km {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.38) !important;
    text-align: right !important;
    writing-mode: vertical-lr !important;
    transform: rotate(180deg) !important;
    line-height: 1.4 !important;
    padding-bottom: 4px !important;
  }

  /* Línea roja glow en el borde inferior */
  .mobile-frame250::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg,
      var(--rojo-dark), var(--rojo), var(--rojo-hover), var(--rojo)
    ) !important;
    box-shadow: 0 0 20px rgba(204,0,0,0.9), 0 0 40px rgba(204,0,0,0.4) !important;
    display: block !important;
  }

  /* ═══════════════════════════════════════════
     §7 — ¿POR QUÉ NOSOTROS?
  ════════════════════════════════════════════ */
  .sc-porque {
    position: relative !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .sc-porque__img {
    width: auto !important;
    height: 380px !important;
    aspect-ratio: 1080 / 1528 !important;
    margin: 0 auto 24px !important;
    display: block !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow:
      0 4px 32px rgba(0,0,0,0.7),
      0 0 0 1px rgba(204,0,0,0.18) !important;
    border-bottom: 3px solid var(--rojo) !important;
    order: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.85s var(--ease-snappy) !important;
  }

  .sc-porque__img.mob-visible {
    clip-path: inset(0 0% 0 0) !important;
  }

  .sc-porque__img::before,
  .sc-porque__img::after { display: none !important; }

  .sc-porque__img > img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1080 / 1528 !important;
    object-fit: cover !important;
    filter: grayscale(16%) contrast(1.1) brightness(0.86) !important;
    transform: scale(1.04) !important;
    transition: transform 1.2s var(--ease-snappy) !important;
  }

  .sc-porque__img.mob-visible > img {
    transform: scale(1) !important;
  }

  .sc-porque__content {
    width: 100% !important;
    padding: 40px 24px 52px !important;
    background: transparent !important;
    order: 1 !important;
    position: relative !important;
  }

  .sc-porque__content::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    height: 36px !important;
    background: linear-gradient(to bottom, var(--rojo), rgba(204,0,0,0.3)) !important;
    box-shadow: 0 0 10px var(--rojo-glow) !important;
    transform: skewX(-10deg) !important;
    margin-bottom: 14px !important;
  }

  .sc-porque__content .porque__tag {
    font-size: 0.56rem !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 12px !important;
  }

  .sc-porque__content .porque__tag::before {
    width: 0 !important;
    animation: line-grow 0.7s 0.2s var(--ease-snappy) forwards !important;
  }

  .sc-porque__content h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 0.93 !important;
    margin-bottom: 18px !important;
  }

  .sc-porque__content p {
    font-size: 0.8rem !important;
    max-width: none !important;
    margin-bottom: 24px !important;
    line-height: 1.82 !important;
  }

  /* Items de lista: reveal escalonado */
  .sc-porque__content .porque__list li {
    padding: 13px 0 !important;
    font-size: 0.78rem !important;
    gap: 14px !important;
    border-bottom: 1px solid var(--gris-3) !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-snappy), transform 0.4s var(--ease-snappy) !important;
  }

  .sc-porque__content .porque__list li.mob-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .sc-porque__content .porque__list .check {
    animation: check-bounce 0.45s var(--ease-spring) both !important;
  }

  .sc-porque__content .porque__list li:nth-child(1) .check { animation-delay: 0.05s !important; }
  .sc-porque__content .porque__list li:nth-child(2) .check { animation-delay: 0.14s !important; }
  .sc-porque__content .porque__list li:nth-child(3) .check { animation-delay: 0.23s !important; }
  .sc-porque__content .porque__list li:nth-child(4) .check { animation-delay: 0.32s !important; }

  /* ═══════════════════════════════════════════
     §8 — RESEÑAS
  ════════════════════════════════════════════ */
  #sc-res-title {
    padding: 56px 24px 24px !important;
    text-align: left !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--negro) !important;
  }

  #sc-res-title::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    height: 48px !important;
    background: linear-gradient(to bottom, var(--rojo), rgba(204,0,0,0.3)) !important;
    box-shadow: 0 0 14px var(--rojo-glow) !important;
    transform: skewX(-12deg) !important;
    margin-bottom: 18px !important;
  }

  #sc-res-title .section-title__eyebrow {
    text-align: left !important;
    padding: 0 !important;
  }

  #sc-res-title .section-title__eyebrow::before,
  #sc-res-title .section-title__eyebrow::after { display: none !important; }

  #sc-res-title h2 {
    text-align: left !important;
    line-height: 0.93 !important;
    letter-spacing: -0.03em !important;
  }

  .resenas-orb,
  .resenas-corner-orb,
  .resenas-corner-orb-white { display: none !important; }

  /* ── STICKY STACK DE RESEÑAS ─────────────────
     Patrón: contenedor en columna + padding-bottom
     para dar recorrido de scroll. Cada card tiene
     position:sticky y top calculado con --index.
     Las cards se apilan visualmente al scrollear.
  ───────────────────────────────────────────── */
  .sc-resenas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important; left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
    padding-bottom: 12px !important;
  }

  .sc-resena {
    position: sticky !important;
    /* navbar=68px + 16px margen + 14px * índice visual */
    top: calc(207px + (14px * var(--index))) !important;
    left: auto !important;
    width: auto !important;
    min-height: 264px !important;
    margin: 0 12px calc((3 - var(--index)) * 14px) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    padding: 28px 24px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s var(--ease-snappy) !important;
  }

  #sc-resena-0 {
    background: rgba(28,28,28,0.98) !important;
    z-index: 10 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important;
  }
  #sc-resena-1 {
    background: rgba(22,22,22,0.99) !important;
    z-index: 11 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.65) !important;
  }
  #sc-resena-2 {
    background: rgba(17,17,17,0.995) !important;
    z-index: 12 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.75) !important;
  }
  #sc-resena-3 {
    background: rgba(12,12,12,1) !important;
    z-index: 13 !important;
    box-shadow: 0 20px 56px rgba(0,0,0,0.85) !important;
  }

  /* Línea roja superior: marca de identidad visible en cada card */
  .sc-resena::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--rojo) 20%,
      var(--rojo) 80%,
      transparent 100%
    ) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
    display: block !important;
  }

  /* Al tocar: borde izquierdo rojo escala desde abajo */
  .sc-resena::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(to bottom, var(--rojo-hover), var(--rojo-dark)) !important;
    box-shadow: 0 0 10px var(--rojo-glow) !important;
    transform: scaleY(0) !important;
    transform-origin: bottom !important;
    transition: transform 0.24s var(--ease-snappy) !important;
    border-radius: 0 0 0 6px !important;
  }

  .sc-resena:active::before { transform: scaleY(1) !important; }

  .sc-resena:active {
    box-shadow:
      0 0 0 1px rgba(204,0,0,0.3),
      0 16px 48px rgba(0,0,0,0.9) !important;
  }

  /* SVG coche: marca de detalle */
  .resena-car {
    display: block !important;
    width: 30px !important;
    height: auto !important;
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    opacity: 0.18 !important;
    filter: drop-shadow(0 0 5px rgba(204,0,0,0.25)) !important;
  }

  .sc-resena .resena-card__stars {
    font-size: 0.72rem !important;
    letter-spacing: 0.18em !important;
    text-shadow:
      0 0 8px rgba(204,0,0,0.65),
      0 0 18px rgba(204,0,0,0.28) !important;
    display: inline-flex !important;
    gap: 1px !important;
  }

  /* Cada carácter estrella = letra individual, pop escalonado */
  .sc-resena .resena-card__stars > span {
    display: inline-block !important;
    animation: star-pop 0.4s var(--ease-spring) both !important;
  }

  .sc-resena .resena-card__stars > span:nth-child(1) { animation-delay: 0.3s !important; }
  .sc-resena .resena-card__stars > span:nth-child(2) { animation-delay: 0.38s !important; }
  .sc-resena .resena-card__stars > span:nth-child(3) { animation-delay: 0.46s !important; }
  .sc-resena .resena-card__stars > span:nth-child(4) { animation-delay: 0.54s !important; }
  .sc-resena .resena-card__stars > span:nth-child(5) { animation-delay: 0.62s !important; }

  .sc-resena blockquote {
    font-size: 0.8rem !important;
    line-height: 1.78 !important;
    padding-top: 14px !important;
    padding-right: 42px !important;
    color: rgba(153,153,153,0.88) !important;
  }

  .sc-resena blockquote::before {
    font-size: 3.5rem !important;
    top: -6px !important;
    color: rgba(204,0,0,0.13) !important;
  }

  .sc-resena .resena-card__autor { padding-top: 14px !important; }

  .sc-resena .resena-card__info strong { font-size: 0.8rem !important; }

  .sc-resena .resena-card__info span { font-size: 0.63rem !important; }

  /* ═══════════════════════════════════════════
     §9 — CTA BANNER
  ════════════════════════════════════════════ */
  .cta-banner {
    padding: 64px 24px !important;
    text-align: left !important;
    position: relative !important;
    z-index: 20 !important;
    background: var(--gris-1) !important;
  }

  .cta-banner::before {
    font-size: clamp(4rem, 20vw, 7rem) !important;
    bottom: -8% !important;
    right: -1% !important;
  }

  .cta-banner__inner { text-align: left !important; }

  .cta-banner__inner h2 {
    font-size: clamp(1.65rem, 7.5vw, 2.2rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
  }

  .cta-banner__inner p {
    margin-bottom: 28px !important;
    font-size: 0.78rem !important;
  }

  .cta-banner .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 18px 24px !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.15em !important;
  }

  /* ═══════════════════════════════════════════
     §10 — FOOTER
  ════════════════════════════════════════════ */
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .footer__logo p {
    max-width: none !important;
    font-size: 0.76rem !important;
  }

  .footer__col h4 {
    font-size: 0.56rem !important;
    letter-spacing: 0.26em !important;
    margin-bottom: 16px !important;
  }

  .footer__col p,
  .footer__col ul li a { font-size: 0.78rem !important; }

  .footer__bottom { font-size: 0.52rem !important; }

  /* ═══════════════════════════════════════════
     BLOQUE ANTES / DESPUÉS (MÓVIL)
  ════════════════════════════════════════════ */
  .mobile-antes-despues {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 0 24px 60px 24px;
    box-sizing: border-box;
    position: relative;
    background: var(--negro);
  }

  .mobile-antes__header {
    text-align: center;
    margin-bottom: 1rem;
  }

  .mobile-antes__eyebrow {
    display: block;
    font-family: var(--font-display);
    color: var(--rojo);
    font-size: var(--text-xs);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .mobile-antes__heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 8vw, 3rem);
    color: var(--blanco);
    margin: 0;
    line-height: 1.1;
  }

  .mobile-antes__heading em {
    font-style: italic;
    color: var(--gris-claro);
    font-weight: 300;
  }

  .mobile-antes__images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .mobile-antes__img-wrapper {
    position: relative;
    width: 100%;
    border-radius: 30px; /* Redondeado móvil */
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 6px; /* Respiro más sutil para móvil */
  }

  /* Pseudo-elemento para la línea fina roja interior */
  .mobile-antes__img-wrapper::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(230, 0, 0, 0.6);
    border-radius: 20px;
    pointer-events: none;
  }

  .mobile-antes__img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
  }

  .mobile-antes__label {
    position: absolute;
    bottom: 0.8rem;
    left: 0.8rem;
    background: rgba(10, 10, 10, 0.6);
    color: var(--blanco);
    padding: 0.3rem 1rem;
    border-radius: 30px;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(230, 0, 0, 0.6);
    box-shadow: 
      inset 0 0 0 1px rgba(230, 0, 0, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .mobile-antes__label::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--rojo);
    box-shadow: 0 0 8px var(--rojo);
  }

} /* fin @media max-width:1024px */

/* ══════════════════════════════════════════
   TABLETA: 2 columnas de cards y reseñas
══════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1024px) {

  .sc-cards {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 24px 24px !important;
  }

  .sc-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    border: 1px solid var(--gris-3) !important;
    border-top: 1px solid var(--gris-3) !important;
    padding: 28px 22px 22px !important;
    min-height: auto !important;
  }

  .sc-card .service-card__num { display: none !important; }

  .sc-card .service-card__icon {
    display: block !important;
    width: 28px !important; height: 28px !important;
    margin-bottom: 14px !important;
  }

  .sc-card h3 {
    grid-column: unset !important; grid-row: unset !important;
    font-size: 0.8rem !important;
    padding: 0 !important; margin-bottom: 6px !important;
  }

  .sc-card p {
    grid-column: unset !important; grid-row: unset !important;
    font-size: 0.73rem !important; padding: 0 !important;
  }

  .sc-card .service-card__arrow {
    grid-column: unset !important; grid-row: unset !important;
    padding: 0 !important; margin-top: 12px !important;
  }

  .sc-resenas {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 24px 56px !important;
  }

  .sc-resena {
    border: 1px solid var(--gris-3) !important;
    border-top: 1px solid var(--gris-3) !important;
    padding: 24px !important;
  }
}