/* contacto.css */

/* =========================================================
   0) RESET + NO OVERFLOW (pantalla exacta)
   ========================================================= */
*{ box-sizing: border-box; }

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* =========================================================
   1) STARFIELD: full-screen detrás
   ========================================================= */
#wbnStarfield,
.wbn-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: -1;
  background: #000;
}

/* =========================================================
   2) VARIABLES (paleta premium)
   ========================================================= */
:root{
  --wbn-gold: #D4AF37;
  --wbn-white: rgba(255,255,255,.92);
  --wbn-muted: rgba(255,255,255,.72);
  --wbn-dim: rgba(255,255,255,.56);

  --panel-bg: rgba(10, 10, 12, .58);
  --panel-brd: rgba(255,255,255,.10);
  --panel-brd-2: rgba(255,255,255,.14);

  --shadow: 0 18px 55px rgba(0,0,0,.55);

  --radius: clamp(16px, 2.2vw, 22px);
  --padX: clamp(16px, 3.2vw, 42px);
  --padY: clamp(16px, 3.2vw, 36px);

  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: "Prata", serif;

  --wbn-ease: cubic-bezier(.16, 1, .3, 1);
  --wbn-dur: 860ms;
  --wbn-dist: clamp(26px, 6vw, 96px);
  --wbn-tilt: 10deg;
  --wbn-blur: 12px;

  --focus-ring: 0 0 0 3px rgba(212,175,55,.15);
}

/* =========================================================
   3) LAYOUT: centra card, safe-area, responsivo
   ========================================================= */
.contacto{
  height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  padding:
    calc(clamp(14px, 2.8vw, 34px) + env(safe-area-inset-top))
    clamp(14px, 2.8vw, 34px)
    calc(clamp(14px, 2.8vw, 34px) + env(safe-area-inset-bottom));
  color: var(--wbn-white);
  font-family: var(--font-ui);
  background: transparent;
}

.contacto__card{
  width: min(980px, 100%);
  height: min(760px, 100%);
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--radius);
  background: var(--panel-bg);
  border: 1px solid var(--panel-brd);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
}

/* Acento oro (sutil) */
.contacto__card::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(212,175,55,0),
    rgba(212,175,55,.75),
    rgba(212,175,55,0)
  );
  opacity: .9;
}

/* =========================================================
   4) HEADER: minimal, premium, claro
   ========================================================= */
.contacto__header{
  padding: var(--padY) var(--padX) clamp(12px, 2.4vw, 18px);
  display: grid;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.contacto__brandRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.contacto__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.contacto__brandDot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,.95), rgba(212,175,55,.20));
  box-shadow: 0 0 0 3px rgba(212,175,55,.10);
  flex: 0 0 auto;
}

.contacto__brandName{
  font-size: 13px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contacto__mascotSlot{
  width: clamp(44px, 6vw, 60px);
  height: clamp(44px, 6vw, 60px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}

.contacto__title{
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(26px, 4.2vw, 44px);
  letter-spacing: .01em;
}

.contacto__subtitle{
  margin: 0;
  color: var(--wbn-muted);
  line-height: 1.45;
  font-size: clamp(13px, 1.9vw, 16px);
}

.contacto__meta{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.contacto__metaPill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  letter-spacing: .02em;
}

.contacto__metaSep{
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: rgba(212,175,55,.55);
}

.contacto__metaLight{
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* Progreso */
.contacto__progress{
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-top: 2px;
}

.contacto__progressFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,175,55,.15), rgba(212,175,55,.85));
  transition: width 520ms var(--wbn-ease);
}

/* =========================================================
   5) FORM ocupa el resto (sin scroll en body)
   ========================================================= */
.contacto__form{
  min-height: 0;
  padding: clamp(14px, 2.6vw, 22px) var(--padX) var(--padY);
}

/* =========================================================
   6) STEPPER: steps superpuestos + animación premium
   ========================================================= */
.stepper{
  height: 100%;
  width: 100%;
}

