.elementor-11594 .elementor-element.elementor-element-393e0b9{--display:flex;--min-height:0px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11594 .elementor-element.elementor-element-e16ab8b > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-11594 .elementor-element.elementor-element-e16ab8b{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS *//* ══════════ 00 · BLINDAJE ELEMENTOR / TEMA ══════════ */

/* Añade la clase `sm-full` en el CONTENEDOR de Elementor que aloja
   el widget HTML (Advanced › CSS Classes). Sin esto, el padding y el
   ancho máximo del contenedor recortan los lienzos de 1440px y
   anulan el solape negativo del hero.                              */
.sm-full,
.sm-full > .e-con-inner,
.sm-full > .elementor-container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sm-full .elementor-widget-html,
.sm-full .elementor-widget-html > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* La mayoría de temas WP declaran `img { max-width:100%; height:auto }`.
   Aquí los tamaños de las capas son exactos (p. ej. .sm-hero__blobs
   mide 1485px dentro de un lienzo de 1440) y ese reset las deforma. */
.sm-banner img,
.sm-hero img,
.sm-soluciones img,
.sm-servicios img,
.sm-video img,
.sm-premios img,
.sm-cert img,
.sm-contacto img {
  max-width: none;
}

/* Botones y campos: sin estilos heredados del tema */
.sm-servicios__tab,
.sm-video__play,
.sm-contacto__submit {
  -webkit-appearance: none;
  appearance: none;
}
.sm-contacto input,
.sm-contacto textarea {
  margin: 0;
  box-shadow: none;
}
.sm-cert__item {
  margin: 0;
}


/* ══════════ FUENTES ══════════ */

/* Oooh Baby (palabra "scroll" del banner) e Inter (formulario) se
   cargan con los <link> que van dentro del widget HTML.

   NT Marley, MADE Outer Sans y Novecento Wide son DE PAGO.
   Comprobado el 2026-08-07: los cuatro .woff2 devuelven 404, es
   decir NO están subidos todavía. Mientras falten, el diseño cae a
   Arial / Helvetica y el tracking de los watermarks se descuadra.

   Para activarlas: sube los .woff2 a la Biblioteca de medios y
   descomenta el bloque de abajo ajustando las URLs reales.

@font-face {
  font-family: 'NT Marley';
  src: url('https://spicyminds.mx/wp-content/uploads/2026/07/NTMarley-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NT Marley';
  src: url('https://spicyminds.mx/wp-content/uploads/2026/07/NTMarley-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Outer Sans';
  src: url('https://spicyminds.mx/wp-content/uploads/2026/07/MADEOuterSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Novecento Wide';
  src: url('https://spicyminds.mx/wp-content/uploads/2026/07/Novecentowide-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
*/


/* ══════════════════════ 01 · BANNER ══════════════════════ */
/* Lienzo fijo de 1440×632 escalado con --sm-scale (lo calcula el JS).
   --sm-scale-min es el suelo de escala: por debajo de él el escenario
   deja de encoger y se recorta por los lados (todo el contenido está
   centrado, así que no se pierde nada). Sin ese suelo, en un móvil de
   375px el logo y el tagline quedarían a un 26% de su tamaño.        */
.sm-banner {
  --sm-scale: 1;
  --sm-scale-min: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 632;
  overflow: hidden;
  background: #132a3f;
}

.sm-banner__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 632px;
  transform: translateX(-50%) scale(var(--sm-scale));
  transform-origin: top center;
  /* El fondo debe estar DENTRO del stacking context del escenario:
     los blends (screen / plus-lighter) solo ven las capas internas. */
  background: #132a3f;
}

/* ── Capa 1: glow (elipse con degradado radial, blend screen) ──
   estado 1        → 735×690 en (322, -218)
   estados 2 y 6   → 735×690 en (644, -111)
   estados 3, 4, 5 → 433×407 en (654,  225)                        */
.sm-banner__glow {
  position: absolute;
  z-index: 1;
  left: 644px;
  top: -111px;
  width: 735px;
  height: 690px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #2392f3 0%, rgba(7, 34, 65, 0) 100%);
  mix-blend-mode: screen;
  transition: all 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-banner[data-state='1'] .sm-banner__glow {
  left: 322px;
  top: -218px;
}
.sm-banner[data-state='3'] .sm-banner__glow,
.sm-banner[data-state='4'] .sm-banner__glow,
.sm-banner[data-state='5'] .sm-banner__glow {
  left: 654px;
  top: 225px;
  width: 433px;
  height: 407px;
}

/* ── Capa 2: logo animado (GIF/WebP con fondo negro) — solo estado 1 ──
   plus-lighter (screen como fallback) hace invisible el fondo negro. */
.sm-banner__logo-gif {
  position: absolute;
  z-index: 2;
  left: 127px;
  top: -16px;
  width: 1187px;
  height: 692px;
  object-fit: cover;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.sm-banner[data-state='1'] .sm-banner__logo-gif {
  opacity: 1;
}

/* ── Capa 3: fondo con blobs (PNG con transparencia) ── */
.sm-banner__bg {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 1440px;
  height: 632px;
  object-fit: cover;
  pointer-events: none;
}

/* ── Capa 4: logo estático ──
   estados 2 y 6 → 467px de ancho | estados 3-5 → 342px             */
.sm-banner__logo {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 294px;
  width: 467px;
  height: auto;
  transform: translateX(-50%);
  opacity: 1;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}
.sm-banner[data-state='1'] .sm-banner__logo {
  opacity: 0;
}
.sm-banner[data-state='3'] .sm-banner__logo,
.sm-banner[data-state='4'] .sm-banner__logo,
.sm-banner[data-state='5'] .sm-banner__logo {
  width: 342px;
  top: 295px;
}

/* ── Capa 5: tagline con efecto máquina de escribir ── */
.sm-banner__tagline {
  position: absolute;
  z-index: 5;
  left: calc(50% - 210px);
  top: 371px;
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 8.32px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.sm-banner[data-state='1'] .sm-banner__tagline {
  opacity: 0;
}
.sm-banner__word {
  font-weight: 700;
}

/* Partícula roja (punto de 4px) — solo estado 5 */
.sm-banner__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 5px;
  border-radius: 50%;
  background: #f2313e;
  vertical-align: baseline;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sm-banner[data-state='5'] .sm-banner__dot {
  opacity: 1;
}

/* ── Capa 6: indicador de scroll — solo estado 6 (y sin JS) ── */
.sm-banner__scroll {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 451px;
  height: 90px;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}
.sm-banner[data-state='1'] .sm-banner__scroll,
.sm-banner[data-state='2'] .sm-banner__scroll,
.sm-banner[data-state='3'] .sm-banner__scroll,
.sm-banner[data-state='4'] .sm-banner__scroll,
.sm-banner[data-state='5'] .sm-banner__scroll {
  opacity: 0;
  transform: translateY(14px);
}
.sm-banner__scroll-arrow {
  display: block;
  width: 36px;
  height: 47px;
  margin: 0 auto;
  object-fit: cover;
}
.sm-banner__scroll-text {
  display: block;
  margin-top: -6px;
  font-family: 'Oooh Baby', cursive;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  color: #ffffff;
}

/* ── Responsive banner ──
   Por debajo de 768px la escala se congela en 768/1440 = 0.5333 y el
   escenario se recorta por los lados. Con la escala fija, la altura
   pasa a ser constante: 632 × 0.5333 = 337px (por eso se sustituye
   aspect-ratio por height, sin salto al cargar).                    */
@media (max-width: 768px) {
  .sm-banner {
    --sm-scale-min: 0.5333;
    aspect-ratio: auto;
    height: 337px;
  }
}

/* ── Accesibilidad: sin animaciones → vista final fija ── */
@media (prefers-reduced-motion: reduce) {
  .sm-banner__glow,
  .sm-banner__logo,
  .sm-banner__scroll,
  .sm-banner__tagline,
  .sm-banner__logo-gif,
  .sm-banner__dot {
    transition: none;
  }
}


/* ══════════════════════ 02 · HERO ══════════════════════ */
/* Lienzo base 1440×675. El gradiente cubre solo los 518px
   superiores; la imagen sangra sobre el fondo blanco inferior.
   Estados: inicial (V1) → .sm-hero--revealed (V2).                 */

.sm-hero {
  position: relative;
  width: 100%;
  height: 675px;
  overflow: hidden;
  isolation: isolate; /* contiene los blend modes */
  /* En Figma el hero SE SUPERPONE a Soluciones: su franja
     transparente inferior (157px) monta sobre el arranque de la
     siguiente sección. El margen negativo replica ese solape.      */
  margin-bottom: -157px;
  z-index: 2;
}

/* Gradiente diagonal — Figma: 160.4deg, #132a3f 76.4% → #031428 88.3% */
.sm-hero__gradient {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 518px;
  background: linear-gradient(160.4deg, #132a3f 76.42%, #031428 88.35%);
}

/* Lienzo interno de 1440px centrado */
.sm-hero__inner {
  position: relative;
  width: 1440px;
  height: 100%;
  margin: 0 auto;
}

/* ── Watermarks "SPICY" / "MINDS" (texto outline) ── */
.sm-hero__wm {
  position: absolute;
  z-index: 1;
  font-family: 'MADE Outer Sans', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 200px;
  line-height: 1.2;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  pointer-events: none;
  user-select: none;
  transform-origin: 0 0;
}

/* spicy — teal #41EDD8 al 14% | V1: 400px en (19,-56) → V2: 200px en (19,64) */
.sm-hero__wm--spicy {
  left: 19px;
  top: 64px;
  color: #41edd8;
  opacity: 0.14;
  -webkit-text-stroke-color: #41edd8;
  transform: translateY(-120px) scale(2);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-hero--revealed .sm-hero__wm--spicy {
  transform: none;
}

/* minds — blanco al 5% | V1: (-91,468) → V2: (-7,302) */
.sm-hero__wm--minds {
  left: -7px;
  top: 302px;
  color: #ffffff;
  opacity: 0.05;
  -webkit-text-stroke-color: #ffffff;
  transform: translate(-84px, 166px);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.sm-hero--revealed .sm-hero__wm--minds {
  transform: none;
}

/* ── Continuación del artwork del banner ──
   La MISMA imagen del banner ampliada a 1485×967 en (−33,−725): su
   franja inferior asoma en los primeros ~240px del hero y las curvas
   continúan sin costura. Sin blend — colores reales del artwork.    */
.sm-hero__blobs {
  position: absolute;
  z-index: 2;
  left: -33px;
  top: -725px;
  width: 1485px;
  height: 967px;
  object-fit: cover;
  pointer-events: none;
}

/* ── Contenido izquierdo — V1: left -382, opacity 0 → V2: left 92 ── */
.sm-hero__content {
  position: absolute;
  z-index: 3;
  left: 92px;
  top: 162px;
  width: 537px;
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.9s ease 0.45s,
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.sm-hero--revealed .sm-hero__content {
  opacity: 1;
  transform: none;
}

/* CTA flecha circular amarilla (48×48) */
.sm-hero__cta {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-bottom: 26px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.sm-hero__cta:hover {
  transform: scale(1.12);
}
.sm-hero__cta svg circle {
  transition: stroke 0.3s ease;
}
.sm-hero__cta:hover svg circle {
  stroke: #ffffff;
}

/* Headline — línea 1: NT Marley Bold 24 (lh 0.86)
               línea 2: Novecento Wide Light 24 (lh 1.1) — #ffb900  */
.sm-hero__headline {
  margin: 0 0 27px;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 0.86;
  text-transform: uppercase;
  color: #ffb900;
}
.sm-hero__headline span {
  display: block;
  margin-top: 8px;
  font-family: 'Novecento Wide', 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  line-height: 1.1;
}

/* Cuerpo — NT Marley 16 / 1.2, blanco, ancho 504 */
.sm-hero__body {
  margin: 0 0 19px;
  max-width: 504px;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}
.sm-hero__body:last-child {
  margin-bottom: 0;
}
.sm-hero__body strong {
  font-weight: 700;
}

/* Stagger interno del contenido */
.sm-hero__cta,
.sm-hero__headline,
.sm-hero__body {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.sm-hero--revealed .sm-hero__cta          { opacity: 1; transform: none; transition-delay: 0.55s; }
.sm-hero--revealed .sm-hero__headline     { opacity: 1; transform: none; transition-delay: 0.75s; }
.sm-hero--revealed .sm-hero__body--first  { opacity: 1; transform: none; transition-delay: 0.95s; }
.sm-hero--revealed .sm-hero__body--second { opacity: 1; transform: none; transition-delay: 1.15s; }

/* ── Imagen hero — V1: 464×418 en (848,113) → V2: 774×696 en (643,-21) ── */
.sm-hero__image-wrap {
  position: absolute;
  z-index: 4;
  left: 643px;
  top: -21px;
  width: 774px;
  height: 696px;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 0 0;
  /* 26.486% de 774 = 205px | 19.253% de 696 = 134px — idéntico al
     diseño, pero en % para que el estado inicial del reveal siga
     siendo proporcional cuando la imagen escala con el viewport. */
  transform: translate(26.486%, 19.253%) scale(0.5995);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-hero--revealed .sm-hero__image-wrap {
  transform: none;
}
.sm-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Glow radial (encima de todo, blend screen) — 735×690 en (834,0) ── */
.sm-hero__glow {
  position: absolute;
  z-index: 5;
  left: 834px;
  top: 0;
  width: 735px;
  height: 690px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #2392f3 0%, rgba(7, 34, 65, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── Responsive hero ── */

/* El lienzo de 1440 se centra y recorta por los lados hasta 1200 */
@media (max-width: 1440px) {
  .sm-hero__inner {
    width: 100%;
  }
  /* La imagen pasa a escalar con el viewport en vez de saltar por
     escalones: 53.75vw son exactamente 774px a 1440px, así que en
     desktop no cambia NADA y a partir de ahí encoge de forma
     continua. Antes daba un salto de 774 → 560px (−28%) al cruzar
     los 1200px, mucho más brusco que el del propio hero (−14%). */
  .sm-hero__image-wrap {
    left: auto;
    right: -110px;
    width: min(53.75vw, 774px);
    height: auto;
    aspect-ratio: 774 / 696;
  }
  .sm-hero__glow {
    left: auto;
    right: -180px;
  }
}

/* Tablet (≤1200px) */
@media (max-width: 1200px) {
  .sm-hero {
    height: 580px;
    margin-bottom: -140px; /* solape = alto − gradiente (580−440) */
  }
  .sm-hero__gradient {
    height: 440px;
  }
  .sm-hero__wm {
    font-size: 140px;
  }
  .sm-hero__wm--minds {
    top: 250px;
  }
  /* Ancho fluido (42vw) por debajo de los 480px del diseño: mantiene
     siempre un hueco frente a la imagen (que ocupa 53.75vw por la
     derecha), así el texto nunca queda tapado. Con los 480px fijos
     que había antes, la imagen invadía la columna por debajo de
     ~1040px — a 900px eran 140px de solape, y la imagen va en
     z-index 4 sobre el contenido en z-index 3.                     */
  .sm-hero__content {
    left: 60px;
    top: 120px;
    width: min(480px, 42vw);
  }
  .sm-hero__headline {
    font-size: 20px;
  }
  .sm-hero__image-wrap {
    top: 20px;
    right: -60px;
  }
  .sm-hero__glow {
    width: 520px;
    height: 490px;
    right: -140px;
  }
}

/* Móvil (≤768px): contenido y luego imagen, ambos en flujo */
@media (max-width: 768px) {
  .sm-hero {
    height: auto;
    background: linear-gradient(170deg, #132a3f 60%, #031428 100%);
    padding-bottom: 40px;
    margin-bottom: 0; /* sin solape en layout apilado móvil */
  }
  .sm-hero__gradient {
    display: none;
  }
  .sm-hero__wm--spicy {
    font-size: 72px;
    top: 12px;
    left: 8px;
    letter-spacing: 0.3em;
    transform: none;
  }
  .sm-hero__wm--minds {
    display: none;
  }
  .sm-hero__blobs {
    display: none;
  }
  .sm-hero__content {
    position: relative;
    inset: auto;
    width: auto;
    padding: 24px 24px 0;
    transform: translateX(-24px);
  }
  .sm-hero__headline {
    font-size: 18px;
  }
  .sm-hero__image-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 774 / 696;
    margin: 40px auto 0;
    transform: none;
  }
  .sm-hero--revealed .sm-hero__image-wrap {
    transform: none;
  }
  .sm-hero__glow {
    width: 320px;
    height: 300px;
    top: 0;
    right: -80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-hero__wm--spicy,
  .sm-hero__wm--minds,
  .sm-hero__content,
  .sm-hero__image-wrap,
  .sm-hero__cta,
  .sm-hero__headline,
  .sm-hero__body {
    transition: none;
  }
}


/* ══════════════════════ 03 · SOLUCIONES ══════════════════════ */
/* Sección blanca 1440×332.
   Estados de las flechas (data-state en la sección):
     1 — flecha grande (48px) sola en top 238, rebotando
     2 — la grande cae y desaparece; la pequeña (32px) aparece en 290
     3 — solo la pequeña, rebotando                                 */

.sm-soluciones {
  position: relative;
  width: 100%;
  height: 332px;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate; /* contiene el hard-light del swirl */
}

/* Swirl decorativo — 1573×561 en (-133,-115), hard-light, 51% */
.sm-soluciones__deco {
  position: absolute;
  z-index: 0;
  left: -133px;
  top: -115px;
  width: 1573px;
  height: 561px;
  object-fit: cover;
  mix-blend-mode: hard-light;
  opacity: 0.51;
  pointer-events: none;
  user-select: none;
}

/* Título — bloque de ~603px, centro vertical en y=166 */
.sm-soluciones__title {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 166px;
  transform: translate(-301px, -50%);
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #132a3f;
}
.sm-soluciones__line {
  display: block;
}
/* Línea 1: Light — "SOLUCIONES" pleno, "DIGITALES A" al 65% */
.sm-soluciones__w-mid {
  color: rgba(19, 42, 63, 0.65);
}
/* Línea 2: Bold — "LA MEDIDA" pleno, "DE TU NEGOCIO" al 50% */
.sm-soluciones__line--bold {
  font-weight: 700;
}
.sm-soluciones__w-soft {
  color: rgba(19, 42, 63, 0.5);
}
.sm-soluciones__dot {
  color: #f5313e;
}

/* ── Flechas (stroke #F5313E) ── */
.sm-soluciones__arrow {
  position: absolute;
  z-index: 2;
  left: 50%;
  display: block;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.5s ease;
}
.sm-soluciones__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* El rebote va en un wrapper interno para no pelear con los
   transforms de estado del enlace. */
.sm-soluciones__bounce {
  display: block;
  width: 100%;
  height: 100%;
  animation: sm-sol-drop 2.2s ease-in-out infinite;
}
@keyframes sm-sol-drop {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(6px); }
  65%      { transform: translateY(3px); }
}

.sm-soluciones__arrow--lg {
  top: 238px;
  width: 48px;
  height: 48px;
  margin-left: -24px;
}
.sm-soluciones__arrow--sm {
  top: 290px;
  width: 32px;
  height: 32px;
  margin-left: -16px;
}

.sm-soluciones__arrow:hover .sm-soluciones__bounce {
  animation-play-state: paused;
}
.sm-soluciones__arrow svg path {
  transition: stroke 0.25s ease;
}
.sm-soluciones__arrow:hover svg path {
  stroke: #132a3f;
}

/* ── Estados del ciclo ── */
.sm-soluciones[data-state='1'] .sm-soluciones__arrow--sm {
  opacity: 0;
  transform: translateY(-8px);
}
.sm-soluciones[data-state='2'] .sm-soluciones__arrow--lg,
.sm-soluciones[data-state='3'] .sm-soluciones__arrow--lg {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.sm-soluciones[data-state='2'] .sm-soluciones__arrow--lg .sm-soluciones__bounce,
.sm-soluciones[data-state='3'] .sm-soluciones__arrow--lg .sm-soluciones__bounce {
  animation: none;
}

/* ── Reveal al entrar en viewport ──
   El JS "arma" la sección (--armed) y luego la revela (--revealed).
   Sin JS todo queda visible.                                       */
.sm-soluciones--armed:not(.sm-soluciones--revealed) .sm-soluciones__line,
.sm-soluciones--armed:not(.sm-soluciones--revealed) .sm-soluciones__arrow {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}
.sm-soluciones--revealed .sm-soluciones__line--light {
  transition: opacity 0.7s ease 0.1s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.sm-soluciones--revealed .sm-soluciones__line--bold {
  transition: opacity 0.7s ease 0.25s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.sm-soluciones--revealed .sm-soluciones__arrow--lg {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.5s ease 0.45s;
}

/* ── Responsive soluciones ── */
@media (max-width: 1200px) {
  .sm-soluciones {
    height: 300px;
  }
  .sm-soluciones__title {
    font-size: 28px;
    top: 145px;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .sm-soluciones__arrow--lg { top: 205px; }
  .sm-soluciones__arrow--sm { top: 254px; }
  .sm-soluciones__deco {
    width: 1200px;
    left: -80px;
  }
}

@media (max-width: 768px) {
  .sm-soluciones {
    height: 260px;
  }
  .sm-soluciones__title {
    font-size: 20px;
    letter-spacing: 0.08em;
    top: 118px;
    width: calc(100% - 40px);
    white-space: normal;
    text-align: center;
  }
  .sm-soluciones__arrow--lg { top: 172px; }
  .sm-soluciones__arrow--sm { top: 218px; }
  .sm-soluciones__deco {
    width: 900px;
    left: -60px;
    top: -80px;
  }
}

@media (max-width: 480px) {
  .sm-soluciones__title {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-soluciones__bounce {
    animation: none;
  }
  .sm-soluciones__arrow,
  .sm-soluciones__line {
    transition: none;
  }
}


/* ══════════════════════ 04 · SERVICIOS ══════════════════════ */
/* Lienzo base 1440×687. Todo el estado vive en data-tab ("1"–"4"):
   escenas de imágenes (crossfade), paneles, pill deslizante y peso
   de las etiquetas. El HTML trae data-tab="1", así que sin JS se ve
   el tab 1 completo.                                               */

.sm-servicios {
  position: relative;
  width: 100%;
  height: 687px;
  overflow: hidden;
  isolation: isolate;
  background: #0a1e33;
}

.sm-servicios__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 687px;
  margin-left: -720px;
}

/* Degradado exacto de Figma: capa de 1582px que arranca en -110 */
.sm-servicios__grad {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -110px;
  width: 1440px;
  height: 1582px;
  background: linear-gradient(116.2deg, #132a3f 35.06%, #031428 68.5%);
}

/* Glow radial — 552×518 en (472,-280), blend screen */
.sm-servicios__glow {
  position: absolute;
  z-index: 1;
  left: 472px;
  top: -280px;
  width: 552px;
  height: 518px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #2392f3 0%, rgba(7, 34, 65, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Watermark "spicyMINDS" — 140px outline, 5%, rotado -2.44° */
.sm-servicios__wm {
  position: absolute;
  z-index: 2;
  left: -107px;
  top: 91.6px;
  transform: translateY(-50%) rotate(-2.44deg);
  font-family: 'MADE Outer Sans', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 140px;
  line-height: 1.2;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

/* ── Escenas de imágenes (una por tab, crossfade) ──
   Las escenas NO llevan z-index ni opacity: cualquier stacking
   context aquí aislaría los blends (overlay/lighten/soft-light) del
   degradado de fondo. El crossfade va en los .ph (blend + opacity en
   el mismo elemento sí conserva el blending).
   Verificado por píxel contra el render de Figma:
   render = opacidad · blend(gradiente, imagen ORIGINAL).            */
.sm-servicios__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sm-servicios__ph {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.sm-servicios[data-tab='1'] .sm-servicios__scene--1 .sm-servicios__ph,
.sm-servicios[data-tab='2'] .sm-servicios__scene--2 .sm-servicios__ph,
.sm-servicios[data-tab='3'] .sm-servicios__scene--3 .sm-servicios__ph,
.sm-servicios[data-tab='4'] .sm-servicios__scene--4 .sm-servicios__ph {
  opacity: 1;
}
.sm-servicios__ph img {
  flex: none;
  object-fit: cover;
}

/* Escena 1 — marca: marketing-strategy izq + influencer der */
.sm-servicios__ph--s1a { left: -79px; top: -50px; width: 872px; height: 675px; mix-blend-mode: overlay; }
.sm-servicios__ph--s1a img { width: 776px; height: 514px; opacity: 0.7; transform: rotate(-12.93deg); }
.sm-servicios__ph--s1b { left: 1032px; top: 402px; width: 473px; height: 367px; mix-blend-mode: overlay; }
.sm-servicios__ph--s1b img { width: 420px; height: 276px; opacity: 0.5; transform: rotate(-13.57deg); }

/* Escena 2 — contenido: influencer grande izq + facial der */
.sm-servicios__ph--s2a { left: -3px; top: -225px; width: 1078px; height: 836px; mix-blend-mode: overlay; }
.sm-servicios__ph--s2a img { width: 958px; height: 629px; opacity: 0.5; transform: rotate(-13.57deg); }
.sm-servicios__ph--s2b { left: 1149px; top: 142px; width: 502px; height: 419px; mix-blend-mode: lighten; }
.sm-servicios__ph--s2b img { width: 428px; height: 285px; opacity: 0.2; transform: rotate(-20.93deg); }

/* Escena 3 — leads: facial grande izq + social der */
.sm-servicios__ph--s3a { left: 60px; top: -120px; width: 1096px; height: 917px; mix-blend-mode: lighten; }
.sm-servicios__ph--s3a img { width: 935px; height: 624px; opacity: 0.6; transform: rotate(-20.93deg); }
.sm-servicios__ph--s3b { left: 1189px; top: -13px; width: 386px; height: 385px; mix-blend-mode: overlay; }
.sm-servicios__ph--s3b img { width: 296px; height: 295px; transform: rotate(-22.3deg); }

/* Escena 4 — ecommerce: social grande izq */
.sm-servicios__ph--s4a { left: -205px; top: -202px; width: 1009px; height: 1006px; mix-blend-mode: soft-light; }
.sm-servicios__ph--s4a img { width: 775px; height: 770px; transform: rotate(-22.3deg); }

/* ── Línea roja + tabs ── */
.sm-servicios__line {
  position: absolute;
  z-index: 5;
  left: 261px;
  top: 98px;
  width: 928px;
  height: 1px;
  background: #f5313e;
}

/* Pill rojo que se desliza — posición/ancho por tab */
.sm-servicios__pill {
  position: absolute;
  z-index: 5;
  top: 120px;
  height: 49px;
  border-radius: 8px;
  background: #f5313e;
  border: none;             /* sin borde blanco */
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-servicios[data-tab='1'] .sm-servicios__pill { left: 275px;  width: 245px; }
.sm-servicios[data-tab='2'] .sm-servicios__pill { left: 547px;  width: 245px; }
.sm-servicios[data-tab='3'] .sm-servicios__pill { left: 795px;  width: 245px; }
.sm-servicios[data-tab='4'] .sm-servicios__pill { left: 1022px; width: 167px; }

/* Botones de tab */
.sm-servicios__tab {
  position: absolute;
  z-index: 6;
  top: 112px;
  height: 67px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.27;
  letter-spacing: 0.32px;
  text-transform: capitalize;
  text-align: center;
  color: #ffffff;
  transition: font-weight 0.2s ease, opacity 0.25s ease;
}
/* Blindaje contra los estilos de botón del tema/Elementor: el
   resaltado del tab activo lo pone el pill, no el botón.           */
.sm-servicios__tab:hover,
.sm-servicios__tab:focus,
.sm-servicios__tab:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.sm-servicios__tab:hover {
  opacity: 0.8;
}
/* El blindaje de arriba anula el outline; se repone solo para
   navegación por teclado (sin anillo al hacer click con ratón). */
.sm-servicios__tab:focus-visible {
  outline: 2px solid #ffb900 !important;
  outline-offset: 2px;
}
.sm-servicios__tab--1 { left: 280px;  width: 236px; }
.sm-servicios__tab--2 { left: 566px;  width: 213px; }
.sm-servicios__tab--3 { left: 814px;  width: 213px; }
.sm-servicios__tab--4 { left: 1043px; width: 130px; }

.sm-servicios[data-tab='1'] .sm-servicios__tab--1,
.sm-servicios[data-tab='2'] .sm-servicios__tab--2,
.sm-servicios[data-tab='3'] .sm-servicios__tab--3,
.sm-servicios[data-tab='4'] .sm-servicios__tab--4 {
  font-weight: 700;
  opacity: 1;
}

/* ── Paneles de contenido ── */
.sm-servicios__panel {
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.sm-servicios[data-tab='1'] .sm-servicios__panel--1,
.sm-servicios[data-tab='2'] .sm-servicios__panel--2,
.sm-servicios[data-tab='3'] .sm-servicios__panel--3,
.sm-servicios[data-tab='4'] .sm-servicios__panel--4 {
  opacity: 1;
  transform: translateX(0);
}

/* Dots decorativos (stroke #F3313E) */
.sm-servicios__dots {
  position: absolute;
  left: 228px;
  top: 265px;
  width: 48px;
  height: 48px;
}

/* Título — NT Marley Bold 48, #f5f5f5 */
.sm-servicios__title {
  position: absolute;
  left: 228px;
  top: 380px;
  transform: translateY(-50%);
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: #f5f5f5;
  white-space: nowrap;
}

/* Cuerpo — NT Marley Light 15, blanco, lh 1.59 */
.sm-servicios__body {
  position: absolute;
  left: 732px;
  top: 392px;
  transform: translateY(-50%);
  width: 578px;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.59;
  letter-spacing: 0.3px;
  color: #ffffff;
}
.sm-servicios__body p {
  margin: 0 0 12px;
}
.sm-servicios__body p:last-child {
  margin-bottom: 0;
}
.sm-servicios__body strong {
  font-weight: 700;
}

/* ── Botones inferiores (fijos, comunes a los 4 tabs) ── */
.sm-servicios__btn {
  position: absolute;
  z-index: 6;
  top: 577px;
  width: 194px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffb900;
  border-radius: 18.5px;
  text-decoration: none;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.09;
  letter-spacing: 2.34px;
  text-transform: uppercase;
  color: #ffffff;
  transition: background 0.25s ease;
}
.sm-servicios__btn:hover {
  background: rgba(255, 185, 0, 0.14);
}
/* .sm-servicios__btn--1 ("Conoce más", left: 237px) eliminado */
.sm-servicios__btn--2 { left: 970px; }

/* Flecha (28px) justo a la derecha de cada botón */
.sm-servicios__btn-arrow {
  position: absolute;
  z-index: 6;
  top: 580px;
  width: 28px;
  height: 28px;
  pointer-events: none;
}
.sm-servicios__btn-arrow--2 { left: 1170px; }

/* ── Reveal al entrar en viewport ── */
.sm-servicios--armed:not(.sm-servicios--revealed) .sm-servicios__line,
.sm-servicios--armed:not(.sm-servicios--revealed) .sm-servicios__pill,
.sm-servicios--armed:not(.sm-servicios--revealed) .sm-servicios__tab,
.sm-servicios--armed:not(.sm-servicios--revealed) .sm-servicios__panel,
.sm-servicios--armed:not(.sm-servicios--revealed) .sm-servicios__btn,
.sm-servicios--armed:not(.sm-servicios--revealed) .sm-servicios__btn-arrow {
  opacity: 0 !important;
  transition: none;
}
.sm-servicios--revealed .sm-servicios__line,
.sm-servicios--revealed .sm-servicios__pill,
.sm-servicios--revealed .sm-servicios__tab {
  transition: opacity 0.7s ease, left 0.45s cubic-bezier(0.4, 0, 0.2, 1), width 0.45s cubic-bezier(0.4, 0, 0.2, 1), font-weight 0.2s ease;
}
.sm-servicios--revealed .sm-servicios__btn,
.sm-servicios--revealed .sm-servicios__btn-arrow {
  transition: opacity 0.7s ease 0.3s, background 0.25s ease;
}

/* ── Responsive servicios ──
   Breakpoint a 1200px (no 1024): el cuerpo de texto llega hasta
   x=1310 del lienzo de 1440, así que necesita 2×(1310−720) = 1180px
   de viewport para no quedar recortado por la derecha.             */
@media (max-width: 1200px) {
  .sm-servicios {
    height: auto;
    background: linear-gradient(116deg, #132a3f 25%, #031428 90%);
  }
  .sm-servicios__stage {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    margin-left: 0;
    padding: 32px 20px 48px;
    box-sizing: border-box;
  }
  .sm-servicios__grad {
    display: none;
  }
  .sm-servicios__glow {
    left: auto;
    right: -120px;
    top: -180px;
    width: 380px;
    height: 360px;
  }
  .sm-servicios__wm {
    display: none;
  }
  .sm-servicios__scene {
    display: none;
  }
  .sm-servicios__line {
    position: static;
    width: 100%;
    margin-bottom: 14px;
  }
  .sm-servicios__pill {
    display: none;
  }
  /* ── Tabs: carrusel horizontal con scroll-snap ──
     Apilados ocupaban 4 filas (media pantalla antes del contenido).
     Ahora son una tira deslizable: se arrastra con el dedo, cada
     chip se imanta al centro y el degradado de `mask` desvanece los
     bordes para que se vea que hay más a los lados. Los márgenes
     negativos hacen que la tira sangre hasta el borde de pantalla,
     que es lo que hace que se lea como carrusel y no como caja.    */
  .sm-servicios__nav-flow {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 -20px 28px;
    padding: 4px 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  .sm-servicios__nav-flow::-webkit-scrollbar {
    display: none;
  }
  .sm-servicios__tab {
    position: static;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 150px;
    height: auto;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    scroll-snap-align: center;
  }
  /* El <br> se MANTIENE visible. Ocultarlo pegaba las palabras
     ("PosicionamientoDe Marca"), porque un <br> no aporta espacio
     propio: al quitarlo se juntan los dos textos sin separación.   */

  /* Chip inactivo. El !important es necesario: el blindaje global
     fuerza `background: transparent` y `border: none` en hover y
     focus para protegerse del tema.                                */
  .sm-servicios__tab,
  .sm-servicios__tab:hover,
  .sm-servicios__tab:focus {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  /* Chip activo (va después: misma especificidad, gana el orden) */
  .sm-servicios__tab[aria-selected='true'],
  .sm-servicios__tab[aria-selected='true']:hover,
  .sm-servicios__tab[aria-selected='true']:focus {
    background: #f5313e !important;
    border-color: #f5313e !important;
    font-weight: 700;
  }
  /* Paneles: flujo normal, solo el activo */
  .sm-servicios__panel {
    position: static;
    display: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .sm-servicios[data-tab='1'] .sm-servicios__panel--1,
  .sm-servicios[data-tab='2'] .sm-servicios__panel--2,
  .sm-servicios[data-tab='3'] .sm-servicios__panel--3,
  .sm-servicios[data-tab='4'] .sm-servicios__panel--4 {
    display: block;
  }
  .sm-servicios__dots {
    position: static;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }
  .sm-servicios__title {
    position: static;
    transform: none;
    margin: 0 0 18px;
    font-size: 30px;
    white-space: normal;
  }
  .sm-servicios__body {
    position: static;
    transform: none;
    width: auto;
    max-width: 640px;
    margin-bottom: 32px;
  }
  /* Botones en fila */
  .sm-servicios__btn {
    position: static;
    display: inline-flex;
    margin-right: 12px;
    margin-top: 4px;
  }
  .sm-servicios__btn-arrow {
    display: none;
  }
}

/* ══════ ≤768px: ACORDEÓN ══════
   En móvil el carrusel obliga a descubrir el scroll lateral y deja 3
   de los 4 servicios fuera de pantalla. El acordeón los muestra todos
   como cabeceras desplegables.

   El truco está en `display: contents` sobre .sm-servicios__nav-flow:
   disuelve su caja y los 4 <button> pasan a ser hijos directos del
   stage, que se convierte en flex column. Así se pueden INTERCALAR
   cabecera → panel → cabecera → panel con `order`, sin tocar el HTML
   (en el markup los 4 tabs van juntos y luego los 4 paneles).       */
@media (max-width: 768px) {
  .sm-servicios__stage {
    display: flex;
    flex-direction: column;
  }
  .sm-servicios__nav-flow {
    display: contents;
  }

  /* Intercalado cabecera/panel */
  .sm-servicios__line     { order: 0; }
  .sm-servicios__tab--1   { order: 1; }
  .sm-servicios__panel--1 { order: 2; }
  .sm-servicios__tab--2   { order: 3; }
  .sm-servicios__panel--2 { order: 4; }
  .sm-servicios__tab--3   { order: 5; }
  .sm-servicios__panel--3 { order: 6; }
  .sm-servicios__tab--4   { order: 7; }
  .sm-servicios__panel--4 { order: 8; }
  .sm-servicios__btn--2   { order: 9; }

  /* ── Cabeceras ── */
  .sm-servicios__tab {
    /* `relative` (no `static`) porque el chevron va en un ::after
       absoluto y necesita este elemento como containing block.
       OJO: en relative SÍ se aplican `top`/`left`, y la regla base de
       escritorio trae `top: 112px` + `left: 280/566/814/1043px`. Sin
       este `inset: auto` los 4 tabs se pintan 112px más abajo y
       desplazados a la derecha (tres de ellos fuera de pantalla),
       dejando además un hueco vacío donde estaban en el flujo.      */
    position: relative;
    inset: auto;
    display: block;
    width: 100% !important;
    min-width: 0;
    margin: 0 0 8px;
    padding: 15px 46px 15px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    scroll-snap-align: none;
  }
  /* Chevron. Va en ::after posicionado en absoluto y NO con flex:
     un flex container partiría el texto en items separados por el
     <br> y perdería el salto de línea.                             */
  .sm-servicios__tab::after {
    content: '';
    position: absolute;
    right: 19px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease, margin-top 0.3s ease;
  }
  .sm-servicios__tab[aria-expanded='true']::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  /* ── Paneles: despliegue animado con grid 0fr → 1fr ──
     Es la única forma de animar "de 0 a altura automática" sin
     inventarse un max-height. Todos quedan renderizados (no
     display:none), por eso el inner se oculta con visibility para
     que el contenido plegado no sea navegable ni leído.            */
  .sm-servicios__panel,
  .sm-servicios[data-tab='1'] .sm-servicios__panel--1,
  .sm-servicios[data-tab='2'] .sm-servicios__panel--2,
  .sm-servicios[data-tab='3'] .sm-servicios__panel--3,
  .sm-servicios[data-tab='4'] .sm-servicios__panel--4 {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }
  .sm-servicios[data-tab='1'] .sm-servicios__panel--1,
  .sm-servicios[data-tab='2'] .sm-servicios__panel--2,
  .sm-servicios[data-tab='3'] .sm-servicios__panel--3,
  .sm-servicios[data-tab='4'] .sm-servicios__panel--4 {
    grid-template-rows: 1fr;
  }
  .sm-servicios__panel-inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0.35s;
  }
  .sm-servicios[data-tab='1'] .sm-servicios__panel--1 .sm-servicios__panel-inner,
  .sm-servicios[data-tab='2'] .sm-servicios__panel--2 .sm-servicios__panel-inner,
  .sm-servicios[data-tab='3'] .sm-servicios__panel--3 .sm-servicios__panel-inner,
  .sm-servicios[data-tab='4'] .sm-servicios__panel--4 .sm-servicios__panel-inner {
    visibility: visible;
  }

  .sm-servicios__dots {
    width: 32px;
    height: 32px;
    margin: 14px 0 6px 2px;
  }
  .sm-servicios__title {
    font-size: 22px;
    margin: 0 0 12px 2px;
  }
  .sm-servicios__body {
    margin: 0 0 20px 2px;
  }

  /* Botones apilados (194 + 194 no caben en 375px) */
  .sm-servicios__btn {
    align-self: flex-start;
    margin: 12px 0 0;
  }
}

@media (max-width: 480px) {
  /* 20px, no 24: el bloque de ≤768 ya lo baja a 22 y este iba
     después, así que lo estaba volviendo a SUBIR en las pantallas
     más pequeñas.                                                  */
  .sm-servicios__title { font-size: 20px; }
  .sm-servicios__tab { font-size: 13px; }
  .sm-servicios__btn { width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-servicios__scene,
  .sm-servicios__panel,
  .sm-servicios__pill,
  .sm-servicios__tab,
  .sm-servicios__line,
  .sm-servicios__btn,
  .sm-servicios__btn-arrow {
    transition: none !important;
  }
}


/* ══════════════════════ 05 · VIDEO ══════════════════════ */
/* El fondo en Figma es transparente: hereda el degradado de SERVICIOS
   que continúa por detrás. Aquí se replica esa MISMA capa
   (1440×1582, 116.2°) desplazada -769px, de modo que si esta sección
   va pegada justo debajo de Servicios el empalme es invisible.      */

.sm-video {
  position: relative;
  width: 100%;
  height: 663px;
  overflow: hidden;
  isolation: isolate;
  background: #031428; /* fallback */
}

.sm-video__grad {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -769px;
  width: 1440px;
  height: 1582px;
  margin-left: -720px;
  background: linear-gradient(116.2deg, #132a3f 35.06%, #031428 68.5%);
}

/* Watermark "spicy" — outline teal #41EDD8 al 6%, en (5,94) */
.sm-video__wm {
  position: absolute;
  z-index: 1;
  left: calc(50% - 715px);
  top: 94px;
  font-family: 'MADE Outer Sans', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 200px;
  line-height: 1.2;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #41edd8;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* Label "CONOCE NUESTRA TRAYECTORIA" — 16px #ffb900, tracking 0.71em */
.sm-video__label {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 71px;
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: 16px;
  line-height: 1.43;
  letter-spacing: 0.71em;
  text-transform: uppercase;
  text-align: center;
  color: #ffb900;
}
.sm-video__label strong {
  font-weight: 700;
}

/* Player 743×429 centrado en top 130 */
.sm-video__player {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 130px;
  width: 743px;
  height: 429px;
  transform: translateX(-50%);
  background: #d9d9d9; /* placeholder gris de Figma */
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
              0 8px 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease;
}
.sm-video__player:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12),
              0 16px 56px rgba(0, 0, 0, 0.6);
}
.sm-video__player:focus-visible {
  outline: 2px solid #ffb900;
  outline-offset: 3px;
}

/* Poster opcional (si el <img> falla, queda el gris de Figma) */
.sm-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.4s ease;
}
.sm-video__player:hover .sm-video__poster {
  transform: scale(1.03);
}
.sm-video__player.is-playing .sm-video__poster {
  opacity: 0;
  pointer-events: none;
}

/* Botón / ícono videocam */
.sm-video__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.sm-video__play:hover,
.sm-video__play:focus,
.sm-video__play:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.sm-video__player:hover .sm-video__play {
  transform: translate(-50%, -50%) scale(1.15);
}
.sm-video__play svg {
  display: block;
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.sm-video__player.is-playing .sm-video__play {
  opacity: 0;
  pointer-events: none;
}

/* Reproductor inyectado al hacer click (<video> o <iframe>) */
.sm-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
  object-fit: contain; /* para <video>: encaja sin recortar */
  background: #031428;
}
.sm-video__iframe.is-loaded {
  opacity: 1;
}

/* ── Reveal al entrar en viewport ── */
.sm-video--armed:not(.sm-video--revealed) .sm-video__label,
.sm-video--armed:not(.sm-video--revealed) .sm-video__player {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
}
.sm-video--armed:not(.sm-video--revealed) .sm-video__player {
  transform: translateX(-50%) translateY(20px) scale(0.98);
}
.sm-video--revealed .sm-video__label {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sm-video--revealed .sm-video__player {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.8s ease 0.2s,
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              box-shadow 0.3s ease;
}

/* ── Responsive video ── */
@media (max-width: 900px) {
  .sm-video {
    height: auto;
    padding: 56px 0 64px;
  }
  .sm-video__label {
    position: static;
    margin-bottom: 36px;
    padding: 0 20px;
    font-size: 14px;
    letter-spacing: 0.4em;
  }
  .sm-video__player {
    position: relative;
    left: auto;
    top: auto;
    width: min(90vw, 743px);
    height: auto;
    aspect-ratio: 743 / 429;
    margin: 0 auto;
    transform: none;
  }
  .sm-video--armed:not(.sm-video--revealed) .sm-video__player,
  .sm-video--revealed .sm-video__player {
    transform: none;
  }
  .sm-video__wm {
    left: -20px;
    top: 120px;
    font-size: 120px;
  }
}

@media (max-width: 600px) {
  .sm-video {
    padding: 40px 0 48px;
  }
  .sm-video__label {
    font-size: 12px;
    letter-spacing: 0.25em;
  }
  .sm-video__wm {
    font-size: 70px;
    top: 80px;
    letter-spacing: 0.3em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-video__label,
  .sm-video__player,
  .sm-video__poster,
  .sm-video__play {
    transition: none !important;
  }
}


/* ═══════════ 06 · PREMIOS + CERTIFICACIONES + CLIENTES ═══════════ */

/* ══════════ PREMIOS ══════════ */
/* Lienzo de 1440 centrado con recorte lateral. Altura 843px: el
   diseño de 1042 queda solapado por Certificaciones desde y=843.   */
.sm-premios {
  position: relative;
  width: 100%;
  height: 843px;
  overflow: hidden;
  isolation: isolate;
  background: #031428;
}
.sm-premios__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 843px;
  margin-left: -720px;
}

/* Glows radiales (blend screen) */
.sm-premios__glow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #2392f3 0%, rgba(7, 34, 65, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.sm-premios__glow--1 { left: -58px; top: 118px; width: 488px; height: 458px; }
.sm-premios__glow--2 { left: 477px; top: 36px;  width: 534px; height: 501px; }
.sm-premios__glow--3 { left: 49px;  top: 37px;  width: 488px; height: 458px; }

/* Watermark "spicyMINDS" — 96px outline blanco 14%, rotado -2.44° */
.sm-premios__wm {
  position: absolute;
  z-index: 2;
  left: -123px;
  top: 66px;
  transform: translateY(-50%) rotate(-2.44deg);
  font-family: 'MADE Outer Sans', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 1.2;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

/* Título "PREMIOS" — 96px #ffb900, rotado -2.44°, entra desde la izq. */
.sm-premios__title {
  position: absolute;
  z-index: 3;
  left: 425px;
  top: 97px;
  margin: 0;
  transform: translateY(-50%) rotate(-2.44deg);
  font-family: 'MADE Outer Sans', 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 1.2;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffb900;
}

/* Trofeo #LatamDigital — 434×346 en (168,279) */
.sm-premios__trophy {
  position: absolute;
  z-index: 4;
  left: 168px;
  top: 279px;
  width: 434px;
  height: 346px;
}

/* Texto del premio — 24px uppercase, centro y=682, w449 */
.sm-premios__award {
  position: absolute;
  z-index: 4;
  left: 268px;
  top: 682px;
  transform: translateY(-50%);
  width: 449px;
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.72px;
  text-transform: uppercase;
  color: #ffffff;
}
.sm-premios__award-l1 { display: block; font-weight: 700; color: #ffb900; }
.sm-premios__award-l2 { display: block; font-weight: 700; }
.sm-premios__award-l3 { display: block; font-weight: 200; }

/* Línea dorada — 928px centrada en y=824 */
.sm-premios__line {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 824px;
  width: 928px;
  height: 1px;
  margin-left: -464px;
  background: #ffb900;
  transform-origin: left center;
}

/* ── Tarjetas glassmorphism ──
   El wrapper solo agrupa para el layout móvil; en desktop es
   transparente al posicionamiento absoluto de las tarjetas.        */
.sm-premios__cards-flow {
  display: contents;
}
.sm-premios__card {
  position: absolute;
  z-index: 4;
  width: 222px;   /* envuelve glass 204 + medalla que sobresale */
  height: 264px;
  transition: transform 0.35s ease;
}
.sm-premios__card:hover {
  transform: translateY(-5px);
}
.sm-premios__card--1 { left: 717px; top: 186px; }
.sm-premios__card--2 { left: 962px; top: 186px; }
.sm-premios__card--3 { left: 964px; top: 468px; }
.sm-premios__card--4 { left: 727px; top: 468px; }

.sm-premios__card-glass {
  position: absolute;
  left: 18px;
  top: 16px;
  width: 204px;
  height: 248px;
}
.sm-premios__card-medal {
  position: absolute;
  left: 0;
  top: 0;
  width: 73px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
.sm-premios__card-text {
  position: absolute;
  left: 46px;
  top: 146px;
  transform: translateY(-50%);
  width: 152px;
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.45px;
  text-transform: uppercase;
  color: #ffffff;
}
.sm-premios__card-text small {
  display: block;
  font-weight: 300;
  font-size: 15px;
}
/* Logo del certamen: rectángulo blanco recortado con la máscara */
.sm-premios__card-pasa {
  position: absolute;
  left: 46px;
  top: 197px;
  width: 118px;
  height: 35px;
  background: #ffffff;
  -webkit-mask-image: url('https://spicyminds.mx/wp-content/uploads/2026/07/pasa-mask.png');
  mask-image: url('https://spicyminds.mx/wp-content/uploads/2026/07/pasa-mask.png');
  -webkit-mask-size: 166px 32px;
  mask-size: 166px 32px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.sm-premios__card-echo {
  position: absolute;
  left: 46px;
  top: 195px;
  width: 83px;
  height: 26px;
  mix-blend-mode: plus-lighter;
}

/* ── Reveal PREMIOS ── */
.sm-premios--armed:not(.sm-premios--revealed) .sm-premios__title {
  transform: translateY(-50%) translateX(-847px) rotate(-2.44deg);
  opacity: 0;
}
.sm-premios--revealed .sm-premios__title {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.sm-premios--armed:not(.sm-premios--revealed) .sm-premios__trophy,
.sm-premios--armed:not(.sm-premios--revealed) .sm-premios__award {
  opacity: 0;
  transform: translateX(-120px);
}
.sm-premios--armed:not(.sm-premios--revealed) .sm-premios__award {
  transform: translateY(-50%) translateX(-120px);
}
.sm-premios--revealed .sm-premios__trophy {
  transition: opacity 0.9s ease 0.35s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.sm-premios--revealed .sm-premios__award {
  transition: opacity 0.9s ease 0.5s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.sm-premios--armed:not(.sm-premios--revealed) .sm-premios__card {
  opacity: 0;
  transform: translateY(26px);
}
.sm-premios--revealed .sm-premios__card--1 { transition: opacity .7s ease .55s, transform .7s cubic-bezier(.16,1,.3,1) .55s; }
.sm-premios--revealed .sm-premios__card--2 { transition: opacity .7s ease .7s,  transform .7s cubic-bezier(.16,1,.3,1) .7s; }
.sm-premios--revealed .sm-premios__card--4 { transition: opacity .7s ease .85s, transform .7s cubic-bezier(.16,1,.3,1) .85s; }
.sm-premios--revealed .sm-premios__card--3 { transition: opacity .7s ease 1s,   transform .7s cubic-bezier(.16,1,.3,1) 1s; }
.sm-premios--armed:not(.sm-premios--revealed) .sm-premios__line {
  transform: scaleX(0);
}
.sm-premios--revealed .sm-premios__line {
  transition: transform 1s ease 1.1s;
}

/* ══════════ CERTIFICACIONES ══════════ */
.sm-cert {
  position: relative;
  width: 100%;
  min-height: 349px;
  background: #031428;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sm-cert__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0 24px;
}
.sm-cert__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-cert__item img {
  display: block;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.sm-cert__item img:hover {
  transform: scale(1.05);
}
/* Tamaños exactos de Figma (variante final) */
.sm-cert__item--1 img { width: 151px; height: 151px; }
.sm-cert__item--2 img { width: 148px; height: 148px; }
.sm-cert__item--3 img { width: 170px; height: 170px; }
.sm-cert__item--4 img { width: 140px; height: 140px; }
.sm-cert__item--5 img { width: 153px; height: 153px; }

/* Reveal con stagger */
.sm-cert--armed:not(.sm-cert--revealed) .sm-cert__item {
  opacity: 0;
  transform: translateY(12px);
}
.sm-cert--revealed .sm-cert__item--1 { transition: opacity .6s ease .05s, transform .6s ease .05s; }
.sm-cert--revealed .sm-cert__item--2 { transition: opacity .6s ease .15s, transform .6s ease .15s; }
.sm-cert--revealed .sm-cert__item--3 { transition: opacity .6s ease .25s, transform .6s ease .25s; }
.sm-cert--revealed .sm-cert__item--4 { transition: opacity .6s ease .35s, transform .6s ease .35s; }
.sm-cert--revealed .sm-cert__item--5 { transition: opacity .6s ease .45s, transform .6s ease .45s; }

/* ══════════ CLIENTES ══════════ */
.sm-clientes {
  position: relative;
  width: 100%;
  min-height: 610px;
  background: #ffffff;
  overflow: hidden;
  padding: 78px 0 100px;
  box-sizing: border-box;
}
/* Título — NT Marley Bold 48px #004372 */
.sm-clientes__title {
  margin: 0 0 28px;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.29;
  letter-spacing: 0.96px;
  text-align: center;
  color: #004372;
}
/* Grid de logos — 1107×338 centrado */
.sm-clientes__logos {
  display: block;
  width: 1107px;
  max-width: calc(100% - 60px);
  height: auto;
  margin: 0 auto;
}

/* Reveal */
.sm-clientes--armed:not(.sm-clientes--revealed) .sm-clientes__title {
  opacity: 0;
  transform: translateY(-18px);
}
.sm-clientes--revealed .sm-clientes__title {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sm-clientes--armed:not(.sm-clientes--revealed) .sm-clientes__logos {
  opacity: 0;
  transform: scale(0.92);
}
.sm-clientes--revealed .sm-clientes__logos {
  transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

/* ── Responsive premios/cert/clientes ──
   Breakpoint a 1200px (no 1024): el trofeo arranca en x=168 del
   lienzo de 1440, así que necesita 2×(720−168) = 1104px de viewport
   para no quedar recortado por la izquierda.                       */
@media (max-width: 1200px) {
  .sm-premios {
    height: auto;
  }
  .sm-premios__stage {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    margin-left: 0;
    padding: 48px 20px 56px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sm-premios__wm { display: none; }
  .sm-premios__glow--1 { left: -160px; top: 40px; }
  .sm-premios__glow--2 { left: auto; right: -180px; top: 200px; }
  .sm-premios__glow--3 { display: none; }
  .sm-premios__title {
    position: static;
    transform: rotate(-2.44deg);
    font-size: 48px;
    margin-bottom: 32px;
  }
  .sm-premios--armed:not(.sm-premios--revealed) .sm-premios__title {
    transform: translateX(-120vw) rotate(-2.44deg);
  }
  .sm-premios__trophy {
    position: static;
    width: 320px;
    height: auto;
    margin-bottom: 16px;
  }
  .sm-premios__award {
    position: static;
    transform: none;
    width: auto;
    max-width: 420px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 40px;
  }
  .sm-premios--armed:not(.sm-premios--revealed) .sm-premios__award {
    transform: translateX(-120px);
  }
  /* Tarjetas en grid fluido */
  .sm-premios__cards-flow {
    display: grid;
    grid-template-columns: repeat(2, 222px);
    gap: 24px;
    justify-content: center;
  }
  .sm-premios__card {
    position: relative;
    left: auto !important;
    top: auto !important;
  }
  .sm-premios__line {
    position: static;
    width: min(928px, 100%);
    margin: 44px auto 0;
  }
  .sm-cert__item--1 img,
  .sm-cert__item--2 img,
  .sm-cert__item--4 img,
  .sm-cert__item--5 img { width: 110px; height: 110px; }
  .sm-cert__item--3 img { width: 126px; height: 126px; }
  .sm-clientes { min-height: 0; padding: 56px 0 64px; }
  .sm-clientes__title { font-size: 36px; }
}

/* ≤768px: más aire lateral en el grid de logos de clientes.
   La regla base deja 30px por lado (`calc(100% - 60px)`).
   --sm-logos-gap es el único valor a tocar: es el margen POR LADO.
   Subirlo encoge la imagen (es un PNG plano de 2215×676 con la
   rejilla entera, así que se escala en bloque).                    */
@media (max-width: 768px) {
  .sm-clientes__logos {
    --sm-logos-gap: 56px;
    max-width: calc(100% - var(--sm-logos-gap) * 2);
    padding: 0px 25px!important;
  }
}

/* ══════ Tarjetas de premios en móvil: rejilla 2×2 ══════
   Antes caían a una sola columna y quedaban las 4 apiladas. Aquí se
   mantienen 2 por fila reduciéndolas con `transform: scale`.

   La caja de layout se fija al tamaño YA escalado (222·k × 264·k) y
   los hijos se quedan en sus coordenadas originales: el scale los
   encoge justo hasta llenar esa caja. Es la forma de reducir la
   tarjeta sin reescribir las ~10 posiciones absolutas de dentro
   (vidrio, medalla, texto, logo del certamen).                     */
@media (max-width: 540px) {
  .sm-premios__cards-flow {
    --sm-card-k: 0.78;
    grid-template-columns: repeat(2, calc(222px * var(--sm-card-k)));
    gap: 10px;
  }
  .sm-premios__card {
    width: calc(222px * var(--sm-card-k));
    height: calc(264px * var(--sm-card-k));
    transform: scale(var(--sm-card-k));
    transform-origin: top left;
  }
  /* El scale hay que arrastrarlo a los demás estados de transform, o
     el hover y el reveal devolverían la tarjeta a tamaño real.      */
  .sm-premios__card:hover {
    transform: scale(var(--sm-card-k)) translateY(-5px);
  }
  .sm-premios--armed:not(.sm-premios--revealed) .sm-premios__card {
    transform: scale(var(--sm-card-k)) translateY(26px);
  }

  .sm-cert {
    min-height: 0;
    padding: 40px 0;
  }
  .sm-cert__item img { max-width: 96px; max-height: 96px; }
  .sm-clientes__title { font-size: 28px; }
}

/* Pantallas estrechas (iPhone SE, 320px): las dos columnas siguen
   cabiendo bajando el factor y recortando el padding lateral.
   320 − 24 de padding = 296 ≥ 2 × 142.1 + 8 = 292.2.
   Solo hace falta redefinir la variable: las reglas de ancho, alto
   y transform del bloque de arriba la leen y se recalculan solas.  */
@media (max-width: 400px) {
  .sm-premios__stage {
    padding-left: 12px;
    padding-right: 12px;
  }
  .sm-premios__cards-flow {
    --sm-card-k: 0.64;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-premios__title, .sm-premios__trophy, .sm-premios__award,
  .sm-premios__card, .sm-premios__line,
  .sm-cert__item, .sm-clientes__title, .sm-clientes__logos {
    transition: none !important;
  }
}


/* ══════════════════════ 07 · CONTACTO ══════════════════════ */
/* Lienzo 1440×819, fondo blanco, 2 columnas: izquierda (headline +
   teléfono horizontal con "CON TAC TO"), derecha (tarjeta con
   formulario de 9 campos + legal debajo).                          */

.sm-contacto {
  position: relative;
  width: 100%;
  min-height: 819px;
  background: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

/* ── Arcos decorativos (SVG, muy sutiles) ── */
.sm-contacto__deco {
  position: absolute;
  z-index: 0;
  left: -420px;
  top: -560px;
  width: 1300px;
  height: 1780px;
  transform: rotate(118.33deg) skewX(12.77deg);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
}

/* ── Grupo teléfono + "CON TAC TO" ──
   El wrapper agrupa ambos para poder moverlos juntos en móvil.
   IMPORTANTE: no lleva z-index ni ninguna propiedad que cree
   stacking context, para que el hard-light del teléfono siga
   mezclándose con el fondo de la sección exactamente igual.
   Desktop: 468×348 en (0,368) — idéntico al diseño original.       */
.sm-contacto__phone-wrap {
  position: absolute;
  left: 0;
  top: 368px;
  width: 468px;
  height: 348px;
  pointer-events: none;
}

/* Teléfono horizontal (blend hard-light) */
.sm-contacto__phone {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* "CON TAC TO" — MADE Outer Sans Black 75px, rojo.
   left/top en % del wrapper = (129px, 200px) sobre 468×348.        */
.sm-contacto__label {
  position: absolute;
  z-index: 2;
  left: 27.564%;
  top: 57.471%;
  transform: translateY(-50%);
  margin: 0;
  font-family: 'MADE Outer Sans', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 75px;
  line-height: 0.91;
  letter-spacing: -5.25px;
  text-transform: uppercase;
  color: #f5313e;
  pointer-events: none;
  user-select: none;
}

/* ── Layout de columnas ── */
.sm-contacto__layout {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Columna izquierda */
.sm-contacto__left {
  flex: 1 1 auto;
  min-width: 0;
  padding: 134px 0 0 61px;
}

/* Flecha CTA roja */
.sm-contacto__arrow {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
}

/* Headline — NT Marley 40px, rojo, uppercase, lh 0.92 */
.sm-contacto__headline {
  margin: 0 0 22px;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 0.92;
  letter-spacing: -3.6px;
  text-transform: uppercase;
  color: #f5313e;
  white-space: nowrap;
}
.sm-contacto__headline strong {
  display: block;
  margin-top: 6px;
  font-weight: 700;
}

/* Subtítulo — NT Marley Medium 16px navy */
.sm-contacto__sub {
  margin: 0;
  font-family: 'NT Marley', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.29;
  color: #002a48;
}

/* Columna derecha */
.sm-contacto__right {
  flex: 0 0 530px;
  padding: 59px 156px 40px 0;
  box-sizing: content-box;
}

/* ── Tarjeta del formulario — 530px, radio 19, borde #ddd ── */
.sm-contacto__card {
  width: 530px;
  border: 1px solid #dddddd;
  border-radius: 19px;
  background: #ffffff;
  padding: 44px 17px 30px;
  box-sizing: border-box;
}

.sm-contacto__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sm-contacto__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sm-contacto__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sm-contacto__field label {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #1e1e1e;
}
.sm-contacto__req {
  color: #f5313e;
}
.sm-contacto__field input,
.sm-contacto__field textarea {
  width: 100%;
  height: 41px;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: #1e1e1e;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sm-contacto__field textarea {
  height: 72px;
  padding: 12px 16px;
  resize: vertical;
  min-height: 60px;
  max-height: 180px;
}
.sm-contacto__field input::placeholder,
.sm-contacto__field textarea::placeholder {
  color: #b3b3b3;
}
.sm-contacto__field input:focus,
.sm-contacto__field textarea:focus {
  border-color: #f5313e;
  box-shadow: 0 0 0 3px rgba(245, 49, 62, 0.1);
}
.sm-contacto__field input.is-error,
.sm-contacto__field textarea.is-error {
  border-color: #f5313e;
  background: rgba(245, 49, 62, 0.03);
}

/* Botón Submit — rojo, radio 8, Inter 16 #f5f5f5 */
.sm-contacto__submit {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  background: #f5313e;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #f5f5f5;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.sm-contacto__submit:hover {
  background: #d92835;
  box-shadow: 0 4px 14px rgba(245, 49, 62, 0.3);
}
.sm-contacto__submit:disabled {
  opacity: 0.7;
  cursor: default;
}
.sm-contacto__submit.is-loading .sm-contacto__submit-text {
  visibility: hidden;
}
.sm-contacto__submit-loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: sm-contacto-spin 0.7s linear infinite;
}
.sm-contacto__submit.is-loading .sm-contacto__submit-loader {
  display: block;
}
@keyframes sm-contacto-spin {
  to { transform: rotate(360deg); }
}

/* Mensaje de éxito */
.sm-contacto__success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.08);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #15803d;
}
.sm-contacto__success[hidden] {
  display: none;
}

/* Legal — FUERA de la tarjeta, 9px, lh 1.81 */
.sm-contacto__legal {
  margin: 14px 0 0 7px;
  width: 513px;
  max-width: 100%;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.81;
  color: #000000;
}
.sm-contacto__legal a {
  color: #f5313e;
}

/* ── Reveal ── */
.sm-contacto--armed:not(.sm-contacto--revealed) .sm-contacto__left {
  opacity: 0;
  transform: translateX(-40px);
}
.sm-contacto--revealed .sm-contacto__left {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.1s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.sm-contacto--armed:not(.sm-contacto--revealed) .sm-contacto__label {
  opacity: 0;
  transform: translateY(-50%) translateX(-30px);
}
.sm-contacto--revealed .sm-contacto__label {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 0.8s ease 0.55s, transform 0.8s ease 0.55s;
}
.sm-contacto--armed:not(.sm-contacto--revealed) .sm-contacto__right {
  opacity: 0;
  transform: translateY(30px);
}
.sm-contacto--revealed .sm-contacto__right {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease 0.3s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* ── Responsive contacto ── */
@media (max-width: 1360px) {
  .sm-contacto__right {
    padding-right: 40px;
  }
  .sm-contacto__headline {
    white-space: normal;
  }
}

/* ≤1100px: una sola columna.
   `display: contents` sobre el layout disuelve su caja para que
   izquierda, teléfono y formulario sean hermanos directos de la
   sección y se puedan ordenar con flex `order`. Así el bloque
   teléfono + "CONTACTO" queda ENTRE el texto y el formulario, en
   lugar de flotar sobre el aviso legal.                            */
@media (max-width: 1100px) {
  .sm-contacto {
    display: flex;
    flex-direction: column;
  }
  .sm-contacto__layout {
    display: contents;
  }
  .sm-contacto__left {
    order: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 64px 32px 0;
  }
  .sm-contacto__phone-wrap {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: min(72vw, 468px);
    height: auto;
    aspect-ratio: 468 / 348;
    margin: 8px 0 0 -16px;
  }
  .sm-contacto__label {
    font-size: clamp(34px, 9vw, 75px);
    letter-spacing: -0.07em;
  }
  .sm-contacto__right {
    order: 3;
    width: 100%;
    box-sizing: border-box;
    flex: none;
    padding: 32px 32px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sm-contacto__card {
    width: 100%;
    max-width: 560px;
  }
}

/* ≤768px: fuera el bloque teléfono + "CON TAC TO".
   Es puramente decorativo y en pantalla estrecha se come una
   pantalla entera entre el texto y el formulario. Entre 769 y
   1100px sí se mantiene (ahí hay ancho para que aporte).           */
@media (max-width: 768px) {
  .sm-contacto__phone-wrap {
    display: none;
  }
}

@media (max-width: 600px) {
  .sm-contacto__headline {
    font-size: 28px;
    letter-spacing: -2px;
  }
  .sm-contacto__row {
    grid-template-columns: 1fr;
  }
  .sm-contacto__card {
    padding: 28px 16px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-contacto__left,
  .sm-contacto__right,
  .sm-contacto__label {
    transition: none !important;
  }
}/* End custom CSS */