.contacto-page {
  padding: 4rem 1.5rem 3rem;
}

.contacto-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.contacto-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
}

.contacto-input {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contacto-input:focus {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  color: var(--text);
  outline: none;
}

.contacto-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.contacto-input option {
  background: var(--surface);
  color: var(--text);
}

.contacto-input.is-invalid {
  border-color: #f87171;
}

.contacto-textarea {
  resize: vertical;
  min-height: 160px;
}

/* el checkbox de consentimiento se fundía con la tarjeta: su fondo por defecto
   coincidía con --card-bg (el mismo color en ambos temas) y el borde era casi
   transparente, así que parecía esconderse o borrarse al pulsarlo. Lo pintamos
   con contraste propio y check blanco autoconténido, sin depender de Bootstrap */
.contacto-aviso-check .form-check-input {
  -webkit-appearance: none;
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
  /* fondo más claro que la tarjeta para que la casilla siempre se vea */
  background-color: var(--surface-2);
  border: 2px solid var(--muted);
  border-radius: 0.3em;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contacto-aviso-check .form-check-input:hover {
  border-color: var(--accent);
}

/* check blanco propio para no depender del SVG de Bootstrap */
.contacto-aviso-check .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8em;
}

.contacto-aviso-check .form-check-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.contacto-aviso-check .form-check-label {
  cursor: pointer;
}

/* enlace dentro del label que abre el popup; lo vestimos como enlace, no como botón */
.contacto-privacy-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.contacto-privacy-link:hover {
  color: var(--text);
}

/* aviso legal de protección de datos: obligatorio pero no debe robar protagonismo
   al formulario, así que va en letra pequeña, apagado y con interlineado justo */
.contacto-aviso-datos {
  font-size: 0.7rem;
  line-height: 1.45;
  opacity: 0.7;
}

.contacto-aviso-datos p {
  margin-bottom: 0.35rem;
}

.contacto-aviso-datos p:last-child {
  margin-bottom: 0;
}

/* padding: 1px hace que el degradado del fondo sea visible como borde alrededor del input hijo */
.contacto-message-wrap {
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(16, 185, 129, 0.12), rgba(245, 158, 11, 0.12));
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.26);
}

/* 13px: un píxel menos que el padre para que el borde degradado quede visible */
.contacto-message-wrap .contacto-input {
  border-radius: 13px;
}

.contacto-message-wrap.is-at-limit {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(99, 102, 241, 0.18));
}

.contacto-message-wrap.is-over-limit {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.38), rgba(245, 158, 11, 0.22));
}

.contacto-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.contacto-message-warning {
  color: #fbbf24;
  font-size: 0.9rem;
}

.contacto-message-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* user-select: none para que el usuario no seleccione accidentalmente el contador al seleccionar texto */
  user-select: none;
}

.contacto-message-counter #char-count {
  color: var(--text);
}

.contacto-message-counter__sep {
  opacity: 0.6;
}

/* el selector encadenado marca el contador cuando el textarea lleva también is-at-limit */
.contacto-message-wrap.is-at-limit + .invalid-feedback + .contacto-message-meta .contacto-message-counter {
  border-color: rgba(245, 158, 11, 0.35);
}

.contacto-message-wrap.is-over-limit + .invalid-feedback + .contacto-message-meta .contacto-message-counter {
  border-color: rgba(248, 113, 113, 0.45);
}

/* sticky para que acompañe el scroll; top incluye el alto de la navbar para no quedar tapada */
.contacto-info {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
}

.contacto-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transition: border-color 0.2s, transform 0.3s ease, box-shadow 0.3s ease;
}

.contacto-info-item:hover {
  border-color: rgba(99, 102, 241, 0.28);
  /* desplazamiento lateral en lugar de vertical: refuerza la idea de "datos a la derecha" */
  transform: translateX(6px);
}

.contacto-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: rgba(99, 102, 241, 0.14);
  color: var(--accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.instagram-icon {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent);
}

.contacto-info-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

/* el email es la línea más larga; nowrap para que entre de una pieza en el
   card (la columna lateral se ensanchó a col-lg-4 para darle sitio) */
.contacto-info-email {
  white-space: nowrap;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

@media (max-width: 991px) {
  .contacto-info {
    position: static;
  }
}

@media (max-width: 575px) {
  .contacto-page {
    padding: 2.5rem 1rem 3rem;
  }

  .contacto-card {
    padding: 1.25rem;
  }

  .contacto-info-item {
    padding: 0.75rem 0.9rem;
  }
}

[data-theme="light"] .contacto-card,
[data-theme="light"] .contacto-info-item {
  background: var(--card-bg);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .contacto-page .text-white {
  color: var(--text) !important;
}

[data-theme="light"] .contacto-page .text-white-50 {
  color: var(--muted) !important;
}

[data-theme="light"] .contacto-info-item .text-white {
  color: var(--text) !important;
}

[data-theme="light"] .contacto-info-label {
  color: var(--muted);
}