.stepper__track{
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.step{
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  gap: 12px;

  opacity: 0;
  pointer-events: none;

  transform:
    translate3d(var(--sx, 0), var(--sy, 0), 0)
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    scale(0.985);

  filter: blur(var(--wbn-blur));

  transition:
    transform var(--wbn-dur) var(--wbn-ease),
    opacity 520ms ease,
    filter 520ms ease;

  will-change: transform, opacity, filter;
}

.step.is-active{
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0,0,0) perspective(900px) rotateX(0) rotateY(0) scale(1);
  filter: blur(0);
}

.step__title{
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: .01em;
}

.step__hint{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
  font-size: 13px;
}

/* Direcciones (desktop) */
.step.is-exit-left{
  opacity: 0;
  transform: translate3d(calc(-1 * var(--wbn-dist)), 0, 0)
             perspective(900px) rotateY(var(--wbn-tilt)) scale(0.985);
  filter: blur(var(--wbn-blur));
}
.step.is-exit-right{
  opacity: 0;
  transform: translate3d(var(--wbn-dist), 0, 0)
             perspective(900px) rotateY(calc(-1 * var(--wbn-tilt))) scale(0.985);
  filter: blur(var(--wbn-blur));
}
.step.is-enter-right{ --sx: var(--wbn-dist); --ry: calc(-1 * var(--wbn-tilt)); }
.step.is-enter-left { --sx: calc(-1 * var(--wbn-dist)); --ry: var(--wbn-tilt); }

/* Direcciones (mobile/tablet) */
.step.is-exit-up{
  opacity: 0;
  transform: translate3d(0, calc(-1 * var(--wbn-dist)), 0)
             perspective(900px) rotateX(calc(-1 * var(--wbn-tilt))) scale(0.985);
  filter: blur(var(--wbn-blur));
}
.step.is-exit-down{
  opacity: 0;
  transform: translate3d(0, var(--wbn-dist), 0)
             perspective(900px) rotateX(var(--wbn-tilt)) scale(0.985);
  filter: blur(var(--wbn-blur));
}
.step.is-enter-down{ --sy: var(--wbn-dist); --rx: var(--wbn-tilt); }
.step.is-enter-up  { --sy: calc(-1 * var(--wbn-dist)); --rx: calc(-1 * var(--wbn-tilt)); }

/* =========================================================
   7) CAMPOS: minimal y ultra legible
   ========================================================= */
.field{
  display: grid;
  gap: 8px;
  max-width: 720px;
}

.field__label{
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

input, select, textarea{
  width: 100%;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  outline: none;
  font: inherit;
}

textarea{ resize: none; }

input::placeholder, textarea::placeholder{
  color: rgba(255,255,255,.36);
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(212,175,55,.42);
  box-shadow: var(--focus-ring);
}

/* Mensajes nativos de validación: visualmente limpios */
input:invalid, select:invalid, textarea:invalid{
  /* no metemos rojo agresivo: solo se verá al reportValidity */
}

/* =========================================================
   8) BOTONES: táctiles, premium, sin hover
   ========================================================= */
.step__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 11px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(212,175,55,.42);
}

.btn__icon{
  width: 18px;
  height: 18px;
  opacity: .92;
}

.btn__icon--back{
  transform: rotate(180deg);
}

.btn--cta{
  border-color: rgba(212,175,55,.26);
  background: rgba(212,175,55,.08);
}

.btn--ghost{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
}

/* =========================================================
   9) Final: preview + acciones
   ========================================================= */
.finalPreview{
  max-width: 820px;
}

.finalPreview__box{
  width: 100%;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
  font: inherit;
}

.finalActions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Condicional */
.cond[hidden]{ display:none !important; }

/* =========================================================
   10) Ajustes por dispositivo (sin hovers)
   ========================================================= */
@media (max-width: 520px){
  .contacto__card{ height: 100%; }
  .contacto__form{ padding-left: clamp(14px, 4vw, 18px); padding-right: clamp(14px, 4vw, 18px); }
  .contacto__mascotSlot{ display:none; } /* en móvil estorba, luego lo vuelves a activar si quieres */
}

@media (min-width: 1025px){
  .contacto__card{
    height: min(720px, 100%);
  }
}


/* =========================================================
   STEP ART — Ilustración en el hueco (debajo del input)
   ========================================================= */

