.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}/* Footer oscuro fijo: arranca neutro para continuar el final del Grid */
.gtec-co-footer-oscuro {
  background-color: #121212 !important;
  background-image:
    url("/o/Portal-Gtec-Theme/images/backgrounds/bg-pattern.svg"),
    radial-gradient(85% 75% at 94.36% 92.12%, rgba(61, 36, 183, 0.08) 0%, rgba(61, 36, 183, 0) 100%),
    radial-gradient(45% 45% at 50% 50%, rgba(42, 24, 119, 0.08) 0%, rgba(42, 24, 119, 0) 100%) !important;
  background-size:
    35rem,
    100% 100%,
    100% 100% !important;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat !important;
  background-position:
    0 0,
    0 0,
    0 0 !important;
  background-blend-mode:
    multiply,
    screen,
    screen !important;
}/* Fondo único para toda la fila (formulario + beneficios) */
.gtec-co-conversion-row {
  background-color: #121212 !important;
  background-image:
    url("/o/Portal-Gtec-Theme/images/backgrounds/bg-pattern.svg"),
    var(--bg-dark-mode-gradients) !important;
  background-size:
    35rem,
    100% 200% !important;
  background-repeat:
    repeat,
    no-repeat !important;
  background-position:
    0 0,
    0 100% !important;
  background-blend-mode:
    multiply,
    screen !important;
}

/* Las dos piezas dentro de la fila dejan de pintar su propio fondo */
.gtec-co-conversion-row .gtec-co-conversion-form,
.gtec-co-conversion-row .gtec-co-diagnostico-lateral {
  background: transparent !important;
}/* =====================================================================
   GTEC COLOMBIA | FORMULARIO DE CONVERSIÓN (Liferay Forms)
   Clase raíz: gtec-co-conversion-form
   Se pega en: Editor de páginas > widget Form > Avanzado > Custom CSS
   (CSS puro, SIN etiquetas <style>).
   No usa bg-light-mode ni bg-dark-mode: colores y fondo fijos.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SECCIÓN NEGRA (mismo fondo y degradado que "Beneficios")
   --------------------------------------------------------------------- */
.gtec-co-conversion-form {
  box-sizing: border-box;
  width: 100%;
  padding: 3rem clamp(1rem, 3vw, 2rem);

  background-color: #121212 !important;
  background-image:
    url("/o/Portal-Gtec-Theme/images/backgrounds/bg-pattern.svg"),
    var(--bg-dark-mode-gradients) !important;
  background-size:
    35rem,
    100% 200% !important;
  background-repeat:
    repeat,
    no-repeat !important;
  background-position:
    0 0,
    0 100% !important;
  background-blend-mode:
    multiply,
    screen !important;
}

/* Contenedores de Liferay transparentes para que se vea el fondo */
.gtec-co-conversion-form .portlet-content,
.gtec-co-conversion-form .portlet-body,
.gtec-co-conversion-form .lfr-ddm__default-page {
  background: transparent !important;
  border: none !important;
}

/* El formulario es "container" para adaptar columnas a su propio ancho */
.gtec-co-conversion-form .ddm-form-builder-app {
  container-type: inline-size;
  container-name: gtec-co-conversion-form;
}

/* ---------------------------------------------------------------------
   2. TEXTO SIEMPRE BLANCO (red de seguridad)
   El tema pinta de negro/blanco todos los textos según la hora; aquí se
   fija. Las reglas específicas de abajo (más específicas) afinan tonos.
   --------------------------------------------------------------------- */
.gtec-co-conversion-form,
.gtec-co-conversion-form :where(h1, h2, h3, h4, h5, h6, p, span, a, li, div, label, legend, button) {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   3. ELEMENTOS OCULTOS (igual que en el formulario viejo)
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .lfr-ddm__default-page-header,
.gtec-co-conversion-form .text-secondary {
  display: none !important;
}

/* ---------------------------------------------------------------------
   4. TÍTULO (con ícono) Y SUBTÍTULO
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .lfr-ddm-form-page-title {
  position: relative;
  padding-left: 52px;
  margin: 0 0 10px 0 !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.2;
}

.gtec-co-conversion-form .lfr-ddm-form-page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M21 12c0 4.418-4.03 8-9 8-1.1 0-2.15-.16-3.1-.46L3 21l1.54-4.07C3.58 15.5 3 13.82 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'/%3E%3C/svg%3E");
}

.gtec-co-conversion-form .lfr-ddm-form-page-description {
  padding-left: 52px;
  margin: 0 0 2.8rem 0 !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---------------------------------------------------------------------
   5. ETIQUETAS Y ASTERISCO DE OBLIGATORIO
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .ddm-label,
.gtec-co-conversion-form .lfr-ddm-legend {
  color: rgba(248, 248, 248, 0.8) !important;
  font-family: Satoshi, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

.gtec-co-conversion-form .ddm-label {
  line-height: 100%;
}

.gtec-co-conversion-form .lfr-ddm-legend {
  line-height: 1.3;
}

.gtec-co-conversion-form .ddm-label-required .lexicon-icon {
  display: none;
}

.gtec-co-conversion-form .ddm-label-required {
  display: inline-flex;
  align-items: flex-start;
  padding: 0;
}

.gtec-co-conversion-form .ddm-label-required::after {
  content: "*";
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

/* Texto del párrafo ("Tu análisis inicial está listo...") */
.gtec-co-conversion-form .liferay-ddm-form-field-paragraph-text,
.gtec-co-conversion-form .liferay-ddm-form-field-paragraph-text p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------------------------------------------------------------------
   6. CAMPOS DE TEXTO
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .ddm-field .form-control,
.gtec-co-conversion-form .ddm-field .form-control-select {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  padding: 10px !important;
  box-shadow: none !important;
}

.gtec-co-conversion-form .ddm-field .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.gtec-co-conversion-form .ddm-field .form-control:focus,
.gtec-co-conversion-form .ddm-field .form-control-select:focus {
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}

/* Autocompletado del navegador (evita el fondo claro) */
.gtec-co-conversion-form .ddm-field .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   7. OPCIONES TIPO RADIO
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .custom-control-label-text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1rem;
}

