/* =========================================================================
   Dimia Studio — Landing Page
   Stack: HTML5 + CSS3 vanilla, no frameworks
   Fuentes locales: Helvetica Now Display + ITC Garamond Std
   ========================================================================= */

/* ───────── Fuentes ───────── */
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ITC Garamond Std';
  src: url('../fonts/ITCGaramondStd-LtCond.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ITC Garamond Std';
  src: url('../fonts/ITC Garamond Std Book Condensed Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ───────── Utilidades a11y ───────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ───────── Variables ───────── */
:root {
  --navy: #0D0A23;
  --navy-2: #141034;
  --purple: #7858A8;
  --mint: #00E0B0;
  --cyan: #50F0F8;
  --white: #FFFFFF;
  --text-soft: rgba(255, 255, 255, 0.85);

  --f-sans: 'Helvetica Now Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-serif: 'ITC Garamond Std', 'Cormorant Garamond', Georgia, serif;

  --maxw: 1280px;
  --pad-x: clamp(24px, 4vw, 64px);
}

/* ───────── Reset ───────── */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; display: block; }
html, body { width: 100%; }
/* scroll-behavior:smooth rompe GSAP ScrollTrigger en iOS Safari (doc oficial
   GSAP): cuando ST llama refresh() + smooth actúa como transición,
   los cálculos de scroll se desincronizan y el pin no activa.
   En desktop se siente igual sin smooth (la inercia del trackpad ya es suave).
   Scroll hacia anclas: usar ScrollToPlugin de GSAP o JS con behavior:'auto'. */
html { scroll-behavior: auto; }
body {
  background: var(--navy);
  color: var(--white);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }
ul { list-style: none; }

::selection { background: var(--purple); color: var(--white); }

/* ───────── Utilities ───────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border: 1px solid transparent;
  color: var(--white);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  transition: background 0.3s ease, color 0.25s ease, transform 0.3s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.btn-outline:hover {
  background: var(--purple);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(120, 88, 168, 0.45);
  border-color: var(--purple);
}
.btn-outline:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 14px rgba(120, 88, 168, 0.4);
}
.btn-outline:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ═════════════════════════════════════════
   NAV — Logo izquierda + socials derecha
   ═════════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 22px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(13, 10, 35, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px var(--pad-x);
}
.nav__logo {
  display: flex;
  align-items: center;
  color: var(--white);
}
.nav__logo-img {
  height: 51px;
  width: auto;
  display: block;
}
.nav.is-scrolled .nav__logo-img { height: 42px; }
@media (max-width: 768px) {
  .nav__logo-img { height: 34px; }
  .nav.is-scrolled .nav__logo-img { height: 28px; }
}
.nav__socials {
  display: flex;
  gap: 18px;
  align-items: center;
  transform: translateY(-4px);
}
@media (max-width: 768px) {
  .nav__socials { transform: none; }
}
.nav__socials a {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav__socials a:hover { opacity: 1; transform: translateY(-2px); }
.nav__socials svg { width: 100%; height: 100%; fill: currentColor; }

/* ═════════════════════════════════════════
   HERO — Burbuja origami + texto + CTA
   ═════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 88px var(--pad-x) 88px;
  overflow: hidden;
}
.hero__stage {
  position: relative;
  width: min(920px, 88vw);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}
/* Dos frames: la secuencia forma la burbuja de diálogo */
.hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
}
.hero__frame--1 {
  animation: hero-frame-1 2.4s ease-out forwards;
}
.hero__frame--2 {
  animation: hero-frame-2 2.4s ease-out 1.1s forwards;
}
@keyframes hero-frame-1 {
  0%   { opacity: 0; transform: scale(0.55); }
  30%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes hero-frame-2 {
  0%   { opacity: 0; transform: scale(0.96); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Texto flotante alrededor de la burbuja */
.hero__title {
  position: absolute;
  pointer-events: none;
  color: var(--white);
  font-weight: 400;
  z-index: 2;
  margin: 0;
}
/* "Damos forma" arriba-izquierda del bubble */
.hero__title--top {
  top: 22%;
  left: 34%;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: fade-in-up 0.8s 2.3s ease forwards;
}
/* "a tu / marca" abajo-derecha del bubble */
.hero__title--bottom {
  bottom: 8%;
  right: 16%;
  text-align: left;
  opacity: 0;
  animation: fade-in-up 0.8s 2.6s ease forwards;
}
.hero__title--bottom .sans {
  display: block;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.hero__title--bottom .serif {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 0.95;
  margin-top: 4px;
  letter-spacing: 0;
}

.hero__cta {
  opacity: 0;
  animation: fade-in-up 0.8s 2.9s ease forwards;
  z-index: 3;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════
   STATEMENT — frase entre hero y problema
   ═════════════════════════════════════════ */
.statement {
  padding: 180px var(--pad-x) 60px;
  text-align: center;
}
.statement p {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--text-soft);
  letter-spacing: 0.005em;
}
.statement strong {
  color: var(--white);
  font-weight: 700;
}

/* ═════════════════════════════════════════
   EL PROBLEMA — título + 4 pills colocadas alrededor
   ═════════════════════════════════════════ */
.problema {
  position: relative;
  padding: 80px var(--pad-x) 100px;
  display: grid;
  place-items: center;
  min-height: 48vh;
}
.problema__wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  display: grid;
  place-items: center;
}
.problema__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 156px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.problema__pill {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  transform-origin: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.problema__pill-word {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.35vw, 19px);
  letter-spacing: 0.005em;
}
.problema__pill-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0.01em;
}
/* Purple — arriba-centro-derecha */
.problema__pill--1 { background: var(--purple); color: var(--white); top: -8%; left: 52%; transform: translateX(-30%); }
/* Mint — izquierda-arriba */
.problema__pill--2 { background: #0EE5B5; color: var(--navy); top: 18%; left: 3%; }
/* Cyan — derecha-centro */
.problema__pill--3 { background: var(--cyan); color: var(--navy); top: 52%; right: 2%; }
/* White — abajo-centro */
.problema__pill--4 { background: var(--white); color: var(--navy); bottom: -14%; left: 44%; transform: translateX(-50%); }

/* ═════════════════════════════════════════
   SERVICIOS — Carrusel 6 slides
   ═════════════════════════════════════════ */
.servicios {
  padding: 40px 0 56px;
  position: relative;
  overflow: hidden;
}
.servicios__intro {
  max-width: 760px;
  margin: 0 auto 0;
  padding: 0 var(--pad-x);
  text-align: center;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: 0.005em;
}
.servicios__intro strong {
  color: var(--white);
  font-weight: 700;
}

.carousel {
  position: relative;
  margin-top: 40px;
}
.carousel__viewport {
  overflow: visible;
  clip-path: inset(0 0 -80px 0);
  width: 100%;
}
.carousel__track {
  display: flex;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 40px var(--pad-x) 60px;
  position: relative;
  min-height: 520px;
}
.slide__stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 8;
}
.slide__photo {
  position: absolute;
  overflow: hidden;
  filter: grayscale(1) contrast(1.05);
}
.slide__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Título del servicio — se superpone entre fotos */
.slide__title {
  position: absolute;
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.005em;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.slide__title .w1 {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 108px);
}
.slide__title .w2 {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 108px);
  margin-top: -0.08em;
}

/* Copy + botón debajo */
.slide__copy {
  max-width: 640px;
  margin: 12px auto 0;
  padding: 0 var(--pad-x);
  text-align: center;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.35;
  color: var(--text-soft);
}
.slide__cta {
  display: grid;
  place-items: center;
  margin: 20px auto 0;
}

/* Color variants por servicio */
.slide--me .slide__title { color: var(--purple); }
.slide--dg .slide__title { color: var(--mint); }
.slide--b  .slide__title { color: var(--cyan); }
.slide--cc .slide__title { color: var(--purple); }
.slide--ca .slide__title { color: var(--mint); }
.slide--dw .slide__title { color: var(--cyan); }

/* ═════════ Posiciones por slide (según PDF oficial) ═════════ */
/* #1 Marketing Estratégico */
.slide--me .slide__photo--a { left: 18%; top: 22%; width: 22%;  height: 62%; }
.slide--me .slide__photo--b { left: 66%; top: 16%; width: 20%;  height: 20%; }
.slide--me .slide__title    { left: 36%; top: 30%; }

/* #2 Diseño Gráfico */
.slide--dg .slide__photo--a { left: 16%; top: 16%; width: 16%;  height: 40%; }
.slide--dg .slide__photo--b { left: 70%; top: 22%; width: 18%;  height: 56%; }
.slide--dg .slide__title    { left: 33%; top: 32%; }

/* #3 Branding */
.slide--b  .slide__photo--a { left: 22%; top: 40%; width: 26%;  height: 34%; }
.slide--b  .slide__photo--b { left: 60%; top: 18%; width: 28%;  height: 32%; }
.slide--b  .slide__title    { left: 34%; top: 36%; }

/* #4 Creación de Contenido */
.slide--cc .slide__photo--a { left: 20%; top: 16%; width: 18%;  height: 50%; }
.slide--cc .slide__photo--b { left: 68%; top: 30%; width: 22%;  height: 46%; }
.slide--cc .slide__title    { left: 30%; top: 30%; }

/* #5 Campañas Automatizadas */
.slide--ca .slide__photo--a { left: 24%; top: 30%; width: 14%;  height: 46%; }
.slide--ca .slide__photo--b { left: 70%; top: 18%; width: 16%;  height: 44%; }
.slide--ca .slide__title    { left: 28%; top: 34%; }

/* #6 Diseño Web */
.slide--dw .slide__photo--a { left: 28%; top: 32%; width: 16%;  height: 42%; }
.slide--dw .slide__photo--b { left: 62%; top: 16%; width: 24%;  height: 28%; }
.slide--dw .slide__title    { left: 40%; top: 40%; }

/* Controles del carrusel */
.carousel__arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: rgba(13, 10, 35, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  z-index: 10;
}
.carousel__arrow:hover {
  background: rgba(120, 88, 168, 0.85);
  border-color: var(--purple);
}
.carousel__arrow:active { transform: translateY(-50%) scale(0.95); }
.carousel__arrow--prev { left: clamp(12px, 2.5vw, 32px); }
.carousel__arrow--next { right: clamp(12px, 2.5vw, 32px); }
.carousel__arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.carousel__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.25s ease, transform 0.25s ease, width 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.carousel__dot.is-active {
  background: var(--purple);
  width: 28px;
  border-radius: 4px;
}
.carousel__dot:hover { background: rgba(255, 255, 255, 0.55); }
.carousel__dot.is-active:hover { background: var(--purple); }

/* ═════════════════════════════════════════
   CONTÁCTANOS — foto izq + form der
   ═════════════════════════════════════════ */
.contacto {
  position: relative;
  padding: 72px var(--pad-x) 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5.5vw, 90px);
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
}
.contacto__left {
  position: relative;
  min-height: 620px;
}
.contacto__heading {
  position: relative;
  z-index: 2;
}
.contacto__heading h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--white);
}
.contacto__heading p {
  margin-top: 14px;
  font-size: clamp(15px, 1.35vw, 18px);
  color: var(--text-soft);
  letter-spacing: 0.005em;
}
.contacto__heading p strong {
  color: var(--white);
  font-weight: 700;
}
.contacto__photo {
  position: absolute;
  bottom: 0;
  left: calc(-1 * max((100vw - 1400px) / 2, 0px) - var(--pad-x));
  z-index: 1;
  max-width: none;
  width: auto;
  pointer-events: auto;
}
.contacto__photo img {
  width: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: left bottom;
  transform-origin: 30% 80%;
}
.contacto__photo:hover img {
  animation: contactoVibrate 0.5s ease-in-out infinite;
}
@keyframes contactoVibrate {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(-4.5deg); }
  30%     { transform: rotate(4deg); }
  45%     { transform: rotate(-3.5deg); }
  60%     { transform: rotate(3deg); }
  75%     { transform: rotate(-2deg); }
  90%     { transform: rotate(2deg); }
}

