#contacto {
  padding: 100px 95px;
}

.contacto-inner {
  display: grid;
  grid-template-columns: 0.78fr 1fr;   /* foto más ancha; texto no tan ancho */
  border-radius: 32px;
  overflow: hidden;
  min-height: 520px;
}

.contacto-left {
  min-height: 820px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #f4f4f4;        /* mismo gris que el panel del texto -> sin costura */
}

/* Retrato B/N en una franja anclada a la DERECHA del panel (pegada al texto).
   Con cover + position left se ve la mitad izquierda del rostro; el resto del
   panel queda en blanco a la izquierda. */
/* Fondo fijo (cerebros) detrás de la persona */
.foto-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('../images/minds6.jpg') center / cover no-repeat;
}

.foto-media {
  position: absolute;
  inset: 0;
  z-index: 2;                   /* la persona va por delante del fondo naranja */
  background-image: url('../images/contacto/Miimagen_cartoon.webp');
  background-size: cover;        /* llena todo el ancho (hombros abajo tapan los lados) */
  background-position: center top;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.03);
  will-change: transform;
  /* Efecto GARABATO: boil FRAME A FRAME (saltos discretos, dibujado a mano) pero sutil */
  animation: garabato-boil 1s steps(1, end) infinite;
}

/* base scale(1.03) para que el vaivén no descubra el fondo por los bordes.
   Cada keyframe = un fotograma; steps() salta entre ellos sin interpolar. */
@keyframes garabato-boil {
  0%   { transform: scale(1.03) translate(0, 0)       rotate(0deg); }
  20%  { transform: scale(1.03) translate(-1.5px, 1px)  rotate(0.4deg); }
  40%  { transform: scale(1.03) translate(1.5px, -1px)  rotate(-0.35deg); }
  60%  { transform: scale(1.03) translate(-1px, -1.5px) rotate(0.45deg); }
  80%  { transform: scale(1.03) translate(1.5px, 1px)   rotate(-0.4deg); }
  100% { transform: scale(1.03) translate(0, 0)       rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .foto-media { animation: none; transform: scale(1.03); }
}

/* ---- Flash de cámara (dentro de la tarjeta) ---- */
.flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.contacto-left.disparo .flash {
  animation: camara-flash 1.1s ease-out both;
}

@keyframes camara-flash {
  0%   { opacity: 0; }
  6%   { opacity: 0.28; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Cerebros levitando (siempre visibles) ---- */
.cerebros-levitando {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Capa externa: se ocupa de la levitación (subir/bajar + girar) */
.cerebro {
  position: absolute;
  animation: levitar var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

/* Capa interna: el cerebro SVG coloreado + su "pop" al hacer la foto */
.cerebro svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--col, #d1286a);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

.contacto-left.disparo .cerebro svg {
  animation: cerebro-pop 0.6s ease-out both;
  animation-delay: var(--dp, 0.5s);
}

@keyframes levitar {
  0%, 100% { transform: translateY(0)     rotate(var(--rot, -5deg)); }
  50%      { transform: translateY(-15px) rotate(calc(var(--rot, -5deg) * -1)); }
}

@keyframes cerebro-pop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Tamaño, posición y color — grandes y superpuestos a la figura */
/* Cúmulo por encima de la cabeza */
.cerebro.c1 { width: 92px; height: 92px; top: 2%;  left: 38%; --col: #f2d80a; --dur: 5.2s; --rot: -7deg; --d: 0.2s; --dp: 0.55s; }
.cerebro.c3 { width: 72px; height: 72px; top: 7%;  left: 62%; --col: #2bb7c4; --dur: 4.7s; --rot: 8deg;  --d: 0.4s; --dp: 0.75s; }
.cerebro.c6 { width: 50px; height: 50px; top: 1%;  left: 56%; --col: #ff7a1a; --dur: 6.4s; --rot: -5deg; --d: 1.6s; --dp: 1.05s; }
.cerebro.c2 { width: 62px; height: 62px; top: 22%; left: 12%; --col: #d1286a; --dur: 6.1s; --rot: 6deg;  --d: 0.9s; --dp: 0.65s; }
/* Superpuestos por delante, sobre los hombros/pecho */
.cerebro.c4 { width: 84px; height: 84px; top: 56%; left: 12%; --col: #46c26a; --dur: 5.7s; --rot: -9deg; --d: 1.3s; --dp: 0.85s; }
.cerebro.c5 { width: 74px; height: 74px; top: 60%; left: 68%; --col: #8b5cf6; --dur: 5.0s; --rot: 7deg;  --d: 0.7s; --dp: 0.95s; }

.contacto-right {
  background: #f4f4f4;
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.contacto-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d1286a;
  margin: 0;
}

.contacto-right h2 {
  font-size: 58px;
  font-weight: 800;
  color: #111;
  margin: 0;
  line-height: 1;
  letter-spacing: -2px;
}

.contacto-right h2 span {
  color: #d1286a;
}

.contacto-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  max-width: 420px;
  margin: 0;
}

.contacto-email {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 0;
  padding: 0;
  width: fit-content;
  transition: color 0.2s ease, transform 0.2s ease;
  margin-top: 8px;
}

.contacto-email:hover {
  color: #d1286a;
  transform: translateY(-3px);
}

.contacto-email:hover {
  color: #d1286a;
}

.contacto-email svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.contacto-email:hover svg {
  transform: translateX(4px);
}

.contacto-redes {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.contacto-redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 0;
  color: #111;
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

.contacto-redes a:hover {
  color: #d1286a;
  transform: translateY(-3px);
}

.contacto-redes svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 900px) {
  #contacto {
    padding: 60px 25px;
  }

  .contacto-inner {
    grid-template-columns: 1fr;
  }

  .contacto-left {
    min-height: 0;
    aspect-ratio: 1883 / 2171;   /* proporción de la persona -> se ve la cara entera */
  }

  /* En móvil, la cara entera dentro del panel (sin recortar arriba/abajo) */
  .foto-media {
    background-size: contain;
    background-position: center;
  }

  .contacto-right {
    padding: 50px 30px;
  }

  .contacto-right h2 {
    font-size: 42px;
  }
}

@media (max-width: 580px) {
  .contacto-right h2 {
    font-size: 34px;
  }
}