/**
 * ============================================================
 *  L-LEDS — SECCIÓN DE CONTACTO B2B (CSS)
 *  Archivo : ll-contact.css
 *  Dep.    : ll-tokens.css (debe cargarse antes)
 *
 *  SECCIONES:
 *   §1  Layout de sección (contenedor, grid 2 col)
 *   §2  Columna izquierda — Propuesta de valor
 *   §3  Columna derecha — Card del formulario
 *   §4  Campos: label, input-wrap, iconos
 *   §5  Estados de campo: focus, error, valid
 *   §6  Select customizado
 *   §7  Textarea + contador de caracteres
 *   §8  Botón de envío + spinner
 *   §9  Panel de éxito post-envío
 *   §10 Honeypot (oculto)
 *   §11 Responsive (≤ 1023px, ≤ 639px)
 *   §12 Micro-animaciones (@keyframes)
 *   §13 Reducción de movimiento
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════════
   §1 — LAYOUT DE SECCIÓN
   ═══════════════════════════════════════════════════════════ */

.ll-contact-section {
  padding-block  : var(--ll-space-24) var(--ll-space-20);
  position       : relative;
  overflow       : hidden;
}

/* Glow de fondo decorativo centrado */
.ll-contact-section::before {
  content        : '';
  position       : absolute;
  top            : 0;
  left           : 50%;
  transform      : translateX(-50%);
  width          : 900px;
  height         : 600px;
  background     : radial-gradient(
    ellipse at top center,
    rgba(125, 218, 0, 0.06) 0%,
    transparent 65%
  );
  pointer-events : none;
  z-index        : 0;
}

/* Grid principal: 2 columnas en desktop */
.ll-contact__container {
  max-width      : var(--ll-container-max);
  margin-inline  : auto;
  padding-inline : var(--ll-container-pad);
  position       : relative;
  z-index        : 1;

  display        : grid;
  grid-template-columns: 1fr 1.15fr;
  gap            : var(--ll-space-16);
  align-items    : start;
}


/* ═══════════════════════════════════════════════════════════
   §2 — COLUMNA IZQUIERDA (propuesta de valor)
   ═══════════════════════════════════════════════════════════ */

.ll-contact__info {
  padding-top    : var(--ll-space-4);
}

/* Eyebrow / etiqueta de sección */
.ll-contact__eyebrow {
  display        : inline-block;
  font-size      : var(--ll-text-xs);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-primary);
  text-transform : uppercase;
  letter-spacing : var(--ll-tracking-widest);
  margin-bottom  : var(--ll-space-4);
}

/* Línea LED corta decorativa antes del eyebrow */
.ll-contact__eyebrow::before {
  content        : '';
  display        : inline-block;
  width          : 24px;
  height         : 2px;
  background     : var(--ll-color-primary);
  vertical-align : middle;
  margin-right   : var(--ll-space-2);
  border-radius  : var(--ll-radius-full);
}

.ll-contact__title {
  font-size      : var(--ll-text-2xl);
  font-weight    : var(--ll-font-extrabold);
  color          : var(--ll-color-text-primary);
  letter-spacing : var(--ll-tracking-tight);
  line-height    : var(--ll-leading-tight);
  margin-bottom  : var(--ll-space-6);
}

.ll-contact__title-accent {
  color          : var(--ll-color-primary);
}

.ll-contact__lead {
  font-size      : var(--ll-text-base);
  color          : var(--ll-color-text-secondary);
  line-height    : var(--ll-leading-loose);
  max-width      : 440px;
  margin-bottom  : var(--ll-space-8);
}

/* Divisor LED */
.ll-contact__led-divider {
  display        : block;
  width          : 80px;
  height         : 2px;
  background     : linear-gradient(
    90deg,
    var(--ll-color-primary)  0%,
    var(--ll-color-secondary) 100%
  );
  border-radius  : var(--ll-radius-full);
  margin-bottom  : var(--ll-space-8);
  box-shadow     : var(--ll-shadow-led);
}