.contacto__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 40px;
}
.form-field {
  position: relative;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 0 12px;
  font-size: 16px;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.25s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  letter-spacing: 0.005em;
}
.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--purple);
}
.form-field textarea {
  min-height: 72px;
  resize: none;
  font-family: inherit;
  overflow: hidden;
}
.form-field textarea::-webkit-resizer { display: none; }
.form-field textarea::-webkit-scrollbar { display: none; }

.form-services {
  margin-top: 6px;
  border: 0;
  padding: 0;
  min-width: 0;
}
.form-services__label {
  font-size: 15px;
  color: var(--text-soft);
  margin-bottom: 14px;
  letter-spacing: 0.005em;
}
.form-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  min-height: 44px;
  padding: 4px 0;
}
.form-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: inline-grid;
  place-items: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.form-check input:checked {
  border-color: var(--purple);
  background: var(--purple);
}
.form-check input:checked::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}

.form-submit {
  margin-top: 16px;
  align-self: flex-start;
}

/* ═════════════════════════════════════════
   FOOTER — Aviso de privacidad bottom-right
   ═════════════════════════════════════════ */
.footer {
  padding: 18px var(--pad-x) 28px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.footer a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.footer a:hover { color: var(--white); }

/* ═════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════ */
@media (max-width: 1024px) {
  .contacto {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  /* Descompone .contacto__left para poder reordenar heading, form y foto */
  .contacto__left {
    display: contents;
  }
  .contacto__heading { order: 1; }
  .contacto__form    { order: 2; padding-top: 8px; }
  .contacto__photo {
    order: 3;
    position: relative;
    left: 0;
    bottom: 0;
    /* margin-bottom negativo = altura total del footer (18 + 21 + 28 = 67).
       Hace que la imagen atraviese el footer y el cable toque el borde del
       viewport. El footer lleva z-index mayor para mantener el texto al frente. */
    margin: 24px 0 -67px;
    width: auto;
    max-height: none;
    display: block;
    overflow: visible;
    pointer-events: auto;
    transform-origin: 20% 100%;
    z-index: 1;
  }
  .contacto__photo img {
    display: block;
    width: auto;
    height: clamp(440px, 62vh, 580px);
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: left bottom;
    /* Sangra el brazo fuera del viewport por la izquierda, replicando desktop */
    margin-left: calc(-1 * var(--pad-x) - 24px);
    transform-origin: 20% 100%;
  }
  .footer {
    position: relative;
    z-index: 2;
  }
  .footer a {
    text-shadow: 0 1px 6px rgba(13, 10, 35, 0.85), 0 0 12px rgba(13, 10, 35, 0.55);
  }
}

@media (max-width: 768px) {
  .nav { padding: 16px 20px; }
  .hero { padding: 96px 20px 96px; min-height: 100vh; }
  .hero__stage { width: min(520px, 92vw); }
  .hero__title--top { top: 4%; left: 14%; }
  .hero__title--bottom { bottom: 2%; right: 4%; }
  .hero__cta { bottom: -6%; }
  .problema { padding: 56px 20px 64px; min-height: 60vh; }
  .problema__title {
    font-size: clamp(48px, 12vw, 88px);
    text-align: center;
    margin: 8px 0;
  }
  .problema__pill {
    padding: 7px 11px;
  }
  .problema__pill-word { font-size: 13px; }
  .problema__pill-note { font-size: 14px; }
  .contacto__heading { text-align: center; }
  .contacto__heading h2 { text-align: center; }
  .contacto__photo { margin-top: 20px; }
  .contacto__photo img { height: clamp(420px, 60vh, 520px); }
  .servicios__intro { line-height: 1.35; }
  .servicios { padding: 40px 0 60px; }
  .slide { min-height: 620px; padding: 32px 16px 20px; }
  .slide__stage { aspect-ratio: 3 / 5; max-width: 100%; }
  /* Mobile unified slide layout — override per-slide absolute positions */
  .slide[class] .slide__photo--a {
    left: 2%;
    top: 2%;
    width: 48%;
    height: 36%;
  }
  .slide[class] .slide__photo--b {
    left: 50%;
    top: 62%;
    width: 48%;
    height: 36%;
  }
  .slide[class] .slide__title {
    left: 6%;
    top: 40%;
    right: 6%;
    width: auto;
    text-align: center;
    white-space: normal;
  }
  .slide__title .w1,
  .slide__title .w2 { font-size: clamp(40px, 12vw, 64px); }
  .carousel__arrow { width: 44px; height: 44px; }
  .carousel__arrow--prev { left: 8px; }
  .carousel__arrow--next { right: 8px; }
  .form-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .problema__title { font-size: clamp(44px, 13vw, 64px); }
  .problema__pill { padding: 7px 10px; }
  .problema__pill-word { font-size: 13px; }
  .problema__pill-note { font-size: 14px; }
  .slide { min-height: 560px; }
  .slide__title .w1, .slide__title .w2 { font-size: clamp(34px, 11vw, 48px); }
  .form-services__grid { grid-template-columns: 1fr; }
}

/* Reduced motion — solo hero frames/títulos/cta se apagan; carousel slide se
   conserva (deslizamiento horizontal es la esencia del carrusel). */
@media (prefers-reduced-motion: reduce) {
  .hero__frame,
  .hero__title--top,
  .hero__title--bottom,
  .hero__cta {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  .hero__frame { opacity: 0; }
  .hero__frame--4 { opacity: 1; }
}

/* ═════════════════════════════════════════
   LEGAL PAGE — Aviso de privacidad
   ═════════════════════════════════════════ */
.legal {
  max-width: 880px;
  margin: 0 auto;
  padding: 160px var(--pad-x) 80px;
  color: var(--text-soft);
}
.legal__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 28px;
  margin-bottom: 40px;
}
.legal__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 12px;
}
.legal__meta {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.legal__intro {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.legal__section { margin-bottom: 38px; }
.legal__section h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--cyan);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: 0;
}
.legal__section p {
  font-size: 15px;
  line-height: 1.72;
  margin: 0 0 12px;
}
.legal__section strong { color: var(--white); font-weight: 600; }
.legal__section ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 14px;
}
.legal__section li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.72;
  margin-bottom: 8px;
}
.legal__section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
}
.legal__section dl { margin: 10px 0 0; }
.legal__section dt {
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  margin-top: 10px;
}
.legal__section dd {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.65;
}
.legal__placeholder {
  color: var(--mint);
  background: rgba(0, 224, 176, 0.08);
  padding: 1px 8px;
  border-radius: 3px;
  font-style: italic;
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.legal__back:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
}
.legal__back--top {
  margin-top: 0;
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .legal { padding: 120px 20px 60px; }
  .legal__header { margin-bottom: 30px; padding-bottom: 22px; }
  .legal__section { margin-bottom: 30px; }
}

