/* ===== CONTACTOS: Premium oscuro + celeste ===== */

.page-contactos{
  background: none;
  position: relative;
  min-height: 100vh;
}

/* Fondo oscuro de contactos: se queda */
.page-contactos::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(56,182,255,.22), transparent 60%),
    radial-gradient(900px 520px at 80% 35%, rgba(124,92,255,.16), transparent 60%),
    linear-gradient(to top, #070a12, #0c1430);
  background-attachment: fixed;
}

/* HERO igual a sobre-mi / servicios */
.pro-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0b1220;
  display: grid;
  place-items: center;
  text-align: center;
}

.pro-hero--sm{
  min-height: 42vh;
}

.pro-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/hero1.webp");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform .6s ease-out;
}

.pro-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(56,182,255,.12), transparent 60%),
    radial-gradient(800px 400px at 80% 15%, rgba(124,92,255,.10), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.85));
}

.pro-hero:hover .pro-hero__bg{
  transform: scale(1.07) translateY(-8px);
}

.pro-hero__content{
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  padding: 60px 0;
}

.pro-hero__eyebrow{
  text-transform: uppercase;
  letter-spacing: .26em;
  font-weight: 700;
  font-size: 12px;
  opacity: .45;
  color: rgba(255,255,255,.85);
  margin: 0 0 10px;
}

.pro-hero__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 14px 35px rgba(0,0,0,.65);
}

.pro-hero__subtitle{
  margin: 12px auto 0;
  max-width: 72ch;
  color: rgba(241,245,249,.92);
  line-height: 1.5;
  text-shadow: 0 12px 30px rgba(0,0,0,.60);
  text-align: center;
}

/* Para que el main no se vea tan “claro” como index */
.page-contactos .c-main{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Hero premium */
.c-hero{
  padding: 2rem 0 1rem;
}

.c-hero__wrap{
  display: grid;
  gap: 1.6rem;
}

.c-hero__card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.4rem;
  padding: 2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.c-hero__card h2{
  margin: 0;
  text-align: center;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.c-hero__card p{
  margin: .9rem 0 0;
  text-align: center;
  color: rgba(255,255,255,.74);
  line-height: 1.7;
}

.c-hero__cta{
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Botones premium */
.c-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.7rem;
  border-radius: 1.1rem;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.16);
}

.c-btn--primary{
  background: rgba(56,182,255,.95);
  color: #07101f;
  border-color: rgba(56,182,255,.65);
}

.c-btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
}

.c-badges{
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.c-badge{
  font-size: 1.3rem;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.14);
  padding: .6rem 1rem;
  border-radius: 999px;
}

/* Tarjetitas info */
.c-info{
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px){
  .c-hero__wrap{
    grid-template-columns: 1.25fr .75fr;
    align-items: stretch;
  }
}

.c-info__item{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.2rem;
  padding: 1.4rem;
  backdrop-filter: blur(6px);
}

.c-info__label{
  display: block;
  font-size: 1.3rem;
  color: rgba(255,255,255,.65);
}