/* Lista de propuesta de valor */
.ll-contact__value-list {
  list-style     : none;
  margin         : 0;
  padding        : 0;
  display        : flex;
  flex-direction : column;
  gap            : var(--ll-space-6);
}

.ll-contact__value-item {
  display        : flex;
  align-items    : flex-start;
  gap            : var(--ll-space-4);
}

.ll-contact__value-icon {
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 40px;
  height         : 40px;
  border-radius  : var(--ll-radius-md);
  background     : var(--ll-color-primary-muted);
  border         : 1px solid var(--ll-color-border-accent);
}

.ll-contact__value-icon svg {
  width          : 18px;
  height         : 18px;
  stroke         : var(--ll-color-primary);
  fill           : none;
}

.ll-contact__value-label {
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-text-primary);
  margin-bottom  : var(--ll-space-1);
}

.ll-contact__value-desc {
  font-size      : var(--ll-text-sm);
  color          : var(--ll-color-text-secondary);
  line-height    : var(--ll-leading-loose);
  margin         : 0;
}


/* ═══════════════════════════════════════════════════════════
   §3 — COLUMNA DERECHA (card del formulario)
   ═══════════════════════════════════════════════════════════ */

.ll-contact__form-wrapper {
  /* El card tiene su propio z-index para que el glow quede detrás */
  position       : relative;
}

.ll-contact__card {
  background     : var(--ll-color-bg-surface);
  border         : 1px solid var(--ll-color-border);
  border-radius  : var(--ll-radius-2xl);
  padding        : var(--ll-space-10);
  box-shadow     : var(--ll-shadow-xl);
  position       : relative;
  overflow       : hidden;
}

/* Acento verde en el borde superior del card */
.ll-contact__card::before {
  content        : '';
  position       : absolute;
  top            : 0;
  left           : var(--ll-space-10);
  right          : var(--ll-space-10);
  height         : 2px;
  background     : linear-gradient(
    90deg,
    transparent,
    var(--ll-color-primary) 30%,
    var(--ll-color-secondary) 70%,
    transparent
  );
  border-radius  : var(--ll-radius-full);
}

.ll-contact__card-header {
  margin-bottom  : var(--ll-space-8);
}

.ll-contact__card-title {
  font-size      : var(--ll-text-lg);
  font-weight    : var(--ll-font-bold);
  color          : var(--ll-color-text-primary);
  letter-spacing : var(--ll-tracking-tight);
  margin-bottom  : var(--ll-space-1);
}

.ll-contact__card-subtitle {
  font-size      : var(--ll-text-sm);
  color          : var(--ll-color-text-secondary);
  margin         : 0;
}


/* ═══════════════════════════════════════════════════════════
   §4 — CAMPOS: LABEL, INPUT-WRAP, ÍCONOS
   ═══════════════════════════════════════════════════════════ */

.ll-contact__form {
  display        : flex;
  flex-direction : column;
  gap            : var(--ll-space-5);
}

/* Fila de dos columnas para email + teléfono */
.ll-cf-row {
  display        : grid;
  grid-template-columns: 1fr 1fr;
  gap            : var(--ll-space-4);
}

/* Grupo de campo */
.ll-cf-group {
  display        : flex;
  flex-direction : column;
  gap            : var(--ll-space-2);
}

/* Label */
.ll-cf-label {
  font-size      : var(--ll-text-sm);
  font-weight    : var(--ll-font-semibold);
  color          : var(--ll-color-text-secondary);
  letter-spacing : var(--ll-tracking-wide);
  display        : flex;
  align-items    : center;
  gap            : var(--ll-space-1);
}

.ll-cf-required {
  color          : var(--ll-color-primary);
  font-size      : var(--ll-text-sm);
  line-height    : 1;
}

/* Wrapper posicional (para el ícono absoluto) */
.ll-cf-input-wrap {
  position       : relative;
  display        : flex;
  align-items    : center;
}

/* Ícono dentro del input */
.ll-cf-input-icon {
  position       : absolute;
  left           : var(--ll-space-4);
  top            : 50%;
  transform      : translateY(-50%);
  width          : 16px;
  height         : 16px;
  pointer-events : none;
  z-index        : 1;
  color          : var(--ll-color-text-muted);
  transition     : color var(--ll-transition-base);
}