/* ═════════════════════════════════════════
   SCROLL-REVEAL — [data-animate] + variantes
   ═════════════════════════════════════════ */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

[data-animate-type="left"]  { transform: translateX(-44px); }
[data-animate-type="left"].is-visible  { transform: translateX(0); }
[data-animate-type="right"] { transform: translateX(44px); }
[data-animate-type="right"].is-visible { transform: translateX(0); }
[data-animate-type="scale"] { transform: scale(.9); }
[data-animate-type="scale"].is-visible { transform: scale(1); }
[data-animate-type="rise"]  { transform: translateY(52px); }
[data-animate-type="rise"].is-visible  { transform: translateY(0); }
[data-animate-type="drop"]  { transform: translateY(-44px); }
[data-animate-type="drop"].is-visible  { transform: translateY(0); }
[data-animate-type="blur"]  { filter: blur(12px); transition: opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1), filter 1s cubic-bezier(.2,.7,.3,1); }
[data-animate-type="blur"].is-visible { filter: blur(0); }
[data-animate-type="pop"] {
  opacity: 0;
  transform: translateY(38px) scale(.88);
  transition: opacity .75s cubic-bezier(.34,1.56,.64,1), transform .75s cubic-bezier(.34,1.56,.64,1);
}
[data-animate-type="pop"].is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* SERVICIOS tempo — aplicado siempre (primer reveal y slides subsecuentes).
   Título al centro corre ~4× más lento que la base; copy/cta/fotos un poco
   más lento. El intro "En Dimia Studio…" comparte el tempo 1.35s. */