/* Si tu .step estaba en grid, cámbialo a flex para control perfecto del “aire” */
.step{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Empuja acciones hasta abajo (y deja el hueco al centro) */
.step__actions{
  margin-top: auto;
}

/* Contenedor del arte (ocupa el espacio libre) */
.step__art{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 22px) 0;
  pointer-events: none;
  opacity: .95;
}

/* Imagen SVG */
.step__artImg{
  width: min(640px, 100%);
  max-height: clamp(160px, 28svh, 360px);
  object-fit: contain;
  opacity: .88;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.55));
}

/* Móvil angosto: que no se coma el layout */
@media (max-width: 520px){
  .step__art{
    padding: 10px 0;
  }
  .step__artImg{
    max-height: clamp(140px, 24svh, 260px);
  }
}

/* Pantallas grandes: respira más */
@media (min-width: 1400px){
  .step__artImg{
    width: min(720px, 100%);
    max-height: clamp(220px, 32svh, 440px);
  }
}

/* =========================================================
   WBN — STEP ART "WHITE BADGE"
   SVG se queda NEGRO/ORIGINAL
   Fondo (blob) BLANCO + contorno dorado irregular + halo
   ========================================================= */

:root{
  --wbn-gold: rgba(212,175,55,.88);
  --wbn-gold-soft: rgba(212,175,55,.20);
  --wbn-badge: rgba(255,255,255,.98);
  --wbn-badge2: rgba(255,255,255,.92);
}

/* Contenedor del arte */
.step__art{
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 22px) 0;
  pointer-events: none;
}

/* Blob blanco + halo (difuminado) */
.step__art::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 92%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);

  border-radius: 52% 48% 44% 56% / 52% 44% 56% 48%;

  /* Blanco real, con micro-relieve (muy sutil) */
  background:
    radial-gradient(circle at 28% 24%,
      var(--wbn-badge) 0%,
      var(--wbn-badge2) 62%,
      rgba(255,255,255,.90) 100%
    );

  /* Halo: sombra externa + profundidad */
  filter:
    drop-shadow(0 28px 90px rgba(0,0,0,.55))
    drop-shadow(0 10px 26px rgba(0,0,0,.35));

  opacity: .98;
  z-index: 0;
}

/* Contorno dorado imperfecto (otro blob rotado) */
.step__art::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 92%);
  aspect-ratio: 1 / 1;

  transform: translate(-50%, -50%) rotate(-6deg) translateY(4px);
  border-radius: 58% 42% 54% 46% / 42% 56% 44% 58%;

  border: 1.35px solid var(--wbn-gold);
  box-shadow:
    0 0 0 1px var(--wbn-gold-soft);

  opacity: .98;
  z-index: 1;
}

/* SVG arriba: NO se invierte, se mantiene negro/gris */
.step__artImg{
  position: relative;
  z-index: 2;

  width: min(640px, 100%);
  max-height: clamp(160px, 28svh, 360px);
  object-fit: contain;

  /* Solo sombra para que se vea “premium” */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
  opacity: .98;
}

/* Móvil */
@media (max-width: 520px){
  .step__art{ padding: 10px 0; }

  .step__art::before,
  .step__art::after{
    width: min(520px, 96%);
  }

  .step__artImg{
    max-height: clamp(140px, 24svh, 260px);
  }
}

/* Pantallas grandes */
@media (min-width: 1400px){
  .step__art::before,
  .step__art::after{
    width: min(640px, 86%);
  }

  .step__artImg{
    width: min(720px, 100%);
    max-height: clamp(220px, 32svh, 440px);
  }
}

/* =========================================================
   PATCH 3 — Badge más chico + forma “acuarela”
   (gordito abajo, más delgado arriba)
   NO reduce el tamaño del SVG
   ========================================================= */

/* Badge: más chico y sin “círculo perfecto” */
.step__art::before,
.step__art::after{
  width: min(360px, 74%);
  height: clamp(170px, 20svh, 240px);
  aspect-ratio: auto;
}