.ll-cf-input-icon svg {
  width          : 16px;
  height         : 16px;
  stroke         : currentColor;
  fill           : none;
  display        : block;
}

/* Input base */
.ll-cf-input {
  width          : 100%;
  height         : 48px;
  padding-left   : calc(var(--ll-space-4) + 16px + var(--ll-space-3));
  padding-right  : var(--ll-space-4);
  padding-block  : 0;

  background     : var(--ll-color-bg-elevated);
  border         : 1.5px solid var(--ll-color-border);
  border-radius  : var(--ll-radius-md);

  font-family    : var(--ll-font-sans);
  font-size      : var(--ll-text-base);
  font-weight    : var(--ll-font-regular);
  color          : var(--ll-color-text-primary);

  outline        : none;
  appearance     : none;
  -webkit-appearance: none;

  transition     : border-color var(--ll-transition-base),
                   box-shadow   var(--ll-transition-base),
                   background   var(--ll-transition-base);
}

/* Placeholder */
.ll-cf-input::placeholder {
  color          : var(--ll-color-text-muted);
  font-weight    : var(--ll-font-regular);
}


/* ═══════════════════════════════════════════════════════════
   §5 — ESTADOS DE CAMPO: FOCUS, ERROR, VALID
   ═══════════════════════════════════════════════════════════ */

/* Focus: resplandor verde de marca */
.ll-cf-input:focus {
  border-color   : var(--ll-color-primary);
  background     : rgba(27, 64, 0, 0.80);
  box-shadow     : 0 0 0 3px rgba(125, 218, 0, 0.15),
                   0 0 16px rgba(125, 218, 0, 0.08);
}

/* Focus cambia el ícono a primario */
.ll-cf-input-wrap:focus-within .ll-cf-input-icon {
  color          : var(--ll-color-primary);
}

/* Estado error */
.ll-cf-group.has-error .ll-cf-input {
  border-color   : var(--ll-color-error);
  background     : rgba(239, 68, 68, 0.06);
  box-shadow     : 0 0 0 3px rgba(239, 68, 68, 0.10);
}

.ll-cf-group.has-error .ll-cf-input-icon {
  color          : var(--ll-color-error);
}

/* Estado válido */
.ll-cf-group.is-valid .ll-cf-input {
  border-color   : rgba(125, 218, 0, 0.40);
}

.ll-cf-group.is-valid .ll-cf-input-icon {
  color          : var(--ll-color-primary);
}

/* Mensaje de error */
.ll-cf-error {
  font-size      : var(--ll-text-xs);
  color          : var(--ll-color-error);
  font-weight    : var(--ll-font-medium);
  min-height     : 1em;
  margin         : 0;
  animation      : ll-cf-error-shake 0.3s ease;
}

.ll-cf-error:empty {
  display        : none;
}


/* ═══════════════════════════════════════════════════════════
   §6 — SELECT CUSTOMIZADO
   ═══════════════════════════════════════════════════════════ */

.ll-cf-select-wrap {
  position       : relative;
}

.ll-cf-select {
  padding-right  : var(--ll-space-10);  /* espacio para la flecha */
  cursor         : pointer;
}

/* Opciones del select (hereda fondo oscuro en navegadores compatibles) */
.ll-cf-select option {
  background     : var(--ll-color-bg-elevated);
  color          : var(--ll-color-text-primary);
}

.ll-cf-select option:disabled {
  color          : var(--ll-color-text-muted);
}

/* Flecha custom del select */
.ll-cf-select-arrow {
  position       : absolute;
  right          : var(--ll-space-4);
  top            : 50%;
  transform      : translateY(-50%);
  pointer-events : none;
  color          : var(--ll-color-text-muted);
  transition     : color var(--ll-transition-base),
                   transform var(--ll-transition-base);
}

.ll-cf-select-arrow svg {
  width          : 16px;
  height         : 16px;
  stroke         : currentColor;
  fill           : none;
  display        : block;
}