.c-info__value{
  display: block;
  margin-top: .3rem;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* Caja del formulario (para que no sea “blanco” fuerte) */
.c-formWrap{
  margin-top: 2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.4rem;
  padding: 2rem;
  backdrop-filter: blur(8px);
}

.c-title{
  margin: 0;
  text-align: center;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.c-sub{
  margin: .8rem 0 0;
  text-align: center;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

/* Ajustes al formulario (se ve premium sobre oscuro) */
.page-contactos .formulario{
  width: 100%;
  max-width: 70rem;
  background-color: rgba(10, 18, 40, .65);
  border: 1px solid rgba(56,182,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.page-contactos .formulario legend{
  color: rgba(56,182,255,.95);
}

.page-contactos .input-text{
  background: rgba(255,255,255,.92);
}

/* Para que el contenedor “sombra” no sea blanco acá */
.page-contactos .sombra{
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* =========================================
   HERO CONTACTOS - letra por letra real
========================================= */

.hero-split{
  opacity: 1;
}

.hero-split .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) scale(.96);
  filter: blur(2px);
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    opacity .65s ease,
    filter .65s ease;
}

.hero-split.hero-visible .char{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* espacio entre palabras */
.hero-split .char.space{
  width: .32em;
}

/* delays por bloque */
.hero-delay-1 .char{ transition-delay: calc(var(--i) * 22ms + 40ms); }
.hero-delay-2 .char{ transition-delay: calc(var(--i) * 26ms + 120ms); }
.hero-delay-3 .char{ transition-delay: calc(var(--i) * 12ms + 220ms); }

@media (prefers-reduced-motion: reduce){
  .hero-split .char{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================
   CONTACTOS - REVEAL opcion B al reves
========================================= */

.c-reveal{
  opacity: 0;
  filter: blur(2px);
  will-change: transform, opacity, filter;
  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    opacity .9s ease,
    filter .9s ease;
}

.c-reveal.c-visible{
  opacity: 1;
  transform: translate(0,0) scale(1) rotate(0deg);
  filter: blur(0);
}

.c-from-tl{
  transform: translate(-90px, -70px) scale(.96) rotate(-2deg);
}

.c-from-tr{
  transform: translate(90px, -70px) scale(.96) rotate(2deg);
}

.c-from-bl{
  transform: translate(-90px, 70px) scale(.96) rotate(2deg);
}

.c-from-br{
  transform: translate(90px, 70px) scale(.96) rotate(-2deg);
}

.c-from-bottom{
  transform: translate(0, 65px) scale(.985);
}

@media (max-width: 768px){
  .c-from-tl{
    transform: translate(-28px, -22px) scale(.99) rotate(-1deg);
  }

  .c-from-tr{
    transform: translate(28px, -22px) scale(.99) rotate(1deg);
  }

  .c-from-bl{
    transform: translate(-28px, 22px) scale(.99) rotate(1deg);
  }

  .c-from-br{
    transform: translate(28px, 22px) scale(.99) rotate(-1deg);
  }

  .c-from-bottom{
    transform: translate(0, 24px) scale(.99);
  }
}

@media (prefers-reduced-motion: reduce){
  .c-reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================
   FIX FORMULARIO CONTACTOS
   estilo ordenado como plan-intermedio
========================================= */

.page-contactos .c-formWrap{
  margin-top: 2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.8rem;
  padding: 2.4rem 2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.page-contactos .c-title{
  margin: 0;
  text-align: center;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(3.2rem, 4vw, 5rem);
  font-weight: 900;
  color: rgba(255,255,255,.95);
}

.page-contactos .c-sub{
  margin: .8rem auto 0;
  max-width: 70ch;
  text-align: center;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}

/* caja interna del formulario */
.page-contactos .formulario.c-form{
  width: min(100%, 70rem);
  margin: 2.2rem auto 0;
  padding: 2.4rem;
  background: rgba(7,17,46,.92);
  border: 1px solid rgba(56,182,255,.18);
  border-radius: 1.6rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* fieldset limpio */
.page-contactos .formulario fieldset{
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.page-contactos .formulario legend{
  width: 100%;
  margin-bottom: 2rem;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.55rem;
  line-height: 1.5;
  color: rgba(56,182,255,.96);
}

/* grid ordenado */
.page-contactos .contenedor-campos{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2rem;
  align-items: start;
}

/* campos */
.page-contactos .campo,
.page-contactos .tipo-equipo{
  width: 100%;
  min-width: 0;
}

.page-contactos .campo label{
  display: block;
  margin-bottom: .8rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  text-align: left;
}

.page-contactos .input-text{
  width: 100%;
  min-width: 0;
  display: block;
  padding: 1.35rem 1.5rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(255,255,255,.94);
  color: #111827;
  font-size: 1.6rem;
  line-height: 1.35;
  resize: vertical;
}

.page-contactos textarea.input-text{
  min-height: 20rem;
}

/* correo a una columna completa */
.page-contactos .campo-email{
  grid-column: 1 / -1;
}

/* marca, modelo, mensaje ancho completo */
.page-contactos .campo:has(#marca),
.page-contactos .campo:has(#modelo),
.page-contactos .campo:has(#mensaje){
  grid-column: 1 / -1;
}

/* radios */
.page-contactos .tipo-equipo{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 2rem;
  align-items: start;
  padding-top: .3rem;
}

.page-contactos .tipo-equipo__opcion{
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  justify-self: start;
}

.page-contactos .tipo-equipo__opcion input{
  margin: 0;
}

/* boton */
.page-contactos .alinear-derecha.flex{
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

.page-contactos .alinear-derecha .boton{
  margin-top: 0;
  min-width: 31rem;
  border-radius: 1.1rem;
}

/* responsive */
@media (max-width: 768px){
  .page-contactos .c-formWrap{
    padding: 2rem 1.4rem;
  }

  .page-contactos .formulario.c-form{
    padding: 1.8rem 1.4rem;
  }

  .page-contactos .contenedor-campos{
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .page-contactos .campo-email,
  .page-contactos .campo:has(#marca),
  .page-contactos .campo:has(#modelo),
  .page-contactos .campo:has(#mensaje){
    grid-column: auto;
  }

  .page-contactos .alinear-derecha.flex{
    justify-content: stretch;
  }

  .page-contactos .alinear-derecha .boton{
    width: 100%;
    min-width: 0;
  }

    .page-contactos .tipo-equipo{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =========================================
   CONTACTOS - HOVER PREMIUM EN TARJETAS
========================================= */

.c-hero__card,
.c-info__item,
.c-formWrap,
.page-contactos .formulario.c-form{
  position: relative;
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  will-change: transform, box-shadow;
}

/* elevacion premium */
.c-hero__card:hover,
.c-info__item:hover,
.c-formWrap:hover,
.page-contactos .formulario.c-form:hover{
  transform: translateY(-8px);
  border-color: rgba(56,182,255,.28);
  box-shadow:
    0 22px 55px rgba(0,0,0,.22),
    0 0 0 1px rgba(56,182,255,.14),
    0 0 34px rgba(56,182,255,.12);
}

/* =========================================
   LUZ DINAMICA EN TARJETAS / BLOQUES
========================================= */

.c-hero__card::before,
.c-info__item::before,
.c-formWrap::before,
.page-contactos .formulario.c-form::before{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;

  background: radial-gradient(
    420px circle at var(--mx,50%) var(--my,50%),
    rgba(56,182,255,.20),
    rgba(56,182,255,.10) 26%,
    transparent 60%
  );
}

.c-hero__card:hover::before,
.c-info__item:hover::before,
.c-formWrap:hover::before,
.page-contactos .formulario.c-form:hover::before{
  opacity:1;
}

/* contenido por encima del glow */
.c-hero__card > *,
.c-info__item > *,
.c-formWrap > *,
.page-contactos .formulario.c-form > *{
  position: relative;
  z-index: 1;
}

/* =========================================
   BOTONES CONTACTOS - MICRO INTERACCION
========================================= */

.c-btn,
.page-contactos .alinear-derecha .boton{
  position: relative;
  overflow: hidden;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    background .22s ease,
    border-color .22s ease;
  will-change: transform, box-shadow, filter;
}

.c-btn:hover,
.page-contactos .alinear-derecha .boton:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.26);
  filter: brightness(1.03);
}

.c-btn:active,
.page-contactos .alinear-derecha .boton:active{
  transform: translateY(-1px) scale(.985);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.c-btn:focus-visible,
.page-contactos .alinear-derecha .boton:focus-visible{
  outline: 2px solid rgba(56,182,255,.65);
  outline-offset: 3px;
}

/* glow dinamico base */
.c-btn::before,
.page-contactos .alinear-derecha .boton::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
}

/* boton primario */
.c-btn--primary::before,
.page-contactos .alinear-derecha .boton::before{
  background: radial-gradient(
    220px circle at var(--bx,50%) var(--by,50%),
    rgba(255,255,255,.78),
    rgba(255,255,255,.28) 26%,
    transparent 62%
  );
}

/* boton ghost */
.c-btn--ghost::before{
  background: radial-gradient(
    220px circle at var(--bx,50%) var(--by,50%),
    rgba(124,92,255,.52),
    rgba(56,182,255,.22) 28%,
    transparent 62%
  );
}

.c-btn:hover::before,
.page-contactos .alinear-derecha .boton:hover::before{
  opacity:.75;
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .c-hero__card,
  .c-info__item,
  .c-formWrap,
  .page-contactos .formulario.c-form,
  .c-btn,
  .page-contactos .alinear-derecha .boton{
    transition: none !important;
  }

  .c-hero__card:hover,
  .c-info__item:hover,
  .c-formWrap:hover,
  .page-contactos .formulario.c-form:hover,
  .c-btn:hover,
  .page-contactos .alinear-derecha .boton:hover,
  .c-btn:active,
  .page-contactos .alinear-derecha .boton:active{
    transform: none !important;
  }

  .c-hero__card::before,
  .c-info__item::before,
  .c-formWrap::before,
  .page-contactos .formulario.c-form::before,
  .c-btn::before,
  .page-contactos .alinear-derecha .boton::before{
    display:none !important;
  }
}

/* =========================================
   CONTACTOS - HOVER PREMIUM EN TARJETAS
========================================= */

.c-hero__card,
.c-info__item,
.c-formWrap,
.page-contactos .formulario.c-form{
  position: relative;
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  will-change: transform, box-shadow;
}

.c-hero__card:hover,
.c-info__item:hover,
.c-formWrap:hover,
.page-contactos .formulario.c-form:hover{
  transform: translateY(-8px);
  border-color: rgba(56,182,255,.28);
  box-shadow:
    0 22px 55px rgba(0,0,0,.22),
    0 0 0 1px rgba(56,182,255,.14),
    0 0 34px rgba(56,182,255,.12);
}

/* =========================================
   LUZ DINAMICA EN TARJETAS / BLOQUES
========================================= */

.c-hero__card::before,
.c-info__item::before,
.c-formWrap::before,
.page-contactos .formulario.c-form::before{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
  background: radial-gradient(
    420px circle at var(--mx,50%) var(--my,50%),
    rgba(56,182,255,.20),
    rgba(56,182,255,.10) 26%,
    transparent 60%
  );
}

.c-hero__card:hover::before,
.c-info__item:hover::before,
.c-formWrap:hover::before,
.page-contactos .formulario.c-form:hover::before{
  opacity:1;
}

.c-hero__card > *,
.c-info__item > *,
.c-formWrap > *,
.page-contactos .formulario.c-form > *{
  position: relative;
  z-index: 1;
}

/* =========================================
   BOTONES CONTACTOS - MICRO INTERACCION
========================================= */

.c-btn,
.page-contactos .alinear-derecha .boton{
  position: relative;
  overflow: hidden;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    background .22s ease,
    border-color .22s ease;
  will-change: transform, box-shadow, filter;
}

.c-btn:hover,
.page-contactos .alinear-derecha .boton:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.26);
  filter: brightness(1.03);
}

.c-btn:active,
.page-contactos .alinear-derecha .boton:active{
  transform: translateY(-1px) scale(.985);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.c-btn:focus-visible,
.page-contactos .alinear-derecha .boton:focus-visible{
  outline: 2px solid rgba(56,182,255,.65);
  outline-offset: 3px;
}

.c-btn::before,
.page-contactos .alinear-derecha .boton::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
}

.c-btn--primary::before,
.page-contactos .alinear-derecha .boton::before{
  background: radial-gradient(
    220px circle at var(--bx,50%) var(--by,50%),
    rgba(255,255,255,.78),
    rgba(255,255,255,.28) 26%,
    transparent 62%
  );
}

.c-btn--ghost::before{
  background: radial-gradient(
    220px circle at var(--bx,50%) var(--by,50%),
    rgba(124,92,255,.52),
    rgba(56,182,255,.22) 28%,
    transparent 62%
  );
}

.c-btn:hover::before,
.page-contactos .alinear-derecha .boton:hover::before{
  opacity:.75;
}

@media (prefers-reduced-motion: reduce){
  .c-hero__card,
  .c-info__item,
  .c-formWrap,
  .page-contactos .formulario.c-form,
  .c-btn,
  .page-contactos .alinear-derecha .boton{
    transition: none !important;
  }

  .c-hero__card:hover,
  .c-info__item:hover,
  .c-formWrap:hover,
  .page-contactos .formulario.c-form:hover,
  .c-btn:hover,
  .page-contactos .alinear-derecha .boton:hover,
  .c-btn:active,
  .page-contactos .alinear-derecha .boton:active{
    transform: none !important;
  }

  .c-hero__card::before,
  .c-info__item::before,
  .c-formWrap::before,
  .page-contactos .formulario.c-form::before,
  .c-btn::before,
  .page-contactos .alinear-derecha .boton::before{
    display:none !important;
  }
}

/* =========================================
   FORMULARIO CONTACTOS - ESTADOS DE ERROR
   estilo como plan-intermedio
========================================= */

/* inputs / textarea con error */
.page-contactos .input-text.input-error{
  border: 2px solid #ff3b3f !important;
  box-shadow:
    0 0 0 3px rgba(255,77,79,.14),
    0 10px 24px rgba(0,0,0,.12);
}

/* radios cuando hay error visual general */
.page-contactos .tipo-equipo.input-error{
  border: 1px solid rgba(255,77,79,.55);
  background: rgba(255,77,79,.08);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
}

/* mensaje de error */
.page-contactos .formulario .error{
  margin: 2rem auto 0;
  width: 100%;
  max-width: 100%;
  padding: 1.4rem 1.6rem;
  border-radius: 1.2rem;
  text-align: center;
  font-weight: 800;
  line-height: 1.45;
  color: #ffd7d7;
  background: rgba(120, 24, 40, .42);
  border: 1px solid rgba(255,77,79,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* mensaje correcto */
.page-contactos .formulario .correcto{
  margin: 2rem auto 0;
  width: 100%;
  max-width: 100%;
  padding: 1.4rem 1.6rem;
  border-radius: 1.2rem;
  text-align: center;
  font-weight: 800;
  line-height: 1.45;
  color: #dcfce7;
  background: rgba(22, 101, 52, .28);
  border: 1px solid rgba(34,197,94,.45);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* =========================================
   INPUTS PREMIUM - CONTACTOS
========================================= */

.page-contactos .input-text{
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .18s ease;
}

/* hover suave */
.page-contactos .input-text:hover{
  box-shadow:
    0 6px 18px rgba(0,0,0,.15),
    0 0 0 1px rgba(56,182,255,.15);
}

/* focus premium */
.page-contactos .input-text:focus{
  outline: none;
  transform: translateY(-1px);

  box-shadow:
    0 0 0 2px rgba(56,182,255,.55),
    0 0 0 6px rgba(56,182,255,.15),
    0 12px 30px rgba(0,0,0,.18);
}

/* textarea efecto igual */
.page-contactos textarea.input-text:focus{
  transform: translateY(-1px);
}

/* =========================================
   RADIO BUTTONS PREMIUM
========================================= */

.page-contactos .tipo-equipo__opcion{
  transition: transform .2s ease, color .2s ease;
}

.page-contactos .tipo-equipo__opcion:hover{
  transform: translateY(-1px);
  color: #38B6FF;
}

.page-contactos .tipo-equipo__opcion input{
  accent-color: #38B6FF;
  transform: scale(1.1);
  cursor: pointer;
}

/* =========================================
   NO ROMPER EL ESTADO DE ERROR
========================================= */

.page-contactos .input-text.input-error{
  border: 2px solid #ff4d4f !important;

  box-shadow:
    0 0 0 3px rgba(255,77,79,.15),
    0 10px 24px rgba(0,0,0,.12);
}

.page-contactos .input-text.input-error:focus{
  box-shadow:
    0 0 0 2px #ff4d4f,
    0 0 0 6px rgba(255,77,79,.15),
    0 12px 30px rgba(0,0,0,.18);
}

/* =========================================
   BOTON ENVIANDO - MICRO ANIMACION
========================================= */

.page-contactos .alinear-derecha .boton.is-sending{
  pointer-events: none;
  opacity: .92;
  transform: translateY(-1px) scale(.99);
  filter: brightness(1.02);
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.10);
}

.page-contactos .alinear-derecha .boton.is-sending::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1.4rem;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #ffffff;
  animation: btnSpin .7s linear infinite;
}

@keyframes btnSpin{
  to{
    transform: rotate(360deg);
  }
}