/* Blob blanco: acuarela (más ancho abajo) */
.step__art::before{
  /* baja un poco el badge para que se sienta “base” */
  transform: translate(-50%, -50%) translateY(10px) rotate(-8deg);

  /* Top más delgado, bottom más gordito */
  border-radius: 44% 38% 66% 62% / 30% 34% 74% 78%;

  /* Blanco real con “lavado” sutil (acuarela) */
  background:
    radial-gradient(180px 140px at 26% 78%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 58%,
      rgba(255,255,255,.92) 100%
    ),
    radial-gradient(260px 190px at 72% 28%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 70%,
      rgba(255,255,255,.90) 100%
    );
}

/* Contorno dorado: ligeramente distinto y más “a mano” */
.step__art::after{
  transform: translate(-50%, -50%) translateY(12px) rotate(-13deg);
  border-radius: 38% 42% 60% 66% / 28% 36% 76% 72%;
}

/* SVG: se mantiene GRANDE (no lo reduces) */
.step__artImg{
  width: min(600px, 92%);
  max-height: clamp(170px, 24svh, 320px);
}

/* Mobile: badge más compacto sin tocar el cuervo */
@media (max-width: 520px){
  .step__art::before,
  .step__art::after{
    width: min(330px, 86%);
    height: clamp(160px, 22svh, 230px);
  }

  .step__artImg{
    width: min(540px, 96%);
    max-height: clamp(165px, 24svh, 290px);
  }
}

/* =========================================================
   WBN — FIX RESPONSIVO (pantallas horizontales / bajas)
   + Arte estable (badge + SVG) sin desastre
   ========================================================= */

/* 1) STEP: columna estable, CTA siempre abajo */
.step{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.step__actions{
  margin-top: auto; /* empuja botones al fondo */
}

/* 2) ARTE: sistema canónico con variables */
.step__art{
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;

  flex: 1 1 auto;
  min-height: 0;

  padding: clamp(8px, 1.8vw, 14px) 0;
  pointer-events: none;

  /* ===== Ajuste por defecto (portrait/normal) ===== */
  --badgeW: min(360px, 74%);
  --badgeH: clamp(170px, 20svh, 240px);

  --artW:   min(600px, 92%);
  --artH:   clamp(170px, 24svh, 320px);

  --badgeY: 10px;
  --rotA: -8deg;
  --rotB: -13deg;

  --stroke: 2.6px; /* grosor dorado */
}

/* Badge blanco */
.step__art::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--badgeW);
  height: var(--badgeH);
  transform: translate(-50%, -50%) translateY(var(--badgeY)) rotate(var(--rotA));

  border-radius: 44% 38% 66% 62% / 30% 34% 74% 78%;

  background:
    radial-gradient(180px 140px at 26% 78%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 58%,
      rgba(255,255,255,.92) 100%
    ),
    radial-gradient(260px 190px at 72% 28%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 70%,
      rgba(255,255,255,.90) 100%
    );

  filter:
    drop-shadow(0 28px 90px rgba(0,0,0,.55))
    drop-shadow(0 10px 26px rgba(0,0,0,.35));

  z-index: 0;
}

/* Contorno dorado */
.step__art::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--badgeW);
  height: var(--badgeH);
  transform: translate(-50%, -50%) translateY(calc(var(--badgeY) + 2px)) rotate(var(--rotB));

  border-radius: 38% 42% 60% 66% / 28% 36% 76% 72%;

  border: var(--stroke) solid rgba(212,175,55,.88);
  box-shadow:
    0 0 0 1.4px rgba(212,175,55,.22),
    0 10px 28px rgba(0,0,0,.18);

  z-index: 1;
}

/* SVG: NO se reduce “por gusto”; solo se limita por altura disponible */
.step__artImg{
  position: relative;
  z-index: 2;

  width: var(--artW);
  max-height: var(--artH);
  object-fit: contain;

  /* Sube un pelo para evitar cortes en bases */
  transform: translateY(-2px);

  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}