.servicios__intro,
.slide .slide__photo,
.slide .slide__copy {
  transition: opacity 1.35s cubic-bezier(.2,.7,.3,1), transform 1.35s cubic-bezier(.2,.7,.3,1);
}
.slide .slide__title {
  transition: opacity 3.4s cubic-bezier(.2,.7,.3,1), transform 3.4s cubic-bezier(.2,.7,.3,1);
}
.slide .slide__cta {
  transition: opacity 1.35s cubic-bezier(.34,1.56,.64,1), transform 1.35s cubic-bezier(.34,1.56,.64,1);
}

/* Travel amplio para fotos + título: llegan desde la derecha con recorrido
   visible. El 44px base queda muy sutil a 1.35s / 3.4s. */
.slide .slide__photo,
.slide .slide__title {
  transform: translateX(180px);
}
.slide .slide__photo.is-visible,
.slide .slide__title.is-visible {
  transform: translateX(0);
}

/* Float sutil + hover slow/spring grow para las fotos del slide.
   La oscilación corre en JS sobre el <img> interno para no chocar con
   el transform de entry animation que vive en .slide__photo. */
.slide__photo img {
  will-change: transform;
  transform-origin: center center;
}
.slide__photo {
  cursor: default;
}

/* PROBLEMA entry — slow rise para título + pills que llegan desde
   diferentes lados con stagger largo. Travel ampliado para que el
   deslizamiento se lea claro y lento. */