/* La flecha rota al abrir el select (en navegadores que lo soportan) */
.ll-cf-input-wrap:focus-within .ll-cf-select-arrow {
  color          : var(--ll-color-primary);
  transform      : translateY(-50%) rotate(180deg);
}


/* ═══════════════════════════════════════════════════════════
   §7 — TEXTAREA + CONTADOR DE CARACTERES
   ═══════════════════════════════════════════════════════════ */

.ll-cf-textarea-wrap {
  align-items    : flex-start;  /* el ícono se ancla arriba */
}

.ll-cf-textarea-wrap .ll-cf-input-icon {
  top            : var(--ll-space-4);      /* alinear al texto, no al centro */
  transform      : translateY(0);
}

.ll-cf-textarea {
  height         : auto;
  min-height     : 140px;
  padding-top    : var(--ll-space-4);
  padding-bottom : var(--ll-space-4);
  resize         : vertical;
  line-height    : var(--ll-leading-loose);
}

/* Meta fila: error + contador */
.ll-cf-meta {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  gap            : var(--ll-space-2);
  min-height     : 1em;
}

.ll-cf-char-count {
  font-size      : var(--ll-text-xs);
  color          : var(--ll-color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space    : nowrap;
  flex-shrink    : 0;
}

/* Alerta cuando se acerca al límite */
.ll-cf-char-count.is-near-limit {
  color          : var(--ll-color-warning);
}

.ll-cf-char-count.is-at-limit {
  color          : var(--ll-color-error);
  font-weight    : var(--ll-font-semibold);
}


/* ═══════════════════════════════════════════════════════════
   §8 — BOTÓN DE ENVÍO + SPINNER
   ═══════════════════════════════════════════════════════════ */

.ll-cf-actions {
  display        : flex;
  flex-direction : column;
  gap            : var(--ll-space-4);
  margin-top     : var(--ll-space-2);
}

.ll-cf-privacy {
  font-size      : var(--ll-text-xs);
  color          : var(--ll-color-text-muted);
  line-height    : var(--ll-leading-loose);
  margin         : 0;
}

.ll-cf-privacy-link {
  color          : var(--ll-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition     : color var(--ll-transition-base);
}

.ll-cf-privacy-link:hover {
  color          : var(--ll-color-primary-hover);
}

/* Botón de envío */
.ll-cf-submit-btn {
  width          : 100%;
  justify-content: center;
  height         : 52px;
  font-size      : var(--ll-text-base);
  font-weight    : var(--ll-font-bold);
  letter-spacing : var(--ll-tracking-wide);
  gap            : var(--ll-space-3);
  position       : relative;
}

.ll-cf-submit-icon {
  width          : 18px;
  height         : 18px;
  stroke         : currentColor;
  fill           : none;
  flex-shrink    : 0;
  transition     : transform var(--ll-transition-spring);
}

.ll-cf-submit-btn:hover .ll-cf-submit-icon {
  transform      : translateX(3px) translateY(-3px);
}

/* Spinner de carga */
.ll-cf-submit-spinner {
  display        : none;
  width          : 20px;
  height         : 20px;
}

.ll-cf-submit-spinner svg {
  width          : 100%;
  height         : 100%;
  animation      : ll-cf-spin 0.8s linear infinite;
}

/* Estado loading del botón */
.ll-cf-submit-btn.is-loading {
  opacity        : 0.85;
  cursor         : not-allowed;
  pointer-events : none;
}

.ll-cf-submit-btn.is-loading .ll-cf-submit-icon,
.ll-cf-submit-btn.is-loading .ll-cf-submit-text {
  display        : none;
}

.ll-cf-submit-btn.is-loading .ll-cf-submit-spinner {
  display        : block;
}


/* ═══════════════════════════════════════════════════════════
   §9 — PANEL DE ÉXITO POST-ENVÍO
   ═══════════════════════════════════════════════════════════ */

.ll-cf-success {
  display        : flex;
  align-items    : flex-start;
  gap            : var(--ll-space-5);
  padding        : var(--ll-space-8);
  background     : linear-gradient(
    135deg,
    rgba(125, 218, 0, 0.08),
    rgba(27, 64, 0, 0.60)
  );
  border         : 1px solid var(--ll-color-border-accent);
  border-radius  : var(--ll-radius-xl);
  animation      : ll-cf-success-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ll-cf-success[hidden] {
  display        : none;
}

.ll-cf-success__icon {
  flex-shrink    : 0;
  width          : 52px;
  height         : 52px;
  border-radius  : 50%;
  background     : var(--ll-color-primary-muted);
  border         : 1.5px solid var(--ll-color-border-accent);
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.ll-cf-success__icon svg {
  width          : 24px;
  height         : 24px;
  stroke         : var(--ll-color-primary);
  fill           : none;
}

.ll-cf-success__title {
  font-size      : var(--ll-text-md);
  font-weight    : var(--ll-font-bold);
  color          : var(--ll-color-text-primary);
  margin-bottom  : var(--ll-space-2);
}

.ll-cf-success__msg {
  font-size      : var(--ll-text-sm);
  color          : var(--ll-color-text-secondary);
  line-height    : var(--ll-leading-loose);
  margin-bottom  : var(--ll-space-3);
}

.ll-cf-success__msg strong {
  color          : var(--ll-color-text-primary);
}

.ll-cf-success__whatsapp {
  font-size      : var(--ll-text-sm);
  color          : var(--ll-color-text-muted);
  margin         : 0;
}

.ll-cf-success__wa-link {
  color          : var(--ll-color-primary);
  font-weight    : var(--ll-font-medium);
  text-decoration: none;
  transition     : color var(--ll-transition-base);
}

.ll-cf-success__wa-link:hover {
  color          : var(--ll-color-primary-hover);
}


/* ═══════════════════════════════════════════════════════════
   §10 — HONEYPOT ANTI-SPAM (invisible a usuarios humanos)
   ═══════════════════════════════════════════════════════════ */

.ll-contact__honeypot {
  position       : absolute;
  left           : -9999px;
  top            : -9999px;
  width          : 1px;
  height         : 1px;
  overflow       : hidden;
  opacity        : 0;
  pointer-events : none;
  tab-size       : 0;
}


/* ═══════════════════════════════════════════════════════════
   §11 — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  .ll-contact__container {
    grid-template-columns: 1fr;
    gap                  : var(--ll-space-10);
  }

  .ll-contact__info {
    padding-top    : 0;
  }

  .ll-contact__title {
    font-size      : var(--ll-text-xl);
  }

  .ll-contact__lead {
    max-width      : none;
  }

}

@media (max-width: 639px) {

  .ll-contact-section {
    padding-block  : var(--ll-space-16) var(--ll-space-12);
  }

  .ll-contact__card {
    padding        : var(--ll-space-6);
  }

  /* Email y teléfono pasan a una sola columna */
  .ll-cf-row {
    grid-template-columns: 1fr;
  }

  .ll-cf-submit-btn {
    height         : 48px;
  }

  .ll-cf-success {
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    padding        : var(--ll-space-6);
  }

}


/* ═══════════════════════════════════════════════════════════
   §12 — @KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

/* Shake de error en el mensaje */
@keyframes ll-cf-error-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* Rotación del spinner */
@keyframes ll-cf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Entrada del panel de éxito */
@keyframes ll-cf-success-enter {
  from {
    opacity   : 0;
    transform : scale(0.95) translateY(8px);
  }
  to {
    opacity   : 1;
    transform : scale(1) translateY(0);
  }
}


/* ═══════════════════════════════════════════════════════════
   §13 — REDUCCIÓN DE MOVIMIENTO
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  .ll-cf-error,
  .ll-cf-success,
  .ll-cf-submit-spinner svg {
    animation      : none;
  }

  .ll-cf-input,
  .ll-cf-input:focus,
  .ll-cf-submit-btn,
  .ll-cf-select-arrow,
  .ll-cf-submit-icon {
    transition     : none;
  }

}