/* 3) LANDSCAPE / pantallas anchas-bajas: 2 columnas (SOLUCIÓN REAL al desastre) */
@media (min-width: 980px) and (max-height: 760px),
       (min-width: 980px) and (min-aspect-ratio: 16/9){

  .step{
    display: grid;
    grid-template-columns: 1fr minmax(260px, 380px);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(18px, 2.6vw, 34px);
    align-items: start;
  }

  .step > :is(.step__title, .step__hint, .field, .cond, .finalPreview, .finalActions, .step__actions){
    grid-column: 1;
  }

  .step__actions{
    margin-top: 0;
    align-self: end;
  }

  .step__art{
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    padding: 0;

    /* En horizontal baja: badge más compacto y controlado */
    --badgeW: min(320px, 100%);
    --badgeH: clamp(150px, 42vh, 210px);

    /* El cuervo se mantiene grande, pero se acota por la altura real */
    --artW: min(520px, 100%);
    --artH: clamp(150px, 46vh, 260px);

    --badgeY: 6px;
  }
}

/* 4) Muy baja altura (dispositivos tipo “hub”): compacta un poco más */
@media (max-height: 620px){
  .step__art{
    --badgeH: clamp(130px, 38vh, 190px);
    --artH:   clamp(130px, 42vh, 230px);
  }
}


/* =========================================================
   PATCH — C1 (Teléfono) más parecido a A1
   - Badge (blob) un poco MÁS grande
   - SVG un poco MÁS chico (solo un toque)
   ========================================================= */

/* Paso 2 = Teléfono (según tu HTML: data-step="2") */
.step[data-step="2"] .step__art{
  /* badge más grande */
  --badgeW: min(400px, 80%);
  --badgeH: clamp(190px, 22svh, 275px);

  /* svg un poco más contenido */
  --artW:   min(560px, 88%);
  --artH:   clamp(165px, 23svh, 305px);
}

/* Reduce apenas el SVG (sin tocar el archivo) */
.step[data-step="2"] .step__artImg{
  transform: translateY(-2px) scale(.95);
  transform-origin: center center;
}

/* Landscape / pantallas anchas-bajas: que no se “pierda” el badge */
@media (min-width: 980px) and (max-height: 760px),
       (min-width: 980px) and (min-aspect-ratio: 16/9){
  .step[data-step="2"] .step__art{
    --badgeW: min(360px, 100%);
    --badgeH: clamp(170px, 48vh, 245px);

    --artW:   min(500px, 100%);
    --artH:   clamp(150px, 50vh, 250px);
  }
}

/* Móvil: badge un poco más grande y el SVG apenas más chico */
@media (max-width: 520px){
  .step[data-step="2"] .step__art{
    --badgeW: min(360px, 90%);
    --badgeH: clamp(175px, 24svh, 260px);

    --artW:   min(520px, 96%);
    --artH:   clamp(155px, 24svh, 290px);
  }

  .step[data-step="2"] .step__artImg{
    transform: translateY(-2px) scale(.94);
  }
}

/* =========================================================
   PATCH FINAL — iPad Pro / Surface Pro (portrait alto)
   Evita que el SVG “se salga poquito”
   ========================================================= */