.problema__title[data-animate-type="rise"] {
  transform: translateY(90px);
  transition: opacity 2s cubic-bezier(.2,.7,.3,1), transform 2s cubic-bezier(.2,.7,.3,1);
}
.problema__title[data-animate-type="rise"].is-visible {
  transform: translateY(0);
}
.problema__pill[data-animate-type="drop"]  { transform: translateY(-110px); }
.problema__pill[data-animate-type="rise"]  { transform: translateY(110px); }
.problema__pill[data-animate-type="left"]  { transform: translateX(-140px); }
.problema__pill[data-animate-type="right"] { transform: translateX(140px); }
.problema__pill[data-animate] {
  transition: opacity 1.5s cubic-bezier(.2,.7,.3,1), transform 1.5s cubic-bezier(.2,.7,.3,1);
}
.problema__pill[data-animate].is-visible {
  transform: translateX(0) translateY(0);
}
/* Mobile: grid layout ya no flota ni entra de los lados */
@media (max-width: 768px) {
  .problema__pill[data-animate-type="drop"],
  .problema__pill[data-animate-type="rise"],
  .problema__pill[data-animate-type="left"],
  .problema__pill[data-animate-type="right"] {
    transform: translateY(24px);
  }
  .problema__pill[data-animate].is-visible {
    transform: translateY(0);
  }
}
[data-animate-type="flip"] {
  opacity: 0;
  transform: perspective(800px) rotateX(18deg) translateY(30px);
  transform-origin: center top;
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
[data-animate-type="flip"].is-visible { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); }
[data-animate-type="reveal"] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .9s ease, clip-path 1.1s cubic-bezier(.7,0,.2,1);
  transform: none;
}
[data-animate-type="reveal"].is-visible { opacity: 1; clip-path: inset(0 0 0 0); }