.gtec-co-conversion-form .custom-control {
  margin-bottom: 0.25rem;
}

.gtec-co-conversion-form .custom-control-label::before {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.gtec-co-conversion-form .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary, #3b82f6) !important;
  border-color: var(--primary, #3b82f6) !important;
}

/* ---------------------------------------------------------------------
   8. BOTÓN ENVIAR Y NOTA DE CONFIDENCIALIDAD
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .lfr-ddm-form-pagination-controls {
  display: flow-root;
  margin-top: 1.5rem;
}

.gtec-co-conversion-form #ddm-form-submit {
  color: #ffffff !important;
}

.gtec-co-conversion-form .ddm-form-builder-app::after {
  content: "Tu información es confidencial. Nos pondremos en contacto en menos de 24h.";
  display: block;
  margin: 1.5rem auto 0;
  font-size: 0.875rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

/* En la pantalla final no se muestra esta nota (tiene la suya) */
.gtec-co-conversion-form .ddm-form-builder-app:has(.lfr-ddm__default-page-container)::after {
  display: none;
}

/* ---------------------------------------------------------------------
   9. ESTADO DE ERROR
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .form-feedback-item,
.gtec-co-conversion-form .has-error .form-feedback-item {
  color: #ff8b8b !important;
}

.gtec-co-conversion-form .has-error .form-control {
  border-color: #ff8b8b !important;
}

/* ---------------------------------------------------------------------
   10. PANTALLA FINAL ("gracias")
   --------------------------------------------------------------------- */
.gtec-co-conversion-form .lfr-ddm__default-page-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 600px;
  padding: 80px 20px;
  position: relative;
  grid-template-rows: auto auto auto auto;
  row-gap: 8px;
}

.gtec-co-conversion-form .lfr-ddm__default-page-container::before {
  content: "";
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-bottom: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

.gtec-co-conversion-form .lfr-ddm__default-page-title {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 600;
}

.gtec-co-conversion-form .lfr-ddm__default-page-description {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 22px;
}

.gtec-co-conversion-form .lfr-ddm__default-page-container::after {
  content: "Tu información es confidencial.\A Te contactaremos en menos de 24 horas hábiles.";
  white-space: pre-line;
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.gtec-co-conversion-form .lfr-ddm__default-page-buttons {
  display: none !important;
}

/* ---------------------------------------------------------------------
   11. ADAPTACIÓN A ANCHOS ANGOSTOS
   Se mide el ancho del propio formulario (no el de la ventana), así que
   funciona igual en una columna de grid o a pantalla completa.
   --------------------------------------------------------------------- */
@container gtec-co-conversion-form (max-width: 520px) {

  /* Los campos de dos columnas pasan a una sola */
  .gtec-co-conversion-form .col-ddm {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .gtec-co-conversion-form .lfr-ddm-form-page-title {
    padding-left: 44px;
    font-size: 24px !important;
  }

  .gtec-co-conversion-form .lfr-ddm-form-page-title::before {
    width: 24px;
    height: 24px;
    top: 3px;
  }

  .gtec-co-conversion-form .lfr-ddm-form-page-description {
    padding-left: 44px;
    font-size: 16px;
  }

  .gtec-co-conversion-form .lfr-ddm__default-page-container {
    min-height: 480px;
    padding: 56px 12px;
  }

  .gtec-co-conversion-form .lfr-ddm__default-page-title {
    font-size: 24px !important;
  }

  .gtec-co-conversion-form .lfr-ddm__default-page-description {
    font-size: 18px;
  }
}