@media (orientation: portrait) and (min-width: 880px) and (max-width: 1100px) and (min-height: 1200px){
  .step__art{
    /* Badge un poco más grande */
    --badgeW: min(430px, 82%);
    --badgeH: clamp(205px, 26svh, 290px);

    /* SVG levemente más chico (solo límites) */
    --artW: min(540px, 84%);
    --artH: clamp(145px, 20svh, 265px);

    /* Ajuste fino de posición */
    --badgeY: 8px;
  }

  /* Sube el SVG un poco para que no toque borde inferior/acciones */
  .step__artImg{
    transform: translateY(-12px);
  }
}


    /* Flecha blanca (sin tocar Mascota) */
    .btn__icon{
      filter: brightness(0) invert(1);
      opacity: .95;
    }

    /* Quitar el cuadro/botón de la esquina (tu slot) */
    .contacto__mascotSlot{ display: none !important; }

    /* Que el panel quede más arriba (sin aire muerto) */
    .contacto{
      /* si tu layout es grid, esto lo “pega” arriba; si no, no rompe nada */
      place-items: start center !important;
      /* recorta padding superior general */
      padding-top: max(env(safe-area-inset-top), 12px) !important;
    }

    /* Recorta padding/margin superior del header/caja */
    .contacto__card{ margin-top: 0 !important; }
    .contacto__header{
      padding-top: 16px !important;  /* antes lo tienes muy alto */
      margin-top: 0 !important;
    }
    .contacto__brandRow{
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* Extra: en pantallas con poca altura, aprieta un poco más la parte superior */
    @media (max-height: 820px){
      .contacto{ padding-top: max(env(safe-area-inset-top), 8px) !important; }
      .contacto__header{ padding-top: 12px !important; }
    }

    /* =========================
   SELECT — Premium skin
   ========================= */

:root{
  --sel-bg: rgba(0,0,0,.22);
  --sel-bg-focus: rgba(0,0,0,.34);
  --sel-brd: rgba(212,175,55,.26);
  --sel-brd-focus: rgba(212,175,55,.55);
  --sel-text: rgba(212,175,55,.92);
  --sel-muted: rgba(255,255,255,.55);
  --sel-radius: 16px;
}

/* Si ya tienes una clase "sora", úsala.
   Si no, esto la crea y la puedes aplicar donde quieras. */
.sora{ font-family: "Sora", var(--font-ui); }

/* El control (cerrado) */
.field select{
  width: 100%;
  padding: 12px 44px 12px 13px;
  border-radius: var(--sel-radius);
  border: 1px solid var(--sel-brd);
  background: var(--sel-bg);
  color: var(--sel-text);
  outline: none;

  font-family: "Sora", var(--font-ui);
  font-weight: 500;
  letter-spacing: .01em;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Flecha custom (dorada) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23D4AF37' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;

  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

/* Oculta flecha en IE/Edge viejito */
.field select::-ms-expand{ display:none; }

/* Placeholder (cuando está inválido por la opción disabled selected) */
.field select:invalid{
  color: var(--sel-muted);
}

/* Focus/activo */
.field select:focus{
  background: var(--sel-bg-focus);
  border-color: var(--sel-brd-focus);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
}

/* Hover (en desktop) */
@media (hover:hover){
  .field select:hover{
    border-color: rgba(212,175,55,.38);
  }
}

/* Intento de estilizar el dropdown (NO siempre lo respeta el navegador) */
.field select option{
  background: #0b0b0d;
  color: rgba(255,255,255,.92);
}
.field select option:checked{
  color: #D4AF37;
  background: #101014;
}


/* HOME botón (derecha, alineado con WEBYNET) */
.contacto__brandRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Botón */
.contacto__homeLink{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;

  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, .26);
  background: rgba(10,10,10,.35);

  color: rgba(212, 175, 55, .95); /* dorado */
  text-decoration: none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  touch-action: manipulation;
}

.contacto__homeLink:hover{
  transform: translateY(-1px);
  background: rgba(12,12,12,.55);
  border-color: rgba(212, 175, 55, .40);
}

.contacto__homeLink:active{
  transform: translateY(0);
  opacity: .92;
}

.contacto__homeLink:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}

/* Icono */
.contacto__homeIcon{
  display: block;
}

/* =========================================================
   FIX — HOME ICON (SVG) DORADO SIEMPRE
   Pegar al FINAL de contacto.css
   ========================================================= */

/* Asegura que el <a> no herede colores morados/azules por estados */
.contacto__homeLink,
.contacto__homeLink:link,
.contacto__homeLink:visited{
  color: #d6b36a !important;      /* dorado */
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Hover / focus: ligero brillo sin cambiar a morado */
.contacto__homeLink:hover,
.contacto__homeLink:focus,
.contacto__homeLink:focus-visible{
  color: #e6c57a !important;      /* dorado un poco más brillante */
  outline: none;
}

/* El SVG toma el color del <a> (tu SVG usa stroke="currentColor") */
.contacto__homeIcon{
  color: currentColor !important;
  display: block;
}

/* Si algún estilo externo “pisa” el stroke, lo forzamos */
.contacto__homeIcon path{
  stroke: currentColor !important;
}

/* Opcional: que se sienta premium (sin afectar layout) */
.contacto__homeLink{
  line-height: 0;
  filter: drop-shadow(0 0 10px rgba(214,179,106,.16));
}