/* Cascade: hijos se revelan escalonadamente */
[data-animate-cascade] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
[data-animate-cascade].is-visible > * { opacity: 1; transform: translateY(0); }
[data-animate-cascade].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-animate-cascade].is-visible > *:nth-child(2) { transition-delay: .12s; }
[data-animate-cascade].is-visible > *:nth-child(3) { transition-delay: .19s; }
[data-animate-cascade].is-visible > *:nth-child(4) { transition-delay: .26s; }
[data-animate-cascade].is-visible > *:nth-child(5) { transition-delay: .33s; }
[data-animate-cascade].is-visible > *:nth-child(6) { transition-delay: .40s; }
[data-animate-cascade].is-visible > *:nth-child(7) { transition-delay: .47s; }
[data-animate-cascade].is-visible > *:nth-child(8) { transition-delay: .54s; }
[data-animate-cascade].is-visible > *:nth-child(n+9) { transition-delay: .60s; }
[data-animate-cascade].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-animate-cascade].is-visible > *:nth-child(2) { transition-delay: .15s; }
[data-animate-cascade].is-visible > *:nth-child(3) { transition-delay: .25s; }
[data-animate-cascade].is-visible > *:nth-child(4) { transition-delay: .35s; }
[data-animate-cascade].is-visible > *:nth-child(5) { transition-delay: .45s; }
[data-animate-cascade].is-visible > *:nth-child(6) { transition-delay: .55s; }
[data-animate-cascade].is-visible > *:nth-child(7) { transition-delay: .65s; }

