/**
 * Pagina "Contacto": detalles que los controles de Elementor no cubren.
 *
 * El radio de los campos es un control unico para todo el formulario, y en el
 * diseno los campos van en pastilla pero el textarea no, asi que el textarea
 * se corrige aqui. El resto son cosas del iframe del mapa y de los dos
 * titulos de grupo, que van como campos html dentro del formulario y por eso
 * no tienen controles de tipografia propios.
 */

/* Titulos de grupo del formulario ("Datos personas", "Informacion
   profesional"). Son campos html: heredan el tamano del campo, no del titulo. */
.scala-contacto__form .scala-form__grupo {
  margin: 8px 0 0;
  font-family: var(--e-global-typography-h3-font-family), serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--e-global-color-verde_acero_darker);
}

/* El textarea no va en pastilla: el control de radio es uno para todos los
   campos, asi que aqui se le devuelve el radio del diseno. */
.scala-contacto__form textarea.elementor-field-textual {
  border-radius: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* El iframe del mapa no hereda el radio del widget. */
.scala-contacto__mapa iframe {
  border-radius: 12px;
  display: block;
}

/* La opcion-placeholder de los select (valor vacio) en el tono de un
   placeholder, no en el del texto elegido. */
.scala-contacto__form select.elementor-field-textual:has(option[value=""]:checked) {
  color: var(--e-global-color-lino_claro_dark_active);
}

/**
 * Preguntas frecuentes (acordeon anidado).
 *
 * Los iconos no se giran desde aqui: los que estan puestos en el widget ya
 * apuntan como deben, tanto el de abrir como el de cerrar. Hubo un giro de -45
 * grados en reposo y de 90 al abrir, de cuando el icono era un circulo con
 * flecha a la derecha y habia que imitar la diagonal del Figma; con los
 * iconos actuales solo los desalineaba.
 */

.scala-faq .e-n-accordion-item {
  background-color: var(--e-global-color-lino_claro_light);
  border-radius: 16px;
  box-shadow: 0 0 9.3px rgba(0, 0, 0, .25);
}

/* El acordeon trae un filete y un radio propios en la cabecera y en el
   contenido: el filete era la linea que partia la tarjeta en dos al abrir, y
   el radio dejaba ver las esquinas de la caja de la pregunta dentro de la
   tarjeta. La tarjeta la dibuja el item y solo el item: estas dos cajas van
   sin fondo, sin filete y sin radio. */
.scala-faq .e-n-accordion-item > .e-n-accordion-item-title,
.scala-faq .e-n-accordion-item > .e-con {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
}

/**
 * Flecha de los desplegables: el chevron de trazo del diseno, no el triangulo
 * macizo que trae Elementor (e-eicon-caret-down).
 *
 * Se reemplaza por fondo y no editando el SVG: ese icono lo inyecta Elementor
 * al renderizar y volveria a aparecer al guardar el formulario desde el editor.
 *
 * El .elementor-field-type-select de mas no sobra: widget-form.min.css trae
 * ".elementor-select-wrapper .select-caret-down-wrapper svg{display:unset}",
 * misma especificidad que la nuestra y se encola despues, asi que sin ese
 * tercer selector gana Elementor y el triangulo sigue a la vista.
 */
.elementor-field-type-select .elementor-select-wrapper .select-caret-down-wrapper svg {
  display: none;
}

.elementor-field-type-select .elementor-select-wrapper .select-caret-down-wrapper {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23692556' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6'/%3E%3C/svg%3E") no-repeat center / contain;
}