/* Pulse del CTA hero tras entrar al viewport */
@keyframes dimia-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(120, 88, 168, 0.55); }
  60%  { box-shadow: 0 0 0 18px rgba(120, 88, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(120, 88, 168, 0); }
}
.hero__cta.is-visible { animation: dimia-pulse 2.6s ease-out 1.2s 2; }

/* ═════════════════════════════════════════
   WHATSAPP — Floating widget (FAB + microform)
   ═════════════════════════════════════════ */
.wa-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: var(--f-sans);
}
.wa-trigger {
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  position: relative;
  z-index: 2;
}
.wa-trigger:hover {
  animation: waVibrate 0.55s ease-in-out infinite;
  box-shadow: 0 10px 35px rgba(37, 211, 102, 0.6);
}
@keyframes waVibrate {
  0%,100% { transform: scale(1.1) rotate(0deg); }
  15%     { transform: scale(1.1) rotate(-12deg); }
  30%     { transform: scale(1.1) rotate(10deg); }
  45%     { transform: scale(1.1) rotate(-8deg); }
  60%     { transform: scale(1.1) rotate(8deg); }
  75%     { transform: scale(1.1) rotate(-4deg); }
  90%     { transform: scale(1.1) rotate(4deg); }
}
.wa-pulse {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  animation: waPulse 2s ease-out infinite;
  pointer-events: none;
  z-index: 1;
  transform-origin: center center;
  will-change: transform, opacity;
}
.wa-pulse--2 { animation-delay: 1s; }
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}
.wa-form {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  transform: scale(0.8) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.wa-form.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
.wa-form-header {
  background: linear-gradient(135deg, var(--navy), var(--purple));
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}
.wa-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: rgba(80, 240, 248, 0.18);
  border: 1.5px solid rgba(80, 240, 248, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.wa-agent-info { flex: 1; min-width: 0; }
.wa-agent-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.wa-agent-tagline {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}
.wa-form-body { padding: 1.25rem; }
.wa-bubble {
  background: rgba(13, 10, 35, 0.06);
  border: 1px solid rgba(13, 10, 35, 0.08);
  border-radius: 12px 12px 12px 4px;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--navy);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.wa-form-body label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.wa-form-body input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid rgba(13, 10, 35, 0.15);
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  color: var(--navy);
  background: #fafafa;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}
.wa-form-body input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(120, 88, 168, 0.12);
}
.wa-send-btn {
  width: 100%;
  padding: 0.8rem;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  position: relative;
  overflow: hidden;
}
.wa-send-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 22px rgba(120, 88, 168, 0.38);
}
.wa-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.wa-error {
  background: #ffecec;
  color: #b3261e;
  border: 1px solid #f1b6b1;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.wa-legal {
  font-size: 0.8125rem;
  color: rgba(13, 10, 35, 0.65);
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.5;
}
.wa-legal a {
  color: var(--purple);
  text-decoration: underline;
}
.wa-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}
.wa-close:hover { background: rgba(255, 255, 255, 0.32); }

@media (max-width: 540px) {
  .wa-form { width: min(320px, calc(100vw - 48px)); }
  .wa-btn  { bottom: 18px; right: 18px; }
}

/* Nota: el antes media-query (prefers-reduced-motion) bloqueaba el pulse
   del ícono de WhatsApp en Windows con "Reducir animaciones" activado.
   La intención de diseño es que las olas del FAB de WA siempre corran,
   así que no se silencian aquí. */